390 lines
10 KiB
CSS
390 lines
10 KiB
CSS
/* ===================================================================
|
|
TIMETRACK HOVER STANDARDS
|
|
Consistent hover states based on primary gradient colors
|
|
Primary: #667eea to #764ba2
|
|
=================================================================== */
|
|
|
|
:root {
|
|
/* Primary gradient colors */
|
|
--primary-gradient-start: #667eea;
|
|
--primary-gradient-end: #764ba2;
|
|
--primary-color: #667eea;
|
|
|
|
/* Hover color variations */
|
|
--hover-primary: #5569d6; /* Darker primary for hover */
|
|
--hover-primary-dark: #4a5bc8; /* Even darker primary */
|
|
--hover-secondary: #6a4195; /* Darker gradient end */
|
|
|
|
/* Background hover colors */
|
|
--hover-bg-light: rgba(102, 126, 234, 0.05); /* 5% primary */
|
|
--hover-bg-medium: rgba(102, 126, 234, 0.1); /* 10% primary */
|
|
--hover-bg-strong: rgba(102, 126, 234, 0.15); /* 15% primary */
|
|
|
|
/* Shadow definitions */
|
|
--hover-shadow-light: 0 2px 4px rgba(102, 126, 234, 0.15);
|
|
--hover-shadow-medium: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
--hover-shadow-strong: 0 6px 20px rgba(102, 126, 234, 0.25);
|
|
--hover-shadow-heavy: 0 8px 30px rgba(102, 126, 234, 0.3);
|
|
|
|
/* Transform values */
|
|
--hover-lift-subtle: translateY(-1px);
|
|
--hover-lift-small: translateY(-2px);
|
|
--hover-lift-medium: translateY(-3px);
|
|
--hover-lift-large: translateY(-5px);
|
|
|
|
/* Transition timing */
|
|
--hover-transition-fast: all 0.2s ease;
|
|
--hover-transition-normal: all 0.3s ease;
|
|
--hover-transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ===================================================================
|
|
GLOBAL HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* All links */
|
|
a {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ===================================================================
|
|
BUTTON HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Base button hover */
|
|
.btn {
|
|
transition: var(--hover-transition-normal);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: var(--hover-lift-subtle);
|
|
box-shadow: var(--hover-shadow-light);
|
|
}
|
|
|
|
/* Primary button with gradient */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--hover-primary) 0%, var(--hover-secondary) 100%);
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-color: var(--hover-primary);
|
|
}
|
|
|
|
/* Secondary button */
|
|
.btn-secondary:hover {
|
|
background-color: var(--hover-bg-medium);
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
transform: var(--hover-lift-subtle);
|
|
box-shadow: var(--hover-shadow-light);
|
|
}
|
|
|
|
/* Success button - maintain green but with consistent effects */
|
|
.btn-success:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
/* Danger button - maintain red but with consistent effects */
|
|
.btn-danger:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
/* Outline buttons */
|
|
.btn-outline:hover {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
transform: var(--hover-lift-subtle);
|
|
box-shadow: var(--hover-shadow-light);
|
|
}
|
|
|
|
/* Small buttons */
|
|
.btn-sm:hover {
|
|
transform: var(--hover-lift-subtle);
|
|
box-shadow: var(--hover-shadow-light);
|
|
}
|
|
|
|
/* ===================================================================
|
|
NAVIGATION HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
transition: var(--hover-transition-normal);
|
|
}
|
|
|
|
.sidebar:hover {
|
|
box-shadow: var(--hover-shadow-heavy);
|
|
}
|
|
|
|
/* Sidebar navigation items */
|
|
.sidebar-nav li a {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
.sidebar-nav li a:hover {
|
|
background-color: var(--hover-bg-medium);
|
|
border-left-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Active state should be stronger */
|
|
.sidebar-nav li.active a {
|
|
background-color: var(--hover-bg-strong);
|
|
border-left-color: var(--primary-gradient-end);
|
|
color: var(--primary-gradient-end);
|
|
}
|
|
|
|
/* Top navigation */
|
|
.navbar-nav .nav-link:hover {
|
|
color: var(--primary-color);
|
|
background-color: var(--hover-bg-light);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Dropdown items */
|
|
.dropdown-item:hover {
|
|
background-color: var(--hover-bg-medium);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* ===================================================================
|
|
CARD & PANEL HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Base card hover */
|
|
.card,
|
|
.panel,
|
|
.dashboard-card,
|
|
.admin-card,
|
|
.stat-card {
|
|
transition: var(--hover-transition-normal);
|
|
}
|
|
|
|
.card:hover,
|
|
.panel:hover,
|
|
.dashboard-card:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
}
|
|
|
|
/* Clickable cards get stronger effect */
|
|
.admin-card:hover,
|
|
.clickable-card:hover {
|
|
transform: var(--hover-lift-medium);
|
|
box-shadow: var(--hover-shadow-strong);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Stat cards */
|
|
.stat-card:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-color: var(--hover-bg-strong);
|
|
}
|
|
|
|
/* Management cards */
|
|
.management-card {
|
|
transition: var(--hover-transition-normal);
|
|
}
|
|
|
|
.management-card:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-color: var(--hover-bg-medium);
|
|
}
|
|
|
|
/* ===================================================================
|
|
TABLE HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Table rows */
|
|
.table tbody tr,
|
|
.data-table tbody tr,
|
|
.time-history tbody tr {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
.table tbody tr:hover,
|
|
.data-table tbody tr:hover,
|
|
.time-history tbody tr:hover {
|
|
background-color: var(--hover-bg-light);
|
|
}
|
|
|
|
/* Clickable rows get pointer */
|
|
.clickable-row:hover {
|
|
cursor: pointer;
|
|
background-color: var(--hover-bg-medium);
|
|
}
|
|
|
|
/* ===================================================================
|
|
FORM ELEMENT HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Input fields */
|
|
.form-control,
|
|
.form-select {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
.form-control:hover:not(:focus),
|
|
.form-select:hover:not(:focus) {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 1px var(--hover-bg-light);
|
|
}
|
|
|
|
/* Checkboxes and radios */
|
|
.form-check-input:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px var(--hover-bg-medium);
|
|
}
|
|
|
|
/* ===================================================================
|
|
ICON HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Icon buttons */
|
|
.icon-btn {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
color: var(--primary-color);
|
|
background-color: var(--hover-bg-medium);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Action icons */
|
|
.action-icon:hover {
|
|
color: var(--primary-color);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* ===================================================================
|
|
SPECIAL COMPONENT HOVER STYLES
|
|
=================================================================== */
|
|
|
|
/* Task cards */
|
|
.task-card {
|
|
transition: var(--hover-transition-normal);
|
|
}
|
|
|
|
.task-card:hover {
|
|
transform: var(--hover-lift-subtle);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
/* Note cards */
|
|
.note-card:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-color: var(--hover-bg-strong);
|
|
}
|
|
|
|
/* Export sections */
|
|
.export-section:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-strong);
|
|
}
|
|
|
|
/* Widget hover */
|
|
.widget:hover {
|
|
transform: var(--hover-lift-small);
|
|
box-shadow: var(--hover-shadow-medium);
|
|
border-color: var(--hover-bg-medium);
|
|
}
|
|
|
|
/* Mode buttons */
|
|
.mode-btn:hover:not(.active) {
|
|
background-color: var(--hover-bg-medium);
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Tab buttons */
|
|
.tab-btn:hover:not(.active) {
|
|
background-color: var(--hover-bg-light);
|
|
color: var(--primary-color);
|
|
border-bottom-color: var(--primary-color);
|
|
}
|
|
|
|
/* ===================================================================
|
|
UTILITY HOVER CLASSES
|
|
=================================================================== */
|
|
|
|
/* Add these classes to elements for consistent hover effects */
|
|
.hover-lift:hover {
|
|
transform: var(--hover-lift-small);
|
|
}
|
|
|
|
.hover-lift-large:hover {
|
|
transform: var(--hover-lift-large);
|
|
}
|
|
|
|
.hover-shadow:hover {
|
|
box-shadow: var(--hover-shadow-medium);
|
|
}
|
|
|
|
.hover-shadow-strong:hover {
|
|
box-shadow: var(--hover-shadow-strong);
|
|
}
|
|
|
|
.hover-bg:hover {
|
|
background-color: var(--hover-bg-medium);
|
|
}
|
|
|
|
.hover-primary:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hover-brightness:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* ===================================================================
|
|
ANIMATION UTILITIES
|
|
=================================================================== */
|
|
|
|
/* Smooth all transitions */
|
|
.smooth-transition {
|
|
transition: var(--hover-transition-smooth);
|
|
}
|
|
|
|
/* Quick transitions for responsive feel */
|
|
.quick-transition {
|
|
transition: var(--hover-transition-fast);
|
|
}
|
|
|
|
/* Disable transitions on request */
|
|
.no-transition {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* ===================================================================
|
|
DARK MODE ADJUSTMENTS (if applicable)
|
|
=================================================================== */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--hover-bg-light: rgba(102, 126, 234, 0.1);
|
|
--hover-bg-medium: rgba(102, 126, 234, 0.2);
|
|
--hover-bg-strong: rgba(102, 126, 234, 0.3);
|
|
}
|
|
} |