mirror of
https://github.com/juherr/kill-the-news.git
synced 2026-06-21 06:13:48 +00:00
Julien Herr
b95fbb468f
- 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>
184 lines
3.7 KiB
CSS
184 lines
3.7 KiB
CSS
/* Base Page Layout */
|
|
.page {
|
|
font-family: var(--font-family);
|
|
line-height: 1.5;
|
|
background-color: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: background-color var(--transition-normal);
|
|
overflow-x: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
|
|
/* Subtle orange glow matching landing page hero */
|
|
background-image: radial-gradient(
|
|
900px circle at 50% 0%,
|
|
rgba(246, 130, 31, 0.08),
|
|
transparent 60%
|
|
);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@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 {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-xl);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Keep for compatibility but unused on dashboard */
|
|
.container-wide {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
/* Header Styles */
|
|
.header {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: var(--font-size-xxl);
|
|
font-weight: var(--font-weight-bold);
|
|
margin-bottom: var(--spacing-xs);
|
|
line-height: 1.2;
|
|
background: var(--gradient-title);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
.header p {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-text-secondary);
|
|
margin-top: 0;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* Authentication Screen Layout */
|
|
.auth-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.auth-card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: var(--spacing-xl);
|
|
background-color: var(--color-card);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
border: 1px solid var(--color-border);
|
|
transition: all var(--transition-normal);
|
|
}
|
|
|
|
.auth-logo {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.auth-title {
|
|
font-size: var(--font-size-xl);
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.auth-error {
|
|
color: var(--color-danger);
|
|
background-color: rgba(255, 59, 48, 0.1);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--spacing-lg);
|
|
text-align: center;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.auth-form {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.auth-button {
|
|
width: 100%;
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.header {
|
|
padding: var(--spacing-md) 0;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
}
|
|
|
|
.header-with-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.header-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.header h1,
|
|
.header-title h1 {
|
|
font-size: var(--font-size-xxl);
|
|
font-weight: var(--font-weight-bold);
|
|
margin-bottom: var(--spacing-xs);
|
|
line-height: 1.2;
|
|
color: var(--color-text-primary);
|
|
background: var(--gradient-title);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
.header p,
|
|
.header-title p {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-text-secondary);
|
|
margin-top: 0;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.feed-title {
|
|
font-size: var(--font-size-xl);
|
|
margin-bottom: var(--spacing-md);
|
|
color: var(--color-text-primary);
|
|
}
|