Simplify web UI theme
This commit is contained in:
+59
-59
@@ -1,25 +1,25 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg-color: #05070d;
|
||||
--panel: #0c111d;
|
||||
--panel-solid: #111827;
|
||||
--panel-alt: #080b13;
|
||||
--text-color: #f4f7fb;
|
||||
--accent: #355fc7;
|
||||
--accent-hover: #426fdd;
|
||||
--accent-soft: #111d3c;
|
||||
--accent-line: #284aa0;
|
||||
--accent-2: #7aa5ff;
|
||||
--bubble-own: #132552;
|
||||
--bubble-other: #141923;
|
||||
--dim: #a4adbd;
|
||||
--line: #232b3a;
|
||||
--bg-color: #000000;
|
||||
--panel: #0b0b0b;
|
||||
--panel-solid: #101010;
|
||||
--panel-alt: #050505;
|
||||
--text-color: #f3f5f8;
|
||||
--accent: #2f57b8;
|
||||
--accent-hover: #3b63c6;
|
||||
--accent-soft: #0d1730;
|
||||
--accent-line: #24428d;
|
||||
--accent-2: #6f95eb;
|
||||
--bubble-own: #0f1c3f;
|
||||
--bubble-other: #111111;
|
||||
--dim: #9ea7b7;
|
||||
--line: #1f1f1f;
|
||||
--danger: #ff7373;
|
||||
--ok: #65e6a4;
|
||||
--warn: #f6c969;
|
||||
--info: #8ec7ff;
|
||||
--radius: 22px;
|
||||
--shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
|
||||
--shadow: none;
|
||||
--font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
|
||||
}
|
||||
@@ -30,9 +30,7 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 16% -10%, rgba(53, 95, 199, 0.26), transparent 34rem),
|
||||
radial-gradient(circle at 95% 18%, rgba(122, 165, 255, 0.1), transparent 28rem), var(--bg-color);
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 15px;
|
||||
@@ -47,8 +45,8 @@ a {
|
||||
|
||||
a:hover,
|
||||
button:hover {
|
||||
border-color: #354158;
|
||||
background: #151d2c;
|
||||
border-color: #2b2b2b;
|
||||
background: #111111;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@@ -67,7 +65,7 @@ button {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), var(--panel-alt);
|
||||
background: var(--panel-alt);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 30px 24px;
|
||||
overflow-y: auto;
|
||||
@@ -132,11 +130,17 @@ input,
|
||||
.content-tab,
|
||||
.viewer-channel-item {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(17, 24, 39, 0.74);
|
||||
background: #101010;
|
||||
color: var(--text-color);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
a.nav-link,
|
||||
a.button,
|
||||
a.content-tab {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.button,
|
||||
.content-tab {
|
||||
@@ -163,14 +167,14 @@ input,
|
||||
.content-tab.active {
|
||||
border-color: var(--accent-line);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--accent), #27498f);
|
||||
box-shadow: 0 14px 32px rgba(53, 95, 199, 0.28);
|
||||
background: var(--accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-link.active:hover,
|
||||
.button.primary:hover,
|
||||
.content-tab.active:hover {
|
||||
background: linear-gradient(135deg, var(--accent-hover), #3159ad);
|
||||
background: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -195,7 +199,7 @@ input,
|
||||
.job-card,
|
||||
.message-card,
|
||||
.settings-dialog {
|
||||
background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(12, 17, 29, 0.96));
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
@@ -210,25 +214,30 @@ input,
|
||||
|
||||
.status-card {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.status-card .button {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.status-card .button:first-of-type {
|
||||
.status-card .section-title,
|
||||
.status-card p,
|
||||
.status-card .status-badge {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
margin-top: 12px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--ok);
|
||||
background: rgba(101, 230, 164, 0.06);
|
||||
background: #0d1410;
|
||||
}
|
||||
|
||||
.content-tabs {
|
||||
@@ -331,7 +340,7 @@ input,
|
||||
text-align: left;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 24, 39, 0.78);
|
||||
background: #101010;
|
||||
color: var(--text-color);
|
||||
padding: 12px 14px;
|
||||
cursor: pointer;
|
||||
@@ -374,7 +383,7 @@ input {
|
||||
|
||||
input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(53, 95, 199, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toggle-row {
|
||||
@@ -451,7 +460,7 @@ td {
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: rgba(53, 95, 199, 0.08);
|
||||
background: #0d0d0d;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
@@ -501,7 +510,7 @@ tbody tr:hover {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
.checkbox-row input {
|
||||
@@ -572,7 +581,7 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.settings-dialog::backdrop {
|
||||
background: rgba(3, 6, 13, 0.78);
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
}
|
||||
|
||||
.dialog-shell {
|
||||
@@ -615,7 +624,7 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.viewer-sidebar {
|
||||
background: linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), var(--panel-alt);
|
||||
background: var(--panel-alt);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 18px 14px;
|
||||
display: flex;
|
||||
@@ -667,11 +676,11 @@ tbody tr:hover {
|
||||
.viewer-channel-item.active {
|
||||
border-color: var(--accent-line);
|
||||
background: var(--accent-soft);
|
||||
box-shadow: 0 12px 28px rgba(53, 95, 199, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.viewer-channel-item:hover {
|
||||
background: rgba(53, 95, 199, 0.12);
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.viewer-channel-avatar {
|
||||
@@ -681,7 +690,7 @@ tbody tr:hover {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #456fd5, #243d84);
|
||||
background: #274894;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
@@ -725,7 +734,7 @@ tbody tr:hover {
|
||||
min-width: 22px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(53, 95, 199, 0.22);
|
||||
background: #111a32;
|
||||
color: var(--accent-2);
|
||||
font-size: 0.76rem;
|
||||
text-align: center;
|
||||
@@ -738,22 +747,14 @@ tbody tr:hover {
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 18% -12%, rgba(53, 95, 199, 0.18), transparent 32rem),
|
||||
radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.025) 1px, transparent 1.5px),
|
||||
radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px), var(--bg-color);
|
||||
background-size:
|
||||
auto,
|
||||
84px 84px,
|
||||
84px 84px,
|
||||
auto;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
flex-shrink: 0;
|
||||
padding: 18px 26px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(8, 11, 19, 0.94);
|
||||
background: var(--panel-alt);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
@@ -831,7 +832,7 @@ tbody tr:hover {
|
||||
align-self: center;
|
||||
padding: 5px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(17, 24, 39, 0.88);
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
.chat-date-sep:empty {
|
||||
@@ -1008,7 +1009,7 @@ tbody tr:hover {
|
||||
color: var(--dim);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: rgba(12, 17, 29, 0.86);
|
||||
background: #0b0b0b;
|
||||
}
|
||||
|
||||
.viewer-empty-state {
|
||||
@@ -1032,7 +1033,6 @@ tbody tr:hover {
|
||||
border-radius: 14px;
|
||||
background: var(--panel-solid);
|
||||
color: var(--text-color);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
@@ -1141,7 +1141,7 @@ tbody tr:hover {
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: rgba(17, 24, 39, 0.72);
|
||||
background: #101010;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
@@ -1151,8 +1151,8 @@ tbody tr:hover {
|
||||
.account-tab.active {
|
||||
border-color: var(--accent-line);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--accent), #27498f);
|
||||
box-shadow: 0 12px 26px rgba(53, 95, 199, 0.22);
|
||||
background: var(--accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.account-tab .account-tab-status {
|
||||
@@ -1194,7 +1194,7 @@ tbody tr:hover {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
.account-list-info {
|
||||
@@ -1228,7 +1228,7 @@ tbody tr:hover {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
.import-account-row {
|
||||
@@ -1238,7 +1238,7 @@ tbody tr:hover {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
/* ── Active Account Card ─────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user