VulpesOS/gaia/shared/elements/gaia_overflow_menu/style.css
OverSu b38dea0597 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.
2026-09-30 23:13:03 +02:00

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;
}