CaptaiNiveau/FirefoxSidebar
1
0
Fork 1
mirror of https://github.com/CaptaiNiveau/FirefoxSidebar.git synced 2024-11-22 14:52:49 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update treestyletabs.css

Browse source
This commit is contained in:
t. Macleod Sawyer 2021-03-02 23:00:52 -06:00 committed by GitHub
parent 6a8ca4e019
commit f400760860
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
firefox/treestyletabs.css
View file

@ -1,8 +1,11 @@
/* /*
Title: Edge-Like (Better) Tree Style Tabs Title: Edge-Like (Better) Tree Style Tabs
Description: This is a recreation (and better) version of my pseudo-popular Vivaldi vertical tab integration, for tree style tabs in firefox. Description: This is a recreation (and better) version of my pseudo-popular Vivaldi vertical tab integration, for tree style tabs in firefox. This is probably the best Tree Style Tabs interface out there.
Author: @Drannex42 (https://github.com/drannex42/linux-utils - https://macleodsawyer.com)
Notes: This works best with my custom userChrome.css file in the /firefox/ folder - Lots of very cool features built in.
*/ */
/* Hide .twisty and adjust margins so favicons have 7px on left. */ /* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty { .tab .twisty {
visibility: hidden; visibility: hidden;
@ -10,22 +13,21 @@
display: none; display: none;
} }
tab-item:hover {
background: var(--in-content-box-background-hover) !important;
opacity: 1;
}
/* Push tab labels slightly to the right so they're completely hidden in collapsed state */ /* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label { .tab .label {
font-size: 16px; font-size: 13px;
padding-left: 5px padding-left: 7.5px;
} }
.tab:not(:hover) > .closebox { .tab:not(:hover) > .closebox {
display: none; display: none;
} }
tab-item:hover {
background: var(--in-content-box-background-hover) !important;
opacity: 1;
}
.closebox:hover { .closebox:hover {
font-weight: 900; font-weight: 900;
} }
@ -43,6 +45,8 @@ tab-item:hover {
--svg-small-icon-size: var(--favicon-size); --svg-small-icon-size: var(--favicon-size);
/*! text-align: center; */ /*! text-align: center; */
margin-left: .5px; margin-left: .5px;
display: inline;
vertical-align: middle;
} }
tab-item { tab-item {
border: 1px solid transparent !important; border: 1px solid transparent !important;
@ -50,20 +54,19 @@ tab-item {
position: relative !important; position: relative !important;
font-size: 13px; font-size: 13px;
background: none !important; background: none !important;
overflow: visible !important;
text-align: center;
box-shadow: none !important; box-shadow: none !important;
border-radius: 5px; border-radius: 5px;
padding: 5px !important; padding: 5px !important;
margin: 7.5px 10px !Important; margin: 7.5px 10px !Important;
text-align: center; transition: 0 !Important;
text-align: left !important;
transition: width 0.1s !Important;
} }
.tab .label {
font-size: 13px !important; #tabbar-container{
}
#tabbar-container:not(:hover) {
/*! width: 50px; */ /*! width: 50px; */
/*! margin: 2px; */ /*! margin: 2px; */
transition: none;
} }
@ -83,13 +86,11 @@ tab-item:not(.faviconized) .contextual-identity-marker {
margin-top: -5px; margin-top: -5px;
} }
#tabbar:hover {
max-width: 100%; #tabbar tab-item {
}
#tabbar:not(:hover) tab-item {
width: 100%;
width: 30px;
text-align: center; text-align: center;
/*! width: 100%; */
overflow: hidden !Important;
} }
tab-item:not(:hover) { tab-item:not(:hover) {
} }
@ -121,35 +122,38 @@ tab-item.active {
border-radius: 5px; border-radius: 5px;
} }
#tabbar:hover [data-level="1"] { #tabbar [data-level] {
}
#tabbar [data-level="1"] {
margin-left: 20px !important; margin-left: 20px !important;
} }
#tabbar:hover [data-level="2"] { #tabbar [data-level="2"] {
margin-left: 30px !important; margin-left: 30px !important;
} }
#tabbar:hover [data-level="3"] { #tabbar [data-level="3"] {
margin-left: 40px !important; margin-left: 40px !important;
} }
#tabbar:hover [data-level="4"] { #tabbar [data-level="4"] {
margin-left: 50px !important; margin-left: 50px !important;
} }
#tabbar:hover [data-level="5"] { #tabbar [data-level="5"] {
margin-left: 60px !important; margin-left: 60px !important;
} }
#tabbar:hover [data-level="6"] { #tabbar [data-level="6"] {
margin-left: 70px !important; margin-left: 70px !important;
} }
#tabbar:hover [data-level="7"] { #tabbar [data-level="7"] {
margin-left: 80px !important; margin-left: 80px !important;
} }
#tabbar:hover [data-level="8"] { #tabbar [data-level="8"] {
margin-left: 90px !important; margin-left: 90px !important;
} }
@ -179,8 +183,8 @@ tab-item.active {
.newtab-button::after { .newtab-button::after {
content: "New Tab"; content: "New Tab";
font-size: 13px; font-size: 13px;
padding-left: 10px; padding-left: 12px;
margin-top: 0px; margin-top: -2px;
position: absolute; position: absolute;
opacity: 0.85; opacity: 0.85;
display: none; display: none;
@ -191,7 +195,7 @@ tab-item.active {
margin-top: 6px; margin-top: 6px;
} }
#tabbar-container:hover .newtab-button::after { #tabbar-container .newtab-button::after {
display: inline-block; display: inline-block;
} }
@ -203,3 +207,27 @@ tab-item.active {
.newtab-button::before { .newtab-button::before {
padding-left: 1.5px; padding-left: 1.5px;
} }
@media screen and (max-width: 51px) {
tab-item {
max-width: 30px !important;
}
#tabbar [data-level] {
margin-left: auto !important;
}
#tabbar {
max-width: 100%;
}
.tab > .closebox {
display: none;
}
#tabbar-container .newtab-button::after {
display: none;
}
}