Add: URL Bar - Iconbox as separator

This commit is contained in:
alstjr7375 2022-11-21 04:04:52 +09:00
parent 822e48fcf7
commit 5b1b94d76f
6 changed files with 121 additions and 5 deletions

View file

@ -143,6 +143,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
L: MIT
N: edge-frfox
W: https://github.com/bmFtZQ/edge-frfox
C: Copyright (c) 2021 bmFtZQ
L: MIT
N: Feather
W: https://github.com/feathericons/feather
C: Copyright (c) 2013-2017 Cole Bemis

View file

@ -8329,6 +8329,53 @@
}
}
/** Url View UI ***************************************************************/
/*= Url Bar - Icon box as Separator ==========================================*/
@supports -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") {
#identity-box {
/* separator */
position: relative;
}
#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]) {
/* remove background from urlbar box */
background-color: transparent !important;
}
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open])::after,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open])::after,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open])::after {
opacity: 0.375;
}
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button::after,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button::after,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button::after {
/* Box Model */
content: "";
position: absolute;
display: block;
/* Position */
right: 0;
top: 50%;
transform: translateY(-50%);
/* Bar shape */
width: 1px;
height: 1em;
/* Bar Color */
opacity: 0;
background-color: currentColor;
}
#identity-box[pageproxystate="valid"] #identity-icon-label {
/* increase space between icon and text - as identity box padding */
padding-inline-start: 8px !important;
}
@media (prefers-reduced-motion: no-preference) {
.identity-box-button::after {
transition: opacity 0.2s var(--animation-easing-function);
}
}
}
/*= Url View - Share Layout ==================================================*/
@supports -moz-bool-pref("userChrome.urlView.as_launcher") or -moz-bool-pref("userChrome.urlView.full_width_padding") {
.urlbarView {
@ -10055,14 +10102,16 @@
}
}
@supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") {
#identity-box[pageproxystate="valid"].chromeUI #identity-icon-box,
#identity-box[pageproxystate="valid"].extensionPage #identity-icon-box {
padding-inline: var(--urlbar-icon-padding) !important;
}
#identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover),
#identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) {
background-color: transparent !important;
}
@supports not -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") {
#identity-box[pageproxystate="valid"].chromeUI #identity-icon-box,
#identity-box[pageproxystate="valid"].extensionPage #identity-icon-box {
padding-inline: var(--urlbar-icon-padding) !important;
}
}
#identity-box[pageproxystate="valid"] #identity-icon-label {
display: none !important;
}

View file

@ -61,10 +61,13 @@
@include Option("userChrome.hidden.urlbar_iconbox.label_only") {
&.chromeUI #identity-icon-box,
&.extensionPage #identity-icon-box {
padding-inline: var(--urlbar-icon-padding) !important;
&:not(:hover) {
background-color: transparent !important;
}
@include NotOption("userChrome.urlbar.iconbox_as_separator") {
padding-inline: var(--urlbar-icon-padding) !important;
}
}
#identity-icon-label {

View file

@ -0,0 +1,52 @@
#identity-box {
/* separator */
position: relative;
}
#identity-box[pageproxystate="valid"] {
&.notSecureText,
&.chromeUI,
&.extensionPage {
> .identity-box-button {
&:not(:hover, [open]) {
/* remove background from urlbar box */
background-color: transparent !important;
&::after {
opacity: 0.375;
}
}
&::after {
/* Box Model */
content: "";
position: absolute;
display: block;
/* Position */
right: 0;
top: 50%;
transform: translateY(-50%);
/* Bar shape */
width: 1px;
height: 1em;
/* Bar Color */
opacity: 0;
background-color: currentColor;
}
}
}
#identity-icon-label {
/* increase space between icon and text - as identity box padding */
padding-inline-start: 8px !important;
}
}
@include Animate {
.identity-box-button::after {
transition: opacity 0.2s var(--animation-easing-function);
}
}

View file

@ -1,3 +1,8 @@
/*= Url Bar - Icon box as Separator ==========================================*/
@include Option("userChrome.urlbar.iconbox_as_separator") {
@import "iconbox_as_separator";
}
/*= Url View - Share Layout ==================================================*/
@include Option("userChrome.urlView.as_launcher", "userChrome.urlView.full_width_padding") {
.urlbarView {

View file

@ -138,6 +138,8 @@ user_pref("userChrome.rounding.square_tab", false);
// user_pref("userChrome.padding.urlView_result", true);
// user_pref("userChrome.padding.panel_header", true);
// user_pref("userChrome.urlbar.iconbox_as_separator", true);
// user_pref("userChrome.urlView.as_launcher", true);
// user_pref("userChrome.urlView.full_width_padding", true);
// user_pref("userChrome.urlView.always_show_page_actions", true);