mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-15 14:26:12 +00:00
fix: Fixed split tab icons being misaligned, b=bug #10501, p=#10556
This commit is contained in:
mr. m
@@ -33,6 +33,7 @@ src/zen/common/styles/zen-theme.css
|
|||||||
src/zen/compact-mode/zen-compact-mode.css
|
src/zen/compact-mode/zen-compact-mode.css
|
||||||
src/zen/common/ZenEmojis.mjs
|
src/zen/common/ZenEmojis.mjs
|
||||||
|
|
||||||
|
src/zen/split-view/zen-decks.css
|
||||||
src/zen/workspaces/zen-workspaces.css
|
src/zen/workspaces/zen-workspaces.css
|
||||||
|
|
||||||
*.inc
|
*.inc
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
* content/browser/zen-styles/zen-compact-mode.css (../../zen/compact-mode/zen-compact-mode.css)
|
* content/browser/zen-styles/zen-compact-mode.css (../../zen/compact-mode/zen-compact-mode.css)
|
||||||
|
|
||||||
content/browser/zen-components/ZenViewSplitter.mjs (../../zen/split-view/ZenViewSplitter.mjs)
|
content/browser/zen-components/ZenViewSplitter.mjs (../../zen/split-view/ZenViewSplitter.mjs)
|
||||||
content/browser/zen-styles/zen-decks.css (../../zen/split-view/zen-decks.css)
|
* content/browser/zen-styles/zen-decks.css (../../zen/split-view/zen-decks.css)
|
||||||
|
|
||||||
content/browser/zen-components/ZenMods.mjs (../../zen/mods/ZenMods.mjs)
|
content/browser/zen-components/ZenMods.mjs (../../zen/mods/ZenMods.mjs)
|
||||||
|
|
||||||
|
|||||||
@@ -4,182 +4,6 @@
|
|||||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
tab-group[split-view-group] {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: var(--zen-tabbox-element-indent-transition);
|
|
||||||
|
|
||||||
#tabbrowser-tabs[movingtab] & {
|
|
||||||
transition: var(--tab-dragover-transition), var(--zen-tabbox-element-indent-transition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
--zen-split-view-active-tab-bg: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--zen-toolbar-element-bg),
|
|
||||||
transparent 40%
|
|
||||||
);
|
|
||||||
|
|
||||||
--tab-collapsed-background-width: none;
|
|
||||||
|
|
||||||
:root[zen-sidebar-expanded='true'] & {
|
|
||||||
margin-inline-start: var(--zen-folder-indent) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tab-group-label {
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tab-group-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
border-radius: var(--border-radius-medium);
|
|
||||||
padding: 0 2px;
|
|
||||||
margin-inline: var(--tab-block-margin);
|
|
||||||
margin-block: var(--tab-block-margin);
|
|
||||||
min-height: var(--tab-min-height);
|
|
||||||
outline: var(--tab-outline);
|
|
||||||
outline-offset: var(--tab-outline-offset);
|
|
||||||
outline-color: var(--tab-selected-outline-color);
|
|
||||||
transition: scale 0.1s ease;
|
|
||||||
margin-inline: 2px !important;
|
|
||||||
|
|
||||||
:root:not([zen-sidebar-expanded='true']) & {
|
|
||||||
padding: 0;
|
|
||||||
--tab-collapsed-width: 38px;
|
|
||||||
overflow: clip;
|
|
||||||
--tab-min-width: 34px;
|
|
||||||
outline: 2px solid var(--zen-colors-border-contrast);
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .tabbrowser-tab {
|
|
||||||
--tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
|
|
||||||
--tab-hover-background-color: transparent;
|
|
||||||
--tab-selected-shadow: none;
|
|
||||||
--border-radius-medium: var(--tab-border-radius);
|
|
||||||
--zen-active-tab-scale: 1;
|
|
||||||
--zen-folder-indent: 0 !important;
|
|
||||||
|
|
||||||
:root[zen-sidebar-expanded='true'] & {
|
|
||||||
--tab-min-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
container-type: inline-size;
|
|
||||||
container-name: browser-tab;
|
|
||||||
|
|
||||||
flex: 1 !important;
|
|
||||||
padding-inline: 2px !important;
|
|
||||||
overflow: clip;
|
|
||||||
|
|
||||||
&:not(:last-child)::after {
|
|
||||||
content: '';
|
|
||||||
width: 1px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:not([zen-sidebar-expanded='true']) &:not(:last-child)::after {
|
|
||||||
width: 16px;
|
|
||||||
height: 1px;
|
|
||||||
top: auto;
|
|
||||||
bottom: 0;
|
|
||||||
right: 50%;
|
|
||||||
transform: translateX(50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tab-content {
|
|
||||||
min-width: 0;
|
|
||||||
:root[zen-sidebar-expanded='true'] & {
|
|
||||||
justify-content: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(> tab:is([visuallyselected], [multiselected])) {
|
|
||||||
background-color: var(--tab-selected-bgcolor);
|
|
||||||
box-shadow: var(--tab-selected-shadow);
|
|
||||||
|
|
||||||
& > .tabbrowser-tab {
|
|
||||||
--tab-hover-background-color: var(--zen-split-view-active-tab-bg);
|
|
||||||
& .tab-background {
|
|
||||||
background-color: var(--zen-split-view-active-tab-bg) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
scale: var(--zen-active-tab-scale);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--zen-toolbar-element-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .tab-close-button,
|
|
||||||
& .tab-reset-button {
|
|
||||||
margin-inline-end: -3px !important;
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@container browser-tab (min-width: 70px) {
|
|
||||||
:root[zen-sidebar-expanded='true'] &:hover > .tabbrowser-tab:not([pinned]) .tab-close-button {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
#tabbrowser-tabs[movingtab] & {
|
|
||||||
transition: var(--tab-dragover-transition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:not([zen-sidebar-expanded='true']) {
|
|
||||||
tab-group .tab-group-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
tab-group[split-view-group] {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tab-group[split-view-group] .tabbrowser-tab {
|
|
||||||
width: 100%;
|
|
||||||
max-width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
tab-group[split-view-group] .tab-group-label-container {
|
|
||||||
position: absolute;
|
|
||||||
width: -moz-available;
|
|
||||||
height: 36px;
|
|
||||||
visibility: hidden;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 2px 0 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
tab-group[split-view-group] .tab-close-button {
|
|
||||||
display: block;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
tab-group[split-view-group] .tab-group-line {
|
|
||||||
display: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-group-line {
|
.tab-group-line {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,8 @@
|
|||||||
|
|
||||||
/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
|
/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
|
||||||
|
|
||||||
|
%include zen-split-group.inc.css
|
||||||
|
|
||||||
#tabbrowser-tabpanels[zen-split-view='true'] {
|
#tabbrowser-tabpanels[zen-split-view='true'] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
181
src/zen/split-view/zen-split-group.inc.css
Normal file
181
src/zen/split-view/zen-split-group.inc.css
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
tab-group[split-view-group] {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
transition: var(--zen-tabbox-element-indent-transition);
|
||||||
|
|
||||||
|
#tabbrowser-tabs[movingtab] & {
|
||||||
|
transition: var(--tab-dragover-transition), var(--zen-tabbox-element-indent-transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
--zen-split-view-active-tab-bg: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--zen-toolbar-element-bg),
|
||||||
|
transparent 40%
|
||||||
|
);
|
||||||
|
|
||||||
|
--tab-collapsed-background-width: none;
|
||||||
|
|
||||||
|
:root[zen-sidebar-expanded='true'] & {
|
||||||
|
margin-inline-start: var(--zen-folder-indent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-group-label {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-group-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
border-radius: var(--border-radius-medium);
|
||||||
|
padding: 0 2px;
|
||||||
|
margin-inline: var(--tab-block-margin);
|
||||||
|
margin-block: var(--tab-block-margin);
|
||||||
|
min-height: var(--tab-min-height);
|
||||||
|
outline: var(--tab-outline);
|
||||||
|
outline-offset: var(--tab-outline-offset);
|
||||||
|
outline-color: var(--tab-selected-outline-color);
|
||||||
|
transition: scale 0.1s ease;
|
||||||
|
margin-inline: 2px !important;
|
||||||
|
|
||||||
|
:root:not([zen-sidebar-expanded='true']) & {
|
||||||
|
padding: 0;
|
||||||
|
--tab-collapsed-width: 38px;
|
||||||
|
overflow: clip;
|
||||||
|
--tab-min-width: 34px;
|
||||||
|
outline: 2px solid var(--zen-colors-border-contrast);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .tabbrowser-tab {
|
||||||
|
--tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
|
||||||
|
--tab-hover-background-color: transparent;
|
||||||
|
--tab-selected-shadow: none;
|
||||||
|
--border-radius-medium: var(--tab-border-radius);
|
||||||
|
--zen-active-tab-scale: 1;
|
||||||
|
--zen-folder-indent: 0 !important;
|
||||||
|
|
||||||
|
:root[zen-sidebar-expanded='true'] & {
|
||||||
|
--tab-min-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
container-type: inline-size;
|
||||||
|
container-name: browser-tab;
|
||||||
|
|
||||||
|
flex: 1 !important;
|
||||||
|
padding-inline: 2px !important;
|
||||||
|
overflow: clip;
|
||||||
|
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
content: '';
|
||||||
|
width: 1px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([zen-sidebar-expanded='true']) &:not(:last-child)::after {
|
||||||
|
width: 16px;
|
||||||
|
height: 1px;
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-content {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0 4px !important;
|
||||||
|
:root[zen-sidebar-expanded='true'] & {
|
||||||
|
justify-content: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(> tab:is([visuallyselected], [multiselected])) {
|
||||||
|
background-color: var(--tab-selected-bgcolor);
|
||||||
|
box-shadow: var(--tab-selected-shadow);
|
||||||
|
|
||||||
|
& > .tabbrowser-tab {
|
||||||
|
--tab-hover-background-color: var(--zen-split-view-active-tab-bg);
|
||||||
|
& .tab-background {
|
||||||
|
background-color: var(--zen-split-view-active-tab-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
scale: var(--zen-active-tab-scale);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--zen-toolbar-element-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-close-button,
|
||||||
|
& .tab-reset-button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@container browser-tab (min-width: 70px) {
|
||||||
|
:root[zen-sidebar-expanded='true'] &:hover > .tabbrowser-tab:not([pinned]) .tab-close-button {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
#tabbrowser-tabs[movingtab] & {
|
||||||
|
transition: var(--tab-dragover-transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([zen-sidebar-expanded='true']) {
|
||||||
|
tab-group .tab-group-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab-group[split-view-group] {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tab-group[split-view-group] .tabbrowser-tab {
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab-group[split-view-group] .tab-group-label-container {
|
||||||
|
position: absolute;
|
||||||
|
width: -moz-available;
|
||||||
|
height: 36px;
|
||||||
|
visibility: hidden;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 2px 0 0 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab-group[split-view-group] .tab-close-button {
|
||||||
|
display: block;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab-group[split-view-group] .tab-group-line {
|
||||||
|
display: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user