diff --git a/.stylelintrc.json b/.stylelintrc.json index b89029095..c0c1b95a5 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -8,8 +8,6 @@ "property-no-vendor-prefix": null, "selector-no-vendor-prefix": null, "value-no-vendor-prefix": null, - "color-function-notation": "legacy", - "alpha-value-notation": "number", "selector-not-notation": "simple", "color-hex-length": "long", "declaration-block-single-line-max-declarations": 3, diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss index 19f153bd6..46e9eb6e8 100644 --- a/_sass/base/_base.scss +++ b/_sass/base/_base.scss @@ -103,7 +103,7 @@ main { width: 100%; height: 100%; position: absolute; - background-color: var(--card-hovor-bg); + background-color: var(--card-hover-bg); opacity: 0; transition: opacity 0.35s ease-in-out; } @@ -349,7 +349,7 @@ main { } .disabled { - color: rgb(206, 196, 196); + color: rgb(206 196 196); pointer-events: auto; cursor: not-allowed; } diff --git a/_sass/base/_syntax.scss b/_sass/base/_syntax.scss index 69924fc69..ae03d0dc9 100644 --- a/_sass/base/_syntax.scss +++ b/_sass/base/_syntax.scss @@ -66,7 +66,7 @@ code { &.highlighter-rouge { font-size: v.$code-font-size; padding: 3px 5px; - word-break: break-word; + overflow-wrap: break-word; border-radius: v.$radius-sm; background-color: var(--inline-code-bg); } @@ -243,7 +243,7 @@ div { } &:not([timeout]):hover { - background-color: rgba(128, 128, 128, 0.37); + background-color: rgb(128 128 128 / 37%); i { color: white; diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss index 4cf396436..1e7a6ef3e 100644 --- a/_sass/base/_typography.scss +++ b/_sass/base/_typography.scss @@ -238,7 +238,7 @@ main { border-spacing: 0; thead { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); + border-bottom: solid 2px rgb(210 215 217 / 75%); th { @extend %table-cell; diff --git a/_sass/components/_popups.scss b/_sass/components/_popups.scss index ca3e2fc69..e94fcde36 100644 --- a/_sass/components/_popups.scss +++ b/_sass/components/_popups.scss @@ -41,7 +41,7 @@ border-radius: 0.5rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, 0.5); + background-color: rgb(255 255 255 / 50%); color: #1b1b1eba; position: fixed; left: 50%; diff --git a/_sass/pages/_home.scss b/_sass/pages/_home.scss index 7a4bbf9b0..027cbe6a6 100644 --- a/_sass/pages/_home.scss +++ b/_sass/pages/_home.scss @@ -160,7 +160,7 @@ cursor: not-allowed; .page-link { - color: rgba(108, 117, 125, 0.57); + color: rgb(108 117 125 / 57%); } } } /* .page-item */ diff --git a/_sass/themes/_dark.scss b/_sass/themes/_dark.scss index 8c2f6ea8b..aae652213 100644 --- a/_sass/themes/_dark.scss +++ b/_sass/themes/_dark.scss @@ -2,33 +2,33 @@ color-scheme: dark; /* Framework color */ - --main-bg: rgb(27, 27, 30); - --mask-bg: rgb(68, 69, 70); - --main-border-color: rgb(44, 45, 45); + --main-bg: rgb(27 27 30); + --mask-bg: rgb(68 69 70); + --main-border-color: rgb(44 45 45); /* Common color */ - --text-color: rgb(175, 176, 177); + --text-color: rgb(175 176 177); --text-muted-color: #868686; --text-muted-highlight-color: #aeaeae; --heading-color: #cccccc; --label-color: #a7a7a7; - --blockquote-border-color: rgb(66, 66, 66); + --blockquote-border-color: rgb(66 66 66); --blockquote-text-color: #868686; - --link-color: rgb(138, 180, 248); - --link-underline-color: rgb(82, 108, 150); + --link-color: rgb(138 180 248); + --link-underline-color: rgb(82 108 150); --button-bg: #1e1e1e; --btn-border-color: #2e2f31; --btn-backtotop-color: var(--text-color); --btn-backtotop-border-color: #212122; --card-header-bg: #292929; - --checkbox-color: rgb(118, 120, 121); + --checkbox-color: rgb(118 120 121); --checkbox-checked-color: var(--link-color); - --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%); --shimmer-bg: linear-gradient( 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(58, 55, 55, 0.4) 50%, - rgba(255, 255, 255, 0) 100% + rgb(255 255 255 / 0%) 0%, + rgb(58 55 55 / 40%) 50%, + rgb(255 255 255 / 0%) 100% ); /* Sidebar */ @@ -37,65 +37,65 @@ --sidebar-bg: #1e1e1e; --sidebar-border-color: #292929; --sidebar-muted-color: #868686; - --sidebar-active-color: rgb(255, 255, 255, 0.95); + --sidebar-active-color: rgb(255 255 255 / 95%); --sidebar-hover-bg: #262626; --sidebar-btn-bg: #232328; --sidebar-btn-color: #787878; - --avatar-border-color: rgb(206, 206, 206, 0.9); + --avatar-border-color: rgb(206 206 206 / 90%); /* Topbar */ - --topbar-bg: rgb(27, 27, 30, 0.64); + --topbar-bg: rgb(27 27 30 / 64%); --topbar-text-color: var(--text-color); - --search-border-color: rgb(55, 55, 55); - --search-icon-color: rgb(100, 102, 105); - --input-focus-border-color: rgb(112, 114, 115); + --search-border-color: rgb(55 55 55); + --search-icon-color: rgb(100 102 105); + --input-focus-border-color: rgb(112 114 115); /* Home page */ - --post-list-text-color: rgb(175, 176, 177); + --post-list-text-color: rgb(175 176 177); --btn-patinator-text-color: var(--text-color); --btn-paginator-hover-color: #2e2e2e; /* Posts */ - --toc-highlight: rgb(116, 178, 243); + --toc-highlight: rgb(116 178 243); --toc-popup-border-color: #373737; - --tag-hover: rgb(43, 56, 62); + --tag-hover: rgb(43 56 62); --tb-odd-bg: #252526; /* odd rows of the posts' table */ - --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ + --tb-even-bg: rgb(31 31 34); /* even rows of the posts' table */ --tb-border-color: var(--tb-odd-bg); - --footnote-target-bg: rgb(63, 81, 181); + --footnote-target-bg: rgb(63 81 181); --btn-share-color: #6c757d; --btn-share-hover-color: #bfc1ca; --card-bg: #1e1e1e; - --card-hovor-bg: #464d51; - --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0, - rgb(137, 135, 135, 0.24) 0 0 0 1px; + --card-hover-bg: #464d51; + --card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0, + rgb(137 135 135 / 24%) 0 0 0 1px; --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; - --prompt-text-color: rgb(216, 212, 212, 0.75); - --prompt-tip-bg: rgb(22, 60, 36, 0.64); - --prompt-tip-icon-color: rgb(15, 164, 15, 0.81); - --prompt-info-bg: rgb(7, 59, 104, 0.8); + --prompt-text-color: rgb(216 212 212 / 75%); + --prompt-tip-bg: rgb(22 60 36 / 64%); + --prompt-tip-icon-color: rgb(15 164 15 / 81%); + --prompt-info-bg: rgb(7 59 104 / 80%); --prompt-info-icon-color: #0075d1; - --prompt-warning-bg: rgb(90, 69, 3, 0.88); - --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); - --prompt-danger-bg: rgb(86, 28, 8, 0.8); + --prompt-warning-bg: rgb(90 69 3 / 88%); + --prompt-warning-icon-color: rgb(255 165 0 / 80%); + --prompt-danger-bg: rgb(86 28 8 / 80%); --prompt-danger-icon-color: #cd0202; /* Tags */ - --tag-border: rgb(59, 79, 88); - --tag-shadow: rgb(32, 33, 33); - --dash-color: rgb(63, 65, 68); + --tag-border: rgb(59 79 88); + --tag-shadow: rgb(32 33 33); + --dash-color: rgb(63 65 68); --search-tag-bg: #292828; /* Categories */ - --categories-border: rgb(64, 66, 69, 0.5); - --categories-hover-bg: rgb(73, 75, 76); + --categories-border: rgb(64 66 69 / 50%); + --categories-hover-bg: rgb(73 75 76); --categories-icon-hover-color: white; /* Archive */ - --timeline-node-bg: rgb(150, 152, 156); - --timeline-color: rgb(63, 65, 68); + --timeline-node-bg: rgb(150 152 156); + --timeline-color: rgb(63 65 68); --timeline-year-dot-color: var(--timeline-color); /* Code highlight colors */ @@ -103,7 +103,7 @@ --highlight-bg-color: #151515; --highlighter-rouge-color: #c9def1; --highlight-lineno-color: #808080; - --inline-code-bg: rgba(255, 255, 255, 0.05); + --inline-code-bg: rgb(255 255 255 / 5%); --code-color: #b0b0b0; --code-header-text-color: #6a6a6a; --code-header-muted-color: #353535; @@ -141,11 +141,11 @@ #archives li:nth-child(odd) { background-image: linear-gradient( to left, - rgb(26, 26, 30), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(39, 39, 45), - rgb(26, 26, 30) + rgb(26 26 30), + rgb(39 39 45), + rgb(39 39 45), + rgb(39 39 45), + rgb(26 26 30) ); } diff --git a/_sass/themes/_light.scss b/_sass/themes/_light.scss index 14c3962b7..48d47558a 100644 --- a/_sass/themes/_light.scss +++ b/_sass/themes/_light.scss @@ -20,34 +20,30 @@ --btn-backtotop-border-color: #f1f1f1; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; - --img-bg: radial-gradient( - circle, - rgb(255, 255, 255) 0%, - rgb(239, 239, 239) 100% - ); + --img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(239 239 239) 100%); --shimmer-bg: linear-gradient( 90deg, - rgba(250, 250, 250, 0) 0%, - rgba(232, 230, 230, 1) 50%, - rgba(250, 250, 250, 0) 100% + rgb(250 250 250 / 0%) 0%, + rgb(232 230 230 / 100%) 50%, + rgb(250 250 250 / 0%) 100% ); /* Sidebar */ - --site-title-color: rgb(113, 113, 113); + --site-title-color: rgb(113 113 113); --site-subtitle-color: #717171; --sidebar-bg: #f6f8fa; --sidebar-border-color: #efefef; --sidebar-muted-color: #545454; --sidebar-active-color: #1d1d1d; - --sidebar-hover-bg: rgb(223, 233, 241, 0.64); + --sidebar-hover-bg: rgb(223 233 241 / 64%); --sidebar-btn-bg: white; --sidebar-btn-color: #8e8e8e; --avatar-border-color: white; /* Topbar */ - --topbar-bg: rgb(255, 255, 255, 0.7); - --topbar-text-color: rgb(78, 78, 78); - --search-border-color: rgb(240, 240, 240); + --topbar-bg: rgb(255 255 255 / 70%); + --topbar-text-color: rgb(78 78 78); + --search-border-color: rgb(240 240 240); --search-icon-color: #c2c6cc; --input-focus-border-color: #b8b8b8; @@ -62,9 +58,9 @@ --btn-share-color: gray; --btn-share-hover-color: #0d6efd; --card-bg: white; - --card-hovor-bg: #e2e2e2; - --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, - rgba(211, 209, 209, 0.15) 0 0 0 1px; + --card-hover-bg: #e2e2e2; + --card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0, + rgb(211 209 209 / 15%) 0 0 0 1px; --footnote-target-bg: lightcyan; --tb-odd-bg: #fbfcfd; --tb-border-color: #eaeaea; @@ -72,29 +68,29 @@ --kbd-wrap-color: #bdbdbd; --kbd-text-color: var(--text-color); --kbd-bg-color: white; - --prompt-text-color: rgb(46, 46, 46, 0.77); - --prompt-tip-bg: rgb(123, 247, 144, 0.2); + --prompt-text-color: rgb(46 46 46 / 77%); + --prompt-tip-bg: rgb(123 247 144 / 20%); --prompt-tip-icon-color: #03b303; --prompt-info-bg: #e1f5fe; --prompt-info-icon-color: #0070cb; - --prompt-warning-bg: rgb(255, 243, 205); + --prompt-warning-bg: rgb(255 243 205); --prompt-warning-icon-color: #ef9c03; - --prompt-danger-bg: rgb(248, 215, 218, 0.56); + --prompt-danger-bg: rgb(248 215 218 / 56%); --prompt-danger-icon-color: #df3c30; /* Tags */ --tag-border: #dee2e6; --tag-shadow: var(--btn-border-color); - --tag-hover: rgb(222, 226, 230); + --tag-hover: rgb(222 226 230); --search-tag-bg: #f8f9fa; /* Categories */ - --categories-border: rgba(0, 0, 0, 0.125); + --categories-border: rgb(0 0 0 / 12.5%); --categories-hover-bg: var(--btn-border-color); --categories-icon-hover-color: darkslategray; /* Archive */ - --timeline-color: rgba(0, 0, 0, 0.075); + --timeline-color: rgb(0 0 0 / 7.5%); --timeline-node-bg: #c2c6cc; --timeline-year-dot-color: #ffffff; @@ -103,7 +99,7 @@ --highlight-bg-color: #f6f8fa; --highlighter-rouge-color: #3f596f; --highlight-lineno-color: #9e9e9e; - --inline-code-bg: rgba(25, 25, 28, 0.05); + --inline-code-bg: rgb(25 25 28 / 5%); --code-color: #3a3a3a; --code-header-text-color: #a3a3a3; --code-header-muted-color: #e5e5e5; @@ -111,7 +107,7 @@ --clipboard-checked-color: #43c743; [class^='prompt-'] { - --link-underline-color: rgb(219, 216, 216); + --link-underline-color: rgb(219 216 216); } .dark {