Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Overwrite some colours */
- :root {
- --tab-separator: transparent;
- --tab-selected-line: transparent;
- --tablist-separator: #cccccc;
- --overflow-indicator-border: #333333;
- }
- @media (prefers-color-scheme: dark) {
- :root {
- --background: #1c1b22;
- --icons: rgb(251,251,254);
- --tab-separator: transparent;
- --tab-active-background: rgb(66,65,77);
- --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;
- --overflow-indicator-border: #cccccc;
- }
- }
- /* 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;
- }
- }
- /* Use mask for overflow instead of shadows */
- .can-scroll-top #tablist {
- mask: linear-gradient(transparent, black 40px);
- }
- .can-scroll-bottom #tablist {
- mask: linear-gradient(black calc(100% - 40px), transparent);
- }
- .can-scroll-bottom.can-scroll-top #tablist {
- mask: linear-gradient(transparent, black 40px calc(100% - 40px), transparent);
- }
- #topshadow, #bottomshadow {
- display: none;
- }
- /* Prevent showing scrollbar when adding/removing tabs */
- #tablist-wrapper:not(.can-scroll-bottom):not(.can-scroll-top) #tablist {
- overflow: hidden;
- }
- /*** Prevent Favicon-only pinned tabs from wrapping ***/
- #pinnedtablist.compact {
- flex-wrap: nowrap;
- overflow-x: auto;
- gap: 2px;
- }
- #pinnedtablist.compact:not(:hover):not(:focus-within) { /* Prevent scrollbar from showing when transitioning */
- scrollbar-width: none;
- }
- #pinnedtablist.compact .tab {
- min-width: 36px;
- }
- @media (max-width: 48px) {
- #pinnedtablist.compact {
- overflow-x: clip /* Clip always makes it reset scroll position */
- }
- #pinnedtablist.compact .tab.active {
- order: -1
- }
- }
- /*** 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);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement