mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Decoration - Panel Arrow at bottom

Browse source
This commit is contained in:
alstjr7375 2022-11-19 05:22:29 +09:00
parent 73e1733a23
commit 012d38552d
4 changed files with 35 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/leptonChrome.css
View file

@ -2972,16 +2972,26 @@
/*= Panel UI Arrow ===========================================================*/ /*= Panel UI Arrow ===========================================================*/
@supports -moz-bool-pref("userChrome.decoration.panel_arrow") { @supports -moz-bool-pref("userChrome.decoration.panel_arrow") {
#appMenu-popup { #appMenu-popup {
margin-top: -8px !important;
/* Original: -4px */
padding-top: 4px;
background-image: url("../icons/panelarrow-vertical.svg"); background-image: url("../icons/panelarrow-vertical.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right 10px; background-position-x: right 10px;
background-position-y: top;
-moz-context-properties: fill, stroke; -moz-context-properties: fill, stroke;
fill: var(--panel-background); fill: var(--panel-background);
stroke: var(--panel-border-color); stroke: var(--panel-border-color);
} }
#appMenu-popup[side="top"] {
margin-top: -8px !important;
/* Original: -4px */
padding-top: 4px;
}
#appMenu-popup[side="bottom"] {
background-image: url("../icons/panelarrow-vertical-reverse.svg");
background-position-y: bottom;
margin-bottom: -8px !important;
/* Original: -4px */
padding-bottom: 4px;
}
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
/*= Field Border ===========================================================*/ /*= Field Border ===========================================================*/

4
icons/panelarrow-vertical-reverse.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
<path fill="context-stroke" d="m0 0 10 10L20 0Z"/>
<path fill="context-fill" d="m1 0 9 9 9-9z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 172 B

6
icons/panelarrow-vertical.svg
View file

@ -2,6 +2,6 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this - License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
<path d="M 0,10 L 10,0 20,10 z" fill="context-stroke"/> <path fill="context-stroke" d="M 0,10 L 10,0 20,10 z"/>
<path d="M 1,10 L 10,1 19,10 z" fill="context-fill"/> <path fill="context-fill" d="M 1,10 L 10,1 19,10 z"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 397 B

Before After
Before After

18
src/decoration/_panel_arrow.scss
View file

@ -1,12 +1,22 @@
#appMenu-popup { #appMenu-popup {
margin-top: -8px !important; /* Original: -4px */
padding-top: 4px;
background-image: url("../icons/panelarrow-vertical.svg"); background-image: url("../icons/panelarrow-vertical.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right 10px; background-position-x: right 10px;
background-position-y: top;
-moz-context-properties: fill, stroke; -moz-context-properties: fill, stroke;
fill: var(--panel-background); fill: var(--panel-background);
stroke: var(--panel-border-color); stroke: var(--panel-border-color);
&[side="top"] {
margin-top: -8px !important; /* Original: -4px */
padding-top: 4px;
}
&[side="bottom"] {
background-image: url("../icons/panelarrow-vertical-reverse.svg");
background-position-y: bottom;
margin-bottom: -8px !important; /* Original: -4px */
padding-bottom: 4px;
}
} }