diff --git a/assets/css/custom.css b/assets/css/custom.css
index 024b070..385942d 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,26 +1,26 @@
:root {
- --bg: #f6f8fa;
+ --bg: #f8f9fb;
--surface: #ffffff;
- --surface-muted: #f6f8fa;
- --surface-soft: #fafff8;
- --border: #d0d7de;
- --border-strong: #8c959f;
+ --surface-muted: #fbfcfd;
+ --surface-soft: #ffffff;
+ --border: #d8dee4;
+ --border-strong: #b8c0c8;
--text: #1f2328;
- --text-muted: #57606a;
- --text-soft: #6e7781;
- --accent: #2da44e;
- --accent-dark: #1f883d;
+ --text-muted: #5f6b76;
+ --text-soft: #7a8591;
+ --accent: #1f883d;
+ --accent-dark: #176f32;
--accent-contrast: #ffffff;
--accent-blue: #0969da;
- --accent-blue-soft: #ddf4ff;
- --nav-bg: #0d1117;
- --nav-text: #f0f6fc;
+ --accent-blue-soft: #f5f9ff;
+ --nav-bg: #ffffff;
+ --nav-text: #1f2328;
--success: #1a7f37;
--danger: #cf222e;
- --shadow: 0 1px 0 rgba(27, 31, 36, 0.04), 0 8px 24px rgba(140, 149, 159, 0.18);
- --radius-sm: 10px;
- --radius-md: 14px;
- --radius-lg: 18px;
+ --shadow: 0 1px 2px rgba(31, 35, 40, 0.03);
+ --radius-sm: 6px;
+ --radius-md: 10px;
+ --radius-lg: 12px;
}
html {
@@ -28,36 +28,35 @@ html {
}
body {
- background:
- radial-gradient(circle at top left, rgba(45, 164, 78, 0.08), transparent 26%),
- radial-gradient(circle at top right, rgba(9, 105, 218, 0.08), transparent 22%),
- var(--bg);
+ background: var(--bg);
color: var(--text);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
text-rendering: optimizeLegibility;
+ font-size: 0.96rem;
}
.app-header {
- background: rgba(13, 17, 23, 0.92);
- backdrop-filter: blur(12px);
- border-bottom-color: rgba(240, 246, 252, 0.08) !important;
+ background: #ffffff;
+ backdrop-filter: none;
+ border-bottom-color: var(--border) !important;
}
.navbar {
- min-height: 72px;
+ min-height: 56px;
}
.brand-mark {
- width: 36px;
- height: 36px;
- border-radius: 11px;
+ width: 30px;
+ height: 30px;
+ border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
- background: linear-gradient(135deg, var(--accent) 0%, var(--accent-blue) 100%);
- color: var(--accent-contrast);
- font-size: 1rem;
- box-shadow: 0 10px 22px rgba(9, 105, 218, 0.22);
+ background: #ffffff;
+ color: var(--text-muted);
+ font-size: 0.95rem;
+ border: 1px solid var(--border);
+ box-shadow: none;
}
.brand-title {
@@ -69,17 +68,15 @@ body {
}
.brand-subtitle {
- color: rgba(240, 246, 252, 0.72);
- font-size: 0.76rem;
- line-height: 1.2;
+ display: none !important;
}
.panel {
- background: rgba(255, 255, 255, 0.94);
+ background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
- padding: 1.25rem;
+ padding: 1rem;
}
.panel-hero {
@@ -87,12 +84,12 @@ body {
}
.eyebrow {
- color: var(--text-muted);
+ color: var(--text-soft);
text-transform: uppercase;
letter-spacing: 0.08em;
- font-size: 0.71rem;
+ font-size: 0.68rem;
font-weight: 700;
- margin-bottom: 0.85rem;
+ margin-bottom: 0.5rem;
}
.hero-title,
@@ -118,10 +115,10 @@ body {
.status-badge {
display: inline-flex;
align-items: center;
- gap: 0.4rem;
- padding: 0.42rem 0.7rem;
+ gap: 0.35rem;
+ padding: 0.34rem 0.62rem;
border-radius: 999px;
- font-size: 0.78rem;
+ font-size: 0.75rem;
font-weight: 600;
border: 1px solid var(--border);
background: var(--surface-muted);
@@ -145,20 +142,24 @@ body {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
- height: 4px;
- background: linear-gradient(90deg, var(--accent), var(--accent-blue));
+ height: 1px;
+ background: var(--border-strong);
+}
+
+.stat-card-total::before {
+ background: #8c959f;
}
.stat-card-active::before {
- background: linear-gradient(90deg, var(--accent-blue), #54aeff);
+ background: var(--accent-blue);
}
.stat-card-done::before {
- background: linear-gradient(90deg, var(--accent), #7ee787);
+ background: var(--accent);
}
.stat-card-urgent::before {
- background: linear-gradient(90deg, #fb8500, #f2cc60);
+ background: #fb8500;
}
.stat-label,
@@ -185,15 +186,16 @@ body {
}
.stat-note {
- font-size: 0.85rem;
+ font-size: 0.8rem;
+ color: var(--text-soft);
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
- gap: 1rem;
- margin-bottom: 1rem;
+ gap: 0.75rem;
+ margin-bottom: 0.85rem;
}
.panel-header-stack {
@@ -201,8 +203,8 @@ body {
}
.panel-title {
- font-size: 1.15rem;
- font-weight: 700;
+ font-size: 1.05rem;
+ font-weight: 650;
}
.form-control,
@@ -217,43 +219,44 @@ body {
.form-select,
.input-group-text {
border-color: var(--border);
- min-height: 46px;
+ min-height: 42px;
background: #fff;
}
.form-control:focus,
.form-select:focus {
border-color: var(--accent-blue);
- box-shadow: 0 0 0 0.2rem rgba(9, 105, 218, 0.14);
+ box-shadow: 0 0 0 0.14rem rgba(9, 105, 218, 0.1);
}
.btn {
font-weight: 600;
box-shadow: none !important;
+ border-width: 1px;
}
.btn-dark {
- background: linear-gradient(180deg, #3fb950 0%, var(--accent) 100%);
- border-color: var(--accent-dark);
+ background: var(--accent);
+ border-color: var(--accent);
color: var(--accent-contrast);
}
.btn-dark:hover,
.btn-dark:focus {
- background: linear-gradient(180deg, #2ea043 0%, var(--accent-dark) 100%);
- border-color: #1a7f37;
+ background: var(--accent-dark);
+ border-color: var(--accent-dark);
color: var(--accent-contrast);
}
.btn-light {
- background: #f6f8fa;
+ background: #fff;
border-color: var(--border);
color: var(--text);
}
.btn-light:hover,
.btn-light:focus {
- background: #eef2f6;
+ background: #ffffff;
border-color: var(--border-strong);
color: var(--text);
}
@@ -265,20 +268,21 @@ body {
.btn-filter {
border: 1px solid var(--border);
- background: var(--surface-muted);
+ background: #fff;
color: var(--text);
padding-inline: 0.9rem;
}
.btn-filter:hover {
- border-color: var(--accent-blue);
- color: var(--accent-blue);
+ border-color: var(--border-strong);
+ color: var(--text);
+ background: #ffffff;
}
.btn-check:checked + .btn-filter {
- background: var(--accent-blue-soft);
+ background: #ffffff;
color: var(--accent-blue);
- border-color: #b6e3ff;
+ border-color: #b7c7da;
}
.sort-select {
@@ -295,10 +299,10 @@ body {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-md);
- padding: 1rem;
+ padding: 0.9rem;
background: #fff;
cursor: pointer;
- transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
+ transition: border-color 0.16s ease, background-color 0.16s ease;
}
.task-item:focus-visible {
@@ -308,46 +312,45 @@ body {
}
.task-item:hover {
- border-color: var(--accent-blue);
- box-shadow: 0 12px 24px rgba(9, 105, 218, 0.08);
- background: #fbfdff;
- transform: translateY(-1px);
+ border-color: var(--border-strong);
+ box-shadow: none;
+ background: #fff;
}
.task-item-active {
- border-color: var(--accent-blue);
- box-shadow: inset 3px 0 0 var(--accent-blue), 0 0 0 1px rgba(9, 105, 218, 0.08);
- background: #f9fcff;
+ border-color: #b6c8db;
+ box-shadow: inset 2px 0 0 var(--accent-blue);
+ background: #ffffff;
}
.task-item-done {
- background: #f6fff8;
+ background: #ffffff;
}
.check-button {
- width: 38px;
- height: 38px;
- border-radius: 50%;
+ width: 34px;
+ height: 34px;
+ border-radius: 8px;
border: 1px solid var(--border);
background: #fff;
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
- font-size: 1.05rem;
+ font-size: 1rem;
}
.check-button:hover {
border-color: var(--accent);
color: var(--accent);
- background: #f6fff8;
+ background: #fff;
}
.task-title-link {
- font-weight: 700;
+ font-weight: 600;
color: var(--text);
text-decoration: none;
- font-size: 0.97rem;
+ font-size: 0.96rem;
}
.task-title-link:hover {
@@ -357,7 +360,7 @@ body {
.task-snippet,
.detail-description {
color: var(--text-muted);
- line-height: 1.55;
+ line-height: 1.5;
}
.task-item-done .task-title-link,
@@ -378,38 +381,38 @@ body {
}
.priority-high {
- background: #fef2f2;
- color: #991b1b;
- border-color: #fecaca;
+ background: #ffffff;
+ color: #b42318;
+ border-color: #f0c7c7;
}
.priority-medium {
- background: #fff8c5;
+ background: #ffffff;
color: #9a6700;
- border-color: #eedb85;
+ border-color: #ead9a2;
}
.priority-low {
- background: #dafbe1;
+ background: #ffffff;
color: #1a7f37;
- border-color: #aceebb;
+ border-color: #c9e7cf;
}
.status-active {
- background: var(--accent-blue-soft);
+ background: #ffffff;
color: var(--accent-blue);
- border-color: #b6e3ff;
+ border-color: #c7d7ea;
}
.status-done {
- background: #dafbe1;
+ background: #ffffff;
color: var(--success);
- border-color: #aceebb;
+ border-color: #c9e7cf;
}
.icon-button {
- width: 36px;
- height: 36px;
+ width: 34px;
+ height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
@@ -426,46 +429,46 @@ body {
}
.detail-title {
- font-size: 1.35rem;
- margin-bottom: 0.7rem;
+ font-size: 1.2rem;
+ margin-bottom: 0.55rem;
}
.detail-block {
- padding: 0.9rem 1rem;
+ padding: 0.8rem 0.9rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
- background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
+ background: #ffffff;
}
.detail-value {
- margin-top: 0.3rem;
- font-weight: 600;
+ margin-top: 0.25rem;
+ font-weight: 500;
}
.empty-state {
- border: 1px dashed var(--border-strong);
+ border: 1px solid var(--border);
border-radius: var(--radius-md);
- background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
- padding: 1.25rem;
+ background: #ffffff;
+ padding: 1rem;
}
.empty-icon {
- width: 54px;
- height: 54px;
+ width: 42px;
+ height: 42px;
margin-inline: auto;
- border-radius: 50%;
+ border-radius: 10px;
background: #fff;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
- font-size: 1.35rem;
+ font-size: 1rem;
color: var(--text-muted);
}
.toast {
- border-radius: 12px;
- box-shadow: 0 18px 36px rgba(13, 17, 23, 0.16);
+ border-radius: 10px;
+ box-shadow: 0 6px 14px rgba(31, 35, 40, 0.08);
}
.stretched-link-reset {
@@ -480,7 +483,7 @@ body {
}
::-webkit-scrollbar {
- width: 10px;
+ width: 8px;
}
::-webkit-scrollbar-thumb {
@@ -503,7 +506,7 @@ body {
@media (max-width: 767.98px) {
.panel,
.panel-hero {
- padding: 1rem;
+ padding: 0.9rem;
}
.hero-title {
diff --git a/index.php b/index.php
index 71a275d..ffd7f7c 100644
--- a/index.php
+++ b/index.php
@@ -362,7 +362,7 @@ $assetVersion = (string) @filemtime(__DIR__ . '/assets/css/custom.css');
-
+