/* ========================================================================== Anonda — application shell design system Loaded on every admin page, after app.css. Two palettes, one set of tokens. `` is stamped before first paint by the inline script in layouts/app.blade.php, so nothing below ever has to know which mode it is in — it just reads the variables. Owns: design tokens, sidebar, topbar, shell dropdowns, scrollbars. Page-level surfaces live in the page's own stylesheet. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens — dark (default) -------------------------------------------------------------------------- */ :root, :root[data-theme='dark'] { color-scheme: dark; --app-bg: #0b1220; --shell-bg: #0e1626; --shell-bg-deep: #0a111e; --topbar-bg: rgba(14, 22, 38, 0.85); --surface-1: #121c2f; --surface-2: #17233a; --surface-3: #1d2b45; /* translucent washes used for control fills, hovers and stripes */ --fill-1: rgba(255, 255, 255, 0.04); --fill-2: rgba(255, 255, 255, 0.07); --fill-3: rgba(255, 255, 255, 0.11); --line: rgba(148, 163, 184, 0.13); --line-strong: rgba(148, 163, 184, 0.22); --scroll-thumb: rgba(148, 163, 184, 0.18); --scroll-thumb-hi: rgba(148, 163, 184, 0.32); --dot: #3a4a63; --dot-hi: #7c8aa3; --text-1: #e9eefb; --text-2: #a7b4ca; --text-3: #7c8ba3; --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa; --shadow-1: 0 1px 2px rgba(3, 7, 18, 0.4); --shadow-2: 0 8px 24px -6px rgba(3, 7, 18, 0.55); --shadow-3: 0 18px 44px -12px rgba(3, 7, 18, 0.7); --tile-glow: 0.14; } /* -------------------------------------------------------------------------- Tokens — light (premium off-white) White chrome and cards on a warm-neutral page, separated by hairlines rather than heavy shadows. -------------------------------------------------------------------------- */ :root[data-theme='light'] { color-scheme: light; --app-bg: #f5f6f8; --shell-bg: #ffffff; --shell-bg-deep: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.86); --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f4f6f9; --fill-1: rgba(15, 23, 42, 0.035); --fill-2: rgba(15, 23, 42, 0.06); --fill-3: rgba(15, 23, 42, 0.09); --line: rgba(15, 23, 42, 0.09); --line-strong: rgba(15, 23, 42, 0.15); --scroll-thumb: rgba(15, 23, 42, 0.16); --scroll-thumb-hi: rgba(15, 23, 42, 0.28); --dot: #cbd5e1; --dot-hi: #94a3b8; --text-1: #0f172a; --text-2: #4a5568; --text-3: #64748b; /* one stop darker than the obvious choice: these are used as text on their own pale tint, where the 600s fall under 4.5:1 */ --ok: #047857; --warn: #b45309; --bad: #b91c1c; --info: #1d4ed8; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 8px 24px -8px rgba(15, 23, 42, 0.12); --shadow-3: 0 18px 44px -14px rgba(15, 23, 42, 0.18); --tile-glow: 0.16; } /* -------------------------------------------------------------------------- Shape & motion — the same in both modes. The accent tokens (--accent, --accent-hi, --accent-soft, --accent-line, --accent-glow, --accent-ink) are emitted per theme by layouts/partials/css. -------------------------------------------------------------------------- */ :root { --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --sidebar-w: 284px; --rail-w: 76px; --topbar-h: 60px; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Back-compat: a few older views still paint with these. */ --theme-700: var(--accent); --theme-800: var(--shell-bg); --theme-900: var(--shell-bg-deep); } html { background: var(--app-bg); } /* Legacy theme hooks, re-pointed at the tokens above. */ .theme-header-bg { background-color: var(--shell-bg) !important; background-image: none !important; } .theme-logo-bg { background-color: transparent !important; } .theme-btn-bg { background-color: var(--fill-1) !important; } .theme-btn-bg:hover { background-color: var(--fill-3) !important; } .theme-btn-bg:active, .theme-btn-bg:focus, .theme-btn-bg:focus-visible { background-color: var(--accent-soft) !important; color: var(--accent-hi) !important; outline: 2px solid var(--accent-line) !important; outline-offset: 0; } /* ========================================================================== 1. Sidebar ========================================================================== */ .side-bar { width: var(--sidebar-w); background: var(--shell-bg); border-right: 1px solid var(--line); min-height: 100vh; transition: width 0.24s var(--ease); } /* the shell columns must stretch, otherwise the sidebar stops at the fold */ .thetop { align-items: stretch !important; } /* --- brand ------------------------------------------------------------- */ .side-bar .brand { display: flex; align-items: center; gap: 11px; height: var(--topbar-h); padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--line); text-decoration: none; overflow: hidden; } .side-bar .brand:hover { text-decoration: none; } .brand-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-ink); background: linear-gradient(140deg, var(--accent-hi), var(--accent)); box-shadow: 0 4px 14px -4px var(--accent-glow); } .brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .brand-name { font-size: 14.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); } .brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--accent-soft); } /* --- search ------------------------------------------------------------ */ .side-search { padding: 12px 12px 8px; flex-shrink: 0; } .side-search-box { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 11px; border-radius: var(--r-md); background: var(--fill-1); border: 1px solid var(--line); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .side-search-box:focus-within { background: var(--fill-2); border-color: var(--accent-line); } .side-search-box svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); } .side-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--text-1); } .side-search-box input::placeholder { color: var(--text-3); } .side-search-box button { flex-shrink: 0; border: 0; background: transparent; padding: 0; color: var(--text-3); line-height: 0; } .side-search-box button:hover { color: var(--text-1); } .side-search-box button svg { width: 14px; height: 14px; } /* --- nav container ----------------------------------------------------- */ #side-bar { flex: 1; min-height: 0; padding: 4px 10px 16px; overflow-y: auto; overflow-x: hidden; border-right: 0 !important; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } #side-bar::-webkit-scrollbar { width: 6px; } #side-bar::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; } #side-bar::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); } #side-bar::-webkit-scrollbar-track { background: transparent; } /* --- section heading ---------------------------------------------------- Label, a rule that fades out across the remaining width, and a chevron that only appears on hover. The heading doubles as the group's collapse control; common.js does the toggling and remembers it. */ .nav-head { display: flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding: 5px 11px; border-radius: var(--r-sm); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); cursor: pointer; user-select: none; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav-head:hover, .nav-head:focus-visible { background: var(--fill-1); color: var(--text-2); outline: none; } .nav-head-label { flex-shrink: 0; white-space: nowrap; } /* the rule takes whatever width the label leaves and dissolves into the panel */ .nav-head-rule { flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); } .nav-head-chev { width: 13px; height: 13px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s var(--ease), transform 0.2s var(--ease); } .nav-head:hover .nav-head-chev, .nav-head:focus-visible .nav-head-chev { opacity: 0.75; } .nav-head.is-collapsed .nav-head-chev { opacity: 0.75; transform: rotate(-90deg); } /* a collapsed group keeps its heading a touch brighter, so it does not read as "missing" */ .nav-head.is-collapsed { color: var(--text-2); } /* the list should not open on a heading margin */ #side-bar > .nav-head:first-child { margin-top: 2px; } /* common.js flags a heading whose group is entirely permission-hidden */ .nav-head.is-empty { display: none; } .nav-divider { height: 1px; margin: 8px 12px; background: var(--line); } /* --- nav item ----------------------------------------------------------- */ #side-bar .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin-bottom: 2px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-2); white-space: nowrap; text-decoration: none; transition: background 0.15s var(--ease), color 0.15s var(--ease); } #side-bar .nav-item:hover, #side-bar .nav-item:focus { background: var(--fill-1); color: var(--text-1); text-decoration: none; outline: none; } /* --- icons ------------------------------------------------------------- Every top-level item carries a data-tone (set in AdminSidebarMenu), so its icon keeps its own hue in every state. The row's *text* still goes to the accent when active, which is what marks the position — the colour is there to make items findable at a glance, not to signal state. Anything without a tone falls back to the muted grey. */ #side-bar .nav-item { --nav-tone: var(--text-3); } #side-bar .nav-item svg:not(.chev), #side-bar .nav-item i { width: 20px; height: 20px; font-size: 18px; flex-shrink: 0; color: var(--nav-tone); transition: color 0.15s var(--ease); } #side-bar .nav-item[data-tone='sky'] { --nav-tone: #38bdf8; } #side-bar .nav-item[data-tone='blue'] { --nav-tone: #60a5fa; } #side-bar .nav-item[data-tone='indigo'] { --nav-tone: #818cf8; } #side-bar .nav-item[data-tone='violet'] { --nav-tone: #a78bfa; } #side-bar .nav-item[data-tone='pink'] { --nav-tone: #f472b6; } #side-bar .nav-item[data-tone='rose'] { --nav-tone: #fb7185; } #side-bar .nav-item[data-tone='orange'] { --nav-tone: #fb923c; } #side-bar .nav-item[data-tone='amber'] { --nav-tone: #fbbf24; } #side-bar .nav-item[data-tone='emerald'] { --nav-tone: #34d399; } #side-bar .nav-item[data-tone='teal'] { --nav-tone: #2dd4bf; } #side-bar .nav-item[data-tone='cyan'] { --nav-tone: #22d3ee; } #side-bar .nav-item[data-tone='slate'] { --nav-tone: #94a3b8; } /* the 400s wash out on white, so the light palette drops two stops */ :root[data-theme='light'] #side-bar .nav-item[data-tone='sky'] { --nav-tone: #0284c7; } :root[data-theme='light'] #side-bar .nav-item[data-tone='blue'] { --nav-tone: #2563eb; } :root[data-theme='light'] #side-bar .nav-item[data-tone='indigo'] { --nav-tone: #4f46e5; } :root[data-theme='light'] #side-bar .nav-item[data-tone='violet'] { --nav-tone: #7c3aed; } :root[data-theme='light'] #side-bar .nav-item[data-tone='pink'] { --nav-tone: #db2777; } :root[data-theme='light'] #side-bar .nav-item[data-tone='rose'] { --nav-tone: #e11d48; } :root[data-theme='light'] #side-bar .nav-item[data-tone='orange'] { --nav-tone: #ea580c; } :root[data-theme='light'] #side-bar .nav-item[data-tone='amber'] { --nav-tone: #b45309; } :root[data-theme='light'] #side-bar .nav-item[data-tone='emerald'] { --nav-tone: #059669; } :root[data-theme='light'] #side-bar .nav-item[data-tone='teal'] { --nav-tone: #0d9488; } :root[data-theme='light'] #side-bar .nav-item[data-tone='cyan'] { --nav-tone: #0891b2; } :root[data-theme='light'] #side-bar .nav-item[data-tone='slate'] { --nav-tone: #64748b; } .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-item .chev { width: 15px; height: 15px; flex-shrink: 0; margin-left: auto; color: var(--text-3); } /* active: accent wash + rail marker */ #side-bar .nav-item.theme-sidebar-active { background: var(--accent-soft); color: var(--accent-hi); } #side-bar .nav-item.theme-sidebar-active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } /* --- submenu ------------------------------------------------------------ */ #side-bar .chiled { position: relative; margin: 2px 0 6px; padding-left: 26px; } #side-bar .chiled-line { position: absolute; top: 2px; bottom: 2px; left: 20px; width: 1px; background: var(--line); } /* Each sub-item carries its own icon (derived from the label by App\Utils\MenuIcons), which takes over the job the connector dot used to do. The connector line stays to the left of the icons, so the hierarchy still reads without stacking two markers per row. */ #side-bar .nav-sub { display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin-bottom: 1px; border-radius: var(--r-sm); font-size: 15px; font-weight: 400; color: var(--text-2); white-space: nowrap; text-decoration: none; transition: background 0.15s var(--ease), color 0.15s var(--ease); } #side-bar .nav-sub .nav-sub-ico, #side-bar .nav-sub > i { width: 17px; height: 17px; font-size: 15px; flex-shrink: 0; color: var(--text-3); transition: color 0.15s var(--ease); } /* Stroke styling for the sprite icons. These are inherited CSS properties, so they reach into the shadow content — which is why the markup for each icon is just an pair. */ #side-bar .nav-sub-ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } #side-bar .nav-sub-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #side-bar .nav-sub:hover { background: var(--fill-1); color: var(--text-1); text-decoration: none; } #side-bar .nav-sub:hover .nav-sub-ico, #side-bar .nav-sub:hover > i { color: var(--text-2); } #side-bar .nav-sub.theme-sidebar-child-active { background: var(--accent-soft); color: var(--accent-hi); } #side-bar .nav-sub.theme-sidebar-child-active .nav-sub-ico, #side-bar .nav-sub.theme-sidebar-child-active > i { color: var(--accent-hi); } /* Rows hidden by a collapsed heading. This has to sit *after* the .nav-item rules: a leaf item is an carrying display:flex at the same specificity, so declaration order decides it. */ #side-bar > .is-group-hidden { display: none; } /* --- empty search state ------------------------------------------------- */ #sidebar-no-results { padding: 14px 16px; font-size: 12.5px; text-align: center; color: var(--text-3); border: 0 !important; } /* --- footer / collapse control ------------------------------------------ */ .side-foot { flex-shrink: 0; padding: 10px; border-top: 1px solid var(--line); } .rail-toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 11px; border: 0; border-radius: var(--r-md); background: transparent; font-size: 13px; font-weight: 500; color: var(--text-3); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .rail-toggle:hover { background: var(--fill-1); color: var(--text-1); } .rail-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.24s var(--ease); } /* ========================================================================== 2. Collapsed rail The early inline script in the layout stamps body.sidebar-collapse before first paint, so the rail never flashes open. ========================================================================== */ body.sidebar-collapse .side-bar { width: var(--rail-w); } body.sidebar-collapse .brand { justify-content: center; padding: 0; } body.sidebar-collapse .brand-text, body.sidebar-collapse .side-search, body.sidebar-collapse .nav-label, body.sidebar-collapse .nav-item .chev, body.sidebar-collapse .chiled, body.sidebar-collapse .nav-head, body.sidebar-collapse .rail-toggle span { display: none !important; } /* the rail has no headings, so it cannot show a collapse control either — every group is forced open while collapsed */ body.sidebar-collapse #side-bar > .nav-group.is-group-hidden { display: block; } body.sidebar-collapse #side-bar > .nav-item.is-group-hidden { display: flex; } body.sidebar-collapse #side-bar { padding: 12px 12px 16px; } body.sidebar-collapse #side-bar .nav-item { justify-content: center; padding: 11px 0; gap: 0; } body.sidebar-collapse #side-bar .nav-item.theme-sidebar-active::before { left: -12px; } body.sidebar-collapse .rail-toggle { justify-content: center; } body.sidebar-collapse .rail-toggle svg { transform: rotate(180deg); } /* rail tooltip — rendered into by common.js so the scroll container cannot clip it */ .rail-tip { position: fixed; z-index: 1200; padding: 6px 11px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); font-size: 12.5px; font-weight: 500; color: var(--text-1); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity 0.12s var(--ease), transform 0.12s var(--ease); } .rail-tip.show { opacity: 1; transform: translateX(0); } /* mobile drawer keeps its full width */ .side-bar.small-view-side-active { width: var(--sidebar-w) !important; box-shadow: var(--shadow-3); } body.sidebar-collapse .side-bar.small-view-side-active .brand-text, body.sidebar-collapse .side-bar.small-view-side-active .side-search, body.sidebar-collapse .side-bar.small-view-side-active .nav-label, body.sidebar-collapse .side-bar.small-view-side-active .nav-head, body.sidebar-collapse .side-bar.small-view-side-active .nav-item .chev { display: initial !important; } body.sidebar-collapse .side-bar.small-view-side-active .brand { justify-content: flex-start; padding: 0 16px; } body.sidebar-collapse .side-bar.small-view-side-active .nav-item { justify-content: flex-start; padding: 9px 11px; gap: 11px; } /* ========================================================================== 3. Topbar ========================================================================== */ .app-topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 18px; flex-shrink: 0; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .topbar-spacer { flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 8px; } /* icon + text buttons share one chassis */ .tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill-1); font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .tb-btn:hover, .tb-btn:focus { background: var(--fill-3); border-color: var(--line-strong); color: var(--text-1); text-decoration: none; outline: none; } .tb-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .tb-btn.is-icon { padding: 0; width: 36px; } .tb-btn.is-primary { background: linear-gradient(140deg, var(--accent-hi), var(--accent)); border-color: transparent; color: var(--accent-ink); font-weight: 600; box-shadow: 0 4px 14px -4px var(--accent-glow); } .tb-btn.is-primary:hover { filter: brightness(1.08); color: var(--accent-ink); } .tb-date { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* --- theme switch ------------------------------------------------------- */ /* One button, two icons; the one for the *current* mode is hidden so the button always shows what you are switching to. */ .tb-theme .icon-dark, .tb-theme .icon-light { display: none; } :root[data-theme='dark'] .tb-theme .icon-light { display: block; } :root[data-theme='light'] .tb-theme .icon-dark { display: block; } /* notification bell + unread badge */ .notif-wrap { position: relative; display: inline-block; } .tb-badge:empty { display: none; } .tb-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--bad); border: 2px solid var(--shell-bg); font-size: 10px; font-weight: 700; line-height: 13px; color: #fff; text-align: center; } /* --- shell dropdown menus ---------------------------------------------- */ .tb-menu { position: absolute; right: 0; z-index: 40; margin-top: 8px; min-width: 214px; padding: 6px; list-style: none; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); } .tb-menu.align-left { right: auto; left: 0; } .tb-menu-head { padding: 9px 11px 7px; border-bottom: 1px solid var(--line); margin-bottom: 5px; } .tb-menu-head .k { font-size: 11px; color: var(--text-3); margin: 0; } .tb-menu-head .v { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-menu a, .tb-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-align: left; text-decoration: none; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .tb-menu a:hover, .tb-menu button:hover { background: var(--fill-2); color: var(--text-1); text-decoration: none; } .tb-menu svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-3); } .tb-menu a:hover svg { color: var(--text-2); } /* notification panel (bootstrap dropdown, so keep .dropdown-menu behaviour) */ .notif-panel { right: 0; left: auto; width: 340px; max-height: 70vh; overflow-y: auto; margin-top: 8px; padding: 6px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); } .notif-panel > li > a, .notif-panel .menu > li > a { display: block; padding: 9px 11px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); white-space: normal; } .notif-panel > li > a:hover, .notif-panel .menu > li > a:hover { background: var(--fill-2); color: var(--text-1); } .notif-panel .footer { border-top: 1px solid var(--line); margin-top: 5px; text-align: center; } .notif-panel .footer a { color: var(--accent-hi); } /* the shell uses

for its dropdowns; hide the default marker */ .app-topbar details > summary { list-style: none; } .app-topbar details > summary::-webkit-details-marker, .app-topbar details > summary::marker { display: none; content: ''; } /* ========================================================================== 4. Misc shell ========================================================================== */ /* the drawer scrim stays dark in both modes — it is a scrim, not a surface */ .overlay { background: rgba(3, 7, 18, 0.72) !important; backdrop-filter: blur(2px); } /* scroll-to-top pill */ .scrolltop .scroll.icon { background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2); }