22
22
.page-title {
23
23
font-size : 28px ;
24
24
font-weight : 700 ;
25
- color : # 2f3640 ;
25
+ color : var ( --text-primary , # 2f3640) ;
26
26
margin-bottom : 8px ;
27
27
display : flex;
28
28
align-items : center;
32
32
33
33
.page-subtitle {
34
34
font-size : 14px ;
35
- color : # 8893a7 ;
35
+ color : var ( --text-secondary , # 8893a7) ;
36
36
}
37
37
38
38
.learn-more-link {
43
43
align-items : center;
44
44
gap : 6px ;
45
45
padding : 6px 12px ;
46
- background : # f8f9ff ;
47
- border : 1px solid # e8e9ff ;
46
+ background : var ( --bg-secondary , # f8f9ff) ;
47
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
48
48
border-radius : 6px ;
49
49
transition : all 0.2s ease;
50
50
}
58
58
59
59
/* Card styles */
60
60
.content-card {
61
- background : white;
61
+ background : var ( --bg-primary , white) ;
62
62
border-radius : 12px ;
63
63
padding : 30px ;
64
- box-shadow : 0 2px 8px rgba (0 , 0 , 0 , 0.08 );
65
- border : 1px solid # e8e9ff ;
64
+ box-shadow : var ( --shadow-md , 0 2px 8px rgba (0 , 0 , 0 , 0.08 ) );
65
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
66
66
margin-bottom : 25px ;
67
67
}
68
68
69
69
.card-title {
70
70
font-size : 18px ;
71
71
font-weight : 700 ;
72
- color : # 2f3640 ;
72
+ color : var ( --text-primary , # 2f3640) ;
73
73
margin-bottom : 25px ;
74
74
display : flex;
75
75
align-items : center;
93
93
display : block;
94
94
font-size : 13px ;
95
95
font-weight : 600 ;
96
- color : # 64748b ;
96
+ color : var ( --text-secondary , # 64748b) ;
97
97
margin-bottom : 8px ;
98
98
text-transform : uppercase;
99
99
letter-spacing : 0.5px ;
102
102
.form-control {
103
103
width : 100% ;
104
104
padding : 10px 14px ;
105
- border : 1px solid # e8e9ff ;
105
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
106
106
border-radius : 8px ;
107
107
font-size : 14px ;
108
- color : # 2f3640 ;
109
- background : white;
108
+ color : var ( --text-primary , # 2f3640) ;
109
+ background : var ( --bg-primary , white) ;
110
110
transition : all 0.2s ease;
111
111
}
112
112
117
117
.form-control : focus {
118
118
outline : none;
119
119
border-color : # 5b5fcf ;
120
- box-shadow : 0 0 0 3px rgba (91 , 95 , 207 , 0.1 );
120
+ box-shadow : var ( --shadow-sm , 0 0 0 3px rgba (91 , 95 , 207 , 0.1 ) );
121
121
}
122
122
123
123
/* Select dropdown styles for Windows compatibility */
138
138
/* Windows-specific fixes */
139
139
@media screen and (-ms-high-contrast : active), (-ms-high-contrast : none) {
140
140
select .form-control {
141
- color : # 2f3640 !important ;
142
- background-color : white !important ;
141
+ color : var ( --text-primary , # 2f3640) !important ;
142
+ background-color : var ( --bg-primary , white) !important ;
143
143
}
144
144
}
145
145
149
149
}
150
150
151
151
select .form-control option {
152
- color : # 2f3640 ;
153
- background-color : white;
152
+ color : var ( --text-primary , # 2f3640) ;
153
+ background-color : var ( --bg-primary , white) ;
154
154
padding : 8px ;
155
155
}
156
156
157
157
select .form-control : focus {
158
- color : # 2f3640 ;
159
- background-color : white;
158
+ color : var ( --text-primary , # 2f3640) ;
159
+ background-color : var ( --bg-primary , white) ;
160
160
}
161
161
162
162
/* Path input group */
167
167
}
168
168
169
169
.input-group-prefix {
170
- background : # f8f9ff ;
171
- border : 1px solid # e8e9ff ;
170
+ background : var ( --bg-secondary , # f8f9ff) ;
171
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
172
172
border-right : none;
173
173
padding : 10px 14px ;
174
174
border-radius : 8px 0 0 8px ;
175
175
font-size : 13px ;
176
- color : # 64748b ;
176
+ color : var ( --text-secondary , # 64748b) ;
177
177
font-weight : 600 ;
178
178
white-space : nowrap;
179
179
}
193
193
align-items : center;
194
194
gap : 10px ;
195
195
padding : 12px 16px ;
196
- background : # f8f9ff ;
197
- border : 1px solid # e8e9ff ;
196
+ background : var ( --bg-secondary , # f8f9ff) ;
197
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
198
198
border-radius : 8px ;
199
199
transition : all 0.2s ease;
200
200
cursor : pointer;
215
215
216
216
.checkbox-label {
217
217
font-size : 14px ;
218
- color : # 2f3640 ;
218
+ color : var ( --text-primary , # 2f3640) ;
219
219
font-weight : 500 ;
220
220
cursor : pointer;
221
221
user-select : none;
254
254
255
255
.btn-primary : hover {
256
256
background : # 4a4fc4 ;
257
- box-shadow : 0 4px 12px rgba (91 , 95 , 207 , 0.3 );
257
+ box-shadow : var ( --shadow-lg , 0 4px 12px rgba (91 , 95 , 207 , 0.3 ) );
258
258
transform : translateY (-1px );
259
259
}
260
260
266
266
}
267
267
268
268
.btn-secondary {
269
- background : # f8f9ff ;
269
+ background : var ( --bg-secondary , # f8f9ff) ;
270
270
color : # 5b5fcf ;
271
- border : 1px solid # e8e9ff ;
271
+ border : 1px solid var ( --border-primary , # e8e9ff) ;
272
272
}
273
273
274
274
.btn-secondary : hover {
277
277
}
278
278
279
279
.btn-secondary : disabled {
280
- background : # f8f9ff ;
280
+ background : var ( --bg-secondary , # f8f9ff) ;
281
281
color : # ccc ;
282
282
cursor : not-allowed;
283
283
}
284
284
285
285
/* Progress section */
286
286
.progress-section {
287
- background : # f8f9ff ;
287
+ background : var ( --bg-secondary , # f8f9ff) ;
288
288
border-radius : 10px ;
289
289
padding : 25px ;
290
290
margin-top : 20px ;
293
293
.progress-status {
294
294
font-size : 16px ;
295
295
font-weight : 600 ;
296
- color : # 2f3640 ;
296
+ color : var ( --text-primary , # 2f3640) ;
297
297
text-align : center;
298
298
margin-bottom : 20px ;
299
299
}
300
300
301
301
.progress-bar-container {
302
- background : # e8e9ff ;
302
+ background : var ( --border-primary , # e8e9ff) ;
303
303
height : 8px ;
304
304
border-radius : 4px ;
305
305
overflow : hidden;
@@ -494,7 +494,7 @@ <h2 class="card-title">
494
494
< input ng-model ="apacheBackend " type ="checkbox " id ="apacheBackend ">
495
495
< label for ="apacheBackend " class ="checkbox-label ">
496
496
OpenLiteSpeed + Apache (Backend)
497
- < small style ="display: block; color: #8893a7; font-weight: normal; margin-top: 4px; ">
497
+ < small style ="display: block; color: var(--text-secondary, #8893a7) ; font-weight: normal; margin-top: 4px; ">
498
498
{% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
499
499
</ small >
500
500
</ label >
@@ -506,7 +506,7 @@ <h2 class="card-title">
506
506
Premium Feature
507
507
< i class ="fas fa-external-link-alt " style ="font-size: 10px; "> </ i >
508
508
</ a >
509
- < small style ="display: block; color: #8893a7; font-weight: normal; margin-top: 4px; ">
509
+ < small style ="display: block; color: var(--text-secondary, #8893a7) ; font-weight: normal; margin-top: 4px; ">
510
510
{% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
511
511
</ small >
512
512
</ label >
0 commit comments