mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 04:13:11 +02:00
Style the entity editor's "grid" tab
This commit is contained in:
parent
46df386f0b
commit
42af3ebc4a
3 changed files with 81 additions and 68 deletions
|
@ -44,8 +44,12 @@
|
||||||
url(../../interface/resources/fonts/hifi-glyphs.ttf);
|
url(../../interface/resources/fonts/hifi-glyphs.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
padding: 24px 12px 24px 12px;
|
padding: 24px 12px 24px 12px;
|
||||||
|
|
||||||
color: #afafaf;
|
color: #afafaf;
|
||||||
|
@ -163,15 +167,14 @@ td.url {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
input, textarea {
|
input[type="text"], input[type="number"], textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
color: #afafaf;
|
color: #afafaf;
|
||||||
background-color: #252525;
|
background-color: #252525;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: Raleway-SemiBold;
|
font-family: FiraSans-SemiBold;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
@ -212,7 +215,7 @@ input:disabled, textarea:disabled {
|
||||||
|
|
||||||
input[type="text"], input[type="number"] {
|
input[type="text"], input[type="number"] {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
min-width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
|
@ -222,7 +225,6 @@ input[type="number"] {
|
||||||
input:focus {
|
input:focus {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border: 1px dotted red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input::selection {
|
input::selection {
|
||||||
|
@ -326,46 +328,60 @@ input[type=button].red:active {
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header, .sub-section-header {
|
.section-header, .sub-section-header {
|
||||||
background: #AAA;
|
padding: 0 0 0 0;
|
||||||
border-bottom: 0.75pt solid #CCC;
|
font-size: 12px;
|
||||||
background-color: #333333;
|
color: #afafaf;
|
||||||
color: #999;
|
|
||||||
padding: 3pt;
|
|
||||||
padding-top: 6pt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header label, .sub-section-header label {
|
.property {
|
||||||
font-weight: bold;
|
display: table;
|
||||||
font-size: 11pt;
|
width: 100%;
|
||||||
|
margin-top: 22px;
|
||||||
|
min-height: 29px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-section-header {
|
.property label {
|
||||||
padding-top: 4px;
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: Raleway-SemiBold;
|
||||||
|
font-size: 14px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-section-header label {
|
.checkbox + .checkbox {
|
||||||
font-size: 9pt;
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.checkbox span {
|
||||||
|
display: table-cell;
|
||||||
|
width: 21px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multi-property-section {
|
.property .number {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.number + .number {
|
||||||
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-section {
|
.number label {
|
||||||
display: block;
|
float: left;
|
||||||
margin: 10 10;
|
margin-bottom: 4px;
|
||||||
height: 22.5pt;
|
}
|
||||||
|
.number span {
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-section label {
|
.color span, .color label {
|
||||||
font-weight: bold;
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.color label {
|
||||||
|
padding: 4px 12px 0 0;
|
||||||
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-section span {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-section {
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker {
|
.color-picker {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -436,9 +452,6 @@ input[type=button].red:active {
|
||||||
margin-right: -148px;
|
margin-right: -148px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#radius {
|
|
||||||
width: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#entity-table-scroll {
|
#entity-table-scroll {
|
||||||
/* Height is set by JavaScript. */
|
/* Height is set by JavaScript. */
|
||||||
|
|
|
@ -123,57 +123,58 @@
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload='loaded();'>
|
<body onload='loaded();'>
|
||||||
<div class="grid-section">
|
<div id="grid-section">
|
||||||
|
|
||||||
<div class="property-section">
|
<div class="section-header">
|
||||||
<label>Visible</label>
|
<label>EDITING GRID</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="property checkbox">
|
||||||
<span>
|
<span>
|
||||||
<input type='checkbox' id="horiz-grid-visible">
|
<input type='checkbox' id="horiz-grid-visible">
|
||||||
</span>
|
</span>
|
||||||
|
<label>Visible</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="property-section">
|
<div class="property checkbox">
|
||||||
<label>Snap to grid</label>
|
|
||||||
<span>
|
<span>
|
||||||
<input type='checkbox' id="snap-to-grid">
|
<input type='checkbox' id="snap-to-grid">
|
||||||
</span>
|
</span>
|
||||||
|
<label>Snap entities to grid</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="horizontal-position" class="property-section">
|
<div class="property">
|
||||||
<label>Position (Y Axis)</label>
|
<div class="number">
|
||||||
|
<label>Major grid size</label>
|
||||||
|
<span>
|
||||||
|
<input type="number" id="major-spacing" min="1" step="1" /> m
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="number">
|
||||||
|
<label>Minor grid size</label>
|
||||||
|
<span>
|
||||||
|
<input type="number" id="minor-spacing" min="0.2" step="0.2" /> m
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="property number">
|
||||||
|
<label>Position (Y axis)</label>
|
||||||
<span>
|
<span>
|
||||||
<input type='number' id="horiz-y" class="number" step="0.1"></input>
|
<input type="number" id="horiz-y" step="0.1" /> m
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="property-section">
|
<div class="property color">
|
||||||
<label>Minor Grid Size</label>
|
|
||||||
<span>
|
|
||||||
<input type='number' id="minor-spacing" min="0.2" step="0.2"></input>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Major Grid Every</label>
|
|
||||||
<span>
|
|
||||||
<input type='number' id="major-spacing" min="1" step="1", ></input>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Grid Color</label>
|
|
||||||
<span id="grid-colors"></span>
|
<span id="grid-colors"></span>
|
||||||
|
<label>Grid line color</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="property-section">
|
<div class="property">
|
||||||
<span>
|
<span>
|
||||||
<input type="button" id="move-to-selection" value="Move to Selection">
|
<input type="button" id="move-to-selection" value="ALIGN TO SELECTION">
|
||||||
</span>
|
<input type="button" id="move-to-avatar" value="ALIGN TO AVATAR">
|
||||||
</div>
|
</span>
|
||||||
<div class="property-section">
|
|
||||||
<span>
|
|
||||||
<input type="button" id="move-to-avatar" value="Move to Avatar">
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -111,7 +111,6 @@ Preference {
|
||||||
|
|
||||||
case Preference.Checkbox:
|
case Preference.Checkbox:
|
||||||
checkBoxCount++;
|
checkBoxCount++;
|
||||||
console.log("####### checkBoxCount = " + checkBoxCount);
|
|
||||||
builder = checkboxBuilder;
|
builder = checkboxBuilder;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue