ZenBrowserMirrors/theme-store
1
0
Fork 0
mirror of https://github.com/zen-browser/theme-store.git synced 2025-07-07 17:05:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add theme: Better Workspace Buttons

Browse source
This commit is contained in:
psu 2025-03-28 14:46:03 +00:00 • committed by GitHub
parent 2a9820d3e9
commit b88ea2135e
4 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

98
themes/7ae091c4-3800-4378-b0d2-a51d517306c5/chrome.css Normal file
View file

@ -0,0 +1,98 @@
/**
* 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);
}
}
}

BIN
themes/7ae091c4-3800-4378-b0d2-a51d517306c5/image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

8
themes/7ae091c4-3800-4378-b0d2-a51d517306c5/readme.md Normal file
View file

@ -0,0 +1,8 @@
# Zen Mod: Glance buttons to the right
Move the at a glance buttons to the right side of the window.
![screenshot](./glance-buttons-right.png)
[Source code at GitHub](https://github.com/psu/zen-mods)

14
themes/7ae091c4-3800-4378-b0d2-a51d517306c5/theme.json Normal file
View file

@ -0,0 +1,14 @@
{
"id": "7ae091c4-3800-4378-b0d2-a51d517306c5",
"name": "Better Workspace Buttons",
"description": "Re-style and add customization options for the Workspace Buttons.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7ae091c4-3800-4378-b0d2-a51d517306c5/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7ae091c4-3800-4378-b0d2-a51d517306c5/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7ae091c4-3800-4378-b0d2-a51d517306c5/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-03-28"
}