Fretux/Discord_bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS

Browse Source
This commit is contained in:
fretuks
2026-02-03 11:13:27 +01:00
parent c6204e1941
commit e90b8b4d85
1 changed files with 139 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+139 -68
View File
@@ -1,17 +1,19 @@
:root { :root {
color-scheme: light; color-scheme: light;
--bg: #0f1218; --bg: #0b1113;
--panel: #171b26; --bg-accent: #122025;
--card: #1e2332; --panel: #101820;
--border: #2d3447; --card: #151f27;
--text: #f7f7f9; --border: #24313b;
--muted: #b3b8c7; --text: #f4f7fb;
--primary: #5865f2; --muted: #9fb0bc;
--primary-dark: #4752c4; --primary: #2cb9c6;
--success: #3ba55d; --primary-dark: #2197a2;
--danger: #ed4245; --success: #33d17a;
--warning: #f6c343; --danger: #ff6b6b;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --warning: #f4b860;
--glow: rgba(44, 185, 198, 0.25);
font-family: 'Space Grotesk', 'Satoshi', 'Segoe UI', sans-serif;
} }
* { * {
@@ -25,14 +27,17 @@
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: var(--bg); background: radial-gradient(1200px 800px at 15% 10%, rgba(44, 185, 198, 0.12), transparent 60%),
radial-gradient(900px 700px at 85% 0%, rgba(244, 184, 96, 0.12), transparent 55%),
linear-gradient(180deg, #0b1113 0%, #0e1418 55%, #0b1113 100%);
color: var(--text); color: var(--text);
} }
.app { .app {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 40px 24px 80px; padding: 48px 24px 96px;
position: relative;
} }
.topbar { .topbar {
@@ -40,11 +45,13 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
padding: 24px; padding: 28px;
background: var(--panel); background: linear-gradient(135deg, rgba(44, 185, 198, 0.08), rgba(16, 24, 32, 0.9));
border-radius: 20px; border-radius: 22px;
border: 1px solid var(--border); border: 1px solid rgba(44, 185, 198, 0.35);
margin-bottom: 24px; margin-bottom: 28px;
box-shadow: 0 20px 40px rgba(5, 8, 10, 0.45);
animation: rise 0.45s ease;
} }
.badge { .badge {
@@ -54,9 +61,9 @@ body {
padding: 6px 12px; padding: 6px 12px;
border-radius: 999px; border-radius: 999px;
font-size: 0.85rem; font-size: 0.85rem;
background: rgba(88, 101, 242, 0.16); background: rgba(44, 185, 198, 0.15);
border: 1px solid rgba(88, 101, 242, 0.4); border: 1px solid rgba(44, 185, 198, 0.4);
color: #cdd3ff; color: #d7fbff;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -64,10 +71,10 @@ body {
.banner { .banner {
padding: 14px 18px; padding: 14px 18px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(88, 101, 242, 0.35); border: 1px solid rgba(244, 184, 96, 0.35);
background: rgba(88, 101, 242, 0.12); background: rgba(244, 184, 96, 0.12);
margin-bottom: 20px; margin-bottom: 20px;
color: #dee1ff; color: #ffe3b0;
display: none; display: none;
} }
@@ -94,6 +101,8 @@ textarea {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 24px 24px 60px; padding: 24px 24px 60px;
position: relative;
animation: rise 0.45s ease;
} }
.navbar { .navbar {
@@ -101,11 +110,12 @@ textarea {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 16px 20px; padding: 16px 22px;
background: var(--panel); background: rgba(16, 24, 32, 0.9);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
margin-bottom: 20px; margin-bottom: 22px;
box-shadow: 0 14px 30px rgba(5, 8, 10, 0.4);
} }
.navbar__brand { .navbar__brand {
@@ -118,10 +128,12 @@ textarea {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 14px; border-radius: 14px;
background: var(--primary); background: linear-gradient(135deg, var(--primary), #58d6c7);
display: grid; display: grid;
place-items: center; place-items: center;
font-weight: 700; font-weight: 700;
color: #031417;
text-shadow: none;
} }
.navbar__actions { .navbar__actions {
@@ -137,8 +149,8 @@ textarea {
gap: 16px; gap: 16px;
padding: 14px 18px; padding: 14px 18px;
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(237, 66, 69, 0.4); border: 1px solid rgba(255, 107, 107, 0.45);
background: rgba(237, 66, 69, 0.12); background: rgba(255, 107, 107, 0.12);
margin-bottom: 16px; margin-bottom: 16px;
} }
@@ -157,7 +169,7 @@ textarea {
transform: translateY(-8px); transform: translateY(-8px);
padding: 12px 16px; padding: 12px 16px;
border-radius: 12px; border-radius: 12px;
background: var(--panel); background: rgba(16, 24, 32, 0.92);
border: 1px solid var(--border); border: 1px solid var(--border);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -182,10 +194,12 @@ textarea {
} }
.sidebar { .sidebar {
background: var(--panel); background: rgba(16, 24, 32, 0.9);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 16px; padding: 16px;
box-shadow: inset 0 0 0 1px rgba(44, 185, 198, 0.08);
animation: rise 0.45s ease;
} }
.sidebar__header { .sidebar__header {
@@ -199,7 +213,7 @@ textarea {
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #131826; background: #111a22;
color: var(--text); color: var(--text);
} }
@@ -215,10 +229,11 @@ textarea {
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 10px 12px;
background: var(--card); background: rgba(21, 31, 39, 0.9);
border-radius: 12px; border-radius: 12px;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
} }
.guild-item__info { .guild-item__info {
@@ -245,6 +260,11 @@ textarea {
border-color: var(--primary); border-color: var(--primary);
} }
.guild-item:hover {
border-color: rgba(44, 185, 198, 0.5);
transform: translateY(-1px);
}
.status-pill { .status-pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -291,10 +311,12 @@ textarea {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 16px; padding: 18px;
background: var(--panel); background: rgba(16, 24, 32, 0.9);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: inset 0 0 0 1px rgba(244, 184, 96, 0.06);
animation: rise 0.45s ease;
} }
.guild-header__info { .guild-header__info {
@@ -338,8 +360,8 @@ textarea {
display: inline-flex; display: inline-flex;
gap: 8px; gap: 8px;
padding: 6px; padding: 6px;
background: var(--panel); background: rgba(16, 24, 32, 0.9);
border-radius: 12px; border-radius: 14px;
border: 1px solid var(--border); border: 1px solid var(--border);
width: fit-content; width: fit-content;
} }
@@ -351,18 +373,22 @@ textarea {
background: transparent; background: transparent;
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
} }
.tab.active { .tab.active {
background: var(--primary); background: linear-gradient(135deg, var(--primary), #58d6c7);
color: white; color: #041316;
box-shadow: 0 10px 18px rgba(44, 185, 198, 0.25);
} }
.panel { .panel {
background: var(--panel); background: rgba(16, 24, 32, 0.9);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 16px; padding: 18px;
box-shadow: 0 18px 30px rgba(5, 8, 10, 0.35);
animation: rise 0.45s ease;
} }
.panel__header { .panel__header {
@@ -380,8 +406,8 @@ textarea {
.callout { .callout {
padding: 12px; padding: 12px;
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(246, 195, 67, 0.4); border: 1px solid rgba(244, 184, 96, 0.5);
background: rgba(246, 195, 67, 0.12); background: rgba(244, 184, 96, 0.14);
margin-bottom: 16px; margin-bottom: 16px;
} }
@@ -403,7 +429,7 @@ textarea {
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #131826; background: #111a22;
color: var(--text); color: var(--text);
} }
@@ -425,7 +451,7 @@ textarea {
} }
.multi-picker { .multi-picker {
background: #131826; background: #111a22;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 12px; padding: 12px;
@@ -438,7 +464,7 @@ textarea {
padding: 8px 10px; padding: 8px 10px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #0f1320; background: #0f1820;
color: var(--text); color: var(--text);
} }
@@ -484,25 +510,42 @@ textarea {
padding: 10px 16px; padding: 10px 16px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--card); background: rgba(21, 31, 39, 0.9);
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
} }
.button--primary { .button--primary {
background: var(--primary); background: linear-gradient(135deg, var(--primary), #58d6c7);
border-color: var(--primary); border-color: var(--primary);
color: white; color: #041316;
box-shadow: 0 10px 18px rgba(44, 185, 198, 0.3);
} }
.button--primary:hover { .button--primary:hover {
background: var(--primary-dark); background: linear-gradient(135deg, var(--primary-dark), #3cc0b1);
transform: translateY(-1px);
} }
.button--ghost { .button--ghost {
background: transparent; background: transparent;
} }
.button:hover {
border-color: rgba(44, 185, 198, 0.35);
transform: translateY(-1px);
}
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tab:focus-visible {
outline: 2px solid rgba(44, 185, 198, 0.6);
outline-offset: 2px;
}
.button-row { .button-row {
display: flex; display: flex;
gap: 12px; gap: 12px;
@@ -516,10 +559,16 @@ textarea {
} }
.command-card { .command-card {
background: var(--card); background: rgba(21, 31, 39, 0.95);
border-radius: 14px; border-radius: 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 14px; padding: 14px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.command-card:hover {
border-color: rgba(44, 185, 198, 0.4);
transform: translateY(-1px);
} }
.command-card__header { .command-card__header {
@@ -545,7 +594,7 @@ textarea {
padding: 10px; padding: 10px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #131826; background: #111a22;
} }
.member-item { .member-item {
@@ -619,7 +668,7 @@ textarea {
} }
.warning-item { .warning-item {
background: var(--card); background: rgba(21, 31, 39, 0.9);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 10px; padding: 10px;
@@ -642,7 +691,7 @@ textarea {
} }
.warnings-pane { .warnings-pane {
background: var(--card); background: rgba(21, 31, 39, 0.9);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 14px; padding: 14px;
@@ -657,14 +706,15 @@ textarea {
.save-bar { .save-bar {
position: sticky; position: sticky;
bottom: 16px; bottom: 16px;
background: var(--panel); background: rgba(16, 24, 32, 0.95);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 12px 16px; padding: 12px 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
box-shadow: 0 16px 30px rgba(5, 8, 10, 0.4);
} }
.save-indicator { .save-indicator {
@@ -686,7 +736,7 @@ textarea {
padding: 20px; padding: 20px;
border-radius: 12px; border-radius: 12px;
border: 1px dashed var(--border); border: 1px dashed var(--border);
background: #151a27; background: #111a22;
color: var(--muted); color: var(--muted);
} }
@@ -714,7 +764,7 @@ textarea {
.skeleton-line { .skeleton-line {
height: 14px; height: 14px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, #1a1f2d 25%, #232a3b 37%, #1a1f2d 63%); background: linear-gradient(90deg, #16222a 25%, #1d2b34 37%, #16222a 63%);
background-size: 400% 100%; background-size: 400% 100%;
animation: shimmer 1.4s ease infinite; animation: shimmer 1.4s ease infinite;
} }
@@ -749,6 +799,7 @@ textarea {
display: grid; display: grid;
place-items: center; place-items: center;
z-index: 40; z-index: 40;
backdrop-filter: blur(6px);
} }
.modal[hidden] { .modal[hidden] {
@@ -756,21 +807,22 @@ textarea {
} }
.modal__content { .modal__content {
background: var(--panel); background: rgba(16, 24, 32, 0.98);
border-radius: 16px; border-radius: 18px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 20px; padding: 20px;
width: min(420px, 90vw); width: min(420px, 90vw);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
box-shadow: 0 24px 40px rgba(5, 8, 10, 0.6);
} }
.modal__content select { .modal__content select {
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #131826; background: #111a22;
color: var(--text); color: var(--text);
} }
@@ -781,6 +833,25 @@ textarea {
pointer-events: none; pointer-events: none;
} }
h1,
h2,
h3,
strong {
font-family: 'Fraunces', 'Space Grotesk', 'Segoe UI', sans-serif;
letter-spacing: 0.01em;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1080px) { @media (max-width: 1080px) {
.layout { .layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;