diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 72a48cfa49..92100b6488 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -167,11 +167,6 @@ td.url {
}
-input:focus {
- outline: 1px solid #00b4ef;
- outline-offset: -1px;
-}
-
input[type="text"], input[type="number"], textarea {
margin: 0;
padding: 0 12px;
@@ -194,6 +189,17 @@ input::-webkit-input-placeholder {
font-style: italic;
}
+input:focus, textarea:focus {
+ color: #fff;
+ background-color: #000;
+ outline: 1px solid #00b4ef;
+ outline-offset: -1px;
+}
+
+input::selection {
+ background-color: #00b4ef;
+}
+
input.search {
border-radius: 14px;
}
@@ -222,15 +228,6 @@ input[type="number"] {
width: 120px;
}
-input:focus {
- color: #fff;
- background-color: #000;
-}
-
-input::selection {
- background-color: #00b4ef;
-}
-
/* Spin Buttons modified - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
@@ -266,7 +263,7 @@ input[type=button] {
border: none;
color: #fff;
background-color: #000;
- background: linear-gradient(#343434, #000);
+ background: linear-gradient(#343434 20%, #000 100%);
cursor: pointer;
}
@@ -281,7 +278,7 @@ input[type=button].glyph {
input[type=button].red {
color: #fff;
background-color: #94132e;
- background: linear-gradient(#d42043, #94132e);
+ background: linear-gradient(#d42043 20%, #94132e 100%);
}
input[type=button]:hover {
@@ -302,7 +299,6 @@ input[type=button].red:active {
background: linear-gradient(#94132e, #94132e);
}
-
input[type=checkbox] {
display: none;
}
@@ -374,7 +370,7 @@ input[type=checkbox]:checked + label:hover {
}
.sub-section-header {
- margin-bottom: 6px;
+ margin-bottom: -10px;
}
.section-header span {
@@ -431,6 +427,10 @@ input[type=checkbox]:checked + label:hover {
margin-top: 0;
}
+.sub-props-checkbox-group {
+ margin-top: 18px;
+}
+
.property .number {
float: left;
}
@@ -457,6 +457,7 @@ input[type=checkbox]:checked + label:hover {
.dropdown {
position: relative;
+ margin-bottom: -17px;
}
.dropdown select {
@@ -531,12 +532,6 @@ input[type=checkbox]:checked + label:hover {
background-color: #00b4ef;
}
-/*dd {
- min-width: 100px;
- min-height: 100px;
- border: 1x dotted red;
-}*/
-
div.refresh {
box-sizing: border-box;
@@ -640,6 +635,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
::-webkit-scrollbar {
width: 10px;
+ height: 10px;
}
::-webkit-scrollbar-track {
@@ -654,10 +650,14 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
/* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
have correct background color with and without scrollbars. */
-::-webkit-resizer, textarea {
+textarea::-webkit-resizer {
background-size: 10px 10px;
background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
}
+textarea:focus::-webkit-resizer {
+ background-size: 10px 10px;
+ background: #000000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVChThdC5DQQhDAXQvyRI5LQxFdABARWQElAPogYkiqEWQhLYGe8xxzJaS5a/8AuQHwDG2n+Lvee0hBDQWlO+hRvy3mNZFjDG5vCDOOeIMaL3/guPKISAWiu9n+AVSSlhraXdF86Qcw6tNdoTvEOlFOScd6iUOv3JGEMopYQx9jNvaawnoHnNr8Z4AuRLPOq2gPgnAAAAAElFTkSuQmCC) no-repeat bottom right;
+}
textarea[scrolling="true"]::-webkit-resizer {
background-size: 10px 10px;
background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
@@ -778,76 +778,14 @@ textarea[scrolling="true"]::-webkit-resizer {
margin-top: 0;
}
-
-/*
-div.input-area {
- display: inline-block;
- font-size: 9pt;
-}
-
-#properties-list input[type=checkbox] {
- vertical-align: bottom;
-}
-
-#properties-list input[type=button] {
- cursor: pointer;
- background-color: rgb(51, 102, 102);
- border-color: #608e96;
- border-radius: 3.75pt;
- padding: 3.75pt 7.5pt;
- border: 0;
- color: rgb(204, 204, 204);
-}
-
-#properties-list input[type=button]:disabled {
- background-color: rgb(41, 82, 82);
- color: rgb(160, 160, 160);
-}
-
-#properties-list .property {
- padding: 4pt;
- border-bottom: 0.75pt solid rgb(63, 63, 63);
- min-height: 12pt;
+#property-id::selection {
+ background-color: #00b4ef;
}
-.sub-props-checkbox-group {
- margin-left: 20px;
+.color-set label, .color-set span {
+ display: block;
}
-
-#properties-list .label {
- font-weight: bold;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: middle;
- height: 1.2em;
+.color-set span {
+ padding-top: 2px;
}
-
-#properties-list .label input[type=button] {
- float: right;
- padding: 0 5px 1px;
-}
-
-#properties-list .value > div{
- padding: 3pt 0;
-}
-
-col#col-label {
- width: 97.5pt;
-}
-
-input#property-name {
- width: 100%;
-}
-
-div.outer {
- position: relative;
-}
-div.inner {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- position: absolute;
- width: 100%;
-}
-*/
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index c5b388ece1..19d9b92b65 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -900,6 +900,9 @@
onShow: function (colpick) {
$('#property-color').attr('active', 'true');
},
+ onHide: function (colpick) {
+ $('#property-color').attr('active', 'false');
+ },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
@@ -921,6 +924,9 @@
onShow: function (colpick) {
$('#property-light-color').attr('active', 'true');
},
+ onHide: function (colpick) {
+ $('#property-light-color').attr('active', 'false');
+ },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
@@ -965,7 +971,10 @@
onShow: function (colpick) {
$('#property-text-text-color').attr('active', 'true');
},
- onSubmit: function(hsb, hex, rgb, el) {
+ onHide: function (colpick) {
+ $('#property-text-text-color').attr('active', 'false');
+ },
+ onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
$(el).attr('active', 'false');
@@ -985,6 +994,9 @@
onShow: function (colpick) {
$('#property-text-background-color').attr('active', 'true');
},
+ onHide: function (colpick) {
+ $('#property-text-background-color').attr('active', 'false');
+ },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
@@ -1000,6 +1012,9 @@
onShow: function (colpick) {
$('#property-zone-key-light-color').attr('active', 'true');
},
+ onHide: function (colpick) {
+ $('#property-zone-key-light-color').attr('active', 'false');
+ },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
@@ -1038,6 +1053,9 @@
onShow: function (colpick) {
$('#property-zone-skybox-color').attr('active', 'true');
},
+ onHide: function (colpick) {
+ $('#property-zone-skybox-color').attr('active', 'false');
+ },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#'+hex);
$(el).colpickHide();
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 7040379070..9563e85903 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -161,9 +161,9 @@
-