├── .gitignore ├── .prettierrc.yaml ├── .gitattributes ├── chrome ├── icons │ ├── zoom-out.svg │ ├── menu.svg │ ├── arrow-filled-right.svg │ ├── arrow-right.svg │ ├── arrow-up.svg │ ├── arrow-down.svg │ ├── media-pause.svg │ ├── plus.svg │ ├── win11-minimize.svg │ ├── media-play.svg │ ├── arrow-filled-down.svg │ ├── arrow-filled-left.svg │ ├── checkmark.svg │ ├── reader-mode.svg │ ├── arrow-left.svg │ ├── search-glass.svg │ ├── info.svg │ ├── back.svg │ ├── edit-undo.svg │ ├── forward.svg │ ├── account.svg │ ├── win11-maximize.svg │ ├── window.svg │ ├── tab.svg │ ├── edit-redo.svg │ ├── bookmark.svg │ ├── close.svg │ ├── security.svg │ ├── report.svg │ ├── edit-copy.svg │ ├── microphone.svg │ ├── open.svg │ ├── win11-close.svg │ ├── security-broken.svg │ ├── close-9px.svg │ ├── mail.svg │ ├── autoplay-media.svg │ ├── customize.svg │ ├── edit-cut.svg │ ├── link.svg │ ├── move-tab.svg │ ├── screen.svg │ ├── win11-restore.svg │ ├── page-portrait.svg │ ├── win11-close-dark.svg │ ├── firefox-view.svg │ ├── chevron.svg │ ├── midi.svg │ ├── media-pip.svg │ ├── bookmark-star-on-tray.svg │ ├── downloads.svg │ ├── tag.svg │ ├── new-tab-image.svg │ ├── pocket-outline.svg │ ├── source-code.svg │ ├── help.svg │ ├── inspect.svg │ ├── permissions.svg │ ├── edit.svg │ ├── tracking-protection.svg │ ├── reload.svg │ ├── send-to-device.svg │ ├── sidebars.svg │ ├── canvas.svg │ ├── duplicate-tab.svg │ ├── search-page.svg │ ├── sidebars-right.svg │ ├── geo.svg │ ├── desktop-notification.svg │ ├── add-to-dictionary.svg │ ├── fullscreen.svg │ ├── developer.svg │ ├── manage.svg │ ├── camera.svg │ ├── bookmark-hollow.svg │ ├── print.svg │ ├── edit-paste.svg │ ├── pin.svg │ ├── tab-audio-blocked-small.svg │ ├── account-private.svg │ ├── microphone-blocked.svg │ ├── privateBrowsing.svg │ ├── fullscreen-exit.svg │ ├── history.svg │ ├── home.svg │ ├── new-tab.svg │ ├── video-open.svg │ ├── image-open.svg │ ├── image-copy.svg │ ├── autoplay-media-blocked.svg │ ├── screen-blocked.svg │ ├── media-mute.svg │ ├── edit-delete.svg │ ├── passwords.svg │ ├── save.svg │ ├── security-warning.svg │ ├── firefox.svg │ ├── folder.svg │ ├── media-unmute.svg │ ├── canvas-blocked.svg │ ├── share.svg │ ├── audio-save.svg │ ├── geo-blocked.svg │ ├── edit-select-all.svg │ ├── popup.svg │ ├── desktop-notification-blocked.svg │ ├── paste-and-go.svg │ ├── accessibility.svg │ ├── media-loop.svg │ ├── tool-profiler.svg │ ├── camera-blocked.svg │ ├── edit-copy-without-tracking.svg │ ├── persistent-storage.svg │ ├── xr.svg │ ├── forget.svg │ ├── video-save.svg │ ├── private-window.svg │ ├── container-tab.svg │ ├── media-speed.svg │ ├── image-save.svg │ ├── library.svg │ ├── extension.svg │ ├── screenshot.svg │ ├── tab-audio-muted-small.svg │ ├── persistent-storage-blocked.svg │ ├── xr-blocked.svg │ ├── extension-blocked.svg │ ├── tab-audio-playing-small.svg │ ├── settings.svg │ ├── translate.svg │ ├── reload-to-stop.svg │ └── stop-to-reload.svg ├── EdgyArc-fr │ ├── not-edge-sidebar.css │ ├── icons │ │ ├── arrow.svg │ │ ├── ublock.svg │ │ ├── private-icon.svg │ │ ├── dr.svg │ │ └── bitwarden.svg │ ├── translucent-base.css │ ├── translucent-arc.css │ ├── sidebar-revamp.css │ ├── edge-sidebar.css │ ├── icons.css │ ├── autohide-sidebar-slide.css │ ├── autohide-sidebar-modified.css │ ├── urlbar-tweaks.css │ └── main.css ├── tweaks │ ├── sidebery-translucent.css │ ├── separate-extended-urlbar.css │ └── sidebery.css ├── userContent.css ├── custom.css ├── userChrome.css ├── toolbar │ ├── findbar.css │ ├── personalbar.css │ ├── navbar.css │ └── urlbar.css ├── global │ ├── tree.css │ ├── browser.css │ └── tweaks.css └── content │ ├── common.css │ └── newtab.css ├── package.json └── .github └── ISSUE_TEMPLATE └── bug_report.md /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | .DS_Store 3 | 4 | node_modules 5 | -------------------------------------------------------------------------------- /.prettierrc.yaml: -------------------------------------------------------------------------------- 1 | singleQuote: false 2 | printWidth: 120 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /chrome/icons/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/not-edge-sidebar.css: -------------------------------------------------------------------------------- 1 | #sidebar-box { 2 | padding: 0px !important; 3 | 4 | margin-block-end: calc(-1 * var(--uc-tweak-rounded-corners-padding)); 5 | margin-inline-start: calc(-1 * var(--uc-tweak-rounded-corners-padding)); 6 | } 7 | -------------------------------------------------------------------------------- /chrome/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/media-play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/reader-mode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/search-glass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/win11-maximize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edgyarc-fr", 3 | "version": "1.0.0", 4 | "description": "Because Arc and Edge look pretty af but FOSS FTW", 5 | "main": "user.js", 6 | "scripts": { 7 | "format": "prettier --write ." 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "MPL-2.0", 12 | "devDependencies": { 13 | "prettier": "^3.3.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /chrome/icons/window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/report.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/microphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chrome/icons/security-broken.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/close-9px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/autoplay-media.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/customize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-cut.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/move-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/screen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-restore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/page-portrait.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-close-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/tweaks/sidebery-translucent.css: -------------------------------------------------------------------------------- 1 | /* Translucency support for Sidebery */ 2 | @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") 3 | { 4 | #root { 5 | --toolbar-bg: transparent !important; 6 | --frame-bg: transparent !important; 7 | } 8 | 9 | :root { 10 | background-color: transparent !important; 11 | } 12 | 13 | .NavigationBar .hidden-panels-popup { 14 | --toolbar-bg: var(--s-toolbar-bg, #fafafa); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /chrome/icons/firefox-view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/midi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/userContent.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox */ 2 | @import url("content/common.css") (-moz-pref("af.edgyarc.edge-styles")); 3 | @import url("content/newtab.css") (-moz-pref("af.edgyarc.edge-styles")); 4 | @import url("tweaks/sidebery.css") (-moz-pref("uc.tweak.theme.sidebery")); 5 | @import url("EdgyArc-fr/sidebery.css") (-moz-pref("af.sidebery.edgyarc-theme")); 6 | @import url("tweaks/sidebery-translucent.css") (-moz-pref("af.edgyarc.macos-translucent") or -moz-pref("widget.windows.mica")); 7 | -------------------------------------------------------------------------------- /chrome/icons/media-pip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark-star-on-tray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/downloads.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/new-tab-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /chrome/icons/pocket-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/source-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/inspect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/permissions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/custom.css: -------------------------------------------------------------------------------- 1 | @import url("EdgyArc-fr/main.css"); 2 | 3 | /* Make the sidebar button behave as if it's always unchecked (otherwise it's always active when Sidebery is shown) */ 4 | #sidebar-button[checked] { 5 | .toolbarbutton-icon { 6 | background-color: inherit !important; 7 | } 8 | &:hover .toolbarbutton-icon { 9 | background-color: var(--toolbarbutton-hover-background) !important; 10 | } 11 | &:hover:active .toolbarbutton-icon { 12 | background-color: var(--toolbarbutton-active-background) !important; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /chrome/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/send-to-device.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/sidebars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/canvas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/duplicate-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/search-page.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/sidebars-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/geo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/desktop-notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/add-to-dictionary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/developer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/manage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/print.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-blocked-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/account-private.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chrome/icons/microphone-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/privateBrowsing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/fullscreen-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/video-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/image-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chrome/icons/image-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/autoplay-media-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/screen-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/translucent-base.css: -------------------------------------------------------------------------------- 1 | @media (-moz-pref("af.edgyarc.macos-translucent")) { 2 | :root { 3 | appearance: -moz-window-titlebar !important; 4 | } 5 | 6 | /*add translucency to library window WIP*/ 7 | #placesList, 8 | #placeContent { 9 | background-color: transparent !important; 10 | appearance: -moz-window-titlebar !important; 11 | } 12 | 13 | #placesContentTitle, 14 | #placesContentTags, 15 | #placesContentUrl, 16 | #placesContentDate, 17 | #placesContentVisitCount, 18 | #placesContentDateAdded, 19 | #placesContentLastModified, 20 | #downloadsListBox { 21 | background-color: transparent !important; 22 | } 23 | } 24 | /*end translucent stuff*/ 25 | -------------------------------------------------------------------------------- /chrome/icons/media-mute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/passwords.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/security-warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/firefox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/media-unmute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/canvas-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/audio-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/geo-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/edit-select-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/popup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/desktop-notification-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/paste-and-go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons/ublock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/accessibility.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-loop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tool-profiler.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox main files */ 2 | @import url("icons/icons.css"); 3 | @import url("toolbar/navbar.css"); 4 | @import url("toolbar/personalbar.css"); 5 | @import url("toolbar/findbar.css"); 6 | @import url("toolbar/urlbar.css"); 7 | @import url("global/colors.css") (-moz-pref("af.edgyarc.edge-styles")); 8 | @import url("global/popup.css"); 9 | @import url("global/browser.css"); 10 | @import url("global/tree.css"); 11 | 12 | /* Edge-Frfox tweaks */ 13 | @import url("global/tweaks.css"); 14 | @import url("tweaks/hide-tabs-bar.css"); 15 | @import url("tweaks/separate-extended-urlbar.css") (-moz-pref("af.edgyarc.separate-extended-urlbar")); 16 | @import url("tweaks/noise-texture/style.css") (-moz-pref("af.edgyarc.noise-texture")); 17 | 18 | /* Import custom stylesheet instead of modifying Edge-Frfox theme files. */ 19 | @import url("custom.css"); 20 | -------------------------------------------------------------------------------- /chrome/icons/camera-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/edit-copy-without-tracking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/persistent-storage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/xr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/forget.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/video-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/private-window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/container-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/translucent-arc.css: -------------------------------------------------------------------------------- 1 | #sidebar-box { 2 | background-color: transparent !important; 3 | } 4 | 5 | :root { 6 | --af-minimal-opacity: 1; 7 | @media (-moz-pref("af.edgyarc.macos-translucent") or -moz-pref("widget.windows.mica")) { 8 | --af-minimal-opacity: 0.53; 9 | } 10 | @media (-moz-pref("af.edgyarc.macos-more-translucent")) { 11 | --af-minimal-opacity: 0.45; 12 | } 13 | } 14 | 15 | #navigator-toolbox, 16 | #browser { 17 | background-color: color-mix( 18 | in srgb, 19 | var(--browser-frame-bgcolor), 20 | transparent calc((1 - var(--af-minimal-opacity)) * 100%) 21 | ) !important; 22 | background-image: none !important; 23 | } 24 | 25 | /* Fixes transparent toolbar in fullscreen on macos */ 26 | /* Only apply solid background when toolbox moves over the content */ 27 | :root[inFullscreen] #navigator-toolbox[style*="transform"] { 28 | background-color: var(--browser-frame-bgcolor) !important; 29 | } 30 | -------------------------------------------------------------------------------- /chrome/icons/media-speed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/image-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/sidebar-revamp.css: -------------------------------------------------------------------------------- 1 | #sidebar { 2 | background-color: transparent !important; 3 | box-shadow: none !important; 4 | border: none !important; 5 | } 6 | 7 | /* Apparently not used anymore since FF140 (maybe earlier) */ 8 | #sidebar-wrapper { 9 | display: flex !important; 10 | @media (-moz-pref("uc.tweak.rounded-corners")) { 11 | min-width: var(--uc-tweak-rounded-corners-padding); 12 | } 13 | } 14 | 15 | #tabbrowser-tabbox { 16 | box-shadow: none !important; 17 | outline: none !important; 18 | } 19 | 20 | #sidebar-box { 21 | margin-block-end: 0 !important; 22 | margin-inline-start: 0 !important; 23 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 24 | } 25 | 26 | #sidebar-main:not([sidebar-positionend]) { 27 | margin-inline-start: calc(-1 * var(--uc-tweak-rounded-corners-padding)) !important; 28 | } 29 | #sidebar-main[sidebar-positionend] { 30 | margin-inline-end: calc(-1 * var(--uc-tweak-rounded-corners-padding)) !important; 31 | } 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /chrome/icons/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons/private-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-muted-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/persistent-storage-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/xr-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/tweaks/separate-extended-urlbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; 3 | } 4 | 5 | #urlbar[breakout-extend] { 6 | top: 4px !important; 7 | 8 | /* FF 132- */ 9 | hbox& { 10 | left: 0 !important; 11 | width: 100% !important; 12 | } 13 | /* FF 133+ */ 14 | div& { 15 | margin-left: 0 !important; 16 | width: var(--urlbar-width) !important; 17 | } 18 | 19 | .urlbar-input-container { 20 | height: var(--urlbar-height) !important; 21 | padding: var(--urlbar-container-padding) !important; 22 | } 23 | 24 | /* Changes urlbar background */ 25 | --toolbar-field-focus-background-color: light-dark(#fff, #000); 26 | } 27 | 28 | #urlbar-background { 29 | height: var(--urlbar-height) !important; 30 | box-shadow: none !important; 31 | } 32 | 33 | .urlbarView { 34 | margin-top: 4px; 35 | border-radius: calc(var(--urlbar-icon-border-radius) + 2px) !important; 36 | background: var(--toolbar-field-focus-background-color); 37 | border: var(--af-content-border) !important; 38 | 39 | box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); 40 | } 41 | -------------------------------------------------------------------------------- /chrome/icons/extension-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-playing-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons/dr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 16 | 20 | 21 | -------------------------------------------------------------------------------- /chrome/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons/bitwarden.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 13 | 17 | 18 | -------------------------------------------------------------------------------- /chrome/icons/translate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/reload-to-stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chrome/toolbar/findbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - findbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Findbar text input box. */ 5 | .findbar-textbox { 6 | border: 0 !important; 7 | border-radius: var(--toolbarbutton-border-radius) !important; 8 | background-color: var(--toolbar-field-background-color) !important; 9 | 10 | /* Add shadow when in light mode with no theme applied, like the URL bar. */ 11 | :root:not([lwtheme]) & { 12 | box-shadow: 0 0 4px light-dark(rgb(0 0 0 / 0.1), transparent) !important; 13 | } 14 | 15 | &:focus { 16 | outline-width: 2px !important; 17 | outline-offset: -1px !important; 18 | } 19 | 20 | &[status="notfound"] { 21 | outline: 2px solid var(--input-error-border-color, #e22850) !important; 22 | outline-offset: -1px !important; 23 | } 24 | } 25 | 26 | /* Prevent focus outline from being cut off on the findbar textbox. */ 27 | .findbar-container { 28 | overflow-inline: visible !important; 29 | 30 | /* Add ability to drag window from empty space in the findbar. */ 31 | &::after { 32 | content: ""; 33 | flex: 1; 34 | align-self: stretch; 35 | margin-block: -6px; 36 | -moz-window-dragging: drag; 37 | } 38 | } 39 | 40 | /* Findbar buttons. */ 41 | .findbar-find-previous, 42 | .findbar-find-next, 43 | findbar .close-icon { 44 | border-radius: var(--toolbarbutton-border-radius) !important; 45 | 46 | &:not([disabled]):hover { 47 | background-color: var(--toolbarbutton-hover-background, rgb(190 190 190 / 0.2)) !important; 48 | 49 | &:active { 50 | background-color: var(--toolbarbutton-active-background, rgb(190 190 190 / 0.4)) !important; 51 | } 52 | } 53 | } 54 | 55 | /* Rounded corners optimisations. */ 56 | @media (-moz-pref("uc.tweak.rounded-corners")) { 57 | findbar { 58 | border: none !important; 59 | background-color: transparent !important; 60 | 61 | &[hidden] { 62 | margin-bottom: calc(var(--uc-tweak-rounded-corners-padding, 0px) - 40px) !important; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/edge-sidebar.css: -------------------------------------------------------------------------------- 1 | #sidebar-box { 2 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 3 | border-radius: 6px !important; 4 | padding: 0px !important; 5 | 6 | @media (-moz-pref("uc.tweak.rounded-corners")) { 7 | margin-inline-end: var(--uc-tweak-rounded-corners-padding); 8 | &[sidebar-positionend] { 9 | margin-inline-start: var(--uc-tweak-rounded-corners-padding); 10 | } 11 | } 12 | } 13 | @media not (-moz-pref("af.edgyarc.show-sidebar-header")) { 14 | #sidebar { 15 | border-radius: 6px 6px 6px 6px !important; 16 | } 17 | } 18 | @media (-moz-pref("af.edgyarc.show-sidebar-header")) { 19 | :root:not([titlepreface="᠎"]) #sidebar { 20 | border-radius: 0px 0px 6px 6px !important; 21 | } 22 | :root[titlepreface="᠎"] #sidebar { 23 | border-radius: 6px 6px 6px 6px !important; 24 | } 25 | } 26 | 27 | #sidebar-header { 28 | border-radius: 6px 6px 0 0 !important; 29 | } 30 | 31 | @media not (-moz-pref("af.edgyarc.macos-translucent")) { 32 | :root { 33 | --af-normal-opacity: 0.15 !important; 34 | @media (-moz-pref("af.edgyarc.macos-more-translucent")) { 35 | --af-normal-opacity: 0.05 !important; 36 | } 37 | } 38 | 39 | /*add tint overlay to window*/ 40 | #main-window::before { 41 | content: ""; 42 | display: block; 43 | position: absolute; 44 | top: 0; 45 | right: 0; 46 | bottom: 0; 47 | left: 0; 48 | z-index: 0; 49 | pointer-events: none; 50 | background-color: var(--lwt-accent-color) !important; 51 | filter: saturate(400%) !important; 52 | opacity: var(--af-normal-opacity) !important; 53 | transition: var(--af-bg-transition) !important; 54 | } 55 | 56 | #browser::before { 57 | content: ""; 58 | display: block; 59 | position: absolute; 60 | top: 0; 61 | right: 0; 62 | bottom: 0; 63 | left: 0; 64 | pointer-events: none; 65 | background-color: light-dark(#cdcdcd, #444) !important; 66 | opacity: 0.3; 67 | } 68 | } 69 | 70 | @media (-moz-pref("af.edgyarc.macos-translucent")) { 71 | #sidebar-box { 72 | background-color: light-dark(#cdcdcd4d, #0000004d) !important; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /chrome/icons/stop-to-reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chrome/toolbar/personalbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - personalbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | :root { 5 | --bookmark-block-padding: 6px !important; 6 | --bookmark-inline-padding: 6px !important; 7 | --bookmark-block-margin: 2px !important; 8 | --bookmark-inline-margin: 2px !important; 9 | --uc-bookmark-toolbar-padding-bottom: 2px; 10 | --bookmarks-toolbar-overlapping-browser-height: calc( 11 | var(--uc-bookmark-toolbar-padding-bottom) + 16px + (var(--bookmark-block-margin) + var(--bookmark-block-padding)) * 12 | 2 13 | ) !important; 14 | } 15 | 16 | #PersonalToolbar { 17 | padding-bottom: var(--uc-bookmark-toolbar-padding-bottom) !important; 18 | } 19 | 20 | /* Bookmarks bar item sizing */ 21 | #personal-toolbar-empty-description, 22 | #PersonalToolbar .toolbarbutton-1, 23 | toolbarbutton.bookmark-item:not(.subviewbutton) { 24 | margin-block: var(--bookmark-block-margin) !important; 25 | margin-inline: var(--bookmark-inline-margin) !important; 26 | padding-block: var(--bookmark-block-padding) !important; 27 | padding-inline: var(--bookmark-inline-padding) !important; 28 | font-size: 12px !important; 29 | 30 | /* Adjust vertical label position on Windows */ 31 | @media (-moz-platform: windows) { 32 | & .toolbarbutton-text { 33 | margin-block: -1px 0 !important; 34 | } 35 | } 36 | } 37 | 38 | #PersonalToolbar .toolbarbutton-1 { 39 | padding: 0 !important; 40 | } 41 | 42 | /* Bookmarks bar separators */ 43 | #PlacesToolbarItems > toolbarseparator { 44 | padding-inline: calc(3px - var(--bookmark-inline-margin)) !important; 45 | align-items: center !important; 46 | 47 | &::before { 48 | content: ""; 49 | border-inline-start: 1px solid var(--toolbarseparator-color) !important; 50 | height: 16px !important; 51 | border-image: none !important; 52 | } 53 | 54 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 55 | @media (1dppx < resolution < 2dppx) { 56 | &::before { 57 | border-inline-start-width: 1.5px !important; 58 | } 59 | } 60 | } 61 | 62 | /* Left and Right padding of bookmarks bar */ 63 | #PersonalToolbar { 64 | padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 4px) !important; 65 | } 66 | 67 | /* Spacing between icon and label for bookmarks bar items */ 68 | #managed-bookmarks > .toolbarbutton-icon, 69 | #bookmarks-toolbar-placeholder > .toolbarbutton-icon, 70 | #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]), 71 | #OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon { 72 | margin-inline-end: 8px !important; 73 | } 74 | 75 | /* Sizing for bookmarks bar icons */ 76 | #PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon { 77 | width: calc(2 * var(--bookmark-block-padding) + 16px) !important; 78 | height: calc(2 * var(--bookmark-block-padding) + 16px) !important; 79 | padding: var(--bookmark-block-padding) !important; 80 | } 81 | -------------------------------------------------------------------------------- /chrome/global/tree.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tree.css */ 2 | 3 | /* Change height of tree items and add rounded corners */ 4 | treechildren::-moz-tree-row, 5 | treecol:not([hideheader="true"]), 6 | .tree-columnpicker-button { 7 | min-height: max(28px, 1.3em) !important; 8 | border-radius: 2px !important; 9 | } 10 | 11 | /* Change the background colour on hover */ 12 | @media not (prefers-contrast) { 13 | treechildren::-moz-tree-row(hover) { 14 | background-color: var(--toolbarbutton-hover-background) !important; 15 | } 16 | } 17 | 18 | /* Change the background colour when pressed */ 19 | treechildren::-moz-tree-row(selected) { 20 | background-color: var(--toolbarbutton-active-background) !important; 21 | } 22 | 23 | /* Change the background colour when focused */ 24 | treechildren::-moz-tree-row(selected, focus) { 25 | background-color: var(--button-primary-bgcolor) !important; 26 | } 27 | 28 | treechildren::-moz-tree-row(current, focus) { 29 | outline: var(--default-focusring); 30 | outline-color: var(--button-primary-bgcolor) !important; 31 | outline-offset: calc(-1 * var(--default-focusring-width)); 32 | } 33 | 34 | treechildren::-moz-tree-image(selected), 35 | treechildren::-moz-tree-twisty(selected), 36 | treechildren::-moz-tree-cell-text(selected) { 37 | color: inherit !important; 38 | } 39 | 40 | treechildren::-moz-tree-image(selected, focus), 41 | treechildren::-moz-tree-twisty(selected, focus), 42 | treechildren::-moz-tree-cell-text(selected, focus) { 43 | color: var(--button-primary-color) !important; 44 | } 45 | 46 | /* Spacing between icon and label */ 47 | treechildren::-moz-tree-image { 48 | margin-inline-end: 8px !important; 49 | } 50 | 51 | /* Separator appearance */ 52 | treechildren::-moz-tree-separator { 53 | border-top: 1px solid var(--toolbarseparator-color) !important; 54 | border-bottom: none !important; 55 | } 56 | 57 | /* Change the colour of the drop feedback elements */ 58 | treechildren::-moz-tree-cell-text(primary, dropOn) { 59 | background-color: var(--button-primary-bgcolor) !important; 60 | color: var(--button-primary-color) !important; 61 | } 62 | 63 | treechildren::-moz-tree-drop-feedback { 64 | background-color: var(--toolbarbutton-icon-fill-attention) !important; 65 | border-radius: 2px !important; 66 | } 67 | 68 | /* Change the appearance for the expandable items */ 69 | treechildren::-moz-tree-twisty { 70 | padding-top: 0 !important; 71 | padding-inline: 4px !important; 72 | width: 16px !important; 73 | list-style-image: url("../icons/arrow-filled-right.svg") !important; 74 | } 75 | 76 | treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { 77 | list-style-image: url("../icons/arrow-filled-left.svg") !important; 78 | } 79 | 80 | treechildren::-moz-tree-twisty(open) { 81 | list-style-image: url("../icons/arrow-filled-down.svg") !important; 82 | } 83 | 84 | /* Change the identation of child items */ 85 | treechildren::-moz-tree-indentation { 86 | width: 16px !important; 87 | } 88 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/icons.css: -------------------------------------------------------------------------------- 1 | @media (-moz-pref("uc.tweak.af.greyscale-webext-icons")) { 2 | /* Greyscale extension buttons */ 3 | #navigator-toolbox:not(:hover) .toolbarbutton-1 { 4 | filter: grayscale(100%); 5 | transition: filter 300ms ease !important; 6 | } 7 | 8 | /* Restore color on hover */ 9 | #navigator-toolbox:hover .toolbarbutton-1 { 10 | filter: grayscale(0%); 11 | transition: filter 300ms ease !important; 12 | } 13 | } 14 | 15 | /*move badge to the bottom of toolbar buttons*/ 16 | #navigator-toolbox #nav-bar-customization-target .toolbarbutton-badge { 17 | margin-top: 8px !important; 18 | margin-bottom: -8px !important; 19 | border-radius: 10px !important; 20 | } 21 | 22 | /*stick stop-reload button into right corner of addressbar like in safari*/ 23 | /* if stop-reload-button is on the IMMEDIATE RIGHT of the addressbar, stick it into the addressbar*/ 24 | #urlbar-container:has(+ #stop-reload-button) { 25 | #urlbar { 26 | /*padding-right: 28px; */ 27 | } 28 | #page-action-buttons { 29 | margin-right: 28px !important; 30 | } 31 | } 32 | 33 | #urlbar-container + #stop-reload-button { 34 | background-color: transparent !important; 35 | --toolbarbutton-border-radius: 5px !important; 36 | --toolbarbutton-inner-padding: 5px !important; 37 | --uc-toolbarbutton-inner-inline-padding: 6px !important; 38 | --toolbarbutton-outer-padding: 2px; 39 | --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor) !important; 40 | margin-left: calc(-16px - 2 * (var(--toolbarbutton-inner-padding) + var(--uc-toolbarbutton-inner-inline-padding))); 41 | margin-right: cacl(var(--toolbarbutton-inner-padding) * 2); 42 | z-index: 9999 !important; 43 | } 44 | 45 | #urlbar-container + #stop-reload-button:hover { 46 | opacity: 1 !important; 47 | & .toolbarbutton-icon { 48 | opacity: 1 !important; 49 | } 50 | } 51 | 52 | #urlbar-container + #stop-reload-button .toolbarbutton-icon { 53 | width: 26px !important; 54 | height: 24px !important; 55 | } 56 | 57 | :root[windowtype="navigator:browser"] #back-button { 58 | list-style-image: url("icons/arrow.svg") !important; 59 | transform: rotate(180deg); 60 | } 61 | 62 | :root[windowtype="navigator:browser"] #forward-button { 63 | list-style-image: url("icons/arrow.svg") !important; 64 | } 65 | 66 | #fxa-toolbar-menu-button { 67 | transform: scale(0.8) !important; 68 | } 69 | 70 | /* uBlock Origin => custom svg icon */ 71 | :is(.webextension-browser-action, .eom-addon-button)[data-extensionid="uBlock0@raymondhill.net"] .toolbarbutton-icon { 72 | list-style-image: url("icons/ublock.svg"); 73 | } 74 | 75 | /* Bitwarden => custom svg icon */ 76 | :is(.webextension-browser-action, .eom-addon-button)[data-extensionid="{446900e4-71c2-419f-a6a7-df9c091e268b}"] 77 | .toolbarbutton-icon { 78 | list-style-image: url("icons/bitwarden.svg"); 79 | } 80 | 81 | /* Privacy Badger => it's own monochrome icon */ 82 | :is(.webextension-browser-action, .eom-addon-button)[data-extensionid="jid1-MnnxcxisBPnSXQ@jetpack"] 83 | .toolbarbutton-icon { 84 | list-style-image: image-set( 85 | url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-19-disabled.png"), 86 | url("moz-extension://51ac6f66-1bb5-4473-93a0-41ead025ec8f/icons/badger-38-disabled.png") 87 | ); 88 | } 89 | 90 | /* Dark Reader => custom svg icon (moon) */ 91 | :is(.webextension-browser-action, .eom-addon-button)[data-extensionid="addon@darkreader.org"] .toolbarbutton-icon { 92 | list-style-image: url("icons/dr.svg"); 93 | } 94 | -------------------------------------------------------------------------------- /chrome/toolbar/navbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - navbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | :root { 5 | --toolbarbutton-border-radius: 4px !important; 6 | --toolbarbutton-inner-padding: 7px !important; 7 | --uc-toolbarbutton-inner-inline-padding: 12px !important; 8 | --toolbarbutton-outer-padding: 2px !important; 9 | --tabs-navbar-shadow-size: 0px !important; 10 | } 11 | 12 | #nav-bar .toolbarbutton-1 > .toolbarbutton-icon { 13 | width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important; 14 | } 15 | 16 | #nav-bar .toolbarbutton-1 > .toolbarbutton-icon, 17 | #nav-bar .toolbarbutton-1 > .toolbarbutton-text, 18 | #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack { 19 | padding-inline: var(--uc-toolbarbutton-inner-inline-padding) !important; 20 | } 21 | 22 | /* move reload/stop icon to middle of button */ 23 | #reload-button > .toolbarbutton-animatable-box, 24 | #stop-button > .toolbarbutton-animatable-box { 25 | top: calc(50% - 10px) !important; 26 | } 27 | 28 | #nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { 29 | padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; 30 | } 31 | 32 | toolbar .toolbaritem-combined-buttons { 33 | margin-inline: var(--toolbarbutton-outer-padding) !important; 34 | } 35 | 36 | /* account button */ 37 | .browser-toolbar #fxa-toolbar-menu-button, 38 | .browser-toolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack, 39 | #fxa-avatar-image { 40 | border-radius: 99px !important; 41 | } 42 | 43 | .browser-toolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack { 44 | padding: var(--toolbarbutton-inner-padding) !important; 45 | margin-inline: calc(var(--uc-toolbarbutton-inner-inline-padding) - var(--toolbarbutton-inner-padding)) !important; 46 | } 47 | 48 | #TabsToolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack { 49 | margin-inline: calc( 50 | var(--uc-toolbarbutton-inner-inline-padding) - (var(--toolbarbutton-inner-padding) + 2px) 51 | ) !important; 52 | } 53 | 54 | #fxa-toolbar-menu-button { 55 | display: flex !important; 56 | } 57 | 58 | #widget-overflow-list > #fxa-toolbar-menu-button #fxa-avatar-image { 59 | scale: 1.25 !important; 60 | } 61 | 62 | .customization-target > #fxa-toolbar-menu-button #fxa-avatar-image { 63 | scale: 1.5 !important; 64 | } 65 | 66 | /* button background transition */ 67 | @media not (prefers-reduced-motion) { 68 | .toolbarbutton-1 > .toolbarbutton-icon, 69 | .toolbarbutton-1 > .toolbarbutton-text, 70 | .toolbarbutton-1 > .toolbarbutton-badge-stack, 71 | :not(.panel-subview-body > toolbaritem) > .bookmark-item:not(menu, menuitem), 72 | .urlbar-page-action, 73 | .identity-box-button, 74 | #tracking-protection-icon-container, 75 | panel button, 76 | panel menulist, 77 | .titlebar-button { 78 | transition: background-color 0.25s ease !important; 79 | } 80 | 81 | .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon, 82 | .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-text, 83 | .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-badge-stack, 84 | :not(.panel-subview-body > toolbaritem) 85 | > .bookmark-item:not(menu, menuitem):not([disabled="true"]):is([open], [checked], :hover:active), 86 | .urlbar-page-action:not([disabled="true"]):is([open], [checked], :hover:active), 87 | .identity-box-button:not([disabled="true"]):is([open], [checked], :hover:active), 88 | #tracking-protection-icon-container:not([disabled="true"]):is([open], [checked], :hover:active), 89 | panel button:not([disabled="true"]):is([open], [checked], :hover:active), 90 | panel menulist:not([disabled="true"]):is([open], [checked], :hover:active), 91 | .titlebar-button:not([disabled="true"]):hover:active { 92 | transition-duration: 0s !important; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/autohide-sidebar-slide.css: -------------------------------------------------------------------------------- 1 | #sidebar-box[sidebar-positionend] { 2 | direction: rtl; 3 | } 4 | #sidebar-box[sidebar-positionend] > * { 5 | direction: ltr; 6 | } 7 | 8 | #sidebar-box[sidebar-positionend]:-moz-locale-dir(rtl) { 9 | direction: ltr; 10 | } 11 | #sidebar-box[sidebar-positionend]:-moz-locale-dir(rtl) > * { 12 | direction: rtl; 13 | } 14 | 15 | :root[titlepreface*="᠎"] { 16 | #sidebar-box { 17 | --uc-sidebar-width: var(--uc-tweak-rounded-corners-padding); 18 | position: relative; 19 | min-width: var(--uc-sidebar-width) !important; 20 | width: var(--uc-sidebar-width) !important; 21 | max-width: var(--uc-sidebar-width) !important; 22 | z-index: var(--browser-area-z-index-sidebar-expand-on-hover) !important; 23 | 24 | --uc-sidebar-extended-width: 260px; 25 | @media (-moz-pref("uc.tweak.af.sidebar-width-350")) { 26 | --uc-sidebar-extended-width: 350px; 27 | } 28 | } 29 | 30 | #sidebar-splitter { 31 | visibility: collapse; 32 | } 33 | 34 | .sidebar-panel { 35 | background-color: transparent !important; 36 | color: var(--newtab-text-primary-color) !important; 37 | } 38 | 39 | .sidebar-panel #search-box { 40 | -moz-appearance: none !important; 41 | background-color: rgba(249, 249, 250, 0.1) !important; 42 | color: inherit !important; 43 | } 44 | 45 | .sidebar-browser-stack { 46 | background-color: var(--browser-frame-bgcolor) !important; 47 | width: var(--uc-sidebar-extended-width) !important; 48 | 49 | --uc-autohide-transition-duration: 500ms; 50 | --uc-autohide-transition-type: linear( 51 | 0, 52 | 0.02755 2.27%, 53 | 0.11264 4.92%, 54 | 0.7987 20.072%, 55 | 0.93357 25.073%, 56 | 1.01477 30.443%, 57 | 1.04379 34.693%, 58 | 1.05225 39.704%, 59 | 1.00166 66.267%, 60 | 0.99956 61 | ); 62 | 63 | transition: transform var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type); 64 | transform: translateX(calc(-100% - var(--uc-tweak-rounded-corners-padding) / 2 - 20px)); 65 | 66 | #sidebar-box[sidebar-positionend] & { 67 | transform: translateX(calc(100% + var(--uc-tweak-rounded-corners-padding) / 2 + 20px)); 68 | } 69 | } 70 | 71 | .sidebar-browser-stack::after { 72 | content: ""; 73 | position: absolute; 74 | width: 0; 75 | top: 0; 76 | bottom: 0; 77 | transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type); 78 | } 79 | #sidebar-box:not([sidebar-positionend]) .sidebar-browser-stack::after { 80 | left: 100%; 81 | } 82 | #sidebar-box[sidebar-positionend] .sidebar-browser-stack::after { 83 | right: 100%; 84 | } 85 | 86 | #sidebar-box:hover { 87 | &::before { 88 | content: ""; 89 | position: absolute; 90 | top: 0; 91 | bottom: 0; 92 | width: 100px; 93 | } 94 | 95 | .sidebar-browser-stack { 96 | transform: translateX(0); 97 | 98 | &:after { 99 | width: 100px; 100 | } 101 | } 102 | } 103 | 104 | .sidebar-browser-stack { 105 | margin: calc(var(--uc-tweak-rounded-corners-padding) / -2) 0 calc(var(--uc-tweak-rounded-corners-padding) / 2) 106 | calc(var(--uc-tweak-rounded-corners-padding) / 2); 107 | #sidebar-box[sidebar-positionend] & { 108 | margin: calc(var(--uc-tweak-rounded-corners-padding) / -2) calc(var(--uc-tweak-rounded-corners-padding) / 2) 109 | calc(var(--uc-tweak-rounded-corners-padding) / 2) 0; 110 | } 111 | 112 | border: solid 1px #ffffff30; 113 | 114 | box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2); 115 | } 116 | @media (-moz-pref("uc.tweak.rounded-corners")) { 117 | .sidebar-browser-stack { 118 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 119 | } 120 | } 121 | 122 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 123 | #sidebar-box:not([sidebar-positionend]):hover ~ #statuspanel { 124 | inset-inline: auto 0px !important; 125 | } 126 | 127 | #sidebar-box:not([sidebar-positionend]):hover ~ #statuspanel-label { 128 | margin-inline: 0px !important; 129 | border-left-style: solid !important; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /chrome/content/common.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - content/common.css */ 2 | 3 | /* colours */ 4 | @-moz-document url-prefix(about:) { 5 | :root { 6 | --in-content-page-color: light-dark(#252525, #fff) !important; 7 | --in-content-page-background: light-dark(#f7f7f7, #252525) !important; 8 | --in-content-deemphasized-text: light-dark(#666, #bbb) !important; 9 | --in-content-box-background: light-dark(#fff, #333) !important; 10 | --in-content-box-background-odd: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.05)) !important; 11 | --in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important; 12 | --in-content-icon-color: light-dark(#666, #fff) !important; 13 | --in-content-accent-color: light-dark(#006cbe, #75b6e8) !important; 14 | --in-content-accent-color-active: light-dark(#1683d8, #4c98d1) !important; 15 | --in-content-border-hover: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.3)) !important; 16 | --in-content-border-invalid: var(--red-50) !important; 17 | --in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / 0.2)) !important; 18 | --in-content-error-text-color: light-dark(#ff848a, #ff9aa2) !important; 19 | --in-content-link-color: light-dark(#0078d4, #75b6e8) !important; 20 | --in-content-link-color-hover: light-dark(#006cbe, #63ade5) !important; 21 | --in-content-link-color-active: light-dark(#0749ac, #4c98d1) !important; 22 | --in-content-link-color-visited: light-dark(#0078d4, #75b6e8) !important; 23 | --link-color: var(--in-content-link-color) !important; 24 | --link-color-hover: var(--in-content-link-color-hover) !important; 25 | --link-color-active: var(--in-content-link-color-active) !important; 26 | --link-color-visited: var(--in-content-link-color-visited) !important; 27 | --in-content-button-text-color: var(--in-content-text-color) !important; 28 | --in-content-button-text-color-hover: var(--in-content-text-color) !important; 29 | --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important; 30 | --in-content-button-background: light-dark(#ededed, #3b3b3b) !important; 31 | --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important; 32 | --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important; 33 | --in-content-primary-button-text-color: light-dark(#fff, #fff) !important; 34 | --in-content-primary-button-background: light-dark(#0061e0, #006cbe) !important; 35 | --in-content-primary-button-background-hover: light-dark(#0250bb, #0078d4) !important; 36 | --in-content-primary-button-background-active: light-dark(#053e94, #005ca3) !important; 37 | --color-accent-primary: light-dark(#0078d4, #006cbe) !important; 38 | --color-accent-primary-hover: light-dark(#006cbe, #0078d4) !important; 39 | --color-accent-primary-active: light-dark(#0749ac, #005ca3) !important; 40 | --in-content-danger-button-background: light-dark(#df4951, #e12424) !important; 41 | --in-content-danger-button-background-hover: light-dark(#ea656c, #f94343) !important; 42 | --in-content-danger-button-background-active: light-dark(#bb353c, #aa1e1e) !important; 43 | --in-content-focus-outline-color: light-dark(rgb(0 85 215 / 0.5), #63ade5) !important; 44 | --focus-outline-color: var(--in-content-focus-outline-color) !important; 45 | --in-content-table-background: light-dark(#f7f7f7, #252525) !important; 46 | --in-content-text-color: var(--in-content-page-color) !important; 47 | --border-interactive-color: light-dark(#929292, #858585) !important; 48 | scrollbar-color: light-dark(rgb(37 37 37 / 0.4), rgb(255 255 255 / 0.4)) light-dark(#f7f7f7, #252525) !important; 49 | } 50 | 51 | ::selection { 52 | background-color: light-dark(#0078d4, #93b8e7); 53 | color: light-dark(#fff, #000); 54 | } 55 | } 56 | 57 | /* preferences */ 58 | @-moz-document url-prefix(about:preferences), 59 | url-prefix(about:addons) { 60 | .category[selected] { 61 | position: relative !important; 62 | border-radius: 4px !important; 63 | } 64 | 65 | .category[selected]:not(:hover, :active) { 66 | background-color: var(--in-content-button-background) !important; 67 | } 68 | 69 | .category[selected]::before { 70 | content: ""; 71 | position: absolute; 72 | inset-block: 0; 73 | margin-block: auto; 74 | height: 24px; 75 | width: 3px; 76 | left: 2px; 77 | background-color: var(--in-content-accent-color); 78 | border-radius: 3px; 79 | } 80 | 81 | button.tab-button:hover { 82 | border-block-color: transparent var(--in-content-box-border-color) !important; 83 | } 84 | 85 | button.tab-button[selected], 86 | button.tab-button[selected]:hover { 87 | border-block-color: transparent currentColor !important; 88 | } 89 | 90 | .toggle-button { 91 | --toggle-dot-margin: 4px !important; 92 | --toggle-width: 40px !important; 93 | --toggle-height: 20px !important; 94 | --toggle-background-color: transparent !important; 95 | --toggle-dot-background-color: var(--in-content-page-color) !important; 96 | --toggle-dot-background-color-on-pressed: #fff !important; 97 | --toggle-dot-transform-x: calc( 98 | var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) - var(--toggle-dot-width) 99 | ) !important; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/autohide-sidebar-modified.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 2 | See the above repository for updates as well as full license text. */ 3 | 4 | /* 5 | Enhanced by Prit Cee (@pritceeart) 6 | This customization is shared under the Mozilla Public License v. 2.0. 7 | Feel free to use, adapt, and elevate as needed. No support is provided, and your creativity is the limit. 8 | Kindly respect the original license by MrOtherGuy. 9 | */ 10 | @media (-moz-pref("af.edgyarc.sidebar-always-collapsed")) { 11 | :root, 12 | :root[titlepreface="᠎"] { 13 | #sidebar-box { 14 | --uc-sidebar-hover-width: 48px !important; 15 | } 16 | } 17 | } 18 | 19 | @media (-moz-pref("af.edgyarc.autohide-sidebar")) { 20 | :root[titlepreface="᠎"] { 21 | #sidebar-box { 22 | --uc-sidebar-width: 8px !important; 23 | } 24 | } 25 | } 26 | 27 | #sidebar-box[sidebar-positionend] { 28 | direction: rtl; 29 | } 30 | #sidebar-box[sidebar-positionend] > * { 31 | direction: ltr; 32 | } 33 | 34 | #sidebar-box[sidebar-positionend]:-moz-locale-dir(rtl) { 35 | direction: ltr; 36 | } 37 | #sidebar-box[sidebar-positionend]:-moz-locale-dir(rtl) > * { 38 | direction: rtl; 39 | } 40 | 41 | /* Apply styles only when toggled using the userchrome toggle addon */ 42 | :root[titlepreface="᠎"] { 43 | #sidebar-box { 44 | --uc-sidebar-width: 48px; 45 | --uc-autohide-sidebar-delay: 0ms; 46 | --uc-autohide-transition-duration: 300ms; 47 | --uc-autohide-transition-type: linear( 48 | 0, 49 | 0.02755 2.27%, 50 | 0.11264 4.92%, 51 | 0.7987 20.072%, 52 | 0.93357 25.073%, 53 | 1.01477 30.443%, 54 | 1.04379 34.693%, 55 | 1.05225 39.704%, 56 | 1.00166 66.267%, 57 | 0.99956 58 | ); 59 | position: relative; 60 | min-width: var(--uc-sidebar-width) !important; 61 | width: var(--uc-sidebar-width) !important; 62 | max-width: var(--uc-sidebar-width) !important; 63 | @media not (-moz-pref("uc.tweak.af.sidebar-width-350")) { 64 | --uc-sidebar-hover-width: 260px; 65 | } 66 | @media (-moz-pref("uc.tweak.af.sidebar-width-350")) { 67 | --uc-sidebar-hover-width: 350px; 68 | } 69 | z-index: var(--browser-area-z-index-sidebar-expand-on-hover) !important; 70 | } 71 | 72 | #sidebar-splitter { 73 | width: 10px !important; 74 | visibility: collapse; 75 | } 76 | 77 | #sidebar-header::before, 78 | #sidebar-header::after { 79 | content: ""; 80 | display: flex; 81 | padding-left: 8px; 82 | } 83 | 84 | #sidebar-header, 85 | #sidebar { 86 | width: var(--uc-sidebar-width); 87 | 88 | /* Only apply delay on hover-out, e.g. when the sidebar is expanded */ 89 | transition: 90 | min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) 91 | var(--uc-autohide-sidebar-delay), 92 | box-shadow var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) 93 | var(--uc-autohide-sidebar-delay), 94 | /* Delay the background color transition to make it start after the width transition is over 95 | (prevents sidebar being transparent over the page) */ 96 | background-color 100ms var(--uc-autohide-transition-type) 97 | calc(var(--uc-autohide-sidebar-delay) + var(--uc-autohide-transition-duration) - 100ms); 98 | } 99 | 100 | #sidebar-box:hover { 101 | &[sidebar-positionend] .sidebar-browser-stack { 102 | justify-content: end; 103 | } 104 | 105 | #sidebar-header, 106 | #sidebar { 107 | min-width: var(--uc-sidebar-hover-width) !important; 108 | max-width: var(--uc-sidebar-hover-width) !important; 109 | 110 | transition: 111 | min-width var(--uc-autohide-transition-type) var(--uc-autohide-transition-duration), 112 | box-shadow var(--uc-autohide-transition-type) var(--uc-autohide-transition-duration), 113 | background-color var(--uc-autohide-transition-type) 100ms; 114 | 115 | background-color: var(--browser-frame-bgcolor) !important; 116 | background-image: var(--lwt-additional-images); 117 | background-repeat: var(--lwt-background-tiling); 118 | background-position: var(--lwt-background-alignment); 119 | } 120 | 121 | #sidebar { 122 | box-shadow: var(--uc-sidebar-shadow) !important; 123 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 124 | } 125 | @media (not (-moz-pref("sidebar.revamp"))) { 126 | #sidebar { 127 | margin-bottom: var(--uc-tweak-rounded-corners-padding) !important; 128 | } 129 | &:not([sidebar-positionend]) #sidebar { 130 | margin-left: var(--uc-tweak-rounded-corners-padding) !important; 131 | } 132 | &[sidebar-positionend] #sidebar { 133 | margin-right: var(--uc-tweak-rounded-corners-padding) !important; 134 | } 135 | } 136 | } 137 | 138 | .sidebar-panel { 139 | background-color: transparent !important; 140 | color: var(--newtab-text-primary-color) !important; 141 | } 142 | 143 | .sidebar-panel #search-box { 144 | -moz-appearance: none !important; 145 | background-color: rgba(249, 249, 250, 0.1) !important; 146 | color: inherit !important; 147 | } 148 | 149 | /* Add sidebar divider and give it background */ 150 | #sidebar, 151 | #sidebar-header { 152 | border-inline: 0px; 153 | border-inline-width: 0px 0px; 154 | } 155 | 156 | #sidebar-box:not([sidebar-positionend]) > :-moz-locale-dir(rtl), 157 | #sidebar-box[sidebar-positionend] > * { 158 | border-inline-width: 0px 0px; 159 | } 160 | 161 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 162 | #sidebar-box:not([sidebar-positionend]):hover ~ #appcontent #statuspanel, 163 | #sidebar-box:not([sidebar-positionend]):hover ~ #tabbrowser-tabpanels #statuspanel { 164 | inset-inline: auto 0px !important; 165 | } 166 | 167 | #sidebar-box:not([sidebar-positionend]):hover ~ #appcontent #statuspanel-label, 168 | #sidebar-box:not([sidebar-positionend]):hover ~ #tabbrowser-tabpanels #statuspanel-label { 169 | margin-inline: 0px !important; 170 | border-left-style: solid !important; 171 | } 172 | 173 | /* fix sidebar opacity when auto collapse enabled **/ 174 | #sidebar-header { 175 | visibility: collapse !important; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /chrome/global/browser.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - browser.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Windows has 1px missing space on top of window, but not when accent colour is 5 | * applied to the title bar. */ 6 | @media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) { 7 | :root[sizemode="normal"]:not([drawtitle]):not([inFullscreen]) #navigator-toolbox { 8 | padding-top: 1px !important; 9 | } 10 | } 11 | 12 | /* Add a shadow when the toolbars move over content, eg. in macOS hovering over 13 | * the menu bar in fullscreen mode. */ 14 | #navigator-toolbox[style*="transform"] { 15 | box-shadow: 0 -3px 5px 3px light-dark(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.6)) !important; 16 | } 17 | 18 | #main-window:not([chromehidden~="toolbar"]) { 19 | --browser-frame-bgcolor: var(--lwt-accent-color); 20 | 21 | &:-moz-window-inactive { 22 | --browser-frame-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); 23 | } 24 | } 25 | 26 | /* Rounded Corners Tweak */ 27 | @media (-moz-pref("uc.tweak.rounded-corners")) { 28 | /* Since Firefox 120, when the bookmarks bar is set to only open on new tabs, 29 | * the bookmarks bar overlaps the #browser element. */ 30 | 31 | #browser { 32 | padding: 0 var(--uc-tweak-rounded-corners-padding) var(--uc-tweak-rounded-corners-padding) 33 | var(--uc-tweak-rounded-corners-padding); 34 | } 35 | 36 | /* Change the element that shifts the browser content to the correct position. */ 37 | #main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel, 38 | #main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box { 39 | padding-top: 0 !important; 40 | } 41 | 42 | #main-window[BookmarksToolbarOverlapsBrowser] #browser { 43 | margin-top: var(--bookmarks-toolbar-overlapping-browser-height); 44 | } 45 | 46 | /* Make sure that the toolbars are not positioned in-front of the browser 47 | * element. */ 48 | #main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) { 49 | z-index: auto !important; 50 | } 51 | 52 | /* Move the browser element in-front of the toolbars when on the new tab page. */ 53 | #main-window:not([BookmarksToolbarOverlapsBrowser]) #browser { 54 | z-index: 1 !important; 55 | } 56 | 57 | /* Variables used for the rounded corners. */ 58 | #main-window:not([chromehidden~="toolbar"]) { 59 | --uc-tweak-rounded-corners-padding: 4px; 60 | --uc-tweak-rounded-corners-radius: 8px; 61 | --uc-tweak-rounded-corners-shadow: 0 -0.8px 0 0 rgb(0 0 0 / 0.02), 0 0.5px 1px 1px rgb(0 0 0 / 0.06), 62 | 0 1px 1px rgb(0 0 0 / 0.1); 63 | 64 | /* Different shadow for higher resolution displays. */ 65 | @media (resolution > 1.8dppx) { 66 | --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); 67 | } 68 | } 69 | 70 | /* Hide border below titlebar on macOS, as its titlebar already has a border. */ 71 | @media (-moz-platform: macos) { 72 | :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { 73 | border-top: none !important; 74 | } 75 | } 76 | 77 | /* Remove separator between toolbars and the browser window. */ 78 | #navigator-toolbox { 79 | border-bottom: none !important; 80 | } 81 | 82 | /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */ 83 | :root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser, 84 | :root[inDOMFullscreen] #browser { 85 | --uc-tweak-rounded-corners-padding: 0; 86 | --uc-tweak-rounded-corners-radius: 0; 87 | --uc-tweak-rounded-corners-shadow: unset; 88 | } 89 | 90 | #appcontent .browserStack, 91 | #tabbrowser-tabpanels .browserStack { 92 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 93 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 94 | } 95 | 96 | /* Apply rounded corners to the browser container. */ 97 | #appcontent .browserStack, 98 | #tabbrowser-tabpanels .browserStack { 99 | position: relative !important; 100 | overflow: hidden !important; 101 | } 102 | 103 | /* Devtools bottom */ 104 | #appcontent .browserStack:has(~ .devtools-toolbox-bottom-iframe), 105 | #tabbrowser-tabpanels .browserStack:has(~ .devtools-toolbox-bottom-iframe) { 106 | margin-block-end: calc(var(--uc-tweak-rounded-corners-padding) / 2); 107 | } 108 | .devtools-toolbox-bottom-iframe { 109 | margin-block-start: calc(var(--uc-tweak-rounded-corners-padding) / 2); 110 | } 111 | /* Devtools right */ 112 | #appcontent .browserContainer:not(:last-child), 113 | #tabbrowser-tabpanels .browserContainer:not(:last-child) { 114 | margin-inline-end: var(--uc-tweak-rounded-corners-padding); 115 | } 116 | /* Devtools left */ 117 | #appcontent .browserContainer:not(:first-child), 118 | #tabbrowser-tabpanels .browserContainer:not(:first-child) { 119 | margin-inline-start: var(--uc-tweak-rounded-corners-padding); 120 | } 121 | 122 | .browserContainer.responsive-mode { 123 | background-color: transparent !important; 124 | 125 | & .rdm-toolbar { 126 | border-top-left-radius: var(--uc-tweak-rounded-corners-radius) !important; 127 | border-top-right-radius: var(--uc-tweak-rounded-corners-radius) !important; 128 | } 129 | } 130 | 131 | /* Prevent status panel corners and shadow from appearing outside the browser. */ 132 | #statuspanel { 133 | overflow: hidden; 134 | } 135 | 136 | /* Apply rounded corners to sidebar. */ 137 | #sidebar-box { 138 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 139 | } 140 | 141 | /* Devtools window when docked to the left or right. */ 142 | .devtools-toolbox-side-iframe { 143 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 144 | overflow: hidden !important; 145 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 146 | } 147 | 148 | /* Devtools window when docked to the bottom. */ 149 | .devtools-toolbox-bottom-iframe { 150 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 151 | overflow: hidden !important; 152 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 153 | } 154 | 155 | /* Hide devtools splitter. */ 156 | .devtools-side-splitter, 157 | .devtools-horizontal-splitter { 158 | background-color: transparent !important; 159 | } 160 | 161 | /* Remove sidebar border when not in full screen. */ 162 | :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter { 163 | border-inline-width: 0 !important; 164 | } 165 | 166 | /* Apply colour to the frame around the browser window. */ 167 | #browser { 168 | background-color: var(--browser-frame-bgcolor); 169 | } 170 | 171 | /* Change colour of page when loading */ 172 | #tabbrowser-tabpanels { 173 | background-color: transparent !important; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /chrome/global/tweaks.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tweaks.css */ 2 | 3 | /* disable drag space above tabs */ 4 | @media (-moz-pref("uc.tweak.disable-drag-space")) { 5 | :root { 6 | --uc-tab-top-margin: 0px !important; 7 | } 8 | } 9 | 10 | /* force tabs to toolbar bg (useful for proton themes) (might experience some 11 | bugs with certain themes eg. dark text on dark background.) */ 12 | @media (-moz-pref("uc.tweak.force-tab-colour")) { 13 | :root[lwtheme] { 14 | --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; 15 | --tab-selected-textcolor: var(--toolbar-color) !important; 16 | } 17 | } 18 | 19 | /* remove tab separators */ 20 | @media (-moz-pref("uc.tweak.remove-tab-separators")) { 21 | .tabbrowser-tab .tab-stack { 22 | &::before, 23 | &::after { 24 | content: initial !important; 25 | } 26 | } 27 | } 28 | 29 | @media (-moz-pref("uc.tweak.floating-tabs")) { 30 | :root:not([lwtheme]), 31 | /* `--newtab-background-color-secondary used` to differentiate between a dark 32 | * private window and private window with the 'Dark' theme enabled. 33 | * May not be the most reliable method, but works for now up to FF 123. */ 34 | :root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) { 35 | --lwt-accent-color: light-dark(#f3f3f3, #202020) !important; 36 | --lwt-accent-color-inactive: unset !important; 37 | --toolbar-bgcolor: light-dark(#fff, #3f3f3f) !important; 38 | --lwt-tab-text: light-dark(#262626, #fff) !important; 39 | --chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important; 40 | --lwt-tab-line-color: light-dark(transparent, rgb(255 255 255 / 0.06)) !important; 41 | } 42 | 43 | @media (-moz-gtk-csd-available) { 44 | :root:not([lwtheme]) { 45 | --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important; 46 | --toolbar-field-background-color: Field !important; 47 | --lwt-tab-text: -moz-dialogtext !important; 48 | --lwt-tab-line-color: rgb(255 255 255 / 0.06) !important; 49 | --lwt-accent-color: var(--toolbox-non-lwt-bgcolor) !important; 50 | 51 | &:-moz-window-inactive { 52 | --lwt-accent-color: var(--toolbox-non-lwt-bgcolor-inactive) !important; 53 | } 54 | } 55 | } 56 | 57 | /* Shadow for navbar and tabs */ 58 | :root, 59 | :root .tabbrowser-tab { 60 | --uc-titlebar-shadow: none; 61 | --uc-tab-shadow-outline: rgb(0 0 0 / 0.11); 62 | --uc-tab-shadow: 0 2.5px 3px 1px rgb(0 0 0 / 0.08); 63 | 64 | & [brighttext], 65 | & [brighttext] .tabbrowser-tab { 66 | --uc-titlebar-shadow: none; 67 | --uc-tab-shadow-outline: transparent; 68 | --uc-tab-shadow: 0 2px 3px rgb(0 0 0 / 0.12); 69 | } 70 | 71 | & #TabsToolbar { 72 | --tab-border-radius: 8px !important; 73 | } 74 | } 75 | 76 | /* invert bottom corner radius for tabs */ 77 | .tab-background { 78 | border-radius: var(--tab-border-radius) !important; 79 | 80 | &::before, 81 | &::after { 82 | display: none !important; 83 | } 84 | } 85 | 86 | .tab-background[selected] { 87 | border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)) !important; 88 | outline: 1px solid var(--uc-tab-shadow-outline) !important; 89 | 90 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 91 | @media (1dppx < resolution < 2dppx) { 92 | outline-width: 1.5px !important; 93 | } 94 | } 95 | 96 | /* adjust spacing of area above tabs */ 97 | @media not (-moz-platform: macos) { 98 | :root[sizemode="maximized"] { 99 | --uc-tab-top-margin: 4px !important; 100 | } 101 | } 102 | 103 | :root:is([inFullscreen], [drawtitle]) { 104 | --uc-tab-top-margin: 4px !important; 105 | } 106 | 107 | @media (-moz-pref("uc.tweak.disable-drag-space")) { 108 | :root { 109 | --uc-tab-top-margin: 4px !important; 110 | } 111 | } 112 | 113 | /* IMPORTANT: Adds padding and removes margin on top of tabs to allow user to 114 | * select it from the top edge of the window */ 115 | #tabbrowser-tabs { 116 | margin-top: calc(var(--uc-tab-top-margin) - 4px) !important; 117 | 118 | & .tabbrowser-tab, 119 | & #tabs-newtab-button { 120 | padding-top: 4px !important; 121 | } 122 | } 123 | 124 | #scrollbutton-up:not(.menupopup-scrollbutton), 125 | #scrollbutton-down:not(.menupopup-scrollbutton) { 126 | &, 127 | & ~ spacer { 128 | margin-top: 4px !important; 129 | } 130 | } 131 | 132 | /* move tab shadow behind urlbar */ 133 | .tabbrowser-tab[visuallyselected="true"], 134 | #nav-bar { 135 | z-index: 2 !important; 136 | } 137 | 138 | /* tab shadow adjustments */ 139 | .tabbrowser-tab { 140 | overflow-clip-margin: 8px !important; 141 | } 142 | 143 | #tabbrowser-arrowscrollbox > *, 144 | #scrollbutton-up:not(.menupopup-scrollbutton), 145 | #scrollbutton-up:not(.menupopup-scrollbutton) ~ spacer, 146 | #scrollbutton-down:not(.menupopup-scrollbutton) { 147 | margin-bottom: 8px !important; 148 | } 149 | 150 | #tabbrowser-arrowscrollbox { 151 | margin-bottom: -8px !important; 152 | } 153 | } 154 | 155 | @media (not (-moz-platform: macos)) and (not (-moz-pref("uc.tweak.revert-context-menu"))) { 156 | @media (-moz-pref("uc.tweak.vertical-context-navigation")) { 157 | #context-navigation { 158 | /* Stack menu items vertically. */ 159 | flex-direction: column !important; 160 | 161 | /* Align the image and label to the left edge. */ 162 | & > .menuitem-iconic { 163 | justify-content: start !important; 164 | 165 | &::after { 166 | /* Get the menuitem label from the aria-label attribute. */ 167 | content: attr(aria-label); 168 | } 169 | } 170 | } 171 | } 172 | } 173 | 174 | @media (-moz-pref("uc.tweak.context-menu.hide-access-key")) { 175 | :where(menuitem, menu) > :is(.menu-text, .menu-iconic-text)[value]:not([value=""]) { 176 | &::before { 177 | /* The default value is -moz-label-content, which takes the data from the 178 | * value attribute and highlights the character found in the accesskey 179 | * attribute. This skips that and uses the value attribute directly. */ 180 | content: attr(value) !important; 181 | } 182 | } 183 | } 184 | 185 | @media (-moz-pref("uc.tweak.show-tab-close-button-on-hover")) { 186 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button { 187 | display: flex !important; 188 | } 189 | } 190 | 191 | @media (-moz-pref("uc.tweak.hide-forward-button")) { 192 | :root:not([customizing]) #forward-button[disabled] { 193 | display: none !important; 194 | } 195 | } 196 | 197 | @media (-moz-pref("uc.tweak.context-menu.hide-firefox-account")) { 198 | #appMenu-fxa-status2, 199 | #appMenu-fxa-separator { 200 | display: none !important; 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /chrome/toolbar/urlbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - urlbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Variables */ 5 | :root { 6 | --urlbar-toolbar-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; 7 | --urlbar-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 8 | --urlbar-min-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 9 | --urlbarView-item-inline-padding: calc( 10 | 1px + var(--uc-urlbar-inline-padding) + var(--uc-urlbar-icon-inline-padding) 11 | ) !important; 12 | --urlbar-icon-border-radius: 99px !important; 13 | --urlbar-margin-inline: 6px !important; 14 | --identity-box-margin-inline: 6px !important; 15 | --uc-urlbar-icon-inline-padding: var(--uc-toolbarbutton-inner-inline-padding); 16 | --uc-urlbar-inline-padding: 5px; 17 | --uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / 0.1); 18 | --urlbarView-rich-suggestion-default-icon-size: 32px !important; 19 | 20 | /* urlbar height */ 21 | & #urlbar-container { 22 | --urlbar-container-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; 23 | } 24 | 25 | /* Spacing for urlbar suggestion icons. */ 26 | .urlbarView-row { 27 | --urlbarView-icon-margin-start: 0px !important; 28 | --urlbarView-icon-margin-end: calc( 29 | var(--uc-urlbar-icon-inline-padding) + var(--identity-box-margin-inline) 30 | ) !important; 31 | } 32 | } 33 | 34 | /* Appearance for URL bar. */ 35 | #urlbar-background, 36 | #searchbar { 37 | border-radius: calc(var(--urlbar-icon-border-radius) + 2px) !important; 38 | 39 | /* Shadow for URL bar, only appears in light mode. */ 40 | :root:not([lwtheme]) #nav-bar:not([brighttext]) & { 41 | box-shadow: var(--uc-urlbar-shadow, none); 42 | } 43 | 44 | /* Appearance when the URL bar is expanded. */ 45 | #urlbar[open] & { 46 | :root:not([lwtheme]) & { 47 | outline-color: var(--panel-separator-color) !important; 48 | } 49 | } 50 | } 51 | 52 | /* Add padding to sides of URL bar. */ 53 | #urlbar-input-container, 54 | #searchbar { 55 | padding-inline: var(--uc-urlbar-inline-padding) !important; 56 | } 57 | 58 | /* URL bar suggestions container. */ 59 | .urlbarView { 60 | margin-inline: 0 !important; 61 | width: 100% !important; 62 | padding-block: 0 !important; 63 | 64 | & .urlbarView-body-inner { 65 | width: 100% !important; 66 | margin-inline: 0 !important; 67 | } 68 | 69 | /* Remove padding from top of URL bar results, not needed as URL bar input already has padding. */ 70 | & .urlbarView-results { 71 | padding-block-start: 0 !important; 72 | } 73 | } 74 | 75 | /* URL bar item. */ 76 | .urlbarView-row { 77 | padding-block: 0 !important; 78 | border: none !important; 79 | border-radius: 0 !important; 80 | 81 | & .urlbarView-row-inner { 82 | padding-block: 8px !important; 83 | } 84 | 85 | /* Vertically align search suggestion thumbnail images. */ 86 | &[rich-suggestion] > .urlbarView-row-inner > .urlbarView-favicon { 87 | margin-inline-start: calc( 88 | var(--urlbarView-icon-margin-start) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2 89 | ) !important; 90 | margin-inline-end: calc( 91 | var(--urlbarView-icon-margin-end) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2 92 | ) !important; 93 | } 94 | } 95 | 96 | /* Add highlighted marker to the left of selected URL bar items. */ 97 | .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, 98 | .urlbarView-row-inner[selected] { 99 | box-shadow: 3px 0 var(--uc-urlbarView-accent-color, var(--toolbar-field-focus-border-color)) inset !important; 100 | } 101 | 102 | /* Search engine selector */ 103 | .search-one-offs:not([hidden]) { 104 | padding-block: 6px !important; 105 | 106 | & .searchbar-engine-one-off-item { 107 | min-width: 30px !important; 108 | height: 30px !important; 109 | } 110 | 111 | .urlbarView:not([noresults]) > & { 112 | border-color: var(--urlbarView-separator-color) !important; 113 | } 114 | 115 | #urlbar-anon-search-settings { 116 | margin-inline-end: 8px !important; 117 | } 118 | } 119 | 120 | /* Search engine indicator. */ 121 | #urlbar-search-mode-indicator { 122 | :root:not([lwtheme]) & { 123 | background-color: var(--urlbar-box-hover-bgcolor) !important; 124 | } 125 | 126 | & #urlbar-search-mode-indicator-title { 127 | font-size: 0.9em !important; 128 | } 129 | } 130 | 131 | /* Remove border between URL bar input and suggestions. */ 132 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { 133 | border-top: 0 !important; 134 | } 135 | 136 | /* Zoom level and tab container indicators. */ 137 | #userContext-icons, 138 | #urlbar-zoom-button { 139 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 140 | margin-block: 0 !important; 141 | margin-inline: 0 !important; 142 | } 143 | 144 | /* Move tracking protection button. */ 145 | #tracking-protection-icon-container, 146 | #page-action-buttons { 147 | order: 2 !important; 148 | } 149 | 150 | /* Hide tracking protection button when not hovering over URL bar. */ 151 | #urlbar:not(:hover) #tracking-protection-icon-container:not([open]) { 152 | visibility: collapse !important; 153 | } 154 | 155 | /* Focus border for URL bar. */ 156 | #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, 157 | #searchbar:focus-within { 158 | outline-offset: calc(var(--focus-outline-width) * -1 + 1px) !important; 159 | } 160 | 161 | /* Pin icon for URL bar suggested sites. */ 162 | .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { 163 | fill: var(--toolbar-field-color) !important; 164 | } 165 | 166 | #urlbar-input::placeholder, 167 | .searchbar-textbox::placeholder { 168 | opacity: 0.6 !important; 169 | } 170 | 171 | /* Make the lock icon brighter in dark mode. */ 172 | #nav-bar[brighttext] #identity-box:not([pageproxystate="invalid"]) #identity-icon { 173 | fill-opacity: calc(var(--urlbar-icon-fill-opacity) * 1.8) !important; 174 | } 175 | 176 | /* Make the URL bar label opaque in light mode, matching the icons. */ 177 | #nav-bar:not([brighttext]) #identity-box #identity-icon-label { 178 | opacity: var(--urlbar-icon-fill-opacity) !important; 179 | } 180 | 181 | /* Label on the left of the URL bar, shown when viewing Firefox or extension pages. */ 182 | #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button { 183 | position: relative; 184 | width: unset !important; 185 | 186 | /* Spacing between the icon and label. */ 187 | & #identity-icon-label { 188 | padding-inline-start: 8px !important; 189 | } 190 | 191 | /* Separator to the right of the label. */ 192 | &::after { 193 | content: ""; 194 | position: absolute; 195 | height: 16px; 196 | border-right: 1px solid currentColor; 197 | right: 0; 198 | inset-block: 0; 199 | margin-block: auto; 200 | opacity: 0; 201 | } 202 | 203 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 204 | @media (1dppx < resolution < 2dppx) { 205 | &::after { 206 | border-right-width: 1.5px !important; 207 | } 208 | } 209 | 210 | /* Remove background from urlbar box. */ 211 | &:not(:hover, [open]) { 212 | background-color: transparent !important; 213 | 214 | /* Separator opacity */ 215 | &::after { 216 | opacity: 0.375; 217 | } 218 | } 219 | 220 | /* Fade transition for separator. */ 221 | @media not (prefers-reduced-motion) { 222 | &::after { 223 | transition: opacity 0.2s ease; 224 | } 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/urlbar-tweaks.css: -------------------------------------------------------------------------------- 1 | /*urlbar stuff*/ 2 | @media (-moz-pref("af.edgyarc.centered-url")) { 3 | #urlbar:not([breakout][breakout-extend]) { 4 | #urlbar-input { 5 | text-align: center !important; 6 | } 7 | } 8 | } 9 | 10 | #urlbar:not([breakout][breakout-extend]) { 11 | #urlbar-background { 12 | background-color: color-mix( 13 | in srgb, 14 | light-dark(#fff, var(--lwt-accent-color)) 70%, 15 | light-dark(rgba(255, 255, 255, 0.5), rgba(35, 35, 35, 0.5)) 16 | ) !important; 17 | @media not (-moz-pref("af.edgyarc.edge-sidebar")) { 18 | background-color: color-mix( 19 | in srgb, 20 | light-dark(#fff, var(--lwt-accent-color)) 50%, 21 | light-dark(rgba(255, 255, 255, 0.5), rgba(10, 10, 10, 0.8)) 22 | ) !important; 23 | } 24 | @media (-moz-pref("af.edgyarc.macos-translucent")) { 25 | background-color: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.24)) !important; 26 | } 27 | } 28 | } 29 | 30 | /*----urlbar buttons height fix------*/ 31 | /*page actions*/ 32 | :root { 33 | --urlbar-container-padding: 2px !important; 34 | --urlbar-icon-size: 15px !important; 35 | --urlbar-icon-padding: calc( 36 | (var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding) - var(--urlbar-icon-size)) / 2 37 | ) !important; 38 | } 39 | .urlbar-page-action { 40 | & .urlbar-icon { 41 | height: var(--urlbar-icon-size) !important; 42 | width: var(--urlbar-icon-size) !important; 43 | } 44 | } 45 | 46 | /* Zoom level and tab container indicators. */ 47 | #userContext-icons, 48 | #urlbar-zoom-button { 49 | --uc-urlbar-icon-inline-padding: 8px !important; 50 | max-height: 20px !important; 51 | height: 20px !important; 52 | padding: 4px 4px 4px 6px !important; 53 | margin-inline: 3px !important; 54 | font-size: 0.8em; 55 | border-radius: var(--urlbar-icon-border-radius); 56 | margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding)); 57 | } 58 | 59 | #urlbar-zoom-button { 60 | order: 98; 61 | } 62 | 63 | #userContext-icons { 64 | order: 99; 65 | 66 | & #userContext-indicator { 67 | transform: scale(0.75) !important; 68 | } 69 | } 70 | 71 | #identity-box, 72 | #tracking-protection-icon-container { 73 | opacity: 0.7 !important; 74 | } 75 | 76 | #page-action-buttons .urlbar-page-action:not([open]) { 77 | opacity: 0.7 !important; 78 | } 79 | 80 | /*only show urlbar buttons on hover*/ 81 | #urlbar:not(:hover) #page-action-buttons .urlbar-page-action:not([open]) { 82 | opacity: 0 !important; 83 | } 84 | 85 | #urlbar[breakout][breakout-extend] { 86 | z-index: 600 !important; 87 | } 88 | 89 | .urlbar-input-box { 90 | margin-top: -2px !important; 91 | } 92 | 93 | /*customise urlbar background*/ 94 | #urlbar-background, 95 | #searchbar { 96 | border: var(--af-content-border) !important; 97 | opacity: 0.8 !important; 98 | min-height: 28px !important; 99 | padding-top: 4px; 100 | } 101 | 102 | #urlbar[breakout][breakout-extend] { 103 | #urlbar-background { 104 | opacity: 1 !important; 105 | /*todo - add blurring behind expanded urlbar-background - idfk how to*/ 106 | 107 | &::before { 108 | opacity: 0 !important; 109 | } 110 | } 111 | } 112 | 113 | .urlbar-input-box { 114 | margin-top: -2px !important; 115 | } 116 | 117 | #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { 118 | animation: none !important; 119 | } 120 | 121 | /*minimal navbar mod*/ 122 | 123 | @media (-moz-pref("af.edgyarc.minimal-navbar")) { 124 | :root[windowtype="navigator:browser"]:not([customizing]) #nav-bar.browser-toolbar { 125 | &:not(:hover) { 126 | .toolbarbutton-icon, 127 | .webextension-browser-action, 128 | #downloads-button { 129 | opacity: 0 !important; 130 | transition: opacity 0ms linear !important; 131 | } 132 | #urlbar:not([breakout-extend][focused]) { 133 | #identity-icon-box, 134 | #identity-permission-box, 135 | .notification-anchor-icon, 136 | #tracking-protection-icon-container, 137 | #star-button, 138 | #page-action-buttons, 139 | #fxa-toolbar-menu-button, 140 | #urlbar-background { 141 | opacity: 0 !important; 142 | transition: opacity 0ms linear !important; 143 | } 144 | } 145 | } 146 | } 147 | } 148 | 149 | @media (-moz-pref("af.edgyarc.thin-navbar")) { 150 | /*Thin Navbar mod*/ 151 | 152 | :root[windowtype="navigator:browser"] { 153 | --urlbar-toolbar-height: 28px !important; 154 | --urlbar-height: 30px !important; 155 | --urlbar-min-height: 30px !important; 156 | 157 | #nav-bar { 158 | font-size: 1em !important; 159 | --toolbarbutton-border-radius: 4px !important; 160 | --toolbarbutton-inner-padding: 4px !important; 161 | --uc-toolbarbutton-inner-inline-padding: 8px !important; 162 | --toolbarbutton-outer-padding: 2px; 163 | 164 | height: 30px !important; 165 | max-height: 30px !important; 166 | } 167 | 168 | #identity-box > .identity-box-button { 169 | &::after { 170 | content: ""; 171 | position: absolute; 172 | height: 16px; 173 | border-right: 1px solid rgba(100, 100, 100, 0.6); 174 | right: 0; 175 | inset-block: 0; 176 | margin-block: auto; 177 | opacity: 0; 178 | } 179 | } 180 | 181 | #urlbar { 182 | #identity-box { 183 | padding-top: 0 !important; 184 | #identity-icon-label { 185 | margin-top: 0px !important; 186 | font-size: 0.9em !important; 187 | } 188 | } 189 | 190 | #identity-box, 191 | #tracking-protection-icon-container, 192 | #page-action-buttons { 193 | /* This should be possible to fix without hardcoding, but I admit defeat */ 194 | margin-top: -1px !important; 195 | } 196 | } 197 | 198 | #urlbar { 199 | &[breakout-extend][focused] { 200 | #urlbar-background { 201 | margin-top: 2px !important; 202 | } 203 | } 204 | &:not([breakout-extend][focused]) { 205 | #urlbar-background { 206 | background-color: transparent !important; 207 | opacity: 1 !important; 208 | border: 0 !important; 209 | border-radius: 8px !important; 210 | box-shadow: none !important; 211 | margin: 0px !important; 212 | top: 0px !important; 213 | 214 | &::before { 215 | opacity: 1; 216 | content: ""; 217 | position: absolute; 218 | border-left: 1px solid rgba(160, 160, 160, 0.3) !important; 219 | border-right: 1px solid rgba(160, 160, 160, 0.3) !important; 220 | height: 18px !important; 221 | width: 100% !important; 222 | margin: 0 !important; 223 | top: 6px !important; 224 | bottom: 3px !important; 225 | } 226 | } 227 | } 228 | } 229 | 230 | .urlbar-input-box { 231 | margin-top: -2px !important; 232 | } 233 | 234 | /*Windows specific positioning*/ 235 | 236 | @media (-moz-platform: windows) { 237 | .titlebar-buttonbox-container { 238 | z-index: 999 !important; 239 | } 240 | 241 | .titlebar-button.titlebar-restore, 242 | .titlebar-button.titlebar-close, 243 | .titlebar-button.titlebar-min, 244 | .titlebar-button.titlebar-max, 245 | .titlebar-button.titlebar-button, 246 | .titlebar-button { 247 | padding: 0 15px !important; 248 | height: 24px !important; 249 | border-radius: 6px !important; 250 | margin: 3px 4px !important; 251 | } 252 | } 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /chrome/EdgyArc-fr/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | Styles by PritCee (@pritceeart) 3 | Twitter: https://twitter.com/pritceeart 4 | 5 | This CSS is open source and editable, and reusable in non-commercial projects. 6 | Feel free to use, adapt, and elevate as needed. No support is provided, and your creativity is the limit. 7 | 8 | Parts of the code were adapted from Edge FrFox (GitHub: https://github.com/edgefrfox) 9 | and MrOtherGuy's Firefox Tweaks (GitHub: https://github.com/MrOtherGuy/firefox-csshacks). 10 | 11 | Remember to respect the original authors' work and adhere to their licenses. 12 | */ 13 | 14 | /* Import external styles */ 15 | @import url("autohide-sidebar-modified.css") not (-moz-pref("af.edgyarc.autohide-sidebar-slide")); 16 | @import url("autohide-sidebar-slide.css") (-moz-pref("af.edgyarc.autohide-sidebar-slide")); 17 | 18 | @import url("translucent-base.css"); 19 | @import url("translucent-arc.css"); 20 | @import url("urlbar-tweaks.css"); 21 | @import url("not-edge-sidebar.css") not (-moz-pref("af.edgyarc.edge-sidebar")); 22 | @import url("edge-sidebar.css") (-moz-pref("af.edgyarc.edge-sidebar")); 23 | /*Other tweaks*/ 24 | @import url("icons.css"); 25 | @import url("sidebar-revamp.css") (-moz-pref("sidebar.revamp")); 26 | 27 | /*variables*/ 28 | @media (-moz-pref("uc.tweak.floating-tabs")) { 29 | :root:not([lwtheme]), 30 | :root[privatebrowsingmode="temporary"]:where( 31 | [style*="--lwt-accent-color: rgb(28, 27, 34)"]:not( 32 | [style*="--newtab-background-color-secondary: rgb(66, 65, 77)"] 33 | ) 34 | ) { 35 | --lwt-accent-color: light-dark(#ececec, #282828) !important; 36 | } 37 | } 38 | 39 | :root { 40 | --af-bg-transition: background-color 0ms linear !important; 41 | --af-content-border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(220, 220, 220, 0.2)); 42 | --af-content-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); 43 | --urlbar-icon-border-radius: 5px !important; 44 | --toolbarbutton-border-radius: 8px !important; 45 | --toolbarbutton-inner-padding: 8px !important; 46 | --uc-toolbarbutton-inner-inline-padding: 8px !important; 47 | --toolbarbutton-outer-padding: 2px !important; 48 | --tabs-navbar-shadow-size: 0px !important; 49 | --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.6), rgba(180, 180, 180, 0.4)) !important; 50 | --uc-titlebar-drag-space: 8px !important; 51 | --uc-sidebar-shadow: 0px 0px 0px 1px light-dark(rgba(0, 0, 0, 0.2), rgba(200, 200, 200, 0.4)), 52 | 0px 0px 18px 4px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)); 53 | 54 | /* Make corners more rounded */ 55 | @media (-moz-pref("uc.tweak.rounded-corners")) { 56 | --uc-tweak-rounded-corners-padding: 8px !important; 57 | --uc-tweak-rounded-corners-radius: 7px !important; 58 | } 59 | 60 | /* String for the custom label. */ 61 | --uc-string-private: "Private"; 62 | } 63 | 64 | :root, 65 | #navigator-toolbox::before, 66 | .browserContainer::before, 67 | #sidebar-box { 68 | transition: var(--af-bg-transition) !important; 69 | } 70 | 71 | /* Fixes for Firefox to enable autohide */ 72 | #sidebar-box { 73 | overflow: visible !important; 74 | position: relative !important; 75 | } 76 | 77 | /* Styles for .sidebar-splitter */ 78 | .sidebar-splitter { 79 | border-color: rgba(0, 0, 0, 0) !important; 80 | &:hover { 81 | border-radius: 20px; 82 | margin-top: 30px; 83 | margin-bottom: 30px; 84 | background-color: var(--urlbar-box-active-bgcolor) !important; 85 | transition: background-color 200ms ease-in-out; 86 | } 87 | } 88 | 89 | /*sidebar header*/ 90 | 91 | #sidebar-header { 92 | & * { 93 | font-size: 0.94em !important; 94 | } 95 | @media (-moz-pref("af.edgyarc.bottom-sidebar-header")) { 96 | order: 4 !important; 97 | @media not (-moz-pref("af.edgyarc.edge-sidebar")) { 98 | #sidebar-switcher-target { 99 | margin-bottom: 10px !important; 100 | } 101 | } 102 | @media (-moz-pref("af.edgyarc.edge-sidebar")) { 103 | } 104 | } 105 | @media not (-moz-pref("af.edgyarc.show-sidebar-header")) { 106 | visibility: collapse !important; /*hide sidebar by default*/ 107 | } 108 | 109 | #sidebar-switcher-target { 110 | border-radius: 5px !important; 111 | } 112 | /*remove sidebar elements*/ 113 | & #sidebar-close { 114 | display: none !important; 115 | } 116 | 117 | #sidebar-throbber, 118 | #sidebar-spacer { 119 | display: none !important; 120 | } 121 | } 122 | 123 | :root:not([customizing]) { 124 | &:has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])), 125 | &:has(#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])), 126 | &:has(#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) { 127 | &:not([drawtitle]) #nav-bar { 128 | --uc-tab-top-margin: 0px; 129 | } 130 | } 131 | 132 | @media (-moz-pref("uc.tweak.hide-tabs-bar.always")) { 133 | &:not([drawtitle]) #nav-bar { 134 | --uc-tab-top-margin: 0px; 135 | } 136 | } 137 | } 138 | 139 | /*sidebar header rounded container*/ 140 | #sidebar-switcher-target { 141 | padding: 5px !important; 142 | margin: auto 2px !important; 143 | opacity: 0.8 !important; 144 | 145 | &:hover { 146 | border: var(--af-content-border) !important; 147 | } 148 | } 149 | 150 | /* indicator for private browsing mode with tabs hidden */ 151 | 152 | :root[privatebrowsingmode="temporary"] { 153 | /*remove the default label*/ 154 | #private-browsing-indicator-with-label { 155 | display: none !important; 156 | } 157 | #nav-bar::after { 158 | content: var(--uc-string-private); 159 | display: flex; 160 | align-items: center; 161 | justify-content: center; 162 | width: 60px; 163 | height: 20px; 164 | background-color: purple; 165 | color: white; 166 | opacity: 0.6; 167 | position: absolute; 168 | top: calc(50% - 10px); 169 | pointer-events: none !important; 170 | } 171 | 172 | @media (-moz-platform: macos) { 173 | /*make space in nav bar for the private window label*/ 174 | #nav-bar { 175 | padding-right: 70px !important; 176 | &::after { 177 | /*priv win label*/ 178 | right: 8px; 179 | border-radius: 4px; 180 | } 181 | } 182 | } 183 | @media (-moz-platform: windows) { 184 | #nav-bar { 185 | padding-left: 70px !important; 186 | &::after { 187 | /*priv win label*/ 188 | left: 8px; 189 | border-radius: 4px; 190 | } 191 | } 192 | } 193 | } 194 | 195 | /*fade toolbar background image for lwthemes - goes really great with Firefox Color setups!*/ 196 | #navigator-toolbox { 197 | border-bottom: none !important; 198 | 199 | :root[lwtheme] & { 200 | background-image: none !important; /*remove the background image from the actual toolbox*/ 201 | &::after { 202 | content: ""; 203 | position: absolute; 204 | top: 0; 205 | left: 0; 206 | width: 100%; 207 | height: 100%; 208 | z-index: 2 !important; 209 | pointer-events: none; 210 | mask-image: linear-gradient( 211 | to bottom, 212 | rgba(0, 0, 0, 0.8) 10%, 213 | rgba(0, 0, 0, 0.4) 40%, 214 | rgba(0, 0, 0, 0.1) 65%, 215 | rgba(0, 0, 0, 0) 85% 216 | ); 217 | background-image: var(--lwt-additional-images) !important; 218 | background-repeat: var(--lwt-background-tiling); 219 | background-position: var(--lwt-background-alignment); 220 | opacity: 1 !important; 221 | } 222 | } 223 | } 224 | 225 | /* remove toolbar bg */ 226 | #nav-bar, 227 | #PersonalToolbar, 228 | /*remove tab panel bg*/ 229 | #tabbrowser-tabpanels { 230 | background-color: transparent !important; 231 | } 232 | /*remove banner notification bg*/ 233 | #tab-notification-deck .notificationbox-stack { 234 | background-color: transparent !important; 235 | padding: 8px !important; 236 | } 237 | 238 | /*make sure sidebar expand animation look and feel less jank*/ 239 | #webextpanels-window { 240 | background-color: transparent !important; 241 | } 242 | 243 | /*add padding to toolbar items*/ 244 | .panel-no-padding { 245 | padding: 2px !important; 246 | } 247 | 248 | /* macOS specific positioning */ 249 | @media (-moz-platform: macos) { 250 | /* Offset navbar contents to make space for the window controls */ 251 | &:not([drawtitle]):not([inFullscreen]) #nav-bar { 252 | padding-left: calc(0px + var(--uc-titlebar-drag-space)) !important; 253 | 254 | /* Remove the padding from the side of the navbar */ 255 | & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child { 256 | padding-inline-start: 0px !important; 257 | } 258 | } 259 | } 260 | 261 | /*Windows specific positioning*/ 262 | @media (-moz-platform: windows) { 263 | .titlebar-buttonbox-container { 264 | z-index: 999 !important; 265 | } 266 | .titlebar-button { 267 | padding: 0 15px !important; 268 | height: 32px !important; 269 | border-radius: 6px !important; 270 | margin: 4px !important; 271 | } 272 | :root[sizemode="normal"]:not([drawtitle]):not([inFullscreen]) .titlebar-button { 273 | margin-top: 5px !important; 274 | } 275 | #urlbar, 276 | #urlbar[breakout][breakout-extend] { 277 | z-index: 600 !important; 278 | } 279 | } 280 | 281 | .browserContainer > findbar, 282 | .browserContainer > .devtools-toolbox-bottom-iframe { 283 | z-index: 2 !important; 284 | } 285 | 286 | .infobar { 287 | background-color: light-dark(rgba(255, 255, 255, 1), rgba(30, 30, 30, 0.6)) !important; 288 | &::before { 289 | opacity: 0.6 !important; 290 | } 291 | } 292 | 293 | #commonDialogWindow { 294 | background-color: var(--arrowpanel-background) !important; 295 | } 296 | 297 | #tab-notification-deck .notificationbox-stack { 298 | padding: 0px !important; 299 | } 300 | 301 | /*make sure sidebar expand animation look and feel less jank*/ 302 | #webextpanels-window { 303 | background-color: transparent !important; 304 | } 305 | 306 | .findbar-textbox { 307 | background-color: light-dark(rgba(255, 255, 255, 0.8), rgba(20, 20, 20, 0.6)) !important; 308 | } 309 | 310 | .browserContainer > findbar { 311 | :root[lwtheme] & { 312 | background-image: none !important; 313 | } 314 | } 315 | 316 | .dialogFrame { 317 | background-color: var(--arrowpanel-background) !important; 318 | } 319 | 320 | /* Prevent pages from being completely transparent */ 321 | .browserStack > browser { 322 | background-color: var(--lwt-accent-color); 323 | } 324 | -------------------------------------------------------------------------------- /chrome/tweaks/sidebery.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - sidebery.css 2 | * https://github.com/bmFtZQ/edge-frfox 3 | */ 4 | 5 | /* This file needs to loaded into userContent.css so the @media rules can be 6 | * used for automatic tweaks configuration. */ 7 | 8 | /* Since the UUIDs are randomly generated, only a generic path can be specified, 9 | * this can cause conflicts with other extensions that use the same file 10 | * structure, but is unlikely to cause any major issues. */ 11 | @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") 12 | { 13 | /* Fix issues with rounded corners rendering. */ 14 | :root { 15 | color-scheme: light dark !important; 16 | background: light-dark(#aaa, #222) !important; 17 | } 18 | 19 | /* On macOS, ensure that text is rendered correctly. */ 20 | body { 21 | -moz-osx-font-smoothing: auto !important; 22 | } 23 | 24 | /* ::::: Default theme colours ::::: */ 25 | /* macOS light mode. */ 26 | body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"], 27 | /* macOS dark mode. */ 28 | body[style*="--s-frame-bg: rgb(30, 30, 30)"], 29 | /* Windows light mode. */ 30 | body[style*="--s-frame-bg: rgb(240, 240, 240)"], 31 | /* Windows dark mode. */ 32 | body[style*="--s-frame-bg: rgb(35, 34, 43)"], 33 | /* No theme enabled. */ 34 | body:not([style*="--s-frame-bg"]) { 35 | --s-frame-bg: light-dark(#cecece, #1c1c1c) !important; 36 | --s-frame-fg: light-dark(#000, #fff) !important; 37 | --s-toolbar-bg: light-dark(#f7f7f7, #3b3b3b) !important; 38 | --s-toolbar-fg: light-dark(#252525, #fff) !important; 39 | --s-act-el-bg: light-dark(#fff, #4d4d4d) !important; 40 | --s-act-el-fg: light-dark(#000, #fff) !important; 41 | --s-act-el-border: transparent !important; 42 | --s-popup-bg: light-dark(#fff, #4a4a4a) !important; 43 | --s-popup-fg: light-dark(#1c1c1c, #fff) !important; 44 | --s-popup-border: light-dark(#dadada, #636363) !important; 45 | --s-accent: light-dark(#0078d4, #63ade5) !important; 46 | } 47 | 48 | /* Linux/GTK support, side effect: Firefox themes do not work. */ 49 | @media (-moz-gtk-csd-available) { 50 | body:not([style*="--s-frame-bg"]) { 51 | --s-frame-bg: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important; 52 | --s-frame-fg: CaptionText !important; 53 | --s-toolbar-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important; 54 | --s-toolbar-fg: -moz-dialogtext !important; 55 | --s-act-el-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 80%, white)) !important; 56 | --s-act-el-fg: -moz-dialogtext !important; 57 | --s-act-el-border: transparent !important; 58 | --s-popup-bg: Field !important; 59 | --s-popup-fg: FieldText !important; 60 | --s-popup-border: light-dark(transparent, color-mix(in srgb, currentColor 17%, Field)) !important; 61 | --s-accent: AccentColor !important; 62 | } 63 | } 64 | 65 | /* ::::: Variables ::::: */ 66 | #root.root { 67 | --frame-bg: var(--s-toolbar-bg) !important; 68 | --frame-fg: var(--s-toolbar-fg) !important; 69 | --general-margin: 4px !important; 70 | --tabs-font: 12px system-ui !important; 71 | --tabs-height: 32px !important; 72 | --tabs-pinned-width: 32px !important; 73 | --tabs-pinned-height: 32px !important; 74 | --tabs-close-btn-margin: 8px !important; 75 | --ntb-btn-height: 32px !important; 76 | --tabs-inner-gap: 8px !important; 77 | --tabs-border-radius: 4px !important; 78 | --general-border-radius: 4px !important; 79 | --tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / 0.18), 0 0px 2px rgb(0 0 0 / 0.19) !important; 80 | --tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 87%, transparent) !important; 81 | --nav-btn-height: 32px !important; 82 | --nav-btn-width: 32px !important; 83 | --separator-color: color-mix(in srgb, var(--frame-fg) 20%, transparent) !important; 84 | --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; 85 | 86 | /* Light mode adjustments. */ 87 | &[data-frame-color-scheme="light"] { 88 | color-scheme: light !important; 89 | --tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 82%, transparent) !important; 90 | } 91 | 92 | /* Dark mode adjustments. */ 93 | &[data-frame-color-scheme="dark"] { 94 | color-scheme: dark !important; 95 | --tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / 0.44), 0 0px 2px rgb(0 0 0 / 0.47) !important; 96 | --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; 97 | } 98 | 99 | @media (-moz-pref("uc.tweak.rounded-corners")) { 100 | --tabs-border-radius: 8px !important; 101 | } 102 | } 103 | 104 | /* ::::: Floating tabs adjustments ::::: */ 105 | @media (-moz-pref("uc.tweak.floating-tabs")) { 106 | body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"], 107 | body[style*="--s-frame-bg: rgb(30, 30, 30)"], 108 | body[style*="--s-frame-bg: rgb(240, 240, 240)"], 109 | body[style*="--s-frame-bg: rgb(35, 34, 43)"], 110 | body:not([style*="--s-frame-bg"]) { 111 | --s-frame-bg: light-dark(#f3f3f3, #202020) !important; 112 | --s-act-el-bg: light-dark(#fff, #3f3f3f) !important; 113 | --s-act-el-border: light-dark(transparent, rgb(255 255 255 / 0.06)) !important; 114 | } 115 | 116 | #root.root { 117 | --frame-bg: var(--s-frame-bg) !important; 118 | --frame-fg: var(--s-frame-fg) !important; 119 | 120 | --toolbar-bg: var(--s-frame-bg) !important; 121 | --toolbar-fg: var(--s-frame-fg) !important; 122 | --s-toolbar-bg: light-dark(#f3f3f3, #202020) !important; 123 | --tabs-activated-shadow: 0 2.5px 3px 1px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.11) !important; 124 | --tabs-border-radius: 8px !important; 125 | 126 | &[data-frame-color-scheme="dark"] { 127 | --tabs-activated-shadow: 0 2px 3px rgb(0 0 0 / 0.12) !important; 128 | } 129 | } 130 | } 131 | 132 | /* ::::: Tabs appearance ::::: */ 133 | 134 | .Tab { 135 | /* Active tab border. */ 136 | &[data-active="true"] .body { 137 | outline: 1px solid var(--s-act-el-border, transparent) !important; 138 | outline-offset: -1px !important; 139 | } 140 | 141 | /* Close button border radius. */ 142 | & .close { 143 | border-radius: 4px !important; 144 | } 145 | 146 | /* Make sure that tab icons use full opacity. */ 147 | & .fav svg { 148 | opacity: 1 !important; 149 | } 150 | 151 | /* Adjust spacing between tab icons and labels. */ 152 | & .title { 153 | padding-inline: 0 !important; 154 | } 155 | 156 | /* Colourised tab shadow and outline. */ 157 | &[data-colorized="true"] { 158 | --tabs-activated-shadow: unset !important; 159 | --s-act-el-border: light-dark(rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.25)) !important; 160 | } 161 | 162 | & .ctx { 163 | box-shadow: none !important; 164 | border-radius: 2px !important; 165 | --uc-margin: 8px !important; 166 | --uc-width: 2px !important; 167 | --uc-offset: 1px !important; 168 | } 169 | 170 | &[data-active="true"] .ctx { 171 | --uc-margin: 6px !important; 172 | } 173 | 174 | &[data-pin="false"] { 175 | /* Inner spacing for tabs. */ 176 | & .fav { 177 | margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important; 178 | } 179 | 180 | /* Tab container indicator. */ 181 | & .ctx { 182 | inset-block: 0 !important; 183 | margin-block: auto !important; 184 | left: var(--uc-offset) !important; 185 | width: var(--uc-width) !important; 186 | height: calc(100% - var(--uc-margin) * 2) !important; 187 | } 188 | } 189 | 190 | #root[data-pinned-tabs-position="panel"] &[data-pin="true"] { 191 | /* Tab container indicator. */ 192 | & .ctx { 193 | inset-inline: 0 !important; 194 | margin-inline: auto !important; 195 | bottom: var(--uc-offset) !important; 196 | height: var(--uc-width) !important; 197 | width: calc(100% - var(--uc-margin) * 2) !important; 198 | } 199 | } 200 | } 201 | 202 | .Notifications + .main-box .central-box { 203 | height: 100% !important; 204 | margin-top: 0 !important; 205 | } 206 | 207 | /* Add space to the top of the tabs to allow shadows to be visible. */ 208 | .AnimatedTabList, 209 | .PinnedTabsBar { 210 | padding-top: var(--tabs-margin) !important; 211 | } 212 | 213 | /* Remove space between the tabs and horizontal navigation bar, as tabs have 214 | * their own space applied for the shadows. */ 215 | .top-horizontal-box { 216 | margin-bottom: 0 !important; 217 | 218 | & .NavigationBar.-top { 219 | padding-block-end: 0 !important; 220 | } 221 | } 222 | 223 | /* Pinned tabs separator. */ 224 | .PinnedTabsBar { 225 | /* Pinned tab grid. */ 226 | #root[data-pinned-tabs-position="panel"] & { 227 | padding-bottom: calc(var(--tabs-margin) + 1px) !important; 228 | } 229 | 230 | /* Pinned tab list. */ 231 | #root[data-pinned-tabs-position="panel"][data-pinned-tabs-list="true"] & { 232 | padding-bottom: 1px !important; 233 | } 234 | 235 | /* Separator element. */ 236 | &::after { 237 | display: unset !important; 238 | bottom: 0 !important; 239 | height: auto !important; 240 | border-bottom: 1px solid var(--separator-color) !important; 241 | background: transparent !important; 242 | opacity: 1 !important; 243 | } 244 | } 245 | 246 | /* New tab button styling. */ 247 | .TabsPanel .new-tab-btns { 248 | /* Add space for the separator. */ 249 | padding-top: calc(var(--tabs-margin) + 1px) !important; 250 | 251 | /* Add separator before new tab button. */ 252 | &::before { 253 | width: calc(100% - var(--tabs-margin) * 2) !important; 254 | inset-inline: auto !important; 255 | top: 0 !important; 256 | border-top: 1px solid var(--separator-color) !important; 257 | box-shadow: none !important; 258 | } 259 | 260 | /* Make sure the separator is hidden when there are only pinned tabs. */ 261 | &[data-new-tab-bar-position="after_tabs"]:first-child { 262 | padding-top: 0 !important; 263 | 264 | &::before { 265 | display: none !important; 266 | } 267 | } 268 | 269 | /* Hide unnecessary pseudo element. */ 270 | &::after { 271 | content: initial !important; 272 | } 273 | 274 | /* New tab button. */ 275 | & .new-tab-btn { 276 | justify-content: start !important; 277 | white-space: nowrap !important; 278 | overflow: hidden !important; 279 | border-radius: var(--tabs-border-radius) !important; 280 | 281 | /* Make sure images do not shrink when collapsed. */ 282 | & > svg, 283 | & > img { 284 | position: static !important; 285 | margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important; 286 | flex-shrink: 0 !important; 287 | } 288 | 289 | /* Add new tab label. */ 290 | &::after { 291 | content: "New Tab" !important; 292 | font: var(--tabs-font) !important; 293 | color: var(--frame-fg) !important; 294 | } 295 | } 296 | } 297 | 298 | /* Hide shadows at the top and bottom when scrolling. */ 299 | .ScrollBox > .top-shadow[data-show="true"], 300 | .ScrollBox > .bottom-shadow[data-show="true"] { 301 | display: none !important; 302 | } 303 | 304 | /* ::::: Icons ::::: */ 305 | 306 | /* New tab page icon. */ 307 | #icon_ff path { 308 | d: path( 309 | "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" 310 | ) !important; 311 | } 312 | 313 | /* Plus icon. */ 314 | #icon_plus path { 315 | 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; 316 | } 317 | } 318 | -------------------------------------------------------------------------------- /chrome/content/newtab.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - content/newtab.css */ 2 | 3 | @-moz-document url-prefix("about:newtab"), 4 | url-prefix("about:home"), 5 | url-prefix("about:firefoxview") { 6 | :root:not([lwt-newtab], [lwt-newtab-brighttext]) { 7 | --newtab-background-color: #f7f7f7 !important; 8 | --newtab-background-color-secondary: #fff !important; 9 | --newtab-text-primary-color: #252525 !important; 10 | --newtab-primary-action-background: #0078d4 !important; 11 | --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 80%, transparent) !important; 12 | --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #000) !important; 13 | --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000) !important; 14 | --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent) !important; 15 | --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent) !important; 16 | --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent) !important; 17 | --newtab-primary-element-hover-color: color-mix( 18 | in srgb, 19 | var(--newtab-primary-action-background) 90%, 20 | #000 21 | ) !important; 22 | --newtab-primary-element-active-color: color-mix( 23 | in srgb, 24 | var(--newtab-primary-action-background) 80%, 25 | #000 26 | ) !important; 27 | --newtab-primary-element-text-color: #fff !important; 28 | --newtab-primary-action-background-dimmed: color-mix( 29 | in srgb, 30 | var(--newtab-primary-action-background) 25%, 31 | transparent 32 | ) !important; 33 | --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000) !important; 34 | --newtab-wordmark-color: #737373 !important; 35 | --newtab-status-success: #50b080 !important; 36 | --newtab-status-error: #ff848a !important; 37 | --newtab-inner-box-shadow-color: rgb(0 0 0 / 0.1) !important; 38 | --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent) !important; 39 | --newtab-text-emphasis-background: #ffed32 !important; 40 | --newtab-text-emphasis-text-color: #000 !important; 41 | --newtab-textbox-focus-color: var(--newtab-primary-action-background) !important; 42 | --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 43 | 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3) !important; 44 | --newtab-button-secondary-color: inherit !important; 45 | } 46 | 47 | :root:not([style*="color"])[lwt-newtab-brighttext] { 48 | --newtab-background-color: #252525 !important; 49 | --newtab-background-color-secondary: #4a4a4a !important; 50 | --newtab-text-primary-color: #fff !important; 51 | --newtab-primary-action-background: #75b6e8 !important; 52 | --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #fff) !important; 53 | --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #fff) !important; 54 | --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent) !important; 55 | --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent) !important; 56 | --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent) !important; 57 | --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #fff) !important; 58 | --newtab-primary-element-text-color: #252525 !important; 59 | --newtab-wordmark-color: #fff !important; 60 | --newtab-status-success: #50b080 !important; 61 | } 62 | 63 | /* Custom GTK colours. */ 64 | @media (-moz-gtk-csd-available) { 65 | :root:not([lwt-newtab]):not([style*="color"]) { 66 | /* Colour adjusted for readability. */ 67 | --uc-accent-adjusted: light-dark( 68 | color-mix(in oklch, AccentColor 92%, black), 69 | color-mix(in oklch, AccentColor 60%, white) 70 | ); 71 | --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; 72 | --newtab-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; 73 | --newtab-text-primary-color: -moz-dialogtext !important; 74 | --newtab-wordmark-color: light-dark( 75 | color-mix(in srgb, -moz-dialogtext 65%, transparent), 76 | -moz-dialogtext 77 | ) !important; 78 | --newtab-primary-action-background: var(--uc-accent-adjusted) !important; 79 | } 80 | } 81 | 82 | /* Adjustments for themes. */ 83 | :root[style*="--newtab-background-color"] { 84 | /* Make the Firefox logo workmark follow text colour. */ 85 | --newtab-wordmark-color: color-mix( 86 | in srgb, 87 | var(--newtab-text-primary-color) 60%, 88 | var(--newtab-background-color) 89 | ) !important; 90 | 91 | /* If there is no secondary background, create one from other colours. */ 92 | &:not([style*="--newtab-background-color-secondary"]) { 93 | --newtab-background-color-secondary: color-mix(in srgb, var(--newtab-background-color) 15%, white) !important; 94 | } 95 | 96 | /* Dark adjustments for themes. */ 97 | &[lwt-newtab-brighttext] { 98 | /* Make the Firefox logo workmark follow text colour. */ 99 | --newtab-wordmark-color: var(--newtab-text-primary-color) !important; 100 | 101 | /* If there is no secondary background, create one from other colours. */ 102 | &:not([style*="--newtab-background-color-secondary"]) { 103 | --newtab-background-color-secondary: color-mix( 104 | in srgb, 105 | var(--newtab-text-primary-color) 15%, 106 | var(--newtab-background-color) 107 | ) !important; 108 | } 109 | } 110 | } 111 | } 112 | 113 | @-moz-document url-prefix("about:newtab"), 114 | url-prefix("about:home") { 115 | /* Enforce system font selection. */ 116 | :where(body) { 117 | font-family: system-ui !important; 118 | } 119 | 120 | /* Hide pin icons. */ 121 | .icon.icon-pin-small { 122 | display: none !important; 123 | } 124 | 125 | /* Unpinned sites have lower opacity titles. */ 126 | .top-site-button .title:not(.pinned) { 127 | opacity: 0.7 !important; 128 | } 129 | 130 | /* Search bar. */ 131 | .search-wrapper { 132 | & .search-handoff-button { 133 | border-radius: 99px !important; 134 | background-position: 12px !important; 135 | padding-inline-start: 48px !important; 136 | white-space: nowrap !important; 137 | text-overflow: ellipsis !important; 138 | --elevation: 4; 139 | box-shadow: 140 | 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / 0.11), 141 | 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / 0.13) !important; 142 | 143 | &:hover { 144 | --elevation: 6; 145 | } 146 | } 147 | 148 | & .search-inner-wrapper { 149 | min-height: 44px !important; 150 | } 151 | 152 | &.fake-focus:not(.search.disabled) .search-handoff-button { 153 | border-color: transparent !important; 154 | outline: 2px solid var(--newtab-primary-action-background) !important; 155 | outline-offset: -1px !important; 156 | } 157 | 158 | &.search-disabled .search-handoff-button { 159 | opacity: 0 !important; 160 | } 161 | 162 | .search-handoff-button .fake-caret { 163 | inset-inline-start: 48px !important; 164 | top: 13px !important; 165 | } 166 | 167 | @media (height > 700px) { 168 | .fixed-search & { 169 | padding: 15px 0 !important; 170 | min-height: auto !important; 171 | border-bottom: none !important; 172 | } 173 | } 174 | } 175 | 176 | .fake-textbox { 177 | overflow: hidden !important; 178 | text-overflow: ellipsis !important; 179 | } 180 | 181 | .outer-wrapper.only-search { 182 | display: flex !important; 183 | padding: 30px !important; 184 | } 185 | 186 | /* Sticky search bar header when scrolling. */ 187 | @media (height > 700px) { 188 | body:not(.inline-onboarding) .fixed-search.visible-logo main { 189 | padding-top: 246px !important; 190 | 191 | @media (-moz-pref("uc.tweak.hide-newtab-logo")) { 192 | padding-top: 82px !important; 193 | } 194 | } 195 | } 196 | 197 | .icon-settings { 198 | background-image: url("../icons/settings.svg") !important; 199 | } 200 | 201 | /* Top sites tiles. */ 202 | .top-site-outer { 203 | & .tile { 204 | border-radius: 12px !important; 205 | height: 44px !important; 206 | width: 44px !important; 207 | box-shadow: rgb(0 0 0 / 0.1) 0px 2px 4px !important; 208 | 209 | & .icon-wrapper { 210 | border-radius: 4px !important; 211 | width: 24px !important; 212 | height: 24px !important; 213 | 214 | &.letter-fallback::before { 215 | font-size: 32px !important; 216 | } 217 | } 218 | } 219 | 220 | & .default-icon, 221 | & .search-topsite { 222 | background-size: 16px !important; 223 | height: 24px !important; 224 | width: 24px !important; 225 | } 226 | } 227 | 228 | /* Recent activity / Pocket cards */ 229 | .card-outer { 230 | --uc-border-radius: 8px; 231 | 232 | &, 233 | & .card, 234 | & .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 235 | border-radius: var(--uc-border-radius) !important; 236 | } 237 | 238 | & .card, 239 | & .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 240 | box-shadow: 241 | rgb(0 0 0 / 0.14) 0px 1px 2px, 242 | rgb(0 0 0 / 0.12) 0px 0px 2px !important; 243 | } 244 | 245 | & .card-preview-image-outer, 246 | & .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { 247 | border-radius: var(--uc-border-radius) var(--uc-border-radius) 0 0 !important; 248 | } 249 | } 250 | 251 | /* Add background & adjust padding for Recent activity & Pocket section. */ 252 | .collapsible-section:not(.top-sites) { 253 | background-color: var(--newtab-background-color) !important; 254 | border-radius: 12px !important; 255 | padding: 10px 20px 20px !important; 256 | 257 | & .section-list { 258 | gap: 12px !important; 259 | } 260 | } 261 | 262 | @media (-moz-pref("uc.tweak.hide-newtab-logo")) { 263 | .logo-and-wordmark { 264 | display: none !important; 265 | } 266 | 267 | .outer-wrapper:not(.fixed-search) .search-wrapper { 268 | padding-top: 0 !important; 269 | } 270 | } 271 | } 272 | 273 | /* private browsing newtab */ 274 | @-moz-document url-prefix(about:privatebrowsing) { 275 | :root { 276 | --uc-wordmark-color: light-dark(#737373, #fff); 277 | --uc-background-color-secondary: light-dark(#fff, #4a4a4a); 278 | 279 | @media (-moz-pref("browser.theme.dark-private-windows")) { 280 | color-scheme: dark !important; 281 | } 282 | } 283 | 284 | /* Custom GTK colours. */ 285 | @media (-moz-gtk-csd-available) { 286 | :root:not([lwt-newtab]):not([style*="color"]) { 287 | /* Colour adjusted for readability. */ 288 | --uc-accent-adjusted: light-dark( 289 | color-mix(in oklch, AccentColor 92%, black), 290 | color-mix(in oklch, AccentColor 60%, white) 291 | ); 292 | --in-content-page-background: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; 293 | --uc-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; 294 | --in-content-page-color: -moz-dialogtext !important; 295 | --in-content-focus-outline-color: var(--uc-accent-adjusted) !important; 296 | } 297 | } 298 | 299 | /* Private browsing search bar. */ 300 | .search-inner-wrapper { 301 | height: 44px !important; 302 | 303 | .search-handoff-button, 304 | .search-handoff-button:active, 305 | .search-handoff-button:enabled:hover:active { 306 | background-color: var(--uc-background-color-secondary) !important; 307 | border: 0 !important; 308 | border-radius: 99px !important; 309 | padding-inline-start: 48px !important; 310 | --elevation: 4; 311 | box-shadow: 312 | 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / 0.11), 313 | 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / 0.13) !important; 314 | 315 | &:hover { 316 | --elevation: 6; 317 | } 318 | 319 | &.focused:not(.disabled) { 320 | box-shadow: none !important; 321 | outline: 2px solid var(--in-content-focus-outline-color) !important; 322 | outline-offset: -1px !important; 323 | } 324 | 325 | &.disabled { 326 | opacity: 0 !important; 327 | } 328 | 329 | & .fake-textbox { 330 | color: var(--in-content-page-color) !important; 331 | } 332 | } 333 | } 334 | 335 | .wordmark { 336 | fill: var(--uc-wordmark-color) !important; 337 | } 338 | 339 | /* Information box in private browsing. */ 340 | .info { 341 | background-color: var(--uc-background-color-secondary) !important; 342 | background-image: none !important; 343 | position: relative !important; 344 | 345 | /* Private browsing icon. */ 346 | &::before { 347 | content: ""; 348 | position: absolute; 349 | left: 32px; 350 | top: 20px; 351 | height: 32px; 352 | aspect-ratio: 1 / 1; 353 | background: center / contain url("../icons/account-private.svg"); 354 | border-radius: 99px; 355 | } 356 | } 357 | } 358 | 359 | @media (-moz-pref("uc.tweak.newtab-background")) { 360 | @-moz-document url(about:newtab), 361 | url(about:home), 362 | url(about:privatebrowsing) { 363 | body { 364 | /* Specify both jpg and png file extensions, but jpg images will always 365 | * have a higher priority. */ 366 | --bg-0: url(../background-0.jpg), url(../background-0.png); 367 | --bg-1: url(../background-1.jpg), url(../background-1.png); 368 | --newtab-element-hover-color: rgb(239 239 239 / 0.3) !important; 369 | --newtab-element-active-color: rgb(239 239 239 / 0.45) !important; 370 | --text-shadow: 0 1px 2px #000; 371 | --icon-shadow: drop-shadow(0 0.3px 0.6px #000); 372 | background-color: #252525 !important; 373 | background-image: var(--bg-0) !important; 374 | background-position: center !important; 375 | background-size: cover !important; 376 | background-attachment: fixed !important; 377 | 378 | :root[lwt-newtab-brighttext] &, 379 | :root.private & { 380 | background-image: var(--bg-1), var(--bg-0) !important; 381 | --newtab-element-hover-color: rgb(66 66 66 / 0.4) !important; 382 | --newtab-element-active-color: rgb(66 66 66 / 0.55) !important; 383 | } 384 | 385 | @media not (-moz-pref("browser.theme.dark-private-windows")) { 386 | :root.private & { 387 | background-image: var(--bg-0) !important; 388 | 389 | @media (prefers-color-scheme: dark) { 390 | background-image: var(--bg-1), var(--bg-0) !important; 391 | } 392 | } 393 | } 394 | } 395 | 396 | /* Change text colour & add backgrounds to text over the background. */ 397 | .top-site-outer .title { 398 | text-shadow: var(--text-shadow) !important; 399 | color: #fff !important; 400 | -moz-osx-font-smoothing: auto !important; 401 | } 402 | 403 | .wordmark, 404 | .icon-settings, 405 | .top-site-outer .context-menu-button { 406 | filter: var(--icon-shadow) !important; 407 | color: #fff !important; 408 | fill: currentColor !important; 409 | } 410 | 411 | .top-site-outer .title .sponsored-label { 412 | color: #eee !important; 413 | } 414 | 415 | /* Add transparent sticky search header. */ 416 | @media (height > 700px) { 417 | .fixed-search .search-wrapper { 418 | border-bottom: 0 !important; 419 | background: transparent linear-gradient(#0004, transparent) !important; 420 | } 421 | } 422 | } 423 | } 424 | --------------------------------------------------------------------------------