overte-HifiExperiments/examples/html/edit-style.css
2016-03-27 17:21:02 +13:00

708 lines
17 KiB
CSS

/*
// edit-style.css
//
// Created by Ryan Huffman on 13 Nov 2014
// Copyright 2014 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
*/
@font-face {
font-family: Raleway-Regular;
src: url(../../resources/fonts/Raleway-Regular.ttf), /* Production */
url(../../interface/resources/fonts/Raleway-Regular.ttf); /* Development */
}
@font-face {
font-family: Raleway-Light;
src: url(../../resources/fonts/Raleway-Light.ttf),
url(../../interface/resources/fonts/Raleway-Light.ttf);
}
@font-face {
font-family: Raleway-Bold;
src: url(../../resources/fonts/Raleway-Bold.ttf),
url(../../interface/resources/fonts/Raleway-Bold.ttf);
}
@font-face {
font-family: Raleway-SemiBold;
src: url(../../resources/fonts/Raleway-SemiBold.ttf),
url(../../interface/resources/fonts/Raleway-SemiBold.ttf);
}
@font-face {
font-family: FiraSans-SemiBold;
src: url(../../resources/fonts/FiraSans-SemiBold.ttf),
url(../../interface/resources/fonts/FiraSans-SemiBold.ttf);
}
@font-face {
font-family: HiFi-Glyphs;
src: url(../../resources/fonts/hifi-glyphs.ttf),
url(../../interface/resources/fonts/hifi-glyphs.ttf);
}
* {
margin: 0;
padding: 0;
}
body {
padding: 24px 12px 24px 12px;
color: #afafaf;
background-color: #404040;
font-family: Raleway-Regular;
font-size: 15px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
table {
font-family: FiraSans-SemiBold;
font-size: 15px;
color: #afafaf;
border-collapse: collapse;
width: 100%;
border: 2px solid #575757;
border-radius: 7px;
}
thead {
font-family: Raleway-Regular;
font-size: 12px;
background-color: #1c1c1c;
padding: 1px 0px;
border-bottom: 1px solid #575757;
width: 100%;
}
tbody {
width: 100%;
}
tfoot {
font-family: Raleway-Light;
font-size: 13px;
background-color: #1c1c1c;
border-top: 1px solid #575757;
width: 100%;
}
tfoot tr {
background-color: #1c1cff;
}
thead tr {
height: 26px; /* 28px with thead padding */
}
thead th {
height: 26px;
background-color: #1c1c1c;
border-right: 1px solid #575757;
}
thead th:last-child {
border: none;
}
tbody td {
height: 26px;
}
tfoot td {
height: 18px;
width: 100%;
background-color: #1c1c1c;
margin-left: 12px;
}
tr {
width: 100%;
cursor: pointer;
}
tr:nth-child(odd) {
background-color: #2e2e2e;
}
tr:nth-child(even) {
background-color: #1c1c1c;
}
tr.selected {
color: #000000;
background-color: #00b4ef;
}
th {
text-align: center;
word-wrap: nowrap;
white-space: nowrap;
padding-left: 12px;
padding-right: 12px;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: nowrap;
padding-left: 12px;
padding-right: 12px;
}
td.url {
white-space: nowrap;
overflow: hidden;
}
input[type="text"], input[type="number"], textarea {
margin: 0;
padding: 0 12px;
color: #afafaf;
background-color: #252525;
border: none;
font-family: FiraSans-SemiBold;
font-size: 15px;
}
textarea {
padding-top: 5px;
padding-bottom: 5px;
min-height: 64px;
width: 100%;
resize: vertical;
}
input::-webkit-input-placeholder {
font-style: italic;
}
input.search {
border-radius: 14px;
}
input.coord {
width: 7em;
display: block;
}
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input:disabled, textarea:disabled {
background-color: rgb(63, 63, 63);
color: rgb(160, 160, 160);
}
input[type="text"] {
height: 28px;
width: 100%;
}
input[type="number"] {
position: relative;
height: 28px;
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 {
-webkit-appearance: none;
background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
width: 0.9em;
height: 22px;
opacity: 0.5; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 2px;
right: 2px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-inner-spin-button:active {
opacity: .8;
}
input[type=button] {
font-family: Raleway-Bold;
font-size: 13px;
text-transform: uppercase;
vertical-align: top;
height: 28px;
min-width: 120px;
padding: 0px 12px;
margin-right: 8px;
border-radius: 5px;
border: none;
color: #fff;
background-color: #000;
background: linear-gradient(#343434, #000);
cursor: pointer;
}
input[type=button].glyph {
font-family: HiFi-Glyphs;
font-size: 20px;
text-transform: none;
min-width: 32px;
padding: 0;
}
input[type=button].red {
color: #fff;
background-color: #94132e;
background: linear-gradient(#d42043, #94132e);
}
input[type=button]:hover {
background: linear-gradient(#000, #000);
border: none;
}
input[type=button].red:hover {
background: linear-gradient(#d42043, #d42043);
border: none;
}
input[type=button]:active {
background: linear-gradient(#343434, #343434);
}
input[type=button].red:active {
background: linear-gradient(#94132e, #94132e);
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
padding-left: 24px;
background-position-y: 6px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVDhPY2xoaGD68+dPMSMjY9L////VgTQjAw4AlH8PxLOPHj1azWxjY1MBVNsBFBfBpwkEgNKcQGwtJyfHyATkF0KEiQdAzYlMQEIUyicFyDD9+/ePgRxMvsb///4zkIOZ/v0HmkAGHginYjGNGAzS+BpdkAj8mun/3//92DyPD//993cG88nTJ4+Zm5p/BSZeJYb/DEJADEzNOPF7hn8Mk69cvVIPAHN5pyfo70F5AAAAAElFTkSuQmCC);
}
input[type=checkbox] + label:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAClSURBVDhPY2hoaGD6//9/6b9//64D8T8gGycASr/7+/dv5/79+1kYgIxKqDjRAKiniRFIv2JgYBAFYlLAE0aQ66AckgDjjx8/yNP44cMH8jS+fPmSPI0PHz4kT+PNmzfJ03jp0iXyNJ46dYo8jYcPHyYnAbxm+vnzZz8wLhlIwd+/f5/BrKSkdExCQuLrnz9/lIBpUAiIQekXF34PTGmTT548WQ8AokXg+rhVtPYAAAAASUVORK5CYII=);
}
input[type=checkbox]:checked + label {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLSURBVDhPjZK9SgNBFIXvbCaQRDQq7mIhQRPBRisJKcwLWOobaCsExEaxcEEQe0trGysfwg0EwWoDsbFIJUaIBJOwus547saNP3FlPzgzzJxzL5edFbZtG77v7wkhtrXWS9gFRQC/DZ07jnOYKJfL+8ie4n7mvyIGdhpay+VyQuK8y5dPZoHuVtbpZcLi4wjJ1x4t316R9dDgBlsSi8mGu7pJjyJFzVaH+r7iqyHSELSQzVADjS0UgjlDKUUsLzVO98+9kSLGV5qaHXhjU0GWNSxk3hCIwnsfeMNCjTArLmHeUBodoLiE+R+jxuHPUZP4elGE3teonx2S/Q7lJzOUlkYQ+A4/xzyegzNhXmJpwTMXry9IFjcoa84O0r+QXpcK1cugCLREZadyoA19Ergxwf96nKjd1KqlYqmLQ540TUNwItUmRWdu3T36AODjwgpY9xqqAAAAAElFTkSuQmCC);
}
input[type=checkbox]:checked + label:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEySURBVDhPnZLPSsNAEMa/XVPBCE0RhNy0OarP4Av4AD6JB0GwVBA8efBBxHsgh4CQswcRoUIpiIpVAm3zZ5M4szFSbQPBH3xkJvNNZskOer2eLIriKM/ze1JOcS1UHmdZduF5ngEKjr/fN4Z6+oKerwA2gxC4HAFPEWVLsAzgZAvYt3Q6Enw6jg7uBAaTFMNwhpnKdbXCkAJdy8ROu4XrXW2HTJIErHcFDD6nC02Mom8PwymeE2gvS0ZRBBaTlsOXEmdlrfLLOI7Bakrl/zWxCT8T/904f9QW/b06qtrCUdtFCqdjYs2Q2jAPX8c2XQd7Kr/wfV8vwIPs4Ga1ixe5Xrr/YFLTYfKIvWzM6ZtwXZdX7lxXG0L+sxXHcW5t254opRzawQ0S72+dPmjTroIgOP0CQSMt5LDn1T8AAAAASUVORK5CYII=);
}
.selectable {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: text;
}
.color-box {
display: inline-block;
width: 15pt;
height: 15pt;
border: 0.75pt solid black;
margin: 1.5pt;
cursor: pointer;
}
.color-box.highlight {
width: 13.5pt;
height: 13.5pt;
border: 1.5pt solid black;
}
.section-header, .sub-section-header {
position: relative;
margin: 22px -12px 0 -12px;
padding: 14px 12px 0 12px;
font-size: 12px;
color: #afafaf;
height: 28px;
text-transform: uppercase;
}
.section-header {
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
}
.sub-section-header, .no-collapse {
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
}
.section-header:first-child {
margin-top: 0;
padding-top: 0;
background: none;
height: auto;
}
.sub-section-header {
margin-bottom: 6px;
}
.section-header span {
font-family: HiFi-Glyphs;
float: right;
font-size: 20px;
position: absolute;
top: 9px;
right: 12px;
}
.text-section[collapsed="true"] ~ .text-section,
.zone-section[collapsed="true"] ~ .zone-section,
.web-section[collapsed="true"] ~ .web-section,
.hyperlink-section[collapsed="true"] ~ .hyperlink-section,
.spatial-section[collapsed="true"] ~ .spatial-section,
.physical-section[collapsed="true"] ~ .physical-section,
.behavior-section[collapsed="true"] ~ .behavior-section,
.model-section[collapsed="true"] ~ .model-section,
.light-section[collapsed="true"] ~ .light-section {
display: none;
}
.property {
display: table;
width: 100%;
margin-top: 22px;
min-height: 29px;
}
.property label {
display: table-cell;
vertical-align: middle;
font-family: Raleway-SemiBold;
font-size: 14px;
}
.checkbox + .checkbox {
margin-top: 0;
}
.property .number {
float: left;
}
.number + .number {
margin-left: 12px;
}
.text label, .url label, .number label, .textarea label {
float: left;
margin-bottom: 4px;
}
.number span {
clear: both;
float: left;
}
div.refresh {
box-sizing: border-box;
padding-right: 44px;
}
div.refresh input[type="button"] {
float: right;
margin-right: -44px;
}
.color-picker {
box-sizing: border-box;
width: 36px;
height: 36px;
border: 4px solid #afafaf;
border-radius: 4px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
background-position: bottom right;
background-repeat: no-repeat;
}
.color-picker[active="true"] {
border-color: #000;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
}
.color-picker {
float: left;
margin-bottom: 22px;
}
.color label {
float: left;
margin-top: 10px;
margin-left: 12px;
}
.color label + * {
clear: both;
}
.prop-x {
color:red !important;
background: rgba(255, 0, 0, .9);
height:2px !important;
}
.prop-y {
color:green !important;
background: rgba(0, 255, 0, .9);
height:2px !important;
}
.prop-z{
color:blue !important;
background: rgba(0, 0, 255, .9);
height:2px !important;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #2e2e2e;
}
::-webkit-scrollbar-thumb {
background-color: #696969;
border: 2px solid #2e2e2e;
border-radius: 8px;
}
/* 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 {
background-size: 10px 10px;
background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) 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;
}
#entity-list-header {
margin-bottom: 24px;
}
#delete {
float: right;
margin-right: 0;
background-color: #ff0000;
}
#entity-list {
position: relative; /* New positioning context. */
}
#search-area {
padding-right: 148px;
padding-bottom: 24px;
}
#filter {
width: 98%;
}
#radius-and-unit {
float: right;
margin-right: -148px;
}
#entity-table-scroll {
/* Height is set by JavaScript. */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-top: 28px; /* Space for header and footer outside of scroll region. */
margin-top: 28px;
border-left: 2px solid #575757;
border-right: 2px solid #575757;
}
#entity-table-scroll, #entity-table {
background-color: #1c1c1c;
}
#entity-table {
margin-top: -28px;
margin-bottom: -18px;
table-layout: fixed;
border: none;
}
#entity-table thead {
border: 2px solid #575757;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom: 1px solid #575757;
}
#entity-table tfoot {
border: 2px solid #575757;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top: 1px solid #575757;
}
#entity-table thead tr, #entity-table thead tr th,
#entity-table tfoot tr, #entity-table tfoot tr td {
background: none;
}
#col-type {
width: 16%;
}
#col-name {
width: 42%;
}
#col-url {
width: 42%;
}
#entity-table thead {
position: absolute;
top: 49px;
left: 0;
width: 100%;
}
#entity-table thead th {
padding: 0;
}
#entity-table tfoot {
position: absolute;
bottom: -21px;
left: 0;
width: 100%;
}
#no-entities {
display: none;
position: absolute;
top: 80px;
padding: 12px;
font-family: FiraSans-SemiBold;
font-size: 15px;
font-style: italic;
color: #afafaf;
}
#properties-list .property:first-child {
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;
}
.sub-props-checkbox-group {
margin-left: 20px;
}
#properties-list .label {
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
height: 1.2em;
}
#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%;
}
*/