136 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			136 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* ROOT */
 | |
| 
 | |
| #root {
 | |
|   /* Tab and PinnedTab height adjustment */
 | |
|   --tabs-height: 33px;
 | |
|   --tabs-pinned-height: var(--tabs-height);
 | |
|   /* Dark Theme base settings */
 | |
|   --bg: #1f2430 !important;
 | |
|   --tabs-fg: #d4d4d4 !important;
 | |
|   --tabs-bg-hover: #3b3948 !important;
 | |
|   --tabs-activated-bg: #5b5b66 !important;
 | |
|   --nav-btn-activated-bg: #1f222f !important;
 | |
| }
 | |
| 
 | |
| #root .Tab {
 | |
|  --tabs-indent: 7px;
 | |
| }
 | |
| 
 | |
| /* TABS */
 | |
| 
 | |
| .Tab .lvl-wrapper:after {
 | |
|   display: none;
 | |
| }
 | |
| 
 | |
| .Tab {
 | |
| margin: auto;
 | |
|   width: 94%;
 | |
|   border-radius: 3px;
 | |
| }
 | |
| 
 | |
| .Tab .close > svg:hover {
 | |
|   /* Styling the tab close button */
 | |
|   border-radius: 3px;
 | |
|   background: #492121 !important;
 | |
|   opacity: 100%;
 | |
| }
 | |
| 
 | |
| .Tab .title {
 | |
|   overflow: hidden !important;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* PINNED TABS */
 | |
| 
 | |
| .PinnedDock {
 | |
|   background-color: var(--bg) !important;
 | |
| }
 | |
| 
 | |
| .PinnedTab {
 | |
|   margin: 5px 0px 4px 6px;
 | |
|   border-radius: 3px;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* NAV BAR */
 | |
| 
 | |
| .NavigationBar {
 | |
|   height: 41px !important;
 | |
|   padding: 4.5px 0px 0px 4.5px !important;
 | |
|   background-color: #2B2A33 !important;
 | |
|   margin-bottom: 5px;
 | |
| }
 | |
| 
 | |
| .NavigationBar .panel-btn:hover {
 | |
|   border-radius: 3px !important;
 | |
|   background-color: var(--tabs-bg-hover) !important;
 | |
| }
 | |
| 
 | |
| .NavigationBar .panel-btn[data-active="true"] {
 | |
|   border-radius: 3px !important;
 | |
|   background-color: var(--bg) !important;
 | |
| }
 | |
| 
 | |
| .NavigationBar .panel-btn[data-active="true"]:hover {
 | |
|   border-radius: 3px !important;
 | |
|   background-color: var(--tabs-bg-hover) !important;
 | |
| }
 | |
| 
 | |
| .NavigationBar .panel-btn > svg,
 | |
| .NavigationBar .panel-btn > img {
 | |
|   fill: #f2f2f2 !important;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* SIDEBAR HACK PATCHES */
 | |
| 
 | |
| @media (max-width: 50px) {
 | |
|   /* Fix to tab tree identation when minimised */
 | |
|   #root:not(:hover) .Tab {
 | |
|     --tabs-indent: 0px;
 | |
|   }
 | |
| 
 | |
|   .Tab[data-lvl] > div.lvl-wrapper {
 | |
|     right: -2px;
 | |
|   }
 | |
|   
 | |
|   .Tab {
 | |
|     max-width: 34px;
 | |
|   }
 | |
| 
 | |
|   .Tab .fav {
 | |
|     z-index: 1;
 | |
|   }
 | |
| 
 | |
|   .Tab .audio {
 | |
|     z-index: 1;
 | |
|     margin-left: -12px;
 | |
|     height: 26px;
 | |
|   }
 | |
| 
 | |
|   .Tab .title {
 | |
|     display: none;
 | |
|   }
 | |
| 
 | |
|   .PinnedTab {
 | |
|     margin-left: 5px;
 | |
|   }
 | |
| 
 | |
|   .NavigationBar .settings-btn {
 | |
|     display: none;
 | |
|   }
 | |
| }
 | |
| 
 | |
| 
 | |
| /* OPTIONS */
 | |
| 
 | |
| /* Disable these two snippets below to make pinned tabs wrap when minimised */
 | |
| .PinnedDock {
 | |
|   flex-wrap: nowrap! important;
 | |
| }
 | |
| 
 | |
| .PinnedTab {
 | |
|   overflow: hidden !important; 
 | |
|   min-width: var(--tabs-pinned-width) !important;
 | |
| }
 |