/**
* singular-platform.css — the Singular design system.
*
* WHY THIS FILE EXISTS
* --------------------
* Singular had no shared component vocabulary. Three screens (Today, Settings,
* Calendar) were hand-built to look modern; every other screen fell through to
* `stylesheet.css`, a 2012 stylesheet that styled bare elements globally:
*
* a { text-transform: uppercase; color: #0096FE; } → every link SHOUTED
* h2 { background: #ccc; linear-gradient(...); } → grey "title bars"
* body { font: 12px Tahoma; text-align: center; } → whole app centred
* .pagecontainer { background-image: Ptouch_contentBG.jpg } → watermark
* #files, #account, #reports { width: 1000px } → fixed-width pages
*
* Those rules also leaked into screens that HAD been converted to Bootstrap,
* which is why Find Photos rendered with a wrapped "Locatio/n" label and a grey
* header bar despite being clean Bootstrap 5 markup. Deleting the legacy sheet
* was the single highest-leverage change; this file is what replaces it.
*
* WHAT IT PROVIDES
* ----------------
* A real component layer — page furniture, panels, data tables, forms, buttons,
* pagination, empty states, toolbars — built entirely on the design tokens
* already defined in style.css (--brand, --surface, --border, --text, --muted,
* --radius-card …). Because it uses only tokens, light and dark themes both
* work with no extra rules.
*
* THE LEGACY BRIDGE (§13)
* -----------------------
* ~30 views still use old class names (.toolBar, .settingTab, .editButton,
* .formbox …). Rather than rewrite all of them at once and risk breaking
* working screens, §13 re-points those names at the modern components. The
* markup stays familiar; the rendering is new. Views get converted to the
* real class names over time, and each conversion deletes a bridge rule.
*
* CASCADE POSITION
* ----------------
* Loaded after bootstrap.min.css and style.css, before singular-theme.css:
* bootstrap → shared theme (tokens) → THIS (system) → singular-theme (features)
* So it may override Bootstrap, and feature CSS may override it.
*
* Sections:
* 1. Base & type scale 8. Empty states
* 2. Page furniture 9. Chips, badges, status
* 3. Panels 10. Notices
* 4. Data tables 11. Toolbars
* 5. Forms 12. Device & preview frames
* 6. Buttons 13. Legacy bridge
* 7. Pagination 14. Responsive
*/
/* ═══════════════════════════════════════════════════════════════════
1. BASE & TYPE SCALE
The legacy sheet set 12px Tahoma and text-align:center on , so
every page inherited both. These are the corrective defaults; they are
deliberately plain so Bootstrap and the shared theme stay in charge of
everything else.
═══════════════════════════════════════════════════════════════════ */
:root {
/* Spacing rhythm — one scale, used by every component below. */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
/* Type scale. Body sits at 15px: the legacy 12px was unreadable on the
dense table screens, and 16px pushed the calendar grid off-screen. */
--fs-xs: 0.75rem;
--fs-sm: 0.8125rem;
--fs-base: 0.9375rem;
--fs-lg: 1.0625rem;
--fs-xl: 1.375rem;
--fs-2xl: 1.75rem;
/* Table geometry, shared by .dt and the legacy-table bridge. */
--dt-cell-y: 0.7rem;
--dt-cell-x: 0.9rem;
}
body.singular-app {
font-size: var(--fs-base);
line-height: 1.55;
text-align: left; /* undo legacy body{text-align:center} */
-webkit-font-smoothing: antialiased;
}
/* Links inherit brand colour and stay sentence case. The single most
visible legacy artefact was `text-transform: uppercase` on every ,
which turned "Open calendar" into "OPEN CALENDAR" app-wide. */
body.singular-app a {
color: var(--brand);
text-transform: none;
text-decoration: none;
padding-right: 0;
transition: color 0.15s ease;
}
body.singular-app a:hover { color: var(--brand-hover); text-decoration: underline; }
/* Headings own no chrome. Legacy h1 carried a border and h2 a grey gradient
bar, so any view that used a plain heading got decoration it never asked
for. Panels draw their own headers (§3) instead. */
body.singular-app :is(h1, h2, h3, h4, h5, h6) {
background: none;
border: 0;
padding: 0;
margin: 0 0 var(--sp-3);
color: var(--text);
font-weight: 650;
line-height: 1.25;
text-align: inherit;
text-shadow: none;
filter: none;
}
body.singular-app h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
body.singular-app h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
body.singular-app h3 { font-size: var(--fs-lg); }
body.singular-app h4 { font-size: var(--fs-base); }
body.singular-app hr {
border: 0;
border-top: 1px solid var(--border);
opacity: 1;
margin: var(--sp-5) 0;
}
/* Focus ring — one definition, everywhere. Legacy relied on the browser
default, which vanished entirely against the dark theme. */
body.singular-app :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: var(--radius-btn-sm);
}
/* ═══════════════════════════════════════════════════════════════════
2. PAGE FURNITURE
.pagecontainer is the wrapper navbar_view.php opens around every
authenticated page. The name is kept (8 views and both shells emit it)
but the styling is entirely new: no watermark, no 1000px cap.
═══════════════════════════════════════════════════════════════════ */
.pagecontainer,
.page {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 0 var(--sp-7);
background: none; /* was the Ptouch_contentBG.jpg watermark */
text-align: left;
}
/* Page header: title on the left, actions on the right, collapsing to two
rows on narrow screens. Replaces the ad-hoc d-flex block each converted
view was repeating by hand. */
.page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.page-head-text { min-width: 0; }
.page-title {
font-size: var(--fs-2xl);
font-weight: 680;
letter-spacing: -0.02em;
margin: 0;
color: var(--text);
}
.page-sub {
margin: var(--sp-1) 0 0;
font-size: var(--fs-sm);
color: var(--muted);
}
.page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
/* Breadcrumb / back row above a page title. */
.page-crumbs {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
font-size: var(--fs-sm);
color: var(--muted);
}
.page-crumbs a { color: var(--muted); font-weight: 600; }
.page-crumbs a:hover { color: var(--text); text-decoration: none; }
.page-crumbs .sep { opacity: 0.4; }
/* ═══════════════════════════════════════════════════════════════════
3. PANELS
The universal content container. Bootstrap's .card is aliased onto it so
already-converted views (Find Photos, Setup) pick this up unchanged.
═══════════════════════════════════════════════════════════════════ */
.panel,
body.singular-app .card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden; /* keeps child tables inside the rounded corners */
margin-bottom: var(--sp-4);
}
.panel-head,
body.singular-app .card-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: none; /* legacy h2/card-header painted a grey gradient */
border-bottom: 1px solid var(--border);
}
.panel-title,
body.singular-app .card-header > :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.panel-body,
body.singular-app .card-body { padding: var(--sp-4); }
.panel-foot,
body.singular-app .card-footer {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border);
background-color: var(--surface-hover);
}
/* A panel whose body is nothing but a table wants no padding — the table
supplies its own cell rhythm and should meet the panel edges. */
.panel-body.is-flush,
.panel > .dt-wrap:only-child { padding: 0; }
/* ═══════════════════════════════════════════════════════════════════
4. DATA TABLES
Every list screen (Emails, Photos, Slideshow rooms, Payments, Staff) was
a bare with borders and grey header cells. .dt is the one
replacement: no vertical rules, a quiet header, generous rows, and a
horizontal scroll container so wide tables never blow out the layout.
═══════════════════════════════════════════════════════════════════ */
.dt-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dt {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
color: var(--text);
margin: 0;
}
.dt thead th {
position: sticky;
top: 0;
z-index: 1;
padding: var(--dt-cell-y) var(--dt-cell-x);
background: var(--surface);
border: 0;
border-bottom: 1px solid var(--border);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
white-space: nowrap;
}
.dt tbody td {
padding: var(--dt-cell-y) var(--dt-cell-x);
border: 0;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr { transition: background 0.12s ease; }
.dt tbody tr:hover { background: var(--row-hover); }
/* Column helpers — used instead of per-cell inline width/align attributes. */
.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt .center { text-align: center; }
.dt .nowrap { white-space: nowrap; }
.dt .shrink { width: 1%; white-space: nowrap; }
.dt .muted { color: var(--muted); }
/* Codes and IDs read as data, not prose. */
.dt .mono,
.code-cell {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.92em;
letter-spacing: 0.02em;
}
/* Row selection checkbox column. */
.dt .pick { width: 1%; padding-right: 0; }
/* A table nested directly in a panel loses its outer radius clipping
problems because .panel already sets overflow:hidden. */
.panel .dt-wrap { border-radius: 0; }
/* ═══════════════════════════════════════════════════════════════════
5. FORMS
Legacy laid forms out with .formbox (a 300px inline-block) and coloured
.formname labels. The modern equivalent is a responsive grid of .field
blocks with quiet labels above full-width controls.
═══════════════════════════════════════════════════════════════════ */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-4);
}
.field { min-width: 0; margin-bottom: var(--sp-4); }
.form-grid .field { margin-bottom: 0; }
.field-label,
body.singular-app .form-label {
display: block;
width: auto; /* legacy .formname was a fixed narrow chip, which
is what wrapped "Location" into "Locatio/n" */
margin: 0 0 var(--sp-2);
padding: 0;
background: none;
border: 0;
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 600;
text-align: left;
white-space: normal;
}
.field-hint {
margin: var(--sp-2) 0 0;
font-size: var(--fs-xs);
color: var(--muted);
}
/* Controls. Bootstrap supplies the behaviour; these align it to the tokens
so inputs match panels in both themes.
`:not(.premium-card *)` keeps this baseline off the login card. `:is()` takes
the specificity of its most specific argument — `input[type="email"]` — so
this selector outweighs both `.premium-card .form-control` in style.css and
Bootstrap's own `.input-group > .form-control`. That last one matters: it is
what sets `width: 1%` so an input can flex beside its icon addon. Overriding
it with `width: 100%` pushed the field past the group's width and, because
`.input-group` wraps, dropped it onto its own line below the icon. The card
is a fully-styled component and owns its inputs; this rule is for the bare
ones everywhere else. */
body.singular-app :is(.form-control, .form-select, input[type="text"],
input[type="email"], input[type="password"],
input[type="number"], input[type="search"],
input[type="tel"], input[type="date"], select,
textarea):not(.premium-card *) {
width: 100%;
padding: 0.5rem 0.75rem;
background-color: var(--surface-hover);
border: 1px solid var(--border);
border-radius: var(--radius-input);
color: var(--text);
font-size: var(--fs-base);
font-family: inherit;
line-height: 1.5;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.singular-app :is(.form-control, .form-select, input, select, textarea):focus {
background: var(--surface-hover);
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-glow);
color: var(--text);
outline: none;
}
body.singular-app :is(.form-control, input, textarea)::placeholder { color: var(--muted); opacity: 1; }
body.singular-app :is(.form-control, .form-select, input, select, textarea):disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Checkboxes and radios keep the brand colour and a comfortable hit area. */
body.singular-app input[type="checkbox"],
body.singular-app input[type="radio"] {
width: 1rem;
height: 1rem;
accent-color: var(--brand);
vertical-align: middle;
cursor: pointer;
}
/* Inline "or" divider between mutually exclusive search fields (Find Photos). */
.singular-or,
.or-rule {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: var(--sp-4) 0;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.singular-or::before, .singular-or::after,
.or-rule::before, .or-rule::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
/* An input with a trailing action (the "Clear" buttons on Find Photos). The
corner rule assumes that shape — field first, button second. The login card
is the mirror image (icon addon first, field second), so it is excluded here
too and keeps the corners style.css gives it. */
body.singular-app .input-group { display: flex; }
body.singular-app .input-group > .form-control:not(.premium-card *) { border-radius: var(--radius-input) 0 0 var(--radius-input); }
body.singular-app .input-group > .btn {
border-radius: 0 var(--radius-input) var(--radius-input) 0;
border-left: 0;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════
6. BUTTONS
═══════════════════════════════════════════════════════════════════ */
body.singular-app .btn,
.btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
border: 1px solid transparent;
border-radius: var(--radius-btn);
font-size: var(--fs-sm);
font-weight: 650;
line-height: 1.4;
text-transform: none;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease,
transform 0.08s ease, box-shadow 0.15s ease;
}
body.singular-app .btn:active { transform: translateY(1px); }
body.singular-app .btn-primary,
body.singular-app input[type="submit"],
body.singular-app input[type="button"] {
background: var(--brand);
border-color: var(--brand);
color: #fff;
box-shadow: 0 2px 10px var(--brand-shadow);
}
body.singular-app .btn-primary:hover,
body.singular-app input[type="submit"]:hover,
body.singular-app input[type="button"]:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: #fff;
}
/* Secondary / outline / "light" all resolve to one quiet button. Legacy
views use several names for the same intent, so they share a rule. */
body.singular-app :is(.btn-secondary, .btn-outline-light, .btn-outline-secondary,
.btn-default, .btn-quiet) {
background: var(--surface-hover);
border-color: var(--border);
color: var(--text);
}
body.singular-app :is(.btn-secondary, .btn-outline-light, .btn-outline-secondary,
.btn-default, .btn-quiet):hover {
background: var(--surface-hover);
border-color: var(--brand);
color: var(--text);
}
body.singular-app .btn-danger {
background: var(--c-red);
border-color: var(--c-red);
color: #fff;
}
body.singular-app .btn-danger:hover { filter: brightness(0.92); color: #fff; }
/* A link that should read as an action without becoming a filled button. */
body.singular-app .btn-link,
.link-action {
background: none;
border-color: transparent;
color: var(--brand);
padding: 0.25rem 0.4rem;
font-weight: 650;
}
body.singular-app .btn-link:hover, .link-action:hover { color: var(--brand-hover); text-decoration: underline; }
body.singular-app .btn-sm { padding: 0.35rem 0.7rem; font-size: var(--fs-xs); }
body.singular-app .btn-lg { padding: 0.7rem 1.4rem; font-size: var(--fs-base); }
/* Square icon-only button, used for row actions (delete, edit). */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-btn-sm);
background: var(--surface-hover);
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-icon:hover { color: var(--text); border-color: var(--brand); }
.btn-icon.is-danger:hover { color: var(--c-red); border-color: var(--c-red); }
/* ═══════════════════════════════════════════════════════════════════
7. PAGINATION
The legacy pager printed "Previous Page | Page [1] of 1 GO | Next Page"
as loose inline text, which overlapped itself on every list screen.
═══════════════════════════════════════════════════════════════════ */
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-sm);
color: var(--muted);
}
.pager-group {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.pager-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-btn-sm);
background: var(--surface-hover);
color: var(--text);
font-size: var(--fs-xs);
font-weight: 650;
}
.pager-btn:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.pager-btn[aria-disabled="true"],
.pager-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.pager-input {
width: 3.5rem !important;
padding: 0.3rem 0.4rem !important;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Each pager control is its own POST form (the list is POST-driven), so the
forms must lay out inline and contribute no box of their own. */
.pager-form { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
/* Filter pills ("Today | This week | Pending | All"). Rendered as