From 84e9b965626d69200a77b284a1517d1131bdcf8a Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Sun, 5 Jan 2014 15:29:45 +0530
Subject: [PATCH] add overlay form element CSS

---
 source/Ox.UI/css/theme.css | 114 +++++++++++++++++++++++++++++++++----
 1 file changed, 104 insertions(+), 10 deletions(-)

diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css
index fd03d06b..3376bad2 100644
--- a/source/Ox.UI/css/theme.css
+++ b/source/Ox.UI/css/theme.css
@@ -424,6 +424,7 @@ Forms
     background-image: linear-gradient(top, $buttonDisabledGradient);
     color: $buttonDisabledColor;    
 }
+
 .$themeClass .OxButton.OxSymbol,
 .$themeClass .OxButton.OxSymbol:active,
 .$themeClass .OxButton.OxSymbol.OxDisabled,
@@ -453,12 +454,68 @@ Forms
 .$themeClass .OxSelect.OxSelected.OxColor > .OxButton.OxSelected {
     background: transparent;
 }
-
-
 .$themeClass .OxButton.OxTab.OxSelected {
     border-bottom: 1px solid $buttonSelectedGradient[1];
 }
 
+
+.$themeClass .OxButton.OxOverlay {
+    border-color: $formelementOverlayBorder;
+    background-image: -moz-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -ms-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -o-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -webkit-linear-gradient(top, $buttonOverlayGradient);
+    background-image: linear-gradient(top, $buttonOverlayGradient);
+    color: $formelementOverlayColor;
+    -moz-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -ms-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -o-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
+    box-shadow: 0 0 2px $formelementOverlayShadow;
+}
+.$themeClass .OxButton.OxOverlay:active {
+    border-color: $formelementOverlayBorder;
+    background-image: -moz-linear-gradient(top, $buttonOverlayActiveGradient);
+    background-image: -ms-linear-gradient(top, $buttonOverlayActiveGradient);
+    background-image: -o-linear-gradient(top, $buttonOverlayActiveGradient);
+    background-image: -webkit-linear-gradient(top, $buttonOverlayActiveGradient);
+    background-image: linear-gradient(top, $buttonOverlayActiveGradient);
+    color: $buttonOverlayActiveColor;
+}
+.$themeClass .OxButton.OxOverlay.OxDisabled {
+    background-image: -moz-linear-gradient(top, $buttonOverlayDisabledGradient);
+    background-image: -ms-linear-gradient(top, $buttonOverlayDisabledGradient);
+    background-image: -o-linear-gradient(top, $buttonOverlayDisabledGradient);
+    background-image: -webkit-linear-gradient(top, $buttonOverlayDisabledGradient);
+    background-image: linear-gradient(top, $buttonOverlayDisabledGradient);
+    color: $buttonOverlayDisabledColor;
+}
+.$themeClass .OxButton.OxOverlay.OxSelected {
+    background-image: -moz-linear-gradient(top, $buttonOverlaySelectedGradient);
+    background-image: -ms-linear-gradient(top, $buttonOverlaySelectedGradient);
+    background-image: -o-linear-gradient(top, $buttonOverlaySelectedGradient);
+    background-image: -webkit-linear-gradient(top, $buttonOverlaySelectedGradient);
+    background-image: linear-gradient(top, $buttonOverlaySelectedGradient);
+    color: $buttonOverlaySelectedColor;
+}
+.$themeClass .OxButtonGroup.OxOverlay {
+    height: 16px;
+    border-radius: 8px;
+    -moz-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -ms-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -o-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
+    box-shadow: 0 0 2px $formelementOverlayShadow;
+}
+.$themeClass .OxButtonGroup.OxOverlay .OxButton {
+    -moz-box-shadow: 0 0 0 transparent;
+    -ms-box-shadow: 0 0 0 transparent;
+    -0-box-shadow: 0 0 0 transparent;
+    -webkit-box-shadow: 0 0 0 transparent;
+    box-shadow: 0 0 0 transparent;
+}
+
+
 .$themeClass .OxFileInput.OxDisabled > .OxBar {
     background-image: -moz-linear-gradient(top, $buttonDisabledGradient);
     background-image: -ms-linear-gradient(top, $buttonDisabledGradient);
@@ -474,14 +531,6 @@ Forms
     color: $inputErrorColor;
 }
 
-.$themeClass .OxLabel.OxDisabled {
-    color: $labelDisabledColor;
-}
-.$themeClass .OxDocPage .OxLabel.OxSquare,
-.$themeClass .OxExamplePage .OxLabel.OxSquare {
-    background-color: $documentLabelBackground;
-}
-
 .$themeClass input.OxCheckbox,
 .$themeClass input.OxInput,
 .$themeClass textarea,
@@ -524,6 +573,19 @@ Forms
 .$themeClass .OxLabel {
     background-color: $labelBackground;
 }
+.$themeClass .OxLabel.OxDisabled {
+    color: $labelDisabledColor;
+}
+.$themeClass .OxLabel.OxOverlay {
+    background-color: $labelOverlayBackground;
+}
+.$themeClass .OxLabel.OxOverlay.OxDisabled {
+    color: $labelOverlayDisabledColor;
+}
+.$themeClass .OxDocPage .OxLabel.OxSquare,
+.$themeClass .OxExamplePage .OxLabel.OxSquare {
+    background-color: $documentLabelBackground;
+}
 
 .$themeClass input.OxCheckbox.OxDisabled,
 .$themeClass input.OxInput:disabled {
@@ -581,6 +643,38 @@ Forms
     color: $inputPlaceholderColor;
 }
 
+/*
+================================================================================
+ImageViewer
+================================================================================
+*/
+
+.$themeClass .OxImageViewer .OxImageOverview {
+    border-color: $formelementOverlayBorder;
+    -moz-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -ms-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -o-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
+    box-shadow: 0 0 2px $formelementOverlayShadow;
+}
+.$themeClass .OxImageViewer .OxImageOverlayArea {
+    background-image: -moz-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -ms-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -o-linear-gradient(top, $buttonOverlayGradient);
+    background-image: -webkit-linear-gradient(top, $buttonOverlayGradient);
+    background-image: linear-gradient(top, $buttonOverlayGradient);
+}
+.$themeClass .OxImageViewer #OxImageOverlayCenter {
+    border-color: $formelementOverlayBorder;
+    background: transparent;
+    background-image: none;
+    -moz-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -ms-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -o-box-shadow: 0 0 2px $formelementOverlayShadow;
+    -webkit-box-shadow: 0 0 2px $formelementOverlayShadow;
+    box-shadow: 0 0 2px $formelementOverlayShadow;
+}
+
 /*
 ================================================================================
 Lists