From 5fc14635a22a94c4fe26e637a9491587174c70f1 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 29 Dec 2012 17:41:39 +0100 Subject: [PATCH] update theme css and jsonc --- source/Ox.UI/css/theme.css | 121 ++++++++++++++++--- source/Ox.UI/themes/classic/json/theme.jsonc | 25 ++++ source/Ox.UI/themes/modern/json/theme.jsonc | 25 ++++ 3 files changed, 151 insertions(+), 20 deletions(-) diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css index 82aae315..2eeb2110 100644 --- a/source/Ox.UI/css/theme.css +++ b/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 diff --git a/source/Ox.UI/themes/classic/json/theme.jsonc b/source/Ox.UI/themes/classic/json/theme.jsonc index 5fdcea50..17bb3922 100644 --- a/source/Ox.UI/themes/classic/json/theme.jsonc +++ b/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], diff --git a/source/Ox.UI/themes/modern/json/theme.jsonc b/source/Ox.UI/themes/modern/json/theme.jsonc index 18e48286..baf544ff 100644 --- a/source/Ox.UI/themes/modern/json/theme.jsonc +++ b/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],