prune sim: fine tune calendar layout/style

Avoid black on white, to much contrast hurts the eye, use a dark grey
instead.

Highlight Sundays, and show month boundaries explicitly with strong
dashed border.

Factor out some manual set styles to classes and use them instead,
decoupling logic and styling a bit more.

Use span elements for plain text stuff, which should not be a block
(e.g., div) element.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht
2020-11-07 13:37:54 +01:00
parent 1f4befe136
commit 435a6c5e0a
2 changed files with 40 additions and 14 deletions

View File

@ -6,6 +6,31 @@
<title>PBS Prune Simulator</title>
<link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">
<style>
.cal-day {
vertical-align: top;
width: 150px;
border: #939393 1px solid;
color: #454545;
}
.cal-day-date {
border-bottom: #444 1px solid;
color: #000;
}
.strikethrough {
text-decoration: line-through;
}
.black {
color: #000;
}
.sun {
background-color: #ededed;
}
.first-of-month {
border-right: dashed black 4px;
}
</style>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="prune-simulator.js"></script>
</head>