2022-10-12 20:17:57 +03:00
|
|
|
/* 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 {
|
2023-05-08 00:08:01 +03:00
|
|
|
display:none;
|
2022-10-12 20:17:57 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.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);
|
|
|
|
}
|