/* ========================================================================== Savage [sV] Clanverwaltung — dark dashboard theme (design/ screenshots) Locked 16px-radius cards on deep navy, indigo glow accents, Inter type. Loaded after bootstrap.min.css; relies on . ========================================================================== */ @font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root, [data-bs-theme=dark] { /* Design tokens */ --sv-bg: #05060c; --sv-surface-0: #0a0c14; /* sidebar / shell panels */ --sv-surface-1: #0e111b; /* cards */ --sv-surface-2: #131725; /* inputs, nested surfaces */ --sv-surface-hover: #161b2b; --sv-border: rgba(140, 156, 222, 0.10); --sv-border-strong: rgba(140, 156, 222, 0.20); --sv-text: #e9ecf7; --sv-text-muted: #8f97ad; --sv-accent: #5b74f8; --sv-accent-soft: rgba(91, 116, 248, 0.14); --sv-accent-gradient: linear-gradient(135deg, #3d55ee 0%, #7290ff 100%); --sv-accent-glow: 0 8px 24px rgba(72, 98, 245, 0.35); --sv-teal: #2fd4b2; --sv-red: #ff5d74; --sv-amber: #f5b95a; --sv-radius: 1rem; --sv-radius-sm: 0.6rem; /* Bootstrap dark-theme remap */ --bs-body-bg: #05060c; --bs-body-color: #e9ecf7; --bs-secondary-color: #8f97ad; --bs-tertiary-color: #6b7288; --bs-emphasis-color: #ffffff; --bs-border-color: rgba(140, 156, 222, 0.10); --bs-border-color-translucent: rgba(140, 156, 222, 0.10); --bs-secondary-bg: #131725; --bs-tertiary-bg: #0e111b; --bs-link-color: #7f95ff; --bs-link-hover-color: #a3b3ff; --bs-border-radius: 0.6rem; --bs-heading-color: #f2f4fb; } /* ------------------------------------------------------------------ base */ html { background-color: var(--sv-bg); color-scheme: dark; scrollbar-color: #2a3049 transparent; } html, body { font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; font-optical-sizing: auto; } body { background-color: transparent; letter-spacing: 0.005em; } /* Fixed indigo glows behind everything */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1100px 700px at 85% -10%, rgba(64, 86, 244, 0.18), transparent 60%), radial-gradient(900px 620px at -12% 18%, rgba(64, 86, 244, 0.11), transparent 55%), radial-gradient(760px 520px at 55% 115%, rgba(99, 72, 245, 0.10), transparent 60%); } /* Faint blueprint grid, fading out towards the bottom */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(126, 143, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 143, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(1300px 900px at 60% -5%, rgba(0, 0, 0, 0.9), transparent 75%); mask-image: radial-gradient(1300px 900px at 60% -5%, rgba(0, 0, 0, 0.9), transparent 75%); } h1, .h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.01em; } h2, .h2 { font-size: 1.25rem; font-weight: 600; } h1:focus { outline: none; } h2.h4, .h4 { font-size: 1.05rem; font-weight: 600; color: var(--sv-text); margin-top: 0.5rem; } .text-muted { color: var(--sv-text-muted) !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #232941; border-radius: 8px; border: 2px solid var(--sv-bg); } ::-webkit-scrollbar-track { background: transparent; } .content { padding-top: 1.75rem; padding-bottom: 3rem; } /* Page headline block (used on every page's title row) */ .page-sub { color: var(--sv-text-muted); font-size: 0.85rem; } /* ------------------------------------------------------------------ cards */ .card { --bs-card-bg: var(--sv-surface-1); --bs-card-border-color: var(--sv-border); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--sv-text); --bs-card-color: var(--sv-text); border-radius: var(--sv-radius); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 10px 30px rgba(2, 4, 12, 0.45); } .card-header { font-weight: 600; font-size: 0.95rem; padding: 1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--sv-border); } .card-footer { border-top: 1px solid var(--sv-border); color: var(--sv-text-muted); } .card-subtitle { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600; } /* Dashboard stat tiles (Home) — links that lift and glow on hover */ a > .stat-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } a:hover > .stat-card { transform: translateY(-3px); border-color: rgba(114, 144, 255, 0.35); box-shadow: 0 12px 34px rgba(52, 76, 220, 0.25); } .stat-value { font-size: 2.4rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: #f2f4fb; } @media (prefers-reduced-motion: reduce) { a > .stat-card { transition: none; } a:hover > .stat-card { transform: none; } } /* ------------------------------------------------------------------ tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--sv-text); --bs-table-border-color: var(--sv-border); --bs-table-striped-bg: rgba(140, 156, 222, 0.035); --bs-table-striped-color: var(--sv-text); --bs-table-hover-bg: rgba(91, 116, 248, 0.07); --bs-table-hover-color: var(--sv-text); font-size: 0.92rem; } .table thead th { color: var(--sv-text-muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--sv-border-strong); } .table > :not(caption) > * > * { padding: 0.7rem 0.75rem; } .table th[scope="row"] { color: var(--sv-text-muted); font-weight: 500; } /* Tables placed inside cards keep the card's rounded corners */ .card .table-responsive { border-radius: calc(var(--sv-radius) - 1px); overflow: hidden; } /* ------------------------------------------------------------------ buttons */ .btn { --bs-btn-border-radius: var(--sv-radius-sm); font-weight: 550; } .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-bg: #4257e8; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #4f66f2; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #3a4ed6; --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: #2c355e; --bs-btn-disabled-border-color: transparent; background-image: var(--sv-accent-gradient); box-shadow: var(--sv-accent-glow); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-primary:disabled { background-image: none; box-shadow: none; } .btn-secondary { --bs-btn-color: var(--sv-text); --bs-btn-bg: var(--sv-surface-2); --bs-btn-border-color: var(--sv-border-strong); --bs-btn-hover-bg: var(--sv-surface-hover); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--sv-border-strong); --bs-btn-active-bg: var(--sv-surface-hover); } .btn-outline-primary { --bs-btn-color: #8ea2ff; --bs-btn-border-color: rgba(114, 144, 255, 0.45); --bs-btn-hover-bg: rgba(91, 116, 248, 0.15); --bs-btn-hover-color: #b9c6ff; --bs-btn-hover-border-color: rgba(114, 144, 255, 0.65); --bs-btn-active-bg: rgba(91, 116, 248, 0.22); --bs-btn-active-color: #c9d3ff; --bs-btn-active-border-color: rgba(114, 144, 255, 0.65); } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #d63a52; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #e14760; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #c23349; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; box-shadow: 0 8px 24px rgba(214, 58, 82, 0.3); } .btn-outline-danger { --bs-btn-color: #ff8b9c; --bs-btn-border-color: rgba(255, 93, 116, 0.45); --bs-btn-hover-bg: rgba(255, 93, 116, 0.15); --bs-btn-hover-color: #ffb3bd; --bs-btn-hover-border-color: rgba(255, 93, 116, 0.65); --bs-btn-active-bg: rgba(255, 93, 116, 0.22); --bs-btn-active-color: #ffc4cc; --bs-btn-active-border-color: rgba(255, 93, 116, 0.65); } .btn-outline-secondary { --bs-btn-color: #aab1c7; --bs-btn-border-color: var(--sv-border-strong); --bs-btn-hover-bg: var(--sv-surface-hover); --bs-btn-hover-color: #e9ecf7; --bs-btn-hover-border-color: var(--sv-border-strong); --bs-btn-active-bg: var(--sv-surface-hover); --bs-btn-active-color: #e9ecf7; --bs-btn-active-border-color: var(--sv-border-strong); } .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(91, 116, 248, 0.35); } /* ------------------------------------------------------------------ badges */ .badge { font-weight: 550; letter-spacing: 0.01em; padding: 0.36em 0.7em; border-radius: 999px; border: 1px solid transparent; } .badge.bg-primary { background-color: rgba(91, 116, 248, 0.16) !important; border-color: rgba(91, 116, 248, 0.35); color: #9db0ff; } .badge.bg-success { background-color: rgba(47, 212, 178, 0.13) !important; border-color: rgba(47, 212, 178, 0.35); color: #5fe3c8; } .badge.bg-danger { background-color: rgba(255, 93, 116, 0.13) !important; border-color: rgba(255, 93, 116, 0.35); color: #ff8b9c; } .badge.bg-warning { background-color: rgba(245, 185, 90, 0.13) !important; border-color: rgba(245, 185, 90, 0.35); color: #ffce85 !important; } .badge.bg-secondary { background-color: rgba(140, 156, 222, 0.12) !important; border-color: rgba(140, 156, 222, 0.25); color: #aab1c7; } .badge.bg-dark { background-color: rgba(140, 156, 222, 0.08) !important; border-color: rgba(140, 156, 222, 0.2); color: #8f97ad; } /* ------------------------------------------------------------------ forms */ .form-control, .form-select { background-color: var(--sv-surface-2); border-color: var(--sv-border-strong); color: var(--sv-text); border-radius: var(--sv-radius-sm); } .form-control:focus, .form-select:focus { background-color: var(--sv-surface-2); border-color: rgba(114, 144, 255, 0.6); color: var(--sv-text); } .form-control::placeholder { color: #5d647a; } .form-label { color: var(--sv-text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; } .form-check-input { background-color: var(--sv-surface-2); border-color: var(--sv-border-strong); } .form-check-input:checked { background-color: var(--sv-accent); border-color: var(--sv-accent); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--sv-teal); } .invalid { outline: 1px solid var(--sv-red); } .validation-message { color: var(--sv-red); } /* ------------------------------------------------------------------ alerts */ .alert { border-radius: var(--sv-radius-sm); border: 1px solid transparent; } .alert-success { background-color: rgba(47, 212, 178, 0.10); border-color: rgba(47, 212, 178, 0.3); color: #7debd4; } .alert-danger { background-color: rgba(255, 93, 116, 0.10); border-color: rgba(255, 93, 116, 0.3); color: #ff9dab; } .alert-warning { background-color: rgba(245, 185, 90, 0.10); border-color: rgba(245, 185, 90, 0.3); color: #ffd18f; } /* ------------------------------------------------------------------ modals */ .modal { backdrop-filter: blur(6px); } .modal-content { background-color: var(--sv-surface-1); border: 1px solid var(--sv-border-strong); border-radius: calc(var(--sv-radius) + 0.25rem); box-shadow: 0 24px 70px rgba(2, 4, 12, 0.7); } .modal-header, .modal-footer { border-color: var(--sv-border); } .modal-title { font-weight: 600; } /* ------------------------------------------------------------------ list group (Chronik) */ .list-group { --bs-list-group-bg: var(--sv-surface-1); --bs-list-group-color: var(--sv-text); --bs-list-group-border-color: var(--sv-border); border-radius: var(--sv-radius); } .list-group-item { padding: 0.9rem 1.15rem; } /* ------------------------------------------------------------------ login screen */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; } .login-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; width: min(100%, 420px); background-color: var(--sv-surface-0); border: 1px solid var(--sv-border); border-radius: 1.5rem; padding: 3rem 2.5rem 2.75rem; box-shadow: 0 24px 70px rgba(2, 4, 12, 0.6); } .login-mark { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.25rem; background-image: var(--sv-accent-gradient); box-shadow: var(--sv-accent-glow); color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 1rem; } .login-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0; } .login-tag { color: #8ea2ff; } .login-sub { color: var(--sv-text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; } .login-alert { width: 100%; font-size: 0.85rem; } .login-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; } .login-discord-icon { display: inline-block; width: 1.35rem; height: 1.35rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E") no-repeat center / contain; } /* ------------------------------------------------------------------ misc */ hr { border-color: var(--sv-border-strong); opacity: 1; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--sv-radius-sm); } .blazor-error-boundary::after { content: "Es ist ein Fehler aufgetreten."; } .darker-border-checkbox.form-check-input { border-color: var(--sv-border-strong); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }