CSS in TB 102.1.0 ohne Funktion (1)

Boersenfeger

CSS

Nachfolgende Codes funktionieren nicht mehr in TB 102.1.0

/*  Schrift in Tabs */
    tab .tab-text {
    font-size: 16px !important;
    font-weight: bold !important; 
    }    
    
/*  Menüleiste fett */
    #mail-menubar {
    font-size: 16px !important;    
    font-weight: bold ! important;
    color: white ! important;
    }

------------------------------------------------------------

    /*  TB Manager angepasst */

    #threadCols .treecol-text {

    font-weight: bold !important; }

    /*  Hintergrund der Button auf der rechten Seite */

    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: antiquewhite !important;
      color: black !important;
      font-weight: bold !important;
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") {
     @media (prefers-color-scheme: dark) {
     addon-list addon-card:not([expanded="true"]) panel-list *,
     .more-options-menu panel-item {
     background: black !important;
     color: white !important;
    }  
    }
    }
    
    addon-list panel-item {
      margin: 0 1px !important;
      box-shadow: inset 0 0 3px 3px grey;
    }
    
   
    /*  Reduce Size of default Buttons */

    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 6px 20px !important; /* 5px ist die Höhe der rechten Button */
    }
    
    /*  Entfernt den Drei-Punkte-Button aus dem Container */

    addon-card .more-options-button {
      display: none !important;
    }

    /*  Remove Button Icon */

    addon-list panel-item {
      --icon: unset !important;
    }
    
    /*  Restore Buttons */
    
    addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      box-shadow: unset !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;     
    }

    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }

    panel-item[action="preferences"] {
      order: -1;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }
    
    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 300px !important;
      z-index: 1000 !important;      
    }
    
    addon-page-options panel-list panel-item {
      min-width: 280px !important;
      width: 280px !important;      
    }
    
    .sticky-container {
      z-index: 1000 !important;
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-inline-start: 0px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 260px !important;
      width: 260px !important;     
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
        
    addon-list addon-card:not([expanded="true"]) panel-list {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      box-shadow: none !important;
      background: unset !important;
      border: none !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 65px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

    /*  Nummerierung der installierten Erweiterungen */

    body {
    counter-reset: section !important;                     
    }
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
    font-size:18px!important;  
    color: red !important;
    font-weight: bold !important;
    counter-increment: section;                 
    content: counter(section, decimal-leading-zero)". ";
    margin-left: -8px !important;
    padding-right: 8px !important; 
    margin-top:4px!important;
    }  

    /*  Abstand zwischen den Containern */  
    
    addon-card .addon { margin: 5px !important; 
    }

    /*  Höhe der Container */
    
    addon-list[type="extension"]{ --card-padding: 10px }
    addon-card .addon-card-collapsed{ margin-bottom: 2px !important; /* Button rechts Abstand vom oberen Rand */
    }    

    /*  Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw.*/
    
    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
    right: 55px !important; 
    }

    /*  Abstand der Button vom oberen Rand bei Plugins, Wörterbücher, usw. */
    
    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -50px !important;
    }

    /*  Abstand der Button vom oberen Rand bei Themes */
    
    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -20px !important;
      margin-left: -100px !important;
    }

    /*  Breite der Elemente anpassen */

    addon-list addon-card > .addon.card{
        width: 80vw !important;    
        addon-card[expanded] >.addon.card    
        width: 80vw !important;
    }

    /*  Ausdehnung der Container zum rechten Rand */
    .addon.card {
       width: 1340px;
    }

    input[type="checkbox"].toggle-button {
      margin-right: 430px !important; /* blauer Button -Deaktivieren/Aktivieren- Abstand vom rechten Rand */
    }
       

    /*  Abstand der Button zum linken Rand */
    
    #categories > .category, .sidebar-footer-list, #helpButton, #addonsButton {
    margin-left: 1px !important; 
    } 
    
    
    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 1px !important; /*Abstand zum Button darüber*/
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 5px 5px #888;
    }
    
    /*  Aktiver Button rot, Schrift weiß */
    
    #categories > .category[selected],
    #preferencesButton {
      color: white !important;
      background-color: red !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }

    /*  Hintergrund der Button blau, Schrift weiß bei hover mit der Maus */
    
    #categories > .category:hover, #preferencesButton:hover, #helpButton:hover, #addonsButton:hover {
      color: white !important;
      background-color: blue !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }

    /*  Hintergrund bei Hover auf das Zahnrad-Symbol ausblenden */
    
    button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
    }    
    button:focus,
    button:enabled:hover {
    background-color: blue !important;
    border-radius: 15px !important;
    color: white ! important;
    box-shadow: inset 0 0 5px 5px lightgrey;
    }
    
    /*  Optionen-Button */

    button.more-options-button:nth-child(1) {
    position: absolute !important;
    left: 19% !important;
    margin-top: -15px !important;
    }

    /*  Kein Update gefunden */    
    #updates-message {
    font-weight: bold !important;
    }

    /*  Bei "Themes" die Grafiken ausblenden */
    
    .card-heading-image {
    display: none !important;
    }
      
    /*  Add-ons entdecken entfernt */

    .category[name="discover"] {
    display:none!important;
    }
    
    /*  Erweiterungssuche ausblenden */

    .category[is="discover-button"] {
    display: none !important;
    }
    
    /*  Erweiterungssuche ausblenden */

    .main-search {
    display: none !important;
    }    
    
    /*  Ausblenden TB Optionen */

    #header-inner,
    .sidebar-footer-button,
    .message-bar    {
    display:none!important;
    }
    
    /*  Kategorien in abgerundeten Buttons */

    #preferencesButton,
    #addonsButton,
    #helpButton,
    #category-availableUpdates    {
    background-color: red !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }    

    
    /*  Privatmodus und empfohlene Erweiterungen Icons entfernen */

    .addon-badge-recommended,
    .addon-badge-private-browsing-allowed {
    display:none !important; }


    /*  Umrandung bei Hover breiter Rand und andere Farbe */

    :root {
    --card-outline-color: LimeGreen !important;
    }

    /*  Addons-Verwaltung: Hintergrundfarben und vom Container für about:preferences */

    #nav-header,
    #category-box {
    background-color:darkkhaki!important;
    }
    #discover-view,
    #view-port,
    #react-view {
    background:blanchedalmond !important;
    font-size: 15px!important;
    }
    richlistbox.list > richlistitem.addon {
    background:white!important;
    margin-left:-20px !important;
    margin-top:  7px !important;
    }
    #list-view > #addon-list .description-container {
    margin-left: 350px !important;
    margin-top: -10px !important;
    border-radius:60px !important;
    padding: 5px 8px 2px 7px !important; 
    }    
    #list-view > #addon-list .addon.addon-view {
    padding: 5px 80px 2px 7px !important;
    border-radius:60px !important;
    }

/*   Kategorien nicht angeklickt, Text dunkelrot */

    *|*.category {
    color:darkred!important;
    }

/*   Kategorien hover Hintergrund + Schrift */

    *|*.category:hover {
    color:white!important;
    background:red!important;
    }
    }

/*      Einstellungenfenster verbreitern */
    
    @-moz-document url-prefix(about:preferences){
    .pane-container
    {
     width: 900px !important;
    }
    }              
    
    /*   Unter Plugins Nachfragen ob aktiviert werden soll entfernt */

    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
    display: none !important;
    }    
    
    /*   Ausblenden der Suchleiste, Empfehlungen und Thunderbird Optionen */

    #header-inner,
    .sidebar-footer-button,
    .message-bar,    
    #header-search,
    #help-button,
    #tb-legacy-extensions-notice,
    #search-label, 
    #category-discover     {
    display:none!important;
    }
    
    /*  Farbe der Sidebar */

    #sidebar {
    background: darkkhaki !important;
    }
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
    background: blanchedalmond !important;
    font-size: 15px !important;
    }
    richlistbox.list > richlistitem.addon {
    background:white!important;
    margin-left:-20px !important;
    margin-top:  7px !important;
    }
    #list-view > #addon-list .description-container {
    margin-left: 350px !important;
    margin-top: -10px !important;
    border-radius:60px !important;
    padding: 5px 8px 2px 7px !important; 
    }    
    #list-view > #addon-list .addon.addon-view {
    padding: 5px 80px 2px 7px !important;
    border-radius:60px !important;
    }

Alles anzeigen

Bastler

Hallo,

ist in den 'Erweiterten Einstellungen' folgende Vorgabe so gesetzt?

toolkit.legacyUserProfileCustomizations.stylesheets -> true

milupo

Auch hier: Warum verteilst du die Codes nicht auf mehrere CSS-Dateien und was funktioniert genau nicht? Du machst es dir etwas einfach: Du präsentierst eine Datei von 430 Zeilen und nun macht mal. Einzelne Codes kann man einfacher testen.

Mapenzi

Zitat von milupo

Warum verteilst du die Codes nicht auf mehrere CSS-Dateien

Wie ist das zu verstehen? Es gibt nur jeweils eine userChrome.css Datei und eine userContent.css Datei im Profilordner.

Oder ich habe da seit jahren einen Trick verpasst!

Wehrscheinlich meinst du aber, dass man die CSS Code innerhalb der Datei gruppieren sollte (wie ich und andere es seit Jahren handhaben):

z. B. eine Gruppe, die die Konten/Ordnerliste verändert, eine andere, die die Themen/Nachrichtenliste betrifft, eine weitere nur für den Kalender, usw. ...

Zitat von milupo

Du präsentierst eine Datei von 430 Zeilen und nun macht mal.

Da gebe ich dir recht. Bei vielen Code weiß man nicht genau, wo sie greifen sollen.

Unter einem "TB-Manager" kann ich mir nichts vorstellen und auch bei den vielen Codes für Button ist es schwer zu erahnen, wo letztere sich befinden, außer rechts oder links ........

milupo

Zitat von Mapenzi

Wie ist das zu verstehen? Es gibt nur jeweils eine userChrome.css Datei und eine userContent.css Datei im Profilordner.
Oder ich habe da seit jahren einen Trick verpasst!

Du kannst doch Codes in eine CSS-Datei auslagern und die Datei mit dem Befehl @import einbinden. Im Firefox-Forum habe ich mit einem anderen Mitglied ein einheitliches Vorgehen vereinbart. Dabei werden im Ordner chrome die zwei Unterordner CSS (GUI) und CSSWeb (Websites) angelegt und darin die jeweiligen CSS-Dateien abgespeichert. Hier geht es um die Benutzeroberfläche, also würde das dann in der userChrome.css so aussehen:

CSS

@import "CSS/beispieldatei.css";

Dadurch wird also die Datei eingelesen.

Die Namen der Unterordner kann aber jeder für sich selbst festlegen, es muss nur der richtige im Pfad innerhalb der userChrome.css angegeben werden. Wie gesagt, wir haben CSS und CSSWeb nur verwendet, um eine einheitliche Vorgehensweise für Anfänger zu haben.

Thunder

Letztlich entscheidend bei der Diskussion hier und im parallelen Thema ist, dass Boersenfeger wohl dafür kritisiert wird, dass er zu viel CSS-Code zur Diskussion stellt, bei dem man gar nicht überblicken kann was nun funktioniert und was nicht. Es wäre also nett, wenn man jeweils "nur" den relevanten Teil des CSS zur Diskussion stellt.

milupo

Ach, noch etwas: Man kann natürlich in der userChrome.css @import-Befehle und normalen CSS-Code mixen, wichtig ist aber, dass vor den @import-Befehlen kein anderer Text, also auch kein CSS-Code, stehen darf. @import-Befehle müssen also immer am Anfang der userChrome.css stehen.

milupo

Zitat von Thunder

Es wäre also nett, wenn man jeweils "nur" den relevanten Teil des CSS zur Diskussion stellt.

Ich fürchte, dass er gar nicht weiß, was der relevante Teil ist. Wenn der Code auf unterschiedliche Dateien verteilt ist, kann man die CSS-Dateien deaktivieren, ähnlich wie man es bei Add-ons macht, um das „schuldige“ herauszufinden.

Bastler

Hallo,

vielleicht sollten wir einfach warten wie Boersenfeger sich äußert, ob gar nichts geht und / oder

toolkit.legacyUserProfileCustomizations.stylesheets -> true geschaltet ist.

milupo

Zitat von Bastler

vielleicht sollten wir einfach warten wie Boersenfeger sich äußert, ob gar nichts geht und / oder
toolkit.legacyUserProfileCustomizations.stylesheets -> true geschaltet ist.

Letztlich hast du recht, trotzdem war alles wichtig, was bisher hier geschrieben wurde. Er ist kein Anfänger, er verwendet auch für Firefox zahlreiche Codes.

Mapenzi

Zitat von milupo

Du kannst doch Codes in eine CSS-Datei auslagern und die Datei mit dem Befehl @import einbinden.

Ok, das ist mir ehrlich gesagt zu umständlich.

Meine CSS Codes befinden sich in einer Datei und sind gemäß der Aufteilung der GUI gruppiert, was die Übersicht erheblich erleichtert.

milupo

Zitat von Mapenzi

Ok, das ist mir ehrlich gesagt zu umständlich.
Meine CSS Codes befinden sich in einer Datei und sind gemäß der Aufteilung der GUI gruppiert, was die Übersicht erheblich erleichtert.

Das kann jeder machen, wie er will. Aber die Datei kann lang werden. Du kannst natürlich auch einzelne Codes in der Datei auskommentieren, wenn du nicht weißt, wo der Wurm drin ist. Ob das weniger umständlich ist …, na ja. Wenn die Datei sehr lang ist, musst du die dann hier als Zip-Datei einreichen, weil die Anzahl der Zeilen des Code-Kastens begrenzt ist.

dharkness21

Zitat von Thunder

dass er zu viel CSS-Code zur Diskussion stellt

Das bisschen Code, sprich 12kB? Hier wird von 110kB CSS-Voodoo 110kB ausgeführt, sprich alles was vor den Update angepasst war ist auch weiterhin angepasst.

milupo

Zitat von dharkness21

Das bisschen Code, sprich 12kB?

Dann kann er doch erst recht testen, er hat den Code ja gegliedert. Dadurch lässt sich einschränken, was nicht funktioniert. Er lässt uns aber von vornherein die Arbeit machen. Und das steht im Code-Kasten des Parallelthreads:

Zitat

weiterer Code ist entfernt wegen der 20000 Zeichen Regel

Toll.

Mapenzi

Zitat von milupo

Du kannst natürlich auch einzelne Codes in der Datei auskommentieren

Wie gesagt, meine Code sind kommentiert und gruppiert je nach Lokalisation der Elemente in der GUI.

Zitat von milupo

Wenn die Datei sehr lang ist, musst du die dann hier als Zip-Datei einreichen,

Ich wüsste nicht, aus welchem Grund ich meine komplette userChrome.css Datei mit ihren 162 Regeln und 24 kB im Forum veröffentlichen würde.

Allenfalls eine oder mehrere Regeln, für die ich nach einem bedeutendem Update keine Anpassung finde.

Thunder

Leute, was soll die Diskussion um die Anzahl der Zeilen oder um die KByte des Codes? Wenn ich im CSS alle möglichen Regeln drin habe, dann erwarte ich zumindest von jemandem wie Boersenfeger, dass er genauer Beschreibt was nicht funktioniert und um welche CSS Rule es sich dabei handelt, die nicht funktioniert. Es kann natürlich theoretisch auch sein, dass alle Rules aus dem gezeigten CSS nicht mehr funktionieren. Aber auch dies könnte man vielleicht etwas differenzierter als Problem beschreiben.

milupo

Zitat von Mapenzi

Ich wüsste nicht, aus welchem Grund ich meine komplette userChrome.css Datei mit ihren 162 Regeln und 24 kB im Forum veröffentlichen würde.
Allenfalls eine oder mehrere Regeln, für die ich nach einem bedeutendem Update keine Anpassung finde.

Ja, du. Und es sollte auch so sein.

Boersenfeger

Moin, sorry, ich gebe zu, die Fragestellung war nicht gut...

Fakt ist, das nach dem gestrigen UpDate einige Codes funktionierten und einige nicht...

Der Eintrag in about:config ist selbstverständlich vorhanden, denn es handelt sich ja um ein VersionsUpDate und nicht um eine Neuinstallation. Alle Vorarbeiten sind schon Jahre vorhanden gewesen.

Ich nutze das Script UserCSSLoader4g+TB.uc.js in der Version 0.0.4g. Gibts ggf. ein UpDate dazu? Die Webseite von griever ist leider auf Japanisch, so das ich dort nicht nach UpDates schauen kann.

Ich habe jetzt einfach alle Codes in die userChrome.css bzw userContent.css kopiert und die Masse funktioniert dann auch so.

Das das nicht die beste Lösung ist, weiss ich...

Eigentlich fehlt mir jetzt nur noch die leichte Hintergrundeinfärbung im Nachrichtenfeld

Die war so leicht sandfarben

Die Nummer ist #ffebcd

Wenn mir da jemand einen Code zaubern könnte, wäre das zauberhaft. Noch besser, wenn diese Farbe auch in der Ordnerliste/Sidebar zum Tragen käme.

Vielen Dank für euer Interesse

milupo

Zitat von Boersenfeger

ch nutze das Script UserCSSLoader4g+TB.uc.js in der Version 0.0.4g. Gibts ggf. ein UpDate dazu? Die Webseite von griever ist leider auf Japanisch, so das ich dort nicht nach UpDates schauen kann.

Das Skript liest doch nur die CSS-Dateien ein. Es gibt nur zwei Anzeichen, dass das Skript nicht funktioniert:

1. Der zugehörige Eintrag bzw. das zugehörige Symbol ist nicht zu sehen

2. Deine CSS-Dateien werden darunter nicht aufgelistet

Im zweiten Fall können dann natürlich auch die CSS-Dateien nicht funktionieren. Ist aber Eintrag bzw. Symbol da und alle CSS-Dateien sind aufgelistet, liegt der Wurm in den CSS-Codes einer oder mehrerer CSS-Dateien.

milupo

Zitat von Boersenfeger

Ich habe jetzt einfach alle Codes in die userChrome.css bzw userContent.css kopiert und die Masse funktioniert dann auch so.
Das das nicht die beste Lösung ist, weiss ich...

Es ist immer noch unklar, was nicht funktioniert. Ob das so die beste Lösung ist oder nicht, musst du selbst entscheiden.

Zitat von Boersenfeger

Eigentlich fehlt mir jetzt nur noch die leichte Hintergrundeinfärbung im Nachrichtenfeld

Das ganze Fenster oder nur der Teil mit Inhalt?

Beim ganzen Fenster sollte folgender Code funktionieren:

CSS

html {
    background-color: #ffebcd !important;
    }

Wenn nur der Inhaltsteil unterlegt werden soll, sollte dies funktionieren:

CSS

pre.moz-quote-pre {
    background-color: #ffebcd !important;
        }

Ob das irgendwo Nebenwirkungen zeigt, kann ich nicht sagen. Das Problem ist, dass der Code unter #document liegt, über das man nicht hinweg zugreifen kann.

EDIT: Beide Code

CSS in TB 102.1.0 ohne Funktion (1)

Thunderbird 138.0.1 veröffentlicht

Thunderbird 128.10.1 ESR veröffentlicht

Ähnliche Themen

Problem nach Update auf Version 102.0

TB nach Windows auffrischen gelöscht, nach TB neu installieren wird mein altes Konto+Profil nicht erkannt

TB 91.5.0 - "Show adress only" - Warum nicht ohne Add-on in TB integriert

UserCSSLoader.uc.js arbeitet in TB 91nicht, in FF 91schon.

Cursor-Abstand von Pulldown-Menü zu gering