276 lines
		
	
	
		
			7.8 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			276 lines
		
	
	
		
			7.8 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); */
 | |
| 
 | |
| @-moz-document url(chrome://browser/content/browser.xul),
 | |
|                url(chrome://browser/content/browser.xhtml)
 | |
| {
 | |
|   /*** TREE STYLE TABS ***/
 | |
|   /* Hide main tabs toolbar */
 | |
|   #TabsToolbar {
 | |
|   	visibility: collapse !important;
 | |
|   }
 | |
|   /* Sidebar min and max width removal */
 | |
| 	:root {
 | |
| 		/* expanded width of the sidebar. 
 | |
|     used for userChrome-static, and hover */
 | |
|     --sidebar-width: 250px;
 | |
|     /* initial width of the sidebar. 
 | |
|     advised not to change since tst css relies on this value*/
 | |
|     --sidebar-collapsed-width: 60px;
 | |
| 	}
 | |
| 
 | |
|   #sidebar-box {
 | |
|       z-index: 1000 !important;
 | |
|       position: relative !important;
 | |
|       min-width: var(--sidebar-collapsed-width) !important;
 | |
|       max-width: var(--sidebar-collapsed-width) !important;
 | |
|   }
 | |
|   
 | |
|   #sidebar-header,
 | |
|   #sidebar-splitter {
 | |
|       display: none !important;
 | |
|   }
 | |
|   
 | |
|   /* inner width = expanded width & move inner to only show initial-width long section */
 | |
|   #sidebar-box #sidebar {
 | |
|       position: absolute !important;
 | |
|       min-width: var(--sidebar-width) !important;
 | |
|       max-width: var(--sidebar-width) !important;
 | |
|       width: var(--sidebar-width) !important;
 | |
|       transform: translateX(calc(var(--sidebar-collapsed-width) - var(--sidebar-width)));
 | |
|       transition: all var(--transition-time) var(--ease-out);
 | |
|   }
 | |
|   
 | |
|   /* move inner to show entire sidebar */
 | |
|   #sidebar-box #sidebar:hover {
 | |
|       transform: translateX(0) !important;
 | |
|       box-shadow: 2px 0 33px -3px var(--sidebar-shadow-color);
 | |
|   }
 | |
|   
 | |
|   #sidebar-box[sidebarcommand="viewBookmarksSidebar"] #sidebar {
 | |
|       transform: translateX(0) !important;
 | |
|       box-shadow: 2px 0 33px -3px var(--sidebar-shadow-color);
 | |
|   }
 | |
|   /* hide sidebar header for tree style tabs sidebar */
 | |
|   #sidebar-box #sidebar-header {
 | |
|       display: none;
 | |
|   }
 | |
|   
 | |
|   #sidebar {
 | |
|       border-right: solid var(--dividers) var(--sidebar-shadow-color) !important;
 | |
|   }
 | |
|   
 | |
|   toolbar {
 | |
|       border: none !important;
 | |
|   }
 | |
| 
 | |
| 	#tabbrowser-arrowscrollbox {
 | |
|     margin: 7px 14px 7px 14px;
 | |
|   }
 | |
|   
 | |
|   .tabbrowser-tab::after {
 | |
|       border: none !important;
 | |
|   }
 | |
|   
 | |
|   .tab-background .tab-line,
 | |
|   .tab-background .tab-bottom-line {
 | |
|       display: none;
 | |
|   }
 | |
|   
 | |
|   tab[selected="true"] > .tab-stack > .tab-background {
 | |
|       background: var(--tl-tab-background-gradient, var(--arrowpanel-dimmed-further)) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([selected="true"]) > .tab-stack:hover > .tab-background {
 | |
|       background: var(--arrowpanel-background) !important;
 | |
|   }
 | |
|   
 | |
|   .tab-stack {
 | |
|       border-radius: 7px;
 | |
|       margin-right: 5px;
 | |
|       overflow: hidden;
 | |
|   }
 | |
|   
 | |
|   .tab-stack .tab-icon-image,
 | |
|   .tab-stack .tab-label-container {
 | |
|       transform: translateX(0px);
 | |
|       transition: all var(--tl-animation-duration) var(--ease-out) !important;
 | |
|   }
 | |
|   
 | |
|   .tab-stack .tab-icon-image {
 | |
|       transition-duration: calc(var(--tl-animation-duration) * 2) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([pinned="true"]) .tab-stack:hover .tab-icon-image {
 | |
|       transform: translateX(-25px) !important;
 | |
|   }
 | |
|   
 | |
|   .tab-stack:hover .tab-label-container {
 | |
|       transform: translateX(-23px) !important;
 | |
|   }
 | |
|   
 | |
|   /* containers */
 | |
|   tab:not([selected="true"]).identity-color-blue > .tab-stack,
 | |
|   tab:not([selected="true"]).identity-color-orange > .tab-stack,
 | |
|   tab:not([selected="true"]).identity-color-green > .tab-stack,
 | |
|   tab:not([selected="true"]).identity-color-pink > .tab-stack{
 | |
|       border-radius: 0 0 7px 7px !important;
 | |
|   }
 | |
|   
 | |
|   tab[selected="true"].identity-color-blue > .tab-stack .tab-label-container,
 | |
|   tab[selected="true"].identity-color-orange > .tab-stack .tab-label-container,
 | |
|   tab[selected="true"].identity-color-green > .tab-stack .tab-label-container,
 | |
|   tab[selected="true"].identity-color-pink > .tab-stack .tab-label-container{
 | |
|      color: #000 !important;
 | |
|   }
 | |
|   
 | |
|   /* blue */
 | |
|   tab[selected="true"].identity-color-blue > .tab-stack > .tab-background{
 | |
|      background: linear-gradient(to right, #3182CE , #0BC5EA) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([selected="true"]).identity-color-blue > .tab-stack > .tab-background{
 | |
|       border-top: solid 4px #63B3ED !important;
 | |
|   }
 | |
|   
 | |
|   /* orange */
 | |
|   tab[selected="true"].identity-color-orange > .tab-stack > .tab-background{
 | |
|      background: linear-gradient(to right, #DD6B20 , #F56565) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([selected="true"]).identity-color-orange > .tab-stack > .tab-background{
 | |
|       border-top: solid 4px #F6AD55 !important;
 | |
|   }
 | |
|   
 | |
|   /* green */
 | |
|   tab[selected="true"].identity-color-green > .tab-stack > .tab-background{
 | |
|      background: linear-gradient(to right, #38A169 , #38B2AC) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([selected="true"]).identity-color-green > .tab-stack > .tab-background{
 | |
|       border-top: solid 4px #68D391 !important;
 | |
|   }
 | |
|   
 | |
|   /* pink */
 | |
|   tab[selected="true"].identity-color-pink > .tab-stack > .tab-background{
 | |
|      background: linear-gradient(to right, #D53F8C , #9F7AEA) !important;
 | |
|   }
 | |
|   
 | |
|   tab:not([selected="true"]).identity-color-pink > .tab-stack > .tab-background{
 | |
|       border-top: solid 4px #F687B3 !important;
 | |
|   }
 | |
|   
 | |
|   
 | |
|   .tab-stack .tab-close-button {
 | |
|       border-radius: 50%;
 | |
|       margin-left: -20px !important;
 | |
|       background: var(--lwt-text-color);
 | |
|       fill: var(--lwt-accent-color) !important;
 | |
|       transform: translateX(30px) !important;
 | |
|       transition: all var(--tl-animation-duration) var(--ease-out) !important;
 | |
|   }
 | |
|   
 | |
|   .tab-stack:hover .tab-close-button {
 | |
|       transform: translateX(0px) !important;
 | |
|   }
 | |
| 
 | |
| #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > 
 | |
| .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]){
 | |
|     display: block !important;
 | |
| }
 | |
|   
 | |
|   /* hide tabs */
 | |
|   .tabbrowser-tab {
 | |
|       display: none;
 | |
|   }
 | |
|   
 | |
|   #tabs-newtab-button {
 | |
|       display: none;
 | |
|   }
 | |
|   
 | |
|   .titlebar-spacer {
 | |
|       display: none !important;
 | |
|   }
 | |
|   
 | |
| 
 | |
|   /*** TAB BAR ***/
 | |
|   /* Ensure tab doesn't show through auto-completion popup */
 | |
|   .tabbrowser-tab { z-index: 0 !important; }
 | |
|   /* Ensure tab "spacers" don't show through the completion window */
 | |
|   #tabbrowser-arrowscrollbox > spacer { z-index: -1 !important; }
 | |
|   #mainPopupSet { z-index: 9999 !important; }
 | |
| 
 | |
|   /* Hide tabbar if only one tab */
 | |
|   @import url(./css/tabs-hide-if-only-one.css);
 | |
| 
 | |
| 
 | |
|   /* Remove the colored overline on the focused tab */
 | |
|   .tabbrowser-tab .tab-line { background: none !important; }
 | |
| 
 | |
|   /* Replace favicon on tabs with close button on mouse hover */
 | |
|   .tabbrowser-tab:not(:hover) .tab-close-button,
 | |
|   .tabbrowser-tab:not([pinned]):hover .tab-icon-image { display: none !important; }
 | |
|   .tabbrowser-tab:not([pinned]):hover .tab-close-button { display:block !important; }
 | |
| 
 | |
|   .tabbrowser-tab:hover .tab-throbber,
 | |
|   .tabbrowser-tab:hover .tab-icon-image,
 | |
|   .tabbrowser-tab:hover .tab-sharing-icon-overlay,
 | |
|   .tabbrowser-tab:hover .tab-icon-overlay,
 | |
|   .tabbrowser-tab:hover .tab-label-container,
 | |
|   .tabbrowser-tab:hover .tab-icon-sound {
 | |
|     -moz-box-ordinal-group: 2 !important;
 | |
|   }
 | |
| 
 | |
|   .tabbrowser-tab .tab-close-button {
 | |
|     margin-left: -2px !important;
 | |
|     margin-right: 4px !important;
 | |
|   }
 | |
| 
 | |
|   .tab-close-button:hover {
 | |
|     fill-opacity: 0 !important;
 | |
|   }
 | |
| 
 | |
|   .tabbrowser-tab::after,
 | |
|   .tabbrowser-tab::before {
 | |
|     border-left: none !important;
 | |
|     border-right: none !important;
 | |
|   }
 | |
| 
 | |
|   .scrollbutton-up[orient="horizontal"]~spacer { border-width: 0px; opacity: 0 }
 | |
| 
 | |
| 
 | |
|   /*** NAV BAR ***/
 | |
|   /* Hide urlbar */
 | |
|   #nav-bar {
 | |
|     position: relative !important;
 | |
|     z-index: 2 !important;
 | |
|     height: 2px !important;
 | |
|     min-height: 2px !important;
 | |
|     margin-bottom: -2px !important;
 | |
|     opacity: 0 !important;
 | |
|     border: none !important;
 | |
|   }
 | |
| 
 | |
|   /* But unfocus it when we invoke it with ctrl+L */
 | |
|   #nav-bar:focus-within {
 | |
|     height: auto !important;
 | |
|     margin-bottom: 0px !important;
 | |
|     opacity: 1 !important;
 | |
|     overflow: show !important;
 | |
|   }
 | |
| 
 | |
|   #urlbar-container {
 | |
|     min-height: 0 !important;
 | |
|   }
 | |
| 
 | |
|   #urlbar {
 | |
|     top: 0 !important;
 | |
|   }
 | |
| 
 | |
|   #urlbar-input-container {
 | |
|     height: 28px !important;
 | |
|   }
 | |
| 
 | |
|   /*** Load local overrides ***/
 | |
|   @import url(./userChrome.local.css);
 | |
| }
 |