yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

refactor: use modern color functions

Browse Source
This commit is contained in:
pengzhanbo 2025-04-28 19:50:32 +08:00
parent 740bc4e364
commit a35ac8eae8
8 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/plugin-search/src/client/components/SearchBox.vue
View File

@ -648,10 +648,10 @@ svg {
padding: 3px 6px; padding: 3px 6px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background: rgba(128, 128, 128, 0.1); background: rgb(128 128 128 / 0.1);
border: 1px solid rgba(128, 128, 128, 0.15); border: 1px solid rgb(128 128 128 / 0.15);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0.1);
} }
.results { .results {

3
stylelint.config.js
View File

@ -9,5 +9,8 @@ export default stylelintConfig({
ignoreShorthands: ['inset'], ignoreShorthands: ['inset'],
}], }],
'media-feature-range-notation': null, 'media-feature-range-notation': null,
'color-function-notation': ['modern', {
ignore: ['with-var-inside'],
}],
}, },
}) })

10
theme/src/client/components/Blog/VPBlogExtract.vue
View File

@ -155,7 +155,7 @@ const showBlogExtract = computed(() => {
left: 0; left: 0;
z-index: var(--vp-z-index-overlay); z-index: var(--vp-z-index-overlay);
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.3); background-color: rgb(0 0 0 / 0.3);
} }
.blog-modal-container { .blog-modal-container {
@ -167,16 +167,16 @@ const showBlogExtract = computed(() => {
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px; border-top-right-radius: 12px;
box-shadow: box-shadow:
0 -3px 12px rgba(0, 0, 0, 0.1), 0 -3px 12px rgb(0 0 0 / 0.1),
0 -1px 4px rgba(0, 0, 0, 0.1); 0 -1px 4px rgb(0 0 0 / 0.1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(100%); transform: translateY(100%);
} }
[data-theme="dark"] .blog-modal-container { [data-theme="dark"] .blog-modal-container {
box-shadow: box-shadow:
0 -3px 12px rgba(0, 0, 0, 0.3), 0 -3px 12px rgb(0 0 0 / 0.3),
0 -1px 4px rgba(0, 0, 0, 0.27); 0 -1px 4px rgb(0 0 0 / 0.27);
} }
.blog-modal-container.open { .blog-modal-container.open {

2
theme/src/client/components/Home/VPHomeBanner.vue
View File

@ -82,7 +82,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgb(0, 0, 0); background-color: rgb(0 0 0);
transition: opacity var(--vp-t-color); transition: opacity var(--vp-t-color);
} }

2
theme/src/client/components/global/VPImageCard.vue
View File

@ -107,7 +107,7 @@ const styles = computed(() => {
overflow-y: hidden; overflow-y: hidden;
font-size: 14px; font-size: 14px;
color: var(--vp-c-white); color: var(--vp-c-white);
background-color: rgba(0, 0, 0, 0.5); background-color: rgb(0 0 0 / 0.5);
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
transition: transform var(--vp-t-color); transition: transform var(--vp-t-color);

6
theme/src/client/styles/code.css
View File

@ -1,9 +1,9 @@
[data-theme="dark"] .vp-code span { [data-theme="dark"] .vp-code span {
color: var(--shiki-dark, rgba(235, 235, 245, 0.6)); color: var(--shiki-dark, rgb(235 235 245 / 0.6));
} }
html:not([data-theme="dark"]) .vp-code span { html:not([data-theme="dark"]) .vp-code span {
color: var(--shiki-light, rgba(60, 60, 67, 0.78)); color: var(--shiki-light, rgb(60 60 67 / 0.78));
} }
.vp-doc div[class*="language-"], .vp-doc div[class*="language-"],
@ -317,7 +317,7 @@ html:not([data-theme="dark"]) .vp-code span {
.code-block-title .code-block-title-bar .title { .code-block-title .code-block-title-bar .title {
position: relative; position: relative;
padding: 10px 12px; padding: 11px 12px;
} }
.code-block-title .code-block-title-bar .title::before { .code-block-title .code-block-title-bar .title::before {

2
theme/src/client/styles/md-enhance.css
View File

@ -327,7 +327,7 @@
} }
.mermaid-preview { .mermaid-preview {
background-color: rgba(0, 0, 0, 0.45); background-color: rgb(0 0 0 / 0.45);
} }
.mermaid-preview > svg { .mermaid-preview > svg {

64
theme/src/client/styles/vars.css
View File

@ -44,32 +44,32 @@
--vp-c-gray-1: #dddde3; --vp-c-gray-1: #dddde3;
--vp-c-gray-2: #e4e4e9; --vp-c-gray-2: #e4e4e9;
--vp-c-gray-3: #ebebef; --vp-c-gray-3: #ebebef;
--vp-c-gray-soft: rgba(142, 150, 170, 0.14); --vp-c-gray-soft: rgb(142 150 170 / 0.14);
--vp-c-turquoise-1: #5086a1; --vp-c-turquoise-1: #5086a1;
--vp-c-turquoise-2: #6aa1b7; --vp-c-turquoise-2: #6aa1b7;
--vp-c-turquoise-3: #8cccd5; --vp-c-turquoise-3: #8cccd5;
--vp-c-turquoise-soft: rgba(131, 208, 218, 0.314); --vp-c-turquoise-soft: rgb(131 208 218 / 0.314);
--vp-c-green-1: #18794e; --vp-c-green-1: #18794e;
--vp-c-green-2: #299764; --vp-c-green-2: #299764;
--vp-c-green-3: #30a46c; --vp-c-green-3: #30a46c;
--vp-c-green-soft: rgba(16, 185, 129, 0.14); --vp-c-green-soft: rgb(16 185 129 / 0.14);
--vp-c-yellow-1: #915930; --vp-c-yellow-1: #915930;
--vp-c-yellow-2: #946300; --vp-c-yellow-2: #946300;
--vp-c-yellow-3: #9f6a00; --vp-c-yellow-3: #9f6a00;
--vp-c-yellow-soft: rgba(234, 179, 8, 0.14); --vp-c-yellow-soft: rgb(234 179 8 / 0.14);
--vp-c-red-1: #b8272c; --vp-c-red-1: #b8272c;
--vp-c-red-2: #d5393e; --vp-c-red-2: #d5393e;
--vp-c-red-3: #e0575b; --vp-c-red-3: #e0575b;
--vp-c-red-soft: rgba(244, 63, 94, 0.14); --vp-c-red-soft: rgb(244 63 94 / 0.14);
--vp-c-purple-1: #6f42c1; --vp-c-purple-1: #6f42c1;
--vp-c-purple-2: #7e4cc9; --vp-c-purple-2: #7e4cc9;
--vp-c-purple-3: #8e5cd9; --vp-c-purple-3: #8e5cd9;
--vp-c-purple-soft: rgba(159, 122, 234, 0.14); --vp-c-purple-soft: rgb(159 122 234 / 0.14);
--vp-c-sponsor: #db2777; --vp-c-sponsor: #db2777;
} }
@ -78,32 +78,32 @@
--vp-c-gray-1: #515c67; --vp-c-gray-1: #515c67;
--vp-c-gray-2: #414853; --vp-c-gray-2: #414853;
--vp-c-gray-3: #32363f; --vp-c-gray-3: #32363f;
--vp-c-gray-soft: rgba(101, 117, 133, 0.16); --vp-c-gray-soft: rgb(101 117 133 / 0.16);
--vp-c-turquoise-1: #8cccd5; --vp-c-turquoise-1: #8cccd5;
--vp-c-turquoise-2: #6aa1b7; --vp-c-turquoise-2: #6aa1b7;
--vp-c-turquoise-3: #5086a1; --vp-c-turquoise-3: #5086a1;
--vp-c-turquoise-soft: rgba(131, 208, 218, 0.314); --vp-c-turquoise-soft: rgb(131 208 218 / 0.314);
--vp-c-green-1: #3dd68c; --vp-c-green-1: #3dd68c;
--vp-c-green-2: #30a46c; --vp-c-green-2: #30a46c;
--vp-c-green-3: #298459; --vp-c-green-3: #298459;
--vp-c-green-soft: rgba(16, 185, 129, 0.16); --vp-c-green-soft: rgb(16 185 129 / 0.16);
--vp-c-yellow-1: #f9b44e; --vp-c-yellow-1: #f9b44e;
--vp-c-yellow-2: #da8b17; --vp-c-yellow-2: #da8b17;
--vp-c-yellow-3: #a46a0a; --vp-c-yellow-3: #a46a0a;
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16); --vp-c-yellow-soft: rgb(234 179 8 / 0.16);
--vp-c-red-1: #f66f81; --vp-c-red-1: #f66f81;
--vp-c-red-2: #f14158; --vp-c-red-2: #f14158;
--vp-c-red-3: #b62a3c; --vp-c-red-3: #b62a3c;
--vp-c-red-soft: rgba(244, 63, 94, 0.16); --vp-c-red-soft: rgb(244 63 94 / 0.16);
--vp-c-purple-1: #c8abfa; --vp-c-purple-1: #c8abfa;
--vp-c-purple-2: #a879e6; --vp-c-purple-2: #a879e6;
--vp-c-purple-3: #8e5cd9; --vp-c-purple-3: #8e5cd9;
--vp-c-purple-soft: rgba(159, 122, 234, 0.16); --vp-c-purple-soft: rgb(159 122 234 / 0.16);
} }
/** /**
@ -170,19 +170,19 @@
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon". * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-c-text-1: rgba(60, 60, 67); --vp-c-text-1: rgb(60 60 67);
--vp-c-text-2: rgba(60, 60, 67, 0.78); --vp-c-text-2: rgb(60 60 67 / 0.78);
--vp-c-text-3: rgba(60, 60, 67, 0.56); --vp-c-text-3: rgb(60 60 67 / 0.56);
--vp-c-text-dark-1: rgba(255, 255, 245, 0.86); --vp-c-text-dark-1: rgb(255 255 245 / 0.86);
--vp-c-text-dark-2: rgba(235, 235, 245, 0.6); --vp-c-text-dark-2: rgb(235 235 245 / 0.6);
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38); --vp-c-text-dark-3: rgb(235 235 245 / 0.38);
} }
[data-theme="dark"] { [data-theme="dark"] {
--vp-c-text-1: rgba(255, 255, 245, 0.86); --vp-c-text-1: rgb(255 255 245 / 0.86);
--vp-c-text-2: rgba(235, 235, 245, 0.6); --vp-c-text-2: rgb(235 235 245 / 0.6);
--vp-c-text-3: rgba(235, 235, 245, 0.38); --vp-c-text-3: rgb(235 235 245 / 0.38);
} }
/** /**
@ -298,19 +298,19 @@
* Shadows * Shadows
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --vp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06);
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07); --vp-shadow-2: 0 3px 12px rgb(0 0 0 / 0.07), 0 1px 4px rgb(0 0 0 / 0.07);
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08); --vp-shadow-3: 0 12px 32px rgb(0 0 0 / 0.1), 0 2px 6px rgb(0 0 0 / 0.08);
--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12); --vp-shadow-4: 0 14px 44px rgb(0 0 0 / 0.12), 0 3px 9px rgb(0 0 0 / 0.12);
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16); --vp-shadow-5: 0 18px 56px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.16);
} }
[data-theme="dark"] { [data-theme="dark"] {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.27), 0 1px 2px rgba(0, 0, 0, 0.22); --vp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.27), 0 1px 2px rgb(0 0 0 / 0.22);
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.27); --vp-shadow-2: 0 3px 12px rgb(0 0 0 / 0.3), 0 1px 4px rgb(0 0 0 / 0.27);
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3); --vp-shadow-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 2px 6px rgb(0 0 0 / 0.3);
--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.39), 0 3px 9px rgba(0, 0, 0, 0.35); --vp-shadow-4: 0 14px 44px rgb(0 0 0 / 0.39), 0 3px 9px rgb(0 0 0 / 0.35);
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.38); --vp-shadow-5: 0 18px 56px rgb(0 0 0 / 0.42), 0 4px 12px rgb(0 0 0 / 0.38);
} }
/** /**
@ -509,7 +509,7 @@
* Colors Backdrop * Colors Backdrop
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-backdrop-bg-color: rgba(0, 0, 0, 0.6); --vp-backdrop-bg-color: rgb(0 0 0 / 0.6);
} }
/** /**