A style for forums powered by a discourse engine. It fixes minor bugs in CSS, adds a new way of highlighting active users, add a different look to spoilers on content.
/* ==UserStyle==
@name:pl Fora Discourse małe modyfikacje
@name Discourse forums little modifcations
@namespace discourse-f-l-m
@version 1.0.18
@description:pl Styl dla forów napędzanych silnikiem discourse. Naprawia drobne błędy w CSS, dodaje nowy sposób wyróżniania aktywnych użytkowników, dodaje inny wygląd do spoilerów na treści.
@description A style for forums powered by a discourse engine. It fixes minor bugs in CSS, adds a new way of highlighting active users, add a different look to spoilers on content.
@author krystian3w
@license CC-BY-SA-4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
@preprocessor uso
@var color avatarOnline "User's dot color (icons) online:" #F7941D
@var text noTrackingLink "Link icon without tracking (does not work without an additional script):" 📎
@var select deletedPost "Hide deleted posts in the chat:" {"hide (default)": "none", leave: "block"}
@var select avatarRadius "Rounding avatars:" {"square (default)": "0", rounded: "50%", "slightly rounded": "25%", "flattened egg": "50% 50% 50% 50% / 60% 60% 40% 40%"}
@var select RightDot "Dot instead of a circle with active users:" {"dot (default)": "*\/", "green circle": ""}
@var color CircleColor "The color of the user's active circle:" #33FF33
@var select DetailsDesign "spolier style (on hidden / collapsed content):" {"new (default)": "*\/", "simple triangle / browser style": ""}
@var color DetailsOpen "The color of the open button (spoilers):" #D9534F
@var text DetailsOpenT "Details text for 'open' button:" open
@var color DetailsClose "The button's color close (spoilers):" #5CB85C
@var text DetailsCloseT "Details text for 'close' button:" close
@var select ShowReplyDesign "Formatting the answer preview field:" {"no change (default)": "", "similar to the writing field": "*\/"}
@var select ShowReplyReaction "Formatting reactions at mobile to view tooltip:" {"no change (default)": "", "yes": "*\/"}
@var select HideUnread "Hide an icon with unread messages on the shoutbox:" {"Leave (default)": "block", hide: "none"}
@var select HideBabble "Hide the shoutbox icon as we do not use or interrupt:" {"Leave (default)": "block", Hide: "none"}
@var select codePrefersColorScheme "Enforce \"prefers-color-scheme\" CSS option:" {"no (default)": "", "yes": "*\/"}
@var color codeBackgroundLight "Background color under codes - bright mode (need enable option upper \"prefers-color-scheme\"):" #E7E7E7
@var color codeBackgroundDark "Background color under codes - dark mode (need enable \"prefers-color-scheme\" and may glitch on forums with only light temehes) :" #2A2A2A
// @compatible firefox Firefox
// @compatible chrome Chrome
// @compatible edge Edge
// @compatible opera Opera
// @compatible safari Safari
==/UserStyle== */
@-moz-document regexp("^https?\\:\\/\\/.*$") {
/* 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
}
html[class*="discourse-"].whos-online-ring body.user-page-online .primary::after {
top: 100px !important;
}
html[class*="discourse-"].whos-online-ring #user-card.user-online .user-card-avatar::after {
top: 95px !important;
}
/* summary on the active people profile /*[[RightDot]]*/
html[class*="discourse-"].whos-online-ring body.user-page-online .primary::after {
left: 100px !important;
bottom: -30px !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;
top: 36px !important;
bottom: unset !important
}
/* no longer works?:
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-"] :is(.d-editor-preview, .cooked) details:not([open]):not(.open) {
border-width: 1px 1px 0
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details {
border-width: 1px;
border-style: solid;
border-radius: 3px;
margin: 1em 0;
background-color: var(--blend-primary-secondary-5);
border-color: var(--primary-low)
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details.open,
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details[open] {
padding: 15px
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details summary {
padding: 15px 5px;
border-width: 0 0 1px;
border-style: solid;
margin: 0;
border-color: var(--primary-low)
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) 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: var(--primary-very-low);
color: var(--primary)
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details.open > summary,
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details[open] > summary {
margin: -15px -15px 15px -15px
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details > summary::after {
font-weight: 400;
background-color: /*[[DetailsOpen]]*/;
color: #fff;
content: '/*[[DetailsOpenT]]*/' !important;
display: inline-flex !important;
justify-content: center !important;
border-radius: 5px !important;
margin-left: 0.5em !important;
margin-right: 0.5em !important;
float: right;
width: 4.5em
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details[open] > summary::after,
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details.open > summary::after {
background-color: /*[[DetailsClose]]*/;
content: '/*[[DetailsCloseT]]*/' !important
}
html[class*="discourse-"] summary::-webkit-details-marker {
display: none !important
}
html[class*="discourse-"] summary::before,
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details[open] > summary::before,
html[class*="discourse-"] :is(.d-editor-preview, .cooked) 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
}
html[class*="discourse-"] :is(.d-editor-preview, .cooked) details img:not(.emoji):not(.avatar):not(.thumbnail):not(.site-icon) {
width: 100%;
height: auto
}
/* 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-"]:not(.mobile-view) .babble-sidebar {
z-index: 101 !important;
}
/* some one fixed in plugin by 199 */
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 (2022-2024) / 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
}
/* reactions pop-up with larger icons (up to 32x32) - need special plugin */
.emoji-picker img.emoji {
width: 24px !important;
height: 24px !important
}
/* greenish background for retrot plugin icons
.post-retort {
background: #009500;
border-radius: 6px;
border: 1px solid #8f8f9d;
padding: 3px
}
.post-retort:hover {
background: #006e00
}
/* instructing the moderator to make the whole post a uniform background */
html[class*="discourse-"] .moderator .topic-body {
background: var(--highlight-low-or-medium) !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
}
/* 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 {
margin-top: 0 !important;
padding-top: 36px !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: "Sun, 13 Sep 2020 14:26:40 +0200"
(in the past * "Wed, 20 May 2020 20:40:00 +0200" ~ "Sun, 13 Sep 2020 14:26:40 +0200"
* "Fri, 14 Jul 2017 04:40:00 +0200") */
html[class*="discourse-"] .post-date > .relative-date:not([data-time^="16"]):not([data-time^="17"])::after {
content: " (" attr(title) ")";
font-weight: bold;
color: #ff5c5c
}
/* soloved */
.extra-info-wrapper .topic-statuses a.topic-status[title] .d-icon {
color: #008000
}
/* darker color of fields with code */
html[class*="discourse-"] p > code,
html[class*="discourse-"] li > code,
html[class*="discourse-"] pre > code {
background: var(--primary-very-low) !important
}
/*babble chat recover resize */
.babble-sidebar.babble-sidebar--right {
resize: horizontal;
direction: rtl;
max-width: calc(100vw - 22px)
}
.babble-sidebar.babble-sidebar--right > div {
direction: ltr
}
.babble-sidebar.babble-sidebar--right > .babble-chat textarea[style] {
resize: unset !important
}
.btn.babble-sidebar-collapsed.babble-sidebar-collapsed--right[style] {
width: unset !important
}
.topic-post.comment .topic-body {
width: calc(100% - 40px)
}
/* ShowReplyReaction at mobile (legacy engine or plugin) with CSS4 /*[[ShowReplyReaction]]*/
.mobile-device .topic-post.retort nav.post-controls .actions .post-retort-container:has(.emoji) {
margin-top: 25px;
padding-left: 110px;
}
/* end of style / modification */
}