mirror of
https://github.com/Corfirean/coa-server-manager.git
synced 2026-11-11 03:51:01 +00:00
106 lines
2.0 KiB
CSS
106 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-bg: #0e0f11;
|
|
--color-card: #15171a;
|
|
--color-card-2: #181a1e;
|
|
--color-line: rgb(255 255 255 / 0.07);
|
|
--color-ink: #e8e6e1;
|
|
--color-muted: #9a9ca3;
|
|
--color-gold: #c9a24a;
|
|
--color-gold-strong: #dcb45a;
|
|
--color-ok: #4fb383;
|
|
--color-warn: #d9a441;
|
|
--color-bad: #d9605a;
|
|
--radius-card: 10px;
|
|
--font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
/* Everything is sized in rem, so scaling the root font grows the whole interface with the window
|
|
(16px up to about 1280px wide, then gradually larger; capped at 26px). */
|
|
html {
|
|
font-size: clamp(16px, calc(0.75vw + 6.4px), 26px);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-bg);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Dark, slim scroll bars that match the interface (the default light ones stand out too much). */
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(255 255 255 / 0.16) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgb(255 255 255 / 0.14);
|
|
border-radius: 999px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(201 162 74 / 0.55);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background: rgb(201 162 74 / 0.8);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
::selection {
|
|
background: rgb(201 162 74 / 0.35);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-gold);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
pre,
|
|
.selectable {
|
|
user-select: text;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
50% {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|