Add SICK Firefox theme that makes Firefox like Arc Browser.
This commit is contained in:
252
themes/firefox/chrome/tweaks/hide-tabs-bar.css
Normal file
252
themes/firefox/chrome/tweaks/hide-tabs-bar.css
Normal file
@ -0,0 +1,252 @@
|
||||
/* Edge-Frfox - tweaks/hide-tabs-bar.css
|
||||
* https://github.com/bmFtZQ/edge-frfox */
|
||||
|
||||
/*
|
||||
MARK: Hide tabs toolbar
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar"),
|
||||
(-moz-bool-pref: "uc.tweak.hide-tabs-bar.no-window-controls") {
|
||||
/* Only hide the tabs toolbar if one of the following sidebar extensions is
|
||||
* active: Sidebery, Tree Style Tab, or Tab Center Reborn. */
|
||||
:root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])),
|
||||
:root:not([customizing]):has(#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])),
|
||||
:root:not([customizing]):has(#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) {
|
||||
/* Height of navbar, used for determining height and position of window controls */
|
||||
--uc-navbar-height: 38px;
|
||||
/* Drag space next to the window controls, allows you to move the window more easily */
|
||||
--uc-titlebar-drag-space: 40px;
|
||||
|
||||
/* Hide the tabs */
|
||||
#TabsToolbar {
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
/* Fix issue with missing window controls. */
|
||||
&[tabsintitlebar] #titlebar {
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Add some padding to the top of the navbar */
|
||||
&[tabsintitlebar] #nav-bar {
|
||||
padding-top: var(--uc-tab-top-margin, 0) !important;
|
||||
}
|
||||
|
||||
/* Set background colour of the menu bar to maintain consistency with the navbar */
|
||||
@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||||
#toolbar-menubar {
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
color: var(--toolbar-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make sure window controls are removed in full screen mode. */
|
||||
&[inDOMFullscreen] #TabsToolbar .titlebar-buttonbox,
|
||||
&[inFullscreen] #navigator-toolbox[style*="margin-top"] #TabsToolbar .titlebar-buttonbox {
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
/* Disable the replacement window controls if tweak is enabled. */
|
||||
@media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.no-window-controls") {
|
||||
/*
|
||||
MARK: macOS styles
|
||||
*/
|
||||
@media (-moz-platform: macos) {
|
||||
/* Offset navbar contents to make space for the window controls */
|
||||
&[tabsintitlebar]:not([inFullscreen]) #nav-bar {
|
||||
padding-left: calc(70px + var(--uc-titlebar-drag-space)) !important;
|
||||
|
||||
/* Remove the padding from the side of the navbar */
|
||||
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Positioning of the window controls */
|
||||
#TabsToolbar .titlebar-buttonbox-container {
|
||||
visibility: visible !important;
|
||||
position: fixed !important;
|
||||
height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px));
|
||||
margin: 0 !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.titlebar-buttonbox {
|
||||
margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Windows styles
|
||||
*/
|
||||
@media (-moz-platform: windows) {
|
||||
/* Offset navbar contents to make space for the window controls */
|
||||
&:where([inFullscreen], [tabsintitlebar]) #nav-bar {
|
||||
padding-inline-end: calc(140px + var(--uc-titlebar-drag-space)) !important;
|
||||
|
||||
/* Remove the padding from the side of the navbar */
|
||||
#PanelUI-menu-button {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Positioning of the window controls */
|
||||
:where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
|
||||
visibility: visible !important;
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
|
||||
z-index: 100 !important;
|
||||
color: var(--toolbar-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Linux/GTK styles
|
||||
*/
|
||||
@media (-moz-gtk-csd-minimize-button),
|
||||
(-moz-gtk-csd-maximize-button),
|
||||
(-moz-gtk-csd-close-button) {
|
||||
/* Width of single window control button. */
|
||||
--uc-window-control-btn: 34px;
|
||||
|
||||
/* Navbar space reserved for one button. */
|
||||
--uc-window-controls-width: var(--uc-window-control-btn);
|
||||
|
||||
/* Navbar space reserved for two buttons. */
|
||||
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
|
||||
(-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
|
||||
(-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
|
||||
--uc-window-controls-width: calc(var(--uc-window-control-btn) * 2);
|
||||
}
|
||||
|
||||
/* Navbar space reserved for three buttons. */
|
||||
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
|
||||
--uc-window-controls-width: calc(var(--uc-window-control-btn) * 3);
|
||||
}
|
||||
|
||||
/* Offset navbar contents to make space for the window controls */
|
||||
&:where([inFullscreen], [tabsintitlebar]) #nav-bar {
|
||||
/* Window controls on the right. */
|
||||
@media not (-moz-gtk-csd-reversed-placement) {
|
||||
padding-inline-end: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
|
||||
|
||||
/* Remove the padding from the side of the navbar */
|
||||
#PanelUI-menu-button {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Window controls on the left. */
|
||||
@media (-moz-gtk-csd-reversed-placement) {
|
||||
padding-inline-start: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
|
||||
|
||||
/* Remove the padding from the side of the navbar */
|
||||
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Positioning of the window controls */
|
||||
:where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
|
||||
visibility: visible !important;
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
|
||||
z-index: 100 !important;
|
||||
inset-inline: auto 0;
|
||||
|
||||
@media (-moz-gtk-csd-reversed-placement) {
|
||||
inset-inline: 0 auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Sidebar styles
|
||||
*/
|
||||
#sidebar-box:where([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])),
|
||||
#sidebar-box:where([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])),
|
||||
#sidebar-box:where([sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) {
|
||||
--sidebar-background-color: var(--toolbar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--toolbar-color) !important;
|
||||
--sidebar-border-color: var(--chrome-content-separator-color) !important;
|
||||
position: relative !important;
|
||||
|
||||
/* Floating tabs tweak uses the tab toolbar background instead. */
|
||||
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||||
--sidebar-background-color: var(--lwt-accent-color) !important;
|
||||
--sidebar-text-color: var(--lwt-text-color) !important;
|
||||
|
||||
&:-moz-window-inactive {
|
||||
--sidebar-background-color: var(--lwt-accent-color-inactive) !important;
|
||||
--sidebar-text-color: var(--lwt-text-color-inactive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
border-bottom: 0 !important;
|
||||
padding: 10px 4px 0 !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
#sidebar-switcher-target,
|
||||
#sidebar-close {
|
||||
width: auto !important;
|
||||
height: 28px !important;
|
||||
padding: 0 8px !important;
|
||||
border: none !important;
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
|
||||
#sidebar-spacer {
|
||||
min-width: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar positioned on the left. */
|
||||
&:not([positionend]) {
|
||||
border-inline-end: 1px solid var(--sidebar-border-color);
|
||||
/* Use less padding on the side with the border. */
|
||||
padding-inline: 4px 3px;
|
||||
}
|
||||
|
||||
/* Sidebar positioned on the right. */
|
||||
&[positionend] {
|
||||
border-inline-start: 1px solid var(--sidebar-border-color);
|
||||
/* Use less padding on the side with the border. */
|
||||
padding-inline: 3px 4px;
|
||||
}
|
||||
|
||||
/* Rounded corners tweak optimisations. */
|
||||
@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
|
||||
/* Remove padding and border from sidebar. */
|
||||
&:not([positionend]),
|
||||
&[positionend] {
|
||||
border-inline: none;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tweak.theme.sidebery") {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:not([positionend]) {
|
||||
padding-inline-end: 3px;
|
||||
}
|
||||
|
||||
&[positionend] {
|
||||
padding-inline-start: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
themes/firefox/chrome/tweaks/shrink-sideberry.css
Normal file
19
themes/firefox/chrome/tweaks/shrink-sideberry.css
Normal file
@ -0,0 +1,19 @@
|
||||
/* Make Sidebery look good */
|
||||
#sidebar{
|
||||
--uc-sidebar-width: 150px;
|
||||
min-width: var(--uc-sidebar-width) !important;
|
||||
width: var(--uc-sidebar-width) !important;
|
||||
max-width: var(--uc-sidebar-width) !important;
|
||||
}
|
||||
#sidebar-header{
|
||||
display: none;
|
||||
min-width: var(--uc-sidebar-width) !important;
|
||||
width: var(--uc-sidebar-width) !important;
|
||||
max-width: var(--uc-sidebar-width) !important;
|
||||
}
|
||||
#sidebar-box{
|
||||
min-width: var(--uc-sidebar-width) !important;
|
||||
width: var(--uc-sidebar-width) !important;
|
||||
max-width: var(--uc-sidebar-width) !important;
|
||||
}
|
||||
#sidebar-splitter{ display: none }
|
||||
334
themes/firefox/chrome/tweaks/sidebery.css
Normal file
334
themes/firefox/chrome/tweaks/sidebery.css
Normal file
@ -0,0 +1,334 @@
|
||||
/* Edge-Frfox - sidebery.css
|
||||
* https://github.com/bmFtZQ/edge-frfox
|
||||
*/
|
||||
|
||||
/* This file needs to loaded into userContent.css so the @media rules can be
|
||||
* used for automatic tweaks configuration. */
|
||||
|
||||
/* Since the UUIDs are randomly generated, only a generic path can be specified,
|
||||
* this can cause conflicts with other extensions that use the same file
|
||||
* structure, but is unlikely to cause any major issues. */
|
||||
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") {
|
||||
/* Fix issues with rounded corners rendering. */
|
||||
:root {
|
||||
color-scheme: light dark !important;
|
||||
background: light-dark(#aaa, #222) !important;
|
||||
}
|
||||
|
||||
/* On macOS, ensure that text is rendered correctly. */
|
||||
body {
|
||||
-moz-osx-font-smoothing: auto !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Default theme colours
|
||||
*/
|
||||
|
||||
/* macOS light mode. */
|
||||
body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"],
|
||||
/* macOS dark mode. */
|
||||
body[style*="--s-frame-fg: rgba(255, 255, 255, 0.847)"],
|
||||
/* Windows light mode. */
|
||||
body[style*="--s-frame-bg: rgb(240, 240, 240)"],
|
||||
/* Windows dark mode. */
|
||||
body[style*="--s-frame-bg: rgb(35, 34, 43)"],
|
||||
/* No theme enabled. */
|
||||
body:not([style*="--s-frame-bg"]) {
|
||||
--s-frame-bg: light-dark(#cecece, #1C1C1C) !important;
|
||||
--s-frame-fg: light-dark(#000, #FFF) !important;
|
||||
--s-toolbar-bg: light-dark(#f7f7f7, #3B3B3B) !important;
|
||||
--s-toolbar-fg: light-dark(#252525, #fff) !important;
|
||||
--s-act-el-bg: light-dark(#fff, #4D4D4D) !important;
|
||||
--s-act-el-fg: light-dark(#000, #fff) !important;
|
||||
--s-act-el-border: transparent !important;
|
||||
--s-popup-bg: light-dark(#fff, #4A4A4A) !important;
|
||||
--s-popup-fg: light-dark(#1c1c1c, #fff) !important;
|
||||
--s-popup-border: light-dark(#dadada, #636363) !important;
|
||||
--s-accent: light-dark(#0078D4, #63ADE5) !important;
|
||||
}
|
||||
|
||||
/* Linux/GTK support, side effect: Firefox themes do not work. */
|
||||
@media (-moz-gtk-csd-available) {
|
||||
body:not([style*="--s-frame-bg"]) {
|
||||
--s-frame-bg: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important;
|
||||
--s-frame-fg: CaptionText !important;
|
||||
--s-toolbar-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important;
|
||||
--s-toolbar-fg: -moz-dialogtext !important;
|
||||
--s-act-el-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 80%, white)) !important;
|
||||
--s-act-el-fg: -moz-dialogtext !important;
|
||||
--s-act-el-border: transparent !important;
|
||||
--s-popup-bg: Field !important;
|
||||
--s-popup-fg: FieldText !important;
|
||||
--s-popup-border: light-dark(transparent, color-mix(in srgb, currentColor 17%, Field)) !important;
|
||||
--s-accent: AccentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Variables
|
||||
*/
|
||||
#root.root {
|
||||
--frame-bg: var(--s-toolbar-bg) !important;
|
||||
--frame-fg: var(--s-toolbar-fg) !important;
|
||||
--general-margin: 4px !important;
|
||||
--tabs-font: 12px system-ui !important;
|
||||
--tabs-height: 32px !important;
|
||||
--tabs-pinned-width: 32px !important;
|
||||
--tabs-pinned-height: 32px !important;
|
||||
--tabs-close-btn-margin: 8px !important;
|
||||
--ntb-btn-height: 32px !important;
|
||||
--tabs-inner-gap: 8px !important;
|
||||
--tabs-border-radius: 4px !important;
|
||||
--general-border-radius: 4px !important;
|
||||
--tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / .18), 0 0px 2px rgb(0 0 0 / .19) !important;
|
||||
--tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 87%, transparent) !important;
|
||||
--nav-btn-height: 32px !important;
|
||||
--nav-btn-width: 32px !important;
|
||||
--separator-color: color-mix(in srgb, var(--frame-fg) 20%, transparent) !important;
|
||||
--nav-btn-active-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.086), inset 0 1px 3px 0 rgb(0 0 0 / 0.086) !important;
|
||||
|
||||
/* Light mode adjustments. */
|
||||
&[data-frame-color-scheme="light"] {
|
||||
color-scheme: light !important;
|
||||
--tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 82%, transparent) !important;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments. */
|
||||
&[data-frame-color-scheme="dark"] {
|
||||
color-scheme: dark !important;
|
||||
--tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / .44), 0 0px 2px rgb(0 0 0 / .47) !important;
|
||||
--nav-btn-active-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.071), 0 1px 3px 0 rgb(0 0 0 / 0.212) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
|
||||
--tabs-border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Floating tabs vars
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||||
body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"],
|
||||
body[style*="--s-frame-fg: rgba(255, 255, 255, 0.847)"],
|
||||
body[style*="--s-frame-bg: rgb(240, 240, 240)"],
|
||||
body[style*="--s-frame-bg: rgb(35, 34, 43)"],
|
||||
body:not([style*="--s-frame-bg"]) {
|
||||
--s-frame-bg: light-dark(#f3f3f3, #202020) !important;
|
||||
--s-act-el-bg: light-dark(#fff, #3F3F3F) !important;
|
||||
--s-act-el-border: light-dark(transparent, rgb(255 255 255 / 0.06)) !important;
|
||||
}
|
||||
|
||||
#root.root {
|
||||
--frame-bg: var(--s-frame-bg) !important;
|
||||
--frame-fg: var(--s-frame-fg) !important;
|
||||
|
||||
--toolbar-bg: var(--s-frame-bg) !important;
|
||||
--toolbar-fg: var(--s-frame-fg) !important;
|
||||
--s-toolbar-bg: light-dark(#f3f3f3, #202020) !important;
|
||||
--tabs-activated-shadow: 0 2.5px 3px 1px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .11) !important;
|
||||
--tabs-border-radius: 8px !important;
|
||||
|
||||
&[data-frame-color-scheme="dark"] {
|
||||
--tabs-activated-shadow: 0 2px 3px rgb(0 0 0 / .12) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Tabs appearance
|
||||
*/
|
||||
.Tab {
|
||||
/* Active tab border. */
|
||||
&[data-active="true"] .body {
|
||||
outline: 1px solid var(--s-act-el-border, transparent) !important;
|
||||
outline-offset: -1px !important;
|
||||
}
|
||||
|
||||
/* Close button border radius. */
|
||||
& .close {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* Make sure that tab icons use full opacity. */
|
||||
& .fav svg {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Adjust spacing between tab icons and labels. */
|
||||
& .title {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
/* Colourised tab shadow and outline. */
|
||||
&[data-colorized="true"] {
|
||||
--tabs-activated-shadow: unset !important;
|
||||
--s-act-el-border: light-dark(rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.25)) !important;
|
||||
}
|
||||
|
||||
& .ctx {
|
||||
box-shadow: none !important;
|
||||
border-radius: 2px !important;
|
||||
--uc-margin: 8px !important;
|
||||
--uc-width: 2px !important;
|
||||
--uc-offset: 1px !important;
|
||||
}
|
||||
|
||||
&[data-active="true"] .ctx {
|
||||
--uc-margin: 6px !important;
|
||||
}
|
||||
|
||||
&[data-pin="false"] {
|
||||
/* Inner spacing for tabs. */
|
||||
& .fav {
|
||||
margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important;
|
||||
}
|
||||
|
||||
/* Tab container indicator. */
|
||||
& .ctx {
|
||||
inset-block: 0 !important;
|
||||
margin-block: auto !important;
|
||||
left: var(--uc-offset) !important;
|
||||
width: var(--uc-width) !important;
|
||||
height: calc(100% - var(--uc-margin) * 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#root[data-pinned-tabs-position="panel"] &[data-pin="true"] {
|
||||
/* Tab container indicator. */
|
||||
& .ctx {
|
||||
inset-inline: 0 !important;
|
||||
margin-inline: auto !important;
|
||||
bottom: var(--uc-offset) !important;
|
||||
height: var(--uc-width) !important;
|
||||
width: calc(100% - var(--uc-margin) * 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Notifications + .main-box .central-box {
|
||||
height: 100% !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Add space to the top of the tabs to allow shadows to be visible. */
|
||||
.AnimatedTabList,
|
||||
.PinnedTabsBar {
|
||||
padding-top: var(--tabs-margin) !important;
|
||||
}
|
||||
|
||||
/* Remove space between the tabs and horizontal navigation bar, as tabs have
|
||||
* their own space applied for the shadows. */
|
||||
.top-horizontal-box {
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
& .NavigationBar.-top {
|
||||
padding-block-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pinned tabs separator. */
|
||||
.PinnedTabsBar {
|
||||
/* Pinned tab grid. */
|
||||
#root[data-pinned-tabs-position="panel"] & {
|
||||
padding-bottom: calc(var(--tabs-margin) + 1px) !important;
|
||||
}
|
||||
|
||||
/* Pinned tab list. */
|
||||
#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list="true"] & {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
/* Separator element. */
|
||||
&::after {
|
||||
display: unset !important;
|
||||
bottom: 0 !important;
|
||||
height: auto !important;
|
||||
border-bottom: 1px solid var(--separator-color) !important;
|
||||
background: transparent !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: New tab button
|
||||
*/
|
||||
.TabsPanel .new-tab-btns {
|
||||
/* Add space for the separator. */
|
||||
padding-top: calc(var(--tabs-margin) + 1px) !important;
|
||||
|
||||
/* Add separator before new tab button. */
|
||||
&::before {
|
||||
width: calc(100% - var(--tabs-margin)*2) !important;
|
||||
inset-inline: auto !important;
|
||||
top: 0 !important;
|
||||
border-top: 1px solid var(--separator-color) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Make sure the separator is hidden when there are only pinned tabs. */
|
||||
&[data-new-tab-bar-position="after_tabs"]:first-child {
|
||||
padding-top: 0 !important;
|
||||
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide unnecessary pseudo element. */
|
||||
&::after {
|
||||
content: initial !important;
|
||||
}
|
||||
|
||||
/* New tab button. */
|
||||
& .new-tab-btn {
|
||||
justify-content: start !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: var(--tabs-border-radius) !important;
|
||||
|
||||
/* Make sure images do not shrink when collapsed. */
|
||||
& > svg,
|
||||
& > img {
|
||||
position: static !important;
|
||||
margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Fix new tab icon when badge is placed above it (open in container). */
|
||||
& > .-badge {
|
||||
position: static !important;
|
||||
margin-top: 10px !important;
|
||||
margin-inline-start: calc(-1 * (14px + var(--tabs-inner-gap) / 2)) !important;
|
||||
margin-inline-end: calc(var(--tabs-inner-gap) - 1px) !important;
|
||||
}
|
||||
|
||||
/* Add new tab label. */
|
||||
&::after {
|
||||
content: "New Tab" !important;
|
||||
font: var(--tabs-font) !important;
|
||||
color: var(--frame-fg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide shadows at the top and bottom when scrolling. */
|
||||
.ScrollBox > .top-shadow[data-show="true"],
|
||||
.ScrollBox > .bottom-shadow[data-show="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Icons
|
||||
*/
|
||||
|
||||
/* New tab page icon. */
|
||||
#icon_ff path {
|
||||
d: path("M3 1h10a2 2 0 01 2 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V3a2 2 0 01 2-2zm3 1H3a1 1 0 00-1 1v10a1 1 0 00 1 1h10a1 1 0 00 1-1V5H7.5A1.5 1.5 0 01 6 3.5zm1 0v1.5a.5.5 0 00 .5.5H14V3a1 1 0 00-1-1zM5 8a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2z") !important;
|
||||
}
|
||||
|
||||
/* Plus icon. */
|
||||
#icon_plus path {
|
||||
d: path("M7 1a.5.5 0 01 1 0v6h6a.5.5 0 01 0 1H8v6a.5.5 0 01-1 0V8H1a.5.5 0 01 0-1h6z") !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user