Ticket #255 - Studio layout updates.

modules/boonex/uni/data/template/studio/css/launcher.css

@@ -1,5 +0,0 @@
-@import url(../../../../../../../studio/template/css/launcher.css);
-
-html .shepherd-step.shepherd-theme-default .shepherd-content footer .shepherd-buttons li .shepherd-button {
-    background: #55a892; 
-}

studio/classes/BxDolStudioTemplate.php

@@ -61,7 +61,7 @@ class BxDolStudioTemplate extends BxDolTemplate implements iBxDolSingleton
 
         //--- Add default CSS in output
         $this->addCssSystem(array(
-            'common.css',
+            'common.less',
             'default.less',
             'general.css',
         	'menu.css',

studio/template/css/common.css

@@ -1,8 +0,0 @@
-@import url(../../../template/css/common.css);
-
-div.bx-db-note {
-	position: relative;
-	float: left;
-	line-height: 40px;
-	font-size: 11px;
-}

studio/template/css/common.less

@@ -0,0 +1,102 @@
+@import (reference) 'default.less';
+@import '../../../template/css/common.css';
+
+/**
+ * Overwrite default styles
+ */
+
+/* button large */
+.bx-btn,
+.bx-btn.bx-btn-primary {
+	.box-sizing(content-box);
+
+	height: 60px;
+	height: 2.5rem;
+	line-height: 60px;
+	line-height: 2.5rem;
+
+	.background-color(rgba(40, 60, 80, 0.8));
+
+	border: 1px solid rgba(20, 40, 60, 0.8);
+	.radius(3px);
+
+	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
+	-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
+	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
+
+	text-shadow: none;
+
+	font-family: sans-serif;
+	font-size: 1rem;
+	font-weight: 400;
+	color: rgba(255, 255, 255, 0.9);
+}
+.bx-btn:hover,
+.bx-btn:active,
+.bx-btn.bx-btn-primary:hover,
+.bx-btn.bx-btn-primary:active {
+	border: 1px solid rgba(20, 40, 60, 0.9);
+	.background-color(rgba(40, 60, 80, 0.9));
+
+	color: rgba(255, 255, 255, 1);
+}
+.bx-btn .sys-icon {
+	color: rgba(255, 255, 255, 0.9);
+}
+.bx-btn:hover .sys-icon,
+.bx-btn:active .sys-icon,
+.bx-btn.bx-btn-primary:hover .sys-icon,
+.bx-btn.bx-btn-primary:active .sys-icon {
+	color: rgba(255, 255, 255, 1);
+}
+
+/* button small */
+.bx-btn.bx-btn-small {
+	.box-sizing(content-box);
+
+	height: 24px;
+	height: 1.5rem;
+	line-height: 24px;
+	line-height: 1.5rem;
+
+	.background-color (rgba(40, 60, 80, 0.8));
+
+	border: 1px solid rgba(20, 40, 60, 0.8);
+	.radius(3px);
+
+	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);;
+	-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);;
+	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);;
+
+	text-shadow: none;
+
+	font-family: sans-serif;
+	font-size: 0.75rem;
+	font-weight: 400;
+	color: rgba(255, 255, 255, 0.9);
+}
+.bx-btn.bx-btn-small:hover,
+.bx-btn.bx-btn-small:active {
+	border: 1px solid rgba(20, 40, 60, 0.9);
+	.background-color (rgba(40, 60, 80, 0.9));
+
+	color: rgba(255, 255, 255, 1);
+}
+.bx-btn.bx-btn-small .sys-icon {
+	color: rgba(255, 255, 255, 0.9);
+}
+.bx-btn.bx-btn-small:hover .sys-icon,
+.bx-btn.bx-btn-small:active .sys-icon {
+	color: rgba(255, 255, 255, 1);
+}
+
+
+/**
+ * General
+ */
+div.bx-db-note {
+	position: relative;
+	float: left;
+	line-height: 40px;
+	font-size: 11px;
+}

studio/template/css/default.less

@@ -10,6 +10,13 @@
     border-color: @bx-border-color-layout;
 }
 
+/* fonts */
+.bx-def-font {
+	font-family: sans-serif;
+	font-size: 1.0rem;
+	color: rgba(40, 60, 80, 0.9);
+}
+
 /* widget */
 .bx-def-widget-size {
     .width(@bx-size-widget);

studio/template/css/forms.css

@@ -1,5 +1,58 @@
 @import url(../../../template/css/forms.css);
 
+/**
+ * Overwrite default styles
+ */
+.bx-form-value .bx-form-input-slider,
+.bx-form-value .bx-form-input-doublerange,
+.bx-form-value .bx-form-input-select_multiple,
+.bx-form-value .bx-form-input-select,
+.bx-form-value .bx-form-input-radio_set,
+.bx-form-value .bx-form-input-checkbox_set,
+.bx-form-value .bx-form-input-number,
+.bx-form-value .bx-form-input-datepicker,
+.bx-form-value .bx-form-input-datetime,
+.bx-form-value .bx-form-input-textarea,
+.bx-form-value .bx-form-input-password,
+.bx-form-value .bx-form-input-text {
+	height: 40px;
+	height: 2.5rem;
+
+	border-color: rgba(40, 60, 80, 0.5);
+	border-width: 2px;
+	border-width: 0.125;
+
+	background-color: rgba(245, 250, 255, 0.5);
+
+	-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+	-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+	box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+}
+.bx-form-value .bx-form-input-slider:focus,
+.bx-form-value .bx-form-input-doublerange:focus,
+.bx-form-value .bx-form-input-number:focus,
+.bx-form-value .bx-form-input-datepicker:focus,
+.bx-form-value .bx-form-input-datetime:focus,
+.bx-form-value .bx-form-input-textarea:focus,
+.bx-form-value .bx-form-input-password:focus,
+.bx-form-value .bx-form-input-text:focus {
+	border-color: rgba(30, 140, 240, 1);
+	background-color: rgba(255, 255, 255, 1);
+}
+
+.bx-form-value .bx-switcher-cont {
+	border-color: rgba(40, 60, 80, 0.5);
+	border-width: 2px;
+	border-width: 0.125;
+
+	background-color: rgba(245, 250, 255, 0.5);
+
+	-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+	-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+	box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.15);
+}
+
+
 /**
  * General
  */

studio/template/css/general.css

@@ -58,9 +58,8 @@ div.bx-std-content-wrp {
 div.bx-std-page-caption {
 	position: relative;
 	height: 70px;
-	background-image: url("../images/bx-std-bg-caption.png");
-    background-position: 0 0;
-    background-repeat: repeat-x;
+
+	background-color: #334455;
 }
 div.bx-std-pcap-icon {}
 div.bx-std-pcap-text {

studio/template/css/launcher.css

@@ -1,5 +1,5 @@
 body.bx-std-bg {
-	background-color: #3b8686;
+	background-color: #334455;
 }
 
 /**

studio/template/css/menu_top.css

@@ -24,7 +24,7 @@ div.bx-std-menu-top-center {
 	margin: 0px auto;
 	line-height: 50px;
 	text-align: center;
-	font-size: 2rem;
+	font-size: 1.5rem;
 }
 div.bx-std-menu-top-right {
     position: absolute;