-
-
Save blackrobot/19e3d4620fa67aea11f6aa8048f9d74e to your computer and use it in GitHub Desktop.
Refined find bar (https://www.reddit.com/r/FirefoxCSS/comments/7fxtdm/refined_find_bar_top_right_aligned_animated/)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
@keyframes scale-in { | |
0% { | |
transform: scaleY(0); | |
} | |
100% { | |
transform: scaleY(1); | |
} | |
} | |
@keyframes scale-out { | |
0% { | |
transform: scaleY(1); | |
} | |
100% { | |
transform: scaleY(0); | |
} | |
} | |
.browserContainer { | |
position: relative; | |
} | |
findbar { | |
animation: 0.2s scale-in; | |
transform-origin: top center; | |
background: var(--toolbar-bgcolor) !important; | |
padding: 4px 6px 6px 6px; | |
border: 1px solid var(--toolbox-border-bottom-color); | |
border-top-width: 0; | |
border-radius: 0 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius); | |
position: absolute; | |
top: -2px; | |
right: 38px; | |
} | |
findbar[hidden="true"] { | |
animation: 0.2s scale-out; | |
} | |
findbar .findbar-container { | |
padding: 0 !important; | |
padding-inline-start: 0 !important; | |
padding-inline-end: 0 !important; | |
} | |
findbar .findbar-container .findbar-textbox { | |
padding: 6px 8px !important; | |
background-color: var(--url-and-searchbar-background-color) !important; | |
border-color: var(--backbutton-border-color) !important; | |
} | |
findbar .findbar-container .findbar-textbox[status="notfound"] { | |
background-color: #E74C3C !important; | |
color: white !important; | |
} | |
findbar .findbar-container .findbar-find-previous, | |
findbar .findbar-container .findbar-find-next { | |
background: transparent !important; | |
border-color: var(--backbutton-border-color) !important; | |
} | |
findbar .findbar-container .findbar-find-previous:hover, findbar .findbar-container .findbar-find-previous:focus, | |
findbar .findbar-container .findbar-find-next:hover, | |
findbar .findbar-container .findbar-find-next:focus { | |
background-color: var(--toolbarbutton-hover-background) !important; | |
} | |
findbar .findbar-button { | |
border: 1px solid var(--backbutton-border-color); | |
border-radius: var(--toolbarbutton-border-radius) !important; | |
} | |
findbar .findbar-closebutton { | |
margin-right: 4px !important; | |
padding-inline-end: 0 !important; | |
position: relative; | |
top: 6px; | |
} | |
window[lwtheme="true"] findbar { | |
background: var(--lwt-header-image) !important; | |
background-attachment: fixed !important; | |
background-position: top right !important; | |
top: -1px; | |
} | |
window[lwtheme="true"] findbar:before { | |
display: block; | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 0; | |
width: 100%; | |
height: 100%; | |
background-color: var(--toolbar-bgcolor); | |
} | |
window[lwtheme="true"] findbar .findbar-container, | |
window[lwtheme="true"] findbar .findbar-closebutton { | |
position: relative; | |
z-index: 1; | |
} | |
window[lwtheme="true"] findbar .findbar-textbox { | |
color: var(--lwt-text-color) !important; | |
background-color: var(--toolbar-bgcolor) !important; | |
} | |
window[lwtheme="true"] findbar .findbar-textbox[status="notfound"] { | |
background-color: #E74C3C !important; | |
color: white !important; | |
} | |
window[lwtheme="true"] findbar .findbar-button[checked="true"] { | |
font-weight: bold; | |
background-color: var(--toolbar-bgcolor) !important; | |
} | |
window[lwtheme="true"] findbar .findbar-find-status, window[lwtheme="true"] findbar .found-matches { | |
color: var(--lwt-text-color) !important; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
@keyframes scale-in { | |
0% { transform: scaleY(0); } | |
100% { transform: scaleY(1); } | |
} | |
@keyframes scale-out { | |
0% { transform: scaleY(1); } | |
100% { transform: scaleY(0); } | |
} | |
.browserContainer { | |
position: relative; | |
} | |
$duration: 0.2s; | |
findbar { | |
animation: $duration scale-in; | |
transform-origin: top center; | |
background: var(--toolbar-bgcolor) !important; | |
padding: 4px 6px 6px 6px; | |
border: 1px solid var(--toolbox-border-bottom-color); | |
border-top-width: 0; | |
border-radius: 0 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius); | |
position: absolute; | |
top: -2px; | |
right: 38px; | |
&[hidden="true"] { | |
animation: $duration scale-out; | |
} | |
.findbar-container { | |
padding: 0 !important; | |
padding-inline-start: 0 !important; | |
padding-inline-end: 0 !important; | |
.findbar-textbox { | |
padding: 6px 8px !important; | |
background-color: var(--url-and-searchbar-background-color) !important; | |
border-color: var(--backbutton-border-color) !important; | |
&[status="notfound"] { | |
background-color: #E74C3C !important; | |
color: white !important; | |
} | |
} | |
.findbar-find-previous, | |
.findbar-find-next { | |
background: transparent !important; | |
border-color: var(--backbutton-border-color) !important; | |
&:hover, | |
&:focus { | |
background-color: var(--toolbarbutton-hover-background) !important; | |
} | |
} | |
} | |
.findbar-button { | |
border: 1px solid var(--backbutton-border-color); | |
border-radius: var(--toolbarbutton-border-radius) !important; | |
} | |
.findbar-closebutton { | |
margin-right: 4px !important; | |
padding-inline-end: 0 !important; | |
position: relative; | |
top: 6px; | |
} | |
} | |
window[lwtheme="true"] { | |
findbar { | |
background: var(--lwt-header-image) !important; | |
background-attachment: fixed !important; | |
background-position: top right !important; | |
top: -1px; | |
&:before { | |
display: block; | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 0; | |
width: 100%; | |
height: 100%; | |
background-color: var(--toolbar-bgcolor); | |
} | |
.findbar-container, | |
.findbar-closebutton { | |
position: relative; | |
z-index: 1; | |
} | |
.findbar-textbox { | |
color: var(--lwt-text-color) !important; | |
background-color: var(--toolbar-bgcolor) !important; | |
&[status="notfound"] { | |
background-color: #E74C3C !important; | |
color: white !important; | |
} | |
} | |
.findbar-button { | |
&[checked="true"] { | |
font-weight: bold; | |
background-color: var(--toolbar-bgcolor) !important; | |
} | |
} | |
.findbar-find-status, .found-matches { | |
color: var(--lwt-text-color) !important; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment