首页 >> Firefox 主题外观

NewDownloadsPanel显示下载进度数值(Nightly)

阅读：6364回复：11

lonely_8

2012-08-17 00:22
加关注写私信

楼主^#

鼠标停留在下载按钮上显示当前下载进度数值，
仅适用于开启新下载面板的Firefox版本。
http://userstyles.org/styles/71325

图片：preview.gif

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#downloads-indicator-progress-area { position: relative }
#downloads-indicator-progress-area::after {
    left: 43px;
    content: "%";
    background: rgba(0,0,0,.5);
    padding : 0 2px 0 22px;
    margin-left: -22px;
    border-radius: 3px;
}
#downloads-indicator-progress::after {
    left: 22px;
    z-index: 1;
    content: attr(value);
    width: 20px;
    overflow: hidden;
}
:-moz-any(#downloads-indicator-progress,#downloads-indicator-progress-area)::after {
    position: absolute;
    top: 1px;
    font-size: 11px;
    color: #FFF;
    opacity: 0;
    transform: translateX(-20px);
    transition-duration: 800ms,600ms;
}
#downloads-indicator:hover :-moz-any(#downloads-indicator-progress,#downloads-indicator-progress-area)::after {
    opacity: 1;
    transform: translateX(0);
    transition-duration: 200ms,150ms;
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
}
}

喜欢1

最新喜欢：

thescf...

iwo

2012-08-17 00:22
加关注写私信

1楼^#

支持楼主，试下去先；

再请教下，那个黑黑的下载图标，能改成白版的吗？
写成这样貌似不行：

#downloads-button,#downloads-indicator, #downloads-indicator-icon
{list-style-image: url("chrome://browser/skin/Toolbar-inverted.png") !important; }

Ps：还有，Fx 17a里（或者更早）已经可以根据文件后缀名，
尝试记住“另存为”的下载目录了吗，还是煋了？

罘罳無賴•飛蟲勿擾

回复喜欢

taglife

2012-08-17 00:22
加关注写私信

2楼^#

lonely_8：...回到原帖

是用什麼主題?! 好像還蠻好看的...

Firefox 開啟安全模式，停用個人設定、佈景主題及擴充套件(無附加元件)測試：
說明 > 重新啟動但停用附加元件(Firefox 4+)
Firefox Profile: 說明 > 疑難排解資訊 > 開啟資料夾
排版引擎：Firefox(Gecko), Opera(Presto), Google Chrome(WebKit),
Safari(WebKit), Internet Explorer(Trident), Konqueror(KHTML)

回复喜欢

lonely_8

2012-08-17 00:22
加关注写私信

3楼^#

iwo：支持楼主，试下去先；

再请教下，那个黑黑的下载图标，能改成白版的吗？
写成这样貌似不行：
#downloads-button,#downloads-indicator, #downloads-indicator-icon {list-style-image: url("chrome://browser/skin/Toolbar-inverted.png") !important; }

Ps：还有，Fx 17a里（或者更早）已经可以根据文件后缀名，
尝试记住“另存为”的下载目录了吗，还是煋了？回到原帖

新下载面板那个按钮是用背景做的。

#downloads-indicator-icon{
 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                              0, 108, 18, 90) center no-repeat!important;
}

貌似是按文件后缀记住之前的下载路径了，这个功能我不常用，
我用紫云飞大大的save to脚本将常用下载路径设定好了。

是用什麼主題?! 好像還蠻好看的...[/quote]
FXChrome主题

回复喜欢

fang5566

2012-08-17 00:22
加关注写私信

4楼^#

相当好用，收了，多谢！

Firefox More than meets your experience

回复喜欢

runking

2012-08-17 00:22
加关注写私信

5楼^#

楼主用什么录你图片？感觉好清晰啊！我用的GGG录GIF，录出来感觉好粗糙的说。

回复喜欢

iwo

2012-08-17 00:22
加关注写私信

6楼^#

lonely_8：
FXChrome主题回到原帖

那个下载图标css有效，不过同时把下载后变绿好像，还有楼主的进度条效果都干掉了,肿么恢复？

罘罳無賴•飛蟲勿擾

回复喜欢

lonely_8

2012-08-17 00:22
加关注写私信

7楼^#

runking：楼主用什么录你图片？感觉好清晰啊！我用的GGG录GIF，录出来感觉好粗糙的说。回到原帖

Camtasia Studio

[quote="iwo"]那个下载图标css有效，不过同时把下载后变绿好像，还有楼主的进度条效果都干掉了,肿么恢复？[/quote]
我这里进度条效果正常。
试试这个吧

#downloads-indicator:not([counter]):not([attention]) #downloads-indicator-icon{
 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                              0, 108, 18, 90) center no-repeat!important;
}

回复喜欢

pcxfirefox

2012-08-17 00:22
加关注写私信

8楼^#

FXChrome主题

问下用了FxChrome+UX主题后，标签页与最上面有1px的距离

怎样消除这个1px呢？

http://pcxfirefox.wordpress.com/

回复喜欢

lonely_8

2012-08-17 00:22
加关注写私信

9楼^#

pcxfirefox：
问下用了FxChrome+UX主题后，标签页与最上面有1px的距离

怎样消除这个1px呢？回到原帖

窗口最大化后的？数值自调吧

#main-window[sizemode="maximized"] #tabbrowser-tabs{
margin-top:-1px!important;
}

回复喜欢

pcxfirefox

2012-08-17 00:22
加关注写私信

10楼^#

窗口最大化后的？数值自调吧
#main-window[sizemode="maximized"] #tabbrowser-tabs{
margin-top:-1px!important;
}

是最大化的，不过你这个写法不知道为什么和omnibar plus的动态效果有冲突

我直接写

#tabbrowser-tabs {
    margin-top:-1px!important;
    }

就行了

http://pcxfirefox.wordpress.com/

回复喜欢

iwo

2012-08-17 00:22
加关注写私信

11楼^#

lonely_8：
我这里进度条效果正常。
试试这个吧

#downloads-indicator:not([counter]):not([attention]) #downloads-indicator-icon{
 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                              0, 108, 18, 90) center no-repeat!important;
}

回到原帖

OK！！！多谢！
PS:话说做UI的人为啥要这么干捏，记得那个后退按钮（backward button），也是用图片做背景，独独这里保留个奇葩，为嘛呢？

罘罳無賴•飛蟲勿擾

回复喜欢

« 返回列表

您需要登录后才可以回帖，登录或者注册