mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine CSS styles for compact mode and glance view, improving layout and background colors

Browse Source
This commit is contained in:
mr. M
2025-02-04 19:59:24 +01:00
parent d9fc1e81cd
commit 365214d7f9
2 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -43,11 +43,9 @@
z-index: 10;
transition:
left 0.25s ease,
right 0.25s ease,
opacity 1.5s ease;
right 0.25s ease;
top: 0;
bottom: var(--zen-element-separation);
opacity: 0;
padding: 0 var(--zen-compact-float) !important;
:root[zen-single-toolbar='true'] & {
@@ -59,7 +57,7 @@
margin-left: 0 !important;
}
& #urlbar[open] {
& #urlbar[open]:not([zen-floating-urlbar='true']) {
top: 0 !important;
}
}
@@ -121,8 +119,8 @@
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
) {
*:is([panelopen='true'], [open='true'], #urlbar:not([zen-floating-urlbar='true']):focus-within):not(tab):not(.zen-compact-mode-ignore)
):not(:has(#urlbar[zen-floating-urlbar='true']:hover)) {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
@@ -230,7 +228,6 @@
transition:
left 0.3s var(--zen-compact-mode-func),
right 0.3s var(--zen-compact-mode-func);
opacity: 1;
left: -1px;
:root[zen-right-side='true'] & {

6
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -23,12 +23,12 @@
padding: 5px;
gap: 12px;
left: 3%;
left: 2%;
& toolbarbutton {
width: 32px;
height: 32px;
background: light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9));
background: light-dark(rgb(24, 24, 24), rgb(231, 231, 231));
transition: background 0.2s ease;
border-radius: 999px;
appearance: none;
@@ -36,7 +36,7 @@
opacity: 0;
&:hover {
background: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
}
& label {