207 lines
6.9 KiB
CSS
207 lines
6.9 KiB
CSS
|
/* Edge-Frfox - browser.css
|
||
|
|
* https://github.com/bmFtZQ/edge-frfox */
|
||
|
|
|
||
|
|
/* Windows has 1px missing space on top of window, but not when accent colour is
|
||
|
|
* applied to the title bar. */
|
||
|
|
@media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) {
|
||
|
|
:root[sizemode="normal"][tabsintitlebar]:not([inFullscreen]) #navigator-toolbox {
|
||
|
|
padding-top: 1px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add a shadow when the toolbars move over content, eg. in macOS hovering over
|
||
|
|
* the menu bar in fullscreen mode. */
|
||
|
|
#navigator-toolbox[style*="transform"] {
|
||
|
|
box-shadow: 0 -3px 5px 3px light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .6)) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Rounded corners (Rc)
|
||
|
|
*/
|
||
|
|
@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
|
||
|
|
/* Since Firefox 120, when the bookmarks bar is set to only open on new tabs,
|
||
|
|
* the bookmarks bar overlaps the #browser element. */
|
||
|
|
|
||
|
|
/* Change the element that shifts the browser content to the correct position. */
|
||
|
|
#main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
|
||
|
|
#main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box {
|
||
|
|
padding-top: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main-window[BookmarksToolbarOverlapsBrowser] #browser {
|
||
|
|
margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make sure that the toolbars are not positioned in-front of the browser
|
||
|
|
* element. */
|
||
|
|
#main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) {
|
||
|
|
z-index: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Move the browser element in-front of the toolbars when on the new tab page. */
|
||
|
|
#main-window:not([BookmarksToolbarOverlapsBrowser]) #browser {
|
||
|
|
z-index: 1 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Rc Variables
|
||
|
|
*/
|
||
|
|
#main-window:not([chromehidden~="toolbar"]) {
|
||
|
|
--uc-tweak-rounded-corners-padding: 4px;
|
||
|
|
--uc-tweak-rounded-corners-radius: 8px;
|
||
|
|
--uc-tweak-rounded-corners-shadow:
|
||
|
|
0 -.8px 0 0 rgb(0 0 0 / 0.02),
|
||
|
|
0 0.5px 1px 1px rgb(0 0 0 / 0.06),
|
||
|
|
0 1px 1px rgb(0 0 0 / 0.1);
|
||
|
|
--browser-frame-bgcolor: var(--toolbar-bgcolor, var(--lwt-accent-color));
|
||
|
|
|
||
|
|
/* Different shadow for higher resolution displays. */
|
||
|
|
@media (resolution > 1.8dppx) {
|
||
|
|
--uc-tweak-rounded-corners-shadow:
|
||
|
|
0 0 0.5px 0.5px rgb(0 0 0 / 0.06),
|
||
|
|
0 0.5px 1.5px rgb(0 0 0 / 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||
|
|
--browser-frame-bgcolor: var(--lwt-accent-color);
|
||
|
|
|
||
|
|
&:-moz-window-inactive {
|
||
|
|
--browser-frame-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide border below titlebar on macOS, as its titlebar already has a border. */
|
||
|
|
@media (-moz-platform: macos) {
|
||
|
|
:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
|
||
|
|
border-top: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove separator between toolbars and the browser window. */
|
||
|
|
#navigator-toolbox {
|
||
|
|
border-bottom: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Disable rounded corners in fullscreen, only if the toolbar is hidden. */
|
||
|
|
:root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser,
|
||
|
|
:root[inDOMFullscreen] #browser {
|
||
|
|
--uc-tweak-rounded-corners-padding: 0;
|
||
|
|
--uc-tweak-rounded-corners-radius: 0;
|
||
|
|
--uc-tweak-rounded-corners-shadow: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Rc Browser
|
||
|
|
*/
|
||
|
|
#appcontent .browserStack {
|
||
|
|
margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||
|
|
background-color: var(--tabpanel-background-color) !important;
|
||
|
|
position: relative !important;
|
||
|
|
|
||
|
|
/* Use pseudo element overlay to simulate rounded corners, similar to the
|
||
|
|
* tab corners, fixes bug with backdrop-filter. */
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
border-radius: inherit;
|
||
|
|
/* Draw toolbar background on the negative corner space, then draw the
|
||
|
|
* same shadow from the browser window on top. */
|
||
|
|
box-shadow:
|
||
|
|
var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
|
||
|
|
0 0 0 16px var(--browser-frame-bgcolor) !important;
|
||
|
|
clip-path: inset(0);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Prevent status panel corners and shadow from appearing outside the browser. */
|
||
|
|
#statuspanel {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Rc Sidebar
|
||
|
|
*/
|
||
|
|
#sidebar-box {
|
||
|
|
margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||
|
|
|
||
|
|
&[positionend] {
|
||
|
|
margin-inline-start: 0 !important;
|
||
|
|
margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Rc Devtools
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Devtools window when docked to the left or right. */
|
||
|
|
.devtools-toolbox-side-iframe {
|
||
|
|
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||
|
|
|
||
|
|
/* Devtools window when docked to the left. */
|
||
|
|
&:first-child {
|
||
|
|
margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Devtools window when docked to the right. */
|
||
|
|
&:last-child {
|
||
|
|
margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Devtools window when docked to the bottom. */
|
||
|
|
.devtools-toolbox-bottom-iframe {
|
||
|
|
margin: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
margin-block-start: 0 !important;
|
||
|
|
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide devtools splitter. */
|
||
|
|
.devtools-side-splitter,
|
||
|
|
.devtools-horizontal-splitter {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive design mode. */
|
||
|
|
.browserContainer.responsive-mode {
|
||
|
|
background-color: transparent !important;
|
||
|
|
|
||
|
|
& .rdm-toolbar {
|
||
|
|
margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
|
||
|
|
border-top-left-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
border-top-right-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||
|
|
width: calc(100% - var(--uc-tweak-rounded-corners-padding) * 2) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove sidebar border when not in full screen. */
|
||
|
|
:not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter {
|
||
|
|
border-inline-width: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Apply colour to the frame around the browser window. */
|
||
|
|
#browser {
|
||
|
|
background-color: var(--browser-frame-bgcolor);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Change colour of page when loading */
|
||
|
|
#tabbrowser-tabpanels {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
}
|