Media module dark theme colors (#13858)

microposmp · web-flow · commit e465046b9b13 · 2023-06-20T11:33:53.000+02:00
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_media-items-grid-component.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_media-items-grid-component.scss
@@ -16,7 +16,7 @@ ol.media-items-grid {
         border-radius: 0;
 
         .inline-media-button {
-            color: $gray-700;
+            color: $media-color;
             opacity: 0;
             padding-top: 0px;
             position: absolute;
@@ -25,9 +25,11 @@ ol.media-items-grid {
             border-radius: 0px;
             margin-top: -32px;
             transition: all 0.2s;
+
             &.delete-button {
                 margin-right: 2.0rem;
             }
+
             &.edit-button {
                 margin-right: 3.8rem;
             }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_media-items-table-component.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_media-items-table-component.scss
@@ -7,7 +7,7 @@
             border-top: none !important;
             padding-top: 8px;
             padding-bottom: 8px;
-            color: $gray-700;
+            color: $media-color;
             font-size: 0.8125rem;
             user-select: none;
 
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_navbar.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_navbar.scss
@@ -74,9 +74,9 @@
 
         .breadcrumb-item {
             display: inline-block;
-            
+
             a {
-                color: $gray-700;
+                color: $media-color;
             }
         }
     }
@@ -89,7 +89,7 @@
 
         a {
             border-radius: 0px !important;
-            color: $gray-700;
+            color: $media-color;
         }
     }
 }
@@ -101,7 +101,7 @@
 
     button {
         border-radius: 0px !important;
-        color: $gray-700;
+        color: $media-color;
     }
 
     .selected {
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_treeview.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_treeview.scss
@@ -21,8 +21,7 @@
             font-size: 0.875rem;
             padding: 0;
         }
-
-        // show horizontal-scrollbar to keep it usable even on deeply nested directories        
+        // show horizontal-scrollbar to keep it usable even on deeply nested directories
         + ol {
             overflow-x: auto;
         }
@@ -50,7 +49,7 @@
 
     div {
         a {
-            color: $gray-700;
+            color: $media-color;
             text-decoration: none;
         }
     }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_variables.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_variables.scss
@@ -4,3 +4,4 @@
 // media-specific
 $media-border-content: 1px solid rgba(0, 0, 0, 0.1);
 $selected-background-color: lighten($primary, 45%);
+$media-color: $gray-700;
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_variables_dark.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_variables_dark.scss
@@ -4,3 +4,4 @@
 // media-specific
 $media-border-content: 1px solid rgba(140, 130, 115, 0.13);
 $selected-background-color: darken($gray-900, 10%);
+$media-color: rgb(181, 175, 166);
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Views/Admin/MediaApplication.cshtml b/src/OrchardCore.Modules/OrchardCore.Media/Views/Admin/MediaApplication.cshtml
@@ -38,18 +38,18 @@
                         </a>
                     </div>
                     <div class="btn-group visibility-buttons">
-                        <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: gridView}" v-on:click="gridView = true">
+                        <button type="button" id="toggle-grid-table-button-grid" class="btn btn-sm" :class="{selected: gridView}" v-on:click="gridView = true">
                             <span title="@T["Grid View"]"><i class="fa-solid fa-th-large" aria-hidden="true"></i></span>
                         </button>
-                        <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: !gridView}" v-on:click="gridView = false">
+                        <button type="button" id="toggle-grid-table-button-table" class="btn btn-sm" :class="{selected: !gridView}" v-on:click="gridView = false">
                             <span title="@T["List View"]"><i class="fa-solid fa-th-list" aria-hidden="true"></i></span>
                         </button>
                     </div>
                     <div class="btn-group visibility-buttons" v-show="gridView">
-                        <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm" :class="{selected: smallThumbs}" v-on:click="smallThumbs = true">
+                        <button type="button" id="toggle-thumbsize-button-small" class="btn btn-sm" :class="{selected: smallThumbs}" v-on:click="smallThumbs = true">
                             <span title="@T["Small Thumbs"]"><i class="fa-solid fa-compress" aria-hidden="true"></i></span>
                         </button>
-                        <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm me-2" :class="{selected: !smallThumbs}" v-on:click="smallThumbs = false">
+                        <button type="button" id="toggle-thumbsize-button-large" class="btn btn-sm me-2" :class="{selected: !smallThumbs}" v-on:click="smallThumbs = false">
                             <span title="@T["Large Thumbs"]"><i class="fa-solid fa-expand" aria-hidden="true"></i></span>
                         </button>
                     </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css
@@ -1028,7 +1028,7 @@
   margin-left: 1.9em;
 }
 :root[data-theme=darkmode] ol.media-items-grid li .inline-media-button {
-  color: #495057;
+  color: rgb(181, 175, 166);
   opacity: 0;
   position: absolute;
   top: 0px;
@@ -1086,7 +1086,7 @@
   padding: 20px;
 }
 :root[data-theme=darkmode] .media-items-table .header-row th {
-  color: #495057;
+  color: rgb(181, 175, 166);
   font-size: 0.8125rem;
   user-select: none;
 }
@@ -1305,7 +1305,7 @@
   display: inline-block;
 }
 :root[data-theme=darkmode] #breadcrumb .breadcrumb-path .breadcrumb-item a {
-  color: #495057;
+  color: rgb(181, 175, 166);
 }
 :root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons {
   justify-content: flex-start;
@@ -1315,7 +1315,7 @@
   margin-top: -5px;
 }
 :root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons a {
-  color: #495057;
+  color: rgb(181, 175, 166);
 }
 [dir]:root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons a {
   border-radius: 0px !important;
@@ -1328,7 +1328,7 @@
   margin-top: -5px;
 }
 :root[data-theme=darkmode] .visibility-buttons button {
-  color: #495057;
+  color: rgb(181, 175, 166);
 }
 [dir]:root[data-theme=darkmode] .visibility-buttons button {
   border-radius: 0px !important;
@@ -1389,7 +1389,7 @@
   height: 100%;
 }
 :root[data-theme=darkmode] #folder-tree div a {
-  color: #495057;
+  color: rgb(181, 175, 166);
   text-decoration: none;
 }
 [dir=ltr]:root[data-theme=darkmode] #folder-tree ol {
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css

Original file line number	Diff line number	Diff line change
`@@ -74,9 +74,9 @@`
`74`	`74`
`75`	`75`	`.breadcrumb-item {`
`76`	`76`	`display: inline-block;`
`77`		`-`
	`77`	`+`
`78`	`78`	`a {`
`79`		`- color: $gray-700;`
	`79`	`+ color: $media-color;`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`	`}`
`@@ -89,7 +89,7 @@`
`89`	`89`
`90`	`90`	`a {`
`91`	`91`	`border-radius: 0px !important;`
`92`		`- color: $gray-700;`
	`92`	`+ color: $media-color;`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`	`}`
`@@ -101,7 +101,7 @@`
`101`	`101`
`102`	`102`	`button {`
`103`	`103`	`border-radius: 0px !important;`
`104`		`- color: $gray-700;`
	`104`	`+ color: $media-color;`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`.selected {`
Original file line number	Diff line number	Diff line change
`@@ -21,8 +21,7 @@`
`21`	`21`	`font-size: 0.875rem;`
`22`	`22`	`padding: 0;`
`23`	`23`	`}`
`24`		`-`
`25`		`- // show horizontal-scrollbar to keep it usable even on deeply nested directories`
	`24`	`+ // show horizontal-scrollbar to keep it usable even on deeply nested directories`
`26`	`25`	`+ ol {`
`27`	`26`	`overflow-x: auto;`
`28`	`27`	`}`
`@@ -50,7 +49,7 @@`
`50`	`49`
`51`	`50`	`div {`
`52`	`51`	`a {`
`53`		`- color: $gray-700;`
	`52`	`+ color: $media-color;`
`54`	`53`	`text-decoration: none;`
`55`	`54`	`}`
`56`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1028,7 +1028,7 @@`
`1028`	`1028`	`margin-left: 1.9em;`
`1029`	`1029`	`}`
`1030`	`1030`	`:root[data-theme=darkmode] ol.media-items-grid li .inline-media-button {`
`1031`		`- color: #495057;`
	`1031`	`+ color: rgb(181, 175, 166);`
`1032`	`1032`	`opacity: 0;`
`1033`	`1033`	`position: absolute;`
`1034`	`1034`	`top: 0px;`
`@@ -1086,7 +1086,7 @@`
`1086`	`1086`	`padding: 20px;`
`1087`	`1087`	`}`
`1088`	`1088`	`:root[data-theme=darkmode] .media-items-table .header-row th {`
`1089`		`- color: #495057;`
	`1089`	`+ color: rgb(181, 175, 166);`
`1090`	`1090`	`font-size: 0.8125rem;`
`1091`	`1091`	`user-select: none;`
`1092`	`1092`	`}`
`@@ -1305,7 +1305,7 @@`
`1305`	`1305`	`display: inline-block;`
`1306`	`1306`	`}`
`1307`	`1307`	`:root[data-theme=darkmode] #breadcrumb .breadcrumb-path .breadcrumb-item a {`
`1308`		`- color: #495057;`
	`1308`	`+ color: rgb(181, 175, 166);`
`1309`	`1309`	`}`
`1310`	`1310`	`:root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons {`
`1311`	`1311`	`justify-content: flex-start;`
`@@ -1315,7 +1315,7 @@`
`1315`	`1315`	`margin-top: -5px;`
`1316`	`1316`	`}`
`1317`	`1317`	`:root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons a {`
`1318`		`- color: #495057;`
	`1318`	`+ color: rgb(181, 175, 166);`
`1319`	`1319`	`}`
`1320`	`1320`	`[dir]:root[data-theme=darkmode] #breadcrumb .breadcrumb-buttons a {`
`1321`	`1321`	`border-radius: 0px !important;`
`@@ -1328,7 +1328,7 @@`
`1328`	`1328`	`margin-top: -5px;`
`1329`	`1329`	`}`
`1330`	`1330`	`:root[data-theme=darkmode] .visibility-buttons button {`
`1331`		`- color: #495057;`
	`1331`	`+ color: rgb(181, 175, 166);`
`1332`	`1332`	`}`
`1333`	`1333`	`[dir]:root[data-theme=darkmode] .visibility-buttons button {`
`1334`	`1334`	`border-radius: 0px !important;`
`@@ -1389,7 +1389,7 @@`
`1389`	`1389`	`height: 100%;`
`1390`	`1390`	`}`
`1391`	`1391`	`:root[data-theme=darkmode] #folder-tree div a {`
`1392`		`- color: #495057;`
	`1392`	`+ color: rgb(181, 175, 166);`
`1393`	`1393`	`text-decoration: none;`
`1394`	`1394`	`}`
`1395`	`1395`	`[dir=ltr]:root[data-theme=darkmode] #folder-tree ol {`