Can I customize the throbber using CSS?

[silverwings15]

Hi, I've been trying some old css snippets online to customize the throbber (.tab-throbber::before and .tab-throbber[busy]::before) but none of them work as of 5.2.0. i'm trying to replace the default throbber with an external animation, and maybe replace the entire favicon of the loading page with the throbber instead of having it on top of the favicon.

appreciate any help!

[silverwings15]

another question: can i use css to customize the indent of the active tab from the right, like so?

[mbnuqw]

Can I customize the throbber using CSS?

Sure, it has .progress-spinner class. Current styles: tab.styl

can i use css to customize the indent of the active tab from the right, like so?

Try to play with the width of .body, something like .Tab[data-active="true"] .body { width: calc(100% + var(--shift-for-active-tab)); }.

[silverwings15]

@mbnuqw managed to figure out the favicon/throbber thanks to the code you posted in #1586. my setup looks like this now (i think you have to click on the gif for it to play?):

hope you can look into the other issue when you have the chance. thank you very much!

[mbnuqw]

how do i disable the current styles completely

all property

how do i get rid of the transition to the black FF logo that indicates a loading tab?

Not sure what transition did you mean, but you can go to tab.styl and check all transitions here, then use devtools to find appropriate selectors and play with values.

Regarding shifted tab...

Post your full styles, and I'll check what's going on there and how can help

[silverwings15]

this is my current styles

#root.root {--general-border-radius: 8px;}
#root.root {--ctx-menu-fg: whitesmoke;}
#root.root {--tabs-activated-shadow: 0 1px 4px -1px rgba(0,0,0,0.282), inset 0 0 0 1px rgba(255,255,255,0.031);}
#root.root {--tabs-lvl-opacity: 0.16;}
#root.root {--ctx-menu-shadow: 0 0 0 1px rgba(255,255,255,0.086), 0 1px 16px 0 rgba(0,0,0,0.282);}
#root.root {--ctx-menu-separator: black;}
#root.root {--ctx-menu-border-radius: 5px;}
#root.root {--status-notice: #00e9fb;}
#root.root {--tabs-font: sans-serif;}
#root.root {--d-swift: 0.1s;}
#root.root {--tabs-activated-color-layer-opacity: 0.3;}
#root.root {--tabs-color-layer-opacity: 0.4;}
#root.root {--toolbar-height-personal: 38px;}

#root.root {--general-margin: 0.05px;}
#root.root {--tabs-discarded-title-opacity: 0.6;}

/* ----------- Tab title styles ----------- */

/* moves container indicator to the left */
.Tab .ctx { left: 1px; }

.Tab[data-discarded="true"] .title { 
    opacity: 75%;
}

.Tab[data-unread="true"] .title {font-style: italic;}


.Tab[data-pin="true"] .audio {
    top: 12px !important;
    left: 15px !important;
}

.Tab[data-parent="true"] .fav .exp {
 opacity: 0 !important; /* <- Hide parent tree arrow*/
}


/*--Bolds the active tab text--*/
.Tab[data-active="true"] .title {
  font-weight: bold;
  font-size: 13px;}

/*--New throbber--*/

#root .Tab[data-loading="true"] .fav > .fav-icon {
  opacity: 0;
}
#root .Tab[data-loading="true"] .fav {
  opacity: 1;
}
.Tab[data-loading="true"] .fav:before {
  content: url("https://i.imgur.com/qnTQWIM.png");
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 1rem;
  line-height: 16px;
  text-align: center;
}

/*--Hide default throbber--*/
.Tab .progress-spinner {
display: none !important;
}

to indent the active tab from the right, i use the following code in TST:

tab-item.active {
margin-right: 18px !important;
transition: scale 0.2s ease-in-out !important;
}

which indents any active tab a consistent 18px from the right, like so

if i try to replicate this in Sidebery using:

.Tab[data-active="true"] .body { margin-right: 18px; } or

#root.root {--shift-for-active-tab: 180px;}
.Tab[data-active="true"] .body { width: calc(100% + var(--shift-for-active-tab)); }

then it has no effect (last time i tried the second one, it shifted the tab title instead, weird)

if i try

.Tab[data-active="true"] .body { width: 180px; }

then it works, but the effect is not consistent like in TST

[mbnuqw]

Try this:

.Tab[data-active="true"] {
  padding-right: 18px;
}

[silverwings15]

aw yiss, perfecto. thank you very much!!