update theme css and jsonc

source/Ox.UI/css/theme.css

@@ -47,6 +47,11 @@ body.$themeClass {
         -webkit-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), 
     	-webkit-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]);
 }
+.$themeClass .OxReflection > div {
+    background-image: -moz-linear-gradient(top, $bodyReflectionGradient);
+    background-image: -o-linear-gradient(top, $bodyReflectionGradient);
+    background-image: -webkit-linear-gradient(top, $bodyReflectionGradient);
+}
 
 /*
 ================================================================================
@@ -231,6 +236,11 @@ Dialog
 .$themeClass .OxDialog .OxIconList .OxContent {
     background-color: transparent;
 }
+.$themeClass .OxDialog .OxReflection > div {
+    background-image: -moz-linear-gradient(top, $dialogReflectionGradient);
+    background-image: -o-linear-gradient(top, $dialogReflectionGradient);
+    background-image: -webkit-linear-gradient(top, $dialogReflectionGradient);
+}
 
 .$themeClass .OxLayer {
     background-color: $dialogLayerBackground;
@@ -428,23 +438,6 @@ Forms
     background-color: rgb(208, 208, 208);
 }
 
-/*
-================================================================================
-Images
-================================================================================
-*/
-
-.$themeClass .OxReflection > div {
-    background-image: -moz-linear-gradient(top, $bodyReflectionGradient);
-    background-image: -o-linear-gradient(top, $bodyReflectionGradient);
-    background-image: -webkit-linear-gradient(top, $bodyReflectionGradient);
-}
-.$themeClass .OxDialog .OxReflection > div {
-    background-image: -moz-linear-gradient(top, $dialogReflectionGradient);
-    background-image: -o-linear-gradient(top, $dialogReflectionGradient);
-    background-image: -webkit-linear-gradient(top, $dialogReflectionGradient);
-}
-
 /*
 ================================================================================
 Lists
@@ -539,9 +532,6 @@ Lists
 .$themeClass .OxTableList .OxContent {
     background-color: $bodyBackground;
 }
-.$themeClass .OxTableList .OxItem .OxCell {
-    //border-right-color: $listItemBorder;
-}
 .$themeClass .OxCustomList .OxItem:nth-child(odd),
 .$themeClass .OxTableList .OxItem:nth-child(odd) {
     background-image: -moz-linear-gradient(top, $listItemOddGradient);
@@ -645,6 +635,97 @@ Maps
     border-bottom: 2px dotted $bodyWarningBorder;
 }
 
+/*
+================================================================================
+Media
+================================================================================
+*/
+
+.$themeClass .OxMedia {
+    background-color: $mediaBackground;
+}
+.$themeClass .OxMedia .OxReflection > div {
+    background-image: -moz-linear-gradient(top, $mediaReflectionGradient);
+    background-image: -o-linear-gradient(top, $mediaReflectionGradient);
+    background-image: -webkit-linear-gradient(top, $mediaReflectionGradient);
+}
+
+.$themeClass .OxIconList.OxMedia .OxItem > .OxIcon > img.OxLoading,
+.$themeClass .OxInfoList.OxMedia .OxItem .OxIcon > img.OxLoading {
+    border-color: $mediaListIconLoadingBorder;
+    background-image: -moz-linear-gradient(top, $mediaListIconLoadingGradient);
+    background-image: -o-linear-gradient(top, $mediaListIconLoadingGradient);
+    background-image: -webkit-linear-gradient(top, $mediaListIconLoadingGradient);
+}
+.$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxIcon > img,
+.$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxIcon > .OxVideoPlayer,
+.$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxIcon > img,
+.$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxIcon > .OxVideoPlayer {
+    border-color: $mediaListIconSelectedBorder;
+    -moz-box-shadow: 0 0 4px $mediaListIconSelectedShadow;
+    -o-box-shadow: 0 0 4px $mediaListIconSelectedShadow;
+    -webkit-box-shadow: 0 0 4px $mediaListIconSelectedShadow;
+}
+.$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxIcon > img,
+.$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxIcon > .OxVideoPlayer,
+.$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxIcon > img,
+.$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxIcon > .OxVideoPlayer {
+    border-color: $mediaListIconFocusSelectedBorder;
+    -moz-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow;
+    -o-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow;
+    -webkit-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow;
+}
+.$themeClass .OxIconList.OxMedia .OxItem > .OxText > div,
+.$themeClass .OxInfoList.OxMedia .OxItem .OxText > div {
+    color: $mediaListIconTextColor;
+    text-shadow: $mediaListIconTextShadow -1px -1px 0,
+        $mediaListIconTextShadow -1px 1px 0,
+        $mediaListIconTextShadow 1px -1px 0,
+        $mediaListIconTextShadow 1px 1px 0;
+}
+.$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxText > div,
+.$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxText > div {
+    border-color: $mediaListIconLabelSelectedBorder;
+    background-image: -moz-linear-gradient(top, $mediaListIconLabelSelectedGradient);
+    background-image: -o-linear-gradient(top, $mediaListIconLabelSelectedGradient);
+    background-image: -webkit-linear-gradient(top, $mediaListIconLabelSelectedGradient);
+    color: $mediaListIconTextSelectedColor;
+    text-shadow: $mediaListIconTextSelectedShadow -1px -1px 0,
+        $mediaListIconTextSelectedShadow -1px 1px 0,
+        $mediaListIconTextSelectedShadow 1px -1px 0,
+        $mediaListIconTextSelectedShadow 1px 1px 0;
+    -moz-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow;
+    -o-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow;
+    -webkit-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow;
+}
+.$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxText > div,
+.$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxText > div {
+    border-color: $mediaListIconLabelFocusSelectedBorder;
+    background-image: -moz-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient);
+    background-image: -o-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient);
+    background-image: -webkit-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient);
+    color: $mediaListIconTextFocusSelectedColor;
+    text-shadow: $mediaListIconTextFocusSelectedShadow -1px -1px 0,
+        $mediaListIconTextFocusSelectedShadow -1px 1px 0,
+        $mediaListIconTextFocusSelectedShadow 1px -1px 0,
+        $mediaListIconTextFocusSelectedShadow 1px 1px 0;
+    -moz-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow;
+    -o-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow;
+    -webkit-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow;
+}
+.$themeClass .OxIconList.OxMedia .OxItem > .OxText > div > .OxInfo,
+.$themeClass .OxInfoList.OxMedia .OxItem .OxText > div > .OxInfo {
+    color: $mediaListIconTextLightColor;
+}
+.$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxText > div > .OxInfo,
+.$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxText > div > .OxInfo {
+    color: $mediaListIconTextSelectedLightColor;
+}
+.$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxText > div > .OxInfo,
+.$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxText > div > .OxInfo {
+    color: $mediaListIconTextFocusSelectedLightColor;
+}
+
 /*
 ================================================================================
 Menus

source/Ox.UI/themes/classic/json/theme.jsonc

@@ -134,6 +134,31 @@
     "mapPlaceRegionColor": [0, 192, 192],
     "mapPlaceStreetColor": [255, 255, 0],
 
+    "mediaBackground": [240, 240, 240],
+    "mediaColor": [16, 16, 16],
+    "mediaReflectionGradient": [[240, 240, 240, 0.75], [240, 240, 240, 1]],
+    "mediaListIconLoadingBorder": [208, 208, 208],
+    "mediaListIconLoadingGradient": [[255, 255, 255], [224, 224, 224]],
+    "mediaListIconFocusSelectedBorder": [128, 128, 128],
+    "mediaListIconFocusSelectedShadow": [128, 128, 128],
+    "mediaListIconSelectedBorder": [192, 192, 192],
+    "mediaListIconSelectedShadow": [192, 192, 192],
+    "mediaListIconLabelFocusSelectedBorder": [128, 128, 128],
+    "mediaListIconLabelFocusSelectedGradient": [[128, 128, 128, 0.5], [128, 128, 128, 0.5]],
+    "mediaListIconLabelFocusSelectedShadow": [128, 128, 128],
+    "mediaListIconLabelSelectedBorder": [160, 160, 160],
+    "mediaListIconLabelSelectedGradient": [[160, 160, 160, 0.5], [160, 160, 160, 0.5]],
+    "mediaListIconLabelSelectedShadow": [160, 160, 160],
+    "mediaListIconTextColor": [16, 16, 16],
+    "mediaListIconTextFocusSelectedColor": [0, 0, 0],
+    "mediaListIconTextSelectedColor": [16, 16, 16],
+    "mediaListIconTextLightColor": [128, 128, 128],
+    "mediaListIconTextFocusSelectedLightColor": [128, 128, 128],
+    "mediaListIconTextSelectedLightColor": [128, 128, 128],
+    "mediaListIconTextShadow": [240, 240, 240],
+    "mediaListIconTextFocusSelectedShadow": [255, 255, 255],
+    "mediaListIconTextSelectedShadow": [240, 240, 240],
+
     "menuBackground": [208, 208, 208, 0.96],
     "menuBorder": [192, 192, 192, 0.96],
     "menuShadow": [0, 0, 0, 0.75],

source/Ox.UI/themes/modern/json/theme.jsonc

@@ -134,6 +134,31 @@
     "mapPlaceRegionColor": [0, 192, 192],
     "mapPlaceStreetColor": [255, 255, 0],
 
+    "mediaBackground": [16, 16, 16],
+    "mediaColor": [240, 240, 240],
+    "mediaReflectionGradient": [[16, 16, 16, 0.75], [16, 16, 16, 1]],
+    "mediaListIconLoadingBorder": [48, 48, 48],
+    "mediaListIconLoadingGradient": [[32, 32, 32], [0, 0, 0]],
+    "mediaListIconFocusSelectedBorder": [128, 128, 128],
+    "mediaListIconFocusSelectedShadow": [128, 128, 128],
+    "mediaListIconSelectedBorder": [64, 64, 64],
+    "mediaListIconSelectedShadow": [64, 64, 64],
+    "mediaListIconLabelFocusSelectedBorder": [128, 128, 128],
+    "mediaListIconLabelFocusSelectedGradient": [[128, 128, 128, 0.5], [128, 128, 128, 0.5]],
+    "mediaListIconLabelFocusSelectedShadow": [128, 128, 128],
+    "mediaListIconLabelSelectedBorder": [92, 92, 92], // wrong?
+    "mediaListIconLabelSelectedGradient": [[92, 92, 92, 0.5], [92, 92, 92, 0.5]], // wrong? 
+    "mediaListIconLabelSelectedShadow": [64, 64, 64], // wrong?
+    "mediaListIconTextColor": [240, 240, 240],
+    "mediaListIconTextFocusSelectedColor": [255, 255, 255],
+    "mediaListIconTextSelectedColor": [240, 240, 240],
+    "mediaListIconTextLightColor": [128, 128, 128],
+    "mediaListIconTextFocusSelectedLightColor": [128, 128, 128],
+    "mediaListIconTextSelectedLightColor": [128, 128, 128],
+    "mediaListIconTextShadow": [16, 16, 16],
+    "mediaListIconTextFocusSelectedShadow": [0, 0, 0],
+    "mediaListIconTextSelectedShadow": [16, 16, 16],
+
     "menuBackground": [48, 48, 48, 0.96],
     "menuBorder": [64, 64, 64, 0.96],
     "menuShadow": [0, 0, 0, 0.75],