From 2c1e38f2c8e21dd045d5f23be62a5be50a7e58af Mon Sep 17 00:00:00 2001
From: zjwmiao <1723168479@qq.com>
Date: Wed, 26 Mar 2025 17:28:27 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20cookie=E5=90=8C=E6=84=8F=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=AE=98=E7=BD=91=E5=90=8C?=
=?UTF-8?q?=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
static/css/cookie.css | 134 +++-----
static/css/o_theme.css | 619 ++++---------------------------------
static/css/theme.css | 4 +
static/js/cookie-notice.js | 6 +-
4 files changed, 109 insertions(+), 654 deletions(-)
diff --git a/static/css/cookie.css b/static/css/cookie.css
index 6b4276141..7d87b57eb 100644
--- a/static/css/cookie.css
+++ b/static/css/cookie.css
@@ -6,7 +6,8 @@
width: 100%;
}
.cookie-notice-content {
- background-color: rgba(var(--o-mixedgray-1), 0.9);
+ /* background-color: rgba(var(--o-mixedgray-1), 0.9); */
+ background-color: rgba(var(--o-color-fill6),.9);
backdrop-filter: blur(5px);
box-shadow: var(--o-shadow-1);
}
@@ -39,13 +40,13 @@
.cookie-title {
font-size: 16px;
line-height: 24px;
- color: var(--o-color-info1);
+ color: var(--o-color-text1);
font-weight: 500;
}
.cookie-desc {
font-size: 12px;
line-height: 18px;
- color: var(--o-color-info2);
+ color: var(--o-color-text3);
margin-top: 8px;
}
.cookie-notice-right {
@@ -54,19 +55,28 @@
margin-top: 12px;
}
.o-button {
- border: 1px solid var(--o-color-primary1);
- color: var(--o-color-primary1);
- line-height: 30px;
- padding: 0 16px;
- display: inline-block;
- background: none;
- font-size: 14px;
- border-radius: 32px;
+ display: inline-flex;
+ align-items: center;
+ color: var(--o-button-font-color);
+ background-color: var(--o-button-bg-color);
+ border: var(--o-button-border);
+ outline: none;
+ user-select: none;
cursor: pointer;
+ padding: var(--o-button-padding-mini);
+ font-size: var(--o-button-font-size-mini);
+ line-height: var(--o-button-line-height-mini);
+ --o-button-font-size-mini: 14px;
}
.o-button:hover {
- border-color: var(--o-color-primary2);
- color: var(--o-color-primary2);
+ color: var(--o-button-font-color_hover);
+ border: var(--o-button-border_hover);
+ background-color: var(--o-button-bg-color_hover);
+}
+.o-button:active {
+ color: var(--o-button-font-color_active);
+ background-color: var(--o-button-bg-color_active);
+ border: var(--o-button-border_active);
}
.o-button + button {
margin-left: 16px;
@@ -75,7 +85,7 @@
.o-layer-dialog {
position: fixed;
inset: 0;
- z-index: 1011;
+ z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
@@ -86,25 +96,24 @@
.o-layer-mask {
position: absolute;
inset: 0;
- background-color: var(--o-color-mask1);
+ background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.o-dlg-main {
position: relative;
display: flex;
flex-direction: column;
- padding: 24px;
+ padding: 16px;
background-color: var(--o-color-fill2);
width: 930px;
- min-height: 424px;
max-height: 730px;
- border-radius: 16px;
+ border-radius: 4px;
box-shadow: var(--o-shadow-1);
}
.o-dlg-header {
font-size: 32px;
- color: var(--o-color-info1);
+ color: var(--o-color-text1);
line-height: 44px;
text-align: center;
margin-bottom: 12px;
@@ -114,21 +123,20 @@
position: absolute;
top: 8px;
right: 8px;
- height: 24px;
- width: 24px;
+ height: 32px;
+ width: 32px;
cursor: pointer;
mask-image: url(../img/common/icon-close-light.svg);
-webkit-mask-image: url(../img/common/icon-close-light.svg);
mask-size: cover;
-webkit-mask-size: cover;
- background-color: var(--o-color-info2);
+ background-color: var(--o-color-text3);
transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}
.o-dialog-closed:hover,
.cookie-close:hover,
.evaluate-close:hover {
- transform: rotate(180deg);
- background-color: var(--o-color-primary1);
+ background-color: var(--o-color-brand1);
}
@media screen and (max-width: 840px) {
@@ -159,64 +167,6 @@
}
}
-.o-layer-dialog {
- position: fixed;
- inset: 0;
- z-index: 1011;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.o-dialog {
- z-index: 1011;
-}
-.o-layer-mask {
- position: absolute;
- inset: 0;
- background-color: var(--o-color-mask1);
- z-index: -1;
-}
-.o-dlg-main {
- position: relative;
- display: flex;
- flex-direction: column;
- padding: 24px;
- background-color: var(--o-color-fill2);
- width: 930px;
- min-height: 424px;
- max-height: 730px;
- border-radius: 16px;
- box-shadow: var(--o-shadow-1);
-}
-.o-dlg-header {
- font-size: 32px;
- color: var(--o-color-info1);
- line-height: 44px;
- text-align: center;
- margin-bottom: 12px;
-}
-.o-dialog-closed,
-.cookie-close {
- position: absolute;
- top: 8px;
- right: 8px;
- height: 24px;
- width: 24px;
- cursor: pointer;
- mask-image: url(../img/common/icon-close-light.svg);
- -webkit-mask-image: url(../img/common/icon-close-light.svg);
- mask-size: cover;
- -webkit-mask-size: cover;
- background-color: var(--o-color-info2);
- transition: all 0.25s cubic-bezier(0, 0, 0, 1);
-}
-.o-dialog-closed:hover,
-.cookie-close:hover,
-.evaluate-close:hover {
- transform: rotate(180deg);
- background-color: var(--o-color-primary1);
-}
-
@media screen and (min-width: 1200px) {
.o-dialog-small .o-dlg-main {
width: 450px;
@@ -239,7 +189,7 @@
.privacy-detail {
font-size: 16px;
line-height: 24px;
- color: var(--o-color-info1);
+ color: var(--o-color-text1);
}
}
@@ -257,13 +207,13 @@
.manage-item .item-header .item-title {
font-size: 20px;
line-height: 28px;
- color: var(--o-color-info1);
+ color: var(--o-color-text1);
font-weight: 500;
}
.manage-item .item-extra {
font-size: 14px;
line-height: 22px;
- color: var(--o-color-info3);
+ color: var(--o-color-text4);
margin-left: 24px;
display: flex;
align-items: center;
@@ -272,7 +222,7 @@
margin-top: 16px;
font-size: 16px;
line-height: 24px;
- color: var(--o-color-info2);
+ color: var(--o-color-text3);
}
.manage-item + .manage-item {
margin-top: 24px;
@@ -292,10 +242,10 @@ input[is="o-switch"] {
background-clip: content-box;
width: 42px;
height: 20px;
- border: 2px solid var(--o-color-info4);
+ border: 2px solid var(--o-color-neutral8);
border-radius: 26px;
- color: var(--o-color-info4);
- background-color: var(--o-color-info4);
+ color: var(--o-color-neutral8);
+ background-color: var(--o-color-neutral8);
font-size: 0;
transition: all 0.2s;
cursor: pointer;
@@ -305,9 +255,9 @@ input[is="o-switch"] {
-webkit-tap-highlight-color: transparent;
}
input[is="o-switch"]:checked {
- color: var(--o-color-primary1);
- border-color: var(--o-color-primary1);
- background-color: var(--o-color-primary1);
+ color: var(--o-color-trafficpurple8);
+ border-color: var(--o-color-trafficpurple8);
+ background-color: var(--o-color-trafficpurple8);
}
input[is="o-switch"]::before {
content: "";
diff --git a/static/css/o_theme.css b/static/css/o_theme.css
index 4d9cb554f..049e108ac 100644
--- a/static/css/o_theme.css
+++ b/static/css/o_theme.css
@@ -1,560 +1,61 @@
-[data-o-theme="light"] {
- --o-color-white: 255, 255, 255;
- --o-color-black: 0, 0, 0;
- --o-blue-1: 240, 245, 255;
- --o-blue-2: 214, 227, 255;
- --o-blue-3: 173, 198, 255;
- --o-blue-4: 133, 167, 255;
- --o-blue-5: 92, 135, 255;
- --o-blue-6: 51, 102, 255;
- --o-blue-7: 37, 80, 219;
- --o-blue-8: 26, 60, 184;
- --o-blue-9: 16, 43, 148;
- --o-blue-10: 9, 28, 112;
- --o-green-1: 232, 255, 238;
- --o-green-2: 177, 239, 195;
- --o-green-3: 128, 224, 158;
- --o-green-4: 84, 208, 127;
- --o-green-5: 45, 193, 101;
- --o-green-6: 11, 177, 81;
- --o-green-7: 7, 152, 72;
- --o-green-8: 4, 127, 63;
- --o-green-9: 2, 102, 53;
- --o-green-10: 0, 77, 42;
- --o-orange-1: 255, 246, 232;
- --o-orange-2: 254, 226, 186;
- --o-orange-3: 253, 202, 140;
- --o-orange-4: 252, 176, 95;
- --o-orange-5: 251, 147, 50;
- --o-orange-6: 250, 115, 5;
- --o-orange-7: 207, 88, 3;
- --o-orange-8: 163, 64, 2;
- --o-orange-9: 120, 42, 1;
- --o-orange-10: 77, 24, 0;
- --o-red-1: 255, 234, 232;
- --o-red-2: 250, 185, 182;
- --o-red-3: 245, 136, 134;
- --o-red-4: 240, 87, 90;
- --o-red-5: 235, 43, 52;
- --o-red-6: 230, 0, 18;
- --o-red-7: 192, 0, 22;
- --o-red-8: 153, 0, 23;
- --o-red-9: 115, 0, 21;
- --o-red-10: 77, 0, 17;
- --o-mixedgray-1: 255, 255, 255;
- --o-mixedgray-2: 245, 246, 248;
- --o-mixedgray-3: 230, 232, 234;
- --o-mixedgray-4: 198, 202, 205;
- --o-mixedgray-5: 136, 141, 146;
- --o-mixedgray-6: 107, 112, 117;
- --o-mixedgray-7: 85, 91, 97;
- --o-mixedgray-8: 65, 70, 76;
- --o-mixedgray-9: 46, 50, 56;
- --o-mixedgray-10: 0, 0, 0;
- --o-amber-1: 254, 250, 236;
- --o-amber-2: 252, 241, 207;
- --o-amber-3: 250, 224, 161;
- --o-amber-4: 247, 205, 115;
- --o-amber-5: 245, 182, 70;
- --o-amber-6: 242, 158, 26;
- --o-amber-7: 202, 122, 20;
- --o-amber-8: 161, 89, 14;
- --o-amber-9: 121, 61, 9;
- --o-amber-10: 81, 36, 5;
- --o-cyan-1: 229, 248, 248;
- --o-cyan-2: 195, 241, 241;
- --o-cyan-3: 141, 225, 227;
- --o-cyan-4: 92, 208, 212;
- --o-cyan-5: 48, 190, 198;
- --o-cyan-6: 10, 172, 184;
- --o-cyan-7: 7, 141, 153;
- --o-cyan-8: 4, 111, 123;
- --o-cyan-9: 2, 81, 92;
- --o-cyan-10: 1, 53, 61;
- --o-lime-1: 244, 251, 231;
- --o-lime-2: 231, 246, 198;
- --o-lime-3: 212, 237, 145;
- --o-lime-4: 196, 229, 95;
- --o-lime-5: 184, 220, 48;
- --o-lime-6: 175, 211, 5;
- --o-lime-7: 143, 176, 2;
- --o-lime-8: 112, 141, 1;
- --o-lime-9: 82, 105, 0;
- --o-lime-10: 53, 70, 0;
- --o-pink-1: 253, 237, 242;
- --o-pink-2: 251, 208, 223;
- --o-pink-3: 247, 163, 195;
- --o-pink-4: 243, 120, 171;
- --o-pink-5: 238, 77, 150;
- --o-pink-6: 235, 36, 132;
- --o-pink-7: 199, 25, 115;
- --o-pink-8: 164, 15, 97;
- --o-pink-9: 128, 8, 78;
- --o-pink-10: 92, 3, 58;
- --o-teal-1: 228, 247, 242;
- --o-teal-2: 193, 240, 225;
- --o-teal-3: 137, 225, 199;
- --o-teal-4: 87, 209, 176;
- --o-teal-5: 43, 194, 155;
- --o-teal-6: 5, 179, 137;
- --o-teal-7: 3, 149, 116;
- --o-teal-8: 1, 119, 95;
- --o-teal-9: 0, 90, 72;
- --o-teal-10: 0, 60, 49;
- --o-indigo-1: 237, 240, 248;
- --o-indigo-2: 209, 218, 241;
- --o-indigo-3: 167, 183, 226;
- --o-indigo-4: 129, 149, 212;
- --o-indigo-5: 95, 118, 197;
- --o-indigo-6: 64, 89, 183;
- --o-indigo-7: 52, 73, 163;
- --o-indigo-8: 41, 59, 142;
- --o-indigo-9: 32, 46, 122;
- --o-indigo-10: 23, 34, 101;
- --o-purple-1: 246, 234, 247;
- --o-purple-2: 236, 203, 240;
- --o-purple-3: 215, 156, 225;
- --o-purple-4: 193, 114, 209;
- --o-purple-5: 169, 76, 194;
- --o-purple-6: 146, 43, 179;
- --o-purple-7: 124, 33, 159;
- --o-purple-8: 103, 25, 138;
- --o-purple-9: 83, 18, 118;
- --o-purple-10: 65, 12, 97;
- --o-violet-1: 240, 237, 250;
- --o-violet-2: 217, 210, 244;
- --o-violet-3: 182, 169, 233;
- --o-violet-4: 150, 130, 223;
- --o-violet-5: 122, 95, 212;
- --o-violet-6: 97, 62, 201;
- --o-violet-7: 85, 50, 181;
- --o-violet-8: 74, 40, 160;
- --o-violet-9: 64, 31, 140;
- --o-violet-10: 53, 23, 119;
- --o-yellow-1: 255, 253, 235;
- --o-yellow-2: 254, 251, 205;
- --o-yellow-3: 254, 243, 155;
- --o-yellow-4: 253, 232, 105;
- --o-yellow-5: 253, 217, 55;
- --o-yellow-6: 252, 200, 6;
- --o-yellow-7: 210, 156, 3;
- --o-yellow-8: 168, 116, 1;
- --o-yellow-9: 126, 80, 0;
- --o-yellow-10: 84, 49, 0;
- --o-color-primary1: rgb(var(--o-blue-6));
- --o-color-primary2: rgb(var(--o-blue-4));
- --o-color-primary3: rgb(var(--o-blue-7));
- --o-color-primary4: rgb(var(--o-blue-3));
- --o-color-primary1-light: rgb(var(--o-blue-2));
- --o-color-primary2-light: rgb(var(--o-blue-3));
- --o-color-primary3-light: rgb(var(--o-blue-4));
- --o-color-primary4-light: rgb(var(--o-blue-1));
- --o-color-success1: rgb(var(--o-green-6));
- --o-color-success2: rgb(var(--o-green-4));
- --o-color-success3: rgb(var(--o-green-7));
- --o-color-success4: rgb(var(--o-green-3));
- --o-color-success1-light: rgb(var(--o-green-2));
- --o-color-success2-light: rgb(var(--o-green-3));
- --o-color-success3-light: rgb(var(--o-green-4));
- --o-color-success4-light: rgb(var(--o-green-1));
- --o-color-warning1: rgb(var(--o-orange-6));
- --o-color-warning2: rgb(var(--o-orange-4));
- --o-color-warning3: rgb(var(--o-orange-7));
- --o-color-warning4: rgb(var(--o-orange-3));
- --o-color-warning1-light: rgb(var(--o-orange-2));
- --o-color-warning2-light: rgb(var(--o-orange-3));
- --o-color-warning3-light: rgb(var(--o-orange-4));
- --o-color-warning4-light: rgb(var(--o-orange-1));
- --o-color-danger1: rgb(var(--o-red-6));
- --o-color-danger2: rgb(var(--o-red-4));
- --o-color-danger3: rgb(var(--o-red-7));
- --o-color-danger4: rgb(var(--o-red-3));
- --o-color-danger1-light: rgb(var(--o-red-2));
- --o-color-danger2-light: rgb(var(--o-red-3));
- --o-color-danger3-light: rgb(var(--o-red-4));
- --o-color-danger4-light: rgb(var(--o-red-1));
- --o-color-fill1: rgb(var(--o-mixedgray-2));
- --o-color-fill2: rgb(var(--o-mixedgray-1));
- --o-color-fill3: rgb(var(--o-mixedgray-6));
- --o-color-control1: rgba(var(--o-mixedgray-10), 0.25);
- --o-color-control2: rgba(var(--o-mixedgray-10), 0.6);
- --o-color-control3: rgba(var(--o-mixedgray-10), 0.8);
- --o-color-control4: rgba(var(--o-mixedgray-10), 0.1);
- --o-color-control1-light: rgb(var(--o-mixedgray-3), 1);
- --o-color-control2-light: rgb(var(--o-blue-6), 0.04);
- --o-color-control3-light: rgb(var(--o-blue-6), 0.07);
- --o-color-control4-light: rgb(var(--o-blue-6), 0.04);
- --o-color-control-light: rgb(var(--o-mixedgray-1), 1);
- --o-color-info1: rgba(var(--o-mixedgray-10), 1);
- --o-color-info2: rgba(var(--o-mixedgray-10), 0.8);
- --o-color-info3: rgba(var(--o-mixedgray-10), 0.6);
- --o-color-info4: rgba(var(--o-mixedgray-10), 0.4);
- --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1);
- --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
- --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
- --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
- --o-color-mask1: rgba(var(--o-mixedgray-10), 0.4);
- --o-color-mask2: rgba(var(--o-mixedgray-1), 0.2);
- --o-color-link1: rgba(var(--o-blue-6));
- --o-color-link2: rgba(var(--o-blue-4));
- --o-color-link3: rgba(var(--o-blue-7));
- --o-color-link4: rgba(var(--o-blue-3));
- --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-9), 0.08);
- --o-shadow-2: 0 4px 24px rgba(var(--o-mixedgray-9), 0.1);
- --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-9), 0.1);
- --o-gap-1: 4px;
- --o-gap-2: 8px;
- --o-gap-3: 12px;
- --o-gap-4: 16px;
- --o-gap-5: 24px;
- --o-gap-6: 32px;
- --o-gap-7: 40px;
- --o-gap-8: 48px;
- --o-gap-9: 64px;
- --o-gap-10: 72px;
- --o-control_size-2xs: 14px;
- --o-control_size-xs: 16px;
- --o-control_size-s: 24px;
- --o-control_size-m: 32px;
- --o-control_size-l: 40px;
- --o-control_size-xl: 48px;
- --o-control_size-2xl: 56px;
- --o-icon_size-xs: 16px;
- --o-icon_size-s: 20px;
- --o-icon_size-m: 24px;
- --o-icon_size-l: 32px;
- --o-icon_size-xl: 40px;
- --o-icon_size-2xl: 48px;
- --o-icon_size-3xl: 56px;
- --o-icon_size-4xl: 64px;
- --o-icon_size_control-xs: 16px;
- --o-icon_size_control-s: 20px;
- --o-icon_size_control-m: 24px;
- --o-icon_size_control-l: 32px;
- --o-icon_size_control-xl: 40px;
- --o-font_size-display1: 56px;
- --o-font_size-display2: 48px;
- --o-font_size-display3: 40px;
- --o-font_size-h1: 32px;
- --o-font_size-h2: 24px;
- --o-font_size-h3: 22px;
- --o-font_size-h4: 20px;
- --o-font_size-text1: 16px;
- --o-font_size-text2: 18px;
- --o-font_size-tip1: 14px;
- --o-font_size-tip2: 12px;
- --o-line_height-display1: 80px;
- --o-line_height-display2: 64px;
- --o-line_height-display3: 56px;
- --o-line_height-h1: 44px;
- --o-line_height-h2: 32px;
- --o-line_height-h3: 30px;
- --o-line_height-h4: 28px;
- --o-line_height-text1: 24px;
- --o-line_height-text2: 26px;
- --o-line_height-tip1: 22px;
- --o-line_height-tip2: 18px;
- --o-radius-xs: 4px;
- --o-radius-s: 8px;
- --o-radius-m: 12px;
- --o-radius-l: 16px;
- --o-radius-xl: 24px;
- --o-radius_control-xs: 4px;
- --o-radius_control-s: 8px;
- --o-radius_control-m: 12px;
- --o-radius_control-l: 16px;
- --o-duration-s: 200ms;
- --o-duration-m1: 250ms;
- --o-duration-m2: 300ms;
- --o-duration-m3: 400ms;
- --o-duration-l: 500ms;
- --o-duration-xl: 1000ms;
- --o-easing-linear: cubic-bezier(0, 0, 1, 1);
- --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
- --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
- --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
- --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
- --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
- --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
-}
-[data-o-theme="dark"] {
- --o-white: 255, 255, 255;
- --o-black: 0, 0, 0;
- --o-blue-1: 9, 28, 112;
- --o-blue-2: 16, 43, 148;
- --o-blue-3: 26, 60, 184;
- --o-blue-4: 37, 80, 219;
- --o-blue-5: 51, 102, 255;
- --o-blue-6: 92, 135, 255;
- --o-blue-7: 133, 167, 255;
- --o-blue-8: 173, 198, 255;
- --o-blue-9: 214, 227, 255;
- --o-blue-10: 240, 245, 255;
- --o-green-1: 0, 77, 42;
- --o-green-2: 2, 102, 53;
- --o-green-3: 10, 127, 66;
- --o-green-4: 22, 152, 80;
- --o-green-5: 36, 177, 95;
- --o-green-6: 51, 193, 104;
- --o-green-7: 90, 208, 131;
- --o-green-8: 135, 224, 163;
- --o-green-9: 185, 239, 200;
- --o-green-10: 240, 255, 244;
- --o-orange-1: 77, 24, 0;
- --o-orange-2: 120, 42, 1;
- --o-orange-3: 163, 68, 8;
- --o-orange-4: 207, 97, 19;
- --o-orange-5: 250, 130, 33;
- --o-orange-6: 251, 143, 32;
- --o-orange-7: 252, 174, 91;
- --o-orange-8: 253, 202, 139;
- --o-orange-9: 254, 227, 188;
- --o-orange-10: 255, 248, 237;
- --o-red-1: 77, 0, 17;
- --o-red-2: 115, 3, 24;
- --o-red-3: 153, 9, 31;
- --o-red-4: 192, 17, 37;
- --o-red-5: 230, 28, 43;
- --o-red-6: 235, 35, 45;
- --o-red-7: 240, 82, 85;
- --o-red-8: 245, 132, 130;
- --o-red-9: 250, 183, 180;
- --o-red-10: 255, 234, 232;
- --o-mixedgray-1: 0, 0, 0;
- --o-mixedgray-2: 22, 22, 26;
- --o-mixedgray-3: 28, 31, 35;
- --o-mixedgray-4: 39, 41, 55;
- --o-mixedgray-5: 107, 112, 117;
- --o-mixedgray-6: 136, 141, 146;
- --o-mixedgray-7: 167, 171, 176;
- --o-mixedgray-8: 198, 202, 205;
- --o-mixedgray-9: 245, 246, 248;
- --o-mixedgray-10: 255, 255, 255;
- --o-amber-1: 81, 36, 5;
- --o-amber-2: 121, 61, 9;
- --o-amber-3: 161, 89, 14;
- --o-amber-4: 202, 122, 20;
- --o-amber-5: 242, 158, 26;
- --o-amber-6: 245, 182, 70;
- --o-amber-7: 247, 205, 115;
- --o-amber-8: 250, 224, 161;
- --o-amber-9: 252, 241, 207;
- --o-amber-10: 254, 250, 236;
- --o-cyan-1: 1, 53, 61;
- --o-cyan-2: 2, 81, 92;
- --o-cyan-3: 4, 11, 123;
- --o-cyan-4: 7, 141, 153;
- --o-cyan-5: 10, 172, 184;
- --o-cyan-6: 48, 190, 198;
- --o-cyan-7: 92, 208, 212;
- --o-cyan-8: 141, 225, 227;
- --o-cyan-9: 195, 241, 241;
- --o-cyan-10: 229, 248, 248;
- --o-lime-1: 53, 70, 0;
- --o-lime-2: 82, 105, 0;
- --o-lime-3: 112, 141, 1;
- --o-lime-4: 143, 176, 2;
- --o-lime-5: 175, 211, 5;
- --o-lime-6: 184, 220, 48;
- --o-lime-7: 196, 229, 95;
- --o-lime-8: 212, 237, 145;
- --o-lime-9: 231, 246, 198;
- --o-lime-10: 244, 251, 231;
- --o-pink-1: 92, 3, 58;
- --o-pink-2: 128, 8, 78;
- --o-pink-3: 164, 15, 97;
- --o-pink-4: 199, 25, 115;
- --o-pink-5: 235, 36, 132;
- --o-pink-6: 239, 77, 150;
- --o-pink-7: 243, 120, 171;
- --o-pink-8: 247, 163, 195;
- --o-pink-9: 251, 208, 223;
- --o-pink-10: 253, 237, 242;
- --o-teal-1: 0, 60, 49;
- --o-teal-2: 0, 90, 72;
- --o-teal-3: 1, 119, 95;
- --o-teal-4: 3, 149, 116;
- --o-teal-5: 5, 179, 137;
- --o-teal-6: 43, 194, 155;
- --o-teal-7: 87, 209, 176;
- --o-teal-8: 137, 225, 199;
- --o-teal-9: 193, 240, 225;
- --o-teal-10: 228, 247, 241;
- --o-indigo-1: 23, 34, 101;
- --o-indigo-2: 32, 46, 122;
- --o-indigo-3: 41, 59, 142;
- --o-indigo-4: 52, 73, 163;
- --o-indigo-5: 64, 89, 183;
- --o-indigo-6: 95, 118, 197;
- --o-indigo-7: 129, 149, 212;
- --o-indigo-8: 167, 183, 226;
- --o-indigo-9: 209, 218, 241;
- --o-indigo-10: 237, 240, 248;
- --o-purple-1: 65, 12, 97;
- --o-purple-2: 83, 18, 118;
- --o-purple-3: 103, 25, 138;
- --o-purple-4: 124, 33, 159;
- --o-purple-5: 146, 43, 179;
- --o-purple-6: 169, 76, 194;
- --o-purple-7: 193, 114, 209;
- --o-purple-8: 215, 156, 225;
- --o-purple-9: 236, 203, 240;
- --o-purple-10: 246, 234, 247;
- --o-violet-1: 77, 0, 17;
- --o-violet-2: 53, 23, 119;
- --o-violet-3: 64, 31, 140;
- --o-violet-4: 74, 40, 160;
- --o-violet-5: 85, 50, 181;
- --o-violet-6: 97, 62, 201;
- --o-violet-7: 150, 130, 223;
- --o-violet-8: 182, 169, 233;
- --o-violet-9: 217, 210, 244;
- --o-violet-10: 240, 237, 250;
- --o-yellow-1: 84, 49, 0;
- --o-yellow-2: 126, 80, 0;
- --o-yellow-3: 168, 116, 1;
- --o-yellow-4: 210, 156, 3;
- --o-yellow-5: 252, 200, 6;
- --o-yellow-6: 253, 217, 55;
- --o-yellow-7: 253, 232, 105;
- --o-yellow-8: 254, 243, 155;
- --o-yellow-9: 254, 251, 205;
- --o-yellow-10: 255, 253, 235;
- --o-color-white: rgb(var(--o-white));
- --o-color-black: rgb(var(--o-black));
- --o-color-primary1: rgb(var(--o-blue-6));
- --o-color-primary2: rgb(var(--o-blue-4));
- --o-color-primary3: rgb(var(--o-blue-7));
- --o-color-primary4: rgb(var(--o-blue-3));
- --o-color-primary1-light: rgb(var(--o-blue-2));
- --o-color-primary2-light: rgb(var(--o-blue-3));
- --o-color-primary3-light: rgb(var(--o-blue-4));
- --o-color-primary4-light: rgb(var(--o-blue-1));
- --o-color-success1: rgb(var(--o-green-6));
- --o-color-success2: rgb(var(--o-green-4));
- --o-color-success3: rgb(var(--o-green-7));
- --o-color-success4: rgb(var(--o-green-3));
- --o-color-success1-light: rgb(var(--o-green-2));
- --o-color-success2-light: rgb(var(--o-green-3));
- --o-color-success3-light: rgb(var(--o-green-4));
- --o-color-success4-light: rgb(var(--o-green-1));
- --o-color-warning1: rgb(var(--o-orange-6));
- --o-color-warning2: rgb(var(--o-orange-4));
- --o-color-warning3: rgb(var(--o-orange-7));
- --o-color-warning4: rgb(var(--o-orange-3));
- --o-color-warning1-light: rgb(var(--o-orange-2));
- --o-color-warning2-light: rgb(var(--o-orange-3));
- --o-color-warning3-light: rgb(var(--o-orange-4));
- --o-color-warning4-light: rgb(var(--o-orange-1));
- --o-color-danger1: rgb(var(--o-red-6));
- --o-color-danger2: rgb(var(--o-red-4));
- --o-color-danger3: rgb(var(--o-red-7));
- --o-color-danger4: rgb(var(--o-red-3));
- --o-color-danger1-light: rgb(var(--o-red-2));
- --o-color-danger2-light: rgb(var(--o-red-3));
- --o-color-danger3-light: rgb(var(--o-red-4));
- --o-color-danger4-light: rgb(var(--o-red-1));
- --o-color-fill1: rgb(var(--o-mixedgray-2));
- --o-color-fill2: rgb(var(--o-mixedgray-3));
- --o-color-fill3: rgb(var(--o-mixedgray-5));
- --o-color-control1: rgba(var(--o-mixedgray-10), 0.25);
- --o-color-control2: rgba(var(--o-mixedgray-10), 0.6);
- --o-color-control3: rgba(var(--o-mixedgray-10), 0.8);
- --o-color-control4: rgba(var(--o-mixedgray-10), 0.15);
- --o-color-control1-light: rgb(var(--o-mixedgray-4), 1);
- --o-color-control2-light: rgb(var(--o-blue-5), 0.1);
- --o-color-control3-light: rgb(var(--o-blue-5), 0.15);
- --o-color-control4-light: rgb(var(--o-blue-5), 0.1);
- --o-color-control-light: rgb(var(--o-mixedgray-3), 1);
- --o-color-info1: rgba(var(--o-mixedgray-10), 1);
- --o-color-info2: rgba(var(--o-mixedgray-10), 0.8);
- --o-color-info3: rgba(var(--o-mixedgray-10), 0.6);
- --o-color-info4: rgba(var(--o-mixedgray-10), 0.4);
- --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1);
- --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
- --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
- --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
- --o-color-mask1: rgba(var(--o-mixedgray-1), 0.4);
- --o-color-mask2: rgba(var(--o-mixedgray-4), 0.2);
- --o-color-link1: rgba(var(--o-blue-6));
- --o-color-link2: rgba(var(--o-blue-4));
- --o-color-link3: rgba(var(--o-blue-7));
- --o-color-link4: rgba(var(--o-blue-3));
- --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08);
- --o-shadow-2: 0 4px 24px rgba(var(--o-mixedgray-1), 0.1);
- --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1);
- --o-gap-1: 4px;
- --o-gap-2: 8px;
- --o-gap-3: 12px;
- --o-gap-4: 16px;
- --o-gap-5: 24px;
- --o-gap-6: 32px;
- --o-gap-7: 40px;
- --o-gap-8: 48px;
- --o-gap-9: 64px;
- --o-gap-10: 72px;
- --o-control_size-2xs: 14px;
- --o-control_size-xs: 16px;
- --o-control_size-s: 24px;
- --o-control_size-m: 32px;
- --o-control_size-l: 40px;
- --o-control_size-xl: 48px;
- --o-control_size-2xl: 56px;
- --o-icon_size-xs: 16px;
- --o-icon_size-s: 20px;
- --o-icon_size-m: 24px;
- --o-icon_size-l: 32px;
- --o-icon_size-xl: 40px;
- --o-icon_size-2xl: 48px;
- --o-icon_size-3xl: 56px;
- --o-icon_size-4xl: 64px;
- --o-icon_size_control-xs: 16px;
- --o-icon_size_control-s: 20px;
- --o-icon_size_control-m: 24px;
- --o-icon_size_control-l: 32px;
- --o-icon_size_control-xl: 40px;
- --o-font_size-display1: 56px;
- --o-font_size-display2: 48px;
- --o-font_size-display3: 40px;
- --o-font_size-h1: 32px;
- --o-font_size-h2: 24px;
- --o-font_size-h3: 22px;
- --o-font_size-h4: 20px;
- --o-font_size-text1: 16px;
- --o-font_size-text2: 18px;
- --o-font_size-tip1: 14px;
- --o-font_size-tip2: 12px;
- --o-line_height-display1: 80px;
- --o-line_height-display2: 64px;
- --o-line_height-display3: 56px;
- --o-line_height-h1: 44px;
- --o-line_height-h2: 32px;
- --o-line_height-h3: 30px;
- --o-line_height-h4: 28px;
- --o-line_height-text1: 24px;
- --o-line_height-text2: 26x;
- --o-line_height-tip1: 22px;
- --o-line_height-tip2: 18px;
- --o-radius-xs: 4px;
- --o-radius-s: 8px;
- --o-radius-m: 12px;
- --o-radius-l: 16px;
- --o-radius-xl: 24px;
- --o-radius_control-xs: 4px;
- --o-radius_control-s: 8px;
- --o-radius_control-m: 12px;
- --o-radius_control-l: 16px;
- --o-duration-s: 200ms;
- --o-duration-m1: 250ms;
- --o-duration-m2: 300ms;
- --o-duration-m3: 400ms;
- --o-duration-l: 500ms;
- --o-duration-xl: 1000ms;
- --o-easing-linear: cubic-bezier(0, 0, 1, 1);
- --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
- --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
- --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
- --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
- --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
- --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+:root {
+ --o-button-font-color: var(--o-color-brand1);
+ --o-button-font-color-primary: var(--o-color-white);
+ --o-button-font-color-secondary: var(--o-color-text1);
+ --o-button-font-color-text: var(--o-color-text1);
+ --o-button-font-color_hover: var(--o-color-brand2);
+ --o-button-font-color_active: var(--o-color-brand3);
+ --o-button-font-color_disabled: var(--o-color-brand5);
+ --o-button-font-color-primary_disabled: var(--o-color-white);
+ --o-button-font-color-secondary_disabled: var(--o-color-text1);
+ --o-button-font-color-text_disabled: var(--o-color-text5);
+ --o-button-bg-color: var(--o-color-transparent);
+ --o-button-bg-color-primary: var(--o-color-brand1);
+ --o-button-bg-color-secondary: var(--o-color-secondary);
+ --o-button-bg-color-text: var(--o-color-transparent);
+ --o-button-bg-color_hover: var(--o-color-transparent);
+ --o-button-bg-color-primary_hover: var(--o-color-brand2);
+ --o-button-bg-color-secondary_hover: var(--o-color-secondary_hover);
+ --o-button-bg-color-text_hover: var(--o-color-secondary_hover);
+ --o-button-bg-color_active: var(--o-color-transparent);
+ --o-button-bg-color-primary_active: var(--o-color-brand3);
+ --o-button-bg-color-secondary_active: var(--o-color-secondary_active);
+ --o-button-bg-color-text_active: var(--o-color-secondary_active);
+ --o-button-bg-color_disabled: var(--o-color-transparent);
+ --o-button-bg-color-primary_disabled: var(--o-color-brand5);
+ --o-button-bg-color-secondary_disabled: var(--o-color-secondary_disabled);
+ --o-button-bg-color-text_disabled: var(--o-color-secondary_disabled);
+ --o-button-border: 1px solid var(--o-color-brand1);
+ --o-button-border-primary: 1px solid var(--o-color-brand1);
+ --o-button-border-secondary: 1px solid var(--o-color-secondary);
+ --o-button-border-text: 1px solid var(--o-color-transparent);
+ --o-button-border_hover: 1px solid var(--o-color-brand2);
+ --o-button-border-primary_hover: 1px solid var(--o-color-brand2);
+ --o-button-border-secondary_hover: 1px solid var(--o-color-secondary_hover);
+ --o-button-border-text_hover: 1px solid var(--o-color-secondary_hover);
+ --o-button-border_active: 1px solid var(--o-color-brand3);
+ --o-button-border-primary_active: 1px solid var(--o-color-brand3);
+ --o-button-border-secondary_active: 1px solid var(--o-color-secondary_active);
+ --o-button-border-text_active: 1px solid var(--o-color-secondary_active);
+ --o-button-border_disabled: 1px solid var(--o-color-brand5);
+ --o-button-border-primary_disabled: 1px solid var(--o-color-brand5);
+ --o-button-border-secondary_disabled: 1px solid var(--o-color-secondary_disabled);
+ --o-button-border-text_disabled: 1px solid var(--o-color-transparent);
+ --o-button-font-size: var(--o-font-size-h8);
+ --o-button-font-size-small: var(--o-font-size-text);
+ --o-button-line-height: var(--o-line-height-h8);
+ --o-button-line-height-small: var(--o-line-height-text);
+ --o-button-line-height-mini: var(--o-line-height-tip);
+ --o-button-padding: 11px 28px;
+ --o-button-padding-small: 9px 28px;
+ --o-button-padding-mini: 6px 16px;
+ --o-button-icon-margin: 8px;
+ --o-button-icon-margin-small: 8px;
+ --o-button-icon-margin-mini: 4px;
+ --o-button-icon-font-size: var(--o-font-size-h5);
+ --o-button-icon-font-size-small: var(--o-font-size-h8);
+ --o-button-icon-font-size-mini: var(--o-font-size-tip);
+ --o-button-icon-paddding: 20px;
+ --o-button-icon-paddding-small: 14px;
+ --o-button-icon-paddding-mini: 6x;
}
diff --git a/static/css/theme.css b/static/css/theme.css
index ebfc284b5..c01c2ede1 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -183,6 +183,7 @@
/* SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器 */
--o-color-fill5: var(--o-color-white);
/* SL5 弹出阴影容器背景，应用于模态弹窗投影 */
+ --o-color-fill6: 255, 255, 255;
/*阴影，注：SL2有hover投影*/
@@ -236,6 +237,8 @@
--o-spacing-h10: 4px;
/* 分页器颜色 */
--o-pagination-bg-color:var(--o-color-neutral11);
+
+
}
.dark {
/*成功色*/
@@ -331,6 +334,7 @@
--o-color-fill4: var(--o-color-greyblack3);
/*SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器*/
--o-color-fill5: var(--o-color-greyblack4);
+ --o-color-fill6: 0, 0, 0;
/*SL5 弹出阴影容器背景，应用于模态弹窗投影
*/
/**
diff --git a/static/js/cookie-notice.js b/static/js/cookie-notice.js
index 820241907..c0e631a35 100644
--- a/static/js/cookie-notice.js
+++ b/static/js/cookie-notice.js
@@ -4,7 +4,7 @@ $(function () {
const pathname = window.location.pathname;
const isEn = pathname.includes("/en/");
const COOKIE_DOMAIN = ".opengauss.org";
- const theme = localStorage.getItem("opengauss-theme") || "light";
+ // const theme = localStorage.getItem("opengauss-theme") || "light";
// 弹窗
const ODialog = (function () {
let elemDialog;
@@ -59,7 +59,7 @@ $(function () {
const dom = `