Darkmode
This commit is contained in:
@@ -22,20 +22,20 @@
|
||||
}
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
color: #2c3e50;
|
||||
color: var(--text-strong);
|
||||
margin: 0;
|
||||
}
|
||||
.overtime-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.overtime-table thead {
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
background-color: var(--bg-soft);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.overtime-table th {
|
||||
padding: 15px;
|
||||
@@ -44,10 +44,10 @@
|
||||
}
|
||||
.overtime-table td {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
.overtime-table tbody tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--table-hover);
|
||||
}
|
||||
.overtime-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
@@ -63,41 +63,41 @@
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.summary-box {
|
||||
background: white;
|
||||
background: var(--bg-surface);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.summary-box h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
.summary-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.summary-label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.summary-value {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.summary-value.overtime-positive {
|
||||
color: #27ae60 !important;
|
||||
@@ -107,9 +107,9 @@
|
||||
}
|
||||
.overtime-chart-container {
|
||||
margin-top: 30px;
|
||||
background: #ffffff;
|
||||
background: var(--bg-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 20px;
|
||||
}
|
||||
.overtime-chart-header {
|
||||
@@ -121,11 +121,11 @@
|
||||
.overtime-chart-title {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.overtime-chart-subtitle {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
color: var(--text-soft);
|
||||
text-align: right;
|
||||
}
|
||||
.overtime-chart-wrapper {
|
||||
@@ -135,15 +135,15 @@
|
||||
}
|
||||
.weekly-overtime-chart-container {
|
||||
margin-top: 20px;
|
||||
background: #ffffff;
|
||||
background: var(--bg-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 20px;
|
||||
}
|
||||
.weekly-overtime-chart-title {
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -294,6 +294,15 @@
|
||||
}
|
||||
|
||||
// formatHoursMin aus format-hours.js (window.formatHoursMin)
|
||||
function getThemeChartColors() {
|
||||
const styles = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
textStrong: styles.getPropertyValue('--text-strong').trim() || '#f3f4f6',
|
||||
textMuted: styles.getPropertyValue('--text-muted').trim() || '#cbd5e1',
|
||||
borderSoft: styles.getPropertyValue('--border-soft').trim() || '#334155',
|
||||
surface: styles.getPropertyValue('--bg-surface').trim() || '#111827'
|
||||
};
|
||||
}
|
||||
|
||||
let overtimeChartInstance = null;
|
||||
let weeklyChartInstance = null;
|
||||
@@ -649,9 +658,17 @@
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true
|
||||
display: true,
|
||||
labels: {
|
||||
color: getThemeChartColors().textStrong
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: getThemeChartColors().surface,
|
||||
titleColor: getThemeChartColors().textStrong,
|
||||
bodyColor: getThemeChartColors().textStrong,
|
||||
borderColor: getThemeChartColors().borderSoft,
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
// Hauptlinie: kumulierte Überstunden
|
||||
@@ -677,22 +694,34 @@
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: getThemeChartColors().textMuted
|
||||
},
|
||||
grid: {
|
||||
color: getThemeChartColors().borderSoft
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Kalenderwoche'
|
||||
text: 'Kalenderwoche',
|
||||
color: getThemeChartColors().textMuted
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Überstunden (Stunden)'
|
||||
},
|
||||
ticks: {
|
||||
color: getThemeChartColors().textMuted,
|
||||
callback: function(value) {
|
||||
const v = Number(value) || 0;
|
||||
const sign = v >= 0 ? '+' : '';
|
||||
return `${sign}${formatHoursMin(v)}`;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: getThemeChartColors().borderSoft
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Überstunden (Stunden)',
|
||||
color: getThemeChartColors().textMuted
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -734,9 +763,17 @@
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true
|
||||
display: true,
|
||||
labels: {
|
||||
color: getThemeChartColors().textStrong
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: getThemeChartColors().surface,
|
||||
titleColor: getThemeChartColors().textStrong,
|
||||
bodyColor: getThemeChartColors().textStrong,
|
||||
borderColor: getThemeChartColors().borderSoft,
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const v = context.parsed.y || 0;
|
||||
@@ -748,25 +785,34 @@
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: getThemeChartColors().textMuted
|
||||
},
|
||||
grid: {
|
||||
color: getThemeChartColors().borderSoft
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Kalenderwoche'
|
||||
text: 'Kalenderwoche',
|
||||
color: getThemeChartColors().textMuted
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Überstunden je Woche (Stunden)'
|
||||
},
|
||||
ticks: {
|
||||
color: getThemeChartColors().textMuted,
|
||||
callback: function(value) {
|
||||
const v = Number(value) || 0;
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${formatHoursMin(Math.abs(v))}`;
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Überstunden je Woche (Stunden)',
|
||||
color: getThemeChartColors().textMuted
|
||||
},
|
||||
grid: {
|
||||
zeroLineColor: '#000'
|
||||
color: getThemeChartColors().borderSoft
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user