FirefoxSidebar/firefox/treestyletabs.css

252 lines
11 KiB
CSS
Raw Normal View History

/*
Title: Edge-Like (Better) Tree Style Tabs
2021-03-03 05:00:52 +00:00
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.
Version: 12020.03.06
*/
2021-03-03 05:00:52 +00:00
/* Hide .twisty and adjust margins so favicons have 7px on left. */
2021-02-28 09:00:10 +00:00
.tab .twisty {
visibility: hidden;
margin-left: -8px;
display: none;
}
/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
2021-03-03 05:00:52 +00:00
font-size: 13px;
padding-left: 7.5px;
2021-02-28 09:00:10 +00:00
}
.tab:not(:hover) > .closebox {
display: none;
}
2021-03-03 05:00:52 +00:00
tab-item:hover {
background: var(--in-content-box-background-hover) !important;
opacity: 1;
}
2021-02-28 09:00:10 +00:00
.closebox:hover {
font-weight: 900;
}
.tab, .tabs, body, #background {
2021-03-01 00:40:09 +00:00
/* #F5F6F7; */
background: transparent;
2021-02-28 09:00:10 +00:00
}
.favicon {
2021-02-28 10:20:18 +00:00
--favicon-size: 17px !important;
2021-02-28 09:00:10 +00:00
margin: 0;
padding: 0 !important;
--svg-small-icon-size: var(--favicon-size);
2021-02-28 10:20:18 +00:00
/*! text-align: center; */
margin-left: .5px;
2021-03-03 05:00:52 +00:00
display: inline;
vertical-align: middle;
2021-02-28 09:00:10 +00:00
}
tab-item {
border: 1px solid transparent !important;
height: auto !important;
position: relative !important;
font-size: 13px;
background: none !important;
box-shadow: none !important;
border-radius: 5px;
padding: 5px !important;
margin: 7.5px 10px !Important;
2021-03-03 05:00:52 +00:00
transition: 0 !Important;
text-align: left !important;
transition: width 0.1s !Important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar-container{
/*! width: 50px; */
2021-02-28 09:00:10 +00:00
/*! margin: 2px; */
2021-03-03 05:00:52 +00:00
transition: none;
2021-02-28 09:00:10 +00:00
}
tab-item:not(.faviconized) .contextual-identity-marker {
--contextual-identity-marker-margin: min(calc((var(--tab-current-size) - var(--favicon-size)) / 2), calc(var(--tab-current-size) * 0));
left: -11px !important;
--contextual-identity-marker-width: 3.5px;
z-index: 9999;
}
2021-02-28 09:00:10 +00:00
#all-tabs {
}
:root.left #tabbar {
box-shadow: none !important;
border: none !important;
margin-top: -5px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar tab-item {
2021-02-28 09:00:10 +00:00
text-align: center;
2021-03-03 05:00:52 +00:00
/*! width: 100%; */
overflow: hidden !Important;
2021-02-28 09:00:10 +00:00
}
tab-item:not(:hover) {
}
tab-item .label, tab-item .highlighter, tab-item .contextual-identity-marker, tab-item .extra-items-container, tab-item .counter {
/*! display: none; */
2021-02-28 10:20:18 +00:00
/*! margin: 0px !Important; */
2021-02-28 09:00:10 +00:00
}
tab-item.active {
background-color: var(--in-content-box-background) !important;
box-shadow: 0px 5px 10px var(--in-content-box-background-active) !important;
}
tab-item:not(.pinned).collapsed.collapsed-completely {
visibility: collapse;
display: none !important;
}
2021-02-28 09:00:10 +00:00
:root .tab .highlighter::before {
display: none;
}
.after-tabs button {
2021-03-01 00:40:09 +00:00
border: none;
box-shadow: none;
padding: 5px;
margin: 11px;
text-align: left;
background: none;
2021-02-28 09:00:10 +00:00
}
.after-tabs button:hover {
background: var(--in-content-box-background-hover) !important;
opacity: 1;
border-radius: 5px;
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level] {
}
#tabbar [data-level="1"] {
margin-left: 20px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="2"] {
margin-left: 30px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="3"] {
margin-left: 40px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="4"] {
margin-left: 50px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="5"] {
margin-left: 60px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="6"] {
margin-left: 70px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="7"] {
margin-left: 80px !important;
2021-02-28 09:00:10 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar [data-level="8"] {
margin-left: 90px !important;
2021-02-28 09:00:10 +00:00
}
2021-02-28 09:56:26 +00:00
#tabbar::before {
content: " ";
height: 24px;
2021-02-28 09:56:26 +00:00
width: 100%;
background: url('data:image/png;base64,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
background-size: contain;
background-repeat: no-repeat;
margin-top: 16px;
margin-bottom: 3px;
text-align: right;
margin-right: -12.5px !important;
2021-02-28 09:56:26 +00:00
opacity: 0.65;
width: 100%;
display: none;
2021-02-28 09:56:26 +00:00
}
2021-03-01 00:40:09 +00:00
2021-03-01 00:40:09 +00:00
.newtab-button {
/*! text-align: left; */
/*! margin: 8px !important; */
}
.newtab-button::after {
content: "New Tab";
font-size: 13px;
2021-03-03 05:00:52 +00:00
padding-left: 12px;
margin-top: -2px;
2021-03-01 00:40:09 +00:00
position: absolute;
opacity: 0.85;
display: none;
}
.after-tabs {
border-top: 1px solid var(--in-content-border-color);
margin-top: 6px;
2021-03-01 00:40:09 +00:00
}
2021-03-03 05:00:52 +00:00
#tabbar-container .newtab-button::after {
2021-03-01 00:40:09 +00:00
display: inline-block;
}
#tabbar-container {
background: var(--theme-colors-toolbar);
}
.newtab-button::before {
padding-left: 1.5px;
}
2021-03-03 05:00:52 +00:00
tab-item.pinned {
--pinned-position-top: 0px !important;
--pinned-position-bottom: none !Important;
top: auto !Important;
bottom: auto !Important;
margin: none !Important;
left: initial !important;
right: initial !Important;
}
2021-03-03 05:00:52 +00:00
@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;
}
}