1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. camp-firefox.de
  2. Forum
  3. Firefox für den Desktop (Windows, Apple macOS, Linux)
  4. Individuelle Anpassungen

Tabform

  • Mira_Belle
  • 29. Oktober 2023 um 13:07
  • Erledigt
  • 1
  • 7
  • 8
  • Horstmann
    Reaktionen
    40
    Beiträge
    1.196
    • 14. November 2023 um 10:45
    • #141
    Zitat von Mira_Belle

    Aber weißt Du, ich wollte mir die Spielerei aufheben, mit dem Farbverlauf und so.

    So was vergesse ich doch sonst, wenn ich es "lösche" und nicht hin und wieder ausprobiere!!

    "Für was war das nochmal so? Muss ich testen. Achja, jetzt weiß ich es wieder!" Selbstgespräch Ende.

    Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt? ;)

    Für Verläufe gibt's zig Möglichkeiten; kuck mal: ;)

  • Mira_Belle
    Reaktionen
    90
    Beiträge
    3.296
    • 14. November 2023 um 11:48
    • #142
    Zitat von Horstmann

    Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt? ;)

    Für Verläufe gibt's zig Möglichkeiten; kuck mal: ;)

    Schaut interessant aus. :)

    Was die Formeln betrifft, vielen Dank für Deine Erklärungen.

    Wenn ich das jetzt nun richtig verstanden haben, stammen die ursprünglich aus dem "Sourcecode" vom Firefox.

    Wofür sie unter bestimmten Selektoren eingesetzt werden, hast Du auch schön erklärt.

    Meine Frage, so ungenau gestellt, sollte aber was anderes klären.

    Ich kann doch das Ergebnis einer Formel berechnen,

    Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!

    OK, mir gehen dann aber die Variablen verloren!

    Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen

    addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher

    und besser nachvollziehbar, als so manche kryptische Originalformel.

    Das Ergebnis muss doch nur stimmen!

    Ich werde das bei Gelegenheit mal austesten, aber vorher ein Backup des nun tollen CSS, machen.

    Übrigens, Danke dafür.


    Ach, und den Fix-Code habe ich mal an die richtige Stelle verschoben,

    denn der gehörte ja weiter hoch zu

    /* Colors, outlines: selected / multiselected / hover */.
    und nicht unter

    /*** tabs corners ***/

    Zitat von Horstmann

    ...

    Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?

    Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

    Da treten keine Ungereimtheiten auf, also alles Bestens!

    Mit <3lichem Gruß

    Mira

  • Horstmann
    Reaktionen
    40
    Beiträge
    1.196
    • 14. November 2023 um 12:59
    • #143
    Zitat von Mira_Belle

    Meine Frage, so ungenau gestellt, sollte aber was anderes klären.

    Ich kann doch das Ergebnis einer Formel berechnen,

    Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!

    OK, mir gehen dann aber die Variablen verloren!

    Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen

    addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher

    und besser nachvollziehbar, als so manche kryptische Originalformel.

    Das Ergebnis muss doch nur stimmen!

    Zitat von Horstmann

    ...

    Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?

    Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

    Da treten keine Ungereimtheiten auf, also alles Bestens!

    Alles anzeigen

    Das Gute an Variablen, und den Berechnungsformeln, ist dass man nur einen oder einige wenige Werte ändern muss, um den gesamten Code auf einmal anzupassen.

    Vorrausgesetzt natürlich dass man alles korrekt aufgebaut hat; und ich bin da nicht gerade Experte drin. ;)

    Neu gibt es noch dazu das Nesting und (bald) den :has Selector in Fx, was noch mehr Möglichkeiten eröffnet.

    Aber ob ich dass noch dazulernen will...

    Unser Code hier ist ziemlich einfach, ich hab selber zum Testen meist nur absolute Werte benutzt, wegen der Übersichtlichkeit.

    Für die Anwendung ist dann eine mehr automatisierte Form sinnvoller, weil man nur als Author noch dahintersteigt, welcher Wert warum wo steht.

    Dann schau dir mal die Codes von Aris an, oder auch andere wie der erwähnte von Godie etc., das ist eine komplett andere Welt.

    An sowas kann ich nicht mal kratzen, die Komplexität an sich und der benutzten Variablen ist fantastisch. 8|

    Und gut zu hören dass multiselected klappt - da würde ich nur ungern nochmal drangehen. ;)

  • Sören Hentzschel
    Administrator
    Reaktionen
    775
    Artikel
    1.067
    Beiträge
    36.754
    • 14. November 2023 um 13:35
    • #144
    Zitat von Horstmann

    Aber ob ich dass noch dazulernen will...


    Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor. ;)

    Kostenlose Erweiterungen für Firefox
    NEU: @s_hentzschel auf Mastodon

  • Horstmann
    Reaktionen
    40
    Beiträge
    1.196
    • 14. November 2023 um 14:41
    • #145
    Zitat von Sören Hentzschel


    Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor. ;)

    Stimmt schon; lesen bzw. verstehen kann ich den "neuen" Code halbwegs, und nach meiner kurzen Recherche ist es tatsächlich nicht so komplex, bringt aber wie gesagt interessante neue Möglichkeiten mit sich.

    Mal schauen.

    Wo ich mir nicht ganz sicher bin: ist Komma-Regeln die korrekte Schreibweise, oder sollte das nicht eher Kommaregeln sein? :P

    Kleiner Scherz; bitte nicht nochmal eine Rechtschreibdebatte, oder - ... Rechtschreib-Debatte? ;)

  • Sören Hentzschel
    Administrator
    Reaktionen
    775
    Artikel
    1.067
    Beiträge
    36.754
    • 14. November 2023 um 14:50
    • #146

    Du kannst nicht sagen, dass du keine Debatte über Sprache willst, und dann so kommen. Nicht bei einem Sprachliebhaber wie mir. :P In dem Punkt ist die deutsche Sprache tatsächlich flexibel. Grundsätzlich schreibt man zusammen, aber man darf bei Zusammensetzungen Bindestriche setzen, wenn man der Meinung ist, dass es die Lesbarkeit verbessert. Es ist nicht strikt geregelt, bis wann man das nicht darf oder ab wann man das muss, das ist also mehr eine Gefühlssache. Notwendig wäre es in diesem Fall sicher nicht gewesen. Das hatte ich auch eher unbewusst als bewusst gemacht und genauso unbewusst schreibe ich es beim nächsten Mal wahrscheinlich wieder ohne Bindestrich. Wenn ich wirklich bewusst auf so etwas achte, verzichte ich bei so kurzen Zusammensetzungen tendenziell eher auf den Bindestrich. Aber vor allem im Rahmen eines Forenbeitrags denke ich normalerweise nicht über jedes Wort genauer nach und bin dann auch nicht immer konsequent. ;)

    Kostenlose Erweiterungen für Firefox
    NEU: @s_hentzschel auf Mastodon

  • Mira_Belle
    Reaktionen
    90
    Beiträge
    3.296
    • 16. November 2023 um 00:40
    • #147

    Horstmann

    Danke auch für diesen Code!

    CSS
        #navigator-toolbox { 
            background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
        }

    Mit <3lichem Gruß

    Mira

  • Horstmann
    Reaktionen
    40
    Beiträge
    1.196
    • 16. November 2023 um 01:01
    • #148
    Zitat von Mira_Belle

    Horstmann

    Danke auch für diesen Code!

    CSS
        #navigator-toolbox { 
            background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
        }

    Gerne doch, war eine meiner leichteren Übungen. :)...

    Kleiner Scherz, der Code ist nicht von mir. ;)

    Sieht aus wie ein Verlauf über die ganze Toolbox, das geht im Prinzip.

  • Mira_Belle
    Reaktionen
    90
    Beiträge
    3.296
    • 16. November 2023 um 10:28
    • #149

    Stimmt, aber der Selektor ist von Dir und die Idee, mit diesem das "Hintergrundbild" zu verändern.

    Ich habe mir dann mal erlaubt, mit "linear-gradient" herumzuexperimentieren.

    Mit <3lichem Gruß

    Mira

  • Mira_Belle
    Reaktionen
    90
    Beiträge
    3.296
    • 4. September 2024 um 00:06
    • #150

    Durch Zufall gerade gesehen, dass ich hier nie das fertige CSS veröffentlicht habe.
    Wird hiermit nachgeholt.

    CSS
    /*** Curved tabs beta D2b sauber - dunkles Theme ***/
    /* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */
    
    /* -------------------------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------------------------- */
    
    /*** General adjustments ***/
    /*** Allgemeine Anpassunge ***/
    
    :root {
    
        /* Tabs bar height adjust */
        /* Tabbar Höhe einstellen */
            /*--tabs-navbar-shadow-size: 0 !important;*/
            /*--tab-block-margin: 4px !important;*/
            --tab-block-margin: var(--uc-block-margin) !important;      /*  2px */
            --tab-min-height: var(--uc-min-height) !important;          /* 36px */
        
        /* Edges without corner Svg /  Radius */
        /* Kanten ohne Ecken (svg / Radien */
            /*--ug-radius: 20px;*/
            --ug-radius: var(--uc-radius) !important;                   /* 19px */
        
        
        /* Edges (borders, outlines) colors */
        /* Farben für Ränder (Umrandungen, Konturen) */
        
        /* Edges not selected */
        /* Ränder nicht ausgewählt */
    /*        --ug-color-border: hsla(0, 0%, 83%, 0.5);                   /* hellgrau unselected Kante Tab */
    /*        --ug-color-border: var(--uc-color-orange-test); */
            --ug-color-border: var(--uc-color-grey-light);
            --ug-stroke: var(--ug-color-border);                         /* unselected Kante Svg */
    /*        --ug-kante_hova: hsla(0, 0%, 93%, 0.65);                    /* mittelgrau unselected alle Kanten hover */
            --ug-kante_hova: var(--ug-color-border);
        
        /* Edges selected , multiselected */
        /* Kanten ausgewählt, mehrfach ausgewählt */
    /*        --ug-color-border_select: hsla(0, 0%, 93%, 0.75);           /* mittelgrau hell+ selected Kante Tab */
            --ug-color-border_select: var(--uc-color-orange-normal);
            --ug-stroke_select: var(--ug-color-border_select);           /* selected Kante Svg */
    /*        --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8);             /* mittelgrau hell++ multiselected alle Kanten hover */
            --ug-kante_hova_select: var(--uc-color-orange-normal);
    
        
        /* Tabs background colors:  */
        
    /*        --ug-color1: hsla(0, 0%, 83%, 0.25);                        /* hellgrau basis, unselected */
    /*        --ug-color2: hsla(35, 80%, 60%, 0.25);                      /* zart orange selected */
    /*        --ug-color2-multi: hsla(35, 80%, 40%, 0.25);                /* zart orange dunkel+ multiselected */
    /*        --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);            /* zart orange dunkel++ multiselected hover */
    /*        --ug-color_hova: hsla(0, 0%, 50%, 0.25);                    /* mittelgrau#2 unselected hover */
    
            --ug-color1: var(--uc-color);                               /* hellgrau basis, unselected */
            --ug-color2: var(--uc-color-sel);                           /* zart orange selected */
            --ug-color2-multi: var(--uc-color-musel);                   /* zart orange dunkel+ multiselected */
            --ug-color_hova: var(--uc-color_hov);                       /* mittelgrau unselected hover */
            --ug-color_multi_hova: var(--uc-color_musel_hov);           /* zart orange dunkel++ multiselected hover */
    
    
        /* Tab bar unten, border bottom color */
    /*        --ug-color_bottom: hsla(0, 0%, 93%, 1);                   /* hellgrau nicht transparent, Kante unten */
            --ug-color_bottom: var(--uc-color-orange-normal);
    
        
        /* Symbole für about:xxx */
            --ug-color_tab-icon: var(--uc-color-red-normal);
    }
        /*** General adjustments end ***/
    /* -------------------------------------------------------------------------------------------------------------- */    
    /* -------------------------------------------------------------------------------------------------------------- */
    
                                                                   /*** Tabs base ***/
    
        /* tabs connected bottom */
        
        .tab-background {
            margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
        }
        
        /*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
        
        /*  Basis alle Tabs  */
        
        .tabbrowser-tab .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
            border: 1px solid !important;
            /*border-bottom: none !important;*/
        }
        
        .tabbrowser-tab:not([pinned]) .tab-background {
            border-left: none !important;
        }
        
        /*  Zusatzregeln, überschreiben Basis alle Tabs  */
        
        /* selected , pinned tabs */
        .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
        }
        /* Tab selected no inline border */
        .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
            border-inline: none !important;
        }
        
        /* Tab after selected tab completely round, no corners */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
            border-radius: var(--ug-radius) !important;
            border-left: 1px solid var(--ug-color-border) !important;
        }
        
        /* Last tab dual corners, unless it comes after selected tab */
        .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
            border-inline: none !important;
        }
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
            border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
            border-right: none !important;
        }
    
        /* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
            border-color: var(--uc-color-orange-normal) !important;
        }
    
                                                                      /***  COLORS  ***/
        
        /**  In about:config set svg.context-properties.content.enabled to true  **/
        
        /*  Basis alle Tabs  */
        
        .tabbrowser-tab .tab-background {
            outline: none !important;
            box-shadow: none !important;
            background-color: var(--ug-color1) !important;
            border-color: var(--ug-color-border) !important;
            stroke: var(--ug-stroke) !important;
            fill: var(--ug-color1) !important;
            border-bottom: none !important;   /* Muss zusätzlich, da unten ja keine Kante sein soll !  */
        }
        
        /*  Zusatzregeln, überschreiben Basis alle Tabs  */
        
        /* Colors, outlines: selected / multiselected / hover */
        
        /* tabs selected base */
        .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
            background-image: none !important;
            background-color: var(--ug-color2) !important;
            stroke: var(--ug-stroke_select) !important;
            border-color: var(--ug-color-border_select) !important;
            fill: var(--ug-color2) !important;
        }
        
        /* tabs multiselected */
        .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
            background-color: var(--ug-color2-multi) !important;
            fill: var(--ug-color2-multi) !important;
        }
        
        /* tabs multiselected hover */
        .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
            background-color: var(--ug-color_multi_hova) !important;
            fill: var(--ug-color_multi_hova) !important;
            stroke: var(--ug-kante_hova_select) !important;
            border-color: var(--ug-kante_hova_select) !important;
        }
        
        /* tabs unselected hover */
        .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
            background-color: var(--ug-color_hova) !important;
            fill: var(--ug-color_hova) !important;
            stroke: var(--ug-kante_hova) !important;
            border-color: var(--ug-kante_hova) !important;
        }
        
    /* -------------------------------------------------------------------------------------------------------------- */
        /* fill colors selected / unselected hover */
        .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, 
        .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
            fill: var(--ug-color2) !important;       
            stroke: var(--uc-color-orange-normal) !important;
        }
    
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before, 
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
            fill: var(--ug-color2-multi) !important;
        }
    
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before, 
        .tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
            fill: var(--ug-color_multi_hova) !important;
        }
    
        /*  right corner bg, selected --> vor not selected  */
        .tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
            background-image: none !important;
        }
    /* -------------------------------------------------------------------------------------------------------------- */
    
                                                              /***  tabs corners  ***/
        /*  base  */
        
        #TabsToolbar {
            --ug-corner-size: var(--tab-min-height) !important;                     /*  36px */
            --ug-corner-image: url("../icons/tab_corner.svg") !important;
        }
        
        .tabbrowser-tab .tab-background::before, 
        .tabbrowser-tab .tab-background::after {
            -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
            content: "";
            position: absolute;
            width: var(--ug-corner-size) !important;
            height: var(--ug-corner-size) !important;
            background-size: var(--ug-corner-size) !important;
            background-repeat: no-repeat !important;
            background-position: bottom center !important;
            mask-image: linear-gradient(215deg, transparent, black 18px) !important;
            pointer-events: none !important;
        }
        
        /*  left  */
        .tabbrowser-tab .tab-background::before {
            left: calc(0px - var(--ug-corner-size) / 2);                            /* -18px */
            background-image: var(--ug-corner-image) !important;
        }
        
        /*  right  */
        .tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
            right: calc(0px - var(--ug-corner-size) / 2);                           /* -18px */
            background-image: var(--ug-corner-image) !important;
            transform: scaleX(-1) !important;
        }
    
                                                /****   Margins etc. overflow fix   ****/
        /*
        .tabbrowser-tab:not([pinned]) {
            outline: 1px solid hsla(135, 80%, 50%, 0.75) !important;
            outline-offset: -1px !important;
        }
        */
        
        /* Base values ; tab padding, margin */
        #tabbrowser-tabs {
        /*    --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                  /*  26px */
            --ug-tab_Pad: calc(-10px + var(--ug-corner-size) / 2);                  /*   8px */
    
        /*    --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);             /* -48px */
            --ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2 + 6px);            /* -12px */
        }
    
        /* Basis all Tabs */
        .tabbrowser-tab:not([pinned]) {
            overflow: visible !important;
            padding-inline: var(--ug-tab_Pad) !important;
        /*    padding-inline: 0px !important; */
        }
    
        /* Tab before any tab */
        .tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
    
        /* Tab after selected */
        .tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
    
        /* Tab selected  */
        .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
            margin-inline: 0px !important;
        }
    
        /* Last tab after selected tab */
        .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
            margin-inline: var(--ug-tab_Marge) 0px !important;
        /*    margin-inline: -48px 0px !important; */
        }
        /***  Tab left higher z index / Vorrang vor Tab rechts  ***/
        .tabbrowser-tab:not([pinned]) .tab-content {
            z-index: 1 !important;
        }
    
        /***  Space for corner left/right - first/last tab, overflow bugs fix  ***/
        /* Test #6 */
    
        #tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
        /*    margin-inline-start: 0px !important; */
            margin-inline-start: 10px !important;
        }
        #tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
        /*    margin-inline-start: 0px !important; */    
            margin-inline-end: 10px !important;
        }
        #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
            margin-inline-start: -12px !important;
        }
        #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
            margin-inline-end: -12px !important;
        }
        /* Move buttons up/down, optional, OFF */
        /*
        #TabsToolbar toolbarbutton {
            margin-top: -1px !important;
        }
        #tabbrowser-tabs {
            --ug_margin_plus: 1px -1px;
        }
        :is(#scrollbutton-up, #scrollbutton-down) {
            margin-block:  var(--ug_margin_plus) !important;
        }
        */
    
        /*-----------------------------------------------*/
        /****     Tabtext nicht verkürzt bei hover    ****/
        /*-----------------------------------------------*/
    
        /* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
        /* Diese Verkürzung bei hover hätte ich gerne verhindert. */
    
        .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
            padding-inline-start: 7px !important;
            width: 24px !important;
        }
      
        .tabbrowser-tab[visuallyselected=true]:not(:hover),
        #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
            --tab-label-mask-size: 1em !important;
        }
        
        /* Tabtext wird nicht ausgeblendet */    
        .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
        .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
            mask-image: none !important;
        }
    
        /*--------------------------------------------*/
        /****     Tabbar nach unten verschieben    ****/
        /*--------------------------------------------*/
        
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 8px );                    /*  44px */
        /*    padding-bottom: 42px !important; */
        }
        
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
        }
    
        /*--------------------------------------------------*/
        /****  Trennlinie zwischen Inhalt und Tableiste  ****/
        /*--------------------------------------------------*/
    
        #TabsToolbar {
            bottom: 6px !important;         /* Tableiste etwas angehoben */
            width: 100vw !important;        /* Tableistenbreite festgelegt */
            background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
            margin-bottom: -7px !important; /* Trennlinie nach unten verschoben */
            padding-bottom: 7px !important; /* Tabs etwas angehoben */
        }
    
        /*---------------------------------------------*/
        /****     Symbole für about:xxx anpassen    ****/
        /*---------------------------------------------*/
    
    	.tab-icon-image {
    		-moz-context-properties: fill !important;
    	/*	fill: #FFAA00 !important;	*/
    		fill: #FF0000 !important;
    	}
    
        /*-----------------------------------------------------------------------*/
        /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
        /*-----------------------------------------------------------------------*/
    
        #context_reopenInContainer {
            display: none !important;
          }
          
        /*---------------------------------------------------*/
        /************** Tab schließen X hover  ***************/
        /*---------------------------------------------------*/
    
        .tabbrowser-tab:not([pinned]) .tab-close-button {                   /* Button rund */
            border-radius: 50% !important;
            display: flex !important;
        }
    
        .tab-content > .tab-close-button:hover {
            /*outline: none !important;*/
            outline: 1px solid rgba(255, 0, 0, 0.3) !important;
            outline-offset: -1px !important;
            background-color: rgba(255, 0, 0, 0.4) !important;              /* Rot */
            box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important;            /* Rot, glow */
        }   
    
        /*---------------------------------------------------*/
        /************* New Tab Button (+) hover  *************/
        /*---------------------------------------------------*/
    
        /* Abstand vom Tab */
        #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
            margin-left: 6px !important;
            border-radius: 50% !important;
        }
    
        /* New Tab (+) button hover outline */
        #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
            outline: 1px solid var(--uc-color-orange-normal) !important;
            outline-offset: -1px !important;
            background-color: var(--ug-color1) !important;
        }
    
        /* New Tab (+) button hover color */
        #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
            fill: var(--uc-color-orange-normal) !important;
        }
    
        /* Position, closer to last tab */
        #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
            margin: 0 !important;
            margin-top: 2px !important;
            padding-inline: 0px !important;
        }
        .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
            margin-left: -16px !important;
            z-index: 2 !important;
        }
    
        /*-------------------------------------------------*/
        /*************** Schrift in den Tabs ***************/
        /*-------------------------------------------------*/
    
        .tab-label {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        /*    text-overflow: " " !important;    */
            text-overflow: " …" !important;
            white-space: nowrap !important;
            max-width: 95% !important; 
            text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important;  /* Schatten hinter Schrift */
        }
        .tab-label[selected]  {
            color: var(--uc-color-white-normal) !important;                     /* Aktiver Tab: Schriftfarbe (Orange) */
        }
        .tab-label:not([selected])  {
            color: var(--uc-color-grey-lighter) !important;                     /* Aktiver Tab: Schriftfarbe (Hellgrau) */
        }
        
        /* Move tab content */
        .tab-content {
            margin-top: 1px !important;
        }
    
    /*************** Tests ***************/
    
        #tabbrowser-tabs {
        /*    --tab-min-width: 76px !important; */
            --tab-min-width: 75px !important;
            --tab-loading-fill: lime !important;      
            --tab-overflow-pinned-tabs-width: 0px !important;
          
        }
        
        /* userChrome.css */
        /* progress-bar page loading in the tab header */
        .tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
            opacity: 0;
            background-color: #FFCC00;
            height: 2px;
            margin-inline: 12px;
            margin-top: 0px;
            border-radius: 90px;
        }
        .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
            opacity: 1;
            transform-origin: left center;
            animation: 2s ease-in-out scale;
        }
        .tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
            transition: opacity 2s ease-out;
        }
        @keyframes scale {
            0% {transform: scaleX(0);}
            100% {transform: scaleX(1);}
        }
            /*background-position: right top -380px, var(--lwt-background-alignment) !important;*/
    /*
        *    Gesammelte Werke   *
    
        #navigator-toolbox {
            background-image: url("../background/Bild1.jpg") !important;
            background-image: linear-gradient(to bottom, #4a4a4a 30%, #9a5a00 80%, #e49800 100%) !important;
            background-image: linear-gradient(to top, black 50px, transparent 10px) !important;
            background-image: linear-gradient(-2deg, rgba(172, 171, 194, 1) 10%, rgba(145, 145, 167, 1) 20%, rgba(120, 119, 140, 1) 35%, rgba(95, 94, 115, 1) 45%, rgba(71, 71, 90, 1) 55%, rgba(48, 48, 67, 1) 65%, rgba(27, 27, 45, 1) 80%, rgba(2, 0, 25, 1) 90%, rgba(0, 0, 0, 1) 100%) !important;
    
        }
    */    
    /*
        #navigator-toolbox { 
            background-image: linear-gradient(1deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important;
        }
    */    
    Alles anzeigen

    Mit <3lichem Gruß

    Mira

    • 1
    • 7
    • 8
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Mastodon
Zitat speichern