Sidebar CSS wird nicht umgesetzt

Boersenfeger

Fast, es stört noch der Abstand zum linken Rand, einmal ohne Sidebar

und einmal mit Sidebar

Man sieht immer ein Stück durchscheinen.

.DeJaVu

Immer noch das CSS aus #1 ?

Boersenfeger

CSS

@-moz-document url("chrome://browser/content/sidebar/sidebar-bookmarks.html"),
               url("chrome://browser/content/browser.xhtml") {
	
/* Suchsymbol in der Sidebar ausblenden */

#input[type="search"] {
  padding-inline-start: var(--space-medium) !important;
  background-image: none !important;
}

/* Ordner aus der Sidebar ausblenden */
[data-guid="unfiled_____"],
[data-guid="toolbar_____"] {
  display: none !important;
}	

sidebar-bookmark-row {
	height: 20px !important;
}

::placeholder  {
    color: transparent !important;
}

.sidebar-panel-heading {
	display: none !important;
}

details summary, 
.bookmark-folder-label {
  font-size: 16px !important;
  font-family: Comic Sans MS, sans-serif !important;
}

.fxview-tab-row-main, .fxview-tab-row-title {
  font-size: 16px !important;
  font-family: Comic Sans MS, sans-serif !important;
  margin-top: -13px !important;
  margin-bottom: -13px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#input {
  &[type="search"] {
    &.with-icon {
	font-size: 16px !important;
    font-family: Comic Sans MS, sans-serif !important;
 }
  }
}

.sidebar-panel {
    background: #c1e7bb !important;
}

details {
	margin-top: -3px !important;
	margin-left: -8px !important;
}

details summary {
  &::before {
    content: "" !important;
    display: none !important;
 }
}

details summary, .bookmark-folder-label {
    &::before 
	background-image: url("..//icons/Ordner.png")!important;
  }
	
details > summary { 
	background-image: url("..//icons/Ordner.png")!important;	 
	}

@-moz-document url("chrome://browser/content/sidebar/sidebar-bookmarks.html"),
               url("chrome://browser/content/browser.xhtml") {
				   
#sidebar-main > sidebar-main {
    display: none !important;
}

#sidebar-box {
    display: flex !important;
    position: absolute !important;
    top: 0;
    bottom: 5px;
    width: 260px !important;
    z-index: 100 !important;
    opacity: 0 !important;
    margin-left: -255px !important;
    transition: margin-left .5s linear .4s, opacity .6s ease-in .2s !important;
}

#sidebar-box:hover {
    z-index: 100 !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    transition: margin-left .66s !important;
    }

/* Sidebar Hintergrundfarbe */
    #sidebar {
    background: #c1e7bb !important;
    opacity: 1 !important;
    }
 }

Alles anzeigen

Das ist die derzeit gültige Fassung. Den "Fehler" gab es aber von Anfang an..

Mira_Belle

Boersenfeger Du läufst Gefahr, dass Dein CSS wieder irgendwann nicht funktioniert!!

CSS

details summary, .bookmark-folder-label {
    &::before 
	background-image: url("..//icons/Ordner.png")!important;
  }
	
details > summary { 
	background-image: url("..//icons/Ordner.png")!important;	 
	}

Ist FALSCH
Es ist da ein Syntaxfehler enthalten!
Außerdem fehlt eine Klammer!

Also, so wäre der Code richtig.

CSS

details summary, .bookmark-folder-label {
    &::before {
        background-image: url("../icons/Ordner.png") !important;
    }
}
	
details > summary { 
    background-image: url("../icons/Ordner.png") !important;	 
}

Und damit ist auch klar, dass Dein CSS nicht direkt in chrome liegt!

.DeJaVu

Mira, bitte übernehmen Sie!

Wegen ../ - das springt eine Ebene hoch, während ./ auf gleicher Ebene bleibt.
Ich weiss zwar nicht warum, aber Helfer waren immer im Nachteil.

Mira_Belle

Zitat von .DeJaVu

Ich weiss zwar nicht warum, aber Helfer waren immer im Nachteil.

Boesenfeger und ich sind mal aneinander geraten, Schwamm drüber.
Aber er scheint mich zu ignorieren. OK, sein Problem, wenn das CSS wieder versagt!
Es ist ja kaputt, dennoch bügelt Firefox das noch aus.
Und was sein anderes Problem aus #41 betrifft,
damit beschäftige ich mich nicht, es sei denn er meldet sich noch einmal.

.DeJaVu

Er schützt sich lediglich - vor unliebsamer Arbeit.
Ich hatte ja mal nach Form und Farbe getrennt "gefordert", und auch eine Trennung von Scripten und CSS. Muss jeder für sich entscheiden.

Diese Tage hatte ich wieder Zeit, mein CSS zu überarbeiten, weiter zu strukturieren. Nicht nur nach Funktion, sondern auch nach Reihenfolge und nach Chrome sowie Content. Wenn man so eine Arbeit aufteilt, je kleiner das Teil, umso leichter die Aufgabe - heute das, morgen dies.

Oder warum meinst du, dass Nutzer wie er oder zB captain chaos permanent in Schnappatmung verfallen bei fast jeder neuen Version?
Der Kreis schliesst sich, immer. Spaghetticode hat seit über 50 Jahren Probleme bereitet.

Angemerkt: mein Keller hat sich letzte Woche nicht von allein entrümpelt, irgendwo wollte ich auch mal wieder treten können. Klar wäre nett "kommt mal kostenlos für 2 Stunden vorbei" - sowas kannst'e heutzutage knicken. Oder mein neues Auto in der Garage, länger und breiter, das brauchte Platz, also wurde Platz gemacht. Da sind dann Nachmittage futsch, weil "muss". Und ich mach das alles allein, teilweise in meinem Urlaub, oder nach Feierabend. Alles im Rahmen meiner Gesundheit, meiner Knochen, wobei ich genau deswegen eine Herzensangelegenheit beim Amt in Auftrag gegeben habe, weil ich das so nicht mehr schaffe.

Und genau deswegen nutze ich keine Scripte und nur CSS, dass ich auch selbst verstehe, wobei Firefox 158 was richtiger macht mit meinem CSS als v156. Ursache bislang unbekannt, dauert. Ich bin noch aktiv in Arbeit, ich hab dafür keine Zeit, und Firefox funktioniert auch so einwandfrei - und das ist für mich wichtiger.

2002Andreas

Zitat von Mira_Belle

Außerdem fehlt eine Klammer!

Um es genau zu sagen, es sind sogar 2

In Zeile 76 fehlt die Abschlussklammer zu Zeile 2.

Mira_Belle

2002Andreas Stimmt. Ich hatte mir aber nur den Codeschnipsel angeschaut!

Ich war aber mal so frei, und habe das CSS korrigiert und mal sauber formatiert.

CSS

@-moz-document url("chrome://browser/content/sidebar/sidebar-bookmarks.html"),
               url("chrome://browser/content/browser.xhtml") {
	
    /* Suchsymbol in der Sidebar ausblenden */
    #input[type="search"] {
        padding-inline-start: var(--space-medium) !important;
        background-image: none !important;
    }

    /* Ordner aus der Sidebar ausblenden */
    [data-guid="unfiled_____"],
    [data-guid="toolbar_____"] {
        display: none !important;
    }	

    sidebar-bookmark-row {
        height: 20px !important;
    }

    ::placeholder  {
        color: transparent !important;
    }

    .sidebar-panel-heading {
        display: none !important;
    }

    details summary, 
    .bookmark-folder-label {
        font-size: 16px !important;
        font-family: Comic Sans MS, sans-serif !important;
    }

    .fxview-tab-row-main, .fxview-tab-row-title {
        font-size: 16px !important;
        font-family: Comic Sans MS, sans-serif !important;
        margin-top: -13px !important;
        margin-bottom: -13px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    #input {
        &[type="search"] {
            &.with-icon {
                font-size: 16px !important;
                font-family: Comic Sans MS, sans-serif !important;
            }
        }
    }

    .sidebar-panel {
        background: #c1e7bb !important;
    }

    details {
        margin-top: -3px !important;
        margin-left: -8px !important;
    }

    details summary {
        &::before {
            content: "" !important;
            display: none !important;
        }
    }

    details summary, .bookmark-folder-label {
        &::before {
            background-image: url("..//icons/Ordner.png")!important;
        }
	}

    details > summary { 
        background-image: url("..//icons/Ordner.png")!important;	 
    }
				   
    #sidebar-main > sidebar-main {
        display: none !important;
    }

    #sidebar-box {
        display: flex !important;
        position: absolute !important;
        top: 0;
        bottom: 5px;
        width: 260px !important;
        z-index: 100 !important;
        opacity: 0 !important;
        margin-left: -255px !important;
        transition: margin-left .5s linear .4s, opacity .6s ease-in .2s !important;
    }

    #sidebar-box:hover {
        z-index: 100 !important;
        opacity: 1 !important;
        margin-left: 0 !important;
        transition: margin-left .66s !important;
    }

    /* Sidebar Hintergrundfarbe */
    #sidebar {
        background: #c1e7bb !important;
        opacity: 1 !important;
    }
 }

Alles anzeigen

Jetzt aber! Jetzt sollte es fein sein.

grisu2099

In Zeile 77 eine @-moz-document-Regel zumachen, nur um sie 2 Zeilen später wieder zu öffnen, ist irgendwie unsinnig, oder?

Mira_Belle

grisu2099 Stimmt, aus das habe ich gar nicht geachtet!
Habe das CSS von Boersenfeger einfach 1:1 übernommen und nur die fehlenden Klammern eingesetzt.
Habe es jetzt mal schnell korrigiert, ist ja fast peinlich.

Mira_Belle

Habe noch mal etwas herumgebastelt!

Die Lesezeichenseitenleiste geht nun von oben bis ganz nach unten!
Es bleibt also unten kein Spalt mehr!
Siehe Kommentar unter #sidebar-box
Dann habe ich mal die "eigentliche" Seitenleiste inkl. rechten Rand, der dann ja wirklich unschön aussah, entfernt.
Diese "Regeln" stehen ganz oben im CSS und sind kommentiert, damit sie leichter zu finden sind und bei nicht gefallen
einfach auskommentiert oder entfernt werden können.

CSS

@-moz-document url("chrome://browser/content/sidebar/sidebar-bookmarks.html"),
               url("chrome://browser/content/browser.xhtml") {

    /* "Einstellungs" Sidebar ausblenden */           
    .buttons-wrapper {
        display: none !important;
    }

    /* Rechter Rand ausblenden */
    #sidebar-splitter {
        display: none !important;
    }

    /* Suchsymbol in der Sidebar ausblenden */
    #input[type="search"] {
        padding-inline-start: var(--space-medium) !important;
        background-image: none !important;
    }

    /* Ordner aus der Sidebar ausblenden */
    [data-guid="unfiled_____"],
    [data-guid="toolbar_____"] {
        display: none !important;
    }	

    sidebar-bookmark-row {
        height: 20px !important;
    }

    ::placeholder  {
        color: transparent !important;
    }

    .sidebar-panel-heading {
        display: none !important;
    }

    details summary, 
    .bookmark-folder-label {
        font-size: 16px !important;
        font-family: Comic Sans MS, sans-serif !important;
    }

    .fxview-tab-row-main, .fxview-tab-row-title {
        font-size: 16px !important;
        font-family: Comic Sans MS, sans-serif !important;
        margin-top: -13px !important;
        margin-bottom: -13px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    #input {
        &[type="search"] {
            &.with-icon {
                font-size: 16px !important;
                font-family: Comic Sans MS, sans-serif !important;
            }
        }
    }

    .sidebar-panel {
        background: #c1e7bb !important;
    }

    details {
        margin-top: -3px !important;
        margin-left: -8px !important;
    }

    details summary {
        &::before {
            content: "" !important;
            display: none !important;
        }
    }

    details summary, .bookmark-folder-label {
        &::before {
            background-image: url("..//icons/Ordner.png")!important;
        }
	}

    details > summary { 
        background-image: url("..//icons/Ordner.png")!important;	 
    }
				   
    #sidebar-main > sidebar-main {
        display: none !important;
    }

    #sidebar-box {
        display: flex !important;
        position: absolute !important;
        top: 0;
      /*  bottom: 5px;  */
        bottom: -5px !important; /* REPARIERT: Schließt jetzt unten perfekt ab */
        width: 260px !important;
        z-index: 100 !important;
        opacity: 0 !important;
        margin-left: -255px !important;
        transition: margin-left .5s linear .4s, opacity .6s ease-in .2s !important;
    }

    #sidebar-box:hover {
        z-index: 100 !important;
        opacity: 1 !important;
        margin-left: 0 !important;
        transition: margin-left .66s !important;
    }

    /* Sidebar Hintergrundfarbe */
    #sidebar {
        background: #c1e7bb !important;
        opacity: 1 !important;
    }

}

Alles anzeigen

Viel Spaß damit.

Sidebar CSS wird nicht umgesetzt

Ähnliche Themen

Sidebar als schwebende, hover-aktivierte Leiste

Entfernen oder verstecken von Einträgen in der Sidebar, "Weitere Lesezeichen", Suchfeld, "Lesezeichen-Symbolleiste"

CSS für About Dialog /Nightly passt nicht mehr

Sidebar für FF 146 - Erster Versuch

Icon für Lesezeichen-Ordner nicht mehr in Farbe (CSS-Code streikt)

Browser Inspektor verwendet keinen Referer - Ressource wird blockiert.