summaryrefslogtreecommitdiff
path: root/src/css/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/style.css')
-rw-r--r--src/css/style.css1395
1 files changed, 683 insertions, 712 deletions
diff --git a/src/css/style.css b/src/css/style.css
index 50c6f48..97b14f3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,271 +1,259 @@
:root {
- /* Win95 "strawberry latte" tokens */
-
- /* Desktop (rarely used, but handy for full-page demos) */
- --desktop: #d7a5b7;
-
- /* Page + surfaces */
- --bg: #f4ece7; /* page behind windows */
- --bg-pattern: #efe5df;
-
- /* Background texture (dither/checker overlay) */
- --dither-ink: rgba(59, 46, 44, 0.22);
- --dither-opacity: 0.18;
- --surface: #e9dcd5; /* window face */
- --surface-alt: #fff7f2; /* milk highlight */
-
- /* Text */
- --fg: #2a1f1d;
- --muted: #6a5550;
-
- /* 3D border system */
- --border: #3b2e2c;
- --border-light: #fff7f2;
- --border-dark: #8e7670;
-
- /* Girly coffee accents */
- --primary: #e56aa6; /* strawberry */
- --primary-light: #f08dbe; /* strawberry milk */
- --primary-dark: #c84d86; /* rose */
-
- --secondary: #b69cff; /* lilac */
- --secondary-light: #d7c8ff;
- --secondary-dark: #8f78d6;
-
- --accent-brown: #b88a68; /* latte */
- --accent-brown-light: #d4a574;
- --accent-brown-dark: #7a5245;
-
- /* Title bar (Win95-ish window chrome) */
- --titlebar-a: #d85b9b;
- --titlebar-b: #7a3e8e;
- --titlebar-fg: #fff7f2;
-
- /* Links */
- --link: #c84d86;
- --link-visited: #6f2f80;
- --link-active: #b5173d;
-
- /* Keep existing names as aliases */
- --accent-pink: var(--primary);
- --accent-lavender: var(--secondary);
-
- /* Status colors (slightly softened) */
- --success: #2e8b57;
- --error: #b3261e;
- --warning: #b7791f;
- --info: #2b6cb0;
-
- /* Spacing */
- --space-xs: 0.5rem;
- --space-sm: 1rem;
- --space-md: 1.5rem;
- --space-lg: 2rem;
- --space-xl: 3rem;
-
- /* Borders */
- --border-width: 2px;
- --border-style: solid;
-
- /* Type */
- --font-mono: "Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
- --line-height: 1.35;
-
- /* Shadows */
- --shadow-sm: 1px 1px 0;
- --shadow-md: 2px 2px 0;
- --shadow-lg: 3px 3px 0;
- --shadow-color: rgba(0, 0, 0, 0.22);
- --shadow-box: 2px 2px 0 rgba(0, 0, 0, 0.12);
- --shadow-button: 1px 1px 0 rgba(0, 0, 0, 0.18);
-
- --highlight: rgba(255, 247, 242, 0.9);
- --lowlight: rgba(59, 46, 44, 0.55);
-
- --content-max-width: 1000px;
+ /* Win95 "strawberry latte" tokens */
+
+ /* Desktop (rarely used, but handy for full-page demos) */
+ --desktop: #d7a5b7;
+
+ /* Page + surfaces */
+ --bg: #f4ece7; /* page behind windows */
+ --bg-pattern: #efe5df;
+
+ /* Background texture (dither/checker overlay) */
+ --dither-ink: rgba(59, 46, 44, 0.22);
+ --dither-opacity: 0.18;
+ --surface: #e9dcd5; /* window face */
+ --surface-alt: #fff7f2; /* milk highlight */
+
+ /* Text */
+ --fg: #2a1f1d;
+ --muted: #6a5550;
+
+ /* 3D border system */
+ --border: #3b2e2c;
+ --border-light: #fff7f2;
+ --border-dark: #8e7670;
+
+ /* Girly coffee accents */
+ --primary: #e56aa6; /* strawberry */
+ --primary-light: #f08dbe; /* strawberry milk */
+ --primary-dark: #c84d86; /* rose */
+
+ --secondary: #b69cff; /* lilac */
+ --secondary-light: #d7c8ff;
+ --secondary-dark: #8f78d6;
+
+ --accent-brown: #b88a68; /* latte */
+ --accent-brown-light: #d4a574;
+ --accent-brown-dark: #7a5245;
+
+ /* Title bar (Win95-ish window chrome) */
+ --titlebar-a: #d85b9b;
+ --titlebar-b: #7a3e8e;
+ --titlebar-fg: #fff7f2;
+
+ /* Links */
+ --link: #c84d86;
+ --link-visited: #6f2f80;
+ --link-active: #b5173d;
+
+ /* Keep existing names as aliases */
+ --accent-pink: var(--primary);
+ --accent-lavender: var(--secondary);
+
+ /* Status colors (slightly softened) */
+ --success: #2e8b57;
+ --error: #b3261e;
+ --warning: #b7791f;
+ --info: #2b6cb0;
+
+ /* Spacing */
+ --space-xs: 0.5rem;
+ --space-sm: 1rem;
+ --space-md: 1.5rem;
+ --space-lg: 2rem;
+ --space-xl: 3rem;
+
+ /* Borders */
+ --border-width: 2px;
+ --border-style: solid;
+
+ /* Type */
+ --font-mono: "Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+ "Courier New", monospace;
+ --line-height: 1.35;
+
+ /* Shadows */
+ --shadow-sm: 1px 1px 0;
+ --shadow-md: 2px 2px 0;
+ --shadow-lg: 3px 3px 0;
+ --shadow-color: rgba(0, 0, 0, 0.22);
+ --shadow-box: 2px 2px 0 rgba(0, 0, 0, 0.12);
+ --shadow-button: 1px 1px 0 rgba(0, 0, 0, 0.18);
+
+ --highlight: rgba(255, 247, 242, 0.9);
+ --lowlight: rgba(59, 46, 44, 0.55);
+
+ --content-max-width: 1000px;
}
[data-theme="dark"] {
- /* Espresso-night variant */
- --bg: #2d2523;
- --bg-pattern: #241e1c;
+ /* Espresso-night variant */
+ --bg: #2d2523;
+ --bg-pattern: #241e1c;
- --dither-ink: rgba(255, 247, 242, 0.12);
- --dither-opacity: 0.14;
- --surface: #3b312f;
- --surface-alt: #463a37;
+ --dither-ink: rgba(255, 247, 242, 0.12);
+ --dither-opacity: 0.14;
+ --surface: #3b312f;
+ --surface-alt: #463a37;
- --fg: #f9efea;
- --muted: #cbb8b1;
+ --fg: #f9efea;
+ --muted: #cbb8b1;
- --border: #f1e6e0;
- --border-light: #6e5b57;
- --border-dark: #120d0c;
+ --border: #f1e6e0;
+ --border-light: #6e5b57;
+ --border-dark: #120d0c;
- --primary: #f06aa6;
- --primary-light: #ff97c8;
- --primary-dark: #d94b8e;
+ --primary: #f06aa6;
+ --primary-light: #ff97c8;
+ --primary-dark: #d94b8e;
- --secondary: #b69cff;
- --secondary-light: #d7c8ff;
- --secondary-dark: #8f78d6;
+ --secondary: #b69cff;
+ --secondary-light: #d7c8ff;
+ --secondary-dark: #8f78d6;
- --accent-brown: #a57353;
- --accent-brown-light: #c9936a;
- --accent-brown-dark: #6b4a34;
+ --accent-brown: #a57353;
+ --accent-brown-light: #c9936a;
+ --accent-brown-dark: #6b4a34;
- --titlebar-a: #b04a80;
- --titlebar-b: #4f245e;
- --titlebar-fg: #fff7f2;
+ --titlebar-a: #b04a80;
+ --titlebar-b: #4f245e;
+ --titlebar-fg: #fff7f2;
- --link: #ff97c8;
- --link-visited: #d7c8ff;
- --link-active: #fff0f7;
+ --link: #ff97c8;
+ --link-visited: #d7c8ff;
+ --link-active: #fff0f7;
- /* Status colors (brightened for dark mode) */
- --success: #4caf50;
- --error: #ff6b6b;
- --warning: #ffa500;
- --info: #64b5f6;
+ /* Status colors (brightened for dark mode) */
+ --success: #4caf50;
+ --error: #ff6b6b;
+ --warning: #ffa500;
+ --info: #64b5f6;
- --shadow-color: rgba(0, 0, 0, 0.75);
- --highlight: rgba(255, 255, 255, 0.2);
- --lowlight: rgba(0, 0, 0, 0.85);
+ --shadow-color: rgba(0, 0, 0, 0.75);
+ --highlight: rgba(255, 255, 255, 0.2);
+ --lowlight: rgba(0, 0, 0, 0.85);
}
@font-face {
- font-family: "Mono";
- src: url("../assets/fonts/Maple.woff2") format("woff2");
- font-display: swap;
- font-weight: normal;
+ font-family: "Mono";
+ src: url("../assets/fonts/Maple.woff2") format("woff2");
+ font-display: swap;
+ font-weight: normal;
}
@supports (font-synthesis: none) {
- @font-face {
- font-family: "Mono";
- src: url("../assets/fonts/Maple.woff2") format("woff2");
- font-synthesis: none;
- }
+ @font-face {
+ font-family: "Mono";
+ src: url("../assets/fonts/Maple.woff2") format("woff2");
+ font-synthesis: none;
+ }
}
/* base */
* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- cursor:
- url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" width="32" height="24"><path d="M1 3h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2H9v1h1v2h1v2h-1v1H8v-1H7v-2H6v-2H5v1H4v1H3v1H1" fill="%23ff69b4" stroke="%23b19cd9" stroke-width="0.5"/><path d="M2 5h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1H8v2h1v2h1v2H8v-2H7v-2H6v-1H5v1H4v1H3v1H2" fill="white" stroke="%23ff69b4" stroke-width="0.5"/></svg>')
- 0 0,
- auto !important;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" width="32" height="24"><path d="M1 3h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2H9v1h1v2h1v2h-1v1H8v-1H7v-2H6v-2H5v1H4v1H3v1H1" fill="%23ff69b4" stroke="%23b19cd9" stroke-width="0.5"/><path d="M2 5h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1H8v2h1v2h1v2H8v-2H7v-2H6v-1H5v1H4v1H3v1H2" fill="white" stroke="%23ff69b4" stroke-width="0.5"/></svg>')
+ 0 0, auto !important;
}
::selection {
- background: var(--primary);
- color: var(--surface-alt);
+ background: var(--primary);
+ color: var(--surface-alt);
}
:focus-visible {
- outline: 1px dotted var(--fg);
- outline-offset: 2px;
+ outline: 1px dotted var(--fg);
+ outline-offset: 2px;
}
html {
- font-size: 16px;
- background-color: var(--bg);
- position: relative;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- height: 100vh;
+ font-size: 16px;
+ background-color: var(--bg);
+ position: relative;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ height: 100vh;
}
html::before {
- content: "";
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-image: linear-gradient(
- 45deg,
- var(--dither-ink) 25%,
- transparent 25%,
- transparent 75%,
- var(--dither-ink) 75%
- ),
- linear-gradient(
- 45deg,
- var(--dither-ink) 25%,
- transparent 25%,
- transparent 75%,
- var(--dither-ink) 75%
- ),
- url("../assets/img/bg.png");
- background-size:
- 10px 10px,
- 10px 10px,
- auto;
- background-position:
- 0 0,
- 5px 5px,
- 0 0;
- background-repeat: repeat;
- opacity: var(--dither-opacity);
- z-index: -1;
- pointer-events: none;
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(
+ 45deg,
+ var(--dither-ink) 25%,
+ transparent 25%,
+ transparent 75%,
+ var(--dither-ink) 75%
+ ),
+ linear-gradient(
+ 45deg,
+ var(--dither-ink) 25%,
+ transparent 25%,
+ transparent 75%,
+ var(--dither-ink) 75%
+ ), url("../assets/img/bg.png");
+ background-size: 10px 10px, 10px 10px, auto;
+ background-position: 0 0, 5px 5px, 0 0;
+ background-repeat: repeat;
+ opacity: var(--dither-opacity);
+ z-index: -1;
+ pointer-events: none;
}
body {
- background: transparent;
- color: var(--fg);
- line-height: var(--line-height);
- padding: var(--space-md);
- padding-top: calc(var(--space-md) + 3rem);
- max-width: var(--content-max-width);
- margin: 0 auto;
- font-family: var(--font-mono);
- scrollbar-color: var(--accent-lavender) var(--bg);
- scrollbar-width: thin;
- display: flex;
- flex-direction: column;
- height: 100vh;
+ background: transparent;
+ color: var(--fg);
+ line-height: var(--line-height);
+ padding: var(--space-md);
+ padding-top: calc(var(--space-md) + 3rem);
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ font-family: var(--font-mono);
+ scrollbar-color: var(--accent-lavender) var(--bg);
+ scrollbar-width: thin;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
}
/* webkit scrollbar (chrome, safari, edge) */
::-webkit-scrollbar {
- width: 12px;
+ width: 12px;
}
::-webkit-scrollbar-track {
- background: var(--bg);
- border: 2px solid var(--border);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark);
+ background: var(--bg);
+ border: 2px solid var(--border);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark);
}
::-webkit-scrollbar-thumb {
- background: var(--accent-lavender);
- border: 2px outset var(--border-light);
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight);
+ background: var(--accent-lavender);
+ border: 2px outset var(--border-light);
+ box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight);
}
::-webkit-scrollbar-thumb:hover {
- background: var(--accent-pink);
+ background: var(--accent-pink);
}
.div-centered {
- max-width: var(--content-max-width);
- margin: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: calc(100vh - 4.5rem);
- text-align: justify;
+ max-width: var(--content-max-width);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: calc(100vh - 4.5rem);
+ text-align: justify;
}
/* typography */
@@ -276,169 +264,163 @@ h3,
h4,
h5,
h6 {
- font-family: var(--font-mono);
- font-weight: 700;
- line-height: 1.15;
- margin-bottom: var(--space-md);
- color: var(--fg);
+ font-family: var(--font-mono);
+ font-weight: 700;
+ line-height: 1.15;
+ margin-bottom: var(--space-md);
+ color: var(--fg);
}
h1 {
- font-size: 2rem;
- margin-bottom: var(--space-lg);
- background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
+ font-size: 2rem;
+ margin-bottom: var(--space-lg);
+ background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
}
/* "Titlebar" headings: retro, but still cute */
h1,
h2,
h3 {
- padding: 0.55rem 0.75rem;
- border: var(--border-width) solid var(--border);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark);
- color: var(--titlebar-fg);
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
+ padding: 0.55rem 0.75rem;
+ border: var(--border-width) solid var(--border);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark);
+ color: var(--titlebar-fg);
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
h2 {
- font-size: 1.5rem;
- background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
+ font-size: 1.5rem;
+ background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
}
h3 {
- font-size: 1.25rem;
- background: linear-gradient(90deg, var(--accent-brown-dark), var(--accent-brown));
+ font-size: 1.25rem;
+ background: linear-gradient(90deg, var(--accent-brown-dark), var(--accent-brown));
}
h4 {
- font-size: 1.1rem;
+ font-size: 1.1rem;
}
h5 {
- font-size: 1rem;
+ font-size: 1rem;
}
h6 {
- font-size: 0.9rem;
+ font-size: 0.9rem;
}
p {
- margin-bottom: var(--space-sm);
+ margin-bottom: var(--space-sm);
}
a {
- color: var(--link);
- text-decoration: underline;
- text-decoration-thickness: 2px;
- text-underline-offset: 2px;
+ color: var(--link);
+ text-decoration: underline;
+ text-decoration-thickness: 2px;
+ text-underline-offset: 2px;
}
a:visited {
- color: var(--link-visited);
+ color: var(--link-visited);
}
a:hover {
- background: var(--primary-light);
- color: var(--fg);
+ background: var(--primary-light);
+ color: var(--fg);
}
a:active {
- color: var(--link-active);
+ color: var(--link-active);
}
small {
- color: var(--muted);
- font-size: 0.875rem;
+ color: var(--muted);
+ font-size: 0.875rem;
}
blockquote {
- border-left: 3px solid var(--accent-brown);
- padding-left: var(--space-md);
- margin: var(--space-md) 0;
- font-style: italic;
- color: var(--muted);
+ border-left: 3px solid var(--accent-brown);
+ padding-left: var(--space-md);
+ margin: var(--space-md) 0;
+ font-style: italic;
+ color: var(--muted);
}
/* lists */
ul,
ol {
- margin: var(--space-sm) 0;
- padding-left: var(--space-lg);
+ margin: var(--space-sm) 0;
+ padding-left: var(--space-lg);
}
li {
- margin-bottom: var(--space-xs);
+ margin-bottom: var(--space-xs);
}
/* tables */
table {
- width: 100%;
- border-collapse: collapse;
- margin: var(--space-md) 0;
- border: var(--border-width) solid var(--border);
- background: var(--surface);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 3px 3px 0 rgba(0, 0, 0, 0.12);
+ width: 100%;
+ border-collapse: collapse;
+ margin: var(--space-md) 0;
+ border: var(--border-width) solid var(--border);
+ background: var(--surface);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 3px 3px 0
+ rgba(0, 0, 0, 0.12);
}
thead {
- background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
- color: var(--titlebar-fg);
- font-weight: 700;
+ background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
+ color: var(--titlebar-fg);
+ font-weight: 700;
}
th,
td {
- padding: var(--space-xs) var(--space-sm);
- border: 1px solid var(--border-dark);
- text-align: left;
+ padding: var(--space-xs) var(--space-sm);
+ border: 1px solid var(--border-dark);
+ text-align: left;
}
tbody tr:nth-child(odd) {
- background: var(--surface-alt);
+ background: var(--surface-alt);
}
tbody tr:nth-child(even) {
- background: var(--surface);
+ background: var(--surface);
}
tbody tr:hover {
- background: color-mix(in srgb, var(--primary) 12%, transparent);
+ background: color-mix(in srgb, var(--primary) 12%, transparent);
}
/* code */
code {
- background: var(--surface-alt);
- padding: 0.25rem 0.5rem;
- border: 1px solid var(--border-dark);
- font-size: 0.875rem;
- font-family: var(--font-mono);
+ background: var(--surface-alt);
+ padding: 0.25rem 0.5rem;
+ border: 1px solid var(--border-dark);
+ font-size: 0.875rem;
+ font-family: var(--font-mono);
}
pre {
- background: var(--surface-alt);
- border: var(--border-width) solid var(--border);
- padding: var(--space-md);
- margin: var(--space-md) 0;
- overflow-x: auto;
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 3px 3px 0 rgba(0, 0, 0, 0.12);
+ background: var(--surface-alt);
+ border: var(--border-width) solid var(--border);
+ padding: var(--space-md);
+ margin: var(--space-md) 0;
+ overflow-x: auto;
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 3px 3px 0
+ rgba(0, 0, 0, 0.12);
}
pre code {
- background: transparent;
- border: none;
- padding: 0;
- font-size: 0.875rem;
+ background: transparent;
+ border: none;
+ padding: 0;
+ font-size: 0.875rem;
}
/* Prism.js syntax highlighting */
@@ -447,12 +429,12 @@ pre code {
.token.prolog,
.token.doctype,
.token.cdata {
- color: var(--muted);
- font-style: italic;
+ color: var(--muted);
+ font-style: italic;
}
.token.punctuation {
- color: var(--fg);
+ color: var(--fg);
}
.token.property,
@@ -461,7 +443,7 @@ pre code {
.token.number,
.token.constant,
.token.symbol {
- color: var(--secondary-dark);
+ color: var(--secondary-dark);
}
.token.selector,
@@ -469,7 +451,7 @@ pre code {
.token.string,
.token.char,
.token.builtin {
- color: var(--accent-brown-dark);
+ color: var(--accent-brown-dark);
}
.token.operator,
@@ -477,183 +459,179 @@ pre code {
.token.url,
.language-css .token.string,
.style .token.string {
- color: var(--primary-dark);
+ color: var(--primary-dark);
}
.token.atrule,
.token.attr-value,
.token.keyword {
- color: var(--primary-dark);
- font-weight: 700;
+ color: var(--primary-dark);
+ font-weight: 700;
}
.token.function,
.token.class-name {
- color: var(--primary);
- font-weight: 700;
+ color: var(--primary);
+ font-weight: 700;
}
.token.regex,
.token.important,
.token.variable {
- color: var(--accent-brown);
+ color: var(--accent-brown);
}
.token.important,
.token.bold {
- font-weight: bold;
+ font-weight: bold;
}
.token.italic {
- font-style: italic;
+ font-style: italic;
}
/* Dark theme variants */
[data-theme="dark"] .token.keyword,
[data-theme="dark"] .token.operator {
- color: var(--primary-light);
+ color: var(--primary-light);
}
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.selector {
- color: var(--accent-brown-light);
+ color: var(--accent-brown-light);
}
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant {
- color: var(--secondary-light);
+ color: var(--secondary-light);
}
/* dividers */
hr {
- border: none;
- border-top: 2px solid var(--border-dark);
- margin: var(--space-lg) 0;
- height: 0;
+ border: none;
+ border-top: 2px solid var(--border-dark);
+ margin: var(--space-lg) 0;
+ height: 0;
}
/* layout */
header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1000;
- border-bottom: 2px solid var(--border);
- padding: 0.45rem var(--space-md);
- margin-bottom: 0;
- background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
- color: var(--titlebar-fg);
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--space-md);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 0 2px 0 rgba(0, 0, 0, 0.08);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ border-bottom: 2px solid var(--border);
+ padding: 0.45rem var(--space-md);
+ margin-bottom: 0;
+ background: linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
+ color: var(--titlebar-fg);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-md);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 0 2px 0
+ rgba(0, 0, 0, 0.08);
}
header h1 {
- display: none;
+ display: none;
}
header::before {
- content: "";
- display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
- background-image: url("../assets/img/coffee.svg");
- background-size: 1.1rem 1.1rem;
- background-position: center;
- background-repeat: no-repeat;
- margin-right: 0.5rem;
- background-color: var(--surface);
- border: 2px outset var(--border-light);
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight);
+ content: "";
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+ background-image: url("../assets/img/coffee.svg");
+ background-size: 1.1rem 1.1rem;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-right: 0.5rem;
+ background-color: var(--surface);
+ border: 2px outset var(--border-light);
+ box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight);
}
nav {
- display: flex;
- gap: var(--space-md);
- flex-wrap: wrap;
- align-items: center;
- margin: 0;
- flex: 1;
+ display: flex;
+ gap: var(--space-md);
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0;
+ flex: 1;
}
nav a {
- font-size: 0.85rem;
- padding: 0.1rem 0.15rem;
- color: var(--titlebar-fg);
- text-decoration: none;
- border-bottom: 2px solid color-mix(in srgb, var(--titlebar-fg) 55%, transparent);
+ font-size: 0.85rem;
+ padding: 0.1rem 0.15rem;
+ color: var(--titlebar-fg);
+ text-decoration: none;
+ border-bottom: 2px solid color-mix(in srgb, var(--titlebar-fg) 55%, transparent);
}
nav a:visited {
- color: var(--titlebar-fg);
+ color: var(--titlebar-fg);
}
nav a:hover {
- background: color-mix(in srgb, var(--surface-alt) 18%, transparent);
- border-bottom-color: var(--primary-light);
+ background: color-mix(in srgb, var(--surface-alt) 18%, transparent);
+ border-bottom-color: var(--primary-light);
}
nav a:active {
- background: color-mix(in srgb, var(--surface-alt) 28%, transparent);
- border-bottom-color: var(--primary);
+ background: color-mix(in srgb, var(--surface-alt) 28%, transparent);
+ border-bottom-color: var(--primary);
}
main {
- flex: 1;
+ flex: 1;
}
article {
- border: var(--border-width) solid var(--border);
- padding: var(--space-md);
- margin-bottom: var(--space-lg);
- background: var(--surface);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 4px 4px 0 rgba(0, 0, 0, 0.14),
- 5px 5px 0 rgba(0, 0, 0, 0.06);
+ border: var(--border-width) solid var(--border);
+ padding: var(--space-md);
+ margin-bottom: var(--space-lg);
+ background: var(--surface);
+ box-shadow:
+ inset 1px 1px 0 var(--border-light),
+ inset -1px -1px 0 var(--border-dark),
+ 4px 4px 0 rgba(0, 0, 0, 0.14),
+ 5px 5px 0 rgba(0, 0, 0, 0.06);
}
article > :last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
article h2 {
- margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
- border-left: none;
- border-right: none;
- border-top: none;
- border-bottom: var(--border-width) solid var(--border);
- box-shadow: none;
- text-shadow: none;
+ margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ border-bottom: var(--border-width) solid var(--border);
+ box-shadow: none;
+ text-shadow: none;
}
footer {
- border: var(--border-width) solid var(--border);
- padding: var(--space-md);
- text-align: center;
- background: var(--surface);
- font-size: 0.875rem;
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 4px 4px 0 rgba(0, 0, 0, 0.14),
- 5px 5px 0 rgba(0, 0, 0, 0.06);
+ border: var(--border-width) solid var(--border);
+ padding: var(--space-md);
+ text-align: center;
+ background: var(--surface);
+ font-size: 0.875rem;
+ box-shadow:
+ inset 1px 1px 0 var(--border-light),
+ inset -1px -1px 0 var(--border-dark),
+ 4px 4px 0 rgba(0, 0, 0, 0.14),
+ 5px 5px 0 rgba(0, 0, 0, 0.06);
}
footer > :last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
/* components */
@@ -663,615 +641,608 @@ footer > :last-child {
input,
textarea,
select {
- font-family: var(--font-mono);
- padding: var(--space-xs) var(--space-sm);
- border: 2px inset var(--border-light);
- background: var(--surface-alt);
- color: var(--fg);
- font-size: 0.875rem;
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight);
- transition: border-color 0.15s, box-shadow 0.15s;
- width: 100%;
- max-width: 100%;
+ font-family: var(--font-mono);
+ padding: var(--space-xs) var(--space-sm);
+ border: 2px inset var(--border-light);
+ background: var(--surface-alt);
+ color: var(--fg);
+ font-size: 0.875rem;
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight);
+ transition: border-color 0.15s, box-shadow 0.15s;
+ width: 100%;
+ max-width: 100%;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
- color: var(--muted);
- opacity: 0.8;
+ color: var(--muted);
+ opacity: 0.8;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select::placeholder {
- color: #b8b0a0;
- opacity: 1;
+ color: #b8b0a0;
+ opacity: 1;
}
input:focus,
textarea:focus,
select:focus {
- outline: 1px dotted var(--fg);
- outline-offset: 2px;
- border-color: var(--primary);
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight),
- 0 0 0 2px var(--primary);
+ outline: 1px dotted var(--fg);
+ outline-offset: 2px;
+ border-color: var(--primary);
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight), 0 0 0 2px
+ var(--primary);
}
input:invalid,
textarea:invalid {
- border-color: var(--error);
+ border-color: var(--error);
}
input:invalid:focus,
textarea:invalid:focus {
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight),
- 0 0 0 2px var(--error);
+ box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight), 0 0 0 2px
+ var(--error);
}
textarea {
- resize: vertical;
- min-height: 4rem;
- width: 100%;
+ resize: vertical;
+ min-height: 4rem;
+ width: 100%;
}
select {
- cursor: pointer;
- appearance: none;
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1f1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: right 0.5rem center;
- background-size: 1.2em;
- padding-right: 2.5rem;
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1f1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.5rem center;
+ background-size: 1.2em;
+ padding-right: 2.5rem;
}
[data-theme="dark"] select {
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9efea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9efea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
option {
- background: var(--bg);
- color: var(--fg);
- padding: var(--space-sm);
+ background: var(--bg);
+ color: var(--fg);
+ padding: var(--space-sm);
}
option:checked {
- background: linear-gradient(var(--primary), var(--primary));
- color: var(--bg);
+ background: linear-gradient(var(--primary), var(--primary));
+ color: var(--bg);
}
input[type="checkbox"],
input[type="radio"] {
- appearance: none;
- width: 1.3rem;
- height: 1.3rem;
- min-width: 1.3rem;
- min-height: 1.3rem;
- padding: 0;
- cursor: pointer;
- margin: 0 0.5rem 0 0;
- vertical-align: middle;
- border: 2px inset var(--border-light);
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight);
- background: var(--surface-alt);
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- font-weight: normal;
+ appearance: none;
+ width: 1.3rem;
+ height: 1.3rem;
+ min-width: 1.3rem;
+ min-height: 1.3rem;
+ padding: 0;
+ cursor: pointer;
+ margin: 0 0.5rem 0 0;
+ vertical-align: middle;
+ border: 2px inset var(--border-light);
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight);
+ background: var(--surface-alt);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ font-weight: normal;
}
input[type="radio"] {
- border-radius: 50%;
+ border-radius: 50%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
- background: var(--primary);
- border-style: inset;
+ background: var(--primary);
+ border-style: inset;
}
label {
- display: block;
- margin-bottom: var(--space-xs);
- font-weight: bold;
- color: var(--fg);
+ display: block;
+ margin-bottom: var(--space-xs);
+ font-weight: bold;
+ color: var(--fg);
}
input[type="checkbox"] + label,
input[type="radio"] + label {
- display: inline;
- margin: 0;
- font-weight: normal;
+ display: inline;
+ margin: 0;
+ font-weight: normal;
}
/* toggle switches */
input[type="checkbox"].toggle {
- appearance: none;
- width: 2.8rem;
- height: 1.6rem;
- padding: 0;
- margin: 0 0.5rem 0 0;
- border: 2px outset var(--border-light);
- background: var(--muted);
- cursor: pointer;
- position: relative;
- vertical-align: middle;
- box-shadow:
- inset 1px 1px 0 rgba(255, 255, 255, 0.3),
- inset -1px -1px 0 rgba(0, 0, 0, 0.6);
- transition: background 0.2s;
+ appearance: none;
+ width: 2.8rem;
+ height: 1.6rem;
+ padding: 0;
+ margin: 0 0.5rem 0 0;
+ border: 2px outset var(--border-light);
+ background: var(--muted);
+ cursor: pointer;
+ position: relative;
+ vertical-align: middle;
+ box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.6);
+ transition: background 0.2s;
}
input[type="checkbox"].toggle:checked {
- background: var(--primary);
+ background: var(--primary);
}
input[type="checkbox"].toggle::after {
- content: "";
- position: absolute;
- width: 0.6rem;
- height: 0.6rem;
- background: var(--surface);
- border: 2px outset var(--border-light);
- top: 50%;
- transform: translateY(-50%);
- left: 0.2rem;
- transition: left 0.2s;
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight);
+ content: "";
+ position: absolute;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: var(--surface);
+ border: 2px outset var(--border-light);
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0.2rem;
+ transition: left 0.2s;
+ box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight);
}
input[type="checkbox"].toggle:checked::after {
- left: 1.5rem;
+ left: 1.5rem;
}
[data-theme="dark"] input[type="checkbox"].toggle {
- background: var(--secondary);
+ background: var(--secondary);
}
[data-theme="dark"] input[type="checkbox"].toggle:checked {
- background: var(--primary);
+ background: var(--primary);
}
[data-theme="dark"] input[type="checkbox"].toggle::after {
- background: var(--accent-brown-light);
+ background: var(--accent-brown-light);
}
#theme-toggle::before {
- content: "☾";
- position: absolute;
- right: 0.4rem;
- top: 50%;
- transform: translateY(-50%);
- font-size: 0.9rem;
- line-height: 1;
- color: var(--titlebar-fg);
- transition: opacity 0.2s;
+ content: "☾";
+ position: absolute;
+ right: 0.4rem;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 0.9rem;
+ line-height: 1;
+ color: var(--titlebar-fg);
+ transition: opacity 0.2s;
}
#theme-toggle:checked::before {
- content: "☀";
- right: auto;
- left: 0.4rem;
+ content: "☀";
+ right: auto;
+ left: 0.4rem;
}
/* range sliders */
input[type="range"] {
- width: 100%;
- height: 2.2rem;
- background: transparent;
- cursor: pointer;
- appearance: none;
- vertical-align: middle;
+ width: 100%;
+ height: 2.2rem;
+ background: transparent;
+ cursor: pointer;
+ appearance: none;
+ vertical-align: middle;
}
input[type="range"]::-webkit-slider-thumb {
- appearance: none;
- width: 1.5rem;
- height: 1rem;
- margin-top: -0.25rem;
- background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%);
- border: 2px outset var(--border-light);
- cursor: pointer;
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight),
- 2px 2px 0 rgba(0, 0, 0, 0.3),
- 3px 3px 0 rgba(0, 0, 0, 0.1);
+ appearance: none;
+ width: 1.5rem;
+ height: 1rem;
+ margin-top: -0.25rem;
+ background: linear-gradient(
+ 135deg,
+ var(--primary-light) 0%,
+ var(--primary) 50%,
+ var(--primary-dark) 100%
+ );
+ border: 2px outset var(--border-light);
+ cursor: pointer;
+ box-shadow:
+ inset 1px 1px 0 var(--highlight),
+ inset -1px -1px 0 var(--lowlight),
+ 2px 2px 0 rgba(0, 0, 0, 0.3),
+ 3px 3px 0 rgba(0, 0, 0, 0.1);
}
input[type="range"]::-webkit-slider-thumb:active {
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight),
- 1px 1px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight), 1px 1px 0
+ rgba(0, 0, 0, 0.2);
}
input[type="range"]::-moz-range-thumb {
- width: 1.5rem;
- height: 0.8rem;
- margin-top: -0.15rem;
- background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%);
- border: 2px outset var(--border-light);
- cursor: pointer;
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight),
- 2px 2px 0 rgba(0, 0, 0, 0.3),
- 3px 3px 0 rgba(0, 0, 0, 0.1);
- border-radius: 0.3rem;
+ width: 1.5rem;
+ height: 0.8rem;
+ margin-top: -0.15rem;
+ background: linear-gradient(
+ 135deg,
+ var(--primary-light) 0%,
+ var(--primary) 50%,
+ var(--primary-dark) 100%
+ );
+ border: 2px outset var(--border-light);
+ cursor: pointer;
+ box-shadow:
+ inset 1px 1px 0 var(--highlight),
+ inset -1px -1px 0 var(--lowlight),
+ 2px 2px 0 rgba(0, 0, 0, 0.3),
+ 3px 3px 0 rgba(0, 0, 0, 0.1);
+ border-radius: 0.3rem;
}
input[type="range"]::-moz-range-thumb:active {
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight),
- 1px 1px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight), 1px 1px 0
+ rgba(0, 0, 0, 0.2);
}
input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(180deg,
- #c0c0c0 0%,
- #e8e8e8 1px,
- #dfdfdf 2px,
- #d0d0d0 100%);
- border: 2px inset var(--border-light);
- height: 0.8rem;
- box-shadow:
- inset 2px 2px 0 rgba(255, 255, 255, 0.8),
- inset -2px -2px 0 rgba(0, 0, 0, 0.4),
- inset 1px 1px 0 rgba(0, 0, 0, 0.1);
+ background: linear-gradient(180deg, #c0c0c0 0%, #e8e8e8 1px, #dfdfdf 2px, #d0d0d0 100%);
+ border: 2px inset var(--border-light);
+ height: 0.8rem;
+ box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.8), inset -2px -2px 0 rgba(0, 0, 0, 0.4),
+ inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
input[type="range"]::-moz-range-track {
- background: transparent;
- border: none;
+ background: transparent;
+ border: none;
}
input[type="range"]::-moz-range-progress {
- background: linear-gradient(180deg,
- var(--secondary-light) 0%,
- var(--secondary) 50%,
- var(--secondary-dark) 100%);
- height: 0.8rem;
- border: 2px inset var(--border-light);
- box-shadow:
- inset 2px 2px 0 rgba(255, 255, 255, 0.6),
- inset -2px -2px 0 rgba(0, 0, 0, 0.3);
+ background: linear-gradient(
+ 180deg,
+ var(--secondary-light) 0%,
+ var(--secondary) 50%,
+ var(--secondary-dark) 100%
+ );
+ height: 0.8rem;
+ border: 2px inset var(--border-light);
+ box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
fieldset {
- border: 2px solid var(--border-light);
- padding: var(--space-md);
- margin: var(--space-md) 0;
- background: var(--surface);
- box-shadow:
- inset 1px 1px 0 rgba(255, 255, 255, 0.3),
- inset -1px -1px 0 rgba(0, 0, 0, 0.6);
+ border: 2px solid var(--border-light);
+ padding: var(--space-md);
+ margin: var(--space-md) 0;
+ background: var(--surface);
+ box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.6);
}
fieldset > :last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
legend {
- padding: 0 var(--space-xs);
- margin-left: calc(var(--space-xs) * -1);
- font-weight: bold;
- color: var(--fg);
- background: var(--surface);
+ padding: 0 var(--space-xs);
+ margin-left: calc(var(--space-xs) * -1);
+ font-weight: bold;
+ color: var(--fg);
+ background: var(--surface);
}
/* buttons */
button {
- font-family: var(--font-mono);
- font-weight: 700;
- padding: var(--space-xs) var(--space-sm);
- border: 2px outset var(--border-light);
- background: var(--surface);
- color: var(--fg);
- font-size: 0.875rem;
- box-shadow:
- inset 1px 1px 0 var(--highlight),
- inset -1px -1px 0 var(--lowlight),
- 2px 2px 0 rgba(0, 0, 0, 0.18);
- transition:
- transform 0.05s,
- box-shadow 0.05s,
- background 0.1s;
- cursor: pointer;
+ font-family: var(--font-mono);
+ font-weight: 700;
+ padding: var(--space-xs) var(--space-sm);
+ border: 2px outset var(--border-light);
+ background: var(--surface);
+ color: var(--fg);
+ font-size: 0.875rem;
+ box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight), 2px 2px 0
+ rgba(0, 0, 0, 0.18);
+ transition: transform 0.05s, box-shadow 0.05s, background 0.1s;
+ cursor: pointer;
}
button:hover {
- background: var(--surface-alt);
+ background: var(--surface-alt);
}
button:active {
- transform: translate(1px, 1px);
- border-style: inset;
- box-shadow:
- inset 1px 1px 0 var(--lowlight),
- inset -1px -1px 0 var(--highlight);
+ transform: translate(1px, 1px);
+ border-style: inset;
+ box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight);
}
/* button variants */
button.primary {
- background: var(--primary);
- color: var(--surface-alt);
+ background: var(--primary);
+ color: var(--surface-alt);
}
button.primary:hover {
- background: var(--primary-light);
+ background: var(--primary-light);
}
button.primary:active {
- background: var(--primary-dark);
+ background: var(--primary-dark);
}
button.secondary {
- background: var(--secondary);
- color: var(--fg);
+ background: var(--secondary);
+ color: var(--fg);
}
button.secondary:hover {
- background: var(--secondary-light);
+ background: var(--secondary-light);
}
button.secondary:active {
- background: var(--secondary-dark);
+ background: var(--secondary-dark);
}
button.success,
button.error,
button.warning,
button.info {
- color: var(--surface-alt);
+ color: var(--surface-alt);
}
button.success {
- background: var(--success);
+ background: var(--success);
}
button.error {
- background: var(--error);
+ background: var(--error);
}
button.warning {
- background: var(--warning);
+ background: var(--warning);
}
button.info {
- background: var(--info);
+ background: var(--info);
}
button.success:hover,
button.error:hover,
button.warning:hover,
button.info:hover {
- filter: brightness(1.06);
+ filter: brightness(1.06);
}
button.contrast {
- background: var(--fg);
- color: var(--surface-alt);
+ background: var(--fg);
+ color: var(--surface-alt);
}
button.contrast:hover {
- background: var(--muted);
+ background: var(--muted);
}
button:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- transform: none !important;
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none !important;
}
/* button groups */
.button-group {
- display: inline-flex;
- border: var(--border-width) solid var(--border);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 3px 3px 0 rgba(0, 0, 0, 0.12);
+ display: inline-flex;
+ border: var(--border-width) solid var(--border);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 3px 3px 0
+ rgba(0, 0, 0, 0.12);
}
.button-group button {
- border: none;
- margin: 0;
- border-radius: 0;
- box-shadow: none;
+ border: none;
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
}
.button-group button:not(:last-child) {
- border-right: 1px solid var(--border-dark);
+ border-right: 1px solid var(--border-dark);
}
.button-group button:hover {
- box-shadow: none;
- transform: none;
+ box-shadow: none;
+ transform: none;
}
.button-group button:active {
- box-shadow: none;
- transform: none;
+ box-shadow: none;
+ transform: none;
}
/* alerts & messages */
.alert {
- padding: var(--space-md);
- margin: var(--space-md) 0;
- border: var(--border-width) solid var(--border);
- border-left: 4px solid var(--info);
- background: var(--surface);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark),
- 3px 3px 0 rgba(0, 0, 0, 0.12);
+ padding: var(--space-md);
+ margin: var(--space-md) 0;
+ border: var(--border-width) solid var(--border);
+ border-left: 4px solid var(--info);
+ background: var(--surface);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 3px 3px 0
+ rgba(0, 0, 0, 0.12);
}
.alert.success {
- border-left-color: var(--success);
- background-color: color-mix(in srgb, var(--success) 10%, transparent);
+ border-left-color: var(--success);
+ background-color: color-mix(in srgb, var(--success) 10%, transparent);
}
.alert.error {
- border-left-color: var(--error);
- background-color: color-mix(in srgb, var(--error) 10%, transparent);
+ border-left-color: var(--error);
+ background-color: color-mix(in srgb, var(--error) 10%, transparent);
}
.alert.warning {
- border-left-color: var(--warning);
- background-color: color-mix(in srgb, var(--warning) 10%, transparent);
+ border-left-color: var(--warning);
+ background-color: color-mix(in srgb, var(--warning) 10%, transparent);
}
.alert.info {
- border-left-color: var(--info);
- background-color: color-mix(in srgb, var(--info) 10%, transparent);
+ border-left-color: var(--info);
+ background-color: color-mix(in srgb, var(--info) 10%, transparent);
}
/* badges & pills */
.badge {
- display: inline-block;
- padding: 0.25rem 0.5rem;
- margin: 0 0.25rem;
- background: var(--surface-alt);
- color: var(--fg);
- font-size: 0.75rem;
- font-weight: 700;
- border: 1px solid var(--border-dark);
- box-shadow:
- inset 1px 1px 0 var(--border-light),
- inset -1px -1px 0 var(--border-dark);
+ display: inline-block;
+ padding: 0.25rem 0.5rem;
+ margin: 0 0.25rem;
+ background: var(--surface-alt);
+ color: var(--fg);
+ font-size: 0.75rem;
+ font-weight: 700;
+ border: 1px solid var(--border-dark);
+ box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark);
}
.badge.primary {
- background: var(--primary);
- color: var(--surface-alt);
+ background: var(--primary);
+ color: var(--surface-alt);
}
.badge.success {
- background: var(--success);
- color: var(--surface-alt);
+ background: var(--success);
+ color: var(--surface-alt);
}
.badge.error {
- background: var(--error);
- color: var(--surface-alt);
+ background: var(--error);
+ color: var(--surface-alt);
}
.badge.warning {
- background: var(--warning);
- color: var(--surface-alt);
+ background: var(--warning);
+ color: var(--surface-alt);
}
.badge.info {
- background: var(--info);
- color: var(--surface-alt);
+ background: var(--info);
+ color: var(--surface-alt);
}
.badge.contrast {
- background: var(--fg);
- color: var(--surface-alt);
+ background: var(--fg);
+ color: var(--surface-alt);
}
/* helpers */
.text-success {
- color: var(--success);
- font-weight: bold;
+ color: var(--success);
+ font-weight: bold;
}
.text-error {
- color: var(--error);
- font-weight: bold;
+ color: var(--error);
+ font-weight: bold;
}
.text-warning {
- color: var(--warning);
- font-weight: bold;
+ color: var(--warning);
+ font-weight: bold;
}
.text-info {
- color: var(--info);
- font-weight: bold;
+ color: var(--info);
+ font-weight: bold;
}
.text-muted {
- color: var(--muted);
+ color: var(--muted);
}
.text-contrast {
- color: var(--fg);
- font-weight: bold;
+ color: var(--fg);
+ font-weight: bold;
}
.text-center {
- text-align: center;
+ text-align: center;
}
.text-right {
- text-align: right;
+ text-align: right;
}
.text-left {
- text-align: left;
+ text-align: left;
}
-.mt-xs { margin-top: var(--space-xs); }
-.mt-sm { margin-top: var(--space-sm); }
-.mt-md { margin-top: var(--space-md); }
-.mt-lg { margin-top: var(--space-lg); }
-.mt-xl { margin-top: var(--space-xl); }
+.mt-xs {
+ margin-top: var(--space-xs);
+}
+.mt-sm {
+ margin-top: var(--space-sm);
+}
+.mt-md {
+ margin-top: var(--space-md);
+}
+.mt-lg {
+ margin-top: var(--space-lg);
+}
+.mt-xl {
+ margin-top: var(--space-xl);
+}
-.mb-xs { margin-bottom: var(--space-xs); }
-.mb-sm { margin-bottom: var(--space-sm); }
-.mb-md { margin-bottom: var(--space-md); }
-.mb-lg { margin-bottom: var(--space-lg); }
-.mb-xl { margin-bottom: var(--space-xl); }
+.mb-xs {
+ margin-bottom: var(--space-xs);
+}
+.mb-sm {
+ margin-bottom: var(--space-sm);
+}
+.mb-md {
+ margin-bottom: var(--space-md);
+}
+.mb-lg {
+ margin-bottom: var(--space-lg);
+}
+.mb-xl {
+ margin-bottom: var(--space-xl);
+}
.mx-auto {
- margin-left: auto;
- margin-right: auto;
+ margin-left: auto;
+ margin-right: auto;
}
.py-md {
- padding-top: var(--space-md);
- padding-bottom: var(--space-md);
+ padding-top: var(--space-md);
+ padding-bottom: var(--space-md);
}
#theme-toggle {
- margin-left: auto;
- margin-bottom: 0;
+ margin-left: auto;
+ margin-bottom: 0;
}
/* fairy dust */
@keyframes fairy-float {
- 0% {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
- 100% {
- opacity: 0;
- transform: translateY(40px) scale(0.5);
- }
+ 0% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(40px) scale(0.5);
+ }
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-05 11:52:55 +0000