imip-agent

Annotated htdocs/styles.css

427:d6466d09eb7e
420:d79aa0aad5f3
415:fd74a7906c4c
2015-03-22 Paul Boddie file changeset files shortlog Introduced comments, docstrings and some minor simplifications.
paul@212 1 
/* Table styling. */
paul@212 2 
 
 paul@230      3 
table.calendar,
 
 paul@302      4 
table.conflicts,
 
 paul@385      5 
table.recurrences,
 
 paul@230      6 
table.object {
 
 paul@188      7 
    border: 2px solid #000;
 
 paul@188      8 
}
 
 paul@188      9 
 
 paul@188     10 
colgroup#columns-request {
 
 paul@188     11 
    background-color: #eef;
 
 paul@188     12 
}
 
 paul@188     13 
 
 paul@188     14 
colgroup#columns-freebusy {
 
 paul@188     15 
    background-color: #fee;
 
 paul@188     16 
}
 
 paul@188     17 
 
 paul@193     18 
th.requestheading {
 
 paul@193     19 
    background-color: #aaf;
 
 paul@193     20 
}
 
 paul@193     21 
 
 paul@193     22 
th.participantheading{
 
 paul@193     23 
    background-color: #faa;
 
 paul@193     24 
}
 
 paul@193     25 
 
 paul@212     26 
th.dayheading,
 
 paul@212     27 
th.mainheading {
 
 paul@188     28 
    background-color: #f85;
 
 paul@188     29 
}
 
 paul@188     30 
 
 paul@212     31 
th.timeslot,
 
 paul@212     32 
th.objectheading {
 
 paul@212     33 
    white-space: nowrap;
 
 paul@212     34 
}
 
 paul@212     35 
 
 paul@373     36 
th.objectheading {
 
 paul@373     37 
    background-color: #fca;
 
 paul@373     38 
}
 
 paul@373     39 
 
 paul@212     40 
th.timeslot {
 
 paul@188     41 
    padding-top: 0;
 
 paul@325     42 
    vertical-align: top;
 
 paul@188     43 
}
 
 paul@188     44 
 
 paul@241     45 
th.timeslot span.endpoint {
 
 paul@241     46 
    display: none;
 
 paul@241     47 
    font-size: smaller;
 
 paul@241     48 
}
 
 paul@241     49 
 
 paul@188     50 
td.event {
 
 paul@275     51 
    background-color: #ff8;
 
 paul@275     52 
    border: 2px solid #000;
 
 paul@275     53 
}
 
 paul@275     54 
 
 paul@275     55 
td.event.organising {
 
 paul@188     56 
    background-color: #af8;
 
 paul@188     57 
}
 
 paul@189     58 
 
 paul@195     59 
td.event.continued {
 
 paul@195     60 
    border-top: 2px dotted #000;
 
 paul@195     61 
}
 
 paul@195     62 
 
 paul@195     63 
td.event.continues {
 
 paul@195     64 
    border-bottom: 2px dotted #000;
 
 paul@195     65 
}
 
 paul@195     66 
 
 paul@189     67 
td.event:target {
 
 paul@328     68 
    border-width: 4px;
 
 paul@328     69 
    background-color: #ee2;
 
 paul@328     70 
}
 
 paul@328     71 
 
 paul@328     72 
td.event.organising:target {
 
 paul@189     73 
    background-color: #5f4;
 
 paul@189     74 
}
 
 paul@190     75 
 
 paul@190     76 
td.event a {
 
 paul@190     77 
    color: #009;
 
 paul@190     78 
}
 
 paul@196     79 
 
 paul@415     80 
th.objectheading.error {
 
 paul@415     81 
    background-color: #f77;
 
 paul@299     82 
}
 
 paul@299     83 
 
 paul@315     84 
.partstat {
 
 paul@315     85 
    margin-left: 1em;
 
 paul@324     86 
    background-color: #eee;
 
 paul@324     87 
}
 
 paul@324     88 
 
 paul@324     89 
.partstat,
 
 paul@324     90 
.partstat option {
 
 paul@315     91 
    padding: 0.25em;
 
 paul@315     92 
}
 
 paul@315     93 
 
 paul@324     94 
select.partstat {
 
 paul@324     95 
    background-color: #ccc;
 
 paul@324     96 
    padding: 0;
 
 paul@324     97 
    font-family: inherit;
 
 paul@324     98 
    font-size: inherit;
 
 paul@315     99 
}
 
 paul@315    100 
 
 paul@383    101 
.affected {
 
 paul@383    102 
    font-weight: bold;
 
 paul@383    103 
}
 
 paul@383    104 
 
 paul@357    105 
.replaced {
 
 paul@357    106 
    text-decoration: line-through;
 
 paul@357    107 
}
 
 paul@357    108 
 
 paul@203    109 
/* Selection of slots/periods for new events. */
 
 paul@203    110 
 
 paul@249    111 
input.newevent.selector {
 
 paul@196    112 
    display: none;
 
 paul@196    113 
}
 
 paul@196    114 
 
 paul@243    115 
th.container,
 
 paul@236    116 
td.container {
 
 paul@243    117 
    padding: 0; /* for regions covered by labels */
 
 paul@236    118 
}
 
 paul@236    119 
 
 paul@242    120 
th.dayheading:hover,
 
 paul@242    121 
th.dayheading:focus,
 
 paul@236    122 
th.timeslot:hover,
 
 paul@236    123 
th.timeslot:focus,
 
 paul@236    124 
td.container:hover,
 
 paul@236    125 
td.container:focus {
 
 paul@236    126 
    background-color: #af8;
 
 paul@196    127 
}
 
 paul@196    128 
 
 paul@243    129 
label.day,
 
 paul@243    130 
label.newevent.popup {
 
 paul@243    131 
    display: block; /* to make labels cover regions */
 
 paul@243    132 
    padding: 0.25em;
 
 paul@243    133 
}
 
 paul@243    134 
 
 paul@236    135 
label.newevent.popup {
 
 paul@236    136 
    visibility: hidden;
 
 paul@236    137 
    text-align: center;
 
 paul@196    138 
}
 
 paul@196    139 
 
 paul@236    140 
td.container:hover label.newevent.popup,
 
 paul@236    141 
td.container:focus label.newevent.popup {
 
 paul@236    142 
    visibility: visible;
 
 paul@196    143 
}
 
 paul@196    144 
 
 paul@196    145 
input.newevent:checked ~ .timepoint {
 
 paul@243    146 
    background-color: #5f4;
 
 paul@196    147 
    text-decoration: underline;
 
 paul@196    148 
}
 
 paul@203    149 
 
 paul@280    150 
/* Hiding/showing busy slots/periods or unused days. */
 
 paul@279    151 
 
 paul@279    152 
/* Hide the controls. */
 
 paul@203    153 
 
 paul@279    154 
input#hidebusy,
 
 paul@281    155 
input#showdays,
 
 paul@279    156 
 
 paul@279    157 
/* Hide the enable labels when controls are already enabled. */
 
 paul@288    158 
/* Hide the disable labels when controls are already disabled. */
 
 paul@203    159 
 
 paul@279    160 
input#hidebusy:checked ~ .controls label.enable[for=hidebusy],
 
 paul@288    161 
input#showdays:checked ~ .controls label.disable[for=showdays],
 
 paul@279    162 
input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy],
 
 paul@288    163 
input#showdays:not(:checked) ~ .controls label.enable[for=showdays],
 
 paul@203    164 
 
 paul@279    165 
/* Hide calendar rows depending on the selected controls. */
 
 paul@279    166 
 
 paul@279    167 
input#hidebusy:checked ~ .calendar tr.slot.busy,
 
 paul@282    168 
input#showdays:not(:checked) ~ .calendar thead.separator.empty,
 
 paul@308    169 
input#showdays:not(:checked) ~ .calendar tbody.points.empty,
 
 paul@241    170 
 
 paul@300    171 
/* Hiding/showing end datetimes and start/end times. */
 
 paul@290    172 
 
 paul@300    173 
input#dttimes-disable,
 
 paul@300    174 
input#dttimes-enable,
 
 paul@290    175 
input#dtend-disable,
 
 paul@290    176 
input#dtend-enable,
 
 paul@300    177 
input#dttimes-disable:checked ~ .object td.objectvalue .time.enabled,
 
 paul@300    178 
input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled,
 
 paul@300    179 
input#dtend-disable:checked ~ .object td.objectvalue.dtend .dt.enabled,
 
 paul@308    180 
input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled,
 
 paul@308    181 
 
 paul@308    182 
/* Hiding/showing remove/uninvite labels. */
 
 paul@308    183 
 
 paul@315    184 
input.add,
 
 paul@308    185 
input.remove,
 
 paul@308    186 
input.remove:checked ~ label.remove,
 
 paul@396    187 
input.remove:not(:checked) ~ label.removed,
 
 paul@396    188 
 
 paul@396    189 
/* Hide the reset control, selected using a label. */
 
 paul@396    190 
 
 paul@396    191 
input#reset {
 
 paul@290    192 
    display: none;
 
 paul@290    193 
}
 
 paul@290    194 
 
 paul@308    195 
/* Show slot endpoints when hiding adjacent busy periods. */
 
 paul@308    196 
 
 paul@308    197 
input#hidebusy:checked ~ .calendar th.timeslot span.endpoint {
 
 paul@308    198 
    display: block;
 
 paul@308    199 
}
 
 paul@308    200 
 
 paul@279    201 
/* Style the labels. */
 
 paul@279    202 
 
 paul@315    203 
label.add,
 
 paul@308    204 
label.remove,
 
 paul@308    205 
label.removed {
 
 paul@308    206 
    float: right;
 
 paul@308    207 
}
 
 paul@308    208 
 
 paul@300    209 
.dt.disabled label,
 
 paul@300    210 
.dt.enabled label,
 
 paul@315    211 
label.add,
 
 paul@308    212 
label.remove,
 
 paul@308    213 
label.removed,
 
 paul@300    214 
label.hidebusy,
 
 paul@396    215 
label.showdays,
 
 paul@396    216 
label.reset {
 
 paul@300    217 
    color: #009;
 
 paul@300    218 
    text-decoration: underline;
 
 paul@300    219 
}
 
 paul@300    220 
 
 paul@412    221 
.dt.disabled label,
 
 paul@300    222 
.dt.enabled label {
 
 paul@402    223 
    display: inline-block;
 
 paul@412    224 
}
 
 paul@412    225 
 
 paul@412    226 
.dt.enabled label {
 
 paul@290    227 
    margin-top: 0.25em;
 
 paul@290    228 
}
 
 paul@290    229 
 
 paul@300    230 
label.hidebusy,
 
 paul@396    231 
label.showdays,
 
 paul@396    232 
label.reset {
 
 paul@230    233 
    padding-left: 0.25em;
 
 paul@203    234 
}
 
 paul@237    235 
 
 paul@281    236 
label.showdays {
 
 paul@237    237 
    border-left: 1em solid #faa; /* th.participantheading background-color */
 
 paul@237    238 
}
 
 paul@237    239 
 
 paul@237    240 
label.hidebusy {
 
 paul@237    241 
    border-left: 1em solid #af8; /* td.event background-color */
 
 paul@237    242 
}
 
 paul@396    243 
 
 paul@396    244 
label.reset {
 
 paul@396    245 
    border-left: 1em solid #5f4; /* (selected) .timepoint background-color */
 
 paul@396    246 
}