Beiträge von Mitleser

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?

Mitleser

So ab 22:45 oder später kann man mit singen/mit grölen, wenn man es mag (bitte Fenster zu) ...

Last Night of the Proms 2023
Heute \| 3sat \| 20:15 - 23:31 Uhr \| Konzert

EDIT: JETZT GEHTS LOS 22:41

Mitleser

California Dreamin

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Mitleser

Habe hier mit einem neuen Profil unter 117 keine Probleme:

Mitleser

Diese Version ist noch dramatischer vom Sound:

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Dire Straits: Gitarrist Jack Sonni ist tot

Der Gitarrist hatte eine kurze aber einflussreiche Zeit mit den Dire Straits und nahm mit der Band gemeinsam eines ihrer größten Alben auf. Nun ist er im Alter…

www.rollingstone.de

Mitleser

Ist ja super,

hier einige Vorschläge:

ideenfindung.zip

Mitleser

Zitat von DonnerDrachen

Dire Straits 🎸 Brothers In Arms

To future generations...Don’t let this masterpiece ever be forgotten...

Der Song ist zwar während des Krieges um die Falkland Islands entstanden, lässt sich aber auf die jetzige Situation gut übertragen.

Mitleser

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne deine Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklärst du dich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Mitleser

Hallo rkscanmich

Mich würde interessieren, ob du eine Lsg. gefunden hast.

Mitleser

Ok, ich gebe auf.....Das spielt doch überhaupt keine Rolle

Vielleicht hast du eine bessere Lösung....

Bin dann mal weg.....

Beiträge von Mitleser

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

Was schaut ihr gerade?

Was hört Ihr gerade?

California Dreamin

Fx 117 > - Tableiste ganz unten Skript

Was hört Ihr gerade?

Symbole in den Kontextmenüs [ Update ]

Was hört Ihr gerade?

Was hört Ihr gerade?

Starten im private mode von command line

Starten im private mode von command line