b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
131 lines
2 KiB
CSS
Executable file
131 lines
2 KiB
CSS
Executable file
|
|
.hud {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 9rem;
|
|
z-index: 1;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
opacity: 1;
|
|
transition: opacity 200ms linear, visibility 0s;
|
|
visibility: visible;
|
|
direction: ltr;
|
|
|
|
/* Reduce the overpaint of the camera app */
|
|
border-left: 0.1rem solid transparent;
|
|
border-right: 0.1rem solid transparent;
|
|
}
|
|
|
|
/**
|
|
* hidden
|
|
*/
|
|
|
|
.hud.hidden,
|
|
.hud[countdown=active],
|
|
.hud[recording=true] {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition-delay: 0s, 200ms;
|
|
}
|
|
|
|
/**
|
|
* disabled
|
|
*/
|
|
|
|
.hud[camera=busy] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/** Buttons
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. Extend touchable zone.
|
|
* 2. When the button is pressed
|
|
* it changes color instanly.
|
|
* When it is released it transitons
|
|
* back to the default color.
|
|
*/
|
|
|
|
.hud_btn,
|
|
.settings_close {
|
|
height: 5rem;
|
|
width: 5rem;
|
|
font-size: 3rem;
|
|
line-height: 5rem;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(0,0,0,0.12);
|
|
background-clip: padding-box; /* 1 */
|
|
border: solid 1.5rem transparent; /* 1 */
|
|
-moz-box-sizing: content-box; /* 1 */
|
|
color: #fff;
|
|
}
|
|
|
|
.hud_btn:active {
|
|
background-color: #00b9df;
|
|
}
|
|
|
|
/** Camera Button
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. Hidden by default
|
|
*/
|
|
|
|
.hud_camera {
|
|
opacity: 0; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* camera-enabled=true
|
|
*/
|
|
|
|
.hud[camera-enabled=true] .hud_camera {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* camera-enabled=false
|
|
*/
|
|
|
|
.hud[camera-enabled=false] .hud_camera {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/** Flash Button
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. Hidden by default
|
|
*/
|
|
|
|
.hud_flash {
|
|
width: 5.8rem;
|
|
height: 5.8rem;
|
|
line-height: 5.8rem;
|
|
font-size: 3.2rem;
|
|
opacity: 0; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* flash-enabled=true
|
|
*/
|
|
|
|
.hud[flash-enabled=true] .hud_flash {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* flash-enabled=false
|
|
*/
|
|
|
|
.hud[flash-enabled=false] .hud_flash {
|
|
pointer-events: none;
|
|
}
|