? ? ? 文章

火狐标签栏+工具栏CSS美化:新颖的暗黑色扁平标签栏样式

火狐标签栏+工具栏CSS美化:新颖的暗黑色扁平标签栏样式

1920x1080大图,点击可放大查看

比较少见,可能比较适合小众口味,不用修改可以直接用,懂CSS的根据自己的需求调整一下会更美观

CSS代码:

/*===============================================
  FLAT FIREFOX
  CSS THEME FOR STYLISH
  V15.07.22
  FOR FIREFOX BETA V40.0
  BY NADIRP.DEVIANTART.COM
  ===============================================*/
/*===============================================
  DISABLE FIREFOX DEFAULT BACKGROUND  
  ===============================================*/
#TabsToolbar:not(:-moz-lwtheme)::after {
	display: none;
}
/*===============================================
  TABS BACKGROUND SETTINGS  
  ===============================================*/
#main-window[sizemode="normal"]:not([inFullscreen])  #TabsToolbar {
	background: transparent !important;
	margin-bottom: -1px !important;
	margin-top: 4px !important;
	margin-right: -25px !important;
	margin-left: -18px !important;
}
#main-window[sizemode="normal"]:not([inFullscreen])  #TabsToolbar .tabbrowser-tabs {
	min-height: 26px !important;
	margin-top: 1px !important;
}
/*===============================================
  INACTIVE TABS  
  ===============================================*/
#TabsToolbar .tabbrowser-tab {
	text-align: left!important;
	-moz-border-top-colors: none !important;
	-moz-border-left-colors: none !important;
	-moz-border-right-colors: none !important;
	-moz-border-bottom-colors: none !important;
	background: #474A53 !important;
	border-top: 1px solid transparent!important;
	border-bottom: 1px solid transparent!important;
	border-left: 1px solid transparent!important;
	border-right: 1px solid transparent!important;
	border-radius: 3px 3px 0px 0px !important;
	color: #757983 !important;
	margin: 0px 3px 0px 2px !important;
	font-family: "Segoe UI",Helvetica,Arial,sans-serif;
	font-size: 11px;
}
/*===============================================
  ACTIVE TABS  
  ===============================================*/
#TabsToolbar .tabbrowser-tab[selected] {
	font-weight: normal !important;
	border-top: 1px solid #282B34!important;
	border-bottom: 1px solid #282B34!important;
	border-left: 1px solid #282B34!important;
	border-right: 1px solid #282B34!important;
	border-radius: 3px 3px 0px 0px !important;
	background: #282B34 !important;
	color: #757983 !important;
}
/*===============================================
  DISABLE AUSTRALIS TAB  
  ===============================================*/
#TabsToolbar .tab-background {
	margin: 0;
	background: transparent;
}
#TabsToolbar .tab-background-start,  #TabsToolbar .tab-background-end {
	display: none !important;
}
#TabsToolbar .tab-background-middle {
	background: transparent !important;
}
#TabsToolbar .tabbrowser-tab:after,  #TabsToolbar .tabbrowser-tab:before {
	display: none !important;
}
/*===============================================
  ON MAXIMIZED WINDOW  
  ===============================================*/
#main-window[sizemode="maximized"]  #TabsToolbar {
	background: transparent !important;
	margin-bottom: 0px !important;
	margin-top: 4px !important;
	margin-right: -25px !important;
	margin-left: -13px !important;
}
#TabsToolbar .tabbrowser-tabs {
	min-height: 26px !important;
	margin-top: 1px !important;
}
#main-window[sizemode="maximized"]  #nav-bar {
	border-radius: 0px 0px 0px 0px !important;
	margin-left: -4px !important;
	margin-right: -6px !important;
}
/*===============================================
  HIDES TAB ICON  
  ===============================================*/
tab .tab-icon, .tab-icon-image {
	display: none !important;
}
/*===============================================
  HIDES TAB LOADING ICON  
  ===============================================*/
.tab-throbber {
	display: none !important;
}
/*===============================================
  HIDES ANNOYING ELEMENTS ON ADDRESS BAR  
  ===============================================*/
#addonbar-closebutton ,#feed-button,#go-button,#star-button,#identity-box,.autocomplete-history-dropmarker,.scrollbutton-up,.scrollbutton-down {
	display: none!important;
}
/*===============================================
  NAVIGATION BAR/ADDRESS BAR/SEARCH BAR SETTING  
  ===============================================*/
#nav-bar {
	background: #282B34 !important;
	margin-top: -1px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	margin-bottom: 0px !important;
	padding: 0px !important;
	border-radius: 0px 0px 0px 0px !important;
	border-top: 1px #282B34!important;
	box-shadow: none !important;
}
#urlbar {
	background: #282B34 !important;
	padding: 4.5px !important;
	text-align: left!important;
	padding-left: 8px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 12px !important;
	margin-right: 4px !important;
	border-top: 1px solid #282B34!important;
	border-bottom: 1px solid #282B34!important;
	border-left: 1px solid #282B34!important;
	border-right: 1px solid #282B34!important;
	color: #757983 !important;
	font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif;
	font-size: 11px;
	box-shadow: none !important;
}
#searchbar .search-go-button {
	visibility: hidden !important;
}
#searchbar .searchbar-dropmarker-image {
	display: none !important;
}
#searchbar .searchbar-engine-image {
	width: 0 !important;
	padding-left: 18px !important;
	margin-left: -20px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-right: 2px !important;
}
#searchbar .searchbar-textbox {
	background: #282B34 !important;
	text-align: left!important;
	margin-top: 7px !important;
	margin-bottom: 7px !important;
	margin-left: 1px !important;
	margin-right: 10px !important;
	border-top: 1px solid #282B34!important;
	border-bottom: 1px solid #282B34!important;
	border-left: 1px solid #282B34!important;
	border-right: 1px solid #282B34!important;
	padding-left: 5px !important;
	color: #757983 !important;
	font-family: "Segoe UI Semibold",Helvetica,Arial,sans-serif;
	font-size: 11px;
	box-shadow: none !important;
}
#urlbar, .searchbar-textbox {
	border-radius: 11px !important;
}
/*===============================================
  REMOVES VS SEPARATOR
  ===============================================*/
#browser-bottombox {
	border: none !important;
}
#browser-border-end, #browser-border-start {
	display: none !important;
}
#nav-bar {
	border: none !important;
	visibility: visible !important;
}
#navigator-toolbox:after {
	height: 0px !important;
}
/*===============================================
  BORDERLESS EFFECT FOR BORDERLESS VS
  ===============================================*/
#main-window {
	-moz-appearance: -moz-win-borderless-glass !important;
	-moz-appearance: -moz-win-glass !important;
}
/*===============================================
  TABS CLOSE BUTTON
  ===============================================*/
.tabs-closebutton-box, .tab-close-button {
	margin-top: -5px !important;
	margin-bottom: -5px !important;
	margin-right: 0px !important;
}
.tabbrowser-tabs tab .tab-close-button .toolbarbutton-icon,  .tabbrowser-tabs tab .tabs-closebutton .toolbarbutton-icon {
	display: none !important;
}
.tabbrowser-tabs tab:hover .tab-close-button .toolbarbutton-icon,  .tabbrowser-tabs tab:hover .tabs-closebutton .toolbarbutton-icon {
	display: -moz-box !important;
}
.tab-close-button,   .tabs-closebutton,   #find-closebutton {
	list-style-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%00%E3IDAT8%8D%ED%91%B1J%C3P%14%86%BF%3F%B9q%C9%24%A2T%AD%E0%E6%E4%E4%D0%CD%A1%BE%90%60%09I%5DB%C0v%F0%91%04%2B8%0A%0E.%EDj%11%17%9F%40%93%DE%E3%D0%0A5%09%88%7B%BF%ED%FC%7C%FC%E7p%2Flhe%90%15%BD%CB%E1%CD%FE%CF%9C%24%F9%C1%20%2Bzm%AE%EA%C1UZ%9C%05%D2%3D%D8%7B%A9%B0%0F%10y%3FAtP%D0%BF%1D%5D%3F%AF%FB%AE%5E%B0%257%AFX%BC%82N%23%F3O%AB5%87%C0%8B%FF%2C%E7%7F%5E%00%90e%A3%DD%CA%AAG%A4%93eb3%87%3B%1F%8F%87%1Fu7h%2B0%FB%8A%81xM%8BWY%83FA%9A%E6%C7%0B%85%0FH%5D%C4%141%05%3B%AA%E4%EE%92%24%EF%D6%FD%C6%1B%94%04%3B%01l%83%CDJ%C2%0B%80%C8%FCD%B2%8E%B9h%0Fxk%BB%E4%17%FF%F9%C6%0D%F0%0D%BA%A9F%FB%14G%C1%19%00%00%00%00IEND%AEB%60%82") !important;
	-moz-image-region: rect(0,16px,16px,0) !important;
}
tab[selected="true"] .tab-close-button,   .tabs-closebutton,   tab:hover .tab-close-button,   #find-closebutton {
}
tab .tab-close-button:hover,   .tabs-closebutton:hover,   #find-closebutton:hover {
}
/*===============================================
  CUSTOM NEW TAB BUTTON
  ===============================================*/
#main-window .tabbrowser-tabs .tabs-newtab-button {
	list-style-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%00.IDAT8%8Dc%60%18%05x%C1%7F%28%C0%A7%86%89RK%286%80%11%5D%80%90%93%19%19%19Q%F4P%EC%02%BC%60h%04%E2%28%60%60%00%00b%3C%13%FC%EA%AB%8D1%00%00%00%00IEND%AEB%60%82") !important;
	background: transparent !important;
	margin-left: -20px !important;
	border: transparent !important;
	border-top: transparent !important;
	border-left: transparent !important;
	border-right: transparent !important;
}
#main-window .tabbrowser-tabs .tabs-newtab-button:hover {
	list-style-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%00.IDAT8%8Dc%60%18%05x%C1%7F%28%C0%A7%86%89RK%286%80%11%5D%80%90%93%19%19%19Q%F4P%EC%02%BC%60h%04%E2%28%60%60%00%00b%3C%13%FC%EA%AB%8D1%00%00%00%00IEND%AEB%60%82") !important;
}
/* hide urlbars stop/reload/go buttons */
#urlbar-container #urlbar-reload-button,  #urlbar-container #urlbar-go-button,  #urlbar-container #urlbar-stop-button {
	visibility: collapse !important;
}
/*===============================================
  CHANGES MENU BUTTON'S IMAGE
  ===============================================*/
#PanelUI-menu-button {
	list-style-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%009IDAT8%8Dc%60%A0%1002000TT%B4%0B%92%A3%B9%A3%A3%F2%3DciES%0A%03%23%E3l%B2%AC%FF%FF%3F%95%89%2C%8D%83%0A%8C%06"%15%C0h%20R%01%00%00%E2%86%1A%86%C2%C8%D8%A4%00%00%00%00IEND%AEB%60%82') !important;
	-moz-image-region: rect(0,16px,16px,0) !important;
	background: transparent !important;
	border: transparent !important;
	border-top: transparent !important;
	border-left: transparent !important;
	border-right: transparent !important;
}
#PanelUI-menu-button:hover:not([disabled="true"]) {
	-moz-image-region: rect(0,16px,16px,0px) !important;
	background: transparent !important;
	border: transparent !important;
	border-top: transparent !important;
	border-left: transparent !important;
	border-right: transparent !important;
}
#PanelUI-menu-button[open] {
	list-style-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%00%3AIDAT8%8Dc%60%A0%1002000444p%91%A3%B9%A1%A1%E1%1Bcyy%8B%CD%3Ff%86Xr%0C%60%FA%CB%B0%98%89%1C%8D%83%0B%8C%06"%15%C0h%20R%01%00%00l%A5%1A%17%2A%AE_%A5%00%00%00%00IEND%AEB%60%82') !important;
	-moz-image-region: rect(0,16px,16px,0px) !important;
	background: transparent !important;
	border: transparent !important;
	border-top: transparent !important;
	border-left: transparent !important;
	border-right: transparent !important;
}
#PanelUI-button {
	list-style-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0D%D7%00%00%0D%D7%01B%28%9Bx%00%00%00%19tEXtSoftware%00www.inkscape.org%9B%EE%3C%1A%00%00%009IDAT8%8Dc%60%A0%1002000TT%B4%0B%92%A3%B9%A3%A3%F2%3DciES%0A%03%23%E3l%B2%AC%FF%FF%3F%95%89%2C%8D%83%0A%8C%06"%15%C0h%20R%01%00%00%E2%86%1A%86%C2%C8%D8%A4%00%00%00%00IEND%AEB%60%82') !important;
	width: 0px !important;
	margin-left: -6px !important;
	margin-right: 3px !important;
	background: none !important;
}
/*===================================================================
  HIDES PLUGINS NOTIFICATION ICON THAT MAY CHANGE ADDRESS BAR'S HEIGHT  
  ====================================================================*/
#plugins-notification-icon {
	display: none !important;
}
/*===================================================================
  HIDES BACKGROUND EFFECT ON HOVER AND ACTIVE MENU BUTTON  
  ====================================================================*/
.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-container {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
原文链接:,转发请注明来源!
0 0

发表评论

  • 评论5则,共1页,当前第1
    • nana222

      请问站长的字体渲染用的什么形式?很漂亮!另,新建标签页样式能否共享下?很是喜欢呢

      0 0 Firefox 42.0 Firefox 42.0 Windows 10 x64 Edition Windows 10 x64 Edition回复
      • 1、字体没有渲染过,是文中所发的CSS控制的,上文中的CSS里有定义,搜索:font-family
        2、新建标签页按钮样式在上文中的CSS中也找的到 那一段就是。