@semi-bot/semi-theme-fnos 1.0.10 → 1.0.12

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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/raw.json +25 -25
  4. package/scss/_palette.scss +22 -22
  5. package/scss/global.scss +3 -3
  6. package/scss/mixin.scss +1 -1
  7. package/semi.css +29 -29
  8. package/semi.min.css +1 -1
package/README.md CHANGED
@@ -5,7 +5,7 @@ Operator: Zuri
5
5
 
6
6
  ## Compatibility
7
7
 
8
- Compatible with Semi Foundation Version 2.88.0-beta.0 or newer.
8
+ Compatible with Semi Foundation Version 2.88.0-beta.1 or newer.
9
9
 
10
10
  ## Version Release Note
11
11
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semi-bot/semi-theme-fnos",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
5
5
  "keywords": [
6
6
  "semi-theme",
package/raw.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "palette": {
3
3
  "dark": {
4
4
  "--semi-black": "0, 0, 0",
5
- "--semi-red-0": "102,0,0",
5
+ "--semi-red-0": "51,0,0",
6
6
  "--semi-red-1": "155,0,0",
7
7
  "--semi-red-2": "182,0,0",
8
8
  "--semi-red-3": "204,0,0",
@@ -73,16 +73,16 @@
73
73
  "--semi-teal-7": "135,225,220",
74
74
  "--semi-teal-8": "192,240,236",
75
75
  "--semi-teal-9": "228,247,246",
76
- "--semi-amber-0": "80,30,0",
77
- "--semi-amber-1": "124,45,0",
78
- "--semi-amber-2": "148,58,0",
79
- "--semi-amber-3": "170,73,0",
80
- "--semi-amber-4": "189,91,0",
81
- "--semi-amber-5": "253,161,97",
82
- "--semi-amber-6": "255,197,143",
83
- "--semi-amber-7": "255,228,193",
84
- "--semi-amber-8": "255,240,219",
85
- "--semi-amber-9": "255,246,235",
76
+ "--semi-amber-0": "51,19,0",
77
+ "--semi-amber-1": "100,33,0",
78
+ "--semi-amber-2": "136,53,3",
79
+ "--semi-amber-3": "171,79,9",
80
+ "--semi-amber-4": "204,98,0",
81
+ "--semi-amber-5": "217,139,58",
82
+ "--semi-amber-6": "226,170,102",
83
+ "--semi-amber-7": "236,199,149",
84
+ "--semi-amber-8": "245,228,200",
85
+ "--semi-amber-9": "250,244,232",
86
86
  "--semi-black-0": "0,0,0",
87
87
  "--semi-black-1": "0,0,0",
88
88
  "--semi-black-2": "0,0,0",
@@ -205,7 +205,7 @@
205
205
  "--semi-red-6": "204,0,0",
206
206
  "--semi-red-7": "182,0,0",
207
207
  "--semi-red-8": "155,0,0",
208
- "--semi-red-9": "102,0,0",
208
+ "--semi-red-9": "51,0,0",
209
209
  "--semi-white": "255,255,255",
210
210
  "--semi-blue-0": "230,244,255",
211
211
  "--semi-blue-1": "215,237,255",
@@ -267,16 +267,16 @@
267
267
  "--semi-teal-7": "0,116,119",
268
268
  "--semi-teal-8": "0,86,90",
269
269
  "--semi-teal-9": "0,56,60",
270
- "--semi-amber-0": "255,246,235",
271
- "--semi-amber-1": "255,240,219",
272
- "--semi-amber-2": "255,228,193",
273
- "--semi-amber-3": "255,197,143",
274
- "--semi-amber-4": "253,161,97",
275
- "--semi-amber-5": "189,91,0",
276
- "--semi-amber-6": "170,73,0",
277
- "--semi-amber-7": "148,58,0",
278
- "--semi-amber-8": "124,45,0",
279
- "--semi-amber-9": "80,30,0",
270
+ "--semi-amber-0": "250,243,230",
271
+ "--semi-amber-1": "245,226,196",
272
+ "--semi-amber-2": "235,195,141",
273
+ "--semi-amber-3": "224,163,90",
274
+ "--semi-amber-4": "214,131,43",
275
+ "--semi-amber-5": "204,98,0",
276
+ "--semi-amber-6": "184,79,0",
277
+ "--semi-amber-7": "163,62,0",
278
+ "--semi-amber-8": "143,47,0",
279
+ "--semi-amber-9": "51,19,0",
280
280
  "--semi-black-0": "227,227,230",
281
281
  "--semi-black-1": "191,192,205",
282
282
  "--semi-black-2": "134,135,154",
@@ -667,7 +667,7 @@
667
667
  "tab/--semi-color-tab-SelectedBg": "rgba(var(--semi-grey-9),1)",
668
668
  "Scrollbar/--semi-color-Scrollbar": "rgba(var(--semi-grey-5),0.16)",
669
669
  "border/--semi-color-border-hover": "rgba(var(--semi-grey-8), 0.22)",
670
- "border/--semi-color-border-modal": "rgba(var(--semi-grey-8),0)",
670
+ "border/--semi-color-border-modal": "rgba(var(--semi-grey-8),0.08)",
671
671
  "card/--semi-color-card-DefaultBg": "rgba(var(--semi-grey-5),0.08)",
672
672
  "danger/--semi-color-danger-hover": "rgba(var(--semi-red-6), 1)",
673
673
  "highlight/--semi-color-highlight": "rgba(var(--semi-grey-9), 1)",
@@ -824,7 +824,7 @@
824
824
  "shadow-knob": "0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30)",
825
825
  "shadow-text": "0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2)",
826
826
  "shadow-dropdown": "0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2)",
827
- "shadow-elevated": "0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08)"
827
+ "shadow-elevated": "0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12)"
828
828
  },
829
829
  "spacing": {
830
830
  "$spacing-base": "16px",
@@ -1305,7 +1305,7 @@
1305
1305
  "lime": "#91d300",
1306
1306
  "pink": "#eb1e51",
1307
1307
  "teal": "#00b3b2",
1308
- "amber": "#BD5B00",
1308
+ "amber": "#CC6200",
1309
1309
  "black": "#66ccff",
1310
1310
  "brand": "#0066ff",
1311
1311
  "green": "#008753",
package/scss/_palette.scss CHANGED
@@ -9,7 +9,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
9
9
  --semi-red-6: 204,0,0;
10
10
  --semi-red-7: 182,0,0;
11
11
  --semi-red-8: 155,0,0;
12
- --semi-red-9: 102,0,0;
12
+ --semi-red-9: 51,0,0;
13
13
  --semi-white: 255,255,255;
14
14
  --semi-blue-0: 230,244,255;
15
15
  --semi-blue-1: 215,237,255;
@@ -71,16 +71,16 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
71
71
  --semi-teal-7: 0,116,119;
72
72
  --semi-teal-8: 0,86,90;
73
73
  --semi-teal-9: 0,56,60;
74
- --semi-amber-0: 255,246,235;
75
- --semi-amber-1: 255,240,219;
76
- --semi-amber-2: 255,228,193;
77
- --semi-amber-3: 255,197,143;
78
- --semi-amber-4: 253,161,97;
79
- --semi-amber-5: 189,91,0;
80
- --semi-amber-6: 170,73,0;
81
- --semi-amber-7: 148,58,0;
82
- --semi-amber-8: 124,45,0;
83
- --semi-amber-9: 80,30,0;
74
+ --semi-amber-0: 250,243,230;
75
+ --semi-amber-1: 245,226,196;
76
+ --semi-amber-2: 235,195,141;
77
+ --semi-amber-3: 224,163,90;
78
+ --semi-amber-4: 214,131,43;
79
+ --semi-amber-5: 204,98,0;
80
+ --semi-amber-6: 184,79,0;
81
+ --semi-amber-7: 163,62,0;
82
+ --semi-amber-8: 143,47,0;
83
+ --semi-amber-9: 51,19,0;
84
84
  --semi-black-0: 227,227,230;
85
85
  --semi-black-1: 191,192,205;
86
86
  --semi-black-2: 134,135,154;
@@ -206,7 +206,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
206
206
  }
207
207
  body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
208
208
  --semi-black: 0, 0, 0;
209
- --semi-red-0: 102,0,0;
209
+ --semi-red-0: 51,0,0;
210
210
  --semi-red-1: 155,0,0;
211
211
  --semi-red-2: 182,0,0;
212
212
  --semi-red-3: 204,0,0;
@@ -277,16 +277,16 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
277
277
  --semi-teal-7: 135,225,220;
278
278
  --semi-teal-8: 192,240,236;
279
279
  --semi-teal-9: 228,247,246;
280
- --semi-amber-0: 80,30,0;
281
- --semi-amber-1: 124,45,0;
282
- --semi-amber-2: 148,58,0;
283
- --semi-amber-3: 170,73,0;
284
- --semi-amber-4: 189,91,0;
285
- --semi-amber-5: 253,161,97;
286
- --semi-amber-6: 255,197,143;
287
- --semi-amber-7: 255,228,193;
288
- --semi-amber-8: 255,240,219;
289
- --semi-amber-9: 255,246,235;
280
+ --semi-amber-0: 51,19,0;
281
+ --semi-amber-1: 100,33,0;
282
+ --semi-amber-2: 136,53,3;
283
+ --semi-amber-3: 171,79,9;
284
+ --semi-amber-4: 204,98,0;
285
+ --semi-amber-5: 217,139,58;
286
+ --semi-amber-6: 226,170,102;
287
+ --semi-amber-7: 236,199,149;
288
+ --semi-amber-8: 245,228,200;
289
+ --semi-amber-9: 250,244,232;
290
290
  --semi-black-0: 0,0,0;
291
291
  --semi-black-1: 0,0,0;
292
292
  --semi-black-2: 0,0,0;
package/scss/global.scss CHANGED
@@ -97,7 +97,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
97
97
  --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9),1);
98
98
  --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
99
99
  --semi-color-border-hover: rgba(var(--semi-grey-8), 0.22);
100
- --semi-color-border-modal: rgba(var(--semi-grey-8),0);
100
+ --semi-color-border-modal: rgba(var(--semi-grey-8),0.08);
101
101
  --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.08);
102
102
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
103
103
  --semi-color-highlight: rgba(var(--semi-grey-9), 1);
@@ -169,7 +169,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
169
169
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
170
170
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',Helvetica, Arial, sans-serif;
171
171
  -webkit-font-smoothing: antialiased;;
172
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
172
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
173
173
  --semi-shadow-0: none;
174
174
  --semi-shadow-1: none;
175
175
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
@@ -362,7 +362,7 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
362
362
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
363
363
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',Helvetica, Arial, sans-serif;
364
364
  -webkit-font-smoothing: antialiased;;
365
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
365
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
366
366
  --semi-shadow-0: none;
367
367
  --semi-shadow-1: none;
368
368
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
package/scss/mixin.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  box-shadow: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
21
21
  };
22
22
  @mixin shadow-elevated {
23
- box-shadow: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
23
+ box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
24
24
  };
25
25
 
26
26
  @mixin box-sizing() {
package/semi.css CHANGED
@@ -11,7 +11,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
11
11
  --semi-red-6: 204,0,0;
12
12
  --semi-red-7: 182,0,0;
13
13
  --semi-red-8: 155,0,0;
14
- --semi-red-9: 102,0,0;
14
+ --semi-red-9: 51,0,0;
15
15
  --semi-white: 255,255,255;
16
16
  --semi-blue-0: 230,244,255;
17
17
  --semi-blue-1: 215,237,255;
@@ -73,16 +73,16 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
73
73
  --semi-teal-7: 0,116,119;
74
74
  --semi-teal-8: 0,86,90;
75
75
  --semi-teal-9: 0,56,60;
76
- --semi-amber-0: 255,246,235;
77
- --semi-amber-1: 255,240,219;
78
- --semi-amber-2: 255,228,193;
79
- --semi-amber-3: 255,197,143;
80
- --semi-amber-4: 253,161,97;
81
- --semi-amber-5: 189,91,0;
82
- --semi-amber-6: 170,73,0;
83
- --semi-amber-7: 148,58,0;
84
- --semi-amber-8: 124,45,0;
85
- --semi-amber-9: 80,30,0;
76
+ --semi-amber-0: 250,243,230;
77
+ --semi-amber-1: 245,226,196;
78
+ --semi-amber-2: 235,195,141;
79
+ --semi-amber-3: 224,163,90;
80
+ --semi-amber-4: 214,131,43;
81
+ --semi-amber-5: 204,98,0;
82
+ --semi-amber-6: 184,79,0;
83
+ --semi-amber-7: 163,62,0;
84
+ --semi-amber-8: 143,47,0;
85
+ --semi-amber-9: 51,19,0;
86
86
  --semi-black-0: 227,227,230;
87
87
  --semi-black-1: 191,192,205;
88
88
  --semi-black-2: 134,135,154;
@@ -207,7 +207,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
207
207
 
208
208
  body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
209
209
  --semi-black: 0, 0, 0;
210
- --semi-red-0: 102,0,0;
210
+ --semi-red-0: 51,0,0;
211
211
  --semi-red-1: 155,0,0;
212
212
  --semi-red-2: 182,0,0;
213
213
  --semi-red-3: 204,0,0;
@@ -278,16 +278,16 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
278
278
  --semi-teal-7: 135,225,220;
279
279
  --semi-teal-8: 192,240,236;
280
280
  --semi-teal-9: 228,247,246;
281
- --semi-amber-0: 80,30,0;
282
- --semi-amber-1: 124,45,0;
283
- --semi-amber-2: 148,58,0;
284
- --semi-amber-3: 170,73,0;
285
- --semi-amber-4: 189,91,0;
286
- --semi-amber-5: 253,161,97;
287
- --semi-amber-6: 255,197,143;
288
- --semi-amber-7: 255,228,193;
289
- --semi-amber-8: 255,240,219;
290
- --semi-amber-9: 255,246,235;
281
+ --semi-amber-0: 51,19,0;
282
+ --semi-amber-1: 100,33,0;
283
+ --semi-amber-2: 136,53,3;
284
+ --semi-amber-3: 171,79,9;
285
+ --semi-amber-4: 204,98,0;
286
+ --semi-amber-5: 217,139,58;
287
+ --semi-amber-6: 226,170,102;
288
+ --semi-amber-7: 236,199,149;
289
+ --semi-amber-8: 245,228,200;
290
+ --semi-amber-9: 250,244,232;
291
291
  --semi-black-0: 0,0,0;
292
292
  --semi-black-1: 0,0,0;
293
293
  --semi-black-2: 0,0,0;
@@ -497,7 +497,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
497
497
  --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9),1);
498
498
  --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
499
499
  --semi-color-border-hover: rgba(var(--semi-grey-8), 0.22);
500
- --semi-color-border-modal: rgba(var(--semi-grey-8),0);
500
+ --semi-color-border-modal: rgba(var(--semi-grey-8),0.08);
501
501
  --semi-color-card-DefaultBg: rgba(var(--semi-grey-5),0.08);
502
502
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
503
503
  --semi-color-highlight: rgba(var(--semi-grey-9), 1);
@@ -569,7 +569,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
569
569
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
570
570
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
571
571
  -webkit-font-smoothing: antialiased;
572
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
572
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
573
573
  --semi-shadow-0: none;
574
574
  --semi-shadow-1: none;
575
575
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
@@ -761,7 +761,7 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
761
761
  --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
762
762
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
763
763
  -webkit-font-smoothing: antialiased;
764
- --semi-shadow-elevated: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
764
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
765
765
  --semi-shadow-0: none;
766
766
  --semi-shadow-1: none;
767
767
  --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
@@ -8385,7 +8385,7 @@ body, :host {
8385
8385
  }
8386
8386
  .semi-dropdown-wrapper {
8387
8387
  overflow-y: auto;
8388
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
8388
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
8389
8389
  position: relative;
8390
8390
  z-index: 1050;
8391
8391
  border-radius: 8px;
@@ -16901,7 +16901,7 @@ img[src=""], img:not([src]) {
16901
16901
  }
16902
16902
 
16903
16903
  .semi-notification-notice {
16904
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
16904
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
16905
16905
  border-radius: var(--semi-border-radius-medium);
16906
16906
  padding-top: 16px;
16907
16907
  padding-right: 12px;
@@ -17533,7 +17533,7 @@ img[src=""], img:not([src]) {
17533
17533
  position: relative;
17534
17534
  background-color: var(--semi-color-bg-3);
17535
17535
  backdrop-filter: none;
17536
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
17536
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
17537
17537
  z-index: 1030;
17538
17538
  border-radius: var(--semi-border-radius-medium);
17539
17539
  font-size: 14px;
@@ -23125,7 +23125,7 @@ img[src=""], img:not([src]) {
23125
23125
  }
23126
23126
  .semi-toast-content {
23127
23127
  pointer-events: all;
23128
- box-shadow: 0px 12px 42px -4px rgba(0, 0, 0, 0.08), 0px 8px 16px -6px rgba(0, 0, 0, 0.08);
23128
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 10px 40px 0px rgba(0, 0, 0, 0.12);
23129
23129
  font-size: 14px;
23130
23130
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
23131
23131
  line-height: 20px;