Greasy Fork is available in English.

Fora Discourse małe modyfikacje

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.

/* ==UserStyle==
@name:pl      Fora Discourse małe modyfikacje
@name         Discourse forums little modifcations
@namespace    discourse-f-l-m
@version      1.0.12
@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   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
==/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
    }
    /* 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;
        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 / 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"])::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)
    }
    /* end of style / modification */
}