mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-08 04:30:20 -06:00
style(ui): soften button hover effects across app
- Reduce global .btn:hover lift (no translate) and lighten shadow (0 2px 6px @ 0.08); trim overlay to 0.35 - Tone down .btn-primary/.btn-success/.btn-danger hover lift and shadows - Align inline .btn:hover in templates (tasks view/edit/create, my_tasks, projects create) - Preserve focus states and dark mode; no functional changes Files: - app/static/base.css - app/templates/tasks/view.html - app/templates/tasks/edit.html - app/templates/tasks/create.html - app/templates/tasks/my_tasks.html - templates/projects/create.html
This commit is contained in:
@@ -532,7 +532,7 @@ main {
|
||||
}
|
||||
|
||||
.btn:hover::after {
|
||||
opacity: 1;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Button focus states */
|
||||
@@ -553,8 +553,8 @@ main {
|
||||
background: var(--surface-hover) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15) !important;
|
||||
transform: none !important;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
@@ -601,8 +601,8 @@ main {
|
||||
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%) !important;
|
||||
border-color: var(--primary-600) !important;
|
||||
color: var(--text-on-primary) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.18), 0 1px 3px rgba(59, 130, 246, 0.12) !important;
|
||||
}
|
||||
|
||||
.btn-primary:focus {
|
||||
@@ -643,8 +643,8 @@ main {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
|
||||
border-color: #059669 !important;
|
||||
color: var(--text-on-primary) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(16, 185, 129, 0.2) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.18), 0 1px 3px rgba(16, 185, 129, 0.12) !important;
|
||||
}
|
||||
|
||||
/* Danger button styling */
|
||||
@@ -659,7 +659,7 @@ main {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
color: var(--text-on-primary);
|
||||
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
|
||||
box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
|
||||
/* Outline button styling - Enhanced */
|
||||
|
||||
@@ -418,8 +418,8 @@
|
||||
|
||||
/* Hover Effects */
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
transform: none;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.tip-item:hover {
|
||||
|
||||
@@ -453,8 +453,8 @@
|
||||
|
||||
/* Hover Effects */
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
transform: none;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.task-info-item:hover,
|
||||
|
||||
@@ -545,8 +545,8 @@
|
||||
}
|
||||
|
||||
.task-card .btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
transform: none;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Animation for stats cards */
|
||||
|
||||
@@ -654,8 +654,8 @@
|
||||
[data-theme="dark"] .card.mobile-card .card-header h6 { color: #e5e7eb; }
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
transform: none;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
@@ -358,8 +358,8 @@
|
||||
|
||||
/* Hover Effects */
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
transform: none;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.tip-item:hover {
|
||||
|
||||
Reference in New Issue
Block a user