add accesibility theme
* high contrast (on OS preference) * reduce motion (on OS preference)
This commit is contained in:
bmFtZQ
GitHub
parent
da8ad23244
commit
f758612f58
1 changed files with 171 additions and 0 deletions
171
chrome/extras/accessibility.css
Normal file
171
chrome/extras/accessibility.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue