Skip to content

Commit cb6de71

Browse files
skerbisskerbis
committed
style: Dark-Mode-Support nach REDAXO-Recipe
- CSS-Variablen auf .yform-lang-field Component-Scope - Light/Explicit-Dark/Auto-Dark Layer mit identischen Dark-Werten - Panels, Inputs, Select, Media-Preview und Add-Section themable - Select-Pfeil-SVG zusaetzlich pro Theme angepasst - Version 1.0.3
1 parent 3a63c14 commit cb6de71

2 files changed

Lines changed: 188 additions & 59 deletions

File tree

‎assets/lang-fields.css‎

Lines changed: 187 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,292 @@
1-
/* YForm Lang Fields Styles - MBlock-ähnliches kompaktes Layout */
1+
/* YForm Lang Fields - kompaktes MBlock-aehnliches Layout mit Dark-Mode-Support */
22

3+
/* ============================================================
4+
1) Light Defaults (component scope)
5+
============================================================ */
6+
.yform-lang-field {
7+
--ylf-wrapper-bg: rgba(255, 255, 255, 0.6);
8+
--ylf-panel-bg: #ffffff;
9+
--ylf-panel-body-bg: rgba(255, 255, 255, 0.6);
10+
--ylf-panel-border: #dddddd;
11+
--ylf-panel-border-hover: #bbbbbb;
12+
--ylf-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
13+
--ylf-panel-shadow-hover: 0 1px 5px rgba(0, 0, 0, 0.1);
14+
--ylf-heading-bg: #f5f5f5;
15+
--ylf-heading-border: #dddddd;
16+
--ylf-text: #333333;
17+
--ylf-text-muted: #777777;
18+
--ylf-label: #1a1a1a;
19+
--ylf-input-bg: #ffffff;
20+
--ylf-input-text: #555555;
21+
--ylf-input-border: #dddddd;
22+
--ylf-input-border-focus: #66afe9;
23+
--ylf-input-shadow-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
24+
--ylf-select-bg: #ffffff;
25+
--ylf-select-border: #cccccc;
26+
--ylf-select-border-hover: #8c8c8c;
27+
--ylf-select-disabled-bg: #eeeeee;
28+
--ylf-select-arrow: '%23555';
29+
--ylf-add-section-bg: #fafafa;
30+
--ylf-add-section-border: #dddddd;
31+
--ylf-media-preview-bg: #ffffff;
32+
--ylf-media-preview-border: #dddddd;
33+
--ylf-btn-danger-hover-bg: #c9302c;
34+
--ylf-btn-danger-hover-border: #ac2925;
35+
}
36+
37+
/* ============================================================
38+
2) Explicit Dark Mode
39+
============================================================ */
40+
body.rex-theme-dark .yform-lang-field {
41+
--ylf-wrapper-bg: rgba(40, 48, 58, 0.4);
42+
--ylf-panel-bg: #2a313a;
43+
--ylf-panel-body-bg: rgba(40, 48, 58, 0.4);
44+
--ylf-panel-border: #3a4654;
45+
--ylf-panel-border-hover: #4f5d6f;
46+
--ylf-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
47+
--ylf-panel-shadow-hover: 0 1px 5px rgba(0, 0, 0, 0.5);
48+
--ylf-heading-bg: #232a33;
49+
--ylf-heading-border: #3a4654;
50+
--ylf-text: #d0d8e0;
51+
--ylf-text-muted: #8a96a4;
52+
--ylf-label: #e8f0f7;
53+
--ylf-input-bg: #1f2933;
54+
--ylf-input-text: #e8f0f7;
55+
--ylf-input-border: #3a4654;
56+
--ylf-input-border-focus: #4a90e2;
57+
--ylf-input-shadow-focus: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(74, 144, 226, 0.5);
58+
--ylf-select-bg: #1f2933;
59+
--ylf-select-border: #3a4654;
60+
--ylf-select-border-hover: #5a6878;
61+
--ylf-select-disabled-bg: #2a313a;
62+
--ylf-select-arrow: '%23bbbbbb';
63+
--ylf-add-section-bg: #232a33;
64+
--ylf-add-section-border: #3a4654;
65+
--ylf-media-preview-bg: #1f2933;
66+
--ylf-media-preview-border: #3a4654;
67+
--ylf-btn-danger-hover-bg: #c9302c;
68+
--ylf-btn-danger-hover-border: #ac2925;
69+
}
70+
71+
/* ============================================================
72+
3) Auto Dark Mode (must mirror explicit dark values)
73+
============================================================ */
74+
@media (prefers-color-scheme: dark) {
75+
body.rex-has-theme:not(.rex-theme-light) .yform-lang-field {
76+
--ylf-wrapper-bg: rgba(40, 48, 58, 0.4);
77+
--ylf-panel-bg: #2a313a;
78+
--ylf-panel-body-bg: rgba(40, 48, 58, 0.4);
79+
--ylf-panel-border: #3a4654;
80+
--ylf-panel-border-hover: #4f5d6f;
81+
--ylf-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
82+
--ylf-panel-shadow-hover: 0 1px 5px rgba(0, 0, 0, 0.5);
83+
--ylf-heading-bg: #232a33;
84+
--ylf-heading-border: #3a4654;
85+
--ylf-text: #d0d8e0;
86+
--ylf-text-muted: #8a96a4;
87+
--ylf-label: #e8f0f7;
88+
--ylf-input-bg: #1f2933;
89+
--ylf-input-text: #e8f0f7;
90+
--ylf-input-border: #3a4654;
91+
--ylf-input-border-focus: #4a90e2;
92+
--ylf-input-shadow-focus: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(74, 144, 226, 0.5);
93+
--ylf-select-bg: #1f2933;
94+
--ylf-select-border: #3a4654;
95+
--ylf-select-border-hover: #5a6878;
96+
--ylf-select-disabled-bg: #2a313a;
97+
--ylf-select-arrow: '%23bbbbbb';
98+
--ylf-add-section-bg: #232a33;
99+
--ylf-add-section-border: #3a4654;
100+
--ylf-media-preview-bg: #1f2933;
101+
--ylf-media-preview-border: #3a4654;
102+
--ylf-btn-danger-hover-bg: #c9302c;
103+
--ylf-btn-danger-hover-border: #ac2925;
104+
}
105+
}
106+
107+
/* ============================================================
108+
Component Styles
109+
============================================================ */
3110
.yform-lang-field {
4111
margin-bottom: 20px;
5-
background-color: rgba(255, 255, 255, 0.6); /* 60% transparenter weißer Hintergrund */
112+
background-color: var(--ylf-wrapper-bg);
6113
padding: 15px;
7114
border-radius: 4px;
115+
color: var(--ylf-text);
8116
}
9117

10118
.yform-lang-field .control-label {
11119
font-weight: 600;
12120
margin-bottom: 10px;
13121
font-size: 14px;
122+
color: var(--ylf-label);
14123
}
15124

16125
.yform-lang-field .help-block.small.text-muted {
17126
margin: 5px 0 10px 0;
18127
font-size: 12px;
19128
line-height: 1.4;
129+
color: var(--ylf-text-muted);
20130
}
21131

22132
/* Kompakte Panel-Darstellung */
23-
.lang-fields-container {
133+
.yform-lang-field .lang-fields-container {
24134
margin-bottom: 10px;
25135
}
26136

27-
.lang-field-item.panel {
137+
.yform-lang-field .lang-field-item.panel {
28138
margin-bottom: 15px;
29-
border: 1px solid #ddd;
30-
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
139+
background-color: var(--ylf-panel-bg);
140+
border: 1px solid var(--ylf-panel-border);
141+
box-shadow: var(--ylf-panel-shadow);
31142
}
32143

33-
.lang-field-item.panel:hover {
34-
border-color: #bbb;
35-
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
144+
.yform-lang-field .lang-field-item.panel:hover {
145+
border-color: var(--ylf-panel-border-hover);
146+
box-shadow: var(--ylf-panel-shadow-hover);
36147
}
37148

38-
.lang-field-item .panel-heading {
39-
background-color: #f5f5f5;
40-
border-bottom: 1px solid #ddd;
149+
.yform-lang-field .lang-field-item .panel-heading {
150+
background-color: var(--ylf-heading-bg);
151+
border-bottom: 1px solid var(--ylf-heading-border);
41152
padding: 10px 15px;
42153
font-size: 13px;
154+
color: var(--ylf-text);
43155
}
44156

45-
.lang-field-item .panel-heading strong {
157+
.yform-lang-field .lang-field-item .panel-heading strong {
46158
font-weight: 600;
159+
color: var(--ylf-label);
47160
}
48161

49-
.lang-field-item .panel-heading .text-muted {
162+
.yform-lang-field .lang-field-item .panel-heading .text-muted {
50163
font-weight: normal;
164+
color: var(--ylf-text-muted);
51165
}
52166

53-
.lang-field-item .panel-body {
167+
.yform-lang-field .lang-field-item .panel-body {
54168
padding: 15px;
55-
background-color: rgba(255, 255, 255, 0.6); /* 60% transparenter weißer Hintergrund */
169+
background-color: var(--ylf-panel-body-bg);
56170
}
57171

58-
/* Delete Button im Header - rechts oben */
59-
.lang-field-item .btn-remove-lang-field {
172+
/* Delete Button im Header */
173+
.yform-lang-field .lang-field-item .btn-remove-lang-field {
60174
padding: 2px 8px;
61175
font-size: 12px;
62176
line-height: 1.5;
63177
position: relative;
64-
z-index: 10; /* Sicherstellen dass Button klickbar ist */
178+
z-index: 10;
65179
}
66180

67-
.lang-field-item .btn-remove-lang-field:hover {
68-
background-color: #c9302c;
69-
border-color: #ac2925;
181+
.yform-lang-field .lang-field-item .btn-remove-lang-field:hover {
182+
background-color: var(--ylf-btn-danger-hover-bg);
183+
border-color: var(--ylf-btn-danger-hover-border);
70184
}
71185

72186
/* Input-Felder */
73-
.lang-input, .lang-textarea {
74-
border: 1px solid #ddd;
187+
.yform-lang-field .lang-input,
188+
.yform-lang-field .lang-textarea {
189+
background-color: var(--ylf-input-bg);
190+
color: var(--ylf-input-text);
191+
border: 1px solid var(--ylf-input-border);
75192
}
76193

77-
.lang-input:focus, .lang-textarea:focus {
78-
border-color: #66afe9;
79-
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
194+
.yform-lang-field .lang-input:focus,
195+
.yform-lang-field .lang-textarea:focus {
196+
border-color: var(--ylf-input-border-focus);
197+
box-shadow: var(--ylf-input-shadow-focus);
80198
}
81199

82-
/* Kompakter "Neue Übersetzung" Bereich */
83-
.lang-field-add-section .panel {
84-
background-color: #fafafa;
85-
border-style: dashed;
200+
/* Kompakter "Neue Uebersetzung"-Bereich */
201+
.yform-lang-field .lang-field-add-section .panel {
202+
background-color: var(--ylf-add-section-bg);
203+
border: 1px dashed var(--ylf-add-section-border);
86204
}
87205

88-
.lang-field-add-section .panel-body {
206+
.yform-lang-field .lang-field-add-section .panel-body {
89207
padding: 10px 15px;
90208
}
91209

92210
/* Select-Styling */
93-
.lang-field-add-section .lang-select-new {
211+
.yform-lang-field .lang-field-add-section .lang-select-new {
94212
font-size: 14px;
95213
height: 38px;
96214
padding: 8px 32px 8px 12px;
97215
appearance: none;
98216
-webkit-appearance: none;
99217
-moz-appearance: none;
100-
background-color: #fff;
218+
background-color: var(--ylf-select-bg);
101219
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
102220
background-repeat: no-repeat;
103221
background-position: right 10px center;
104222
background-size: 10px 10px;
105-
border: 1px solid #ccc;
223+
border: 1px solid var(--ylf-select-border);
106224
border-radius: 4px;
107225
cursor: pointer;
108226
transition: all ease-in-out .15s;
109-
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
227+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
110228
line-height: 1.42857143;
111-
color: #555;
229+
color: var(--ylf-input-text);
230+
}
231+
232+
/* Dark-Mode-Variante mit hellerem Pfeil-Icon */
233+
body.rex-theme-dark .yform-lang-field .lang-field-add-section .lang-select-new {
234+
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23bbbbbb%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
112235
}
113236

114-
.lang-field-add-section .lang-select-new:hover {
115-
border-color: #8c8c8c;
237+
@media (prefers-color-scheme: dark) {
238+
body.rex-has-theme:not(.rex-theme-light) .yform-lang-field .lang-field-add-section .lang-select-new {
239+
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23bbbbbb%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
240+
}
116241
}
117242

118-
.lang-field-add-section .lang-select-new:focus {
119-
border-color: #66afe9;
243+
.yform-lang-field .lang-field-add-section .lang-select-new:hover {
244+
border-color: var(--ylf-select-border-hover);
245+
}
246+
247+
.yform-lang-field .lang-field-add-section .lang-select-new:focus {
248+
border-color: var(--ylf-input-border-focus);
120249
outline: 0;
121-
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
250+
box-shadow: var(--ylf-input-shadow-focus);
122251
}
123252

124-
.lang-field-add-section .lang-select-new:disabled {
125-
background-color: #eee;
253+
.yform-lang-field .lang-field-add-section .lang-select-new:disabled {
254+
background-color: var(--ylf-select-disabled-bg);
126255
cursor: not-allowed;
127256
opacity: 0.6;
128257
}
129258

130-
.lang-field-add-section .btn-add-lang-field {
259+
.yform-lang-field .lang-field-add-section .btn-add-lang-field {
131260
font-size: 13px;
132261
padding: 5px 12px;
133262
}
134263

135-
.lang-field-add-section .btn-add-lang-field:disabled {
264+
.yform-lang-field .lang-field-add-section .btn-add-lang-field:disabled {
136265
opacity: 0.5;
137266
cursor: not-allowed;
138267
}
139268

140269
/* Media Widget */
141-
.media-preview {
270+
.yform-lang-field .media-preview {
142271
margin-top: 10px;
143272
text-align: center;
144273
}
145274

146-
.media-preview img {
275+
.yform-lang-field .media-preview img {
147276
max-width: 100%;
148277
max-height: 150px;
149-
border: 1px solid #ddd;
278+
border: 1px solid var(--ylf-media-preview-border);
150279
border-radius: 3px;
151280
padding: 5px;
152-
background: #fff;
281+
background: var(--ylf-media-preview-bg);
153282
}
154283

155284
/* CKEditor 5 */
156-
.cke5-editor {
285+
.yform-lang-field .cke5-editor {
157286
min-height: 150px;
158287
}
159288

160-
/* Animation für neue Felder */
289+
/* Animation fuer neue Felder */
161290
@keyframes slideInPanel {
162291
from {
163292
opacity: 0;
@@ -169,19 +298,19 @@
169298
}
170299
}
171300

172-
.lang-field-item.newly-added {
301+
.yform-lang-field .lang-field-item.newly-added {
173302
animation: slideInPanel 0.2s ease-out;
174303
}
175304

176305
/* Responsive */
177306
@media (max-width: 768px) {
178-
.lang-field-add-section .col-sm-4,
179-
.lang-field-add-section .col-sm-8 {
307+
.yform-lang-field .lang-field-add-section .col-sm-4,
308+
.yform-lang-field .lang-field-add-section .col-sm-8 {
180309
margin-bottom: 10px;
181310
}
182311
}
183312

184-
/* Zusätzliches Textfeld bei Media */
185-
.lang-field-item .panel-body input[type="text"] + input[type="text"] {
313+
/* Zusaetzliches Textfeld bei Media */
314+
.yform-lang-field .lang-field-item .panel-body input[type="text"] + input[type="text"] {
186315
margin-top: 10px;
187-
}
316+
}

‎package.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
package: yform_lang_fields
2-
version: '1.0.2'
2+
version: '1.0.3'
33
author: 'KLXM Crossmedia / Thomas Skerbis'
44
supportpage: 'https://klxm.de'
55

0 commit comments

Comments
 (0)