In Firefox 91+ it is only possible to override/revert changes coming with the Proton design by using code in userChrome.css.

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/firefox-89-styling-proton-ui.html

The colored line at the top of a tab in the Proton UI indicates the container a tab is in (otherwise, the active tab is denoted just by the different appearance from background tabs). Using the unofficial, community supported userChrome.css workaround, you can move that Container line back to the problem to avoid confusion.

I know it indicates the container in which the tab is. I just want to know if there is some code to display the active tab indicator above the tab. I have moved the container tabs to the bottom using css. The first image at the beginning of my question is just a representation of how it could look like.

Here's one from r/FirefoxCSS that injects a line using the ::before pseudo-element which has a similar behavior to Photon. I have added some explanatory comments and modified the margins:

Note to other readers: This assumes you moved the container/context line to a different position.

/*** Emulate blue tab line from Photon 57-88 UI ***/

/* Set size and position of the bar relative to background */
.tab-background::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px 6px 0;
}
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
  background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
  background-color: color-mix(in srgb, #0a84ff 66%, transparent);
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
  background-color: color-mix(in srgb, currentColor 33%, transparent);
  transform: none;
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  transform: scaleX(.8);
  transition: transform 100ms linear;
}

Source: qaz69wsx comments on How do I put a thin border across the top of the active tab?

.tabbrowser-tab[usercontextid] .tab-context-line {

 margin: 2px 2px 0 !important;
 transform: translateY(var(--tab-min-height));

} .tab-background::before {

 content: "";
 display: block;
 height: 3px;
 margin: -4px 2px 0;

} .tabbrowser-tab[selected] .tab-background::before {

 background-color: #0a84ff;

} .tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {

 background-color: color-mix(in srgb, #0a84ff 66%, transparent);

} .tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {

 transform: scaleX(.8);
 transition: transform 100ms linear;

} .tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {

 background-color: color-mix(in srgb, currentColor 33%, transparent);
 transform: none;

}

This works quite well except when I hover on the tab on the left of the active tab the line disappears.

You can use <pre> before and </pre> after code blocks to prevent them from being interpreted as wikitext.

This works quite well except when I hover on the tab on the left of the active tab the line disappears.

Which line disappears? My variation on the code is working as expected for me, but I don't use the kind of tab separators you have.

Oh sorry my problem some of my other css codes messed up this code. It is working perfectly fine now on a fresh install. Thanks.