b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
194 lines
3.9 KiB
CSS
Executable file
194 lines
3.9 KiB
CSS
Executable file
.preview-gallery {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
bottom: 0;
|
|
background: #000;
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: all var(--transition-duration) ease-in-out;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.preview-gallery.offscreen {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 200ms ease-in-out;
|
|
}
|
|
|
|
/** Frame Container
|
|
---------------------------------------------------------*/
|
|
|
|
.frame-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.media-frame {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.media-frame > .image-view {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media-frame > video {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/** Preview Menu
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* 1. Sits on-top of frame-container.
|
|
*/
|
|
|
|
.preview-menu {
|
|
position: relative;
|
|
z-index: 1; /* 1 */
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: visibility var(--transition-duration) ease-in-out,
|
|
opacity var(--transition-duration) ease-in-out;
|
|
}
|
|
|
|
/**
|
|
* visible
|
|
*/
|
|
|
|
.preview-menu.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/**
|
|
* [secure-mode=true]
|
|
*
|
|
* 1. !important is required to over-ride
|
|
* strong specificty of <style scoped>
|
|
* inside <gaia-header>.
|
|
*
|
|
* When the platform has `::content` (bug 992249)
|
|
* and `:host` (bug 992245) selectors, this scoped
|
|
* stylesheet will no longer be required and we
|
|
* can remove this `!important`.
|
|
*/
|
|
|
|
.preview-gallery[secure-mode=true] .preview-share-icon,
|
|
.preview-gallery[secure-mode=true] .preview-option-icon {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
/** Count Text
|
|
---------------------------------------------------------*/
|
|
|
|
.count-text {
|
|
position: absolute;
|
|
bottom: 83px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
text-shadow:
|
|
1px 1px 2px rgba(0,0,0,0.4),
|
|
0 0 29px rgba(0,0,0,0.2);
|
|
color: #FFF;
|
|
}
|
|
|
|
/** Preview Controls
|
|
---------------------------------------------------------*/
|
|
|
|
.preview-controls {
|
|
position: absolute;
|
|
display: flex;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 4.5rem;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
z-index: 100;
|
|
}
|
|
|
|
/**
|
|
Overriding default styles from shared/style/headers.css
|
|
*/
|
|
section[role="region"].skin-dark > header:first-child > button:active,
|
|
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active {
|
|
background-color: rgba(0, 142, 171, 0.3);
|
|
}
|
|
|
|
section[role="region"].skin-dark > header:first-child > button,
|
|
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled) {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
section[role="region"].skin-dark > header:first-child > button {
|
|
width: 3rem;
|
|
}
|
|
|
|
section[role="region"] > header:first-child h1 {
|
|
font-weight: normal;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
section[role="region"].skin-dark > header:first-child,
|
|
.skin-dark > section[role="region"] > header:first-child {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
section[role="region"] > header:first-child > button:after,
|
|
section[role="region"] > header:first-child > a:after {
|
|
width: 100%;
|
|
}
|
|
|
|
/**
|
|
Button icon styles
|
|
*/
|
|
|
|
/**
|
|
* 1. !important required to override
|
|
* specificity of scoped stylesheet.
|
|
*/
|
|
|
|
.preview-menu button {
|
|
font-size: 3.0rem !important; /* 1 */
|
|
text-align: center;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/**
|
|
* 1. Allow flexbox to vertically center.
|
|
*/
|
|
|
|
.preview-menu button:before {
|
|
display: block; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* Ensure nothing but the action-menu is visible when it's open, otherwise the
|
|
* screen reader will have access to it.
|
|
*/
|
|
.preview-gallery.action-menu .preview-menu,
|
|
.preview-gallery.action-menu .count-text,
|
|
.preview-gallery.action-menu .frame-container {
|
|
visibility: hidden;
|
|
}
|