Bilibili-Evolved/style/style-gui-settings.scss

136 lines
2.2 KiB
SCSS

.gui-settings
{
position: absolute;
top: 0;
left: -12px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.gui-settings,
.gui-settings svg path
{
transition: all 0.2s;
}
.gui-settings:hover
{
left: 0;
}
.gui-settings:hover svg path
{
fill: #eee8;
}
.gui-settings-panel
{
width: 100%;
height: 100%;
background: transparent;
position: absolute;
left: 0;
top: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
}
.gui-settings-box
{
width: 800px;
height: 600px;
background: white;
border-radius: 8px;
box-shadow: 0px 3px 20px 2px #0004;
display: flex;
flex-direction: column;
}
.gui-settings-header
{
flex-grow: 0;
height: 50px;
display: flex;
align-items: center;
}
.gui-settings-content
{
flex-grow: 1;
}
.gui-settings-content ul li
{
font-size: 1.5rem;
margin: 0.5rem 0;
display: flex;
}
.gui-settings-content ul li.indent-0
{
margin-left: 1rem;
}
.gui-settings-content ul li.indent-1
{
margin-left: 5rem;
}
.gui-settings-title
{
flex-grow: 1;
font-size: 1rem;
margin: 1rem;
}
.gui-settings-close
{
width: 24px;
height: 24px;
margin: 1rem;
}
.gui-settings-close path
{
fill: #222;
}
.gui-settings-ok path
{
fill: transparent;
}
.gui-settings-checkbox-container
{
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
-webkit-tap-highlight-color: transparent;
}
.gui-settings-checkbox-container input
{
opacity: 0;
width: 0;
}
.gui-settings-checkbox-container svg
{
width: 24px;
height: 24px;
border-radius: 4px;
margin-right: 1rem;
}
.gui-settings-checkbox-container svg path
{
transform: scale(0.9);
transform-origin: center;
}
.gui-settings-checkbox-container input ~ svg
{
background-color: #8884;
}
.gui-settings-checkbox-container input:checked ~ svg
{
background-color: $customStyleColor;
}
.gui-settings-checkbox-container input:checked ~ svg path
{
fill: $foreground;
}
.gui-settings-checkbox-container input:disabled ~ svg,
.gui-settings-checkbox-container input:disabled ~ span
{
opacity: 0.5;
}