mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
98 lines
4.3 KiB
CSS
98 lines
4.3 KiB
CSS
|
|
/**
|
|
* Zen Mod: Better Workspace Buttons
|
|
* Re-style and add customization options for the Workspace Buttons.
|
|
* Pontus Sundén <hi@pontus.cc>
|
|
*/
|
|
:root {
|
|
/**
|
|
--psu-better_ws_buttons-button_font_size: 16px;
|
|
--psu-better_ws_buttons-button_opacity: 0.7;
|
|
--psu-better_ws_buttons-button_magnification: 1.1;
|
|
/**/
|
|
--psu-better_ws_buttons-button_active_size: calc(var(--psu-better_ws_buttons-button_font_size) * var(--psu-better_ws_buttons-button_magnification));
|
|
--psu-better_ws_buttons-button_marker_size: calc(var(--psu-better_ws_buttons-button_active_size) * 0.225);
|
|
--psu-better_ws_buttons-button_size: calc(var(--psu-better_ws_buttons-button_active_size) * 1.5 + var(--psu-better_ws_buttons-button_marker_size));
|
|
--psu-better_ws_buttons-button_outline_color: light-dark(
|
|
rgba(1, 1, 1, calc(var(--psu-better_ws_buttons-button_opacity) * 0.35)),
|
|
rgba(255, 255, 255, calc(var(--psu-better_ws_buttons-button_opacity) * 0.35))
|
|
);
|
|
--psu-better_ws_buttons-button_hover_background: light-dark(
|
|
rgba(1, 1, 1, calc(var(--psu-better_ws_buttons-button_opacity) * 0.15)),
|
|
rgba(255, 255, 255, calc(var(--psu-better_ws_buttons-button_opacity) * 0.25))
|
|
);
|
|
--psu-better_ws_buttons-toolbar_padding: calc(2 * var(--toolbarbutton-inner-padding) + 16px + var(--zen-element-separation));
|
|
}
|
|
|
|
#zen-sidebar-bottom-buttons {
|
|
@media (-moz-bool-pref: 'psu.better_ws_buttons.show_separator') {
|
|
border-top: 1px solid light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)) !important;
|
|
}
|
|
#zen-workspaces-button {
|
|
position: absolute !important;
|
|
font-size: var(--psu-better_ws_buttons-button_font_size) !important;
|
|
bottom: calc(var(--zen-toolbox-padding) * -0.7);
|
|
margin: 0 var(--psu-better_ws_buttons-toolbar_padding) !important;
|
|
width: calc(100% - var(--psu-better_ws_buttons-toolbar_padding) * 2) !important;
|
|
|
|
toolbarbutton {
|
|
filter: grayscale(0) !important;
|
|
opacity: var(--psu-better_ws_buttons-button_opacity) !important;
|
|
filter: saturate(calc(var(--psu-better_ws_buttons-button_opacity) * 0.5)) !important;
|
|
transition-duration: 0.05s, 0.05s, 0.05s !important;
|
|
height: var(--psu-better_ws_buttons-button_size) !important;
|
|
width: var(--psu-better_ws_buttons-button_size) !important;
|
|
border-radius: calc(var(--psu-better_ws_buttons-button_active_size) * 0.4) !important;
|
|
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
filter: saturate(1) !important;
|
|
font-size: var(--psu-better_ws_buttons-button_active_size) !important;
|
|
background: var(--psu-better_ws_buttons-button_hover_background) !important;
|
|
}
|
|
&[active='true'] {
|
|
font-size: var(--psu-better_ws_buttons-button_active_size) !important;
|
|
opacity: 1 !important;
|
|
filter: saturate(1) !important;
|
|
&:hover {
|
|
background: var(--psu-better_ws_buttons-button_hover_background) !important;
|
|
}
|
|
}
|
|
.zen-workspace-icon {
|
|
text-shadow: 0px 0px 1px var(--psu-better_ws_buttons-button_outline_color);
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'psu.better_ws_buttons.show_indicator') {
|
|
&:not([overflow]) toolbarbutton[active='true']::before {
|
|
content: '';
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
bottom: 0;
|
|
font-size: var(--psu-better_ws_buttons-button_active_size);
|
|
width: var(--psu-better_ws_buttons-button_marker_size);
|
|
height: var(--psu-better_ws_buttons-button_marker_size);
|
|
background: light-dark(rgba(1, 1, 1, calc(var(--psu-better_ws_buttons-button_opacity) * 0.75)), rgba(255, 255, 255, calc(var(--psu-better_ws_buttons-button_opacity) * 0.75)));
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-current-workspace-indicator-container {
|
|
.zen-current-workspace-indicator {
|
|
.zen-current-workspace-indicator-icon {
|
|
text-shadow: 0px 0px 1px var(--psu-better_ws_buttons-button_outline_color);
|
|
font-size: calc(var(--psu-better_ws_buttons-button_font_size) + 3px) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces {
|
|
toolbarbutton {
|
|
.zen-workspace-icon {
|
|
font-size: var(--psu-better_ws_buttons-button_font_size) !important;
|
|
text-shadow: 0px 0px 1px var(--psu-better_ws_buttons-button_outline_color);
|
|
}
|
|
}
|
|
}
|