Bilibili-Evolved/registry/lib/components/style/v1-panel/v1-panel.scss
2021-12-10 23:36:02 +08:00

85 lines
2.2 KiB
SCSS

@import "common";
.be-settings {
> .be-popup {
top: 0 !important;
left: 0 !important;
body.settings-panel-dock-right & {
left: unset !important;
right: 0 !important;
}
transform: translateZ(0) translateY(0) translateX(calc(-101% * var(--direction))) !important;
--panel-height: 100vh !important;
&.open {
transform: translateZ(0) translateY(0) translateX(0) !important;
}
> * {
border-radius: 0 !important;
border-width: 0 1px 0 0 !important;
height: var(--panel-height) !important;
body.settings-panel-dock-right & {
border-width: 0 0 0 1px !important;
}
}
}
> .sidebar > * {
width: 52px !important;
border-radius: 21px !important;
transform: translateX(calc(-13px * var(--direction))) !important;
display: flex !important;
justify-content: flex-end !important;
body.settings-panel-dock-right & {
justify-content: flex-start !important;
}
.be-icon {
transition: 0.2s ease-out !important;
}
&:hover {
transform: translateX(calc(8px * var(--direction))) !important;
.be-icon {
transform: rotate(360deg) !important;
}
}
&.open {
transform: translateX(calc(12px * var(--direction))) !important;
}
}
.settings-panel-popup .component-tags .component-tags-item:last-child {
border-radius: 0 !important;
}
.widgets-panel {
padding: 24px !important;
@include no-scrollbar();
&-header {
margin-bottom: 36px !important;
}
.widgets-popup {
--columns: 1;
--medal-columns: 1;
--title-columns: 1;
left: 50%;
top: calc(100% + 4px) !important;
transform-origin: top !important;
box-sizing: border-box;
max-width: calc(100% + 44px) !important;
max-height: unset !important;
transform: translateX(calc(-50% * var(--direction))) scale(0.9) !important;
display: flex !important;
flex-wrap: wrap !important;
> * {
flex-grow: 1;
}
&.open {
transform: translateX(calc(-50% * var(--direction))) scale(1) !important;
}
body.settings-panel-dock-right & {
left: unset !important;
right: 50% !important;
}
}
}
}