Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
424
gaia/apps/camera/style/controls.css
Executable file
424
gaia/apps/camera/style/controls.css
Executable file
|
|
@ -0,0 +1,424 @@
|
|||
|
||||
/**
|
||||
* Controls
|
||||
*
|
||||
* The main camera control bar.
|
||||
*
|
||||
* 1. Must be stacked above viewfinder view
|
||||
*/
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
z-index: 1; /* 1 */
|
||||
width: 100%;
|
||||
padding-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.controls.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* disabled
|
||||
*/
|
||||
|
||||
.controls.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/** Left and Right
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-left,
|
||||
.controls-right {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
transition: opacity 100ms;
|
||||
}
|
||||
|
||||
/** Left
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-left {
|
||||
justify-content: flex-end;
|
||||
opacity: 1;
|
||||
transition: opacity 200ms ease-in-out, visibility 0ms;
|
||||
}
|
||||
|
||||
/**
|
||||
* recording=true
|
||||
*/
|
||||
|
||||
.controls.recording .controls-left {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-delay: 0ms, 200ms;
|
||||
}
|
||||
|
||||
/** Right
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/**
|
||||
* Countdown
|
||||
*/
|
||||
|
||||
.controls[data-countdown="active"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.controls[data-countdown="active"] .controls-left,
|
||||
.controls[data-countdown="active"] .controls-right {
|
||||
opacity: 0;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
/** Controls Button
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 5.4rem;
|
||||
width: 5.4rem;
|
||||
font-size: 3rem;
|
||||
line-height: 5.4rem;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-clip: padding-box;
|
||||
border: solid 1.8rem transparent;
|
||||
box-sizing: content-box;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* :active
|
||||
*/
|
||||
|
||||
.controls-button:active {
|
||||
background-color: #00b9df;
|
||||
}
|
||||
|
||||
/** Thumbnail Button
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-thumbnail-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls.thumbnail .controls-thumbnail-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.controls-thumbnail-button > img:active {
|
||||
border-color:#008EAB;
|
||||
background-color:#008EAB;
|
||||
}
|
||||
|
||||
.controls-thumbnail-button > img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: solid 2px #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: thumbnail-fade-in 300ms;
|
||||
}
|
||||
|
||||
/** Thumbnail Animation
|
||||
---------------------------------------------------------*/
|
||||
|
||||
@keyframes thumbnail-fade-in {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/** Cancel Pick Button
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.controls-cancel-pick-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* @cancel
|
||||
*/
|
||||
|
||||
.controls.cancel .controls-cancel-pick-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/** Mode Switch
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 2.4rem;
|
||||
width: 7.6rem;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border-radius: 3rem;
|
||||
padding: 0.2rem;
|
||||
margin-left: 1.8rem;
|
||||
box-sizing: content-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* switch-toggle-disabled
|
||||
*/
|
||||
.controls.switch-toggle-disabled .mode-switch {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* switch-disabled,
|
||||
* recording
|
||||
*/
|
||||
|
||||
.controls.switch-disabled .mode-switch,
|
||||
.controls.recording .mode-switch {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/** Mode Icon
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch_bg-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
color: #C7C7C7;
|
||||
}
|
||||
|
||||
.mode-switch_bg-icon:before {
|
||||
font-size: 2.1rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* first
|
||||
*/
|
||||
|
||||
.mode-switch_bg-icon:nth-of-type(1) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* second
|
||||
*/
|
||||
|
||||
.mode-switch_bg-icon:nth-of-type(2) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/** Mode Switch Handle
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch_handle {
|
||||
position: relative;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
border-radius: 50%;
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
/**
|
||||
* Expanded touch-area
|
||||
*/
|
||||
|
||||
.mode-switch_handle:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px; bottom: -10px;
|
||||
left: -10px; right: -10px;
|
||||
}
|
||||
|
||||
/** Mode Switch Current Icon
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch_current-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mode-switch_current-icon:before {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
/** Mode Switch Current Icon (camera)
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch_current-icon.camera {
|
||||
color: #00CAF2;
|
||||
}
|
||||
|
||||
/** Mode Switch Current Icon (video)
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.mode-switch_current-icon.video {
|
||||
color: #D92E2E;
|
||||
}
|
||||
|
||||
/** Capture Button
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.capture-button {
|
||||
position: relative;
|
||||
top: calc(50% - 5.1rem);
|
||||
width: 10.2rem;
|
||||
height: 10.2rem;
|
||||
}
|
||||
|
||||
/* Override [role="button"] styling. */
|
||||
.capture-button:active {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/** Circle
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.capture-button .circle {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/** Outer Circle
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.outer-circle {
|
||||
background: #C3F5FF;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/**
|
||||
* .mode-video
|
||||
*/
|
||||
|
||||
.controls.mode-video .outer-circle {
|
||||
background: #D92E2E;
|
||||
}
|
||||
|
||||
/** Inner Circle
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.capture-button .inner-circle {
|
||||
background-color: white;
|
||||
transform: scale(0.76);
|
||||
transition: transform 150ms ease-in;
|
||||
}
|
||||
|
||||
/**
|
||||
* :active,
|
||||
* recording=true,
|
||||
* capture-active=true & mode=picture
|
||||
*/
|
||||
|
||||
.capture-button:active .inner-circle,
|
||||
.recording .capture-button .inner-circle,
|
||||
.capture-active .capture-button .inner-circle {
|
||||
background-color: #00caf2;
|
||||
color: white;
|
||||
transform: scale(1.0);
|
||||
}
|
||||
|
||||
/**
|
||||
* mode=video
|
||||
*/
|
||||
|
||||
.controls.mode-video .inner-circle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* mode=video & :active,
|
||||
* mode=video & capture-active=true,
|
||||
* mode=vide & recording=true
|
||||
*/
|
||||
|
||||
.controls.mode-video .capture-button:active .inner-circle,
|
||||
.controls.mode-video.capture-active .capture-button .inner-circle,
|
||||
.controls.mode-video.recording .capture-button .inner-circle {
|
||||
background-color: #D92E2E;
|
||||
}
|
||||
|
||||
/** Icon
|
||||
---------------------------------------------------------*/
|
||||
|
||||
.capture-button .center:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 4rem;
|
||||
line-height: 10.2rem;
|
||||
text-align: center;
|
||||
color: #81ACB6;
|
||||
}
|
||||
|
||||
/**
|
||||
* :active,
|
||||
* recording,
|
||||
* capture-active && mode-picture
|
||||
*/
|
||||
|
||||
.capture-button:active .center:before,
|
||||
.recording .capture-button .center:before,
|
||||
.capture-active .capture-button .center:before {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/**
|
||||
* mode-video
|
||||
*
|
||||
* 1. (bug 1008488): Pixel rounding issues sometimes
|
||||
* means that this circle looks 'chopped'. Using a
|
||||
* more precise height fixes this, although
|
||||
* technically this is a platform issue.
|
||||
*/
|
||||
|
||||
.controls.mode-video .capture-button .center:before {
|
||||
content: "";
|
||||
top: calc(50% - 1rem);
|
||||
left: calc(50% - 1rem);
|
||||
width: 2.001rem; /* 1 */
|
||||
height: 2.001rem; /* 1 */
|
||||
border-radius: 50%;
|
||||
background-color: #D92E2E;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/**
|
||||
* mode-video & :active,
|
||||
* mode-video & recording,
|
||||
* mode-video & capture-active
|
||||
*/
|
||||
|
||||
.controls.mode-video .capture-button:active .center:before,
|
||||
.controls.mode-video.recording .capture-button .center:before,
|
||||
.controls.mode-video.capture-active .capture-button .center:before {
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
Loading…
Reference in a new issue