shows
MM/DD/YY. Click the icon → native browser picker opens. Less visual
noise than a full-width YYYY-MM-DD text field across rows. */
.stratum-date-cell {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.stratum-inline-date {
/* Native WebKit inputs don't respect a smaller `width` for the
picker indicator — we shrink the visible-text area with field-sizing
and hide the datetime-edit spinners below. */
width: 22px;
height: 22px;
padding: 0;
font-size: 0; /* collapse any text value */
border: 1px solid transparent;
border-radius: var(--border-radius);
background: transparent;
color: transparent; /* hide YYYY-MM-DD text */
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
color-scheme: light dark;
flex-shrink: 0;
}
/* Hide the datetime-edit part entirely so only the picker indicator
remains visible. WebKit only — other browsers fall back gracefully. */
.stratum-inline-date::-webkit-datetime-edit,
.stratum-inline-date::-webkit-datetime-edit-fields-wrapper,
.stratum-inline-date::-webkit-datetime-edit-text,
.stratum-inline-date::-webkit-datetime-edit-month-field,
.stratum-inline-date::-webkit-datetime-edit-day-field,
.stratum-inline-date::-webkit-datetime-edit-year-field {
display: none;
}
.stratum-inline-date:hover {
border-color: var(--form-border);
background: var(--form-bg);
}
.stratum-inline-date:focus {
border-color: var(--blue);
background: var(--form-bg);
outline: none;
}
.stratum-date-label {
position: absolute;
left: 1.5em;
font-size: 0.75rem;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
user-select: none;
}
.stratum-date-label--empty {
color: var(--gray);
}
/* Read-only date display — matches the .stratum-date-label font
treatment but without the absolute positioning, so it can stand
on its own in a cell (e.g. client request `receivedAt`). */
.stratum-date-readonly {
font-size: 0.75rem;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.stratum-date-readonly--empty {
color: var(--gray);
}
/* ── Native date picker icon override ──────────────────────────────
Replace the browser's default ::-webkit-calendar-picker-indicator
with our Stratum calendar SVG. Scoped to .stratum-date-cell so it
only applies to our compact inline date inputs (board + client
request list), not Contao's datepicker-wizard edit forms. */
.stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator,
.stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator,
.stratum-meta-date-input::-webkit-calendar-picker-indicator {
background-image: url('/bundles/stratumclientportal/backend/calendar.svg');
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
color: transparent;
cursor: pointer;
opacity: 0.65;
padding: 0;
width: 16px;
height: 16px;
filter: none;
}
.stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator:hover,
.stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
html[data-color-scheme="dark"] .stratum-date-cell input[type="date"]::-webkit-calendar-picker-indicator,
html[data-color-scheme="dark"] .stratum-date-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-color-scheme="dark"] .stratum-date-cell input[type="time"]::-webkit-calendar-picker-indicator {
background-image: url('/bundles/stratumclientportal/backend/calendar--dark.svg');
}
/* Date inputs fill their column width (each date has its own column) */
.stratum-inline-date {
width: 100%;
box-sizing: border-box;
}
/* ── Milestone row ──────────────────────────────────────────────── */
.stratum-milestone-row td {
padding: 6px 8px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.stratum-milestone-row.is-hidden-from-client {
opacity: 0.55;
}
.stratum-milestone-name {
font-size: 1em;
font-weight: 600;
}
/* Overdue titles — red to flag items past their due date */
.stratum-milestone-name.is-overdue,
.stratum-task-name.is-overdue {
color: var(--red);
}
/* Inline-editable rich-text descriptions (project / milestone /
task). The block reads as static text by default; hover hints at
editability, focus draws a soft blue ring, and an empty editor
shows a placeholder via the data-placeholder attribute. */
.stratum-inline-richtext {
position: relative;
cursor: text;
border-radius: 3px;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
min-height: 1.5em;
outline: none;
}
.stratum-inline-richtext:hover {
background: var(--table-hover, rgba(46, 110, 191, 0.06));
}
.stratum-inline-richtext:focus {
background: var(--input-bg, #fff);
box-shadow: 0 0 0 2px var(--blue, #2e6ebf);
}
html[data-color-scheme="dark"] .stratum-inline-richtext:focus {
background: var(--input-bg, #1f1f1f);
}
/* Placeholder when the editor is empty. We can't use ::placeholder
on a contenteditable, so we render data-placeholder via ::before
when the element has no content. */
.stratum-inline-richtext:empty::before {
content: attr(data-placeholder);
color: var(--gray, #888);
font-style: italic;
pointer-events: none;
}
/* Editor is currently focused inside a clamped project description —
suppress the clamp so the user can see what they're typing. */
.stratum-project-description.is-editing .stratum-project-description-body {
-webkit-line-clamp: unset;
line-clamp: unset;
max-height: none;
display: block;
overflow: visible;
}
/* Empty description block — bypass the line-clamp so the placeholder
text renders correctly, and keep a small clickable region visible
so users can click in to add content. */
.stratum-project-description.is-empty .stratum-project-description-body {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
max-height: none;
min-height: 1.5em;
overflow: visible;
}
/* Empty milestone / task / bug description rows — collapse padding when
no content exists, but keep the editable region clickable. */
.stratum-task-description-row.is-empty-desc .stratum-task-description,
.stratum-milestone-description-row.is-empty-desc .stratum-milestone-description,
.stratum-bug-description-row.is-empty-desc .stratum-bug-description {
min-height: 1.5em;
}
/* Faded chevron when the description is empty — hints that clicking
it opens an empty editor rather than existing content. */
.stratum-task-toggle.is-empty,
.stratum-milestone-toggle.is-empty,
.stratum-bug-toggle.is-empty {
opacity: 0.4;
}
.stratum-task-toggle.is-empty:hover,
.stratum-milestone-toggle.is-empty:hover,
.stratum-bug-toggle.is-empty:hover {
opacity: 0.8;
}
/* Inline-editable milestone / task names (contenteditable spans).
The default state looks like plain text; hover shows a subtle
underline cue, and focus reveals a soft outline + background so
the user can clearly see the editing region. */
.stratum-inline-name {
cursor: text;
border-radius: 3px;
padding: 1px 4px;
margin: -1px -4px;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.stratum-inline-name:hover {
background: var(--table-hover, rgba(46, 110, 191, 0.06));
}
.stratum-inline-name:focus {
outline: none;
background: var(--input-bg, #fff);
box-shadow: 0 0 0 2px var(--blue, #2e6ebf);
}
html[data-color-scheme="dark"] .stratum-inline-name:focus {
background: var(--input-bg, #1f1f1f);
}
/* ── Task row ───────────────────────────────────────────────────── */
.stratum-task-row td {
padding: 4px 8px 4px 24px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
background: var(--table-even);
}
/* First column gets the indent, others reset to normal */
.stratum-task-row td:not(:first-child) {
padding-left: 8px;
}
.stratum-task-row.is-hidden-from-client {
opacity: 0.45;
}
.stratum-task-arrow {
color: var(--gray);
}
/* Inner flex wrapper for the task-name cell — arrow, timer, and
title are vertically centered; wrapped title lines stay in the
title column instead of flowing under the timer icon. Wrapping
is on a rather than the
itself because `display:flex`
on a table cell is inconsistent across browsers. */
.stratum-task-name-cell {
display: flex;
align-items: center;
gap: 6px;
}
.stratum-task-name-cell > .stratum-task-name {
flex: 1 1 auto;
min-width: 0;
}
/* When the task-name is a clickable toggle, lay it out as an inline
flex row so the chevron stays pinned next to the title text
regardless of how the title wraps. */
a.stratum-task-name.stratum-task-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
}
a.stratum-task-name.stratum-task-toggle > .stratum-toggle-icon {
flex: 0 0 auto;
}
/* ── Task description accordion ──────────────────────────────────── */
.stratum-task-toggle {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.stratum-task-toggle:hover {
text-decoration: underline;
}
.stratum-toggle-icon {
display: inline-block;
vertical-align: middle;
transition: transform 0.15s ease;
line-height: 0;
}
/* backend_icon() emits TWO imgs (light + dark variants) toggled by
Contao's BE CSS via .color-scheme--light / .color-scheme--dark.
Size them without touching display, so Contao's hide rule still wins. */
.stratum-toggle-icon img {
width: 18px;
height: 18px;
}
.stratum-task-toggle.is-open .stratum-toggle-icon {
transform: rotate(90deg);
}
.stratum-task-description-row td {
padding: 0 8px 0 48px;
border-bottom: 1px solid var(--border);
background: var(--table-even);
}
.stratum-task-description {
padding: 15px;
font-size: 13px;
line-height: 1.5;
color: var(--text);
border-left: 3px solid var(--primary);
margin: 4px 0 8px;
}
.stratum-task-description p {
margin: 0 0 0.5em;
}
.stratum-task-description p:last-child {
margin-bottom: 0;
}
.stratum-task-description ul,
.stratum-task-description ol {
margin: 0.25em 0 0.5em 1.25em;
padding: 0;
}
/* ── Milestone name cell + description row ───────────────────────── */
/* Inline flex wrapper so the chevron + Hidden badge stay on one line
next to the editable name without odd wrapping. */
.stratum-milestone-name-cell {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.stratum-milestone-name-cell > .stratum-milestone-name {
flex: 1 1 auto;
min-width: 0;
}
.stratum-milestone-toggle {
text-decoration: none;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.stratum-milestone-toggle .stratum-toggle-icon {
display: inline-flex;
align-items: center;
transition: transform 0.15s ease;
}
.stratum-milestone-toggle.is-open .stratum-toggle-icon {
transform: rotate(90deg);
}
.stratum-milestone-description-row td {
padding: 0 8px 0 24px;
border-bottom: 1px solid var(--border);
background: var(--table-header, var(--table-even));
}
.stratum-milestone-description {
padding: 15px;
font-size: 13px;
line-height: 1.5;
color: var(--text);
border-left: 3px solid var(--primary);
margin: 4px 0 8px;
}
.stratum-milestone-description p {
margin: 0 0 0.5em;
}
.stratum-milestone-description p:last-child {
margin-bottom: 0;
}
.stratum-milestone-description ul,
.stratum-milestone-description ol {
margin: 0.25em 0 0.5em 1.25em;
padding: 0;
}
/* ── Change-order row (inside milestone table) ──────────────────── */
.stratum-co-row td {
padding: 4px 8px 4px 24px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
background: var(--new-bg);
font-style: italic;
}
.stratum-co-row td:not(:first-child) {
padding-left: 8px;
}
.stratum-co-label {
color: var(--orange);
font-weight: 600;
font-style: normal;
}
/* ── Action links ───────────────────────────────────────────────── */
.stratum-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.stratum-actions a,
.stratum-project-actions a {
font-size: 0.75rem;
color: var(--blue);
text-decoration: none;
white-space: nowrap;
}
.stratum-actions a:hover,
.stratum-project-actions a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Icon-based action links (edit, delete, visibility) */
.stratum-icon-action {
display: inline-flex;
align-items: center;
position: relative;
opacity: 0.6;
transition: opacity 0.15s ease;
}
.stratum-icon-action:hover {
opacity: 1;
text-decoration: none !important;
}
.stratum-icon-action img {
width: 16px;
height: 16px;
}
.stratum-sop-count {
position: absolute;
top: -6px;
right: -7px;
min-width: 13px;
height: 13px;
padding: 0 3px;
border-radius: 999px;
background: var(--blue, #2e6ebf);
color: #fff;
font-size: 9px;
line-height: 13px;
text-align: center;
}
/* Disabled icon — greyed out, not clickable */
.stratum-icon-disabled {
opacity: 0.2 !important;
cursor: default;
pointer-events: none;
}
/* Delete icon — slightly red-tinted via filter on hover */
.stratum-actions .stratum-action-delete {
color: var(--red);
}
.stratum-actions .stratum-action-delete:hover {
color: var(--red);
}
/* Visibility toggle — both icons rendered; CSS shows/hides by state */
.stratum-action-visibility {
opacity: 0.45;
}
.stratum-action-visibility:hover {
opacity: 1;
}
.stratum-action-visibility .stratum-vis-show,
.stratum-action-visibility .stratum-vis-hide {
display: inline-flex;
align-items: center;
}
.stratum-action-visibility .stratum-vis-hide {
display: none;
}
.stratum-action-visibility.is-invisible .stratum-vis-show {
display: none;
}
.stratum-action-visibility.is-invisible .stratum-vis-hide {
display: inline-flex;
}
/* ── Empty state ────────────────────────────────────────────────── */
.stratum-empty {
padding: 16px 8px;
text-align: center;
font-size: 0.85rem;
color: var(--gray);
}
.stratum-empty-milestones {
padding: 4px 0 0;
font-size: 0.8rem;
color: var(--gray);
}
/* ── Timer column ─────────────────────────────────────────────── */
.stratum-col-timer {
white-space: nowrap;
width: 60px;
padding-right: 0 !important;
}
.stratum-timer-cell {
display: inline-flex;
align-items: center;
gap: 4px;
}
.stratum-timer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
font-size: 9px;
line-height: 1;
color: var(--text);
opacity: 0.7;
transition: opacity 0.15s ease;
}
.stratum-timer-btn:hover {
opacity: 1;
}
/* Hide the play button when this task's timer is running (header bar controls stop) */
.stratum-timer-btn .stratum-timer-play { color: var(--green, #16a34a); }
.stratum-timer-btn.is-running { display: none; }
/* ── Notes badge ───────────────────────────────────────────────── */
.stratum-notes-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: var(--blue);
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
/* ── Modal overlay ─────────────────────────────────────────────── */
.stratum-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
}
.stratum-modal {
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: var(--border-radius-lg);
width: 420px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.stratum-modal--entries {
width: 560px;
}
.stratum-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--content-border);
}
.stratum-modal-header h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stratum-modal-close {
background: none;
border: none;
font-size: 1.3rem;
line-height: 1;
color: var(--gray);
cursor: pointer;
padding: 0 4px;
}
.stratum-modal-close:hover {
color: var(--text);
}
.stratum-modal-body {
padding: 16px;
overflow-y: auto;
flex: 1;
}
.stratum-modal-body label {
display: block;
margin-bottom: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
}
.stratum-modal-body .tl_textarea {
width: 100%;
box-sizing: border-box;
font-size: 0.85rem;
border: 1px solid var(--form-border);
border-radius: var(--border-radius);
padding: 8px;
background: var(--form-bg);
color: var(--text);
resize: vertical;
}
.stratum-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--content-border);
}
/* ── Time entries list (inside modal) ──────────────────────────── */
.stratum-entries-total {
margin-bottom: 12px;
font-size: 0.85rem;
color: var(--text);
}
.stratum-entries-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.stratum-entry {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--table-even);
}
.stratum-entry-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 0.8rem;
color: var(--text);
margin-bottom: 4px;
}
.stratum-entry-date {
font-weight: 600;
}
.stratum-entry-user {
color: var(--gray);
}
.stratum-entry-time {
color: var(--gray);
}
.stratum-entry-desc {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 0.8rem;
color: var(--text);
}
.stratum-entry-desc-text {
flex: 1;
line-height: 1.4;
}
.stratum-entry-edit-btn,
.stratum-entry-delete-btn {
background: none;
border: none;
cursor: pointer;
padding: 0 1px;
vertical-align: middle;
}
.stratum-entry-editor {
margin-top: 6px;
}
.stratum-entry-editor .tl_textarea {
width: 100%;
box-sizing: border-box;
font-size: 0.8rem;
border: 1px solid var(--form-border);
border-radius: var(--border-radius);
padding: 6px;
background: var(--form-bg);
color: var(--text);
resize: vertical;
margin-bottom: 6px;
}
.stratum-entry-editor-actions {
display: flex;
gap: 6px;
}
.stratum-entry-editor-actions .tl_submit {
font-size: 0.75rem;
padding: 4px 10px;
height: auto;
}
/* ── Time link (clickable to edit) ─────────────────────────────── */
.stratum-entry-time-link {
color: var(--link);
text-decoration: none;
border-bottom: 1px dotted var(--link);
}
.stratum-entry-time-link:hover {
color: var(--link-hover);
border-bottom-style: solid;
}
/* ── Time editor (inline start/end inputs) ─────────────────────── */
.stratum-entry-time-editor {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.stratum-time-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
}
.stratum-entry-time-editor label {
font-size: 0.8rem;
color: var(--text);
display: flex;
align-items: center;
gap: 4px;
}
.stratum-entry-time-editor .tl_text {
width: 110px;
font-size: 0.8rem;
padding: 3px 6px;
height: auto;
}
/* ── Modal header actions (add + close) ─────────────────────────── */
.stratum-modal-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.stratum-add-entry-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: var(--link);
text-decoration: none;
white-space: nowrap;
}
.stratum-add-entry-btn:hover {
color: var(--link-hover);
}
/* ── Add entry form ─────────────────────────────────────────────── */
.stratum-add-entry-form {
padding: 12px;
margin-bottom: 12px;
background: var(--panel-bg, #f6f6f6);
border: 1px solid var(--content-border);
border-radius: var(--border-radius);
}
.stratum-add-entry-form .stratum-time-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.stratum-add-entry-form label {
font-size: 0.8rem;
color: var(--text);
display: flex;
flex-direction: column;
gap: 2px;
}
.stratum-add-entry-form .tl_text {
font-size: 0.8rem;
padding: 3px 6px;
height: auto;
}
.stratum-add-entry-form .tl_textarea {
font-size: 0.8rem;
padding: 6px;
border: 1px solid var(--form-border);
border-radius: var(--border-radius);
background: var(--form-bg);
color: var(--text);
resize: vertical;
}
/* ═══════════════════════════════════════════════════════════════
Stratum Add-on Section — shared standard for collapsible
project-level panels (bugs, Slack, future add-ons).
═══════════════════════════════════════════════════════════════ */
.stratum-addon-section {
margin: 10px 0 12px;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--form-bg);
}
.stratum-addon-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
gap: 12px;
}
.stratum-addon-toggle {
flex: 1;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
background: none;
border: none;
padding: 0;
margin: 0;
font-family: inherit;
line-height: inherit;
}
.stratum-addon-toggle:hover {
text-decoration: none;
color: var(--link);
}
.stratum-addon-arrow {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
background: url('/system/themes/flexible/icons/chevron-right.svg') center / contain no-repeat;
transition: transform 0.2s ease;
}
html[data-color-scheme="dark"] .stratum-addon-arrow {
background-image: url('/system/themes/flexible/icons/chevron-right--dark.svg');
}
.stratum-addon-toggle.is-open .stratum-addon-arrow {
transform: rotate(90deg);
}
.stratum-addon-count {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 400;
background: var(--panel-bg, #e5e5e5);
color: var(--gray, #555);
}
.stratum-addon-count--alert {
background: #ffeaea;
color: #c0392b;
font-weight: 600;
}
.stratum-addon-action {
color: var(--link);
font-size: 0.85rem;
text-decoration: none;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--body-bg, #fff);
}
.stratum-addon-action:hover {
background: var(--panel-bg);
text-decoration: none;
}
.stratum-addon-body {
padding: 0 12px 12px;
border-top: 1px solid var(--border);
}
.stratum-addon-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ── Bug section (extends add-on standard) ─────────────────────── */
.stratum-bugs-empty {
padding: 12px 0;
text-align: center;
font-style: italic;
}
.stratum-bugs-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 0.85rem;
margin-top: 8px;
}
.stratum-bugs-table th {
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
font-weight: 600;
color: var(--text);
background: transparent;
}
.stratum-bugs-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.stratum-bug-row.is-resolved .stratum-bug-title {
text-decoration: line-through;
color: var(--text-muted, #888);
}
.stratum-bug-row.is-resolved {
opacity: 0.65;
}
.stratum-bug-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
}
.stratum-bug-title {
color: var(--text);
font-weight: 500;
}
a.stratum-bug-toggle {
color: var(--link);
text-decoration: none;
cursor: pointer;
}
a.stratum-bug-toggle:hover {
text-decoration: underline;
}
a.stratum-bug-toggle.is-open .stratum-toggle-icon {
display: inline-block;
transform: rotate(90deg);
}
.stratum-bug-description-row td {
background: var(--table-even);
border-bottom: 1px solid var(--border);
padding: 0 8px 0 40px;
}
.stratum-bug-description {
padding: 15px;
font-size: 13px;
line-height: 1.5;
color: var(--text);
border-left: 3px solid var(--primary);
margin: 4px 0 8px;
}
.stratum-bug-description p {
margin: 0 0 0.5em;
}
.stratum-bug-description p:last-child {
margin-bottom: 0;
}
.stratum-bug-description ul,
.stratum-bug-description ol {
margin: 0.25em 0 0.5em 1.25em;
padding: 0;
}
/* Priority badges */
.stratum-bug-priority-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
background: #e5e5e5;
color: #555;
}
.stratum-bug-priority-badge--low {
background: #e7f3ff;
color: #2e6ebf;
}
.stratum-bug-priority-badge--normal {
background: #eef0f3;
color: #555;
}
.stratum-bug-priority-badge--high {
background: #fff1e0;
color: #b85c00;
}
.stratum-bug-priority-badge--critical {
background: #fbdede;
color: #c0392b;
}
/* Left-border accent on critical/high bug rows */
.stratum-bug-row.stratum-bug-priority--critical td:first-child {
border-left: 3px solid #c0392b;
}
.stratum-bug-row.stratum-bug-priority--high td:first-child {
border-left: 3px solid #b85c00;
}
/* ═══════════════════════════════════════════════════════════════
Collapsible project cards, groups, toolbar, progress bar.
Phase 1 UX: scalable board for many projects.
═══════════════════════════════════════════════════════════════ */
/* ── Board toolbar ─────────────────────────────────────────────── */
.stratum-board-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0 12px;
font-size: 0.85rem;
color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.stratum-board-summary {
color: var(--gray);
}
.stratum-attention-count {
color: var(--red, #c0392b);
}
.stratum-board-toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.stratum-toolbar-btn {
padding: 3px 10px;
font-size: 0.78rem;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--body-bg, #fff);
color: var(--text);
cursor: pointer;
transition: background 0.15s ease;
}
.stratum-toolbar-btn:hover {
background: var(--panel-bg);
}
/* ── "Only mine" toggle ───────────────────────────────────────── */
.stratum-only-mine {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
font-size: 0.78rem;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--body-bg, #fff);
color: var(--text);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
user-select: none;
}
.stratum-only-mine:hover {
background: var(--panel-bg);
}
.stratum-only-mine.is-active {
background: var(--blue, #2e6ebf);
color: #fff;
border-color: var(--blue, #2e6ebf);
}
.stratum-only-mine input[type="checkbox"] {
accent-color: #fff;
}
/* ── Group sections ───────────────────────────────────────────── */
.stratum-group {
margin-bottom: 16px;
}
.stratum-group-heading {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 6px 0 4px;
margin: 0 0 6px;
color: var(--gray);
border-bottom: 1px solid var(--border);
}
.stratum-group-heading--attention {
color: var(--red, #c0392b);
border-bottom-color: var(--red, #c0392b);
}
.stratum-group-heading--active {
color: var(--green, #2e8b57);
border-bottom-color: var(--green, #2e8b57);
}
.stratum-group-heading--recurring {
color: var(--blue, #2b6cb0);
border-bottom-color: var(--blue, #2b6cb0);
}
/* Maintenance / retainer work — teal keeps it distinct from the blue
Recurring section while reading as "ongoing, healthy". */
.stratum-group-heading--maintenance {
color: var(--teal, #0f766e);
border-bottom-color: var(--teal, #0f766e);
}
.stratum-group-heading--inactive {
color: var(--gray);
}
/* ── Collapsible project card () ──────────────────────── */
details.stratum-project {
margin-bottom: 8px;
border: 1px solid var(--content-border);
border-radius: var(--border-radius);
background: var(--content-bg);
transition: border-color 0.15s ease;
}
/* Closed project card — preview the open-state accent on hover. */
details.stratum-project:not([open]):hover {
border-color: var(--blue, #2e6ebf);
}
/* Open project — subtle elevation + left accent bar to make the
active card stand out from the collapsed siblings. */
details.stratum-project[open] {
margin-block: 16px;
border: 1px solid var(--blue, #2e6ebf);
border-left: 10px solid var(--blue, #2e6ebf);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
html[data-color-scheme="dark"] details.stratum-project[open] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
/* Remove default marker */
details.stratum-project > summary {
list-style: none;
}
details.stratum-project > summary::-webkit-details-marker {
display: none;
}
details.stratum-project > summary::marker {
display: none;
content: '';
}
/* ── Summary row (collapsed header) ────────────────────────────── */
.stratum-project-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
user-select: none;
transition: background 0.1s ease;
}
.stratum-project-summary:hover {
background: var(--panel-bg);
}
/* Focus shortcut on the summary row, left of the chevron. Stays
visible in both collapsed and expanded states for quick access. */
.stratum-summary-focus {
display: inline-flex;
align-items: center;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.15s ease;
}
.stratum-summary-focus:hover {
opacity: 1;
}
.stratum-summary-focus img {
display: block;
width: 15px;
height: 15px;
}
/* In focus mode you're already viewing the single project, so the
"focus on this project" shortcuts are redundant — hide both the
summary-row icon and the card-body one. */
.stratum-board--focus .stratum-summary-focus,
.stratum-board--focus .stratum-action-focus {
display: none;
}
/* Chevron icon — uses Contao's own theme icon with dark mode swap */
.stratum-project-chevron {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
background: url('/system/themes/flexible/icons/chevron-right.svg') center / contain no-repeat;
transition: transform 0.2s ease;
}
html[data-color-scheme="dark"] .stratum-project-chevron {
background-image: url('/system/themes/flexible/icons/chevron-right--dark.svg');
}
details.stratum-project[open] > .stratum-project-summary .stratum-project-chevron {
transform: rotate(90deg);
}
.stratum-project-summary-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.stratum-project-summary-title small {
font-weight: normal;
color: var(--gray);
}
.stratum-project-summary-meta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
font-size: 0.78rem;
}
/* ── Progress bar ──────────────────────────────────────────────── */
.stratum-progress-bar {
display: inline-block;
width: 60px;
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
vertical-align: middle;
}
.stratum-progress-fill {
display: block;
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
.stratum-progress--done { background: var(--green, #2e8b57); }
.stratum-progress--good { background: var(--green, #2e8b57); }
.stratum-progress--mid { background: var(--orange, #f47c00); }
.stratum-progress--low { background: var(--yellow, #d4a017); }
/* ── Summary count badges ──────────────────────────────────────── */
.stratum-summary-counts {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: var(--gray);
white-space: nowrap;
}
.stratum-count-badge {
display: inline-block;
padding: 0 5px;
border-radius: 8px;
font-weight: 600;
line-height: 1.5;
}
.stratum-count-badge--bug {
background: #fff1e0;
color: #b85c00;
}
.stratum-count-badge--overdue {
background: #ffeaea;
color: #c0392b;
}
/* ── Summary chips: due date + assigned manager ───────────────── */
/* Both render at the start of the summary meta row (before recurring,
bug, and overdue badges) so the user can see them at a glance on
collapsed project cards without expanding. Intentionally low-key
compared to the alert badges — informational, not warnings. */
.stratum-summary-due,
.stratum-summary-manager {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
background: var(--new-bg, var(--table-even, #eef2f7));
color: var(--text);
font-size: 0.72rem;
font-weight: 500;
white-space: nowrap;
line-height: 1.5;
}
.stratum-summary-manager {
max-width: 14em;
overflow: hidden;
text-overflow: ellipsis;
}
/* Total tracked time on the collapsed summary row */
.stratum-summary-time {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
background: var(--new-bg, var(--table-even, #eef2f7));
color: var(--text);
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
/* Same badge inside the expanded project's meta row — the auto left
margin pushes it to the far right of that flex row (and to the end
of the last line if the row wraps). */
.stratum-project-meta-time {
margin-left: auto;
}
/* Overdue projects — match the meta-row's red-bold treatment in the
expanded view so a closed card screams "this slipped" the same way. */
.stratum-summary-due.is-overdue {
background: #ffeaea;
color: #c0392b;
font-weight: 700;
}
/* ── Recurring badge ───────────────────────────────────────────── */
.stratum-badge--recurring {
border: 1px dashed var(--purple, #7c3aed);
color: var(--purple, #7c3aed);
background: transparent;
font-size: 0.65rem;
}
/* Maintenance projects — same dashed "ongoing" treatment as recurring,
teal to match the Maintenance group heading. */
.stratum-badge--maintenance {
border: 1px dashed var(--teal, #0f766e);
color: var(--teal, #0f766e);
background: transparent;
font-size: 0.65rem;
}
/* Client retainer drawdown on maintenance cards — solid pill so it reads
as a live figure rather than a type label.
Threshold scale shared with the header pill and the Retainers module:
gold from 75%, orange from 85%, red once over. --gold is not a Contao
backend theme variable (only --blue/--gray/--green/--orange/--red are),
hence the hex fallback. */
.stratum-retainer-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
background: color-mix(in srgb, var(--teal, #0f766e) 12%, transparent);
color: var(--teal, #0f766e);
font-size: 0.68rem;
font-weight: 600;
white-space: nowrap;
}
/* "Retainer" label inside the pill — quieter than the figures so the
numbers still read first, but enough to say what they are. Inherits
the band colour via currentColor. */
.stratum-retainer-badge-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.75;
margin-right: 1px;
}
.stratum-retainer-badge.is-gold {
background: color-mix(in srgb, var(--gold, #b8860b) 16%, transparent);
color: var(--gold, #b8860b);
}
.stratum-retainer-badge.is-orange {
background: color-mix(in srgb, var(--orange, #e67e22) 16%, transparent);
color: var(--orange, #e67e22);
}
.stratum-retainer-badge.is-over {
background: color-mix(in srgb, var(--red, #c1272d) 14%, transparent);
color: var(--red, #c1272d);
}
/* Retainer split inside the expanded card's meta row. Grouped left with
Manager / Billing / Due, before the right-pinned total-time badge. */
.stratum-project-meta-retainer {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.stratum-meta-retainer-bar {
display: inline-block;
width: 70px;
height: 6px;
border-radius: 3px;
background: var(--table-even, #eef2f7);
overflow: hidden;
}
.stratum-meta-retainer-fill {
display: block;
height: 100%;
background: var(--green, #2e7d32);
}
.stratum-meta-retainer-fill.is-gold { background: var(--gold, #b8860b); }
.stratum-meta-retainer-fill.is-orange { background: var(--orange, #e67e22); }
.stratum-meta-retainer-fill.is-over { background: var(--red, #c1272d); }
.stratum-meta-retainer-pct {
font-size: 0.72rem;
color: var(--gray);
}
.stratum-project-meta-retainer.is-gold .stratum-meta-retainer-pct { color: var(--gold, #b8860b); }
.stratum-project-meta-retainer.is-orange .stratum-meta-retainer-pct { color: var(--orange, #e67e22); }
.stratum-project-meta-retainer.is-over .stratum-meta-retainer-pct {
color: var(--red, #c1272d);
font-weight: 700;
}
/* ── Expanded project body ─────────────────────────────────────── */
.stratum-project-body {
padding: 0 12px 10px;
}
/* When expanded, the summary acts as the top border and the
full header is inside the body — hide the summary title's
duplicate info by keeping the summary visually simple. */
details.stratum-project[open] > .stratum-project-summary {
margin-bottom: 0;
border-bottom: none;
}
/* Hide the summary meta (badges, progress bar) when expanded —
the full header inside the body shows everything already. */
details.stratum-project[open] .stratum-project-summary-meta {
display: none;
}
details.stratum-project[open] .stratum-project-summary-title {
display: none;
}
/* ═══════════════════════════════════════════════════════════════
Phase 2 UX: client prominence, by-client grouping, focus mode.
Per team feedback, the team thinks first in terms of "which
client is this for", not "which project is this". So the
collapsed summary leads with the client name (bold) and trails
with the project name in muted text.
═══════════════════════════════════════════════════════════════ */
/* Collapsed summary: client name primary, project name secondary. */
.stratum-summary-client {
font-weight: 600;
color: var(--text);
}
.stratum-summary-project {
font-weight: 400;
color: var(--gray);
margin-left: 4px;
}
/* In-body header: stack client name (h2) + project subtitle. */
.stratum-project-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.stratum-project-subtitle {
font-size: 0.85rem;
color: var(--gray);
line-height: 1.3;
}
/* Group heading variant for "by client" mode — neutral colour,
slightly larger client name. */
.stratum-group-heading--client {
color: var(--text);
border-bottom-color: var(--border);
font-size: 0.9rem;
text-transform: none;
letter-spacing: 0;
}
/* Focus mode: hide the right-hand filter panel and let the
project card take the full content width. A small "back to
board" bar replaces the filter chrome. */
.stratum-board--focus .content-filter {
display: none;
}
.stratum-board--focus .content-inner {
grid-column: 1 / -1;
}
.stratum-focus-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding: 6px 10px;
background: var(--panel-bg);
border: 1px solid var(--border);
border-radius: var(--border-radius);
font-size: 0.85rem;
}
.stratum-focus-back {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--blue, #2e6ebf);
text-decoration: none;
font-weight: 600;
}
.stratum-focus-back img {
width: 14px;
height: 14px;
}
.stratum-focus-back:hover {
text-decoration: underline;
}
.stratum-focus-label {
color: var(--gray);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* "Flip to next cycle" button — only renders for recurring projects.
Sits to the right of the Focus Mode label so it's visible the moment
the user opens a recurring project. */
.stratum-focus-flip {
margin-left: auto;
padding: 4px 10px;
background: var(--blue, #2e6ebf);
color: #fff;
border-radius: var(--border-radius);
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
}
.stratum-focus-flip:hover {
background: #1d4f99;
color: #fff;
text-decoration: none;
}
/* Focus icon styling — borrows the standard icon-action treatment. */
.stratum-action-focus {
opacity: 0.7;
}
.stratum-action-focus:hover {
opacity: 1;
}
/* ── SOP pill ────────────────────────────────────────────────────
Replaces the old SOP icon. A text pill carries the state without a
separate badge, which the 196px actions column has no room for:
blue when idle, orange (and linking straight to the run) while a run
is in progress. */
.stratum-sop-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border: 1px solid var(--blue);
border-radius: 9px;
background: color-mix(in srgb, var(--blue) 10%, transparent);
color: var(--blue);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
}
.stratum-sop-pill:hover {
background: color-mix(in srgb, var(--blue) 22%, transparent);
text-decoration: none;
}
/* A run is open on this row — orange, and the pill resumes it directly. */
.stratum-sop-pill.is-running {
border-color: var(--orange);
background: color-mix(in srgb, var(--orange) 16%, transparent);
color: var(--orange);
}
.stratum-sop-pill.is-running::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
animation: stratum-tbar-pulse 1.5s ease-in-out infinite;
}
.stratum-sop-pill.is-running:hover {
background: color-mix(in srgb, var(--orange) 28%, transparent);
}
/* The most recent run here finished — green, and the pill opens it
read-only so the work can be reviewed rather than starting over. */
.stratum-sop-pill.is-done {
border-color: var(--green);
background: color-mix(in srgb, var(--green) 12%, transparent);
color: var(--green);
}
.stratum-sop-pill.is-done::after {
content: '\2713';
font-size: 0.62rem;
line-height: 1;
}
.stratum-sop-pill.is-done:hover {
background: color-mix(in srgb, var(--green) 24%, transparent);
}
/* Linked-SOP count, carried over from the old icon. */
.stratum-sop-pill .stratum-sop-count {
position: static;
top: auto;
right: auto;
min-width: 0;
height: auto;
padding: 0;
background: none;
color: inherit;
font-size: 0.6rem;
line-height: 1;
opacity: 0.75;
}
|