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.
Stan na
/* ==UserStyle==
@name Discourse forums little modifcations
@name:pl Fora Discourse małe modyfikacje
@namespace discourse-f-l-m
@version 1.0.2
@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.
@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.
@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 color codeBackground "Background color under codes:" #E7E7E7
@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"}
==/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-"] 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: '/*[[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-"] details[open] > summary::after,
html[class*="discourse-"] 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-"] 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-"]:not(.mobile-view) .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" maybe later "Sun, 13 Sep 2020 12:26:40 +0000" */
html[class*="discourse-"] .post-date > .relative-date:not([data-time^="15"]):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;
}
/* end of style / modification */
}