Implement libadwaita 1.2 tabs
This commit is contained in:
parent
53e54cc12e
commit
ffe9abf335
|
@ -66,14 +66,13 @@
|
||||||
--gnome-switch-active-slider-background: #ffffff;
|
--gnome-switch-active-slider-background: #ffffff;
|
||||||
|
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
--gnome-tabbar-tab-background: #262626;
|
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
||||||
--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
|
--gnome-tabbar-tab-hover-background: #3f3f3f; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-hover-background: #2D2D2D;
|
--gnome-tabbar-tab-active-background: #444444; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background: #303030;
|
--gnome-tabbar-tab-active-background-contrast: #FAFAFA;
|
||||||
--gnome-tabbar-tab-active-background-contrast: #4F4F4F;
|
--gnome-tabbar-tab-active-hover-background: #4b4b4b; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-hover-background: #363636;
|
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
|
||||||
--gnome-inactive-tabbar-tab-background: #1C1C1C;
|
--gnome-inactive-tabbar-tab-active-background: #2e2e2e; /* Hardcoded color */
|
||||||
--gnome-inactive-tabbar-tab-active-background: #242424;
|
|
||||||
--gnome-tab-button-background: rgba(0, 0, 0, .5);
|
--gnome-tab-button-background: rgba(0, 0, 0, .5);
|
||||||
--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
|
--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
|
||||||
--gnome-tabbar-tab-identity-base-opacity: 0;
|
--gnome-tabbar-tab-identity-base-opacity: 0;
|
||||||
|
|
|
@ -66,14 +66,13 @@
|
||||||
--gnome-switch-active-slider-background: #ffffff;
|
--gnome-switch-active-slider-background: #ffffff;
|
||||||
|
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
--gnome-tabbar-tab-background: #E1E1E1;
|
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
||||||
--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
|
--gnome-tabbar-tab-hover-background: #dedede; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-hover-background: #DCDCDC;
|
--gnome-tabbar-tab-active-background: #d9d9d9; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background: #EBEBEB;
|
--gnome-tabbar-tab-active-background-contrast: #4F4F4F;
|
||||||
--gnome-tabbar-tab-active-background-contrast: #FAFAFA;
|
--gnome-tabbar-tab-active-hover-background: #d2d2d2; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-hover-background: #E5E5E5;
|
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
|
||||||
--gnome-inactive-tabbar-tab-background: #EFEFEF;
|
--gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */
|
||||||
--gnome-inactive-tabbar-tab-active-background: #FAFAFA;
|
|
||||||
--gnome-tab-button-background: rgba(255, 255, 255, .5);
|
--gnome-tab-button-background: rgba(255, 255, 255, .5);
|
||||||
--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
|
--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
|
||||||
--gnome-tabbar-tab-identity-base-opacity: .1;
|
--gnome-tabbar-tab-identity-base-opacity: .1;
|
||||||
|
|
|
@ -6,10 +6,21 @@
|
||||||
--space-above-tabbar: 0 !important;
|
--space-above-tabbar: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix tabs bar icon sizes */
|
|
||||||
#TabsToolbar {
|
#TabsToolbar {
|
||||||
--toolbarbutton-inner-padding: var(--toolbarbutton-inner-padding) !important;
|
--toolbarbutton-inner-padding: var(--toolbarbutton-inner-padding) !important;
|
||||||
|
background-color: var(--gnome-tabbar-background) !important;
|
||||||
border-bottom: 0 !important;
|
border-bottom: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TabsToolbar .titlebar-buttonbox-container:not(#hack) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TabsToolbar:-moz-window-inactive {
|
||||||
|
background-color: var(--gnome-inactive-tabbar-background) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tabs bar height */
|
/* Tabs bar height */
|
||||||
|
@ -17,39 +28,64 @@
|
||||||
#tabbrowser-tabs arrowscrollbox {
|
#tabbrowser-tabs arrowscrollbox {
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
min-height: auto !important;
|
min-height: auto !important;
|
||||||
}
|
--tab-min-height: 34px !important;
|
||||||
|
|
||||||
#TabsToolbar {
|
|
||||||
background-color: var(--gnome-tabbar-tab-background) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#TabsToolbar:-moz-window-inactive {
|
|
||||||
background-color: var(--gnome-inactive-tabbar-tab-background) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tab > stack {
|
tab > stack {
|
||||||
height: 38px !important;
|
height: 34px !important;
|
||||||
min-height: 38px !important;
|
min-height: 34px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs scroll fade */
|
||||||
|
#TabsToolbar {
|
||||||
|
--gnome-tabbar-fade-background: var(--gnome-tabbar-background);
|
||||||
|
}
|
||||||
|
#TabsToolbar:-moz-window-inactive {
|
||||||
|
--gnome-tabbar-fade-background: var(--gnome-inactive-tabbar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollbutton-up:not([disabled])::after,
|
||||||
|
#scrollbutton-down:not([disabled])::after {
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollbutton-up:not([disabled])::after {
|
||||||
|
background: linear-gradient(to right, var(--gnome-tabbar-fade-background) 25px, transparent);
|
||||||
|
|
||||||
|
}
|
||||||
|
#scrollbutton-down:not([disabled])::after {
|
||||||
|
background: linear-gradient(to left, var(--gnome-tabbar-fade-background) 25px, transparent);
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
spacer[part=overflow-start-indicator], spacer[part=overflow-end-indicator] {
|
||||||
|
width: 0 !important;
|
||||||
|
border: 0 !important;
|
||||||
|
margin-inline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollbutton-up, #scrollbutton-down {
|
||||||
|
position: relative !important;
|
||||||
|
z-index: 5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove hover effects on tab bar buttons */
|
/* Remove hover effects on tab bar buttons */
|
||||||
#TabsToolbar {
|
#TabsToolbar {
|
||||||
--toolbarbutton-active-background: transparent !important;
|
--toolbarbutton-active-background: transparent !important;
|
||||||
--toolbarbutton-hover-background: transparent !important;
|
--toolbarbutton-hover-background: transparent !important;
|
||||||
padding: 0 3px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tabsbar buttons */
|
/* Tabsbar buttons */
|
||||||
#TabsToolbar .toolbarbutton-1:not(#hack) {
|
#TabsToolbar .toolbarbutton-1:not(#hack) {
|
||||||
border-right: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
border-radius: 6px !important;
|
||||||
border-bottom: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
margin: 5px 3px 6px !important;
|
||||||
border-radius: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 9px !important;
|
padding: 0 9px !important;
|
||||||
}
|
}
|
||||||
#tabbrowser-tabs[overflow=true] + .toolbarbutton-1:first-of-type {
|
|
||||||
border-left: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
|
||||||
}
|
|
||||||
#TabsToolbar .toolbarbutton-1:not([disabled]):not(:active):not([open]):hover {
|
#TabsToolbar .toolbarbutton-1:not([disabled]):not(:active):not([open]):hover {
|
||||||
background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
|
background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
|
||||||
}
|
}
|
||||||
|
@ -57,25 +93,19 @@ tab > stack {
|
||||||
background-color: var(--gnome-tabbar-tab-border-color) !important;
|
background-color: var(--gnome-tabbar-tab-border-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove shadow next to tab scroll buttons */
|
|
||||||
.arrowscrollbox-overflow-start-indicator,
|
|
||||||
.arrowscrollbox-overflow-end-indicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fake tabsbar border */
|
/* Fake tabsbar border */
|
||||||
#tabbrowser-arrowscrollbox::after {
|
#tabbrowser-arrowscrollbox::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 200%;
|
||||||
background: var(--gnome-toolbar-background);
|
background: var(--gnome-toolbar-background);
|
||||||
border-bottom: 1px solid var(--gnome-tabbar-tab-border-color);
|
border-bottom: 1px solid var(--gnome-toolbar-border-color);
|
||||||
height: 0;
|
height: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after {
|
#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after {
|
||||||
|
@ -83,39 +113,34 @@ tab > stack {
|
||||||
top: 38px;
|
top: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove tab separators */
|
/* Tab */
|
||||||
.tabbrowser-tab::after,
|
|
||||||
.tabbrowser-tab::before {
|
|
||||||
border-color: transparent !important;
|
|
||||||
border-image: none !important;
|
|
||||||
border-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Space between tabs */
|
|
||||||
.tabbrowser-tab:not([pinned=true]) {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
.tabbrowser-tab {
|
.tabbrowser-tab {
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
padding-inline: 0 !important;
|
padding: 5px 3px 6px !important;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
#TabsToolbar {
|
.tabbrowser-tab[first-visible-tab="true"]{
|
||||||
padding: 0 !important;
|
padding-left: 5px !important;
|
||||||
|
}
|
||||||
|
.tabbrowser-tab[last-visible-tab="true"] {
|
||||||
|
padding-right: 5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tabs borders */
|
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||||
.tabbrowser-tab {
|
margin-inline-start: 0 !important;
|
||||||
border-right: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
|
||||||
border-bottom: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
|
||||||
}
|
}
|
||||||
#TabsToolbar {
|
|
||||||
margin-right: -1px !important;
|
/* Tab separators */
|
||||||
|
.tabbrowser-tab:not([selected], :hover, [last-visible-tab="true"], [beforeselected-visible="true"], [beforehovered="true"])::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
border-left: 1px solid var(--gnome-toolbar-border-color) !important;
|
||||||
|
height: 26px;
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
}
|
}
|
||||||
#tabbrowser-tabs[overflow=true] .tabbrowser-tab[first-visible-unpinned-tab] {
|
.tabbrowser-tab::after {
|
||||||
border-left: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
right: -.5px;
|
||||||
}
|
|
||||||
#tabbrowser-tabs[movingtab=true] .tabbrowser-tab[selected=true] {
|
|
||||||
border-left: 1px solid var(--gnome-tabbar-tab-border-color) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab labels */
|
/* Tab labels */
|
||||||
|
@ -128,7 +153,7 @@ tab {
|
||||||
|
|
||||||
/* Reset tab background */
|
/* Reset tab background */
|
||||||
.tab-background {
|
.tab-background {
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin-block: 0 !important;
|
margin-block: 0 !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
|
@ -301,12 +326,13 @@ tab {
|
||||||
|
|
||||||
/* Close button overlay */
|
/* Close button overlay */
|
||||||
.tabbrowser-tab:not([pinned]) .tab-content::after, .tabbrowser-tab:not([pinned]) .tab-content::before {
|
.tabbrowser-tab:not([pinned]) .tab-content::after, .tabbrowser-tab:not([pinned]) .tab-content::before {
|
||||||
bottom: 1px;
|
border-radius: 0 6px 6px 0;
|
||||||
content: "";
|
content: "";
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
top: 0;
|
||||||
transition: all 0.2s ease-out;
|
transition: all 0.2s ease-out;
|
||||||
width: 55px;
|
width: 55px;
|
||||||
}
|
}
|
||||||
|
@ -341,14 +367,14 @@ tab {
|
||||||
|
|
||||||
/* Active tab */
|
/* Active tab */
|
||||||
.tab-background[selected=true] {
|
.tab-background[selected=true] {
|
||||||
background-color: var(--gnome-tabbar-tab-active-background) !important;
|
background: none !important;
|
||||||
background-image: none !important;
|
|
||||||
border: 0 !important;
|
|
||||||
border-image: none !important;
|
border-image: none !important;
|
||||||
}
|
}
|
||||||
.tab-background[selected=true]:-moz-window-inactive {
|
.tab-background[selected=true] {
|
||||||
|
background-color: var(--gnome-tabbar-tab-active-background) !important;
|
||||||
|
}
|
||||||
|
.tab-background[selected=true]:-moz-window-inactive {
|
||||||
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
|
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
|
||||||
border-bottom-color: var(--gnome-tabbar-tab-border-color) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab hover */
|
/* Tab hover */
|
||||||
|
@ -369,6 +395,7 @@ tab {
|
||||||
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
|
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
|
||||||
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
|
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
|
min-width: 150px !important;
|
||||||
}
|
}
|
||||||
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
|
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
|
||||||
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
|
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
|
||||||
|
|
Loading…
Reference in New Issue