/* ===================================================================== NYMIL theme for Vikunja v2.6.0 Loaded as a single stylesheet AFTER Vikunja's own CSS. Design source: nymil-3-0/docs/style-guide.md + app/css/tokens.css Rules: white/black/grey, one orange (--hl) only as active marker, no shadows, no gradients, no uppercase labels, 1px lines. Specificity strategy: override Vikunja CSS variables first; where a selector is needed, prefix with :root to match Vikunja's scoped selectors (.class[data-v-xxx] = 0,2,0) and win by source order. ===================================================================== */ /* --------------------------------------------------------------------- 1. Fonts (paths relative to this file: /nymil-theme/fonts/…) The NYMIL woff2 files are variable fonts, one file per family. --------------------------------------------------------------------- */ @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/InstrumentSans.woff2) format("woff2")} @font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/SchibstedGrotesk.woff2) format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/JetBrainsMono.woff2) format("woff2")} /* --------------------------------------------------------------------- 2. NYMIL tokens (copied from nymil-3-0/app/css/tokens.css – the theme is standalone). Only these colors are used below. --------------------------------------------------------------------- */ :root{ --bg:#FFFFFF; --bg-2:#F3F5F7; --ink:#14171A; --ink-2:#4F565E; --ink-3:#676F77; --line:#DCE0E4; --line-2:#ECEFF2; --hl:#EC663D; --hl-soft:#FDEDE7; --hl-line:#F7D6C9; --ok:#1B7F4E; --ok-ink:#125C39; --ok-soft:#E3F1E8; --bad:#C2352B; --bad-soft:#FCEBEA; --warn:#B7791F; --warn-ink:#8A5A0B; --warn-soft:#FBF0D3; --info:#2F6FB2; --info-ink:#1D4E82; --info-soft:#E1EEFA; --mint:#3E9E6E; --mint-ink:#1E6B45; --mint-soft:#DFF3E7; --rose:#C74B76; --rose-ink:#9C2F5A; --rose-soft:#FBE4EE; --violet:#6B5BB5; --violet-ink:#4C3F8F; --violet-soft:#EBE7F8; --dark:#161A1F; --dark-line:#2B3138; --dark-ink:#E8ECF0; --dark-mute:#8B949E; --dark-us:#FF9A6B; --dark-fail:#F2A08A; --dark-ok:#7DD3A5; --head:"Schibsted Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --text:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; /* alias: Vikunja/Bulma reuse --text as text COLOR (section 3), so all font-family rules below use --font-text instead of --text */ --font-text:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --r:4px; --r-lg:6px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; } /* --------------------------------------------------------------------- 3. Vikunja / Bulma variable mapping. Applied to :root AND :root.dark so the light NYMIL look is forced even when Vikunja switches to its dark scheme (class "dark" on ). Note: --text is Bulma's text COLOR; NYMIL's body font token is also called --text, so the font is referenced via --family-primary below. --------------------------------------------------------------------- */ :root,:root.dark,:root.light{ color-scheme:light; /* greys -> NYMIL neutrals */ --grey-50:#F3F5F7; --grey-50-hsl:210, 20%, 96.1%; --grey-100-hsl:210, 20%, 96.1%; --grey-100:#F3F5F7; --grey-200:#DCE0E4; --grey-300:#DCE0E4; --grey-400:#676F77; --grey-500-hsl:210, 7.2%, 43.5%; --grey-500:#676F77; --grey-600:#4F565E; --grey-700:#4F565E; --grey-800:#14171A; --grey-900-hsl:210, 13%, 9%; --grey-900:#14171A; /* scheme */ --white-h:0deg; --white-s:0%; --white-l:100%; --white-a:1; --white:#FFFFFF; --black-l:4%; --scheme-main:#FFFFFF; --scheme-main-bis:#F3F5F7; --scheme-main-ter:#F3F5F7; --scheme-invert:#14171A; --scheme-invert-bis:#14171A; --scheme-invert-ter:#4F565E; --scheme-invert-rgb:20, 23, 26; --site-background:#FFFFFF; --background:#F3F5F7; --border:#DCE0E4; --border-rgb:220, 224, 228; --border-light:#ECEFF2; --border-hover:#676F77; --card-border-color:#ECEFF2; /* text colors (Bulma names) */ --text:#14171A; --text-strong:#14171A; --text-light:#676F77; --text-muted:#676F77; --text-invert:#FFFFFF; --logo-text-color:#14171A; /* primary/link = ink (orange is never a button/link color) */ --primary-h:210deg; --primary-s:13%; --primary-l:9%; --primary-a:1; --primary-hsl:210, 13%, 9%; --primary:#14171A; --primary-dark:#4F565E; --primary-light:#F3F5F7; --primary-invert:#FFFFFF; --link:#14171A; --link-hover:#4F565E; --link-visited:#14171A; --switch-view-color:#14171A; --switch-view-active-background:#F3F5F7; /* status colors -> NYMIL status tokens */ --success-h:150.6deg; --success-s:65%; --success-l:30.2%; --success:#1B7F4E; --danger-h:4deg; --danger-s:63.7%; --danger-l:46.5%; --danger:#C2352B; --danger-text:#C2352B; --danger-dark:#C2352B; --warning-h:35.5deg; --warning-s:71%; --warning-l:42%; --warning:#B7791F; --info-h:210.7deg; --info-s:58.2%; --info-l:44.1%; --info:#2F6FB2; /* no shadows anywhere */ --shadow-xs:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --card-shadow:none; --dropdown-content-shadow:none; /* typography */ --family-primary:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --family-sans-serif:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --family-secondary:"Schibsted Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --family-code:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --family-monospace:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --body-family:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --body-color:#14171A; --body-background-color:#FFFFFF; --body-font-size:.9375rem; --body-line-height:1.55; --title-color:#14171A; --title-weight:600; --title-font-size:1.25rem; --content-heading-color:#14171A; /* controls */ --radius:4px; --radius-small:3px; --input-color:#14171A; --input-border-color:#DCE0E4; --input-hover-border-color:#676F77; --input-focus-border-color:#14171A; --input-focus-box-shadow-size:0 0 0 1px; --input-focus-box-shadow-color:#14171A; --input-shadow:none; --input-placeholder-color:#676F77; --input-disabled-background-color:#F3F5F7; --input-disabled-border-color:#DCE0E4; --input-disabled-color:#676F77; --tag-background-color:#F3F5F7; --tag-color:#4F565E; --tag-radius:3px; --table-row-hover-background-color:#F3F5F7; --dropdown-item-hover-background-color:#F3F5F7; --dropdown-item-hover-color:#14171A; --pre-background:#F3F5F7; --code-background:#F3F5F7; --code:#14171A; --button-text-hover-background-color:#F3F5F7; --button-hover-color:#14171A; --button-active-color:#14171A; --button-focus-color:#14171A; --tag-color-dark:#14171A; } /* --------------------------------------------------------------------- 4. Base typography --------------------------------------------------------------------- */ html,body{background:var(--bg);color:var(--ink)} body,button,input,select,textarea{font-family:var(--font-text)} body{font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} :root h1,:root h2,:root h3,:root h4,:root h5,:root h6{font-family:var(--head);font-weight:600!important;letter-spacing:-.01em;color:var(--ink)} :root h1{font-size:26px;line-height:1.15;letter-spacing:-.02em} :root .title{font-family:var(--head);color:var(--ink)} :root h2.title{font-size:20px;line-height:1.2} code,pre,kbd,samp{font-family:var(--mono)} a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px} :root .tiptap a,:root .ProseMirror a,:root .description .content a{text-decoration:underline} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} ::selection{background:var(--hl-soft);color:var(--ink)} /* --------------------------------------------------------------------- 5. Buttons --------------------------------------------------------------------- */ :root .button{ font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:0; text-transform:none;box-shadow:none;border-radius:var(--r); min-block-size:36px;padding:6px 14px;line-height:1.3; background-color:var(--bg);color:var(--ink);border:1px solid var(--ink); transition:background-color .1s,border-color .1s; } :root .button:hover{background-color:var(--bg-2);color:var(--ink);border-color:var(--ink)} :root .button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none} :root .button .icon{color:inherit} /* primary: ink fill, white text */ :root .button.is-primary{background-color:var(--ink);border-color:var(--ink);color:var(--bg)} :root .button.is-primary:hover{background-color:var(--ink-2);border-color:var(--ink-2);color:var(--bg)} :root .button.is-primary[disabled],:root .button.is-primary:disabled{background-color:var(--ink);opacity:.35} /* secondary / outlined */ :root .button.is-outlined{background-color:var(--bg);color:var(--ink);border-color:var(--ink)} :root .button.is-outlined:hover{background-color:var(--bg-2);color:var(--ink)} /* quiet / text / transparent */ :root .button.is-text,:root .button.is-transparent,:root .button.has-no-border{border-color:transparent;background-color:transparent;color:var(--ink-2)} :root .button.is-text:hover,:root .button.is-transparent:hover,:root .button.has-no-border:hover{background-color:var(--bg-2);color:var(--ink)} /* danger: white with red border + text */ :root .button.is-danger{background-color:var(--bg);color:var(--bad);border-color:var(--bad)} :root .button.is-danger:hover,:root .button.is-danger:focus{background-color:var(--bad-soft);color:var(--bad);border-color:var(--bad)} :root .button.is-danger.has-no-border{border-color:transparent} :root .button.is-success{background-color:var(--bg);color:var(--ok-ink);border-color:var(--ok)} /* --------------------------------------------------------------------- 6. Forms --------------------------------------------------------------------- */ :root .input:not(.title),:root .textarea,:root .select select{ font-family:var(--font-text);font-size:14px;color:var(--ink); border:1px solid var(--line);border-radius:var(--r);box-shadow:none;background-color:var(--bg); } :root .input:not(.textarea):not(.title),:root .select select{min-block-size:40px} :root .input:not(.title):hover,:root .textarea:hover,:root .select select:hover{border-color:var(--ink-3)} :root .input:focus,:root .textarea:focus,:root .select select:focus, :root .input.is-focused,:root .input:active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none} :root .input::placeholder,:root .textarea::placeholder{color:var(--ink-3)} :root .label{font-family:var(--head);font-size:13px;font-weight:600;color:var(--ink)} :root .help{font-size:13px;color:var(--ink-3)} :root .checkbox,:root .radio{color:var(--ink)} :root .select:not(.is-multiple):not(.is-loading):after{border-color:var(--ink-2)} /* --------------------------------------------------------------------- 7. Surfaces: cards, boxes, dropdowns, tags --------------------------------------------------------------------- */ :root .card,:root .box{box-shadow:none;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg)} :root .card-header{box-shadow:none;border-bottom:1px solid var(--line-2)} :root .card-header-title{font-family:var(--head);font-weight:600;color:var(--ink)} :root .card-footer{border-top:1px solid var(--line-2)} :root .dropdown-content,:root .dropdown-menu .dropdown-content{box-shadow:none;border:1px solid var(--line);border-radius:var(--r)} :root .dropdown-item{color:var(--ink);font-size:14px} :root .dropdown-divider{background-color:var(--line-2)} /* label chips: keep Vikunja's per-label colors (inline style), pill shape */ :root .tag:not(body){border-radius:3px;font-size:12.5px;font-weight:600;padding:2px 8px;block-size:auto;line-height:1.5} /* notification / message boxes */ :root .message,:root .notification{box-shadow:none;border-radius:var(--r)} /* --------------------------------------------------------------------- 8. App shell: top bar --------------------------------------------------------------------- */ :root .navbar{background:var(--bg);border-bottom:1px solid var(--line-2);box-shadow:none} :root .navbar .trigger-button{color:var(--ink-3)} :root .navbar .trigger-button:hover{color:var(--ink)} /* no branding: hide the llama logo in the top bar (personal tool) */ :root .logo-link .logo,:root .logo-link > div{visibility:hidden} /* hamburger in ink tones */ :root .menu-show-button:before,:root .menu-show-button:after{background-color:var(--ink-3);block-size:2px;inline-size:1.25rem} :root .menu-show-button:hover:before,:root .menu-show-button:hover:after{background-color:var(--ink)} /* project title in the bar */ :root .navbar .project-title{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)} :root .navbar .username,:root .username-dropdown-trigger{font-family:var(--font-text);font-weight:600;color:var(--ink)} /* --------------------------------------------------------------------- 9. App shell: sidebar (240px, white, 1px right line, orange active edge) --------------------------------------------------------------------- */ /* Vikunja writes --sidebar-width as inline style (default 300px, user-resizable). An !important stylesheet declaration beats a normal inline one, so the sidebar is fixed to the NYMIL 240px; the (then inert) resize handle is hidden. */ :root .menu-container,:root .app-content{--sidebar-width:240px!important} :root .menu-container .resize-handle{display:none} :root .menu-container{background:var(--bg);color:var(--ink-2);border-right:1px solid var(--line-2);padding:14px 0} :root .resize-handle:hover,:root .resize-handle:active{background-color:var(--line)} :root .menu .menu-list{padding-inline:12px} :root .menu .menu-list .menu-list{padding-inline:0 0} :root .top-menu .menu-list li{font-family:var(--font-text);font-weight:400} :root .menu .menu-list.other-menu-items li,:root .menu .menu-list li > div{block-size:36px;border-radius:var(--r)} :root .menu .menu-list.other-menu-items li:hover,:root .menu .menu-list li > div:hover{background:var(--bg-2)} :root .menu .menu-list li > a,:root .menu .menu-list li > div > a,:root .menu .menu-list .list-menu-link > a{ color:var(--ink-2);font-size:15px;padding:6px 8px 6px 10px;border-left:2px solid transparent;border-radius:var(--r); } :root .top-menu .menu-list .list-menu-link,:root .top-menu .menu-list li > a{padding-inline-start:10px} :root .menu .menu-list a .icon,:root .menu .menu-list li > a .icon{color:var(--ink-3)} :root .menu .menu-list a:hover{color:var(--ink)} :root .menu .menu-list li > a.router-link-exact-active, :root .menu .menu-list li > div > a.router-link-exact-active, :root .menu .menu-list .list-menu-link.router-link-exact-active{ color:var(--ink);font-weight:600;border-left-color:var(--hl);background:var(--bg-2); } :root .menu .menu-list a.router-link-exact-active .icon:not(.handle){color:var(--ink)} :root .menu .menu-list li .collapse-project-button svg{color:var(--ink-3);inline-size:.9rem} :root .menu-bottom-link{color:var(--ink-3);font-size:12.5px} /* --------------------------------------------------------------------- 10. Content area --------------------------------------------------------------------- */ :root .app-container,:root .content-auth{background:var(--bg)} :root .keyboard-shortcuts-button{color:var(--ink-3)} /* home: left aligned page title on the same column as the task list */ :root .app-content.home > .content > h1{max-inline-size:1024px;margin-inline:auto;text-align:start} :root .show-tasks > h2.title{font-size:20px} /* decorative llama illustrations */ :root .llama-cool{display:none} /* --------------------------------------------------------------------- 11. View switcher (Liste / Gantt / Tabelle / Kanban) as NYMIL segments --------------------------------------------------------------------- */ :root .switch-view{background:var(--bg);box-shadow:none;border:1px solid var(--line);border-radius:var(--r);padding:0;font-size:13.5px;overflow:hidden} :root .switch-view-button{border-radius:0;padding:7px 12px;color:var(--ink-2);border-right:1px solid var(--line);margin:0!important} :root .switch-view-button:last-child{border-right:0} :root .switch-view-button:hover{background:var(--bg-2);color:var(--ink)} :root .switch-view-button.is-active{background:var(--bg-2);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--hl)} :root .filter-container .button{min-block-size:36px} /* --------------------------------------------------------------------- 12. Task lists (home + list view) --------------------------------------------------------------------- */ :root .tasks .task{border-radius:0;border:0;border-bottom:1px solid var(--line-2);padding:8px 10px} :root .tasks .task:hover{background-color:var(--bg-2)} :root .tasks .task .tasktext{color:var(--ink);font-size:15px} :root .tasks .task .different-project{color:var(--ink-3)} :root .task .tasktext.done{color:var(--ink-3)} :root .priority-label{color:var(--bad);font-weight:600} :root .tasks .task .priority-label{background:var(--bad-soft);border-radius:3px;padding:0 8px 0 4px;font-size:12.5px;line-height:1.6} :root .task-add .add-task-textarea{min-block-size:40px} /* --------------------------------------------------------------------- 13. Kanban --------------------------------------------------------------------- */ :root .kanban .bucket{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg)} :root .kanban .bucket.new-bucket{background:transparent;border:0} :root .kanban .bucket-header{background-color:var(--bg-2);block-size:48px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--line-2)} :root .kanban .bucket h2,:root .kanban .bucket-header .title{font-family:var(--head);font-size:14px;font-weight:600!important;color:var(--ink);letter-spacing:0} :root .kanban .bucket .task-item{background-color:var(--bg-2)} :root .kanban .bucket-footer{background-color:var(--bg-2)} :root .kanban .bucket-footer .button{color:var(--ink-2);border-color:transparent;font-size:13.5px} :root .kanban .bucket-footer .button:hover{background-color:var(--bg);color:var(--ink)} /* cards */ :root .kanban .task{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:none;font-size:14px} :root .kanban .task:hover{border-color:var(--ink-3)} :root .kanban .task h3{font-family:var(--font-text);font-size:14px;font-weight:500!important;letter-spacing:0;color:var(--ink);line-height:1.45} :root .kanban .task .task-id,:root .kanban .task .project-title{font-family:var(--mono);font-size:12px;color:var(--ink-3)} :root .kanban .task .footer .icon,:root .kanban .task .due-date,:root .kanban .task .priority-label{background:var(--bg-2);border-radius:3px} :root .kanban .task .priority-label{background:var(--bad-soft);color:var(--bad);font-size:12.5px} :root .kanban .task.has-custom-background-color{border-color:transparent} /* "done" badge */ :root .is-done{background:var(--ok-soft);color:var(--ok-ink);font-family:var(--font-text);font-size:12.5px;font-weight:600;border-radius:3px} /* --------------------------------------------------------------------- 14. Projects overview --------------------------------------------------------------------- */ :root .project-grid{--project-grid-item-height:112px} :root .project-card{box-shadow:none;border:1px solid var(--line-2);border-radius:var(--r-lg)} :root .project-card:hover{box-shadow:none;border-color:var(--line)} :root .project-card:active,:root .project-card:focus{box-shadow:none!important} :root .project-card .project-title{font-family:var(--head);font-size:clamp(15px,1.2vw,17px);font-weight:600;letter-spacing:-.01em;color:var(--ink);word-break:normal;overflow-wrap:normal;hyphens:auto} /* one primary per view: only the last header action stays primary */ :root .project-header .action-buttons .button.is-primary:not(:last-child){background-color:var(--bg);color:var(--ink)} :root .project-header .action-buttons .button.is-primary:not(:last-child):hover{background-color:var(--bg-2)} /* --------------------------------------------------------------------- 15. Task detail --------------------------------------------------------------------- */ :root .task-view,:root .is-modal .task-view{background-color:var(--bg)!important} :root .input.title{font-family:var(--head);font-size:26px;font-weight:600!important;letter-spacing:-.02em;color:var(--ink)} :root .heading .title.task-id{color:var(--ink-3)} :root .task-view .subtitle{color:var(--ink-3);font-size:15px} :root .task-view .subtitle a{color:var(--ink-2)} :root .task-view .back-button{color:var(--ink-2);font-size:14px} :root .task-section-title,:root .task-view .details h3{font-family:var(--head);font-size:16px;font-weight:600!important} /* action column as a quiet list */ :root .task-view .action-buttons .button{ justify-content:flex-start;background-color:transparent;border-color:transparent;color:var(--ink-2); font-family:var(--font-text);font-size:14px;font-weight:500;min-block-size:34px;margin-block-end:2px; } :root .task-view .action-buttons .button:hover{background-color:var(--bg-2);color:var(--ink)} :root .task-view .action-buttons .button .icon{color:var(--ink-3)} :root .task-view .action-buttons .button.button--mark-done.is-pending{background-color:var(--ink);border-color:var(--ink);color:var(--bg);font-family:var(--head);font-weight:600;margin-block-end:8px} :root .task-view .action-buttons .button.button--mark-done.is-pending .icon{color:var(--bg)} :root .task-view .action-buttons .button.button--mark-done.is-pending:hover{background-color:var(--ink-2);filter:none} :root .task-view .action-buttons .button.is-danger{color:var(--bad)} :root .task-view .action-buttons .button.is-danger .icon{color:var(--bad)} :root .action-heading{text-transform:none;font-family:var(--head);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin:14px 0 4px;padding-top:10px;border-top:1px solid var(--line-2);inline-size:100%} :root .task-view .created{color:var(--ink-3);font-size:13px} /* --------------------------------------------------------------------- 16. Login / no-auth pages --------------------------------------------------------------------- */ :root .no-auth-wrapper{background:var(--bg);justify-content:center;padding-block:24px} :root .no-auth-wrapper > .logo{display:none} :root .noauth-container{max-inline-size:400px;min-block-size:0;box-shadow:none;border:1px solid var(--line);border-radius:var(--r-lg)} :root .noauth-container .image{display:none} :root .noauth-container > .content{inline-size:100%;padding:28px} :root .noauth-container .title{font-size:26px;margin-bottom:12px} /* API URL chooser ("Using Vikunja installation at … / change") is not needed by users */ :root .noauth-container .api-config{display:none} :root .noauth-container .button.is-primary{inline-size:100%;min-block-size:40px;font-size:15px} /* title inputs (task heading, bucket names): borderless until hover/focus */ :root .input.title{border-color:transparent;background:transparent;box-shadow:none} :root .input.title:hover{border-color:var(--line-2)} :root .input.title:focus{border-color:var(--ink);box-shadow:none} :root .kanban .bucket-header .title.input{min-block-size:0;padding:4px 6px;border-color:transparent;background:transparent} /* --------------------------------------------------------------------- 17. Iteration 3 refinements --------------------------------------------------------------------- */ /* sidebar: compact nesting so long project names fit into 240px */ :root .menu .menu-list{padding-inline:8px} :root .menu .menu-list .menu-list{padding-inline:0;margin-inline-start:8px} :root .menu .menu-list li > div > a,:root .menu .menu-list .list-menu-link{font-size:14px;padding-inline-end:6px} :root .menu .menu-list li .collapse-project-button{padding:.5rem 2px .5rem 4px} :root .menu .menu-list .collapse-project-button-placeholder{inline-size:20px} :root .menu .menu-list .list-menu-link .color-bubble{margin:0 .375rem 0 .125rem} /* favorite star + project dropdown: overlay on hover instead of reserving width (pointer devices only) */ @media (hover:hover) and (pointer:fine){ :root .menu .menu-list li > div{position:relative} :root .menu .menu-list li > div > .favorite{position:absolute;inset-inline-end:30px;inset-block-start:50%;transform:translateY(-50%);display:none;background:var(--bg-2);color:var(--ink-3)} :root .menu .menu-list li > div:hover > .favorite,:root .menu .menu-list li > div > .favorite.is-favorite,:root .menu .menu-list li > div:focus-within > .favorite{display:inline-flex} :root .menu .menu-list li > div > .menu-list-dropdown{position:absolute;inset-inline-end:2px;inset-block-start:50%;transform:translateY(-50%);background:var(--bg-2);border-radius:var(--r)} :root .menu .menu-list .menu-list-dropdown-trigger{padding:4px 6px;color:var(--ink-2)} } :root .menu .menu-list .favorite.is-favorite{color:var(--warn)} /* task detail: breadcrumb separators readable (Bulma helper uses !important) */ :root .task-view .subtitle .has-text-grey-light{color:var(--ink-3)!important} :root .details .detail-title{color:var(--ink-3);font-family:var(--head);font-size:13px;font-weight:600} /* reactions */ :root .reaction-button{border:1px solid var(--line);background:var(--bg);color:var(--ink-2);border-radius:999px} :root .reaction-button:hover{border-color:var(--ink-3)} :root .reaction-button.current-user-has-reacted{border-color:var(--ink);background:var(--bg-2)}