1+ .vflex {
2+ display : flex;
3+ flex-direction : column;
4+ gap : 0.5em ;
5+ }
6+
7+ .hflex {
8+ display : flex;
9+ align-items : center;
10+ gap : 0.5em ;
11+ }
12+
13+ .grid-row-1 {
14+ grid-row : 1 ;
15+ }
16+ .grid-row-2 {
17+ grid-row : 2 ;
18+ }
19+ .grid-col-1 {
20+ grid-column : 1 ;
21+ }
22+ .grid-col-2 {
23+ grid-column : 2 ;
24+ }
25+ .grid-col-3 {
26+ grid-column : 3 ;
27+ }
28+ .grid-col-4 {
29+ grid-column : 4 ;
30+ }
31+
132.settings-container {
233 margin-top : 1em ;
34+ padding : 0 1rem ;
335}
436
537.mat-slider-horizontal {
1244 display : flex;
1345 align-items : center;
1446 gap : 0.2em ;
15- width : 25em ;
47+ width : auto;
48+ max-width : 40rem ;
49+ }
50+
51+ .nowrap {
52+ white-space : nowrap;
53+ }
54+
55+ .date-format-field {
56+ flex : 1 ;
57+ margin : 0 ;
58+ }
59+
60+ .max-level-row {
61+ display : flex;
62+ align-items : center;
63+ gap : 1em ;
64+ }
65+
66+ .max-slider {
67+ flex : 1 ;
1668}
1769
1870
@@ -64,7 +116,7 @@ input.progress-score {
64116}
65117
66118.selectable-list {
67- padding : 16 px ;
119+ padding : 0 ;
68120}
69121
70122.selectable-list-header {
@@ -95,6 +147,17 @@ mat-icon.mandatory-icon {
95147 margin-top : 0.5em ;
96148}
97149
150+ .version-info-customization {
151+ margin-top : 2rem ;
152+ }
153+
154+ .version-info-table {
155+ display : grid;
156+ grid-template-columns : 160px 1fr 1fr 1fr ;
157+ gap : 8px ;
158+ margin-bottom : 16px ;
159+ max-width : 40rem ;
160+ }
98161
99162@media screen and (max-width : 650px ) {
100163 .progress-definitions-grid {
@@ -110,3 +173,74 @@ mat-icon.mandatory-icon {
110173 display : none;
111174 }
112175}
176+
177+ /* About DSOMM styles */
178+ .settings-about-section {
179+ margin-top : 1rem ;
180+ }
181+ .settings-about-section .mat-card-header {
182+ padding-bottom : 0.25rem ;
183+ }
184+ .settings-about-section .mat-card-title {
185+ font-size : 1.1rem ;
186+ }
187+ .settings-about-section .mat-card-subtitle {
188+ color : # 666 ;
189+ font-size : 0.9rem ;
190+ }
191+ .settings-about-section .subheader {
192+ font-style : italic;
193+ text-align : center;
194+ margin-bottom : 0.5rem ;
195+ }
196+ .settings-about-section .card-content {
197+ /* keep vertical spacing but align left with page container */
198+ padding-top : 0 ;
199+ padding-right : 1rem ;
200+ padding-bottom : 1rem ;
201+ padding-left : 0 ;
202+ }
203+ .settings-about-section .button-container {
204+ display : flex;
205+ align-items : flex-start;
206+ gap : 0.6rem ;
207+ margin : 0.5rem 0 ;
208+ }
209+ .muted {
210+ color : # 555 ;
211+ margin : 0.25rem 0 0.75rem 0 ;
212+ }
213+ .small {
214+ font-size : 0.85rem ;
215+ color : # 666 ;
216+ }
217+ .about-actions {
218+ display : flex;
219+ align-items : center;
220+ gap : 0.75rem ;
221+ flex-wrap : wrap;
222+ }
223+ .about-actions .status {
224+ display : flex;
225+ align-items : center;
226+ gap : 0.75rem ;
227+ }
228+ .status-icon {
229+ color : var (--accent-color , # 1976d2 );
230+ }
231+ .update-available {
232+ display : flex;
233+ align-items : center;
234+ gap : 0.5rem ;
235+ color : # d84315 ; /* warm accent for update */
236+ }
237+ .update-none {
238+ display : flex;
239+ align-items : center;
240+ gap : 0.5rem ;
241+ color : # 2e7d32 ; /* green for ok */
242+ }
243+ .action-link {
244+ margin-left : 0.5rem ;
245+ font-weight : 500 ;
246+ }
0 commit comments