1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Mira_Belle

Beiträge von Mira_Belle

  • Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

    • Mira_Belle
    • 23. November 2022 um 10:07

    Damit mein Anliegen nicht untergeht, push ich diesen Thread noch einmal.

    Und rufe BrokenHeart um Hilfe.

    Zitat

    Ich hätte da eine Frage zu dem Button_PersonalToolbar.uc.js.

    Was muss man tun, damit beim ersten Klick die PersonalToolbar zwar erscheint,

    aber nach dem Ablauf eines Counter der zweite Klick ausgelöst wird?

    Also dass die Leiste automatisch z.B. nach 40 sec. wieder verschwindet.

  • Zurück- und Vorwärts-Button verschieben

    • Mira_Belle
    • 22. November 2022 um 15:49
    Zitat von omar1979

    Das gilt jetzt für beide. Ich liebe die Farben rot, blau, grün :)

    Hey, ich hoffe, Du bist jetzt nicht böse.

    Jede Person darf doch "ihren" Firefox ganz nach Belieben verschönern, ganz wie sie mag.

    Es muss ihr gefallen und nicht anderen!

  • Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

    • Mira_Belle
    • 22. November 2022 um 14:32
    Zitat von 2002Andreas

    Und wenn du sie gleich nur bei hover einblendest?

    Erspart dir 1 - 2 Klicks dann.

    Eine nette Idee und Danke dafür, aber ...

    bei mir liegt die Lesezeichenleiste zwischen Adressbar und Tableiste.

    Auch habe ich den einen oder anderen Button auf die Adressleiste ganz rechts angepinnt.

    Wenn ich also, und was ich recht oft mache, mit der Maus da oben rumfuchtele,

    würde dauernd die Lesezeichenleiste eingeblendet werden.

    Es wäre also nach meinem Wunsch nur ein Klick die Lesezeichenleiste einzublenden,

    die Aktion auszuführen, die ich will, und dann verschwindet die Leiste wieder ganz von selbst.

    So jedenfalls der Plan. :/

  • Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

    • Mira_Belle
    • 22. November 2022 um 14:09

    Back to the roots!

    Ich hätte da eine Frage zu dem Button_PersonalToolbar.uc.js.

    Was muss man tun, damit beim ersten Klick die PersonalToolbar zwar erscheint,

    aber nach dem Ablauf eines Counter der zweite Klick ausgelöst wird?

    Also dass die Leiste automatisch z.B. nach 40 sec. wieder verschwindet.

  • Zurück- und Vorwärts-Button verschieben

    • Mira_Belle
    • 22. November 2022 um 11:11
    Zitat von DenalB

    OffTopic:

    omar1979

    Was ist das für ein Design, das du nutzt? Selbst gebastelt? Arbeitest du bei der Feuerwehr? Ich hab mit meiner Rot-Grün-Schwäche echt etwas Probleme, deine Screenshots zu erkennen. ;)

    omar1979 hat wohl möglich Probleme mit Gelb & Blau

    und bei verschiedenen Grautönen ist einfach zu wenig Kontrast. :D

    Ist nur e'n Scherz, bitte nicht falsch verstehen. :saint:

  • Skript für Add-ons Update

    • Mira_Belle
    • 22. November 2022 um 11:08

    Habs das neue Script auch getestet.

    Funktioniert, bei mir leider nur zum Teil.

    Der Button oben neben dem "Zahnrad" erscheint nicht mehr.

    Die Schaltfläche Zuletzt durchgeführte Updates auch nicht.

    Bekomme zwar die Schaltfläche mit Verfügbare Updates angezeigt, jedoch ohne Funktion,

    und auch werden die Updates nicht angezeigt.

    Erst wenn ich über das Zahnrad Auf Updates überprüfen anklicke,

    erscheinen die Updates und auch der Button.

    Daher bleibe ich erst einmal bei "meinem" #70 Script und werde daran etwas rumspielen,

    ob ich diese Abfrage der Updateeinstellungen da irgendwie integrieren kann.

    Denn diese macht ja Sinn.

    Aber Danke BrokenHeart für Deine unermüdliche Arbeit.

  • Zurück- und Vorwärts-Button verschieben

    • Mira_Belle
    • 21. November 2022 um 22:53
    Zitat von omar1979

    Ich hab es hingekriegt, das Script für den Hamburger-Menü so anzupassen, dass ich es beliebig verschieben kann. :)

    Und?

    Wie schaut es aus?

    Gibt es Unterschiede zum Script aus #15?

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 21. November 2022 um 22:48

    Schuldigen Eintrag in der About:addons.css gefunden!

    Es war ...

    CSS
        button {
            color: #E0E0E0 !important;
        }
        
    /*    button:enabled:hover {
            color: #FFA500 !important;
        }
    */    
        button:focus-visible {
            outline-color: transparent !important;
        }
    Alles anzeigen

    Habe ihn durch ...

    CSS
        .disco-cta-button,
        .theme-enable-button {
            color: #E0E0E0 !important;
        }
    
        .more-options-button {
            fill: #E0E0E0 !important;
        }

    ... ersetzt!

    Nun ist aber geschafft.

    Danke.

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 21. November 2022 um 22:06
    Zitat von 2002Andreas

    Das war nicht in den Entwickler-Werkzeugen aufgenommen ;)

    Oh, ....

    Dann deaktiviere ich mal alle anderen CSS-Dateien und schaue, ob es das was gibt, was dieses seltsame verursacht.

    Danke.

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 21. November 2022 um 21:59
    Zitat von 2002Andreas

    :/

    Das ist ja das Verrückte,

    in der "Stilbearbeitung" reagiert es genauso wie gewünscht und wie von Dir gezeigt.

    Jedoch über die userContent.css geladen, ist die Schrift plötzlich Orange.

  • Skript für Add-ons Update

    • Mira_Belle
    • 21. November 2022 um 16:14
    Zitat von FuchsFan

    Im Script Zeile 31 und 32 tauschen.

    Eventuell noch zusätzlich 27 und 28, dann sollte es funktionieren.

    Danke für den Tipp

    und mit dem Einfügen einer Zeitschleife (setTimeout) funktioniert es auch.

    Hier der geänderte Code:

    JavaScript
    /* Addons-UpDate-Check-Button */
    
    (function() {
      if (!window.gBrowser) return;
    
    
      CustomizableUI.createWidget({
        id: 'addons-update-button',
        defaultArea: CustomizableUI.AREA_NAVBAR,
        label: 'Add-ons Update',
        tooltiptext: 'Add-ons aktualisieren',
        onCommand: onCommand,
        onCreated: function(button) {
          button.style.listStyleImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB9klEQVR42o2TP2gTURzHvwcRXqDDCzi8gww+cfACBRsoJAWXji0KzZFBxUELDoouOmnG6JQiWOogVAcpHUpvKDRLQbekoKRDJXHyLYHLIOQNhXtgBt+7u+SSpkq+w93xu9/vw++vhVj0MiUOyzicEo5LuFh/ACGV6PT6HflbKmOyzINnGdt5kPOKnBYxg5pCNu99apdEt9cLAYdPi4cr8+kVDGYJ10oB3mlQdzebqxZnlLZf5vsEwYzRkRTSyL1pZSznCuPtZ/zXlMcNV9e2FH2LBvCjDrAFoNsYueTeiashoPV4EkDWNrSzA/ltP2rwohumjZ9foI5qI7/8+yHgkT0CkGvLwK0q5KYLovzIWK6BXNf2754GVBPABz8GPEwAithQKQJ6JmJiBmqOQekGEyUTqAF8HALuJwDML4OY2gcK6us2EPQj+811Xf+J7kcrAXwOAZS37oyVcLsCFO5CHXvAQSWyLZaist6ugvRFAtg1gOw0QJrGFXTQmYyMcxRytwJyWp8YVAIoj/eAhoHh24nH2GmADHT95yad39MApm+gUbZ9OwVq1mNyWeKsppaEwB9ALu35drjKzwvs1YuFdHXa8V9bCNROgsrGce91CDCX6GbJkxJPr9sE9v+CfQXfE8H2fldtmYu0xn8a0IUZn0tgeMpGfwErbLqeHktDngAAAABJRU5ErkJggg==)';}
      });
     
      function onCommand(event) {
          
        event.target.ownerGlobal.openTrustedLinkIn('about:addons', 'tab');
          
        addEventListener('pageshow', function onPageshow(event) {
          let document = event.target;
          if (document.URL != 'about:addons') return;
    
          removeEventListener('pageshow', onPageshow);
          
          document.querySelector('addon-page-options panel-item[action="view-recent-updates"]').click();
          document.querySelector('addon-page-options panel-item[action="check-for-updates"]').click();
           
          content.setTimeout(function() { 
            let categories = document.getElementById('categories');
            categories.querySelector('button[viewid="addons://updates/recent"]').click();
            categories.querySelector('button[viewid="addons://updates/available"]').click();
          }, 1000); 
        });
      };
    })();
    Alles anzeigen
  • Skript für Add-ons Update

    • Mira_Belle
    • 21. November 2022 um 14:48

    Ich hätte da 'ne Kleinigkeit!

    Wenn ich das Script auslöse, wird bei mir Zuletzt durchgeführte Updates angezeigt.

    Erst wenn ich den darüberliegenden Button Verfügbare Updates anklicke, bekomme ich die Updates angezeigt.

    Ist das so gewollt?

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 21. November 2022 um 14:41

    Punkt 2 auch gelöst!

    CSS
        #updates-message {
            outline-width: 1px !important;
            outline-style: solid !important;
            outline-color: #E0E0E0 !important;
            border-radius: 8px;
            height: 30px !important;
            background: #2B2B2B !important;   
            --in-content-button-text-color: #E0E0E0 !important;    
            --in-content-button-background: transparent !important;
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #E0E0E0 !important;
            --in-content-button-background-active: transparent !important; 
        }
        
        #updates-message:hover {
            outline-width: 2px !important;
            outline-color: #FFA500 !important;
            background-color: #5c5c5c !important;
        }
    Alles anzeigen

    Nun wird das Feld "Verfügbaren Updates anzeigen" so angezeigt wie von mir gewünscht.

    Fast :!:

    Denn was ich nicht verstehe, ist die Tatsache, dass wenn ich den Code, also das ganze CSS,

    genau so in der Stilbearbeitung eingebe, wird das Feld "Verfügbaren Updates anzeigen"

    tatsächlich so angezeigt wird wie ich das möchte!!

    Wird das CSS aber über die userContent.css geladen,

    dann ist die Schrift beim Hovern aber farbig! (Orange, #FFA500)

    Man beachte aberZeile 11 --in-content-button-text-color-hover: #E0E0E0 !important;

    ein ganz, ganz helles Grau ist da definiert.

    Hat da wer einen Tip für mich, woran das liegen könnte?

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 22:57

    Mit diesem Code bin ich recht nahe an meinem Ziel.

    CSS
        #updates-message {
            border-width: 2px !important;
            border-style: solid !important;
            border-color: transparent !important;
    }
        #updates-message:hover {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
    }
    Alles anzeigen

    Hier mal der komplette Code für about:addons

    CSS
    @-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
    url-prefix(about:addons) {
        /*---------------------------------*/
        /*********** Hintergrund ***********/
        /*---------------------------------*/
        html {
            background-color: #2B2B2B !important;               /* https://www.farb-tabelle.de/de/farbtabelle.htm gray17    #2B2B2B     43,43,43 */                                
        }
        #main {
            margin-top: 5px;
        }
        /*---------------------------------*/
        /*********** Auswahlfeld ***********/
        /*---------------------------------*/
        #sidebar {
            background: #2B2B2B !important;
        }
        /* Text & Icons */
        #categories > .category {
            color: #E0E0E0 !important;                          /* https://www.farb-tabelle.de/de/farbtabelle.htm gray88    #E0E0E0 */
        }
        /* Augewähles Element in Auswahlfeld (Text) */
        .category[selected] > .category-name,
        .category.selected > .category-name {
            color: #FFA500 !important;                          /* https://www.farb-tabelle.de/de/farbtabelle.htm orange    #FFA500     255,165,0 */    
        }
        /* Augewähles Element in Auswahlfeld (Icon) */
        .category[selected] {
            fill: #FFA500 !important;
        }
        #categories > .category[selected] {
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
        }
       
        /* Augewähles Element in Auswahlfeld (gedrückt) */
        #categories > .category {
            color: #E0E0E0 !important;
            background-color: #2b2b2b !important;               /* https://www.farb-tabelle.de/de/farbtabelle.htm gray25    #404040     64,64,64 */
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #E0E0E0 !important;
        }  
        #categories > .category:hover {
            background-color: #404040 !important;               /* https://www.farb-tabelle.de/de/farbtabelle.htm gray25    #404040     64,64,64 */
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;                   /* https://www.farb-tabelle.de/de/farbtabelle.htm orange    #FFA500     255,165,0 */
        }
        button.category {
        margin-top: 3px !important;
        }
        /* Links unten links */
       
        .sidebar-footer-label {
            color: #E0E0E0 !important;
        }
       
        .sidebar-footer-icon {
            fill: #E0E0E0 !important;
        }
        .sidebar-footer-link {
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #E0E0E0 !important;
        }
        .sidebar-footer-link:hover {
            background-color: #404040 !important;
        }
        .sidebar-footer-link:hover {
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
        }
        .sidebar-footer-list > li {
            margin-top: 3px !important;
        }
        /* Hintergründe  */
       
        .main-search,
        .sticky-container,
        .main-heading,
        #content {
            background: #2B2B2B !important;
            }
        /* Suchfeld */
        search-addons > search-textbox {
            background: #2B2B2B !important;     /* Hintergrund Eingabefeld */
        }
        search-textbox {
            border: 1px solid #E0E0E0 !important;     /* Rahmen des Eingabefelds  */
            border-radius: 4px;
        }
       
        search-textbox[focused] {
            border-color: transparent !important;     /* Rahmen des Eingabefelds (Aktiv)  */
            outline: 2px solid #FFA500 !important;
        }
         /* Position des Button mit Zahnrad */
        .main-heading {
            max-width: 1045px !important;
        }
        /**** Button oben mit dem Zahnrad ****/
        .page-options-menu > .more-options-button {
            fill: #E0E0E0 !important;                   /* Farbe d. Zahnrades */    
            outline-width: 1px !important;              /* Dicke d. Umrandung */
            outline-style: solid !important;            /* Art d. Umrandung */
            outline-color:  #E0E0E0 !important;         /* Farbe d. Umrandung */
            border-radius: 8px !important;      
            width: 70px !important;                     /* Länge des Button */
    /*      height: 30px ! important;                   /* Höhe des Button */
        }
           
        .back-button {
            width: 70px !important;
        }
       
       
        /**** Button oben mit dem Zahnrad (hover) ****/
        .page-options-menu > .more-options-button:hover {
            fill: #FFA500 !important;                   /* Farbe des Zahnrades */    
            outline-width: 2px !important;
            outline-style: solid !important;
            outline-color:  #FFA500  !important;
            background-color: #404040 !important;      
        }
        /**** Updates ****/
        #updates-message {
            outline-width: 1px !important;
            outline-style: solid !important;
            outline-color: #E0E0E0 !important;
            border-radius: 8px;
            height: 30px !important;
            background: #2B2B2B !important;
        }
         /* Überschriften */    
        .header-name {
            color: #E0E0E0 !important;
        }
        /*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/
        :root {
            --card-outline-color: none !important;
            --card-padding: 18px !important;            /* Abstände innerhalb der Container */
        }
       
        /* Vorschauen in den Containern */
        .card-heading-image {
            border-radius: 8px !important;
        }
    /*
        addon-card:not([expanded="true"]) .addon.card {
            outline: 3px solid orange;
            outline-offset: 2px;  
        }  */
        /*** Button "Mehr Add-ons ansehen" ***/
        button.primary {
            background-color: #2B2B2B!important;
            color: #E0E0E0 !important;
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;  
            border-color: #E0E0E0 !important;
        }
        button.primary:enabled:hover {
            background-color: #2B2B2B !important;  
            color: #FFA500 !important;
            border-radius: 8px !important;
            border-width: 1px !important;
            border-style: solid !important;  
            border-color:#FFA500 !important;
        }
        /*************************/
        /**** Empfehlungen ****/
        /*************************/
        /* Textfarbe (Empfehlungen) */
       
        body {
            color: #E0E0E0 !important;
        }
        /* Linkfarbe (Empfehlungen) */
        a {
            color: #FFA500 !important;
        }
       
        a:hover {
            color: #FFA500 !important;
            text-decoration: none !important;
        }
        /* Breite der Container */
        #main {
            max-width: 1050px !important;
        }
       
        /*  Container */
        .card {
            border: none !important;
            background: #2B2B2B !important;
    /*      border-width: 3px !important; */
    /*      border-style: solid !important; */  
    /*      border-color: #E0E0E0 !important; */  
            border-radius: 8px !important;
    /*      outline: 3px solid #E0E0E0; */
            outline-width: 1px !important;
            outline-style: solid !important;
            outline-color:  #E0E0E0 !important;
    /*      outline-offset: 2px;  */
            width: 1008px;                              /*  Ausdehnung der Container zum rechten Rand */
        }
        .card:hover {
    /*      background: #2B2B2B !important; */
            background-color: #404040 !important;      
    /*      border-width: 3px !important; */
    /*      border-style: solid !important; */  
    /*      border-color: #FFA500 !important; */  
            border-radius: 8px !important;
            outline-width: 3px !important;
            outline-style: solid !important;
            outline-color:  #FFA500 !important;
    /*      outline-offset: 2px;  */  
        }
        /* Höhe der Container   */
        .addon-description {
            line-height: 25px !important;      
        }
       
        /* Image in den Container in der Höhe verschoben    */
        addon-card[expanded] .addon.card {
            margin-top: 10px !important;
        }
        /* Image in den Container in der Größe angepasst    */
        .card-heading-image {
            width: 1040px !important;
            height: 100px !important;
        }
        /*************************/
        /**** Erweiterungen ****/
        /*************************/
        /* Schieberegler    */
       
        input[type="checkbox"].toggle-button {
            background: #8b8b8b !important;
            border-color: #E0E0E0! important;
        }
       
        input[type="checkbox"].toggle-button:checked {
            background: #FFA500 !important;
            border-color: #FFA500 !important;    
        }
        input[type="checkbox"].toggle-button:hover {
            background: #FFA500 !important;
            border-color: #FFA500 !important;
        }
        /* Sternchen  */
        .disco-description-statistics {
            color: #FFA500 !important;
        }
        /* Sternchen & mehr */
        .addon-detail-rating {
            color: #FFA500 !important;
        }
        /* Überschriften in den Containern */
        recommended-addon-card {
            color: #E0E0E0 !important;
        }
       
        recommended-addon-card:hover {
            color: #E0E0E0 !important;
        }
        /* Buttons im Allgemeinen   */
        button {
            color: #E0E0E0 !important;
        }
       
        button:enabled:hover {
            color: #FFA500 !important;
        }
       
        button:focus-visible {
            outline-color: transparent !important;
    }
        /* Tastenkombinationen von Erweiterungen verwalten  */
        [class="shortcut-input"] {
            appearance: none;
            border: 1px solid #E0E0E0 !important;
            border-radius: 8px !important;
            color: #E0E0E0 !important;
            background-color: #2B2B2B!important;
        }
        [class="shortcut-input"]:hover {
            border: 1px solid #FFA500 !important;
            background-color: #404040!important;
        }
        [class="shortcut-input"]:focus {
            border: 1px solid #FFA500 !important;
            background-color: #404040 !important;  
            outline: none !important;
        }
        /**************************************/
        /****       Container Expand        ***/
        /**************************************/
        /* "Knöpfe" */
        input[type="radio"]:enabled:checked {
            background-color: #FFA500  !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
        }
        input[type="radio"]:enabled:checked:hover {
            background-color: #FFA500  !important;
        }
       
        input[type="radio"]:enabled:hover {
            background-color: #FFA500 !important;
        }
        input[type="radio"] {
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #E0E0E0 !important;
    }
        .more-options-button,                                                   /* Button mit den drei Punkten */
        .back-button,                                                           /* Button Zurück */
        .disco-cta-button,                                                      /* Buttons in den Containern unter Empfelungen */
        .theme-enable-button {                                                  /* Buttons in den Containern unter Themes   */
            background-color: #2B2B2B !important;
            outline-width: 1px !important;
            outline-color: #E0E0E0 !important;
            outline-style: solid !important;
            border-radius: 8px !important;
        }
     
        .more-options-button:hover,                                             /* Button mit den drei Punkten */
        .back-button:hover,                                                     /* Button Zurück */
        .disco-cta-button:hover,                                                /* Buttons in den Containern unter Empfelungen */
        .theme-enable-button:hover {                                            /* Buttons in den Containern unter Themes   */
            outline-width: 2px !important;
            outline-color: #FFA500 !important;
            background-color: #404040 !important;      
        }
        .back-button:hover {
        background-color: #404040 !important;
        }
        /*  Icons ausblenden */
    /*  panel-item {
            --icon: unset !important;
        }
    */
        /* Menü unter den drei Punkten  */
    /*
        addon-list addon-options > panel-list[role="menu"],
        addon-list plugin-options > panel-list[role="menu"] {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: orange !important;
            background-color: #2B2B2B !important;
            padding: 0 0 2px 0 !important;
            margin-top: -1px !important;        
        }
        addon-list addon-options > panel-list > panel-item-separator,
        addon-list plugin-options > panel-list > panel-item-separator {
            background: #E0E0E0 !important;
            margin: 2px 0 0 0 !important;
        }
        panel-list {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: orange !important;
            background-color: #2B2B2B !important;
        }
    */
        /* Dreipunkte Button für Erweiterungen und Themes. */
        addon-list addon-options > panel-list > panel-item {
            --in-content-button-background: none !important;
            --in-content-button-background-hover: none !important;
            --in-content-button-background-active: none !important;
            border-radius: 4px !important;
            border: 1px solid #E0E0E0 !important;
            margin: 2px 2px 0 2px !important;
        }
        addon-list addon-options > panel-list[role="menu"],
        addon-list plugin-options > panel-list[role="menu"] {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: orange !important;
            background-color: #2B2B2B !important;
        }
        addon-list addon-options > panel-list > panel-item:hover,
        addon-list addon-options > panel-list > panel-item[action="preferences"]:hover,
        addon-list addon-options > panel-list > panel-item[action="remove"]:hover,
        addon-list addon-list addon-options > panel-list > panel-item[action="expand"]:hover,
        addon-list addon-list plugin-options > panel-list > panel-item:hover,
        addon-list plugin-options > panel-list > panel-item:hover,
        addon-list plugin-options > panel-list > panel-item[action="manage-addon-button"]:hover {
            background-color: #404040 !important;
        }
        /* Dreipunkte Button in der Detailansicht. */
        div#main[current-view="detail"] addon-card panel-list panel-item-separator {
            background: #E0E0E0 !important;
            margin: 2px 0 0 0 !important;
        }
        div#main[current-view="detail"] addon-card panel-list > panel-item {
            --in-content-button-background: none !important;
            --in-content-button-background-hover: none !important;
            --in-content-button-background-active: none !important;
            border-radius: 4px !important;
            border: 1px solid #E0E0E0 !important;
            background-color: #2B2B2B !important;
            margin: 2px 2px 0 2px !important;
        }
        div#main[current-view="detail"] addon-card panel-list > panel-item:hover {
            background-color: #404040 !important;
        }
        /**************************************/
        /****  Menü unter "Zahnrad" Expand  ***/
        /**************************************/
        #page-options panel-item {
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #FFA500 !important;
            --in-content-button-background-active: transparent !important;
        }
        addon-page-options panel-list {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
            width: 340px !important;
            padding: 5px !important;
            background-color: #2B2B2B !important;
        }
        /* Hoverfarbe #404040 */
        addon-page-options panel-list panel-item:hover {
            border-radius: 8px !important;
            background-color: #5c5c5c !important;
        }
        /* Activfarbe #404040 */
        addon-page-options panel-list panel-item:active {
            background-color: #5c5c5c !important;
        }
        .category[badge-count]::after {
            background-color: #FFA500 !important;
            color: #2B2B2B !important;
            border-radius: 100px !important;
        }
        .more-options-button-badged::after {
            background-color: #FFA500 !important;
        }
        #updates-message {
            --in-content-button-background: transparent !important;
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #FFA500 !important;
            --in-content-button-background-active: transparent !important;
          }
    }
    Alles anzeigen
  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 22:36
    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Wie bekomme

    Ich bin mir nicht sicher was genau du meinst.

    Geht es um diesen Button?

    Ja!

    Zitat von 2002Andreas
    CSS
    #updates-message {
      --in-content-button-background: red !important;
      --in-content-button-background-hover: green !important;
      --in-content-button-text-color-hover: #FFA500 !important;
    }

    Auf den Punkt! Vielen Dank.

    Ich habe daraus, ...

    CSS
        #updates-message {
            --in-content-button-background: transparent !important;
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #FFA500 !important;
            --in-content-button-background-active: transparent !important; 
          }

    ..., gemacht. Somit ist Aufgabe 1 gelöst.

    Nun zu 2.

    Den "Rahmen" bei hovern einfärben

    und Hintergründe devinieren, ähnlich wie oben beschrieben!

    Z.Z. schaut der "Eintrag" (Button) gehovert so aus:

    Wenn Du/sich jemand fragt, was ich genau meine, stelle ich nochmal Bildchen ohne Code ein.

    1. normal

    2. hover

    3. active

    Deshalb dieser Aufwand!

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 21:43

    Käse, jetzt habe ich mit Verfügbaren Updates anzeigen das gleiche Problem!

    Es wird durch root,

    genauer durch die Einträge

    CSS
    --in-content-button-background: rgba(207,207,216,.33);
    --in-content-button-background-hover: rgba(207,207,216,.66);
    --in-content-button-background-active: rgb(207,207,216);

    verschiedene Hintergründe festgelegt.

    Wenn ich jedoch

    CSS
    :root {
      --in-content-button-background: red !important;
      --in-content-button-background-hover: green !important;
      --in-content-button-background-active: blue !important;
      }

    nutze, ändert sich nichts.

    Wenn ich statt

    :root, [data-l10n-id="addon-updates-manual-updates-found"] eintrage, ändert sich auch nichts :!:

    1. Wie bekomme ich den nicht passenden Hintergrund transparent?

    2. Wie kann ich "neuen", abgerundeten und mit eigenen Farben versehenen Hintergrund definieren?

    Ähnlich meinem Problem hier #1.174

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 17:15

    Welch schwierige Geburt!

    Nun klappt es aber, so wie von mir gewünscht.

    Danke für die Zaunlatte, Dharkness.

    Danke für den Code, grisu2099.

    Danke 2002Andreas für Deinen Code.

    Alles zusammen ergibt folgenden funktionierenden Code:

    CSS
        /**************************************/
        /****  Menü unter "Zahnrad" Expand  ***/
        /**************************************/
        #page-options panel-item {
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #FFA500 !important;
            --in-content-button-background-active: transparent !important;
        }
        addon-page-options panel-list {
            border-radius: 8px !important;
            border-width: 2px !important;
            border-style: solid !important;
            border-color: #FFA500 !important;
            width: 340px !important;
            padding: 5px !important;
            background-color: #2B2B2B !important;
        }
        /* Hoverfarbe #404040 */
        addon-page-options panel-list panel-item:hover {
            border-radius: 8px !important;
            background-color: #5c5c5c !important;
        }
        /* Activfarbe #404040 */
        addon-page-options panel-list panel-item:active {
            background-color: #404040 !important;
        }
    Alles anzeigen
  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 15:39
    Zitat von Dharkness
    Zitat von Mira_Belle

    Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.

    Natürlich, denn die ganze Zeile ist das panel-item, in dem Fall müsstest Du mit margin-left und margin-right arbeiten, aber eben nicht nur bei dem Eintrag fürs hovern.

    D.h. ich müsste erst das "Menü" verbreitern,

    um dann links wie rechts das panel-item jeweils um ca. 5px einzuschränken.

    UND um einen Radius hinzuzuzaubern? :/

    Oh weh.

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 20. November 2022 um 15:27
    Zitat von Dharkness
    Zitat von Mira_Belle

    Beim Hovern wird die ganze Zeile "markiert",

    ist es möglich links, wie rechts einen Abstand zum Rand hinzuzaubern

    und die Ecken dann noch abzurunden?

    Wie wäre es mal mit nem Screenshot?

    z.B.

    Zitat von 2002Andreas
    ...

    2002Andreas hat doch Gif's eingestellt!

    Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.

    Aber hier mal zwei Beispiele, wie ich mir das vorstelle.

    Zitat von Firefox_94.0.1

    ...

    Kannst du mir bitte noch sagen, wie ich bei dem drop-down Menü bei :hover den border-radius ändern kann?

    CSS
    #page-options panel-list {
    font: menu;
    background-color: #00016e !important;
    border-radius: 5px !important;
    border-color: #00016e !important;
    color: #ffd700 !important;
    }
    
    
    #page-options panel-item {
    --in-content-button-background-hover: #ffd700 !important;
    --in-content-button-text-color-hover: #9c1818 !important;
    --in-content-button-border-radius: 30px !important;
    }
    Alles anzeigen

    Denn das funktioniert ja nicht!

    Und links, wie rechts ist es dann halt auch nicht möglich den Hintergrund "einzuschränken".

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 19. November 2022 um 21:52
    Zitat von 2002Andreas

    Pauschal:

    CSS
    #page-options panel-item {
      color: yellow !important;
    }
    
    #page-options panel-item {
      --in-content-button-background-hover: lightblue !important;
      --in-content-button-text-color-hover: green !important;
    }

    Super, klasse. :thumbup:

    Danke, funktioniert wie von mir gewüscht.

    Nur eine Sache noch, wenn möglich.

    Beim Hovern wird die ganze Zeile "markiert",

    ist es möglich links, wie rechts einen Abstand zum Rand hinzuzaubern

    und die Ecken dann noch abzurunden?

    Im Grunde weiß ich ja wie es geht, aber hier hänge ich irgendwie fest,

    denn

    CSS
        --in-content-button-border-color: 3px solid red !important;
        --in-content-button-border-radius: 4px !important;

    greift nicht.

    Und mit den Abständen weiß ich auch gerade nicht weiter.

    Und auch wenn ich folgendes versuche, ...

    CSS
        #page-options panel-item:hover {
            border-radius: 8px !important;
            background: #5C5C5C !important;
            margin-left: 5px !important;
            width: 305px !important;
    }

    ... ist es nicht von Erfolg gekrönt.

    Ich bin z.Z. mit meinem Latein am Ende.

Unterstütze uns!

Jährlich (2025)

105,8 %

105,8% (687,41 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon