proton, css in welche Datei

.DeJaVu

Ich habe heute meine Nightly im Menü bereinigt (via prefs) und etliche Einträge aus nicht mehr vorhandenen Erweiterungen gelöscht. Danach die vorhandenen Buttons neu sortiert.

Da Proton aktiv ist, optisch so weit keine Katastrophe, direkt die Browser-Werkzeuge geöffnet und ein wenig angepasst, so dass es ähnlich wie in Firefox 87 aussieht.

CSS

#appMenu-popup .panel-subview-body
{
    min-height: 490px;
}

#appMenu-popup .panel-subview-body .subviewbutton
{
    height: 24px;
    padding: unset !important;
}

#mainPopupSet #appMenu-zoom-controls2
{
    /*height: 40px;*/
    padding-left: 3px;
}


#widget-overflow panelview
{
    min-width: unset !important;
    max-width: 20em !important;
}

#widget-overflow .widget-overflow-list
{
    width: 20em !important;
}

.widget-overflow-list .toolbarbutton-1,
.widget-overflow-list toolbarbutton
{
    max-width: 20em !important;
}

panelview .toolbarbutton-1,
.widget-overflow-list .toolbarbutton-1
{
    padding: unset !important;
}

#widget-overflow .panel-viewstack
{
    max-height: unset;
    min-height: 400px;
}

#widget-overflow .panel-viewstack .panel-subview-body
{
    min-height: unset;
}


#TabsToolbar #alltabs-button
{
    display: none !important;
}

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}
.tabbrowser-tab:not([visuallyselected="true"])
{
    background: #cecece !important;
    border-right: 1px solid #444 !important;
}

.tabbrowser-tab
{
    padding-inline: unset !important;
}

Alles anzeigen

Das Problem, was ich jetzt habe - aktuell steht dieses CSS in der userChrome als auch userContent - woran erkenne ich, was davon in welche Datei muss? (ausser durch Ausprobieren)

appmenu gehört was in beide, bei widget-overflow ebenso.

2002Andreas

Zitat von .DeJaVu

appmenu gehört was in beide, bei widget-overflow ebenso.

Ich lasse mich gerne eines Besseren belehren, aber ich kenne es nur so:

Änderungen am Fx = userChrome.css

Änderungen an Webseiten oder auch allen Seiten die in einem neuen Tab geöffnet werden, also die about Seiten, werden über die userContent.css angesprochen.

Wenn ich deinen Code in die userContent.css einfüge erkenne ich keine Wirkung.

Oder habe ich etwas übersehen dabei

Sören Hentzschel

Du hast nichts übersehen, das ist absolut korrekt so. Im Prinzip sagt der Dateiname ja auch schon den Verwendungszweck aus. Chrome ist der Fachbegriff für die Browseroberfläche (kein Zufall, dass der Browser von Google auch so heißt) und Content versteht man, glaube ich, auch im Deutschen ganz gut.

.DeJaVu

Ich hätte dazuschreiben sollen, wofür das ist. Der erste Teil ist für das Popup unterm Hamburger-Button, alles etwas kleiner in der Höhe inkl. Popup selbst, zweites ist für das Überhangmenü, ebenfalls alles etwas weniger Höhe. Drittes betrifft die Tabs, eckig statt rund, ohne Abstand, Trennlinie, und wenn kein sonstiges CSS (aus der ctr-Sammlung) was Falsches ergibt, die nicht aktiven Tabs in Hellgrau statt unisono mit der Leiste.

Eben nochmal den Test mit euren Infos gemacht, da scheint wohl vorher das CSS teilweise falsch gewesen zu sein, in der userChrome ohne userContent sieht es nach Neustart immer noch so aus, wie gewünscht.

Der Gedanke, der hinter meiner Frage steckt - ich habe voin der CTR-Sammlung einiges in der userChrome verlinkt, anderes in der userContent. Allerdings betreffen die Einträge in der userContent ausnahmlos about Seiten, also Addons, Reader(mode), :config, aber CSS zum "bookmarkpanel" (Bearbeitungsfeld verschoben) in der userChrome stehen muss. Und bislang musste ich das jedes Mal ausprobieren, wo ich das reinschreiben soll, damit es funktioniert.

Webseiten werden hier ausschliesslich mit Stylus behandelt.

Danke euch beiden.

.DeJaVu

Inzwischen sieht das CSS so aus:

CSS

/*proton fix nightly*/

/*hamburger button*/

#appMenu-popup .panel-subview-body
{
    min-height: 490px;
}

#appMenu-popup .panel-subview-body .subviewbutton
{
    height: 24px;
    padding: unset !important;
}

#mainPopupSet #appMenu-zoom-controls2
{
    /*height: 40px;*/
    padding-left: 3px;
}


/*Überhangmenü*/

#widget-overflow panelview
{
    min-width: unset !important;
    max-width: 20em !important;
}

#widget-overflow .widget-overflow-list
{
    width: 20em !important;
}

.widget-overflow-list .toolbarbutton-1,
.widget-overflow-list toolbarbutton
{
    max-width: 20em !important;
}

panelview .toolbarbutton-1,
.widget-overflow-list .toolbarbutton-1
{
    padding: unset !important;
}

#widget-overflow .panel-viewstack
{
    max-height: unset;
    min-height: 400px;
}

#widget-overflow .panel-viewstack .panel-subview-body
{
    min-height: unset;
}


/*Tabs eckig, no margin, color not active*/

#TabsToolbar #alltabs-button
{
    display: none !important;
}

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: #A3A3A3 !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
    border-top: 2px solid transparent !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: #F9F9FA !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}


/*toolbar buttons smaller*/

toolbar .toolbarbutton-1
{
    margin: 0 !important;
    padding: 0 !important;
}

Alles anzeigen

Das Bild ist von kurz davor, inzwischen ist der blaue (grau bei hover) Oberstrich bei den Tabs dazugekommen.

Speravir

Nur zur Klarstellung, damit es niemand missversteht:

Zitat von .DeJaVu

Webseiten werden hier ausschliesslich mit Stylus behandelt.

Das funktioniert nicht mit den about:-Seiten, und, nicht zu vergessen, auch nicht mit den Seiten von Addons (moz-extension:).

Dharkness

Zitat von Speravir

as funktioniert nicht mit den about:-Seiten, und, nicht zu vergessen, auch nicht mit den Seiten von Addons (moz-extension:).

Natürlich nicht, das sind Fx und Addons interne Seiten, da funktioniert Stylus nicht, die müssen über die userContent.css angepasst werden.

proton, css in welche Datei

Ähnliche Themen

CSS Code wird nicht permanent im Script angewendet

Erweiterungen haben sich zurückgesetzt auf Standard: Welche Dateien müssen ausgetauscht werden bzw. Wo sind die Einstellungen gespeichert?

Downloadfunktion und ziehen der Dateien auf einem PC nicht mehr möglich

Layout: bin neugierig

URL/Adressleistengröße anpassen

auf Amazon einen Submit Button bei hover die Farbe ändern in CSS Datei ?