Userstyles.org Archive Userstyle not working

[ghost]

A certain style from the userstyles.org archive (https://uso.kkx.one/browse/styles) doesn't work on Firemonkey. I changed @moz-extension into @matches as required by Firemonkey, and it shows up as if it's running, with no errors, but it has no effect on the CSS of the website. All of the websites stay at their original light theme. In Stylus, this works fine and the pages become dark. Is this intended or did I mess something up? If I messed something up, how should I fix this? Thanks!

The original userstyle is located at https://uso.kkx.one/style/130029 (CSS version located here) and my updated usercss can be accessed by going to this privatebin.

[erosman]

@preprocessor   uso

Only standard CSS is supported in FireMonkey.

regexp("https?://(?!(www.your.sites.here.com|pulsesms.app|www.youtube.com|docs.google.com|fallenlondon.storynexus.com|hangouts.google.com|www.rememberthemilk.com|youtube.com|www.facebook.com|facebook.com|keep.google.com|calendar.google.com|mail.google.com|forum.example.com)).*"), regexp("!about:preferences")

The regexp() is not supported in userstyles in FireMonkey.

url-prefix("javascript"), url-prefix("about:"), url-prefix("about:addons"),

It is not possible to inject CSS into above pages in Firefox 57+.

regexp("!about:preferences")

That means every page.. which overlaps other rules.

Do you want to fix that userstyle or have a new one that works the same way?

[erosman]

Try this .....

/*
==UserCSS==
@name             GLOBAL Dark Style: Wombat Style (Firefox/Mozilla)
@description      fork of https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark
@version          2021.06.7
@match            <all_urls>
@exclude-match    *://*.youtube.com/*
@exclude-match    *://*.rememberthemilk.com/*
@exclude-match    *://*.facebook.com/*
@exclude-match    *://pulsesms.app/*
@exclude-match    *://fallenlondon.storynexus.com/*
@exclude-match    *://hangouts.google.com/*
@exclude-match    *://keep.google.com/*
@exclude-match    *://docs.google.com/*
@exclude-match    *://calendar.google.com/*
@exclude-match    *://mail.google.com/*
==/UserCSS==
*/

/* reference colors here */
/* variable names should be pretty self evident: var(--bkgd0), etc*/
/* the stylish editor WILL complain, but the code works. */
:root {
  --bkgd0: #222222 !important;
  --bkgd1: #1E1A1A !important;
  --bkgd2: #080606 !important;
  --text: #93a1a1 !important;
  --italics: #859900 !important;
  --bold: #6C71C4 !important;
  --h1: #CB4B16 !important;
  --h2: #B54314 !important;
  --h3: #963810 !important;
  --nav: #4BB6B6 !important;
  --nav_visited: #429F9F !important;
  --border: #232729 !important;
}

/*----- SITES TO EXCLUDE -----*/
/*--- Currently Excluded ---*/
/*--- RememberTheMilk.com, Facebook.com, YouTube.com, Keep.Google.com, calendar.google.com, mail.google.com, fallenlondon.storynexus.com --*/

html, #newtab-window {
  background: var(--bkgd0) !important;
}

/*----- DEFAULT TEXT, BORDER & BACKGROUND COLORS -----*/
 * {
  color: var(--text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-color: transparent !important;
  border-color: #444 !important;
  border-top-color: #444 !important;
  border-bottom-color: #444 !important;
  border-left-color: #444 !important;
  border-right-color: #444 !important;
}

body {
  background: transparent !important;
}

*:before, *:after {
  background-color: transparent !important;
  border-color: #444 !important;
}

a, a * {
  color: var(--nav) !important;
  text-decoration: none !important;
}

a:hover, a:hover *, a:visited:hover, a:visited:hover *, span[onclick]:hover, div[onclick]:hover, [role="link"]:hover, [role="link"]:hover *, [role="button"]:hover *, [role="menuitem"]:hover, [role="menuitem"]:hover *, .link:hover, .link:hover * {
  color: var(--h1) !important;
}

a:visited, a:visited * {
  color: var(--nav_visited) !important;
}

a.highlight, a.highlight *, a.active, a.active *, .selected, .selected *, [href="#"] {
  color: #4a7876 !important;
  font-weight: bold !important;
}

strong, bold, b {
  color: var(--bold) !important;
}

em, i {
  color: var(--italics) !important;
}

h1, h1 *, [id*="headline"], [class*="headline"], [class*="search__autocomplete"], [id*="header"], [class*="header"], [class*="header"] td {
  background-color: var(--bkgd0) !important;
  color: var(--h1) !important;
}

h2, h2 * {
  background-color: var(--bkgd0) !important;
  color: var(--h2) !important;
}

h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * {
  background-color: var(--bkgd0) !important;
  color: var(--h3) !important;
}

[class*="error"], [class*="alert"], span[onclick], div[onclick] {
  color: #900 !important;
}

code, kbd, pre, samp {
  color: var(--text) !important;
}

::-moz-selection {
  background: #377 !important;
  color: #000 !important;
}

::selection {
  background: #377 !important;
  color: #000 !important;
}

:focus {
  outline: none !important;
}
/*----- MENU & CO BACKGROUND-COLORS -----*/
 div[style="display: block;"], div[role="navigation"] {
  background: rgba(0, 0, 0, .5) !important;
}

table {
  background: rgba(40, 30, 30, .6) !important;
  border-radius: 6px !important;
}

table > tbody > tr:nth-child(even), table > tbody > tr > td:nth-child(even) {
  background-color: rgba(0, 0, 0, .2) !important;
}

iframe, embed, header, nav, footer, label[onclick], nav ul, div[style*="position:"][style*="left:"][style*="visible"], div[style*="z-index:"][style*="left:"][style*="visible"], div[style*="-moz-user-select"], div[role="menu"], div[role="dialog"], span[class*="script"] div, [id*="menu"], [class*="dropdown"], [class*="popup"], [class="title"], ul[style*="display:"], ul[style*="visibility:"] ul, [id*="nav"] ul, [class*="nav"] ul, ul[class*="menu"], a[onclick][style*="display"], a[id*="ghosteryfirefox"], #ghostery-purple-bubble, #translator-popup, .menu, .tooltip, .hovercard, .vbmenu_popup, .components-popover__content {
  background: var(--bkgd1) !important;
  border-radius: 5px;
}

[id*="overlay"], [id*="lightbox"], .components-snackbar-list, blockquote {
  background-color: var(--bkgd1) !important;
  border-radius: 5px;
}

pre, dl, .Message code {
  background-color: var(--bkgd1) !important;
}
/* anti-anti-ad area */

/* Even though I have ads on my own personal website, and ask people to whitelist, */

/* big anti-anti-ad popups and the like drive me nuts. */

/* deviantart */
.block-notice {
  display: none !important;
}

.widget-trigger {
  display: none !important;
}

#hs-beacon > div:nth-child(1) > iframe:nth-child(1) .frame-root {
  display: none !important;
}

/* BUG SMASHING AREA - this is the area which is getting the most
   * edits as I tweak the popups and such that don't have proper coloring */
.page, .wrap, .content{
  background-color: var(--bkgd1) !important;
}

/* curseforge */
#notifications {
  background-color: var(--bkgd1) !important;
}

/* github */
#jump-to-results, .bg-gray-light, .select-menu-list {
  background-color: var(--bkgd1) !important;
}

.link-gray-dark {
  color: var(--nav) !important;
}

/* there's a dropdown for amazon I can't quite catch... */
/* monoprice */
.unbxd-as-wrapper {
  background-image: none !important;
  background-color: var(--bkgd1) !important;
}

/* tumblr */
.bubbles {
  background-image: none !important;
  background-color: var(--bkgd1) !important;
}

/* Owncloud */
#editor {
  background-image: none !important;
  background-color: var(--bkgd1) !important;
}

/* OKC */
.global_messaging {
  background-image: none !important;
  background-color: var(--bkgd1) !important;
}

/* Kanboard */
#popover-content {
  background-image: none !important;
  background-color: var(--bkgd1) !important;
}

/* citi cards */
#citilmHeader.reskinHeader #nav_main {
  background-image: none !important;
  background-color: var(--bkgd0) !important;
}

/* w3 schools */
.w3-row, .w3-white {
  background-image: none !important;
  background-color: var(--bkgd0) !important;
}

/*amazon */
.s-item-container, .s-result-card, .s-result-card-for-container {
  background-image: none !important;
  background-color: var(--bkgd0) !important;
}

/*goodreads */
#dropdown {
  background-color: var(--bkgd0) !important;
}

/* wikia */
#WikiaPageBackground, .WikiaPageContentWrapper {
  background-color: var(--bkgd0) !important;
}

/*tumblr*/
.post-form-modal-content {
  background-color: var(--bkgd0) !important;
}

/* twitter */
#page-outer {
  background-color: var(--bkgd0) !important;
}

/* pinterest */
.newsConversationsDropdown, .modalContent, .closeupBottom, .closeupContainer {
  background-color: var(--bkgd1) !important;
}

/* dlvr */
.dlvr-modal-box {
  background-color: var(--bkgd1) !important;
}

/* Kickstarter */
.modal_dialog_content {
  background-color: var(--bkgd1) !important;
}

/* mailchimp */
#editor-pane, .cke_wysiwyg_frame, .cke-editable {
  background-color: var(--bkgd1) !important;
}

/* google contacts */
.XKSfm-Sx9Kwc {
  background-color: var(--bkgd1) !important;
}

/* bit.ly */
.action-sheet--content-wrapper {
  background-color: var(--bkgd1) !important;
}

/* nook press */
#upload_book_modal, #add_to_manuscript_modal {
  background-color: var(--bkgd1) !important;
}

/* Some blogger styles */
.jqmaintitle a {
  color: var(--h1) !important;
}

/* Google + */
.sVAYfc, .g3VIld {
  background-color: var(--bkgd1) !important;
}

/* cousin vinnies pizza */
.z-i-wrapper, .z-no-deals, .z-modal-wrapper {
  background-color: var(--bkgd1) !important;
}

/* bowker */
.drop {
  background-color: var(--bkgd1) !important;
}

/* imgur */
#upload-modal {
  background-color: var(--bkgd1) !important;
}

/* google dev area */
.modal-dialog {
  background-color: var(--bkgd1) !important;
}

/* watch2gether */
#user-modal {
  background-color: var(--bkgd1) !important;
}

/* wikia */
.background-image-gradient {
  display: none !important;
}

/* slack.com */
#new_channel_modal, .contents {
  background-color: var(--bkgd1) !important;
}

/* For other banks and menu stuff */
.DropDownLevelOne {
  background-color: var(--bkgd1) !important;
}

/*--- For Citi Cards background Menu ---*/
.cA-spf-bodyWrapper {
  background-color: var(--bkgd1) !important;
}

/*--- For Bank of America Menu ---*/
.fsdnav-sub-nav-box {
  background-color: var(--bkgd1) !important;
}

/* -- paypal */
 div.sidepanel, div.paymentPlanOptions {
  background-color: var(--bkgd1) !important;
}

/* - wordpress */
#wpadminbar, .mce-panel, .editor-block-toolbar, .block-editor-block-toolbar {
  background-color: var(--bkgd1) !important;
}

/* - unsplash */
._2xVPk {
  background-color: var(--bkgd1) !important;
}

#overpanel, #sidepanelContainer, sidepanelpaymentOptions {
  background-color: var(--bkgd1) !important;
}

/* for google protection from sellers --*/
#gts-g-main {
  background-color: var(--bkgd1) !important;
}

/*--- For MyFitnessPal.com Popups ---*/
.mfp-modal-show {
  background-color: var(--bkgd1) !important;
}

/*--- for Dropbox popups ---*/
.db-modal-box {
  background-color: var(--bkgd1) !important;
}

/*--- for Pocket popups ---*/
.content_detail {
  background-color: var(--bkgd1) !important;
}

/*--for humble bundle --*/
#content {
  background-color: var(--bkgd1) !important;
}

/*--- for Buffer bookmarklet ---*/
.backdrop {
  display: none !important;
}

.highlights {
  background-color: var(--bkgd1) !important;
}

/*--- IFTT popup --- */
.filter_show-grid {
  background-color: var(--bkgd1) !important;
}

/* dominos */
#genericOverlay {
  background-color: var(--bkgd1) !important;
}

/* some "uses cookies" banners */
 div.cc_container {
  background-color: var(--bkgd1) !important;
}

/* weird detail in google play */
 span.paragraph-end, .show-more-end {
  display: none !important;
}

/* same weird detail in Patreon */
._3h6-components-Collapse--gradient {
  display: none !important;
}

/*----- DEFAULT BUTTONS, SEARCHBOXES & CO -----*/
 input, select, button, [role="button"], a.button, a.submit, a.BigButton, a.TabLink, .install[onclick] {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  /* transition: border-color 0.3s !important; */
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
  color: #BBB !important;
  border: 2px solid #333 !important;
  border-radius: 4px !important;
}

a[href="javascript:;"], a[class*="button"]:not(:empty), a[id*="button"]:not(:empty), a[id*="Button"]:not(:empty), div[class*="button"][onclick] {
  /* transition: border-color 0.3s !important; */
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
  color: #BBB !important;
  border-color: #333 !important;
}

a[href="javascript:;"]:hover, a[class*="button"]:not(:empty):hover, a[id*="button"]:hover, a[id*="Button"]:not(:empty):hover, div[class*="button"][onclick]:hover {
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
  color: #FFF !important
}

input *, select *, button *, a.button *, a.submit * {
  color: #BBB !important;
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
}

input:hover, input[type="button"]:hover, input[type="checkbox"]:hover, input[type="radio"]:hover, select:hover, button:hover, [role="button"]:hover, a.button:hover, a.submit:hover, a.BigButton:hover, a.TabLink:hover {
  border: 1px solid #555 !important;
  border-top-color: #555 !important;
  border-bottom-color: #555 !important;
  border-left-color: #555 !important;
  border-right-color: #555 !important
}

input *:hover * {
  color: #F0F0F0 !important;
}

input[type="file"] {
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
  color: #FFF !important
}

input[type="checkbox"], input[type="checkbox"]:focus, input[type="radio"], input[type="radio"]:focus {
  border: 2px solid #333 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  color: #DDD !important;
  border-radius: 4px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

input[type=checkbox]:checked, input[type=radio]:checked {
  background-color: var(--bold) !important;
}

select input[type="button"], select button {
  border: none !important
}

select button {
  min-height: 8px !important
}

button:active, input[type="submit"]:active, input[type="button"]:active, a.button:active, a[class*="button"]:not(:empty):active, a.submit:active, a.BigButton:active, a.TabLink:active, .Active .TabLink {
  background: var(--bkdg2) !important;
  background-color: var(--bkdg2) !important;
  color: #FFF !important
}

textarea {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(0, 0, 0, .3) !important;
  border-radius: 3px !important;
  border: 1px solid #000 !important;
  /*transition: border-color, background, 0.3s !important*/
}

textarea, textarea * {
  color: #C8C8C8 !important;
}

textarea:hover, textarea:focus:hover {
  border-color: #333 !important
}

textarea:focus {
  background: rgba(0, 0, 0, .5) !important;
  border-color: #222 !important
}

textarea:focus, textarea:focus > * {
  box-shadow: none !important
}

option {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  color: #666 !important
}

option:not([disabled]):hover, option:focus, option:checked {
  background: linear-gradient(#333, #292929) !important;
  color: #DDD !important
}

/* webkit checkbox & select fix */

  input[type="checkbox"]:checked, input[type="radio"]:checked {
    border-color: #DDD !important
  }

  select {
    padding-right: 12px !important;
    background: var(--bkdg2) !important;
    background-color: var(--bkdg2) !important;
    background-position: right center !important
  }

/*----- IMAGE CHANGES -----*/
body, *:not(:empty):not(html):not(span):not(a):not(b):not(option):not(img):not([style="display: block;"]):not([onclick*="open"]):not([onclick*="s_objectID"]):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([class*="item"]):not([id*="item"]):not([class*="thumb"]):not([class*="icon"]):not(.text):not([id*="lbImage"]):not([class*="cc-in"]):not([class*="gr-body"]):not([id*="watch"]):not(#globalsearch):not(.sp), .r3_hm, .gmbutton2 b, .gtab-i, .ph, .bstab-iLft, .csb, #pagination div, [style*="sprite2.png"], #mw-head-base, #mw-page-base {
    background-image: none !important
}

/* I disabled these for my personal use partially because it speeds things up and partially because otherwise it just seems "dim" overall, not darkened */

/* img {opacity: .7 !important; transition: opacity .2s}
 */

/* img:hover, a:hover img {opacity: 1 !important}
 */

/*
 this one needs to go on another userCSS

@-moz-document domain("userstyles.org") {
  li[total-install-count]:after {
    font-size: .70em !important;
    content: " (Installs: " attr(total-install-count)", " attr(weekly-install-count)" wk)"
  }
}
*/

/* ----- FIX WHITE NEW TAB FLASH ----- */
browser[type="content-primary"] {
  background-color: var(--bkgd0) !important;
  background: var(--bkgd0) !important;
}

[ghost]

@erosman The problem was the @moz-document domain at the bottom. I didn't notice that. The rest of the stuff you mentioned I already fixed as shown in the privatebin. Thank you for helping me! EDIT: Apparently there was more to it than that. You appear to have corrected a bunch of spacing issues.

[erosman]

Apparently there was more to it than that.

Yes but not match

You appear to have corrected a bunch of spacing issues.

I did but that does not matter. I only did it to make it clearer.

[ghost]

Oh yeah, I see the problem. I had to delete the @moz-document section entirely (commenting still made it confused) and change the "match" section to ""