From 01c738588f7b480f32ec205bb9ada78235f0c52c Mon Sep 17 00:00:00 2001 From: mkelvers Date: Tue, 14 Apr 2026 23:53:19 +0200 Subject: [PATCH] chore: ignore generated tailwind css --- .gitignore | 1 + static/css/tailwind.css | 1537 --------------------------------------- 2 files changed, 1 insertion(+), 1537 deletions(-) delete mode 100644 static/css/tailwind.css diff --git a/.gitignore b/.gitignore index 6259d40..91cec8f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules out dist *.tgz +static/css/tailwind.css # code coverage coverage diff --git a/static/css/tailwind.css b/static/css/tailwind.css deleted file mode 100644 index b866d70..0000000 --- a/static/css/tailwind.css +++ /dev/null @@ -1,1537 +0,0 @@ -/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ -@layer properties; -@layer theme, base, components, utilities; -@layer theme { - :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; - --spacing: 0.25rem; - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --font-weight-semibold: 600; - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono); - } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, strong { - font-weight: bolder; - } - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::placeholder { - opacity: 1; - } - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { - ::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - ::-webkit-calendar-picker-indicator { - line-height: 1; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { - appearance: button; - } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; - } -} -@layer utilities { - .static { - position: static; - } - .start { - inset-inline-start: var(--spacing); - } - .container { - width: 100%; - @media (width >= 40rem) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } - .m-0 { - margin: calc(var(--spacing) * 0); - } - .mx-auto { - margin-inline: auto; - } - .my-3 { - margin-block: calc(var(--spacing) * 3); - } - .mt-5 { - margin-top: calc(var(--spacing) * 5); - } - .mb-0 { - margin-bottom: calc(var(--spacing) * 0); - } - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); - } - .mb-5 { - margin-bottom: calc(var(--spacing) * 5); - } - .block { - display: block; - } - .grid { - display: grid; - } - .hidden { - display: none; - } - .inline-flex { - display: inline-flex; - } - .table { - display: table; - } - .h-1\.5 { - height: calc(var(--spacing) * 1.5); - } - .h-10 { - height: calc(var(--spacing) * 10); - } - .min-h-\[72vh\] { - min-height: 72vh; - } - .w-1\.5 { - width: calc(var(--spacing) * 1.5); - } - .w-\[min\(780px\,calc\(100vw-\(1\.5rem\*2\)\)\)\] { - width: min(780px, calc(100vw - (1.5rem * 2))); - } - .w-full { - width: 100%; - } - .max-w-\[560px\] { - max-width: 560px; - } - .cursor-pointer { - cursor: pointer; - } - .content-center { - align-content: center; - } - .items-center { - align-items: center; - } - .justify-items-center { - justify-items: center; - } - .gap-1 { - gap: calc(var(--spacing) * 1); - } - .gap-2 { - gap: calc(var(--spacing) * 2); - } - .gap-3 { - gap: calc(var(--spacing) * 3); - } - .gap-4 { - gap: calc(var(--spacing) * 4); - } - .rounded-full { - border-radius: calc(infinity * 1px); - } - .border-0 { - border-style: var(--tw-border-style); - border-width: 0px; - } - .bg-\[var\(--color-accent\)\] { - background-color: var(--color-accent); - } - .bg-\[var\(--color-panel\)\] { - background-color: var(--color-panel); - } - .bg-\[var\(--color-text-faint\)\] { - background-color: var(--color-text-faint); - } - .p-6 { - padding: calc(var(--spacing) * 6); - } - .px-7 { - padding-inline: calc(var(--spacing) * 7); - } - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - .py-8 { - padding-block: calc(var(--spacing) * 8); - } - .text-center { - text-align: center; - } - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .text-\[0\.9rem\] { - font-size: 0.9rem; - } - .text-\[0\.95rem\] { - font-size: 0.95rem; - } - .text-\[1\.4rem\] { - font-size: 1.4rem; - } - .text-\[1\.05rem\] { - font-size: 1.05rem; - } - .text-\[clamp\(2rem\,4vw\,3rem\)\] { - font-size: clamp(2rem, 4vw, 3rem); - } - .text-\[clamp\(4rem\,15vw\,10rem\)\] { - font-size: clamp(4rem, 15vw, 10rem); - } - .leading-\[0\.9\] { - --tw-leading: 0.9; - line-height: 0.9; - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .tracking-\[0\.04em\] { - --tw-tracking: 0.04em; - letter-spacing: 0.04em; - } - .text-\[var\(--color-accent\)\] { - color: var(--color-accent); - } - .text-\[var\(--color-text-muted\)\] { - color: var(--color-text-muted); - } - .text-\[var\(--text-on-accent\)\] { - color: var(--text-on-accent); - } - .lowercase { - text-transform: lowercase; - } - .uppercase { - text-transform: uppercase; - } - .no-underline { - text-decoration-line: none; - } - .blur { - --tw-blur: blur(8px); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - .hover\:brightness-95 { - &:hover { - @media (hover: hover) { - --tw-brightness: brightness(95%); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - } - } -} -:root { - --bg: #111419; - --panel: #181d24; - --panel-soft: #1f2530; - --header: #1a2029; - --text: #e7eaf0; - --text-muted: #b8c0cd; - --text-faint: #8b97a8; - --accent: #cad4e4; - --danger: #d17f88; - --surface-search: rgba(10, 13, 18, 0.3); - --surface-search-focus-border: rgba(202, 212, 228, 0.24); - --surface-thumb: #141920; - --surface-input: #151b23; - --surface-input-focus: #1c2531; - --surface-tab-hover: #2a3340; - --surface-tab-active: #323d4c; - --surface-select: #1a212b; - --surface-search-view-all: #151b23; - --text-on-accent: #111419; - --overlay-subtle: rgba(0, 0, 0, 0.45); - --space-1: 0.25rem; - --space-2: 0.5rem; - --space-3: 0.75rem; - --space-4: 1rem; - --space-5: 1.25rem; - --space-6: 1.5rem; - --space-8: 2rem; - --poster-max-height: 360px; - --font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif; -} -* { - box-sizing: border-box; -} -html, body { - margin: 0; - padding: 0; -} -body { - min-height: 100vh; - background: var(--bg); - color: var(--text); - font-family: var(--font); - font-size: 14px; - line-height: 1.45; -} -a { - color: var(--text); - text-decoration: none; -} -a:hover { - color: var(--accent); - text-decoration: underline; -} -a:visited { - color: var(--text); -} -:focus-visible { - outline: 1px dotted var(--text-faint); - outline-offset: 2px; -} -:focus:not(:focus-visible) { - outline: none; -} -header { - position: sticky; - top: 0; - z-index: 100; - background: var(--header); -} -.header-top { - width: 100%; - max-width: 1580px; - margin: 0 auto; - padding: var(--space-3) var(--space-4); - display: flex; - align-items: center; - gap: var(--space-4); -} -.header-left { - display: flex; - align-items: center; - gap: var(--space-5); - min-width: 0; -} -.logo { - display: inline-flex; - align-items: center; - color: var(--accent); -} -.logo-svg { - width: 28px; - height: 28px; -} -.nav { - display: flex; - flex-wrap: wrap; - gap: var(--space-3); -} -.nav a { - color: var(--text-muted); - font-size: 0.85rem; - text-decoration: none; -} -.nav a:hover { - color: var(--text); - text-decoration: none; -} -.header-search-wrapper { - margin-left: auto; - width: min(420px, 45vw); - min-width: 240px; - position: relative; -} -.header-search { - width: 100%; -} -.search-input { - width: 100%; - height: 34px; - border: 1px solid transparent; - background: var(--surface-search); - color: var(--text); - padding: 0 var(--space-3); - font: inherit; - transition: border-color 120ms ease, background-color 120ms ease; -} -.search-input::placeholder { - color: var(--text-faint); -} -.search-input:focus { - border-color: var(--surface-search-focus-border); -} -.search-input:focus-visible { - outline: none; -} -.search-dropdown { - position: absolute; - top: calc(100% + 2px); - left: 0; - right: 0; - max-height: min(70vh, 560px); - overflow-y: auto; - background: var(--panel); - z-index: 120; -} -.search-results { - display: grid; -} -.search-results-title { - padding: var(--space-2) var(--space-3); - color: var(--text-faint); - font-family: var(--font); - font-size: 0.68rem; -} -.search-result-item { - display: flex; - align-items: flex-start; - gap: var(--space-3); - padding: var(--space-2) var(--space-3); - color: inherit; - text-decoration: none; -} -.search-result-item:hover { - background: var(--panel-soft); - text-decoration: none; -} -.search-result-thumb, .search-result-no-image { - width: 42px; - aspect-ratio: 2 / 3; - flex-shrink: 0; -} -.search-result-thumb { - object-fit: cover; - background: var(--surface-thumb); -} -.search-result-no-image { - background: var(--surface-thumb); - font-size: 0; - color: transparent; -} -.search-result-info { - min-width: 0; - display: grid; - gap: 1px; -} -.search-result-title { - color: var(--text); - font-size: 0.86rem; - line-height: 1.3; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} -.search-result-type { - color: var(--text-faint); - font-family: var(--font); - font-size: 0.67rem; -} -.search-result-view-all { - padding: var(--space-2) var(--space-3); - color: var(--text-muted); - background: var(--surface-search-view-all); - text-align: center; - font-size: 0.8rem; - text-decoration: none; -} -.search-result-view-all:hover { - background: var(--panel-soft); - color: var(--text); - text-decoration: none; -} -main { - width: 100%; - max-width: 1580px; - margin: 0 auto; - padding: var(--space-5) var(--space-4) var(--space-8); -} -.auth-main { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 0 var(--space-4); -} -.is-hidden { - display: none !important; -} -.grid-full-width { - grid-column: 1 / -1; -} -.full-span-trigger { - grid-column: 1 / -1; - height: 1px; -} -.scroll-trigger { - width: 100%; -} -.catalog-grid, .notifications-list, .relations-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); - gap: var(--space-4) var(--space-4); -} -.catalog-item, .relation-card, .notification-card { - min-width: 0; -} -.catalog-placeholder { - pointer-events: none; -} -.catalog-placeholder-thumb { - width: 100%; - max-height: var(--poster-max-height); - aspect-ratio: 2 / 3; - background: linear-gradient(90deg, var(--surface-search) 0%, rgba(255, 255, 255, 0.08) 45%, var(--surface-search) 100%); - background-size: 220% 100%; - animation: placeholder-shimmer 1.4s linear infinite; -} -.catalog-placeholder-title { - margin-top: var(--space-2); - height: 0.9rem; - width: 80%; - background: linear-gradient(90deg, var(--surface-search) 0%, rgba(255, 255, 255, 0.08) 45%, var(--surface-search) 100%); - background-size: 220% 100%; - animation: placeholder-shimmer 1.4s linear infinite; -} -@keyframes placeholder-shimmer { - from { - background-position: 100% 0; - } - to { - background-position: -100% 0; - } -} -.catalog-item > a, .catalog-item a, .relation-card, .notification-card { - display: flex; - flex-direction: column; - color: inherit; - text-decoration: none; - background: transparent; -} -.no-image, .schedule-card-image, .notification-image { - width: 100%; - max-height: var(--poster-max-height); - aspect-ratio: 2 / 3; - display: flex; - align-items: flex-end; - justify-content: center; - overflow: hidden; -} -.catalog-thumb, .relation-thumb { - width: 100%; - max-height: var(--poster-max-height); - aspect-ratio: 2 / 3; - display: block; - object-fit: cover; - object-position: center; -} -.schedule-card-image img, .notification-image img { - width: 100%; - height: 100%; - display: block; - object-fit: cover; - object-position: center; -} -.no-image { - font-size: 0; - color: transparent; -} -.catalog-title, .relation-title, .notification-title { - margin-top: var(--space-2); - color: var(--text); - font-size: 0.86rem; - line-height: 1.3; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} -.relation-type { - margin-top: var(--space-1); - color: var(--text-faint); - font-size: 0.76rem; -} -.catalog-item:hover .catalog-title, .relation-card:hover .relation-title, .notification-card:hover .notification-title { - color: var(--accent); -} -.notification-content { - padding: 0; - margin-top: var(--space-2); - display: grid; - gap: var(--space-1); -} -.notification-meta { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); -} -.notification-meta span { - color: var(--text-faint); - font-family: var(--font); - font-size: 0.67rem; -} -.notification-progress, .notification-muted, .notification-broadcast { - color: var(--text-faint) !important; - font-family: var(--font); - font-size: 0.67rem; -} -.loading-indicator { - display: inline-flex; - align-items: center; - gap: var(--space-2); - color: var(--text-muted); - font-size: 0.9rem; -} -.loading-dot { - width: 6px; - height: 6px; - border-radius: 999px; - background: var(--text-faint); -} -.htmx-indicator { - display: none; -} -.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { - display: inline-flex; -} -.empty-state, .no-anime { - padding: var(--space-4) 0; -} -.empty-state-title { - margin: 0 0 var(--space-2); - font-size: 1rem; -} -.empty-state-text, .empty-inline-note, .empty-state-hint { - color: var(--text-muted); - font-size: 0.9rem; -} -.not-found-page { - width: min(780px, calc(100vw - (var(--space-6) * 2))); - min-height: 72vh; - margin: 0 auto; - padding: var(--space-8) var(--space-7); - display: grid; - align-content: center; - justify-items: center; - gap: var(--space-3); - text-align: center; -} -.not-found-code { - margin: 0; - color: var(--text-muted); - font-size: clamp(4rem, 15vw, 10rem); - letter-spacing: 0.04em; - line-height: 0.9; -} -.not-found-page h1 { - margin: 0; - font-size: clamp(2rem, 4vw, 3rem); -} -.not-found-link { - color: var(--accent); - text-decoration: none; - font-size: 1.05rem; -} -.not-found-link:hover { - text-decoration: underline; -} -.auth-shell { - width: min(560px, 100%); -} -.login-container { - width: min(560px, 100%); - margin: 0 auto; - padding: var(--space-6); - background: var(--panel); -} -.login-container h2 { - margin: 0; - font-size: 1.4rem; -} -.login-subtitle { - margin: var(--space-3) 0 var(--space-5); - color: var(--text-muted); - font-size: 0.95rem; -} -.login-form { - display: grid; - gap: var(--space-4); -} -.form-group { - display: grid; - gap: var(--space-1); -} -.form-group label { - color: var(--text-muted); - font-size: 0.9rem; -} -.form-group input { - height: 40px; - border: 1px solid transparent; - background: var(--surface-search); - color: var(--text); - padding: 0 var(--space-3); - font: inherit; - transition: border-color 120ms ease, background-color 120ms ease; -} -.form-group input:focus { - border-color: var(--surface-search-focus-border); -} -.form-group input:focus-visible { - outline: none; -} -.auth-password-note { - margin: 0; - color: var(--text-faint); - font-size: 0.75rem; - line-height: 1.4; -} -.auth-form-error { - margin: var(--space-2) 0 0; - color: var(--danger); - font-size: 0.82rem; -} -.recovery-key-box { - margin: 0; - padding: var(--space-3); - background: var(--surface-search); - border: 1px solid var(--surface-search-focus-border); - color: var(--text); - word-break: break-all; - font-size: 0.86rem; -} -.recovery-key-row { - display: grid; - gap: var(--space-2); -} -.recovery-copy-btn { - justify-self: start; - min-width: 0; - padding: 0.42rem 0.72rem; - border: 1px solid var(--surface-search-focus-border); - background: var(--surface-search); - color: var(--text); - border-radius: 0; - font-size: 0.8rem; - line-height: 1; - cursor: pointer; -} -.recovery-copy-btn:hover { - background: var(--surface-input-focus); - color: var(--text); - text-decoration: none; -} -.recovery-copy-btn:focus-visible { - outline: none; - border-color: var(--accent); -} -.recovery-copy-feedback { - margin-top: var(--space-2); - min-height: 1.1rem; -} -.auth-primary-link { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 40px; - padding: 0 var(--space-4); - border: 1px solid var(--surface-search-focus-border); - background: var(--surface-search); - color: var(--text); - text-decoration: none; -} -.auth-primary-link:hover { - background: var(--panel-soft); - color: var(--text); - text-decoration: none; -} -.auth-primary-link:focus-visible { - outline: none; - border-color: var(--accent); -} -.account-page { - width: min(720px, 100%); - margin: 0 auto; - display: grid; - gap: var(--space-4); -} -.account-card { - background: var(--panel); - padding: var(--space-5); - display: grid; - gap: var(--space-3); -} -.account-card h2, .account-card h3 { - margin: 0; -} -.account-meta { - display: grid; - gap: var(--space-2); -} -.account-meta-row { - display: grid; - gap: var(--space-1); -} -.account-meta-label { - color: var(--text-faint); - font-size: 0.78rem; -} -.account-meta-value { - color: var(--text); - font-size: 0.95rem; -} -.account-form { - display: grid; - gap: var(--space-3); -} -.account-form .form-group input { - width: 100%; -} -.account-submit-btn, .account-logout-btn { - height: 40px; - border: 1px solid var(--surface-search-focus-border); - background: var(--surface-search); - color: var(--text); - padding: 0 var(--space-4); - cursor: pointer; -} -.account-submit-btn:hover, .account-logout-btn:hover { - background: var(--panel-soft); -} -.account-submit-btn:focus-visible, .account-logout-btn:focus-visible { - outline: none; - border-color: var(--accent); -} -.account-success { - margin: 0; - color: var(--accent); - font-size: 0.82rem; -} -.account-form-inline { - display: inline-flex; -} -.login-button { - height: 40px; - border: none; - background: var(--accent); - color: var(--text-on-accent); - font-size: 0.9rem; - font-weight: 600; - cursor: pointer; -} -.login-button:hover { - filter: brightness(0.95); -} -.auth-switch-row { - margin: var(--space-5) 0 0; - text-align: center; - color: var(--text-muted); - font-size: 0.9rem; -} -.auth-switch-row a { - color: var(--accent); -} -.watchlist-header { - display: flex; - justify-content: space-between; - align-items: flex-end; - gap: var(--space-4); - margin-bottom: var(--space-4); -} -.watchlist-heading { - display: grid; - gap: var(--space-1); -} -.watchlist-heading h2 { - margin: 0; - font-size: 1.2rem; -} -.watchlist-subtitle { - margin: 0; - color: var(--text-muted); - font-size: 0.86rem; -} -.watchlist-controls { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: var(--space-2); - justify-content: flex-end; -} -.text-link { - display: inline-flex; - align-items: center; - justify-content: center; - font: inherit; - appearance: none; - border: none; - background: none; - color: var(--text-muted); - padding: 0.24rem 0.45rem; - min-width: 64px; - text-align: center; - cursor: pointer; - font-size: 0.8rem; - line-height: 1.2; -} -.text-link:visited { - color: var(--text-muted); -} -.text-link:hover { - color: var(--accent); - text-decoration: none; -} -.view-toggle, .status-tabs, .tabs { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); -} -.status-tabs { - margin-bottom: var(--space-3); -} -.view-toggle a, .status-tabs a, .tab { - flex: 0 0 auto; - border: none; - background: var(--panel-soft); - color: var(--text-muted); - padding: 0.24rem 0.45rem; - font-size: 0.76rem; - font-family: var(--font); - cursor: pointer; - text-decoration: none; - white-space: nowrap; -} -.view-toggle a:hover, .status-tabs a:hover, .tab:hover { - color: var(--text); - background: var(--surface-tab-hover); - text-decoration: none; -} -.view-toggle a.active, .status-tabs a.active, .tab.active { - color: var(--accent); - background: var(--surface-tab-active); -} -.watchlist-item { - position: relative; -} -.remove-btn { - position: absolute; - top: 8px; - right: 8px; - width: 22px; - height: 22px; - border: none; - background: var(--overlay-subtle); - color: var(--text-muted); - cursor: pointer; - opacity: 0; -} -.watchlist-item:hover .remove-btn { - opacity: 1; -} -.remove-btn:hover, .remove-link:hover, .dropdown-item.remove:hover { - color: var(--danger); -} -.watchlist-table { - width: 100%; - border-collapse: collapse; - background: var(--panel); -} -.watchlist-table th { - text-align: left; - color: var(--text-faint); - font-family: var(--font); - font-size: 0.67rem; - padding: 0.6rem; -} -.watchlist-table td { - padding: 0.6rem; -} -.watchlist-table tr:hover { - background: var(--panel-soft); -} -.thumb { - width: 36px; - aspect-ratio: 2 / 3; - object-fit: cover; -} -.title-cell { - font-weight: 500; -} -.actions-cell { - width: 90px; -} -.remove-link { - border: none; - background: none; - color: var(--text-muted); - padding: 0; - font-size: 0.8rem; - cursor: pointer; -} -.sort-filter { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: var(--space-3); - margin-bottom: var(--space-4); - padding: var(--space-3); - background: var(--panel); -} -.sort-filter-group { - display: flex; - align-items: center; - gap: var(--space-2); -} -.sort-filter-group label, .density-label { - color: var(--text-muted); - font-size: 0.78rem; -} -.sort-filter-select { - height: 30px; - border: none; - background: var(--surface-select); - color: var(--text); - padding: 0 var(--space-2); - font-size: 0.78rem; - font-family: var(--font); -} -.anime-page { - display: grid; - grid-template-columns: minmax(0, 1fr) 300px; - gap: var(--space-5); - align-items: start; -} -.anime-main { - min-width: 0; - display: grid; - gap: var(--space-8); -} -.anime-surface { - border: none; - background: transparent; - padding: 0; -} -.anime-section { - margin: 0; -} -.anime-hero { - display: grid; - grid-template-columns: 220px minmax(0, 1fr); - gap: var(--space-5); -} -.anime-poster { - width: 220px; -} -.anime-poster img, .anime-poster .no-image { - width: 100%; -} -.anime-info h1 { - margin: 0; - font-size: 1.45rem; - line-height: 1.2; -} -.anime-alt-title { - margin: var(--space-2) 0 var(--space-3); - color: var(--text-muted); - font-size: 0.9rem; -} -.anime-quick-info { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); -} -.info-tag { - color: var(--text-faint); - font-family: var(--font); - font-size: 0.67rem; -} -.anime-actions { - margin-top: var(--space-3); -} -.anime-synopsis { - margin-top: var(--space-4); - max-width: 100ch; -} -.anime-synopsis h3, .anime-relations h3, .anime-recommendations h3 { - margin: 0 0 var(--space-3); - color: var(--text); - font-family: var(--font); - font-size: 1.25rem; - font-weight: 600; - line-height: 1.2; -} -.anime-side-section h3 { - margin: 0 0 var(--space-2); - color: var(--text-faint); - font-family: var(--font); - font-size: 0.78rem; -} -.anime-synopsis p { - margin: 0; - color: var(--text-muted); -} -.no-synopsis { - color: var(--text-faint); -} -.anime-sidebar { - position: sticky; - top: 74px; - display: grid; - gap: var(--space-4); - background: var(--panel); - padding: var(--space-3); -} -.anime-side-section { - display: grid; - gap: var(--space-3); -} -.sidebar-row { - display: grid; - gap: var(--space-1); - margin-top: var(--space-1); -} -.sidebar-label { - color: var(--text-faint); - font-family: var(--font); - font-size: 0.84rem; - margin-top: 2px; -} -.sidebar-value { - color: var(--text-muted); - font-size: 0.84rem; -} -.sidebar-row-wrap { - gap: var(--space-1); -} -.sidebar-tags { - display: flex; - flex-wrap: wrap; - gap: var(--space-1); - margin-top: 1px; -} -.sidebar-tag { - border: none; - background: transparent; - color: var(--text-muted); - font-size: 0.84rem; - font-family: var(--font); - padding: 0; -} -.side-details-more { - border: none; - padding-top: 0; -} -.side-details-more summary { - color: var(--text-muted); - font-size: 0.82rem; - cursor: pointer; -} -.side-details-more[open] { - display: grid; - gap: var(--space-3); -} -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-trigger { - display: inline-flex; - align-items: center; - gap: var(--space-2); - height: 32px; - border: none; - background: var(--panel-soft); - color: var(--text); - padding: 0 var(--space-2); - font-size: 0.8rem; - font-family: var(--font); - cursor: pointer; -} -.dropdown-arrow { - font-size: 0.64rem; -} -.dropdown-menu { - position: absolute; - top: calc(100% + 2px); - left: 0; - min-width: 210px; - background: var(--panel); - display: none; - z-index: 110; -} -.dropdown.open .dropdown-menu { - display: block; -} -.dropdown-item { - width: 100%; - border: none; - background: transparent; - color: var(--text-muted); - padding: 0.5rem 0.62rem; - font-size: 0.78rem; - font-family: var(--font); - text-align: left; - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; -} -.dropdown-item:hover, .dropdown-item.active { - background: var(--panel-soft); - color: var(--text); -} -.dropdown-divider { - display: none; -} -.dropdown-item .check { - color: var(--accent); -} -.discover-container, .discover-header, .notifications-page { - display: grid; - gap: var(--space-4); -} -.discover-header h1, .notifications-page h1 { - margin: 0; - font-size: 1.2rem; -} -.discover-subtitle, .notifications-subtitle { - margin: 0; - color: var(--text-muted); - font-size: 0.88rem; -} -.notifications-section-title { - margin-top: var(--space-6); -} -.notifications-group-title { - margin: 0 0 var(--space-2); - color: var(--text); - font-size: 1.25rem; - font-weight: 600; - line-height: 1.2; -} -.notifications-group-note { - margin: 0 0 var(--space-4); - color: var(--text-muted); - font-size: 0.88rem; -} -.notifications-group { - display: grid; - gap: var(--space-3); -} -.notifications-list-spaced { - margin-bottom: var(--space-4); -} -@media (max-width: 1040px) { - .anime-page { - grid-template-columns: minmax(0, 1fr); - } - .anime-sidebar { - position: static; - } -} -@media (max-width: 860px) { - .header-top { - flex-wrap: wrap; - gap: var(--space-3); - } - .header-left { - width: 100%; - flex-wrap: wrap; - gap: var(--space-3); - } - .nav { - width: 100%; - gap: var(--space-2); - } - .header-search-wrapper { - width: 100%; - margin-left: 0; - } - main { - padding: var(--space-5) var(--space-3) var(--space-6); - } - .watchlist-header { - flex-direction: column; - align-items: flex-start; - } - .watchlist-controls { - width: 100%; - justify-content: flex-start; - } - .sort-filter { - flex-direction: column; - align-items: flex-start; - gap: var(--space-2); - } - .anime-hero { - grid-template-columns: minmax(0, 1fr); - } - .anime-poster { - width: min(230px, 58vw); - } -} -@media (max-width: 680px) { - .catalog-grid, .notifications-list, .relations-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--space-3); - } - .status-tabs, .tabs, .view-toggle { - flex-wrap: nowrap; - overflow-x: auto; - gap: var(--space-2); - padding-bottom: var(--space-1); - -webkit-overflow-scrolling: touch; - } - .status-tabs a, .tabs .tab, .view-toggle a { - padding: 0.34rem 0.62rem; - } - .watchlist-table { - display: block; - overflow-x: auto; - white-space: nowrap; - } -} -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-leading { - syntax: "*"; - inherits: false; -} -@property --tw-font-weight { - syntax: "*"; - inherits: false; -} -@property --tw-tracking { - syntax: "*"; - inherits: false; -} -@property --tw-blur { - syntax: "*"; - inherits: false; -} -@property --tw-brightness { - syntax: "*"; - inherits: false; -} -@property --tw-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-invert { - syntax: "*"; - inherits: false; -} -@property --tw-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-sepia { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false; -} -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-border-style: solid; - --tw-leading: initial; - --tw-font-weight: initial; - --tw-tracking: initial; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - } - } -}