Caspid wrote:This topic seems educational. ...
Agreed, Caspid.
Thanks, Frank! Looking forward to more.
Caspid wrote:This topic seems educational. ...
Code: Select all
/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/*Just these next two lines are the key to this improvement*/
#downloads-indicator-progress {
-moz-box-orient:vertical !important;
height: 17px !important;
}
/*Pretty up the active and paused download states, allowing for light and dark themes*/
#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
background: #297DA2 !important;
border: #AAAAAA 1px solid !important;
}
#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
background: #B9C9CB!important;
border-left: #AAAAAA 1px solid !important;
}
#downloads-indicator-progress > .progress-bar {
-moz-appearance: none;
background-color: #FF0000 !important;
/* border-left: #AAAAAA 1px solid !important;*/
}
#downloads-indicator-progress > .progress-remainder {
-moz-appearance: none;
background: -moz-linear-gradient(top, rgba(242,240,255,0.9),rgba(170,170,170,0.9)) !important;
border: #AAAAAA 1px solid !important;}
/*Amusing Animation Stuff...*/
/*If you were doing this in userChrome.ss, you would just put your images in the chrome folder and your image path would just be - background-image: url("DownL.png") !important; - see? not that hard :)....*/
#downloads-animation-container {
min-height: 1px;
min-width: 1px;
height: 1px;
margin-bottom: -1px;
position: relative;
z-index: 5;
}
#downloads-indicator-notification {
opacity: 0;
background-size: 66px !important;
background-position: center !important;
background-repeat: no-repeat;
width: 66px !important;
height: 66px !important;
}
@keyframes downloadsIndicatorNotificationStartRight {
from { opacity: 1; transform: translate(-128px, 128px) scale(8); }
20% { opacity: .85; animation-timing-function: ease-out !important; }
to { opacity: 0; transform: translate(0) scale(1); }
}
@keyframes downloadsIndicatorNotificationStartLeft {
from { opacity: 1; transform: translate(128px, 128px) scale(8); }
20% { opacity: .85; animation-timing-function: ease-out !important; }
to { opacity: 0; transform: translate(0) scale(1); }
}
#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
background-image: url("chrome://frank/skin/DownL.png") !important;
animation-name: downloadsIndicatorNotificationStartRight;
animation-duration: 1s !important;
}
#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
animation-name: downloadsIndicatorNotificationStartLeft;
}
@keyframes downloadsIndicatorNotificationFinish {
from { opacity: 0; transform: scale(1); }
20% { opacity: .95; animation-timing-function: ease-in; }
to { opacity: 0; transform: scale(8); }
}
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
background-image: url("chrome://frank/skin/DownLF.png") !important;
animation-name: downloadsIndicatorNotificationFinish;
animation-duration: 1s !important;}
Code: Select all
/* frank PanelUI menu button to left of nav bar.....*/
#nav-bar-customization-target {
-moz-box-ordinal-group: 2 !important; }
Steve196 wrote:Seriously, I'm interested but time is a bit tight these days.
Frank Lion wrote:Want the PanelUI Menu button on the left side of the nav bar? -Code: Select all
/* frank PanelUI menu button to left of nav bar.....*/
#nav-bar-customization-target {
-moz-box-ordinal-group: 2 !important; }
Code: Select all
/* move menu panel container when in
/* customization mode to the left hand side */
#customization-panel-container {
-moz-box-ordinal-group: 0 !important;}
/* move the panel arrow to the left so it */
/* doesn't look stupid on the right side */
#customization-panel-container .panel-arrow {
margin-right: 255px /*adjust as required */ !important;}
smsmith wrote:Would it be possible to couple this with moving the menu panel to the left when in customization mode? Asking first while I start playing around with domi to find out.
Code: Select all
/* frank full fix PanelUI menu button to left side of nav bar.....*/
#nav-bar-customization-target,#customization-palette-container {
-moz-box-ordinal-group: 2 !important;
}
#customization-panel-container .panel-arrow {
margin-right: 255px !important;}
smsmith wrote:Edit:
Not terrible, but hacking the margin like this is probably not the correct way to do it.
... margin-right: 255px /*adjust as required /* !important;
}
smsmith wrote:I added the comment inside the code after the fact (not in my userStyle). Thanks for catching that. Stylish used to do color highlighting. Why does it not do that anymore?
ordinal 2 didn't work for me. Had to use 0. :shrug:
Frank Lion wrote:I'd write it like this -Code: Select all
/* frank full fix PanelUI menu button to left side of nav bar.....*/
#nav-bar-customization-target,#customization-palette-container {
-moz-box-ordinal-group: 2 !important;
}
#customization-panel-container .panel-arrow {
margin-right: 255px !important;}
Steve196 wrote:I might have missed it but, Frank, what is your editor choice?
Code: Select all
/*frank Hide grey placeholder entries in searchbar and urlbar in Firefox 19 onwards. Note, place this ABOVE the namespace line in userChrome.css.....*/
#searchbar .autocomplete-textbox::-moz-placeholder,#urlbar .autocomplete-textbox::-moz-placeholder { color: transparent !important; }
Code: Select all
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul){
.tabbrowser-tab:not(:-moz-lwtheme):not(:hover) > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:not(:-moz-lwtheme) {
background-position: left bottom, 30px bottom, right bottom;
background-repeat: no-repeat;
background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%;
}
.tabbrowser-tab:not(:-moz-lwtheme):not(:hover) > .tab-stack > .tab-background:not([selected=true]){
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
url(chrome://browser/skin/tabbrowser/tab-background-end.png) !important;
}
.tabs-newtab-button:not(:-moz-lwtheme){
background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png),
url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
url(chrome://browser/skin/tabbrowser/tab-stroke-end.png) !important;
}
.tabs-newtab-button:not(:-moz-lwtheme):hover{
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
url(chrome://browser/skin/tabbrowser/tab-background-end.png) !important;
}
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle {
margin-top:2px !important;
}
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
}
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end {
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
}
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
background-image: none !important;
}
@media all and (-moz-windows-theme:aero) {
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end {
background-image: linear-gradient(to top, #868d94 0px, transparent 1px),linear-gradient(to top,#b4c0cc,#c8d4e1,#d1deec);
}
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end {
background-image: linear-gradient(to top, #868d94 0px, transparent 1px),linear-gradient(to top,#d0dce8,#dce7f3,#e5effa);
}
}
@media not all and (-moz-windows-theme:aero) {
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end {
background-image: linear-gradient(to top, rgba(10%,10%,10%,.4) 1px, transparent 1px), linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)), linear-gradient(-moz-dialog, -moz-dialog);
}
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start,
.tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end {
background-image: linear-gradient(to top, rgba(10%,10%,10%,.4) 1px, transparent 1px), linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)), linear-gradient(-moz-dialog, -moz-dialog);
}
}
}