mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 05:35:29 +02:00
refactor: remove unused workspace icon strip preference and related styles
This commit is contained in:
mr. M
parent
630152b91e
commit
072bc0269c
13 changed files with 142 additions and 211 deletions
|
|
@ -293,18 +293,18 @@
|
|||
|
||||
@keyframes zen-back-and-forth-text {
|
||||
0%,
|
||||
20% {
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
50%,
|
||||
60% {
|
||||
45%,
|
||||
65% {
|
||||
transform: translateX(calc(-100% - 5px));
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
80%,
|
||||
90%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -71,6 +71,12 @@
|
|||
height: calc(var(--progress-height) * 2);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: scale(0);
|
||||
transition: transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
&:hover::-moz-range-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,8 +127,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
toolbaritem {
|
||||
--zen-media-control-bg: light-dark(rgb(255, 255, 255), rgb(10, 10, 10)) !important;
|
||||
& > toolbaritem {
|
||||
--zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0.87));
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
transition: padding 0.3s ease-out;
|
||||
|
|
@ -131,9 +137,11 @@
|
|||
bottom: 0;
|
||||
padding: 4px 6px;
|
||||
border-radius: var(--border-radius-medium);
|
||||
background: var(--zen-media-control-bg) !important;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--zen-media-control-bg);
|
||||
backdrop-filter: saturate(3) contrast(2) blur(10px);
|
||||
width: 100%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.show-on-hover {
|
||||
|
|
@ -227,7 +235,7 @@
|
|||
position: relative; /* For the animation */
|
||||
|
||||
&[overflow] {
|
||||
animation: zen-back-and-forth-text 8s infinite ease-in-out;
|
||||
animation: zen-back-and-forth-text 10s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -360,9 +360,9 @@ menuitem {
|
|||
& .zen-toast {
|
||||
padding: 0.9rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
background-color: var(--button-primary-bgcolor);
|
||||
background: linear-gradient(170deg, light-dark(rgb(187, 187, 187), rgb(240, 240, 240)) -40%, var(--zen-primary-color) 140%);
|
||||
color: var(--button-primary-color);
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
box-shadow: 0 0 16px 3px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
gap: 5px;
|
||||
|
|
|
|||
|
|
@ -255,13 +255,20 @@
|
|||
}
|
||||
|
||||
& .tabbrowser-tab {
|
||||
transition: scale 0.07s ease;
|
||||
&,
|
||||
& .tab-content > image {
|
||||
transition: scale 0.07s ease;
|
||||
}
|
||||
|
||||
&[zen-empty-tab] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab]) &:active {
|
||||
#tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
|
||||
scale: var(--zen-active-tab-scale);
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
|
||||
scale: var(--zen-active-tab-scale);
|
||||
}
|
||||
|
||||
|
|
@ -462,10 +469,6 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - 10px) !important;
|
||||
}
|
||||
|
||||
& .zen-current-workspace-indicator-icon[no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -762,14 +765,6 @@
|
|||
}
|
||||
& #zen-workspaces-button {
|
||||
flex-direction: column;
|
||||
&:not([as-button='true']) {
|
||||
& toolbarbutton {
|
||||
&[active='true']::after {
|
||||
bottom: 50% !important;
|
||||
transform: translateY(50%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -155,8 +155,8 @@
|
|||
|
||||
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
||||
--input-border-color: var(--zen-input-border-color) !important;
|
||||
--zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
|
||||
--zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
|
||||
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
|
||||
|
||||
--zen-workspace-indicator-height: 45px;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,98 +17,73 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
&:not([as-button='true']) {
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
border-radius: var(--zen-button-border-radius) !important;
|
||||
background: transparent;
|
||||
padding: 2px;
|
||||
appearance: unset !important;
|
||||
height: fit-content;
|
||||
gap: 3px;
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
border-radius: var(--zen-button-border-radius) !important;
|
||||
background: transparent;
|
||||
padding: 2px;
|
||||
appearance: unset !important;
|
||||
height: fit-content;
|
||||
gap: 3px;
|
||||
|
||||
& toolbarbutton {
|
||||
margin: auto;
|
||||
width: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
|
||||
&:not([active='true']):not(:hover) {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
border-radius: 99px;
|
||||
height: 4px;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--zen-primary-color) 10%,
|
||||
light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
|
||||
);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
filter: saturate(140%) brightness(110%) !important;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
& .zen-workspace-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
|
||||
& {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
transition:
|
||||
filter 0.2s,
|
||||
opacity 0.2s;
|
||||
}
|
||||
|
||||
&[active='true'],
|
||||
&:hover {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--zen-toolbar-element-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[as-button='true'] {
|
||||
border-radius: var(--tab-border-radius);
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
&[as-button='true'] {
|
||||
& toolbarbutton {
|
||||
margin: auto;
|
||||
padding: var(--toolbarbutton-inner-padding) !important;
|
||||
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
||||
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
||||
border-radius: var(--tab-border-radius) !important;
|
||||
width: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
:root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
|
||||
& .zen-workspace-sidebar-name {
|
||||
display: none;
|
||||
}
|
||||
@media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
|
||||
&:not([active='true']):not(:hover) {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
border-radius: 99px;
|
||||
height: 4px;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--zen-primary-color) 10%,
|
||||
light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
|
||||
);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
filter: saturate(140%) brightness(110%) !important;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
& .zen-workspace-sidebar-icon {
|
||||
margin-inline-end: 0 !important;
|
||||
& .zen-workspace-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbarbutton-hover-background) !important;
|
||||
& .zen-workspace-icon[no-icon='true'] {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
|
||||
& {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
transition:
|
||||
filter 0.2s,
|
||||
opacity 0.2s;
|
||||
}
|
||||
|
||||
&[active='true'],
|
||||
&:hover {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--zen-toolbar-element-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -133,13 +108,6 @@
|
|||
|
||||
/** Keep these selectors in sync with the ones in vertical-tabs.css */
|
||||
#navigator-toolbox {
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - var(--toolbarbutton-outer-padding));
|
||||
margin: 2px;
|
||||
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue