mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-03-06 08:47:03 +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; z-index: 10;
transition: transition:
left 0.25s ease, left 0.25s ease,
right 0.25s ease, right 0.25s ease;
opacity 1.5s ease;
top: 0; top: 0;
bottom: var(--zen-element-separation); bottom: var(--zen-element-separation);
opacity: 0;
padding: 0 var(--zen-compact-float) !important; padding: 0 var(--zen-compact-float) !important;
:root[zen-single-toolbar='true'] & { :root[zen-single-toolbar='true'] & {
@@ -59,7 +57,7 @@
margin-left: 0 !important; margin-left: 0 !important;
} }
& #urlbar[open] { & #urlbar[open]:not([zen-floating-urlbar='true']) {
top: 0 !important; top: 0 !important;
} }
} }
@@ -121,8 +119,8 @@
#navigator-toolbox[movingtab], #navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has( #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']) { &:not([animate='true']) {
--zen-compact-mode-func: linear( --zen-compact-mode-func: linear(
0 0%, 0 0%,
@@ -230,7 +228,6 @@
transition: transition:
left 0.3s var(--zen-compact-mode-func), left 0.3s var(--zen-compact-mode-func),
right 0.3s var(--zen-compact-mode-func); right 0.3s var(--zen-compact-mode-func);
opacity: 1;
left: -1px; left: -1px;
:root[zen-right-side='true'] & { :root[zen-right-side='true'] & {

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

@@ -23,12 +23,12 @@
padding: 5px; padding: 5px;
gap: 12px; gap: 12px;
left: 3%; left: 2%;
& toolbarbutton { & toolbarbutton {
width: 32px; width: 32px;
height: 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; transition: background 0.2s ease;
border-radius: 999px; border-radius: 999px;
appearance: none; appearance: none;
@@ -36,7 +36,7 @@
opacity: 0; opacity: 0;
&:hover { &: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 { & label {