/* ========================================================================== Anker design system Two themes over Bootstrap 5.3, switched by data-bs-theme on : • light (default): vibrant violet accent on a soft canvas, white panels. • dark: near-black canvas with clearly-elevated charcoal panels, brighter violet accent — goth/techwear, but panels read as distinct surfaces. Theme-varying colours are tokens so one set of component rules serves both. ========================================================================== */ :root { color-scheme: light; /* Palette (LIGHT — default) --------------------------------------------- */ --ank-bg: #f4f2fa; /* soft violet-tinted canvas */ --ank-surface: #ffffff; /* panels / cards */ --ank-surface-muted: #f4f2fa;/* insets */ --ank-elevated: #ffffff; /* modals / dropdowns */ --ank-primary: #7c3aed; /* vibrant violet */ --ank-primary-hover: #6d28d9; --ank-primary-active: #5b21b6; --ank-primary-rgb: 124, 58, 237; --ank-ink: #1b1526; /* headings / strong text */ --ank-text: #3a3348; /* body */ --ank-muted: #6b6479; /* secondary text */ --ank-faint: #9c95ab; /* tertiary / placeholders */ --ank-border: #e8e3f2; /* hairlines */ --ank-border-strong: #d7cfe8; /* Rating / status hues + readable "ink" (text) tone --------------------- */ --ank-red: #e11d48; --ank-red-ink: #be123c; /* rose — Again / danger */ --ank-amber: #d97706; --ank-amber-ink: #b45309; /* amber — Hard */ --ank-green: #5f718a; --ank-green-ink: #475569; /* steel (repurposed) — Good */ --ank-blue: #7c3aed; --ank-blue-ink: #6d28d9; /* violet — Easy */ --ank-on-steel: #ffffff; /* text on a solid steel button */ --ank-navbar-bg: rgba(255, 255, 255, .82); --ank-toast-bg: #1b1526; --ank-toast-text: #f4f2fa; /* Shape & depth --------------------------------------------------------- */ --ank-radius-sm: 8px; --ank-radius: 10px; --ank-radius-lg: 14px; --ank-shadow-xs: 0 1px 2px rgba(60, 40, 95, .05); --ank-shadow-sm: 0 1px 2px rgba(60, 40, 95, .06), 0 1px 3px rgba(60, 40, 95, .05); --ank-shadow-md: 0 2px 4px rgba(60, 40, 95, .06), 0 6px 18px rgba(60, 40, 95, .10); --ank-shadow-lg: 0 10px 28px rgba(60, 40, 95, .16), 0 2px 8px rgba(60, 40, 95, .10); --ank-ring: 0 0 0 3px rgba(var(--ank-primary-rgb), .28); /* Bootstrap variable overrides (reference --ank-* so they follow the theme) */ --bs-body-bg: var(--ank-bg); --bs-body-color: var(--ank-text); --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-border-color: var(--ank-border); --bs-border-radius: var(--ank-radius); --bs-border-radius-sm: var(--ank-radius-sm); --bs-border-radius-lg: var(--ank-radius-lg); --bs-primary: var(--ank-primary); --bs-primary-rgb: var(--ank-primary-rgb); --bs-link-color: var(--ank-primary); --bs-link-color-rgb: var(--ank-primary-rgb); --bs-link-hover-color: var(--ank-primary-hover); --bs-emphasis-color: var(--ank-ink); --bs-secondary-color: var(--ank-muted); --bs-secondary-bg: var(--ank-surface-muted); --bs-tertiary-bg: var(--ank-surface-muted); --bs-card-bg: var(--ank-surface); --bs-modal-bg: var(--ank-elevated); --bs-dropdown-bg: var(--ank-elevated); } /* Palette (DARK) — near-black canvas, panels lifted well clear of it -------- */ [data-bs-theme="dark"] { color-scheme: dark; --ank-bg: #0d0d12; /* near-black canvas */ --ank-surface: #1b1b23; /* panels — clearly lighter than the canvas */ --ank-surface-muted: #23232d;/* insets */ --ank-elevated: #262633; /* modals / dropdowns sit above panels */ --ank-primary: #9d8cff; /* brighter violet, readable on dark */ --ank-primary-hover: #b0a2ff; --ank-primary-active: #c4bbff; --ank-primary-rgb: 157, 140, 255; --ank-ink: #f4f2fb; --ank-text: #cbc8d8; --ank-muted: #918da2; --ank-faint: #635f70; --ank-border: #30303c; /* visible hairline on panels */ --ank-border-strong: #43434f; --ank-red: #f2637a; --ank-red-ink: #f38f9c; --ank-amber: #e0a458; --ank-amber-ink: #e7b77e; --ank-green: #7f8b99; --ank-green-ink: #aab4c0; --ank-blue: #b0a2ff; --ank-blue-ink: #c4bbff; --ank-on-steel: #14141a; --ank-navbar-bg: rgba(16, 16, 22, .72); --ank-toast-bg: #262633; --ank-toast-text: #f4f2fb; --ank-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --ank-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .40); --ank-shadow-md: 0 2px 6px rgba(0, 0, 0, .50), 0 8px 22px rgba(0, 0, 0, .45); --ank-shadow-lg: 0 12px 34px rgba(0, 0, 0, .60), 0 2px 8px rgba(0, 0, 0, .50); --ank-ring: 0 0 0 3px rgba(var(--ank-primary-rgb), .40); } /* Base --------------------------------------------------------------------- */ body { background-color: var(--ank-bg); color: var(--ank-text); font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ank-ink); font-weight: 650; letter-spacing: -0.02em; } .text-muted { color: var(--ank-muted) !important; } a { text-underline-offset: 2px; } /* Give page content a little breathing room */ body > .container { padding-bottom: 3rem; margin-top: .5rem; } /* Navbar ------------------------------------------------------------------- */ .navbar { background-color: var(--ank-navbar-bg) !important; backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--ank-border); box-shadow: var(--ank-shadow-xs); } .navbar .navbar-brand { color: var(--ank-ink); font-weight: 700; letter-spacing: -0.02em; } .navbar .nav-link { color: var(--ank-muted); font-weight: 500; font-size: .925rem; padding: .4rem .75rem !important; border-radius: var(--ank-radius-sm); transition: color .15s ease, background-color .15s ease; } .navbar .nav-link:hover { color: var(--ank-ink); background-color: rgba(var(--ank-primary-rgb), .06); } .navbar .nav-link.active { color: var(--ank-primary); background-color: rgba(var(--ank-primary-rgb), .1); font-weight: 600; } /* Light/dark toggle in the navbar */ .ank-theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ank-border-strong); background: var(--ank-surface); color: var(--ank-muted); font-size: 1rem; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .12s ease; } .ank-theme-toggle:hover { color: var(--ank-primary); border-color: rgba(var(--ank-primary-rgb), .5); background: rgba(var(--ank-primary-rgb), .07); transform: translateY(-1px); } /* Cards / surfaces --------------------------------------------------------- */ .card { background-color: var(--ank-surface); border: 1px solid var(--ank-border); border-radius: var(--ank-radius-lg); box-shadow: var(--ank-shadow-sm); } .card-header { background-color: transparent; border-bottom: 1px solid var(--ank-border); font-weight: 600; color: var(--ank-ink); padding: .9rem 1.15rem; } .card-body { padding: 1.15rem; } .card-footer { background-color: transparent; border-top: 1px solid var(--ank-border); } .shadow-sm { box-shadow: var(--ank-shadow-sm) !important; } .shadow { box-shadow: var(--ank-shadow-md) !important; } /* Interactive workspace cards get a gentle hover lift */ .ank-card-link { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .ank-card-link:hover { box-shadow: var(--ank-shadow-md) !important; transform: translateY(-2px); border-color: var(--ank-border-strong); } .card-title a { color: var(--ank-ink); } .card-title a:hover { color: var(--ank-primary); } /* Buttons ------------------------------------------------------------------ */ .btn { --bs-btn-font-weight: 550; border-radius: var(--ank-radius-sm); font-weight: 550; letter-spacing: -0.01em; padding: .5rem .95rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease, color .15s ease; } .btn-sm { padding: .35rem .7rem; font-size: .825rem; } .btn:active { transform: translateY(1px); } .btn:focus-visible { box-shadow: var(--ank-ring); } .btn-primary { --bs-btn-bg: var(--ank-primary); --bs-btn-border-color: var(--ank-primary); --bs-btn-hover-bg: var(--ank-primary-hover); --bs-btn-hover-border-color: var(--ank-primary-hover); --bs-btn-active-bg: var(--ank-primary-active); --bs-btn-active-border-color: var(--ank-primary-active); --bs-btn-disabled-bg: var(--ank-primary); --bs-btn-disabled-border-color: var(--ank-primary); box-shadow: var(--ank-shadow-xs); } .btn-primary:hover { box-shadow: var(--ank-shadow-sm); } .btn-outline-primary { --bs-btn-color: var(--ank-primary); --bs-btn-border-color: rgba(var(--ank-primary-rgb), .4); --bs-btn-hover-bg: var(--ank-primary); --bs-btn-hover-border-color: var(--ank-primary); --bs-btn-active-bg: var(--ank-primary-active); --bs-btn-active-border-color: var(--ank-primary-active); } .btn-outline-secondary { --bs-btn-color: var(--ank-muted); --bs-btn-border-color: var(--ank-border-strong); --bs-btn-hover-bg: var(--ank-surface-muted); --bs-btn-hover-border-color: var(--ank-border-strong); --bs-btn-hover-color: var(--ank-ink); --bs-btn-active-bg: var(--ank-surface-muted); --bs-btn-active-color: var(--ank-ink); --bs-btn-active-border-color: var(--ank-border-strong); } /* Confirm/go action (Study, Add to workspace): a cold steel button that stays distinct from the violet primary in both themes (label auto-contrasts). */ .btn-success { --bs-btn-bg: var(--ank-green); --bs-btn-border-color: var(--ank-green); --bs-btn-color: var(--ank-on-steel); --bs-btn-hover-bg: color-mix(in srgb, var(--ank-green) 86%, var(--ank-ink)); --bs-btn-hover-border-color: color-mix(in srgb, var(--ank-green) 86%, var(--ank-ink)); --bs-btn-hover-color: var(--ank-on-steel); --bs-btn-active-bg: color-mix(in srgb, var(--ank-green) 78%, var(--ank-ink)); --bs-btn-active-border-color: color-mix(in srgb, var(--ank-green) 78%, var(--ank-ink)); --bs-btn-active-color: var(--ank-on-steel); --bs-btn-disabled-bg: var(--ank-green); --bs-btn-disabled-border-color: var(--ank-green); --bs-btn-disabled-color: var(--ank-on-steel); } .btn-outline-danger { --bs-btn-color: var(--ank-red-ink); --bs-btn-border-color: color-mix(in srgb, var(--ank-red) 45%, transparent); --bs-btn-hover-bg: var(--ank-red); --bs-btn-hover-border-color: var(--ank-red); --bs-btn-hover-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--ank-red) 88%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--ank-red) 88%, black); } .btn-outline-warning { --bs-btn-color: var(--ank-amber-ink); --bs-btn-border-color: color-mix(in srgb, var(--ank-amber) 45%, transparent); --bs-btn-hover-bg: var(--ank-amber); --bs-btn-hover-border-color: var(--ank-amber); --bs-btn-hover-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--ank-amber) 88%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--ank-amber) 88%, black); --bs-btn-active-color: #fff; } /* Forms -------------------------------------------------------------------- */ .form-control, .form-select { border-radius: var(--ank-radius-sm); border: 1px solid var(--ank-border-strong); padding: .55rem .8rem; color: var(--ank-text); background-color: var(--ank-surface); transition: border-color .15s ease, box-shadow .15s ease; } /* Keep room for the chevron — Bootstrap's arrow sits in the right padding */ .form-select { padding-right: 2.5rem; } .form-control::placeholder { color: var(--ank-faint); } .form-control:focus, .form-select:focus { border-color: var(--ank-primary); box-shadow: var(--ank-ring); } .form-label { font-weight: 550; font-size: .875rem; color: var(--ank-ink); margin-bottom: .35rem; } .form-check-input { border-color: var(--ank-border-strong); } .form-check-input:checked { background-color: var(--ank-primary); border-color: var(--ank-primary); } .form-check-input:focus { border-color: var(--ank-primary); box-shadow: var(--ank-ring); } /* Tables — airy, no heavy grid ------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(var(--ank-primary-rgb), .04); border-color: var(--ank-border); margin-bottom: 0; } .table > thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; font-weight: 600; color: var(--ank-faint); border-bottom: 1px solid var(--ank-border); padding: .5rem .75rem; } .table > tbody > tr > td { border-bottom: 1px solid var(--ank-border); padding: .8rem .75rem; vertical-align: middle; } .table > tbody > tr:last-child > td { border-bottom: 0; } .table-hover > tbody > tr { transition: background-color .12s ease; } /* Wrap tables in a surface so they read as a single panel */ .ank-table-wrap { background-color: var(--ank-surface); border: 1px solid var(--ank-border); border-radius: var(--ank-radius-lg); box-shadow: var(--ank-shadow-sm); padding: .25rem .9rem; overflow: hidden; } /* Badges — soft tinted pills ---------------------------------------------- */ .badge { font-weight: 600; font-size: .72rem; letter-spacing: .01em; padding: .32em .7em; border-radius: 999px; border: 1px solid transparent; } /* Map Bootstrap contextual badges to soft tints derived from the theme hues */ .badge.bg-danger { background-color: color-mix(in srgb, var(--ank-red) 16%, var(--ank-surface)) !important; color: var(--ank-red-ink) !important; } .badge.bg-primary { background-color: color-mix(in srgb, var(--ank-primary) 18%, var(--ank-surface)) !important; color: var(--ank-primary) !important; } .badge.bg-secondary { background-color: var(--ank-surface-muted) !important; color: var(--ank-muted) !important; } .badge.bg-success { background-color: color-mix(in srgb, var(--ank-green) 20%, var(--ank-surface)) !important; color: var(--ank-green-ink) !important; } .badge.bg-info { background-color: color-mix(in srgb, var(--ank-blue) 18%, var(--ank-surface)) !important; color: var(--ank-blue-ink) !important; } .badge.bg-warning { background-color: color-mix(in srgb, var(--ank-amber) 18%, var(--ank-surface)) !important; color: var(--ank-amber-ink) !important; } .badge.bg-light { background-color: var(--ank-surface-muted) !important; color: var(--ank-muted) !important; } /* Explicit status pills (inbox item status) */ .badge.status-NEW { background-color: color-mix(in srgb, var(--ank-blue) 18%, var(--ank-surface)); color: var(--ank-blue-ink); } .badge.status-IN_REVIEW { background-color: color-mix(in srgb, var(--ank-amber) 18%, var(--ank-surface)); color: var(--ank-amber-ink); } .badge.status-PROCESSED { background-color: color-mix(in srgb, var(--ank-green) 20%, var(--ank-surface)); color: var(--ank-green-ink); } .badge.status-DISCARDED { background-color: var(--ank-surface-muted); color: var(--ank-muted); } /* Inbox source pills */ .badge.source-WEB, .badge.source-MOBILE, .badge.source-TRANSCRIPT, .badge.source-OTHER { background-color: var(--ank-surface-muted); color: var(--ank-muted); } /* Alerts ------------------------------------------------------------------- */ .alert { border-radius: var(--ank-radius); border: 1px solid transparent; } /* Nav pills (inbox filter) ------------------------------------------------- */ .nav-pills .nav-link { color: var(--ank-muted); font-weight: 550; font-size: .875rem; border-radius: 999px; padding: .35rem .85rem; } .nav-pills .nav-link:hover { color: var(--ank-ink); background-color: rgba(var(--ank-primary-rgb), .06); } .nav-pills .nav-link.active { background-color: var(--ank-primary); color: #fff; box-shadow: var(--ank-shadow-xs); } /* kbd chips ---------------------------------------------------------------- */ kbd, .kbd { display: inline-block; font-family: "Inter", system-ui, sans-serif; font-size: .72rem; font-weight: 600; line-height: 1; color: var(--ank-muted); background-color: var(--ank-surface); border: 1px solid var(--ank-border-strong); border-bottom-width: 2px; border-radius: 6px; padding: .2em .45em; box-shadow: none; } /* Empty states ------------------------------------------------------------- */ .ank-empty { text-align: center; padding: 3rem 1.5rem; background-color: var(--ank-surface); border: 1px dashed var(--ank-border-strong); border-radius: var(--ank-radius-lg); color: var(--ank-muted); } .ank-empty .ank-empty-emoji { font-size: 2.5rem; line-height: 1; display: block; margin-bottom: .75rem; } .ank-empty h3 { font-size: 1.05rem; margin-bottom: .35rem; } .ank-empty p { color: var(--ank-muted); margin-bottom: 1.1rem; } /* Study screen — premium flashcard ---------------------------------------- */ .ank-flashcard { border-radius: var(--ank-radius-lg); box-shadow: var(--ank-shadow-md); border: 1px solid var(--ank-border); } .ank-flashcard .card-body { padding: 2.5rem 2rem; } .card-front, .card-back { font-size: 1.55rem; line-height: 1.45; font-weight: 500; color: var(--ank-ink); min-height: 6rem; display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-wrap; } .card-back { color: var(--ank-text); font-weight: 450; } .ank-divider { border: 0; border-top: 1px solid var(--ank-border); margin: 1.5rem 0; } /* Answer reveal transition */ #answer[hidden] { display: none; } #answer { animation: ank-reveal .22s ease-out; } @keyframes ank-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Rating buttons grid */ .ank-ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.75rem; } @media (max-width: 575.98px) { .ank-ratings { grid-template-columns: repeat(2, 1fr); } } .btn-rate { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .5rem .6rem; border-radius: var(--ank-radius); border: 1px solid transparent; background-clip: padding-box; font-family: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .btn-rate:hover { transform: translateY(-1px); box-shadow: var(--ank-shadow-sm); } .btn-rate:active { transform: translateY(0); } .btn-rate:focus-visible { outline: none; box-shadow: var(--ank-ring); } .rate-label { font-weight: 650; font-size: .95rem; letter-spacing: -0.01em; } .rate-interval { font-size: .78rem; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; } .rate-key { position: absolute; top: .35rem; right: .45rem; font-size: .62rem; padding: .05rem .3rem; border-radius: 4px; background: color-mix(in srgb, var(--ank-ink) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ank-ink) 12%, transparent); color: inherit; opacity: .6; } .rate-again { background-color: color-mix(in srgb, var(--ank-red) 13%, var(--ank-surface)); border-color: color-mix(in srgb, var(--ank-red) 42%, transparent); color: var(--ank-red-ink); } .rate-again:hover { background-color: color-mix(in srgb, var(--ank-red) 22%, var(--ank-surface)); } .rate-hard { background-color: color-mix(in srgb, var(--ank-amber) 13%, var(--ank-surface)); border-color: color-mix(in srgb, var(--ank-amber) 42%, transparent); color: var(--ank-amber-ink); } .rate-hard:hover { background-color: color-mix(in srgb, var(--ank-amber) 22%, var(--ank-surface)); } .rate-good { background-color: color-mix(in srgb, var(--ank-green) 16%, var(--ank-surface)); border-color: color-mix(in srgb, var(--ank-green) 44%, transparent); color: var(--ank-green-ink); } .rate-good:hover { background-color: color-mix(in srgb, var(--ank-green) 25%, var(--ank-surface)); } .rate-easy { background-color: color-mix(in srgb, var(--ank-blue) 15%, var(--ank-surface)); border-color: color-mix(in srgb, var(--ank-blue) 44%, transparent); color: var(--ank-blue-ink); } .rate-easy:hover { background-color: color-mix(in srgb, var(--ank-blue) 24%, var(--ank-surface)); } /* Flip affordance: a quiet icon on the card itself */ .ank-flip { display: flex; justify-content: center; margin-top: 1.4rem; } .ank-flip-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ank-border); background: rgba(var(--ank-primary-rgb), .07); color: var(--ank-primary); font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .18s ease, background-color .15s ease, box-shadow .15s ease; } .ank-flip-btn:hover { background: rgba(var(--ank-primary-rgb), .14); transform: rotate(180deg); box-shadow: var(--ank-shadow-sm); } #flashcard { cursor: pointer; } #flashcard:has(#answer:not([hidden])) { cursor: default; } .ank-hint { font-size: .8rem; color: var(--ank-faint); } .ank-hint kbd { background: var(--ank-surface); border: 1px solid var(--ank-border); border-radius: 5px; padding: .05rem .4rem; font-size: .72rem; color: var(--ank-muted); } /* Session progress + counters */ .ank-progress { height: 5px; border-radius: 999px; background: var(--ank-border); overflow: hidden; } .ank-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ank-primary), var(--ank-primary-hover)); transition: width .35s ease; } .ank-counters { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; } .ank-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 550; color: var(--ank-muted); background: var(--ank-surface); border: 1px solid var(--ank-border); border-radius: 999px; padding: .18rem .65rem; } /* Chips double as category filters on the study screen. */ a.ank-chip { text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; } a.ank-chip:hover { border-color: var(--ank-primary); color: var(--ank-primary); } .ank-chip.active { color: var(--ank-primary); border-color: var(--ank-primary); background: color-mix(in srgb, var(--ank-primary) 8%, var(--ank-surface)); font-weight: 650; } /* The section the CURRENT question was drawn from (matters in All mode). */ .ank-chip.current { color: var(--ank-text); border-color: var(--ank-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ank-primary) 30%, transparent); font-weight: 650; } .ank-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .dot-red { background: var(--ank-red); } .dot-indigo { background: var(--ank-primary); } .dot-amber { background: var(--ank-amber); } /* Inline card-field editor (study screen pencil icon) */ .ank-inline-edit { max-width: 26rem; display: inline-block; text-align: center; } /* Sides with inline speaker */ .ank-side { display: flex; align-items: center; justify-content: center; gap: .5rem; } .ank-side .card-front, .ank-side .card-back { min-height: 4.5rem; flex: 0 1 auto; } .ank-icon-btn { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ank-border); background: var(--ank-surface); color: var(--ank-muted); font-size: 1rem; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .12s ease; } .ank-icon-btn:hover { color: var(--ank-primary); border-color: rgba(var(--ank-primary-rgb), .4); background: rgba(var(--ank-primary-rgb), .06); transform: translateY(-1px); } .ank-icon-btn:disabled { opacity: .6; } .ank-icon-btn-sm { width: 28px; height: 28px; font-size: .8rem; } /* Drill chip: fixed next-review while looping */ .ank-drill-chip { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .85rem; color: var(--ank-amber-ink); background: color-mix(in srgb, var(--ank-amber) 14%, var(--ank-surface)); border: 1px solid color-mix(in srgb, var(--ank-amber) 36%, transparent); border-radius: var(--ank-radius-sm); padding: .45rem .8rem; } /* Rated toast */ #ank-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: var(--ank-toast-bg); color: var(--ank-toast-text); border: 1px solid color-mix(in srgb, var(--ank-toast-text) 14%, transparent); font-size: .875rem; padding: .55rem 1.1rem; border-radius: 999px; box-shadow: var(--ank-shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 1080; max-width: min(92vw, 560px); } #ank-toast.show { opacity: 1; transform: translate(-50%, 0); } #ank-toast strong { color: #c4bbff; } /* Login -------------------------------------------------------------------- */ .ank-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(1100px 600px at 15% -5%, rgba(var(--ank-primary-rgb), .14), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(124, 92, 240, .12), transparent 55%), var(--ank-bg); } .ank-auth-card { width: 100%; max-width: 400px; border-radius: var(--ank-radius-lg); box-shadow: var(--ank-shadow-lg); border: 1px solid var(--ank-border); } .ank-brand-mark { font-size: 2rem; font-weight: 700; color: var(--ank-ink); letter-spacing: -0.02em; } /* Details/summary (card drafts) ------------------------------------------- */ details summary { cursor: pointer; } details summary::marker { color: var(--ank-faint); } /* Dropdown menu (workspace cog on the dashboard) -------------------------- */ .ank-cog { line-height: 1; padding: .3rem .5rem; } .ank-cog::after { display: none; } /* drop Bootstrap's caret — the ⚙️ is enough */ .dropdown-menu { border: 1px solid var(--ank-border); border-radius: var(--ank-radius); box-shadow: var(--ank-shadow-md); padding: .35rem; font-size: .9rem; --bs-dropdown-link-active-bg: rgba(var(--ank-primary-rgb), .1); } .dropdown-item { border-radius: var(--ank-radius-sm); padding: .45rem .7rem; color: var(--ank-text); font-weight: 500; width: 100%; text-align: left; background: none; border: 0; } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(var(--ank-primary-rgb), .08); color: var(--ank-ink); } .dropdown-item.text-danger { color: var(--ank-red-ink) !important; } .dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus { background-color: color-mix(in srgb, var(--ank-red) 12%, transparent); color: var(--ank-red-ink) !important; } .dropdown-divider { border-top-color: var(--ank-border); margin: .35rem .15rem; } /* Example sentences (study + card detail) --------------------------------- */ .ank-examples-box { background-color: var(--ank-surface-muted); border: 1px solid var(--ank-border); border-radius: var(--ank-radius-sm); padding: .75rem 1rem; } .ank-examples-text { white-space: pre-wrap; color: var(--ank-text); } .ank-examples-head { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--ank-muted); margin-bottom: .35rem; } .ank-examples-head .bi-stars { color: var(--ank-primary); } /* Notebook pipeline ---------------------------------------------------------- */ .ank-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--ank-primary-rgb), .12); color: var(--ank-primary); font-size: .8rem; font-weight: 700; margin-right: .35rem; vertical-align: 2px; } .ank-preview { border: 1px dashed var(--ank-border-strong); border-radius: var(--ank-radius); padding: .9rem 1rem; background: var(--ank-surface-muted); } .ank-pick { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .4rem; border-radius: var(--ank-radius-sm); cursor: pointer; margin-bottom: 0; } .ank-pick:hover { background: rgba(var(--ank-primary-rgb), .05); } .ank-pick .form-check-input { margin-top: .3rem; flex: 0 0 auto; } .ank-pick-body { display: block; } .ank-pick-gloss { color: var(--ank-muted); } .ank-pick-ctx { display: block; font-size: .8rem; color: var(--ank-faint); margin-top: .1rem; } .ank-note-content { white-space: pre-wrap; max-width: 32rem; } /* Notebook rows — clickable Q/A/C card material -------------------------- */ .ank-nb-row { cursor: pointer; } .ank-nb-row:hover { background: rgba(var(--ank-primary-rgb), .05); } .ank-nb-cell { max-width: 44rem; } .ank-nb-label { color: var(--ank-faint); font-weight: 600; font-size: .78rem; margin-right: .15rem; } .ank-nb-q { font-weight: 600; color: var(--ank-ink); } .ank-nb-q .ank-nb-phrase { white-space: pre-wrap; } .ank-nb-a { color: var(--ank-text); margin-top: .1rem; } .ank-nb-c { color: var(--ank-muted); font-size: .85rem; margin-top: .1rem; } .ank-nb-ex { color: var(--ank-muted); font-size: .8rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42rem; } /* The checkbox / delete cells opt out of the row's open-editor click. */ .ank-nb-no-open { cursor: default; } /* Card-editor modal: the
wraps both the scrollable body and the pinned footer. A block-level form would break Bootstrap's scrollable flex chain (the body wouldn't cap its height, so generating examples pushes the Save/Add/Cancel footer off-screen). display:contents dissolves the form's own box so .modal-body and .modal-footer become direct flex children of .modal-content again — body scrolls, footer stays visible. */ #editor-modal .modal-content > form { display: contents; }