diff --git a/README.md b/README.md index 3fad03e..8788351 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/configuration/extensions/tab-center-reborn.css b/configuration/extensions/tab-center-reborn.css new file mode 100644 index 0000000..4f36559 --- /dev/null +++ b/configuration/extensions/tab-center-reborn.css @@ -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); +} diff --git a/theme/extensions/tab-center-reborn.css b/theme/extensions/tab-center-reborn.css new file mode 100644 index 0000000..12ef1a0 --- /dev/null +++ b/theme/extensions/tab-center-reborn.css @@ -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; + } + } +} diff --git a/theme/gnome-theme.css b/theme/gnome-theme.css index 69b4581..317542a 100644 --- a/theme/gnome-theme.css +++ b/theme/gnome-theme.css @@ -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";