Polish web UI styling
This commit is contained in:
+138
-103
@@ -1,22 +1,25 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg-color: #000000;
|
||||
--panel: #0b0b0b;
|
||||
--panel-solid: #101010;
|
||||
--panel-alt: #050505;
|
||||
--text-color: #f2f3f5;
|
||||
--accent: #1fb9aa;
|
||||
--accent-2: #58a6ff;
|
||||
--bubble-own: #12342f;
|
||||
--bubble-other: #171717;
|
||||
--dim: #9aa0a6;
|
||||
--line: #242424;
|
||||
--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;
|
||||
--danger: #ff7373;
|
||||
--ok: #65e6a4;
|
||||
--warn: #f6c969;
|
||||
--info: #8ec7ff;
|
||||
--radius: 18px;
|
||||
--shadow: none;
|
||||
--radius: 22px;
|
||||
--shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
|
||||
--font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
|
||||
}
|
||||
@@ -27,7 +30,10 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #000;
|
||||
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);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 15px;
|
||||
@@ -42,8 +48,8 @@ a {
|
||||
|
||||
a:hover,
|
||||
button:hover {
|
||||
border-color: #333;
|
||||
background: #151515;
|
||||
border-color: #354158;
|
||||
background: #151d2c;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@@ -58,36 +64,50 @@ button {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 308px minmax(0, 1fr);
|
||||
grid-template-columns: 360px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #050505;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%),
|
||||
var(--panel-alt);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 24px 20px;
|
||||
padding: 30px 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
padding: 32px;
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.brand-block h1,
|
||||
.dialog-header h2 {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.65rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brand-block .muted {
|
||||
margin: 22px 0 0;
|
||||
max-width: 26ch;
|
||||
font-size: 1.03rem;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.section-title {
|
||||
color: var(--dim);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
@@ -106,7 +126,7 @@ button {
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin: 28px 0;
|
||||
margin: 34px 0;
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
@@ -115,7 +135,7 @@ input,
|
||||
.content-tab,
|
||||
.viewer-channel-item {
|
||||
border: 1px solid var(--line);
|
||||
background: #101010;
|
||||
background: rgba(17, 24, 39, 0.74);
|
||||
color: var(--text-color);
|
||||
border-radius: 999px;
|
||||
}
|
||||
@@ -127,27 +147,33 @@ input,
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 42px;
|
||||
padding: 9px 13px;
|
||||
padding: 10px 18px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-height: 52px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.button.primary,
|
||||
.content-tab.active {
|
||||
border-color: #0f6f67;
|
||||
border-color: var(--accent-line);
|
||||
color: #ffffff;
|
||||
background: #0f6f67;
|
||||
box-shadow: none;
|
||||
background: linear-gradient(135deg, var(--accent), #27498f);
|
||||
box-shadow: 0 14px 32px rgba(53, 95, 199, 0.28);
|
||||
}
|
||||
|
||||
.nav-link.active:hover,
|
||||
.button.primary:hover,
|
||||
.content-tab.active:hover {
|
||||
background: #128277;
|
||||
background: linear-gradient(135deg, var(--accent-hover), #3159ad);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -172,7 +198,7 @@ input,
|
||||
.job-card,
|
||||
.message-card,
|
||||
.settings-dialog {
|
||||
background: var(--panel);
|
||||
background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(12, 17, 29, 0.96));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
@@ -182,16 +208,16 @@ input,
|
||||
.panel,
|
||||
.job-card,
|
||||
.message-card {
|
||||
padding: 16px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.status-card .button {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.status-card .button:first-of-type {
|
||||
@@ -200,10 +226,12 @@ input,
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
margin-top: 12px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--ok);
|
||||
background: rgba(101, 230, 164, 0.06);
|
||||
}
|
||||
|
||||
.content-tabs {
|
||||
@@ -223,9 +251,9 @@ input,
|
||||
|
||||
.panel-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.settings-health-grid {
|
||||
@@ -233,7 +261,7 @@ input,
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
@@ -246,7 +274,7 @@ input,
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.05em;
|
||||
@@ -271,7 +299,7 @@ input,
|
||||
.settings-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
|
||||
gap: 16px;
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@@ -292,8 +320,8 @@ input,
|
||||
|
||||
.settings-account-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.settings-account-button {
|
||||
@@ -305,16 +333,16 @@ input,
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #101010;
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 24, 39, 0.78);
|
||||
color: var(--text-color);
|
||||
padding: 10px 12px;
|
||||
padding: 12px 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-account-button.active {
|
||||
border-color: #0f6f67;
|
||||
background: #092522;
|
||||
border-color: var(--accent-line);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.settings-account-name {
|
||||
@@ -342,13 +370,14 @@ input,
|
||||
|
||||
input {
|
||||
min-width: 160px;
|
||||
padding: 10px 13px;
|
||||
padding: 11px 14px;
|
||||
outline: 0;
|
||||
border-radius: 14px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(53, 95, 199, 0.18);
|
||||
}
|
||||
|
||||
.toggle-row {
|
||||
@@ -399,6 +428,7 @@ input:focus {
|
||||
|
||||
.switch input:checked + .switch-slider {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.switch input:checked + .switch-slider::before {
|
||||
@@ -424,7 +454,7 @@ td {
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #111;
|
||||
background: rgba(53, 95, 199, 0.08);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
@@ -471,10 +501,10 @@ tbody tr:hover {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 38px;
|
||||
padding: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #0f0f0f;
|
||||
border-radius: 16px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
}
|
||||
|
||||
.checkbox-row input {
|
||||
@@ -504,7 +534,7 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.log-line:hover {
|
||||
background: #111;
|
||||
background: rgba(53, 95, 199, 0.08);
|
||||
}
|
||||
|
||||
.log-time,
|
||||
@@ -545,11 +575,11 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.settings-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
background: rgba(3, 6, 13, 0.78);
|
||||
}
|
||||
|
||||
.dialog-shell {
|
||||
padding: 18px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
@@ -588,12 +618,14 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.viewer-sidebar {
|
||||
background: #050505;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%),
|
||||
var(--panel-alt);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 14px 10px;
|
||||
padding: 18px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -612,13 +644,13 @@ tbody tr:hover {
|
||||
.viewer-sidebar-head h1 {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.45rem;
|
||||
font-size: 1.55rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.viewer-channel-list {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.viewer-channel-item {
|
||||
@@ -628,23 +660,23 @@ tbody tr:hover {
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 68px;
|
||||
padding: 8px 10px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.viewer-channel-item.active {
|
||||
border-color: transparent;
|
||||
background: #12342f;
|
||||
box-shadow: none;
|
||||
border-color: var(--accent-line);
|
||||
background: var(--accent-soft);
|
||||
box-shadow: 0 12px 28px rgba(53, 95, 199, 0.18);
|
||||
}
|
||||
|
||||
.viewer-channel-item:hover {
|
||||
background: #111;
|
||||
background: rgba(53, 95, 199, 0.12);
|
||||
}
|
||||
|
||||
.viewer-channel-avatar {
|
||||
@@ -654,7 +686,7 @@ tbody tr:hover {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #5f6b70;
|
||||
background: linear-gradient(135deg, #456fd5, #243d84);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
@@ -698,8 +730,8 @@ tbody tr:hover {
|
||||
min-width: 22px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: #12342f;
|
||||
color: var(--accent);
|
||||
background: rgba(53, 95, 199, 0.22);
|
||||
color: var(--accent-2);
|
||||
font-size: 0.76rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -712,8 +744,10 @@ tbody tr:hover {
|
||||
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), #000;
|
||||
radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px),
|
||||
var(--bg-color);
|
||||
background-size:
|
||||
auto,
|
||||
84px 84px,
|
||||
@@ -723,9 +757,9 @@ tbody tr:hover {
|
||||
|
||||
.viewer-header {
|
||||
flex-shrink: 0;
|
||||
padding: 16px 24px;
|
||||
padding: 18px 26px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: #050505;
|
||||
background: rgba(8, 11, 19, 0.94);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
@@ -735,7 +769,7 @@ tbody tr:hover {
|
||||
.viewer-header h2 {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.45rem;
|
||||
font-size: 1.55rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
@@ -767,7 +801,7 @@ tbody tr:hover {
|
||||
.messages-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 18px 34px 22px;
|
||||
padding: 22px 38px 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -803,7 +837,7 @@ tbody tr:hover {
|
||||
align-self: center;
|
||||
padding: 5px 12px;
|
||||
border-radius: 999px;
|
||||
background: #111;
|
||||
background: rgba(17, 24, 39, 0.88);
|
||||
}
|
||||
|
||||
.chat-date-sep:empty {
|
||||
@@ -826,11 +860,11 @@ tbody tr:hover {
|
||||
|
||||
.chat-bubble {
|
||||
max-width: min(680px, 74%);
|
||||
padding: 8px 12px 7px;
|
||||
padding: 9px 13px 8px;
|
||||
background: var(--bubble-other);
|
||||
border: 1px solid #242424;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px 18px 18px 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 7px;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
@@ -858,7 +892,7 @@ tbody tr:hover {
|
||||
|
||||
.chat-bubble-wrap--own .chat-bubble {
|
||||
background: var(--bubble-own);
|
||||
border-color: #1f5b52;
|
||||
border-color: var(--accent-line);
|
||||
border-radius: 18px 18px 6px 18px;
|
||||
}
|
||||
|
||||
@@ -980,7 +1014,7 @@ tbody tr:hover {
|
||||
color: var(--dim);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #0a0a0a;
|
||||
background: rgba(12, 17, 29, 0.86);
|
||||
}
|
||||
|
||||
.viewer-empty-state {
|
||||
@@ -1002,7 +1036,7 @@ tbody tr:hover {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #111;
|
||||
background: var(--panel-solid);
|
||||
color: var(--text-color);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
|
||||
transition:
|
||||
@@ -1011,7 +1045,7 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
border-color: #1f5b52;
|
||||
border-color: var(--accent-line);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
@@ -1099,9 +1133,9 @@ tbody tr:hover {
|
||||
.account-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -1109,11 +1143,11 @@ tbody tr:hover {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 7px 14px;
|
||||
min-height: 40px;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: #101010;
|
||||
background: rgba(17, 24, 39, 0.72);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
@@ -1121,9 +1155,10 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.account-tab.active {
|
||||
border-color: #0f6f67;
|
||||
border-color: var(--accent-line);
|
||||
color: #ffffff;
|
||||
background: #0f6f67;
|
||||
background: linear-gradient(135deg, var(--accent), #27498f);
|
||||
box-shadow: 0 12px 26px rgba(53, 95, 199, 0.22);
|
||||
}
|
||||
|
||||
.account-tab .account-tab-status {
|
||||
@@ -1153,8 +1188,8 @@ tbody tr:hover {
|
||||
|
||||
.accounts-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.account-list-item {
|
||||
@@ -1162,10 +1197,10 @@ tbody tr:hover {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #0f0f0f;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
}
|
||||
|
||||
.account-list-info {
|
||||
@@ -1194,22 +1229,22 @@ tbody tr:hover {
|
||||
|
||||
.add-account-form {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #0f0f0f;
|
||||
border-radius: 18px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
}
|
||||
|
||||
.import-account-row {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #0f0f0f;
|
||||
border-radius: 18px;
|
||||
background: rgba(17, 24, 39, 0.68);
|
||||
}
|
||||
|
||||
/* ── Active Account Card ─────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user