[fix] Fixed shadows

Author: pandafy

openwisp_utils/admin_theme/static/admin/css/openwisp.css

@@ -91,16 +91,16 @@ See https://code.djangoproject.com/ticket/33878 */
   /* Success/Positive */
   --ow-color-success: #498b26;
 
-  /* Gray Scale Spectrum */
+  /* Foreground Scale Spectrum */
   --ow-color-black: #000;
-  --ow-color-gray-darkest: #1b1818;
-  --ow-color-gray-darker: #333;
-  --ow-color-gray-dark: #777;
-  --ow-color-gray-medium: #bbbbbb;
-  --ow-color-gray-light: #efefef;
-  --ow-color-gray-lighter: #f6f6f6;
-  --ow-color-gray-lightest: #f9f9f9;
-  --ow-color-gray-ghost: #fcfcfc;
+  --ow-color-fg-darkest: #1b1818;
+  --ow-color-fg-darker: #333;
+  --ow-color-fg-dark: #777;
+  --ow-color-fg-medium: #bbbbbb;
+  --ow-color-fg-light: #efefef;
+  --ow-color-fg-lighter: #f6f6f6;
+  --ow-color-fg-lightest: #f9f9f9;
+  --ow-color-fg-ghost: #fcfcfc;
   --ow-color-white: #fff;
 
   /* Special Tones */
@@ -114,7 +114,7 @@ See https://code.djangoproject.com/ticket/33878 */
   --ow-color-login-bg: #f4f7f6;
   --ow-color-scrollbar-track: #f1f1f1;
 
-  /* Overlays (Black with opacity) */
+  /* Overlays (Dark with opacity) */
   --ow-overlay-10: rgba(0, 0, 0, 0.1);
   --ow-overlay-5: rgba(0, 0, 0, 0.05);
   --ow-overlay-7: rgba(0, 0, 0, 0.07);
@@ -128,25 +128,20 @@ See https://code.djangoproject.com/ticket/33878 */
   --ow-overlay-gray-70: rgba(51, 51, 51, 0.7);
 
   /* White Overlay */
-  --ow-overlay-white-75: rgba(255, 255, 255, 0.75);
-
-  /* Shadow Values */
-  --ow-shadow-26: #00000026;
-  --ow-shadow-30: #00000030;
-  --ow-shadow-40: #00000040;
+  --ow-overlay-light-75: rgba(255, 255, 255, 0.75);
 
   /* ========================================
      COMPONENT SEMANTIC VARIABLES (Tier 2)
      ======================================== */
 
   /* === LINKS === */
-  --ow-link-color: var(--ow-color-gray-dark);
+  --ow-link-color: var(--ow-color-fg-dark);
   --ow-link-hover: var(--ow-color-black);
   --ow-link-highlighted: var(--ow-color-primary);
   --ow-link-highlighted-hover: var(--ow-color-primary-dark);
 
   /* === BUTTONS === */
-  --ow-btn-default-bg: var(--ow-color-gray-darker);
+  --ow-btn-default-bg: var(--ow-color-fg-darker);
   --ow-btn-default-text: var(--ow-color-white);
   --ow-btn-default-hover: var(--ow-overlay-gray-70);
 
@@ -158,9 +153,9 @@ See https://code.djangoproject.com/ticket/33878 */
   --ow-btn-success-text: var(--ow-color-white);
 
   /* === MENU/NAVIGATION === */
-  --ow-menu-bg: var(--ow-color-gray-lightest);
+  --ow-menu-bg: var(--ow-color-fg-ghost);
   --ow-menu-separator: var(--ow-overlay-7-5);
-  --ow-menu-link-text: var(--ow-color-gray-dark);
+  --ow-menu-link-text: var(--ow-color-fg-dark);
   --ow-menu-sublink-text: var(--ow-overlay-67-5);
   --ow-menu-link-hover-bg: var(--ow-color-highlight);
   --ow-menu-link-hover-text: var(--ow-color-primary);
@@ -175,17 +170,17 @@ See https://code.djangoproject.com/ticket/33878 */
   --ow-menu-toggle-icon: var(--ow-color-white);
   --ow-menu-toggle-hover: var(--ow-overlay-60);
   --ow-menu-backdrop: var(--ow-overlay-10);
-  --ow-menu-tooltip-bg: var(--ow-color-gray-dark);
+  --ow-menu-tooltip-bg: var(--ow-color-fg-dark);
   --ow-menu-tooltip-text: var(--ow-color-white);
   --ow-menu-backdrop: var(--ow-overlay-10);
-  --ow-menu-tooltip-bg: var(--ow-color-gray-dark);
+  --ow-menu-tooltip-bg: var(--ow-color-fg-dark);
   --ow-menu-tooltip-text: var(--ow-color-white);
 
   /* === CALENDAR/DATE PICKER === */
   --ow-calendar-header-bg: var(--ow-color-primary);
   --ow-calendar-header-text: var(--ow-color-white);
-  --ow-calendar-bg: var(--ow-color-gray-light);
-  --ow-calendar-nav-bg: var(--ow-overlay-white-75);
+  --ow-calendar-bg: var(--ow-color-fg-light);
+  --ow-calendar-nav-bg: var(--ow-overlay-light-75);
   --ow-calendar-nav-hover: var(--ow-color-white);
   --ow-calendar-selected-bg: var(--ow-color-highlight);
   --ow-calendar-selected-text: var(--ow-color-primary);
@@ -202,15 +197,15 @@ See https://code.djangoproject.com/ticket/33878 */
   --ow-paginator-showall-hover: var(--ow-color-primary-dark);
 
   /* === ACCOUNT MENU === */
-  --ow-account-text: var(--ow-color-gray-dark);
+  --ow-account-text: var(--ow-color-fg-dark);
   --ow-account-hover: var(--ow-color-primary);
-  --ow-account-icon: var(--ow-color-gray-dark);
+  --ow-account-icon: var(--ow-color-fg-dark);
   --ow-account-icon-hover: var(--ow-color-primary);
   --ow-account-menu-bg: var(--ow-color-white);
-  --ow-account-menu-separator: var(--ow-color-gray-lighter);
+  --ow-account-menu-separator: var(--ow-color-fg-lighter);
 
   /* === FORMS === */
-  --ow-form-label: var(--ow-color-gray-darkest);
+  --ow-form-label: var(--ow-color-fg-darkest);
   --ow-form-help-text: var(--ow-overlay-45);
   --ow-form-readonly-border: var(--ow-overlay-5);
   --ow-form-readonly-bg: var(--ow-overlay-7);
@@ -220,41 +215,35 @@ See https://code.djangoproject.com/ticket/33878 */
   /* === BREADCRUMBS === */
   --ow-breadcrumb-bg: var(--ow-color-white);
   --ow-breadcrumb-text: var(--ow-color-breadcrumb-text);
-  --ow-breadcrumb-border: var(--ow-color-gray-lighter);
+  --ow-breadcrumb-border: var(--ow-color-fg-lighter);
 
   /* === MODULES/SECTIONS === */
-  --ow-module-bg: var(--ow-color-gray-lightest);
-  --ow-module-text: var(--ow-color-gray-darker);
+  --ow-module-bg: var(--ow-color-fg-lightest);
+  --ow-module-text: var(--ow-color-fg-darker);
 
   /* === OVERLAYS & MODALS === */
-  --ow-overlay-bg: var(--ow-overlay-white-75);
+  --ow-overlay-bg: var(--ow-overlay-light-75);
   --ow-loading-spinner-bg: var(--ow-overlay-90);
   --ow-selector-chosen-bg: var(--ow-overlay-60);
 
   /* === SCROLLBAR === */
-  --ow-scrollbar-thumb: var(--ow-color-gray-dark);
-  --ow-scrollbar-thumb-hover: var(--ow-color-gray-darker);
+  --ow-scrollbar-thumb: var(--ow-color-fg-dark);
+  --ow-scrollbar-thumb-hover: var(--ow-color-fg-darker);
   --ow-scrollbar-track: var(--ow-color-scrollbar-track);
 
-  /* === SHADOWS === */
-  --ow-shadow-light: var(--ow-shadow-26);
-  --ow-shadow-medium: var(--ow-shadow-30);
-  --ow-shadow-dark: var(--ow-shadow-40);
-
   /* === LOGIN PAGE === */
   --ow-login-bg: var(--ow-color-login-bg);
   --ow-login-shadow: var(--ow-color-login-bg);
 
   /* === MISC === */
   --ow-toggle-btn-bg: var(--ow-color-white);
   --ow-toggle-btn-hover-bg: var(--darkened-bg);
-  --ow-toggle-btn-shadow: var(--ow-shadow-40);
-  --ow-option-container-bg: var(--ow-color-gray-light);
-  --ow-option-container-text: var(--ow-color-gray-darker);
+  --ow-option-container-bg: var(--ow-color-fg-light);
+  --ow-option-container-text: var(--ow-color-fg-darker);
   --ow-option-hover-bg: var(--ow-color-primary);
   --ow-option-hover-text: var(--ow-color-white);
   --ow-hamburger-bg: var(--ow-color-white);
-  --ow-hamburger-hover: var(--ow-color-gray-light);
+  --ow-hamburger-hover: var(--ow-color-fg-light);
   --ow-selector-chosen-text: var(--ow-color-white);
   --ow-stacked-inline-helptext-bg: #ffe5e5;
 }
@@ -681,7 +670,7 @@ span.datetimeshortcuts .clock-icon:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0px 1px 2px var(--ow-toggle-btn-shadow);
+  box-shadow: 0px 1px 2px #00000040;
   border-radius: 4px;
   background: var(--ow-toggle-btn-bg);
   cursor: pointer;
@@ -1130,7 +1119,7 @@ div#toolbar #searchbar {
   z-index: 999;
   background-color: var(--ow-option-container-bg);
   border-radius: 8px;
-  box-shadow: var(--ow-shadow-medium);
+  box-shadow: 0px 1px 3px #00000040;
   color: var(--ow-option-container-text);
   font-weight: normal;
 }
@@ -1343,7 +1332,7 @@ div#container.no-auth,
 #menu {
   position: fixed;
   background: var(--ow-menu-bg);
-  box-shadow: var(--ow-shadow-medium);
+  box-shadow: 0 1px 4px -1px #00000026;
   top: 0;
   left: 0;
 }
@@ -1427,7 +1416,7 @@ a.menu-item,
   height: 1.25rem;
   width: 1.25rem;
   margin-left: 1.25rem;
-  background: var(--ow-color-gray-medium);
+  background: var(--ow-color-fg-medium);
   transition: transform 0.3s;
 }
 .mg-heading {

openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css

@@ -41,7 +41,7 @@
   min-width: 222px !important;
 }
 .auto-filter .select2-selection {
-  border: 1px solid var(--ow-color-gray-dark) !important;
+  border: 1px solid var(--ow-color-fg-dark) !important;
   border-radius: 0.2rem !important;
   padding: 0.4rem 1.25rem 0.3125rem 1rem;
 }
@@ -74,7 +74,7 @@
   max-height: 18.75rem;
   min-width: 100%;
   border: none !important;
-  box-shadow: var(--ow-shadow-dark);
+  box-shadow: 0px 1px 4px #00000040;
   overflow-y: auto;
 }
 .auto-filter-choices .select2-results ul {
@@ -84,7 +84,7 @@
 .auto-filter-choices .select2-results li {
   margin: 0;
   list-style-type: none;
-  color: var(--ow-color-gray-dark);
+  color: var(--ow-color-fg-dark);
   font-size: 14px;
   border-radius: 4px;
   font-weight: 500;

openwisp_utils/admin_theme/static/admin/css/ow-filters.css

@@ -14,7 +14,7 @@
 #ow-changelist-filter {
   padding: 1.25rem 2.5rem;
   background-color: var(--body-bg);
-  border-bottom: 2px solid var(--ow-color-gray-lighter);
+  border-bottom: 2px solid var(--ow-color-fg-lighter);
   display: flex;
   flex-direction: column-reverse;
 }
@@ -90,7 +90,7 @@
   max-height: 18.75rem;
   min-width: 100%;
   transition: all 0.3s ease;
-  box-shadow: var(--ow-shadow-dark);
+  box-shadow: 0px 1px 4px #00000040;
   pointer-events: none;
   display: none;
   overflow-y: auto;
@@ -105,7 +105,7 @@
   padding: 0px;
 }
 .filter-title {
-  border: 1px solid var(--ow-color-gray-dark);
+  border: 1px solid var(--ow-color-fg-dark);
   border-radius: 0.2rem;
   padding: 0.4rem 1.25rem 0.3125rem 1rem;
   cursor: pointer;
@@ -223,7 +223,7 @@
 }
 .left-arrow:hover,
 .right-arrow:hover {
-  background-color: var(--ow-color-gray-lightest);
+  background-color: var(--ow-color-fg-lightest);
 }
 .left-arrow.down,
 .right-arrow.down {