add separator between urlbar box and url label #33

This commit is contained in:
bmFtZQ 2022-06-11 18:46:08 +08:00
parent b8c6e344e8
commit d9fa3f5c96
3 changed files with 67 additions and 3 deletions

View file

@ -24,7 +24,7 @@
--urlbar-icon-fill-opacity: 1 !important;
--urlbar-popup-url-color: #0072C9 !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
--urlbar-box-bgcolor: #f7f7f7 !important;
--urlbar-box-bgcolor: var(--toolbar-field-background-color) !important;
--autocomplete-popup-background: #fff !important;
--autocomplete-popup-color: #fff !important;
--autocomplete-popup-highlight-background: #f2f2f2 !important;
@ -91,7 +91,7 @@
--urlbar-icon-fill-opacity: 1 !important;
--urlbar-popup-url-color: #75B6E8 !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
--urlbar-box-bgcolor: #3B3B3B !important;
--urlbar-box-bgcolor: var(--toolbar-field-background-color) !important;
--autocomplete-popup-background: #4A4A4A !important;
--autocomplete-popup-color: #fff !important;
--autocomplete-popup-highlight-background: #383838 !important;

View file

@ -99,6 +99,7 @@ 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 {
@ -446,7 +447,8 @@ and 11 so applied to both) */
}
.popup-notification-icon[popupid="persistent-storage"],
.persistent-storage-icon {
.persistent-storage-icon,
.indexedDB-icon {
list-style-image: url("persistent-storage.svg") !important;
}

View file

@ -165,3 +165,65 @@
margin-block: 0 !important;
margin-inline: 0 !important;
}
/* make urlbar icons opaque in default theme */
@media not (prefers-contrast) {
:is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) :is(
#urlbar-input::placeholder,
.searchbar-textbox::placeholder,
.urlbar-icon,
.sharing-icon,
#identity-icon,
#identity-icon-label,
#permissions-granted-icon,
#tracking-protection-icon,
.notification-anchor-icon,
#blocked-permissions-container > .blocked-permission-icon
) {
opacity: 0.6 !important;
}
}
/* remove background from urlbar box */
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]),
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]),
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]) {
background-color: transparent !important;
}
/* increase space between icon and text */
#identity-icon-label {
padding-inline-start: 8px !important;
}
/* separator for urlbar box */
#identity-box {
position: relative;
}
:is(#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button)::after {
content: "";
position: absolute;
display: block;
height: 16px;
border-right: 1px solid currentColor;
right: 0;
top: calc((var(--urlbar-height) / 2 - 1px - var(--urlbar-container-padding)) - 8px);
opacity: 0;
}
@media not (prefers-reduced-motion) {
:is(#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button)::after {
transition: opacity 0.2s ease;
}
}
:is(#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]),
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]),
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]))::after {
opacity: 0.375;
}