From 7363d40957a660d5580203243dfa26a1831b3f58 Mon Sep 17 00:00:00 2001
From: Denis Shakhov <denis.shakhov@gmail.com>
Date: Tue, 18 Jun 2013 16:21:35 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/framework/css/buttons.css  | 103 ++++++++++++-----
 templates/skin/synio/css/buttons.css | 158 +++++++++++++++------------
 2 files changed, 161 insertions(+), 100 deletions(-)

diff --git a/templates/framework/css/buttons.css b/templates/framework/css/buttons.css
index bafe9025..f2a3f962 100644
--- a/templates/framework/css/buttons.css
+++ b/templates/framework/css/buttons.css
@@ -4,42 +4,60 @@
 
 .button {
 	display: inline-block;
-	
-	padding: 4px 12px;
-	padding: 5px 12px;
+	height: 28px;
+	padding: 0 10px;
 	margin: 0;
-
+	border: 1px solid #ddd;
 	text-align: center;
     vertical-align: middle;
     text-decoration: none;
-
-	font-size: 14px;
-	line-height: 20px;
-	border: none;
-	
+	font-size: 13px;
+	line-height: normal;
 	color: #333;
-	
-	background: #fafafa;
 	background: #eee;
-
+	font-family: Arial, sans-serif;
 	cursor: pointer;
-	
-	*margin-right: 5px;
-	*border: 0;
+	-webkit-border-radius: 3px;
+	   -moz-border-radius: 3px;
+	        border-radius: 3px;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
 }
-.button:hover  { text-decoration: none; background: #ddd; }
+.button:hover  { text-decoration: none; background: #eaeaea; color: #333; }
 .button:active,
 .button.active { 
 	background: #eaeaea;
-	border-color: #ccc;
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
 	   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
 	        box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
 }
-.button.fl-r { *margin-right: 0; }
+a.button { padding-top: 5px; }
+
+/* Icon */
+.button [class^="icon-"],
+.button [class*=" icon-"] { 
+	float: left;
+	position: relative;
+	margin-right: 5px;
+}
+
+/* IE7 */
+.ie7 .button { overflow: visible; display: inline; zoom: 1; }
+.ie7 .button i { float: none; display: inline; zoom: 1; vertical-align: middle; }
+.ie7 .button.fl-r { margin-right: 0; }
+.ie7 a.button { height: 16px; padding: 5px 10px 5px; }
+.ie7 a.button,
+.ie7 button.button { margin-right: 5px; }
+.ie7 a.button + input.button,
+.ie7 button.button + input.button { margin-left: -5px; }
+.ie7 .button [class^="icon-"],
+.ie7 .button [class*=" icon-"] { float: none; display: inline; zoom: 1; vertical-align: middle; }
 
 
-/* Button Disabled */
+/* 
+ * Button Disabled
+ */
 .button.disabled,
 .button.disabled:hover,
 .button[disabled],
@@ -52,15 +70,44 @@
 .button.disabled:active,
 .button[disabled]:active {
 	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
+	   -moz-box-shadow: none;
+	        box-shadow: none;
 }
 
 
-/* Button Primary */
-.button-primary { 
-	color: #fff;
-	background: #006DCC;
-}
-.button-primary:hover  { background: #0044cc; }
-.button-primary.active { background: #006DCC; }
\ No newline at end of file
+/**
+ * Button Primary
+ */
+.button-primary        { border-color: #04c; color: #fff; background: #006DCC; }
+.button-primary:hover  { background: #0044cc; color: #fff; }
+.button-primary.active { background: #006DCC; }
+
+
+/**
+ * Button Icon
+ */
+.button.button-icon { padding-left: 6px; padding-right: 6px; }
+.button.button-icon [class^="icon-"],
+.button.button-icon [class*=" icon-"] { margin: 0; }
+
+
+/**
+ * Button Small
+ */
+.button-small { height: 24px; font-size: 11px; padding-left: 8px; padding-right: 8px; }
+a.button-small { padding-top: 4px; }
+
+.button.button-small.button-icon { padding-left: 5px; padding-right: 5px; }
+
+.ie7 a.button-small { height: 14px; padding: 4px 8px 4px; }
+
+
+/**
+ * Button Large
+ */
+.button-large { height: 34px; font-size: 14px; }
+a.button-large { padding-top: 8px; }
+
+.button.button-large.button-icon { padding-left: 9px; padding-right: 9px; }
+
+.ie7 a.button-large { height: 18px; padding: 8px 12px 6px; }
\ No newline at end of file
diff --git a/templates/skin/synio/css/buttons.css b/templates/skin/synio/css/buttons.css
index d0e9abae..5ae173a2 100644
--- a/templates/skin/synio/css/buttons.css
+++ b/templates/skin/synio/css/buttons.css
@@ -3,17 +3,12 @@
  */
 
 .button {
-	padding: 3px 10px 6px;
-	*padding: 3px 10px 4px;
-	
-	border: 1px solid #dfe3e8;
+	border-color: #dfe3e8;
 	border-radius: 5px;
-	
-	font-size: 13px;
-	line-height: 15px;
-	
 	color: #434343;
-	
+	font-family: Verdana, sans-serif;
+	padding-bottom: 2px;
+
 	background: #fbfcfc;
 	background: -moz-linear-gradient(top,  #fbfcfc 0%, #f0f2f5 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfc), color-stop(100%,#f0f2f5));
@@ -21,37 +16,56 @@
 	background: -o-linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
 	background: -ms-linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
 	background: linear-gradient(top,  #fbfcfc 0%,#f0f2f5 100%);
-
-	font-family: Verdana, sans-serif;
-
-	text-shadow: none;
 }
-.button:hover { background: #f0f2f5; }
+.button:hover { background: #f0f2f5; color: #434343; }
 
-.opera .button { padding: 4px 10px 5px; }
+a.button { padding-top: 4px; }
+
+.button i { top: 1px; }
+
+.mozilla a.button { padding-top: 3px; }
+.mozilla .button { padding-bottom: 3px; }
+.mozilla .button i { top: 2px; }
+.mozilla .button.button-icon i { top: 1px; }
+
+.ie7 a.button { padding-top: 4px; padding-bottom: 6px; }
 
 
-/* Button Disabled */
-.button.disabled,
-.button.disabled:hover,
-.button[disabled],
-.button[disabled]:hover {
-	border-color: #ccc;
-	background: #eee;
-	color: #999;
-}
+/**
+ * Button Small
+ */
+.button-small { padding-bottom: 1px; }
+.button-small i { top: 0; }
 
-.button.disabled:active,
-.button[disabled]:active {
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
-}
+.mozilla .button-small { padding-bottom: 2px; }
+.mozilla .button-small i { top: 1px; }
+
+.ie7 a.button-small { padding-top: 4px; padding-bottom: 4px; }
+
+
+/**
+ * Button Large
+ */
+.button-large { padding-bottom: 1px; }
+.button-large i { top: 1px; }
+
+a.button-large { padding-top: 7px; }
+
+.mozilla .button-large { padding-bottom: 2px; }
+.mozilla a.button-large { padding-top: 6px; }
+.mozilla .button-large i { top: 2px; }
+
+.ie .button-large.button-icon i,
+.webkit .button-large.button-icon i { top: 0; }
+
+.ie7 a.button-large { padding-top: 7px; padding-bottom: 7px; }
+.ie7 .button-large i { top: 0; }
+.ie7 .button-large.button-icon i { top: 1px; }
 
 
 /* Button Primary */
 .button-primary { 
-	background: #66cfff;
+	background: #2abcfe;
 	background: -moz-linear-gradient(top,  #66cfff 0%, #2abcfe 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
 	background: -webkit-linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
@@ -60,14 +74,14 @@
 	background: linear-gradient(top,  #66cfff 0%,#2abcfe 100%);
 	
 	border-color: #27ace8;
-	text-shadow: none;
 	color: #fff;
 }
-.button-primary:hover { background: #2abcfe; }
+.button-primary:hover { background: #2abcfe; color: #fff; }
 
 
 /* Button Write */
-.button.button-write { 
+.button.button-write,
+a.button.button-write { 
 	background: #66cfff;
 	background: -moz-linear-gradient(top,  #66cfff 0%, #2abcfe 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
@@ -78,9 +92,8 @@
 	
 	border: 1px solid #27ace8;
 	
-	padding: 2px 15px 4px;
+	padding: 5px 15px 0;
 	border-radius: 15px;
-	line-height: 17px;
 	
 	color: #fff;
 	font-size: 11px;
@@ -100,15 +113,19 @@
 }
 
 
-/* Button Small */
-.button.button-small { font-size: 11px; padding: 1px 7px 3px; }
+/**
+ * Button Slide
+ */
+.button-slider span       { display: none; padding-left: 5px; }
+.button-slider:hover span { display: inline; }
 
 
-/* Button Action */
-.button.button-action {
-	border: none;
-	padding: 4px 4px 3px;
-	
+/**
+ * Button Action
+ */
+.button-action {
+	border-color: #A9D3EE;
+	color: #5190B7;
 	background: #c8f5ff;
 	background: -moz-linear-gradient(top,  #c8f5ff 0%, #88c4ea 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8f5ff), color-stop(100%,#88c4ea));
@@ -117,52 +134,49 @@
 	background: -ms-linear-gradient(top,  #c8f5ff 0%,#88c4ea 100%);
 	background: linear-gradient(top,  #c8f5ff 0%,#88c4ea 100%);
 }
-.button.button-action span { display: none; }
-.button.button-action:hover span { display: inline; padding: 0 5px 0 5px; position: relative; top: -2px; color: #fff; }
-.button.button-action.active, 
-.button.button-action:hover { 
-	border: 1px solid #2770e8;
-	-webkit-box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd; 
-	        box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd;
+.button-action.active,
+.button-action:hover {
 	color: #fff;
-	padding: 3px 3px 2px;
-
+	border-color: #0362eb;
 	background: #228dfa;
-	background: -moz-linear-gradient(top,  #228dfa 0%, #0362eb 100%);
+	background: -moz-linear-gradient(top, #228dfa 0%, #0362eb 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228dfa), color-stop(100%,#0362eb));
-	background: -webkit-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
-	background: -o-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
-	background: -ms-linear-gradient(top,  #228dfa 0%,#0362eb 100%);
-	background: linear-gradient(top,  #228dfa 0%,#0362eb 100%);
+	background: -webkit-linear-gradient(top, #228dfa 0%,#0362eb 100%);
+	background: -o-linear-gradient(top, #228dfa 0%,#0362eb 100%);
+	background: -ms-linear-gradient(top, #228dfa 0%,#0362eb 100%);
+	background: linear-gradient(top, #228dfa 0%,#0362eb 100%);
 }
-.button.button-action:hover i { vertical-align: top; position: relative; top: -1px; }
 
-.button.button-action.button-action-add-friend:hover i { background-position: -147px -39px; }
-.button.button-action.button-action-send-message:hover i { background-position: -163px -39px; }
-.button.button-action.button-action-join.active i,
-.button.button-action.button-action-join:hover i { background-position: -179px -39px; }
 
-.button.button-action.button-action-note {
+.button-action-add-friend:hover i { background-position: -147px -39px; }
+.button-action-send-message:hover i { background-position: -163px -39px; }
+.button-action-join.active i,
+.button-action-join:hover i { background-position: -179px -39px; }
+
+
+/**
+ * Button Note
+ */
+.button-note {
+	border-color: #B5F5BB;
 	background: #ccf4d0;
 	background: -webkit-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
 	background: -moz-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
 	background: -o-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
 	background: -ms-linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
 	background: linear-gradient(top,  #e9fdea 0%,#ccf4d0 100%);
-	padding: 6px 6px 6px 7px;
 }
-.button.button-action.button-action-note:hover {
+.button-note:hover {
+	border-color: #4ace56;
 	background: #4ace56;
 	background: -webkit-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
 	background: -moz-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
 	background: -o-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
 	background: -ms-linear-gradient(top,  #6ce777 0%,#4ace56 100%);
 	background: linear-gradient(top,  #6ce777 0%,#4ace56 100%);
-	border: none;
-	-webkit-box-shadow: none;
-	        box-shadow: none;
-	padding: 6px 6px 6px 7px;
-	cursor: default;
+	cursor: help;
 }
-.button.button-action.button-action-note i { display: block; }
-.button.button-action.button-action-note:hover i { top: 0; background-position: -46px -65px; }
\ No newline at end of file
+
+/* TODO: Remove hack */
+.button-note i { top: 1px; }
+.button-note:hover i { background-position: -46px -65px; }
\ No newline at end of file