154 lines
3.0 KiB
CSS
154 lines
3.0 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@700;800;900&display=swap");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--background: 235 45% 4%;
|
|
--foreground: 258 36% 96%;
|
|
--muted: 246 30% 13%;
|
|
--muted-foreground: 247 18% 68%;
|
|
--border: 251 35% 20%;
|
|
--input: 252 42% 24%;
|
|
--ring: 258 92% 70%;
|
|
--primary: 264 93% 66%;
|
|
--primary-foreground: 265 55% 98%;
|
|
--secondary: 244 32% 14%;
|
|
--secondary-foreground: 254 38% 94%;
|
|
--accent: 188 86% 50%;
|
|
--accent-foreground: 230 45% 8%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
scrollbar-color: hsl(263 92% 68% / 0.42) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
background-color: hsl(var(--background));
|
|
background-image:
|
|
linear-gradient(90deg, hsl(187 92% 49% / 0.08), transparent 24%, hsl(264 92% 59% / 0.12) 74%, transparent),
|
|
linear-gradient(180deg, hsl(250 60% 16% / 0.68), hsl(235 45% 4%) 48%, hsl(235 54% 3%));
|
|
font-family: "Inter", "Avenir Next", "Segoe UI", sans-serif;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
::selection {
|
|
background: hsl(264 92% 68% / 0.45);
|
|
color: hsl(258 36% 98%);
|
|
}
|
|
|
|
.sybil-wordmark {
|
|
font-family: "Orbitron", "Inter", sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.app-grid-surface {
|
|
background-image:
|
|
linear-gradient(hsl(244 48% 20% / 0.18) 1px, transparent 1px),
|
|
linear-gradient(90deg, hsl(244 48% 20% / 0.14) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
}
|
|
|
|
.glass-panel {
|
|
background:
|
|
linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),
|
|
hsl(236 48% 6%);
|
|
box-shadow:
|
|
inset 0 1px 0 hsl(252 90% 86% / 0.08),
|
|
0 14px 36px hsl(240 80% 2% / 0.28);
|
|
}
|
|
|
|
.md-content {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.md-content p + p {
|
|
margin-top: 0.85rem;
|
|
}
|
|
|
|
.md-content h1,
|
|
.md-content h2,
|
|
.md-content h3 {
|
|
line-height: 1.25;
|
|
margin-top: 1.2rem;
|
|
margin-bottom: 0.45rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.md-content h1 {
|
|
font-size: 1.45rem;
|
|
}
|
|
|
|
.md-content h2 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.md-content h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.md-content ul,
|
|
.md-content ol {
|
|
margin-top: 0.65rem;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.md-content li + li {
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.md-content code {
|
|
background: hsl(288 22% 23%);
|
|
border-radius: 0.25rem;
|
|
padding: 0.05rem 0.3rem;
|
|
font-size: 0.86em;
|
|
}
|
|
|
|
.md-content pre {
|
|
overflow-x: auto;
|
|
border-radius: 0.5rem;
|
|
background: hsl(287 28% 13%);
|
|
padding: 0.6rem 0.75rem;
|
|
}
|
|
|
|
.md-content a {
|
|
color: hsl(269 88% 76%);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.md-cite-token {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 9999px;
|
|
border: 1px solid hsl(274 40% 55%);
|
|
background: hsl(277 33% 21%);
|
|
color: hsl(304 42% 96%);
|
|
font-size: 0.72rem;
|
|
line-height: 1;
|
|
padding: 0.12rem 0.38rem;
|
|
vertical-align: baseline;
|
|
}
|