|
1 | | -* { |
2 | | - /*global styles*/ |
3 | | - font-family: |
4 | | - system-ui, Arial, Helvetica, sans-serif; /*set default font to system-based font*/ |
5 | | - line-height: 125%; /*set default line height to 125%*/ |
| 1 | +* {/*global styles*/ |
| 2 | + font-family: system-ui, Arial, Helvetica, sans-serif;/*set default font to system-based font*/ |
| 3 | + line-height: 125%;/*set default line height to 125%*/ |
6 | 4 | } |
7 | | -progress { |
8 | | - /*progress element styles*/ |
9 | | - height: 50px; |
10 | | - padding: 5px; |
11 | | - max-width: 300px; |
12 | | - width: 100%; |
13 | | - accent-color: #4888c8; |
| 5 | +progress {/*progress element styles*/ |
| 6 | + height: 50px; |
| 7 | + padding: 5px; |
| 8 | + max-width: 300px; |
| 9 | + width: 100%; |
| 10 | + accent-color: #4888c8; |
14 | 11 | } |
15 | | -.progress-container { |
16 | | - /*progress container styles*/ |
17 | | - position: relative; |
18 | | - width: 100%; |
19 | | - max-width: 300px; |
| 12 | +.progress-container {/*progress container styles*/ |
| 13 | + position: relative; |
| 14 | + width: 100%; |
| 15 | + max-width: 300px; |
20 | 16 | } |
21 | | -.progress-bar { |
22 | | - /*progress bar styles*/ |
23 | | - width: 100%; |
| 17 | +.progress-bar {/*progress bar styles*/ |
| 18 | + width: 100%;/*use full width*/ |
24 | 19 | } |
25 | | -.progress-text { |
26 | | - /*progress text styles*/ |
27 | | - position: absolute; |
28 | | - width: 100%; |
29 | | - text-align: center; |
30 | | - top: 15px; |
31 | | - color: black; |
| 20 | +.progress-text {/*progress text styles*/ |
| 21 | + position: absolute; |
| 22 | + width: 100%;/*use full width*/ |
| 23 | + text-align: center;/*center align text*/ |
| 24 | + top: 15px; |
| 25 | + color: black; |
32 | 26 | } |
33 | | -.popup-message { |
34 | | - /*popup message styles*/ |
35 | | - position: absolute; |
36 | | - top: 20px; |
37 | | - right: 20px; |
38 | | - transform: translate(-50%, -50%); |
39 | | - background-color: #fff; |
40 | | - border: 1px solid #999; |
41 | | - padding: 20px; |
42 | | - border-radius: 10px; |
43 | | - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
| 27 | +.popup-message {/*popup message styles*/ |
| 28 | + position: absolute; |
| 29 | + top: 20px; |
| 30 | + right: 20px; |
| 31 | + transform: translate(-50%, -50%); |
| 32 | + background-color: #fff; |
| 33 | + border: 1px solid #999; |
| 34 | + padding: 20px; |
| 35 | + border-radius: 10px; |
| 36 | + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
44 | 37 | } |
45 | 38 |
|
46 | | -.popup-message p { |
47 | | - /*popup message paragraph styles*/ |
48 | | - font-size: 18px; |
49 | | - font-weight: bold; |
50 | | - color: #333; |
| 39 | +.popup-message p {/*popup message paragraph styles*/ |
| 40 | + font-size: 18px; |
| 41 | + font-weight: bold; |
| 42 | + color: #333;/*dark gray*/ |
51 | 43 | } |
0 commit comments