mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-09 19:20:16 +02:00
Updated tiny table model and layout
This commit is contained in:
parent
49f5d5f2b7
commit
b338c9f6fa
4 changed files with 30 additions and 34 deletions
Binary file not shown.
|
@ -8,6 +8,14 @@ Distributed under the Apache License, Version 2.0.
|
||||||
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: HiFi-Glyphs;
|
||||||
|
src: url(../../../../resources/fonts/hifi-glyphs.ttf),
|
||||||
|
url(../../../../fonts/hifi-glyphs.ttf),
|
||||||
|
url(../../../../interface/resources/fonts/hifi-glyphs.ttf),
|
||||||
|
url(../fonts/hifi-glyphs.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -26,12 +34,12 @@ body {
|
||||||
section {
|
section {
|
||||||
background-color: #404040;
|
background-color: #404040;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 15px;
|
padding: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section .button {
|
section .button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 88px;
|
height: 90px;
|
||||||
background-color: #252525;
|
background-color: #252525;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -61,43 +69,33 @@ section .button {
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 60px;
|
width: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mute {
|
#mute {
|
||||||
padding-top: 12px;
|
padding-top: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bubble {
|
#bubble {
|
||||||
padding-top: 14px;
|
padding-top: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
#expand {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
right: 13px;
|
||||||
width: 100%;
|
bottom: 13px;
|
||||||
height: 30px;
|
width: 40px;
|
||||||
text-align: center;
|
height: 40px;
|
||||||
color: #e3e3e3;
|
border-radius: 20px;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer div {
|
#expand span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 14px;
|
transform: rotate(45deg);
|
||||||
width: 30px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 14px;
|
left: 0;
|
||||||
}
|
top: 5px;
|
||||||
|
font-family: hifi-glyphs;
|
||||||
footer div p {
|
font-size: 24px;
|
||||||
position: relative;
|
color: #ffffff;
|
||||||
top: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer .button:hover {
|
|
||||||
border: 1px solid #e3e3e3;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin: -8px;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,10 +23,8 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
<div id="bubble" class="button off">
|
<div id="bubble" class="button off">
|
||||||
<img id="bubble-img" />
|
<img id="bubble-img" />
|
||||||
</div>
|
</div>
|
||||||
|
<div id="expand" class="button off"><span>`</span></div>
|
||||||
</section>
|
</section>
|
||||||
<footer>
|
|
||||||
<div id="expand" class="button"><p>...</p></div>
|
|
||||||
</footer>
|
|
||||||
<script src="js/miniTablet.js"></script>
|
<script src="js/miniTablet.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
var // Base overlay
|
var // Base overlay
|
||||||
proxyOverlay = null,
|
proxyOverlay = null,
|
||||||
PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"),
|
PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"),
|
||||||
PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0046 }, // Proportional to tablet proper.
|
PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0045 }, // Proportional to tablet proper.
|
||||||
PROXY_POSITION_LEFT_HAND = {
|
PROXY_POSITION_LEFT_HAND = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0.1, // Distance from joint.
|
y: 0.1, // Distance from joint.
|
||||||
|
@ -42,12 +42,12 @@
|
||||||
// UI overlay.
|
// UI overlay.
|
||||||
proxyUIOverlay = null,
|
proxyUIOverlay = null,
|
||||||
PROXY_UI_HTML = Script.resolvePath("./html/miniTablet.html"),
|
PROXY_UI_HTML = Script.resolvePath("./html/miniTablet.html"),
|
||||||
PROXY_UI_DIMENSIONS = { x: 0.0577, y: 0.0905 },
|
PROXY_UI_DIMENSIONS = { x: 0.059, y: 0.0865 },
|
||||||
PROXY_UI_WIDTH_PIXELS = 150,
|
PROXY_UI_WIDTH_PIXELS = 150,
|
||||||
METERS_TO_INCHES = 39.3701,
|
METERS_TO_INCHES = 39.3701,
|
||||||
PROXY_UI_DPI = PROXY_UI_WIDTH_PIXELS / (PROXY_UI_DIMENSIONS.x * METERS_TO_INCHES),
|
PROXY_UI_DPI = PROXY_UI_WIDTH_PIXELS / (PROXY_UI_DIMENSIONS.x * METERS_TO_INCHES),
|
||||||
PROXY_UI_OFFSET = 0.001, // Above model surface.
|
PROXY_UI_OFFSET = 0.001, // Above model surface.
|
||||||
PROXY_UI_LOCAL_POSITION = { x: 0, y: 0, z: -(PROXY_DIMENSIONS.z / 2 + PROXY_UI_OFFSET) },
|
PROXY_UI_LOCAL_POSITION = { x: 0.0002, y: 0.0024, z: -(PROXY_DIMENSIONS.z / 2 + PROXY_UI_OFFSET) },
|
||||||
PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
|
PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
|
||||||
proxyUIOverlayEnabled = false,
|
proxyUIOverlayEnabled = false,
|
||||||
PROXY_UI_OVERLAY_ENABLED_DELAY = 500,
|
PROXY_UI_OVERLAY_ENABLED_DELAY = 500,
|
||||||
|
|
Loading…
Reference in a new issue