Style Changes

bin/style.css

@@ -510,8 +510,9 @@ input[type=checkbox]:checked:after {
   margin-left: 5px;
   min-width: 100px;
 }
-.button,
-.toggle {
+.hide-toolbar .button,
+.hide-toolbar .toggle,
+.scene-partition .show-cols-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -528,25 +529,27 @@ input[type=checkbox]:checked:after {
   font-size: 16px;
   vertical-align: middle;
 }
-.button:hover,
-.toggle:hover {
+.hide-toolbar .button:hover,
+.hide-toolbar .toggle:hover,
+.scene-partition .show-cols-btn:hover {
   color: white;
   border-color: white;
   background-color: #666;
 }
-.button label,
-.toggle label {
+.hide-toolbar .button label,
+.hide-toolbar .toggle label {
   font-size: 12px;
   margin-left: 6px;
   margin-right: 6px;
   text-shadow: none;
 }
-.button label.locked,
-.toggle label.locked {
+.hide-toolbar .button label.locked,
+.hide-toolbar .toggle label.locked {
   color: #000;
   font-style: italic;
 }
-.toggle.toggled {
+.hide-toolbar .button.toggled,
+.hide-toolbar .toggle.toggled {
   color: #ddd;
   background: #777;
   padding-top: 2px;
@@ -555,7 +558,60 @@ input[type=checkbox]:checked:after {
   border-top-width: 2px;
   border-top-color: #444;
 }
-.toggle.toggled:hover {
+.hide-toolbar .button.toggled:hover,
+.hide-toolbar .toggle.toggled:hover {
+  border-top-width: 1px;
+  padding-top: 3px;
+  border-top-color: white;
+}
+.hide-button,
+.hide-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  border: 1px solid #5a5a5a;
+  min-width: 20px;
+  min-height: 20px;
+  padding: 2px;
+  text-align: center;
+  border-radius: 1px;
+  text-shadow: 1px 2px 2px black;
+  background: -webkit-linear-gradient(top, #5a5a5a, #323232);
+  cursor: pointer;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.hide-button:hover,
+.hide-toggle:hover {
+  color: white;
+  border-color: white;
+  background-color: #666;
+}
+.hide-button label,
+.hide-toggle label {
+  font-size: 12px;
+  margin-left: 6px;
+  margin-right: 6px;
+  text-shadow: none;
+}
+.hide-button label.locked,
+.hide-toggle label.locked {
+  color: #000;
+  font-style: italic;
+}
+.hide-button.toggled,
+.hide-toggle.toggled {
+  color: #ddd;
+  background: #777;
+  padding-top: 2px;
+  padding-bottom: 1px;
+  text-shadow: none;
+  border-top-width: 2px;
+  border-top-color: #444;
+}
+.hide-button.toggled:hover,
+.hide-toggle.toggled:hover {
   border-top-width: 1px;
   padding-top: 3px;
   border-top-color: white;
@@ -584,13 +640,20 @@ input[type=checkbox]:checked:after {
   margin-bottom: 4px;
   border-bottom: solid 1px gray;
 }
-.link-container .toggle {
+.link-container .hide-button {
   min-width: 12px;
   min-height: 12px;
   width: 12px;
   height: 12px;
   font-size: 9px;
 }
+.hide-button.change-button {
+  font-size: 12px;
+  min-height: 13px;
+  min-width: 13px;
+  height: 13px;
+  width: 13px;
+}
 .button:active {
   padding-top: 3px;
   padding-bottom: 1px;

bin/style.less

@@ -579,9 +579,13 @@ input[type=checkbox] {
 			min-width : 100px;
 		}
 	}
+
+	.button, .toggle {
+		.button();
+	}
 }
 
-.button, .toggle {
+.button() {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -612,23 +616,27 @@ input[type=checkbox] {
 		color: #000;
 		font-style: italic;
 	}
-}
 
-.toggle.toggled {
-	color : #ddd;
-	background : #777;
-	padding-top: 2px;
-	padding-bottom: 1px;
-	text-shadow: none;
-	border-top-width: 2px;
-	border-top-color: #444;
-	&:hover {
-		border-top-width: 1px;
-		padding-top: 3px;
-		border-top-color : white;
+	&.toggled {
+		color : #ddd;
+		background : #777;
+		padding-top: 2px;
+		padding-bottom: 1px;
+		text-shadow: none;
+		border-top-width: 2px;
+		border-top-color: #444;
+		&:hover {
+			border-top-width: 1px;
+			padding-top: 3px;
+			border-top-color : white;
+		}
 	}
 }
 
+.hide-button, .hide-toggle {
+	.button();
+}
+
 .link-container {
 	margin-top: 4px;
 	display: flex;
@@ -656,7 +664,7 @@ input[type=checkbox] {
 		border-bottom: solid 1px gray;
 	}
 
-	.toggle {
+	.hide-button {
 		min-width: 12px;
 		min-height: 12px;
 		width: 12px;
@@ -665,6 +673,14 @@ input[type=checkbox] {
 	}
 }
 
+.hide-button.change-button {
+	font-size: 12px;
+	min-height: 13px;
+	min-width: 13px;
+	height: 13px;
+	width: 13px;
+}
+
 .button:active {
 	padding-top: 3px;
 	padding-bottom: 1px;

hide/comp/ColorPicker.hx

@@ -363,7 +363,7 @@ class ColorPicker extends Popup {
 		inputRow.addClass("toolbar hide-toolbar");
 		inputRow.css({'margin-bottom': 'auto'});
 
-		copyButton = new Element("<div class='button' title='Copy'>");
+		copyButton = new Element("<div class='hide-button' title='Copy'>");
 		copyButton.append(new Element("<div class='icon ico ico-copy'>"));
 		copyButton.on("click", function(e) {
 			Clipboard.get().set(colorCode.val());
@@ -371,7 +371,7 @@ class ColorPicker extends Popup {
 		inputRow.append(copyButton);
 
 
-		pasteButton = new Element("<div class='button' title='Paste'>");
+		pasteButton = new Element("<div class='hide-button' title='Paste'>");
 		pasteButton.append(new Element("<div class='icon ico ico-paste'>"));
 		pasteButton.on("click", function(e) {
 			var value = Clipboard.get().get();

hide/comp/MultiRange.hx

@@ -115,7 +115,7 @@ class MultiRange extends Component {
 
         var linkContainer = new Element("<div class='link-container'>").css("flex-shirnk", "1").css("left","-32px").css("position", "relative").appendTo(flex);
         linkContainer.append(new Element("<div class='link link-up'>"));
-        linkButton = new Element("<div class='toggle' title='Link/Unlink sliders. Right click to open the context menu'>").appendTo(linkContainer);
+        linkButton = new Element("<div class='hide-button' title='Link/Unlink sliders. Right click to open the context menu'>").appendTo(linkContainer);
         linkIcon = new Element("<div class='icon ico ico-link'>").appendTo(linkButton);
         linkContainer.append(new Element("<div class='link link-down'>"));
 

hide/comp/SceneEditor.hx

@@ -1586,13 +1586,13 @@ class SceneEditor {
 	function fillProps( edit : SceneEditorContext, e : PrefabElement ) {
 		properties.element.append(new Element('<h1 class="prefab-name">${e.getHideProps().name}</h1>'));
 
-		var copyButton = new Element('<div class="button" title="Copy all properties">').append(new Element('<div class="icon ico ico-copy">'));
+		var copyButton = new Element('<div class="hide-button" title="Copy all properties">').append(new Element('<div class="icon ico ico-copy">'));
 		copyButton.click(function(event : js.jquery.Event) {
 			copyFields(properties.fields);
 		});
 		properties.element.append(copyButton);
 
-		var pasteButton = new Element('<div class="button" title="Paste values from the clipboard">').append(new Element('<div class="icon ico ico-paste">'));
+		var pasteButton = new Element('<div class="hide-button" title="Paste values from the clipboard">').append(new Element('<div class="icon ico ico-paste">'));
 		pasteButton.click(function(event : js.jquery.Event) {
 			pasteFields(edit, properties.fields);
 		});

hide/comp/TextureChoice.hx

@@ -89,8 +89,7 @@ class TextureChoice extends Component {
     }
 
     function addChangeBtn() {
-        var tb = new Element("<div class='hide-toolbar'>").appendTo(element);
-        var btn = new Element("<div class='button' title='Actions ...'>").appendTo(tb);
+        var btn = new Element("<div class='hide-button change-button' title='Actions ...'>").appendTo(element);
         new Element("<div class='icon ico ico-ellipsis-h'>").appendTo(btn);
         btn.click(function(e) {
             new hide.comp.ContextMenu([