Extensions: Add support for Tab Center Reborn (#455)
This commit is contained in:
parent
bcddc5dd0e
commit
9971946acb
|
@ -213,6 +213,12 @@ Optional features can be enabled by creating new `boolean` preferences in `about
|
|||
|
||||
> **Note:** This feature is BUGGED. It can activate the button with unpleasant behavior.
|
||||
|
||||
- **Tab center reborn support** `gnomeTheme.extensions.tabCenterReborn`
|
||||
|
||||
Enable the vertical tab trough the extension : [Tab Center Reborn](https://addons.mozilla.org/en-US/firefox/addon/tabcenter-reborn/).
|
||||
|
||||
> **Note:** You also need to copy the contents of the file `configuration/extensions/tab-center-reborn.css` into the settings page of Tabcenter-reborn..
|
||||
|
||||
## Known bugs
|
||||
|
||||
### CSD have sharp corners
|
||||
|
|
|
@ -0,0 +1,264 @@
|
|||
/* CSS to add in tab center reborn Settings pages */
|
||||
|
||||
:root {
|
||||
--tab-separator: transparent;
|
||||
--tab-selected-line: transparent;
|
||||
--tablist-separator: #cccccc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #303030;
|
||||
--icons: rgb(251,251,254);
|
||||
--tab-separator: transparent;
|
||||
--tab-active-background: rgb(62,62,62);
|
||||
--tab-active-text: rgb(251,251,254);
|
||||
--tab-text: #fbfbfe;
|
||||
--toolbar-background: rgb(43,42,51);
|
||||
--toolbar-text: rgb(251, 251, 254);
|
||||
--input-background: rgb(28,27,34);
|
||||
--input-border: transparent;
|
||||
--input-background-focus: rgb(66,65,77);
|
||||
--input-selected-text: rgb(251,251,254);
|
||||
--input-text: rgb(251,251,254);
|
||||
--input-text-focus: rgb(251,251,254);
|
||||
--identity-color-toolbar: rgb(251,251,254);
|
||||
--tablist-separator: #333333;
|
||||
}
|
||||
}
|
||||
/* fix autoscrolling bug when middle clicking */
|
||||
:root,
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Move topmenu to bottom */
|
||||
#topmenu {
|
||||
order: 2;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#newtab {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#settings {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Hide filterbox & settings icon */
|
||||
#filterbox-icon,
|
||||
#filterbox-input,
|
||||
#settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tablist-wrapper {
|
||||
height: auto;
|
||||
margin-inline: 6px;
|
||||
/* adds margin above tabs to make the spacing even */
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* fix glitch with spacing in-between pinned tabs */
|
||||
#pinnedtablist:not(.compact) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#tablist-wrapper::after {
|
||||
content: "";
|
||||
margin: 2px 0;
|
||||
border: 1px solid var(--tablist-separator);
|
||||
}
|
||||
|
||||
#newtab {
|
||||
flex-grow: 1;
|
||||
margin-right: 2px;
|
||||
margin-left: 2px;
|
||||
padding-left: 9px;
|
||||
min-width: 36px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab,
|
||||
.tab.active {
|
||||
border-radius: 4px;
|
||||
border-bottom: none !important;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
#pinnedtablist:not(.compact) .tab,
|
||||
#tablist .tab {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#newtab::after {
|
||||
content: "New tab";
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#newtab-icon {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* the @media rule only allows these settings apply when the sidebar is expanded */
|
||||
@media (min-width: 49px) {
|
||||
/* Move close button to left side */
|
||||
/*.tab-close {
|
||||
left: 0;
|
||||
margin-left: 3px;
|
||||
}*/
|
||||
|
||||
/* Fix title gradient */
|
||||
/*#tablist .tab:hover > .tab-title-wrapper {
|
||||
mask-image: linear-gradient(to left, transparent 0, black 2em);
|
||||
}*/
|
||||
|
||||
/* Move tab text to right when hovering to accomodate for the close button */
|
||||
/*#tablist .tab:hover > .tab-title-wrapper {
|
||||
margin-left: 28px;
|
||||
transition: all 0.2s ease;
|
||||
}*/
|
||||
|
||||
/* Move favicon to right when hovering to accomodate for the close button */
|
||||
/*#tablist .tab:hover > .tab-meta-image {
|
||||
padding-left: 25px;
|
||||
transition: all 0.2s ease;
|
||||
}*/
|
||||
}
|
||||
|
||||
|
||||
/*** Move container indicators to left ***/
|
||||
#tablist-wrapper {
|
||||
margin-left: 0px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
#tablist,
|
||||
#pinnedtablist:not(.compact) {
|
||||
margin-left: -6px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.tab {
|
||||
overflow: visible;
|
||||
}
|
||||
#tablist .tab[data-identity-color] .tab-context,
|
||||
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#tablist .tab[data-identity-color] .tab-context::before,
|
||||
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -6px;
|
||||
bottom: 6px;
|
||||
width: 3px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: var(--identity-color);
|
||||
transition: inset .1s;
|
||||
}
|
||||
#tablist .tab.active[data-identity-color] .tab-context::before,
|
||||
#pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before {
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
/* center favicons within the tab */
|
||||
#tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image {
|
||||
margin-left: 6px !important;
|
||||
}
|
||||
|
||||
/* hide certain items when collapsed */
|
||||
@media (max-width: 64px) {
|
||||
/* using 64px minimum width to give the tab favicons more room during the transition */
|
||||
.tab-close,
|
||||
.tab-pin {
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
/* hide scrollbar when sidebar is collapsed */
|
||||
#tablist {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48px) {
|
||||
#settings-icon,
|
||||
#tablist-wrapper .tab-title-wrapper,
|
||||
#newtab::after,
|
||||
#settings {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Better support for non-compact mode ***/
|
||||
#tablist-wrapper:not(.shrinked) .tab-meta-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 58px;
|
||||
border: 0 !important;
|
||||
margin-right: 4px;
|
||||
border-radius: inherit;
|
||||
background-position: center;
|
||||
min-width: 0px !important;
|
||||
background-color: var(--toolbar-background) !important;
|
||||
transition: margin .4s;
|
||||
}
|
||||
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
|
||||
transition: margin .1s;
|
||||
z-index: 2;
|
||||
}
|
||||
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
|
||||
top: unset !important;
|
||||
bottom: 8px;
|
||||
left: 25px !important;
|
||||
z-index: 4;
|
||||
transition: inset .1s;
|
||||
}
|
||||
|
||||
/* If you want to disable the website previews,
|
||||
comment out the @media line below and its closing bracket */
|
||||
@media (max-width: 49px) {
|
||||
#tablist-wrapper:not(.shrinked) .tab-meta-image {
|
||||
background-color: inherit !important;
|
||||
border-width: 0 !important;
|
||||
box-shadow: none !important;
|
||||
height: 0 !important;
|
||||
width: 26px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
|
||||
background-color: transparent !important;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 3px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
|
||||
bottom: 12px;
|
||||
left: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* middle click newtab workaround */
|
||||
|
||||
/* allows the #spacer element to take up more space */
|
||||
#spacer {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* moves the new tab button to the original position */
|
||||
#tablist-wrapper {
|
||||
margin-bottom: -100vh;
|
||||
}
|
||||
|
||||
/* moves the new tab button separator to the original position */
|
||||
#tablist-wrapper::after {
|
||||
transform: translateY(-100vh);
|
||||
}
|
|
@ -0,0 +1,119 @@
|
|||
@supports -moz-bool-pref("gnomeTheme.extensions.tabCenterReborn") {
|
||||
:root {
|
||||
--delay: 0s;
|
||||
--transition-time: 0.2s;
|
||||
--positionX1: 48px;
|
||||
--positionX2: absolute;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#browser {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar-box:not([lwt-sidebar]){
|
||||
appearance: unset !important;
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand*="tabcenter"] {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] #sidebar {
|
||||
min-width: 48px !important;
|
||||
max-width: 48px !important;
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
|
||||
display: block;
|
||||
position: var(--positionX2);
|
||||
box-sizing: content-box;
|
||||
min-width: 48px;
|
||||
max-width: 48px;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--sidebar-border-color);
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#main-window[inFullscreen] #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
|
||||
min-width: 1px;
|
||||
max-width: 1px;
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:hover {
|
||||
min-width: 10vw !important;
|
||||
width: 30vw !important;
|
||||
max-width: 200px !important;
|
||||
z-index: 1 !important;
|
||||
transition: all var(--transition-time) ease var(--delay);
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
|
||||
transition: all var(--transition-time) ease 0s;
|
||||
}
|
||||
|
||||
@media (width >= 1200px) {
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
|
||||
#sidebar-box[sidebarcommand*="tabcenter"]:hover {
|
||||
max-width: 250px !important;
|
||||
}
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] #sidebar {
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
|
||||
margin-left: var(--positionX1);
|
||||
}
|
||||
|
||||
#main-window[inFullscreen][inDOMFullscreen] #appcontent {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#main-window[inFullscreen] #sidebar {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] #sidebar-header {
|
||||
background: #0C0C0D;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
|
||||
border-right-color: #0C0C0D !important;
|
||||
border-left-color: #0C0C0D !important;
|
||||
}
|
||||
|
||||
[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
|
||||
[sidebarcommand*="tabcenter"] #sidebar-close {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
#urlbar-container {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
#menubar-items {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -20,6 +20,9 @@
|
|||
|
||||
@import "parts/remove-white-flash.css";
|
||||
|
||||
/* Extensions support */
|
||||
@import "extensions/tab-center-reborn.css";
|
||||
|
||||
@import "colors/light.css";
|
||||
@import "colors/dark.css";
|
||||
|
||||
|
|
Loading…
Reference in New Issue