Nur mal aus Neugierde naiv gefragt: Dieses CSS von MrOtherGuy erlaubt das Verschieben von Tabs nicht, was wohl JS benötigt.
Du kannst dir das ja mal anschauen, denn den css-Code von ihm (?) habe ich auch verändert. Zum Verschieben in Verbindung mit dem Script aus #1116.
CSS
/* =========================================================
GRUNDEINSTELLUNGEN
========================================================= */
:root{
--multirow-n-rows: 2; /* Maximale Anzahl sichtbarer Reihen */
--multirow-tab-min-width: 250px; /* Kleinste Tab-Breite */
--multirow-tab-max-width: 350px; /* Größte Tab-Breite */
--multirow-tab-height: 27px; /* Sichtbare Tab-Höhe */
--multirow-tab-top-margin: 0px; /* Oberer Abstand pro Tab */
--multirow-tab-bottom-margin: 0px; /* Unterer Abstand pro Tab */
--multirow-row-gap: 2px; /* Abstand zwischen Reihen */
--multirow-tab-total-height: calc(
var(--multirow-tab-height) +
var(--multirow-tab-top-margin) +
var(--multirow-tab-bottom-margin)
);
--proton-tab-radius: 0px;
--proton-tab-block-margin: 0px;
--inline-tab-padding: 5px;
--scrollbutton-display-model: none;
}
/* =========================================================
MULTIROW-TABS
========================================================= */
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0 !important;
padding-inline-end: 0 !important;
margin-top: 1px !important;
margin-inline-end: 0 !important;
}
#tabbrowser-tabs[orient="horizontal"]{
min-height: calc(var(--multirow-tab-total-height)) !important;
justify-content: flex-start !important;
align-content: flex-start !important;
overflow: hidden !important;
}
@-moz-document url(chrome://browser/content/browser.xhtml){
/* Firefox-interne Scrollbuttons ausblenden */
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{
display: none !important;
}
/* Entscheidender Multirow-Block */
scrollbox[part][orient="horizontal"],
scrollbox[part][orient="horizontal"] > slot{
display: flex !important;
flex-wrap: wrap !important;
align-content: flex-start !important;
justify-content: flex-start !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: calc(
(var(--multirow-tab-total-height) * var(--multirow-n-rows)) +
((var(--multirow-n-rows) - 1) * var(--multirow-row-gap))
) !important;
scrollbar-width: thin !important;
scrollbar-color: auto !important;
scrollbar-gutter: auto !important;
padding-inline-end: 0 !important;
margin-inline-end: 0 !important;
border-inline-end: 0 !important;
contain: none !important;
-moz-window-dragging: no-drag !important;
}
/* Clip-Wrapper ebenfalls ohne rechten Versatz */
box.scrollbox-clip[orient="horizontal"]{
padding-inline-end: 0 !important;
margin-inline-end: 0 !important;
border-inline-end: 0 !important;
overflow: visible !important;
-moz-window-dragging: no-drag !important;
}
/* Scrollbar selbst nicht als Fensterzugfläche behandeln */
#tabbrowser-arrowscrollbox scrollbar,
#tabbrowser-arrowscrollbox scrollbar *{
-moz-window-dragging: no-drag !important;
}
}
#tabbrowser-arrowscrollbox{
overflow-y: auto !important;
overflow-x: hidden !important;
display: block !important;
scrollbar-width: thin !important;
scrollbar-color: auto !important;
scrollbar-gutter: auto !important;
padding-inline-end: 0 !important;
margin-inline-end: 0 !important;
border-inline-end: 0 !important;
-moz-window-dragging: no-drag !important;
}
#tabbrowser-arrowscrollbox-periphery{
margin: 0 !important;
padding: 0 !important;
inset-inline-end: 0 !important;
position: relative !important;
-moz-window-dragging: no-drag !important;
}
.tabbrowser-tab{
height: var(--multirow-tab-height) !important;
min-height: var(--multirow-tab-height) !important;
max-height: var(--multirow-tab-height) !important;
margin-top: var(--multirow-tab-top-margin) !important;
margin-bottom: var(--multirow-tab-bottom-margin) !important;
scroll-snap-align: start;
box-shadow: none !important;
}
/* Drag-Verhalten sauber halten */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[movingtab]{
padding-bottom: 15px !important;
margin-bottom: -15px !important;
}
/* Angeheftete Tabs */
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0 !important;
}
/* Normale Tabs: Breite */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
flex: 1 1 var(--multirow-tab-min-width) !important;
min-width: var(--multirow-tab-min-width) !important;
max-width: var(--multirow-tab-max-width) !important;
width: auto !important;
}
/* Inhalt füllt den Tab */
.tabbrowser-tab > stack{
width: 100%;
height: 100%;
}
/* Buttons und Störer ausblenden */
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{
display: none !important;
}
/* Allgemeine Tabflächen */
.tab-background{
margin-block: unset !important;
}
box.scrollbox-clip[orient="horizontal"]{
display: inline !important;
}
.tab-label-container{
height: unset !important;
}
#tabbrowser-tabs[orient="horizontal"] .tab-background,
#tabbrowser-tabs[orient="horizontal"]{
min-height: unset !important;
}
/* Optional: Split-View */
tab-split-view-wrapper{
min-width: calc(var(--multirow-tab-min-width) * 2 + 6px) !important;
}
/* Optional: Tab-Gruppen */
tab-group[collapsed] .tabbrowser-tab[fadein]:not([pinned]){
min-width: 0 !important;
}
/* =========================================================
TAB-STYLE
Zweck:
- Optische Gestaltung der Tabs
- Farben, Hover, Schrift und Toolbar-Abstände
========================================================= */
/* Tabs ohne Radius */
#TabsToolbar .tabbrowser-tab .tab-background{
border-radius: unset !important;
margin-block: unset !important;
}
/* Nicht sichtbare Tabs / rechter Abschluss */
hbox.titlebar-spacer,
tabs tab:not([fadein]){
display: none !important;
}
/* Aktiver Tab */
#tabbrowser-arrowscrollbox tab.tabbrowser-tab stack.tab-stack vbox.tab-background[selected]{
min-height: var(--multirow-tab-height) !important;
max-height: var(--multirow-tab-height) !important;
background: linear-gradient(45deg, gold, #FFFAF0, beige, #FFFAF0, orange) !important;
margin-left: -2px !important;
margin-right: -2px !important;
border: 1px solid green !important;
outline: none !important;
}
/* Aktiver Tab bei Hover dunkler */
#main-window .tabbrowser-tab[selected]:hover{
opacity: .5 !important;
}
/* Inaktiver Tab */
.tabbrowser-tab:not([selected]){
background: linear-gradient(0.35turn, silver, white, silver) !important;
border: 1px solid grey !important;
}
/* Inaktiver Tab bei Hover */
.tabbrowser-tab:not([visuallyselected]):hover{
background: linear-gradient(8deg, lightblue, white, lightblue) !important;
border: 1px solid blue !important;
}
/* Favicon */
.tabbrowser-tab:not([visuallyselected]) img.tab-icon-image{
margin-top: 0px !important;
margin-left: -1px !important;
}
/* Schließen-Button standardmäßig unsichtbar */
.tab-close-button{
fill: grey !important;
transform: scale(1.5, 1.5) !important;
display: block !important;
opacity: 0 !important;
margin-right: -7px !important;
}
/* Schließen-Button nur bei Hover sichtbar */
.tabbrowser-tab:hover .tab-close-button{
opacity: 1 !important;
color: red !important;
background: none !important;
}
/* Schließen-Button bei inaktiven Tabs leicht verschieben */
.tabbrowser-tab:not([visuallyselected]) .tab-close-button{
margin-top: -2px !important;
}
/* Schließen-Button Position im Tab */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button{
flex-shrink: 0 !important;
width: 24px !important;
padding-inline-start: 7px !important;
width: unset !important;
}
/* Tabtext zentrieren */
.tab-label-container{
height: unset !important;
display: grid !important;
justify-items: safe center !important;
justify-content: safe center !important;
}
.tab-label{
justify-content: center !important;
overflow: hidden !important;
}
/* Schrift aktiver Tab */
.tabbrowser-tab[visuallyselected] .tab-label{
color: blue !important;
font-weight: bold !important;
font-size: 1.25em !important;
font-family: "Verdana, Helvetica", serif !important;
font-style: italic !important;
padding-bottom: 0 !important;
}
/* Schrift inaktiver Tab */
.tabbrowser-tab:not([visuallyselected]) .tab-label{
color: #4a525f !important;
font-weight: 600 !important;
font-size: 1.1em !important;
padding-bottom: 0px !important;
}
/* Inaktiver Tab bei Hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-label{
color: brown !important;
font-weight: 700 !important;
font-size: 1.1em !important;
opacity: 1 !important;
}
/* Tabtext beim Laden blau */
.tabbrowser-tab[busy] .tab-label{
color: blue !important;
}
/* Nav-Bar mit Hintergrund und Rand */
#nav-bar{
appearance: none !important;
background-image: none !important;
background-color: #C2D3ED !important;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
box-shadow: none !important;
margin-top: 3px !important;
}
/* Abstand Lesezeichen-Symbolleiste zur URL-Bar */
#PersonalToolbar{
margin-top: 3px !important;
}
/* Abstand TabsToolbar zur Menü-Bar / Personal-Toolbar */
#TabsToolbar{
margin-top: 2px !important;
margin-bottom: -1px !important;
padding-top: 0 !important;
}
/* Menubar-Anpassung */
#main-menubar{
margin-top: 3px !important;
}
/*===== New-Tab-Button =====*/
/* Zeilen 126 und 127 auskommentiert */
/* Weite für newtab-button */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button){
min-width: 0px !important;
width: 22px !important;
height: 22px !important;
margin-top: 3px !important;
margin-left: 4px !important;
}
/* Größe des neuen Tab-Tabs „+“-Symbol */
#TabsToolbar :is(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon{
min-width: 0px !important;
min-height: 0px !important;
width: 14px !important;
height: 14px !important;
margin: 0px !important;
margin-bottom: 0px !important;
padding: 0px !important;
background: unset !important;
box-shadow: unset !important;
}
#TabsToolbar #tabs-newtab-button:hover {
background-color: #FFF !important;
padding: 0px !important;
}
/* das Plus-Zeichen */
#TabsToolbar #tabs-newtab-button > image {
min-height: 24px !important;
max-height: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
margin-top: 1px !important;
margin-left: 0px !important;
padding: 2px !important;
fill: grey !important;
}
#TabsToolbar #tabs-newtab-button:hover > image {
fill: red !important;
}
/*===== New-Tab-Button ** ENDE =====*/
/* ==================================================================
TABLEISTEN-POSITION
Zweck:
- order 1: oben über der Menüleiste
- order 2: unter der Menüleiste
- order 3: unter der Navigationsleiste
- order 4: unter der Personal-Symbolleiste
Hinweis:
- Immer alle vier Leisten zusammen anpassen (keine doppelte order)
================================================================= */
/* Navigator-Toolbox als Flexcontainer sicherstellen */
#navigator-toolbox {
display: flex !important;
flex-direction: column !important;
}
/* Menüleiste */
#toolbar-menubar {
order: 1 !important;
}
/* Navigationsleiste */
#nav-bar {
order: 2 !important;
}
/* Lesezeichen-Symbolleiste */
#PersonalToolbar {
order: 3 !important;
}
/* Tableiste */
#TabsToolbar {
order: 4 !important;
}
