imip-agent

Annotated htdocs/styles.css

1380:418b856973df
1268:32d5819bb6ae
2017-10-30 Paul Boddie file changeset files shortlog Merged changes from the default branch. client-editing-simplification
paul@923 1 
body {
paul@881 2 
    background-color: #fff;
paul@881 3 
}
paul@881 4 
 
 paul@923      5 
#user-navigation {
 
 paul@923      6 
    float: right;
 
 paul@923      7 
    clear: right;
 
 paul@923      8 
}
 
 paul@923      9 
 
 paul@923     10 
#user-navigation a {
 
 paul@923     11 
    background-color: #7bf;
 
 paul@923     12 
    color: #000;
 
 paul@923     13 
    text-decoration: none;
 
 paul@923     14 
    font-weight: bold;
 
 paul@923     15 
    padding: 0.25em;
 
 paul@923     16 
    border: 1px dotted #000;
 
 paul@923     17 
}
 
 paul@923     18 
 
 paul@881     19 
#participants {
 
 paul@881     20 
    float: right;
 
 paul@923     21 
    clear: right;
 
 paul@881     22 
}
 
 paul@881     23 
 
 paul@881     24 
#pending-requests {
 
 paul@881     25 
    float: left;
 
 paul@923     26 
    clear: left;
 
 paul@881     27 
}
 
 paul@881     28 
 
 paul@881     29 
#calendar-controls,
 
 paul@881     30 
#time-navigation,
 
 paul@913     31 
.view-period,
 
 paul@881     32 
div.calendar {
 
 paul@881     33 
    clear: both;
 
 paul@881     34 
}
 
 paul@881     35 
 
 paul@212     36 
/* Table styling. */
 
 paul@212     37 
 
 paul@869     38 
table.calendar {
 
 paul@869     39 
    min-width: 100%;
 
 paul@869     40 
    table-layout: fixed;
 
 paul@869     41 
}
 
 paul@869     42 
 
 paul@302     43 
table.conflicts,
 
 paul@766     44 
table.counters,
 
 paul@922     45 
table.profile,
 
 paul@427     46 
table.recurrence,
 
 paul@230     47 
table.object {
 
 paul@188     48 
    border: 2px solid #000;
 
 paul@188     49 
}
 
 paul@188     50 
 
 paul@188     51 
colgroup#columns-request {
 
 paul@188     52 
    background-color: #eef;
 
 paul@188     53 
}
 
 paul@188     54 
 
 paul@188     55 
colgroup#columns-freebusy {
 
 paul@188     56 
    background-color: #fee;
 
 paul@188     57 
}
 
 paul@188     58 
 
 paul@193     59 
th.requestheading {
 
 paul@193     60 
    background-color: #aaf;
 
 paul@193     61 
}
 
 paul@193     62 
 
 paul@193     63 
th.participantheading{
 
 paul@193     64 
    background-color: #faa;
 
 paul@193     65 
}
 
 paul@193     66 
 
 paul@772     67 
caption.dayheading,
 
 paul@212     68 
th.mainheading {
 
 paul@188     69 
    background-color: #f85;
 
 paul@772     70 
    width: 100%;
 
 paul@188     71 
}
 
 paul@188     72 
 
 paul@922     73 
table.profile th.mainheading {
 
 paul@922     74 
    background-color: #7bf;
 
 paul@922     75 
}
 
 paul@922     76 
 
 paul@212     77 
th.timeslot,
 
 paul@922     78 
th.profileheading,
 
 paul@212     79 
th.objectheading {
 
 paul@212     80 
    white-space: nowrap;
 
 paul@212     81 
}
 
 paul@212     82 
 
 paul@373     83 
th.objectheading {
 
 paul@373     84 
    background-color: #fca;
 
 paul@373     85 
}
 
 paul@373     86 
 
 paul@922     87 
th.profileheading {
 
 paul@922     88 
    background-color: #bef;
 
 paul@922     89 
    text-align: right;
 
 paul@922     90 
}
 
 paul@922     91 
 
 paul@212     92 
th.timeslot {
 
 paul@188     93 
    padding-top: 0;
 
 paul@325     94 
    vertical-align: top;
 
 paul@869     95 
    width: 10em;
 
 paul@188     96 
}
 
 paul@188     97 
 
 paul@241     98 
th.timeslot span.endpoint {
 
 paul@241     99 
    display: none;
 
 paul@241    100 
    font-size: smaller;
 
 paul@882    101 
    position: relative;
 
 paul@882    102 
    bottom: 0.25em;
 
 paul@241    103 
}
 
 paul@241    104 
 
 paul@188    105 
td.event {
 
 paul@275    106 
    background-color: #ff8;
 
 paul@275    107 
    border: 2px solid #000;
 
 paul@904    108 
}
 
 paul@904    109 
 
 paul@904    110 
td.empty:not(.padding),
 
 paul@904    111 
td.event {
 
 paul@772    112 
    width: 10em;
 
 paul@275    113 
}
 
 paul@275    114 
 
 paul@904    115 
td.empty.padding {
 
 paul@869    116 
    min-width: 10em;
 
 paul@869    117 
}
 
 paul@869    118 
 
 paul@486    119 
td.event.only-organising {
 
 paul@486    120 
    background-color: #afd;
 
 paul@486    121 
}
 
 paul@486    122 
 
 paul@275    123 
td.event.organising {
 
 paul@188    124 
    background-color: #af8;
 
 paul@188    125 
}
 
 paul@189    126 
 
 paul@195    127 
td.event.continued {
 
 paul@195    128 
    border-top: 2px dotted #000;
 
 paul@195    129 
}
 
 paul@195    130 
 
 paul@195    131 
td.event.continues {
 
 paul@195    132 
    border-bottom: 2px dotted #000;
 
 paul@195    133 
}
 
 paul@195    134 
 
 paul@189    135 
td.event:target {
 
 paul@328    136 
    border-width: 4px;
 
 paul@328    137 
    background-color: #ee2;
 
 paul@328    138 
}
 
 paul@328    139 
 
 paul@328    140 
td.event.organising:target {
 
 paul@189    141 
    background-color: #5f4;
 
 paul@189    142 
}
 
 paul@190    143 
 
 paul@190    144 
td.event a {
 
 paul@190    145 
    color: #009;
 
 paul@190    146 
}
 
 paul@196    147 
 
 paul@922    148 
th.profileheading.error,
 
 paul@415    149 
th.objectheading.error {
 
 paul@415    150 
    background-color: #f77;
 
 paul@299    151 
}
 
 paul@299    152 
 
 paul@315    153 
.partstat {
 
 paul@920    154 
    float: right;
 
 paul@315    155 
    margin-left: 1em;
 
 paul@324    156 
    background-color: #eee;
 
 paul@324    157 
}
 
 paul@324    158 
 
 paul@324    159 
.partstat,
 
 paul@324    160 
.partstat option {
 
 paul@315    161 
    padding: 0.25em;
 
 paul@315    162 
}
 
 paul@315    163 
 
 paul@324    164 
select.partstat {
 
 paul@324    165 
    background-color: #ccc;
 
 paul@324    166 
    padding: 0;
 
 paul@324    167 
    font-family: inherit;
 
 paul@324    168 
    font-size: inherit;
 
 paul@315    169 
}
 
 paul@315    170 
 
 paul@383    171 
.affected {
 
 paul@383    172 
    font-weight: bold;
 
 paul@383    173 
}
 
 paul@383    174 
 
 paul@500    175 
table.recurrence .replaced,
 
 paul@856    176 
table.conflicts .replaced,
 
 paul@856    177 
table.counters .replaced {
 
 paul@357    178 
    text-decoration: line-through;
 
 paul@357    179 
}
 
 paul@357    180 
 
 paul@784    181 
.objectvalue.dtstart.excluded,
 
 paul@487    182 
.objectvalue.dtstart.replaced {
 
 paul@487    183 
    vertical-align: top;
 
 paul@487    184 
}
 
 paul@487    185 
 
 paul@777    186 
table.counters tr.selected {
 
 paul@806    187 
    background-color: #af8;
 
 paul@777    188 
}
 
 paul@777    189 
 
 paul@850    190 
table.counters td,
 
 paul@850    191 
table.counters th {
 
 paul@850    192 
    vertical-align: top;
 
 paul@850    193 
}
 
 paul@850    194 
 
 paul@513    195 
/* New event controls. */
 
 paul@513    196 
 
 paul@513    197 
.newevent-with-periods {
 
 paul@513    198 
    display: none;
 
 paul@513    199 
}
 
 paul@513    200 
 
 paul@203    201 
/* Selection of slots/periods for new events. */
 
 paul@203    202 
 
 paul@249    203 
input.newevent.selector {
 
 paul@196    204 
    display: none;
 
 paul@196    205 
}
 
 paul@196    206 
 
 paul@773    207 
input.newevent.selector:checked ~ p.newevent-with-periods {
 
 paul@773    208 
    display: block;
 
 paul@767    209 
}
 
 paul@767    210 
 
 paul@243    211 
th.container,
 
 paul@236    212 
td.container {
 
 paul@243    213 
    padding: 0; /* for regions covered by labels */
 
 paul@236    214 
}
 
 paul@236    215 
 
 paul@772    216 
caption.dayheading:hover,
 
 paul@772    217 
caption.dayheading:focus,
 
 paul@236    218 
th.timeslot:hover,
 
 paul@236    219 
th.timeslot:focus,
 
 paul@236    220 
td.container:hover,
 
 paul@236    221 
td.container:focus {
 
 paul@236    222 
    background-color: #af8;
 
 paul@196    223 
}
 
 paul@196    224 
 
 paul@243    225 
label.day,
 
 paul@243    226 
label.newevent.popup {
 
 paul@243    227 
    display: block; /* to make labels cover regions */
 
 paul@243    228 
    padding: 0.25em;
 
 paul@243    229 
}
 
 paul@243    230 
 
 paul@236    231 
label.newevent.popup {
 
 paul@236    232 
    visibility: hidden;
 
 paul@236    233 
    text-align: center;
 
 paul@196    234 
}
 
 paul@196    235 
 
 paul@236    236 
td.container:hover label.newevent.popup,
 
 paul@236    237 
td.container:focus label.newevent.popup {
 
 paul@236    238 
    visibility: visible;
 
 paul@196    239 
}
 
 paul@196    240 
 
 paul@280    241 
/* Hiding/showing busy slots/periods or unused days. */
 
 paul@279    242 
 
 paul@279    243 
/* Hide the controls. */
 
 paul@203    244 
 
 paul@876    245 
input#earlier,
 
 paul@876    246 
input#later,
 
 paul@926    247 
input#earlier-events,
 
 paul@926    248 
input#later-events,
 
 paul@279    249 
input#hidebusy,
 
 paul@281    250 
input#showdays,
 
 paul@279    251 
 
 paul@279    252 
/* Hide the enable labels when controls are already enabled. */
 
 paul@288    253 
/* Hide the disable labels when controls are already disabled. */
 
 paul@203    254 
 
 paul@279    255 
input#hidebusy:checked ~ .controls label.enable[for=hidebusy],
 
 paul@288    256 
input#showdays:checked ~ .controls label.disable[for=showdays],
 
 paul@279    257 
input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy],
 
 paul@288    258 
input#showdays:not(:checked) ~ .controls label.enable[for=showdays],
 
 paul@203    259 
 
 paul@279    260 
/* Hide calendar rows depending on the selected controls. */
 
 paul@279    261 
 
 paul@773    262 
input#hidebusy:checked ~ div.calendar tr.slot.busy,
 
 paul@773    263 
input#showdays:not(:checked) ~ div.calendar .calendar.empty,
 
 paul@241    264 
 
 paul@886    265 
/* Hiding/showing start/end times. */
 
 paul@290    266 
 
 paul@300    267 
input#dttimes-enable,
 
 paul@290    268 
input#dtend-enable,
 
 paul@427    269 
input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled,
 
 paul@300    270 
input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled,
 
 paul@427    271 
input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled,
 
 paul@308    272 
input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled,
 
 paul@308    273 
 
 paul@308    274 
/* Hiding/showing remove/uninvite labels. */
 
 paul@308    275 
 
 paul@315    276 
input.add,
 
 paul@308    277 
input.remove,
 
 paul@308    278 
input.remove:checked ~ label.remove,
 
 paul@396    279 
input.remove:not(:checked) ~ label.removed,
 
 paul@1268    280 
input.restore,
 
 paul@1268    281 
input.restore:checked ~ label.restore,
 
 paul@1268    282 
input.restore:not(:checked) ~ label.restored,
 
 paul@396    283 
 
 paul@473    284 
/* Hide the participation refresh control, selected using a label. */
 
 paul@473    285 
 
 paul@473    286 
input.refresh,
 
 paul@473    287 
 
 paul@396    288 
/* Hide the reset control, selected using a label. */
 
 paul@396    289 
 
 paul@396    290 
input#reset {
 
 paul@290    291 
    display: none;
 
 paul@290    292 
}
 
 paul@290    293 
 
 paul@886    294 
/* Hiding/showing end datetimes and start/end times. */
 
 paul@886    295 
 
 paul@886    296 
input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled,
 
 paul@886    297 
input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled {
 
 paul@886    298 
    visibility: hidden;
 
 paul@886    299 
}
 
 paul@886    300 
 
 paul@308    301 
/* Show slot endpoints when hiding adjacent busy periods. */
 
 paul@308    302 
 
 paul@773    303 
input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint {
 
 paul@308    304 
    display: block;
 
 paul@308    305 
}
 
 paul@308    306 
 
 paul@1000    307 
/* Separate the ignore control. */
 
 paul@1000    308 
 
 paul@1000    309 
input.ignore {
 
 paul@1000    310 
    margin-left: 2em;
 
 paul@1000    311 
}
 
 paul@1000    312 
 
 paul@775    313 
/* Make calendar labels occupy cells completely.
 
 paul@775    314 
   See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td
 
 paul@775    315 
*/
 
 paul@775    316 
 
 paul@775    317 
tr.slot {
 
 paul@775    318 
    height: 0;
 
 paul@775    319 
}
 
 paul@775    320 
 
 paul@775    321 
th.timeslot,
 
 paul@775    322 
td.empty {
 
 paul@775    323 
    height: 100%;
 
 paul@775    324 
}
 
 paul@775    325 
 
 paul@775    326 
label.timepoint,
 
 paul@775    327 
label.newevent {
 
 paul@775    328 
    display: block;
 
 paul@775    329 
    min-height: 100%;
 
 paul@775    330 
}
 
 paul@775    331 
 
 paul@279    332 
/* Style the labels. */
 
 paul@279    333 
 
 paul@876    334 
label.earlier,
 
 paul@876    335 
label.later,
 
 paul@930    336 
label.earlier-events,
 
 paul@930    337 
label.later-events,
 
 paul@471    338 
label.day,
 
 paul@471    339 
label.timepoint,
 
 paul@471    340 
label.newevent,
 
 paul@471    341 
.dt.disabled label,
 
 paul@471    342 
.dt.enabled label,
 
 paul@886    343 
.date.disabled label,
 
 paul@886    344 
.date.enabled label,
 
 paul@471    345 
label.add,
 
 paul@471    346 
label.remove,
 
 paul@471    347 
label.removed,
 
 paul@1268    348 
label.restore,
 
 paul@1268    349 
label.restored,
 
 paul@471    350 
label.hidebusy,
 
 paul@471    351 
label.showdays,
 
 paul@471    352 
label.reset {
 
 paul@471    353 
    cursor: pointer;
 
 paul@471    354 
}
 
 paul@471    355 
 
 paul@315    356 
label.add,
 
 paul@308    357 
label.remove,
 
 paul@1268    358 
label.removed,
 
 paul@1268    359 
label.restore,
 
 paul@1268    360 
label.restored {
 
 paul@308    361 
    float: right;
 
 paul@701    362 
    text-align: right;
 
 paul@701    363 
}
 
 paul@701    364 
 
 paul@701    365 
label.add span.action,
 
 paul@701    366 
label.remove span.action,
 
 paul@1268    367 
label.removed span.action,
 
 paul@1268    368 
label.restore span.action,
 
 paul@1268    369 
label.restored span.action {
 
 paul@701    370 
    font-size: smaller;
 
 paul@701    371 
    display: block;
 
 paul@308    372 
}
 
 paul@308    373 
 
 paul@500    374 
p label.add,
 
 paul@500    375 
p label.remove,
 
 paul@1268    376 
p label.removed,
 
 paul@1268    377 
p label.restore,
 
 paul@1268    378 
p label.restored {
 
 paul@500    379 
    float: none;
 
 paul@500    380 
}
 
 paul@500    381 
 
 paul@876    382 
label.earlier,
 
 paul@876    383 
label.later,
 
 paul@930    384 
label.earlier-events,
 
 paul@930    385 
label.later-events,
 
 paul@300    386 
.dt.disabled label,
 
 paul@300    387 
.dt.enabled label,
 
 paul@886    388 
.date.disabled label,
 
 paul@886    389 
.date.enabled label,
 
 paul@315    390 
label.add,
 
 paul@308    391 
label.remove,
 
 paul@308    392 
label.removed,
 
 paul@1268    393 
label.restore,
 
 paul@1268    394 
label.restored,
 
 paul@300    395 
label.hidebusy,
 
 paul@396    396 
label.showdays,
 
 paul@396    397 
label.reset {
 
 paul@300    398 
    color: #009;
 
 paul@300    399 
    text-decoration: underline;
 
 paul@300    400 
}
 
 paul@300    401 
 
 paul@412    402 
.dt.disabled label,
 
 paul@886    403 
.dt.enabled label,
 
 paul@886    404 
.date.disabled label,
 
 paul@886    405 
.date.enabled label {
 
 paul@402    406 
    display: inline-block;
 
 paul@412    407 
}
 
 paul@412    408 
 
 paul@886    409 
.dt.enabled label,
 
 paul@886    410 
.date.enabled label {
 
 paul@290    411 
    margin-top: 0.25em;
 
 paul@290    412 
}
 
 paul@290    413 
 
 paul@876    414 
label.earlier,
 
 paul@876    415 
label.later,
 
 paul@930    416 
label.earlier-events,
 
 paul@930    417 
label.later-events,
 
 paul@300    418 
label.hidebusy,
 
 paul@396    419 
label.showdays,
 
 paul@396    420 
label.reset {
 
 paul@230    421 
    padding-left: 0.25em;
 
 paul@203    422 
}
 
 paul@237    423 
 
 paul@876    424 
label.earlier {
 
 paul@876    425 
    border-left: 1em solid #f85;
 
 paul@876    426 
}
 
 paul@876    427 
 
 paul@876    428 
label.later {
 
 paul@876    429 
    border-left: 1em solid #f85;
 
 paul@876    430 
}
 
 paul@876    431 
 
 paul@930    432 
label.earlier-events {
 
 paul@930    433 
    border-left: 1em solid #d52;
 
 paul@930    434 
}
 
 paul@930    435 
 
 paul@930    436 
label.later-events {
 
 paul@930    437 
    border-left: 1em solid #d52;
 
 paul@930    438 
}
 
 paul@930    439 
 
 paul@281    440 
label.showdays {
 
 paul@237    441 
    border-left: 1em solid #faa; /* th.participantheading background-color */
 
 paul@237    442 
}
 
 paul@237    443 
 
 paul@237    444 
label.hidebusy {
 
 paul@237    445 
    border-left: 1em solid #af8; /* td.event background-color */
 
 paul@237    446 
}
 
 paul@396    447 
 
 paul@396    448 
label.reset {
 
 paul@806    449 
    border-left: 1em solid #5f4;
 
 paul@396    450 
}