` shares the container. FormRenderer renders its card as a `` (CARD_WRAP), and that
* is the only reason it held.
*
* (The exempting selector is deliberately NOT spelled out here: a test asserts it is absent from this
* file, and prose quoting it would fail that test. Same trap as a mutation probe matching its own
* explanation.)
*
* Somebody making that card a `` - a plausible semantic tidy-up - would leave
* `:first-of-type` matching nothing, every employee would get a break before it, and EVERY PRINTOUT
* WOULD START WITH A BLANK SHEET. Silently, in print, where nobody is looking.
*
* `~` says "every employee preceded by another employee", which is all of them but the first. It
* needs no exemption, it cares about nothing but this class, and it survives both a changed tag
* elsewhere and anything inserted between the cards. Found by review-2, which traced every element
* in the container rather than reading the rule.
*/
.month-list-employee ~ .month-list-employee {
break-before: page;
}
/*
* The chrome, and SCOPED TO THIS PAGE on purpose. `.page-head` and `.filter-card` are the whole
* module's, so hiding them unscoped would change what every other page prints - a change nobody
* asked for. `page-month-list` was added to the page's own div for exactly this.
*/
.page-month-list .page-head,
.page-month-list .filter-card,
.page-month-list .login-as-banner {
display: none;
}
/*
* A day row must not be split across two sheets, and the employee's name has to stay with their
* table - a heading alone at the foot of a page is the defect the manual rules name above.
*/
.month-list-employee > h2 {
break-after: avoid;
}
.month-list-employee tr {
break-inside: avoid;
}
/*
* A4 PORTRAIT, AND FOR THIS PAGE ONLY - EX-1583, Stefanie Kelz 09.10.2026: "Hochformat". A named
* page rather than a bare @page, which would turn every printout of the admin to portrait; only the
* month list's own div asks for it. Possible since the month list shows ten columns instead of
* fourteen (dayTable.php, $dayTableHideBalance).
*/
.page-month-list {
page: month-list;
}
@page month-list {
size: A4 portrait;
}
}
/* --------------------------------------------------------------- Photo studio */
/*
* A remark in the course of an issue.
*
* Several of them stand one below the other - in the list inside a table cell, on the article page
* inside a card. The line on the left keeps them apart without each needing a box of its own; the
* last one carries no bottom margin, otherwise the cell would sit crooked.
*/
.issue-note {
border-left: 2px solid var(--border);
padding-left: 10px;
margin-bottom: 10px;
}
.issue-note:last-child {
margin-bottom: 0;
}
.issue-note .field-hint {
margin-top: 2px;
}
/*
* A settled issue on the article page.
*
* It stands there so that the second time round one reads why it did not go easily the first time
* - but it is no longer a task, and should not look like one either. Hence paler than the open
* case above it and without a border of its own: a second box next to the first would double the
* weight of the matter.
*
* The line on the left separates several of them. The last one carries no bottom margin, otherwise
* the card would sit crooked at the bottom.
*/
.issue-settled {
opacity: .75;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.issue-settled:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* --- Releasing images ---------------------------------------------------- */
/*
* One block per image: the view on the left, the type on the right. Large enough to tell front
* from back - on a postage stamp that is impossible, and it is exactly the question here.
*/
.release-image {
display: grid;
grid-template-columns: minmax(180px, 320px) 1fr;
gap: 20px;
margin-bottom: 16px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: var(--radius);
}
/* What is open catches the eye; what already has a type is only there to look at. */
.release-image.is-open {
border-left-color: var(--brand);
}
/*
* An old image the release is about to delete - see ImageReleaseService::deleteReplacedImages().
* Shown so whoever releases sees what goes, and set apart so nobody mistakes it for a new one.
*/
.release-image.is-replaced {
border-left-color: var(--bad);
background: var(--bad-bg);
}
.release-image-view {
display: flex;
align-items: flex-start;
justify-content: center;
}
.release-image-view img {
max-width: 100%;
max-height: 320px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-alt);
}
.release-image-side {
display: flex;
flex-direction: column;
gap: 14px;
}
.release-image-head .field-hint {
display: block;
margin-top: 4px;
}
.release-types {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/*
* The type as a row of buttons. Radio fields lie beneath them: that way the page gets by without
* a script, the keyboard operates it by itself, and the browser holds the choice together.
*/
.release-type input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.release-type span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 13px;
cursor: pointer;
}
.release-type span:hover {
border-color: var(--brand);
}
.release-type input:checked + span {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
/* Visible where the keyboard points - without an outline the field would be invisible. */
.release-type input:focus-visible + span {
outline: 2px solid var(--brand-dark);
outline-offset: 2px;
}
@media (max-width: 720px) {
.release-image {
grid-template-columns: 1fr;
}
}
.image-overlay-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.image-overlay-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-overlay-body {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow: auto;
}
/* What is left after the head bar and the padding - see .image-overlay-head. */
.image-overlay-body img {
max-width: 100%;
max-height: calc(90vh - 90px);
object-fit: contain;
}
.image-thumb {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.image-table .image-name {
font-weight: 600;
word-break: break-word;
}
.image-position {
width: 84px;
}
/* ------------------------------------------------------ Orders and finances */
.pii-state {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.pii-changed {
color: var(--text-muted);
font-size: 12px;
}
/* ==========================================================================
Incoming payments: recognised order number and notice
========================================================================== */
/*
* The order number recognised in the payment reference - see OrderReferenceHighlighter.
*
* Deliberately not green. Green on this screen means the amount matches the order, and the
* recognised number says nothing of the kind - it only points at what was found. It wore the brand
* green before, close enough to the green of a matching amount that the two read as one statement.
*/
mark.order-ref {
padding: 1px 5px;
border-radius: 4px;
background: var(--highlight-bg);
color: var(--highlight);
font-weight: 600;
white-space: nowrap;
cursor: help;
}
/*
* Whether the amount matches is carried by the whole row, not only by the badge at its end, so the
* exceptions can be seen without reading a single number.
*
* The tint sits on the row rather than on the cells: hovering paints a translucent grey onto the
* cells, and that only composites into something readable if it has a colour underneath.
*/
table.data-table tbody tr.amount-match {
background: var(--good-row);
}
table.data-table tbody tr.amount-mismatch {
background: var(--bad-row);
}
/* ------------------------------------------------------------------ Articles */
/*
* The channel prices stand collapsed on the article page - they are lengthy and not wanted on
* every visit. brings the opening and closing along, and needs no script for it.
*/
.price-details > .price-summary {
display: flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
list-style: none;
}
.price-details > .price-summary::-webkit-details-marker {
display: none;
}
.price-details > .price-summary::before {
content: '▸';
color: var(--text-muted);
}
.price-details[open] > .price-summary::before {
content: '▾';
}
.price-details[open] > .price-summary {
margin-bottom: 6px;
}
.price-group + .price-group {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.price-group-title {
margin: 0 0 10px;
font-size: 15px;
font-weight: 600;
}
/* Article card of the channel prices: image on the left, details beside it. */
.item-card {
display: flex;
align-items: flex-start;
gap: 16px;
}
.item-card-image {
flex: 0 0 auto;
width: 96px;
height: 96px;
object-fit: contain;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.item-card-image-empty {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
color: var(--text-muted);
font-size: 11px;
text-align: center;
}
.item-card-text {
min-width: 0;
}
/* ----------------------------------------------------- Time tracking: status */
/* --- Status page -------------------------------------------------------- */
.time-tracking-status {
/* At a desk there is room - the requests per type need it. */
max-width: 60rem;
margin: 0 auto;
}
.time-tracking-status .status-header {
display: grid;
grid-template-columns: 1fr auto;
/* The day navigation stretches to the height of the name column, so no gap is left on the right. */
align-items: stretch;
gap: .5rem;
margin-bottom: 1rem;
}
.time-tracking-status .status-header .employee .name {
font-size: 1.9rem;
font-weight: bold;
line-height: 1.2;
}
.time-tracking-status .date-navigation {
display: flex;
align-items: stretch;
gap: .3rem;
}
.time-tracking-status .date-navigation .date {
display: flex;
align-items: center;
justify-content: center;
min-width: 9rem;
padding: 0 .5rem;
border: 1px solid var(--ze-grey);
border-radius: .3rem;
background-color: var(--ze-light-grey);
text-align: center;
}
.time-tracking-status .date-navigation .date.today {
font-weight: bold;
}
.time-tracking-status .status-card {
padding: 1.5rem;
border: 1px solid var(--ze-grey);
border-radius: .5rem;
background-color: var(--ze-light-grey);
text-align: center;
}
.time-tracking-status .status-card.active {
border-color: var(--ze-success);
background-color: var(--ze-success-bg);
}
.time-tracking-status .status-card .state {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
color: var(--ze-dark-grey);
}
.time-tracking-status .status-card .state .indicator {
display: inline-block;
width: .7rem;
height: .7rem;
border-radius: 50%;
background-color: var(--ze-grey);
}
.time-tracking-status .status-card.active .state {
color: var(--ze-success);
font-weight: bold;
}
.time-tracking-status .status-card.active .state .indicator {
background-color: var(--ze-success);
animation: timeTrackingPulse 2s ease-in-out infinite;
}
.time-tracking-status .status-card .current {
margin-top: .5rem;
font-size: 3.5rem;
font-weight: bold;
line-height: 1.1;
/* So the digits do not jump while counting up. */
font-variant-numeric: tabular-nums;
}
.time-tracking-status .status-card .current-label {
color: var(--ze-dark-grey);
}
.time-tracking-status .status-card .todo-select {
margin-top: 1.5rem;
text-align: left;
}
.time-tracking-status .status-card .todo-select label {
margin-bottom: .2rem;
font-weight: bold;
}
/* Notices above the card - absence, home office, a forgotten clock-out. */
.time-tracking-status .status-banner {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .5rem;
padding: .6rem 1rem;
border-radius: .3rem;
background-color: var(--ze-blue-bg);
}
.time-tracking-status .status-banner.freetime {
background-color: rgba(255, 119, 0, .15);
}
.time-tracking-status .status-banner.stale {
background-color: rgba(238, 255, 110, .3);
}
/* The task of the running booking stands below the clock. */
.time-tracking-status .status-card .todo-current {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
margin-top: 1rem;
color: var(--ze-dark-grey);
}
.time-tracking-status .status-card .todo-select .no-todo {
padding: .5rem;
border-radius: .3rem;
background-color: rgba(238, 255, 110, .3);
}
.time-tracking-status .worklog-list {
margin-top: 1.5rem;
}
/* Progress and deviation of the status card - in the tool part of .status-card. */
.time-tracking-status .status-card .progress-bar-container {
overflow: hidden;
height: .6rem;
margin: 1rem 0 .5rem;
border-radius: .3rem;
background-color: var(--ze-grey);
}
.time-tracking-status .status-card .progress-bar-container .progress-bar {
height: 100%;
background-color: var(--ze-blue);
transition: width .5s linear;
}
.time-tracking-status .status-card .progress-bar-container .progress-bar.reached {
background-color: var(--ze-success);
}
.time-tracking-status .status-card .difference {
font-weight: bold;
}
.time-tracking-status .status-card .difference.positive {
color: var(--ze-success);
}
.time-tracking-status .status-card .difference.negative {
color: var(--ze-orange);
}
/* The bookings carry their button to the right of the heading. */
.time-tracking-status .worklog-list {
margin-top: 1.5rem;
}
.time-tracking-status .worklog-list .sub-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .3rem;
font-size: 1.4rem;
font-weight: bold;
}
/* Note about the breaks below the bookings. */
.time-tracking-status .break-info {
margin-top: .3rem;
color: var(--ze-dark-grey);
font-size: .9rem;
}
/* The delete buttons stand as forms of their own below the table. */
.time-tracking-status .worklog-delete {
display: inline-block;
margin: .3rem .3rem 0 0;
}
/* The delete forms of the bookings carry only the data now - the button sits in the row. */
.time-tracking-status .worklog-delete {
display: none;
}
/* --- Bookings: read first, then edit ------------------------------------ */
/*
* Both versions stand in the markup, only ever one of them is visible. The fields are disabled on
* top of that as long as nothing is being edited - hiding alone would still submit them.
*/
.worklog-list .worklog-edit {
display: none;
}
.worklog-list.is-editing .worklog-edit {
display: inline-block;
}
.worklog-list.is-editing .worklog-view {
display: none;
}
/* The buttons of the bookings stand as a group to the right of the heading. */
.worklog-list .worklog-actions {
display: flex;
align-items: center;
gap: .4rem;
}
/* ------------------------------------------------- Time tracking: overview */
/* --- Absence and holiday calendar --------------------------------------- */
.time-tracking-calendar .calendar-filter,
.time-tracking-department .department-filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: .75rem;
margin: 1rem 0;
padding: .75rem;
border: 1px solid #dee2e6;
border-radius: .25rem;
background: var(--ze-light-grey);
}
.time-tracking-calendar .calendar-filter-actions,
.time-tracking-department .department-filter-actions {
display: flex;
align-items: center;
gap: .5rem;
}
/* --- Department overview ------------------------------------------------- */
.time-tracking-department .department-group {
margin-bottom: 1.5rem;
border: 1px solid #dee2e6;
border-radius: .25rem;
}
.time-tracking-department .department-headline {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem .75rem;
border-bottom: 1px solid #dee2e6;
background: var(--ze-light-grey);
}
.time-tracking-department .department-name {
display: flex;
align-items: center;
gap: .4rem;
font-weight: bold;
}
.time-tracking-department .department-name .count {
padding: 0 .4rem;
border-radius: .6rem;
background: var(--ze-grey);
color: #fff;
font-size: .75rem;
}
.time-tracking-department .department-figures {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.time-tracking-department .department-figure label,
.time-tracking-department .user-card label {
display: block;
color: var(--ze-dark-grey);
font-size: .75rem;
}
.time-tracking-department .department-users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: .75rem;
padding: .75rem;
}
.time-tracking-department .user-card {
padding: .6rem;
border: 1px solid #dee2e6;
border-radius: .25rem;
font-size: .85rem;
}
.time-tracking-department .user-card-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .4rem;
margin-bottom: .5rem;
}
.time-tracking-department .user-card-head .name {
font-weight: bold;
}
.time-tracking-department .user-card-head .working-hours {
color: var(--ze-dark-grey);
font-size: .75rem;
}
.time-tracking-department .user-card-balances,
.time-tracking-department .user-card-figures {
display: grid;
gap: .3rem .75rem;
margin-bottom: .5rem;
}
.time-tracking-department .user-card-balances {
grid-template-columns: repeat(3, 1fr);
padding-bottom: .5rem;
border-bottom: 1px solid #eee;
}
.time-tracking-department .user-card-figures {
grid-template-columns: repeat(2, 1fr);
}
.time-tracking-department .user-card-week .week-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .2rem;
margin-bottom: .5rem;
}
.time-tracking-department .user-card-future {
margin-bottom: .5rem;
}
.time-tracking-department .user-card-note .note-input {
width: 100%;
min-height: 3.5rem;
margin-bottom: .35rem;
font-size: .8rem;
resize: vertical;
}
/* -------------------------------------------- Time tracking: year overview */
/* The metric tiles - .time-tracking-analysis-summary in the tool. */
.time-tracking-analysis-summary {
display: grid;
/* At a desk three tiles stand side by side, below that it becomes fewer. */
grid-template-columns: repeat(3, 1fr);
gap: .8rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.time-tracking-analysis-summary .summary-tile {
padding: 1rem;
border: 1px solid var(--ze-grey);
border-left-width: .4rem;
border-radius: .4rem;
background-color: var(--ze-light-grey);
}
.time-tracking-analysis-summary .summary-tile .label {
display: flex;
align-items: center;
gap: .4rem;
color: var(--ze-dark-grey);
}
.time-tracking-analysis-summary .summary-tile .value {
margin: .2rem 0;
font-size: 2rem;
font-weight: bold;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.time-tracking-analysis-summary .summary-tile .hint {
color: var(--ze-dark-grey);
font-size: .85rem;
}
.time-tracking-analysis-summary .summary-tile.positive {
border-left-color: var(--ze-success);
}
.time-tracking-analysis-summary .summary-tile.positive .value {
color: var(--ze-success);
}
.time-tracking-analysis-summary .summary-tile.negative {
border-left-color: var(--ze-error);
}
.time-tracking-analysis-summary .summary-tile.negative .value {
color: var(--ze-error);
}
.time-tracking-analysis-summary .summary-tile.neutral {
border-left-color: var(--ze-blue);
}
/* Saturday and Sunday step back - there is rarely anything there anyway. */
.time-tracking-time-table .analysis-days tr.weekend td {
color: var(--ze-dark-grey);
background: #fbfbfb;
}
/* What is still to come has not happened yet. */
.time-tracking-time-table .analysis-days tr.future td {
color: #a8a8a8;
}
/*
* EX-1583, Stefanie Kelz 09.10.2026, on both pages that show the day table: the Ist stands out, and a
* line under each Sunday sets the weeks apart. The line is a border of the Sunday's cells, so it
* prints as well - and with border-collapse it is the row's lower edge, not a gap.
*/
.time-tracking-time-table .analysis-days td.actual {
font-weight: 700;
}
.time-tracking-time-table .analysis-days tr.sunday td {
border-bottom: 2px solid var(--ze-dark-grey);
}
/* A shortfall catches the eye - the tool holds it that way too. */
.time-tracking-time-table .analysis-days td.minus {
background: rgba(255, 59, 59, .25);
}
/*
* And a surplus does the same - EX-1459, Melanie Haider: "alle Plusstunden gruen".
*
* The same .25 alpha as the shortfall above, over the green the module already uses for a good state
* (--ze-success). Two colours of the same weight: a day that differs is marked, in whichever
* direction, and a day that comes out even stays plain.
*/
.time-tracking-time-table .analysis-days td.plus {
background: rgba(40, 167, 69, .25);
}
/*
* The days scroll in a box of their own, under a header row that stays - EX-1524, see dayTable.php.
*
* As tall as the window below the two fixed navigation bars, less a margin, so once the box is in
* view the page stands still and only the days move. It scrolls both ways, which makes it the
* scrollport the sticky header sticks to - the reason EX-1459 could not have one.
*/
.time-tracking-time-table .analysis-days-scroll {
max-height: calc(100vh - var(--nav-height) - var(--sub-nav-height) - 24px);
overflow: auto;
margin-bottom: 1rem;
}
.time-tracking-time-table .analysis-days-scroll .analysis-days {
margin-bottom: 0;
}
/*
* The header cells stick. With border-collapse the cell borders belong to the table, not the cell,
* and would stay behind while the row moves - the inset shadow draws the lower line on the cell.
*/
.time-tracking-time-table .analysis-days thead th {
position: sticky;
top: 0;
z-index: 1;
box-shadow: inset 0 -1px 0 #dee2e6;
}
/*
* ON PAPER THE BOX IS GONE AGAIN - review-1 on EX-1524. A scroll container does not break across
* pages: printed, the box moved whole to the next sheet (the Monatsliste, one page per employee since
* EX-1460, put each name alone on a page) and clipped everything below its height (the year printed
* about 32 of its days). Without the box the table flows over the pages as before, and the browser
* repeats the on each one - which the sticky header inside the box would not.
*/
@media print {
.time-tracking-time-table .analysis-days-scroll {
max-height: none;
overflow: visible;
}
.time-tracking-time-table .analysis-days thead th {
position: static;
box-shadow: none;
}
}
/*
* Urlaub, Krankenstand and Zeitausgleich in a colour each - EX-1524, Robin 07.10.2026: the colours the
* overview gave them before a29afabce (badge-primary, -danger, -info, admin.css:3021-3023 then) and the
* old tool before that. A light tint of the whole row and a stripe of the full colour on the first
* cell, so the figures stay as legible as on any other day.
*
* The difference cell keeps its own red or green (td.minus / td.plus above) - that is the other thing
* this table says about a day, and a tint over it would hide it.
*/
.time-tracking-time-table .analysis-days tr.absence-vacation td:not(.minus):not(.plus) {
background: rgba(0, 123, 255, .10);
}
.time-tracking-time-table .analysis-days tr.absence-sick td:not(.minus):not(.plus) {
background: rgba(220, 53, 69, .10);
}
.time-tracking-time-table .analysis-days tr.absence-timeCompensation td:not(.minus):not(.plus) {
background: rgba(23, 162, 184, .12);
}
.time-tracking-time-table .analysis-days tr.absence-vacation td:first-child {
box-shadow: inset 4px 0 0 #007bff;
}
.time-tracking-time-table .analysis-days tr.absence-sick td:first-child {
box-shadow: inset 4px 0 0 #dc3545;
}
.time-tracking-time-table .analysis-days tr.absence-timeCompensation td:first-child {
box-shadow: inset 4px 0 0 #17a2b8;
}
/* ------------------------------------------------- Time tracking: requests */
/* The eight request types - in the tool this was a drop-down above the form. */
.request-type-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
/* --- Request in the overlay -------------------------------------------- */
.request-overlay-content {
max-width: min(760px, 96vw);
}
/* The fields of the chosen type stand below the selection, not beside it. */
.request-overlay-content .request-fields {
margin-top: 14px;
}
.request-overlay-content .request-fields[hidden] {
display: none;
}
/* The proofs on file in the request overlay - one button each. */
.request-files {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
/* --------------------------------------------------- Time tracking: calendar */
/* The totals row stands above the table and is exactly as wide - as in the tool. */
.time-tracking-time-table .freetime-detail {
width: 100%;
}
.time-tracking-calendar .calendar-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .5rem;
}
.time-tracking-calendar .calendar-title {
font-weight: bold;
}
.time-tracking-calendar .calendar-legend {
display: flex;
flex-wrap: wrap;
gap: .75rem;
font-size: .85rem;
}
.time-tracking-calendar .calendar-legend-entry {
display: inline-flex;
align-items: center;
gap: .35rem;
}
/* One row per calendar week, beside it the six working days. */
.time-tracking-calendar .calendar-row {
display: flex;
align-items: stretch;
margin-bottom: -1px;
}
.time-tracking-calendar .calendar-week-name {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 2.5rem;
border: 1px solid #dee2e6;
background: var(--ze-light-grey);
font-size: .8rem;
font-weight: bold;
}
.time-tracking-calendar .calendar-days {
display: grid;
grid-template-columns: repeat(6, 1fr);
flex: 1;
min-width: 0;
}
.time-tracking-calendar .calendar-week-day {
padding: .3rem .5rem;
border: 1px solid #dee2e6;
margin-left: -1px;
background: var(--ze-light-grey);
font-size: .8rem;
font-weight: bold;
}
.time-tracking-calendar .calendar-day {
min-height: 4.5rem;
padding: .3rem .4rem;
border: 1px solid #dee2e6;
margin-left: -1px;
}
.time-tracking-calendar .calendar-day.weekend,
.time-tracking-calendar .calendar-day.holiday {
background: #fbfbfb;
}
.time-tracking-calendar .calendar-day.today {
box-shadow: inset 0 0 0 2px var(--ze-orange);
}
.time-tracking-calendar .calendar-day-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .3rem;
margin-bottom: .25rem;
font-size: .78rem;
}
.time-tracking-calendar .calendar-day-head .day {
color: var(--ze-dark-grey);
}
.time-tracking-calendar .calendar-day.today .calendar-day-head .day {
color: inherit;
font-weight: bold;
}
.time-tracking-calendar .calendar-day-head .holiday-name {
overflow: hidden;
color: var(--ze-error);
text-overflow: ellipsis;
white-space: nowrap;
}
.time-tracking-calendar .calendar-day-head .count {
flex: none;
padding: 0 .3rem;
border-radius: .6rem;
background: var(--ze-grey);
color: #fff;
font-size: .7rem;
}
.time-tracking-calendar .calendar-day-entries {
display: flex;
flex-direction: column;
gap: .15rem;
}
/*
* The colour says the type, the word stands in the title. Unlike on the overview, every entry
* carries a colour of its own here - in the calendar the type is the actual statement.
*/
.time-tracking-calendar .calendar-entry {
display: block;
overflow: hidden;
padding: .1rem .3rem;
border-radius: .2rem;
font-size: .75rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.time-tracking-calendar .calendar-legend-entry .calendar-entry {
width: .9rem;
height: .9rem;
padding: 0;
}
.time-tracking-calendar .calendar-entry.vacation { background: rgba(0, 123, 255, .18); }
.time-tracking-calendar .calendar-entry.timeCompensation { background: rgba(23, 162, 184, .18); }
.time-tracking-calendar .calendar-entry.sick { background: rgba(220, 53, 69, .18); }
.time-tracking-calendar .calendar-entry.nursing { background: rgba(220, 53, 69, .1); }
.time-tracking-calendar .calendar-entry.homeOffice { background: rgba(40, 166, 69, .18); }
/* -------------------------------------------------------------- Notice board */
/* Notice board: the areas as a tab bar, the switches on the right. */
.board-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.board-tab-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-left: auto;
}
/*
* The headings stand side by side at a fixed width, their entries below one another - as in the
* tool. Fixed width, so the columns do not end up differently wide depending on their content.
*
* A row that scrolls sideways instead of wrapping: the columns of an area belong together, and a
* wrapped column slips underneath another one and is easily overlooked. The room at the bottom
* belongs to the scrollbar.
*/
.board-headlines {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 12px;
/*
* The height is set by board.php to whatever is left of the window - that way the board reaches
* the bottom edge instead of making the whole page scroll. The fallback value takes hold as
* long as the script has not run yet.
*/
height: var(--board-height, 70vh);
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
}
.board-headline {
display: flex;
flex: 0 0 20rem;
flex-direction: column;
gap: .4rem;
max-width: 20rem;
/* Every column reaches the bottom edge; only the entry list inside it scrolls. */
max-height: 100%;
padding: .6rem;
border: 1px solid var(--ze-grey);
border-radius: .4rem;
background-color: var(--ze-light-grey);
}
/* The heading stays put while the entries below it run. */
.board-headline .headline-title {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: .3rem;
margin: 0;
font-size: .95rem;
font-weight: bold;
}
.board-headline .headline-title .count {
padding: .05rem .45rem;
border-radius: 1rem;
background-color: var(--ze-grey);
font-size: .8rem;
font-weight: normal;
}
.board-headline .headline-title .headline-actions {
display: flex;
gap: .2rem;
margin-left: auto;
}
.board-headline .headline-title .headline-actions form {
margin: 0;
}
.board-empty {
margin: 0;
color: var(--ze-dark-grey);
font-size: .85rem;
}
.board-entries {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: .5rem;
/*
* min-height: 0 is the decisive part: without it a flex child grows to its content and
* overflows instead of scrolling.
*/
min-height: 0;
overflow-y: auto;
/* Room for the scrollbar, so it does not lie on the cards. */
padding-right: 4px;
}
/* Every entry is a card of its own; the colour on the left names its type. */
.board-entry {
display: flex;
flex-direction: column;
gap: .3rem;
padding: .45rem .55rem;
border: 1px solid var(--ze-grey);
border-left-width: .3rem;
border-radius: .4rem;
background-color: #fff;
}
.board-entry.board-entry-1 {
border-left-color: var(--ze-blue);
}
.board-entry.board-entry-2 {
border-left-color: var(--ze-orange);
}
.board-entry.board-entry-3 {
border-left-color: var(--ze-success);
}
/* Whoever is signed up themselves should find the entry at a glance. */
.board-entry.registered {
background-color: var(--ze-success-bg);
}
/*
* An entry whose date has passed steps back. Deliberately NOT opacity: a faded card reads as
* disabled, and these stay fully clickable and editable - Robin chose the visual treatment over a
* read-only one. Placed after the type and registration rules so it wins the border and the
* background at equal specificity.
*/
.board-entry.past {
border-left-color: var(--ze-grey);
background-color: var(--ze-light-grey);
color: var(--ze-dark-grey);
}
/*
* Past AND attended: muted with the rest, but still recognisably green - Robin asked for both, so
* greying must not swallow the fact that the person was there. Three classes, so it beats .past.
*/
.board-entry.past.registered {
background-color: rgba(40, 166, 69, .08);
}
.board-entry .entry-head {
display: flex;
justify-content: space-between;
gap: .5rem;
color: var(--ze-dark-grey);
font-size: .8rem;
}
.board-entry .entry-date {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.board-entry .entry-title {
margin: 0;
font-size: .95rem;
}
.board-entry .entry-description,
.board-entry .entry-info {
margin: 0;
font-size: .85rem;
line-height: 1.35;
}
.board-entry .entry-info {
display: flex;
align-items: center;
gap: .4rem;
color: var(--ze-dark-grey);
}
.board-entry .entry-registrations {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem;
margin: 0;
}
/* One circle per sign-up, with the initials - the full name stands in the title. */
.board-entry .entry-registrations .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
color: #fff;
font-size: .65rem;
font-weight: bold;
}
.board-entry .entry-registrations .avatar.own {
box-shadow: 0 0 0 2px var(--text);
}
.board-entry .entry-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem;
margin-top: auto;
padding-top: .3rem;
}
/*
* THE BUTTONS ARE ALL 25px TALL AND TWO OF THEM STILL SIT LOW - `display: flex` is the proposed
* cure and the cause behind it is a HYPOTHESIS, not a measurement. Read the whole of this.
*
* What IS measured: all three buttons compute to 25px. `box-sizing: border-box` is global, the
* board rule sets min-height: 25px, the icon button is 17px icon + 6 padding + 2 border = exactly
* 25, and the text button is 16.8 + 6 + 2 = 24.8 which min-height lifts to 25. So the heights are
* equal and height was never the cause - Robin confirms equal height with a visible OFFSET.
*
* THE HYPOTHESIS: the three are unequally WRAPPED. Anmelden and the bin are s inside a
*