mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-15 06:16:14 +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/common/ZenEmojis.mjs
|
||||
|
||||
src/zen/split-view/zen-decks.css
|
||||
src/zen/workspaces/zen-workspaces.css
|
||||
|
||||
*.inc
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
* 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-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)
|
||||
|
||||
|
||||
@@ -4,182 +4,6 @@
|
||||
* 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 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
|
||||
/** 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'] {
|
||||
display: flex;
|
||||
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