Add mail menu sidebar

This commit is contained in:
DonVoo 2026-07-12 22:09:32 +02:00
parent 4616d725f2
commit c26389e65f
3 changed files with 104 additions and 8 deletions

View file

@ -32,13 +32,28 @@ body.ol2013 {
color: #fff;
display: flex;
align-items: center;
gap: 24px;
padding: 0 16px;
gap: 12px;
padding: 0 16px 0 0;
height: 44px;
flex: 0 0 auto;
position: relative;
z-index: 20;
}
.ribbon-title { margin-left: auto; font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.ribbon-tabs { display: flex; gap: 2px; height: 100%; }
.app-menu-button {
width: 54px;
height: 44px;
border: 0;
background: var(--ol-blue-dark);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.app-menu-button:hover,
.app-menu-button[aria-expanded="true"] { background: #00365f; }
.tab {
display: flex; align-items: center;
gap: 8px;
@ -77,6 +92,45 @@ body.ol2013 {
transform-origin: right center;
}
.backstage-menu {
position: fixed;
top: 44px;
left: 0;
bottom: 22px;
width: 216px;
z-index: 18;
background: var(--ol-blue);
color: #fff;
padding: 10px 0;
transform: translateX(-100%);
transition: transform .16s ease-out;
box-shadow: 8px 0 18px rgba(0, 0, 0, .16);
}
.backstage-open .backstage-menu { transform: translateX(0); }
.backstage-item {
display: block;
padding: 11px 22px;
color: #fff;
text-decoration: none;
border-left: 3px solid transparent;
}
.backstage-item:hover { background: var(--ol-blue-dark); }
.backstage-item.active {
background: #fff;
color: var(--ol-blue);
border-left-color: #fff;
}
.backstage-shade {
position: fixed;
inset: 44px 0 22px 0;
z-index: 17;
border: 0;
background: transparent;
display: none;
cursor: default;
}
.backstage-open .backstage-shade { display: block; }
/* Viewer */
.three-pane,
.four-pane {