afedac7d32
- Renamed `due_date` field on Task struct to `date` (Rust, TypeScript, all usages) - Renamed `group_by_due_date` field on TaskList/ListMetadata to `group_by_date` - Renamed `set_group_by_due_date`/`get_group_by_due_date` methods to `set_group_by_date`/`get_group_by_date` in repository, Tauri commands, and JS store - Renamed `with_due_date()` builder method to `with_date()` - Renamed `parse_due_date` CLI function to `parse_date` - Updated UI text "Group by due date" → "Group by date" in TasksScreen.svelte kebab menu - Renamed JS variables `dueDate`/`dueDateHasTime` → `date`/`dateHasTime` in NewTaskInput.svelte - Updated all test names and assertions across models.rs and repository.rs - Updated CLAUDE.md documentation to use "date" terminology consistently Close kebab menu when toggling subtasks When toggling the "show subtasks" option from the main panel kebab menu, the menu remained open which could obscure UI and lead to unexpected interactions. Ensure that opening/closing the subtasks list also closes the kebab (showListMenu = false) so the menu is dismissed when the user chooses to view subtasks. can we animate opening and closing of the kebab menus? Also, lets move the "NO DATE" section when selecting Group By Date to the top of the list before OVERDUE - app.css: added CSS @starting-style + display transition on .dropdown-menu for open/close scale+fade animation - app.svelte.ts: moved "No Date" group to the top (before "Overdue") in groupedPendingTasks
297 lines
7.6 KiB
CSS
297 lines
7.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--color-primary: #2d87b8;
|
|
--color-primary-hover: #2474a0;
|
|
--color-surface-light: #ffffff;
|
|
--color-surface-dark: #242424;
|
|
--color-card-light: #f9fafb;
|
|
--color-card-dark: #303030;
|
|
--color-text-light: #1f2937;
|
|
--color-text-dark: #e5e7eb;
|
|
--color-text-secondary-light: #6b7280;
|
|
--color-text-secondary-dark: #9ca3af;
|
|
--color-border-light: #e5e7eb;
|
|
--color-border-dark: #3d3d3d;
|
|
--color-danger: #ef4444;
|
|
}
|
|
|
|
:root {
|
|
font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html {
|
|
background: transparent;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Safe area CSS variable — content elements opt into this, overlays don't */
|
|
:root {
|
|
--safe-top: env(safe-area-inset-top);
|
|
--safe-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.linux-window-border {
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.dark .linux-window-border {
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #d1d5db transparent;
|
|
}
|
|
.dark * {
|
|
scrollbar-color: #4b5563 transparent;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 2px;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #4b5563;
|
|
}
|
|
|
|
/* Select dropdown theming */
|
|
.dark select option {
|
|
background-color: #242424;
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
/* ── Theme overrides ─────────────────────────────────────────────── */
|
|
|
|
[data-theme="light"] {
|
|
--color-primary: #2d87b8;
|
|
--color-primary-hover: #2474a0;
|
|
--color-surface-light: #ffffff;
|
|
--color-surface-dark: #ffffff;
|
|
--color-card-light: #f9fafb;
|
|
--color-card-dark: #f9fafb;
|
|
--color-text-light: #1f2937;
|
|
--color-text-dark: #1f2937;
|
|
--color-text-secondary-light: #6b7280;
|
|
--color-text-secondary-dark: #6b7280;
|
|
--color-border-light: #e5e7eb;
|
|
--color-border-dark: #e5e7eb;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-primary: #2d87b8;
|
|
--color-primary-hover: #2474a0;
|
|
--color-surface-light: #242424;
|
|
--color-surface-dark: #242424;
|
|
--color-card-light: #303030;
|
|
--color-card-dark: #303030;
|
|
--color-text-light: #e5e7eb;
|
|
--color-text-dark: #e5e7eb;
|
|
--color-text-secondary-light: #9ca3af;
|
|
--color-text-secondary-dark: #9ca3af;
|
|
--color-border-light: #3d3d3d;
|
|
--color-border-dark: #3d3d3d;
|
|
}
|
|
|
|
[data-theme="nord"] {
|
|
--color-primary: #88c0d0;
|
|
--color-primary-hover: #7ab3c3;
|
|
--color-surface-light: #2e3440;
|
|
--color-surface-dark: #2e3440;
|
|
--color-card-light: #3b4252;
|
|
--color-card-dark: #3b4252;
|
|
--color-text-light: #eceff4;
|
|
--color-text-dark: #eceff4;
|
|
--color-text-secondary-light: #d8dee9;
|
|
--color-text-secondary-dark: #d8dee9;
|
|
--color-border-light: #434c5e;
|
|
--color-border-dark: #434c5e;
|
|
--color-danger: #bf616a;
|
|
}
|
|
|
|
[data-theme="dracula"] {
|
|
--color-primary: #bd93f9;
|
|
--color-primary-hover: #a87ef0;
|
|
--color-surface-light: #282a36;
|
|
--color-surface-dark: #282a36;
|
|
--color-card-light: #343746;
|
|
--color-card-dark: #343746;
|
|
--color-text-light: #f8f8f2;
|
|
--color-text-dark: #f8f8f2;
|
|
--color-text-secondary-light: #bfbfbf;
|
|
--color-text-secondary-dark: #bfbfbf;
|
|
--color-border-light: #44475a;
|
|
--color-border-dark: #44475a;
|
|
--color-danger: #ff5555;
|
|
}
|
|
|
|
[data-theme="onyx"] {
|
|
--color-primary: #f5ecd0;
|
|
--color-primary-hover: #e0d5b3;
|
|
--color-surface-light: #141414;
|
|
--color-surface-dark: #141414;
|
|
--color-card-light: #1e1e1e;
|
|
--color-card-dark: #1e1e1e;
|
|
--color-text-light: #d1bf82;
|
|
--color-text-dark: #d1bf82;
|
|
--color-text-secondary-light: #a6905a;
|
|
--color-text-secondary-dark: #a6905a;
|
|
--color-border-light: #5c4d2e;
|
|
--color-border-dark: #5c4d2e;
|
|
--color-danger: #ef4444;
|
|
}
|
|
|
|
[data-theme="onyx"] * {
|
|
scrollbar-color: #a6905a transparent;
|
|
}
|
|
[data-theme="onyx"] ::-webkit-scrollbar-thumb {
|
|
background: #a6905a;
|
|
}
|
|
[data-theme="onyx"] select option {
|
|
background-color: #141414;
|
|
color: #d1bf82;
|
|
}
|
|
|
|
/* Dark text/icons on primary buttons/FAB */
|
|
[data-theme="onyx"] .bg-primary,
|
|
[data-theme="onyx"] .bg-primary .text-white {
|
|
color: #141414;
|
|
}
|
|
|
|
/* FAB: match text gold instead of cream primary */
|
|
[data-theme="onyx"] .rounded-full.bg-primary.shadow-lg {
|
|
background-color: #d1bf82;
|
|
}
|
|
|
|
/* Checkbox borders: gold instead of gray */
|
|
[data-theme="onyx"] .border-gray-400,
|
|
[data-theme="onyx"] .border-gray-500 {
|
|
border-color: #a6905a;
|
|
}
|
|
|
|
/* Hover/focus highlights: gold tint instead of white */
|
|
[data-theme="onyx"] .dark\:hover\:bg-white\/10:hover,
|
|
[data-theme="onyx"] .dark\:hover\:bg-white\/5:hover,
|
|
[data-theme="onyx"] .dark\:bg-white\/10 {
|
|
background-color: rgb(209 191 130 / 0.1);
|
|
}
|
|
|
|
/* Linux window border */
|
|
[data-theme="onyx"] .linux-window-border {
|
|
border-color: rgba(209, 191, 130, 0.15);
|
|
}
|
|
|
|
|
|
[data-theme="solarized"] {
|
|
--color-primary: #268bd2;
|
|
--color-primary-hover: #1e7ac0;
|
|
--color-surface-light: #002b36;
|
|
--color-surface-dark: #002b36;
|
|
--color-card-light: #073642;
|
|
--color-card-dark: #073642;
|
|
--color-text-light: #93a1a1;
|
|
--color-text-dark: #93a1a1;
|
|
--color-text-secondary-light: #657b83;
|
|
--color-text-secondary-dark: #657b83;
|
|
--color-border-light: #094959;
|
|
--color-border-dark: #094959;
|
|
--color-danger: #dc322f;
|
|
}
|
|
|
|
|
|
/* ── Ink (e-ink screen) theme ────────────────────────────────────── */
|
|
|
|
[data-theme="ink"] {
|
|
--color-primary: #000000;
|
|
--color-primary-hover: #1a1a1a;
|
|
--color-surface-light: #ffffff;
|
|
--color-surface-dark: #ffffff;
|
|
--color-card-light: #f0f0f0;
|
|
--color-card-dark: #f0f0f0;
|
|
--color-text-light: #000000;
|
|
--color-text-dark: #000000;
|
|
--color-text-secondary-light: #444444;
|
|
--color-text-secondary-dark: #444444;
|
|
--color-border-light: #000000;
|
|
--color-border-dark: #000000;
|
|
--color-danger: #000000;
|
|
}
|
|
|
|
/* Suppress all shadows and decorative effects on ink screens */
|
|
[data-theme="ink"] * {
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
scrollbar-color: #444444 transparent;
|
|
}
|
|
[data-theme="ink"] ::-webkit-scrollbar-thumb {
|
|
background: #444444;
|
|
}
|
|
[data-theme="ink"] select option {
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
}
|
|
[data-theme="ink"] .linux-window-border {
|
|
border-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* ── Dropdown/kebab menu shadow + open/close animation ───────────── */
|
|
|
|
.menu-shadow {
|
|
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.dark .menu-shadow {
|
|
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
transition: opacity 120ms ease, transform 120ms ease, display 120ms ease allow-discrete;
|
|
transform-origin: top right;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
transform: scale(0.92);
|
|
}
|
|
}
|
|
|
|
/* ── Borderless mode: square corners on all popups/overlays ─────── */
|
|
|
|
.decorations-none .rounded-sm,
|
|
.decorations-none .rounded,
|
|
.decorations-none .rounded-md,
|
|
.decorations-none .rounded-lg,
|
|
.decorations-none .rounded-xl,
|
|
.decorations-none .rounded-2xl,
|
|
.decorations-none .rounded-3xl,
|
|
.decorations-none .dropdown-menu button {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* ── Accessibility: Reduced motion ───────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|