mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-16 14:56:14 +00:00
Merge branch 'dev' into glance-buttons-overflow
This commit is contained in:
Vrezh Fedora
@@ -125,12 +125,5 @@ export var ZenCustomizableUI = new (class {
|
||||
registerToolbarNodes(window) {
|
||||
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
|
||||
window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-bottom-buttons'));
|
||||
window.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
() => {
|
||||
this._dispatchResizeEvent(window);
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
|
||||
closeWatermark() {
|
||||
document.documentElement.removeAttribute('zen-before-loaded');
|
||||
window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
|
||||
if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
|
||||
gZenUIManager.motion
|
||||
.animate(
|
||||
|
||||
@@ -65,6 +65,7 @@ var gZenUIManager = {
|
||||
tabs.style.removeProperty('flex');
|
||||
tabs.style.maxHeight = height + 'px';
|
||||
gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
|
||||
gURLBar.updateLayoutBreakout();
|
||||
},
|
||||
|
||||
get tabsWrapper() {
|
||||
@@ -249,7 +250,7 @@ var gZenUIManager = {
|
||||
const toast = this._createToastElement(messageId, options);
|
||||
this._toastContainer.removeAttribute('hidden');
|
||||
this._toastContainer.appendChild(toast);
|
||||
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
|
||||
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
|
||||
await new Promise((resolve) => setTimeout(resolve, 3000));
|
||||
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
|
||||
const toastHeight = toast.getBoundingClientRect().height;
|
||||
@@ -260,6 +261,10 @@ var gZenUIManager = {
|
||||
this._toastContainer.setAttribute('hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
get panelUIPosition() {
|
||||
return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
|
||||
},
|
||||
};
|
||||
|
||||
var gZenVerticalTabsManager = {
|
||||
@@ -361,7 +366,7 @@ var gZenVerticalTabsManager = {
|
||||
marginBottom: isLastTab() ? [] : [transform, '0px'],
|
||||
},
|
||||
{
|
||||
duration: 0.2,
|
||||
duration: 0.12,
|
||||
easing: 'ease-out',
|
||||
}
|
||||
)
|
||||
@@ -371,9 +376,16 @@ var gZenVerticalTabsManager = {
|
||||
aTab.style.removeProperty('opacity');
|
||||
});
|
||||
gZenUIManager.motion
|
||||
.animate(aTab.querySelector('.tab-content'), {
|
||||
filter: ['blur(1px)', 'blur(0px)'],
|
||||
})
|
||||
.animate(
|
||||
aTab.querySelector('.tab-content'),
|
||||
{
|
||||
filter: ['blur(1px)', 'blur(0px)'],
|
||||
},
|
||||
{
|
||||
duration: 0.12,
|
||||
easing: 'ease-out',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
aTab.querySelector('.tab-stack').style.removeProperty('filter');
|
||||
});
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
|
||||
index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644
|
||||
index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..2fd19f3b43db4bdd99e65fecd1481f80d4541a7a 100644
|
||||
--- a/browser/base/content/browser-box.inc.xhtml
|
||||
+++ b/browser/base/content/browser-box.inc.xhtml
|
||||
@@ -22,7 +22,14 @@
|
||||
@@ -23,7 +23,14 @@
|
||||
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
|
||||
</vbox>
|
||||
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100%" height="100%" fill="none"/>
|
||||
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
.note {
|
||||
fill: white;
|
||||
fill: currentColor;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
||||
@keyframes flyUpLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
@@ -41,7 +41,7 @@
|
||||
}*/
|
||||
]]></style>
|
||||
|
||||
|
||||
|
||||
<g class="note-group">
|
||||
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
|
||||
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
|
||||
@@ -51,7 +51,7 @@
|
||||
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
|
||||
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
|
||||
</g>
|
||||
|
||||
|
||||
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
|
||||
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
|
||||
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
|
||||
@@ -60,7 +60,7 @@
|
||||
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
|
||||
H512V90.785V2.152L133.703,45.86z"/>
|
||||
</g>
|
||||
|
||||
|
||||
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
|
||||
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
|
||||
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
|
||||
@@ -78,7 +78,7 @@
|
||||
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
|
||||
H512V90.785V2.152L133.703,45.86z"/>
|
||||
</g>
|
||||
|
||||
|
||||
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
|
||||
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
|
||||
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
|
||||
@@ -87,7 +87,7 @@
|
||||
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
|
||||
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
|
||||
</g>
|
||||
|
||||
|
||||
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
|
||||
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
|
||||
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
|
||||
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
@@ -5,30 +5,30 @@
|
||||
hidden="true">
|
||||
<toolbaritem>
|
||||
<vbox id="zen-media-main-vbox">
|
||||
<hbox id="zen-media-service-hbox" class="show-on-hover">
|
||||
<hbox id="zen-media-service-button">
|
||||
<image/>
|
||||
<vbox>
|
||||
<hbox id="zen-media-info-container" class="show-on-hover">
|
||||
<vbox id="zen-media-info-vbox">
|
||||
<label id="zen-media-title" fadein="true"/>
|
||||
<label id="zen-media-artist" fadein="true"/>
|
||||
</vbox>
|
||||
<hbox id="zen-media-buttons-hbox">
|
||||
<toolbarbutton id="zen-media-pip-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onMediaPip();" />
|
||||
<toolbarbutton id="zen-media-close-button"
|
||||
class="toolbarbutton-1"
|
||||
oncommand="gZenMediaController.onControllerClose();" />
|
||||
</hbox>
|
||||
</hbox>
|
||||
<hbox id="zen-media-service-title" fadein="true">
|
||||
<label class="service" />
|
||||
<label class="tld" />
|
||||
<hbox id="zen-media-progress-hbox" class="show-on-hover">
|
||||
<label id="zen-media-current-time">0:00</label>
|
||||
<html:input type="range" id="zen-media-progress-bar"
|
||||
value="0" min="0" max="100" step="0.1"
|
||||
oninput="gZenMediaController.onMediaSeekDrag(event);"
|
||||
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
|
||||
<label id="zen-media-duration">0:00</label>
|
||||
</hbox>
|
||||
</hbox>
|
||||
|
||||
<vbox id="zen-media-info-vbox" class="show-on-hover">
|
||||
<label id="zen-media-title" fadein="true"/>
|
||||
<label id="zen-media-artist" fadein="true"/>
|
||||
</vbox>
|
||||
|
||||
<hbox id="zen-media-progress-hbox" class="show-on-hover">
|
||||
<label id="zen-media-current-time">0:00</label>
|
||||
<html:input type="range" id="zen-media-progress-bar"
|
||||
value="0" min="0" max="100" step="0.1"
|
||||
oninput="gZenMediaController.onMediaSeekDrag(event);"
|
||||
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
|
||||
<label id="zen-media-duration">0:00</label>
|
||||
</hbox>
|
||||
|
||||
<hbox id="zen-media-controls-hbox">
|
||||
<toolbarbutton id="zen-media-focus-button"
|
||||
class="toolbarbutton-1"
|
||||
|
||||
@@ -290,3 +290,23 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-back-and-forth-text {
|
||||
0%,
|
||||
10% {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
45%,
|
||||
65% {
|
||||
transform: translateX(calc(-100% - 5px));
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
90%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
#zen-main-app-wrapper {
|
||||
background: transparent;
|
||||
background: var(--zen-themed-toolbar-bg-transparent);
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
|
||||
@@ -16,10 +16,12 @@
|
||||
#zen-tabbox-wrapper {
|
||||
/* Remove extra 1px of margine we have to add to the tabbox */
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
@@ -92,7 +94,7 @@
|
||||
|
||||
& .browserSidebarContainer {
|
||||
margin-left: 0 !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -278,6 +278,10 @@
|
||||
|
||||
&[side='right'] {
|
||||
right: 0;
|
||||
|
||||
&[has-split-view='true'] {
|
||||
right: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
||||
@@ -54,6 +54,10 @@
|
||||
|
||||
& label {
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
& image {
|
||||
@@ -78,7 +82,7 @@
|
||||
color: white;
|
||||
fill: white;
|
||||
& label {
|
||||
max-width: 100px;
|
||||
max-width: 4rem;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
#PanelUI-zen-gradient-generator {
|
||||
--panel-width: 300px;
|
||||
--panel-width: 320px;
|
||||
--panel-padding: 10px;
|
||||
min-width: var(--panel-width);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#zen-media-controls-toolbar {
|
||||
--progress-height: 5px;
|
||||
--progress-height: 4px;
|
||||
--button-spacing: 2px;
|
||||
|
||||
display: flex;
|
||||
@@ -13,6 +13,23 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
#zen-media-buttons-hbox {
|
||||
align-items: start;
|
||||
margin-top: -4px;
|
||||
--toolbarbutton-outer-padding: 2px;
|
||||
}
|
||||
|
||||
&:not([can-pip]) {
|
||||
#zen-media-info-vbox {
|
||||
width: calc(100% - 26px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#zen-media-pip-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-prev-button,
|
||||
#zen-media-play-pause-button,
|
||||
#zen-media-next-button {
|
||||
@@ -50,42 +67,49 @@
|
||||
&::-moz-range-thumb {
|
||||
background: var(--zen-primary-color);
|
||||
border: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: calc(var(--progress-height) * 2);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& #zen-media-main-vbox {
|
||||
transition-delay: 0s;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.show-on-hover {
|
||||
max-height: 50px;
|
||||
padding: 2px 6px;
|
||||
padding: 5px;
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) !important;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
&.playing:not([muted]) #zen-media-focus-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1;
|
||||
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
& #zen-media-focus-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1;
|
||||
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
|
||||
top: -70%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.8s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#zen-media-focus-button {
|
||||
@@ -93,47 +117,44 @@
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
@container (max-width: 185px) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
margin-right: -10%;
|
||||
transform: translateX(-20px);
|
||||
transition: margin 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
@container (min-width: 185px) {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
& image {
|
||||
&:-moz-broken {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
|
||||
background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toolbaritem {
|
||||
& > 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;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 4px;
|
||||
padding: 4px 6px;
|
||||
border-radius: var(--border-radius-medium);
|
||||
background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !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 {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
transform: translateY(1rem);
|
||||
padding: 0 6px;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
max-height 0.1s ease-in-out,
|
||||
opacity 0.1s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
padding 0.15s ease-in-out;
|
||||
max-height 0.2s ease,
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
padding 0.2s ease;
|
||||
}
|
||||
|
||||
#zen-media-current-time,
|
||||
@@ -142,6 +163,7 @@
|
||||
font-size: x-small;
|
||||
opacity: 0.7;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,28 +181,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-service-title,
|
||||
#zen-media-title,
|
||||
#zen-media-artist {
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#zen-media-service-title {
|
||||
align-self: center;
|
||||
font-size: math;
|
||||
margin-left: 6px;
|
||||
|
||||
& label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .tld {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-title,
|
||||
#zen-media-artist {
|
||||
align-self: start;
|
||||
@@ -188,48 +188,73 @@
|
||||
|
||||
#zen-media-artist {
|
||||
opacity: 0.7;
|
||||
font-weight: 500;
|
||||
font-size: smaller;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-title {
|
||||
height: 16px;
|
||||
font-size: math;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#zen-media-main-vbox,
|
||||
#zen-media-service-hbox,
|
||||
#zen-media-info-vbox,
|
||||
#zen-media-progress-hbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#zen-media-service-hbox {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
#zen-media-info-vbox {
|
||||
#zen-media-controls-toolbar:not([media-position-hidden='true']) & {
|
||||
transition-delay: 0.01s !important;
|
||||
}
|
||||
overflow-x: hidden;
|
||||
overflow-x: visible;
|
||||
white-space: nowrap;
|
||||
/* Overflow inner box shadow from the left to simulate overflow */
|
||||
mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
|
||||
min-width: 1px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.6em;
|
||||
background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
height: calc(100% - 6px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
& label {
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
min-height: 16px;
|
||||
margin-left: 0;
|
||||
font-weight: 500;
|
||||
position: relative; /* For the animation */
|
||||
|
||||
&[overflow] {
|
||||
animation: zen-back-and-forth-text 10s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-main-vbox {
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
transition: gap 0.1s ease-out;
|
||||
transition-delay: 0.1s;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
#zen-media-progress-hbox {
|
||||
flex-grow: 1;
|
||||
height: 1.1rem;
|
||||
align-items: center;
|
||||
padding-top: 0px !important;
|
||||
|
||||
#zen-media-controls-toolbar[media-position-hidden='true'] & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-media-controls-hbox {
|
||||
@@ -239,13 +264,17 @@
|
||||
--toolbarbutton-outer-padding: 0;
|
||||
}
|
||||
|
||||
#zen-media-service-button {
|
||||
align-items: center;
|
||||
#zen-media-info-container {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
& image {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
#zen-media-controls-toolbar[can-pip] {
|
||||
#zen-media-info-vbox {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#zen-media-pip-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -360,9 +360,14 @@ menuitem {
|
||||
& .zen-toast {
|
||||
padding: 0.9rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
background-color: var(--button-primary-bgcolor);
|
||||
background: linear-gradient(
|
||||
170deg,
|
||||
var(--zen-primary-color) -40%,
|
||||
color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
|
||||
);
|
||||
color: var(--button-primary-color);
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
gap: 5px;
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ew-resize;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
|
||||
&:is(.zen-split-view-splitter[orient='vertical']) {
|
||||
/* Bit of a hacky solution, but it works */
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
}
|
||||
|
||||
& #zen-sidebar-top-buttons {
|
||||
margin: var(--zen-element-separation) 0 calc(var(--zen-toolbox-padding) / 2) 0;
|
||||
margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
|
||||
}
|
||||
|
||||
& #PanelUI-menu-button {
|
||||
@@ -153,8 +153,6 @@
|
||||
min-width: var(--zen-toolbox-min-width);
|
||||
margin-top: 0 !important; /* Fix full screen mode */
|
||||
|
||||
padding-bottom: var(--zen-element-separation) !important;
|
||||
|
||||
border: none;
|
||||
order: 0 !important;
|
||||
|
||||
@@ -257,16 +255,31 @@
|
||||
}
|
||||
|
||||
& .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: 0.92;
|
||||
}
|
||||
|
||||
& .tab-icon-image {
|
||||
&:not([src]),
|
||||
&:-moz-broken {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
|
||||
background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
|
||||
}
|
||||
}
|
||||
|
||||
max-width: unset;
|
||||
padding: 0 !important;
|
||||
|
||||
@@ -456,18 +469,11 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - 10px) !important;
|
||||
}
|
||||
|
||||
& .zen-current-workspace-indicator-icon[no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
|
||||
& .zen-workspace-sidebar-icon[no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
@@ -756,14 +762,6 @@
|
||||
}
|
||||
& #zen-workspaces-button {
|
||||
flex-direction: column;
|
||||
&:not([as-button='true']) {
|
||||
& toolbarbutton {
|
||||
&[active='true']::after {
|
||||
bottom: 50% !important;
|
||||
transform: translateY(50%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1049,14 +1047,14 @@
|
||||
#zen-essentials-container {
|
||||
padding-bottom: var(--zen-toolbox-padding);
|
||||
overflow: hidden;
|
||||
gap: 3px;
|
||||
gap: calc(var(--zen-toolbox-padding) - 2px);
|
||||
}
|
||||
|
||||
#zen-essentials-container {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
opacity: 1;
|
||||
grid-template-columns: repeat(auto-fit, minmax(48px, auto));
|
||||
grid-template-columns: repeat(auto-fit, minmax(49px, auto));
|
||||
overflow: hidden;
|
||||
scrollbar-width: thin;
|
||||
display: grid;
|
||||
|
||||
@@ -155,16 +155,16 @@
|
||||
|
||||
--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;
|
||||
--zen-workspace-indicator-height: 48px;
|
||||
|
||||
@media (-moz-windows-mica) or (-moz-platform: macos) {
|
||||
background: transparent;
|
||||
--zen-themed-toolbar-bg-transparent: transparent;
|
||||
@media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
|
||||
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
|
||||
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,98 +17,83 @@
|
||||
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;
|
||||
appearance: unset !important;
|
||||
height: fit-content;
|
||||
gap: 3px;
|
||||
|
||||
container-type: inline-size;
|
||||
width: 100%;
|
||||
|
||||
& toolbarbutton {
|
||||
margin: 0;
|
||||
width: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
& .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%;
|
||||
}
|
||||
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
transition:
|
||||
filter 0.2s,
|
||||
opacity 0.2s,
|
||||
width 0.1s;
|
||||
|
||||
&[active='true'],
|
||||
&:hover {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--zen-toolbar-element-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&[overflow] {
|
||||
gap: 0 !important;
|
||||
|
||||
& 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'] {
|
||||
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;
|
||||
|
||||
:root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
|
||||
& .zen-workspace-sidebar-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .zen-workspace-sidebar-icon {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbarbutton-hover-background) !important;
|
||||
& toolbarbutton:not([active='true']),
|
||||
&:has(toolbarbutton:hover) toolbarbutton[active='true'] {
|
||||
&:not(:hover) {
|
||||
width: min(var(--zen-overflowed-workspace-button-width), 25px);
|
||||
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -133,13 +118,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;
|
||||
}
|
||||
@@ -150,8 +128,6 @@
|
||||
|
||||
& #zen-workspaces-button {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
@@ -457,7 +433,7 @@
|
||||
}
|
||||
|
||||
.zen-current-workspace-indicator {
|
||||
padding: 15px calc(4px + var(--tab-inline-padding));
|
||||
padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
max-height: var(--zen-workspace-indicator-height);
|
||||
@@ -475,11 +451,10 @@
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
z-index: -1;
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 10px);
|
||||
top: var(--zen-toolbox-padding);
|
||||
left: calc(var(--zen-toolbox-padding) / 2);
|
||||
width: calc(100% - var(--zen-toolbox-padding));
|
||||
height: calc(100% - var(--zen-toolbox-padding) * 2);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
Reference in New Issue
Block a user