Codestyle and media manager first pass

joomla · Sep 3, 2023 · 0f45912 · 0f45912
1 parent 20bca99
commit 0f45912
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 14 deletions.
diff --git a/build/media_source/com_media/scss/_variables.scss b/build/media_source/com_media/scss/_variables.scss
@@ -11,7 +11,7 @@ $col-gutter-width:                  $gutter-width;
 $col-box-shadow:                    0 2px 10px -8px var(--template-bg-dark-50);
 
 // Sidebar
-$sidebar-drive-bg:                  #fff;
+$sidebar-drive-bg:                  var(--media-manager-content-bg, #fff);
 $sidebar-tree-line-color:           $border-color;
 $sidebar-tree-icon-color:           #aaa;
 $sidebar-tree-line-height:          26px;
@@ -21,7 +21,7 @@ $sidebar-active-icon-color:         $highlight-color;
 
 // Toolbar
 $toolbar-height:                    46px;
-$toolbar-bg:                        #fff;
+$toolbar-bg:                        var(--media-manager-content-bg, #fff);
 $toolbar-icon-width:                50px;
 $toolbar-icon-color:                lighten(#2a69b8,30%);
 $toolbar-icon-bg-hover:             #f0f0f0;
@@ -30,7 +30,7 @@ $toolbar-loader-height:             2px;
 
 // Breadcrumbs
 $breadcrumbs-bg:                    var(--template-bg-dark-3);
-$breadcrumbs-current-bg:            #fff;
+$breadcrumbs-current-bg:            var(--media-manager-content-bg, #fff);
 
 // Media Browser Grid
 $grid-gutter-width:                 $col-gutter-width;
@@ -59,9 +59,10 @@ $table-item-icon-bg-selected:       #006898;
 $table-item-bg-hover:               rgba(0, 0, 0, .03);
 
 // Media Info bar
-$info-bg:                           var(--template-bg-dark-3);
-$info-title-bg:                     var(--template-bg-dark-5);
+$info-bg:                           var(--media-manager-overlay-bg, var(--template-bg-dark-3));
+$info-title-bg:                     var(--media-manager-overlay-header-bg, var(--template-bg-dark-5));
 $info-dt-width:                     33.33333%;
+$info-dt-color:                     var(--media-manager-infobar-dt-color, rgba(0, 0, 0, .54));
 $info-dd-width:                     66.66667%;
 $info-close-color:                  var(--template-bg-dark-60);
 $info-close-color-hover:            var(--template-bg-dark-40);

diff --git a/build/media_source/com_media/scss/components/_layout.scss b/build/media_source/com_media/scss/components/_layout.scss
@@ -3,7 +3,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: 1rem;
-  background-color: #fff;
+  background-color: var(--media-manager-content-bg, #fff);
   border-radius: $border-radius;
   box-shadow: $col-box-shadow;
 

diff --git a/build/media_source/com_media/scss/components/_media-browser.scss b/build/media_source/com_media/scss/components/_media-browser.scss
@@ -127,7 +127,7 @@
     z-index: 1;
     width: max-content;
     min-width: 100%;
-    background-color: var(--template-bg-dark-3);
+    background-color: var(--media-manager-overlay-bg, var(--template-bg-dark-3));
     border: 1px solid hsl(var(--hue), 35%, 95%);
     border-radius: .25rem;
     box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);

diff --git a/build/media_source/com_media/scss/components/_media-infobar.scss b/build/media_source/com_media/scss/components/_media-infobar.scss
@@ -43,7 +43,7 @@ $fa-css-prefix:    fa;
   }
   dt {
     font-weight: normal;
-    color: rgba(0, 0, 0, .54);
+    color: $info-dt-color;
   }
 }
 

diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
@@ -1,6 +1,9 @@
 $atum-colors-dark: (
-  template-quickicon-color: var(--template-bg-dark-5),
-  focus-shadow:             var(--gray-800),
+  template-quickicon-color:        var(--template-bg-dark-5),
+  focus-shadow:                    var(--gray-800),
+  media-manager-overlay-bg:        var(--template-bg-dark-90),
+  media-manager-infobar-dt-color:  rgba(255, 255, 255, .54),
+  media-manager-overlay-header-bg: var(--template-bg-dark-80),
 ) !default;
 
 $link-hover-color-dark: lighten($light-blue, 20%);
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -83,7 +83,11 @@ $atum-colors: (
   template-bg-dark-70:             hsl(var(--hue), 40%, 30%),
   template-bg-dark-75:             hsl(var(--hue), 40%, 25%),
   template-bg-dark-80:             hsl(var(--hue), 40%, 20%),
-  template-bg-dark-90:             hsl(var(--hue), 40%, 10%)
+  template-bg-dark-90:             hsl(var(--hue), 40%, 10%),
+  media-manager-overlay-header-bg: var(--template-bg-dark-5),
+  media-manager-infobar-dt-color:  rgba(0, 0, 0, .54),
+  media-manager-content-bg:        var(--body-bg),
+  media-manager-overlay-bg:        var(--template-bg-dark-3),
 );
 
 $colors: (

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss b/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss
@@ -17,7 +17,7 @@
   @if $enable-dark-mode {
     @include color-mode(dark) {
       > legend {
-        color:var(--template-text-light);
+        color: var(--template-text-light);
       }
     }
   }

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
@@ -99,7 +99,7 @@
 
   @if $enable-dark-mode {
     @include color-mode(dark) {
-      .quickicon{
+      .quickicon {
         --bg-color: var(--template-bg-dark-80);
         --bg-color-hvr: var(--template-bg-dark-65);
       }

diff --git a/...ia_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/...ia_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
@@ -79,9 +79,11 @@ joomla-tab {
 
       @if $enable-dark-mode {
         @include color-mode(dark) {
+          /* stylelint-disable max-nesting-depth */
           &[aria-expanded=true] {
-            background: var(--template-bg-dark-60);
+            /* stylelint-enable max-nesting-depth */
             color: var(--template-text-light);
+            background: var(--template-bg-dark-60);
           }
         }
       }