cloud-ide-layout 1.0.248 → 1.0.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,318 @@
1
+ /*-------------------------------------------------
2
+ * CIDE-LYT Variable
3
+ *--------------------------------------------------*/
4
+ :root {
5
+ // Responsive scale factors - base is 1.0 (desktop)
6
+ --cide-lyt-responsive-scale: 1.0;
7
+
8
+ // Header Starts Here
9
+ --cide-lyt-header-wrapper-height: 42px;
10
+ --cide-lyt-header-wrapper-background-color: white;
11
+ --cide-lyt-header-wrapper-border-color: rgba(229, 231, 235, 1);
12
+ --cide-lyt-header-wrapper-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
13
+ --cide-lyt-header-wrapper-z-index: 1000;
14
+ // Header Ends Here
15
+
16
+ --cide-lyt-request-wrapper-height: 20px;
17
+ --cide-lyt-sidebar-wrapper-hieght: 50px;
18
+ --cide-lyt-sidedrawer-wrapper-hieght: 50px;
19
+ --cide-lyt-footer-wrapper-hieght: 50px;
20
+ --cide-lyt-console-wrapper-hieght: 50px;
21
+
22
+ // Sidebar Stack Starts Here
23
+ --cide-lyt-stack-wrapper-background-color: #f9f9f9;
24
+ --cide-lyt-stack-wrapper-width: 64px;
25
+ --cide-lyt-stack-wrapper-width-base: 64px; // Base value for responsive scaling
26
+ // Sidebar Stack Ends Here
27
+
28
+ // Sidebar Starts Here
29
+ --cide-lyt-sidebar-wrapper-background-color: #F9F9F9;
30
+ --cide-lyt-sidebar-menu-width: 200px;
31
+ --cide-lyt-sidebar-menu-width-base: 200px; // Base value for responsive scaling
32
+ --cide-lyt-sidebar-menu-border-color: #e6e6e6;
33
+ --cide-lyt-sidebar-nav-item-color-active: var(--cide-theme-color-brand-primary);
34
+ --cide-lyt-sidebar-nav-item-color: var(--cide-theme-label-color);
35
+ // Sidebar Ends Here
36
+
37
+ // Side Drawer Starts Here
38
+ --cide-lyt-sidedrawer-wrapper-background-color: var(--cide-lyt-sidebar-wrapper-background-color);
39
+ --cide-lyt-sidedrawer-wrapper-width: 32px;
40
+ --cide-lyt-sidedrawer-wrapper-width-base: 32px; // Base value for responsive scaling
41
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: 384px;
42
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min-base: 384px; // Base value for responsive scaling
43
+ // Side Drawer Ends Here
44
+
45
+ // Page Wrapper Starts Here
46
+ --cide-lyt-page-wrapper-background-color: rgb(243 244 246);
47
+ // Page Wrapper Ends Here
48
+
49
+ // Footer Starts Here
50
+ --cide-lyt-footer-wrapper-height: 20px;
51
+ --code-lyt-footer-wrapper-background-color: #F9F9F9;
52
+ --code-lyt-footer-wrapper-border-color: #e6e6e6;
53
+ // Footer Ends Here
54
+ }
55
+
56
+ /* Small Mobile Devices (< 480px) */
57
+ @media screen and (max-width: 479px) {
58
+ :root {
59
+ // Use theme scale if available, otherwise default to 0.75
60
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-sm, 0.75);
61
+
62
+ // Header - scaled down
63
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
64
+
65
+ // Sidebar Stack - scaled down (use base value from theme if set, otherwise 64px)
66
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
67
+
68
+ // Sidebar - scaled down (use base value from theme if set, otherwise 200px)
69
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
70
+
71
+ // Side Drawer - scaled down
72
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
73
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
74
+
75
+ // Footer - scaled down
76
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
77
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
78
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
79
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
80
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
81
+ }
82
+ }
83
+
84
+ /* Mobile Devices (480px - 640px) */
85
+ @media screen and (min-width: 480px) and (max-width: 640px) {
86
+ :root {
87
+ // Use theme scale if available, otherwise default to 0.85
88
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-md, 0.85);
89
+
90
+ // Header - scaled down
91
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
92
+
93
+ // Sidebar Stack - scaled down
94
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
95
+
96
+ // Sidebar - scaled down
97
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
98
+
99
+ // Side Drawer - scaled down
100
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
101
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
102
+
103
+ // Footer - scaled down
104
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
105
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
106
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
107
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
108
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
109
+ }
110
+ }
111
+
112
+ /* Tablet Devices (641px - 1024px) */
113
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
114
+ :root {
115
+ // Use theme scale if available, otherwise default to 0.95
116
+ --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-lg, 0.95);
117
+
118
+ // Header - slightly scaled down
119
+ --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
120
+
121
+ // Sidebar Stack - slightly scaled down
122
+ --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
123
+
124
+ // Sidebar - slightly scaled down
125
+ --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
126
+
127
+ // Side Drawer - slightly scaled down
128
+ --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
129
+ --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
130
+
131
+ // Footer - slightly scaled down
132
+ --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
133
+ --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
134
+ --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
135
+ --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
136
+ --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
137
+ }
138
+ }
139
+
140
+ /* Desktop Devices (> 1024px) - Default values already set above */
141
+
142
+
143
+ /* :root defines variables available globally */
144
+ :root {
145
+ /* Responsive font scale factor - base is 1.0 (desktop), can be overridden by theme */
146
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
147
+
148
+ /* 1. TYPOGRAPHIC SCALE - Base values for desktop (can be overridden by theme) */
149
+ --cide-theme-font-size-xs-base: 0.72rem;
150
+ /* 11.52px */
151
+ --cide-theme-font-size-sm-base: 0.8rem;
152
+ /* 12.8px */
153
+ --cide-theme-font-size-lg-base: 1.25rem;
154
+ /* 20px */
155
+ --cide-theme-font-size-xl-base: 1.563rem;
156
+ /* 25px */
157
+ --cide-theme-font-size-xxl-base: 1.953rem;
158
+ /* 31.25px */
159
+ --cide-theme-font-size-xxxl-base: 2.441rem;
160
+ /* 39.06px */
161
+
162
+ /* 1. TYPOGRAPHIC SCALE - Actual values for desktop (use base values, multiplied by scale) */
163
+ --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base) * var(--cide-lyt-font-responsive-scale));
164
+ --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base) * var(--cide-lyt-font-responsive-scale));
165
+ --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base) * var(--cide-lyt-font-responsive-scale));
166
+ --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base) * var(--cide-lyt-font-responsive-scale));
167
+ --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base) * var(--cide-lyt-font-responsive-scale));
168
+ --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base) * var(--cide-lyt-font-responsive-scale));
169
+
170
+ /* 2. FONT WEIGHTS */
171
+ --cide-theme-font-weight-regular: 400;
172
+ --cide-theme-font-weight-semibold: 600;
173
+ --cide-theme-font-weight-bold: 700;
174
+
175
+ /* 3. LINE HEIGHTS */
176
+ --cide-theme-line-height-body: 1.6;
177
+ --cide-theme-line-height-heading: 1.2;
178
+ }
179
+
180
+ /* Small Mobile Devices (< 480px) - Font scaling */
181
+ @media screen and (max-width: 479px) {
182
+ :root {
183
+ /* Media-specific base font sizes for small mobile (can be overridden by theme) */
184
+ --cide-theme-font-size-xs-base-sm: var(--cide-theme-font-size-xs-base-sm, 0.63rem);
185
+ /* 10.08px */
186
+ --cide-theme-font-size-sm-base-sm: var(--cide-theme-font-size-sm-base-sm, 0.7rem);
187
+ /* 11.2px */
188
+ --cide-theme-font-size-lg-base-sm: var(--cide-theme-font-size-lg-base-sm, 1.1rem);
189
+ /* 17.6px */
190
+ --cide-theme-font-size-xl-base-sm: var(--cide-theme-font-size-xl-base-sm, 1.375rem);
191
+ /* 22px */
192
+ --cide-theme-font-size-xxl-base-sm: var(--cide-theme-font-size-xxl-base-sm, 1.71875rem);
193
+ /* 27.5px */
194
+ --cide-theme-font-size-xxxl-base-sm: var(--cide-theme-font-size-xxxl-base-sm, 2.1484375rem);
195
+ /* 34.375px */
196
+
197
+ /* Use theme scale (same across all media queries) - defaults to base scale if not set */
198
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
199
+
200
+ /* Typographic scale - media base font size multiplied by theme scale */
201
+ --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-sm) * var(--cide-lyt-font-responsive-scale));
202
+ --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-sm) * var(--cide-lyt-font-responsive-scale));
203
+ --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-sm) * var(--cide-lyt-font-responsive-scale));
204
+ --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-sm) * var(--cide-lyt-font-responsive-scale));
205
+ --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-sm) * var(--cide-lyt-font-responsive-scale));
206
+ --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-sm) * var(--cide-lyt-font-responsive-scale));
207
+ }
208
+ }
209
+
210
+ /* Mobile Devices (480px - 640px) - Font scaling */
211
+ @media screen and (min-width: 480px) and (max-width: 640px) {
212
+ :root {
213
+ /* Media-specific base font sizes for medium mobile (can be overridden by theme) */
214
+ --cide-theme-font-size-xs-base-md: var(--cide-theme-font-size-xs-base-md, 0.65rem);
215
+ /* 10.4px */
216
+ --cide-theme-font-size-sm-base-md: var(--cide-theme-font-size-sm-base-md, 0.72rem);
217
+ /* 11.52px */
218
+ --cide-theme-font-size-lg-base-md: var(--cide-theme-font-size-lg-base-md, 1.125rem);
219
+ /* 18px */
220
+ --cide-theme-font-size-xl-base-md: var(--cide-theme-font-size-xl-base-md, 1.40625rem);
221
+ /* 22.5px */
222
+ --cide-theme-font-size-xxl-base-md: var(--cide-theme-font-size-xxl-base-md, 1.7578125rem);
223
+ /* 28.125px */
224
+ --cide-theme-font-size-xxxl-base-md: var(--cide-theme-font-size-xxxl-base-md, 2.197265625rem);
225
+ /* 35.15625px */
226
+
227
+ /* Use theme scale (same across all media queries) - defaults to base scale if not set */
228
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
229
+
230
+ /* Typographic scale - media base font size multiplied by theme scale */
231
+ --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-md) * var(--cide-lyt-font-responsive-scale));
232
+ --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-md) * var(--cide-lyt-font-responsive-scale));
233
+ --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-md) * var(--cide-lyt-font-responsive-scale));
234
+ --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-md) * var(--cide-lyt-font-responsive-scale));
235
+ --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-md) * var(--cide-lyt-font-responsive-scale));
236
+ --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-md) * var(--cide-lyt-font-responsive-scale));
237
+ }
238
+ }
239
+
240
+ /* Tablet Devices (641px - 1024px) - Font scaling */
241
+ @media screen and (min-width: 641px) and (max-width: 1024px) {
242
+ :root {
243
+ /* Media-specific base font sizes for tablet (can be overridden by theme) */
244
+ --cide-theme-font-size-xs-base-lg: var(--cide-theme-font-size-xs-base-lg, 0.68rem);
245
+ /* 10.88px */
246
+ --cide-theme-font-size-sm-base-lg: var(--cide-theme-font-size-sm-base-lg, 0.76rem);
247
+ /* 12.16px */
248
+ --cide-theme-font-size-lg-base-lg: var(--cide-theme-font-size-lg-base-lg, 1.1875rem);
249
+ /* 19px */
250
+ --cide-theme-font-size-xl-base-lg: var(--cide-theme-font-size-xl-base-lg, 1.484375rem);
251
+ /* 23.75px */
252
+ --cide-theme-font-size-xxl-base-lg: var(--cide-theme-font-size-xxl-base-lg, 1.85546875rem);
253
+ /* 29.6875px */
254
+ --cide-theme-font-size-xxxl-base-lg: var(--cide-theme-font-size-xxxl-base-lg, 2.3193359375rem);
255
+ /* 37.109375px */
256
+
257
+ /* Use theme scale (same across all media queries) - defaults to base scale if not set */
258
+ --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
259
+
260
+ /* Typographic scale - media base font size multiplied by theme scale */
261
+ --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-lg) * var(--cide-lyt-font-responsive-scale));
262
+ --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-lg) * var(--cide-lyt-font-responsive-scale));
263
+ --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-lg) * var(--cide-lyt-font-responsive-scale));
264
+ --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-lg) * var(--cide-lyt-font-responsive-scale));
265
+ --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-lg) * var(--cide-lyt-font-responsive-scale));
266
+ --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-lg) * var(--cide-lyt-font-responsive-scale));
267
+ }
268
+ }
269
+
270
+ /* Base styles for the body */
271
+ body {
272
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
273
+ font-size: var(--cide-theme-font-size-base);
274
+ line-height: var(--cide-theme-line-height-body);
275
+ color: #333;
276
+ /* Use a dark gray, not pure black */
277
+ }
278
+
279
+ /* Rules for Headings */
280
+ h1,
281
+ h2,
282
+ h3,
283
+ h4,
284
+ h5 {
285
+ // margin: 2rem 0 1rem 0;
286
+ font-family: inherit;
287
+ line-height: var(--cide-theme-line-height-heading);
288
+ }
289
+
290
+ h1 {
291
+ font-size: var(--cide-theme-font-size-xxxxl);
292
+ font-weight: var(--cide-theme-font-weight-bold);
293
+ }
294
+
295
+ h2 {
296
+ font-size: var(--cide-theme-font-size-xxxl);
297
+ font-weight: var(--cide-theme-font-weight-bold);
298
+ }
299
+
300
+ h3 {
301
+ font-size: var(--cide-theme-font-size-xxl);
302
+ font-weight: var(--cide-theme-font-weight-bold);
303
+ }
304
+
305
+ h4 {
306
+ font-size: var(--cide-theme-font-size-xl);
307
+ font-weight: var(--cide-theme-font-weight-semibold);
308
+ }
309
+
310
+ h5 {
311
+ font-size: var(--cide-theme-font-size-lg);
312
+ font-weight: var(--cide-theme-font-weight-semibold);
313
+ }
314
+
315
+ /* Use a class for small text to be explicit */
316
+ .text-small {
317
+ font-size: var(--cide-theme-font-size-sm);
318
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloud-ide-layout",
3
- "version": "1.0.248",
3
+ "version": "1.0.249",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0",
@@ -1,289 +0,0 @@
1
- /*-------------------------------------------------
2
- * CIDE-LYT Variable
3
- *--------------------------------------------------*/
4
- :root {
5
- // Responsive scale factors - base is 1.0 (desktop)
6
- --cide-lyt-responsive-scale: 1.0;
7
-
8
- // Header Starts Here
9
- --cide-lyt-header-wrapper-height: 42px;
10
- --cide-lyt-header-wrapper-background-color: white;
11
- --cide-lyt-header-wrapper-border-color: rgba(229, 231, 235, 1);
12
- --cide-lyt-header-wrapper-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
13
- --cide-lyt-header-wrapper-z-index: 1000;
14
- // Header Ends Here
15
-
16
- --cide-lyt-request-wrapper-height: 20px;
17
- --cide-lyt-sidebar-wrapper-hieght: 50px;
18
- --cide-lyt-sidedrawer-wrapper-hieght:50px;
19
- --cide-lyt-footer-wrapper-hieght:50px;
20
- --cide-lyt-console-wrapper-hieght:50px;
21
-
22
- // Sidebar Stack Starts Here
23
- --cide-lyt-stack-wrapper-background-color: #f9f9f9;
24
- --cide-lyt-stack-wrapper-width: 64px;
25
- --cide-lyt-stack-wrapper-width-base: 64px; // Base value for responsive scaling
26
- // Sidebar Stack Ends Here
27
-
28
- // Sidebar Starts Here
29
- --cide-lyt-sidebar-wrapper-background-color: #F9F9F9;
30
- --cide-lyt-sidebar-menu-width: 200px;
31
- --cide-lyt-sidebar-menu-width-base: 200px; // Base value for responsive scaling
32
- --cide-lyt-sidebar-menu-border-color: #e6e6e6;
33
- --cide-lyt-sidebar-nav-item-color-active: var(--cide-theme-color-brand-primary);
34
- --cide-lyt-sidebar-nav-item-color: var(--cide-theme-label-color);
35
- // Sidebar Ends Here
36
-
37
- // Side Drawer Starts Here
38
- --cide-lyt-sidedrawer-wrapper-background-color: var(--cide-lyt-sidebar-wrapper-background-color);
39
- --cide-lyt-sidedrawer-wrapper-width: 32px;
40
- --cide-lyt-sidedrawer-wrapper-width-base: 32px; // Base value for responsive scaling
41
- --cide-lyt-sidedrawer-wrapper-width-expanded-min: 384px;
42
- --cide-lyt-sidedrawer-wrapper-width-expanded-min-base: 384px; // Base value for responsive scaling
43
- // Side Drawer Ends Here
44
-
45
- // Page Wrapper Starts Here
46
- --cide-lyt-page-wrapper-background-color: rgb(243 244 246);
47
- // Page Wrapper Ends Here
48
-
49
- // Footer Starts Here
50
- --cide-lyt-footer-wrapper-height: 20px;
51
- --code-lyt-footer-wrapper-background-color: #F9F9F9;
52
- --code-lyt-footer-wrapper-border-color: #e6e6e6;
53
- // Footer Ends Here
54
- }
55
-
56
- /* Small Mobile Devices (< 480px) */
57
- @media screen and (max-width: 479px) {
58
- :root {
59
- // Use theme scale if available, otherwise default to 0.75
60
- --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-sm, 0.75);
61
-
62
- // Header - scaled down
63
- --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
64
-
65
- // Sidebar Stack - scaled down (use base value from theme if set, otherwise 64px)
66
- --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
67
-
68
- // Sidebar - scaled down (use base value from theme if set, otherwise 200px)
69
- --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
70
-
71
- // Side Drawer - scaled down
72
- --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
73
- --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
74
-
75
- // Footer - scaled down
76
- --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
77
- --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
78
- --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
79
- --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
80
- --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
81
- }
82
- }
83
-
84
- /* Mobile Devices (480px - 640px) */
85
- @media screen and (min-width: 480px) and (max-width: 640px) {
86
- :root {
87
- // Use theme scale if available, otherwise default to 0.85
88
- --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-md, 0.85);
89
-
90
- // Header - scaled down
91
- --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
92
-
93
- // Sidebar Stack - scaled down
94
- --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
95
-
96
- // Sidebar - scaled down
97
- --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
98
-
99
- // Side Drawer - scaled down
100
- --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
101
- --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
102
-
103
- // Footer - scaled down
104
- --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
105
- --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
106
- --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
107
- --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
108
- --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
109
- }
110
- }
111
-
112
- /* Tablet Devices (641px - 1024px) */
113
- @media screen and (min-width: 641px) and (max-width: 1024px) {
114
- :root {
115
- // Use theme scale if available, otherwise default to 0.95
116
- --cide-lyt-responsive-scale: var(--cide-lyt-responsive-scale-lg, 0.95);
117
-
118
- // Header - slightly scaled down
119
- --cide-lyt-header-wrapper-height: calc(42px * var(--cide-lyt-responsive-scale));
120
-
121
- // Sidebar Stack - slightly scaled down
122
- --cide-lyt-stack-wrapper-width: calc(var(--cide-lyt-stack-wrapper-width-base, 64px) * var(--cide-lyt-responsive-scale));
123
-
124
- // Sidebar - slightly scaled down
125
- --cide-lyt-sidebar-menu-width: calc(var(--cide-lyt-sidebar-menu-width-base, 200px) * var(--cide-lyt-responsive-scale));
126
-
127
- // Side Drawer - slightly scaled down
128
- --cide-lyt-sidedrawer-wrapper-width: calc(var(--cide-lyt-sidedrawer-wrapper-width-base, 32px) * var(--cide-lyt-responsive-scale));
129
- --cide-lyt-sidedrawer-wrapper-width-expanded-min: calc(var(--cide-lyt-sidedrawer-wrapper-width-expanded-min-base, 384px) * var(--cide-lyt-responsive-scale));
130
-
131
- // Footer - slightly scaled down
132
- --cide-lyt-footer-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
133
- --cide-lyt-request-wrapper-height: calc(20px * var(--cide-lyt-responsive-scale));
134
- --cide-lyt-sidebar-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
135
- --cide-lyt-sidedrawer-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
136
- --cide-lyt-console-wrapper-hieght: calc(50px * var(--cide-lyt-responsive-scale));
137
- }
138
- }
139
-
140
- /* Desktop Devices (> 1024px) - Default values already set above */
141
-
142
-
143
- /* :root defines variables available globally */
144
- :root {
145
- /* Responsive font scale factor - base is 1.0 (desktop), can be overridden by theme */
146
- --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
147
-
148
- /* 1. TYPOGRAPHIC SCALE - Base values for desktop (can be overridden by theme) */
149
- --cide-theme-font-size-xs-base: 0.72rem; /* 11.52px */
150
- --cide-theme-font-size-sm-base: 0.8rem; /* 12.8px */
151
- --cide-theme-font-size-lg-base: 1.25rem; /* 20px */
152
- --cide-theme-font-size-xl-base: 1.563rem; /* 25px */
153
- --cide-theme-font-size-xxl-base: 1.953rem; /* 31.25px */
154
- --cide-theme-font-size-xxxl-base: 2.441rem; /* 39.06px */
155
-
156
- /* 1. TYPOGRAPHIC SCALE - Actual values for desktop (use base values, multiplied by scale) */
157
- --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base) * var(--cide-lyt-font-responsive-scale));
158
- --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base) * var(--cide-lyt-font-responsive-scale));
159
- --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base) * var(--cide-lyt-font-responsive-scale));
160
- --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base) * var(--cide-lyt-font-responsive-scale));
161
- --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base) * var(--cide-lyt-font-responsive-scale));
162
- --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base) * var(--cide-lyt-font-responsive-scale));
163
-
164
- /* 2. FONT WEIGHTS */
165
- --cide-theme-font-weight-regular: 400;
166
- --cide-theme-font-weight-semibold: 600;
167
- --cide-theme-font-weight-bold: 700;
168
-
169
- /* 3. LINE HEIGHTS */
170
- --cide-theme-line-height-body: 1.6;
171
- --cide-theme-line-height-heading: 1.2;
172
- }
173
-
174
- /* Small Mobile Devices (< 480px) - Font scaling */
175
- @media screen and (max-width: 479px) {
176
- :root {
177
- /* Media-specific base font sizes for small mobile (can be overridden by theme) */
178
- --cide-theme-font-size-xs-base-sm: var(--cide-theme-font-size-xs-base-sm, 0.63rem); /* 10.08px */
179
- --cide-theme-font-size-sm-base-sm: var(--cide-theme-font-size-sm-base-sm, 0.7rem); /* 11.2px */
180
- --cide-theme-font-size-lg-base-sm: var(--cide-theme-font-size-lg-base-sm, 1.1rem); /* 17.6px */
181
- --cide-theme-font-size-xl-base-sm: var(--cide-theme-font-size-xl-base-sm, 1.375rem); /* 22px */
182
- --cide-theme-font-size-xxl-base-sm: var(--cide-theme-font-size-xxl-base-sm, 1.71875rem); /* 27.5px */
183
- --cide-theme-font-size-xxxl-base-sm: var(--cide-theme-font-size-xxxl-base-sm, 2.1484375rem); /* 34.375px */
184
-
185
- /* Use theme scale (same across all media queries) - defaults to base scale if not set */
186
- --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
187
-
188
- /* Typographic scale - media base font size multiplied by theme scale */
189
- --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-sm) * var(--cide-lyt-font-responsive-scale));
190
- --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-sm) * var(--cide-lyt-font-responsive-scale));
191
- --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-sm) * var(--cide-lyt-font-responsive-scale));
192
- --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-sm) * var(--cide-lyt-font-responsive-scale));
193
- --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-sm) * var(--cide-lyt-font-responsive-scale));
194
- --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-sm) * var(--cide-lyt-font-responsive-scale));
195
- }
196
- }
197
-
198
- /* Mobile Devices (480px - 640px) - Font scaling */
199
- @media screen and (min-width: 480px) and (max-width: 640px) {
200
- :root {
201
- /* Media-specific base font sizes for medium mobile (can be overridden by theme) */
202
- --cide-theme-font-size-xs-base-md: var(--cide-theme-font-size-xs-base-md, 0.65rem); /* 10.4px */
203
- --cide-theme-font-size-sm-base-md: var(--cide-theme-font-size-sm-base-md, 0.72rem); /* 11.52px */
204
- --cide-theme-font-size-lg-base-md: var(--cide-theme-font-size-lg-base-md, 1.125rem); /* 18px */
205
- --cide-theme-font-size-xl-base-md: var(--cide-theme-font-size-xl-base-md, 1.40625rem); /* 22.5px */
206
- --cide-theme-font-size-xxl-base-md: var(--cide-theme-font-size-xxl-base-md, 1.7578125rem); /* 28.125px */
207
- --cide-theme-font-size-xxxl-base-md: var(--cide-theme-font-size-xxxl-base-md, 2.197265625rem); /* 35.15625px */
208
-
209
- /* Use theme scale (same across all media queries) - defaults to base scale if not set */
210
- --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
211
-
212
- /* Typographic scale - media base font size multiplied by theme scale */
213
- --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-md) * var(--cide-lyt-font-responsive-scale));
214
- --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-md) * var(--cide-lyt-font-responsive-scale));
215
- --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-md) * var(--cide-lyt-font-responsive-scale));
216
- --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-md) * var(--cide-lyt-font-responsive-scale));
217
- --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-md) * var(--cide-lyt-font-responsive-scale));
218
- --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-md) * var(--cide-lyt-font-responsive-scale));
219
- }
220
- }
221
-
222
- /* Tablet Devices (641px - 1024px) - Font scaling */
223
- @media screen and (min-width: 641px) and (max-width: 1024px) {
224
- :root {
225
- /* Media-specific base font sizes for tablet (can be overridden by theme) */
226
- --cide-theme-font-size-xs-base-lg: var(--cide-theme-font-size-xs-base-lg, 0.68rem); /* 10.88px */
227
- --cide-theme-font-size-sm-base-lg: var(--cide-theme-font-size-sm-base-lg, 0.76rem); /* 12.16px */
228
- --cide-theme-font-size-lg-base-lg: var(--cide-theme-font-size-lg-base-lg, 1.1875rem); /* 19px */
229
- --cide-theme-font-size-xl-base-lg: var(--cide-theme-font-size-xl-base-lg, 1.484375rem); /* 23.75px */
230
- --cide-theme-font-size-xxl-base-lg: var(--cide-theme-font-size-xxl-base-lg, 1.85546875rem); /* 29.6875px */
231
- --cide-theme-font-size-xxxl-base-lg: var(--cide-theme-font-size-xxxl-base-lg, 2.3193359375rem); /* 37.109375px */
232
-
233
- /* Use theme scale (same across all media queries) - defaults to base scale if not set */
234
- --cide-lyt-font-responsive-scale: var(--cide-lyt-font-responsive-scale-base, 1.0);
235
-
236
- /* Typographic scale - media base font size multiplied by theme scale */
237
- --cide-theme-font-size-xs: calc(var(--cide-theme-font-size-xs-base-lg) * var(--cide-lyt-font-responsive-scale));
238
- --cide-theme-font-size-sm: calc(var(--cide-theme-font-size-sm-base-lg) * var(--cide-lyt-font-responsive-scale));
239
- --cide-theme-font-size-lg: calc(var(--cide-theme-font-size-lg-base-lg) * var(--cide-lyt-font-responsive-scale));
240
- --cide-theme-font-size-xl: calc(var(--cide-theme-font-size-xl-base-lg) * var(--cide-lyt-font-responsive-scale));
241
- --cide-theme-font-size-xxl: calc(var(--cide-theme-font-size-xxl-base-lg) * var(--cide-lyt-font-responsive-scale));
242
- --cide-theme-font-size-xxxl: calc(var(--cide-theme-font-size-xxxl-base-lg) * var(--cide-lyt-font-responsive-scale));
243
- }
244
- }
245
-
246
- /* Base styles for the body */
247
- body {
248
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
249
- font-size: var(--cide-theme-font-size-base);
250
- line-height: var(--cide-theme-line-height-body);
251
- color: #333; /* Use a dark gray, not pure black */
252
- }
253
-
254
- /* Rules for Headings */
255
- h1, h2, h3, h4, h5 {
256
- // margin: 2rem 0 1rem 0;
257
- font-family: inherit;
258
- line-height: var(--cide-theme-line-height-heading);
259
- }
260
-
261
- h1 {
262
- font-size: var(--cide-theme-font-size-xxxxl);
263
- font-weight: var(--cide-theme-font-weight-bold);
264
- }
265
-
266
- h2 {
267
- font-size: var(--cide-theme-font-size-xxxl);
268
- font-weight: var(--cide-theme-font-weight-bold);
269
- }
270
-
271
- h3 {
272
- font-size: var(--cide-theme-font-size-xxl);
273
- font-weight: var(--cide-theme-font-weight-bold);
274
- }
275
-
276
- h4 {
277
- font-size: var(--cide-theme-font-size-xl);
278
- font-weight: var(--cide-theme-font-weight-semibold);
279
- }
280
-
281
- h5 {
282
- font-size: var(--cide-theme-font-size-lg);
283
- font-weight: var(--cide-theme-font-weight-semibold);
284
- }
285
-
286
- /* Use a class for small text to be explicit */
287
- .text-small {
288
- font-size: var(--cide-theme-font-size-sm);
289
- }