Michelle
a35b708cbf
All checks were successful
Build & Push Docker Image / build (push) Successful in 1m11s
514 lines
13 KiB
CSS
514 lines
13 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* ===== DEFAULT LIGHT ===== */
|
|
:root,
|
|
[data-theme="light"] {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8fafc;
|
|
--bg-tertiary: #f1f5f9;
|
|
--text-primary: #0f172a;
|
|
--text-secondary: #64748b;
|
|
--accent: #3b82f6;
|
|
--accent-hover: #2563eb;
|
|
--accent-text: #ffffff;
|
|
--border: #e2e8f0;
|
|
--card-bg: #ffffff;
|
|
--input-bg: #ffffff;
|
|
--input-border: #cbd5e1;
|
|
--nav-bg: #ffffff;
|
|
--sidebar-bg: #f8fafc;
|
|
--hover-bg: #f1f5f9;
|
|
--success: #22c55e;
|
|
--warning: #eab308;
|
|
--error: #ef4444;
|
|
--ring: #3b82f6;
|
|
--shadow-color: rgba(0, 0, 0, 0.08);
|
|
--gradient-start: #3b82f6;
|
|
--gradient-end: #8b5cf6;
|
|
}
|
|
|
|
/* ===== DEFAULT DARK ===== */
|
|
[data-theme="dark"] {
|
|
--bg-primary: #0f172a;
|
|
--bg-secondary: #1e293b;
|
|
--bg-tertiary: #334155;
|
|
--text-primary: #f1f5f9;
|
|
--text-secondary: #94a3b8;
|
|
--accent: #3b82f6;
|
|
--accent-hover: #60a5fa;
|
|
--accent-text: #ffffff;
|
|
--border: #334155;
|
|
--card-bg: #1e293b;
|
|
--input-bg: #1e293b;
|
|
--input-border: #475569;
|
|
--nav-bg: #1e293b;
|
|
--sidebar-bg: #0f172a;
|
|
--hover-bg: #334155;
|
|
--success: #22c55e;
|
|
--warning: #eab308;
|
|
--error: #ef4444;
|
|
--ring: #3b82f6;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--gradient-start: #3b82f6;
|
|
--gradient-end: #8b5cf6;
|
|
}
|
|
|
|
/* ===== DRACULA ===== */
|
|
[data-theme="dracula"] {
|
|
--bg-primary: #282a36;
|
|
--bg-secondary: #44475a;
|
|
--bg-tertiary: #383a4c;
|
|
--text-primary: #f8f8f2;
|
|
--text-secondary: #6272a4;
|
|
--accent: #bd93f9;
|
|
--accent-hover: #caa8fc;
|
|
--accent-text: #282a36;
|
|
--border: #44475a;
|
|
--card-bg: #383a4c;
|
|
--input-bg: #44475a;
|
|
--input-border: #6272a4;
|
|
--nav-bg: #21222c;
|
|
--sidebar-bg: #21222c;
|
|
--hover-bg: #44475a;
|
|
--success: #50fa7b;
|
|
--warning: #f1fa8c;
|
|
--error: #ff5555;
|
|
--ring: #bd93f9;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #bd93f9;
|
|
--gradient-end: #ff79c6;
|
|
}
|
|
|
|
/* ===== CATPPUCCIN MOCHA ===== */
|
|
[data-theme="mocha"] {
|
|
--bg-primary: #1e1e2e;
|
|
--bg-secondary: #313244;
|
|
--bg-tertiary: #45475a;
|
|
--text-primary: #cdd6f4;
|
|
--text-secondary: #a6adc8;
|
|
--accent: #89b4fa;
|
|
--accent-hover: #b4befe;
|
|
--accent-text: #1e1e2e;
|
|
--border: #45475a;
|
|
--card-bg: #313244;
|
|
--input-bg: #313244;
|
|
--input-border: #585b70;
|
|
--nav-bg: #181825;
|
|
--sidebar-bg: #181825;
|
|
--hover-bg: #45475a;
|
|
--success: #a6e3a1;
|
|
--warning: #f9e2af;
|
|
--error: #f38ba8;
|
|
--ring: #89b4fa;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #89b4fa;
|
|
--gradient-end: #cba6f7;
|
|
}
|
|
|
|
/* ===== CATPPUCCIN LATTE (Light) ===== */
|
|
[data-theme="latte"] {
|
|
--bg-primary: #eff1f5;
|
|
--bg-secondary: #e6e9ef;
|
|
--bg-tertiary: #dce0e8;
|
|
--text-primary: #4c4f69;
|
|
--text-secondary: #6c6f85;
|
|
--accent: #1e66f5;
|
|
--accent-hover: #2a6ef5;
|
|
--accent-text: #ffffff;
|
|
--border: #ccd0da;
|
|
--card-bg: #e6e9ef;
|
|
--input-bg: #eff1f5;
|
|
--input-border: #bcc0cc;
|
|
--nav-bg: #e6e9ef;
|
|
--sidebar-bg: #dce0e8;
|
|
--hover-bg: #dce0e8;
|
|
--success: #40a02b;
|
|
--warning: #df8e1d;
|
|
--error: #d20f39;
|
|
--ring: #1e66f5;
|
|
--shadow-color: rgba(76, 79, 105, 0.1);
|
|
--gradient-start: #1e66f5;
|
|
--gradient-end: #8839ef;
|
|
}
|
|
|
|
/* ===== NORD ===== */
|
|
[data-theme="nord"] {
|
|
--bg-primary: #2e3440;
|
|
--bg-secondary: #3b4252;
|
|
--bg-tertiary: #434c5e;
|
|
--text-primary: #eceff4;
|
|
--text-secondary: #d8dee9;
|
|
--accent: #88c0d0;
|
|
--accent-hover: #8fbcbb;
|
|
--accent-text: #2e3440;
|
|
--border: #4c566a;
|
|
--card-bg: #3b4252;
|
|
--input-bg: #3b4252;
|
|
--input-border: #4c566a;
|
|
--nav-bg: #2e3440;
|
|
--sidebar-bg: #2e3440;
|
|
--hover-bg: #434c5e;
|
|
--success: #a3be8c;
|
|
--warning: #ebcb8b;
|
|
--error: #bf616a;
|
|
--ring: #88c0d0;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--gradient-start: #88c0d0;
|
|
--gradient-end: #b48ead;
|
|
}
|
|
|
|
/* ===== TOKYO NIGHT ===== */
|
|
[data-theme="tokyo-night"] {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #24283b;
|
|
--bg-tertiary: #2f3349;
|
|
--text-primary: #a9b1d6;
|
|
--text-secondary: #565f89;
|
|
--accent: #7aa2f7;
|
|
--accent-hover: #89b4fa;
|
|
--accent-text: #1a1b26;
|
|
--border: #3b4261;
|
|
--card-bg: #24283b;
|
|
--input-bg: #24283b;
|
|
--input-border: #3b4261;
|
|
--nav-bg: #16161e;
|
|
--sidebar-bg: #16161e;
|
|
--hover-bg: #2f3349;
|
|
--success: #9ece6a;
|
|
--warning: #e0af68;
|
|
--error: #f7768e;
|
|
--ring: #7aa2f7;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #7aa2f7;
|
|
--gradient-end: #bb9af7;
|
|
}
|
|
|
|
/* ===== GRUVBOX DARK ===== */
|
|
[data-theme="gruvbox-dark"] {
|
|
--bg-primary: #282828;
|
|
--bg-secondary: #3c3836;
|
|
--bg-tertiary: #504945;
|
|
--text-primary: #ebdbb2;
|
|
--text-secondary: #a89984;
|
|
--accent: #fe8019;
|
|
--accent-hover: #fabd2f;
|
|
--accent-text: #282828;
|
|
--border: #504945;
|
|
--card-bg: #3c3836;
|
|
--input-bg: #3c3836;
|
|
--input-border: #665c54;
|
|
--nav-bg: #1d2021;
|
|
--sidebar-bg: #1d2021;
|
|
--hover-bg: #504945;
|
|
--success: #b8bb26;
|
|
--warning: #fabd2f;
|
|
--error: #fb4934;
|
|
--ring: #fe8019;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #fe8019;
|
|
--gradient-end: #fabd2f;
|
|
}
|
|
|
|
/* ===== GRUVBOX LIGHT ===== */
|
|
[data-theme="gruvbox-light"] {
|
|
--bg-primary: #fbf1c7;
|
|
--bg-secondary: #ebdbb2;
|
|
--bg-tertiary: #d5c4a1;
|
|
--text-primary: #3c3836;
|
|
--text-secondary: #665c54;
|
|
--accent: #d65d0e;
|
|
--accent-hover: #af3a03;
|
|
--accent-text: #fbf1c7;
|
|
--border: #d5c4a1;
|
|
--card-bg: #ebdbb2;
|
|
--input-bg: #fbf1c7;
|
|
--input-border: #bdae93;
|
|
--nav-bg: #ebdbb2;
|
|
--sidebar-bg: #ebdbb2;
|
|
--hover-bg: #d5c4a1;
|
|
--success: #79740e;
|
|
--warning: #b57614;
|
|
--error: #cc241d;
|
|
--ring: #d65d0e;
|
|
--shadow-color: rgba(60, 56, 54, 0.1);
|
|
--gradient-start: #d65d0e;
|
|
--gradient-end: #b57614;
|
|
}
|
|
|
|
/* ===== ROSE PINE ===== */
|
|
[data-theme="rose-pine"] {
|
|
--bg-primary: #191724;
|
|
--bg-secondary: #1f1d2e;
|
|
--bg-tertiary: #26233a;
|
|
--text-primary: #e0def4;
|
|
--text-secondary: #908caa;
|
|
--accent: #c4a7e7;
|
|
--accent-hover: #ebbcba;
|
|
--accent-text: #191724;
|
|
--border: #393552;
|
|
--card-bg: #1f1d2e;
|
|
--input-bg: #1f1d2e;
|
|
--input-border: #393552;
|
|
--nav-bg: #191724;
|
|
--sidebar-bg: #191724;
|
|
--hover-bg: #26233a;
|
|
--success: #9ccfd8;
|
|
--warning: #f6c177;
|
|
--error: #eb6f92;
|
|
--ring: #c4a7e7;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #c4a7e7;
|
|
--gradient-end: #eb6f92;
|
|
}
|
|
|
|
/* ===== ROSE PINE DAWN (Light) ===== */
|
|
[data-theme="rose-pine-dawn"] {
|
|
--bg-primary: #faf4ed;
|
|
--bg-secondary: #fffaf3;
|
|
--bg-tertiary: #f2e9e1;
|
|
--text-primary: #575279;
|
|
--text-secondary: #797593;
|
|
--accent: #907aa9;
|
|
--accent-hover: #b4637a;
|
|
--accent-text: #faf4ed;
|
|
--border: #dfdad9;
|
|
--card-bg: #fffaf3;
|
|
--input-bg: #faf4ed;
|
|
--input-border: #dfdad9;
|
|
--nav-bg: #fffaf3;
|
|
--sidebar-bg: #f2e9e1;
|
|
--hover-bg: #f2e9e1;
|
|
--success: #56949f;
|
|
--warning: #ea9d34;
|
|
--error: #b4637a;
|
|
--ring: #907aa9;
|
|
--shadow-color: rgba(87, 82, 121, 0.08);
|
|
--gradient-start: #907aa9;
|
|
--gradient-end: #b4637a;
|
|
}
|
|
|
|
/* ===== SOLARIZED DARK ===== */
|
|
[data-theme="solarized-dark"] {
|
|
--bg-primary: #002b36;
|
|
--bg-secondary: #073642;
|
|
--bg-tertiary: #0a4050;
|
|
--text-primary: #839496;
|
|
--text-secondary: #657b83;
|
|
--accent: #268bd2;
|
|
--accent-hover: #2aa198;
|
|
--accent-text: #fdf6e3;
|
|
--border: #073642;
|
|
--card-bg: #073642;
|
|
--input-bg: #073642;
|
|
--input-border: #586e75;
|
|
--nav-bg: #002b36;
|
|
--sidebar-bg: #002b36;
|
|
--hover-bg: #0a4050;
|
|
--success: #859900;
|
|
--warning: #b58900;
|
|
--error: #dc322f;
|
|
--ring: #268bd2;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #268bd2;
|
|
--gradient-end: #2aa198;
|
|
}
|
|
|
|
/* ===== SOLARIZED LIGHT ===== */
|
|
[data-theme="solarized-light"] {
|
|
--bg-primary: #fdf6e3;
|
|
--bg-secondary: #eee8d5;
|
|
--bg-tertiary: #e4ddc8;
|
|
--text-primary: #657b83;
|
|
--text-secondary: #93a1a1;
|
|
--accent: #268bd2;
|
|
--accent-hover: #2aa198;
|
|
--accent-text: #fdf6e3;
|
|
--border: #eee8d5;
|
|
--card-bg: #eee8d5;
|
|
--input-bg: #fdf6e3;
|
|
--input-border: #d3cbb7;
|
|
--nav-bg: #eee8d5;
|
|
--sidebar-bg: #eee8d5;
|
|
--hover-bg: #e4ddc8;
|
|
--success: #859900;
|
|
--warning: #b58900;
|
|
--error: #dc322f;
|
|
--ring: #268bd2;
|
|
--shadow-color: rgba(101, 123, 131, 0.1);
|
|
--gradient-start: #268bd2;
|
|
--gradient-end: #2aa198;
|
|
}
|
|
|
|
/* ===== ONE DARK ===== */
|
|
[data-theme="one-dark"] {
|
|
--bg-primary: #282c34;
|
|
--bg-secondary: #2c313a;
|
|
--bg-tertiary: #353b45;
|
|
--text-primary: #abb2bf;
|
|
--text-secondary: #636d83;
|
|
--accent: #61afef;
|
|
--accent-hover: #79bcf5;
|
|
--accent-text: #282c34;
|
|
--border: #3e4452;
|
|
--card-bg: #2c313a;
|
|
--input-bg: #2c313a;
|
|
--input-border: #3e4452;
|
|
--nav-bg: #21252b;
|
|
--sidebar-bg: #21252b;
|
|
--hover-bg: #353b45;
|
|
--success: #98c379;
|
|
--warning: #e5c07b;
|
|
--error: #e06c75;
|
|
--ring: #61afef;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #61afef;
|
|
--gradient-end: #c678dd;
|
|
}
|
|
|
|
/* ===== GITHUB DARK ===== */
|
|
[data-theme="github-dark"] {
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #21262d;
|
|
--text-primary: #c9d1d9;
|
|
--text-secondary: #8b949e;
|
|
--accent: #58a6ff;
|
|
--accent-hover: #79c0ff;
|
|
--accent-text: #0d1117;
|
|
--border: #30363d;
|
|
--card-bg: #161b22;
|
|
--input-bg: #0d1117;
|
|
--input-border: #30363d;
|
|
--nav-bg: #161b22;
|
|
--sidebar-bg: #0d1117;
|
|
--hover-bg: #21262d;
|
|
--success: #3fb950;
|
|
--warning: #d29922;
|
|
--error: #f85149;
|
|
--ring: #58a6ff;
|
|
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
--gradient-start: #58a6ff;
|
|
--gradient-end: #bc8cff;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: var(--border);
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
/* ===== SCRUNKLY.CAT DARK ===== */
|
|
[data-theme="scrunkly-cat"] {
|
|
--bg-primary: #161924;
|
|
--bg-secondary: #161924;
|
|
--bg-tertiary: #1b2130;
|
|
--text-primary: #dadada;
|
|
--text-secondary: #94a3b8;
|
|
--accent: #b30051;
|
|
--accent-hover: #d6336a;
|
|
--accent-text: #ffffff;
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
--card-bg: #1b2130;
|
|
--input-bg: rgba(255, 255, 255, 0.05);
|
|
--input-border: rgba(255, 255, 255, 0.1);
|
|
--nav-bg: #1b2130;
|
|
--sidebar-bg: #161924;
|
|
--hover-bg: rgba(255, 255, 255, 0.03);
|
|
--success: #86b300;
|
|
--warning: #ecb637;
|
|
--error: #ec4137;
|
|
--ring: #b30051;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--gradient-start: #b30051;
|
|
--gradient-end: #d6336a;
|
|
}
|
|
|
|
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
bg-th-accent text-th-accent-t hover:bg-th-accent-h
|
|
transition-all duration-200 ease-out
|
|
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
--tw-ring-offset-color: var(--bg-primary);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
bg-th-bg-s text-th-text border border-th-border
|
|
hover:bg-th-hover transition-all duration-200 ease-out
|
|
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
--tw-ring-offset-color: var(--bg-primary);
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
bg-th-error text-white hover:opacity-90
|
|
transition-all duration-200 ease-out
|
|
focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
--tw-ring-offset-color: var(--bg-primary);
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
|
|
text-th-text-s hover:bg-th-hover hover:text-th-text
|
|
transition-all duration-200 ease-out
|
|
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
--tw-ring-offset-color: var(--bg-primary);
|
|
}
|
|
|
|
.input-field {
|
|
@apply w-full px-4 py-2.5 rounded-lg
|
|
bg-th-input text-th-text placeholder-th-text-s
|
|
border border-th-input-b
|
|
focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
|
|
transition-all duration-200;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-th-card rounded-xl border border-th-border
|
|
shadow-th transition-all duration-200;
|
|
}
|
|
|
|
.card-hover {
|
|
@apply card hover:shadow-th-lg cursor-pointer;
|
|
}
|
|
.card-hover:hover {
|
|
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
}
|
|
}
|