/* 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; } }