mirror of
https://github.com/Aexiar/c.git
synced 2024-10-22 14:05:45 +02:00
349 lines
10 KiB
CSS
349 lines
10 KiB
CSS
|
:root {
|
||
|
--vp-c-brand-1: #18794e;
|
||
|
--vp-c-brand-2: #299764;
|
||
|
--vp-c-brand-3: #30a46c;
|
||
|
|
||
|
--vp-custom-block-info: #cccccc;
|
||
|
--vp-custom-block-info-bg: #fafafa;
|
||
|
--vp-custom-block-note: #4cb3d4;
|
||
|
--vp-custom-block-note-bg: #eef9fd;
|
||
|
--vp-custom-block-tip: #009400;
|
||
|
--vp-custom-block-tip-bg: #e6f6e6;
|
||
|
--vp-custom-block-warning: #e6a700;
|
||
|
--vp-custom-block-warning-bg: #fff8e6;
|
||
|
--vp-custom-block-danger: #e13238;
|
||
|
--vp-custom-block-danger-bg: #ffebec;
|
||
|
--vp-custom-block-important: #a371f7;
|
||
|
--vp-custom-block-important-bg: #f4eefe;
|
||
|
}
|
||
|
|
||
|
.dark {
|
||
|
--vp-c-brand-1: #3dd68c;
|
||
|
--vp-c-brand-2: #30a46c;
|
||
|
--vp-c-brand-3: #298459;
|
||
|
|
||
|
--vp-custom-block-info: #cccccc;
|
||
|
--vp-custom-block-info-bg: #474748;
|
||
|
--vp-custom-block-note: #4cb3d4;
|
||
|
--vp-custom-block-note-bg: #193c47;
|
||
|
--vp-custom-block-tip: #009400;
|
||
|
--vp-custom-block-tip-bg: #003100;
|
||
|
--vp-custom-block-warning: #e6a700;
|
||
|
--vp-custom-block-warning-bg: #4d3800;
|
||
|
--vp-custom-block-danger: #e13238;
|
||
|
--vp-custom-block-danger-bg: #4b1113;
|
||
|
--vp-custom-block-important: #a371f7;
|
||
|
--vp-custom-block-important-bg: #230555;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
|
||
|
background-clip: text;
|
||
|
-webkit-background-clip: text;
|
||
|
-webkit-text-fill-color: transparent;
|
||
|
}
|
||
|
|
||
|
@keyframes clippath {
|
||
|
0%,
|
||
|
100% {
|
||
|
clip-path: inset(0 0 90% 0);
|
||
|
}
|
||
|
25% {
|
||
|
clip-path: inset(0 90% 0 0);
|
||
|
}
|
||
|
50% {
|
||
|
clip-path: inset(90% 0 0 0);
|
||
|
}
|
||
|
75% {
|
||
|
clip-path: inset(0 0 0 90%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
/* NOTE容器:背景色、左侧 */
|
||
|
.custom-block.note {
|
||
|
background-color: var(--vp-custom-block-note-bg);
|
||
|
border-left: 5px solid var(--vp-custom-block-note);
|
||
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||
|
/* 实现跑马灯的效果 */
|
||
|
position: relative;
|
||
|
transition: all .3s;
|
||
|
}
|
||
|
|
||
|
.custom-block.note:hover{
|
||
|
filter: contrast(1.1);
|
||
|
}
|
||
|
|
||
|
.custom-block.note:active{
|
||
|
filter: contrast(0.9);
|
||
|
}
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.note.github-alert::before,
|
||
|
.custom-block.note.github-alert::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -5px;
|
||
|
right: -2px;
|
||
|
bottom: -2px;
|
||
|
border: 2px solid var(--vp-custom-block-note);
|
||
|
transition: all .5s;
|
||
|
animation: clippath 6s infinite linear;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.note.github-alert::after {
|
||
|
animation: clippath 6s infinite -3s linear;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* NOTE容器:svg图 */
|
||
|
.custom-block.note [class*="custom-block-title"]::before {
|
||
|
content: '';
|
||
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E");
|
||
|
width: 21px;
|
||
|
height: 21px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
position: relative;
|
||
|
margin-right: 4px;
|
||
|
line-height: 1;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.custom-block.note [class*="custom-block-title"] {
|
||
|
display: inline-flex; /* 使用flex布局以确保对齐 */
|
||
|
align-items: center; /* 垂直居中对齐图标和文字 */
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
/* 提示容器:边框色、背景色、左侧 */
|
||
|
.custom-block.tip {
|
||
|
background-color: var(--vp-custom-block-tip-bg);
|
||
|
border-left: 5px solid var(--vp-custom-block-tip);
|
||
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||
|
/* 实现跑马灯的效果 */
|
||
|
position: relative;
|
||
|
transition: all .8s;
|
||
|
}
|
||
|
|
||
|
.custom-block.tip:hover{
|
||
|
filter: contrast(1.1);
|
||
|
}
|
||
|
|
||
|
.custom-block.tip:active{
|
||
|
filter: contrast(0.9);
|
||
|
}
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.tip.github-alert::before,
|
||
|
.custom-block.tip.github-alert::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -5px;
|
||
|
right: -2px;
|
||
|
bottom: -2px;
|
||
|
border: 2px solid var(--vp-custom-block-tip);
|
||
|
transition: all .5s;
|
||
|
animation: clippath 3s infinite linear;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.tip.github-alert::after {
|
||
|
animation: clippath 3s infinite -1.5s linear;
|
||
|
}
|
||
|
|
||
|
/* 提示容器:svg图 */
|
||
|
.custom-block.tip [class*="custom-block-title"]::before {
|
||
|
content: '';
|
||
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");
|
||
|
width: 21px;
|
||
|
height: 21px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
position: relative;
|
||
|
margin-right: 6px;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.custom-block.tip [class*="custom-block-title"] {
|
||
|
display: inline-flex; /* 使用flex布局以确保对齐 */
|
||
|
align-items: center; /* 垂直居中对齐图标和文字 */
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
/* IMPORTANT容器:背景色、左侧 */
|
||
|
.custom-block.important {
|
||
|
border-left: 5px solid var(--vp-custom-block-important);
|
||
|
background-color: var(--vp-custom-block-important-bg);
|
||
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
position: relative;
|
||
|
transition: all .3s;
|
||
|
}
|
||
|
|
||
|
.custom-block.important:hover{
|
||
|
filter: contrast(1.1);
|
||
|
}
|
||
|
|
||
|
.custom-block.important:active{
|
||
|
filter: contrast(0.9);
|
||
|
}
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.important.github-alert::before,
|
||
|
.custom-block.important.github-alert::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -5px;
|
||
|
right: -2px;
|
||
|
bottom: -2px;
|
||
|
border: 2px solid var(--vp-custom-block-important);
|
||
|
transition: all .5s;
|
||
|
animation: clippath 3s infinite linear;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.important.github-alert::after {
|
||
|
animation: clippath 3s infinite -1.5s linear;
|
||
|
}
|
||
|
|
||
|
/* IMPORTANT容器:svg图 */
|
||
|
.custom-block.important [class*="custom-block-title"]::before {
|
||
|
content: '';
|
||
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z' fill='%23a371f7'/%3E%3C/svg%3E");
|
||
|
width: 21px;
|
||
|
height: 21px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
position: relative;
|
||
|
margin-right: 6px;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.custom-block.important [class*="custom-block-title"]{
|
||
|
display: inline-flex; /* 使用flex布局以确保对齐 */
|
||
|
align-items: center; /* 垂直居中对齐图标和文字 */
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
/* 警告容器:背景色、左侧 */
|
||
|
.custom-block.warning {
|
||
|
background-color: var(--vp-custom-block-warning-bg);
|
||
|
border-left: 5px solid var(--vp-custom-block-warning);
|
||
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
position: relative;
|
||
|
transition: all .3s;
|
||
|
}
|
||
|
|
||
|
.custom-block.warning:hover{
|
||
|
filter: contrast(1.1);
|
||
|
}
|
||
|
|
||
|
.custom-block.warning:active{
|
||
|
filter: contrast(0.9);
|
||
|
}
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.warning.github-alert::before,
|
||
|
.custom-block.warning.github-alert::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -5px;
|
||
|
right: -2px;
|
||
|
bottom: -2px;
|
||
|
border: 2px solid var(--vp-custom-block-warning);
|
||
|
transition: all .5s;
|
||
|
animation: clippath 3s infinite linear;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.warning.github-alert::after {
|
||
|
animation: clippath 3s infinite -1.5s linear;
|
||
|
}
|
||
|
|
||
|
/* 警告容器:svg图 */
|
||
|
.custom-block.warning [class*="custom-block-title"]::before {
|
||
|
content: '';
|
||
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E");
|
||
|
width: 21px;
|
||
|
height: 21px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
position: relative;
|
||
|
margin-right: 4px;
|
||
|
line-height: 1;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.custom-block.warning [class*="custom-block-title"]{
|
||
|
display: inline-flex; /* 使用flex布局以确保对齐 */
|
||
|
align-items: center; /* 垂直居中对齐图标和文字 */
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
/* CAUTION容器:背景色、左侧 */
|
||
|
.custom-block.caution {
|
||
|
border-color: var(--vp-c-red-soft);
|
||
|
border-left: 5px solid var(--vp-c-red-3);
|
||
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
position: relative;
|
||
|
transition: all .3s;
|
||
|
}
|
||
|
|
||
|
.custom-block.caution:hover{
|
||
|
filter: contrast(1.1);
|
||
|
}
|
||
|
|
||
|
.custom-block.caution:active{
|
||
|
filter: contrast(0.9);
|
||
|
}
|
||
|
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.caution.github-alert::before,
|
||
|
.custom-block.caution.github-alert::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: -2px;
|
||
|
left: -5px;
|
||
|
right: -2px;
|
||
|
bottom: -2px;
|
||
|
border: 2px solid var(--vp-c-red-3);
|
||
|
transition: all .5s;
|
||
|
animation: clippath 3s infinite linear;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
/* 实现跑马灯的效果 */
|
||
|
.custom-block.caution.github-alert::after {
|
||
|
animation: clippath 3s infinite -1.5s linear;
|
||
|
}
|
||
|
|
||
|
/* CAUTION容器:svg图 */
|
||
|
.custom-block.caution [class*="custom-block-title"]::before {
|
||
|
content: '';
|
||
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
|
||
|
width: 21px;
|
||
|
height: 21px;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
position: relative;
|
||
|
margin-right: 4px;
|
||
|
line-height: 1;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.custom-block.caution [class*="custom-block-title"]{
|
||
|
vertical-align: middle;
|
||
|
display: inline-flex; /* 使用flex布局以确保对齐 */
|
||
|
align-items: center; /* 垂直居中对齐图标和文字 */
|
||
|
}
|