CSS discourse modifications

https://userstyles.org/styles/172460/discourse-forums-little-modifcations

CSS with varibles
/* i really want this to be global */
/* different color of the user's active circle */
html[class*="discourse-"].whos-online-ring .topic-avatar.user-online img.avatar,
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary img.avatar,
html[class*="discourse-"].whos-online-ring .docked-avatar.user-online img.avatar,
html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px/*[[CircleColor]]*/
    !important;
}
html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar img.avatar,
html[class*="discourse-"].whos-online-ring body.user-page-online .primary img.avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px/*[[CircleColor]]*/
    !important;
}
/* removing the user's active circle /*[[RightDot]]*/
html[class*="discourse-"].whos-online-ring .topic-avatar.user-online img.avatar,
html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar img.avatar,
html[class*="discourse-"].whos-online-ring body.user-page-online .primary img.avatar,
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary img.avatar,
html[class*="discourse-"].whos-online-ring .docked-avatar.user-online img.avatar,
html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar
{
  box-shadow: none !important;
}
/* common features of the designation of active people /*[[RightDot]]*/
div.topic-avatar.user-online::after,
html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar::after,
html[class*="discourse-"].whos-online-ring body.user-page-online .primary::after,
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary::after,
html[class*="discourse-"].whos-online-ring .docked-avatar.user-online::after,
html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster::after
{
  content: "" !important;
  background: /*[[avatarOnline]]*/!important;
  display: block !important;
  border-radius: 20px !important;
  position: absolute !important;
  box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important;
  bottom: 0 !important;
  right: 0 !important;
}

div.topic-avatar.user-online::after,
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary::after,
html[class*="discourse-"].whos-online-ring .docked-avatar.user-online::after,
html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster::after
{
  box-shadow: 0 0 0 2px #fff, 0 0 0 1px #fff !important;
}

html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar::after,
html[class*="discourse-"].whos-online-ring body.user-page-online .primary::after
{
  height: 30px !important;
  width: 30px !important;
}

html[class*="discourse-"] div.topic-avatar.user-online::after,
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary::after
{
  height: 13px !important;
  width: 13px !important;
}

html[class*="discourse-"].whos-online-ring .docked-avatar.user-online::after
{
  bottom: -3px !important;
  right: 2px !important;
  height: 10px;
  width: 10px;
}

html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster::after
{
  top: -8px !important;
  left: 35px !important;
  position: relative !important;
  height: 10px;
  width: 10px;
}
/* summary on the active people profile /*[[RightDot]]*/
html[class*="discourse-"].whos-online-ring body.user-page-online .primary::after
{
  left: 100px !important;
  bottom: 8px !important;
}
/* activity on the profile of active people /*[[RightDot]]*/
html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary::after
{
  left: 36px !important;
  bottom: 20px !important;
}
/* activity comments - the 'community advises' section with special plugin /*[[RightDot]]*/
html[class*="discourse-"] .topic-post.comment div.topic-avatar.user-online::after
{
  bottom: -5px !important;
  right: 16px !important;
}

/* more aesthetic comments - need special plugin */
html[class*="discourse-"] .topic-post.comment .topic-body .regular
{
  padding: 15px 0 0 15px;
}

html[class*="discourse-"] .qa-post .count
{
  border: 2px solid #dcdcdc;
  margin-top: 5px;
}

html[class*="discourse-"] .qa-post .btn:hover
{
  border: 2px solid #b2b2b2;
}

html[class*="discourse-"] .qa-post .btn
{
  border: 2px solid #dcdcdc;
  margin-top: 5px;
}

/* links that do not track clicks - none by default */
html[class*="discourse-"] a.no-track-link::after
{
  display: inline-block !important;
  margin-left: 4px !important;
  content: "/*[[noTrackingLink]]*/" !important;
}
/* hiding icons of "non-tracking links" in unnecessary places */
html[class*="discourse-"] .title a.no-track-link::after,
html[class*="discourse-"] .lightbox-wrapper a.no-track-link::after,
html[class*="discourse-"] a.html5-title-text.no-track-link::after,
html[class*="discourse-"] .stackexchange .onebox-body > a.no-track-link::after,
html[class*="discourse-"] .stackexchange .date a.no-track-link::after,
html[class*="discourse-"] .githubcommit .onebox-body > a.no-track-link::after,
html[class*="discourse-"] .githubcommit .date a.no-track-link::after,
html[class*="discourse-"] .githubissue .onebox-body > a.no-track-link::after,
html[class*="discourse-"] .githubissue .date a.no-track-link::after,
html[class*="discourse-"] .githubpullrequest .onebox-body > a.no-track-link::after,
html[class*="discourse-"] .githubpullrequest .date a.no-track-link::after
{
  content: "" !important;
}
/* spoilers, a more readable "open / close" button - alpha stability /*[[DetailsDesign]]*/
html[class*="discourse-"] details:not([open]):not(.open)
{
  border-width: 1px 1px 0;
}

html[class*="discourse-"] details
{
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  margin: 1em 0;
  background-color: #fff;
  border-color: #ddd;
}

html[class*="discourse-"] details.open,
html[class*="discourse-"] details[open]
{
  padding: 15px;
}

html[class*="discourse-"] details summary
{
  padding: 15px 5px;
  border-width: 0 0 1px;
  border-style: solid;
  margin: 0;
  border-color: #ddd;
}

html[class*="discourse-"] details summary
{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  word-break: break-all;
  background-color: #f3f3f3;
  color: #333;
}

html[class*="discourse-"] details.open > summary,
html[class*="discourse-"] details[open] > summary
{
  margin: -15px -15px 15px -15px;
}

html[class*="discourse-"] details > summary::after
{
  font-weight: 400;
  background-color: /*[[DetailsOpen]]*/;
    color: #fff;
  content: 'open' !important;
  display: inline-flex !important;
  justify-content: center !important;
  border-radius: 5px !important;
  margin-left: 0.5em !important;
  float: right;
  width: 4.5em;
}

html[class*="discourse-"] details[open] > summary::after,
html[class*="discourse-"] details.open > summary::after
{
  background-color: /*[[DetailsClose]]*/;
    content: 'close' !important;
  margin-left: 0.5em !important;
}

html[class*="discourse-"] summary::-webkit-details-marker
{
  display: none !important;
}

html[class*="discourse-"] summary::before,
html[class*="discourse-"] details[open] > summary::before,
html[class*="discourse-"] details.open > summary::before
{
  content: '' !important;
}

html[class*="discourse-"] .docked-post-content summary::after
{
  display: inline !important;
  text-align: center !important;
}

html[class*="discourse-"] .docked-post-content details,
html[class*="discourse-"] .babble-post-cooked details
{
  width: 192px;
}
/* color of spoilers in the message bubble */
html[class*="discourse-"] .docked-post-content details,
html[class*="discourse-"] .docked-post-content summary
{
  color: #222;
}

html[class*="discourse-"] img.avatar
{
  border-radius: /*[[avatarRadius]]*/!important;
}
/* chat, repair of missing styles - maybe outdated and need special plugin */
html[class*="discourse-"] .babble-sidebar
{
  z-index: 101 !important;
}

html[class*="discourse-"] .babble-sidebar .btn-icon:hover
{
  color: #555 !important;
}

html[class*="discourse-"] a.expand-hidden
{
  display: block;
}

html[class*="discourse-"] #babble-icon-unread > i
{
  color: #999 !important;
}

html[class*="discourse-"] .babble-composer-actions button:hover
{
  background: #d0d0d0 !important;
}

html[class*="discourse-"] .babble-post-cooked .site-icon
{
  height: auto !important;
}
/*repair of the chat button - maybe outdated and need special plugin */
html[class*="discourse-"] .babble-sidebar-collapsed--right .btn,
.discourse-no-touch .babble-sidebar-collapsed--right .btn:hover
{
  border-radius: 50% 0 0 50% !important;
}

/* deleted messages - no restore, so why display - need special plugin */
/* ------------------------------------------------------------------------------ */
/*.babble-post:has(.babble-staged-post.babble-deleted-post) - CSS4 / jQuery */
html[class*="discourse-"] .babble-staged-post.babble-deleted-post
{
  display: /*[[deletedPost]]*/!important;
}
/* hiding an icon with unread messages on the shoutbox - need special plugin */
html[class*="discourse-"] .babble-unread--sidebar.babble-unread
{
  display: /*[[HideUnread]]*/!important;
}
/* hiding the shoutbox icon as we do not use or disturb - need special plugin */
html[class*="discourse-"] .babble-sidebar-collapsed--right.babble-sidebar-collapse
{
  display: /*[[HideBabble]]*/!important;
}
/* reactions to posts to be on a separate line - need special plugin */
html[class*="discourse-"] section.post-menu-area,
html[class*="discourse-"] a.expand-hidden
{
  clear: both !important;
}
/* instructing the moderator to make the whole post a uniform background */
html[class*="discourse-"] .moderator .topic-body
{
  background: #ffffca !important;
}

/* clear color of hashtags */
html[class*="discourse-"] .extra-info-wrapper .discourse-tag
{
  color: #8f8f8f !important;
}

html[class*="discourse-"] .discourse-tag.simple::before
{
  content: "#";
  font-weight: bold;
}
/* darker color of fields with code */
html[class*="discourse-"] p > code,
html[class*="discourse-"] li > code,
html[class*="discourse-"] pre > code
{
  background: /*[[codeBackground]]*/!important;
}

/* large graphics (to smaller) in stylized links with description */
html[class*="discourse-"] aside.onebox .onebox-body img.onebox-full-image
{
  max-height: 170px !important;
  max-width: 20% !important;
}
/* lowered message preview, formatting and slider /*[[ShowReplyDesign]]*/
html[class*="discourse-"] .d-editor-preview-wrapper
{
  padding-top: 32px !important;
  border: 1px solid #919191;
}

html[class*="discourse-"] .d-editor-preview-wrapper::before
{
  content: "Formatting preview:";
  margin-top: -34px;
  padding: 5px 15px;
  font-style: italic;
  font-size: 1.1487em;
  color: #646464;
}

html[class*="discourse-"] .d-editor-preview
{
  overflow: auto !important;
  padding: 10px !important;
  border-top: 1px solid #e9e9e9;
}
/* full date for older posts - older than "Fri, 14 Jul 2017 02:40:00 +0000" */
html[class*="discourse-"] .post-date > .relative-date:not([data-time^="15"])::after
{
  content: " (" attr(title) ")";
  font-weight: bold;
  color: #ff5c5c;
}
/* end of style / modification */

@-moz-document url-prefix("https://userstyles.org/styles/172460/")
{
/* an additional bottom margin for the option */
  #style-settings > #advancedsettings_area > .setting_div
  {
    margin-bottom: 15px !important;
  }
/* equally wide adjustment fields 1/2 */
  #style-settings > #advancedsettings_area > .setting_div > div > div > div,
.setting_div > div > input
  {
    min-width: 260px !important;
  }
/* equally wide adjustment fields 2/2 */
  #style-settings > #advancedsettings_area > .setting_div > div > select
  {
    min-width: 265px !important;
  }
/* Additional description (notes) visible without stretching the field */
  #notes_textarea
  {
    min-height: 310px !important;
    max-height: 100% !important;
  }

  #applies_link::after
  {
    content: " and almost other websites with discourse engine.";
  }
}

Your userstyle seems to be damn near perfectly convertable to uBO/Nano/AdGuard’s :style format, after I spent some 20min converting it in Sublime Text.

(Entries marked !/!/! were those that Nano’s built-in syntax checker objected to, and which I didn’t have time to investigate into.)

— uBO version —
! i really want this to be global
! different color of the user's active circle
com,net,org##html[class*="discourse-"].whos-online-ring .topic-avatar.user-online img.avatar:style(box-shadow: 0 0 0 1px #fff, 0 0 0 3px/*[[CircleColor]]*/ !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary img.avatar:style(box-shadow: 0 0 0 1px #fff, 0 0 0 3px/*[[CircleColor]]*/ !important)
com,net,org##html[class*="discourse-"].whos-online-ring .docked-avatar.user-online img.avatar:style(box-shadow: 0 0 0 1px #fff, 0 0 0 3px/*[[CircleColor]]*/ !important)
com,net,org##html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar:style(box-shadow: 0 0 0 1px #fff, 0 0 0 3px/*[[CircleColor]]*/ !important)
!/!/! com,net,org##html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar img.avatar(box-shadow: 0 0 0 2px #fff, 0 0 0 5px/*[[CircleColor]]*/ !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .primary img.avatar:style(box-shadow: 0 0 0 2px #fff, 0 0 0 5px/*[[CircleColor]]*/ !important)
! removing the user's active circle
com,net,org##html[class*="discourse-"].whos-online-ring .topic-avatar.user-online img.avatar:style(box-shadow: none !important)
com,net,org##html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar img.avatar:style(box-shadow: none !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .primary img.avatar:style(box-shadow: none !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary img.avatar:style(box-shadow: none !important)
com,net,org##html[class*="discourse-"].whos-online-ring .docked-avatar.user-online img.avatar:style(box-shadow: none !important)
com,net,org##html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar:style(box-shadow: none !important)
! common features of the designation of active people /*[[RightDot]]*/
com,net,org##div.topic-avatar.user-online:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .primary:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##html[class*="discourse-"].whos-online-ring .docked-avatar.user-online:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster:after:style(content: "" !important; background: /*[[avatarOnline]]*/!important; display: block !important; border-radius: 20px !important; position: absolute !important; box-shadow: 0 0 0 4px #fff, 0 0 0 1px #fff !important; bottom: 0 !important; right: 0 !important)
com,net,org##div.topic-avatar.user-online:after:style(box-shadow: 0 0 0 2px #fff, 0 0 0 1px #fff !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary:after:style(box-shadow: 0 0 0 2px #fff, 0 0 0 1px #fff !important)
com,net,org##html[class*="discourse-"].whos-online-ring .docked-avatar.user-online:after:style(box-shadow: 0 0 0 2px #fff, 0 0 0 1px #fff !important)
com,net,org##html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster:after:style(box-shadow: 0 0 0 2px #fff, 0 0 0 1px #fff !important)
com,net,org##html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar:after:style(height: 30px !important; width: 30px !important)
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .primary:after:style(height: 30px !important; width: 30px !important)
com,net,org##html[class*="discourse-"] div.topic-avatar.user-online:after
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary:after:style(height: 13px !important; width: 13px !important)
com,net,org##html[class*="discourse-"].whos-online-ring .docked-avatar.user-online:after:style(bottom: -3px !important; right: 2px !important; height: 10px; width: 10px)
com,net,org##html[class*="discourse-"].whos-online-ring .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster:after:style(top: -8px !important; left: 35px !important; position: relative !important; height: 10px; width: 10px)
! summary on the active people profile /*[[RightDot]]*/
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .primary:after:style(left: 100px !important; bottom: 8px !important)
! activity on the profile of active people /*[[RightDot]]*/
com,net,org##html[class*="discourse-"].whos-online-ring body.user-page-online .collapsed-info .primary:after:style(left: 36px !important; bottom: 20px !important)
! activity comments - the 'community advises' section with special plugin /*[[RightDot]]*/
com,net,org##html[class*="discourse-"] .topic-post.comment div.topic-avatar.user-online:after:style(bottom: -5px !important; right: 16px !important)
! more aesthetic comments - need special plugin
com,net,org##html[class*="discourse-"] .topic-post.comment .topic-body .regular:style(padding: 15px 0 0 15px)
com,net,org##html[class*="discourse-"] .qa-post .count:style(border: 2px solid #dcdcdc; margin-top: 5px)
com,net,org##html[class*="discourse-"] .qa-post .btn:hover:style(border: 2px solid #b2b2b2)
com,net,org##html[class*="discourse-"] .qa-post .btn:style(border: 2px solid #dcdcdc; margin-top: 5px)
! links that do not track clicks - none by default
com,net,org##html[class*="discourse-"] a.no-track-link:after:style(display: inline-block !important; margin-left: 4px !important; content: "/*[[noTrackingLink]]*/" !important)
! hiding icons of "non-tracking links" in unnecessary places
com,net,org##html[class*="discourse-"] .title a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .lightbox-wrapper a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] a.html5-title-text.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .stackexchange .onebox-body > a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .stackexchange .date a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubcommit .onebox-body > a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubcommit .date a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubissue .onebox-body > a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubissue .date a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubpullrequest .onebox-body > a.no-track-link:after:style(content: "" !important)
com,net,org##html[class*="discourse-"] .githubpullrequest .date a.no-track-link:after:style(content: "" !important)
! spoilers, a more readable "open / close" button - alpha stability /*[[DetailsDesign]]*/
com,net,org##html[class*="discourse-"] details:not([open]):not(.open):style(border-width: 1px 1px 0)
com,net,org##html[class*="discourse-"] details:style(border-width: 1px; border-style: solid; border-radius: 3px; margin: 1em 0; background-color: #fff; border-color: #ddd)
com,net,org##html[class*="discourse-"] details.open:style(padding: 15px)
com,net,org##html[class*="discourse-"] details[open]:style(padding: 15px)
com,net,org##html[class*="discourse-"] details summary:style(padding: 15px 5px; border-width: 0 0 1px; border-style: solid; margin: 0; border-color: #ddd)
com,net,org##html[class*="discourse-"] details summary:style(display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; word-break: break-all; background-color: #f3f3f3; color: #333)
com,net,org##html[class*="discourse-"] details.open > summary:style(margin: -15px -15px 15px -15px)
com,net,org##html[class*="discourse-"] details[open] > summary:style(margin: -15px -15px 15px -15px)
com,net,org##html[class*="discourse-"] details > summary:after:style(font-weight: 400; background-color: /*[[DetailsOpen]]*/; color: #fff; content: 'open' !important; display: inline-flex !important; justify-content: center !important; border-radius: 5px !important; margin-left: 0.5em !important; float: right; width: 4.5em)
com,net,org##html[class*="discourse-"] details[open] > summary:after:style(background-color: /*[[DetailsClose]]*/; content: 'close' !important; margin-left: 0.5em !important)
com,net,org##html[class*="discourse-"] details.open > summary:after:style(background-color: /*[[DetailsClose]]*/; content: 'close' !important; margin-left: 0.5em !important)
!/!/! com,net,org##html[class*="discourse-"] summary:-webkit-details-marker:style(display: none !important)
com,net,org##html[class*="discourse-"] summary:before:style(content: '' !important)
com,net,org##html[class*="discourse-"] details[open] > summary:before:style(content: '' !important)
com,net,org##html[class*="discourse-"] details.open > summary:before:style(content: '' !important)
com,net,org##html[class*="discourse-"] .docked-post-content summary:after:style(display: inline !important; text-align: center !important)
com,net,org##html[class*="discourse-"] .docked-post-content details:style(width: 192px)
com,net,org##html[class*="discourse-"] .babble-post-cooked details:style(width: 192px)
! color of spoilers in the message bubble
com,net,org##html[class*="discourse-"] .docked-post-content details:style(color: #222)
com,net,org##html[class*="discourse-"] .docked-post-content summary:style(color: #222)
!/!/! com,net,org##html[class*="discourse-"] img.avatar:style(border-radius: /*[[avatarRadius]]*/!important)
! chat, repair of missing styles - maybe outdated and need special plugin
com,net,org##html[class*="discourse-"] .babble-sidebar:style(z-index: 101 !important)
com,net,org##html[class*="discourse-"] .babble-sidebar .btn-icon:hover:style(color: #555 !important)
com,net,org##html[class*="discourse-"] a.expand-hidden:style(display: block)
com,net,org##html[class*="discourse-"] #babble-icon-unread > i:style(color: #999 !important)
com,net,org##html[class*="discourse-"] .babble-composer-actions button:hover:style(background: #d0d0d0 !important)
com,net,org##html[class*="discourse-"] .babble-post-cooked .site-icon:style(height: auto !important)
! repair of the chat button - maybe outdated and need special plugin
com,net,org##html[class*="discourse-"] .babble-sidebar-collapsed--right .btn, .discourse-no-touch .babble-sidebar-collapsed--right .btn:hover:style(border-radius: 50% 0 0 50% !important)
! deleted messages - no restore, so why display - need special plugin
! ------------------------------------------------------------------------------
! .babble-post:has(.babble-staged-post.babble-deleted-post) - CSS4 / jQuery
!/!/! com,net,org##html[class*="discourse-"] .babble-staged-post.babble-deleted-post:style(display: /*[[deletedPost]]*/!important)
! hiding an icon with unread messages on the shoutbox - need special plugin
!/!/! com,net,org##html[class*="discourse-"] .babble-unread--sidebar.babble-unread:style(display: /*[[HideUnread]]*/!important)
! hiding the shoutbox icon as we do not use or disturb - need special plugin
!/!/! com,net,org##html[class*="discourse-"] .babble-sidebar-collapsed--right.babble-sidebar-collapse:style(display: /*[[HideBabble]]*/!important)
! reactions to posts to be on a separate line - need special plugin
com,net,org##html[class*="discourse-"] section.post-menu-area:style(clear: both !important)
com,net,org##html[class*="discourse-"] a.expand-hidden:style(clear: both !important)
! instructing the moderator to make the whole post a uniform background
com,net,org##html[class*="discourse-"] .moderator .topic-body:style(background: #ffffca !important)
! clear color of hashtags
com,net,org##html[class*="discourse-"] .extra-info-wrapper .discourse-tag:style(color: #8f8f8f !important)
com,net,org##html[class*="discourse-"] .discourse-tag.simple:before:style(content: "#"; font-weight: bold)
! darker color of fields with code
!/!/! com,net,org##html[class*="discourse-"] p > code:style(background: /*[[codeBackground]]*/!important)
!/!/! com,net,org##html[class*="discourse-"] li > code:style(background: /*[[codeBackground]]*/!important)
!/!/! com,net,org##html[class*="discourse-"] pre > code:style(background: /*[[codeBackground]]*/!important)
! large graphics (to smaller) in stylized links with description
com,net,org##html[class*="discourse-"] aside.onebox .onebox-body img.onebox-full-image:style(max-height: 170px !important; max-width: 20% !important)
! lowered message preview, formatting and slider /*[[ShowReplyDesign]]*/
com,net,org##html[class*="discourse-"] .d-editor-preview-wrapper:style(padding-top: 32px !important; border: 1px solid #919191)
com,net,org##html[class*="discourse-"] .d-editor-preview-wrapper:before:style(content: "Formatting preview:"; margin-top: -34px; padding: 5px 15px; font-style: italic; font-size: 1.1487em; color: #646464)
com,net,org##html[class*="discourse-"] .d-editor-preview:style(overflow: auto !important; padding: 10px !important; border-top: 1px solid #e9e9e9)
! full date for older posts - older than "Fri, 14 Jul 2017 02:40:00 +0000"
com,net,org##html[class*="discourse-"] .post-date > .relative-date:not([data-time^="15"]):after:style(content: " (" attr(title) ")"; font-weight: bold; color: #ff5c5c)
! end of style / modification
! @-moz-document url-prefix("https://userstyles.org/styles/172460/")
! an additional bottom margin for the option
com,net,org##style-settings > #advancedsettings_area > .setting_div:style(margin-bottom: 15px !important)
! equally wide adjustment fields 1/2
com,net,org##style-settings > #advancedsettings_area > .setting_div > div > div > div, .setting_div > div > input:style(min-width: 260px !important)
! equally wide adjustment fields 2/2
com,net,org##style-settings > #advancedsettings_area > .setting_div > div > select:style(min-width: 265px !important)
! Additional description (notes) visible without stretching the field
com,net,org##notes_textarea:style(min-height: 310px !important; max-height: 100% !important)
com,net,org##applies_link:after:style(content: " and almost other websites with discourse engine.")
1 Like

I try this latter (who work as CSS filter or not).

Last filters/paragraph with ##style-settings, this is for only customisation “pop-up” on userstyles.org (for only my published code).


Maybe in the feature try copy CSS on openusercss.org (when I learn how use the variables on that plafrom - now is too hard).


!/!/! com,net,org##html[class*="discourse-"] p > code:style(background: /*[[codeBackground]]*/!important)
!/!/! com,net,org##html[class*="discourse-"] li > code:style(background: /*[[codeBackground]]*/!important)
!/!/! com,net,org##html[class*="discourse-"] pre > code:style(background: /*[[codeBackground]]*/!important)

Try change /*[[codeBackground]]*/ to color e.g. #E7E7E7 - IMO darker and better on white background (I no need change settings for GPU/Monitor).

Any marked with “/*[[...]]*/” needed import color or text to property works.


!/!/! com,net,org##html[class*="discourse-"] summary:-webkit-details-marker:style(display: none !important)

Maybe uBo / NaB marked as invalid “:-webkit-details-marker”…, maybe possible another method to hide default arrow…, maybe valid with “:::arrow_right:::-webkit-details-marker

Grohill rather recommend the faddles reset in Stylus e.g. chromium scrollbars:

https://codepen.io/MathieuRichard/pen/HAgnm

this is no possible works in uBO as CSS:

/* Up */
::-webkit-scrollbar-button:vertical:decrement

/* Down */
::-webkit-scrollbar-button:vertical:increment

/* Left */
::-webkit-scrollbar-button:horizontal:decrement

/* Right */
::-webkit-scrollbar-button:horizontal:increment

but works in AdGuard Ablocker “good”.