jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stramline template's use and adjust styl.es.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-09 06:45:31 +02:00
parent 77c2827fee
commit e959734973
16 changed files with 1844 additions and 2609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
static/css/style.css
View File

@@ -112,7 +112,7 @@ button {
}
.sidebar:hover {
box-shadow: 0 6px 30px rgba(0,0,0,0.12);
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.15);
}
/* Custom scrollbar for sidebar */
@@ -169,7 +169,7 @@ button {
}
.sidebar-header h2 a:hover {
color: #4CAF50;
color: #667eea;
}
.sidebar-header small {
@@ -229,14 +229,14 @@ button {
.sidebar-nav li a:hover {
background-color: #e9ecef;
border-left-color: #4CAF50;
border-left-color: #667eea;
color: #333;
}
.sidebar-nav li a.active {
background-color: #e8f5e9;
border-left-color: #4CAF50;
color: #2e7d32;
background-color: rgba(102, 126, 234, 0.1);
border-left-color: #667eea;
color: #5569d6;
font-weight: 600;
}
@@ -366,7 +366,7 @@ body:has(.sidebar.collapsed) .main-content {
}
.feature h3 {
color: #4CAF50;
color: #667eea;
margin-top: 0;
}
@@ -457,8 +457,10 @@ button {
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
background-color: #5569d6;
border-color: #5569d6;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.btn-secondary {
@@ -470,6 +472,8 @@ button {
.btn-secondary:hover {
background-color: #545b62;
border-color: #545b62;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-success {
@@ -481,6 +485,8 @@ button {
.btn-success:hover {
background-color: #218838;
border-color: #218838;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-danger {
@@ -492,6 +498,8 @@ button {
.btn-danger:hover {
background-color: #c82333;
border-color: #c82333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-warning {
@@ -503,6 +511,8 @@ button {
.btn-warning:hover {
background-color: #e0a800;
border-color: #e0a800;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-info {
@@ -514,6 +524,8 @@ button {
.btn-info:hover {
background-color: #138496;
border-color: #138496;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
/* Button Outline Variants */
@@ -524,8 +536,11 @@ button {
}
.btn-outline:hover {
background-color: #007bff;
background-color: #667eea;
color: white;
border-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
/* Special Button Styles */
@@ -539,7 +554,9 @@ button {
.btn-filter:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
border-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
.btn-filter.active {
@@ -551,7 +568,7 @@ button {
/* Generic Button Hover */
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
footer {
@@ -600,7 +617,7 @@ footer {
}
.footer-links a:hover {
color: var(--primary-color);
color: #667eea;
}
.footer-separator {
@@ -662,8 +679,8 @@ footer {
}
.email-nag-dismiss:hover {
background-color: rgba(0,0,0,0.1);
color: #333;
background-color: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
@keyframes slideDown {
@@ -748,7 +765,9 @@ body:has(.sidebar.collapsed) footer {
}
.arrive-btn:hover {
background-color: #45a049;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.leave-btn {
@@ -760,6 +779,8 @@ body:has(.sidebar.collapsed) footer {
.leave-btn:hover {
background-color: #d32f2f;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.time-history {
@@ -788,7 +809,7 @@ body:has(.sidebar.collapsed) footer {
}
.time-history tr:hover {
background-color: #f5f5f5;
background-color: rgba(102, 126, 234, 0.05);
}
.button-group {
@@ -807,6 +828,8 @@ body:has(.sidebar.collapsed) footer {
.pause-btn:hover {
background-color: #f57c00;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.resume-btn {
@@ -817,7 +840,9 @@ body:has(.sidebar.collapsed) footer {
}
.resume-btn:hover {
background-color: #1976D2;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.break-info {
@@ -971,7 +996,9 @@ body:has(.sidebar.collapsed) footer {
}
.edit-entry-btn:hover {
background-color: #0b7dda;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.delete-entry-btn {
@@ -981,6 +1008,8 @@ body:has(.sidebar.collapsed) footer {
.delete-entry-btn:hover {
background-color: #d32f2f;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
input[type="date"], input[type="time"] {
@@ -1037,8 +1066,8 @@ input[type="time"]::-webkit-datetime-edit {
}
.admin-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.15);
}
.admin-card h2 {
@@ -1113,11 +1142,11 @@ input[type="time"]::-webkit-datetime-edit {
}
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
background-color: rgba(102, 126, 234, 0.15);
}
.checkbox-container input:checked ~ .checkmark {
background-color: #2196F3;
background-color: #667eea;
}
.checkmark:after {
@@ -1171,7 +1200,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.data-table tr:hover {
background-color: #f5f5f5;
background-color: rgba(102, 126, 234, 0.05);
}
/* Team Hours Page Styles */
@@ -1266,16 +1295,16 @@ input[type="time"]::-webkit-datetime-edit {
.export-section:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
}
.export-section h3 {
color: #4CAF50;
color: #667eea;
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 600;
border-bottom: 2px solid #4CAF50;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}
@@ -1296,7 +1325,7 @@ input[type="time"]::-webkit-datetime-edit {
.quick-export-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
}
.export-button-container {
@@ -1305,7 +1334,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.export-button-container .btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 2rem;
font-size: 1.1rem;
@@ -1314,13 +1343,13 @@ input[type="time"]::-webkit-datetime-edit {
display: inline-block;
transition: all 0.2s ease;
font-weight: 600;
box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}
.export-button-container .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
/* Custom date range form styling */
@@ -1348,8 +1377,8 @@ input[type="time"]::-webkit-datetime-edit {
.export-section .form-group input:focus,
.export-section .form-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Team Hours Export Styling */
@@ -1364,7 +1393,7 @@ input[type="time"]::-webkit-datetime-edit {
}
#export-buttons h4 {
color: #4CAF50;
color: #667eea;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
@@ -1387,7 +1416,7 @@ input[type="time"]::-webkit-datetime-edit {
#export-buttons .quick-export-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
}
/* Responsive Design for Sidebar Navigation */
@media (max-width: 1024px) {
@@ -1528,14 +1557,14 @@ input[type="time"]::-webkit-datetime-edit {
}
.mode-btn.active {
background: #4CAF50;
background: #667eea;
color: white;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.mode-btn:hover:not(.active) {
background: #e9ecef;
color: #495057;
background: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
.filter-panel {
@@ -1579,8 +1608,8 @@ input[type="time"]::-webkit-datetime-edit {
.filter-group input:focus,
.filter-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.view-tabs {
@@ -1603,14 +1632,14 @@ input[type="time"]::-webkit-datetime-edit {
}
.tab-btn.active {
color: #4CAF50;
border-bottom-color: #4CAF50;
background: rgba(76, 175, 80, 0.05);
color: #667eea;
border-bottom-color: #667eea;
background: rgba(102, 126, 234, 0.05);
}
.tab-btn:hover:not(.active) {
color: #495057;
background: rgba(0, 0, 0, 0.05);
color: #5569d6;
background: rgba(102, 126, 234, 0.05);
}
.view-content {
@@ -1700,7 +1729,7 @@ input[type="time"]::-webkit-datetime-edit {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 4px solid #4CAF50;
border-left: 4px solid #667eea;
}
.stat-card h4 {
@@ -1796,8 +1825,8 @@ input[type="time"]::-webkit-datetime-edit {
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Responsive Design for Analytics */
@@ -2031,7 +2060,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.view-btn:hover:not(.active) {
background: #e9ecef;
background: rgba(102, 126, 234, 0.1);
}
/* Statistics Cards */
@@ -2165,7 +2194,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.management-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
@@ -2289,7 +2318,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.card-header {
@@ -2362,7 +2391,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.widget:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}
.widget-header {
@@ -2549,8 +2578,8 @@ input[type="time"]::-webkit-datetime-edit {
}
.user-dropdown-toggle:hover {
background-color: #e9ecef;
color: #333;
background-color: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
/* Removed nav-icon style as we're using avatar instead */
@@ -2643,7 +2672,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.user-dropdown-menu a:hover {
background-color: #f0f0f0;
background-color: rgba(102, 126, 234, 0.1);
}
.user-dropdown-menu .nav-icon {