Centralized box-shadow definitions

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.0c73cc44.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.038078fb.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

material/overrides/main.html

@@ -3,7 +3,7 @@
 -#}
 {% extends "base.html" %}
 {% block extrahead %}
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.db932f97.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.80c832e2.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

src/assets/stylesheets/main/_colors.scss

@@ -104,4 +104,19 @@
     --md-footer-bg-color:              hsla(0, 0%, 0%, 0.87);
     --md-footer-bg-color--dark:        hsla(0, 0%, 0%, 0.32);
   }
+
+  // Shadow depth 1
+  --md-shadow-z1:
+    0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
+    0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.1);
+
+  // Shadow depth 2
+  --md-shadow-z2:
+    0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
+    0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.25);
+
+  // Shadow depth 3
+  --md-shadow-z3:
+    0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
+    0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.35);
 }

src/assets/stylesheets/main/_typeset.scss

@@ -291,8 +291,6 @@ kbd {
 
       // Tooltip
       &[title]:is(:focus, :hover)::after {
-        @include z-depth(2);
-
         position: absolute;
         left: 0;
         display: inline-block;
@@ -305,6 +303,7 @@ kbd {
         font-size: px2rem(14px);
         background-color: var(--md-default-fg-color);
         border-radius: px2rem(2px);
+        box-shadow: var(--md-shadow-z3);
         content: attr(title);
       }
     }

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -71,9 +71,7 @@ $admonitions: (
     background-color: var(--md-admonition-bg-color);
     border-left: px2rem(4px) solid $clr-blue-a200;
     border-radius: px2rem(2px);
-    box-shadow:
+    box-shadow: var(--md-shadow-z1);
-      0 px2rem(4px)   px2rem(10px) hsla(0, 0%, 0%, 0.05),
-      0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.05);
 
     // [print]: Omit shadow as it may lead to rendering errors
     @media print {

src/assets/stylesheets/main/layout/_dialog.scss

@@ -26,8 +26,6 @@
 
 // Dialog
 .md-dialog {
-  @include z-depth(2);
-
   position: fixed;
   right: px2rem(16px);
   bottom: px2rem(16px);
@@ -37,6 +35,7 @@
   padding: px2rem(8px) px2rem(12px);
   background-color: var(--md-default-fg-color);
   border-radius: px2rem(2px);
+  box-shadow: var(--md-shadow-z3);
   transform: translateY(100%);
   opacity: 0;
   transition:

src/assets/stylesheets/main/layout/_form.scss

@@ -61,17 +61,17 @@
     height: px2rem(36px);
     padding: 0 px2rem(12px);
     font-size: px2rem(16px);
-    border-radius: px2rem(2px);
+    border-bottom: px2rem(2px) solid var(--md-default-fg-color--lighter);
-    box-shadow:
+    border-radius: px2rem(2px) px2rem(2px) 0 0;
-      0 px2rem(4px)   px2rem(10px) hsla(0, 0%, 0%, 0.1),
+    box-shadow: var(--md-shadow-z1);
-      0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.1);
+    transition:
-    transition: box-shadow 250ms;
+      border     250ms,
+      box-shadow 250ms;
 
     // Input on focus/hover
     &:is(:focus, :hover) {
-      box-shadow:
+      border-bottom-color: var(--md-accent-fg-color);
-        0 px2rem(8px)   px2rem(20px) hsla(0, 0%, 0%, 0.15),
+      box-shadow: var(--md-shadow-z2);
-        0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.15);
     }
 
     // Stretch to full width

src/assets/stylesheets/main/layout/_search.scss

@@ -493,8 +493,7 @@
 
       // Show output when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
-        @include z-depth(6);
+        box-shadow: var(--md-shadow-z3);
-
         opacity: 1;
       }
     }
@@ -597,7 +596,7 @@
 
   // Search result item
   &__item {
-    box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
+    box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest);
 
     // Omit border on first child
     &:first-child {

src/assets/stylesheets/main/layout/_select.scss

@@ -39,9 +39,7 @@
     color: var(--md-default-fg-color);
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
-    box-shadow:
+    box-shadow: var(--md-shadow-z2);
-      0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
-      0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.25);
     transform: translate3d(-50%, px2rem(6px), 0);
     opacity: 0;
     transition:

src/assets/stylesheets/main/layout/_sidebar.scss

@@ -64,8 +64,7 @@
 
       // Show sidebar when drawer is active
       [data-md-toggle="drawer"]:checked ~ .md-container & {
-        @include z-depth(8);
+        box-shadow: var(--md-shadow-z3);
-
         transform: translateX(px2rem(242px));
 
         // Adjust for right-to-left languages

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -66,9 +66,7 @@
   color: var(--md-default-fg-color);
   background-color: var(--md-default-bg-color);
   border-radius: px2rem(2px);
-  box-shadow:
+  box-shadow: var(--md-shadow-z2);
-    0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
-    0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.25);
   transform: translateY(px2rem(-8px));
   // Hack: promote to own layer to reduce jitter
   backface-visibility: hidden;

src/assets/stylesheets/main/layout/_top.scss

@@ -36,9 +36,7 @@
   background-color: var(--md-default-bg-color);
   border-radius: px2rem(32px);
   outline: none;
-  box-shadow:
+  box-shadow: var(--md-shadow-z2);
-    0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
-    0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.25);
   transform: translate(-50%, 0);
   transition:
     color            125ms,

src/assets/stylesheets/main/layout/_version.scss

@@ -100,9 +100,7 @@
     list-style-type: none;
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
-    box-shadow:
+    box-shadow: var(--md-shadow-z2);
-      0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
-      0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.25);
     opacity: 0;
     transition:
       max-height 0ms 500ms,

src/overrides/assets/stylesheets/main/layout/_iconsearch.scss

@@ -32,23 +32,19 @@
     position: relative;
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
-    box-shadow:
+    box-shadow: var(--md-shadow-z1);
-      0 px2rem(4px)   px2rem(10px) hsla(0, 0%, 0%, 0.1),
-      0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.1);
     transition: box-shadow 125ms;
 
     // Icon search on focus/hover
     &:focus-within,
     &:hover {
-      box-shadow:
+      box-shadow: var(--md-shadow-z2);
-        0 px2rem(8px)   px2rem(20px) hsla(0, 0%, 0%, 0.15),
-        0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.15);
     }
 
     // Icon search input
     .md-input {
       background: var(--md-default-bg-color);
-      box-shadow: 0 0 px2rem(12px) hsla(0, 0%, 0%, 0.07);
+      box-shadow: none;
 
       // Slate theme, i.e. dark mode
       [data-md-color-scheme="slate"] & {