Beiträge von Mitleser

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.

Mitleser

Zitat von Firefox_94.0.1

Danke, aber die Punkte bleiben weiß. Dann wird das wohl einfach nicht gehen.

Doch, geht!

CSS

 .timeline > .line {  
        background-color: #e1e1e1 !important;
    }
    .timeline > .point {
        stroke: #f60 !important;               /* Farbe des Rings */
        stroke-width: 30px !important;          /* Größe der Punkte */
    }
    .timeline > svg {
        fill: #f60 !important;               /* Farbe des Punktes */
    }
    div.date {
        color: #f60 !important;              /* Farbe des Datums */
    }
    div.action {
        color: #f60 !important;              /* Farbe des Komentars */
    }

Alles anzeigen

Mitleser

Ein Extra-Button mit dieser Funktion würde für mich eher nicht in Frage kommen, u. U. schon ein hover auf die js-Uhr die einige (auch ich) in einer Leiste haben.

Das passt nur bedingt zum Thema, deshalb:

Spoiler anzeigen

Es gibt ja verschiedene Uhren-Scripte, hier mal 'meins' mit Modal-Dialog:

JavaScript

(function() {

    if (!window.gBrowser){ return; }
   
    function doDatClock() {
        let date = new Date();
        var days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
        var day = days[date.getDay()];
        let timestr = day + ' - ' + date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: '2-digit'}) +' - ' + date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit'});

        if( count == 1 ) {
            var counter = new Date( 2000 * sec ).toISOString().substr( 11 , 8 ); // .replace(/^[0:]+/, '') // if you want to replace zeroes and colons
            timestr = counter + ' 🕛️ ' + timestr ;
            sec++;
        }
        ClockLabel.setAttribute( 'value', timestr );
    }
    var count = 1; // if you don't want a counter set this to zero
    var agent = 0; // if you just want the clock set this to zero
    var language = 'de-DE'; // locale, e.g. 'de-DE' , 'en-US' , 'fr-FR'
    var personalText = ' - Design\u00A9\u00A9'; // your personal text here
    var cssFontFamily = '';
    var cssColor = 'lightgray'; // Font Color

    var css = 'padding-top: 2px; padding-left: 0; padding-right: 0; margin-right: 6px; color: ' + cssColor + '; font-family: ' + cssFontFamily + '; font-weight:normal; font-size:13px; text-shadow: none; width: 190px;';
    var cssA = 'width: auto;';
    var sec = 0;
    var locale = language || window.navigator.languages[0];
    var position = document.getElementById('PlacesChevron');
    var ClockLabel = document.createXULElement('label');
    ClockLabel.setAttribute('id', 'statusbar-clock-display-1');
    ClockLabel.setAttribute('class', 'statusbarpanel_c-text-1');
    ClockLabel.setAttribute('style', css);    
    position.parentNode.insertBefore(ClockLabel, position.nextSibling);

    if( agent == 1 ) {
        var AgentLabel = document.createXULElement('label');
        AgentLabel.setAttribute('id', 'statusbar-agent-display-1');
        AgentLabel.setAttribute('class', 'statusbarpanel_a-text-1');
        AgentLabel.setAttribute('style', css + cssA);
        var FFstr = window.navigator.userAgent.split(' ');
        var FF = FFstr[FFstr.length-1].replace( '/' , ' ' );
//     var text = 'Firefox ' + gAppInfo.version + personalText;
//     Cc['@mozilla.org/xre/app-info;1'].getService(Ci.nsIXULAppInfo).QueryInterface(Ci.nsIXULRuntime);
        
        var text = 'FF ' + AppConstants.MOZ_APP_VERSION_DISPLAY + personalText;
        

        AgentLabel.setAttribute( 'value', text );
        position.parentNode.insertBefore(AgentLabel, position.nextSibling);
    }
    if( count == 1 ) {
        ClockLabel.addEventListener('click', function() { sec = 0; });
    }
 window.setInterval( doDatClock , 1000 );
//-------------Modal-Dialog---------------------------------------
ClockLabel.addEventListener('mouseover', function() {
                                     
     const lang = 'de-DE';               
     const t = new Date();

     const d10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',weekday:'long'})
     const d15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',weekday:'long'})
     const d20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',weekday:'long'})
     const d30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',weekday:'long'})
     const d40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',weekday:'long'})
     const d50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',weekday:'long'})
   
     const h10 = t.toLocaleTimeString(lang,{timeZone:'Europe/Berlin',hour:'numeric',minute:'numeric',hour12:false})
     const h15 = t.toLocaleTimeString(lang,{timeZone:'Europe/Lisbon',hour:'numeric',minute:'numeric',hour12:false})
     const h20 = t.toLocaleTimeString(lang,{timeZone:'America/New_York',hour:'numeric',minute:'numeric',hour12:false})
     const h30 = t.toLocaleTimeString(lang,{timeZone:'Europe/Moscow',hour:'numeric',minute:'numeric',hour12:false})
     const h40 = t.toLocaleTimeString(lang,{timeZone:'Asia/Hong_Kong',hour:'numeric',minute:'numeric',hour12:false})
     const h50 = t.toLocaleTimeString(lang,{timeZone:'Australia/Sydney',hour:'numeric',minute:'numeric',hour12:false})
   
     const m10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',day: '2-digit', month: 'long'})
     const m15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',day: '2-digit', month: 'long'})
     const m20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',day: '2-digit', month: 'long'})
     const m30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',day: '2-digit', month: 'long'})
     const m40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',day: '2-digit', month: 'long'})
     const m50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',day: '2-digit', month: 'long'})

     const y10 = t.toLocaleDateString(lang,{timeZone:'Europe/Berlin',year: 'numeric'})
     const y15 = t.toLocaleDateString(lang,{timeZone:'Europe/Lisbon',year: 'numeric'})
     const y20 = t.toLocaleDateString(lang,{timeZone:'America/New_York',year: 'numeric'})
     const y30 = t.toLocaleDateString(lang,{timeZone:'Europe/Moscow',year: 'numeric'})
     const y40 = t.toLocaleDateString(lang,{timeZone:'Asia/Hong_Kong',year: 'numeric'})
     const y50 = t.toLocaleDateString(lang,{timeZone:'Australia/Sydney',year: 'numeric'})

     const body = document.querySelector('body');
     const dialog = document.createElement('dialog');

           dialog.setAttribute('id', 'time-dialog');
           dialog.innerHTML = `
  <table>
    <tr><strong>Internationale Uhrzeiten</strong></tr>
  </table>
  <table>
    <tr>
        <td>Berlin:</td>
        <td>${h10}</td>
        <td>Uhr - </td>
        <td>${d10},</td>
        <td>${m10}</td>
        <td>${y10}</td>
    </tr>
    <tr>
        <td>Lagos(Pt):</td>
        <td>${h15}</td>
        <td>Uhr - </td>
        <td>${d15},</td>
        <td>${m15}</td>
        <td>${y15}</td>
    </tr>
    <tr>
        <td>New York:</td>
        <td>${h20}</td>
        <td>Uhr - </td>
        <td>${d20},</td>
        <td>${m20}</td>
        <td>${y20}</td>
    </tr>
    <tr>
        <td>Moskau:</td>
        <td>${h30}</td>
        <td>Uhr - </td>
        <td>${d30},</td>
        <td>${m30}</td>
        <td>${y30}</td>
    </tr>
    <tr>
        <td>Hongkong:</td>
        <td>${h40}</td>
        <td>Uhr - </td>
        <td>${d40},</td>
        <td>${m40}</td>
        <td>${y40}</td>
    </tr>
    <tr>
        <td>Sydney:</td>
        <td>${h50}</td>
        <td>Uhr - </td>
        <td>${d50},</td>
        <td>${m50}</td>
        <td>${y50}</td>
    </tr>
  </table>
`;
setTimeout(function() {
      dialog.close();
  },1000);
body.appendChild(dialog);
dialog.showModal();

   let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);   
   let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
        #time-dialog {
            max-width: auto;
            max-height: auto;
            border: 1px solid orange;
            border-radius: 4px;
        }
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

 })
//-------------Modal-Dialog---------------------------------------
})();

Alles anzeigen

Da ist sicherlich noch viel redundant, gerade im Bereich der Variablen.

Mitleser

z.B. so ähnlich:

JavaScript

(function() {

   if (location.href !== 'chrome://browser/content/browser.xhtml') return; 
   try {
      CustomizableUI.createWidget({
         id: 'time-button',
         type: 'custom',
         defaultArea: CustomizableUI.AREA_NAVBAR,
         onBuild: function(aDocument) {         
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
//            toolbaritem.onclick = event => onClick(event); // Fallback für Dharkness ;)
            var props = {
               id: 'time-button',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Internationale Uhrzeiten',
               accesskey: '', // Wer möchte kann hier z.B. 'C' eintragen, dann kann per "Alt + C" das Skript ausgeführt werden
               tooltiptext: 'Internationale Uhrzeiten anzeigen',
            };            
            for (var p in props)
               toolbaritem.setAttribute(p, props[p]);            

            // Hinzufügen des Klick-Event-Handlers für das Popup
            toolbaritem.onclick = function (event) {
               if (event.button === 0) {
//-----------------------------------------------------------
const body = document.querySelector('body');
const dialog = document.createElement('dialog');
const btn = document.createElement('button');

dialog.style.backgroundColor = '#0f0';
dialog.style.borderColor = '#f00';
dialog.appendChild(btn);

btn.textContent = 'close';
btn.style.backgroundColor = '#ff0';

btn.addEventListener('click', () => {
  dialog.close();
});

body.appendChild(dialog);

dialog.showModal();
//--------------------------------------------------------
               var t,t10,t15,t20,t30,t40,t50;
               t = new Date()
               t10=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Berlin',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t15=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Lisbon',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t20=t.toLocaleTimeString('de-DE',{timeZone:'America/New_York',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t30=t.toLocaleTimeString('de-DE',{timeZone:'Europe/Moscow',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t40=t.toLocaleTimeString('de-DE',{timeZone:'Asia/Hong_Kong',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               t50=t.toLocaleTimeString('de-DE',{timeZone:'Australia/Sydney',weekday:'long',day:'numeric',month:'short',hour:'numeric',minute:'numeric',hour12:false})
               alert(
 t10+' Berlin\n'
+t15+' Lagos\n\n'
+t20+' New York\n'
+t30+' Moskau\n\n'
+t40+' Hongkong\n'
+t50+' Sydney')
            };
        }

            return toolbaritem;
         }    
      });
   } catch(e) { };
   
   let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'css', 'image')); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner
   let ButtonIcon = "16_time-3_ohne.svg"; // Name & Dateiendung des anzuzeigenden Symbols!
   let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);       
   let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
       #time-button { list-style-image: url("${ProfilePath}/${ButtonIcon}") 
}
       #time-button .toolbarbutton-icon {
            overflow: hidden !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            fill: var(--uc-color-yellow-button) !important; 
            fill-opacity: 1 !important;    
}
      #time-button:hover .toolbarbutton-icon {
            fill: var(--uc-color-lightgray-icons) !important; 
            fill-opacity: 1 !important;    
}
      `), null, null);

   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

})();

Alles anzeigen

ist nur als Bastelvorlage gedacht

Mitleser

Unter meinem Uralt-Linux läuft es...(FF117.0.1)

Mitleser

Ist ja peinlich, sorry für den falschen Schrägstrich.

Mir ist noch etwas anderes aufgefallen:

Ist Zeile 86 ein Überbleibsel aus einem anderen Button?

Mitleser

Zitat von Mira_Belle

Wie schauts mit der Formatierung aus?
Jemand eine Idee?

Sieht schlecht aus, es ist kaum möglich ein js-alert-Fenster zu formatieren,

vielleicht/t?

Beiträge von Mitleser

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

Buttons unter about:logins

Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen