Sfoglia il codice sorgente

Button styled on theme not on core

@soyjavi 14 anni fa
parent
commit
cf8ca762d6

+ 12 - 4
src/stylesheets/css/Lungo.theme.default.css

@@ -11,9 +11,9 @@
 }
 /* @group <header> & <footer> & <article> */
 header {
-  background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
-  border-top: 1px solid #6dc0a1;
-  border-bottom: 1px solid #063322;
+  background-color: #72be4b;
+  border-top: 1px solid #84dd56;
+  border-bottom: 1px solid #589739;
 }
 footer {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
@@ -21,7 +21,7 @@ footer {
 }
 .title {
   color: #fff;
-  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
+  text-shadow: 0px 1px 0px #589739;
 }
 article {
   background-color: #e2e2e2;
@@ -132,6 +132,14 @@ aside ~ article {
   color: #fff;
   text-shadow: 0px 1px 1px #000;
 }
+/* @group .button */
+a.button {
+  box-shadow: inset 0 1px 0 rgba(34, 57, 100, 0.6), inset 1px 0 0 rgba(34, 57, 100, 0.4), inset -1px 0 0 rgba(34, 57, 100, 0.5), inset 0 -1px 0 rgba(34, 57, 100, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.2);
+}
+a.button:active {
+  box-shadow: inset 0 1px 0 rgba(10, 10, 10, 0.5), inset 1px 0 0 rgba(10, 10, 10, 0.3), inset -1px 0 0 rgba(10, 10, 10, 0.4), inset 0 -1px 0 rgba(10, 10, 10, 0.5), inset 0 1px 5px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+/* @end */
 /* @group <inputs> */
 input, textarea, select {
   border: 1px solid #c5c5c5;

File diff suppressed because it is too large
+ 2 - 3
src/stylesheets/css/Lungo.widgets.button.css


+ 18 - 4
src/stylesheets/less/Lungo.theme.default.less

@@ -15,10 +15,10 @@
 	
 /* @group <header> & <footer> & <article> */
 header {
-	background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
+	background-color: #72be4b;
 	
-	border-top: 1px solid #6dc0a1;	
-	border-bottom: 1px solid #063322;
+	border-top: 1px solid #84dd56;	
+	border-bottom: 1px solid #589739;
 }
 	
 footer {
@@ -28,7 +28,8 @@ footer {
 
 .title {
 	color: #fff;
-	text-shadow: 0px -1px 0px rgba(0,0,0,0.5) ; 
+	//text-shadow: 0px -1px 0px rgba(0,0,0,0.5) ;
+	text-shadow: 0px 1px 0px #589739; 
 }
 
 article { background-color: #e2e2e2; }
@@ -153,6 +154,19 @@ aside {
 	text-shadow: 0px 1px 1px #000;
 }
 
+/* @group .button */
+
+a.button {
+	
+	
+	box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6), inset 0 2px 0 rgba(255,255,255,0.2), 0px 1px 0px rgba(255,255,255,0.2);
+}
+
+a.button:active {
+	box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
+}
+/* @end */
+
 /* @group <inputs> */
 input, textarea, select {
 	border: 1px solid #c5c5c5;

+ 3 - 14
src/stylesheets/less/Lungo.widgets.button.less

@@ -18,29 +18,18 @@ a.button {
 	.user-select(none);
 	.border-radius(2px);
 	
-	background: #2c2c2d -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
-	-webkit-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
-	box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
-		
+	background: #2c2c2d;
+	
 	font-size: 1.0em;
 	font-weight: bold !important;
 	line-height: 32px;
 	text-align: center; 
-	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
-	text-decoration: none;
-}
-
-a.button:active {
-  -webkit-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
-  box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
+	text-decoration: none;	
 }
 
 a.button:disabled, a.button.disabled {
 	background: rgba(255,255,255,0.2);
-	border: 1px solid #999;
 	color: #999 !important; 
-	.box-shadow(inset 0 -5px 5px rgba(40,40,40,0.1));	
-	text-shadow: none;
 }
 
 a.button .icon{