imip-agent

htdocs/styles.css

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