/* * Legion theme for Vikunja — palette from legiondancefamily.art * (black / #1a1a1a paper, crimson #DC143C, white text, #333 dividers). * * Injected into every page by tasker (pkg/routes/legion_tasker_theme.go). * Vikunja themes everything through CSS custom properties; the dark-mode * ramp runs grey-50 (darkest) -> grey-900 (lightest). We pin that ramp for * both light and dark mode, so the app always looks like Legion. * `:not(#legion)` adds ID-level specificity to beat Vikunja's own :root rules. */ /* Self-hosted Roboto (variable weight 100–900), latin + cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html:root:not(#legion), html:root.dark:not(#legion) { color-scheme: dark; accent-color: #dc143c; /* native checkboxes, radios, range sliders */ /* Neutral ramp (pure greys, no blue tint) */ --grey-50-hsl: 0, 0%, 4%; --grey-50: #0a0a0a; --grey-100-hsl: 0, 0%, 10%; --grey-100: #1a1a1a; --grey-200: #333333; --grey-300: #4a4a4a; --grey-400: #6b6b6b; --grey-500-hsl: 0, 0%, 69%; --grey-500: #b0b0b0; --grey-600: #c8c8c8; --grey-700: #e0e0e0; --grey-800: #f2f2f2; --grey-900-hsl: 0, 0%, 100%; --grey-900: #ffffff; /* Surfaces: page is black, cards/panels are "paper" #1a1a1a */ --site-background: #000000; --white: #1a1a1a; --scheme-main: #1a1a1a; --scheme-main-bis: #222222; --scheme-main-ter: #222222; --scheme-invert: #ffffff; --scheme-invert-bis: #ffffff; --scheme-invert-ter: #f2f2f2; --background: #0a0a0a; --border: #333333; --border-hover: #4a4a4a; --border-light: #262626; --card-border-color: #333333; /* Text */ --text: #f2f2f2; --text-strong: #ffffff; --text-light: #b0b0b0; --text-muted: #b0b0b0; --text-invert: #000000; --logo-text-color: #ffffff; --input-placeholder-color: rgba(255, 255, 255, 0.4); /* Brand: crimson #DC143C = hsl(348, 83%, 47%) */ --primary-h: 348deg; --primary-s: 83%; --primary-l: 47%; --primary-dark: #b71c1c; --primary-light: rgba(220, 20, 60, 0.12); --primary-invert: #ffffff; --link-h: 348deg; --link-s: 100%; --link-l: 55%; --link: #ff1744; --link-hover: #ff5a73; --switch-view-active-background: #dc143c; --table-row-active-background-color: #dc143c; --menu-item-active-background-color: #dc143c; /* Status colours from the Legion MUI theme */ --danger-h: 348deg; --danger-s: 100%; --danger-l: 55%; --success-h: 122deg; --success-s: 39%; --success-l: 49%; --warning-h: 38deg; --warning-s: 100%; --warning-l: 50%; --info-h: 0deg; --info-s: 0%; --info-l: 100%; --info-invert: #000000; /* Hover / interactive greys */ --table-row-hover-background-color: #222222; --dropdown-item-hover-background-color: #262626; --button-text-hover-background-color: #262626; /* Flat, dark shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.7); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.8); --family-primary: 'Roboto', 'Helvetica', 'Arial', sans-serif; --body-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; } body { background-color: #000000; } /* Roboto everywhere. Vikunja hard-codes Quicksand on headings and many * widgets, so this has to be a blanket !important rule; code stays monospace * and icons are SVG, so nothing else depends on its own font. */ body :not(code):not(pre):not(kbd):not(samp):not(code *):not(pre *) { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important; } h1, h2, h3, h4, h5, h6, .title { font-weight: 500 !important; } /* Top bar like Legion's AppBar: paper background, crimson underline */ .navbar { background: #1a1a1a !important; border-bottom: 2px solid #dc143c; } /* Paper look: 8px radius, thin #333 border, no heavy shadow. * !important: Vikunja's scoped rules (.card[data-v-…]) are more specific and * lazily loaded chunks land after this file. */ .card, .modal-content, .dropdown-menu, .dropdown-content { border-radius: 8px !important; } .card { border: 1px solid #333333 !important; box-shadow: none !important; } /* Buttons */ .button.is-primary, .button.is-primary:focus { background-color: #dc143c; color: #ffffff; } .button.is-primary:hover { background-color: #b71c1c; } /* Inputs */ .input:not(.title), .textarea, .select select { background-color: #0a0a0a !important; border-color: #333333 !important; color: #ffffff !important; } .input:focus, .textarea:focus, .select select:focus { border-color: #dc143c !important; box-shadow: 0 0 0 0.125em rgba(220, 20, 60, 0.25) !important; } /* Login / register screen: no llamas — black page, Legion logo in the side panel */ .no-auth-wrapper { background: #000000 !important; } .no-auth-wrapper .image { background: #1a1a1a url('logo.png') center 40% / min(70%, 320px) no-repeat !important; border-right: 1px solid #333333; } .no-auth-wrapper .image::before { display: none; } /* Square Legion logo instead of the wide Vikunja wordmark */ img.logo { object-fit: contain; } .navbar .logo-link img.logo { max-block-size: 40px !important; } /* Scrollbar and selection, as on legiondancefamily.art */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #dc143c 0%, #b71c1c 100%); border-radius: 5px; border: 1px solid #333333; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff1744 0%, #dc143c 100%); } * { scrollbar-width: thin; scrollbar-color: #dc143c #0a0a0a; } ::selection { background-color: #dc143c; color: #ffffff; } /* --- Rebranding: hide what's left of Vikunja ------------------------------ */ /* "Powered by Vikunja" link in the sidebar */ a[href*="vikunja.io/?utm_source=powered_by"] { display: none !important; } /* "Using Vikunja installation at … / change" on the login & register pages */ .api-config { display: none !important; } /* Llama illustration shown on empty task lists */ .llama-cool { display: none !important; } /* Loading screen ("Ready" component): it draws its own inline llama SVG and * ignores CUSTOM_LOGO_URL, so blank the SVG and paint the Legion logo on it */ .vikunja-loading { background: #000000 !important; } .vikunja-loading svg.logo { background: url('logo.png') center / contain no-repeat; } .vikunja-loading svg.logo > * { display: none !important; } .vikunja-loading .loader-container.is-loading::after { border-inline-start-color: #dc143c !important; border-block-end-color: #dc143c !important; } /* --- Phones ----------------------------------------------------------------- */ @media screen and (max-width: 769px) { /* Kanban: one column per screen (Vikunja already snaps columns to the centre), * with the edge of the next one peeking out as a swipe hint */ .kanban .bucket:not(.is-collapsed), .kanban .bucket.new-bucket { inline-size: calc(100vw - 3rem) !important; min-inline-size: calc(100vw - 3rem) !important; } .kanban .bucket { margin-inline-end: 0.75rem !important; } /* Board height = the visible part of the screen, not 100vh (which includes the * browser bars on phones and cuts off the bottom of the board) */ @supports (height: 100dvh) { .kanban { block-size: calc(100dvh - 12.19rem - 2px) !important; } } .kanban .bucket .tasks { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* iOS zooms in on inputs with a font smaller than 16px */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: max(16px, 1em) !important; } /* Finger-sized buttons and menu items */ .button { min-block-size: 2.5rem; } .dropdown-item { padding-block: .7rem !important; } /* Long titles wrap instead of running off the edge */ .kanban .task .tasktext, .kanban .task .title, .single-task .tasktext, .project-title, .heading .title { overflow-wrap: anywhere; } /* Task page: fields and action buttons in one full-width column */ .task-view .action-buttons .button { inline-size: 100%; justify-content: flex-start; } .task-view .columns { margin-inline: 0; } /* Tables and Gantt scroll horizontally inside their box, not the whole page */ .table-container, .gantt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --- Legion Tasker additions ----------------------------------------------- */ /* Heading above the project list in the sidebar (the last