164 lines
5.4 KiB
CSS
164 lines
5.4 KiB
CSS
#savorToolbar{
|
|
margin: 0 4px;
|
|
.b3-menu__item{
|
|
background-color: var(--Sv-menu-background);
|
|
&:hover{
|
|
background-color: var(--Sv-menu-item-hover)!important;
|
|
}
|
|
&.button_on svg{
|
|
color: var(--Sv-dock-item--activefocus-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
[data-name="barmode"] #savorToolbar {
|
|
display: grid !important;
|
|
}
|
|
#savorToolbar {
|
|
grid-template-columns: repeat(2, 1fr) !important; /* 每行2个 */
|
|
gap: 4px;
|
|
}
|
|
|
|
#savorToolbar .b3-menu__item[data-type="theme"] {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
padding: 0px;
|
|
border: 2px solid var(--Sv-scroll-color);
|
|
box-sizing: border-box;
|
|
.b3-menu__icon {
|
|
width: 64px;
|
|
height: 36px;
|
|
margin: 0px;
|
|
border-radius: 4px;
|
|
}
|
|
.b3-menu__label{
|
|
position: absolute;
|
|
right: 4px;
|
|
bottom: 0px;
|
|
color: var(--b3-theme-on-surface);
|
|
height: 18px;
|
|
line-height: 18px;
|
|
font-size: 10px;
|
|
min-width:unset;
|
|
}
|
|
&:hover {
|
|
border: 2px solid var(--Sv-scroll-color-hover);
|
|
.b3-menu__label{
|
|
color: var(--b3-theme-on-background);
|
|
}
|
|
}
|
|
&.button_on {
|
|
border: 2px solid var(--Sv-dock-item--activefocus-background);
|
|
.b3-menu__label{
|
|
color: var(--Sv-dock-item--activefocus-background);
|
|
}
|
|
&::before {
|
|
content: "" !important;
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 2px;
|
|
left: 2px;
|
|
background-color: var(--Sv-dock-item--activefocus-background);
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16-16-7.164-16-16 7.164-16 16-16zM24.673 9.905c-0.364-0.377-0.874-0.611-1.439-0.611-0.54 0-1.029 0.214-1.389 0.561l0.001-0.001-8.38 8.087-3.313-3.107-0.156-0.132c-0.333-0.257-0.757-0.413-1.217-0.413-1.105 0-2 0.895-2 2 0 0.577 0.244 1.097 0.635 1.462l0.001 0.001 4.392 4.117 0.157 0.133c0.443 0.337 0.992 0.464 1.515 0.384 0.596 0.092 1.227-0.087 1.693-0.537l9.449-9.117 0.14-0.149c0.293-0.346 0.471-0.797 0.471-1.29 0-0.54-0.214-1.030-0.561-1.389l0.001 0.001z'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16-16-7.164-16-16 7.164-16 16-16zM24.673 9.905c-0.364-0.377-0.874-0.611-1.439-0.611-0.54 0-1.029 0.214-1.389 0.561l0.001-0.001-8.38 8.087-3.313-3.107-0.156-0.132c-0.333-0.257-0.757-0.413-1.217-0.413-1.105 0-2 0.895-2 2 0 0.577 0.244 1.097 0.635 1.462l0.001 0.001 4.392 4.117 0.157 0.133c0.443 0.337 0.992 0.464 1.515 0.384 0.596 0.092 1.227-0.087 1.693-0.537l9.449-9.117 0.14-0.149c0.293-0.346 0.471-0.797 0.471-1.29 0-0.54-0.214-1.030-0.561-1.389l0.001 0.001z'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#savorToolbar .b3-menu__item[data-type="feature"] {
|
|
grid-column: 1 / -1 !important; /* 占据整行 */
|
|
display: flex !important;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
padding: 0 0 0 8px;;
|
|
margin-top: -3px;
|
|
.b3-menu__icon {
|
|
margin-right: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
&:hover {
|
|
background-color: var(--Sv-menu-item-hover);
|
|
}
|
|
&.button_on {
|
|
background-color: var(--Sv-menu-selected);
|
|
}
|
|
}
|
|
|
|
[data-name="barmode"]{
|
|
display: grid;
|
|
.b3-menu__items {
|
|
display: flex ;
|
|
flex-direction: row ;
|
|
flex-wrap: nowrap ;
|
|
margin:0px 4px 3px 4px;
|
|
gap: 3px;
|
|
padding: 3px;
|
|
border-radius: 6px;
|
|
background-color: var(--Sv-menu-item-hover);
|
|
overflow:visible;
|
|
.b3-menu__item {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
line-height: 5px;
|
|
background-color: transparent;
|
|
justify-content: center;
|
|
&.b3-menu__item--selected,&:hover{
|
|
background-color: var(--Sv-menu-selected)!important;
|
|
box-shadow: 0 4px 9px rgba(0, 0, 0, .05), 0 1.5px 2.8px rgba(0, 0, 0, .07), 0 0.3px 0.7px rgba(0, 0, 0, .12);
|
|
}
|
|
.b3-menu__icon{
|
|
margin: 7px 12px;
|
|
}
|
|
&.b3-menu__item--selected .b3-menu__icon{
|
|
color: var(--Sv-status-barDock-color);
|
|
}
|
|
.b3-menu__label{
|
|
position: absolute;
|
|
bottom: -28px;
|
|
left: 0;
|
|
color: var(--b3-tooltips-color);
|
|
background-color: var(--b3-tooltips-background);
|
|
height: 18px;
|
|
line-height: 18px;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
min-width:unset;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
&:hover>.b3-menu__label{
|
|
opacity: 1;
|
|
transition: var(--b3-transition);
|
|
}
|
|
}
|
|
|
|
}
|
|
#concealButton{
|
|
margin-top: 8px!important;
|
|
&::before{
|
|
content: "";
|
|
height: 1px;
|
|
width: calc(100% - 0px);
|
|
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
|
position: absolute;
|
|
top:-7px;
|
|
left: 0px;
|
|
}
|
|
}
|
|
& #savorToolbar{
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.savor-icon{
|
|
margin-bottom: -2px;
|
|
}
|