jarno
/
firefox-gnome-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement libadwaita 1.2 tabs

This commit is contained in:
Rafael Mardojai CM 2022-10-07 12:36:21 -05:00 committed by Rafael Mardojai CM
parent 53e54cc12e
commit ffe9abf335
3 changed files with 102 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
theme/colors/dark.css
View File

@ -66,14 +66,13 @@
--gnome-switch-active-slider-background: #ffffff;
/* Tabs */
--gnome-tabbar-tab-background: #262626;
--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
--gnome-tabbar-tab-hover-background: #2D2D2D;
--gnome-tabbar-tab-active-background: #303030;
--gnome-tabbar-tab-active-background-contrast: #4F4F4F;
--gnome-tabbar-tab-active-hover-background: #363636;
--gnome-inactive-tabbar-tab-background: #1C1C1C;
--gnome-inactive-tabbar-tab-active-background: #242424;
--gnome-tabbar-background: var(--gnome-headerbar-background);
--gnome-tabbar-tab-hover-background: #3f3f3f; /* Hardcoded color */
--gnome-tabbar-tab-active-background: #444444; /* Hardcoded color */
--gnome-tabbar-tab-active-background-contrast: #FAFAFA;
--gnome-tabbar-tab-active-hover-background: #4b4b4b; /* Hardcoded color */
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
--gnome-inactive-tabbar-tab-active-background: #2e2e2e; /* Hardcoded color */
--gnome-tab-button-background: rgba(0, 0, 0, .5);
--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
--gnome-tabbar-tab-identity-base-opacity: 0;

15
theme/colors/light.css
View File

@ -66,14 +66,13 @@
--gnome-switch-active-slider-background: #ffffff;
/* Tabs */
--gnome-tabbar-tab-background: #E1E1E1;
--gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color);
--gnome-tabbar-tab-hover-background: #DCDCDC;
--gnome-tabbar-tab-active-background: #EBEBEB;
--gnome-tabbar-tab-active-background-contrast: #FAFAFA;
--gnome-tabbar-tab-active-hover-background: #E5E5E5;
--gnome-inactive-tabbar-tab-background: #EFEFEF;
--gnome-inactive-tabbar-tab-active-background: #FAFAFA;
--gnome-tabbar-background: var(--gnome-headerbar-background);
--gnome-tabbar-tab-hover-background: #dedede; /* Hardcoded color */
--gnome-tabbar-tab-active-background: #d9d9d9; /* Hardcoded color */
--gnome-tabbar-tab-active-background-contrast: #4F4F4F;
--gnome-tabbar-tab-active-hover-background: #d2d2d2; /* Hardcoded color */
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
--gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */
--gnome-tab-button-background: rgba(255, 255, 255, .5);
--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
--gnome-tabbar-tab-identity-base-opacity: .1;

149
theme/parts/tabsbar.css
View File

@ -6,10 +6,21 @@
--space-above-tabbar: 0 !important;
}
/* Fix tabs bar icon sizes */
#TabsToolbar {
--toolbarbutton-inner-padding: var(--toolbarbutton-inner-padding) !important;
background-color: var(--gnome-tabbar-background) !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 */
@ -17,39 +28,64 @@
#tabbrowser-tabs arrowscrollbox {
height: auto !important;
min-height: auto !important;
}
#TabsToolbar {
background-color: var(--gnome-tabbar-tab-background) !important;
}
#TabsToolbar:-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-background) !important;
--tab-min-height: 34px !important;
}
tab > stack {
height: 38px !important;
min-height: 38px !important;
height: 34px !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 */
#TabsToolbar {
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
padding: 0 3px !important;
}
/* Tabsbar buttons */
#TabsToolbar .toolbarbutton-1:not(#hack) {
border-right: 1px solid var(--gnome-tabbar-tab-border-color) !important;
border-bottom: 1px solid var(--gnome-tabbar-tab-border-color) !important;
border-radius: 0 !important;
margin: 0 !important;
border-radius: 6px !important;
margin: 5px 3px 6px !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 {
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;
}
/* Remove shadow next to tab scroll buttons */
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator {
display: none;
}
/* Fake tabsbar border */
#tabbrowser-arrowscrollbox::after {
content: "";
display: block;
width: 100%;
width: 200%;
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;
min-height: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
z-index: 6;
}
#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after {
@ -83,39 +113,34 @@ tab > stack {
top: 38px;
}
/* Remove tab separators */
.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;
}
/* Tab */
.tabbrowser-tab {
border: 0 !important;
padding-inline: 0 !important;
padding: 5px 3px 6px !important;
position: relative;
}
#TabsToolbar {
padding: 0 !important;
.tabbrowser-tab[first-visible-tab="true"]{
padding-left: 5px !important;
}
.tabbrowser-tab[last-visible-tab="true"] {
padding-right: 5px !important;
}
/* Tabs borders */
.tabbrowser-tab {
border-right: 1px solid var(--gnome-tabbar-tab-border-color) !important;
border-bottom: 1px solid var(--gnome-tabbar-tab-border-color) !important;
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !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] {
border-left: 1px solid var(--gnome-tabbar-tab-border-color) !important;
}
#tabbrowser-tabs[movingtab=true] .tabbrowser-tab[selected=true] {
border-left: 1px solid var(--gnome-tabbar-tab-border-color) !important;
.tabbrowser-tab::after {
right: -.5px;
}
/* Tab labels */
@ -128,7 +153,7 @@ tab {
/* Reset tab background */
.tab-background {
border-radius: 0 !important;
border-radius: 6px !important;
box-shadow: none !important;
margin-block: 0 !important;
border: 0 !important;
@ -301,12 +326,13 @@ tab {
/* Close button overlay */
.tabbrowser-tab:not([pinned]) .tab-content::after, .tabbrowser-tab:not([pinned]) .tab-content::before {
bottom: 1px;
border-radius: 0 6px 6px 0;
content: "";
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s ease-out;
width: 55px;
}
@ -341,14 +367,14 @@ tab {
/* Active tab */
.tab-background[selected=true] {
background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important;
border: 0 !important;
background: 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;
border-bottom-color: var(--gnome-tabbar-tab-border-color) !important;
}
/* Tab hover */
@ -369,6 +395,7 @@ tab {
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 100% !important;
min-width: 150px !important;
}
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {