Überhangmenü für Lesezeichen - border oder shadow ?

  • Aber welchen Rahmen meint er? Den Äußeren, den, der auf seinem Bild blau ist... ?

    Da ist doch kein Rahmen drum, blau ist doch nur das Texteingabefeld für den Namen. Ich denke, er meint das so:

    CSS
    #editBookmarkPanel {
        border: 4px solid blue !important;
        box-shadow: 10px 10px 10px 10px red inset !important;
    }

    Sieht dann bei mir so aus:

    Blauer durchgezogener Rahmen von 4px Dicke. Ein roter nach innen geneigter Schatten.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • denn äusseren Schatten.

    Dann versuch mal den box-shadow aus dem Post von milupo .

    Ergänzung: Das ist der Original Box-Shadow:

    Code
    .panel-arrowcontent {
        box-shadow: 0 0 4px hsla(210,4%,10%,.2);
    }


    Ergänzung, Teil 2:

    Da ist doch kein Rahmen drum

    Doch, da ist im Original ein Rahmen drum (siehe Zeile 7):

    Code
    .panel-arrowcontent {
        padding: var(--arrowpanel-padding);
        color: var(--arrowpanel-color);
        background: var(--arrowpanel-background);
        border-radius: var(--arrowpanel-border-radius);
        background-clip: padding-box;
        border: 1px solid var(--arrowpanel-border-color);
        box-shadow: 0 0 4px hsla(0,0%,0%,.2);
        margin: 4px;
    }

    Einmal editiert, zuletzt von grisu2099 (17. Juni 2021 um 23:32)

  • Dann versuch mal den box-shadow aus dem Post von

    Ist mir bloß nicht richtig gelungen. Ich habe keine Erfahrung mit box-shadow, mit welchen Werten der Schatten wie aussieht. Bei meinem Beispiel gibt es sowohl einen Rahmen als auch einen Schatten.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Funktioniert .panel-arrowcontent doch? Das liegt doch unter #shadow-root. Da gibt es doch immer mal Probleme.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Du kannst mit dem Code aus #8 auch einen richtigen Rahmen für das PopUp basteln.

    So sieht das Teil bei mir aus:


    Ja, milupo noch(!) funktioniert das.

    Soweit ich das überblicke aber ab Firefox 91 nicht mehr.

    Ich suche auch noch nach einer neuen Lösung...

    Einmal editiert, zuletzt von grisu2099 (17. Juni 2021 um 23:45) aus folgendem Grund: Ein Beitrag von grisu2099 mit diesem Beitrag zusammengefügt.

  • irgendwie bin ich zu doofe die richtige id oder class für das Stern überhangmenü aus der Adressleiste zu finden

    Mal hier noch etwas dazu. Da das Lesezeichen-hinzufügen/bearbeiten-Fenster ein Popup-Fenster ist, musst du da noch eine besondere Einstellung treffen. Du musst in den Browserwerkzeugen noch die Einstellung Popups nicht automatisch ausblenden aktivieren, sonst gehen Popups immer zu, bevor du überhaupt einen Eintrag auswählen kannst.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Da gibt es doch immer mal Probleme.

    Ja, richtig wäre : (geht aber nicht ohne weiteres mit der normalen 'userChrome.css'!)

    CSS
    #editBookmarkPanel::part(arrowcontent) {
        box-shadow: 0 0 40px red!important;
    }

    Sonst werden alle Elemente mit 'panel-arrowcontent'-Klasse mit einem roten Rahmen versehen ;)

    Hiermit geht's:

    BrokenHeart
    12. Juni 2021 um 21:02
  • noch(!) funktioniert das.

    Ich habe gar nicht erst probiert, weil ich dachte, es hat sowieso keinen Zweck.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Da gibt es doch immer mal Probleme.

    Ja, richtig wäre : (geht aber nicht ohne weiteres mit der normalen 'userChrome.css'!)

    gerade gemerkt.

    dann am WE in ruhe nachschauen.

    Danke bis hier hin.


    aber den Teil mit der userChrome.css und JavaScript habe ich noch nicht verstanden.

    das habe ich mir gemerkt. Aber manchmal tuhe ich mir schwer mit der sucherrei.

    3 Mal editiert, zuletzt von Son Goku (18. Juni 2021 um 00:11)

  • Ich habe gar nicht erst probiert, weil ich dachte, es hat sowieso keinen Zweck.

    Hier sind sämtliche PopUps so gerahmt... ;)


    aber den Teil mit der userChrome.css und JavaScript habe ich noch nicht verstanden.

    Geht mir genauso. :/

    Einmal editiert, zuletzt von grisu2099 (18. Juni 2021 um 00:09) aus folgendem Grund: Ein Beitrag von grisu2099 mit diesem Beitrag zusammengefügt.

  • Du musst in den Browserwerkzeugen noch die Einstellung Popups nicht automatisch ausblenden aktivieren, sonst gehen Popups immer zu, bevor du überhaupt einen Eintrag auswählen kannst.

    das habe ich mir gemerkt, aber an und ab tuhe ich mir mit der suche schwer :/

  • das habe ich mir gemerkt, aber an und ab tuhe ich mir mit der suche schwer

    Geht den Menschen wie den Leuten. :)

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • aber den Teil mit der userChrome.css und JavaScript habe ich noch nicht verstanden.

    Geht mir genauso.

    Hier ein Beispiel (u.a. mit Son Gokus Rahmen):

    BrokenHeart
    18. Juni 2021 um 09:36