Elian Doran eea3163f51 Add 'packages/share-theme/' from commit '2cdd2a0a543f0bced8284ca55bc94efadbc7c91f'
git-subtree-dir: packages/share-theme
git-subtree-mainline: d8f0709bce891a8ebc0676bb3b6b5314bf78a129
git-subtree-split: 2cdd2a0a543f0bced8284ca55bc94efadbc7c91f
2025-06-08 22:06:45 +03:00

95 lines
1.7 KiB
CSS

#mobile-header {
display: none;
background: var(--background-secondary);
justify-content: space-between;
align-items: center;
padding: 6px 12px;
}
#mobile-header a {
display: flex;
align-items: center;
gap: 5px;
}
#mobile-header a img {
max-width: 32px;
}
#mobile-header button {
color: var(--text-menu);
background: transparent;
margin: 0;
padding: 0;
border: 0;
outline: 0;
display: flex;
align-items: center;
cursor: pointer;
border-radius: 6px;
transform: rotate(0);
transition: background-color 200ms ease, transform 200ms ease;
}
@media (max-width: 48em) {
#right-pane, #main {
width: 100%;
overflow: hidden;
padding: 0;
}
#main {
padding: 1rem;
}
#mobile-header {
display: flex;
}
#mobile-header button svg {
width: 32px;
height: 32px;
}
#left-pane {
position: fixed;
top: 0;
left: 0;
width: auto;
transform: translateX(-100%);
transition: transform 200ms ease;
z-index: 2;
}
.menu-open #left-pane {
transform: translateX(0);
}
body::before {
content: "";
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0);
pointer-events: none;
transition: background-color 200ms ease;
z-index: 1;
}
body.menu-open::before {
background: rgba(0,0,0, 0.6);
}
body.menu-open #show-menu-button {
background: var(--background-highlight);
transform: rotate(90deg);
}
}