🎨 Style: systematically control z-index value

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 {

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 {

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;
+}

assets/css/_mixin/_index.scss

@@ -2,3 +2,4 @@
 @import '_link';
 @import '_blur';
 @import '_details';
+@import '_z-index';

assets/css/_mixin/_z-index.scss

@@ -0,0 +1,3 @@
+@mixin z-index($level, $diff: 0) {
+  z-index: ($level * 100) + $diff;
+}

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);
   }
 }

assets/css/_partials/_single/_code.scss

@@ -191,7 +191,7 @@ pre {
         left: 0;
 
         pre {
-          // padding-right: 0;
+          @include user-select(none);
         }
       }
       // code content

assets/css/_partials/_single/_toc.scss

@@ -64,6 +64,7 @@
   .toc-title {
     margin: 0.5rem 0;
     cursor: pointer;
+    @include user-select(none);
 
     &::before {
       content: '|';

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;

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 {

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);

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"] & {

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);
     }
   }