Beiträge von Mitleser

Mitleser

Sieht gut aus, dieses verzerrte Logo habe ich noch gefunden:

Mitleser

Funzt das:?

CSS

#PlacesToolbarItems > toolbarbutton[label="test"] >.toolbarbutton-text {
    display: none !important;
}
#PlacesToolbarItems > toolbarbutton[label="test"]::before {   
    content: '🍺' !important;
    display: block !important;
    font-size: 11px !important;
/*color: transparent !important;*/
    margin-left: 16px !important;
    margin-top: -7px !important;
}

Alles anzeigen

Mitleser

@BrokenHeart

Danke!

Mitleser

Zitat von 2002Andreas

Ansonsten sind auch bei dir die Ordner doppelt, nur mit einem weiteren eigenem Symbol.

Ein weiteres Symbol war der Sinn, um die Ordner ohne Text anders zu gestallten und damit besser unterscheiden zu können.

Zitat von 2002Andreas

Ansonsten sind auch bei dir die Ordner doppelt

Habe ich nicht verstanden.

Mitleser

Sieht hier so aus:

Mitleser

Eine andere Spielerei um Ordner zu 'markieren', wäre ein Emoji/Emoticon zum Ordnersymbol hinzuzufügen (margins und font-size müssen angepasst werden):

CSS

#PlacesToolbarItems > toolbarbutton[label="test"]::before {   
    content: '🍺' !important;
    display: block !important;
    font-size: 11px !important;
    margin-left: 16px !important;
    margin-top: -7px !important;
}

Mitleser

Zitat von Horstmann

Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast

Nö, habe ich nicht. Damit habe und werde ich mich auch nicht beschäftigen, 'form follows funktion' ist bei diesem Thema auch nicht Programm, sondern eher 'mir ist gerade langweilig'. Entschuldigung für den vorherigen Beitrag.

Mitleser

Mir ist aufgefallen. dass du nicht:

#tabbrowser-tabs[haspinnedtabs]

#tabbrowser-tabs[positionpinnedtabs]

#tabbrowser-arrowscrollbox[overflowing]

nutzt.

Ein Beisp. wäre:

CSS

#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 
    margin-inline-start: .... !important;
}

Mitleser

Danke! Jetzt die neuere Version:

JavaScript

(function() {

    if (!window.gBrowser){
        return;
    }
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

const bExecuteOnStart = false;   //[true] Ausführung des Skripts beim Start zulassen | [false] Nur händische Aktivierung über Button
const buttonIcon = "16synchronization-13neongreen.svg"  // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonPath = "/chrome/css/image/" // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label = 'Alle Tabs neu laden'
const tooltiptext = 'Alle Tabs neu laden'

// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir))
    try {
        CustomizableUI.createWidget({
            id: 'RelAllTabs',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {            
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                let props = {
                    id: 'RelAllTabs',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: label,
                    tooltiptext: tooltiptext,
                    style: "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');"
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
//-----menu------------------
const menuitem1 = document.createXULElement('menuitem');
      menuitem1.id = 'RelAllTabs-con';
      menuitem1.setAttribute('label', label);
//      menuitem1.setAttribute('tooltiptext', tooltiptext);
      menuitem1.classList.add('menuitem-iconic');
      menuitem1.style = "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');";
const refItem1 = document.getElementById('context_reloadTab');
         refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
//-----menu------------------
    function onReady() 
    {    
        console.log("Ready: ReloadAllTabsOnStart");
    
        if( bExecuteOnStart ) {
            reloadAllTabs(true);
        }
    }    
    
    if (window.readyState !== "loading") {
        setTimeout(onReady,300); 
    }
    else 
    {
        window.addEventListener("DOMContentLoaded", onReady );
    }

    
    document.getElementById('RelAllTabs').addEventListener( "click", onClick ); // button
    document.getElementById('RelAllTabs-con').addEventListener( "click", onClick ); // menu

 
    function onClick(aEvent) {
        if( aEvent.button == 0 ) {
            reloadAllTabs(false);
        }
    }
    
    function reloadAllTabs(bTwice) {
        
        let tabs = gBrowser.tabContainer.allTabs;
        let loadFlags = Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE  | Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_PROXY ;
        let nTimeout1 = 0;
        let nTimeout2 = 2000;
                    
        if(bTwice)
            nTimeout1 = 1000;
                    
        setTimeout(function() {
            for (let nr = 0, count = tabs.length; nr < count; nr++) {
                tabs[nr].linkedBrowser.reloadWithFlags(loadFlags);
            }
        }, nTimeout1);
        
        if(bTwice) {
            setTimeout(function() {
                for (let nr = 0, count = tabs.length; nr < count; nr++) {
                    tabs[nr].linkedBrowser.reloadWithFlags(loadFlags);
                }
            }, nTimeout2);
        }
    }
    
})();

Alles anzeigen

Mitleser

BrokenHeart

Ich habe sonst mit dem Add-On 'Tab Reloader' alle Tabs geladen.

Das ist nun vorbei. Vielen Dank für das script. Habe es für mich umgebastelt, so dass es auch einen Menüeintrag im Tabdopdown unterhalb von 'Tab neu laden' anzeigt. Den Button kommentiere ich aus oder schiebe ihn einfach ins 'widget-overflow'.

JavaScript

(function() {

    if (!window.gBrowser){
        return;
    }
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

const bExecuteOnStart = false;   //[true] Ausführung des Skripts beim Start zulassen | [false] Nur händische Aktivierung über Button
const buttonIcon = "16synchronization-13neongreen.svg"  // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonPath = "/chrome/icons/" // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label = 'Alle Tabs neu laden'
const tooltiptext = 'Alle Tabs neu laden'

// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir))
    try {
        CustomizableUI.createWidget({
            id: 'RelAllTabs',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {            
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                let props = {
                    id: 'RelAllTabs',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: label,
                    tooltiptext: tooltiptext,
                    style: "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');"
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
//-----menu------------------
const menuitem1 = document.createXULElement('menuitem');
      menuitem1.id = 'RelAllTabs-con';
      menuitem1.setAttribute('label', label);
//      menuitem1.setAttribute('tooltiptext', tooltiptext);
      menuitem1.classList.add('menuitem-iconic');
      menuitem1.style = "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');";
const refItem1 = document.getElementById('context_reloadTab');
         refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
//-----menu------------------
    if( bExecuteOnStart ) {
        reloadAllTabs(true);
    }
    
    document.getElementById('RelAllTabs').addEventListener( "click", onClick ); // button
    document.getElementById('RelAllTabs-con').addEventListener( "click", onClick ); // menu

 
    function onClick(aEvent) {
        if( aEvent.button == 0 ) {
            reloadAllTabs(false);
        }
    }
    
    function reloadAllTabs(bTwice) {
        
        let tabs = gBrowser.tabContainer.allTabs;
        let loadFlags = Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE  | Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_PROXY ;
        let nTimeout1 = 0;
        let nTimeout2 = 2000;
                    
        if(bTwice)
            nTimeout1 = 1000;
                    
        setTimeout(function() {
            for (let nr = 0, count = tabs.length; nr < count; nr++) {
                tabs[nr].linkedBrowser.reloadWithFlags(loadFlags);
            }
        }, nTimeout1);
        
        if(bTwice) {
            setTimeout(function() {
                for (let nr = 0, count = tabs.length; nr < count; nr++) {
                    tabs[nr].linkedBrowser.reloadWithFlags(loadFlags);
                }
            }, nTimeout2);
        }
    }
    
})();

Alles anzeigen

Mitleser

OK!

Zeile: 49

Code

document.getElementById('navigator-toolbox').parentNode.parentNode.insertBefore(

einen

Code

.parentNode

entfernen.

Mitleser

Sorry, aber du trittst gerade unser Engagement mit Füssen, deshalb keine Hilfe von mir mehr...

Mitleser

Das 4 Tg. alte Update hast du sicherlich schon gemacht?

replace XPCOMUtils.defineLazyModuleGetters · Aris-t2/CustomJSforFx@16d988c

github.com

@milupo

Aber auch dort ist deine Änderung relevant:

Zeile 161

Zeile 250

Mitleser

Zitat von heiko

Jetzt wäre nur noch der ungelesene Tab. Geht das überhaupt, den in einer 3. Hintergrundfarbe + Schrifteigenschaften anzupassen?

Ich nutze dieses Script:

uc.css.js/JS/unreadTabMods.uc.js at master · aminomancer/uc.css.js

A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is…

github.com

Mitleser

Hier noch eine komplizierte (und auch überflüssige) Lösung:

Spoiler anzeigen

Da ich die url-bar möglichst clean halte, habe ich die Icons so ausgeblendet:

CSS

/*Fingerprinting, und andere Addons ausblenden*/
#page-action-buttons {   
    display: none !important;
}

Ich möchte aber nicht auf die Übersetzungsfunktion (und einen Button) verzichten. Deshalb verschiebe ich den Button mit diesem bekannten

script wohin ich möchte (wenn die Funktion gefordert ist, erscheint der Button an der definierten Stelle):

JavaScript

//B_Uebersetzung.uc.js
(function() {
  if (!window.gBrowser) return;

  /* ------ */
  const origID = "translations-button";// ID des originalen Buttons
  const label = "Website-Übersetzung";
  const tooltiptext = "Website-Übersetzung";
  /* ------ */

  const menuButton = document.getElementById(origID),
        buttonID = 'ucjs_' + origID;

  if (!CustomizableUI.getPlacementOfWidget( buttonID )) {
    try {
      CustomizableUI.createWidget({
        id: buttonID,
        type: 'custom',
        defaultArea: CustomizableUI.AREA_NAVBAR,
        onBuild: function(aDocument) {
          let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem');
          toolbaritem.id = buttonID;
          toolbaritem.className = 'chromeclass-toolbar-additional';
          toolbaritem.setAttribute('label', label);
          return toolbaritem;
        }
      });
      if (!CustomizableUI.getPlacementOfWidget( buttonID )) {
        menuButton.style.display = 'none';
        return;
      };
    } catch(e) {
      menuButton.style.display = 'none';
      return;
    };
  };

  setTimeout(function() {
   document.getElementById(buttonID).appendChild(menuButton);
   menuButton.setAttribute('consumeanchor', buttonID);
   menuButton.setAttribute('label', label);
   menuButton.setAttribute('tooltiptext', tooltiptext);
  }, 0);
}());

Alles anzeigen

Da die Buttonicons noch zentriert werden müssen, könnte man diese so ähnlich anpassen:

CSS

/*B_Uebersetzung.css*/
#translations-button-icon {
    margin-top: -2.5px !important;
    margin-bottom: 2.5px !important;
    transform: scale(0.92, 0.92) !important;
    overflow: hidden !important;
}
#translations-button-locale {
    margin-top: -5px !important;
    overflow: hidden !important;
}
#translations-button-circle-arrows {
    margin-top: -2.5px !important;
    margin-bottom: 2.5px !important;
    overflow: hidden !important;
}

Alles anzeigen

Mitleser

Zitat von Mira_Belle

Echt super! Spasses halber habe ich mal "mein" orange in der rootChrome.css gegen lime getauscht,
irre wie einfach.

Das könnte aber wiederum einen Button erforderlich machen😂️🤣️?

Mitleser

Wenn du deine Variablen (nicht FF-Variablen) nur einmalig deklarierst, kannst du sie irgendwo in der userchrome.css mit @import als Datei einbinden. Wenn du unsauber programmierst, z. B. die Variablendeklaration kommt mehrfach vor, überschreibt das was später geparst wird das Vorherige...aber das ist ja nichts Neues (Unten überschreibt Oben). Und da es dir doch garnicht um Variablen die von FF kommen geht, kommt sich auch nichts ins 'gehege'.

Mitleser

Zitat von Mira_Belle

aber mal ganz ehrlich, wer wird denn
für seine Page Variablennamen wie var(--uc-color-orange-normal) verwenden?

Das kann bei großen Dateien/umfangreichen Sites durchaus Sinn machen (die Variablen liegen nach wie vor in einem von der userchrome.css eingebundenem Unterordner von chrome).

Beispiel:

Spoiler anzeigen

CSS

@-moz-document 
domain("kn-online.de"),
domain("ln-online.de"),
domain("ostsee-zeitung.de"),
domain("dnn.de"),
domain("maz-online.de"),
domain("goettinger-tageblatt.de"),
domain("haz.de"),
domain("neuepresse.de"),
domain("paz-online.de"),
domain("waz-online.de"),
domain("sn-online.de"),
domain("lvz.de"),
domain("op-marburg.de"),
domain("rnd.de"),
domain("siegener-zeitung.de") {
/*■■■■■■■■■■■■■■■■■Allgemein■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body { 
    background: var(--uc-color-theme-grey) !important;
}
/*■■■■■■■■■■■■■■■■■Autor Startseite■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="contentteaserstyled__authornamearea-"] {
    color: var(--uc-color-urlbar-font) !important;
    font-style: italic !important;
}
/*■■■■■■■■■■■■■■■■■Autor Description Artikelseite■■■■■■■■■■■■■■■■■*/
[class^="ArticleMetastyled__ArticleMetaText-"] {
    color: var(--uc-color-urlbar-font) !important;
    font-style: italic !important;
}
/*■■■■■■■■■■■■■■■■■Autor Description Artikelseite Overlay■■■■■■■■■*/
[class^="ArticleDetailsstyled__ArticleDetailsShareOverlayFull-"] {
    background-image: none !important;
}
/*■■■■■■■■■■■■■■■■■Autor Timestamp Artikelseite■■■■■■■■■■■■■■■■■■■*/
[class^="Timestampstyled__Timestamp-"] {
    color: var(--uc-color-urlbar-font) !important;
    font-style: italic !important;
}
/*■■■■■■■■■■■■■■■■■Copyright■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Copyrightstyled__Copyright-"] {
    color: var(--uc-color-urlbar-font) !important;
    font-style: italic !important;
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■Avatar■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="ContentTeaserstyled__AvatarArea-"] {
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■Button Avatar socialmedia aus/einklappen rund■■*/
[class^="ArticleDetailsstyled__"] > [class^="Buttonstyled__Button-"] {
    background-color: var(--uc-color-dd-active) !important;
    border-color: var(--uc-color-orange-normal) !important;
    color: var(--uc-color-theme-font) !important;
}
/*■■■■■■■■■■■■■■■■■Pfeilicon ausklappbarer Bildtext rund■■■■■■■■■■*/
[class^="ArticleImagestyled__"] > [class^="Buttonstyled__Button-"] {
    background-color: var(--uc-color-dd-active) !important;
    border-color: var(--uc-color-orange-normal) !important;
    color: var(--uc-color-theme-font) !important;
    height: 32px !important;
    width: 32px !important;
}
[class^="ArticleImagestyled__ArticleImageOpenButton-"],
[class^="ArticleImagestyled__ArticleImageClosedButton-"] {
    filter: grayscale(70%)opacity(60%) !important;
}
[class^="ArticleImagestyled__ArticleImageOpenButton-"] > [class^="Buttonstyled__Button-"] > [class^="Buttonstyled__ButtonIcon-"],
[class^="ArticleImagestyled__ArticleImageClosedButton-"] > [class^="Buttonstyled__Button-"] > [class^="Buttonstyled__ButtonIcon-"]  {
    height: 32px !important;
    width: 32px !important;
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■Button Link eckig abonieren, spielen, chat■■■■■*/
[class^="Buttonstyled__ButtonLink-"] > [class^="Buttonstyled__Button-"] {
    background-color: var(--uc-color-dd-active) !important;
    border-color: var(--uc-color-orange-normal) !important;
    color: var(--uc-color-theme-font) !important;
    font-size: 0.7em !important;
}
/*■■■■■■■■■■■■■■■■■Button Mehr anzeigen eckig■■■■■■■■■■■■■■■■■■■■■*/
[class^="LoadMorestyled__Button-sc-"] > [class^="Buttonstyled__Button-"] {
    background-color: var(--uc-color-dd-active) !important;
    border-color: var(--uc-color-orange-normal) !important;
    color: var(--uc-color-theme-font) !important;
    font-size: 0.7em !important;
    filter: grayscale(70%)opacity(60%) !important;
}
/*■■■■■■■■■■■■■■■■■Alle Überschriften■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h2[class^="Headlinestyled__Headline-"] {
    color: var(--uc-color-theme-font) !important;
    line-height: normal !important;
}
[class^="ContentTeaserstyled__HeadlineArea-"] {
    line-height: normal !important;
}
/*■■■■■■■■■■■■■■■■■ThemenBlock Überschriften■■■■■■■■■■■■■■■■■■■■■■*/
svg[class^="BlockTitlestyled__BlockTitleChevron-"] {
    color: var(--uc-color-vanilla) !important;
    font-size: 1.1em !important;
}
[class^="BlockTitlestyled__Title-"] {
    color: var(--uc-color-vanilla) !important;
    font-size: 1.1em !important;
}
/*■■■■■■■■■■■■■■■■■ThemenBlock Überschriften Icon■■■■■■■■■■■■■■■■■*/
[class^="BlockTitlestyled__BlockTitleIcon-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Alle untergeordneten Überschriften 2.Klasse■■■■*/
[class^="Overlinestyled__Overline-"] {
    font-size: 1.0 !important;
    line-height: 1.1em!important;/*MUSS BEI BEIDEN GEÄNDERT WERDEN*/
}
[class^="ContentTeaserstyled__OverlineArea-"] {
    line-height: 1.1em!important;/*MUSS BEI BEIDEN GEÄNDERT WERDEN*/
}
/*■■■■■■■■■■■■■■■■■Rest Artikelseite■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h5[class^="Headlinestyled__Headline-"] {
    color: var(--uc-color-theme-font) !important;
}
[class^="Captionstyled__Caption-"] {
    color: var(--uc-color-theme-font) !important;
}
/*■■■■■■■■■■■■■■■■■BG Artikelseite Rechts Unten BG■■■■■■■■■■■■■■■■*/
[class^="ContentMainRightRailstyled__ContentMainRightRail-"] {
    background-color: var(--uc-color-dd-hg) !important;
}
/*■■■■■■■■■■■■■■■■■BG Artikelseite■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Articlestyled__Article-"] {
    background-color: var(--uc-color-dd-hg) !important;
    color: var(--uc-color-theme-font) !important;
}
/*■■■■■■■■■■■■■■■■■Text Artikelseite■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Textstyled__InlineText-"] {
    background-color: var(--uc-color-dd-hg) !important;
    color: var(--uc-color-theme-font) !important;
    padding-bottom: unset !important;
    padding-top: unset !important;
    line-height: normal !important;
}
[class^="Textstyled__Text-"]     {
    background-color: var(--uc-color-dd-hg) !important;
    color: var(--uc-color-theme-font) !important;
    padding-bottom: unset !important;
    padding-top: unset !important;
}
/*■■■■■■■■■■■■■■■■■Mehr zum Thema font■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Stackstyled__Stack-sc"] {
    color: var(--uc-color-orange-normal) !important;
}
/*■■■■■■■■■■■■■■■■■Überschrift Kategorieseite■■■■■■■■■■■■■■■■■■■■■*/
[class^="HeaderTextstyled__HeaderText-"] {
    background-color: var(--uc-color-dd-hg) !important;
}
h1[class^="Headlinestyled__Headline-"] {
    color: var(--uc-color-vanilla) !important;
    padding-bottom: unset !important;
    padding-top: unset !important;
    line-height: normal !important;
}
/*■■■■■■■■■■■■■■■■■Links allgemein■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
a {
    color: var(--uc-color-urlbar-font) !important;
}
a:hover {
    color: var(--uc-color-orange-dark) !important;
}
a:visited {
    color: var(--uc-color-green-light) !important;
}
a:visited:hover {
    color: var(--uc-color-green-button) !important;
}
/*■■■■■■■■■■■■■■■■■Links im Navi Artikelseite■■■■■■■■■■■■■■■■■■■■*/
[class^="Breadcrumbstyled__Link-"] {
    color: transparent !important;
}
[class^="Breadcrumbstyled__Link-"]:hover {
    color: transparent !important;
}
[class^="Breadcrumbstyled__Link-"]:visited {
    color: transparent !important;
}
[class^="Breadcrumbstyled__Link-"]:visited:hover {
    color: transparent !important;
}
/*■■■■■■■■■■■■■■■■■Links im Datenschutzhinweis■■■■■■■■■■■■■■■■■■■■*/
[class^="Linkstyled__Link-amotau-"] {
    color: var(--uc-color-orange-dark) !important;
}
[class^="Linkstyled__Link-amotau-"]:hover {
    color: var(--uc-color-orange-darker) !important;
}
[class^="Linkstyled__Link-amotau-"]:visited {
    color: var(--uc-color-green-light) !important;
}
[class^="Linkstyled__Link-amotau-"]:visited:hover {
    color: var(--uc-color-green-button) !important;
}
/*■■■■■■■■■■■■■■■■■Obere Navi Startseite■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="DefaultHeaderstyled__LogoAreaContainer-sc-"],
[class^="HeaderWithNavBarstyled__NavBarHeader-sc-"] {
    background-color: var(--uc-color-theme-gray-light) !important;
    position: static !important;
    margin-bottom: -1px !important;
    box-shadow: none !important;
}
[class^="HeaderContainerstyled__HeaderContainer-"] {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
[class^="Defaultstyled__NavBarDividerShadow-"]::after {
    display: none !important;
}
[class^="Tabstyled__TabTextContainer-"] {
    color: var(--uc-color-urlbar-font) !important;
}
[class^="Tabstyled__Tab-"]:hover {
    border-bottom: 2px solid var(--uc-color-orange-normal) !important;
    border-top: 2px solid transparent !important;
}
/*■■■■■■■■■■■■■■■■■Untere Navi Artikelseite■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Breadcrumbstyled__Link-"] {
    color: var(--uc-color-urlbar-font) !important;
}
[class^="Breadcrumbstyled__Link-"]:hover {
    color: var(--uc-color-theme-font) !important;
}
[class^="Breadcrumbstyled__Title-"] {
    color: var(--uc-color-theme-font) !important;
}
/*■■■■■■■■■■■■■■■■■Obere Navi Startseite Arrow■■■■■■■■■■■■■■■■■■■■*/
[class^="TopNavigationstyled__SplideArrow-"].splide__arrow {
    opacity: 0 !important;
}
[class^="TopNavigationstyled__SplideArrow-"]:hover.splide__arrow {
    opacity: 0 !important;
}
[class^="TopNavigationstyled__SplideArrow-"] {
    background-color: transparent !important;
}
[class^="TopNavigationstyled__SplideArrow-"]:hover {
    opacity: 0 !important;
}
[class^="TopNavigationstyled__SplideArrow-"]::before {
    background: transparent !important;
}
[class^="TopNavigationstyled__SplideArrow-"]::after {
    background: transparent !important;
}
/*■■■■■■■■■■■■■■■■■Untere Navi Startseite Arrow■■■■■■■■■■■■■■■■■■■*/
[class^="CatchlineChainstyled__SplideArrow"] {
    background-color: transparent !important;
}
[class^="CatchlineChainstyled__SplideArrow"]:hover {
    opacity: 0 !important;
}
[class^="CatchlineChainstyled__SplideArrow"]::before {
    background: transparent !important;
}
[class^="CatchlineChainstyled__SplideArrow"]::after {
    background: transparent !important;
}
/*■■■■■■■■■■■■■■■■■Navi Artikelseite Arrow■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="BreadcrumbPathstyled__SplideArrow-"]::before {
    background: transparent !important;
}
[class^="BreadcrumbPathstyled__SplideArrow-"]::after {
    background: transparent !important;
}
[class^="BreadcrumbPathstyled__SplideArrow-"] {
    background: transparent !important;
    opacity: 0 !important;
}
[class^="BreadcrumbPathstyled__SplideArrow-"]:hover {
    opacity: 0 !important;
}
/*■■■■■■■■■■■■■■■■■Navi Startseite 3. Slider Arrow■■■■■■■■■■■■■■■■*/
[class^="SliderChainstyled__ArrowCircle-sc-"] {
    background: transparent !important;
    opacity: 0 !important;
}
[class^="SliderChainstyled__ArrowCircle-sc-"]:hover {
    opacity: 0 !important;
}
/*■■■■■■■■■■■■■■■■■2. Navi Sport■trifft beide slides■■■■■■■■■■■■■■*/
[class^="TopNavigationstyled__Splide-"] {
    background-color: var(--uc-color-theme-gray-light) !important;
}
/*■■■■■■■■■■■■■■■■■Logo Area■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="WordmarkAreastyled__Header-sc-"] {
    background-color: var(--uc-color-theme-grey) !important;
    filter: grayscale(70%)opacity(40%) !important;
}
/*■■■■■■■■■■■■😡️■■■■■Eilmeldung■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="BreakingNewsBannerstyled__Link-"] {
    background-color: var(--uc-color-redorange-button) !important;
}
/*■■■■■■■■■■■■😡️■■■■■Eilmeldung■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="BreakingNewsBannerstyled__Button"] {
    background-color: var(--uc-color-redorange-button) !important;
}
/*■■■■■■■■■■■■😡️■■■■■Eilmeldung Banner■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="base__BaseCell"] > [class^="Linkstyled__Link-sc"] {
    background-color: var(--uc-color-redorange-button) !important;
    color: var(--uc-color-theme-font) !important;
    margin-top: 16px !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
/*■■■■■■■■■■■■■■■■■Artikel oben Startseite■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="CatchlineChainstyled__CatchlineChainWrapper-"] {
    background-color: var(--uc-color-dd-hg) !important;
}
/*■■■■■■■■■■■■■■■■■Bg Images■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Imagestyled__Container-"] > picture > img{
    background-color: var(--uc-color-dd-hg) !important;
}
/*■■■■■■■■■■■■■■■■■Autor Startseite■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="ContentTeaserstyled__AuthorNameArea-"] {
    font-style: italic !important;
    color: var(--uc-color-urlbar-font) !important;
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■Devider■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Dividerstyled__Divider-"] {
    border-top: 1px solid var(--uc-color-dd-btw-hg-over) !important;
    border-left: 1px solid var(--uc-color-dd-btw-hg-over) !important;
}
/*■■■■■■■■■■■■■■■■■Umfrage■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="cmp-"],
[class^="cmp-wrapper"],
[class^="cmp-element"],
[class^="cmp-question"] {
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■BG Letzte Meldungen■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="NewestArticlesstyled__NewestArticles-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■BG CallToActionLayer■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="CallToActionBasestyled__Container-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■BG Messenger■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="MessengerWidgetstyled__MessengerWidgetWrapper-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Text Messenger■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="MessengerWidgetstyled__Title-"],
[class^="MessengerWidgetstyled__Body-"] {
    color: var(--uc-color-urlbar-font) !important;
}
/*■■■■■■■■■■■■■■■■■Content Direkt in Ihre Region■■■■■■■■■■■■■■■■■■*/
[class^="TagListstyled__TagListContainer-sc-"] {
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■BG+Text TagList Uboote■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Tagstyled__Tag-"] {
    color: var(--uc-color-theme-font) !important;
    background-color: var(--uc-color-dd-active) !important;
    border-color: var(--uc-color-dd-active-lighter) !important;
}
/*■■■■■■■■■■■■■■■■■BG TagList■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="TagListstyled__TagList-"] {
    background-color: var(--uc-color-dd-hg) !important;
}
/*■■■■■■■■■■■■■■■■■entweder dies oder das obere■■■■■■■■■■■■■■■■■■■*/
[class^="TagListstyled"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■Startseite: Rechte Leiste ausgrauen/eleminieren■■*/
[class^="RightRailWrapperstyled__RightRailWrapper-sc-"] {
    display: none !important;
}
[class^="RightRailWrapperstyled__RightRailWrapper-sc-"] > :last-child {
    position: static !important;
}
/*■■■■■■■■■■■■■■■■■Text■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="TeaserTextstyled__TeaserText-"] {
    color: var(--uc-color-theme-font) !important;
}
/*■■■■■■■■■■■■■■■■■BG Startbild■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="ChainContainerstyled__ChainContainer-"] {
    background-color: var(--uc-color-dd-hg) !important;
}
/*■■■■■■■■■■■■■■■■■■■BG Titel empfohlener redaktioneller Inhalt■■■*/
[class^="PlaceholderBoxstyled__Title-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■■■BG Content empfohlener redaktioneller Inhalt■*/
/*■■■■■■■■■■■■■■■■■■■BG Content externer Inhalt■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■■■■■■■■■Outbrain■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="PlaceholderBoxstyled__Content-"] {
    display: none !important;
}
[class^="PlaceholderBoxstyled__PlaceholderBox-"] {
    display: none !important;
}
[class^="PlaceholderBoxstyled__InfoText-"] {
    display: none !important;
}
[class^="PlaceholderBoxstyled__LegalText-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■■■BG Titel+Content Mehr zum Thema■■■■■■■■■■■■■■*/
[class^="MoreItemsBlockstyled__MoreItemsBlock-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■■■BG Titel+Content Zitat■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Quotestyled__Quote-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■■■BG Content Datum+Zeit■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="ArticleHeadstyled__ArticleHeadDetailsContainer-"] {
    filter: grayscale(70%)opacity(15%) !important;
}
/*■■■■■■■■■■■■■■■■■Live Icon+VideoZeit■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Badgestyled__Badge-"] {
    border: 1px solid #66666688 !important;
    border-color: #66666688 !important;
    color: var(--uc-color-theme-font) !important;
    background: #66666688 !important;
}
/*■■■■■■■■■■■■■■■■■Play Icon■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="IconCirclestyled__IconCircle-"] {
    border: 1px solid #66666688 !important;
    border-color: #66666688 !important;
    color: var(--uc-color-theme-font) !important;
    background-color: #66666688 !important;
}
[class^="IconCirclestyled__IconCircle-"]:hover {
    color: var(--uc-color-orange-normal) !important;
    background-color: #666666 !important;
}
/*■■■■■■■■■■■■■■■■■BG im Foto (Buckel) eleminieren■■■■■■■■■■■■■■■■*/
div[class^="ContentTeaserstyled__CaptionArea-"] {
    background-color: #55555500 !important;
    width: 100% !important;
    border-radius: 0px !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
}
/*■■■■■■■■■■■■■■■■■Fortschrittsbalken Artikelseite eleminieren■■■■*/
div[class^="ReadProgressstyled__ReadProgressBar-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Footer eleminieren■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Footerstyled__Footer-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Redaktionsnetzwerk eleminieren■■■■■■■■■■■■■■■■■*/
[class^="CoBrandHeaderstyled__CoBrandHeader-"] {
    visibility: collapse !important;
}
/*■■■■■■■■■■■■■■■■■FlyBar eleminieren■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="FlyBarstyled__FlyBarContent-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Platzhalter Werbung eleminieren■■■■■■■■■■■■■■■■*/
[class^="Adstyled__AdWrapper-sc-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■SUBDOMAIN: 1.Ebene ganz oben eleminieren■■■■■■■*/
[class^="paidcontent-registration-header-"] {
    display: none !important;
}
/*■■■■■■■■■■■■■■■■■Infobox■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="Infoboxstyled__Infobox-"] {
    background-color: transparent !important;
    border-color: var(--uc-color-dd-active) !important;
}
/*■■■■■■■■■■■■■■■■■PayIcon wegen NoGo bei Browserscallierung■■■■■■*/
[class^="PaidIconstyled__PaidIcon-"]{
    min-height: 1.0em !important;
    min-width: 1.0em !important;
    max-height: 1.0em !important;
    max-width: 1.0em !important;
    height: 1.0em !important;
    width: 1.0em !important;
}
[class^="PaidIconstyled__IconWithTransparentPlus-"]  {
    min-height: 1.0em !important;
    min-width: 1.0em !important;
    max-height: 1.0em !important;
    max-width: 1.0em !important;
    height: 1.0em !important;
    width: 1.0em !important;
}
[class^="PaidIconstyled__IconWithWhitePlus-"]  {
    min-height: 1.0em !important;
    min-width: 1.0em !important;
    max-height: 1.0em !important;
    max-width: 1.0em !important;
    height: 1.0em !important;
    width: 1.0em !important;
}
/*■■■■■■■■■■■■■■■😡️PaywallHack(js-injection)😡️■■■■■■■■■■■■■■■■■■■■*/
/* PaywallBreaker, verschobenes svg-overlay*/
[class^="Articlestyled__ArticleBodyWrapper-sc"] > svg {
    display: none !important;
}
/*■■■■■■■■■■■■■■■Overlay gesamte Seite■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*globale Netzwerksperre in Ublock von piano.io*/
.tp-active.tp-backdrop,
.tp-active.tp-iframe-wrapper,
.tp-modal {
    display: none !important;
}
/*■■■■■■■■■■■■■■■Artikel anhören■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
[class^="TextToSpeechSimplePlayerstyled"] {
    display: none !important;
}
/*----Achtung: ENDE @-moz-document, Klammer zu-------*/
}
/*■■■■■■■■■■■■■■■😎️PaywallHack(js-injection)nur rnd.de 😎️■■■■■■■■■*/
@-moz-document domain("www.rnd.de") {
[class^="ArticleContentLoaderstyled__Gradient-"] {
    background-image: none !important;
}
/*----Achtung: ENDE @-moz-document, Klammer zu-------*/
}
/*■■■■■■■■■■■■■■■Partner im Redaktionsnetzw.....■■■■■■■■■■■■■■■■■■*/
/*gibt es auf vielen Sites, deshalb ohne Domainzuordnung*/
[class^="CoBrandHeaderstyled__CoBrandHeader-sc-"] {
    display: none !important;
}

Alles anzeigen

Mitleser

Hier befindet sich die ausgelagerte Deklarationsdateie(mit :root) im chrome/userchrome-Ordner.

Den chrome/usercontent-Ordner habe ich auch lediglich von der userContent.css 'verlinkt' (Ähnlich wie bei Andreas) und keine 'Deklarationsdatei'.

Die Variablen funktionieren hier in 'chrome' und 'content' sowie 'css in js eingebettet' ohne Probleme.

Edit: und in svg-Grafiken auch...

Mitleser

Zitat von Mira_Belle

Mir ist nicht bekannt, dass es in CSS auch Variablen oder ähnliches gibt.

Ich kann mir z. B. keine Farbwerte merken, deshalb benutze ich das:

CSS

/*Farben-----------------------------------------------------*/
/*var(--uc-color-orange-normal)*/
:root {
    --uc-color-orange-normal: #f60 !important;
}
/*var(--uc-color-orange-light)*/
:root {
    --uc-color-orange-light: #ff8c40 !important;
}
/*var(--uc-color-orange-dark)*/
:root {
    --uc-color-orange-dark: #cc5200 !important;
}
/*Border-----------------------------------------------------*/
:root {
    --uc-border-radius: 4px !important;
    --uc-border-inner-radius: 2px !important;
    --uc-border-color: var(--uc-color-orange-dark) !important;
    --uc-border-color-over: var(--uc-color-orange-normal) !important;
    --uc-border-color-active: var(--uc-color-orange-light) !important;
}

Alles anzeigen

Oder mit FF-Var deklariert (usercontent z. B. in 'about:preferences'):

CSS

:root {
    --in-content-primary-button-background: var(--uc-color-orange-dark) !important;
    --in-content-primary-button-background-hover: var(--uc-color-orange-normal) !important;
    --in-content-primary-button-background-active: var(--uc-color-orange-light) !important;
}

Außerdem gelingt die Umstellung auf andere Farben schneller, da ich nur die Var ändern muss...

Ein weiterer Vorteil: shadow-root lässt sich von außen mit Variablen ansprechen!

Edit:

Universalselektor * gegen :root ausgetauscht (untere css).

Zitat von Sören Hentzschel

Variablen gehören in einem Container-Element definiert und wenn diese wirklich global zur Verfügung stehen sollen, ist das üblicherweise :root.

Beiträge von Mitleser

2023-Update: Aktualisierung auf WoltLab Suite 6.0 & Design-Refresh

Einem Ordner in der Lesezeichen-Symbolleiste ein Symbol zuordnen

Einem Ordner in der Lesezeichen-Symbolleiste ein Symbol zuordnen

Einem Ordner in der Lesezeichen-Symbolleiste ein Symbol zuordnen

Einem Ordner in der Lesezeichen-Symbolleiste ein Symbol zuordnen

Einem Ordner in der Lesezeichen-Symbolleiste ein Symbol zuordnen

Tabform

Tabform

beim Start alle Tabs neu laden

beim Start alle Tabs neu laden

Add-on Leisten Skript für Fx 119 anpassen - Hinweis

Add-on Leisten Skript für Fx 119 anpassen - Hinweis

Add-on Leisten Skript für Fx 119 anpassen - Hinweis

Farbe aktive und inaktive Tabs funktionieren in FF 119 nicht mehr

Icon für Übersetzung ausblenden

Variablen in CSS nutzen

Variablen in CSS nutzen

Variablen in CSS nutzen

Variablen in CSS nutzen

Variablen in CSS nutzen