Changing the colour of the box around tabs when rearranging, amongst others

[Da-Dragon]

Hello folks, I've hit a couple of road blocks when messing around with the custom style rules of TST.

Firstly: how do I change the colour of the bounding box which appears when rearranging the tabs?

Secondly: how do I increase the spacing of the pinned items on top? I have tried changing margin-left of the pinned tab, but this seems to only be a global control that changes the spacing between the pinned elements and the border of the sidebar. Margin-right seemed to affect nothing at all.

Lastly: The indentations seem to be slightly broken. Only the first level of indentation works properly, and implementing the fix that I found in the Q&A section did not help at all.

The Code I have: (if it helps, I based this on FlyingFox, where I removed the changes I did not want)

   margin-bottom: 15px !important;
}

:root, #background{
	background:  var(--dark-base) !important;
 --tab-border-radius: 7px; /* border radius of tabs */
  --spacing: 6px; /* spacing between tabs. [<15px: compact tabs] */
   --distance-from-edge: 10px; /* distance between tabs, and left-right edges of sidebar*/
}

#all-tabs{
   margin: var(--distance-from-edge);
}

tab-item:not(.collapsed):not(.pinned){
    margin-top: var(--spacing);
    border-radius: var(--tab-border-radius);
    height: 25px;
}

.sound-button:after {
    background: var(--light-3) !important;
    margin-right: 5px;
}


tab-item:not(.active):not(.pinned){
    background: var(--dark-0) !important;
 
}

tab-item:not([data-level="0"]):not(.pinned){
   margin-left: 15px;
    margin-top: calc(var(--spacing)/2);
}

tab-item tab-favicon{
    
 	background: var(--light-1);
  	border-radius: 20%;
}


.contextual-identity-marker {
  
  width: 17px !important;
  border-radius: 20%;
   
   
}

.highlighter {
    display: none !important;
}

tab-item .label {
    color: var(--light-2) !important; /* colour of tab text */
    margin-right: 15px;
  
}

tab-item .tab-closebox {
    color: var(--light-0);
}

tab-item.collapsed{
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

tab-item .twisty:before{
   background: var(--light-3) !important;
}

tab-item.active .label {
    color: var(--light-0) !important; /* colour of active tab text*/
}

tab-item.active {
    border-radius: 8px;
background: #2C2F32;
box-shadow: inset 9px 9px 17px var(--shadow-dark),
            inset -9px -9px 17px var(--shadow-light); !important;
}

#tabbar-container #tabbar{
   margin-bottom: 15px !important;
}

tab-item:hover {
    border-radius: 8px;
background: #2C2F32;
box-shadow: inset 9px 9px 17px var(--shadow-dark),
            inset -9px -9px 17px var(--shadow-light);
  
}

tab-item:not(pinned) tab-closebox {
   right: 0;

}



.counter{
    color: var(--light-4) !important;
    border-radius: 7px;
    margin: 2px 2px 0px 4px;
    padding: 0 4px;
    padding-bottom: 2px;
    order: -2 !important;
}

.counter:before, .counter:after{ content: ""}

/********LEFT CONTENT TAB(static)*************/

:root.left tab-item tab-favicon {    
    transform: scale(120%);
    margin-right: 5px;
}

:root.left tab-item[data-child-ids] .twisty{
    margin-right: 0px;
}


/***********NEW TAB BUTTON**********/

.newtab-button {
 	padding-top: 0px;
  border-radius: 8px;
background: var (--dark-base);
box-shadow:  7px 7px 15px var(--shadow-dark),
             -7px -7px 15px var(--shadow-light);
    margin: 0 10px!important;
  padding: 8px 0 !important;
}

.newtab-action-selector-anchor {
    border: none !important;
    margin-right: 10px;
    margin-top: 3px;
}

.newtab-button:hover {
    border-radius: 8px;
background: var (--dark-base);
box-shadow: inset 7px 7px 15px var(--shadow-dark),
            inset -7px -7px 15px var(--shadow-light);
  padding: 8px 0 !important;
}


/**********PINNED TAB***************/



tab-item.pinned {
   
    margin-left:5px;
  border-radius: 8px;
	background: var(--dark-0);
	margin-right: var(--spacing);
  
}


/***********************************/

#all-tabs {
   
}

/***********************************/

:root{ 
  --dark-base: #2C2F32; /* background */
  --dark-0: #393D41;
  --dark-1: #000000; /* non-selected tab */
  --dark-2: #FF000000;
  --dark-3: #696969; /* active tab */
  --dark-4: #242528;
  --light-0:#FFFFFF; /* selected tab text */
  --light-base: #afc0d5;
  --light-1: #DEEAF6;
  --light-2: #9E9E9E; /* tab text */
  --light-3: #87A0C0; /* dropdown */
  --light-4: #7996B9;
  --shadow-dark: #1a1c1e;
  --shadow-light:#3e4246;
  --accent: #FF0000
  --yellow: #dbc074;
  --green: #5cb8a7;
  --red: #c94f6d;
  --extension-icon-mask: grayscale(85%) invert(75%) sepia(8%) saturate(862%) hue-rotate(173deg) brightness(88%);
}

Thanks

[irvinm]

For the border of the dragged tab, it is simply a less transparent copy of the original tab so it isn't a separate property. However, you could change the border of the tab only when you are dragging it by using the css below. Both the tab and the moving tab will get the updated border only when dragging. Customize to your liking.

tab-item.dragging tab-item-substance {
  border: solid 3px var(--active-border-color) !important;
}

As for the pinned tabs spacing, you should read this comment: #2105 (comment)

For the last item on the indentation, I assume that problem isn't there if you remove the CSS you added to TST? (Is it safe to assume your CSS changes that behavior?) It doesn't look what you pasted is complete either. (The beginning isn't right) In addition, I don't see any references to "tab-item-substance" which was a DOM change that was introduced in 3.8.5 and I am guessing is probably part of the issue. (#2960 (comment))

Oh, I think I found where you started from (Yes? https://github.com/akshat46/FlyingFox/blob/master/treestyletab/custom.css) I see that this was last updated Mar 21, 2021 which was BEFORE the DOM changes were done in 3.8.5 and released on July 6, 2021.

Finally, I do see this CSS is supposed to work with very specific set of configurations laid out here https://github.com/akshat46/FlyingFox/tree/master/treestyletab. They even say that you need to start with the "plain" theme which is no longer part of TST initially. (There are ways to insert that old CSS manually as well) Maybe all of this is to say there might be a fair amount of work to get this to work as it was originally intended. If you wanted to pull just specific sections of the CSS to work maybe we could get it to work.

[Da-Dragon]

Ah, I see. Thank you again for the help you've provided me

Although I do wonder why your tab close button icon is white while mine is black. Is that due to using light mode instead of dark in the browser?

[irvinm]

Yes. If you change Firefox to use the dark theme, the "X" will be white and the light theme will have a dark "X".

[irvinm]

@DragonGaming88 did you have any other questions? If not, can you marked this as answered? Thanks.

[Da-Dragon]

I think that's it.

I don't think it's possible to change the colour of an iframe unless it has those options in its configuration?
The debug menu has exactly zero information on the extension, and so I don't think I can do anything about it. If I'm correct, thanks for your help with the other questions I had, and I'll mark the thread as answered.

[irvinm]

I wasn't able to see a way to change the iframe using TST CSS, but I think that is intentional as the iframe is intended to be independent of the parent. In addition, there isn't a built in way (or options) to change how the subpanel is presented from the other addon.

However, you can use userContent.css to make changes but that involves more steps and isn't necessarily easy to do.

Example: