imip-agent

htdocs/styles.css

775:bbf4ff470062
2015-09-27 Paul Boddie Make calendar selection labels occupy table cells completely. 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-with-periods {   133     display: block;   134 }   135    136 th.container,   137 td.container {   138     padding: 0; /* for regions covered by labels */   139 }   140    141 caption.dayheading:hover,   142 caption.dayheading:focus,   143 th.timeslot:hover,   144 th.timeslot:focus,   145 td.container:hover,   146 td.container:focus {   147     background-color: #af8;   148 }   149    150 label.day,   151 label.newevent.popup {   152     display: block; /* to make labels cover regions */   153     padding: 0.25em;   154 }   155    156 label.newevent.popup {   157     visibility: hidden;   158     text-align: center;   159 }   160    161 td.container:hover label.newevent.popup,   162 td.container:focus label.newevent.popup {   163     visibility: visible;   164 }   165    166 /* Hiding/showing busy slots/periods or unused days. */   167    168 /* Hide the controls. */   169    170 input#hidebusy,   171 input#showdays,   172    173 /* Hide the enable labels when controls are already enabled. */   174 /* Hide the disable labels when controls are already disabled. */   175    176 input#hidebusy:checked ~ .controls label.enable[for=hidebusy],   177 input#showdays:checked ~ .controls label.disable[for=showdays],   178 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy],   179 input#showdays:not(:checked) ~ .controls label.enable[for=showdays],   180    181 /* Hide calendar rows depending on the selected controls. */   182    183 input#hidebusy:checked ~ div.calendar tr.slot.busy,   184 input#showdays:not(:checked) ~ div.calendar .calendar.empty,   185    186 /* Hiding/showing end datetimes and start/end times. */   187    188 input#dttimes-enable,   189 input#dtend-enable,   190 input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled,   191 input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled,   192 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled,   193 input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled,   194    195 /* Hiding/showing remove/uninvite labels. */   196    197 input.add,   198 input.remove,   199 input.remove:checked ~ label.remove,   200 input.remove:not(:checked) ~ label.removed,   201    202 /* Hide the participation refresh control, selected using a label. */   203    204 input.refresh,   205    206 /* Hide the reset control, selected using a label. */   207    208 input#reset {   209     display: none;   210 }   211    212 /* Show slot endpoints when hiding adjacent busy periods. */   213    214 input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint {   215     display: block;   216 }   217    218 /* Make calendar labels occupy cells completely.   219    See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td   220 */   221    222 tr.slot {   223     height: 0;   224 }   225    226 th.timeslot,   227 td.empty {   228     height: 100%;   229 }   230    231 label.timepoint,   232 label.newevent {   233     display: block;   234     min-height: 100%;   235 }   236    237 /* Style the labels. */   238    239 label.day,   240 label.timepoint,   241 label.newevent,   242 .dt.disabled label,   243 .dt.enabled label,   244 label.add,   245 label.remove,   246 label.removed,   247 label.hidebusy,   248 label.showdays,   249 label.reset {   250     cursor: pointer;   251 }   252    253 label.add,   254 label.remove,   255 label.removed {   256     float: right;   257     text-align: right;   258 }   259    260 label.add span.action,   261 label.remove span.action,   262 label.removed span.action {   263     font-size: smaller;   264     display: block;   265 }   266    267 p label.add,   268 p label.remove,   269 p label.removed {   270     float: none;   271 }   272    273 .dt.disabled label,   274 .dt.enabled label,   275 label.add,   276 label.remove,   277 label.removed,   278 label.hidebusy,   279 label.showdays,   280 label.reset {   281     color: #009;   282     text-decoration: underline;   283 }   284    285 .dt.disabled label,   286 .dt.enabled label {   287     display: inline-block;   288 }   289    290 .dt.enabled label {   291     margin-top: 0.25em;   292 }   293    294 label.hidebusy,   295 label.showdays,   296 label.reset {   297     padding-left: 0.25em;   298 }   299    300 label.showdays {   301     border-left: 1em solid #faa; /* th.participantheading background-color */   302 }   303    304 label.hidebusy {   305     border-left: 1em solid #af8; /* td.event background-color */   306 }   307    308 label.reset {   309     border-left: 1em solid #5f4; /* (selected) .timepoint background-color */   310 }