Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
#toolboxTrayButton {
position: fixed;
top: calc(50% - 41px);
right: -1px;
line-height: 80px;
background: white;
padding: 0 7px 0 6px;
border: 1px solid var(--color-primary1);
border-right: none;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
font-family: inherit;
z-index: 650000;
transform: translateX(0px);
transition: transform 500ms;
box-shadow: 1px 0 0 white;
}
#toolboxTrayButtonInner {
transform: rotateY(0deg);
transition: transform 500ms;
}
#toolboxTray {
position: fixed;
top: 20px;
bottom: 20px;
left: 100%;
width: 80px;
padding: 8px;
z-index: 649000;
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--color-primary1);
transform: translateX(0px);
transition: transform 500ms;
overflow-x: auto;
}
#toolboxTrayContainer:hover #toolboxTrayButton, #toolboxTrayContainer:hover #toolboxTray {
transform: translateX(-97px);
}
#toolboxTrayContainer:hover #toolboxTrayButtonInner {
transform: rotateY(180deg);
}
.toolbox-container {
display: block;
margin-bottom: 1rem;
}
.toolbox-icon {
font-family: "Material Symbols Outlined";
font-size: 48px;
line-height: 48px;
color: var(--color-neutral1) !important;
font-variation-settings: "GRAD" 0;
text-align: center;
transition: all 200ms;
}
.toolbox-text {
color: var(--color-base) !important;
display: block;
text-align: center;
font-weight: 500;
font-size: 0.9rem;
text-transform: lowercase;
}
.toolbox-container:hover .toolbox-icon {
font-variation-settings: "GRAD" 200;
color: var(--color-neutral-dark1) !important;
}
