b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
235 lines
3.4 KiB
CSS
Executable file
235 lines
3.4 KiB
CSS
Executable file
|
|
.settings {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1.6rem;
|
|
color: #FFF;
|
|
background: rgba(0,0,0,0.85);
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transition: opacity 150ms linear, visibility 0s;
|
|
visibility: visible;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.settings.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition-delay: 0s, 150ms;
|
|
}
|
|
|
|
/**
|
|
* COMPLEX
|
|
*
|
|
* The camera app has fixed rotation,
|
|
* this means that when the orientation of the
|
|
* device changes, the application doesn't rotate.
|
|
*
|
|
* Although the settings menu must rotate. This
|
|
* means we need to use CSS transforms to reposition
|
|
* the settings menu so that it appears rotate with
|
|
* the orientation of the device.
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @deg90
|
|
*/
|
|
|
|
.deg90 .settings {
|
|
width: 100vh;
|
|
height: 100vw;
|
|
transform:
|
|
rotate(270deg)
|
|
translate(-100%, 0);
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/**
|
|
* @deg180
|
|
*/
|
|
|
|
.deg180 .settings {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/**
|
|
* @deg270
|
|
*/
|
|
|
|
.deg270 .settings {
|
|
width: 100vh;
|
|
height: 100vw;
|
|
transform:
|
|
rotate(90deg)
|
|
translate(0px, -100vw);
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/** Pane
|
|
---------------------------------------------------------*/
|
|
|
|
.pane {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.pane > .inner {
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* @deg90
|
|
*/
|
|
|
|
.deg90 .pane > .inner {
|
|
padding-right: 7rem;
|
|
}
|
|
|
|
/**
|
|
* @deg270
|
|
*/
|
|
|
|
.deg270 .pane > .inner {
|
|
padding-left: 7rem;
|
|
}
|
|
|
|
/** Pane 1
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* [show-pane=2]
|
|
*/
|
|
|
|
[show-pane=pane-2] .pane-1 {
|
|
transform: translateX(-100%);
|
|
visibility: hidden;
|
|
}
|
|
|
|
/** Pane 2
|
|
---------------------------------------------------------*/
|
|
|
|
.pane-2 {
|
|
transform: translateX(100%);
|
|
visibility: hidden;
|
|
}
|
|
|
|
/**
|
|
* [show-pane=2]
|
|
*/
|
|
|
|
[show-pane=pane-2] .pane-2 {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
/** Inner
|
|
---------------------------------------------------------*/
|
|
|
|
.settings_inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. Space it out from under the
|
|
* setting menu button.
|
|
*/
|
|
|
|
.settings_header {
|
|
position: relative;
|
|
height: 9rem;
|
|
margin-right: 5rem; /* 1 */
|
|
line-height: 9rem;
|
|
}
|
|
|
|
/** Title
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. In case of the title being longer than the header
|
|
* we show ellipsis and prevent line wrapping
|
|
*/
|
|
.settings_title {
|
|
padding: 0 1.5rem 0 3rem;
|
|
font-size: 2.4rem;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 9rem;
|
|
color: rgba(255,255,255,0.8);
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* [dir=rtl]
|
|
*/
|
|
|
|
[dir="rtl"] .settings_title {
|
|
text-align: center;
|
|
}
|
|
|
|
/** Items
|
|
---------------------------------------------------------*/
|
|
|
|
.settings_items {
|
|
flex: 1;
|
|
overflow: scroll;
|
|
}
|
|
|
|
/** Close
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* @extends .hud a
|
|
*/
|
|
|
|
.settings_close {
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
margin: 0;
|
|
border-width: 2rem 1.5rem;
|
|
background-color: #008eab;
|
|
}
|
|
|
|
/**
|
|
* @deg90,
|
|
* @deg270
|
|
*/
|
|
|
|
.deg90 .settings_close,
|
|
.deg270 .settings_close {
|
|
border-width: 1.5rem 2rem;
|
|
}
|
|
|
|
/**
|
|
* @deg90
|
|
*/
|
|
|
|
.deg90 .settings_close {
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
/**
|
|
* @deg270
|
|
*/
|
|
|
|
.deg270 .settings_close {
|
|
right: auto;
|
|
left: 0;
|
|
}
|