本站不兼容 8 以前的版本的 Interner Explorer 浏览器(或基于这些版本的 IE 的其他浏览器),并且页面样式不完全兼容 IE 8,我们建议你升级至 IE 9 或改用其他非 IE 浏览器

Mozest™

  • 正在加载用户菜单…

开放、分享、互助

转播到腾讯微博
返回列表 回复 发帖

[交流] 紧凑about:addons页面

本帖最后由 tyjk 于 2012-3-22 22:13 编辑

以前用几个别人写的样式拼凑出来的。

**888888*****88888*******888888888******

888888******8888888888*********888888888

8888888******8888*******888***********888

18楼已更新代码。
附件: 您所在的用户组无法下载或查看附件
1

评分次数

  • MalcKear

不错!用上了!
请大家帮忙,把本站加入ABP白名单
不错的样式啊
本帖最后由 liuxb 于 2012-3-19 02:35 编辑

不错啊,简洁,用上了。
建议把可以升级的扩展的“show release notes”保留下,这个有时候看一下更新日志还是很有用的。[url=][/url][url=][/url][url=]+[/url][url=]本[/url]hangelog
附件: 您所在的用户组无法下载或查看附件
javascript:alert(navigator.userAgent),
由于安全问题,Firefox已经不能在地址栏直接运行javascript了(装TU后可以),可以Ctrl+shift+K调出控制台,输入navigator.userAgent.
我用其它主题,类别图标不显示,所以只好显示类别名。

附件: 您所在的用户组无法下载或查看附件
请大家帮忙,把本站加入ABP白名单
不错不错,不过貌似没有滚动条了?
另外,建议扔一个到userstyle,方便更新
不错啊,简洁,用上了。
建议把可以升级的扩展的“show release notes”保留下,这个有时候看一下更新日志还是很有用的。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhki ...
liuxb 发表于 2012-3-19 02:34
  1. .description-outer-container,
复制代码
去掉。
感谢楼主分享了
感谢分享,笔记本就是得小点,看着才舒服
把.description-outer-container,去掉。
royallin 发表于 2012-3-19 18:04
去掉以后,扩展那个页面中,最后更新日期和按钮会重叠在一起。。。
javascript:alert(navigator.userAgent),
由于安全问题,Firefox已经不能在地址栏直接运行javascript了(装TU后可以),可以Ctrl+shift+K调出控制台,输入navigator.userAgent.
所以还是不去掉的好,不过滚动条没有了
去掉以后,扩展那个页面中,最后更新日期和按钮会重叠在一起。。。
liuxb 发表于 2012-3-20 13:59
  1. /*最后更新日期*/
  2. #list-view > #addon-list .date-updated {
  3.   display: -moz-box !important;
  4. margin-left:auto!important;
  5. }
复制代码
不是很完美,不过能显示了凑合用吧,谢谢。
附件: 您所在的用户组无法下载或查看附件
javascript:alert(navigator.userAgent),
由于安全问题,Firefox已经不能在地址栏直接运行javascript了(装TU后可以),可以Ctrl+shift+K调出控制台,输入navigator.userAgent.
本帖最后由 such 于 2012-3-20 17:24 编辑

14# liuxb
  1. #list-view > #addon-list .date-updated {
  2.   display: -moz-box !important;
  3. margin-left:-300px!important;
  4. }
复制代码
不合适的话数字什么的自己改改就行了
附件: 您所在的用户组无法下载或查看附件
14# liuxb #list-view > #addon-list .date-updated {
  display: -moz-box !important;
margin-left:-300px!important;
}不合适的话数字什么的自己改改就行了
27312
such 发表于 2012-3-20 17:22
是的。不过更新完之后,就没有了那些update的了,不会挡住,不影响的。
学习下
稍微改动:恢复显示发行说明,恢复竖直滚动条,恢复不兼容扩展背景图像,设置已禁用附加组件的背景色。
  1. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  2. @-moz-document url("about:addons") {
  3. /*隐藏描述信息
  4. .description-outer-container,*/.description-container{display:none!important;}
  5. #view-port-container {
  6.   border-radius: 0 !important;
  7. }
  8. .status-control-wrapper{margin-left:-100px!Important}
  9. .relnotes-container{
  10. max-width:550px!Important;
  11. margin-right:120px!Important}
  12. /*隐藏兼容检查警告*/
  13. .view-header.global-warning-container,
  14. .global-warning-container.global-warning,
  15. .addon.addon-view .warning
  16. {display:none!important;}

  17. /*把所有项目放到同一行*/
  18. #list-view > #addon-list .addon.addon-view {
  19.   padding: 2px 2px 2px 6px !important;
  20. }
  21. #list-view .addon.addon-view * {
  22.   -moz-box-orient: horizontal !important;
  23.   -moz-box-align: center !important;
  24.   vertical-align: middle !important;
  25.   font-size: 100% !important;
  26.   margin-top: 0 !important;
  27.   margin-bottom: 0 !important;
  28.   margin-right: 0 !important;
  29.   white-space: nowrap !important;
  30. }
  31. #list-view > #addon-list .icon-container,
  32. #list-view > #addon-list .icon {
  33.   height: 16px !important;
  34.   width: 16px !important;
  35. }
  36. #list-view > #addon-list :-moz-any(
  37. .icon-container,
  38. .name,
  39. .version,
  40. .disabled-postfix,
  41. .update-postfix,
  42. .date-updated,
  43. .description,
  44. .details.buttton-link,
  45. .relnotes-toggle),
  46. #list-view > #addon-list .relnotes-container > *,
  47. #list-view > #addon-list .status-container label {
  48.   margin-left: 5px !important;
  49. }
  50. /*行调整*/
  51. #list-view > #addon-list > .addon.addon-view {
  52.   min-width: -moz-calc(21em + 3em + 19px) !important;
  53. }
  54. #list-view > #addon-list > .addon.addon-view > hbox {
  55.   min-width: -moz-calc(21em + 3em + 19px) !important;
  56. }
  57. #list-view > #addon-list > .addon.addon-view > hbox > vbox:last-child {
  58.   max-width: 100% !important;
  59.   width: 100% !important;
  60.   min-width: -moz-calc(21em + 3em + 5px) !important;
  61.   display: inline-table !important;
  62. }
  63. #list-view > #addon-list > .addon.addon-view > hbox > vbox:last-child > hbox:first-child {
  64.   width: 55% !important;
  65.   max-width: -moz-calc(100% - 21em - 3em - 5px - 7px) !important;
  66.   min-width: 0 !important;
  67.   display: inline-table !important;
  68. }
  69. #list-view > #addon-list > .addon.addon-view > hbox > vbox:last-child > hbox:first-child > vbox {
  70.   width: -moz-calc(65% - 5px) !important;
  71.   max-width: -moz-calc(65% - 5px) !important;
  72.   min-width: 0 !important;
  73.   display: inline-table !important;
  74. }
  75. #list-view > #addon-list .name-container {
  76.   width: 100% !important;
  77.   max-width: 100% !important;
  78.   min-width: 0 !important;
  79.   display: inline-table !important;
  80. }
  81. #list-view > #addon-list .name-container {
  82.   padding-top: 1px !important;
  83.   padding-bottom: 2px !important;
  84. }
  85. /*最后更新日期*/
  86. #list-view > #addon-list .date-updated {
  87.   display: -moz-box !important;
  88. margin-left:290px!important;
  89. }
  90. #list-view > #addon-list .description-container,
  91. #list-view > #addon-list .relnotes-container {
  92.   margin: 0 !important;
  93. }
  94. #list-view > #addon-list .description {
  95.   padding-top: 1px !important;
  96.   padding-bottom: 2px !important;
  97. }
  98. #list-view > #addon-list .details.button-link > hbox {
  99.   padding-left: 0 !important;
  100.   padding-right: 0 !important;
  101. }
  102. /*紧凑列表*/
  103. #search-list *, #addon-list *, #updates-list * {
  104.   /*background: none !important;*/
  105.   border: none !important;
  106.   box-shadow:none !important;
  107.   text-shadow: none !important;
  108.   -moz-transition: none !important;
  109. }
  110. #addon-list .addon.addon-view {
  111.   border-bottom:1px #CBCBCB dashed !important;
  112.   margin-left:6px!Important;
  113. }
  114. /*禁用项背景*/
  115. .addon.addon-view[active="false"]:not([notification="warning"] )
  116. {background:#E0E0E0!important}
  117. /*不兼容项背景*/
  118. richlistitem[notification="warning"]
  119. {background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"), -moz-linear-gradient(rgba(255, 255, 0, 0.04), transparent);
  120. }
  121. /*列表上下扩大*/
  122. #view-port-container{margin:-14px 0 -10px 0!important;}
  123. #header{margin-top:-15px!important;}

  124. /* 选中项背景 */
  125. #search-list .addon[selected],
  126. #addon-list .addon[selected],
  127. #updates-list .addon[selected] {
  128.   background-color: #C9EDFF !important;
  129. }
  130. /*按钮边框 */
  131. #search-list .addon-control,
  132. #addon-list .addon-control,
  133. #updates-list .addon-control {
  134.   background-color: #F5F5F5 !important;
  135.   border: 1px solid #ABABAB !important;
  136. }
  137. /*按钮*/
  138. #list-view > #addon-list > .addon.addon-view > hbox > vbox:last-child > hbox:last-child > vbox:last-child{
  139.   width: 21em !important;
  140.   max-width: 21em !important;
  141.   min-width: 21em !important;
  142.   -moz-box-pack: end !important;
  143. }
  144. #list-view > #addon-list .control-container > :-moz-any(.preferences, .enable, .disable, .remove) {
  145.   width: 6.4em !important;
  146.   min-width: 6.4em !important;
  147. }
  148. /*启用按钮*/
  149. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .name {
  150.   max-width: -moz-calc(65% - 5px) !important;
  151.   min-width: 0 !important;
  152. }

  153. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .version {
  154.   max-width: -moz-calc(35%) !important;
  155.   width: -moz-calc(35%) !important;
  156.   min-width: 0 !important;
  157. }

  158. #list-view > #addon-list .version[hidden],
  159. #list-view > #addon-list > .addon.addon-view[active="true"] .disabled-postfix,
  160. #list-view > #addon-list > .addon.addon-view:not([upgrade="true"]) .update-postfix {
  161.   width: 0 !important;
  162.   max-width: 0 !important;
  163. }

  164. /*禁用按钮*/
  165. #list-view > #addon-list > .addon.addon-view[active="false"] .name,
  166. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .name {
  167.   max-width: -moz-calc(55% - 5px) !important;
  168.   min-width: 0 !important;
  169. }

  170. #list-view > #addon-list > .addon.addon-view[active="false"] .version,
  171. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .version {
  172.   max-width: -moz-calc(25% - 5px) !important;
  173.   min-width: 0 !important;
  174. }

  175. #list-view > #addon-list > .addon.addon-view[active="false"] .disabled-postfix {
  176.   max-width: 20% !important;
  177.   width: 20% !important;
  178.   min-width: 0 !important;
  179. }

  180. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .update-postfix {
  181.   max-width: 20% !important;
  182.   width: 20% !important;
  183.   min-width: 0 !important;
  184. }
  185. #list-view > #addon-list .date-updated {
  186.   width: -moz-calc(35%) !important;
  187.   max-width: -moz-calc(35%) !important;
  188.   min-width: 0 !important;
  189. }
  190. /*按钮鼠标悬浮样式*/
  191. #view-port .addon-control:not(:active):hover {
  192.   background-color: hsla(190, 60%, 70%, 0.5) !important;
  193.   border-color: hsla(190, 50%, 65%, 0.8) hsla(190, 50%, 50%, 0.8) hsla(190, 50%, 40%, 0.8) !important;
  194.   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
  195.     0 0 0 1.5px rgba(255, 255, 255, 0.1) inset,
  196.     0 1px 0 rgba(0, 0, 0, 0.1),
  197.     0 0 3.5px hsl(190, 90%, 80%) !important;
  198.   -moz-transition: background-color .4s ease-in,
  199.     border-color .3s ease-in,
  200.     box-shadow .3s ease-in !important;
  201. }

  202. /* 按钮按下样式 */
  203. #view-port .addon-control:active:hover {
  204.   background-color: transparent !important;
  205.   border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5) !important;
  206.   box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset,
  207.     0 0 2px rgba(0, 0, 0, 0.4) inset,
  208.     0 1px 0 rgba(255, 255, 255, 0.4) !important;
  209. }

  210. /* 隐藏左侧类别名 */
  211. #categories .category-name {
  212.   display: none !important;
  213. }
  214. /*隐藏作者 */
  215. #search-list .creator,
  216. #addon-list .creator,
  217. #updates-list .creator {
  218.   display: none !important;
  219. }
  220. /*隐藏水平滚动条*/
  221. #view-port-container #view-port scrollbox
  222. {overflow-x:hidden!Important}

  223. /* 显示计数和ID */
  224. .addon {
  225.     counter-increment: addoncount !important;
  226.     content: counter(addoncount) !important;
  227. }
  228. .addon:first-child {
  229.     counter-reset: addoncount !important;
  230. }
  231. .addon[active="false"] {
  232.     counter-increment: disabled !important;
  233. }
  234. #addon-list:after {
  235.     content: "("counter(addoncount)" enabled, "counter(disabled)" disabled)" !important;
  236.     position: fixed !important;
  237.     top: 5px !important;
  238.     left: 10% !important;
  239.     color: #916D15;
  240.     font-weight: bold;
  241.     text-shadow: #FFFFFF 1px 1px 1px;
  242.     cursor: default;
  243.     white-space: nowrap !important;
  244. }
  245. /* 显示ID*/
  246. .addon[selected="true"]::after {
  247.     content: " ID : " attr(value) !important;
  248.     position: absolute !important;
  249.     margin-left: 30px !important;
  250.     color: red !important;
  251.     cursor: default;
  252. }

  253. }
复制代码
附件: 您所在的用户组无法下载或查看附件
近乎完美,自己小修一下颜色和margin,彻底满意了,建议放到userstyle上方便维护
哦对了,非常喜欢“最后更新时间”这个东西,有办法能按这个排序吗?类似stylish那种按照“启用”“名称”“类型”的排序项?这个估计代码量会很大
本帖最后由 tyjk 于 2012-3-22 22:39 编辑

19# cmlx
基本都是别人的代码,我自己都看不大懂,不敢居功。而且基本也不需要怎么维护了。

20# cmlx
参看这里http://g.mozest.com/viewthread.php?tid=36319 怎么弄我不知道,不过我行大大和dindog都说可以。
嗯,多谢,值得研究
22# cmlx

研究出来了说一声。
OK,估计要参考一下stylish的现成代码,看他怎么做了三个按钮上去的
相当帅!辛苦了!
请大家帮忙,把本站加入ABP白名单
这个和FXchrome主题有冲突,最上一栏和左侧栏都没有了!
26# 24266600
第三方主题总容易遇到不可预测的问题吧,这个我也没办法。
很好用,果断收下了
不错,自己加了个背景.
使用FXCHROME主题后,再用此样式,会出现异常,非常难看。