diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 591518f..0a59d17 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -7,14 +7,14 @@ assignees: '' --- -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I don't like this design that [...] +**Is your feature request related to a problem?** + -**Describe the solution you'd like** -A clear and concise description of what you want to happen. +**The solution I'd like** + -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. +**Alternatives I've considered** + **Additional context** -Add any other context or screenshots about the feature request here. + diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index de16b5d..b7cd3db 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -17,14 +17,11 @@ jobs: steps: - name: Checkout uses: actions/checkout@v2 - with: - # Make sure the actual branch is checked out when running on pull requests - ref: ${{ github.head_ref }} - name: Prettify code uses: creyD/prettier_action@v3.3 with: # This part is also where you can pass other options, for example: - prettier_options: --write **/*.{css} + prettier_options: --write . env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index a0e796a..c877e85 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -13,7 +13,7 @@ jobs: branch: "master" - name: "Lepton-Photon-Style" branch: "photon-style" - - name: "Lepton-Prton-Style" + - name: "Lepton-Proton-Style" branch: "proton-style" steps: - uses: actions/checkout@v2 @@ -29,7 +29,7 @@ jobs: BRANCH=${{ matrix.branch }} TAGVER=${GITHUB_REF#refs/*/} - echo -e "\[Info\]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON + echo -e "[Info]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON - name: Release Structure run: | diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ce4fa31..91c44ba 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,6 +9,9 @@ - [Environment](#environment) - [Your First Contribution](#your-first-contribution) - [Contribution Targets](#contribution-targets) + - [Project Structure](#project-structure) + - [Icon files](#icon-files) + - [Meta Info files](#meta-info-files) - [Rules](#rules) - [Version](#version) - [Branch](#branch) @@ -18,7 +21,7 @@ - [Commit Message](#commit-message) - [Pull request](#pull-request) - [License](#license) - - [References](#references) +- [References](#references) @@ -46,7 +49,7 @@ You can configure it as follows: git clone https://github.com/black7375/Firefox-UI-Fix.git cd ./Firefox-UI-Fix -## install dependencies +## checkout branch git checkout ``` @@ -61,6 +64,7 @@ The following documents may be helpful: - [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips) Live Debugging: +- [Tutorial: How to create and live-debug userChrome.css](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/) - [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) - [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor) @@ -104,6 +108,65 @@ We love your input! We want to make contributing to this project as easy and tra - Improved compatibility or accessibility. - Refactoring. +### Project Structure + +``` +root +|- .gitattributes: Exclude at `Download Zip` +|- .github: Issue/PR Template, Github Actions +|- .prettierignore: Exclude coding style +|- .prettierrc.json: Coding style +|- icons/: Icons, illustrations +|- install.ps1: Install script write in powersehll +|- install.sh: Install script write in bash +|- LEPTON: Meta infos (branch, version) +|- user.js: about:config settings +|- userChrome.css: CSS for Browser UI +|- userContent.css: CSS for Web pages +``` + +#### Icon files + +Most of them are made in SVG. + +Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency. + +Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons) +or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons). + +#### Meta Info files + +It comes from [install.sh](https://github.com/black7375/Firefox-UI-Fix/blob/01ae88bf2c4710e1f364d9eb2901ca2b722cefe7/install.sh#L442). + +**`LEPTON` file format** + +If this file exist in same directory as the `userChrome.css` file, +it is recognized as the "Lepton" installation directory. + +```ini +[Info] +Branch=master | photon-style | proton-style +Ver= | | [NULL] +``` + +**`lepton.ini` file Format** + +In `lepton.ini`, various information is stored during the installation process.\ +This file is recreated every time the installer is created. + +```ini +[Profile Name] +Type=Local | Release | Git +Branch=master | photon-style | proton-style +Ver= | | [NULL] +Path= +``` + +**Update Policy according to `Type`** +- Local(unknown): force latest commit update +- Release(): force latest tag update +- Git: latest commit update + ## Rules ### Version @@ -113,6 +176,8 @@ Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maint We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks. Rapid releases. +It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issuecomment-873313945). + ### Branch Stable: Only bugfix, Documentation. @@ -136,7 +201,7 @@ Development: New Features. ### Coding style - **Indent:** 2 spaces for indentation rather than tabs. -- **Columns:** Fit `80`~`100` columns as much as possible. +- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case) ### Commit diff --git a/icons/pin-tab.svg b/icons/pin-tab.svg index 1f951a3..719eeed 100644 --- a/icons/pin-tab.svg +++ b/icons/pin-tab.svg @@ -1,6 +1,6 @@ - - - \ No newline at end of file + + + diff --git a/icons/unpin-tab.svg b/icons/unpin-tab.svg index bd2b382..8acf292 100644 --- a/icons/unpin-tab.svg +++ b/icons/unpin-tab.svg @@ -1,6 +1,6 @@ - - - \ No newline at end of file + + + diff --git a/install.ps1 b/install.ps1 index 9132fe2..c829fcc 100644 --- a/install.ps1 +++ b/install.ps1 @@ -138,8 +138,8 @@ function Copy-Auto() { } if ( Test-Path -Path "${target}" ) { - Write-Host "${target} alreay exist." - Write-Host "Now Backup.." + Write-Host "${target} already exists." + Write-Host "Now making a backup.." Copy-Auto "${target}" "${target}.bak" Remove-Item "${target}" -Recurse -Force Write-Host "" @@ -162,8 +162,8 @@ function Move-Auto() { } if ( Test-Path -Path "${target}" ) { - Write-Host "${target} alreay exist." - Write-Host "Now Backup.." + Write-Host "${target} already exists." + Write-Host "Now making a backup.." Move-Auto "${target}" "${target}.bak" Write-Host "" } diff --git a/install.sh b/install.sh index d68d01d..6513de3 100755 --- a/install.sh +++ b/install.sh @@ -123,8 +123,8 @@ autocp() { fi if [ -e "${target}" ]; then - echo "${target} alreay exist." - echo "Now Backup.." + echo "${target} already exists." + echo "Now making a backup.." autocp "${target}" "${target}.bak" rm -rf "${target}" echo "" @@ -143,8 +143,8 @@ automv() { fi if [ -e "${target}" ]; then - echo "${target} alreay exist." - echo "Now Backup.." + echo "${target} already exists." + echo "Now making a backup.." automv "${target}" "${target}.bak" echo "" fi diff --git a/user.js b/user.js index 0a7c5cb..5f139fa 100644 --- a/user.js +++ b/user.js @@ -5,6 +5,9 @@ user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Proton Enabled #127 user_pref("browser.proton.enabled", true); +// Proton Tooltip +user_pref("browser.proton.places-tooltip.enabled", true); + // Fill SVG Color user_pref("svg.context-properties.content.enabled", true); diff --git a/userChrome.css b/userChrome.css index f97ca1d..123eef1 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,3 +1,6 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + @media (-moz-proton) { /** Default Thme - Contrast *************************************************/ /*= Lightmode - Color darker ===============================================*/ @@ -26,7 +29,7 @@ /*= Identity Poup Icon Crop ================================================*/ .identity-popup-security-connection.identity-button { - padding-block: 1px; + padding-block: 1px !important; } /*= Zoom in button's plus icon horizontal rate =============================*/ @@ -70,7 +73,8 @@ --tabs-border-color: rgba(0, 0, 0, 0.3); } - /** Windows 7, 8 - Compatibility ********************************************/ + /** OS - Compatibility ******************************************************/ + /*= Windows 7, 8 - Tab Bar Background ***************************************/ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Header Color */ :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme { @@ -89,6 +93,33 @@ } } + /*= Windows 7, 8 - Menu Active Color =======================================*/ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + menupopup > menu, + menupopup > menuitem { + border: 1px solid transparent; + } + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: color-mix(in srgb, -moz-menuhover 5%, transparent); + border-color: color-mix(in srgb, -moz-menuhover 60%, transparent); + } + menu[_moz-menuactive="true"][disabled="disabled"], + menuitem[_moz-menuactive="true"][disabled="true"] { + background-color: transparent; + border-color: transparent; + } + } + + /*= Linux- Global Menubar Active Color =====================================*/ + @media (-moz-gtk-csd-available) { + #main-menubar > menu[open="true"], + #main-menubar > menu[_moz-menuactive="true"] { + color: inherit !important; /* Original: -moz-menubarhovertext */ + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ + } + } + /** System Default Theme ****************************************************/ /*= Common - URL Bar focus color ===========================================*/ @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { @@ -534,15 +565,16 @@ } /* File moved or missing */ - #downloadsListBox .download-state:not([exists]) .downloadTarget { + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); } - #downloadsListBox .download-state:not([exists]) .downloadTypeIcon { + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { filter: grayscale(100%) !important; } /*= Cursor Types ===========================================================*/ + #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, @@ -557,6 +589,7 @@ #BMB_bookmarksShowAll, #import-button, menuitem.openintabs-menuitem, + #downloadsListBox .downloadButton, #downloadsListBox .download-state[exists], #downloadsListBox .download-state[exists] .downloadDetails, #downloadsHistory { @@ -669,6 +702,18 @@ } /*= Tab Bar - Reduce Height, Show more contents ============================*/ + /* for Extra Drag Space */ + :root { + --space-above-tabbar: 0px; /* If you want drag space, set to 8px */ + } + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar)); + } + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; + } + /* Toolbar Height */ #TabsToolbar { --tab-min-height: 33px !important; @@ -719,16 +764,10 @@ } /* Pinned Tab - Titlechanged Indicator position fix */ - :root:not([uidensity="touch"]) - .tabbrowser-tab:is([image], [pinned]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root:not([uidensity="touch"]) - .tabbrowser-tab - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; + background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important; } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned]) @@ -738,27 +777,39 @@ /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important; } + :root[uidensity="touch"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; + } /*= URL Bar - Reduce Padding ===============================================*/ :root:not([uidensity="touch"]) #urlbar-container, - #search-container { - padding-block: 2px; /* Original: 4px */ - margin-inline: 5px; /* Original: 5px */ + :root:not([uidensity="touch"]) #search-container { + padding-block: 3px !important; /* Original: 4px */ + margin-inline: 5px !important; /* Original: 5px */ + } + :root:not([uidensity="compact"]) #urlbar-container, + :root:not([uidensity="compact"]) #search-container { + padding-block: 2px !important; } /* spread menu */ :root:not([uidensity]) .urlbarView-row { - padding-block: 1px; /* Original: 2px */ + padding-block: 1px !important; /* Original: 2px */ } :root[uidensity="compact"] .urlbarView-row { - padding-block: 0px; + padding-block: 0px !important; } :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { - padding-block: 8px; /* Original: 10px */ + padding-block: 8px !important; /* Original: 10px */ } :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px; + padding-block: 2px !important; } /*= BookMark Bar - Reduce Height ===========================================*/ @@ -854,25 +905,39 @@ /*= Bookmark Menu - Reduce Padding =========================================*/ :root { - --bookmark-menu-padding: 0.2em; - --bookmark-seperator-margin: 1px 0.5em; + --bookmark-menu-padding: 3px; } :root[uidensity="compact"] { - --bookmark-menu-padding: 1px; - --bookmark-seperator-margin: 0px 0.5em; + --bookmark-menu-padding: 1.5px; } - :root:not([uidensity="touch"]) menupopup > menuitem.bookmark-item, - :root:not([uidensity="touch"]) menupopup > menuitem.openintabs-menuitem { + :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, + :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, + :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, + :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { padding-block: var(--bookmark-menu-padding) !important; } - :root:not([uidensity="touch"]) menupopup > .bookmarks-actions-menuseparator { - margin: var(--bookmark-seperator-margin) !important; - } /*= Global Menu - Set Padding ==============================================*/ + /* Prevent layout shifts */ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + #toolbar-menubar { + display: flex !important; + flex-direction: row; + justify-content: space-between; + } + #toolbar-menubar > spacer { + order: 1000; /* as Original's -moz-box-ordinal-group: 1000 */ + flex: 1; /* Fill row */ + } + #toolbar-menubar > .titlebar-buttonbox-container { + order: 1000; /* as Original's -moz-box-ordinal-group: 1000 */ + } + } + /* Vertical Align - Center & Height: 100% */ - #menubar-items { + #menubar-items, + #main-menubar { display: flex !important; } @@ -1165,8 +1230,19 @@ display: -moz-inline-box !important; } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected], :hover) .tab-close-button { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; + opacity: 0; + + /* Animation - Fade out */ + transition: opacity 0.1s var(--animation-easing-function) !important; + } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + + /* Animation - Fade in */ + transition: opacity 0.25s var(--animation-easing-function) !important; } /* Closed Button's icon thicker */ @@ -1225,6 +1301,9 @@ border-radius: 10px !important; width: 17px !important; height: 17px !important; + + /* Animation */ + transition: 0.1s var(--animation-easing-function); } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ @@ -1243,19 +1322,10 @@ top: 0 !important; inset-inline-end: 0 !important; margin-inline-end: 5.5px !important; - padding: 2px 0 !important; + padding: 0 !important; } - .tabbrowser-tab:not([image]) - .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { - box-sizing: content-box; - padding: 3px 0; - - border-radius: 0 !important; - } - .tabbrowser-tab:not([image]) - .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover { - padding: 0; - border-radius: 10px !important; + .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ } /* Busy - Show */ @@ -1296,12 +1366,19 @@ } /** PictureInPicture Tab - Show PIP Icon ************************************/ - .tab-icon-sound[pictureinpicture]:not([pinned]) { + #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) + .tab-content::after { + content: ""; + } + .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after { /* Shape */ display: -moz-inline-box !important; width: 14px; height: 14px; - -moz-box-ordinal-group: 2 !important; + background-size: 14px; + -moz-box-ordinal-group: 1 !important; /* Color */ fill: currentColor; @@ -1309,24 +1386,27 @@ -moz-context-properties: fill; /* Icon */ - list-style-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } - .tab-icon-sound[pictureinpicture]:not([pinned])[selected] { + .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { opacity: 0.95; } /* Close Button's position */ .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { - margin-left: 7px !important; -moz-box-ordinal-group: 2 !important; } - .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button { - margin-left: 0px !important; + #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { + margin-left: 7px !important; + } + #tabbrowser-tabs:not([closebuttons="activetab"]) + .tabbrowser-tab[pictureinpicture]:not([pinned]):hover + .tab-close-button { + margin-left: 2px !important; } /** Container Tab - Color line at icon's bottom *****************************/ - .tabbrowser-tab:not([pinned]) .tab-content::before, - .tabbrowser-tab[pinned][busy] .tab-content::before { + .tab-content:not([titlechanged])::before { /* Box Model */ content: ""; display: block; @@ -1337,33 +1417,23 @@ width: 25%; /* Animate */ - transition: 0.2s !important; - transform: translateY(10px) !important; + transition: 0.15s var(--animation-easing-function) !important; + transform: translate(9px, 12px) !important; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: 75%; + width: calc(100% - 30px); + } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-icon-image, - .tab-sharing-icon-overlay { - box-sizing: content-box; - padding: 3px 0; - - border-bottom: 2px solid var(--identity-icon-color); - } - - /* Pinned Tab - Busy */ - .tabbrowser-tab[pinned][busy] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before { width: 16px; + transform: translateY(12px) !important; } /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image, - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image { - border-bottom: 2px solid transparent !important; - } - .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ @@ -1830,44 +1900,54 @@ list-style-image: url("chrome://browser/skin/customize.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(1) { - /* Web Developer Tools */ + /* Web Developer Tools */ + #appmenu-developer-tools-view .subviewbutton:nth-child(1), + #PanelUI-developer-tools-view .subviewbutton:nth-child(1) { list-style-image: url("chrome://browser/skin/developer.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(2) { - /* Task Manager */ + /* Task Manager */ + #appmenu-developer-tools-view .subviewbutton:nth-child(2), + #PanelUI-developer-tools-view .subviewbutton:nth-child(2) { list-style-image: url("./icons/performance.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(3) { - /* Remote Debugging - Edge bug.svg */ + /* Remote Debugging - Edge bug.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-child(3), + #PanelUI-developer-tools-view .subviewbutton:nth-child(3) { list-style-image: url("./icons/bug.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(4) { - /* Browser Toolbox - Edge webdeveloper.svg */ + /* Browser Toolbox - Edge webdeveloper.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-child(4), + #PanelUI-developer-tools-view .subviewbutton:nth-child(4) { list-style-image: url("./icons/webdeveloper.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(5) { - /* Browser Content Toolbaox - */ + /* Browser Content Toolbaox - */ + #appmenu-developer-tools-view .subviewbutton:nth-child(5), + #PanelUI-developer-tools-view .subviewbutton:nth-child(5) { list-style-image: url("./icons/command-frames.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) { - /* Browser Console */ + /* Browser Console */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(5), + #PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) { list-style-image: url("chrome://devtools/skin/images/command-console.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) { - /* Responsive Design Mode */ + /* Responsive Design Mode */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(4), + #PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) { list-style-image: url("./icons/command-responsivemode.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) { - /* Eyedropper */ + /* Eyedropper */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(3), + #PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) { list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) { - /* Page Source - Edge file-search.svg */ + /* Page Source - Edge file-search.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(2), + #PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) { list-style-image: url("./icons/search-file.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) { - /* Extensions for Devel */ + /* Extensions for Devel */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(1), + #PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) { list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg"); } #appmenu-developer-tools-view .subviewbutton:last-child { @@ -1951,6 +2031,15 @@ --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #BMB_bookmarksShowAllTop { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important; + } + #BMB_bookmarksShowAllTop > .menu-conic-left { + display: -moz-box !important; + } + } + /*= identity-popup =========================================================*/ #identity-popup-clear-sitedata-button, #identity-popup-more-info { @@ -2057,7 +2146,7 @@ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { :root { - --context-menu-background-padding-default: 3px; + --context-menu-background-padding-default: 2px; } :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup @@ -2077,6 +2166,7 @@ @media (-moz-os-version: windows-win10) { :root { --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; /* 16px + 8px */ --menu-background-padding-default: calc( var(--context-menu-background-padding) + var(--context-menu-text-padding) ); @@ -2096,17 +2186,16 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } - menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menu:not(.menu-iconic) { - margin-inline: var(--arrowpanel-menuicon-padding) !important; - padding-inline-start: calc( - var(--menu-background-padding-default) - var(--arrowpanel-menuicon-padding) - ) !important; - background-position: left calc(var(--arrowpanel-menuitem-padding) + 1px) center !important; + } + + /* Padding - Linux */ + @media (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; } } - /* Padding Mac */ + /* Padding - Mac */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root { --context-menu-background-padding-default: 10px; @@ -2137,6 +2226,102 @@ } } + /*= Bookmark Menu - Layout =================================================*/ + /* #goPoup, #bookmarksMenuPopup: looks like global menu + * #BMB_bookmarksPopup: looks like arrow panel + */ + + /* Empty Menu */ + menupopup menupopup[emptyplacesresult] .menu-text, + #PersonalToolbar menupopup[emptyplacesresult] .menu-text { + margin-inline-start: 0 !important; + } + + /* Bookmark Popup - As Arrow Panel */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --context-menu-background-padding: var(--arrowpanel-menuitem-padding); + } + + /* Windows 7, 8 */ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Global Menu */ + menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: 0 !important; + } + + /* Bookmark Popup - None icon menu */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --arrowpanel-menuicon-padding: 9px; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc( + var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px + ) !important; + } + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; + } + } + + /* Windows */ + @media (-moz-os-version: windows-win10) { + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + } + + /* Linux */ + @media (-moz-gtk-csd-available) { + /* Global Menu */ + menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Bookmark Popup - Iconic menu */ + #BMB_bookmarksPopup .menu-iconic-text, + #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text { + padding-inline-start: 1px !important; + } + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + /* Bookmark Popup - As Arrow Panel */ + #PersonalToolbar menupopup menuitem, + #PersonalToolbar menupopup menu { + padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important; + } + + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; + } + } + /** Context Menu - Icons ****************************************************/ /*= tabContextMenu =========================================================*/ #context_openANewTab { @@ -2512,7 +2697,7 @@ --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); } #context-inspect { - --menuitem-image: url("chrome://devtools/skin/images/command-pick.sv"g); + --menuitem-image: url("chrome://devtools/skin/images/command-pick.svg"); } #context-media-eme-learnmore { @@ -2526,6 +2711,8 @@ #context-forward { --menuitem-image: url("chrome://browser/skin/forward.svg"); } + #context_reloadTab, + #context_reloadSelectedTabs, #context-reload { --menuitem-image: url("chrome://browser/skin/reload.svg"); } diff --git a/userContent.css b/userContent.css index d94cd2b..c3bfa2b 100644 --- a/userContent.css +++ b/userContent.css @@ -354,6 +354,7 @@ /* Basic */ .Page-content, .SecondaryHero, + body, main[aria-label="Content"] { color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; @@ -483,6 +484,7 @@ .AddonsCard-list, .Card-footer, .StaticAddonCard, + .blogpost-nav, .blogpost-nav * { background: var(--in-content-table-background) !important; } @@ -828,8 +830,7 @@ url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), - regexp("^[file:///].*[^(html|svg|pdf|json)]$") - { + regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") { /* Base */ html, body { @@ -1058,10 +1059,10 @@ /*= Directory View =========================================================*/ @-moz-document url-prefix("about:sync-log"), - regexp("^[file:///].*[^(html|svg|pdf|json)]$") - { + regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") { body { background-color: var(--in-content-box-background) !important; + margin: 4em auto !important; /* Override to default */ } thead a { color: var(--in-content-page-color) !important;