From 68849f644ff662c8d1722f3cd0ee9aa1f4a66781 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sat, 25 Mar 2023 11:24:53 +0800
Subject: [PATCH] :art: Style: systematically control z-index value

---
 assets/css/_core/_breadcrumb.scss                    | 2 +-
 assets/css/_core/_header.scss                        | 8 ++++----
 assets/css/_mixin/_compatibility.scss                | 6 ++++++
 assets/css/_mixin/_index.scss                        | 1 +
 assets/css/_mixin/_z-index.scss                      | 3 +++
 assets/css/_partials/_mask.scss                      | 4 ++--
 assets/css/_partials/_single/_code.scss              | 2 +-
 assets/css/_partials/_single/_toc.scss               | 1 +
 assets/css/_partials/_widgets/_fixed-button.scss     | 2 +-
 assets/css/_partials/_widgets/_github-corner.scss    | 2 +-
 assets/css/_partials/_widgets/_noscript-warning.scss | 4 ++--
 assets/css/_partials/_widgets/_reading-progress.scss | 2 +-
 assets/lib/valine/valine.scss                        | 5 ++++-
 docs                                                 | 2 +-
 14 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 assets/css/_mixin/_z-index.scss

diff --git a/assets/css/_core/_breadcrumb.scss b/assets/css/_core/_breadcrumb.scss
index 9f087afd..0ca54f48 100644
--- a/assets/css/_core/_breadcrumb.scss
+++ b/assets/css/_core/_breadcrumb.scss
@@ -1,7 +1,7 @@
 .breadcrumb-container {
   padding-inline: 1rem;
   font-size: 0.75rem;
-  z-index: 100;
+  @include z-index(1);
   @extend .print-d-none;
 
   &.sticky {
diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
index 1098c3fc..a3086018 100644
--- a/assets/css/_core/_header.scss
+++ b/assets/css/_core/_header.scss
@@ -1,7 +1,7 @@
 header {
   width: 100%;
-  z-index: 150;
   background-color: $header-background-color;
+  @include z-index(2);
   @include transition(box-shadow 0.3s ease);
   @extend .print-d-none;
 
@@ -243,7 +243,6 @@ header {
       }
 
       .sub-menu {
-        z-index: 160;
         position: absolute;
         margin: 0;
         padding: 0.25rem 0;
@@ -252,6 +251,7 @@ header {
         border-radius: $global-border-radius;
         border: 1px solid $global-border-color;
         background-color: $header-background-color;
+        @include z-index(2, 50);
         @include transition(box-shadow 0.3s ease);
 
         [data-theme='dark'] & {
@@ -368,8 +368,8 @@ header {
         line-height: 2.5rem;
         position: sticky;
         top: 0;
-        z-index: 1;
         background-color: $header-background-color;
+        @include z-index(0, 50);
  
         [data-theme='dark'] & {
           background-color: $header-background-color-dark;
@@ -514,8 +514,8 @@ header {
 
 .search-dropdown {
   position: fixed;
-  z-index: 200;
   top: $header-height;
+  @include z-index(2);
   @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
 
   &.desktop {
diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss
index 9ab2bffe..79e78e3d 100644
--- a/assets/css/_mixin/_compatibility.scss
+++ b/assets/css/_mixin/_compatibility.scss
@@ -99,3 +99,9 @@
   object-fit: $value;
   font-family: 'object-fit: #{$value};';
 }
+
+@mixin user-select($value) {
+  -webkit-user-select: $value !important;
+  -moz-user-select: $value !important;
+  user-select: $value !important;
+}
diff --git a/assets/css/_mixin/_index.scss b/assets/css/_mixin/_index.scss
index 99a07d65..815d18c0 100644
--- a/assets/css/_mixin/_index.scss
+++ b/assets/css/_mixin/_index.scss
@@ -2,3 +2,4 @@
 @import '_link';
 @import '_blur';
 @import '_details';
+@import '_z-index';
diff --git a/assets/css/_mixin/_z-index.scss b/assets/css/_mixin/_z-index.scss
new file mode 100644
index 00000000..b9641ff5
--- /dev/null
+++ b/assets/css/_mixin/_z-index.scss
@@ -0,0 +1,3 @@
+@mixin z-index($level, $diff: 0) {
+  z-index: ($level * 100) + $diff;
+}
diff --git a/assets/css/_partials/_mask.scss b/assets/css/_partials/_mask.scss
index 32cf9911..eae738cc 100644
--- a/assets/css/_partials/_mask.scss
+++ b/assets/css/_partials/_mask.scss
@@ -6,11 +6,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
   background-color: rgba(0, 0, 0, 0);
+  @include z-index(0, -1);
 
   .blur & {
-    z-index: 100;
+    @include z-index(1);
     background-color: rgba(0, 0, 0, 0.25);
   }
 }
diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index 230c0b2d..c268ae7f 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -191,7 +191,7 @@ pre {
         left: 0;
 
         pre {
-          // padding-right: 0;
+          @include user-select(none);
         }
       }
       // code content
diff --git a/assets/css/_partials/_single/_toc.scss b/assets/css/_partials/_single/_toc.scss
index e4c03a65..646276ab 100644
--- a/assets/css/_partials/_single/_toc.scss
+++ b/assets/css/_partials/_single/_toc.scss
@@ -64,6 +64,7 @@
   .toc-title {
     margin: 0.5rem 0;
     cursor: pointer;
+    @include user-select(none);
 
     &::before {
       content: '|';
diff --git a/assets/css/_partials/_widgets/_fixed-button.scss b/assets/css/_partials/_widgets/_fixed-button.scss
index 6a0a3783..9f955bcd 100644
--- a/assets/css/_partials/_widgets/_fixed-button.scss
+++ b/assets/css/_partials/_widgets/_fixed-button.scss
@@ -1,5 +1,4 @@
 .fixed-button {
-  z-index: 100;
   position: fixed;
   right: 1.5rem;
   font-size: 1rem;
@@ -7,6 +6,7 @@
   padding: 0.5rem 0.625rem;
   color: $global-font-secondary-color;
   background-color: $header-background-color;
+  @include z-index(1);
   @include border-radius(1.25rem);
   @include transition(color 0.4s ease);
   @include blur;
diff --git a/assets/css/_partials/_widgets/_github-corner.scss b/assets/css/_partials/_widgets/_github-corner.scss
index cb156688..17b7afd8 100644
--- a/assets/css/_partials/_widgets/_github-corner.scss
+++ b/assets/css/_partials/_widgets/_github-corner.scss
@@ -16,7 +16,7 @@
 .github-corner {
   position: fixed;
   top: 0;
-  z-index: 150;
+  @include z-index(2);
   @extend .print-d-none;
 
   :hover .octo-arm {
diff --git a/assets/css/_partials/_widgets/_noscript-warning.scss b/assets/css/_partials/_widgets/_noscript-warning.scss
index c8f6687b..edb52e8c 100644
--- a/assets/css/_partials/_widgets/_noscript-warning.scss
+++ b/assets/css/_partials/_widgets/_noscript-warning.scss
@@ -6,9 +6,9 @@
   position: fixed;
   text-align: center;
   left: 0;
-  top: 0;
+  bottom: 0;
   width: 100%;
-  z-index: 150;
+  @include z-index(2);
 
   [data-theme='dark'] & {
     background-color: var(--#{$prefix}danger-dark);
diff --git a/assets/css/_partials/_widgets/_reading-progress.scss b/assets/css/_partials/_widgets/_reading-progress.scss
index 487c42de..216982a6 100644
--- a/assets/css/_partials/_widgets/_reading-progress.scss
+++ b/assets/css/_partials/_widgets/_reading-progress.scss
@@ -3,7 +3,7 @@
   height: var(--progress-h, 2px);
   width: var(--progress);
   background-color: var(--bg-progress, var(--#{$prefix}info));
-  z-index: 150;
+  @include z-index(2);
   position: fixed;
   
   [data-theme="dark"] & {
diff --git a/assets/lib/valine/valine.scss b/assets/lib/valine/valine.scss
index 60f90e22..a5104f73 100644
--- a/assets/lib/valine/valine.scss
+++ b/assets/lib/valine/valine.scss
@@ -30,9 +30,12 @@ $code-background-color-dark: #272C34 !default;
 }
 
 .v[data-class=v] {
+  .vcount {
+    @include z-index(0, 60);
+  }
   .vcards .vcard .vcontent.expand {
     &::before, &::after {
-      z-index: 50;
+      @include z-index(0, 50);
     }
   }
 
diff --git a/docs b/docs
index f2521a1b..ef4f2f5d 160000
--- a/docs
+++ b/docs
@@ -1 +1 @@
-Subproject commit f2521a1b6cb9dd39c08fd4e0444fdab416455d17
+Subproject commit ef4f2f5def20c2d57a83b7a4954cee3a945c7a53