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

Align styling across different views.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-04 15:29:36 +02:00
committed by Jens Luedicke
parent 6f02affa26
commit 2888e66f49
18 changed files with 189 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
static/css/style.css
View File

@@ -313,6 +313,7 @@ body:has(.sidebar.collapsed) .main-content {
border-radius: 4px;
}
/* Button Base Styles */
button {
background-color: #4CAF50;
color: white;
@@ -320,53 +321,150 @@ button {
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
}
.btn {
padding: 5px 10px;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
text-align: center;
text-decoration: none;
display: inline-block;
transition: all 0.2s ease;
line-height: 1.5;
font-weight: 500;
}
.btn-primary {
background-color: #45a049;
color: white;
margin-bottom: 1rem;
margin-right: 1rem;
margin-left: 1rem;
display: inline-block;
font-size: medium;
/* Button Sizes */
.btn-xs {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
min-width: 50px;
}
.btn-sm {
padding: 5px 10px;
border-radius: 4px;
font-size: small;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
.btn-md {
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 8px;
}
.btn-small {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
margin-right: 0.5rem;
}
/* Button Colors */
.btn-primary {
background-color: #007bff;
color: white;
border: 1px solid #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn-secondary {
background-color: #f44336;
background-color: #6c757d;
color: white;
border: 1px solid #6c757d;
}
.btn-secondary:hover {
background-color: #545b62;
border-color: #545b62;
}
.btn-success {
background-color: #4CAF50;
background-color: #28a745;
color: white;
border: 1px solid #28a745;
}
.btn:hover {
background-color: #45a049;
.btn-success:hover {
background-color: #218838;
border-color: #218838;
}
.btn-danger {
background-color: #f44336;
background-color: #dc3545;
color: white;
border: 1px solid #dc3545;
}
.btn-danger:hover {
background-color: #d32f2f;
background-color: #c82333;
border-color: #c82333;
}
.btn-warning {
background-color: #ffc107;
color: #212529;
border: 1px solid #ffc107;
}
.btn-warning:hover {
background-color: #e0a800;
border-color: #e0a800;
}
.btn-info {
background-color: #17a2b8;
color: white;
border: 1px solid #17a2b8;
}
.btn-info:hover {
background-color: #138496;
border-color: #138496;
}
/* Button Outline Variants */
.btn-outline {
border: 1px solid #007bff;
color: #007bff;
background: transparent;
}
.btn-outline:hover {
background-color: #007bff;
color: white;
}
/* Special Button Styles */
.btn-filter {
padding: 0.5rem 1rem;
border: 1px solid #dee2e6;
background: white;
color: #495057;
border-radius: 4px;
}
.btn-filter:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
}
.btn-filter.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
/* Generic Button Hover */
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
footer {
@@ -390,8 +488,12 @@ body:has(.sidebar.collapsed) footer {
/* Time tracking specific styles */
.timetrack-container {
max-width: 800px;
max-width: 1200px;
margin: 0 auto 3rem auto;
padding: 1.5rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.timer-section {
@@ -437,17 +539,25 @@ body:has(.sidebar.collapsed) footer {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 1rem;
}
.time-history th, .time-history td {
padding: 0.8rem;
text-align: left;
border-bottom: 1px solid #ddd;
min-height: 2.5rem;
vertical-align: middle;
}
.time-history th {
background-color: #f2f2f2;
font-weight: bold;
height: 2.5rem;
}
.time-history tr {
height: 2.5rem;
}
.time-history tr:hover {
@@ -519,12 +629,12 @@ body:has(.sidebar.collapsed) footer {
}
.config-container {
max-width: 800px;
max-width: 1200px;
margin: 0 auto 3rem auto;
padding: 1rem;
background-color: #f9f9f9;
padding: 1.5rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-section {
@@ -668,11 +778,12 @@ input[type="time"]::-webkit-datetime-edit {
/* Admin Dashboard Styles */
.admin-container {
max-width: 1200px;
margin: 0 auto 2rem auto;
padding: 1.5rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.admin-header {
@@ -811,17 +922,25 @@ input[type="time"]::-webkit-datetime-edit {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 1rem;
}
.data-table th, .data-table td {
padding: 0.8rem;
text-align: left;
border-bottom: 1px solid #ddd;
min-height: 2.5rem;
vertical-align: middle;
}
.data-table th {
background-color: #f2f2f2;
font-weight: bold;
height: 2.5rem;
}
.data-table tr {
height: 2.5rem;
}
.data-table tr:hover {
@@ -1086,8 +1205,14 @@ input[type="time"]::-webkit-datetime-edit {
max-width: 300px;
}
.timetrack-container {
padding: 0;
.timetrack-container,
.admin-container,
.config-container,
.table-container,
.team-summary-container {
padding: 1rem;
margin: 0 1rem 2rem 1rem;
max-width: none;
}
.admin-panel {
@@ -1289,9 +1414,12 @@ input[type="time"]::-webkit-datetime-edit {
}
.table-container {
max-width: 1200px;
margin: 0 auto 2rem auto;
padding: 1.5rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
@@ -1356,9 +1484,12 @@ input[type="time"]::-webkit-datetime-edit {
}
.team-summary-container {
max-width: 1200px;
margin: 0 auto 2rem auto;
padding: 1.5rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
@@ -1604,7 +1735,7 @@ input[type="time"]::-webkit-datetime-edit {
align-items: flex-start;
gap: 0.5rem;
}
.urgent-badge {
align-self: flex-end;
}