mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-20 00:35:22 +00:00
ef94a9da9d
* OAuth2 apps Inertia'd! * Rose Pine/Rose Pine Dawn themes! * Run formatting pass * add some tests?
352 lines
8.6 KiB
CSS
352 lines
8.6 KiB
CSS
@import "tailwindcss";
|
|
@source "../../../app/javascript/**/*.{svelte,js,ts}";
|
|
@source "../../../node_modules/layerchart/dist/**/*.{svelte,js}";
|
|
@import "./main.css";
|
|
@import "./nav.css";
|
|
|
|
body {
|
|
@apply flex min-h-screen;
|
|
}
|
|
|
|
main {
|
|
@apply flex-1 p-5 mb-24 transition-[margin-left,max-width] duration-300 ease-in-out;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
main {
|
|
@apply ml-0 max-w-full p-5 pt-16;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--color-darker: #1f1617;
|
|
--color-dark: #2a1f21;
|
|
--color-darkless: #4a2d31;
|
|
--color-red: #c8394f;
|
|
--color-orange: #ff8c37;
|
|
--color-yellow: #f1c40f;
|
|
--color-green: #33d6a6;
|
|
--color-cyan: #5bc0de;
|
|
--color-blue: #338eda;
|
|
--color-purple: #a633d6;
|
|
--color-primary: #c8394f;
|
|
--color-secondary: #6e6468;
|
|
|
|
--color-muted: #6e6468;
|
|
--color-text-muted: #6e6468;
|
|
|
|
--color-surface: #2a1f21;
|
|
--color-surface-100: #3a292d;
|
|
--color-surface-200: #4a3438;
|
|
--color-surface-300: #5a3f44;
|
|
--color-surface-content: #f3ecee;
|
|
--color-info: #5bc0de;
|
|
--color-success: #33d6a6;
|
|
--color-warning: #f1c40f;
|
|
--color-danger: #c8394f;
|
|
--color-on-primary: #ffffff;
|
|
}
|
|
|
|
:root {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #ffffff;
|
|
}
|
|
|
|
html[data-theme="standard"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #ffffff;
|
|
}
|
|
|
|
html[data-theme="neon"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #13160d;
|
|
--color-darker: #050505;
|
|
--color-dark: #101312;
|
|
--color-darkless: #242a28;
|
|
--color-red: #ff4d6d;
|
|
--color-orange: #ffb347;
|
|
--color-yellow: #ffd166;
|
|
--color-green: #7dfc6a;
|
|
--color-cyan: #6fd7ff;
|
|
--color-blue: #69a6ff;
|
|
--color-purple: #c9a8ff;
|
|
--color-primary: #d7ff6a;
|
|
--color-secondary: #a4b0aa;
|
|
--color-muted: #8f9b95;
|
|
--color-text-muted: #8f9b95;
|
|
--color-surface: #111514;
|
|
--color-surface-100: #171c1a;
|
|
--color-surface-200: #202826;
|
|
--color-surface-300: #2b3532;
|
|
--color-surface-content: #e8eee9;
|
|
--color-info: #6fd7ff;
|
|
--color-success: #7dfc6a;
|
|
--color-warning: #ffd166;
|
|
--color-danger: #ff4d6d;
|
|
}
|
|
|
|
html[data-theme="catppuccin_mocha"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #1e1e2e;
|
|
--color-darker: #11111b;
|
|
--color-dark: #181825;
|
|
--color-darkless: #313244;
|
|
--color-red: #f38ba8;
|
|
--color-orange: #fab387;
|
|
--color-yellow: #f9e2af;
|
|
--color-green: #a6e3a1;
|
|
--color-cyan: #94e2d5;
|
|
--color-blue: #89b4fa;
|
|
--color-purple: #cba6f7;
|
|
--color-primary: #cba6f7;
|
|
--color-secondary: #a6adc8;
|
|
--color-muted: #a6adc8;
|
|
--color-text-muted: #a6adc8;
|
|
--color-surface: #1e1e2e;
|
|
--color-surface-100: #313244;
|
|
--color-surface-200: #45475a;
|
|
--color-surface-300: #585b70;
|
|
--color-surface-content: #cdd6f4;
|
|
--color-info: #89b4fa;
|
|
--color-success: #a6e3a1;
|
|
--color-warning: #f9e2af;
|
|
--color-danger: #f38ba8;
|
|
}
|
|
|
|
html[data-theme="catppuccin_iced_latte"] {
|
|
--app-color-scheme: light;
|
|
--color-on-primary: #ffffff;
|
|
--color-darker: #ccd0da;
|
|
--color-dark: #dce0e8;
|
|
--color-darkless: #bac2de;
|
|
--color-red: #d20f39;
|
|
--color-orange: #fe640b;
|
|
--color-yellow: #df8e1d;
|
|
--color-green: #40a02b;
|
|
--color-cyan: #179299;
|
|
--color-blue: #1e66f5;
|
|
--color-purple: #8839ef;
|
|
--color-primary: #1e66f5;
|
|
--color-secondary: #5c5f77;
|
|
--color-muted: #5c5f77;
|
|
--color-text-muted: #5c5f77;
|
|
--color-surface: #eff1f5;
|
|
--color-surface-100: #e6e9ef;
|
|
--color-surface-200: #dce0e8;
|
|
--color-surface-300: #ccd0da;
|
|
--color-surface-content: #4c4f69;
|
|
--color-info: #209fb5;
|
|
--color-success: #40a02b;
|
|
--color-warning: #df8e1d;
|
|
--color-danger: #d20f39;
|
|
}
|
|
|
|
html[data-theme="gruvbox_dark"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #1d2021;
|
|
--color-darker: #1d2021;
|
|
--color-dark: #282828;
|
|
--color-darkless: #3c3836;
|
|
--color-red: #fb4934;
|
|
--color-orange: #fe8019;
|
|
--color-yellow: #fabd2f;
|
|
--color-green: #b8bb26;
|
|
--color-cyan: #8ec07c;
|
|
--color-blue: #83a598;
|
|
--color-purple: #d3869b;
|
|
--color-primary: #d8a657;
|
|
--color-secondary: #a89984;
|
|
--color-muted: #a89984;
|
|
--color-text-muted: #a89984;
|
|
--color-surface: #282828;
|
|
--color-surface-100: #3c3836;
|
|
--color-surface-200: #504945;
|
|
--color-surface-300: #665c54;
|
|
--color-surface-content: #ebdbb2;
|
|
--color-info: #83a598;
|
|
--color-success: #b8bb26;
|
|
--color-warning: #fabd2f;
|
|
--color-danger: #fb4934;
|
|
}
|
|
|
|
html[data-theme="github_dark"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #ffffff;
|
|
--color-darker: #1b1f23;
|
|
--color-dark: #1f2428;
|
|
--color-darkless: #2f363d;
|
|
--color-red: #ea4a5a;
|
|
--color-orange: #ffab70;
|
|
--color-yellow: #ffea7f;
|
|
--color-green: #34d058;
|
|
--color-cyan: #39c5cf;
|
|
--color-blue: #79b8ff;
|
|
--color-purple: #b392f0;
|
|
--color-primary: #0366d6;
|
|
--color-secondary: #959da5;
|
|
--color-muted: #959da5;
|
|
--color-text-muted: #959da5;
|
|
--color-surface: #24292e;
|
|
--color-surface-100: #2b3036;
|
|
--color-surface-200: #39414a;
|
|
--color-surface-300: #444d56;
|
|
--color-surface-content: #e1e4e8;
|
|
--color-info: #79b8ff;
|
|
--color-success: #34d058;
|
|
--color-warning: #ffab70;
|
|
--color-danger: #ea4a5a;
|
|
}
|
|
|
|
html[data-theme="github_light"] {
|
|
--app-color-scheme: light;
|
|
--color-on-primary: #ffffff;
|
|
--color-darker: #d1d5da;
|
|
--color-dark: #e1e4e8;
|
|
--color-darkless: #f6f8fa;
|
|
--color-red: #d73a49;
|
|
--color-orange: #e36209;
|
|
--color-yellow: #f9c513;
|
|
--color-green: #28a745;
|
|
--color-cyan: #3192aa;
|
|
--color-blue: #2188ff;
|
|
--color-purple: #6f42c1;
|
|
--color-primary: #2188ff;
|
|
--color-secondary: #586069;
|
|
--color-muted: #6a737d;
|
|
--color-text-muted: #6a737d;
|
|
--color-surface: #ffffff;
|
|
--color-surface-100: #f6f8fa;
|
|
--color-surface-200: #e1e4e8;
|
|
--color-surface-300: #d1d5da;
|
|
--color-surface-content: #24292e;
|
|
--color-info: #0366d6;
|
|
--color-success: #28a745;
|
|
--color-warning: #e36209;
|
|
--color-danger: #d73a49;
|
|
}
|
|
|
|
html[data-theme="nord"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #2e3440;
|
|
--color-darker: #2e3440;
|
|
--color-dark: #3b4252;
|
|
--color-darkless: #434c5e;
|
|
--color-red: #bf616a;
|
|
--color-orange: #d08770;
|
|
--color-yellow: #ebcb8b;
|
|
--color-green: #a3be8c;
|
|
--color-cyan: #8fbcbb;
|
|
--color-blue: #81a1c1;
|
|
--color-purple: #b48ead;
|
|
--color-primary: #88c0d0;
|
|
--color-secondary: #d8dee9;
|
|
--color-muted: #d8dee9;
|
|
--color-text-muted: #d8dee9;
|
|
--color-surface: #3b4252;
|
|
--color-surface-100: #434c5e;
|
|
--color-surface-200: #4c566a;
|
|
--color-surface-300: #5e6878;
|
|
--color-surface-content: #e5e9f0;
|
|
--color-info: #81a1c1;
|
|
--color-success: #a3be8c;
|
|
--color-warning: #ebcb8b;
|
|
--color-danger: #bf616a;
|
|
}
|
|
|
|
html[data-theme="rose"] {
|
|
--app-color-scheme: dark;
|
|
--color-on-primary: #191724;
|
|
--color-darker: #191724;
|
|
--color-dark: #1f1d2e;
|
|
--color-darkless: #26233a;
|
|
--color-red: #eb6f92;
|
|
--color-orange: #f6c177;
|
|
--color-yellow: #f6c177;
|
|
--color-green: #31748f;
|
|
--color-cyan: #9ccfd8;
|
|
--color-blue: #c4a7e7;
|
|
--color-purple: #c4a7e7;
|
|
--color-primary: #eb6f92;
|
|
--color-secondary: #908caa;
|
|
--color-muted: #908caa;
|
|
--color-text-muted: #908caa;
|
|
--color-surface: #1f1d2e;
|
|
--color-surface-100: #26233a;
|
|
--color-surface-200: #312f44;
|
|
--color-surface-300: #3d3b52;
|
|
--color-surface-content: #e0def4;
|
|
--color-info: #9ccfd8;
|
|
--color-success: #31748f;
|
|
--color-warning: #f6c177;
|
|
--color-danger: #eb6f92;
|
|
}
|
|
|
|
html[data-theme="rose_pine_dawn"] {
|
|
--app-color-scheme: light;
|
|
--color-on-primary: #fffaf3;
|
|
--color-darker: #dfdad9;
|
|
--color-dark: #f2e9e1;
|
|
--color-darkless: #cecacd;
|
|
--color-red: #aa586f;
|
|
--color-orange: #a35a00;
|
|
--color-yellow: #a35a00;
|
|
--color-green: #286983;
|
|
--color-cyan: #56949f;
|
|
--color-blue: #907aa9;
|
|
--color-purple: #907aa9;
|
|
--color-primary: #aa586f;
|
|
--color-secondary: #5e5977;
|
|
--color-muted: #5e5977;
|
|
--color-text-muted: #5e5977;
|
|
--color-surface: #faf4ed;
|
|
--color-surface-100: #f2e9e1;
|
|
--color-surface-200: #c3bbb8;
|
|
--color-surface-300: #cecacd;
|
|
--color-surface-content: #575279;
|
|
--color-info: #56949f;
|
|
--color-success: #286983;
|
|
--color-warning: #a35a00;
|
|
--color-danger: #aa586f;
|
|
}
|
|
|
|
html[data-theme="rose_pine_dawn"] body {
|
|
background-color: #FCF2E9;
|
|
}
|
|
|
|
.project-toggle-group {
|
|
@apply flex items-center gap-2 rounded-lg p-1;
|
|
background-color: var(--color-darkless);
|
|
}
|
|
|
|
.project-toggle-btn {
|
|
@apply px-3 py-1 rounded transition-all duration-200 font-medium cursor-pointer;
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.project-toggle-btn:hover {
|
|
color: var(--color-cyan);
|
|
}
|
|
|
|
.project-toggle-btn.active {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.project-toggle-btn.active:hover {
|
|
background-color: var(--color-primary);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.project-toggle-btn.inactive {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.interval-selector-button {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.interval-selector-button:hover {
|
|
background-color: var(--color-primary);
|
|
opacity: 0.9;
|
|
}
|