- Firefox-Version
- 89.0
- Betriebssystem
- Win10
Hallo,
habe meinen letzten Thread geschlossen, da ich teilweise schon Lösungen gefunden habe.
Mein aktueller Code wäre
CSS
/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
padding-block: 0 !important;
padding-inline-start: 14px !important;
}
#TabsToolbar {
position: absolute !important;
display:block !important;
top: 85px !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
:root {
--tab-min-height: 33px !important;
}
:root #tabbrowser-tabs {
--tab-min-height: 30px !important;
}
.tabbrowser-tab:not([pinned]) {
-moz-box-flex: 0!important;
width: 157px!important;
}in der Vorschau sieht das nun so aus
Nun hätte ich gerne wieder eine 3 Zeilige Tableiste mit Scrollbalken.
Der alte Code hierzu war
CSS
/* Tableiste mehrreihig */
@-moz-document url(chrome://browser/content/browser.xhtml) {
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}
#titlebar,#tabbrowser-tabs {
appearance: none !important;
}
[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}
/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}
tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}
tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}
tab > .tab-stack {
width: 100%;
}
box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}den Schließen-Button im Tab (Kreuz) hätte ich auch gerne wieder ein bissi größer
der alte Code hierzu war
CSS
/************* Tabschliessen-Button ****************/
.tab-close-button.close-icon{
display: -moz-box !important;
width: 20px; height: 20px !important;
border: none !important;
background-color: none !important;
}
.tab-close-button {
color: black !important; /* Farbe des Kreuzes */
} zum Schluß hätte ich gerne den aktiven Tab gerne etwas eingefärbt
mein alter Code hierzu war
CSS
/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,170,1), rgba(255,58,95,1) ), none !important; /* blau */
/*background-image: linear-gradient( rgba(255,255,170,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,170,1), rgba(255,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,255,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
} bisher sah das dann so aus
Habe selber schon viel probiert, bin aber leider mit meinem Latein am Ende.
Vielleicht hat ja jemand eine Lösung für mich.
Wäre sehr dankbar!
LG flax
.
