elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix: Tank-Slider für Touch auf Mobilgeräten vergrößern

Browse Source 
Größerer Thumb und sichtbarere Spur mit touch-action, damit Füllstände am Handy leichter einstellbar sind.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-31 13:40:59 +02:00
co-authored by Cursor
parent 23fc940324
commit b3256d1685
1 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+50 -2
View File
@@ -3069,10 +3069,50 @@ html.theme-cupertino .events-scroll-container {
}
.tank-liter-input .tank-liter-slider {
--tank-slider-track-h: 10px;
--tank-slider-thumb: 26px;
width: 100%;
margin: 4px 0 2px;
height: var(--tank-slider-thumb);
margin: 10px 0 6px;
padding: 0;
-webkit-appearance: none;
appearance: none;
background: transparent;
accent-color: #4ade80;
cursor: pointer;
touch-action: none;
}
.tank-liter-input .tank-liter-slider::-webkit-slider-runnable-track {
height: var(--tank-slider-track-h);
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
}
.tank-liter-input .tank-liter-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--tank-slider-thumb);
height: var(--tank-slider-thumb);
margin-top: calc((var(--tank-slider-track-h) - var(--tank-slider-thumb)) / 2);
border-radius: 50%;
background: #4ade80;
border: 2px solid rgba(15, 23, 42, 0.85);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tank-liter-input .tank-liter-slider::-moz-range-track {
height: var(--tank-slider-track-h);
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
}
.tank-liter-input .tank-liter-slider::-moz-range-thumb {
width: var(--tank-slider-thumb);
height: var(--tank-slider-thumb);
border-radius: 50%;
background: #4ade80;
border: 2px solid rgba(15, 23, 42, 0.85);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tank-liter-input .tank-liter-slider:disabled {
@@ -3083,10 +3123,18 @@ html.theme-cupertino .events-scroll-container {
.tank-liter-input .tank-liter-slider-hint {
font-size: 0.75rem;
color: #94a3b8;
margin-bottom: 4px;
margin-bottom: 6px;
text-align: center;
}
@media (max-width: 480px) {
.tank-liter-input .tank-liter-slider {
--tank-slider-track-h: 12px;
--tank-slider-thumb: 32px;
margin: 12px 0 8px;
}
}
.vessel-tanks-section {
grid-column: 1 / -1;
margin-top: 8px;