/* ========================================================================== Shared chrome - the sign-in page, the admin area, and the fixed controls that appear on every page. -------------------------------------------------------------------------- Loaded after style.css and after the active theme file, and written entirely in terms of the tokens the theme defines (--ayt-bg, --ayt-text, --ayt-accent, --ayt-border, and the chrome tokens each theme declares beside them). Why this exists as one file rather than a section in each theme: the sign-in card and the admin app are the same components whatever the theme. Only their palette changes. Three copies of two hundred lines would have meant every future fix landing in three places and, sooner or later, landing in two. The front page's own layout stays in the theme files, because that is where the three genuinely differ - hero treatment, card shape, density. This file is only what they have in common. No webfont here either: style-src in security.php lists 'self' and two CDNs, with no Google Fonts origin, so an @import would simply be refused. ========================================================================== */ /* --- Pages this file dresses -------------------------------------------- */ /* style.css sets html to width:100vw (a horizontal scrollbar on every desktop browser) and height:100vh, and body to a centred 95% box. Both were written for the old viewport-height front page. */ html { width: 100%; height: auto; min-height: 100%; background-color: var(--ayt-bg); -webkit-text-size-adjust: 100%; } body.page-login, body.page-admin { margin: 0; width: 100%; height: auto; min-height: 100vh; padding: 0; font-family: var(--ayt-font); font-size: 16px; line-height: 1.6; color: var(--ayt-text); /* Transparent on purpose: the hexagon canvas is position:fixed with z-index:-1, and per CSS painting order a negative-z-index element paints after the root background but before any in-flow block background. An opaque colour here would hide it. The page colour is on above. */ background-color: transparent; overflow-x: hidden; } .page-login p, .page-admin p { color: var(--ayt-text-muted); } .page-login a, .page-admin a { color: var(--ayt-accent-soft, var(--ayt-accent)); } .page-login a:hover, .page-admin a:hover { color: var(--ayt-text); text-decoration: underline; text-underline-offset: 3px; } .page-login :focus-visible, .page-admin :focus-visible { outline: 2px solid var(--ayt-accent-soft, var(--ayt-accent)); outline-offset: 3px; border-radius: 4px; } /* --- The fixed controls, on every page ---------------------------------- */ /* One rule for all three page types. These used to be restated in each theme file, scoped to the front page, from when a theme was only ever loaded there. */ #hex-rain-bg, #ayt-hexrain-canvas { opacity: var(--ayt-rain-opacity, 1); } .menu-toggle { border: 1px solid var(--ayt-border-strong); border-radius: 10px; background-color: var(--ayt-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .menu-toggle:hover { border-color: var(--ayt-accent); } /* style.css paints these bars white, which on the light theme's white button is an invisible menu toggle. */ .menu-toggle span { background-color: var(--ayt-icon); } .side-menu { background-color: var(--ayt-surface); border-right: 1px solid var(--ayt-border); } .side-menu-overlay { background-color: var(--ayt-overlay); } .menu-close { color: var(--ayt-text); } .side-menu-link { color: var(--ayt-text-muted); border-radius: 8px; } .side-menu-link:hover { color: var(--ayt-text); background-color: var(--ayt-accent-wash, rgba(255, 255, 255, 0.06)); } .side-menu-link.active { color: var(--ayt-text); background-color: var(--ayt-accent-wash, rgba(255, 255, 255, 0.09)); } .lang-switch { border: 1px solid var(--ayt-border-strong); border-radius: 10px; background-color: var(--ayt-surface); color: var(--ayt-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lang-switch-current { color: var(--ayt-text); } .lang-switch-other { color: var(--ayt-text-faint); } .lang-switch-other:hover, .lang-switch-other:focus { color: var(--ayt-accent-soft, var(--ayt-accent)); } /* --- Sign-in ------------------------------------------------------------ */ .page-login .login-page { min-height: 100vh; padding: 24px; } .page-login .login-card { max-width: 400px; padding: 36px 32px 30px; border: 1px solid var(--ayt-border); border-radius: 16px; background-color: var(--ayt-surface); box-shadow: var(--ayt-shadow, 0 18px 40px -22px rgba(0, 0, 0, 0.7)); text-align: left; } .page-login .login-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 680; letter-spacing: -0.02em; color: var(--ayt-text); } .page-login .login-subtitle { margin: 0 0 22px; font-size: 0.94rem; color: var(--ayt-text-faint) !important; } .page-login .login-hint { margin: 0 0 22px; font-size: 0.92rem; line-height: 1.6; color: var(--ayt-text-muted) !important; } /* AytSSO is the way in, so it is the page's primary action. */ .page-login .login-sso { display: block; padding: 13px 18px; border: 1px solid transparent; border-radius: 10px; background-color: var(--ayt-accent); color: #fff; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; } .page-login .login-sso:hover, .page-login .login-sso:focus { background-color: var(--ayt-accent-deep, var(--ayt-accent-strong, var(--ayt-accent))); color: #fff; text-decoration: none; } .page-login .login-sep { margin: 22px 0 16px; color: var(--ayt-text-faint); font-size: 12.5px; letter-spacing: 0.04em; } .page-login .login-sep::before, .page-login .login-sep::after { background-color: var(--ayt-border); } .page-login .login-form { gap: 4px; } .page-login .login-form label { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ayt-text-muted); } .page-login .login-form input { padding: 11px 13px; border: 1px solid var(--ayt-border-strong); border-radius: 9px; background-color: var(--ayt-input-bg); color: var(--ayt-text); font-size: 15px; } .page-login .login-form input:focus { border-color: var(--ayt-accent); outline: none; } .page-login .login-form button { margin-top: 18px; padding: 12px; border: 1px solid transparent; border-radius: 9px; background-color: var(--ayt-accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; } .page-login .login-form button:hover { background-color: var(--ayt-accent-deep, var(--ayt-accent-strong, var(--ayt-accent))); } .page-login .login-error { margin: 0 0 18px; padding: 11px 14px; border: 1px solid var(--ayt-danger); border-radius: 9px; background-color: var(--ayt-danger-bg); color: var(--ayt-danger-text) !important; font-size: 13.5px; line-height: 1.55; } /* The reference that ties a generic failure message to the log line that says what actually happened. Monospace because it gets typed into a grep. */ .page-login .login-ref { display: block; margin-top: 6px; font-family: var(--ayt-mono); font-size: 12px; opacity: 0.85; } .page-login .login-back { margin-top: 20px; margin-bottom: 0; font-size: 13px; color: var(--ayt-text-faint) !important; } /* --- Admin shell -------------------------------------------------------- */ .page-admin .site-header { border-bottom: 1px solid var(--ayt-border); background-color: var(--ayt-surface); } .page-admin .shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; } .page-admin .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; /* Clear of the fixed hamburger (left) and the language switcher (right). This element also carries .shell, whose padding-inline is the same specificity, so this rule has to come after it - otherwise the 24px wins and the last item in the row disappears under the switcher. */ padding: 14px 104px 14px 76px; flex-wrap: wrap; } .page-admin .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ayt-text); text-decoration: none; } .page-admin .brand:hover { color: var(--ayt-text); text-decoration: none; } .page-admin .brand-mark { width: 32px; height: 32px; } .page-admin .brand-name { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; } .page-admin .brand-dot { color: var(--ayt-accent); } /* "Admin" / "Yllapito" beside the wordmark. Set apart with a rule rather than a colour so it reads as a section label, not as part of the name. It has its own id rather than the #center this markup replaced. Keeping the old one looked harmless - it was only there so a test selector still matched - but style.css pins #center to min-height:80px;max-height:80px for the header layout the front page has moved away from, and an id beats a class, so the label was stretched to 80px and its text sat at the top of it, well above the wordmark beside it. */ .page-admin .admin-area-label { margin-right: auto; padding-left: 14px; border-left: 1px solid var(--ayt-border-strong); font-size: 14px; font-weight: 550; color: var(--ayt-text-faint); } .page-admin .admin-identity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--ayt-text-muted); } .page-admin .docs-user-email { margin: 0; font-size: 13.5px; color: var(--ayt-text-muted); } .page-admin .docs-logout-link { color: var(--ayt-accent-soft, var(--ayt-accent)); } /* Whether this session came through AytSSO or a local account. Local is the break-glass path, so it is the one that gets a colour. */ .page-admin .docs-auth-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background-color: var(--ayt-ok-bg); color: var(--ayt-ok); border: 1px solid var(--ayt-ok); font-size: 11px; font-weight: 700; white-space: nowrap; } .page-admin .docs-auth-badge.is-local { background-color: var(--ayt-warn-bg); color: var(--ayt-warn); border-color: var(--ayt-warn); } .page-admin #docs-container { margin: 28px auto 40px; width: 100%; max-width: 1180px; padding: 0; border: 1px solid var(--ayt-border); border-radius: 14px; background-color: var(--ayt-surface); box-shadow: var(--ayt-shadow, 0 18px 40px -22px rgba(0, 0, 0, 0.7)); grid-template-columns: 236px 1fr; gap: 0; overflow: hidden; } .page-admin #docs-nav { padding: 22px 16px; border-right: 1px solid var(--ayt-border); background-color: var(--ayt-bg-alt, transparent); } .page-admin #docs-nav h3 { margin: 22px 0 10px; font-family: var(--ayt-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ayt-text-faint); } .page-admin #docs-nav h3:first-child { margin-top: 0; } .page-admin #docs-nav a, .page-admin .admin-nav-list a { display: block; padding: 8px 11px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ayt-text-muted); text-decoration: none; word-break: normal; overflow-wrap: anywhere; } .page-admin #docs-nav a:hover, .page-admin .admin-nav-list a:hover { background-color: var(--ayt-accent-wash, rgba(255, 255, 255, 0.05)); border-color: var(--ayt-border); color: var(--ayt-text); font-weight: 500; text-decoration: none; } .page-admin #docs-nav a.active, .page-admin .admin-nav-list a.active { background-color: var(--ayt-accent); border-color: transparent; color: #fff; font-weight: 600; } .page-admin #docs-content { padding: 28px 30px 32px; } .page-admin #docs-content h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 680; letter-spacing: -0.02em; color: var(--ayt-text); } .page-admin #docs-content h3 { margin-top: 1.8em; font-size: 1.05rem; font-weight: 640; color: var(--ayt-text); } /* --- Admin components --------------------------------------------------- */ .page-admin .admin-hint { color: var(--ayt-text-muted); font-size: 0.9rem; line-height: 1.6; } .page-admin .admin-hint a { color: var(--ayt-accent-soft, var(--ayt-accent)); } .page-admin .admin-loading, .page-admin .admin-empty { color: var(--ayt-text-faint); } .page-admin .admin-error { color: var(--ayt-danger-text); background-color: var(--ayt-danger-bg); border-left: 3px solid var(--ayt-danger); } .page-admin .admin-warn { color: var(--ayt-text); background-color: var(--ayt-warn-bg); border-left: 3px solid var(--ayt-warn); } .page-admin .admin-notice-ok { color: var(--ayt-text); background-color: var(--ayt-ok-bg); border-left: 3px solid var(--ayt-ok); } .page-admin .admin-notice-error { color: var(--ayt-danger-text); background-color: var(--ayt-danger-bg); border-left: 3px solid var(--ayt-danger); } .page-admin .admin-badge { color: var(--ayt-badge-ink); } .page-admin .admin-badge-ok { background-color: var(--ayt-ok); } .page-admin .admin-badge-warn { background-color: var(--ayt-warn); } /* Tables. -------------------------------------------------------------------------- The admin app builds its tables with class="admin-table md-table", so they pick up the markdown table styling - a solid purple header cell, magenta 1px borders and #AAAAAA header text. That was chosen for a dark page. On the light theme the header came out mid-grey on mid-purple, which is genuinely hard to read, and the magenta gridlines fought everything around them. Styled here rather than in the admin section because .md-table is also what rendered markdown uses on the front page, and chrome.css is loaded on every themed page - so one rule covers both. */ .md-table { width: 100%; border-collapse: collapse; } .md-table th, .md-table td { border: 0; border-bottom: 1px solid var(--ayt-border); padding: 10px 14px; color: var(--ayt-text-muted); } .md-table th { background-color: transparent; border-bottom: 1px solid var(--ayt-border-strong); color: var(--ayt-text-faint); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .md-table tbody tr:last-child td { border-bottom: 0; } .page-admin .admin-table tbody tr:hover td { background-color: var(--ayt-accent-wash, rgba(255, 255, 255, 0.03)); } /* style.css pins these to fixed light greys that only work on a dark page. */ .page-admin .admin-nowrap, .page-admin .admin-mono { color: var(--ayt-text-muted); } .page-admin .admin-kv tbody th[scope="row"] { background-color: var(--ayt-bg-alt, transparent); border-bottom: 1px solid var(--ayt-border); color: var(--ayt-text-faint); } .page-admin .admin-kv td { color: var(--ayt-text-muted); } .page-admin .admin-tile { border: 1px solid var(--ayt-border); border-radius: 10px; background-color: var(--ayt-bg-alt, transparent); } .page-admin .admin-tile-value { color: var(--ayt-text); } .page-admin .admin-tile-label { color: var(--ayt-text-faint); } .page-admin .cms-button { color: var(--ayt-text); background-color: var(--ayt-surface-2, transparent); border: 1px solid var(--ayt-border-strong); border-radius: 9px; font-weight: 550; } .page-admin .cms-button:hover:not([disabled]) { color: #fff; background-color: var(--ayt-accent); border-color: var(--ayt-accent); } .page-admin .cms-button-quiet { color: var(--ayt-text-muted); background-color: transparent; border-color: var(--ayt-border); } .page-admin .cms-button-quiet:hover:not([disabled]) { color: var(--ayt-text); background-color: var(--ayt-surface-2, transparent); border-color: var(--ayt-border-strong); } .page-admin #cms-editor, .page-admin textarea { border: 1px solid var(--ayt-border-strong); border-radius: 9px; background-color: var(--ayt-input-bg); color: var(--ayt-text); } .page-admin #cms-editor:focus, .page-admin textarea:focus { border-color: var(--ayt-accent); outline: none; } /* The theme cards in Admin > Appearance. */ .page-admin .admin-theme-card { border: 1px solid var(--ayt-border); background-color: var(--ayt-bg-alt, transparent); } .page-admin .admin-theme-card.is-current { border-color: var(--ayt-accent); box-shadow: inset 3px 0 0 var(--ayt-accent); } .page-admin #docs-content .admin-theme-head h3 { margin: 0; font-size: 1.05rem; color: var(--ayt-text); } .page-admin .admin-theme-summary { color: var(--ayt-text-muted); } /* --- Cookie dialog ------------------------------------------------------ */ .page-admin .cookie-dialog { border: 1px solid var(--ayt-border-strong); border-radius: 14px; background-color: var(--ayt-surface); color: var(--ayt-text); box-shadow: var(--ayt-shadow, 0 18px 40px -22px rgba(0, 0, 0, 0.7)); } .page-admin .cookie-dialog button { border: 1px solid transparent; border-radius: 8px; background-color: var(--ayt-accent); color: #fff; font-weight: 600; } .page-admin .cookie-dialog button:hover { background-color: var(--ayt-accent-deep, var(--ayt-accent-strong, var(--ayt-accent))); } .page-admin .cookie-dialog button.decline { background-color: transparent; border-color: var(--ayt-border-strong); color: var(--ayt-text-muted); } .page-admin .cookie-dialog button.decline:hover { background-color: var(--ayt-surface-2, transparent); color: var(--ayt-text); } /* --- Rendered markdown in the admin pane -------------------------------- */ /* docs.php renders documents into #about_us so they inherit the front page's markdown styling. style.css paints those headings #AAAAAA, which is around 3:1 on either background. */ .page-admin #about_us h1, .page-admin #about_us h2, .page-admin #about_us h3, .page-admin #about_us h4, .page-admin #about_us h5, .page-admin #about_us h6 { color: var(--ayt-text); } .page-admin #about_us p, .page-admin #about_us li, .page-admin #about_us td, .page-admin #about_us th, .page-admin #about_us blockquote { color: var(--ayt-text-muted); } .page-admin #about_us strong { color: var(--ayt-text); } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 900px) { .page-admin #docs-container { grid-template-columns: 1fr; } .page-admin #docs-nav { border-right: 0; border-bottom: 1px solid var(--ayt-border); } } @media (max-width: 720px) { /* .shell first, .site-header-inner second - padding-inline here would otherwise overwrite both sides of the clearance below, exactly as it did at full width. */ .page-admin .shell { padding-inline: 16px; } .page-admin .site-header-inner { padding-left: 68px; padding-right: 96px; } .page-admin #docs-content { padding: 22px 18px 26px; } .page-login .login-card { padding: 28px 22px 24px; } } @media (prefers-reduced-motion: reduce) { .page-login *, .page-admin * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }