diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index b7cd3db..b7ad9b8 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -23,5 +23,6 @@ jobs: with: # This part is also where you can pass other options, for example: prettier_options: --write . + commit_message: "Clean: Prettified Code!" env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/user.js b/user.js index 5f139fa..09c18fe 100644 --- a/user.js +++ b/user.js @@ -36,7 +36,7 @@ user_pref("apz.force_disable_desktop_zooming_scrollbars", false); / user_pref("apz.paint_skipping.enabled", true); /// true user_pref("apz.windows.use_direct_manipulation", true); /// true user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true); /// false -user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); /// "0.25" <- 1. If scroll too fast, set to "0.12" +user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); /// "0.25" <- 1. If scroll too slow, set to "0.15" user_pref("general.smoothScroll.durationToIntervalRatio", 1000); /// 200 user_pref("general.smoothScroll.lines.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.lines.durationMinMS", 0); /// 150 diff --git a/userChrome.css b/userChrome.css index 041b7f1..f863e0c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,5 +1,5 @@ -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +@namespace html "http://www.w3.org/1999/xhtml"; @media (-moz-proton) { /** Default Thme - Contrast *************************************************/ @@ -96,18 +96,69 @@ /*= 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; + menupopup > menuitem, + #context-navigation > menuitem { + border: 1px solid transparent; /* Need reduce 2px at menu */ } + + #main-menubar > menu[open="true"], + #main-menubar > menu[_moz-menuactive="true"] { + background-color: -moz-menuhover !important; /* Make to original */ + } + :root:-moz-lwtheme #main-menubar > menu[open="true"], + :root:-moz-lwtheme #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 */ + } + + #PlacesToolbar menu, + #PlacesToolbar menuitem, + #BMB_bookmarksPopup menu, + #BMB_bookmarksPopup menuitem { + border: none !important; /* Remove border */ + } + #PlacesToolbar menu:not([disabed], :active)[_moz-menuactive="true"], + #PlacesToolbar menuitem:not([disabed], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menu:not([disabed], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menuitem:not([disabed], :active)[_moz-menuactive="true"] { + background-color: var(--button-hover-bgcolor) !important; + } + } + + @media (-moz-os-version: windows-win7) { 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); + background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; + border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; } menu[_moz-menuactive="true"][disabled="disabled"], menuitem[_moz-menuactive="true"][disabled="true"] { - background-color: transparent; - border-color: transparent; + background-color: color-mix(in srgb, currentColor 5%, transparent) !important; + border-color: color-mix(in srgb, currentColor 60%, transparent) !important; + } + + /* Remove text shadow */ + :root:-moz-lwtheme #toolbar-menubar { + text-shadow: unset !important; + /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */ + } + + /* Remove Color */ + :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) { + background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */ + color: unset !important; /* Original: black */ + } + } + @media (-moz-os-version: windows-win8) { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; + border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; + } + menu[_moz-menuactive="true"][disabled="disabled"], + menuitem[_moz-menuactive="true"][disabled="true"] { + background-color: color-mix(in srgb, currentColor 17%, transparent) !important; + border-color: color-mix(in srgb, currentColor 80%, transparent) !important; } } @@ -797,6 +848,7 @@ background-color: var(--in-content-page-background) !important; } + /*- Button ---------------------------------------------------------------*/ button { -moz-appearance: none !important; color: var(--in-content-button-text-color) !important; @@ -814,7 +866,29 @@ margin-inline: 4px !important; min-width: 6.3em !important; } - button:-moz-focusring { + + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + button.medium { + padding: 6px 13px !important; + min-height: 28px !important; + font-size: 0.95em !important; + } + button.small { + padding: 5px 11px !important; + min-height: 24px !important; + font-size: 0.9em !important; + } + + /* Remove margin added by button.css */ + xul|button > .button-box > .button-text { + margin: 0 !important; + } + + button:-moz-focusring, + xul|menulist:-moz-focusring, + xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */ + xul|radio[focused="true"] { box-shadow: none !important; outline: 2px solid var(--in-content-focus-outline-color) !important; outline-offset: 2px !important; @@ -824,13 +898,290 @@ color: var(--in-content-button-text-color-hover) !important; border-color: transparent !important; } - button[open], - button[open]:hover { - background-color: var(--in-content-button-background-active); + + xul|button:not([disabled="true"]):hover:active, + xul|button[open], + xul|button[open]:hover, + xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-button-background-active) !important; } - button[disabled="true"], - menulist[disabled="true"] { - opacity: 0.4; + + xul|button[default] { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + xul|button[default]:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color) !important; + } + xul|button[default]:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + xul|button[disabled="true"], + xul|menulist[disabled="true"] { + opacity: 0.4 !important; + } + xul|button:not([disabled="true"]):hover, + xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + + @media (prefers-contrast) { + xul|button[default]:not([disabled="true"]):hover { + border-color: currentColor !important; + } + + button:focus { + color: var(--in-content-button-text-color) !important; + } + + xul|button[default]:focus, + button.primary:focus { + color: var(--in-content-primary-button-text-color) !important; + } + } + + /*- Radio Button ---------------------------------------------------------*/ + xul|radio { + margin-inline-start: 0 !important; + appearance: none !important; + } + + xul|*.radio-check { + appearance: none !important; + width: 16px !important; + height: 16px !important; + padding: 0 !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 100% !important; + margin-block: 2px !important; /* extend the vertical clicktarget */ + margin-inline: 0 6px !important; + background-color: var(--in-content-button-background) !important; + background-position: center !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + + xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + + xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { + background-color: var(--in-content-button-background-active) !important; + } + + xul|*.radio-check[selected] { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--in-content-primary-button-text-color) !important; + background-color: var(--in-content-primary-button-background) !important; + background-image: url("chrome://global/skin/icons/radio.svg") !important; + border-color: transparent !important; + + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + + xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-active) !important; + } + + xul|*.radio-label-box { + margin-inline: 0 8px !important; + padding-inline-start: 0 !important; + } + + /* Disabled checkboxes, radios and labels */ + xul|checkbox[disabled="true"], + xul|radio[disabled="true"], + xul|label[disabled="true"] { + color: inherit !important; + } + + xul|checkbox[disabled="true"], + xul|radio[disabled="true"], + xul|label[disabled="true"] { + opacity: 0.5 !important; + } + + /*- Check Box ------------------------------------------------------------*/ + /* From checkbox.css */ + checkbox { + appearance: none !important; + -moz-box-align: center !important; + margin: 4px 2px !important; + } + + .checkbox-icon[src] { + margin-inline-end: 2px !important; + } + .checkbox-label { + margin: 1px 0 !important; + } + + checkbox[disabled="true"] { + opacity: 0.4 !important; + } + + .checkbox-check { + appearance: none !important; + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; + border: 1px solid currentColor !important; + border-radius: 2px !important; + margin-inline-end: 6px !important; + } + + .checkbox-check { + height: 16px !important; + width: 16px !important; + } + + checkbox:not([disabled="true"]):hover > .checkbox-check { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + + .checkbox-check[checked] { + border-color: var(--checkbox-checked-border-color, transparent) !important; + background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + + checkbox:-moz-focusring > .checkbox-check { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } + + @media (prefers-contrast) { + checkbox:not([disabled="true"]):hover > .checkbox-check { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + } + + .checkbox-check[checked] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } + } + + /* From common.css */ + xul|*.checkbox-check { + margin-block: 2px !important; + } + xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px !important; + } + + /* Each OS */ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + xul|checkbox, + xul|radio { + padding-inline-start: 0 !important; + } + + /* Override menulist.css */ + xul|menulist[disabled="true"] { + background-color: var(--in-content-button-background) !important; + } + + xul|menulist:-moz-focusring > xul|*.menulist-label-box { + outline: none !important; + } + } + + @media (-moz-gtk-csd-available) { + /* Overriding appearance also avoids incorrect selection background color with light text. */ + xul|button > xul|*.button-box, + xul|menulist::part(label-box), + xul|*.radio-label-box, + xul|*.checkbox-label-box { + appearance: none !important; + } + + xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + appearance: none !important; + } + xul|menulist { + font-size: inherit !important; + } + xul|menulist::part(dropmarker) { + display: -moz-box; + margin-block: 6px !important; + } + xul|menulist:-moz-focusring::part(label-box) { + outline: none !important; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before, + xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before { + display: none !important; + } + + xul|menulist::part(dropmarker) { + display: -moz-box !important; + margin-block: 1px !important; + } + + xul|menulist > xul|menupopup xul|menu, + xul|menulist > xul|menupopup xul|menuitem { + padding-inline-end: 34px !important; + } + + xul|*.checkbox-icon, + xul|*.radio-icon { + margin-inline-end: 0 !important; + } + + xul|*.text-link:-moz-focusring { + box-shadow: none !important; + } } } @@ -1169,6 +1520,19 @@ } } + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Remove border */ + menupopup > menuitem, + menupopup > menu { + padding-block: calc(var(--menu-padding) - 2px) !important; + } + + /* Make to original */ + :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { + padding: 0 0 4px !important; + } + } + /* Arrow Icon Align to Right */ .bookmark-item.subviewbutton > .menu-right { margin-inline-end: 0 !important; @@ -1190,26 +1554,9 @@ } /*= 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, #main-menubar { - display: flex !important; + -moz-box-flex: 1 !important; } /* Rounding */ @@ -2463,10 +2810,17 @@ } } - @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + @media (-moz-os-version: windows-win7) { :root { --context-menu-background-padding-default: 2px; } + } + @media (-moz-os-version: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), diff --git a/userContent.css b/userContent.css index abb8869..7fb0fcc 100644 --- a/userContent.css +++ b/userContent.css @@ -19,6 +19,10 @@ } /** Activity Stream - Web Site Icon: full size ****************************/ + .top-site-outer .tile { + overflow: hidden; + } + .top-site-outer .tile .icon-wrapper { width: 100% !important; /* Original: 48px */ height: 100% !important; /* Original: 48px */ @@ -434,6 +438,8 @@ .Paginate-page-number, .AddonSummaryCard-addonAverage, .AddonReviewCard-authorByLine, + .UserReview-byLine, + .UserReview-reply-header, .Home-heroHeader-subtitle, .blog-entry-date, .blogpost-breadcrumb *,