1. ist dieser Schalter falsch geschrieben, und
2. gibt es den in 4 Wochen nicht mehr.
Es macht also null Sinn, da etwas zu verstellen!
89.0 - aber bitte (wie ?) mit der Oberfläche von 88.0.1 ?
-
mlle filou -
5. Juni 2021 um 00:11 -
Erledigt
-
-
jup.
Und das Bild mit den runden Tab-Ecken dürfte es schon 3-4 Jahre nicht mehr geben, das einzufordern grenzt mMn schon echt an Unverschämtheit, zumal man ihm das schon neulich geschrieben hat, dass er diesen alten Krempel sein lassen soll. Was stimmt den mit dir nicht?
-
Wer seine Tabs "Umrandet" und "Abgesetzt" haben möchte,
mag mal mit "meinem" Code herumspielen.
CSS
Alles anzeigen/* -------------------------------------------------*/ /************* aktiven Tab einfärben ****************/ /* -------------------------------------------------*/ :root{ --toolbar-bgcolor: rgba(0, 0, 0, 0)!important } .tab-background[selected="true"]{ background-color:transparent !important; box-shadow: inset 0px 0px 20px 0px #ff9400 !important; /* Orange */ } /* --------------------------------------------------*/ /************* passiven Tab einfärben ****************/ /* --------------------------------------------------*/ .tab-background:not([selected]):not([multiselected]) { background-color:transparent !important; box-shadow: inset 0px 0px 5px 0px #e1e1e1 !important; /* Hellgrau */ }Finde aber leider nicht mehr die Erklährung, welche Werte für WAS zuständig sind.
Die Werte 20px sowie 5px bewirken die "Breite" der "Schattierung" zur Mitte des Tabs.
Probiert es halt aus.
-
welche Werte für WAS zuständig sind.
Zeile 5 hat nichts mit der Tableiste bzw. den Tabs zu tun.
Farbe geändert auf rot ergibt:
Zeile 8 und 16
background-color:
werden nicht benötigt:
box-shadow: inset bedeutet, der Schatten ist innen im Tab.
Ohne inset sieht es sonst so aus:
Also nach außen.
Ich hoffe das hilft dir etwas weiter.
-
Die Zeilen 8 und 9 habe ich mir mal geborgt. Vielen Dank
-
welche Werte für WAS zuständig sind.
Zeile 5 hat nichts mit der Tableiste bzw. den Tabs zu tun.
Farbe geändert auf rot ergibt:
Zeile 5 auf "yellow" geändert, ergibt bei mir Folgendes:
ABER, ich habe bei meinen Anpassungen auch folgenden Code:
CSS
Alles anzeigen/* -------------------------------------------------*/ /************* aktiven Tab einfärben ****************/ /* -------------------------------------------------*/ /* :root{ --toolbar-bgcolor: rgba(255, 148, 0, 0.4)!important } */ :root{ --toolbar-bgcolor: yellow!important } .tab-background[selected="true"]{ background-color:rgba(255, 148, 0, 0.4) !important; box-shadow: inset 0px 0px 5px 0px #ff9400 !important; /* Orange */ } /* --------------------------------------------------*/ /************* passiven Tab einfärben ****************/ /* --------------------------------------------------*/ .tab-background:not([selected]):not([multiselected]) { background-color:rgba(225, 225, 225, 0.2) !important; box-shadow: inset 0px 0px 5px 0px #e1e1e1 !important; /* Hellgrau */ }Ohne Zeile 5 ist der aktive Tab im Hintergrund dunkler!
In Zeilen 9 & 18 habe ich farbliche Transparenz definiert,
damit der Übergang nicht so hart ausfällt.
In Zeile 18 sind doch mehrere Werte!
Hinter das Zusammenspiel dieser werde ich nicht schlau!
Erster Wert geht von der linken oberen Ecke aus, Zweiter nur oben, oder so,
Dritter Rundherum, Vierter "?" und wenn man kombiniert, ach ich weiß nicht.
PS:
So sieht es ohne Zeile 5 aus!
und so dann mit:
-
In Zeile 18 sind doch mehrere Werte!
https://developer.mozilla.org/de/docs/Web/CSS/box-shadow
Ohne Zeile 5 ist der aktive Tab im Hintergrund dunkler!
Die toolbar ist aber nicht die Tableiste.
Nebeneffekt davon:
Das ist die Tableiste:
Ansonsten nutzt du ein Theme, da kann alles ganz anders sein als ohne.
Und dann funktioniert auch dein:
background-color:rgba(225, 225, 225, 0.2) !important;
nicht, das dürfte nur background heißen.
Aber egal, wenn es bei dir damit funktioniert...
-
also von den vielen CSS
bin ganz verwirrt
welche ist die richtige dass die Ecken nicht mehr so rund sind
dass die weißen Flecken auf der Seite links und rehts vom Tab nicht mehr da sind
das ist nicht gerade sehr gut leserlich das Tab dann beim Zumachen
-
welche ist die richtige dass die Ecken nicht mehr so rund sind
Gar keine.
-
welche ist die richtige dass die Ecken nicht mehr so rund sind
dass die weißen Flecken auf der Seite links und rehts vom Tab nicht mehr da sind
Du hast irgendwo in deinem (uns unbekanntem) CSS-Code eine Zeile mit border-radius. Diese CSS-Eigenschaft rundet die Tabecken ab. Lösche diese Zeile.
-
Code ausgemistet!
CSS
Alles anzeigen/* -------------------------------------------------*/ /************* aktiven Tab einfärben ****************/ /* -------------------------------------------------*/ .tab-background[selected="true"]{ background:rgba(255, 148, 0, 0.4) !important; box-shadow: inset 0px 0px 5px 0px #ff9400 !important; /* Orange */ } /* --------------------------------------------------*/ /************* passiven Tab einfärben ****************/ /* --------------------------------------------------*/ .tab-background:not([selected]):not([multiselected]) { background:rgba(225, 225, 225, 0.2) !important; box-shadow: inset 0px 0px 5px 0px #e1e1e1 !important; /* Hellgrau */ }Funktioniert wie gewünscht.
Danke.
-
Funktioniert wie gewünscht.
Danke.
Freut mich wenn ich dir zumindest etwas helfen konnte, war gern geschehen
-
Es gibt kein richtig oder falsch, wenn das vorhandene CSS unbekannt ist. Wie oft muss denn nach jenem noch fragen?
-
Tschuldigung
vergessen
CSS
Alles anzeigen/* AGENT_SHEET */ /* Tabs unter Adresszeile */ @import url(./classic/css/tabs/tabs_below_navigation_toolbar_classic_grey.css); /**/ /* Gelbe statt graue Ordnericons */ @import url(./classic/css/generalui/bookmark_icons_colorized.css); /**/ /* Ab hier keine @imports mehr! */ /********************************/ /* Tabs mit abgerundeten Ecken */ :root { --tab-curve-width: 30px; --tabs-border: transparent !important; } .arrowscrollbox-scrollbox { padding-inline-start: 10px !important; } /* To be able to see the top border of the tab */ .tab-stack { margin-top: 2px !important; } /* When the window is maximized, the first pinned tab is properly displayed. */ #TabsToolbar { padding-inline-start: 15px !important; } .titlebar-placeholder { border: none !important; } /* Remove unneeded styles from Photon */ .tabbrowser-tab::before, .tabbrowser-tab::after { border: none !important; } .tabbrowser-tab > .tab-stack > .tab-background { background-image: none !important; -moz-box-orient: horizontal !important; background-color: transparent !important; margin-top: 1px !important; } .tab-background[selected="true"] { border: none !important; } .tab-line { display: none !important; } .tab-bottom-line { display: none !important; } /* Match height of new tab button (right svg) on hover */ .tabs-newtab-button { margin: 0 !important; } /* overlap the tab curves */ .tab-background { -moz-margin-end: -15px !important; -moz-margin-start: -15px !important; } /* Begin tab background customizations */ .tab-background[selected="true"]::before { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; } .tab-background[selected="true"]::after { border: none !important; content: "" !important; width: 30px !important; min-height: 30px !important; display: -moz-box !important; background-repeat: no-repeat !important; } .tab-background[selected="true"] > spacer { margin-top: 0px !important; } #new-tab-button, .tabs-newtab-button { width: calc(36px + 30px) !important; margin-inline-start: -15px !important; margin-top: 1px !important; } /* Tab hover customizations */ /* Regular tabs */ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; min-height: 30px !important; background-color: transparent !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { display: -moz-box !important; background-repeat: no-repeat !important; content: "" !important; width: 30px !important; min-height: 30px !important; background-color: transparent !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { margin-top: 0px !important; } #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover, .tabs-newtab-button:hover::before, .tabs-newtab-button:hover::after { background-color: transparent !important; } /* New tab hover customizations */ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover { background-position: 0px 2px, 30px 4px, 36px 2px !important; background-repeat: no-repeat !important; background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important; } .tabs-newtab-button:hover > .toolbarbutton-icon { background: none !important; background-color: transparent !important; } /* Color specific customizations */ :root { --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(249,249,250);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(249, 249, 255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-selected-middle: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient( transparent 2px, rgb(249, 249, 255) 2px, rgb(249, 249, 255)), none; --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-hover-middle: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient( transparent 2px, rgba(255, 255, 255, .1) 2px, rgba(255, 255, 255, .1)), none; --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"), linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); } /* OS-specific color variables */ @media screen and (-moz-windows-theme) { :root {} } @media not screen and (-moz-windows-theme) { :root {} } .tab-background[selected="true"]::before { background-image: var(--svg-selected-before) !important; } .tab-background[selected="true"]::after { background-image: var(--svg-selected-after) !important; } .tab-background[selected="true"] > spacer { background-image: var(--background-selected-middle) !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { background-image: var(--svg-hover-before) !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { background-image: var(--svg-hover-after) !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { background-image: var(--background-hover-middle) !important; } .tabs-newtab-button:hover { background-image: var(--newtab-hover) !important; } * { font-size: 1em !important; } /* Tighten up drop-down/context/popup menu spacing */ menupopup > menuitem, menupopup > menu { padding-block: 0px !important; } :root { --arrowpanel-menuitem-padding: 4px 8px !important; } @-moz-document url("chrome://browser/content/browser.xhtml"), url("chrome://browser/content/places/bookmarksSidebar.xhtml") { .sidebar-placesTree treechildren::-moz-tree-row { min-height: 17px !important; height: 17px !important; } .sidebar-placesTree treechildren::-moz-tree-image{ margin: -2px 2px !important; } }mein Code unter
C:\Users\Ich\AppData\Roaming\Mozilla\Firefox\Profiles\hj71kc4d.default\chrome
-
--tab-curve-width in Zeile 16 legt die Abrundung der Tabs fest. Entferne diese Zeile, wenn du keine abgerundeten Ecken haben willst.
-
Danke probiere ich
ich wieß der Code ist der reine Horror
aber den zu richten das geht gar nicht so einfach
ich kann das nicht
also den vereinfachen das er nicht so viele Zeilen hat
das mit den Pfeilen fehlt mir noch
beim anderen Computer unter Win 7 habe ich die Pfeile bei den Lesezeichen Ordnern
-
Danke probiere ich
Ok. Tue das.
ich wieß der Code ist der reine Horror
So schlimm sieht er gar nicht aus.
also den vereinfachen das er nicht so viele Zeilen hat
Das kann man nicht so pauschal machen, denn du musst entscheiden, was du wirklich brauchst. Das kann dir niemand abnehmen.
das mit den Pfeilen fehlt mir noch
beim anderen Computer unter Win 7 habe ich die Pfeile bei den Lesezeichen Ordner
Da kann ich nichts dazu sagen. Aber du bindest ganz oben zwei CSS Dateien ein. Diese sind sicher veraltet. Kommentiere die Zeilen 4 und 7 aus und teste erneut.
-
danke für die hilfe
der code hat eine irre lange wurst leider
und was meinst du bitte mit 4 und 7?
jetzt wie geht das mit den weißen Flecken weg bitte
siehe foto
-
und was meinst du bitte mit 4 und 7?
Na die Zeilen 4 und 7 in deinem Code aus Beitrag #34, wo die beiden css-Dateien importiert werden. Lösche die Zeilen am besten. Vielleicht hat sch das dann schon mit den weißen Ecken erledigt. Es ist übrigens schon Jahre her, dass die Tabs mal so aussahen. Hast du überhaupt schon Zeile 16 des Codes gelöscht, wie ich es dir geraten habe?
-
ja danke habe ich aber ist noch immer weiß
du meinst kommentiere die Zeilen 4 und 7 was meinst du damit bitte
