data/dolibarr.stundenzettel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
dolibarr.stundenzettel/css/stundenzettel-mobile.css
data f1afcc6a22 Mobile CSS: Dark Mode Support + Textarea volle Breite 
- Hardcodierte Farben durch CSS-Variablen ersetzt
- Dark Mode Fallback für Dolibarr Themes hinzugefügt
- Beschreibungs-Textarea nutzt jetzt volle Breite auf Mobile
- opacity statt fester Farbe für Beschreibungstext

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-08 19:17:08 +01:00

384 lines
11 KiB
CSS
Raw Blame History

/**
* Stundenzettel Mobile CSS
* Responsive Styles für Touch-Geräte
* Version 1.2.1
*/
/* ============================================
DESKTOP: Mobile-Elemente ausblenden
============================================ */
.mod-stundenzettel .mobile-description-row {
display: none;
}
.mod-stundenzettel .mobile-inline-desc {
display: none;
}
/* ============================================
MOBILE STYLES (max-width: 768px)
============================================ */
@media screen and (max-width: 768px) {
/* Viewport-Fix: Kein horizontales Scrollen */
.mod-stundenzettel .fiche,
.mod-stundenzettel .fichecenter {
max-width: 100vw;
overflow-x: hidden;
padding: 0 5px;
}
/* Tabellen: Horizontal scrollbar wenn nötig */
.mod-stundenzettel .div-table-responsive-no-min {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -5px;
padding: 0 5px;
}
/* Tabellen kompakter */
.mod-stundenzettel table.noborder {
font-size: 13px;
}
.mod-stundenzettel table.noborder th,
.mod-stundenzettel table.noborder td {
padding: 6px 4px !important;
}
/* Spalten mit fester Breite reduzieren */
.mod-stundenzettel table.noborder th[style*="width:80px"],
.mod-stundenzettel table.noborder td[style*="width:80px"] {
width: 60px !important;
}
.mod-stundenzettel table.noborder th[style*="width:200px"],
.mod-stundenzettel table.noborder td[style*="width:200px"] {
width: 120px !important;
}
.mod-stundenzettel table.noborder th[style*="width:100px"],
.mod-stundenzettel table.noborder td[style*="width:100px"] {
width: 70px !important;
}
/* Buttons: 40px -> 35px */
.mod-stundenzettel table.noborder th[style*="width:40px"],
.mod-stundenzettel table.noborder td[style*="width:40px"] {
width: 35px !important;
padding: 4px 2px !important;
}
/* ============================================
EINGABEFELDER - Touch-optimiert
============================================ */
/* Alle Inputs: Mindestgröße für Touch */
.mod-stundenzettel input[type="text"],
.mod-stundenzettel input[type="number"],
.mod-stundenzettel input[type="time"],
.mod-stundenzettel select,
.mod-stundenzettel textarea {
font-size: 16px !important; /* Verhindert iOS Zoom */
min-height: 40px;
}
/* Number-Inputs kompakter aber touchbar */
.mod-stundenzettel input[type="number"] {
width: 60px !important;
padding: 8px 4px !important;
}
/* Zeit-Inputs kompakter */
.mod-stundenzettel input[type="time"] {
width: 70px !important;
padding: 6px 4px !important;
}
/* Textarea volle Breite */
.mod-stundenzettel textarea {
width: 100% !important;
min-height: 60px;
box-sizing: border-box;
}
/* Select-Felder */
.mod-stundenzettel select {
max-width: 100%;
}
.mod-stundenzettel select.minwidth200,
.mod-stundenzettel select.minwidth300 {
min-width: 120px !important;
max-width: 100% !important;
}
/* ============================================
ICONS/BUTTONS - Touch-Targets
============================================ */
/* Icons größer und mit Padding für Touch */
.mod-stundenzettel td .fas,
.mod-stundenzettel td .far {
font-size: 1.2em;
padding: 6px;
min-width: 32px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Links in Zellen: größerer Touch-Bereich */
.mod-stundenzettel td a {
display: inline-block;
padding: 4px;
}
/* ============================================
TABS - Kompakter und horizontal scrollbar
============================================ */
.mod-stundenzettel .tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 2px;
}
.mod-stundenzettel .tabsElem a {
padding: 8px 10px !important;
font-size: 12px !important;
white-space: nowrap;
}
/* ============================================
SECTION-TITEL
============================================ */
.mod-stundenzettel h3 {
font-size: 15px;
padding: 8px 10px;
margin: 10px 0 6px 0;
}
/* Abschnitts-Header in Tabellen */
.mod-stundenzettel tr.liste_titre th[colspan] {
font-size: 13px;
padding: 8px 6px !important;
}
/* ============================================
ACTION-BUTTONS (Freigeben/Löschen)
============================================ */
.mod-stundenzettel .tabsAction {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 5px;
position: sticky;
bottom: 0;
background: var(--colorbackbody, inherit);
z-index: 100;
box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}
.mod-stundenzettel .tabsAction a.butAction,
.mod-stundenzettel .tabsAction a.butActionDelete {
flex: 1 1 calc(50% - 8px);
text-align: center;
padding: 14px 10px !important;
font-size: 14px !important;
white-space: nowrap;
}
/* ============================================
BANNER/HEADER - Kompakter
============================================ */
.mod-stundenzettel .arearef {
padding: 6px !important;
}
.mod-stundenzettel .refid {
font-size: 13px;
}
/* Banner-Tabelle kompakter */
.mod-stundenzettel .refidno {
font-size: 12px;
}
/* ============================================
SELECT2 - Touch-optimiert
============================================ */
.mod-stundenzettel .select2-container {
max-width: 100% !important;
}
.mod-stundenzettel .select2-selection {
min-height: 40px !important;
}
.mod-stundenzettel .select2-selection__rendered {
line-height: 38px !important;
font-size: 14px !important;
}
/* ============================================
BADGES - Lesbar
============================================ */
.mod-stundenzettel .badge {
font-size: 11px !important;
padding: 3px 6px !important;
white-space: nowrap;
}
/* ============================================
PRODUKTNAME - Umbrechen erlauben
============================================ */
.mod-stundenzettel td a[href*="product/card"] {
word-break: break-word;
}
/* ============================================
FORMS in Tabellen
============================================ */
.mod-stundenzettel tr.oddeven form {
display: contents;
}
/* Freitext-Input unter Produkt-Select */
.mod-stundenzettel td small.opacitymedium {
display: block;
margin-top: 5px;
}
/* ============================================
SUMMENZEILE
============================================ */
.mod-stundenzettel tr.liste_total td {
font-size: 13px;
padding: 8px 4px !important;
font-weight: bold;
}
/* ============================================
LEISTUNGEN TABELLE - Spalten optimieren
============================================ */
/* Beschreibungs-Spalte kompakter (Wörter umbrechen) */
.mod-stundenzettel table.noborder td:nth-child(6) {
max-width: 100px;
word-break: break-word;
font-size: 12px;
}
/* Textarea in Edit-Mode kompakter (aber nicht in mobile-description-row) */
.mod-stundenzettel tr.oddeven:not(.mobile-description-row) textarea {
min-height: 50px;
width: 150px !important;
}
/* ============================================
MOBILE FORMULARE - Separate Beschreibungszeile
============================================ */
/* Mobile-Zeilen anzeigen */
.mod-stundenzettel .mobile-description-row {
display: table-row;
background: var(--colorbacklineimpair2, inherit) !important;
}
.mod-stundenzettel .mobile-description-row td {
padding: 8px !important;
border-top: none !important;
}
.mod-stundenzettel .mobile-description-row input,
.mod-stundenzettel .mobile-description-row textarea {
width: 100% !important;
box-sizing: border-box;
}
/* Desktop-Spalten auf Mobile ausblenden */
.mod-stundenzettel .mobile-hide {
display: none !important;
}
/* ============================================
INLINE BESCHREIBUNG (unter Produktname)
============================================ */
.mod-stundenzettel .mobile-inline-desc {
display: block;
margin-top: 4px;
font-size: 11px;
line-height: 1.3;
opacity: 0.7;
}
}
/* ============================================
EXTRA SMALL (< 480px) - Smartphones
============================================ */
@media screen and (max-width: 480px) {
/* Tabs noch kompakter */
.mod-stundenzettel .tabsElem a {
padding: 6px 6px !important;
font-size: 11px !important;
}
/* Action-Buttons untereinander */
.mod-stundenzettel .tabsAction a.butAction,
.mod-stundenzettel .tabsAction a.butActionDelete {
flex: 1 1 100%;
}
/* Tabellen noch kompakter */
.mod-stundenzettel table.noborder {
font-size: 12px;
}
.mod-stundenzettel table.noborder th,
.mod-stundenzettel table.noborder td {
padding: 4px 2px !important;
}
/* Verstecke weniger wichtige Spalten */
.mod-stundenzettel table.noborder th:nth-child(n+6),
.mod-stundenzettel table.noborder td:nth-child(n+6) {
/* Optional: display: none; */
}
}
/* ============================================
TOUCH-FEEDBACK
============================================ */
@media (hover: none) and (pointer: coarse) {
/* Aktives Element visuell hervorheben */
.mod-stundenzettel a:active,
.mod-stundenzettel button:active {
opacity: 0.7;
}
/* Icons beim Tippen größer */
.mod-stundenzettel td .fas:active,
.mod-stundenzettel td .far:active {
transform: scale(1.2);
}
}
/* ============================================
DARK MODE SUPPORT
============================================ */
@media (prefers-color-scheme: dark) {
/* Nur anwenden wenn Dolibarr Dark Theme aktiv (body hat dark-Klasse) */
body.theme-eldy-dark .mod-stundenzettel .tabsAction,
body[class*="dark"] .mod-stundenzettel .tabsAction {
background: var(--colorbackbody, #1e1e1e);
box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}
body.theme-eldy-dark .mod-stundenzettel .mobile-description-row,
body[class*="dark"] .mod-stundenzettel .mobile-description-row {
background: var(--colorbacklineimpair2, #2d2d2d) !important;
}
}
Reference in a new issue View git blame Copy permalink