Skip to content

Commit 758e22f

Browse files
cotes2020cotes2020
committed
style: change css color functions to use modern notation
- `rgba()` → `rgb()`
1 parent f86eee8 commit 758e22f

File tree

8 files changed

+74
-80
lines changed

8 files changed

+74
-80
lines changed

‎.stylelintrc.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
"property-no-vendor-prefix": null,
99
"selector-no-vendor-prefix": null,
1010
"value-no-vendor-prefix": null,
11-
"color-function-notation": "legacy",
12-
"alpha-value-notation": "number",
1311
"selector-not-notation": "simple",
1412
"color-hex-length": "long",
1513
"declaration-block-single-line-max-declarations": 3,

‎_sass/base/_base.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ main {
103103
width: 100%;
104104
height: 100%;
105105
position: absolute;
106-
background-color: var(--card-hovor-bg);
106+
background-color: var(--card-hover-bg);
107107
opacity: 0;
108108
transition: opacity 0.35s ease-in-out;
109109
}
@@ -349,7 +349,7 @@ main {
349349
}
350350

351351
.disabled {
352-
color: rgb(206, 196, 196);
352+
color: rgb(206 196 196);
353353
pointer-events: auto;
354354
cursor: not-allowed;
355355
}

‎_sass/base/_syntax.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ code {
6666
&.highlighter-rouge {
6767
font-size: v.$code-font-size;
6868
padding: 3px 5px;
69-
word-break: break-word;
69+
overflow-wrap: break-word;
7070
border-radius: v.$radius-sm;
7171
background-color: var(--inline-code-bg);
7272
}
@@ -243,7 +243,7 @@ div {
243243
}
244244

245245
&:not([timeout]):hover {
246-
background-color: rgba(128, 128, 128, 0.37);
246+
background-color: rgb(128 128 128 / 37%);
247247

248248
i {
249249
color: white;

‎_sass/base/_typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ main {
238238
border-spacing: 0;
239239

240240
thead {
241-
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
241+
border-bottom: solid 2px rgb(210 215 217 / 75%);
242242

243243
th {
244244
@extend %table-cell;

‎_sass/components/_popups.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
border-radius: 0.5rem;
4242
-webkit-backdrop-filter: blur(10px);
4343
backdrop-filter: blur(10px);
44-
background-color: rgba(255, 255, 255, 0.5);
44+
background-color: rgb(255 255 255 / 50%);
4545
color: #1b1b1eba;
4646
position: fixed;
4747
left: 50%;

‎_sass/pages/_home.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
cursor: not-allowed;
161161

162162
.page-link {
163-
color: rgba(108, 117, 125, 0.57);
163+
color: rgb(108 117 125 / 57%);
164164
}
165165
}
166166
} /* .page-item */

‎_sass/themes/_dark.scss‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,33 @@
22
color-scheme: dark;
33

44
/* Framework color */
5-
--main-bg: rgb(27, 27, 30);
6-
--mask-bg: rgb(68, 69, 70);
7-
--main-border-color: rgb(44, 45, 45);
5+
--main-bg: rgb(27 27 30);
6+
--mask-bg: rgb(68 69 70);
7+
--main-border-color: rgb(44 45 45);
88

99
/* Common color */
10-
--text-color: rgb(175, 176, 177);
10+
--text-color: rgb(175 176 177);
1111
--text-muted-color: #868686;
1212
--text-muted-highlight-color: #aeaeae;
1313
--heading-color: #cccccc;
1414
--label-color: #a7a7a7;
15-
--blockquote-border-color: rgb(66, 66, 66);
15+
--blockquote-border-color: rgb(66 66 66);
1616
--blockquote-text-color: #868686;
17-
--link-color: rgb(138, 180, 248);
18-
--link-underline-color: rgb(82, 108, 150);
17+
--link-color: rgb(138 180 248);
18+
--link-underline-color: rgb(82 108 150);
1919
--button-bg: #1e1e1e;
2020
--btn-border-color: #2e2f31;
2121
--btn-backtotop-color: var(--text-color);
2222
--btn-backtotop-border-color: #212122;
2323
--card-header-bg: #292929;
24-
--checkbox-color: rgb(118, 120, 121);
24+
--checkbox-color: rgb(118 120 121);
2525
--checkbox-checked-color: var(--link-color);
26-
--img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
26+
--img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
2727
--shimmer-bg: linear-gradient(
2828
90deg,
29-
rgba(255, 255, 255, 0) 0%,
30-
rgba(58, 55, 55, 0.4) 50%,
31-
rgba(255, 255, 255, 0) 100%
29+
rgb(255 255 255 / 0%) 0%,
30+
rgb(58 55 55 / 40%) 50%,
31+
rgb(255 255 255 / 0%) 100%
3232
);
3333

3434
/* Sidebar */
@@ -37,73 +37,73 @@
3737
--sidebar-bg: #1e1e1e;
3838
--sidebar-border-color: #292929;
3939
--sidebar-muted-color: #868686;
40-
--sidebar-active-color: rgb(255, 255, 255, 0.95);
40+
--sidebar-active-color: rgb(255 255 255 / 95%);
4141
--sidebar-hover-bg: #262626;
4242
--sidebar-btn-bg: #232328;
4343
--sidebar-btn-color: #787878;
44-
--avatar-border-color: rgb(206, 206, 206, 0.9);
44+
--avatar-border-color: rgb(206 206 206 / 90%);
4545

4646
/* Topbar */
47-
--topbar-bg: rgb(27, 27, 30, 0.64);
47+
--topbar-bg: rgb(27 27 30 / 64%);
4848
--topbar-text-color: var(--text-color);
49-
--search-border-color: rgb(55, 55, 55);
50-
--search-icon-color: rgb(100, 102, 105);
51-
--input-focus-border-color: rgb(112, 114, 115);
49+
--search-border-color: rgb(55 55 55);
50+
--search-icon-color: rgb(100 102 105);
51+
--input-focus-border-color: rgb(112 114 115);
5252

5353
/* Home page */
54-
--post-list-text-color: rgb(175, 176, 177);
54+
--post-list-text-color: rgb(175 176 177);
5555
--btn-patinator-text-color: var(--text-color);
5656
--btn-paginator-hover-color: #2e2e2e;
5757

5858
/* Posts */
59-
--toc-highlight: rgb(116, 178, 243);
59+
--toc-highlight: rgb(116 178 243);
6060
--toc-popup-border-color: #373737;
61-
--tag-hover: rgb(43, 56, 62);
61+
--tag-hover: rgb(43 56 62);
6262
--tb-odd-bg: #252526; /* odd rows of the posts' table */
63-
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
63+
--tb-even-bg: rgb(31 31 34); /* even rows of the posts' table */
6464
--tb-border-color: var(--tb-odd-bg);
65-
--footnote-target-bg: rgb(63, 81, 181);
65+
--footnote-target-bg: rgb(63 81 181);
6666
--btn-share-color: #6c757d;
6767
--btn-share-hover-color: #bfc1ca;
6868
--card-bg: #1e1e1e;
69-
--card-hovor-bg: #464d51;
70-
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
71-
rgb(137, 135, 135, 0.24) 0 0 0 1px;
69+
--card-hover-bg: #464d51;
70+
--card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0,
71+
rgb(137 135 135 / 24%) 0 0 0 1px;
7272
--kbd-wrap-color: #6a6a6a;
7373
--kbd-text-color: #d3d3d3;
7474
--kbd-bg-color: #242424;
75-
--prompt-text-color: rgb(216, 212, 212, 0.75);
76-
--prompt-tip-bg: rgb(22, 60, 36, 0.64);
77-
--prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
78-
--prompt-info-bg: rgb(7, 59, 104, 0.8);
75+
--prompt-text-color: rgb(216 212 212 / 75%);
76+
--prompt-tip-bg: rgb(22 60 36 / 64%);
77+
--prompt-tip-icon-color: rgb(15 164 15 / 81%);
78+
--prompt-info-bg: rgb(7 59 104 / 80%);
7979
--prompt-info-icon-color: #0075d1;
80-
--prompt-warning-bg: rgb(90, 69, 3, 0.88);
81-
--prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
82-
--prompt-danger-bg: rgb(86, 28, 8, 0.8);
80+
--prompt-warning-bg: rgb(90 69 3 / 88%);
81+
--prompt-warning-icon-color: rgb(255 165 0 / 80%);
82+
--prompt-danger-bg: rgb(86 28 8 / 80%);
8383
--prompt-danger-icon-color: #cd0202;
8484

8585
/* Tags */
86-
--tag-border: rgb(59, 79, 88);
87-
--tag-shadow: rgb(32, 33, 33);
88-
--dash-color: rgb(63, 65, 68);
86+
--tag-border: rgb(59 79 88);
87+
--tag-shadow: rgb(32 33 33);
88+
--dash-color: rgb(63 65 68);
8989
--search-tag-bg: #292828;
9090

9191
/* Categories */
92-
--categories-border: rgb(64, 66, 69, 0.5);
93-
--categories-hover-bg: rgb(73, 75, 76);
92+
--categories-border: rgb(64 66 69 / 50%);
93+
--categories-hover-bg: rgb(73 75 76);
9494
--categories-icon-hover-color: white;
9595

9696
/* Archive */
97-
--timeline-node-bg: rgb(150, 152, 156);
98-
--timeline-color: rgb(63, 65, 68);
97+
--timeline-node-bg: rgb(150 152 156);
98+
--timeline-color: rgb(63 65 68);
9999
--timeline-year-dot-color: var(--timeline-color);
100100

101101
/* Code highlight colors */
102102
--language-border-color: #2d2d2d;
103103
--highlight-bg-color: #151515;
104104
--highlighter-rouge-color: #c9def1;
105105
--highlight-lineno-color: #808080;
106-
--inline-code-bg: rgba(255, 255, 255, 0.05);
106+
--inline-code-bg: rgb(255 255 255 / 5%);
107107
--code-color: #b0b0b0;
108108
--code-header-text-color: #6a6a6a;
109109
--code-header-muted-color: #353535;
@@ -141,11 +141,11 @@
141141
#archives li:nth-child(odd) {
142142
background-image: linear-gradient(
143143
to left,
144-
rgb(26, 26, 30),
145-
rgb(39, 39, 45),
146-
rgb(39, 39, 45),
147-
rgb(39, 39, 45),
148-
rgb(26, 26, 30)
144+
rgb(26 26 30),
145+
rgb(39 39 45),
146+
rgb(39 39 45),
147+
rgb(39 39 45),
148+
rgb(26 26 30)
149149
);
150150
}
151151

‎_sass/themes/_light.scss‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,30 @@
2020
--btn-backtotop-border-color: #f1f1f1;
2121
--checkbox-color: #c5c5c5;
2222
--checkbox-checked-color: #07a8f7;
23-
--img-bg: radial-gradient(
24-
circle,
25-
rgb(255, 255, 255) 0%,
26-
rgb(239, 239, 239) 100%
27-
);
23+
--img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(239 239 239) 100%);
2824
--shimmer-bg: linear-gradient(
2925
90deg,
30-
rgba(250, 250, 250, 0) 0%,
31-
rgba(232, 230, 230, 1) 50%,
32-
rgba(250, 250, 250, 0) 100%
26+
rgb(250 250 250 / 0%) 0%,
27+
rgb(232 230 230 / 100%) 50%,
28+
rgb(250 250 250 / 0%) 100%
3329
);
3430

3531
/* Sidebar */
36-
--site-title-color: rgb(113, 113, 113);
32+
--site-title-color: rgb(113 113 113);
3733
--site-subtitle-color: #717171;
3834
--sidebar-bg: #f6f8fa;
3935
--sidebar-border-color: #efefef;
4036
--sidebar-muted-color: #545454;
4137
--sidebar-active-color: #1d1d1d;
42-
--sidebar-hover-bg: rgb(223, 233, 241, 0.64);
38+
--sidebar-hover-bg: rgb(223 233 241 / 64%);
4339
--sidebar-btn-bg: white;
4440
--sidebar-btn-color: #8e8e8e;
4541
--avatar-border-color: white;
4642

4743
/* Topbar */
48-
--topbar-bg: rgb(255, 255, 255, 0.7);
49-
--topbar-text-color: rgb(78, 78, 78);
50-
--search-border-color: rgb(240, 240, 240);
44+
--topbar-bg: rgb(255 255 255 / 70%);
45+
--topbar-text-color: rgb(78 78 78);
46+
--search-border-color: rgb(240 240 240);
5147
--search-icon-color: #c2c6cc;
5248
--input-focus-border-color: #b8b8b8;
5349

@@ -62,39 +58,39 @@
6258
--btn-share-color: gray;
6359
--btn-share-hover-color: #0d6efd;
6460
--card-bg: white;
65-
--card-hovor-bg: #e2e2e2;
66-
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
67-
rgba(211, 209, 209, 0.15) 0 0 0 1px;
61+
--card-hover-bg: #e2e2e2;
62+
--card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0,
63+
rgb(211 209 209 / 15%) 0 0 0 1px;
6864
--footnote-target-bg: lightcyan;
6965
--tb-odd-bg: #fbfcfd;
7066
--tb-border-color: #eaeaea;
7167
--dash-color: silver;
7268
--kbd-wrap-color: #bdbdbd;
7369
--kbd-text-color: var(--text-color);
7470
--kbd-bg-color: white;
75-
--prompt-text-color: rgb(46, 46, 46, 0.77);
76-
--prompt-tip-bg: rgb(123, 247, 144, 0.2);
71+
--prompt-text-color: rgb(46 46 46 / 77%);
72+
--prompt-tip-bg: rgb(123 247 144 / 20%);
7773
--prompt-tip-icon-color: #03b303;
7874
--prompt-info-bg: #e1f5fe;
7975
--prompt-info-icon-color: #0070cb;
80-
--prompt-warning-bg: rgb(255, 243, 205);
76+
--prompt-warning-bg: rgb(255 243 205);
8177
--prompt-warning-icon-color: #ef9c03;
82-
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
78+
--prompt-danger-bg: rgb(248 215 218 / 56%);
8379
--prompt-danger-icon-color: #df3c30;
8480

8581
/* Tags */
8682
--tag-border: #dee2e6;
8783
--tag-shadow: var(--btn-border-color);
88-
--tag-hover: rgb(222, 226, 230);
84+
--tag-hover: rgb(222 226 230);
8985
--search-tag-bg: #f8f9fa;
9086

9187
/* Categories */
92-
--categories-border: rgba(0, 0, 0, 0.125);
88+
--categories-border: rgb(0 0 0 / 12.5%);
9389
--categories-hover-bg: var(--btn-border-color);
9490
--categories-icon-hover-color: darkslategray;
9591

9692
/* Archive */
97-
--timeline-color: rgba(0, 0, 0, 0.075);
93+
--timeline-color: rgb(0 0 0 / 7.5%);
9894
--timeline-node-bg: #c2c6cc;
9995
--timeline-year-dot-color: #ffffff;
10096

@@ -103,15 +99,15 @@
10399
--highlight-bg-color: #f6f8fa;
104100
--highlighter-rouge-color: #3f596f;
105101
--highlight-lineno-color: #9e9e9e;
106-
--inline-code-bg: rgba(25, 25, 28, 0.05);
102+
--inline-code-bg: rgb(25 25 28 / 5%);
107103
--code-color: #3a3a3a;
108104
--code-header-text-color: #a3a3a3;
109105
--code-header-muted-color: #e5e5e5;
110106
--code-header-icon-color: #c9c8c8;
111107
--clipboard-checked-color: #43c743;
112108

113109
[class^='prompt-'] {
114-
--link-underline-color: rgb(219, 216, 216);
110+
--link-underline-color: rgb(219 216 216);
115111
}
116112

117113
.dark {

0 commit comments

Comments
 (0)