feat: update CSS variables for improved theming and styling
All checks were successful
Release and Build Docker Images / release-and-build (push) Successful in 1m46s
All checks were successful
Release and Build Docker Images / release-and-build (push) Successful in 1m46s
This commit is contained in:
almazlar
@@ -1,58 +1,128 @@
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--panel-bg: rgba(30, 41, 59, 0.7);
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent-primary: #8b5cf6;
|
||||
--accent-secondary: #ec4899;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--rich-cerulean-50: #eaf4fb;
|
||||
--rich-cerulean-100: #d5eaf6;
|
||||
--rich-cerulean-200: #aad5ee;
|
||||
--rich-cerulean-300: #80c0e5;
|
||||
--rich-cerulean-400: #56abdc;
|
||||
--rich-cerulean-500: #2b96d4;
|
||||
--rich-cerulean-600: #2378a9;
|
||||
--rich-cerulean-700: #1a5a7f;
|
||||
--rich-cerulean-800: #113c55;
|
||||
--rich-cerulean-900: #091e2a;
|
||||
--rich-cerulean-950: #06151e;
|
||||
|
||||
--sand-dune-50: #f7f5ed;
|
||||
--sand-dune-100: #f0ebdb;
|
||||
--sand-dune-200: #e1d6b7;
|
||||
--sand-dune-300: #d2c293;
|
||||
--sand-dune-400: #c3ae6f;
|
||||
--sand-dune-500: #b49a4b;
|
||||
--sand-dune-600: #907b3c;
|
||||
--sand-dune-700: #6c5c2d;
|
||||
--sand-dune-800: #483d1e;
|
||||
--sand-dune-900: #241f0f;
|
||||
--sand-dune-950: #19160b;
|
||||
|
||||
--alice-blue-50: #ecf3f8;
|
||||
--alice-blue-100: #dae7f1;
|
||||
--alice-blue-200: #b4cfe4;
|
||||
--alice-blue-300: #8fb7d6;
|
||||
--alice-blue-400: #699fc9;
|
||||
--alice-blue-500: #4487bb;
|
||||
--alice-blue-600: #366c96;
|
||||
--alice-blue-700: #295170;
|
||||
--alice-blue-800: #1b364b;
|
||||
--alice-blue-900: #0e1b25;
|
||||
--alice-blue-950: #09131a;
|
||||
|
||||
--ink-black-50: #eef2f6;
|
||||
--ink-black-100: #dee6ed;
|
||||
--ink-black-200: #bdccdb;
|
||||
--ink-black-300: #9cb2c9;
|
||||
--ink-black-400: #7a99b8;
|
||||
--ink-black-500: #597fa6;
|
||||
--ink-black-600: #476685;
|
||||
--ink-black-700: #364c63;
|
||||
--ink-black-800: #243342;
|
||||
--ink-black-900: #121921;
|
||||
--ink-black-950: #0c1217;
|
||||
|
||||
--taupe-50: #f4f2f0;
|
||||
--taupe-100: #e9e4e2;
|
||||
--taupe-200: #d3cac5;
|
||||
--taupe-300: #bdafa8;
|
||||
--taupe-400: #a7958b;
|
||||
--taupe-500: #917a6e;
|
||||
--taupe-600: #746258;
|
||||
--taupe-700: #574942;
|
||||
--taupe-800: #3a312c;
|
||||
--taupe-900: #1d1816;
|
||||
--taupe-950: #14110f;
|
||||
|
||||
/* New CSS Variables */
|
||||
--bg-color: var(--rich-cerulean-950);
|
||||
--panel-bg: rgba(30, 41, 59, 0.7);
|
||||
--text-main: var(--alice-blue-200);
|
||||
--text-muted: var(--sand-dune-600);
|
||||
--accent-primary: var(--taupe-500);
|
||||
--accent-secondary: var(--rich-cerulean-300);
|
||||
--success: var(--sand-dune-200);
|
||||
--danger: var(--ink-black-400);
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--bg-color);
|
||||
background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
|
||||
radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 4rem 1rem;
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--bg-color);
|
||||
background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
|
||||
radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
body {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--accent-primary);
|
||||
color: var(--text-main);
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user