279 lines
		
	
	
		
			5.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			279 lines
		
	
	
		
			5.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| :root{ 
 | |
|   --dark-0: #1A1E28;
 | |
|   --dark-base: #1F2430;
 | |
|   --dark-1: #2A3141;
 | |
|   --dark-2: #323A4E;
 | |
|   --dark-3: #424D67;
 | |
|   --dark-4: #4A5673;
 | |
|   --light-0: #E8E7E3;
 | |
|   --light-base: #CCCAC2;
 | |
|   --light-1: #C3C0B7;
 | |
|   --light-2: #B9B7AC;
 | |
|   --light-3: #B0ADA0;
 | |
|   --light-4: #A7A395;
 | |
|   --accent: #FFCC66;
 | |
|   --yellow: #695380;
 | |
|   --green: #D5FF80;
 | |
|   --red: #f28779;
 | |
|   --extension-icon-mask: grayscale(85%) invert(30%) sepia(13%) saturate(1019%) hue-rotate(184deg) brightness(95%) contrast(96%);
 | |
| }
 | |
| 
 | |
| :root.incognito{ 
 | |
|   --dark-0: #1C0E34;
 | |
|   --dark-base: #20103c;
 | |
|   --dark-1: #2F1D4E;
 | |
|   --dark-2: #38225D;
 | |
|   --dark-3: #4A2D7B;
 | |
|   --dark-4: #53338A;
 | |
|   --light-0: #CC6B9C;
 | |
|   --light-base: #B9407C;
 | |
|   --light-1: #AB3B73;
 | |
|   --light-2: #9C3569;
 | |
|   --light-3: #8D305E;
 | |
|   --light-4: #7D2B54;
 | |
|   --accent: #e9207e;
 | |
|   --yellow: #C9B336;
 | |
|   --green: #36C987;
 | |
|   --red: #C9365D;
 | |
|   --extension-icon-mask: grayscale(85%) invert(17%) sepia(33%) saturate(3632%) hue-rotate(245deg) brightness(92%) contrast(90%);
 | |
| }
 | |
| 
 | |
| 
 | |
| :root{
 | |
|     --tab-border-radius: 7px; /* border radius of tabs */
 | |
|     --animation-duration: 200ms; /* duration of different animations [0s: turn all animations off] */
 | |
|     --spacing: 14px; /* spacing between tabs. [<15px: compact tabs] */
 | |
|     --distance-from-edge: 10px; /* distance between tabs, and left-right edges of sidebar*/
 | |
|     --hover-text-spacing: 0.1; /* should be left alone. with hover sidebar, if text is visible in collapsed status, increase this */
 | |
| 
 | |
|     --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
 | |
|     --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 | |
|     --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 | |
| 
 | |
|     --collapsed-width: 60px;
 | |
| }
 | |
| 
 | |
| /************UNCUSTOMIZED CSS************/
 | |
| #tabbar-container #tabbar{
 | |
|    margin-bottom: 15px !important;
 | |
| }
 | |
| 
 | |
| :root, #background{
 | |
|     background:  var(--dark-base) !important;
 | |
| }
 | |
| 
 | |
| #all-tabs{
 | |
|    margin: 10px var(--distance-from-edge);
 | |
| }
 | |
| 
 | |
| tab-item:not(.collapsed) {
 | |
|     margin-top: var(--spacing);
 | |
|     border-radius: var(--tab-border-radius);
 | |
|     border: none !important;
 | |
|     padding-top: 9px;
 | |
|     padding-bottom: 10px;
 | |
| }
 | |
| 
 | |
| tab-item.collapsed{
 | |
|     height: 0;
 | |
|     margin: 0 !important;
 | |
|     padding: 0 !important;
 | |
| }
 | |
| 
 | |
| tab-item:not([data-level="0"]):not(.pinned){
 | |
|     border-left: dashed 2px var(--light-4) !important;
 | |
|     border-top-left-radius: 0;
 | |
|     border-bottom-left-radius: 0;
 | |
|     margin-top: calc(var(--spacing)/2);
 | |
| }
 | |
| 
 | |
| tab-item tab-favicon{
 | |
|     left: 0;
 | |
|     filter: var(--extension-icon-mask);
 | |
|     transition: left calc(var(--animation-duration)*2) var(--ease-out);
 | |
| }
 | |
| 
 | |
| .highlighter {
 | |
|     display: none !important;
 | |
| }
 | |
| 
 | |
| tab-item .label {
 | |
|     color: var(--light-2) !important;
 | |
|     padding-bottom: 2px;
 | |
| }
 | |
| 
 | |
| 
 | |
| tab-item .twisty:before{
 | |
|    background: var(--light-3) !important;
 | |
| }
 | |
| 
 | |
| tab-item.active .label {
 | |
|     color: var(--light-0) !important;
 | |
| }
 | |
| 
 | |
| tab-item.active {
 | |
|     background: var(--dark-3) !important;
 | |
| }
 | |
| 
 | |
| 
 | |
| tab-item:not(.active).highlighted{
 | |
|     background: var(--dark-1) !important;
 | |
| }
 | |
| 
 | |
| tab-item:not(active):hover {
 | |
|     background: var(--dark-1);
 | |
| }
 | |
| 
 | |
| tab-item:hover tab-closebox {
 | |
|     right: 10px;
 | |
|     opacity: 1;
 | |
| }
 | |
| 
 | |
| tab-item:not(pinned) tab-closebox {
 | |
|     position: absolute;
 | |
|     margin-top: 2px;
 | |
|     height: 20px;
 | |
|     width: 20px;
 | |
|     right: -30px;
 | |
|     border-radius: 50%;
 | |
|     padding-top: 2px;
 | |
|     padding-left: 2px;
 | |
|     background: var(--light-4);
 | |
|     transition   : all var(--animation-duration) var(--ease-out);
 | |
| }
 | |
| 
 | |
| .sound-button:after {
 | |
|     background: var(--light-3) !important;
 | |
|     margin-top: 2px;
 | |
| }
 | |
| 
 | |
| .counter{
 | |
|     color: var(--light-4) !important;
 | |
|     background: var(--dark-2) !important;
 | |
|     border-radius: 7px;
 | |
|     margin: 2px 2px 0px 0px;
 | |
|     padding: 0 4px;
 | |
|     padding-bottom: 2px;
 | |
|     order: -2 !important;
 | |
| }
 | |
| 
 | |
| .counter:before, .counter:after{ content: ""}
 | |
| 
 | |
| /********LEFT CONTENT TAB(static)*************/
 | |
| 
 | |
| :root.left tab-item{
 | |
|     padding-left: 0;
 | |
| }
 | |
| 
 | |
| :root.left tab-item tab-favicon {    
 | |
|     transform: scale(120%);
 | |
|     margin-right: 5px;
 | |
|     left: 80%;
 | |
| }
 | |
| 
 | |
| :root.left tab-item .label {
 | |
|     transform: translateX(10px);
 | |
|     right: 28%;
 | |
| }
 | |
| 
 | |
| 
 | |
| :root.left tab-item[data-child-ids] .twisty{
 | |
|     margin-right: 5px;
 | |
| }
 | |
| 
 | |
| /********RIGHT CONTENT TAB(hover)*************/
 | |
| 
 | |
| :root.right tab-item .label {
 | |
|     margin-left: 10px;
 | |
|     margin-right: calc(var(--collapsed-width)*0.3) !important;
 | |
| }
 | |
| 
 | |
| :root.right tab-item:not(pinned):hover tab-closebox{
 | |
|     right: calc(var(--collapsed-width)*0.3);
 | |
| }
 | |
| 
 | |
| :root.right tab-item:not([data-level="0"]):not(.pinned){
 | |
|     border: none !important;
 | |
|     border-right: dashed 2px var(--light-4) !important;
 | |
|     border-radius: var(--tab-border-radius);
 | |
|     border-top-right-radius: 0;
 | |
|     border-bottom-right-radius: 0;
 | |
| }
 | |
| 
 | |
| :root.right tab-item.active:not([data-level="0"]):not(.pinned){
 | |
|    margin-right: 5px !important;
 | |
| }
 | |
| 
 | |
| :root.right .sound-button{
 | |
|     order: -1 !important;
 | |
| }
 | |
| 
 | |
| :root.right tab-item.active.pinned {
 | |
|     position: relative;
 | |
|     left: 190px !important;
 | |
| }
 | |
| 
 | |
| :root.right tab-item.active.pinned tab-favicon {
 | |
|     transform: scale(130%) !important;
 | |
|     margin-left: 7px;
 | |
| }
 | |
| 
 | |
| /***********************************/
 | |
| 
 | |
| .tab
 | |
|     .favicon
 | |
|     .favicon-default::before {
 | |
|     filter: var(--extension-icon-mask); // change for light theme
 | |
| }
 | |
| 
 | |
| .tab[data-current-favicon-uri="undefined"]
 | |
|     .favicon
 | |
|     .favicon-default::before{
 | |
|     background: url("chrome://branding/content/identity-icons-brand.svg") no-repeat center !important;
 | |
|     mask: none !important;
 | |
| }
 | |
| 
 | |
| /***********NEW TAB BUTTON**********/
 | |
| 
 | |
| .newtab-button-box {
 | |
|     border: none !important;
 | |
|     margin: 0 50px;
 | |
| }
 | |
| 
 | |
| .newtab-button {
 | |
|     border: none !important;
 | |
|     border-radius: 8px;
 | |
|     padding: 8px 0 !important;
 | |
|     margin: 0 5px;
 | |
| }
 | |
| 
 | |
| .newtab-button::before{
 | |
|    background: var(--light-3) !important;
 | |
| }
 | |
| 
 | |
| .newtab-action-selector-anchor {
 | |
|     border: none !important;
 | |
|     margin-right: 10px;
 | |
|     margin-top: 3px;
 | |
| }
 | |
| 
 | |
| .newtab-button:hover {
 | |
|     background: var(--dark-1);
 | |
| }
 | |
| 
 | |
| /**********PINNED TAB***************/
 | |
| 
 | |
| tab-item.pinned {
 | |
|     margin: 5px !important;
 | |
|     padding: 5px !important;
 | |
|     transition   : all 0.1s var(--ease-out);
 | |
| }
 | |
| 
 | |
| /***********************************/
 | |
| 
 | |
| #all-tabs {
 | |
|     border: none !important;
 | |
| }
 | |
| 
 | |
|     
 |