MediaWiki:Gadget-ToolboxTray.css: Difference between revisions
Page last edited 5 months ago by Xeverything11
m 2 revisions imported: Import from SkyWiki |
animate icons |
||
Line 56: | Line 56: | ||
font-size: 48px; | font-size: 48px; | ||
line-height: 48px; | line-height: 48px; | ||
color: | color: var(--color-neutral1) !important; | ||
font-variation-settings: "GRAD" 0; | |||
text-align: center; | text-align: center; | ||
transition: all 200ms; | |||
} | } | ||
.toolbox-text { | .toolbox-text { | ||
color: | color: var(--color-base) !important; | ||
display: block; | display: block; | ||
text-align: center; | text-align: center; | ||
Line 67: | Line 69: | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
text-transform: lowercase; | text-transform: lowercase; | ||
} | |||
.toolbox-container:hover .toolbox-icon { | |||
font-variation-settings: "GRAD" 200; | |||
color: var(--color-neutral-dark1) !important; | |||
} | } |
Latest revision as of 07:41, 6 May 2025
#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;
}