Adjust styles

MapleRecall · Aug 31, 2024 · 4835384 · 4835384
1 parent 114093d
commit 4835384
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/settings.html b/src/settings.html
@@ -58,14 +58,14 @@
                         <setting-text data-type="secondary">选择头像遮罩的样式</setting-text>
                     </div>
                     <setting-select class="selector" data-config="avatarStyle">
+                        <setting-option data-value="0">不遮罩</setting-option>
                         <setting-option data-value="1">主色 - 清晰渐变</setting-option>
                         <setting-option data-value="2">主色 - 平缓渐变</setting-option>
                         <setting-option data-value="3">主色 - 清雅</setting-option>
                         <setting-option data-value="4">主色 - 标准</setting-option>
                         <setting-option data-value="5">棋盘 - 亮</setting-option>
                         <setting-option data-value="6">棋盘 - 暗</setting-option>
                         <setting-option data-value="7">彩虹 - 🌈</setting-option>
-                        <setting-option data-value="8">无变化</setting-option>
                     </setting-select>
                 </setting-item>
                 <setting-item is-disabled>

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -59,11 +59,21 @@ body #app {
     }
   }
 
-  --avatar-mask-bg: linear-gradient(
-    30deg,
-    hsl(from var(--brand_standard) h 40% 50% / var(--avatar-mask-opacity)) 48%,
-    hsl(from var(--brand_standard) h 30% 65% / var(--avatar-mask-opacity)) 52%
-  );
+  --avatar-mask-bg: none;
+
+  &[data-ccnd-avatar="0"] {
+    --avatar-mask-opacity: 0;
+    --avatar-filter: none;
+    --avatar-mix-blend-mode: normal;
+  }
+
+  &[data-ccnd-avatar="1"] {
+    --avatar-mask-bg: linear-gradient(
+      30deg,
+      hsl(from var(--brand_standard) h 70% 50% / var(--avatar-mask-opacity)) 20%,
+      hsl(from var(--brand_standard) h 45% 85% / var(--avatar-mask-opacity)) 80%
+    );
+  }
 
   &[data-ccnd-avatar="2"] {
     --avatar-mask-bg: linear-gradient(
@@ -111,14 +121,6 @@ body #app {
     filter: blur(2px);
   }
 
-  &[data-ccnd-avatar="8"] .avatar::after {
-    --avatar-mask-bg: linear-gradient(30deg, 
-      hsl(from var(--brand_standard) h 0% 0% / 0) 100%,
-      hsl(from var(--brand_standard) h 0% 0% / 0) 100%);
-    --avatar-mix-blend-mode: none;
-    --avatar-filter: blur(0px) saturate(1);
-  }
-
   .avatar {
     overflow: hidden;
 
@@ -143,7 +145,7 @@ body #app {
     }
   }
 
-  :is(.list-item, .group-user, .ml-item, .recent-contact-item) {
+  &:not([data-ccnd-avatar="0"]) :is(.list-item, .group-user, .ml-item, .recent-contact-item) {
     &:nth-child(n) {
       .avatar {
         filter: hue-rotate(-30deg);