popup/menu styling #22 #28 #35

This commit is contained in:
bmFtZQ 2022-06-19 23:05:53 +08:00
parent 7184e2c721
commit 9653c08d39
9 changed files with 377 additions and 64 deletions

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="scale(-1 1) translate(-16 0)" d="M5.5 2a.5.5 0 0 0-.354.853L10.313 8l-5.167 5.146a.5.5 0 0 0 .707.71l5.484-5.468a.548.548 0 0 0 0-.777L5.853 2.143A.496.496 0 0 0 5.5 2z"/>
</svg>

After

Width:  |  Height:  |  Size: 318 B

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.5 2a.5.5 0 0 0-.379.174l-9.129 10.57-4.12-4.578a.5.5 0 0 0-.706-.037.5.5 0 0 0-.037.705l4.5 5a.5.5 0 0 0 .75-.008l9.5-11a.5.5 0 0 0-.053-.705A.5.5 0 0 0 14.5 2z"/>
</svg>

After

Width:  |  Height:  |  Size: 306 B

View file

@ -2,7 +2,8 @@
/* windows 11 style window controls (no known way to detect between windows 10
and 11 so applied to both) */
@media (-moz-windows-compositor), (-moz-gtk-csd-available) {
@media (-moz-windows-compositor),
(-moz-gtk-csd-available) {
.titlebar-min {
list-style-image: url("win11-minimize.svg") !important;
}
@ -36,7 +37,7 @@ and 11 so applied to both) */
}
/* disable context menu icons on macOS */
@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@media not (-moz-platform: macos) {
#context-back {
list-style-image: url("back.svg") !important;
}
@ -100,9 +101,9 @@ and 11 so applied to both) */
#appMenu-passwords-button,
#password-notification-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
#PopupAutoComplete>richlistbox>richlistitem[originaltype="generatedPassword"]>.two-line-wrapper>.ac-site-icon,
#PopupAutoComplete>richlistbox>richlistitem[originaltype="loginWithOrigin"]>.two-line-wrapper>.ac-site-icon,
#PopupAutoComplete>richlistbox>richlistitem[originaltype="login"]>.ac-site-icon {
list-style-image: url("passwords.svg") !important;
}
@ -345,6 +346,10 @@ and 11 so applied to both) */
list-style-image: url("arrow-right.svg") !important;
}
.panel-header>.subviewbutton-back {
list-style-image: url("arrow-left.svg") !important;
}
#overflowMenu-customize-button,
#appmenu-moreTools-button {
list-style-image: url("customize.svg") !important;
@ -383,7 +388,6 @@ and 11 so applied to both) */
background: url("settings.svg") !important;
}
.tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] {
background: url("extension.svg") !important;
}
@ -517,3 +521,45 @@ and 11 so applied to both) */
#stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
background-image: url("stop-to-reload.svg") !important;
}
/* Context Menu Icons */
menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
list-style-image: url("checkmark.svg") !important;
}
:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
background-image: var(--uc-menu-image) !important;
background-size: 16px !important;
background-position: var(--arrowpanel-menuitem-padding-inline) center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
}
@media (-moz-platform: macos) {
#context-back {
--uc-menu-image: url("back.svg");
}
#context-forward {
--uc-menu-image: url("forward.svg");
}
#context-reload {
--uc-menu-image: url("reload.svg");
}
#context-stop {
--uc-menu-image: url("close.svg");
}
#context-bookmarkpage {
--uc-menu-image: url("bookmark-hollow.svg");
}
#contentAreaContextMenu #context-bookmarkpage[starred] {
--uc-menu-image: url("bookmark.svg");
fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
}
}