.... Dafür gibt es keinen :is()-Selektor mehr, der durch die Verschachtelung nicht mehr notwendig ist,
Moment - heisst das :is funktioniert nicht mehr mit Firefox, oder wird der Selektor nur nicht mehr benutzt im CSS Code? 
Ich vermute ja eher Letzteres, wollte aber mal nachfragen.
Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?
.... Der Übersicht halber habe ich oben nur den Code für die hier relevante Lesezeichenleiste eingestellt. Daher macht die Farbgebung von nur dem geposteten Code tatsächlich keinen Sinn.
Dann gibt's dazu nichts weiter zu sagen von meiner Seite - ohne Code kein Brot! (ahem; reimt sich aber 
)
Anscheinend haben sich ein paar Properties geändert für die Bookmark Icons, der Code von weiter oben sollte eine Weile halten.
Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?
Da würde ich gerne helfen, weiss aber nicht was dein Code genau machen soll.
Wenn ich den bei mir reinstelle, macht farblich kaum was Sinn, auch bei verschiedenen Themes.
Man müsste noch wissen welches Theme du benutzt, ob noch anderen CSS Code, oder evtl. Erweiterungen wie Firefox Color.
Den ::part Part hat Milupo ja schon erwähnt.
Aber wenn's jetzt wieder klappt, dann ist ja gut. 
... , funktioniert wie gewünscht.
Den Code würde ich bei Gelegenheit mal überdenken; der ist überladen und unnötig komplex, macht teilweise gar nix oder ist schlicht falsch, und adaptiert sich nicht sauber für viele Themes.
Teste bitte mal:
Code....
Hilfreicher wäre es generell schon, die Lösung auch einfach mit dazu zu anzugeben und kurz tz beschreiben, dann haben auch noch andere was davon.
Den gesamten Codeschlamassel sollte wohl keiner übernehmen.
Falls doch irgendwer noch einen Tipp für mich hat, ...
Du könntest noch sowas hier probieren, ist eine Variante der klassischen Zusatzleiste, davon gibt es hier noch viele weitere Beispiele; der Klassiker ist wohl eine von Aris.
Mit dem Hinzufügen von Links kenne ich mich noch weniger aus als mit dem Rest von Javascript, aber hab mal ein extra Script für zumindest einen Linkbutton gebastelt. Es geht bestimmt eleganter, aber das Forum hier scheint zZ etwas beratungsmüde.
Die Icons hängen unten an, kannst natürlich eigene benutzen; diese Scripts gehen davon aus, dass diese Icons in einem Ordner namens icons im chrome Ordner sind.
Ein Button zum komplett ausblenden ist auch integriert.
//Toggle newtoolbar 7D
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
let toolbox_new = document.createXULElement('toolbox');
toolbox_new.setAttribute('orient','horizontal');
toolbox_new.setAttribute('id','toolbox_new');
let tb = document.createXULElement('toolbar');
let tb_label = "New Toolbar";
tb.id = 'newtoolbar';
tb.setAttribute("collapsed", "false");
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute("toolboxid","navigator-toolbox");
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
toolbox_new.appendChild(tb);
document.getElementById('browser').parentNode.appendChild(toolbox_new);
CustomizableUI.registerArea('newtoolbar', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let buttonicon = "newtoolbar.png"
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'NewToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
};
for(let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
function onClick(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar.classList.toggle("off-mode");
};
const css =`
:root {
--ug-newbar_width: 44px;
--ug-newbar_max_width: 166px;
--ug-newbar_bg_color: lightblue;
--ug-newbar_radius: 8px;
}
#toolbox_new {
position: fixed;
display: flex;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 4 !important;
height: fit-content;
width: fit-content;
}
#newtoolbar {
display: flex;
width: var(--ug-newbar_width);
padding: 4px !important;
background-color: var(--ug-newbar_bg_color) !important;
border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;
transition: width 0.5s ease, margin-left 0.5s ease !important;
}
#newtoolbar:not([customizing]):hover {
width: var(--ug-newbar_max_width);
}
#newtoolbar:not([customizing]).off-mode {
margin-left: calc(0px - var(--ug-newbar_width));
}
#newtoolbar .toolbarbutton-1 {
margin-block: 2px !important;
justify-content: flex-start !important;
}
#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
display: flex !important;
text-align: start !important;
padding-left: 0px !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
#newtoolbar[customizing] {
min-width: var(--ug-newbar_width) !important;
padding-bottom: 48px !important;
background: var(--ug-newbar_bg_color) !important;
}
#customization-content-container {
margin-left: var(--ug-newbar_width) !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();Link Button:
// link button
(function() {
if (location != 'chrome://browser/content/browser.xhtml') return;
try {
CustomizableUI.createWidget({
id: 'Link1_Button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let buttonicon = "google1px.png"
let toolbaritem = aDocument.createXULElement('toolbarbutton');
let props = {
id: 'Link1_Button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
label: 'Google',
tooltiptext: 'Link1_Button Tip',
style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
onclick: 'if (event.button == 0) { \
openTrustedLinkIn("https://www.google.com/", "tab");\
}; '
};
for (let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
})();
Ist es Ihr Ziel, Ihr eigenes vertikales Paneel zu entwerfen...
Genau; die Leisten von Aris kenne ich, sind mir aber zu überfrachtet und unflexibel.
Ich bastle zum xten Mal an einer zusätzlichen Toolbar rum.
Ein wiederkehrendes Problem ist, dass diese Toolbar je nach Konfiguration nicht im Anpassen Fenster angezeigt wird.
Was funktioniert ist zB dieser (sehr grobe Test-) Code; der benutzt document.getElementById('browser').parentNode.appendChild(tb);:
//Toggle newtoolbar
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
setTimeout(function() {
setFunction();
},50);
function setFunction() {
const css =`
#newtoolbar3 {
position: absolute;
display: flex;
top: 310px;
z-index: 444 !important;
left: 0;
min-width: unset !important;
width: 36px;
height: 50%;
max-height: 100% !important;
background-color: powderblue !important;
}
#newtoolbar3.wide-mode {
width: 136px;
background-color: orange !important;
}
#newtoolbar3[customizing] {
background-color: pink !important;
}
#NewToolbar-button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}
var tb = document.createXULElement('toolbar');
var tb_label = "New Toolbar";
tb.id = 'newtoolbar3';
tb.setAttribute("collapsed", "false");
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute("toolboxid","navigator-toolbox");
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
//tb.setAttribute('insertbefore','appcontent');
document.getElementById('browser').parentNode.appendChild(tb);
//document.getElementById('appcontent').parentNode.appendChild(tb);
CustomizableUI.registerArea('newtoolbar3', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createXULElement('toolbarbutton');
var props = {
id: 'NewToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
function onClick(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar3.classList.toggle("wide-mode");
}
})();Was nicht funktioniert für das Anapssen Fenster, ist dieser Code, mit document.getElementById('appcontent').parentNode.appendChild(tb);
//Toggle newtoolbar
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
setTimeout(function() {
setFunction();
},50);
function setFunction() {
const css =`
#newtoolbar3 {
position: absolute;
display: flex;
top: 310px;
z-index: 444 !important;
left: 0;
min-width: unset !important;
width: 36px;
height: 50%;
max-height: 100% !important;
background-color: powderblue !important;
}
#newtoolbar3.wide-mode {
width: 136px;
background-color: orange !important;
}
#newtoolbar3[customizing] {
background-color: pink !important;
}
#NewToolbar-button .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
}
`;
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}
var tb = document.createXULElement('toolbar');
var tb_label = "New Toolbar";
tb.id = 'newtoolbar3';
tb.setAttribute("collapsed", "false");
tb.setAttribute('customizable', true);
tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
tb.setAttribute('orient', 'vertical');
tb.setAttribute('mode', 'icons');
tb.setAttribute("toolboxid","navigator-toolbox");
tb.setAttribute('context', 'toolbar-context-menu');
tb.setAttribute("toolbarname", tb_label);
tb.setAttribute("label", tb_label);
//tb.setAttribute('insertbefore','appcontent');
//document.getElementById('browser').parentNode.appendChild(tb);
document.getElementById('appcontent').parentNode.appendChild(tb);
CustomizableUI.registerArea('newtoolbar3', {legacy: true});
CustomizableUI.registerToolbarNode(tb);
try {
CustomizableUI.createWidget({
id: 'NewToolbar-button',
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var toolbaritem = aDocument.createXULElement('toolbarbutton');
var props = {
id: 'NewToolbar-button',
class: 'toolbarbutton-1 chromeclass-toolbar-additional',
removable: true,
label: 'Toggle New Toolbar',
tooltiptext: 'Toggle New toolbar',
};
for(var p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
document.getElementById('NewToolbar-button').addEventListener( "click", onClick );
function onClick(aEvent, keyEvent=false) {
if(!keyEvent && aEvent.button != 0) {
return;
}
newtoolbar3.classList.toggle("wide-mode");
}
})();Im Prinzip sind mir die Abhängigkeiten unklar, die ein Element im Anpassen Fenster auftauchen lassen und ein anderes nicht; unklar ist mir auch alles was Javascript angeht.
Ideen und Vorschläge willkommen!
Das exakt gleiche Problem habe ich schon lange, mindestens seit einem Jahr; manchmal will die DHL Seite einfach nicht.
Auch nach vielen Versuchen die genaue Ursache zu finden - kein Erfolg.
Es scheint als ob die DHL Website oft ein Problem mit egal welchen vorhandenen Firefox Modifikationen hat, oft aber auch nicht.
Direkte Links zu zB Sendungsverfolgungen funktionieren aber eigentlich immer, auch wenn der Login spinnt.
Hier ist das auf einem Mac.
Aber auch als ich meinen Fehler bemerkte und in meinem Testprofil ohne andern CSS ausprobierte
funktionierte er nicht.
Schade, aber Danke für's probieren!
Und damit?
Die Button fehlen noch immer.
Danke nochmal für's Testen.
Dann muss dafür wohl ein Windows User ran, falls sich jemand interessiert; kann ich wie gesagt leider nicht regeln am Mac...
Das Prinzip zum Verschieben dieser Buttons ist eigentlich einfach, aber auch etwas abhängig vom OS.
Apropos Test, mir ist gerade aufgefallen das unter Windows, wenn die Titelleiste nicht angezeigt wird, die die Button zum Minimieren, Maximieren, Verkleinern und Schleißen nicht angezeigt werden.
Und damit? (Testfarben auch geändert, oben hoffentlich abschaltbar):
/***** Responsive Oneliner Test B *****/
/* uncomment to turn test colors OFF */
/*
:root {
--ug-bg_color: none;
}
*/
/* Tabs bar max width */
#TabsToolbar {
--ug-max_width: 60vw;
}
:root:not([customizing]) #navigator-toolbox {
display: flex !important;
position: relative !important;
flex-direction: row !important;
flex-wrap: wrap !important;
--tabs-navbar-shadow-size: 0px !important;
--toolbarbutton-outer-padding: 0px !important;
}
#PersonalToolbar {
width: 100vw !important;
}
:root:not([customizing]) #nav-bar {
flex-grow: 1 !important;
flex-basis: 0px !important;
--toolbar-start-end-padding: 2px !important;
}
#urlbar-container {
flex-shrink: 1 !important;
min-width: 200px !important;
/*max-width: 520px !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* Url popup width */
#urlbar[breakout][breakout-extend] {
width: 400px !important;
/*right: 0 !important;
left: auto !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* url container left */
/*
#urlbar-container {
order: -1 !important;
}
*/
#TabsToolbar {
background-color: var(--toolbar-bgcolor) !important;
--toolbarbutton-inner-padding: 8px !important;
--ug-button_width:
calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
--ug_contain: initial;
padding-inline: 12px 2px !important;
}
:root[uidensity="compact"] #TabsToolbar {
--toolbarbutton-inner-padding: 6px !important;
}
@media screen and (max-width: 1300px) {
#TabsToolbar {
--ug-max_width: 40vw;
}
}
/** fix tab width jump when tab content changes **/
:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
width: 205px;
}
/** control tab overflow, currently needs new tab button in tabs bar on the right **/
.scrollbox-clip[orient="horizontal"] {
contain: var(--ug_contain, initial) !important;
}
#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
max-width: var(--ug-max_width) !important;
}
#tabbrowser-tabs[hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
/** fix tab bar width jump when hitting overflow **/
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}
@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
}
}
#tabs-newtab-button {
padding-left: 2px !important;
}
.titlebar-spacer {
display: none !important;
}
/** window control buttons right / position for Mac **/
@media (-moz-platform: macos) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important; top: 0 !important;
right: 0 !important;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
z-index: 3 !important;
padding-inline: 2px 16px !important;
}
#TabsToolbar .titlebar-buttonbox {
margin-inline: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(72px + 0px) !important;
}
}
/** window control buttons right / position for Windows ?? **/
@media (-moz-platform: windows) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important;
top: 0 !important;
right: 0 !important;
z-index: 3 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(138px + 0px) !important;
}
}
/* window control buttons off Test */
/*
.titlebar-buttonbox-container {
display: none !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: 12px !important;
}
*/
/* test colors */
#PersonalToolbar {
outline: 2px solid var(--ug-bg_color, grey) !important;
outline-offset: -2px !important;
}
#nav-bar {
outline: 2px solid var(--ug-bg_color, powderblue) !important;
outline-offset: -2px !important;
}
#TabsToolbar {
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important;
}Funktioniert hier im hellen Theme soweit ohne Probleme, leider zu viel Nacharbeit für das dunkle Theme.
Hmm, das mit den Testfarben ist wohl nicht so ganz ausgegoren....
Der Code sieht eigentlich keine Farbänderungen vor, ist nur für besseren Überblick beim Testen.
Vielen Dank für den Test!
Wie bekomme ich die Tableiste & die "Navbar" auf eine Leiste?
In meinem Testprofil sind beide Leisten jeweils getrennt.
Oje, erster Test schonmal daneben gegangen - Oneliner kein Oneliner .... 
Kein anderer CSS Code, keine Scripts, nur im Testprofil?
Und hättest Du evtl. einen Screenshot?
Danke für die Antwort.
Ich bastle seit einiger Zeit immer mal wieder an einem kleinen Oneliner CSS Code rum, und es würde mich interessieren was Ihr generell davon haltet - und, noch wichtiger, ob das Ding bei euch halbwegs funktioniert.
Die Idee dahinter ist, dass die Tableiste sich bis zu einer bestimmten Breite, bzw. einer bestimmten Anzahl an Tabs, verbreitert, den Raum aber wieder frei gibt sobald genügend Tabs geschlossen sind.
Die Navbar passt sich entsprechend in der Breite an, und füllt jeweils den kompletten verbleibenden Raum; im Gegensatz dazu kenne ich nur Oneliner welche eine feste Breite für die beiden Bestandteile - Navbar und TabLeiste - benutzen.
Kann natürlich gut sein ich habe was verpasst.
Fall jemand Lust hat, wäre es prima wenn ihr den Code mal kurz in ein Testprofil werfen könntet; ich bin hier momentan auf Mac und 115esr festgenagelt, da kann ich nur begrenzt testen.
Speziell die Window Control Buttons kann ich am Mac eh nicht testen; würde mich interessieren wie das so passt oder auch nicht, auch in Vollbild und mit/ohne Titelleiste aktiv.
Ein weiterer Aspekt - bei maximaler Tableistenbreite darf sich deren Breite nicht dann ändern, wenn der Overflow ansetzt, und unabhängig davon ob der Neuer Tab Button oder der Alltabs Button vorhanden sind.
Momentan klappt das nur sauber, wenn der Neuer Tab Button da ist und rechts der Tabs sitzt; das ist nur eine unnötig verwirrende Kleinigkeit, hat aber gedauert bis ich zumindest die Ansätze korrekt hatte.
Hier dann der Code; Kommentare sehr willkommen.
Es ist ein Testcode, also nicht besonders sauber; Testfarben lassen sich ganz oben abschalten:
/***** Responsive Oneliner Test A *****/
/* uncomment to turn test colors OFF */
/*
:root {
--ug-bg_color: none;
}
*/
/* Tabs bar max width */
#TabsToolbar {
--ug-max_width: 60vw;
}
:root:not([customizing]) #navigator-toolbox {
display: flex !important;
position: relative !important;
flex-direction: row !important;
flex-wrap: wrap !important;
--tabs-navbar-shadow-size: 0px !important;
--toolbarbutton-outer-padding: 0px !important;
}
#PersonalToolbar {
width: 100vw !important;
}
:root:not([customizing]) #nav-bar {
flex-grow: 1 !important;
flex-basis: 0px !important;
--toolbar-start-end-padding: 2px !important;
}
#urlbar-container {
flex-shrink: 1 !important;
min-width: 200px !important;
/*max-width: 520px !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* Url popup width */
#urlbar[breakout][breakout-extend] {
width: 400px !important;
/*right: 0 !important;
left: auto !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* url container left */
/*
#urlbar-container {
order: -1 !important;
}
*/
#TabsToolbar {
background-color: var(--toolbar-bgcolor) !important;
--toolbarbutton-inner-padding: 8px !important;
--ug-button_width:
calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
--ug_contain: initial;
padding-inline: 12px 2px !important;
}
:root[uidensity="compact"] #TabsToolbar {
--toolbarbutton-inner-padding: 6px !important;
}
@media screen and (max-width: 1300px) {
#TabsToolbar {
--ug-max_width: 40vw;
}
}
/** fix tab width jump when tab content changes **/
:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
width: 205px;
}
/** control tab overflow, currently needs new tab button in tabs bar on the right **/
.scrollbox-clip[orient="horizontal"] {
contain: var(--ug_contain, initial) !important;
}
#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
max-width: var(--ug-max_width) !important;
}
#tabbrowser-tabs[hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
/** fix tab bar width jump when hitting overflow **/
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}
@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
}
}
#tabs-newtab-button {
padding-left: 2px !important;
}
.titlebar-spacer {
display: none !important;
}
/** window control buttons right / position for Mac **/
@media (-moz-platform: macos) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
top: 0 !important;
right: 0 !important;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
z-index: 3 !important;
padding-inline: 2px 16px !important;
}
#TabsToolbar .titlebar-buttonbox {
margin-inline: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(72px + 0px) !important;
}
}
/** window control buttons right / position for Windows ?? **/
@media (-moz-platform: windows) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
top: 0 !important;
right: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(138px + 0px) !important;
}
}
/* window control buttons off Test */
/*
.titlebar-buttonbox-container {
display: none !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: 12px !important;
}
*/
/* test colors */
#PersonalToolbar {
background-color: var(--ug-bg_color, hsla(200, 45%, 87%, 1)) !important;
}
#nav-bar {
background-color: var(--ug-bg_color, hsla(120, 50%, 85%, 1)) !important;
}
#TabsToolbar {
background-color: var(--ug-bg_color, hsla(50, 80%, 82%, 1)) !important;
}
.tabbrowser-tab .tab-background {
background-color: hsla(0, 0%, 90%, 1) !important;
background-image: none !important;
outline: 1px solid hsla(0, 0%, 70%, 1) !important;
outline-offset: -0px !important;
box-shadow: none !important;
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover) .tab-background {
background-color: hsla(0, 0%, 80%, 1) !important;
outline-offset: -1px !important;
}
/**** Extra stuff ****/
/* test border between tabs / navbar OFF */
#TabsToolbar {
/*border-image: linear-gradient(to right, darkblue, darkorchid) 1 / 0 4px 0 0 !important;*/
/*box-shadow: 10px 0px 12px 0 rgba(255, 0, 0, 1),
inset -10px 0px 12px 0 rgba(255, 0, 255, 1) !important;*/
/*z-index: 3 !important;*/
}
/*
#nav-bar {
border-image: linear-gradient(to right,
transparent 0px, cyan 6px, orange 6px 8px,
red 8px, transparent 14px) 14 / 0 0 0 14px / 0 7px !important
}
*/
/* testing outline for equal button distance, size */
/*
toolbarbutton > image, .toolbarbutton-badge-stack {
outline: 1px solid hsla(0, 80%, 70%, 1) !important;
outline-offset: -1px !important;
}
*/
/* Tabs Ellipsis */
.tab-label-container {
mask-image: none !important;
}
.tab-label {
overflow: hidden !important;
text-overflow: ellipsis !important;
/*text-overflow: " ..." !important;*/
white-space: nowrap !important;
max-width: 100% !important;
}
/* disable alltabs button completely / must have browser.tabs.tabmanager.enabled = true */
/*
#alltabs-button {
display: none !important;
}
*/
... funktioniert.
Prima.
die Lesezeichen mittig anzeigen zu lassen
Teste bitte mal:
CSS#PlacesToolbarItems { display: flex !important; justify-content: center !important ; }
Damit geht allerdings der Overflow bei mir in beide Richtungen bei schmalen Fenster/vielen Bookmarks; links werden Bookmarks abgeschnitten/verschwinden und nur die rechts in's Overflow Menü geschoben.
Daher Vorschlag:
#PlacesToolbarItems {
justify-content: safe center !important;
}Alles gut, ist nur meine Grammatikallergie.
Oh Ha, hast Du den Joke nicht begriffen?
Nein.
Der Plural von Komma ist Kommata.
Das Wort ‚weiß' wird in Deutschland und Österreich immer mit ‚ß' geschrieben – egal, ob es um die Farbe ‚Weiß' oder um das Verb ‚wissen' geht.
Aktuell akzeptierte Schreibweisen sind hier flexibel, meine Wissens nach.
Was auch das Letzte wäre, was ich zu diesem OT Thema zu erwidern hätte.
Syntax, um genau zu sein. Semantik ist die Bedeutungslehre, das ist etwas Anderes.
Korrekt, Syntax ist der Begriff, korrigiert.
