Files
Website/src/styles/app.css
T
Chaoscaot 4c434f8511
SteamWar CI / Build (push) Successful in 1m47s
SteamWar CI / Deploy (push) Successful in 9s
Enhance theme variables in app.css for improved styling consistency
2026-05-18 23:36:25 +02:00

172 lines
4.2 KiB
CSS

/*
* This file is a part of the SteamWar software.
*
* Copyright (C) 2025 SteamWar.de-Serverteam
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import "tailwindcss";
@theme {
--font-sans: var(--font-roboto), ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-barlow-condensed), sans-serif;
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-ring: hsl(var(--ring));
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
}
@layer base {
:root {
--background: 0 0% 3.1%;
--foreground: 0 0% 96%;
--muted: 0 0% 10%;
--muted-foreground: 0 0% 55%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 96%;
--card: 0 0% 5%;
--card-foreground: 0 0% 96%;
--border: 0 0% 12%;
--input: 0 0% 12%;
--primary: 38 92% 50%;
--primary-foreground: 0 0% 4%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 96%;
--accent: 38 92% 50%;
--accent-foreground: 0 0% 4%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--ring: 38 92% 50%;
--radius: 0;
--sw-bg: #080808;
--sw-bg-raised: #0c0c0c;
--sw-bg-surface: #111111;
--sw-amber: #f59e0b;
--sw-amber-light: #fbbf24;
--sw-amber-dim: rgba(245, 158, 11, 0.15);
--sw-text: #f5f5f5;
--sw-text-muted: #a3a3a3;
--sw-border: rgba(255, 255, 255, 0.06);
}
.dark {
--background: 0 0% 3.1%;
--foreground: 0 0% 96%;
--muted: 0 0% 10%;
--muted-foreground: 0 0% 55%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 96%;
--card: 0 0% 5%;
--card-foreground: 0 0% 96%;
--border: 0 0% 12%;
--input: 0 0% 12%;
--primary: 38 92% 50%;
--primary-foreground: 0 0% 4%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 96%;
--accent: 38 92% 50%;
--accent-foreground: 0 0% 4%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--ring: 38 92% 50%;
}
}
@layer base {
* {
border-color: hsl(var(--border));
}
body {
background-color: var(--sw-bg);
color: var(--sw-text);
}
::selection {
background: rgba(245, 158, 11, 0.3);
color: #fff;
}
article {
> * {
all: revert;
}
code {
color: var(--sw-amber-light);
background: rgba(245, 158, 11, 0.08);
padding: 0.15em 0.4em;
}
pre.astro-code {
width: fit-content;
padding: 1rem;
margin: 1rem 0;
border: 1px solid var(--sw-border);
background: var(--sw-bg) !important;
}
a {
color: var(--sw-amber);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
a:hover {
border-bottom-color: var(--sw-amber);
}
}
}