Board logo

标题: [交流] 紧凑about:addons页面 [打印本页]

作者: tyjk    时间: 2012-3-18 23:19     标题: 紧凑about:addons页面

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

以前用几个别人写的样式拼凑出来的。
[attach]27294[/attach]
**888888*****88888*******888888888******
[attach]27295[/attach]
888888******8888888888*********888888888
[attach]27296[/attach]
8888888******8888*******888***********888

18楼已更新代码。
作者: congxz6688    时间: 2012-3-19 00:03

不错!用上了!
作者: emiltsao    时间: 2012-3-19 02:07

不错的样式啊
作者: liuxb    时间: 2012-3-19 02:34

本帖最后由 liuxb 于 2012-3-19 02:35 编辑

不错啊,简洁,用上了。
建议把可以升级的扩展的“show release notes”保留下,这个有时候看一下更新日志还是很有用的。[url=][/url][url=][/url][url=]+[/url][url=]本[/url]hangelog
作者: congxz6688    时间: 2012-3-19 12:35

我用其它主题,类别图标不显示,所以只好显示类别名。

[attach]27300[/attach]
作者: cmlx    时间: 2012-3-19 13:15

不错不错,不过貌似没有滚动条了?
作者: cmlx    时间: 2012-3-19 13:17

另外,建议扔一个到userstyle,方便更新
作者: royallin    时间: 2012-3-19 18:04

不错啊,简洁,用上了。
建议把可以升级的扩展的“show release notes”保留下,这个有时候看一下更新日志还是很有用的。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhki ...
liuxb 发表于 2012-3-19 02:34
  1. .description-outer-container,
复制代码
去掉。
作者: emiltsao    时间: 2012-3-19 20:41

感谢楼主分享了
作者: qingxinren    时间: 2012-3-19 20:53

感谢分享,笔记本就是得小点,看着才舒服
作者: liuxb    时间: 2012-3-20 13:59

把.description-outer-container,去掉。
royallin 发表于 2012-3-19 18:04
去掉以后,扩展那个页面中,最后更新日期和按钮会重叠在一起。。。
作者: cmlx    时间: 2012-3-20 14:05

所以还是不去掉的好,不过滚动条没有了
作者: royallin    时间: 2012-3-20 15:30

去掉以后,扩展那个页面中,最后更新日期和按钮会重叠在一起。。。
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. }
复制代码

作者: liuxb    时间: 2012-3-20 16:34

不是很完美,不过能显示了凑合用吧,谢谢。
作者: such    时间: 2012-3-20 17:22

本帖最后由 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. }
复制代码
不合适的话数字什么的自己改改就行了
[attach]27312[/attach]
作者: royallin    时间: 2012-3-20 22:15

14# liuxb #list-view > #addon-list .date-updated {
  display: -moz-box !important;
margin-left:-300px!important;
}不合适的话数字什么的自己改改就行了
27312
such 发表于 2012-3-20 17:22
是的。不过更新完之后,就没有了那些update的了,不会挡住,不影响的。
作者: vived    时间: 2012-3-21 18:29

学习下
作者: tyjk    时间: 2012-3-22 20:36

稍微改动:恢复显示发行说明,恢复竖直滚动条,恢复不兼容扩展背景图像,设置已禁用附加组件的背景色。

[attach]27346[/attach]

[attach]27347[/attach]
  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. }
复制代码

作者: cmlx    时间: 2012-3-22 21:22

近乎完美,自己小修一下颜色和margin,彻底满意了,建议放到userstyle上方便维护
作者: cmlx    时间: 2012-3-22 21:30

哦对了,非常喜欢“最后更新时间”这个东西,有办法能按这个排序吗?类似stylish那种按照“启用”“名称”“类型”的排序项?这个估计代码量会很大
作者: tyjk    时间: 2012-3-22 22:12

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

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

20# cmlx
参看这里http://g.mozest.com/viewthread.php?tid=36319 怎么弄我不知道,不过我行大大和dindog都说可以。
作者: cmlx    时间: 2012-3-22 22:27

嗯,多谢,值得研究
作者: tyjk    时间: 2012-3-22 22:39

22# cmlx

研究出来了说一声。
作者: cmlx    时间: 2012-3-23 01:08

OK,估计要参考一下stylish的现成代码,看他怎么做了三个按钮上去的
作者: congxz6688    时间: 2012-3-23 15:42

相当帅!辛苦了!
作者: 24266600    时间: 2012-3-25 19:42

这个和FXchrome主题有冲突,最上一栏和左侧栏都没有了!
作者: tyjk    时间: 2012-3-25 21:53

26# 24266600
第三方主题总容易遇到不可预测的问题吧,这个我也没办法。
作者: yuyhb    时间: 2012-3-29 21:57

很好用,果断收下了
作者: kdtlee    时间: 2012-4-9 01:28

不错,自己加了个背景.

作者: Kiddy    时间: 2012-4-11 13:15

使用FXCHROME主题后,再用此样式,会出现异常,非常难看。
作者: dkgo    时间: 2012-4-11 13:51

30# Kiddy

修改了一下 :)
  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: 0px !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. #addon-list .addon.addon-view {
  104.   border-bottom:1px #CBCBCB dashed !important;
  105.   margin-left:6px!Important;
  106. }
  107. /*禁用项背景*/
  108. .addon.addon-view[active="false"]:not([notification="warning"] )
  109. {background:#E0E0E0!important}
  110. /*不兼容项背景*/
  111. richlistitem[notification="warning"]
  112. {background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"), -moz-linear-gradient(rgba(255, 255, 0, 0.04), transparent);
  113. }

  114. /* 选中项背景 */
  115. #search-list .addon[selected],
  116. #addon-list .addon[selected],
  117. #updates-list .addon[selected] {
  118.   background-color: #C9EDFF !important;
  119. }

  120. /*启用按钮*/
  121. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .name {
  122.   max-width: -moz-calc(65% - 5px) !important;
  123.   min-width: 0 !important;
  124. }

  125. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .version {
  126.   max-width: -moz-calc(35%) !important;
  127.   width: -moz-calc(35%) !important;
  128.   min-width: 0 !important;
  129. }

  130. #list-view > #addon-list .version[hidden],
  131. #list-view > #addon-list > .addon.addon-view[active="true"] .disabled-postfix,
  132. #list-view > #addon-list > .addon.addon-view:not([upgrade="true"]) .update-postfix {
  133.   width: 0 !important;
  134.   max-width: 0 !important;
  135. }

  136. /*禁用按钮*/
  137. #list-view > #addon-list > .addon.addon-view[active="false"] .name,
  138. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .name {
  139.   max-width: -moz-calc(55% - 5px) !important;
  140.   min-width: 0 !important;
  141. }

  142. #list-view > #addon-list > .addon.addon-view[active="false"] .version,
  143. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .version {
  144.   max-width: -moz-calc(25% - 5px) !important;
  145.   min-width: 0 !important;
  146. }

  147. #list-view > #addon-list > .addon.addon-view[active="false"] .disabled-postfix {
  148.   max-width: 20% !important;
  149.   width: 20% !important;
  150.   min-width: 0 !important;
  151. }

  152. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .update-postfix {
  153.   max-width: 20% !important;
  154.   width: 20% !important;
  155.   min-width: 0 !important;
  156. }
  157. #list-view > #addon-list .date-updated {
  158.   width: -moz-calc(35%) !important;
  159.   max-width: -moz-calc(35%) !important;
  160.   min-width: 0 !important;
  161. }

  162. /*隐藏作者 */
  163. #search-list .creator,
  164. #addon-list .creator,
  165. #updates-list .creator {
  166.   display: none !important;
  167. }
  168. /*隐藏水平滚动条*/
  169. #view-port-container #view-port scrollbox
  170. {overflow-x:hidden!Important}

  171. /* 显示计数和ID */
  172. .addon {
  173.     counter-increment: addoncount !important;
  174.     content: counter(addoncount) !important;
  175. }
  176. .addon:first-child {
  177.     counter-reset: addoncount !important;
  178. }
  179. .addon[active="false"] {
  180.     counter-increment: disabled !important;
  181. }
  182. #addon-list:after {
  183.     content: "("counter(addoncount)" enabled, "counter(disabled)" disabled)" !important;
  184.     position: fixed !important;
  185.     top: 5px !important;
  186.     left: 10% !important;
  187.     color: #916D15;
  188.     font-weight: bold;
  189.     text-shadow: #FFFFFF 1px 1px 1px;
  190.     cursor: default;
  191.     white-space: nowrap !important;
  192. }
  193. /* 显示ID*/
  194. .addon[selected="true"]::after {
  195.     content: " ID : " attr(value) !important;
  196.     position: absolute !important;
  197.     margin-left: 30px !important;
  198.     color: red !important;
  199.     cursor: default;
  200. }

  201. }
复制代码

作者: Kiddy    时间: 2012-4-12 13:00

修改好的代码适用于所有主题还是单单针对FXCHROME?
我用了这个样式后,觉得项目图标和名称太紧凑了,有种不自然的感觉
作者: dkgo    时间: 2012-4-12 13:25

针对fxchrome,细节处理可能真的要另外调整一下。毕竟fxchrome改动太多了。
作者: wuji2004    时间: 2012-4-12 16:05

33# dkgo
谢谢大大 完美解决了
作者: kdtlee    时间: 2012-4-12 18:43

谢谢两位大侠的辛勤劳动.按你们的样式修改拼凑出了几幅图,发图留念.
[attach]27560[/attach]
[attach]27561[/attach]
[attach]27562[/attach]
作者: lxt15    时间: 2012-7-3 10:16

不错,挺好的
作者: lianyi1984    时间: 2012-7-28 19:19

稍微改动:恢复显示发行说明,恢复竖直滚动条,恢复不兼容扩展背景图像,设置已禁用附加组件的背景色。

27346

27347@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-docum ...
tyjk 发表于 2012-3-22 20:36
我想显示描述信息,而不是ID。要怎么改?
作者: tyjk    时间: 2012-7-30 00:03

37# lianyi1984

试改了一下,结果发现描述信息的位置动不了。。。
作者: halffog    时间: 2012-7-30 01:08

本帖最后由 halffog 于 2012-7-30 01:10 编辑

38# tyjk

我试着在楼主的上面改了一下,可以显示描述信息,如图

[attach]28081[/attach]

脚本如下
  1. @-moz-document url("about:addons") {
  2. #view-port-container {
  3.   border-radius: 0px !important;
  4. }
  5. /*列表上下扩大*/
  6. #view-port-container{margin:-14px 0 -10px 0!important;}
  7. #header{margin-top:-15px!important;}
  8. /*******把所有项目放到同一行******/
  9. #list-view > #addon-list .addon.addon-view {
  10.   padding: 2px 2px 2px 6px !important;
  11. }
  12. #list-view .addon.addon-view * {
  13.   -moz-box-orient: horizontal !important;
  14.   -moz-box-align: center !important;
  15.   vertical-align: middle !important;
  16.   font-size: 100% !important;
  17.   margin-top: 0 !important;
  18.   margin-bottom: 0 !important;
  19.   margin-right: 0 !important;
  20.   white-space: nowrap !important;
  21. }
  22. #list-view > #addon-list .icon-container,
  23. #list-view > #addon-list .icon {
  24.   height: 16px !important;
  25.   width: 16px !important;
  26. }
  27. #list-view > #addon-list :-moz-any(
  28. .icon-container,
  29. .name,
  30. .version,
  31. .disabled-postfix,
  32. .update-postfix,
  33. .date-updated,
  34. .description,
  35. .details.buttton-link,
  36. .relnotes-toggle),
  37. #list-view > #addon-list .relnotes-container > *,
  38. #list-view > #addon-list .status-container label {
  39.   margin-left: 5px !important;
  40. }
  41. #list-view > #addon-list .name-container {
  42.   padding-top: 1px !important;
  43.   padding-bottom: 2px !important;
  44. }
  45. /*最后更新日期
  46. #list-view > #addon-list .date-updated {
  47.   display: -moz-box !important;
  48. }
  49. #list-view > #addon-list .description-container,
  50. #list-view > #addon-list .relnotes-container {
  51.   margin: 0 !important;
  52. }
  53. #list-view > #addon-list .description {
  54.   padding-top: 1px !important;
  55.   padding-bottom: 2px !important;
  56. }
  57. #list-view > #addon-list .details.button-link > hbox {
  58.   padding-left: 0 !important;
  59.   padding-right: 0 !important;
  60. }*/
  61. /******纵行 调整******/
  62. #list-view > #addon-list > .addon.addon-view {
  63.   min-width: -moz-calc(21em + 3em + 19px) !important;
  64. }
  65. #list-view > #addon-list .content-container {
  66.   min-width: -moz-calc(21em + 3em + 19px) !important;
  67. }
  68. #list-view > #addon-list .content-inner-container {
  69. /*  max-width: -moz-calc(100% - 12px - 12px - 16px - 7px - 7px) !important;
  70.   width: -moz-calc(100% - 12px - 12px - 16px - 7px - 7px) !important; */
  71.   max-width: 100% !important;
  72.   width: 100% !important;
  73.   min-width: -moz-calc(21em + 3em + 5px) !important;
  74.   display: inline-table !important;
  75. }
  76. #list-view > #addon-list .basicinfo-container {
  77.   width: 55% !important;
  78.   max-width: -moz-calc(100% - 21em - 3em - 5px - 7px) !important;
  79.   min-width: 0 !important;
  80.   display: inline-table !important;
  81. }
  82. #list-view > #addon-list .name-container {
  83.   width: -moz-calc(66% - 5px) !important;
  84.   max-width: -moz-calc(66% - 5px) !important;
  85.   min-width: 0 !important;
  86.   display: inline-table !important;
  87. }
  88. /*****启用按钮*****/
  89. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .name {
  90.   max-width: -moz-calc(65% - 5px) !important;
  91.   min-width: 0 !important;
  92. }
  93. #list-view > #addon-list > .addon.addon-view[active="true"]:not([upgrade="true"]) .version {
  94.   max-width: -moz-calc(35%) !important;
  95.   width: -moz-calc(35%) !important;
  96.   min-width: 0 !important;
  97. }
  98. #list-view > #addon-list .version[hidden],
  99. #list-view > #addon-list > .addon.addon-view[active="true"] .disabled-postfix,
  100. #list-view > #addon-list > .addon.addon-view:not([upgrade="true"]) .update-postfix {
  101.   width: 0 !important;
  102.   max-width: 0 !important;
  103. }
  104. /***禁用按钮***/
  105. #list-view > #addon-list > .addon.addon-view[active="false"] .name,
  106. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .name {
  107.   max-width: -moz-calc(55% - 5px) !important;
  108.   min-width: 0 !important;
  109. }
  110. #list-view > #addon-list > .addon.addon-view[active="false"] .version,
  111. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .version {
  112.   max-width: -moz-calc(27% - 5px) !important;
  113.   min-width: 0 !important;
  114. }
  115. #list-view > #addon-list > .addon.addon-view[active="false"] .disabled-postfix {
  116.   max-width: 18% !important;
  117.   width: 18% !important;
  118.   min-width: 0 !important;
  119. }
  120. #list-view > #addon-list > .addon.addon-view[upgrade="true"] .update-postfix {
  121.   max-width: 18% !important;
  122.   width: 18% !important;
  123.   min-width: 0 !important;
  124. }
  125. /* #list-view > #addon-list .date-updated {
  126.   width: -moz-calc(34%) !important;
  127.   max-width: -moz-calc(34%) !important;
  128.   min-width: 0 !important;
  129. } */
  130. /***描述信息***/
  131. #list-view > #addon-list .advancedinfo-container {
  132.   width: 56% !important;
  133.   min-width: 21em !important;
  134.   display: inline-table !important;
  135.   margin-left:-120px!important;
  136. }
  137. /****** 描述信息 + 更多 + 最近更新 ******/
  138. #list-view > #addon-list .description-outer-container {
  139.   width: -moz-calc(100% - 21em - 5px) !important;
  140.   max-width: -moz-calc(100% - 21em - 5px) !important;
  141.   min-width: 4em !important;
  142.   display: inline-table !important;
  143. }
  144. #list-view > #addon-list .description-container {
  145.   width: 100% !important;
  146.   min-width: 100% !important;
  147.   display: inline-table !important;
  148. }
  149. #list-view > #addon-list .description {
  150.   width: -moz-calc(100% - 3em - 5px) !important;
  151.   max-width: -moz-calc(100% - 3em - 5px) !important;
  152.   display: table-cell !important;
  153. }
  154. #list-view > #addon-list .description[hidden] + .details.button-link {
  155.   margin-left: -moz-calc(-3em + 1px) !important;
  156. }
  157. #list-view > #addon-list .details.button-link {
  158.   max-width: 3em !important;
  159.   display: table-cell !important;
  160. }
  161. #list-view > #addon-list .relnotes-container {
  162. }
  163. #list-view > #addon-list .status-control-wrapper {
  164.   width: 21em !important;
  165.   max-width: 21em !important;
  166.   min-width: 21em !important;
  167.   -moz-box-pack: end !important;
  168. }
  169. #list-view > #addon-list .control-container > :-moz-any(.preferences, .enable, .disable, .remove) {
  170.   width: 6.4em !important;
  171.   min-width: 6.4em !important;
  172. }
  173. #list-view > #addon-list :-moz-any(.error, .pending, .warning) {
  174.   margin-left: 28px !important;
  175. }
  176. #list-view .addon.addon-view[notification="warning"] .warning {
  177.   display: none !important;
  178. }
  179. #list-view > #addon-list > .addon.addon-view .install-status:not([hidden]) .cancel {
  180.   margin: 3px !important;
  181. }
  182. #list-view > #addon-list > .addon.addon-view .install-status:not([hidden]) .start-cap {
  183.   margin: -1px 0 -1px -1px !important;
  184.   height: 1.7em !important;
  185. }
  186. /* 显示计数 */
  187. .addon {
  188.     counter-increment: addoncount !important;
  189.     content: counter(addoncount) !important;
  190. }
  191. .addon:first-child {
  192.     counter-reset: addoncount !important;
  193. }
  194. .addon[active="false"] {
  195.     counter-increment: disabled !important;
  196. }
  197. #addon-list:after {
  198.     content: "( 启用 "counter(addoncount)" 个, 禁用 "counter(disabled)" 个 )" !important;
  199.     position: fixed !important;
  200.     top: 5px !important;
  201.     left: 10% !important;
  202.     color: #916D15;
  203.     font-weight: bold;
  204.     text-shadow: #FFFFFF 1px 1px 1px;
  205.     cursor: default;
  206.     white-space: nowrap !important;
  207. }
  208. /*按钮边框 */
  209. #search-list .addon-control,
  210. #addon-list .addon-control,
  211. #updates-list .addon-control {
  212.   background-color: #F5F5F5 !important;
  213.   border: 1px solid #ABABAB !important;
  214. }
  215. /*按钮鼠标悬浮样式*/
  216. #view-port .addon-control:not(:active):hover {
  217.   background-color: hsla(190, 60%, 70%, 0.5) !important;
  218.   border-color: hsla(190, 50%, 65%, 0.8) hsla(190, 50%, 50%, 0.8) hsla(190, 50%, 40%, 0.8) !important;
  219.   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
  220.     0 0 0 1.5px rgba(255, 255, 255, 0.1) inset,
  221.     0 1px 0 rgba(0, 0, 0, 0.1),
  222.     0 0 3.5px hsl(190, 90%, 80%) !important;
  223.   -moz-transition: background-color .4s ease-in,
  224.     border-color .3s ease-in,
  225.     box-shadow .3s ease-in !important;
  226. }
  227. /* 按钮按下样式 */
  228. #view-port .addon-control:active:hover {
  229.   background-color: transparent !important;
  230.   border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5) !important;
  231.   box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset,
  232.     0 0 2px rgba(0, 0, 0, 0.4) inset,
  233.     0 1px 0 rgba(255, 255, 255, 0.4) !important;
  234. }
  235. /*禁用项背景*/
  236. .addon.addon-view[active="false"]:not([notification="warning"] ){
  237. background:#E0E0E0!important;
  238. }
  239. /*不兼容项背景*/
  240. richlistitem[notification="warning"]{
  241. background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"), -moz-linear-gradient(rgba(255, 255, 0, 0.04), transparent);
  242. }
  243. /* 选中项背景 */
  244. #search-list .addon[selected],
  245. #addon-list .addon[selected],
  246. #updates-list .addon[selected] {
  247.   background-color: #A9CDF1 !important;
  248.   border: 0.5px solid #7097B4 !important;
  249.   border-radius: 2px !important;
  250. }
  251. /* 显示ID*/
  252. .addon[selected="true"]::after {
  253.     content: " ID : " attr(value) !important;
  254.     position: absolute !important;
  255.     margin-left: 30px !important;
  256.     color: red !important;
  257.     cursor: default;
  258. }
  259. }
复制代码

作者: palesaint    时间: 2012-7-30 09:10

不用stylish没有效果
作者: tyjk    时间: 2012-7-30 12:18

39# halffog
我是想把描述信息移动到id那个位置,结果发现怎么都动不了,有什么法子吗?

40# palesaint
亲测放到userContent.css有效的。
作者: MalcKear    时间: 2012-7-30 12:38

Nighlty版
更多链接和选项按钮有点重合.
作者: palesaint    时间: 2012-8-11 16:22

可以参考一下这个  http://userstyles.org/styles/670 ... anager-table-layout 我用着很完美啊
作者: cmlx    时间: 2015-8-12 19:48

唉,用了几年的霸气样式,终于死在官方的傻缺升级手里了,40不兼容
作者: tyjk    时间: 2016-2-19 14:59

44# cmlx

更新了,然后也放到userstyles.org上面了,试一下吧。
https://userstyles.org/styles/124362
作者: wisky    时间: 2017-3-8 19:27

试试看什么效果




© 2004-2009 Mozest.com