From f758612f5854633625eb2c4183e9eb6c08ed636c Mon Sep 17 00:00:00 2001 From: bmFtZQ <62812711+bmFtZQ@users.noreply.github.com> Date: Tue, 13 Apr 2021 02:48:47 +0800 Subject: [PATCH] add accesibility theme * high contrast (on OS preference) * reduce motion (on OS preference) --- chrome/extras/accessibility.css | 171 ++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 chrome/extras/accessibility.css diff --git a/chrome/extras/accessibility.css b/chrome/extras/accessibility.css new file mode 100644 index 0000000..7b9d77a --- /dev/null +++ b/chrome/extras/accessibility.css @@ -0,0 +1,171 @@ +/* High Contrast Theme */ +@media (prefers-contrast) { + :root, :root #navigator-toolbox { + --highContrastTheme-border-color: #777 !important; + --highContrastTheme-urlbar-border-color: #000a; + + --highContrastTheme-menuitem-selected-background: #444; + --highContrastTheme-menuitem-selected-background-active: #222; + --highContrastTheme-menuitem-selected-color: #fff; + --highContrastTheme-urlbar-URL-selected-color: #81c2ff; + + --panel-separator-color: rgba(0,0,0,0.8) !important; + --toolbarbutton-icon-fill-attention: #003aa5 !important; + + --chrome-content-separator-color: var(--highContrastTheme-border-color) !important; + --autocomplete-popup-highlight-background: var(--highContrastTheme-menuitem-selected-background) !important; + --autocomplete-popup-highlight-color: var(--highContrastTheme-menuitem-selected-color) !important; + --panelview-toolbarbutton-hover-bgcolor: var(--highContrastTheme-menuitem-selected-background) !important; + --panelview-toolbarbutton-hover-color: var(--highContrastTheme-menuitem-selected-color) !important; + --panelview-toolbarbutton-active-bgcolor: var(--highContrastTheme-menuitem-selected-background-active) !important; + --panelview-toolbarbutton-active-color: var(--highContrastTheme-menuitem-selected-color) !important; + } + + :root[lwthemetextcolor="bright"], :root[lwthemetextcolor="bright"] #navigator-toolbox { + --highContrastTheme-border-color: #999 !important; + --highContrastTheme-urlbar-border-color: #fffa; + + --highContrastTheme-menuitem-selected-background: #ccc; + --highContrastTheme-menuitem-selected-color: #000; + --highContrastTheme-urlbar-URL-selected-color: #004da5; + + --panel-separator-color: rgba(255,255,255,0.8) !important; + --lwt-toolbarbutton-icon-fill-attention: #55befc !important; + } + + menupopup, panel + { + --menu-border-radius: 2px; + --menu-border: 1px solid #fff; + --menu-shadow: 0 0 0 2px #000, 0 3px 10px 4px rgba(0,0,0,.3); + } + :root[lwthemetextcolor="bright"] :-moz-any(menupopup, panel) + { + --menu-border: 1px solid #fff; + --menu-shadow: 0 0 0 1px #000, 0 3px 10px 4px rgba(0,0,0,.3); + } + + menupopup menuseparator { + opacity: 1 !important; + color: var(--panel-separator-color) !important; + } + + menupopup menuitem:hover:not([disabled=true]), + menupopup menu:hover:not([disabled=true]), + .autocomplete-richlistitem:hover:not([disabled=true]):not([selected=true]), + #context-navigation .menuitem-iconic:hover:not([disabled]) + { + background-color: var(--highContrastTheme-menuitem-selected-background) !important; + color: var(--highContrastTheme-menuitem-selected-color) !important; + } + + menupopup menuitem:hover:active:not([disabled="true"]), + menupopup menu:hover:active:not([disabled="true"]), + .autocomplete-richlistitem:hover:active:not([disabled="true"]), + .autocomplete-richlistitem[selected="true"] { + background-color: var(--highContrastTheme-menuitem-selected-background-active) !important; + color: var(--highContrastTheme-menuitem-selected-color) !important; + } + + #urlbar, #searchbar { + box-shadow: 0 0 0 1px var(--highContrastTheme-urlbar-border-color) inset !important; + } + #urlbar:hover, #searchbar:hover { + box-shadow: 0 0 0 1px var(--highContrastTheme-urlbar-border-color) inset, 0 0 0 1px var(--highContrastTheme-urlbar-border-color) inset !important; + } + #urlbar[open], #searchbar[open] { + box-shadow: 0 0 0 1px #000, 0 3px 10px 4px rgba(0,0,0,.3), 0 0 0 1px #fff inset !important; + border-radius: 2px !important; + } + .urlbarView-row[selected] { + --urlbar-popup-url-color: var(--highContrastTheme-urlbar-URL-selected-color) !important; + } + + :is(:root, :root[lwthemetextcolor="bright"]) #nav-bar { + box-shadow: 0 -1px var(--highContrastTheme-border-color) !important; + } + :is(:root, :root[lwthemetextcolor="bright"]) .tabbrowser-tab[visuallyselected] .tab-background { + box-shadow: 0 0 0 1px var(--highContrastTheme-border-color) !important; + } + .tab-background::before + { + box-shadow: -1px -1px 0 var(--highContrastTheme-border-color) inset, 4px 4px 0 4px var(--tab-bgcolor) !important; + } + .tab-background::after + { + box-shadow: 1px -1px 0 var(--highContrastTheme-border-color) inset, -4px 4px 0 4px var(--tab-bgcolor) !important; + } + .tabbrowser-tab:not([selected=true]):hover, + .tabbrowser-tab[multiselected]:not([selected=true]) + { + --tab-opacity: .6; + } + #TabsToolbar[brighttext] .tabbrowser-tab:not([selected=true]):hover, + #TabsToolbar[brighttext] .tabbrowser-tab[multiselected]:not([selected=true]) + { + --tab-opacity: .2; + } +} + +/* Reduce Motion */ +@media (prefers-reduced-motion) { + .tabbrowser-tab + { + --tab-transition-duration: 0s !important; + } + + #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), + .tab-close-button, .tab-icon-overlay[activemedia-blocked], .tab-icon-sound, + .urlbar-icon, + #page-action-buttons > toolbarbutton, + .searchbar-search-button, + #tracking-protection-icon-box, + #identity-icon-box, + #identity-permission-box, + #tracking-protection-icon-box, #urlbar:hover #tracking-protection-icon-box, #tracking-protection-icon-container[open] #tracking-protection-icon-box, #tracking-protection-icon-box[active], + #urlbar:is(:hover, :not(:hover)) .urlbar-page-action:-moz-any( + #reader-mode-button, + #pageActionButton, + #pocket-button-box, + #pageAction-urlbar-screenshots_mozilla_org, + #pageAction-urlbar-sendToDevice, + #pageAction-urlbar-emailLink, + #pageAction-urlbar-copyURL, + #pageAction-urlbar-shareURL, + #pageAction-urlbar-addSearchEngine + ), + .urlbar-page-action:-moz-any( + #reader-mode-button, + #pageActionButton, + #pocket-button-box, + #pageAction-urlbar-screenshots_mozilla_org, + #pageAction-urlbar-sendToDevice, + #pageAction-urlbar-emailLink, + #pageAction-urlbar-copyURL, + #pageAction-urlbar-shareURL, + #pageAction-urlbar-addSearchEngine + ):-moz-any(:hover, [open], [readeractive]), + .urlbar-page-action:-moz-any(:hover, [open]) ~ .urlbar-page-action:-moz-any( + #reader-mode-button, + #pageActionButton, + #pocket-button-box, + #pageAction-urlbar-screenshots_mozilla_org, + #pageAction-urlbar-sendToDevice, + #pageAction-urlbar-emailLink, + #pageAction-urlbar-copyURL, + #pageAction-urlbar-shareURL, + #pageAction-urlbar-addSearchEngine), + #tracking-protection-icon-container[open] ~ #page-action-buttons .urlbar-page-action:-moz-any( + #reader-mode-button, + #pageActionButton, + #pocket-button-box, + #pageAction-urlbar-screenshots_mozilla_org, + #pageAction-urlbar-sendToDevice, + #pageAction-urlbar-emailLink, + #pageAction-urlbar-copyURL, + #pageAction-urlbar-shareURL, + #pageAction-urlbar-addSearchEngine) + { + transition-duration: 0s, 0s, 0s, 0s, 0s !important; + } +} \ No newline at end of file