335 lines
11 KiB
CSS
335 lines
11 KiB
CSS
|
/* 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;
|
||
|
|
}
|
||
|
|
}
|