kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9febb8bb606ad061adc7819d2b2ae24c63304ecd
flxn-app/src/themes/wireframe/theme.css
T
kyle 9ed3f7169e
CI/CD Pipeline / Build and Push PocketBase Docker Image (push) Successful in 13s
Details
CI/CD Pipeline / i18n Catalog Check (push) Successful in 31s
Details
CI/CD Pipeline / Build and Push App Docker Image (push) Successful in 3m25s
Details
CI/CD Pipeline / Deploy to Kubernetes (push) Successful in 8m29s
Details
slide animation
2026-09-11 08:32:42 -07:00

545 lines
18 KiB
CSS
Raw Blame History

/* Wireframe "Viewport" — an untextured 3D-modeling viewport. Surfaces are
unshaded mesh objects: flat fills, thin vector edges, vertex dots at the
four corners. Selection follows the classic viewport convention: the
user's accent as a 1px outline + accent vertex dots + a light accent
wash. Isometric-cube divider motif; mono annotation labels (JetBrains
Mono) against clean, heavier Inter headings. */
/* ---------- 1. Tokens, any scheme ---------- */
[data-theme="wireframe"][data-theme] {
--mantine-font-family: "Inter", sans-serif;
--mantine-font-family-headings: "Inter", sans-serif;
--mantine-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--mantine-heading-font-weight: 800;
--mantine-radius-default: 3px;
--mantine-radius-xs: 2px;
--mantine-radius-sm: 3px;
--mantine-radius-md: 4px;
--mantine-radius-lg: 4px;
--mantine-radius-xl: 6px;
--mantine-shadow-xs: none;
--mantine-shadow-sm: none;
--mantine-shadow-md: none;
--mantine-shadow-lg: none;
--mantine-shadow-xl: none;
/* square viewport avatar, vertex-dotted corners applied via .flxn-avatar-frame */
--flxn-avatar-radius: 3px;
--flxn-badge-radius: 3px;
}
/* ---------- 2. Per-scheme tokens ---------- */
[data-theme="wireframe"][data-theme][data-mantine-color-scheme="light"] {
/* thin vector edge ink + vertex-dot color */
--wf-edge: #445;
--wf-edge-dim: rgba(68, 68, 85, 0.32);
--wf-vertex: #445;
--wf-surface: #ffffff;
--wf-panel: #f8f9fa;
/* the user's accent, kept legible as ink on the mesh */
--wf-accent-ink: var(--mantine-primary-color-6);
--wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23445' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23445' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
--flxn-avatar-border: 1px solid var(--wf-edge);
--mantine-color-body: #f2f3f5;
--mantine-color-text: #20242a;
--mantine-color-bright: #0e1013;
--mantine-color-dimmed: #55606b;
--mantine-color-anchor: var(--wf-accent-ink);
--mantine-color-error: #d0231f;
--mantine-color-placeholder: #7d8590;
--mantine-color-default: #ffffff;
--mantine-color-default-hover: #eaecef;
--mantine-color-default-color: #20242a;
--mantine-color-default-border: rgba(68, 68, 85, 0.45);
/* cool viewport gray ramp */
--mantine-color-gray-0: #f8f9fa;
--mantine-color-gray-1: #eef0f2;
--mantine-color-gray-2: #e2e5e9;
--mantine-color-gray-3: #d1d5db;
--mantine-color-gray-4: #b7bcc4;
--mantine-color-gray-5: #9aa1a8;
--mantine-color-gray-6: #7d8590;
--mantine-color-gray-7: #5f666f;
--mantine-color-gray-8: #454b52;
--mantine-color-gray-9: #2c3136;
/* app tokens */
--flxn-gold: #9a6700;
--flxn-silver: #5f666f;
--flxn-bronze: #a05a1e;
--flxn-toast-success: #0e7d3f;
--flxn-toast-error: #d0231f;
--flxn-podium-1-bg: rgba(154, 103, 0, 0.06);
--flxn-podium-1-border: rgba(154, 103, 0, 0.5);
--flxn-podium-1-label: #855800;
--flxn-podium-2-bg: rgba(95, 102, 111, 0.07);
--flxn-podium-2-border: rgba(95, 102, 111, 0.5);
--flxn-podium-2-label: #4d545c;
--flxn-podium-3-bg: rgba(160, 90, 30, 0.06);
--flxn-podium-3-border: rgba(160, 90, 30, 0.45);
--flxn-podium-3-label: #a05a1e;
--flxn-showcase-bg: #ffffff;
--flxn-overlay: rgba(15, 17, 20, 0.4);
--flxn-dotgrid-color: rgba(68, 68, 85, 0.28);
--flxn-pop-shadow: rgba(0, 0, 0, 0);
}
[data-theme="wireframe"][data-theme][data-mantine-color-scheme="dark"] {
/* pale vector edge on the night viewport */
--wf-edge: #aab2bc;
--wf-edge-dim: rgba(170, 178, 188, 0.3);
--wf-vertex: #aab2bc;
--wf-surface: #1d2024;
--wf-panel: #131518;
--wf-accent-ink: var(--mantine-primary-color-4);
--wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23aab2bc' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23aab2bc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
--flxn-avatar-border: 1px solid var(--wf-edge);
--mantine-color-body: #17191c;
--mantine-color-text: #e4e6e9;
--mantine-color-bright: #ffffff;
--mantine-color-dimmed: #9aa1a8;
--mantine-color-anchor: var(--wf-accent-ink);
--mantine-color-error: #ff6b6b;
--mantine-color-placeholder: #6e747b;
--mantine-color-default: #1d2024;
--mantine-color-default-hover: #232629;
--mantine-color-default-color: #e4e6e9;
--mantine-color-default-border: rgba(170, 178, 188, 0.32);
/* steel-cast dark ramp, tuned to the night viewport body */
--mantine-color-dark-0: #eef0f2;
--mantine-color-dark-1: #d6dadd;
--mantine-color-dark-2: #b0b7bd;
--mantine-color-dark-3: #868f97;
--mantine-color-dark-4: #5b636b;
--mantine-color-dark-5: #383d43;
--mantine-color-dark-6: #232629;
--mantine-color-dark-7: #17191c;
--mantine-color-dark-8: #131518;
--mantine-color-dark-9: #0d0f11;
/* app tokens */
--flxn-gold: #ffc861;
--flxn-silver: #c3cad1;
--flxn-bronze: #e0a06a;
--flxn-toast-success: #4bd08a;
--flxn-toast-error: #ff6b6b;
--flxn-podium-1-bg: rgba(255, 200, 97, 0.08);
--flxn-podium-1-border: rgba(255, 200, 97, 0.5);
--flxn-podium-1-label: #ffc861;
--flxn-podium-2-bg: rgba(195, 202, 209, 0.08);
--flxn-podium-2-border: rgba(195, 202, 209, 0.45);
--flxn-podium-2-label: #c3cad1;
--flxn-podium-3-bg: rgba(224, 160, 106, 0.08);
--flxn-podium-3-border: rgba(224, 160, 106, 0.45);
--flxn-podium-3-label: #e0a06a;
--flxn-showcase-bg: #1d2024;
--flxn-overlay: rgba(0, 0, 0, 0.6);
--flxn-dotgrid-color: rgba(170, 178, 188, 0.16);
--flxn-pop-shadow: rgba(0, 0, 0, 0);
}
/* ---------- 3. Decoration: static perspective floor-grid hint ---------- */
[data-theme="wireframe"] .flxn-theme-overlay {
position: fixed;
left: -30vw;
right: -30vw;
bottom: -4vh;
height: 26vh;
z-index: 9998;
pointer-events: none;
opacity: 0.22;
background-image:
repeating-linear-gradient(90deg, var(--wf-edge) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, var(--wf-edge) 0 1px, transparent 1px 32px);
transform: perspective(280px) rotateX(62deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}
/* ---------- 4. Mesh surfaces: flat fill, thin edge, vertex dots ---------- */
[data-theme="wireframe"] .mantine-Paper-root,
[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
position: relative;
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge-dim);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
border-color: var(--wf-edge);
}
[data-theme="wireframe"] .mantine-Card-root::after,
[data-theme="wireframe"] .flxn-tile::after,
[data-theme="wireframe"] .flxn-match-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
background-size: 4px 4px;
background-position:
-2px -2px,
calc(100% + 2px) -2px,
-2px calc(100% + 2px),
calc(100% + 2px) calc(100% + 2px);
}
[data-theme="wireframe"] .mantine-Divider-root,
[data-theme="wireframe"] .mantine-Divider-root::before,
[data-theme="wireframe"] .mantine-Divider-root::after {
--divider-color: var(--wf-edge-dim);
}
/* isometric-cube divider motif on labeled dividers */
[data-theme="wireframe"] .mantine-Divider-label {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: 0.72rem;
color: var(--mantine-color-dimmed);
}
[data-theme="wireframe"] .mantine-Divider-label::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
flex: none;
background-image: var(--wf-cube-icon);
background-repeat: no-repeat;
background-size: contain;
}
/* ---------- 5. Annotation type: mono, uppercase, tracked ---------- */
[data-theme="wireframe"] .mantine-InputWrapper-label,
[data-theme="wireframe"] .mantine-Badge-label,
[data-theme="wireframe"] .mantine-Tabs-tab,
[data-theme="wireframe"] .mantine-SegmentedControl-label,
[data-theme="wireframe"] .mantine-Notification-title,
[data-theme="wireframe"] .mantine-Modal-title,
[data-theme="wireframe"] .mantine-Menu-label,
[data-theme="wireframe"] .mantine-Alert-title,
[data-theme="wireframe"] .mantine-Tooltip-tooltip {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
}
[data-theme="wireframe"] .mantine-InputWrapper-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--mantine-color-dimmed);
}
/* ---------- 6. Controls: outlined technical boxes ---------- */
[data-theme="wireframe"] .mantine-Button-root {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Button-root[data-variant="default"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="default"] {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
}
[data-theme="wireframe"] .mantine-Button-root[data-variant="filled"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="filled"] {
border: 1px solid var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-Input-input {
background-color: var(--wf-surface);
border-color: var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-Input-input:focus,
[data-theme="wireframe"] .mantine-Input-input:focus-within {
border-color: var(--mantine-primary-color-filled);
outline: 1px solid var(--mantine-primary-color-filled);
outline-offset: -1px;
}
[data-theme="wireframe"] .mantine-Checkbox-input {
border-color: var(--wf-edge);
background-color: var(--wf-surface);
}
[data-theme="wireframe"] .mantine-Checkbox-input:checked {
background-color: var(--mantine-primary-color-filled);
border-color: var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-Switch-track {
border-radius: 2px;
border: 1px solid var(--wf-edge);
background-color: var(--wf-surface);
}
[data-theme="wireframe"] .mantine-Switch-thumb {
border-radius: 1px;
}
[data-theme="wireframe"] .mantine-SegmentedControl-root {
background-color: var(--wf-panel);
border: 1px solid var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-SegmentedControl-indicator {
background-color: var(--mantine-primary-color-filled);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-SegmentedControl-label[data-active] {
color: var(--mantine-primary-color-contrast);
}
[data-theme="wireframe"] .mantine-Badge-root {
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Badge-root[data-variant="light"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="default"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="outline"] {
border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}
[data-theme="wireframe"] .mantine-Progress-root {
border: 1px solid var(--wf-edge-dim);
background-color: var(--wf-panel);
}
[data-theme="wireframe"] .mantine-Avatar-root,
[data-theme="wireframe"] .mantine-Avatar-root .mantine-Avatar-image,
[data-theme="wireframe"] .mantine-ThemeIcon-root {
border-radius: 3px;
}
/* selection: accent 1px ring on the highlighted combobox option */
[data-theme="wireframe"] [data-combobox-selected] {
box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}
/* ---------- 7. Overlays: opaque panels, no shadow ---------- */
[data-theme="wireframe"] .mantine-Modal-content {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Modal-header {
background-color: var(--wf-surface);
border-bottom: 1px solid var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-Popover-dropdown,
[data-theme="wireframe"] .mantine-Menu-dropdown,
[data-theme="wireframe"] .mantine-Combobox-dropdown {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Tooltip-tooltip {
font-size: 0.68rem;
background-color: var(--wf-panel);
color: var(--mantine-color-text);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Notification-root {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Alert-root {
border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
box-shadow: none;
}
/* ---------- 8. Shell ---------- */
[data-theme="wireframe"] .mantine-AppShell-root {
--app-shell-border-color: var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-AppShell-header,
[data-theme="wireframe"] .mantine-AppShell-navbar {
background-color: var(--mantine-color-body);
border-color: var(--wf-edge-dim);
}
/* ---------- 9. Selection convention: accent outline + wash + vertex ---------- */
[data-theme="wireframe"] .mantine-NavLink-root[data-active] {
background-color: var(--mantine-primary-color-light);
color: var(--mantine-primary-color-light-color);
box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-label,
[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-section {
color: var(--mantine-primary-color-light-color);
}
/* ---------- 10. App hooks: viewport language ---------- */
/* tab strip: resting stays flat; docked = title strip with heavy edge rule */
[data-theme="wireframe"] .flxn-tabs[data-stuck] {
border-bottom: 2px solid var(--wf-edge);
}
[data-theme="wireframe"] .flxn-tab.flxn-tab {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.75rem;
color: var(--mantine-color-dimmed);
}
[data-theme="wireframe"] .flxn-tab.flxn-tab[data-active] {
color: var(--wf-accent-ink);
font-weight: 700;
}
[data-theme="wireframe"] .flxn-tabs-indicator.flxn-tabs-indicator {
border-bottom: 2px solid var(--mantine-primary-color-filled);
padding-inline: 0.5rem;
}
/* nav tiles: mesh surface (border + vertex dots from rule 4); selecting them
(hover/focus) takes on the accent selection convention */
[data-theme="wireframe"] .flxn-tile-icon {
color: var(--wf-accent-ink);
}
@media (hover: hover) {
[data-theme="wireframe"] .flxn-tile:hover {
border-color: var(--mantine-primary-color-filled);
background-color: var(--mantine-primary-color-light);
}
[data-theme="wireframe"] .flxn-tile:hover::after {
background-image:
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%);
}
/* accent icon over the light accent wash needs the wash's own on-color */
[data-theme="wireframe"] .flxn-tile:hover .flxn-tile-icon {
color: var(--mantine-primary-color-light-color);
}
}
[data-theme="wireframe"] .flxn-tile:focus-visible {
border-color: var(--mantine-primary-color-filled);
background-color: var(--mantine-primary-color-light);
outline: none;
}
[data-theme="wireframe"] .flxn-tile:focus-visible .flxn-tile-icon {
color: var(--mantine-primary-color-light-color);
}
/* "see all": annotation chip */
[data-theme="wireframe"] .flxn-see-all.flxn-see-all {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid var(--wf-edge-dim);
background-color: transparent;
color: var(--wf-accent-ink);
}
@media (hover: hover) {
[data-theme="wireframe"] .flxn-see-all.flxn-see-all:hover {
background-color: var(--mantine-primary-color-light);
border-color: var(--mantine-primary-color-filled);
color: var(--mantine-primary-color-light-color);
text-decoration: none;
}
}
/* reaction tray: properties-panel strip under the match-card mesh object */
[data-theme="wireframe"] .flxn-reaction-row.flxn-reaction-row {
background-color: var(--wf-panel);
border: 1px solid var(--wf-edge-dim);
font-family: var(--mantine-font-family-monospace);
}
/* square avatar, vertex-dotted corners just outside the frame */
[data-theme="wireframe"] .flxn-avatar-frame {
position: relative;
}
[data-theme="wireframe"] .flxn-avatar-frame::after {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
background-size: 4px 4px;
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
/* press feedback: a light scale-down + accent selection-ring flash */
[data-theme="wireframe"] .flxn-press {
outline: 1px solid transparent;
outline-offset: -1px;
transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1), outline-color 150ms ease;
}
[data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transform: scale(0.97);
outline-color: var(--mantine-primary-color-filled);
}
@media (prefers-reduced-motion: reduce) {
[data-theme="wireframe"] .flxn-press,
[data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transition: none;
transform: none;
}
}
Reference in New Issue View Git Blame Copy Permalink