GitHub/kill-the-news
1
0
Fork 0
mirror of https://github.com/juherr/kill-the-news.git synced 2026-06-20 22:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

design(admin): align with kill-the-news landing page visual identity

Browse Source 
- variables.css: orange primary (#f6821f), dark bg (#0a0a0a), Inter font
- layout.css: orange radial glow, unified container 1200px (no width jump)
- components.css: orange buttons, remove backdrop-filter on inputs/cards

Fixes blurred form fields (double backdrop-filter), jarring width shift
between list/table views, and mismatched blue iOS aesthetic vs orange
Cloudflare identity of the site.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-22 18:21:34 +02:00
parent ba7add5f53
commit b95fbb468f
3 changed files with 179 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+118 -260
View File
@@ -1,4 +1,4 @@
/* Card - Glass Effect */ /* Card */
.card { .card {
background-color: var(--color-card); background-color: var(--color-card);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@@ -6,12 +6,9 @@
padding: var(--spacing-lg); padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
transition: all var(--transition-normal); transition: border-color var(--transition-normal);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
} }
/* Remove top margin for h2 elements in cards */
.card h2 { .card h2 {
margin-top: 0; margin-top: 0;
} }
@@ -81,7 +78,7 @@ textarea.feed-description-edit,
.button-success:hover, .button-success:hover,
.button-success:focus { .button-success:focus {
background-color: rgba(10, 132, 255, 0.9); opacity: 0.88;
} }
.button-success.saved { .button-success.saved {
@@ -89,12 +86,11 @@ textarea.feed-description-edit,
transition: all 0.5s ease; transition: all 0.5s ease;
} }
/* Force saved button to stay green on hover */
.button-success.saved:hover { .button-success.saved:hover {
background-color: var(--color-success); background-color: var(--color-success);
} }
/* Button container with space-between layout */ /* Button container */
.feed-buttons { .feed-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -106,16 +102,14 @@ textarea.feed-description-edit,
gap: var(--spacing-sm); gap: var(--spacing-sm);
} }
/* Fixed width for action buttons to prevent layout shifts during state changes */
.feed-buttons-left .button { .feed-buttons-left .button {
width: 140px; /* Fixed exact width instead of min-width */ width: 140px;
justify-content: center; /* Ensure text is centered */ justify-content: center;
box-sizing: border-box; /* Ensure padding is included in width calculation */ box-sizing: border-box;
} }
/* Ensure anchor tags in button containers match button styling exactly */
.feed-buttons-left a.button { .feed-buttons-left a.button {
width: 140px; /* Same fixed width */ width: 140px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
} }
@@ -124,195 +118,85 @@ textarea.feed-description-edit,
margin-left: auto; margin-left: auto;
} }
/* Button - VisionOS Style with consistent height */ /* Button — primary orange */
.button { .button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
overflow: hidden; height: 40px;
height: 44px; /* Fixed height for consistency */
padding: 0 var(--spacing-lg); padding: 0 var(--spacing-lg);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: var(--font-size-md); font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-semibold);
font-family: var(--font-family);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: transition:
all var(--transition-fast), opacity var(--transition-fast),
color 0.3s ease, transform var(--transition-fast),
background-color 0.3s ease; box-shadow var(--transition-fast);
white-space: nowrap; white-space: nowrap;
opacity: 1; letter-spacing: -0.01em;
background-color: var(--color-primary);
/* Liquid-glass depth: layered gradients + inner highlights */ border: 1px solid transparent;
background-color: rgba(10, 132, 255, 0.78); box-shadow: var(--shadow-sm);
background-image:
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.38),
transparent 48%
),
linear-gradient(
180deg,
rgba(10, 132, 255, 0.98) 0%,
rgba(10, 132, 255, 0.68) 100%
);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.22),
0 2px 6px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.26);
color: var(--color-text-on-primary); color: var(--color-text-on-primary);
} }
.button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
opacity: 0.9;
}
.button:hover, .button:hover,
.button:focus { .button:focus {
background-color: rgba(10, 132, 255, 0.86); opacity: 0.88;
background-image:
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.45),
transparent 50%
),
linear-gradient(
180deg,
rgba(10, 132, 255, 1) 0%,
rgba(10, 132, 255, 0.74) 100%
);
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.26),
0 6px 14px rgba(0, 0, 0, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--shadow-md);
} }
.button:active { .button:active {
transform: translateY(0); transform: translateY(0);
box-shadow: opacity: 1;
0 10px 26px rgba(0, 0, 0, 0.22), box-shadow: var(--shadow-sm);
0 2px 6px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
} }
.button-secondary { .button-secondary {
background-color: rgba(60, 60, 67, 0.12); background-color: transparent;
background-image: border: 1px solid var(--color-border);
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.26),
transparent 52%
),
linear-gradient(
180deg,
rgba(60, 60, 67, 0.22) 0%,
rgba(60, 60, 67, 0.08) 100%
);
color: var(--color-text-primary); color: var(--color-text-primary);
border: 1px solid rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: light) {
.button-secondary {
background-color: rgba(0, 0, 0, 0.04);
}
} }
.button-secondary:hover, .button-secondary:hover,
.button-secondary:focus { .button-secondary:focus {
background-color: rgba(60, 60, 67, 0.18); background-color: rgba(255, 255, 255, 0.06);
background-image: border-color: rgba(255, 255, 255, 0.2);
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.3),
transparent 52%
),
linear-gradient(
180deg,
rgba(60, 60, 67, 0.28) 0%,
rgba(60, 60, 67, 0.1) 100%
);
} }
/* Light mode specific button styling */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.button-secondary {
background-color: rgba(60, 60, 67, 0.06);
background-image:
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.55),
transparent 55%
),
linear-gradient(
180deg,
rgba(60, 60, 67, 0.1) 0%,
rgba(60, 60, 67, 0.04) 100%
);
border: 1px solid rgba(60, 60, 67, 0.14);
}
.button-secondary:hover, .button-secondary:hover,
.button-secondary:focus { .button-secondary:focus {
background-color: rgba(60, 60, 67, 0.08); background-color: rgba(0, 0, 0, 0.08);
background-image: border-color: rgba(0, 0, 0, 0.16);
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.62),
transparent 55%
),
linear-gradient(
180deg,
rgba(60, 60, 67, 0.12) 0%,
rgba(60, 60, 67, 0.06) 100%
);
} }
} }
/* Logout button styling */ /* Logout button — same orange family */
.button-logout { .button-logout {
background-color: rgba(255, 159, 10, 0.78); background-color: transparent;
background-image: border: 1px solid var(--color-border);
radial-gradient( color: var(--color-text-secondary);
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.34),
transparent 50%
),
linear-gradient(
180deg,
rgba(255, 159, 10, 0.98) 0%,
rgba(255, 159, 10, 0.66) 100%
);
color: var(--color-text-on-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.button-logout:hover, .button-logout:hover,
.button-logout:focus { .button-logout:focus {
background-color: rgba(255, 159, 10, 0.86); color: var(--color-primary);
background-image: border-color: var(--color-primary);
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.42),
transparent 52%
),
linear-gradient(
180deg,
rgba(255, 159, 10, 1) 0%,
rgba(255, 159, 10, 0.72) 100%
);
} }
/* Back button styling */ /* Back button */
.button-back { .button-back {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -327,41 +211,22 @@ textarea.feed-description-edit,
} }
.button-danger { .button-danger {
background-color: rgba(255, 69, 58, 0.78); background-color: var(--color-danger);
background-image: color: var(--color-text-on-primary);
radial-gradient( border-color: transparent;
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.34),
transparent 50%
),
linear-gradient(
180deg,
rgba(255, 69, 58, 0.98) 0%,
rgba(255, 69, 58, 0.66) 100%
);
} }
.button-danger:hover, .button-danger:hover,
.button-danger:focus { .button-danger:focus {
background-color: rgba(255, 69, 58, 0.86); background-color: var(--color-danger);
background-image: opacity: 0.85;
radial-gradient(
140% 120% at 18% 0%,
rgba(255, 255, 255, 0.42),
transparent 52%
),
linear-gradient(
180deg,
rgba(255, 69, 58, 1) 0%,
rgba(255, 69, 58, 0.72) 100%
);
} }
/* Small button variation */ /* Small button */
.button-small { .button-small {
height: 36px; /* Smaller height */ height: 32px;
padding: 0 var(--spacing-md); padding: 0 var(--spacing-md);
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
} }
/* Form Elements */ /* Form Elements */
@@ -386,15 +251,26 @@ textarea {
width: 100%; width: 100%;
padding: var(--spacing-md); padding: var(--spacing-md);
font-size: var(--font-size-md); font-size: var(--font-size-md);
font-family: var(--font-family);
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background-color: rgba(60, 60, 67, 0.1); background-color: rgba(255, 255, 255, 0.04);
color: var(--color-text-primary); color: var(--color-text-primary);
transition: all var(--transition-fast); transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
box-sizing: border-box; box-sizing: border-box;
font-family: var(--font-family); }
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm)); @media (prefers-color-scheme: light) {
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
background-color: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.14);
}
} }
input[type="search"] { input[type="search"] {
@@ -413,7 +289,7 @@ input:focus,
textarea:focus { textarea:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2); box-shadow: 0 0 0 2px rgba(246, 130, 31, 0.2);
} }
/* Modal */ /* Modal */
@@ -424,9 +300,9 @@ textarea:focus {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-md));
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
@@ -450,8 +326,6 @@ textarea:focus {
opacity: 0; opacity: 0;
transition: all var(--transition-normal); transition: all var(--transition-normal);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
} }
.modal-bg.visible .modal { .modal-bg.visible .modal {
@@ -528,17 +402,16 @@ textarea:focus {
.email-iframe { .email-iframe {
width: 100%; width: 100%;
height: 500px; /* Smaller default height */ height: 500px;
border: none; border: none;
background-color: #ffffff; background-color: #ffffff;
transition: height 0.3s ease; transition: height 0.3s ease;
} }
/* Dark mode specific styling for email iframe */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.email-iframe-container { .email-iframe-container {
background-color: #1c1c1e; background-color: #1c1c1e;
border-color: #3a3a3c; border-color: #2a2a2a;
} }
.email-iframe { .email-iframe {
background-color: #1c1c1e; background-color: #1c1c1e;
@@ -548,15 +421,13 @@ textarea:focus {
/* Email Raw View */ /* Email Raw View */
.email-raw { .email-raw {
padding: var(--spacing-md); padding: var(--spacing-md);
background-color: rgba(30, 30, 32, 0.7); background-color: #111111;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
overflow: auto; overflow: auto;
max-height: 500px; /* Match iframe default height */ max-height: 500px;
backdrop-filter: blur(var(--blur-sm));
} }
/* Light mode specific styling for Raw HTML view */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.email-raw { .email-raw {
background-color: rgba(240, 240, 245, 0.9); background-color: rgba(240, 240, 245, 0.9);
@@ -571,7 +442,7 @@ textarea:focus {
word-break: break-word; word-break: break-word;
} }
/* Email Metadata Styling */ /* Email Metadata */
.email-meta { .email-meta {
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md); padding-bottom: var(--spacing-md);
@@ -609,23 +480,25 @@ textarea:focus {
.toggle-button { .toggle-button {
padding: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: rgba(60, 60, 67, 0.1); background-color: transparent;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
color: var(--color-text-secondary); color: var(--color-text-secondary);
cursor: pointer; cursor: pointer;
transition: all var(--transition-fast); transition: all var(--transition-fast);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
font-family: var(--font-family);
} }
.toggle-button:hover { .toggle-button:hover {
background-color: rgba(60, 60, 67, 0.2); color: var(--color-text-primary);
border-color: rgba(255, 255, 255, 0.2);
} }
.toggle-button.active { .toggle-button.active {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-text-on-primary); color: var(--color-text-on-primary);
border-color: var(--color-primary); border-color: transparent;
} }
/* Email content container */ /* Email content container */
@@ -635,7 +508,7 @@ textarea:focus {
overflow: hidden; overflow: hidden;
} }
/* Toolbar + segmented control (Apple-ish) */ /* Toolbar */
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -659,21 +532,21 @@ textarea:focus {
input.search { input.search {
min-width: 280px; min-width: 280px;
flex: 1; flex: 1;
height: 40px; height: 36px;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
padding: 0 14px; padding: 0 14px;
padding-left: 38px; padding-left: 38px;
background-color: rgba(60, 60, 67, 0.14); background-color: rgba(255, 255, 255, 0.04);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238e8e93'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E"); border: 1px solid var(--color-border);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555555'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 14px center; background-position: 14px center;
background-size: 16px 16px; background-size: 16px 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
input.search { input.search {
background-color: rgba(60, 60, 67, 0.08); background-color: rgba(0, 0, 0, 0.03);
} }
} }
@@ -690,15 +563,14 @@ input.search::placeholder {
.pill { .pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 28px; height: 24px;
padding: 0 10px; padding: 0 10px;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background-color: rgba(60, 60, 67, 0.12); background-color: transparent;
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
backdrop-filter: blur(var(--blur-sm)); font-weight: var(--font-weight-medium);
-webkit-backdrop-filter: blur(var(--blur-sm));
} }
.segmented { .segmented {
@@ -706,9 +578,7 @@ input.search::placeholder {
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
padding: 2px; padding: 2px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background-color: rgba(60, 60, 67, 0.12); background-color: transparent;
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
@@ -716,7 +586,7 @@ input.search::placeholder {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8px 12px; padding: 6px 14px;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
text-decoration: none; text-decoration: none;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -732,14 +602,8 @@ input.search::placeholder {
.segmented-item.is-active { .segmented-item.is-active {
color: var(--color-text-primary); color: var(--color-text-primary);
background-color: rgba(255, 255, 255, 0.12); background-color: var(--color-primary);
box-shadow: var(--shadow-sm); color: var(--color-text-on-primary);
}
@media (prefers-color-scheme: light) {
.segmented-item.is-active {
background-color: rgba(255, 255, 255, 0.85);
}
} }
/* Tables */ /* Tables */
@@ -747,13 +611,6 @@ input.search::placeholder {
overflow-x: auto; overflow-x: auto;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
background-color: rgba(60, 60, 67, 0.05);
}
@media (prefers-color-scheme: light) {
.table-wrap {
background-color: rgba(255, 255, 255, 0.6);
}
} }
table.table { table.table {
@@ -835,7 +692,7 @@ th.th-resizable {
} }
th.th-resizable:hover .col-resizer:after { th.th-resizable:hover .col-resizer:after {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@@ -850,27 +707,28 @@ body.is-resizing {
} }
table.table thead th { table.table thead th {
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary); letter-spacing: 0.04em;
background-color: rgba(44, 44, 46, 0.35); text-transform: uppercase;
backdrop-filter: blur(var(--blur-sm)); color: var(--color-text-tertiary);
-webkit-backdrop-filter: blur(var(--blur-sm)); background-color: rgba(255, 255, 255, 0.02);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
table.table thead th { table.table thead th {
background-color: rgba(255, 255, 255, 0.55); background-color: rgba(0, 0, 0, 0.02);
color: var(--color-text-secondary);
} }
} }
table.table tbody tr:hover { table.table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.04); background-color: rgba(255, 255, 255, 0.03);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
table.table tbody tr:hover { table.table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.02);
} }
} }
@@ -932,7 +790,7 @@ table.table code {
background-color: rgba(255, 69, 58, 0.22); background-color: rgba(255, 69, 58, 0.22);
border-color: rgba(255, 69, 58, 0.65); border-color: rgba(255, 69, 58, 0.65);
color: #fff; color: #fff;
box-shadow: 0 12px 28px rgba(255, 69, 58, 0.18); box-shadow: 0 8px 20px rgba(255, 69, 58, 0.18);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -964,7 +822,7 @@ table.table code {
padding 220ms ease; padding 220ms ease;
} }
/* Spinner (buttons + toasts) */ /* Spinner */
@keyframes spin { @keyframes spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
@@ -975,8 +833,8 @@ table.table code {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 999px; border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: rgba(255, 255, 255, 0.95); border-top-color: rgba(255, 255, 255, 0.9);
display: inline-block; display: inline-block;
animation: spin 0.85s linear infinite; animation: spin 0.85s linear infinite;
flex: 0 0 auto; flex: 0 0 auto;
@@ -984,8 +842,8 @@ table.table code {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.spinner { .spinner {
border-color: rgba(0, 0, 0, 0.16); border-color: rgba(0, 0, 0, 0.14);
border-top-color: rgba(0, 0, 0, 0.55); border-top-color: rgba(0, 0, 0, 0.5);
} }
} }
@@ -1016,11 +874,11 @@ table.table code {
opacity 180ms ease, opacity 180ms ease,
transform 180ms ease; transform 180ms ease;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid var(--color-border);
background-color: rgba(44, 44, 46, 0.72); background-color: #1a1a1a;
backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); box-shadow: var(--shadow-xl);
padding: 12px 12px; padding: 12px 12px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -1031,9 +889,9 @@ table.table code {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.toast { .toast {
background-color: rgba(255, 255, 255, 0.78); background-color: rgba(255, 255, 255, 0.95);
border-color: rgba(60, 60, 67, 0.18); border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14); box-shadow: var(--shadow-xl);
} }
} }
@@ -1085,7 +943,7 @@ table.table code {
} }
.toast-info { .toast-info {
border-color: rgba(10, 132, 255, 0.35); border-color: rgba(246, 130, 31, 0.35);
} }
.toast-success { .toast-success {
src/styles/layout.css
+21 -31
View File
@@ -14,43 +14,37 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
/* Liquid-glass-ish background (subtle, non-distracting) */ /* Subtle orange glow matching landing page hero */
background-image: background-image: radial-gradient(
radial-gradient( 900px circle at 50% 0%,
1200px circle at 20% 10%, rgba(246, 130, 31, 0.08),
rgba(10, 132, 255, 0.18), transparent 60%
transparent 55% );
),
radial-gradient(
900px circle at 80% 20%,
rgba(94, 92, 230, 0.14),
transparent 60%
),
radial-gradient(
700px circle at 50% 100%,
rgba(48, 209, 88, 0.1),
transparent 60%
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(0, 0, 0, 0.03) 100%
);
background-attachment: fixed; background-attachment: fixed;
} }
/* Main Container */ @media (prefers-color-scheme: light) {
.page {
background-image: radial-gradient(
900px circle at 50% 0%,
rgba(246, 130, 31, 0.06),
transparent 60%
);
}
}
/* Main Container — unified width for list and table views */
.container { .container {
width: 100%; width: 100%;
max-width: 980px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: var(--spacing-xl); padding: var(--spacing-xl);
box-sizing: border-box; box-sizing: border-box;
} }
/* Wider layout for data-dense pages (tables) */ /* Keep for compatibility but unused on dashboard */
.container-wide { .container-wide {
max-width: 1440px; max-width: 1400px;
} }
/* Header Styles */ /* Header Styles */
@@ -95,8 +89,6 @@
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
transition: all var(--transition-normal); transition: all var(--transition-normal);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
} }
.auth-logo { .auth-logo {
@@ -118,8 +110,6 @@
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
text-align: center; text-align: center;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
} }
.auth-form { .auth-form {
@@ -164,7 +154,7 @@
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
line-height: 1.2; line-height: 1.2;
color: var(--color-text-primary); /* Fallback color */ color: var(--color-text-primary);
background: var(--gradient-title); background: var(--gradient-title);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
src/styles/variables.css
+40 -67
View File
@@ -1,8 +1,8 @@
:root { :root {
/* Typography - Prefer system UI fonts (Apple HIG-ish) */ /* Typography — Inter matches the landing page style */
--font-family: --font-family:
-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
"Helvetica Neue", Arial, sans-serif; sans-serif;
--font-family-mono: --font-family-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace; "Courier New", monospace;
@@ -18,40 +18,31 @@
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
/* Colors - Dark Mode (Default) */ /* Colors — Dark Mode (Default) — aligned with kill-the-news landing page */
--color-primary: #0a84ff; --color-primary: #f6821f;
--color-primary-dark: #409cff; --color-primary-dark: #ffa050;
--color-secondary: #5e5ce6; --color-secondary: #f0b429;
--color-success: #30d158; --color-success: #30d158;
--color-warning: #ff9f0a; --color-warning: #ff9f0a;
--color-danger: #ff453a; --color-danger: #ff453a;
--color-danger-dark: #ff6961; --color-danger-dark: #ff6961;
--color-background: rgba( --color-background: #0a0a0a;
28, --color-card: #111111;
28, --color-border: rgba(255, 255, 255, 0.1);
30, --color-text-primary: #f0f0f0;
0.95 --color-text-secondary: #888888;
); /* Semi-transparent for glass effect */ --color-text-tertiary: #555555;
--color-card: rgba(44, 44, 46, 0.8); /* Semi-transparent for glass effect */
--color-border: rgba(255, 255, 255, 0.08);
--color-text-primary: #ffffff;
--color-text-secondary: #ebebf5;
--color-text-tertiary: #8e8e93;
--color-text-on-primary: #ffffff; --color-text-on-primary: #ffffff;
--color-logout: rgba(255, 159, 10, 0.8); /* Orange-tinted for logout */ --color-logout: rgba(246, 130, 31, 0.85);
/* Gradients */ /* Gradients */
--gradient-title: linear-gradient( --gradient-title: linear-gradient(135deg, #f6821f, #f0b429);
135deg,
var(--color-primary),
var(--color-secondary)
);
/* Shadows for dark mode */ /* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
/* Spacing */ /* Spacing */
--spacing-xs: 4px; --spacing-xs: 4px;
@@ -62,64 +53,46 @@
--spacing-xxl: 48px; --spacing-xxl: 48px;
/* Radius */ /* Radius */
--radius-sm: 8px; --radius-sm: 6px;
--radius-md: 12px; --radius-md: 10px;
--radius-lg: 16px; --radius-lg: 12px;
--radius-pill: 9999px; --radius-pill: 9999px;
/* Animation - Subtle */ /* Animation */
--transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
--transition-normal: 0.2s cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
/* Blur for glass effect */ /* Blur — only for modals and toasts */
--blur-sm: 8px; --blur-sm: 8px;
--blur-md: 12px; --blur-md: 12px;
--blur-lg: 20px; --blur-lg: 20px;
} }
/* Light Mode Support - Based on device preference */ /* Light Mode */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--color-primary: #0070f3; --color-primary: #e07010;
--color-primary-dark: #0051a8; --color-primary-dark: #c05800;
--color-secondary: #5e5ce6; --color-secondary: #d49800;
--color-success: #34c759; --color-success: #34c759;
--color-warning: #ff9500; --color-warning: #ff9500;
--color-danger: #ff3b30; --color-danger: #ff3b30;
--color-danger-dark: #d70015; --color-danger-dark: #d70015;
--color-background: rgba( --color-background: #f5f5f7;
245, --color-card: #ffffff;
245, --color-border: rgba(0, 0, 0, 0.1);
247, --color-text-primary: #111111;
0.9 --color-text-secondary: #555555;
); /* Semi-transparent for glass effect */
--color-card: rgba(
255,
255,
255,
0.8
); /* Semi-transparent for glass effect */
--color-border: rgba(0, 0, 0, 0.06);
--color-text-primary: #000000;
--color-text-secondary: #666666;
--color-text-tertiary: #999999; --color-text-tertiary: #999999;
--color-text-on-primary: #ffffff; --color-text-on-primary: #ffffff;
--color-logout: rgba(255, 149, 0, 0.8); /* Orange-tinted for logout */ --color-logout: rgba(224, 112, 16, 0.9);
/* Reset shadows for light mode */ --gradient-title: linear-gradient(135deg, #e07010, #d49800);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.08);
/* Update gradient for light mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--gradient-title: linear-gradient( --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
135deg, --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
var(--color-primary), --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
var(--color-secondary)
);
} }
} }
/* No external font imports. */