├── icons ├── zoom-out.svg ├── menu.svg ├── arrow-filled-right.svg ├── arrow-up.svg ├── arrow-down.svg ├── arrow-right.svg ├── media-pause.svg ├── plus.svg ├── win11-minimize.svg ├── checkmark.svg ├── media-play.svg ├── reader-mode.svg ├── arrow-filled-down.svg ├── arrow-filled-left.svg ├── search-glass.svg ├── arrow-left.svg ├── info.svg ├── back.svg ├── account.svg ├── edit-undo.svg ├── forward.svg ├── win11-maximize.svg ├── window.svg ├── tab.svg ├── close.svg ├── edit-redo.svg ├── bookmark.svg ├── security.svg ├── edit-copy.svg ├── microphone.svg ├── open.svg ├── report.svg ├── win11-close.svg ├── security-broken.svg ├── autoplay-media.svg ├── close-9px.svg ├── edit-cut.svg ├── link.svg ├── mail.svg ├── move-tab.svg ├── customize.svg ├── screen.svg ├── win11-restore.svg ├── firefox-view.svg ├── page-portrait.svg ├── win11-close-dark.svg ├── chevron.svg ├── midi.svg ├── media-pip.svg ├── bookmark-star-on-tray.svg ├── downloads.svg ├── pocket-outline.svg ├── tag.svg ├── new-tab-image.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 ├── manage.svg ├── developer.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-copy.svg ├── image-open.svg ├── autoplay-media-blocked.svg ├── screen-blocked.svg ├── userchrome-toggle.svg ├── media-mute.svg ├── edit-delete.svg ├── passwords.svg ├── save.svg ├── security-warning.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 ├── media-loop.svg ├── tool-profiler.svg ├── accessibility.svg ├── firefox.svg ├── camera-blocked.svg ├── edit-copy-without-tracking.svg ├── persistent-storage.svg ├── xr.svg ├── forget.svg ├── video-save.svg ├── container-tab.svg ├── private-window.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 └── icons.css ├── popup-search.css ├── autohide-sidebar.css ├── README.md ├── arcmode-sidebery ├── edgemode-sidebery └── userChrome.css /icons/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/arrow-filled-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/media-pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/win11-minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/media-play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/reader-mode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/arrow-filled-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-filled-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/search-glass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/edit-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/win11-maximize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/microphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/report.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/win11-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/security-broken.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/autoplay-media.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/close-9px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-cut.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/move-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/customize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/screen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/win11-restore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/firefox-view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/page-portrait.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/win11-close-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/midi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/media-pip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmark-star-on-tray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/downloads.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/pocket-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/new-tab-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/source-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/inspect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/permissions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/send-to-device.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/sidebars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/canvas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/duplicate-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/search-page.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/sidebars-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/geo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/desktop-notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/add-to-dictionary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/manage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/developer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmark-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/print.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-audio-blocked-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/account-private.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /icons/microphone-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/privateBrowsing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/fullscreen-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/video-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/image-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/image-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /icons/autoplay-media-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/screen-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/userchrome-toggle.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 8 | 9 | -------------------------------------------------------------------------------- /icons/media-mute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/passwords.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/security-warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/media-unmute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/canvas-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/audio-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/geo-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/edit-select-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/popup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/desktop-notification-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/paste-and-go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/media-loop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tool-profiler.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/accessibility.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/firefox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/camera-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/edit-copy-without-tracking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/persistent-storage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/xr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/forget.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/video-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/container-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/private-window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/media-speed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/image-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-audio-muted-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/persistent-storage-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/xr-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/extension-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /popup-search.css: -------------------------------------------------------------------------------- 1 | /* search */ 2 | @media (-moz-bool-pref: "uc.tweak.popup-search") { 3 | #urlbar:is([breakout][breakout-extend]){ 4 | #urlbar-input { 5 | font-size: 18px !important; 6 | text-align: left !important; 7 | padding-block: 12px !important; 8 | padding-inline: 6px !important; 9 | } 10 | 11 | position: fixed !important; 12 | /* padding-top: 12px !important; */ 13 | /* --urlbar-height: auto !important; */ 14 | margin-bottom: 25vh !important; 15 | /* margin-top: 85vh !important; */ 16 | background-color: #toolbar-bgcolor !important; 17 | 18 | left: 20vw !important; 19 | right: 20vw !important; 20 | width: 60vw !important; 21 | /* padding-inline-start: 8px !important; */ 22 | /* padding-inline-end: 40vw !important; */ 23 | --urlbar-width: auto !important; 24 | 25 | & .urlbarView-results { 26 | margin-top: 0px !important; 27 | padding-block-start: 0px !important; 28 | } 29 | 30 | 31 | /* background */ 32 | &:before{ 33 | content: ""; 34 | position: fixed; 35 | pointer-events: none; 36 | 37 | width: 100vw; 38 | height: 100vh; 39 | 40 | top: 0px; 41 | left: 0px; 42 | 43 | background-color: #000000; 44 | opacity: 0.5; 45 | backdrop-filter: blur(300px); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /icons/tab-audio-playing-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/translate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /autohide-sidebar.css: -------------------------------------------------------------------------------- 1 | /* Show sidebar only when the cursor is over it */ 2 | /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ 3 | 4 | #sidebar { 5 | border-bottom-right-radius: var(--uc-tweak-rounded-corners-radius) !important; 6 | border-bottom-left-radius: var(--uc-tweak-rounded-corners-radius) !important; 7 | } 8 | 9 | #sidebar-title { 10 | padding-inline: 0 !important; 11 | padding-top: 2px !important; 12 | opacity: 40% !important; 13 | } 14 | #sidebar-switcher-target { 15 | padding: 0px 0px 2px 0px !important; 16 | } 17 | 18 | #sidebar-box { 19 | --uc-sidebar-width: 50px; 20 | --uc-sidebar-hover-width: 220px; 21 | --uc-autohide-sidebar-delay: 100ms; /* Wait 0.1s before hiding sidebar */ 22 | --uc-autohide-transition-duration: 115ms; 23 | --uc-autohide-transition-type: linear; 24 | position: relative; 25 | min-width: var(--uc-sidebar-width) !important; 26 | width: var(--uc-sidebar-width) !important; 27 | max-width: var(--uc-sidebar-width) !important; 28 | background-color: var(--lwt-accent-color) !important; 29 | z-index: 1; 30 | transition: opacity var(--uc-autohide-transition-duration) 31 | var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important; 32 | opacity: 100%; 33 | } 34 | 35 | /* if this preference is activated in about:config, sidebar width will be increased */ 36 | @media (-moz-bool-pref: "uc.tweak.longer-sidebar") { 37 | :root #sidebar-box { 38 | --uc-sidebar-hover-width: 260px !important; 39 | } 40 | } 41 | 42 | #sidebar-box[positionend] { 43 | direction: rtl; 44 | } 45 | #sidebar-box[positionend] > * { 46 | direction: ltr; 47 | } 48 | 49 | #sidebar-box[positionend]:-moz-locale-dir(rtl) { 50 | direction: ltr; 51 | } 52 | #sidebar-box[positionend]:-moz-locale-dir(rtl) > * { 53 | direction: rtl; 54 | } 55 | 56 | #main-window[sizemode="maximized"] #sidebar-box { 57 | --uc-sidebar-width: 50px; 58 | } 59 | #main-window[sizemode="fullscreen"] #sidebar-box { 60 | --uc-sidebar-width: 0.3rem; 61 | } 62 | 63 | #sidebar-header { 64 | overflow: hidden; 65 | color: var(--chrome-color, inherit) !important; 66 | padding: 2px 0 2px 0 !important; 67 | font-size: 1em !important; 68 | font-weight: bold !important; 69 | margin-inline-start: calc( 70 | var(--uc-tweak-rounded-corners-padding) - 10px 71 | ) !important; 72 | border-bottom: 0 !important; 73 | border-top-right-radius: var(--uc-tweak-rounded-corners-radius) !important; 74 | } 75 | 76 | #sidebar-header #sidebar-switcher-target #sidebar-icon, 77 | #sidebar-switcher-arrow, 78 | #sidebar-close.close-icon, 79 | #sidebar-splitter { 80 | visibility: collapse !important; 81 | } 82 | 83 | @media (-moz-bool-pref: "uc.tweak.hide-sidebar-header") { 84 | #sidebar-header { 85 | visibility: collapse !important; 86 | } 87 | } 88 | 89 | #sidebar-header::before, 90 | #sidebar-header::after { 91 | content: ""; 92 | display: flex; 93 | padding-left: 8px; 94 | } 95 | 96 | #sidebar-header, 97 | #sidebar { 98 | transition: min-width var(--uc-autohide-transition-duration) 99 | var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important; 100 | min-width: var(--uc-sidebar-width) !important; 101 | will-change: min-width; 102 | background-color: var(--lwt-accent-color) !important; 103 | } 104 | 105 | #sidebar-box:hover > #sidebar-header, 106 | #sidebar-box:hover > #sidebar { 107 | margin-inline-start: calc( 108 | var(--uc-tweak-rounded-corners-padding) - 10px 109 | ) !important; 110 | min-width: var(--uc-sidebar-hover-width) !important; 111 | transition-delay: 0ms !important; 112 | opacity: 100% !important; 113 | } 114 | #sidebar-box:hover { 115 | opacity: 100% !important; 116 | } 117 | 118 | .sidebar-panel { 119 | background-color: var(--lwt-accent-color) !important; 120 | color: var(--newtab-text-primary-color) !important; 121 | } 122 | 123 | .sidebar-panel #search-box { 124 | -moz-appearance: none !important; 125 | background-color: var(--lwt-accent-color) !important; 126 | color: inherit !important; 127 | } 128 | 129 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 130 | 131 | #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { 132 | inset-inline: auto 0px !important; 133 | } 134 | #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { 135 | margin-inline: 0px !important; 136 | border-left-style: solid !important; 137 | } 138 | 139 | #main-window[titlepreface*="|| "] { 140 | --ovrl-wdt: var(--ovrl-max-wdt); 141 | 142 | & :is(#sidebar-box) { 143 | --uc-sidebar-width: var(--uc-sidebar-hover-width); 144 | opacity: 100%; 145 | background-color: transparent !important; 146 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 147 | margin-block-end: 0 !important; 148 | overflow: visible !important; 149 | &[positionend] { 150 | margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; 151 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 152 | } 153 | 154 | /* & > * { opacity: 100%; } */ 155 | } 156 | 157 | & .browserContainer::after { 158 | margin-left: calc(var(--sdbr-real-wdt) * -1); 159 | } 160 | 161 | & #browser > #appcontent { 162 | margin-left: var(--sdbr-real-wdt); 163 | } 164 | & #appcontent browser { 165 | margin-left: 0px; 166 | } 167 | & #statuspanel { 168 | margin-left: 2px; 169 | } 170 | 171 | & #sidebar-box:hover > #sidebar { 172 | min-width: var(--uc-sidebar-hover-width) !important; 173 | transition-delay: 0ms !important; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to my fork of FrameUIforFirefox! 2 | Original theme by FineFuturity. Tweaks by [MrOtherGuy/firefox-csshacks](https://mrotherguy.github.io/firefox-csshacks/), [bmFTzQ/Edge-Frfox](https://github.com/bmFtZQ/edge-frfox) & [Shina-SG/Shina-Fox](https://github.com/Shina-SG/Shina-Fox). Fork & modifications by KiKaraage. *(Issues, questions or feedbacks can be submitted here or in [Reddit](https://old.reddit.com/r/FirefoxCSS/comments/1bzos14/presenting_my_version_of_frameui_for_firefox/))* 3 | 4 | ## Additional features: 5 | * Optimization for compact mode, devices with smaller screens: smaller icons scale, smaller & centered URL font size, stripped URL bar background. 6 | * Fluent icons & Ms Edge-like hamburger menu/context menu styling (derived from Edge-Frfox). 7 | * Pop-up searchbar (derived from Shina-Fox) | Enable by adding new Boolean preference in `about:config`: `uc.tweak.popup-search` 8 | * Multi-panel Sidebery setup 9 | * **Update 1**: Enabling frame configuration for true Polaroid experience | Enable by adding new Boolean preference in `about:config`: `uc.tweak.frame` *(You can also adjust rounded corner radius in [line 1125 of userChrome.css](https://github.com/KiKaraage/FrameUIforFirefox/blob/82a10ad9219cdc9b9da1af1860a91d2042ee4422/userChrome.css#L1125))* 10 | * **Update 1**: Autohidden vertical tabs sidebar is now supported! Enable by adding new Boolean preference in `about:config`: `uc.tweak.autohide-sidebar` while installing Userchrome Toggle (you can refer to [ArcWTF readme]([h](https://github.com/KiKaraage/ArcWTF)) for clearer setup tutorial). **[Edge Style]**: Put codes from [edgemode-sidebery](./edgemode-sidebery) on Sidebery style editor. **[Arc Style]**: Change value `uc-sidebar-width` on [line 19](./autohide-sidebar.css#L19) to 6px and on [line 57](./autohide-sidebar.css#L57) to 0.3rem in autohide-sidebar.css. Afterwards, put codes from [arcmode-sidebery](./arcmode-sidebery) on Sidebery style editor. 11 | * Suggested addons to use: [Adaptive Tab Bar Color](https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour) for adaptive theming | [Gesturefy](https://github.com/Robbendebiene/Gesturefy) for easier page navigations, less clicks | [MaxFocus Link Preview](https://addons.mozilla.org/en-US/firefox/addon/maxfocus-link-preview/reviews/), alternatives to Peek features in Arc Browser 12 | * Font used in screenshots: Google Sans Text | Add on your userChrome/userContent: `* {font-family: "Google Sans Text" !important;}` 13 | * Current issue: Corners on popup searchbar aren't rounded properly, and urlbar-view items has no padding on the right side. Any suggestions or fixes would be appreciated! 14 | 15 | ![Screenshot 1, general look](https://github.com/KiKaraage/FrameUIforFirefox/assets/10529881/42e42d1f-8830-442a-8e64-b725cd6da508) 16 | ![Screenshot 2, pop-up searchbar](https://github.com/KiKaraage/FrameUIforFirefox/assets/10529881/9f35fee2-a9b4-477c-9747-8d01d3978eb5) 17 | ![Screenshot 3, main Firefox menu](https://github.com/KiKaraage/FrameUIforFirefox/assets/10529881/928fbe4c-573f-45ba-bb20-a6d514742b13) 18 | ![Screenshot 4, with frame config enabled](https://github.com/KiKaraage/FrameUIforFirefox/assets/10529881/c5f21506-6d36-4485-a479-26a5f652ac66) 19 | 20 | 21 | # Codename: FrameUI For Firefox 22 | A new way to view your web content, like looking at photos printed from an old Polaroid camera. 23 | 24 | ![a1fd4499dd2be9a2ecccc660a6ce0696](https://github.com/FineFuturity/FrameUIForFirefox/assets/19298107/75c5a475-d440-4481-a002-9cdb754155ed) 25 | 26 | # Changelog 27 | ``` 28 | Version 0.3a: 29 | * The latest Firefox update caused some issues with clicking on interface elements, including the window controls. The latest update to the theme fixes this issue. 30 | * I'm not sure if the update caused any other issues, so please report them as you see them. 31 | * Fixed the alignment of the private browsing indicator when in private browsing mode. 32 | 33 | 34 | Version 0.3: 35 | * Better support for configurations where the title bar buttons are either on the left or right side of the window, regardless of OS. 36 | * HUGE thanks to MrOtherGuy's CSS ![code](https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/toolbars_below_content.css), without which I would not have been able to fix this as well as the below issues. 37 | * Fixed issues with the menubar not playing nicely with the navigation bar when it's active. 38 | * Fixed issue with the private browsing indicator icon being misaligned with the navigation bar when in private browsing mode. 39 | * Fixed issue where the bookmarks toolbar would push the navigation toolbar past the bottom window boundary if "Only Show on New Tab" was set. 40 | * When clicked, the address bar's URL text now stays at the bottom rather than moving to the top. 41 | * This should make typing a URL or search term much less jarring. 42 | 43 | 44 | Version 0.2: 45 | * Initial macOS support. 46 | * Platform detection has been added, so the theme now accounts for configurations where either the title bar buttons are on the left (e.g., macOS/Linux title bar buttons on left) or on the right (e.g, Windows/Linux title bar buttons on right). 47 | * Fixed issue with user-selected themes either working inconsistently or not at all. 48 | * Inactive window title bars are now darker to differentiate them from the active window. 49 | 50 | Version 0.1: 51 | * Initial release 52 | ``` 53 | 54 | 55 | **macOS NOTE:** 56 | * FrameUI was designed to have the window control buttons on the bottom. However, due to the way that fullscreen windows work on macOS, the window control buttons will remain at the top of the window like other macOS apps. This complication is not present in windowed mode. 57 | 58 | # Prerequisites 59 | * For this to work, make sure `toolkit.legacyUserProfileCustomizations.stylesheets` and `svg.context-properties.content.enabled` is set to `true` in `about:config`. 60 | * To make the most of this theme, it is **STRONGLY recommended** that you install an addon for vertical tabs, such as Tab Center Reborn. **This is a stopgap for now until I figure out how to integrate native vertical tab functionality into the theme.** 61 | * If you're on Linux, make sure your window controls are set to be on the right side of your title bar. 62 | 63 | # Installation 64 | 65 | Simply drop the provided `userChrome.css` file into your `chrome` folder and restart for the changes to take effect. 66 | 67 | # Motivation 68 | _(by FineFuturity)_ After restarting, you'll notice that *all* of the controls -- the navigation bar, the window controls, *everything* -- has been moved to the bottom in a manner reminiscent of the Metro-based Internet Explorer app seen in Windows 8/8.1. While I think Microsoft was on the right track with their attempts at a tablet-based interface... well, we all know what happened. Apart from Microsoft's attempt at a touch interface (which was a half-done attempt anyway), I think no company to this day has yet to get right. 69 | 70 | This theme is a step towards what I believe may solve the grand problem of unifying the desktop and tablet interface for ANY device form factor. What I hope you'll find is that this interface works really well on *both* tablet and desktop form factors, precisely because there is no longer a need for a user to lift their arms to get to something as basic as the window controls -- they're now just a mere finger reach away. 71 | -------------------------------------------------------------------------------- /arcmode-sidebery: -------------------------------------------------------------------------------- 1 | /* PINNED TABS */ 2 | 3 | /* Control how much pinned tabs column you want below, width of the pinned tabs will be automatically resized depend on it. */ 4 | #root.root {--pinned-tabs-col: 3;} 5 | #root.root {--tabs-pinned-width: calc( (96vw - (var(--tabs-margin)*var(--pinned-tabs-col))) / var(--pinned-tabs-col));} 6 | #root.root {--tabs-pinned-height: 42px;} 7 | 8 | .Tab[data-pin="true"] .body { 9 | box-shadow: 0px 2px 1px #00000000; 10 | background: #f2f2f250; 11 | color: #ffffff20; 12 | } 13 | .Tab[data-pin="true"][data-active="true"]{ 14 | background-color: #ffffff60; 15 | border-radius: calc(var(--general-border-radius) + 2px); 16 | } 17 | 18 | /* GENERAL */ 19 | 20 | #root.root {--tabs-height: 36px;} 21 | #root.root {--tabs-margin: 8px;} 22 | #root.root {--tabs-indent: 18px;} 23 | #root.root {padding-top: 6px;} 24 | #root.root {--tabs-close-btn-margin: 5px;} 25 | #root.root {--tabs-inner-gap: 10px;} 26 | #root.root {--general-border-radius: 6px;} 27 | #root .popup-container {background-color: transparent;} 28 | #root .hidden-panels-popup-layer:before {background-color: transparent;} 29 | 30 | /* Smoothen masking for overflowed tab title. */ 31 | .Tab .title { 32 | background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%); 33 | background-clip: text; 34 | color: transparent; 35 | } 36 | 37 | /* Uncomment this to apply Segoe UI Variable font - Make sure to install the font first */ 38 | /* #root.root {--tabs-font: 0.9375rem Segoe UI Variable Small, Segoe UI;} */ 39 | 40 | /* NEW TAB BUTTON*/ 41 | 42 | .TabsPanel .new-tab-btns{ 43 | position: relative; 44 | padding-top: 5px; 45 | } 46 | 47 | .TabsPanel .new-tab-btn { 48 | justify-content: left; 49 | padding-left: calc(var(--tabs-inner-gap)); 50 | margin-left: calc(var(--tabs-margin)*0.5); 51 | margin-right: calc(var(--tabs-margin)*0.5); 52 | --ntb-btn-height: 37px; 53 | } 54 | 55 | .TabsPanel .new-tab-btn > svg, .TabsPanel .new-tab-btn > img { 56 | fill: transparent; 57 | background-color: var(--nav-btn-fg); 58 | opacity: 40%; 59 | width: 17px; 60 | height: 17px; 61 | scale: 0.9; 62 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); 63 | } 64 | 65 | .TabsPanel .new-tab-btn:after { 66 | justify-content: left; 67 | content: "New Tab"; 68 | font: var(--tabs-font); 69 | padding-left: calc(var(--tabs-inner-gap) + var(--tabs-margin) + 12px); 70 | color: var(--nav-btn-fg); 71 | opacity: 40%; 72 | } 73 | 74 | /* NAVBAR */ 75 | 76 | #root.root {--nav-btn-width: 25px;} 77 | #root.root {--nav-btn-height: 25px;} 78 | #root.root {--nav-btn-margin: 2px;} 79 | #root.root {--toolbar-bg: transparent;} 80 | 81 | /* Moving Sidebery navigation bar to bottom, to mimic how Space works on Arc Browser. Make sure to choose Horizontal when activating the navigation bar. */ 82 | .NavigationBar {box-shadow: none;} 83 | .top-horizontal-box { 84 | display: flex; 85 | order: 1; 86 | margin-left: 5px; 87 | margin-right: 5px; 88 | margin-top: 3px; 89 | } 90 | 91 | /* Remove background color, border and shadow for active tab panel. */ 92 | .NavigationBar .nav-item[data-active="true"] { 93 | background-color: transparent; 94 | box-shadow: none; 95 | } 96 | 97 | /* Making non-active tabs (including bookmark panels) grayscale. */ 98 | .NavigationBar .nav-item[data-type="tabs"][data-active="false"] .icon { 99 | fill: var(--nav-btn-fg); 100 | opacity: 40%; 101 | scale: 0.75; 102 | } 103 | .NavigationBar .nav-item[data-type="bookmarks"][data-active="false"] .icon { 104 | fill: var(--nav-btn-fg); 105 | opacity: 40%; 106 | scale: 0.75; 107 | } 108 | 109 | /* Settings related to Hidden Panels icon and popup layer, adapting to the flipped navbar orientation. */ 110 | #hidden_panels_btn.nav-item .icon { 111 | transform: scaleY(-1); 112 | opacity: 40%; 113 | scale: 0.9; 114 | } 115 | .hidden-panels-popup-layer { 116 | transform: scaleY(-1); 117 | margin-top: -15%; 118 | --toolbar-bg: var(--frame-bg); 119 | } 120 | .NavigationBar .hidden-panels-popup-content { 121 | transform: scaleY(-1); 122 | } 123 | 124 | /* Adjust 'add tabs panel' size & position. */ 125 | #root .PanelConfigPopup .popup { 126 | width: 80vw; 127 | margin-top: 25vh; 128 | } 129 | 130 | /* Replacing 'add tabs panel' button with Fluent plus icon to mimic Arc's 'new space' button. */ 131 | .NavigationBar #add_tp.nav-item .icon { 132 | fill: transparent; 133 | background-color: var(--nav-btn-fg); 134 | width: 80%; 135 | height: 80%; 136 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); 137 | } 138 | 139 | /* Replacing 'history' panel with Fluent archive icon to mimic Arc's 'recently closed' button. */ 140 | .NavigationBar #navhistory.nav-item .icon { 141 | fill: transparent; 142 | background-color: var(--nav-btn-fg); 143 | display: flex; 144 | padding: auto; 145 | width: 80%; 146 | height: 80%; 147 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjUgMkMxNy4zMjg0IDIgMTggMi42NzE1NyAxOCAzLjVWNS41QzE4IDYuMTUyODUgMTcuNTgyOSA2LjcwODI4IDE3LjAwMDcgNi45MTQ0TDE3IDE0LjVDMTcgMTYuNDMzIDE1LjQzMyAxOCAxMy41IDE4SDYuNUM0LjU2NyAxOCAzIDE2LjQzMyAzIDE0LjVMMy4wMDAyOSA2LjkxNDc1QzIuNDE3NTQgNi43MDg5MSAyIDYuMTUzMjIgMiA1LjVWMy41QzIgMi42NzE1NyAyLjY3MTU3IDIgMy41IDJIMTYuNVpNMTYgN0g0VjE0LjVDNCAxNS44ODA3IDUuMTE5MjkgMTcgNi41IDE3SDEzLjVDMTQuODgwNyAxNyAxNiAxNS44ODA3IDE2IDE0LjVWN1pNOC41IDlIMTEuNUMxMS43NzYxIDkgMTIgOS4yMjM4NiAxMiA5LjVDMTIgOS43NDU0NiAxMS44MjMxIDkuOTQ5NjEgMTEuNTg5OSA5Ljk5MTk0TDExLjUgMTBIOC41QzguMjIzODYgMTAgOCA5Ljc3NjE0IDggOS41QzggOS4yNTQ1NCA4LjE3Njg4IDkuMDUwMzkgOC40MTAxMiA5LjAwODA2TDguNSA5SDExLjVIOC41Wk0xNi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWNS41QzMgNS43NzYxNCAzLjIyMzg2IDYgMy41IDZIMTYuNUMxNi43NzYxIDYgMTcgNS43NzYxNCAxNyA1LjVWMy41QzE3IDMuMjIzODYgMTYuNzc2MSAzIDE2LjUgM1oiIGZpbGw9IiMyMTIxMjEiLz48L3N2Zz4="); 148 | } 149 | 150 | /* Replacing Sidebery 'settings' with Fluent settings icon to blend with Arc (Windows) aesthetic. */ 151 | .NavigationBar #settings.nav-item .icon { 152 | fill: transparent; 153 | background-color: var(--nav-btn-fg); 154 | width: 75%; 155 | height: 75%; 156 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuOTEwNzUgNy4zODI2NkMyLjI4MDA0IDYuMjQwNTMgMi44ODgzOSA1LjE5MjEzIDMuNjkxMDkgNC4zMDM2NEMzLjgyNjgzIDQuMTUzMzkgNC4wMzk3OCA0LjA5OTg0IDQuMjMwNDQgNC4xNjgwMkw2LjE0ODczIDQuODUzOTJDNi42Njg4IDUuMDM5NzcgNy4yNDEwNyA0Ljc2ODgzIDcuNDI2OTIgNC4yNDg3NUM3LjQ0NTIgNC4xOTc2MiA3LjQ1OTI3IDQuMTQ1MDcgNy40NjkgNC4wOTE3M0w3LjgzNDQ2IDIuMDg1NzNDNy44NzA4IDEuODg2MjcgOC4wMjM5OCAxLjcyODUgOC4yMjIyNyAxLjY4NjNDOC44MDI0NiAxLjU2MjggOS4zOTczNCAxLjUgMTAgMS41QzEwLjYwMjMgMS41IDExLjE5NjggMS41NjI3MyAxMS43NzY3IDEuNjg2MDdDMTEuOTc0OSAxLjcyODI0IDEyLjEyODEgMS44ODU5MSAxMi4xNjQ1IDIuMDg1MjlMMTIuNTMxIDQuMDkxNjVDMTIuNjMwMSA0LjYzNDk3IDEzLjE1MDkgNC45OTUxIDEzLjY5NDIgNC44OTYwMUMxMy43NDc2IDQuODg2MjcgMTMuODAwMiA0Ljg3MjE5IDEzLjg1MTIgNC44NTM5NUwxNS43Njk2IDQuMTY4MDJDMTUuOTYwMiA0LjA5OTg0IDE2LjE3MzIgNC4xNTMzOSAxNi4zMDg5IDQuMzAzNjRDMTcuMTExNiA1LjE5MjEzIDE3LjcyIDYuMjQwNTMgMTguMDg5MyA3LjM4MjY2QzE4LjE1MTYgNy41NzUzNCAxOC4wOTE1IDcuNzg2NTggMTcuOTM3MSA3LjkxNzY0TDE2LjM4MjMgOS4yMzc3M0MxNS45NjEzIDkuNTk1MiAxNS45MDk4IDEwLjIyNjMgMTYuMjY3MyAxMC42NDczQzE2LjMwMjQgMTAuNjg4NyAxNi4zNDA5IDEwLjcyNzEgMTYuMzgyMyAxMC43NjIzTDE3LjkzNzEgMTIuMDgyNEMxOC4wOTE1IDEyLjIxMzQgMTguMTUxNiAxMi40MjQ3IDE4LjA4OTMgMTIuNjE3M0MxNy43MiAxMy43NTk1IDE3LjExMTYgMTQuODA3OSAxNi4zMDg5IDE1LjY5NjRDMTYuMTczMiAxNS44NDY2IDE1Ljk2MDIgMTUuOTAwMiAxNS43Njk2IDE1LjgzMkwxMy44NTEzIDE1LjE0NjFDMTMuMzMxMiAxNC45NjAyIDEyLjc1OSAxNS4yMzEyIDEyLjU3MzEgMTUuNzUxMkMxMi41NTQ4IDE1LjgwMjQgMTIuNTQwOCAxNS44NTQ5IDEyLjUzMSAxNS45MDg1TDEyLjE2NDUgMTcuOTE0N0MxMi4xMjgxIDE4LjExNDEgMTEuOTc0OSAxOC4yNzE4IDExLjc3NjcgMTguMzEzOUMxMS4xOTY4IDE4LjQzNzMgMTAuNjAyMyAxOC41IDEwIDE4LjVDOS4zOTczNCAxOC41IDguODAyNDYgMTguNDM3MiA4LjIyMjI3IDE4LjMxMzdDOC4wMjM5OCAxOC4yNzE1IDcuODcwOCAxOC4xMTM3IDcuODM0NDYgMTcuOTE0M0w3LjQ2OTAyIDE1LjkwODRDNy4zNjk5MyAxNS4zNjUgNi44NDkxNiAxNS4wMDQ5IDYuMzA1ODMgMTUuMTA0QzYuMjUyNDEgMTUuMTEzNyA2LjE5OTg3IDE1LjEyNzggNi4xNDg4MSAxNS4xNDYxTDQuMjMwNDQgMTUuODMyQzQuMDM5NzggMTUuOTAwMiAzLjgyNjgzIDE1Ljg0NjYgMy42OTEwOSAxNS42OTY0QzIuODg4MzkgMTQuODA3OSAyLjI4MDA0IDEzLjc1OTUgMS45MTA3NSAxMi42MTczQzEuODQ4NDUgMTIuNDI0NyAxLjkwODUyIDEyLjIxMzQgMi4wNjI4OSAxMi4wODI0TDMuNjE3NzMgMTAuNzYyM0M0LjAzODcyIDEwLjQwNDggNC4wOTAyMSA5Ljc3MzczIDMuNzMyNzQgOS4zNTI3NEMzLjY5NzU5IDkuMzExMzUgMy42NTkxMyA5LjI3Mjg4IDMuNjE3NzUgOS4yMzc3NUwyLjA2Mjg5IDcuOTE3NjRDMS45MDg1MiA3Ljc4NjU4IDEuODQ4NDUgNy41NzUzNCAxLjkxMDc1IDcuMzgyNjZaTTIuOTcxMyA3LjM3NzA5TDQuMjY0OTkgOC40NzU0NkM0LjM0Nzc4IDguNTQ1NzYgNC40MjQ3MSA4LjYyMjY5IDQuNDk1MDEgOC43MDU0OEM1LjIwOTk1IDkuNTQ3NDYgNS4xMDY5NyAxMC44MDk2IDQuMjY0OTcgMTEuNTI0NkwyLjk3MTMgMTIuNjIyOUMzLjI2MzM1IDEzLjQwNTEgMy42ODQ4IDE0LjEzMjIgNC4yMTYyMyAxNC43NzUxTDUuODEyMjEgMTQuMjA0NEM1LjkxNDQ5IDE0LjE2NzkgNi4wMTk1OCAxNC4xMzk3IDYuMTI2NDMgMTQuMTIwMkM3LjIxMzA3IDEzLjkyMiA4LjI1NDYyIDE0LjY0MjMgOC40NTI4MSAxNS43MjlMOC43NTY3OCAxNy4zOTc1QzkuMTY0NjUgMTcuNDY1NSA5LjU4IDE3LjUgMTAgMTcuNUMxMC40MTk3IDE3LjUgMTAuODM0OCAxNy40NjU2IDExLjI0MjQgMTcuMzk3NkwxMS41NDcyIDE1LjcyODlDMTEuNTY2NyAxNS42MjIxIDExLjU5NDkgMTUuNTE3IDExLjYzMTQgMTUuNDE0N0MxMi4wMDMxIDE0LjM3NDYgMTMuMTQ3NyAxMy44MzI3IDE0LjE4NzkgMTQuMjA0NEwxNS43ODM4IDE0Ljc3NTFDMTYuMzE1MiAxNC4xMzIyIDE2LjczNjcgMTMuNDA1MSAxNy4wMjg3IDEyLjYyMjlMMTUuNzM1IDExLjUyNDVDMTUuNjUyMiAxMS40NTQyIDE1LjU3NTMgMTEuMzc3MyAxNS41MDUgMTEuMjk0NUMxNC43OTAxIDEwLjQ1MjUgMTQuODkzMSA5LjE5MDQgMTUuNzM1MSA4LjQ3NTQ0TDE3LjAyODcgNy4zNzcwOUMxNi43MzY3IDYuNTk0ODYgMTYuMzE1MiA1Ljg2NzgzIDE1Ljc4MzggNS4yMjQ5NEwxNC4xODc4IDUuNzk1NTlDMTQuMDg1NSA1LjgzMjE0IDEzLjk4MDQgNS44NjAzIDEzLjg3MzYgNS44Nzk3OUMxMi43ODcgNi4wNzc5NiAxMS43NDU0IDUuMzU3NyAxMS41NDczIDQuMjcxMTlMMTEuMjQyNCAyLjYwMjM1QzEwLjgzNDggMi41MzQ0MyAxMC40MTk3IDIuNSAxMCAyLjVDOS41OCAyLjUgOS4xNjQ2NSAyLjUzNDQ4IDguNzU2NzggMi42MDI0OUw4LjQ1Mjc5IDQuMjcxMDVDOC40MzMzMSA0LjM3NzkxIDguNDA1MTUgNC40ODI5OSA4LjM2ODYgNC41ODUyN0M3Ljk5Njg5IDUuNjI1NDIgNi44NTIzNiA2LjE2NzMgNS44MTIxMyA1Ljc5NTU2TDQuMjE2MjMgNS4yMjQ5NEMzLjY4NDggNS44Njc4MyAzLjI2MzM1IDYuNTk0ODYgMi45NzEzIDcuMzc3MDlaTTcuNTAwMDEgMTBDNy41MDAwMSA4LjYxOTI5IDguNjE5MyA3LjUgMTAgNy41QzExLjM4MDcgNy41IDEyLjUgOC42MTkyOSAxMi41IDEwQzEyLjUgMTEuMzgwNyAxMS4zODA3IDEyLjUgMTAgMTIuNUM4LjYxOTMgMTIuNSA3LjUwMDAxIDExLjM4MDcgNy41MDAwMSAxMFpNOC41MDAwMSAxMEM4LjUwMDAxIDEwLjgyODQgOS4xNzE1OSAxMS41IDEwIDExLjVDMTAuODI4NCAxMS41IDExLjUgMTAuODI4NCAxMS41IDEwQzExLjUgOS4xNzE1NyAxMC44Mjg0IDguNSAxMCA4LjVDOS4xNzE1OSA4LjUgOC41MDAwMSA5LjE3MTU3IDguNTAwMDEgMTBaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+") 157 | } 158 | -------------------------------------------------------------------------------- /edgemode-sidebery: -------------------------------------------------------------------------------- 1 | /* PINNED TABS */ 2 | 3 | /* Control how much pinned tabs column you want below, width of the pinned tabs will be automatically resized depend on it. */ 4 | #root.root {--pinned-tabs-col: 3;} 5 | #root.root {--tabs-pinned-width: calc( (96vw - (var(--tabs-margin)*var(--pinned-tabs-col))) / var(--pinned-tabs-col));} 6 | 7 | @media (max-width: 50px){ 8 | #root.root {--tabs-pinned-width: 35px;} 9 | } 10 | 11 | #root.root {--tabs-pinned-height: 35px;} 12 | .Tab[data-pin="true"] .body { 13 | box-shadow: 0px 2px 1px #00000000; 14 | background: #f2f2f250; 15 | color: #ffffff20; 16 | } 17 | .Tab[data-pin="true"][data-active="true"]{ 18 | background-color: #ffffff60; 19 | border-radius: calc(var(--general-border-radius) + 2px); 20 | }* 21 | 22 | /* GENERAL */ 23 | 24 | #root.root {--tabs-height: 33px;} 25 | #root.root {--tabs-margin: 7px;} 26 | #root.root {--tabs-indent: 20px;} 27 | #root.root {padding-top: 6px;} 28 | #root.root {--tabs-close-btn-margin: 5px;} 29 | #root.root {--tabs-inner-gap: 8px;} 30 | #root.root {--general-border-radius: 9px;} 31 | #root .popup-container {background-color: transparent;} 32 | #root .hidden-panels-popup-layer:before {background-color: transparent;} 33 | 34 | /* Smoothen masking for overflowed tab title. */ 35 | .Tab .title { 36 | background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%); 37 | background-clip: text; 38 | color: transparent; 39 | } 40 | 41 | @media (max-width: 50px){ 42 | .Tab.Tab{ padding-left: 0 } 43 | } 44 | 45 | 46 | /* Uncomment this to apply custom font - Make sure to install the font first */ 47 | #root.root {--tabs-font: 0.9rem Google Sans Text;} 48 | 49 | .ScrollBox > .top-shadow[data-show="true"], .ScrollBox > .bottom-shadow[data-show="true"] { 50 | opacity: 0.3; 51 | } 52 | 53 | /* NEW TAB BUTTON*/ 54 | 55 | .TabsPanel .new-tab-btns{ 56 | position: relative; 57 | padding-top: 5px; 58 | } 59 | 60 | .TabsPanel .new-tab-btn { 61 | justify-content: left; 62 | padding-left: calc(var(--tabs-inner-gap)); 63 | margin-left: calc(var(--tabs-margin)*0.6); 64 | margin-right: calc(var(--tabs-margin)*0.6); 65 | padding-bottom: calc(var(--tabs-margin)*0.3); 66 | --ntb-btn-height: 32px; 67 | } 68 | 69 | .TabsPanel .new-tab-btn > svg, .TabsPanel .new-tab-btn > img { 70 | fill: transparent; 71 | background-color: var(--nav-btn-fg); 72 | opacity: 40%; 73 | width: 18px; 74 | height: 18px; 75 | scale: 0.9; 76 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); 77 | } 78 | 79 | .TabsPanel .new-tab-btn:after { 80 | justify-content: left; 81 | content: "New Tab"; 82 | font: var(--tabs-font); 83 | padding-left: calc(var(--tabs-inner-gap) + var(--tabs-margin) + 55px); 84 | margin-top: 4px; 85 | color: var(--nav-btn-fg); 86 | opacity: 40%; 87 | } 88 | 89 | /* NAVBAR */ 90 | 91 | #root.root {--nav-btn-width: 25px;} 92 | #root.root {--nav-btn-height: 25px;} 93 | #root.root {--nav-btn-margin: 2px;} 94 | #root.root {--toolbar-bg: transparent;} 95 | 96 | /* Moving Sidebery navigation bar to bottom, to mimic how Space works on Arc Browser. Make sure to choose Horizontal when activating the navigation bar. */ 97 | .NavigationBar {box-shadow: none;} 98 | .top-horizontal-box { 99 | display: flex; 100 | order: 1; 101 | margin-left: 10px; 102 | margin-right: 5px; 103 | margin-top: -3px; 104 | margin-bottom: 5px; 105 | } 106 | 107 | /* Remove background color, border and shadow for active tab panel. */ 108 | .NavigationBar .nav-item[data-active="true"] { 109 | background-color: transparent; 110 | box-shadow: none; 111 | } 112 | 113 | /* Making non-active tabs (including bookmark panels) grayscale. */ 114 | .NavigationBar .nav-item[data-type="tabs"][data-active="false"] .icon { 115 | fill: var(--nav-btn-fg); 116 | opacity: 40%; 117 | scale: 0.75; 118 | } 119 | .NavigationBar .nav-item[data-type="bookmarks"][data-active="false"] .icon { 120 | fill: var(--nav-btn-fg); 121 | opacity: 40%; 122 | scale: 0.75; 123 | } 124 | 125 | /* Settings related to Hidden Panels icon and popup layer, adapting to the flipped navbar orientation. */ 126 | #hidden_panels_btn.nav-item .icon { 127 | transform: scaleY(1); 128 | opacity: 40%; 129 | scale: 0.9; 130 | } 131 | .hidden-panels-popup-layer { 132 | transform: scaleY(1); 133 | margin-top: 0%; 134 | --toolbar-bg: var(--frame-bg); 135 | } 136 | .NavigationBar .hidden-panels-popup-content { 137 | transform: scaleY(1); 138 | } 139 | 140 | /* Adjust 'add tabs panel' size & position. */ 141 | #root .PanelConfigPopup .popup { 142 | width: 80vw; 143 | margin-top: 20vh; 144 | } 145 | 146 | /* Replacing 'add tabs panel' button with Fluent plus icon to mimic Arc's 'new space' button. */ 147 | .NavigationBar #add_tp.nav-item .icon { 148 | fill: transparent; 149 | background-color: var(--nav-btn-fg); 150 | width: 80%; 151 | height: 80%; 152 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+"); 153 | } 154 | 155 | /* Replacing 'history' panel with Fluent archive icon to mimic Arc's 'recently closed' button. */ 156 | .NavigationBar #navhistory.nav-item .icon { 157 | fill: transparent; 158 | background-color: var(--nav-btn-fg); 159 | display: flex; 160 | padding: auto; 161 | width: 80%; 162 | height: 80%; 163 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjUgMkMxNy4zMjg0IDIgMTggMi42NzE1NyAxOCAzLjVWNS41QzE4IDYuMTUyODUgMTcuNTgyOSA2LjcwODI4IDE3LjAwMDcgNi45MTQ0TDE3IDE0LjVDMTcgMTYuNDMzIDE1LjQzMyAxOCAxMy41IDE4SDYuNUM0LjU2NyAxOCAzIDE2LjQzMyAzIDE0LjVMMy4wMDAyOSA2LjkxNDc1QzIuNDE3NTQgNi43MDg5MSAyIDYuMTUzMjIgMiA1LjVWMy41QzIgMi42NzE1NyAyLjY3MTU3IDIgMy41IDJIMTYuNVpNMTYgN0g0VjE0LjVDNCAxNS44ODA3IDUuMTE5MjkgMTcgNi41IDE3SDEzLjVDMTQuODgwNyAxNyAxNiAxNS44ODA3IDE2IDE0LjVWN1pNOC41IDlIMTEuNUMxMS43NzYxIDkgMTIgOS4yMjM4NiAxMiA5LjVDMTIgOS43NDU0NiAxMS44MjMxIDkuOTQ5NjEgMTEuNTg5OSA5Ljk5MTk0TDExLjUgMTBIOC41QzguMjIzODYgMTAgOCA5Ljc3NjE0IDggOS41QzggOS4yNTQ1NCA4LjE3Njg4IDkuMDUwMzkgOC40MTAxMiA5LjAwODA2TDguNSA5SDExLjVIOC41Wk0xNi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWNS41QzMgNS43NzYxNCAzLjIyMzg2IDYgMy41IDZIMTYuNUMxNi43NzYxIDYgMTcgNS43NzYxNCAxNyA1LjVWMy41QzE3IDMuMjIzODYgMTYuNzc2MSAzIDE2LjUgM1oiIGZpbGw9IiMyMTIxMjEiLz48L3N2Zz4="); 164 | } 165 | 166 | /* Replacing Sidebery 'settings' with Fluent settings icon to blend with Arc (Windows) aesthetic. */ 167 | .NavigationBar #settings.nav-item .icon { 168 | fill: transparent; 169 | background-color: var(--nav-btn-fg); 170 | width: 75%; 171 | height: 75%; 172 | mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuOTEwNzUgNy4zODI2NkMyLjI4MDA0IDYuMjQwNTMgMi44ODgzOSA1LjE5MjEzIDMuNjkxMDkgNC4zMDM2NEMzLjgyNjgzIDQuMTUzMzkgNC4wMzk3OCA0LjA5OTg0IDQuMjMwNDQgNC4xNjgwMkw2LjE0ODczIDQuODUzOTJDNi42Njg4IDUuMDM5NzcgNy4yNDEwNyA0Ljc2ODgzIDcuNDI2OTIgNC4yNDg3NUM3LjQ0NTIgNC4xOTc2MiA3LjQ1OTI3IDQuMTQ1MDcgNy40NjkgNC4wOTE3M0w3LjgzNDQ2IDIuMDg1NzNDNy44NzA4IDEuODg2MjcgOC4wMjM5OCAxLjcyODUgOC4yMjIyNyAxLjY4NjNDOC44MDI0NiAxLjU2MjggOS4zOTczNCAxLjUgMTAgMS41QzEwLjYwMjMgMS41IDExLjE5NjggMS41NjI3MyAxMS43NzY3IDEuNjg2MDdDMTEuOTc0OSAxLjcyODI0IDEyLjEyODEgMS44ODU5MSAxMi4xNjQ1IDIuMDg1MjlMMTIuNTMxIDQuMDkxNjVDMTIuNjMwMSA0LjYzNDk3IDEzLjE1MDkgNC45OTUxIDEzLjY5NDIgNC44OTYwMUMxMy43NDc2IDQuODg2MjcgMTMuODAwMiA0Ljg3MjE5IDEzLjg1MTIgNC44NTM5NUwxNS43Njk2IDQuMTY4MDJDMTUuOTYwMiA0LjA5OTg0IDE2LjE3MzIgNC4xNTMzOSAxNi4zMDg5IDQuMzAzNjRDMTcuMTExNiA1LjE5MjEzIDE3LjcyIDYuMjQwNTMgMTguMDg5MyA3LjM4MjY2QzE4LjE1MTYgNy41NzUzNCAxOC4wOTE1IDcuNzg2NTggMTcuOTM3MSA3LjkxNzY0TDE2LjM4MjMgOS4yMzc3M0MxNS45NjEzIDkuNTk1MiAxNS45MDk4IDEwLjIyNjMgMTYuMjY3MyAxMC42NDczQzE2LjMwMjQgMTAuNjg4NyAxNi4zNDA5IDEwLjcyNzEgMTYuMzgyMyAxMC43NjIzTDE3LjkzNzEgMTIuMDgyNEMxOC4wOTE1IDEyLjIxMzQgMTguMTUxNiAxMi40MjQ3IDE4LjA4OTMgMTIuNjE3M0MxNy43MiAxMy43NTk1IDE3LjExMTYgMTQuODA3OSAxNi4zMDg5IDE1LjY5NjRDMTYuMTczMiAxNS44NDY2IDE1Ljk2MDIgMTUuOTAwMiAxNS43Njk2IDE1LjgzMkwxMy44NTEzIDE1LjE0NjFDMTMuMzMxMiAxNC45NjAyIDEyLjc1OSAxNS4yMzEyIDEyLjU3MzEgMTUuNzUxMkMxMi41NTQ4IDE1LjgwMjQgMTIuNTQwOCAxNS44NTQ5IDEyLjUzMSAxNS45MDg1TDEyLjE2NDUgMTcuOTE0N0MxMi4xMjgxIDE4LjExNDEgMTEuOTc0OSAxOC4yNzE4IDExLjc3NjcgMTguMzEzOUMxMS4xOTY4IDE4LjQzNzMgMTAuNjAyMyAxOC41IDEwIDE4LjVDOS4zOTczNCAxOC41IDguODAyNDYgMTguNDM3MiA4LjIyMjI3IDE4LjMxMzdDOC4wMjM5OCAxOC4yNzE1IDcuODcwOCAxOC4xMTM3IDcuODM0NDYgMTcuOTE0M0w3LjQ2OTAyIDE1LjkwODRDNy4zNjk5MyAxNS4zNjUgNi44NDkxNiAxNS4wMDQ5IDYuMzA1ODMgMTUuMTA0QzYuMjUyNDEgMTUuMTEzNyA2LjE5OTg3IDE1LjEyNzggNi4xNDg4MSAxNS4xNDYxTDQuMjMwNDQgMTUuODMyQzQuMDM5NzggMTUuOTAwMiAzLjgyNjgzIDE1Ljg0NjYgMy42OTEwOSAxNS42OTY0QzIuODg4MzkgMTQuODA3OSAyLjI4MDA0IDEzLjc1OTUgMS45MTA3NSAxMi42MTczQzEuODQ4NDUgMTIuNDI0NyAxLjkwODUyIDEyLjIxMzQgMi4wNjI4OSAxMi4wODI0TDMuNjE3NzMgMTAuNzYyM0M0LjAzODcyIDEwLjQwNDggNC4wOTAyMSA5Ljc3MzczIDMuNzMyNzQgOS4zNTI3NEMzLjY5NzU5IDkuMzExMzUgMy42NTkxMyA5LjI3Mjg4IDMuNjE3NzUgOS4yMzc3NUwyLjA2Mjg5IDcuOTE3NjRDMS45MDg1MiA3Ljc4NjU4IDEuODQ4NDUgNy41NzUzNCAxLjkxMDc1IDcuMzgyNjZaTTIuOTcxMyA3LjM3NzA5TDQuMjY0OTkgOC40NzU0NkM0LjM0Nzc4IDguNTQ1NzYgNC40MjQ3MSA4LjYyMjY5IDQuNDk1MDEgOC43MDU0OEM1LjIwOTk1IDkuNTQ3NDYgNS4xMDY5NyAxMC44MDk2IDQuMjY0OTcgMTEuNTI0NkwyLjk3MTMgMTIuNjIyOUMzLjI2MzM1IDEzLjQwNTEgMy42ODQ4IDE0LjEzMjIgNC4yMTYyMyAxNC43NzUxTDUuODEyMjEgMTQuMjA0NEM1LjkxNDQ5IDE0LjE2NzkgNi4wMTk1OCAxNC4xMzk3IDYuMTI2NDMgMTQuMTIwMkM3LjIxMzA3IDEzLjkyMiA4LjI1NDYyIDE0LjY0MjMgOC40NTI4MSAxNS43MjlMOC43NTY3OCAxNy4zOTc1QzkuMTY0NjUgMTcuNDY1NSA5LjU4IDE3LjUgMTAgMTcuNUMxMC40MTk3IDE3LjUgMTAuODM0OCAxNy40NjU2IDExLjI0MjQgMTcuMzk3NkwxMS41NDcyIDE1LjcyODlDMTEuNTY2NyAxNS42MjIxIDExLjU5NDkgMTUuNTE3IDExLjYzMTQgMTUuNDE0N0MxMi4wMDMxIDE0LjM3NDYgMTMuMTQ3NyAxMy44MzI3IDE0LjE4NzkgMTQuMjA0NEwxNS43ODM4IDE0Ljc3NTFDMTYuMzE1MiAxNC4xMzIyIDE2LjczNjcgMTMuNDA1MSAxNy4wMjg3IDEyLjYyMjlMMTUuNzM1IDExLjUyNDVDMTUuNjUyMiAxMS40NTQyIDE1LjU3NTMgMTEuMzc3MyAxNS41MDUgMTEuMjk0NUMxNC43OTAxIDEwLjQ1MjUgMTQuODkzMSA5LjE5MDQgMTUuNzM1MSA4LjQ3NTQ0TDE3LjAyODcgNy4zNzcwOUMxNi43MzY3IDYuNTk0ODYgMTYuMzE1MiA1Ljg2NzgzIDE1Ljc4MzggNS4yMjQ5NEwxNC4xODc4IDUuNzk1NTlDMTQuMDg1NSA1LjgzMjE0IDEzLjk4MDQgNS44NjAzIDEzLjg3MzYgNS44Nzk3OUMxMi43ODcgNi4wNzc5NiAxMS43NDU0IDUuMzU3NyAxMS41NDczIDQuMjcxMTlMMTEuMjQyNCAyLjYwMjM1QzEwLjgzNDggMi41MzQ0MyAxMC40MTk3IDIuNSAxMCAyLjVDOS41OCAyLjUgOS4xNjQ2NSAyLjUzNDQ4IDguNzU2NzggMi42MDI0OUw4LjQ1Mjc5IDQuMjcxMDVDOC40MzMzMSA0LjM3NzkxIDguNDA1MTUgNC40ODI5OSA4LjM2ODYgNC41ODUyN0M3Ljk5Njg5IDUuNjI1NDIgNi44NTIzNiA2LjE2NzMgNS44MTIxMyA1Ljc5NTU2TDQuMjE2MjMgNS4yMjQ5NEMzLjY4NDggNS44Njc4MyAzLjI2MzM1IDYuNTk0ODYgMi45NzEzIDcuMzc3MDlaTTcuNTAwMDEgMTBDNy41MDAwMSA4LjYxOTI5IDguNjE5MyA3LjUgMTAgNy41QzExLjM4MDcgNy41IDEyLjUgOC42MTkyOSAxMi41IDEwQzEyLjUgMTEuMzgwNyAxMS4zODA3IDEyLjUgMTAgMTIuNUM4LjYxOTMgMTIuNSA3LjUwMDAxIDExLjM4MDcgNy41MDAwMSAxMFpNOC41MDAwMSAxMEM4LjUwMDAxIDEwLjgyODQgOS4xNzE1OSAxMS41IDEwIDExLjVDMTAuODI4NCAxMS41IDExLjUgMTAuODI4NCAxMS41IDEwQzExLjUgOS4xNzE1NyAxMC44Mjg0IDguNSAxMCA4LjVDOS4xNzE1OSA4LjUgOC41MDAwMSA5LjE3MTU3IDguNTAwMDEgMTBaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+") 173 | } 174 | -------------------------------------------------------------------------------- /icons/icons.css: -------------------------------------------------------------------------------- 1 | /* ArcWTF - icons.css */ 2 | 3 | /* Windows 11 style window control icons. */ 4 | @media (-moz-platform: windows) { 5 | .titlebar-min { 6 | list-style-image: url("win11-minimize.svg") !important; 7 | 8 | @media (resolution > 1.25dppx) { 9 | list-style-image: url("win11-minimize.svg#high-dpi") !important; 10 | } 11 | } 12 | 13 | .titlebar-max { 14 | list-style-image: url("win11-maximize.svg") !important; 15 | } 16 | 17 | .titlebar-restore { 18 | list-style-image: url("win11-restore.svg") !important; 19 | } 20 | 21 | .titlebar-close { 22 | list-style-image: url("win11-close.svg") !important; 23 | 24 | /* Alternative icon that uses a thicker stroke, making it easier to see when 25 | * displayed on a dark background, only needed at 100% UI scale. 26 | */ 27 | @media (resolution = 1dppx) { 28 | toolbar[brighttext] &, 29 | &:hover { 30 | list-style-image: url("win11-close-dark.svg") !important; 31 | } 32 | } 33 | } 34 | } 35 | 36 | .subviewbutton { 37 | -moz-context-properties: fill, fill-opacity !important; 38 | fill: currentColor !important; 39 | } 40 | 41 | :root[fxastatus="not_configured"] #fxa-avatar-image { 42 | list-style-image: url("account.svg") !important; 43 | } 44 | 45 | .private-browsing-indicator-icon { 46 | list-style-image: url("account-private.svg") !important; 47 | border-radius: 100% !important; 48 | } 49 | 50 | /* disable context menu icons on macOS */ 51 | @media not (-moz-platform: macos) { 52 | #context-back { 53 | list-style-image: url("back.svg") !important; 54 | } 55 | 56 | #context-forward { 57 | list-style-image: url("forward.svg") !important; 58 | } 59 | 60 | #context-reload { 61 | list-style-image: url("reload.svg") !important; 62 | } 63 | 64 | #context-stop { 65 | list-style-image: url("close.svg") !important; 66 | } 67 | 68 | #context-bookmarkpage { 69 | list-style-image: url("bookmark-hollow.svg") !important; 70 | } 71 | 72 | #context-bookmarkpage[starred] { 73 | list-style-image: url("bookmark.svg") !important; 74 | } 75 | } 76 | 77 | #back-button { 78 | list-style-image: url("back.svg") !important; 79 | } 80 | 81 | #forward-button { 82 | list-style-image: url("forward.svg") !important; 83 | } 84 | 85 | #reload-button { 86 | list-style-image: url("reload.svg") !important; 87 | } 88 | 89 | #stop-button, 90 | .close-icon { 91 | list-style-image: url("close.svg") !important; 92 | } 93 | 94 | .tab-close-button { 95 | list-style-image: url("close-9px.svg") !important; 96 | } 97 | 98 | #sidebar-button { 99 | list-style-image: url("sidebars-right.svg") !important; 100 | } 101 | 102 | #sidebar-button:-moz-locale-dir(ltr):not([positionend]), 103 | #sidebar-button:-moz-locale-dir(rtl)[positionend] { 104 | list-style-image: url("sidebars.svg") !important; 105 | } 106 | 107 | #downloads-button, 108 | #downloads-indicator-anchor, 109 | #appMenu-downloads-button, 110 | #appMenu-library-downloads-button { 111 | list-style-image: url("downloads.svg") !important; 112 | } 113 | 114 | #appMenu-passwords-button, 115 | #password-notification-icon, 116 | #PopupAutoComplete>richlistbox>richlistitem[originaltype="generatedPassword"]>.two-line-wrapper>.ac-site-icon, 117 | #PopupAutoComplete>richlistbox>richlistitem[originaltype="loginWithOrigin"]>.two-line-wrapper>.ac-site-icon, 118 | #PopupAutoComplete>richlistbox>richlistitem[originaltype="login"]>.ac-site-icon { 119 | list-style-image: url("passwords.svg") !important; 120 | } 121 | 122 | #nav-bar-overflow-button { 123 | list-style-image: url("chevron.svg") !important; 124 | } 125 | 126 | #appMenu-report-broken-site-button { 127 | list-style-image: url("report.svg") !important; 128 | } 129 | 130 | #PanelUI-menu-button, 131 | #appMenu-more-button2 { 132 | list-style-image: url("menu.svg") !important; 133 | } 134 | 135 | #appMenu-help-button2 { 136 | list-style-image: url("help.svg") !important; 137 | } 138 | 139 | #new-tab-button { 140 | list-style-image: url("new-tab.svg") !important; 141 | } 142 | 143 | #firefox-view-button { 144 | list-style-image: url("firefox-view.svg") !important; 145 | } 146 | 147 | #sync-button, 148 | .urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon, 149 | #urlbar-engine-one-off-item-tabs { 150 | list-style-image: url("tab.svg") !important; 151 | } 152 | 153 | #history-panelmenu, 154 | .urlbarView-row[source="history"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon, 155 | #urlbar-engine-one-off-item-history, 156 | #appMenu-history-button, 157 | #appMenu-library-history-button, 158 | #sidebar-switcher-history, 159 | #sidebar-box[sidebarcommand="viewHistorySidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon { 160 | list-style-image: url("history.svg") !important; 161 | } 162 | 163 | #save-page-button, 164 | #appMenu-save-file-button2 { 165 | list-style-image: url("save.svg") !important; 166 | } 167 | 168 | #print-button, 169 | #appMenu-print-button2 { 170 | list-style-image: url("print.svg") !important; 171 | } 172 | 173 | .searchbar-search-icon { 174 | list-style-image: url("search-glass.svg") !important; 175 | } 176 | 177 | #find-button, 178 | #appMenu-find-button2 { 179 | list-style-image: url("search-page.svg") !important; 180 | } 181 | 182 | #appMenu-translate-button, 183 | #translations-button-icon { 184 | list-style-image: url("translate.svg") !important; 185 | } 186 | 187 | #open-file-button { 188 | list-style-image: url("open.svg") !important; 189 | } 190 | 191 | #add-ons-button, 192 | #appMenu-extensions-themes-button, 193 | #unified-extensions-button { 194 | list-style-image: url("extension.svg") !important; 195 | } 196 | 197 | #zoom-out-button, 198 | #appMenu-zoomReduce-button2 { 199 | list-style-image: url("zoom-out.svg") !important; 200 | } 201 | 202 | #zoom-in-button, 203 | #tabs-newtab-button, 204 | #TabsToolbar #new-tab-button, 205 | #appMenu-zoomEnlarge-button2 { 206 | list-style-image: url("plus.svg") !important; 207 | } 208 | 209 | #cut-button { 210 | list-style-image: url("edit-cut.svg") !important; 211 | } 212 | 213 | #copy-button { 214 | list-style-image: url("edit-copy.svg") !important; 215 | } 216 | 217 | #paste-button { 218 | list-style-image: url("edit-paste.svg") !important; 219 | } 220 | 221 | #email-link-button { 222 | list-style-image: url("mail.svg") !important; 223 | } 224 | 225 | #screenshot-button { 226 | list-style-image: url("screenshot.svg") !important; 227 | } 228 | 229 | #preferences-button, 230 | .search-setting-button>.button-box>.button-icon, 231 | #appMenu-settings-button, 232 | .unified-extensions-item-open-menu.subviewbutton { 233 | list-style-image: url("settings.svg") !important; 234 | } 235 | 236 | #panic-button { 237 | list-style-image: url("forget.svg") !important; 238 | } 239 | 240 | #appMenu-new-private-window-button2 { 241 | list-style-image: url("private-window.svg") !important; 242 | } 243 | 244 | #privatebrowsing-button { 245 | list-style-image: url("privateBrowsing.svg") !important; 246 | } 247 | 248 | #save-to-pocket-button { 249 | list-style-image: url("pocket-outline.svg") !important; 250 | } 251 | 252 | #profiler-button-button>.toolbarbutton-icon, 253 | .subviewbutton[label="Task Manager"] { 254 | list-style-image: url("tool-profiler.svg") !important; 255 | } 256 | 257 | #developer-button { 258 | list-style-image: url("developer.svg") !important; 259 | } 260 | 261 | #new-window-button, 262 | #appMenu-new-window-button2 { 263 | list-style-image: url("window.svg") !important; 264 | } 265 | 266 | #restore-button, 267 | #fullscreen-button, 268 | #appMenu-fullscreen-button2 { 269 | list-style-image: url("fullscreen.svg") !important; 270 | } 271 | 272 | #restore-button[checked], 273 | #fullscreen-button[checked], 274 | #appMenu-fullscreen-button2[checked] { 275 | list-style-image: url("fullscreen-exit.svg") !important; 276 | } 277 | 278 | #bookmarks-menu-button, 279 | #appMenu-bookmarks-button, 280 | #sidebar-switcher-bookmarks, 281 | #appMenu-library-bookmarks-button, 282 | #sidebar-box[sidebarcommand="viewBookmarksSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon { 283 | list-style-image: url("bookmark-star-on-tray.svg") !important; 284 | } 285 | 286 | #home-button { 287 | list-style-image: url("home.svg") !important; 288 | } 289 | 290 | #library-button { 291 | list-style-image: url("library.svg") !important; 292 | } 293 | 294 | /* identity icons */ 295 | #identity-icon { 296 | list-style-image: url("info.svg") !important; 297 | } 298 | 299 | #identity-box[pageproxystate="valid"].chromeUI #identity-icon { 300 | list-style-image: url("firefox.svg") !important; 301 | } 302 | 303 | #identity-box[pageproxystate="valid"].localResource #identity-icon { 304 | list-style-image: url("page-portrait.svg") !important; 305 | } 306 | 307 | #urlbar:not(.searchButton)>#urlbar-input-container>#identity-box[pageproxystate="invalid"] #identity-icon { 308 | list-style-image: url("search-glass.svg") !important; 309 | } 310 | 311 | #urlbar[actiontype="extension"]>#urlbar-input-container>#identity-box #identity-icon, 312 | #identity-box[pageproxystate="valid"].extensionPage #identity-icon { 313 | list-style-image: url("extension.svg") !important; 314 | } 315 | 316 | #identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, 317 | #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { 318 | list-style-image: url("security.svg") !important; 319 | } 320 | 321 | #urlbar-input-container[pageproxystate="valid"]>#tracking-protection-icon-container>#tracking-protection-icon-box>#tracking-protection-icon { 322 | list-style-image: url("tracking-protection.svg") !important; 323 | } 324 | 325 | /* security */ 326 | .identity-popup-security-connection { 327 | list-style-image: url("security-broken.svg") !important; 328 | } 329 | 330 | #identity-box[pageproxystate="valid"].notSecure #identity-icon, 331 | #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 332 | #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { 333 | list-style-image: url("security-broken.svg") !important; 334 | } 335 | 336 | #identity-popup[connection=chrome] .identity-popup-security-connection { 337 | list-style-image: url("firefox.svg") !important; 338 | } 339 | 340 | #identity-popup[connection="file"] .identity-popup-security-connection { 341 | list-style-image: url("page-portrait.svg") !important; 342 | } 343 | 344 | #identity-popup[connection^=secure] .identity-popup-security-connection { 345 | list-style-image: url("security.svg") !important; 346 | } 347 | 348 | #identity-popup[ciphers=weak] .identity-popup-security-connection, 349 | #identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection, 350 | #identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, 351 | #identity-popup[connection=cert-error-page] .identity-popup-security-connection { 352 | list-style-image: url("security-warning.svg") !important; 353 | } 354 | 355 | #identity-popup[connection=net-error-page] .identity-popup-security-connection { 356 | list-style-image: url("info.svg") !important; 357 | } 358 | 359 | #identity-popup[connection=extension] .identity-popup-security-connection { 360 | list-style-image: url("extension.svg") !important; 361 | } 362 | 363 | #appMenu-new-tab-button2 { 364 | list-style-image: url("new-tab-image.svg") !important; 365 | } 366 | 367 | .findbar-find-previous { 368 | list-style-image: url("arrow-up.svg") !important; 369 | } 370 | 371 | .findbar-find-next { 372 | list-style-image: url("arrow-down.svg") !important; 373 | } 374 | 375 | #protections-popup-mainView .subviewbutton-nav:not(.notFound)::after, 376 | #identity-popup-mainView .subviewbutton-nav::after, 377 | .widget-overflow-list .subviewbutton-nav::after, 378 | .PanelUI-subView .subviewbutton-nav::after, 379 | .menu-right { 380 | content: url("arrow-filled-right.svg") !important; 381 | opacity: 0.6 !important; 382 | scale: 0.75 !important; 383 | } 384 | 385 | #PlacesChevron, 386 | #urlbar-go-button { 387 | list-style-image: url("arrow-right.svg") !important; 388 | } 389 | 390 | .panel-header>.subviewbutton-back { 391 | list-style-image: url("arrow-left.svg") !important; 392 | } 393 | 394 | #overflowMenu-customize-button, 395 | #appmenu-moreTools-button { 396 | list-style-image: url("customize.svg") !important; 397 | } 398 | 399 | .bookmark-item[container] { 400 | list-style-image: url("folder.svg") !important; 401 | } 402 | 403 | #pageAction-panel-bookmark, 404 | #star-button { 405 | list-style-image: url("bookmark-hollow.svg") !important; 406 | } 407 | 408 | #pageAction-panel-bookmark[starred], 409 | #star-button[starred] { 410 | list-style-image: url("bookmark.svg") !important; 411 | } 412 | 413 | #sidebar-box[sidebarcommand="viewTabsSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon, 414 | #sidebar-switcher-tabs { 415 | list-style-image: url("send-to-device.svg") !important; 416 | } 417 | 418 | /* tab icons */ 419 | .tab-icon-image[src="chrome://branding/content/icon32.png"], 420 | .tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] { 421 | content: url("new-tab-image.svg") !important; 422 | } 423 | 424 | .tab-icon-image[src="chrome://global/skin/icons/settings.svg"] { 425 | content: url("settings.svg") !important; 426 | } 427 | 428 | .tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] { 429 | content: url("extension.svg") !important; 430 | } 431 | 432 | .tab-icon-image[src="chrome://browser/skin/customize.svg"] { 433 | content: url("customize.svg") !important; 434 | } 435 | 436 | /* permissions */ 437 | #permissions-granted-icon { 438 | list-style-image: url("permissions.svg") !important; 439 | } 440 | 441 | .geo-icon { 442 | list-style-image: url("geo.svg") !important; 443 | } 444 | 445 | .geo-icon.blocked-permission-icon { 446 | list-style-image: url("geo-blocked.svg") !important; 447 | } 448 | 449 | .xr-icon { 450 | list-style-image: url("xr.svg") !important; 451 | } 452 | 453 | .xr-icon.blocked-permission-icon { 454 | list-style-image: url("xr-blocked.svg") !important; 455 | } 456 | 457 | .popup-notification-icon[popupid="web-notifications"], 458 | .desktop-notification-icon { 459 | list-style-image: url("desktop-notification.svg") !important; 460 | } 461 | 462 | .desktop-notification-icon.blocked-permission-icon { 463 | list-style-image: url("desktop-notification-blocked.svg") !important; 464 | } 465 | 466 | .camera-icon, 467 | #webRTC-sharingCamera-menu, 468 | #webrtc-sharing-icon[sharing="camera"] { 469 | list-style-image: url("camera.svg") !important; 470 | } 471 | 472 | .camera-icon.blocked-permission-icon { 473 | list-style-image: url("camera-blocked.svg") !important; 474 | } 475 | 476 | .microphone-icon, 477 | #webRTC-sharingMicrophone-menu, 478 | #webrtc-sharing-icon[sharing="microphone"] { 479 | list-style-image: url("microphone.svg") !important; 480 | } 481 | 482 | .microphone-icon.blocked-permission-icon { 483 | list-style-image: url("microphone-blocked.svg") !important; 484 | } 485 | 486 | .screen-icon, 487 | #webRTC-sharingScreen-menu, 488 | #webrtc-sharing-icon[sharing="screen"] { 489 | list-style-image: url("screen.svg") !important; 490 | } 491 | 492 | .screen-icon.blocked-permission-icon { 493 | list-style-image: url("screen-blocked.svg") !important; 494 | } 495 | 496 | .popup-notification-icon[popupid="persistent-storage"], 497 | .persistent-storage-icon, 498 | .indexedDB-icon { 499 | list-style-image: url("persistent-storage.svg") !important; 500 | } 501 | 502 | .persistent-storage-icon.blocked-permission-icon { 503 | list-style-image: url("persistent-storage-blocked.svg") !important; 504 | } 505 | 506 | .popup-icon { 507 | list-style-image: url("popup.svg") !important; 508 | } 509 | 510 | .autoplay-media-icon { 511 | list-style-image: url("autoplay-media.svg") !important; 512 | } 513 | 514 | .autoplay-media-icon.blocked-permission-icon { 515 | list-style-image: url("autoplay-media-blocked.svg") !important; 516 | } 517 | 518 | #canvas-notification-icon, 519 | .popup-notification-icon[popupid="canvas-permissions-prompt"], 520 | .canvas-icon { 521 | list-style-image: url("canvas.svg") !important; 522 | } 523 | 524 | .canvas-icon.blocked-permission-icon { 525 | list-style-image: url("canvas-blocked.svg") !important; 526 | } 527 | 528 | .midi-icon, 529 | .midi-sysex-icon, 530 | .popup-notification-icon[popupid="midi"], 531 | .popup-notification-icon[popupid="midi-sysex"] { 532 | list-style-image: url("midi.svg") !important; 533 | } 534 | 535 | .install-icon { 536 | list-style-image: url("extension.svg") !important; 537 | } 538 | 539 | .install-icon.blocked-permission-icon, 540 | .popup-notification-icon[popupid="xpinstall-disabled"], 541 | .popup-notification-icon[popupid="addon-install-blocked"], 542 | .popup-notification-icon[popupid="addon-install-origin-blocked"] { 543 | list-style-image: url("extension-blocked.svg") !important; 544 | } 545 | 546 | /* tab sound icons */ 547 | .tab-icon-overlay[soundplaying] { 548 | list-style-image: url("tab-audio-playing-small.svg") !important; 549 | } 550 | 551 | .tab-icon-overlay[muted] { 552 | list-style-image: url("tab-audio-muted-small.svg") !important; 553 | } 554 | 555 | .tab-icon-overlay[activemedia-blocked] { 556 | list-style-image: url("tab-audio-blocked-small.svg") !important; 557 | } 558 | 559 | /* reload/stop animation */ 560 | #stop-reload-button[animate]>#reload-button[displaystop]+#stop-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image { 561 | background-image: url("reload-to-stop.svg") !important; 562 | } 563 | 564 | #stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image { 565 | background-image: url("stop-to-reload.svg") !important; 566 | } 567 | 568 | #reader-mode-button>.urlbar-icon { 569 | list-style-image: url("reader-mode.svg") !important; 570 | } 571 | 572 | #unified-extensions-manage-extensions { 573 | list-style-image: url("manage.svg") !important; 574 | } 575 | 576 | /* disable context menu icons when this tweak is applied */ 577 | @media{ 578 | 579 | /* Context Menu Icons */ 580 | menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { 581 | list-style-image: url("checkmark.svg") !important; 582 | 583 | @media (-moz-platform: linux) { 584 | list-style-image: none !important; 585 | } 586 | } 587 | 588 | #context-video-pictureinpicture:not([checked="true"]) .menu-iconic-icon { 589 | list-style-image: url("media-pip.svg") !important; 590 | } 591 | 592 | #context-media-loop:not([checked="true"]) .menu-iconic-icon { 593 | list-style-image: url("media-loop.svg") !important; 594 | } 595 | 596 | :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current), 597 | :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) { 598 | background-image: var(--menu-image) !important; 599 | background-size: 16px !important; 600 | background-position: var(--uc-contextmenu-menuitem-padding-inline) center !important; 601 | background-repeat: no-repeat !important; 602 | -moz-context-properties: fill, fill-opacity !important; 603 | fill: currentColor !important; 604 | } 605 | 606 | @media (-moz-platform: macos) { 607 | #context-back { 608 | --menu-image: url("back.svg"); 609 | } 610 | 611 | #context-forward { 612 | --menu-image: url("forward.svg"); 613 | } 614 | 615 | #context-reload { 616 | --menu-image: url("reload.svg"); 617 | } 618 | 619 | #context-stop { 620 | --menu-image: url("close.svg"); 621 | } 622 | 623 | #context-bookmarkpage { 624 | --menu-image: url("bookmark-hollow.svg"); 625 | } 626 | 627 | #contentAreaContextMenu #context-bookmarkpage[starred] { 628 | --menu-image: url("bookmark.svg"); 629 | fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; 630 | } 631 | } 632 | 633 | #context-savepage { 634 | --menu-image: url("save.svg"); 635 | } 636 | 637 | #context-selectall, 638 | .textbox-contextmenu menuitem[cmd*="selectAll"], 639 | #context_selectAllTabs, 640 | #toolbar-context-selectAllTabs { 641 | --menu-image: url("edit-select-all.svg"); 642 | } 643 | 644 | #context-undo, 645 | .textbox-contextmenu menuitem[cmd*="undo"], 646 | #context_undoCloseTab, 647 | #toolbar-context-undoCloseTab { 648 | --menu-image: url("edit-undo.svg"); 649 | } 650 | 651 | #context-redo, 652 | .textbox-contextmenu menuitem[cmd*="redo"] { 653 | --menu-image: url("edit-redo.svg"); 654 | } 655 | 656 | #context-copy, 657 | .textbox-contextmenu menuitem[cmd*="copy"], 658 | #placesContext_copy { 659 | --menu-image: url("edit-copy.svg"); 660 | } 661 | 662 | #context-stripOnShareLink, 663 | #strip-on-share { 664 | --menu-image: url("edit-copy-without-tracking.svg"); 665 | } 666 | 667 | #context-paste, 668 | .textbox-contextmenu menuitem[cmd*="paste"], 669 | #placesContext_paste_group { 670 | --menu-image: url("edit-paste.svg"); 671 | } 672 | 673 | #context-cut, 674 | .textbox-contextmenu menuitem[cmd*="cut"], 675 | #placesContext_cut { 676 | --menu-image: url("edit-cut.svg"); 677 | } 678 | 679 | #context-delete, 680 | .customize-context-removeExtension, 681 | .unified-extensions-context-menu-remove-extension, 682 | .textbox-contextmenu menuitem[cmd*="delete"], 683 | menuitem[id="placesContext_deleteBookmark"], 684 | menuitem[id="placesContext_deleteFolder"], 685 | menuitem[id="placesContext_delete"], 686 | menuitem[id="placesContext_delete_history"], 687 | menuitem[id="placesContext_deleteHost"] { 688 | --menu-image: url("edit-delete.svg"); 689 | } 690 | 691 | #paste-and-go, 692 | .searchbar-paste-and-search { 693 | --menu-image: url("paste-and-go.svg"); 694 | } 695 | 696 | #context-print-selection { 697 | --menu-image: url("print.svg"); 698 | } 699 | 700 | #context-take-screenshot { 701 | --menu-image: url("screenshot.svg"); 702 | } 703 | 704 | #context-viewsource, 705 | #context-viewpartialsource-selection { 706 | --menu-image: url("source-code.svg"); 707 | } 708 | 709 | #context-inspect-a11y { 710 | --menu-image: url("accessibility.svg"); 711 | } 712 | 713 | #context-inspect { 714 | --menu-image: url("inspect.svg"); 715 | } 716 | 717 | #context-searchselect { 718 | --menu-image: url("search-glass.svg"); 719 | } 720 | 721 | #context-viewimage { 722 | --menu-image: url("image-open.svg"); 723 | } 724 | 725 | #context-saveimage, 726 | #context-video-saveimage { 727 | --menu-image: url("image-save.svg"); 728 | } 729 | 730 | #context-savevideo { 731 | --menu-image: url("video-save.svg"); 732 | } 733 | 734 | #context-viewvideo { 735 | --menu-image: url("video-open.svg") 736 | } 737 | 738 | #context-saveaudio { 739 | --menu-image: url("audio-save.svg"); 740 | } 741 | 742 | #context-copyimage-contents { 743 | --menu-image: url("image-copy.svg"); 744 | } 745 | 746 | #context-copyimage, 747 | #context-copyvideourl, 748 | #context-copylink { 749 | --menu-image: url("link.svg"); 750 | } 751 | 752 | #context-sendimage, 753 | #context-sendvideo, 754 | #context-sendaudio { 755 | --menu-image: url("mail.svg"); 756 | } 757 | 758 | #context-setDesktopBackground, 759 | .viewCustomizeToolbar { 760 | --menu-image: url("customize.svg"); 761 | } 762 | 763 | #context-reloadimage, 764 | #context_reloadTab, 765 | #context_reloadSelectedTabs, 766 | #toolbar-context-reloadSelectedTab, 767 | #toolbar-context-reloadSelectedTabs { 768 | --menu-image: url("reload.svg"); 769 | } 770 | 771 | #context-sendlinktodevice, 772 | #context_sendTabToDevice, 773 | #context-sendpagetodevice, 774 | #sidebar-switcher-tabs { 775 | --menu-image: url("send-to-device.svg"); 776 | } 777 | 778 | #context-openlinkintab, 779 | #context-openlinkincontainertab, 780 | menuitem[id="placesContext_open:newtab"], 781 | menuitem[id="placesContext_openLinks:tabs"], 782 | menuitem[id="placesContext_openBookmarkLinks:tabs"], 783 | menuitem[id="placesContext_openBookmarkContainer:tabs"] { 784 | --menu-image: url("tab.svg"); 785 | } 786 | 787 | #context_openANewTab, 788 | #toolbar-context-openANewTab { 789 | --menu-image: url("new-tab-image.svg"); 790 | } 791 | 792 | #context-openlinkinusercontext-menu, 793 | menu[id="placesContext_open:newcontainertab"], 794 | menu[id="placesContext_openContainer:tabs"] { 795 | --menu-image: url("container-tab.svg"); 796 | } 797 | 798 | #context-openlink, 799 | menuitem[id="placesContext_open:newwindow"] { 800 | --menu-image: url("window.svg"); 801 | } 802 | 803 | #context-openlinkprivate, 804 | menuitem[id="placesContext_open:newprivatewindow"] { 805 | --menu-image: url("private-window.svg"); 806 | } 807 | 808 | #context-savelink { 809 | --menu-image: url("downloads.svg"); 810 | } 811 | 812 | #spell-add-to-dictionary { 813 | --menu-image: url("add-to-dictionary.svg"); 814 | } 815 | 816 | #manage-saved-logins { 817 | --menu-image: url("passwords.svg"); 818 | } 819 | 820 | #context-media-play, 821 | #context_playTab, 822 | #context_playSelectedTabs { 823 | --menu-image: url("media-play.svg"); 824 | } 825 | 826 | #context-media-pause { 827 | --menu-image: url("media-pause.svg"); 828 | } 829 | 830 | #context-media-mute, 831 | #context_toggleMuteTab, 832 | #context_toggleMuteSelectedTabs { 833 | --menu-image: url("media-mute.svg"); 834 | } 835 | 836 | #context-media-unmute, 837 | #context_toggleMuteTab[muted], 838 | #context_toggleMuteSelectedTabs[muted] { 839 | --menu-image: url("media-unmute.svg"); 840 | } 841 | 842 | #context-media-playbackrate { 843 | --menu-image: url("media-speed.svg"); 844 | } 845 | 846 | #context-video-fullscreen { 847 | --menu-image: url("fullscreen.svg"); 848 | } 849 | 850 | #context-leave-dom-fullscreen, 851 | menuitem[contexttype="fullscreen"][label*="Exit"] { 852 | --menu-image: url("fullscreen-exit.svg"); 853 | } 854 | 855 | #context-media-hidecontrols, 856 | #context-media-showcontrols { 857 | --menu-image: url("permissions.svg"); 858 | } 859 | 860 | #context_pinTab, 861 | #context_unpinTab, 862 | #context_pinSelectedTabs, 863 | #context_unpinSelectedTabs, 864 | .customize-context-moveToPanel { 865 | --menu-image: url("pin.svg"); 866 | } 867 | 868 | #context_duplicateTab, 869 | #context_duplicateTabs { 870 | --menu-image: url("duplicate-tab.svg"); 871 | } 872 | 873 | #context_bookmarkTab, 874 | #context_bookmarkSelectedTabs, 875 | #toggle_PersonalToolbar, 876 | #context-bookmarklink, 877 | #toolbar-context-bookmarkSelectedTab, 878 | #toolbar-context-bookmarkSelectedTabs { 879 | --menu-image: url("bookmark-hollow.svg"); 880 | } 881 | 882 | #sidebar-switcher-bookmarks { 883 | --menu-image: url("bookmark-star-on-tray.svg"); 884 | } 885 | 886 | menuitem[id="placesContext_show_bookmark:info"], 887 | menuitem[id="placesContext_show_folder:info"], 888 | menuitem[id="placesContext_show:info"] { 889 | --menu-image: url("edit.svg"); 890 | } 891 | 892 | menuitem[id="placesContext_showAllBookmarks"], 893 | #BMB_bookmarksShowAllTop, 894 | #BMB_bookmarksShowAll, 895 | .customize-context-manageExtension, 896 | .unified-extensions-context-menu-manage-extension { 897 | --menu-image: url("manage.svg"); 898 | } 899 | 900 | menuitem[id="placesContext_new:bookmark"], 901 | menuitem[id="placesContext_new:folder"], 902 | menuitem[id="placesContext_new:separator"] { 903 | --menu-image: url("plus.svg"); 904 | } 905 | 906 | #context-savelinktopocket, 907 | #context-pocket { 908 | --menu-image: url("pocket-outline.svg"); 909 | } 910 | 911 | #context_moveTabOptions { 912 | --menu-image: url("move-tab.svg"); 913 | } 914 | 915 | .share-tab-url-item { 916 | --menu-image: url("share.svg"); 917 | } 918 | 919 | #context_reopenInContainer { 920 | --menu-image: url("container-tab.svg"); 921 | } 922 | 923 | #context_closeTab { 924 | --menu-image: url("close.svg"); 925 | } 926 | 927 | .customize-context-reportExtension, 928 | .unified-extensions-context-menu-report-extension { 929 | --menu-image: url("report.svg"); 930 | } 931 | 932 | #sidebar-switcher-history { 933 | --menu-image: url("history.svg"); 934 | } 935 | } 936 | 937 | /* header icons for the app menu sub menus (eg. fx account, history...) */ 938 | .panel-header>h1>span::before { 939 | content: ""; 940 | background: var(--header-image, none) center / 16px no-repeat; 941 | -moz-context-properties: fill, fill-opacity; 942 | fill: currentColor; 943 | padding-inline-start: calc(var(--uc-enabled, 0) * 16px); 944 | margin-inline-end: calc(var(--uc-enabled, 0) * 8px); 945 | } 946 | 947 | #PanelUI-fxa .panel-header>h1>span::before { 948 | --header-image: var(--avatar-image-url); 949 | --uc-enabled: 1; 950 | transform: scale(1.25); 951 | border-radius: 99px; 952 | display: inline-block; 953 | height: 16px; 954 | vertical-align: text-bottom; 955 | } 956 | 957 | #PanelUI-bookmarks .panel-header>h1>span::before { 958 | --header-image: url("bookmark-star-on-tray.svg"); 959 | --uc-enabled: 1; 960 | } 961 | 962 | #PanelUI-history .panel-header>h1>span::before { 963 | --header-image: url("history.svg"); 964 | --uc-enabled: 1; 965 | } 966 | 967 | #report-broken-site-popup-mainView .panel-header>h1>span::before { 968 | --header-image: url("report.svg"); 969 | --uc-enabled: 1; 970 | } 971 | 972 | #PanelUI-helpView .panel-header>h1>span::before { 973 | --header-image: url("help.svg"); 974 | --uc-enabled: 1; 975 | } 976 | 977 | #appMenu-libraryView .panel-header>h1>span::before { 978 | --header-image: url("library.svg"); 979 | --uc-enabled: 1; 980 | } 981 | 982 | #unified-extensions-panel .panel-header>h1>span::before { 983 | --header-image: url("extension.svg"); 984 | --uc-enabled: 1; 985 | } 986 | 987 | /* Tree items used for side bar and library windows */ 988 | treechildren::-moz-tree-image { 989 | fill-opacity: 1 !important; 990 | } 991 | 992 | treechildren::-moz-tree-image(title) { 993 | list-style-image: url("page-portrait.svg") !important; 994 | } 995 | 996 | /* default folder icon */ 997 | treechildren::-moz-tree-image(title, container), 998 | treechildren::-moz-tree-image(title, open) { 999 | list-style-image: url("folder.svg") !important; 1000 | } 1001 | 1002 | /* bookmarks bar icon */ 1003 | treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { 1004 | list-style-image: url("bookmark-hollow.svg") !important; 1005 | } 1006 | 1007 | /* bookmarks menu icon */ 1008 | treechildren::-moz-tree-image(container, queryFolder_menu________) { 1009 | list-style-image: url("folder.svg") !important; 1010 | } 1011 | 1012 | /* smart folder icon */ 1013 | treechildren::-moz-tree-image(query) { 1014 | list-style-image: url("settings.svg") !important; 1015 | } 1016 | 1017 | /* bookmarks category icon */ 1018 | treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { 1019 | list-style-image: url("bookmark-hollow.svg") !important; 1020 | } 1021 | 1022 | /* downloads category icon */ 1023 | treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { 1024 | list-style-image: url("downloads.svg") !important; 1025 | } 1026 | 1027 | /* tags category icon */ 1028 | treechildren::-moz-tree-image(title, query, tagContainer), 1029 | treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { 1030 | list-style-image: url("tag.svg") !important; 1031 | } 1032 | 1033 | /* calendar icon for folders grouping items by date */ 1034 | treechildren::-moz-tree-image(title, query, dayContainer) { 1035 | list-style-image: url("history.svg") !important; 1036 | } 1037 | 1038 | treechildren::-moz-tree-image(title, query, hostContainer) { 1039 | list-style-image: url("folder.svg") !important; 1040 | } 1041 | 1042 | /* history category icon */ 1043 | treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { 1044 | list-style-image: url("history.svg") !important; 1045 | } 1046 | 1047 | treechildren::-moz-tree-image(title, query, folder) { 1048 | list-style-image: url("folder.svg") !important; 1049 | } 1050 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* Original FrameUIforFirefox theme by FineFuturity */ 2 | /* Tweaks by MrOtherGuy/firefox-csshacks, bmFTzQ/Edge-Frfox & Shina-SG/Shina-Fox */ 3 | /* Fork & modifications by KiKaraage */ 4 | 5 | @import url("icons/icons.css"); 6 | @import url("popup-search.css"); 7 | @import url("autohide-sidebar.css") (-moz-bool-pref: "uc.tweak.autohide-sidebar"); 8 | 9 | 10 | /* A) NECCESSITIES */ 11 | /* make theming work */ 12 | #navigator-toolbox { 13 | --toolbar-bgcolor: transparent; 14 | } 15 | 16 | /* make everything transparent when window is inactive */ 17 | :root #PersonalToolbar:-moz-window-inactive, 18 | :root #nav-bar:-moz-window-inactive, 19 | :root #toolbar-menubar:-moz-window-inactive, 20 | :root #titlebar:-moz-window-inactive{ 21 | opacity: 0.3 !important; 22 | } 23 | 24 | /* fix private browsing indicator icon in private browsing mode. */ 25 | #private-browsing-indicator-with-label > label { 26 | visibility: collapse !important; 27 | } 28 | 29 | #private-browsing-indicator-with-label { 30 | visibility: visible !important; 31 | z-index: 1 !important; 32 | margin-top: 4px !important; 33 | margin-right: 6px !important; 34 | transform: scale(0.9) !important; 35 | } 36 | 37 | /* Creates placeholders for window controls */ 38 | /* Defaults for window controls on RIGHT side of the window */ 39 | /* Modify these values to match your preferences */ 40 | :root:is([tabsintitlebar], [sizemode="fullscreen"]) { 41 | --uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */ 42 | /* Extra space reserved on both sides of the nav-bar to be able to drag the window */ 43 | --uc-window-drag-space-pre: 20px; /* left side*/ 44 | --uc-window-drag-space-post: -20px; /* right side*/ 45 | } 46 | 47 | :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { 48 | --uc-window-drag-space-pre: 0px; /* Remove pre space */ 49 | } 50 | 51 | @media (-moz-platform: windows-win7), 52 | (-moz-platform: windows-win8){ 53 | :root:is([tabsintitlebar], [sizemode="fullscreen"]) { 54 | --uc-window-control-width: 105px; 55 | } 56 | } 57 | 58 | @media (-moz-gtk-csd-available) { 59 | :root:is([tabsintitlebar],[sizemode="fullscreen"]) { 60 | --uc-window-control-width: 84px; 61 | } 62 | } 63 | @media (-moz-platform: macos){ 64 | :root:is([tabsintitlebar],[sizemode="fullscreen"]) { 65 | --uc-window-control-width: 72px; 66 | } 67 | } 68 | 69 | .titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) } 70 | :root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none } 71 | :root[sizemode="fullscreen"] #navigator-toolbox { position: relative; } 72 | 73 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, 74 | :root[sizemode="fullscreen"] #window-controls{ 75 | position: absolute; 76 | display: flex; 77 | top: 0; 78 | right:0; 79 | height: 40px; 80 | } 81 | 82 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, 83 | :root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px } 84 | 85 | #nav-bar{ 86 | border-inline: var(--uc-window-drag-space-pre,0px) solid transparent; 87 | border-inline-style: solid !important; 88 | /* border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)); */ 89 | border-right-width: calc( var(--uc-window-control-width,0px)/3 + var(--uc-window-drag-space-post,0px)); 90 | margin-right: var(--uc-window-control-width) !important; 91 | background-clip: border-box !important; 92 | z-index:100 !important; 93 | } 94 | 95 | /* Rules for window controls on left layout */ 96 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 97 | (-moz-gtk-csd-reversed-placement), 98 | (-moz-platform: macos){ 99 | :root[tabsintitlebar="true"] #nav-bar{ 100 | border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px) 101 | } 102 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, 103 | :root[sizemode="fullscreen"] #window-controls{ right: unset } 104 | } 105 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){ 106 | .titlebar-buttonbox-container{ 107 | order: -1 !important; 108 | } 109 | .titlebar-buttonbox{ 110 | flex-direction: row-reverse; 111 | } 112 | } 113 | 114 | /* This pref can be used to force window controls on left even if that is not normal behavior on your OS */ 115 | @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){ 116 | :root[tabsintitlebar="true"] #nav-bar{ 117 | border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px) 118 | } 119 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, 120 | :root[sizemode="fullscreen"] #window-controls{ right: unset; } 121 | .titlebar-buttonbox-container{ 122 | order: -1 !important; 123 | } 124 | .titlebar-buttonbox{ 125 | flex-direction: row-reverse; 126 | } 127 | } 128 | 129 | /* Moves tabs toolbar, bookmarks toolbar and main toolbar to the bottom of the window, and makes tabs be the bottom-most toolbar */ 130 | /* By default, menubar will stay on top with two options to select it's behavior - see below */ 131 | 132 | @-moz-document url(chrome://browser/content/browser.xhtml){ 133 | 134 | #titlebar{ -moz-appearance: none !important; } 135 | 136 | #navigator-toolbox > div{ display: contents } 137 | .global-notificationbox, 138 | #mainPopupSet, 139 | #browser, 140 | #customization-container, 141 | #tab-notification-deck{ 142 | order: -1; 143 | } 144 | 145 | /* Remove the next row if you want tabs to be the top-most row */ 146 | #titlebar{ 147 | order: 2; 148 | height: 30px; 149 | } 150 | 151 | #toolbar-menubar{ 152 | position: fixed; 153 | display: flex; 154 | width: 100vw; 155 | top: 0px; 156 | -moz-window-dragging: drag; 157 | } 158 | /* Remove bottom border that won't do anything useful when at bottom of the window */ 159 | #navigator-toolbox{ border-bottom: none !important; } 160 | 161 | #toolbar-menubar > spacer{ flex-grow: 1 } 162 | 163 | #urlbar[breakout][breakout-extend]{ 164 | display: flex !important; 165 | flex-direction: column-reverse; 166 | bottom: 0px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */ 167 | top: auto !important; 168 | } 169 | 170 | .urlbarView-body-inner{ border-top-style: none !important; } 171 | 172 | /* Yeah, removes window controls. Likely not wanted on bottom row */ 173 | /* #TabsToolbar > .titlebar-buttonbox-container{ display: none } */ 174 | #toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 } 175 | 176 | /* Fix panels sizing */ 177 | .panel-viewstack{ max-height: unset !important; } 178 | 179 | /* Fullscreen mode support */ 180 | #navigator-toolbox[inFullscreen]{ margin-top: 0 !important } 181 | #navigator-toolbox[inFullscreen][style*="margin-top"]{ visibility: collapse } 182 | #fullscr-toggler{ bottom: 0; top: unset !important; } 183 | 184 | /* These three rules exist for compatibility with autohide_toolbox.css */ 185 | #navigator-toolbox{ bottom: 0px; transform-origin: bottom } 186 | #main-window > body > box{ margin-top: 0 !important; } 187 | #toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black); } 188 | 189 | :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{ 190 | margin-block: calc(-1 * var(--bookmarks-toolbar-height)) 0 !important; 191 | } 192 | :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel{ 193 | padding-block: 0 var(--bookmarks-toolbar-height) !important; 194 | } 195 | 196 | /************** 197 | Menubar options - By default, menubar is overlayed on top of web-content 198 | ***************/ 199 | 200 | /* Uncomment the following if you want static menubar on top of the window (make menubar enabled) 201 | * Use when menubar is enabled to always show it */ 202 | 203 | /* 204 | #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) } 205 | */ 206 | 207 | /* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */ 208 | 209 | /* add padding to left side of menu bar items to align with bookmarks and nav bar */ 210 | #toolbar-menubar #menubar-items {padding-left: 10px !important;} 211 | #toolbar-menubar{ background: transparent !important; position: static; display: flex; margin-top: 0px !important; } 212 | 213 | /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */ 214 | #titlebar{ flex-direction: column-reverse } 215 | } 216 | 217 | /* ================= START MODIFICATIONS HERE ================= */ 218 | 219 | .titlebar-buttonbox{ 220 | z-index: 10000 !important; 221 | } 222 | 223 | /* hide everything BUT the window controls on tab bar */ 224 | #TabsToolbar tab, 225 | #TabsToolbar-customization-target, 226 | #firefox-view-button, 227 | .tabs-alltabs-button { 228 | visibility: hidden !important; 229 | background:transparent !important; 230 | } 231 | /* ----------------------------------------------------------- */ 232 | 233 | #TabsToolbar .titlebar-buttonbox-container { 234 | margin-top: 0px !important; 235 | margin-bottom: 0px !important; 236 | } 237 | 238 | /* prep for window controls + move nav-bar into now empty tab bar */ 239 | #nav-bar { 240 | /* margin-left: 84px !important; */ 241 | margin-bottom: -33px !important; 242 | /* margin-right: 144px !important; */ 243 | /* background: purple !important; */ 244 | } 245 | 246 | #nav-bar .toolbarbutton-icon {scale: 0.85;} 247 | 248 | #PersonalToolbar { 249 | background: transparent !important; 250 | order: -1; 251 | } 252 | /* ----------------------------------------------------------- */ 253 | 254 | /* fix issue with bottom of window getting cut off when going into new tab */ 255 | :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel { 256 | margin-top:-28px !important; 257 | /* background: orange !important; */ 258 | 259 | } 260 | 261 | :root[BookmarksToolbarOverlapsBrowser] #sidebar-box { 262 | margin-top:-28px !important; 263 | /* background:orange !important; */ 264 | } 265 | 266 | /* ============================================================ */ 267 | 268 | /* B) NAVBAR & URLBAR */ 269 | 270 | :root { 271 | --urlbarView-item-inline-padding: calc(1px + var(--uc-urlbar-inline-padding) + var(--uc-urlbar-icon-inline-padding)) !important; 272 | --urlbar-icon-border-radius: 99px !important; 273 | --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; 274 | --urlbar-margin-inline: 3px !important; 275 | --identity-box-margin-inline: 6px !important; 276 | --uc-urlbar-icon-inline-padding: 3px !important; 277 | --uc-urlbar-inline-padding: 6px; 278 | --uc-urlbar-shadow: 0 0 0px rgb(0 0 0 / .1); 279 | --urlbarView-rich-suggestion-default-icon-size: 32px !important; 280 | 281 | /* urlbar height */ 282 | & #urlbar-container { 283 | --urlbar-container-height: calc(8px + 14px + var(--toolbarbutton-inner-padding) * 2) !important; 284 | } 285 | 286 | & #urlbar { 287 | --urlbar-toolbar-height: calc(5px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; 288 | --urlbar-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 289 | --urlbar-min-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 290 | font-size: 1em !important; 291 | } 292 | 293 | /* Spacing for urlbar suggestion icons. */ 294 | .urlbarView-row { 295 | --urlbarView-icon-margin-start: 0px !important; 296 | --urlbarView-icon-margin-end: calc(var(--uc-urlbar-icon-inline-padding) + var(--identity-box-margin-inline)) !important; 297 | } 298 | } 299 | 300 | /* Appearance for URL bar. */ 301 | #urlbar-background, 302 | #searchbar { 303 | border-radius: calc(var(--urlbar-icon-border-radius) + 2px) !important; 304 | border-color: transparent !important; 305 | 306 | /* Shadow for URL bar, only appears in light mode. */ 307 | :root:not(:-moz-lwtheme) #nav-bar:not([brighttext]) & { 308 | box-shadow: var(--uc-urlbar-shadow, none); 309 | } 310 | 311 | /* Appearance when the URL bar is expanded. */ 312 | #urlbar[open] & { 313 | border-radius: 8px !important; 314 | border-color: transparent !important; 315 | outline: 0px solid var(--arrowpanel-border-color) !important; 316 | 317 | &:not(:-moz-lwtheme) { 318 | outline-color: transparent !important; 319 | } 320 | } 321 | } 322 | 323 | /* Add padding to sides of URL bar. */ 324 | #urlbar-input-container, 325 | #searchbar { 326 | padding-inline: var(--uc-urlbar-inline-padding) !important; 327 | } 328 | 329 | #urlbar #urlbar-input {text-align: center !important} 330 | #urlbar-background {background: transparent !important;} 331 | #urlbar[focused="true"] > #urlbar-background {background: var(--arrowpanel-background) !important;} 332 | 333 | /* URL bar suggestions container. */ 334 | .urlbarView { 335 | margin-top: 2px !important; 336 | margin-inline: 0 !important; 337 | width: 100% !important; 338 | border-inline: 0 !important; 339 | padding-block: 0 !important; 340 | background: var(--arrowpanel-background) !important; 341 | border-radius: 0 0 8px 8px !important; 342 | 343 | 344 | & .urlbarView-body-inner { 345 | width: 100% !important; 346 | margin-inline-start: 5px !important; 347 | margin-inline-end: 5px !important; 348 | margin-block-start: 5px !important; 349 | } 350 | 351 | /* Remove padding from top of URL bar results, not needed as URL bar input already has padding. */ 352 | & .urlbarView-results { 353 | padding-block-start: 0 !important; 354 | } 355 | } 356 | 357 | /* URL bar item. */ 358 | .urlbarView-row { 359 | padding-block: 0 !important; 360 | border: none !important; 361 | border-radius: 8px !important; 362 | margin-inline: 3px !important; 363 | 364 | /* Vertically align search suggestion thumbnail images. */ 365 | &[rich-suggestion] > .urlbarView-row-inner > .urlbarView-favicon { 366 | margin-inline-start: calc(var(--urlbarView-icon-margin-start) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important; 367 | margin-inline-end: calc(var(--urlbarView-icon-margin-end) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important; 368 | } 369 | } 370 | 371 | /* Keep URL bar in place when expanding. */ 372 | #urlbar[breakout][breakout-extend] { 373 | /* left: 0 !important; */ 374 | /* width: 98% !important; */ 375 | } 376 | 377 | /* Search engine selector */ 378 | .search-one-offs:not([hidden]) { 379 | padding-block: 6px !important; 380 | 381 | & .searchbar-engine-one-off-item { 382 | min-width: 30px !important; 383 | height: 30px !important; 384 | } 385 | 386 | .urlbarView:not([noresults]) > & { 387 | border-color: var(--urlbarView-separator-color) !important; 388 | } 389 | 390 | #urlbar-anon-search-settings { 391 | margin-inline-end: 8px !important; 392 | } 393 | } 394 | 395 | /* Search engine indicator. */ 396 | #urlbar-search-mode-indicator { 397 | :root:not(:-moz-lwtheme) & { 398 | background-color: var(--urlbar-box-hover-bgcolor) !important; 399 | } 400 | 401 | & #urlbar-search-mode-indicator-title { 402 | font-size: 0.9em !important; 403 | } 404 | } 405 | 406 | /* Remove border between URL bar input and suggestions. */ 407 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { 408 | border-top: 0 !important; 409 | align: center !important; 410 | } 411 | 412 | /* Buttons inside the URL bar. */ 413 | .urlbar-page-action, 414 | #urlbar-go-button, 415 | .search-go-button, 416 | #tracking-protection-icon-container, 417 | #identity-icon-box, 418 | #identity-permission-box { 419 | padding-inline: calc(var(--uc-urlbar-icon-inline-padding) + 2px) !important; 420 | /* width: calc(var(--uc-urlbar-icon-inline-padding) * 2 + 14px) !important; */ 421 | scale: 0.9 !important; 422 | } 423 | 424 | /* Site information and Permissions buttons. */ 425 | #identity-icon-box, 426 | #identity-permission-box, 427 | .notification-anchor-icon { 428 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 429 | } 430 | 431 | /* Zoom level and tab container indicators. */ 432 | #userContext-icons, 433 | #urlbar-zoom-button { 434 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 435 | margin-block: 0 !important; 436 | margin-inline: 0 !important; 437 | visibility: collapse !important; 438 | } 439 | 440 | /* Move tracking protection button. */ 441 | #tracking-protection-icon-container, 442 | #page-action-buttons { 443 | order: 2 !important; 444 | } 445 | 446 | /* Show translation button on URL bar. */ 447 | #translation-button { 448 | hidden: false !important; 449 | display: flex !important; 450 | } 451 | 452 | 453 | /* Pin icon for URL bar suggested sites. */ 454 | .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { 455 | fill: var(--toolbar-field-color) !important; 456 | } 457 | 458 | #urlbar-input::placeholder, 459 | .searchbar-textbox::placeholder { 460 | opacity: 0.6 !important; 461 | } 462 | 463 | /* Make the lock icon brighter in dark mode. */ 464 | #nav-bar[brighttext] #identity-box:not([pageproxystate="invalid"]) #identity-icon { 465 | fill-opacity: calc(var(--urlbar-icon-fill-opacity) * 1.8) !important; 466 | } 467 | 468 | /* Make the URL bar label opaque in light mode, matching the icons. */ 469 | #nav-bar:not([brighttext]) #identity-box #identity-icon-label { 470 | opacity: var(--urlbar-icon-fill-opacity) !important; 471 | } 472 | 473 | /* Label on the left of the URL bar, shown when viewing Firefox or extension pages. */ 474 | #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button { 475 | position: relative; 476 | width: unset !important; 477 | 478 | /* Spacing between the icon and label. */ 479 | & #identity-icon-label { 480 | visibility: collapse !important; 481 | } 482 | 483 | /* Separator to the right of the label. */ 484 | &::after { 485 | content: ""; 486 | position: absolute; 487 | height: 16px; 488 | border-right: 0px solid currentColor; 489 | right: 0; 490 | inset-block: 0; 491 | margin-block: auto; 492 | opacity: 0; 493 | } 494 | 495 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 496 | @media (1dppx < resolution < 2dppx) { 497 | &::after { 498 | border-right-width: 1.5px !important; 499 | } 500 | } 501 | 502 | /* Remove background from urlbar box. */ 503 | &:not(:hover, [open]) { 504 | background-color: transparent !important; 505 | 506 | /* Separator opacity */ 507 | &::after { 508 | opacity: 0; 509 | } 510 | } 511 | 512 | /* Fade transition for separator. */ 513 | @media not (prefers-reduced-motion) { 514 | &::after { 515 | transition: opacity 0.2s ease; 516 | } 517 | } 518 | } 519 | 520 | /* C) POPUP & CONTEXT MENU */ 521 | 522 | :root { 523 | --panel-subview-body-padding: 2px 0 !important; 524 | --arrowpanel-border-radius: 8px !important; 525 | --arrowpanel-menuitem-border-radius: 4px !important; 526 | --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important; 527 | --arrowpanel-menuitem-padding-block: 6px !important; 528 | --arrowpanel-menuitem-padding-inline: 10px !important; 529 | --uc-arrowpanel-menuicon-margin-inline: 14px; 530 | --uc-arrowpanel-menuitem-margin-inline: 4px; 531 | --uc-arrowpanel-menuitem-margin-block: 2px; 532 | --panel-separator-margin-vertical: 2px !important; 533 | --panel-separator-margin-horizontal: 0 !important; 534 | 535 | --uc-panel-zoom-button-padding: 8px; 536 | --uc-panel-zoom-button-inline-padding: 9px; 537 | --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)); 538 | 539 | --uc-autocomplete-panel-menuitem-margin: 4px; 540 | --uc-autocomplete-panel-menuicon-padding-inline: 14px; 541 | --uc-autocomplete-panel-separator-margin-vertical: 4px; 542 | 543 | --uc-permission-itemcontainer-padding-block: 8px; 544 | --uc-permission-item-margin-block: 4px; 545 | --uc-permission-item-padding-inline: 16px; 546 | 547 | --uc-contextmenu-border-radius: 8px; 548 | --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0; 549 | --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width)); 550 | --uc-contextmenu-menuitem-padding-block: 6px; 551 | --uc-contextmenu-menuitem-padding-inline: 10px; 552 | --uc-contextmenu-menuitem-border-width: 2px; 553 | --uc-contextmenu-menuicon-margin-inline: 12px; 554 | --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width)); 555 | --uc-contextmenu-menuitem-margin-block: 0px; 556 | --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline); 557 | --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width)); 558 | --uc-contextmenu-separator-horizontal: 0; 559 | } 560 | 561 | /* app menu */ 562 | .addon-banner-item, 563 | .panel-banner-item { 564 | margin: 2px 4px 2px !important; 565 | padding-inline: 4px 12px !important; 566 | padding-block: var(--arrowpanel-menuitem-padding-block) !important; 567 | border-radius: var(--arrowpanel-menuitem-border-radius) !important; 568 | } 569 | 570 | #appMenu-fxa-label2 label, 571 | #PanelUI-fxa-menu-syncnow-button label { 572 | margin-block: 0 !important; 573 | } 574 | 575 | .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text, 576 | .subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text, 577 | #appMenu-fxa-label2 > vbox { 578 | padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important; 579 | } 580 | 581 | /* special case menuitems with no icons */ 582 | #appMenu-zoom-controls > .toolbarbutton-text, 583 | #fxa-manage-account-button > vbox, 584 | #PanelUI-fxa-menu-syncnow-button > hbox { 585 | padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important; 586 | } 587 | 588 | .subviewbutton > .toolbarbutton-icon { 589 | width: 16px !important; 590 | } 591 | 592 | /* firefox profile avatar in appmenu */ 593 | #appMenu-fxa-label2::before { 594 | content: ""; 595 | display: flex; 596 | height: 16px; 597 | width: 16px; 598 | background: var(--avatar-image-url) 0/16px; 599 | scale: 1.25; 600 | border-radius: 99px; 601 | } 602 | 603 | /* disable proton account separator */ 604 | #appMenu-fxa-separator { 605 | border-image: none !important; 606 | } 607 | 608 | #appMenu-fxa-status2:not([fxastatus]) { 609 | padding-block: 0 !important; 610 | } 611 | 612 | #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 { 613 | margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important; 614 | } 615 | 616 | /* zoom controls */ 617 | #appMenu-zoom-controls { 618 | border-top: 1px solid var(--panel-separator-color) !important; 619 | padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important; 620 | padding-block-start: calc(var(--uc-panel-zoom-padding-block) + 3px) !important; 621 | padding-block-end: 0 !important; 622 | margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important; 623 | } 624 | 625 | #appMenu-zoom-controls > .subviewbutton { 626 | padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important; 627 | margin: 0 !important; 628 | } 629 | 630 | #appMenu-zoom-controls > #appMenu-zoomReset-button2 { 631 | padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important; 632 | } 633 | 634 | /* #appMenu-zoomReduce-button2, */ 635 | #appMenu-zoom-controls > #appMenu-fullscreen-button2 { 636 | margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important; 637 | } 638 | 639 | #appMenu-zoom-controls > #appMenu-fullscreen-button2::before { 640 | content: ""; 641 | border-inline-start: 1px solid var(--panel-separator-color); 642 | display: block; 643 | position: relative; 644 | height: 32px; 645 | margin-block: calc(var(--uc-panel-zoom-button-padding) * -1); 646 | transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px)); 647 | } 648 | 649 | #appMenu-zoomReset-button2 { 650 | height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; 651 | min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; 652 | } 653 | 654 | #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover), 655 | #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover), 656 | #appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover), 657 | #appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) { 658 | background-color: var(--panel-item-hover-bgcolor) !important; 659 | } 660 | 661 | #appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active), 662 | #appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active), 663 | #appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active), 664 | #appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) { 665 | background-color: var(--panel-item-active-bgcolor) !important; 666 | } 667 | 668 | #appMenu-zoomReduce-button2 > .toolbarbutton-icon, 669 | #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { 670 | fill: currentColor !important; 671 | stroke: none !important; 672 | } 673 | 674 | #appMenu-zoomReset-button2 > .toolbarbutton-text, 675 | #appMenu-fullscreen-button2 > .toolbarbutton-icon { 676 | background-color: transparent !important; 677 | padding: 0 !important; 678 | } 679 | 680 | .subviewbutton[shortcut]::after { 681 | opacity: 0.7 !important; 682 | } 683 | 684 | #widget-overflow-mainView .panel-subview-body { 685 | padding-bottom: 0 !important; 686 | } 687 | 688 | .PanelUI-subView > .panel-header + toolbarseparator { 689 | margin-bottom: 0 !important; 690 | } 691 | 692 | .PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body { 693 | padding-top: var(--panel-separator-margin-vertical) !important; 694 | } 695 | 696 | #identity-popup-security-button { 697 | margin-bottom: var(--panel-separator-margin-vertical) !important; 698 | } 699 | 700 | #permission-popup-mainView-panel-header, 701 | #identity-popup-mainView-panel-header, 702 | #protections-popup-mainView-panel-header, 703 | .panel-header { 704 | min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important; 705 | } 706 | 707 | /* context menu */ 708 | @media { 709 | menupopup:not(.PanelUI-subView), 710 | menupopup:not(.PanelUI-subView) menuitem, 711 | menupopup:not(.PanelUI-subView) menu, 712 | menupopup:not(.PanelUI-subView) menuseparator, 713 | panel:not(#PopupSearchAutoComplete) { 714 | appearance: none !important; 715 | } 716 | 717 | menupopup:not(.PanelUI-subView), 718 | #PopupAutoComplete, 719 | menulist > menupopup:not(.PanelUI-subView) > menucaption { 720 | -moz-window-shadow: none !important; 721 | background: 0 !important; 722 | border: 0 !important; 723 | color: var(--arrowpanel-color) !important; 724 | } 725 | 726 | .popup-internal-box, 727 | #PopupAutoComplete > .autocomplete-richlistbox, 728 | .menupopup-arrowscrollbox { 729 | background: var(--arrowpanel-background) !important; 730 | border: 1px solid var(--arrowpanel-border-color) !important; 731 | } 732 | 733 | /* make room for menu shadow */ 734 | menupopup:not(.PanelUI-subView) { 735 | padding: 4px 12px 20px !important; 736 | margin: -6px -12px -16px !important; 737 | } 738 | 739 | /* cut off shadow so it doesn't get in the way of the menubar items */ 740 | menubar menupopup { 741 | padding: 1px 8px 20px !important; 742 | margin: -1px -4px -16px !important; 743 | } 744 | 745 | menupopup { 746 | --uc-margin: 0 !important; 747 | --uc-outline-color: #0001; 748 | --uc-box-shadow: 749 | 0 8px 12px #0003, 750 | 0 4px 5px #0002, 751 | 0 2px 4px #0002; 752 | } 753 | 754 | @media (prefers-color-scheme:dark) { 755 | menupopup { 756 | --uc-outline-color: #0002; 757 | --uc-box-shadow: 758 | 0 8px 12px #0003, 759 | 0 4px 5px #0003, 760 | 0 2px 4px #0002; 761 | } 762 | } 763 | 764 | /* use default shadow for subview menupopup (eg. bookmarks) */ 765 | menupopup.PanelUI-subView { 766 | --uc-box-shadow: 0 0 0 1px var(--panel-border-color); 767 | --uc-margin: 1px !important; 768 | margin-top: -5px !important; 769 | } 770 | 771 | .menupopup-arrowscrollbox { 772 | box-shadow: var(--uc-box-shadow) !important; 773 | outline: .5px solid var(--uc-outline-color) !important; 774 | } 775 | 776 | .popup-internal-box { 777 | margin: 0 !important; 778 | } 779 | 780 | .popup-internal-box, 781 | .menupopup-arrowscrollbox { 782 | padding: var(--uc-contextmenu-padding) !important; 783 | border-radius: var(--uc-contextmenu-border-radius) !important; 784 | color: inherit !important; 785 | } 786 | 787 | menupopup menu[disabled="true"], 788 | menupopup menuitem[disabled="true"] { 789 | color: var(--panel-disabled-color) !important; 790 | background: none !important; 791 | } 792 | 793 | menupopup menu:hover:not([disabled=true]), 794 | menupopup menuitem:hover:not([disabled=true]), 795 | menupopup menu[_moz-menuactive]:not([disabled=true]), 796 | menupopup menuitem[_moz-menuactive]:not([disabled=true]) { 797 | background-color: var(--panel-item-hover-bgcolor) !important; 798 | color: inherit !important; 799 | } 800 | 801 | menupopup menuitem:hover:active:not([disabled=true]), 802 | menupopup menu:hover:active:not([disabled=true]) { 803 | background-color: var(--panel-item-active-bgcolor) !important; 804 | color: inherit !important; 805 | } 806 | 807 | menupopup menuseparator, 808 | panel menuseparator, 809 | #PopupSearchAutoComplete .searchbar-separator { 810 | margin: var(--uc-contextmenu-separator-vertical) 0 !important; 811 | padding: 0 !important; 812 | background: none !important; 813 | border-top: 1px solid var(--panel-separator-color) !important; 814 | 815 | &::before { 816 | content: unset !important; 817 | } 818 | } 819 | 820 | #PlacesToolbar menupopup[placespopup="true"] menuseparator::before { 821 | display: none !important; 822 | } 823 | 824 | menupopup menu, 825 | menupopup menuitem, 826 | menupopup menucaption, 827 | #PopupAutoComplete > richlistbox > richlistitem, 828 | #PopupSearchAutoComplete .autocomplete-richlistitem { 829 | padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important; 830 | margin: var(--uc-contextmenu-menuitem-margin) !important; 831 | border-radius: var(--uc-contextmenu-menuitem-border-radius) !important; 832 | border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important; 833 | background-clip: padding-box !important; 834 | min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important; 835 | } 836 | 837 | :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current), 838 | :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current), 839 | :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menucaption { 840 | padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important; 841 | } 842 | 843 | .menu-iconic-icon { 844 | margin-block: 0 !important; 845 | margin-inline-end: 0 !important; 846 | margin-inline-start: 0 !important; 847 | } 848 | 849 | menu > .menu-iconic-text, 850 | menuitem > .menu-iconic-text, 851 | /* Used for vertical context navigation tweak. */ 852 | #context-navigation > .menuitem-iconic::after { 853 | padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important; 854 | } 855 | 856 | .menu-text, 857 | .menu-iconic-text { 858 | margin-inline-start: 0 !important; 859 | padding-block: 0 !important; 860 | } 861 | 862 | .menu-accel, 863 | .menu-iconic-accel { 864 | margin-inline-end: 0 !important; 865 | padding-block: 0 !important; 866 | opacity: 0.7 !important; 867 | } 868 | 869 | .menu-iconic > .menu-iconic-left, 870 | .menuitem-iconic > .menu-iconic-left { 871 | padding-inline-end: 0 !important; 872 | padding-block: 0 !important; 873 | } 874 | 875 | menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon { 876 | -moz-context-properties: fill !important; 877 | fill: currentColor !important; 878 | } 879 | 880 | .menu-right, 881 | .menu-accel-container { 882 | appearance: none !important; 883 | margin-inline-end: 0 !important; 884 | -moz-context-properties: fill; 885 | fill: currentColor !important; 886 | } 887 | 888 | menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon, 889 | menulist > menupopup > menuitem .menu-iconic-icon, 890 | menu .menu-right { 891 | height: 16px !important; 892 | width: 16px !important; 893 | } 894 | 895 | menulist > menupopup > menuitem:is([checked="true"], [selected="true"])::before, 896 | menupopup > menuitem::before, 897 | menupopup > menu::before, 898 | menupopup > menuitem::after { 899 | display: none !important; 900 | } 901 | 902 | menuitem:is([type="checkbox"], [checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon { 903 | display: flex !important; 904 | } 905 | 906 | menuitem[checked="true"] > .menu-iconic-left, 907 | menu > .menu-iconic-left, 908 | menuitem > .menu-iconic-left { 909 | margin: 0 !important; 910 | padding: 0 !important 911 | } 912 | 913 | #context-navigation:not([hidden]) { 914 | padding: 0 !important; 915 | --menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important; 916 | min-width: calc(4 * var(--menuitem-min-width)); 917 | } 918 | 919 | #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { 920 | width: 16px !important; 921 | height: 16px !important; 922 | padding: 0 !important; 923 | } 924 | 925 | #context-navigation { 926 | margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important; 927 | } 928 | 929 | #context-navigation > .menuitem-iconic { 930 | justify-content: center !important; 931 | } 932 | 933 | #context-navigation > .menuitem-iconic { 934 | margin: 0 !important; 935 | } 936 | 937 | #context-navigation > .menuitem-iconic { 938 | flex-grow: 1 !important; 939 | width: unset !important; 940 | } 941 | 942 | #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon { 943 | background-color: transparent !important; 944 | } 945 | 946 | #context-bookmarkpage[starred] .menu-iconic-icon { 947 | fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; 948 | } 949 | 950 | /* D) SIDEBAR */ 951 | 952 | @media not (-moz-bool-pref: "uc.tweak.autohide-sidebar") { 953 | #sidebar-title { 954 | padding-inline: 4px !important; 955 | opacity: 70% !important; 956 | } 957 | 958 | #sidebar-switcher-target { 959 | padding: 0px 0px 2px 0px !important; 960 | } 961 | 962 | #sidebar-header #sidebar-switcher-target #sidebar-icon { 963 | scale: 0.8 !important; 964 | opacity: 70% !important; 965 | } 966 | 967 | #sidebar-header { 968 | overflow: hidden; 969 | color: var(--chrome-color, inherit) !important; 970 | padding: 6px 0 2px 0 !important; 971 | font-size: 1em !important; 972 | font-weight: bold !important; 973 | border-bottom: 0 !important; 974 | border-top-right-radius: var(--uc-tweak-rounded-corners-radius) !important; 975 | } 976 | 977 | #sidebar-splitter { 978 | opacity: 0% !important; 979 | } 980 | 981 | /* #sidebar-header #sidebar-switcher-target #sidebar-icon, 982 | #sidebar-header #sidebar-switcher-target #sidebar-switcher-arrow, 983 | #sidebar-splitter { 984 | visibility: collapse !important; 985 | } */ 986 | 987 | #sidebar-close.close-icon.tabbable { 988 | scale: 0.7 !important; 989 | opacity: 40% !important; 990 | } 991 | 992 | @media (-moz-bool-pref: "uc.tweak.autohide-sidebar") { 993 | #sidebar-header { 994 | visibility: collapse !important; 995 | } 996 | } 997 | 998 | #sidebar-header::before, 999 | #sidebar-header::after { 1000 | content: ""; 1001 | /* display: flex; */ 1002 | padding-left: 8px; 1003 | } 1004 | 1005 | #sidebar-header, 1006 | #sidebar { 1007 | background-color: var(--lwt-accent-color) !important; 1008 | } 1009 | 1010 | .sidebar-panel { 1011 | background-color: var(--lwt-accent-color) !important; 1012 | color: var(--newtab-text-primary-color) !important; 1013 | } 1014 | 1015 | .sidebar-panel #search-box { 1016 | -moz-appearance: none !important; 1017 | background-color: var(--lwt-accent-color) !important; 1018 | color: inherit !important; 1019 | } 1020 | } 1021 | 1022 | /* E) EXTENSIONS MENU */ 1023 | 1024 | /* Clean and tight extensions menu */ 1025 | #unified-extensions-panel #unified-extensions-view { 1026 | width: 100% !important; /* For firefox v115.x */ 1027 | } 1028 | 1029 | #unified-extensions-view{ 1030 | --uei-icon-size: 16px; /* Change icon size */ 1031 | --firefoxcss-number-of-extensions-in-a-row: 4; /* Increase to the number of icons you want in one row */ 1032 | } 1033 | 1034 | #unified-extensions-view:before{ 1035 | content: "Extensions"; 1036 | text-align: left !important; 1037 | font-weight: bold !important; 1038 | padding-top: 9px !important; 1039 | padding-bottom: 4px !important; 1040 | padding-left: 14px !important; 1041 | } 1042 | 1043 | #unified-extensions-view .panel-header, 1044 | #unified-extensions-view .panel-header .panel-header-icon, 1045 | #unified-extensions-view .panel-header + toolbarseparator, 1046 | #unified-extensions-view .panel-subview-body + toolbarseparator, 1047 | #unified-extensions-view #unified-extensions-manage-extensions .toolbarbutton-icon, 1048 | #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton, 1049 | #unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents{ 1050 | visibility: collapse !important; 1051 | } 1052 | 1053 | #unified-extensions-view #unified-extensions-manage-extensions .toolbarbutton-text { 1054 | margin: 0 !important; 1055 | padding: 0 !important; 1056 | text-align: center !important; 1057 | } 1058 | 1059 | #unified-extensions-view .panel-subview-body { 1060 | padding: 2px !important; 1061 | } 1062 | 1063 | #unified-extensions-view .unified-extensions-item .unified-extensions-item-icon, 1064 | #unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack { 1065 | margin-inline-end: 0px !important; 1066 | } 1067 | 1068 | #unified-extensions-view #overflowed-extensions-list, 1069 | #unified-extensions-view #unified-extensions-area, 1070 | #unified-extensions-view .unified-extensions-list { 1071 | display: grid !important; 1072 | grid-template-columns: repeat(var(--firefoxcss-number-of-extensions-in-a-row),auto); 1073 | justify-items:left !important; 1074 | align-items:left !important; 1075 | } 1076 | 1077 | #unified-extensions-view .unified-extensions-list .unified-extensions-item, 1078 | #unified-extensions-view .unified-extensions-list{ 1079 | max-width: max-content; 1080 | max-height: max-content; 1081 | } 1082 | 1083 | #unified-extensions-view #unified-extensions-area { 1084 | /* padding-top: 0px !important; */ 1085 | /* padding-bottom: 0px !important; */ 1086 | /* border-bottom: 0px solid #aeaeae33 !important; */ 1087 | } 1088 | 1089 | #unified-extensions-view .unified-extensions-list { 1090 | /* border-top: 1px solid #aeaeae33 !important; */ 1091 | } 1092 | 1093 | #wrapper-edit-controls:is([place="palette"], 1094 | [place="panel"]) > #edit-controls, #wrapper-zoom-controls:is([place="palette"], 1095 | [place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { 1096 | margin: 5px !important; 1097 | } 1098 | 1099 | /* F) FRAME TWEAK */ 1100 | 1101 | @media (-moz-bool-pref: "uc.tweak.frame") { 1102 | /* Since Firefox 120, when the bookmarks bar is set to only open on new tabs, 1103 | * the bookmarks bar overlaps the #browser element. */ 1104 | 1105 | /* Change the element that shifts the browser content to the correct position. */ 1106 | #main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel, 1107 | #main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box { 1108 | padding-top: 0 !important; 1109 | } 1110 | 1111 | #main-window[BookmarksToolbarOverlapsBrowser] #browser { 1112 | margin-top: var(--bookmarks-toolbar-overlapping-browser-height); 1113 | } 1114 | 1115 | /* Make sure that the toolbars are not positioned in-front of the browser 1116 | * element. */ 1117 | #main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) { 1118 | z-index: auto !important; 1119 | } 1120 | 1121 | /* Move the browser element in-front of the toolbars when on the new tab page. */ 1122 | #main-window:not([BookmarksToolbarOverlapsBrowser]) #browser { 1123 | z-index: 1 !important; 1124 | } 1125 | 1126 | /* Variables used for the rounded corners. */ 1127 | #main-window:not([chromehidden~="toolbar"]) { 1128 | --uc-tweak-rounded-corners-padding: 10px; 1129 | --uc-tweak-rounded-corners-radius: 0px; 1130 | --uc-tweak-rounded-corners-shadow: 1131 | 0 -.8px 0 0 rgb(0 0 0 / 0.02), 1132 | 0 0.5px 1px 1px rgb(0 0 0 / 0.06), 1133 | 0 1px 1px rgb(0 0 0 / 0.1); 1134 | --browser-frame-bgcolor: var(--lwt-accent-color, var(--lwt-accent-color)); 1135 | 1136 | /* Different shadow for higher resolution displays. */ 1137 | @media (resolution > 1.8dppx) { 1138 | --uc-tweak-rounded-corners-shadow: 1139 | 0 0 0.5px 0.5px rgb(0 0 0 / 0.06), 1140 | 0 0.5px 1.5px rgb(0 0 0 / 0.1); 1141 | } 1142 | } 1143 | 1144 | /* Hide border below titlebar on macOS, as its titlebar already has a border. */ 1145 | @media (-moz-platform: macos) { 1146 | :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { 1147 | border-top: none !important; 1148 | } 1149 | } 1150 | 1151 | /* Remove separator between toolbars and the browser window. */ 1152 | #navigator-toolbox { 1153 | border-bottom: none !important; 1154 | } 1155 | 1156 | /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */ 1157 | :root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser, 1158 | :root[inDOMFullscreen] #browser { 1159 | --uc-tweak-rounded-corners-padding: 0; 1160 | --uc-tweak-rounded-corners-radius: 0; 1161 | --uc-tweak-rounded-corners-shadow: unset; 1162 | } 1163 | 1164 | /* Apply rounded corners to the browser container. */ 1165 | #appcontent .browserStack { 1166 | margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; 1167 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 1168 | margin-block-start: var(--uc-tweak-rounded-corners-padding) !important; 1169 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 1170 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 1171 | background-color: var(--tabpanel-background-color) !important; 1172 | position: relative !important; 1173 | 1174 | @media (-moz-bool-pref: "uc.tweak.autohide-sidebar") { 1175 | margin-inline-start: 2px !important; 1176 | } 1177 | 1178 | /* Use pseudo element overlay to simulate rounded corners, similar to the 1179 | * tab corners, fixes bug with backdrop-filter. */ 1180 | &::after { 1181 | content: ""; 1182 | position: absolute; 1183 | inset: 0; 1184 | border-radius: inherit; 1185 | /* Draw toolbar background on the negative corner space, then draw the 1186 | * same shadow from the browser window on top. */ 1187 | box-shadow: 1188 | var(--uc-tweak-rounded-corners-shadow, 0 0 transparent), 1189 | 0 0 0 16px var(--browser-frame-bgcolor) !important; 1190 | clip-path: inset(0); 1191 | pointer-events: none; 1192 | } 1193 | } 1194 | 1195 | /* Prevent status panel corners and shadow from appearing outside the browser. */ 1196 | #statuspanel { 1197 | overflow: hidden; 1198 | } 1199 | 1200 | /* Apply rounded corners to sidebar. */ 1201 | #sidebar-box { 1202 | margin-inline-start: calc(var(--uc-tweak-rounded-corners-padding) - 6px) !important; 1203 | margin-block-start: calc(var(--uc-tweak-rounded-corners-padding) - 6px) !important; 1204 | border-radius: none !important; 1205 | box-shadow: none !important; 1206 | background-color: transparent !important; 1207 | 1208 | &[positionend] { 1209 | margin-inline-start: 0 !important; 1210 | margin-inline-end: 0 !important; 1211 | } 1212 | } 1213 | 1214 | /* Devtools window when docked to the left or right. */ 1215 | .devtools-toolbox-side-iframe { 1216 | margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; 1217 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 1218 | overflow: hidden !important; 1219 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 1220 | 1221 | /* Devtools window when docked to the left. */ 1222 | &:first-child { 1223 | margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; 1224 | } 1225 | 1226 | /* Devtools window when docked to the right. */ 1227 | &:last-child { 1228 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 1229 | } 1230 | } 1231 | 1232 | /* Devtools window when docked to the bottom. */ 1233 | .devtools-toolbox-bottom-iframe { 1234 | margin: var(--uc-tweak-rounded-corners-padding) !important; 1235 | margin-block-start: 0 !important; 1236 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 1237 | overflow: hidden !important; 1238 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 1239 | } 1240 | 1241 | /* Hide devtools splitter. */ 1242 | .devtools-side-splitter, 1243 | .devtools-horizontal-splitter { 1244 | background-color: transparent !important; 1245 | } 1246 | 1247 | /* Remove sidebar border when not in full screen. */ 1248 | :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter { 1249 | border-inline-width: 0 !important; 1250 | } 1251 | 1252 | /* Apply colour to the frame around the browser window. */ 1253 | #browser { 1254 | background-color: var(--browser-frame-bgcolor); 1255 | } 1256 | 1257 | /* Change colour of page when loading */ 1258 | #tabbrowser-tabpanels { 1259 | background-color: transparent !important; 1260 | } 1261 | } 1262 | --------------------------------------------------------------------------------