mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-23 19:21:12 +01:00
404 lines
7.0 KiB
CSS
404 lines
7.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
|
|
@import 'tailwindcss';
|
|
|
|
/* Highlight.js: atom-one-light for light mode */
|
|
@import 'highlight.js/styles/atom-one-light.css';
|
|
|
|
/* Highlight.js: atom-one-dark for dark mode */
|
|
.dark .hljs {
|
|
color: #abb2bf;
|
|
}
|
|
.dark .hljs-comment,
|
|
.dark .hljs-quote {
|
|
color: #5c6370;
|
|
font-style: italic;
|
|
}
|
|
.dark .hljs-doctag,
|
|
.dark .hljs-keyword,
|
|
.dark .hljs-formula {
|
|
color: #c678dd;
|
|
}
|
|
.dark .hljs-section,
|
|
.dark .hljs-name,
|
|
.dark .hljs-selector-tag,
|
|
.dark .hljs-deletion,
|
|
.dark .hljs-subst {
|
|
color: #e06c75;
|
|
}
|
|
.dark .hljs-literal {
|
|
color: #56b6c2;
|
|
}
|
|
.dark .hljs-string,
|
|
.dark .hljs-regexp,
|
|
.dark .hljs-addition,
|
|
.dark .hljs-attribute,
|
|
.dark .hljs-meta .hljs-string {
|
|
color: #98c379;
|
|
}
|
|
.dark .hljs-attr,
|
|
.dark .hljs-variable,
|
|
.dark .hljs-template-variable,
|
|
.dark .hljs-type,
|
|
.dark .hljs-selector-class,
|
|
.dark .hljs-selector-attr,
|
|
.dark .hljs-selector-pseudo,
|
|
.dark .hljs-number {
|
|
color: #d19a66;
|
|
}
|
|
.dark .hljs-symbol,
|
|
.dark .hljs-bullet,
|
|
.dark .hljs-link,
|
|
.dark .hljs-meta,
|
|
.dark .hljs-selector-id,
|
|
.dark .hljs-title {
|
|
color: #61aeee;
|
|
}
|
|
.dark .hljs-built_in,
|
|
.dark .hljs-title.class_,
|
|
.dark .hljs-class .hljs-title {
|
|
color: #e6c07b;
|
|
}
|
|
.dark .hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
.dark .hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
.dark .hljs-link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, monospace;
|
|
|
|
/* Accent colors using CSS variables set by accent store */
|
|
--color-accent-50: var(--accent-50);
|
|
--color-accent-100: var(--accent-100);
|
|
--color-accent-200: var(--accent-200);
|
|
--color-accent-300: var(--accent-300);
|
|
--color-accent-400: var(--accent-400);
|
|
--color-accent-500: var(--accent-500);
|
|
--color-accent-600: var(--accent-600);
|
|
--color-accent-700: var(--accent-700);
|
|
--color-accent-800: var(--accent-800);
|
|
--color-accent-900: var(--accent-900);
|
|
--color-accent-950: var(--accent-950);
|
|
}
|
|
|
|
/* Prose styles for rendered markdown */
|
|
.prose {
|
|
line-height: 1.75;
|
|
color: rgb(64 64 64);
|
|
}
|
|
|
|
.dark .prose {
|
|
color: rgb(212 212 212);
|
|
}
|
|
|
|
.prose > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prose > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prose h1 {
|
|
font-size: 1.875em;
|
|
font-weight: 700;
|
|
margin-top: 0;
|
|
margin-bottom: 0.875em;
|
|
color: rgb(23 23 23);
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.dark .prose h1 {
|
|
color: rgb(250 250 250);
|
|
}
|
|
|
|
.prose h2 {
|
|
font-size: 1.375em;
|
|
font-weight: 600;
|
|
margin-top: 1.75em;
|
|
margin-bottom: 0.5em;
|
|
color: rgb(38 38 38);
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.dark .prose h2 {
|
|
color: rgb(245 245 245);
|
|
}
|
|
|
|
.prose h3 {
|
|
font-size: 1.125em;
|
|
font-weight: 600;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
color: rgb(64 64 64);
|
|
}
|
|
|
|
.dark .prose h3 {
|
|
color: rgb(229 229 229);
|
|
}
|
|
|
|
.prose h4 {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 0.5em;
|
|
color: rgb(64 64 64);
|
|
}
|
|
|
|
.dark .prose h4 {
|
|
color: rgb(229 229 229);
|
|
}
|
|
|
|
.prose p {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.prose ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.prose ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.prose li {
|
|
margin-top: 0.375em;
|
|
margin-bottom: 0.375em;
|
|
}
|
|
|
|
.prose li > ul,
|
|
.prose li > ol {
|
|
margin-top: 0.375em;
|
|
margin-bottom: 0.375em;
|
|
}
|
|
|
|
.prose code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
background-color: rgb(245 245 245);
|
|
color: rgb(64 64 64);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dark .prose code {
|
|
background-color: transparent;
|
|
color: rgb(229 229 229);
|
|
}
|
|
|
|
.prose pre {
|
|
background-color: rgb(250 250 250);
|
|
border: 1px solid rgb(229 229 229);
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
overflow-x: auto;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
|
|
.dark .prose pre {
|
|
background-color: rgb(23 23 23);
|
|
border-color: rgb(64 64 64);
|
|
}
|
|
|
|
.prose pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
font-size: 0.875em;
|
|
font-weight: 400;
|
|
color: inherit;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-accent-600);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--color-accent-700);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dark .prose a {
|
|
color: var(--color-accent-400);
|
|
}
|
|
|
|
.dark .prose a:hover {
|
|
color: var(--color-accent-300);
|
|
}
|
|
|
|
.prose strong {
|
|
font-weight: 600;
|
|
color: rgb(38 38 38);
|
|
}
|
|
|
|
.dark .prose strong {
|
|
color: rgb(245 245 245);
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 3px solid var(--color-accent-400);
|
|
padding-left: 1em;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
font-style: italic;
|
|
color: rgb(115 115 115);
|
|
}
|
|
|
|
.dark .prose blockquote {
|
|
border-left-color: var(--color-accent-600);
|
|
color: rgb(163 163 163);
|
|
}
|
|
|
|
.prose blockquote p {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid rgb(229 229 229);
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.dark .prose hr {
|
|
border-top-color: rgb(64 64 64);
|
|
}
|
|
|
|
.prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.prose th,
|
|
.prose td {
|
|
border: 1px solid rgb(229 229 229);
|
|
padding: 0.625rem 0.875rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.dark .prose th,
|
|
.dark .prose td {
|
|
border-color: rgb(64 64 64);
|
|
}
|
|
|
|
.prose th {
|
|
background-color: rgb(250 250 250);
|
|
font-weight: 600;
|
|
color: rgb(38 38 38);
|
|
}
|
|
|
|
.dark .prose th {
|
|
background-color: rgb(38 38 38);
|
|
color: rgb(245 245 245);
|
|
}
|
|
|
|
.prose img {
|
|
border-radius: 0.5rem;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
|
|
.prose-sm {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.prose-sm h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.prose-sm h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.prose-sm h3 {
|
|
font-size: 1.125em;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
/* Default accent colors (blue) - overridden by JS */
|
|
:root {
|
|
--accent-50: #eff6ff;
|
|
--accent-100: #dbeafe;
|
|
--accent-200: #bfdbfe;
|
|
--accent-300: #93c5fd;
|
|
--accent-400: #60a5fa;
|
|
--accent-500: #3b82f6;
|
|
--accent-600: #2563eb;
|
|
--accent-700: #1d4ed8;
|
|
--accent-800: #1e40af;
|
|
--accent-900: #1e3a8a;
|
|
--accent-950: #172554;
|
|
}
|
|
|
|
html {
|
|
@apply bg-neutral-50 dark:bg-neutral-900;
|
|
}
|
|
|
|
/* Smooth theme transitions using View Transitions API */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.3s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/* Fallback transitions for browsers without View Transitions API */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
html {
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
|
|
* {
|
|
transition:
|
|
background-color 0.3s ease-in-out,
|
|
border-color 0.3s ease-in-out,
|
|
color 0.3s ease-in-out;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar for Chromium and Safari */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-neutral-100 dark:bg-neutral-900;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply rounded bg-neutral-300 dark:bg-neutral-700;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-neutral-400 dark:bg-neutral-600;
|
|
}
|
|
}
|