Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
103 lines
2 KiB
CSS
Executable file
103 lines
2 KiB
CSS
Executable file
gaia-overflow-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Same as titlebar */
|
|
z-index: 1001;
|
|
padding: 11.4rem 3rem 0;
|
|
background-color: rgba(231, 231, 231, 0.6);
|
|
transition: opacity var(--transition-duration);
|
|
pointer-events: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
gaia-overflow-menu.hidden {
|
|
display: none;
|
|
}
|
|
|
|
gaia-overflow-menu.showing {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* XXX Possibly a Gecko bug, if you don't specify this pseudo-element, the
|
|
* animation set on it below won't re-play subsequent times.
|
|
*/
|
|
gaia-overflow-menu::before {
|
|
content: '';
|
|
}
|
|
|
|
gaia-overflow-menu.showing::before {
|
|
position: absolute;
|
|
top: 0;
|
|
offset-inline-end: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(231, 231, 231, 0.6);
|
|
will-change: transform;
|
|
|
|
animation-name: grow;
|
|
animation-duration: var(--transition-duration);
|
|
}
|
|
:-moz-dir(ltr) gaia-overflow-menu.showing::before {
|
|
transform-origin: 100% 0;
|
|
border-radius: 0 0 0 100%;
|
|
}
|
|
:-moz-dir(rtl) gaia-overflow-menu.showing::before {
|
|
transform-origin: 0 0;
|
|
border-radius: 0 0 100% 0;
|
|
}
|
|
|
|
gaia-overflow-menu.hiding {
|
|
opacity: 0;
|
|
}
|
|
|
|
gaia-overflow-menu.showing > * {
|
|
opacity: 0;
|
|
}
|
|
|
|
gaia-overflow-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
height: 5rem;
|
|
background-color: white;
|
|
border: 0.1rem solid rgba(189, 189, 189, 0.1);
|
|
border-bottom: none;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
|
|
padding: 0;
|
|
background-position: 0.75rem center;
|
|
background-repeat: no-repeat;
|
|
|
|
font-size: 1.6rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: #00aac5;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-moz-user-select: none;
|
|
|
|
transition: opacity 0.2s;
|
|
}
|
|
gaia-overflow-menu:-moz-dir(ltr) button {
|
|
padding-left: 6rem;
|
|
text-align: left;
|
|
}
|
|
gaia-overflow-menu:-moz-dir(rtl) button {
|
|
padding-right: 6rem;
|
|
text-align: right;
|
|
}
|
|
|
|
gaia-overflow-menu button:active {
|
|
background-color: #e7e7e7;
|
|
}
|
|
|
|
gaia-overflow-menu button:last-child {
|
|
border-bottom: 0.1rem solid rgba(189, 189, 189, 0.1);
|
|
}
|
|
|
|
gaia-overflow-menu button[hidden] {
|
|
display: none;
|
|
}
|