data
41166811dd
Hintergrundfarben-Klassen reagieren jetzt auf OS Dark Mode (für Dark Reader und mobilen Dark Mode). Dolibarr theme-eldy-dark als Fallback beibehalten. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
497 lines
14 KiB
CSS
Executable file
497 lines
14 KiB
CSS
Executable file
/**
|
|
* 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);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
STUNDENZETTEL HINTERGRUNDFARBEN (Light Mode)
|
|
============================================ */
|
|
.mod-stundenzettel .stz-info-box {
|
|
background-color: var(--colorbacklineimpair1, #fff);
|
|
}
|
|
.mod-stundenzettel .stz-warning-box {
|
|
background-color: #fff8e1;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
.mod-stundenzettel .stz-section-header {
|
|
background-color: var(--colorbacklineimpair1, #f8f8f8);
|
|
}
|
|
.mod-stundenzettel .stz-subtable-bg {
|
|
background-color: var(--colorbacklineimpair2, #fafafa);
|
|
}
|
|
.mod-stundenzettel .stz-subtable-header {
|
|
background-color: var(--colorbacktitle1, #f0f0f0);
|
|
}
|
|
.mod-stundenzettel .stz-mehraufwand-header {
|
|
background-color: #e8f5e9;
|
|
}
|
|
.mod-stundenzettel .stz-current-stz {
|
|
background-color: #e8f4fc;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE SUPPORT
|
|
Greift bei:
|
|
1. OS/Browser Dark Mode (prefers-color-scheme: dark)
|
|
→ Funktioniert mit Dark Reader + Handy Dark Mode
|
|
2. Dolibarr Dark Theme (body.theme-eldy-dark)
|
|
============================================ */
|
|
|
|
/* --- OS/Browser Dark Mode (Dark Reader, Handy Dark Mode) --- */
|
|
@media (prefers-color-scheme: dark) {
|
|
.mod-stundenzettel .liste_titre th {
|
|
border-bottom: 2px solid rgba(255,255,255,0.15) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .tabsAction {
|
|
background: var(--colorbackbody, #1e1e1e);
|
|
box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.mod-stundenzettel .mobile-description-row {
|
|
background: var(--colorbacklineimpair2, #2d2d2d) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-info-box {
|
|
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-warning-box {
|
|
background-color: var(--colorbacklineimpair1, #3a3520) !important;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-section-header {
|
|
background-color: var(--colorbacktitle1, #333) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-subtable-bg {
|
|
background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-subtable-header {
|
|
background-color: var(--colorbacktitle1, #333) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-mehraufwand-header {
|
|
background-color: var(--colorbacklineimpair1, #1e3320) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .stz-current-stz {
|
|
background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
|
|
}
|
|
|
|
.mod-stundenzettel .info {
|
|
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
|
|
}
|
|
}
|
|
|
|
/* --- Dolibarr Dark Theme (Fallback) --- */
|
|
body.theme-eldy-dark.mod-stundenzettel .liste_titre th {
|
|
border-bottom: 2px solid rgba(255,255,255,0.15) !important;
|
|
}
|
|
|
|
body.theme-eldy-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 {
|
|
background: var(--colorbacklineimpair2, #2d2d2d) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-info-box {
|
|
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-warning-box {
|
|
background-color: var(--colorbacklineimpair1, #3a3520) !important;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-section-header {
|
|
background-color: var(--colorbacktitle1, #333) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-subtable-bg {
|
|
background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-subtable-header {
|
|
background-color: var(--colorbacktitle1, #333) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-mehraufwand-header {
|
|
background-color: var(--colorbacklineimpair1, #1e3320) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .stz-current-stz {
|
|
background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
|
|
}
|
|
|
|
body.theme-eldy-dark.mod-stundenzettel .info {
|
|
background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
|
|
}
|