imip-agent

Annotated htdocs/styles.css

249:d19ab80f5465
245:b0b6ce5bbe43
243:70562154ed5b
2015-02-03 Paul Boddie file changeset files shortlog Added some explanations of the various day-related functions.
paul@212 1 
/* Table styling. */
paul@212 2 
 
 paul@230      3 
table.calendar,
 
 paul@230      4 
table.object {
 
 paul@188      5 
    border: 2px solid #000;
 
 paul@188      6 
}
 
 paul@188      7 
 
 paul@188      8 
colgroup#columns-request {
 
 paul@188      9 
    background-color: #eef;
 
 paul@188     10 
}
 
 paul@188     11 
 
 paul@188     12 
colgroup#columns-freebusy {
 
 paul@188     13 
    background-color: #fee;
 
 paul@188     14 
}
 
 paul@188     15 
 
 paul@193     16 
th.requestheading {
 
 paul@193     17 
    background-color: #aaf;
 
 paul@193     18 
}
 
 paul@193     19 
 
 paul@193     20 
th.participantheading{
 
 paul@193     21 
    background-color: #faa;
 
 paul@193     22 
}
 
 paul@193     23 
 
 paul@212     24 
th.dayheading,
 
 paul@212     25 
th.mainheading {
 
 paul@188     26 
    background-color: #f85;
 
 paul@188     27 
}
 
 paul@188     28 
 
 paul@212     29 
th.timeslot,
 
 paul@212     30 
th.objectheading {
 
 paul@188     31 
    vertical-align: top;
 
 paul@212     32 
    white-space: nowrap;
 
 paul@212     33 
}
 
 paul@212     34 
 
 paul@212     35 
th.timeslot {
 
 paul@188     36 
    padding-top: 0;
 
 paul@188     37 
}
 
 paul@188     38 
 
 paul@241     39 
th.timeslot span.endpoint {
 
 paul@241     40 
    display: none;
 
 paul@241     41 
    font-size: smaller;
 
 paul@241     42 
}
 
 paul@241     43 
 
 paul@188     44 
td.event {
 
 paul@188     45 
    background-color: #af8;
 
 paul@188     46 
    border: 2px solid #000;
 
 paul@188     47 
}
 
 paul@189     48 
 
 paul@195     49 
td.event.continued {
 
 paul@195     50 
    border-top: 2px dotted #000;
 
 paul@195     51 
}
 
 paul@195     52 
 
 paul@195     53 
td.event.continues {
 
 paul@195     54 
    border-bottom: 2px dotted #000;
 
 paul@195     55 
}
 
 paul@195     56 
 
 paul@189     57 
td.event:target {
 
 paul@189     58 
    background-color: #5f4;
 
 paul@195     59 
    border-width: 4px;
 
 paul@189     60 
}
 
 paul@190     61 
 
 paul@190     62 
td.event a {
 
 paul@190     63 
    color: #009;
 
 paul@190     64 
}
 
 paul@196     65 
 
 paul@203     66 
/* Selection of slots/periods for new events. */
 
 paul@203     67 
 
 paul@196     68 
input.newevent {
 
 paul@196     69 
    display: none;
 
 paul@196     70 
}
 
 paul@196     71 
 
 paul@243     72 
th.container,
 
 paul@236     73 
td.container {
 
 paul@243     74 
    padding: 0; /* for regions covered by labels */
 
 paul@236     75 
}
 
 paul@236     76 
 
 paul@242     77 
th.dayheading:hover,
 
 paul@242     78 
th.dayheading:focus,
 
 paul@236     79 
th.timeslot:hover,
 
 paul@236     80 
th.timeslot:focus,
 
 paul@236     81 
td.container:hover,
 
 paul@236     82 
td.container:focus {
 
 paul@236     83 
    background-color: #af8;
 
 paul@196     84 
}
 
 paul@196     85 
 
 paul@243     86 
label.day,
 
 paul@243     87 
label.newevent.popup {
 
 paul@243     88 
    display: block; /* to make labels cover regions */
 
 paul@243     89 
    padding: 0.25em;
 
 paul@243     90 
}
 
 paul@243     91 
 
 paul@236     92 
label.newevent.popup {
 
 paul@236     93 
    visibility: hidden;
 
 paul@236     94 
    text-align: center;
 
 paul@196     95 
}
 
 paul@196     96 
 
 paul@236     97 
td.container:hover label.newevent.popup,
 
 paul@236     98 
td.container:focus label.newevent.popup {
 
 paul@236     99 
    visibility: visible;
 
 paul@196    100 
}
 
 paul@196    101 
 
 paul@196    102 
input.newevent:checked ~ .timepoint {
 
 paul@243    103 
    background-color: #5f4;
 
 paul@196    104 
    text-decoration: underline;
 
 paul@196    105 
}
 
 paul@203    106 
 
 paul@203    107 
/* Hiding/showing unused slots/periods. */
 
 paul@203    108 
 
 paul@203    109 
input#hideslots {
 
 paul@203    110 
    display: none;
 
 paul@203    111 
}
 
 paul@203    112 
 
 paul@230    113 
input#hideslots:checked ~ .controls label.enable[for=hideslots] {
 
 paul@230    114 
    display: none;
 
 paul@230    115 
}
 
 paul@230    116 
 
 paul@230    117 
input#hideslots:not(:checked) ~ .controls label.disable[for=hideslots] {
 
 paul@203    118 
    display: none;
 
 paul@203    119 
}
 
 paul@203    120 
 
 paul@230    121 
input#hideslots:checked ~ .calendar tr.slot.daystart.empty {
 
 paul@203    122 
    display: none;
 
 paul@203    123 
}
 
 paul@203    124 
 
 paul@231    125 
/* Hiding/showing busy slots/periods. */
 
 paul@231    126 
 
 paul@231    127 
input#hidebusy {
 
 paul@231    128 
    display: none;
 
 paul@231    129 
}
 
 paul@231    130 
 
 paul@231    131 
input#hidebusy:checked ~ .controls label.enable[for=hidebusy] {
 
 paul@231    132 
    display: none;
 
 paul@231    133 
}
 
 paul@231    134 
 
 paul@231    135 
input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy] {
 
 paul@231    136 
    display: none;
 
 paul@231    137 
}
 
 paul@231    138 
 
 paul@231    139 
input#hidebusy:checked ~ .calendar tr.slot.busy {
 
 paul@231    140 
    display: none;
 
 paul@231    141 
}
 
 paul@231    142 
 
 paul@241    143 
input#hidebusy:checked ~ .calendar th.timeslot span.endpoint {
 
 paul@241    144 
    display: block;
 
 paul@241    145 
}
 
 paul@241    146 
 
 paul@230    147 
label.enable,
 
 paul@230    148 
label.disable {
 
 paul@230    149 
    padding-left: 0.25em;
 
 paul@203    150 
}
 
 paul@237    151 
 
 paul@237    152 
label.hideslots {
 
 paul@237    153 
    border-left: 1em solid #faa; /* th.participantheading background-color */
 
 paul@237    154 
}
 
 paul@237    155 
 
 paul@237    156 
label.hidebusy {
 
 paul@237    157 
    border-left: 1em solid #af8; /* td.event background-color */
 
 paul@237    158 
}