b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
182 lines
3.2 KiB
CSS
Executable file
182 lines
3.2 KiB
CSS
Executable file
|
|
.viewfinder {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0ms ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* enabled="false"
|
|
*/
|
|
|
|
.viewfinder[enabled="false"] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* scale-type=fill
|
|
*/
|
|
|
|
.viewfinder[scale-type=fill] {
|
|
align-items: center;
|
|
}
|
|
|
|
/**
|
|
* visible
|
|
*/
|
|
|
|
.viewfinder.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* @shutter
|
|
*/
|
|
|
|
.viewfinder.shutter {
|
|
animation: 400ms shutter-animation;
|
|
}
|
|
|
|
/** Shutter Animation
|
|
---------------------------------------------------------*/
|
|
|
|
@keyframes shutter-animation {
|
|
0% { opacity: 1; }
|
|
1% { opacity: 0.2; }
|
|
100% { opacity: 1 }
|
|
}
|
|
|
|
/** Frame
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. The grid should never overflow the viewport.
|
|
*/
|
|
|
|
.viewfinder-frame {
|
|
display: flex;
|
|
position: relative;
|
|
max-width: 100%; /* 1 */
|
|
max-height: 100%; /* 1 */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/** Video Container
|
|
---------------------------------------------------------*/
|
|
|
|
.viewfinder-video-container {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/** Video
|
|
---------------------------------------------------------*/
|
|
|
|
.viewfinder-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
/** Frame Grid
|
|
---------------------------------------------------------*/
|
|
|
|
.viewfinder-grid {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
left: 0; top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* @grid=true
|
|
*/
|
|
|
|
[grid=on] .viewfinder-grid {
|
|
visibility: visible;
|
|
}
|
|
|
|
.viewfinder-grid .row,
|
|
.viewfinder-grid .column {
|
|
border: solid 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/** Rows
|
|
---------------------------------------------------------*/
|
|
.viewfinder-grid .row {
|
|
height: 33.33%;
|
|
}
|
|
|
|
.viewfinder-grid .row.middle {
|
|
border-top-width: 0.1rem;
|
|
border-bottom-width: 0.1rem;
|
|
}
|
|
|
|
/** Columns
|
|
---------------------------------------------------------*/
|
|
|
|
.viewfinder-grid .column {
|
|
position: absolute;
|
|
left: 0; top: 0;
|
|
height: 100%;
|
|
width: 33.33%;
|
|
}
|
|
|
|
.viewfinder-grid .column.middle {
|
|
left: 33.33%;
|
|
border-right-width: 0.1rem;
|
|
border-left-width: 0.1rem;
|
|
}
|
|
|
|
.viewfinder-grid .column.right{
|
|
left: 66.66%;
|
|
}
|
|
|
|
/** Cells
|
|
---------------------------------------------------------*/
|
|
|
|
.viewfinder-grid .column .cell {
|
|
width: 100%;
|
|
border: solid 0.1rem rgba(0,0,0,0.2);
|
|
margin-bottom: 0.1rem; /* To accomodate the grid between cells */
|
|
height: 33.33%;
|
|
}
|
|
|
|
.viewfinder-grid .column .cell.middle {
|
|
height: calc(33.33% - 0.2rem); /* To account for the border width of the grid */
|
|
}
|
|
|
|
/* Removes unwanted cell borders along the edge of the preview */
|
|
|
|
.viewfinder-grid .column.left .cell.top,
|
|
.viewfinder-grid .column.middle .cell.top,
|
|
.viewfinder-grid .column.right .cell.top {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
.viewfinder-grid .column.left .cell.top,
|
|
.viewfinder-grid .column.left .cell.middle,
|
|
.viewfinder-grid .column.left .cell.bottom {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
.viewfinder-grid .column.right .cell.top,
|
|
.viewfinder-grid .column.right .cell.middle,
|
|
.viewfinder-grid .column.right .cell.bottom {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.viewfinder-grid .column.left .cell.bottom,
|
|
.viewfinder-grid .column.middle .cell.bottom,
|
|
.viewfinder-grid .column.right .cell.bottom {
|
|
border-bottom-width: 0;
|
|
}
|