mirror of
https://seed.radicle.dev/rad:z371PVmDHdjJucejRoRYJcDEvD5pp.git
synced 2026-10-31 00:40:55 +08:00
92 lines
2.3 KiB
CSS
92 lines
2.3 KiB
CSS
:root {
|
|
--color-pink: #ff55ff;
|
|
--color-yellow: #ffff99;
|
|
--color-secondary: #6666ff;
|
|
--color-fg-highlight: var(--color-yellow);
|
|
--color-fg-highlight-tertiary: #1f3f8a;
|
|
--color-fg-highlight-secondary: #229944;
|
|
--color-bg-highlight: #efefff;
|
|
--color-bg-default: #f5f5ff;
|
|
--color-fg-contrast: #232563;
|
|
--color-fg-low-contrast: #434583; /* TODO: tweak this */
|
|
--color-fg-dim: #5a5aa1;
|
|
--color-fg-emphasized: #7070FF;
|
|
--color-fg-match-background: #f5f5ff;
|
|
--color-fill-secondary: #7070FF;
|
|
--color-fill-separator: #dbdbff;
|
|
--color-fill-ghost: #EBEBFF;
|
|
--color-border-hint: #DBDBFF;
|
|
--color-border-focus: #8585FF;
|
|
--color-border-default: var(--color-fg-dim);
|
|
--color-selection: var(--color-fg-contrast);
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--color-pink: #f999f9;
|
|
--color-yellow: #ffff99;
|
|
--color-secondary: #9999ff;
|
|
--color-fg-highlight: var(--color-yellow);
|
|
--color-fg-highlight-tertiary: #bbeeff;
|
|
--color-fg-highlight-secondary: #77dd77;
|
|
--color-bg-highlight: #14151a;
|
|
--color-bg-default: #0a0d10;
|
|
--color-fg-contrast: #f9f9fb;
|
|
--color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
|
|
--color-fg-dim: #9b9bb1;
|
|
--color-fg-emphasized: #7070FF;
|
|
--color-fg-match-background: #0a0d10;
|
|
--color-fill-secondary: #7070FF;
|
|
--color-fill-separator: #24252d;
|
|
--color-fill-ghost: #24252D;
|
|
--color-border-hint: #24252D;
|
|
--color-border-focus: #8585FF;
|
|
--color-selection: var(--color-bg-default);
|
|
}
|
|
|
|
::selection {
|
|
color: var(--color-selection);
|
|
background-color: var(--color-yellow);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family-default), sans-serif;
|
|
color: var(--color-fg-contrast);
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
margin: 0;
|
|
background-color: var(--color-bg-default);
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
}
|
|
|
|
#toggle-theme {
|
|
border: none;
|
|
color: var(--color-fg-contrast);
|
|
padding: 0;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
background-size: contain;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
:root[data-theme=light] #toggle-theme {
|
|
background-image: url(/assets/images/sun.svg);
|
|
}
|
|
:root[data-theme=dark] #toggle-theme {
|
|
background-image: url(/assets/images/moon.svg);
|
|
}
|