Skip to content

Instantly share code, notes, and snippets.

@sp00n

sp00n/mtb-news.de-darkmode.user.css

Last active September 15, 2023 05:32
Show Gist options
  • Save sp00n/2fa640e641a3e729cdc8035a4da2412d to your computer and use it in GitHub Desktop.
Save sp00n/2fa640e641a3e729cdc8035a4da2412d to your computer and use it in GitHub Desktop.
Download ZIP
mtb-news.de Dark Mode
Raw
mtb-news.de-darkmode.user.css
/* ==UserStyle==
@name mtb-news.de Dark Mode
@description A dark mode for the mtb-news.de forums, to be used with an addon like Stylus
@namespace sp00n.mtb-news.de
@version 3.2.4
@author sp00n82
@homepageURL https://gist.github.com/sp00n/2fa640e641a3e729cdc8035a4da2412d
@supportURL https://www.mtb-news.de/forum/t/darkmode-fuer-das-neue-forum-css-code-fuer-stylus-addon.891774/
@license Creative Commons CC BY-SA 3.0 DE
==/UserStyle== */
@-moz-document regexp("http(s)?://(www)?\\.mtb\\-news\\.de/forum/.*") {
/* CSS variables */
:root {
--dark-background-main: #333334;
--dark-background-dark: #2D2D2D;
--dark-background-darker: #202020;
--dark-background-medium: #3F3F3F;
--dark-background-light: #515151;
--dark-background-lighter: #747474;
--dark-background-yellow: #FFCC11;
--dark-border-color: #757575;
--dark-border-color-light: #888888;
--dark-border-color-code: #9B6A21;
--dark-border-color-code-darker: #624416;
--dark-text-color-main: #EAEAEA;
--dark-text-color-header: #8C8C8C;
--dark-text-color-code-title: #FFB74B;
--dark-text-color-thread-title: #E3A344;
--dark-text-color-thread-title-read: #C78F3D;
--dark-text-color-lighter: #E5E2E2;
--dark-text-color-light: #A2A2A2;
--dark-text-color-medium: #949494;
--dark-text-color-dark: #777777;
--dark-text-color-darker: #000000;
--dark-link-color-default: #82BCE6;
}
/* General background color */
html, body {
background-color: var(--dark-background-main);
color: var(--dark-text-color-main);
}
/* The background color of the container surrounding the posts */
.p-body-inner {
background-color: var(--dark-background-main);
}
/* Main color for the links */
a {
color: var(--dark-link-color-default);
}
/* The title text of the current post */
.p-title-value {
color: var(--dark-text-color-code-title);
}
/* URL preview */
.bbCodeBlock--unfurl {
color: var(--dark-text-color-main);
}
/* The header has a border bottom */
.p-sectionLinks {
border-color: var(--dark-background-medium) !important;
}
/* Info blocks (?) */
.blockStatus {
background-color: var(--dark-background-light);
border-color: var(--dark-border-color-light);
border-left-color: var(--dark-text-color-thread-title-read);
color: var(--dark-text-color-main);
}
/* General block messages */
.block-container {
color: var(--dark-text-color-main);
border-color: var(--dark-border-color);
background-color: var(--dark-background-main);
}
.blockMessage {
color: var(--dark-text-color-main);
background-color: var(--dark-background-main);
border-color: var(--dark-border-color);
}
.block-footer {
background: linear-gradient(180deg, var(--dark-background-dark), var(--dark-background-main));
border-color: var(--dark-border-color);
}
.contentRow-fader {
background: linear-gradient(180deg, var(--dark-background-dark), var(--dark-background-main));
}
.block-row.block-row--clickable:focus,
.block-row.block-row--clickable:hover {
background-color: var(--dark-background-light);
}
/* This is used e.g. for the search results */
.block-row.block-row--separated,
.block-row.block-row--separated + .block-row {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Notices overview */
.block-row.block-row--alt {
color: var(--dark-text-color-light);
}
/* Unread entries in the notices overview */
.block-row.block-row--highlighted {
color: #FFFFFF;
border-left: 3px solid var(--dark-text-color-thread-title);
background-color: var(--dark-background-dark);
padding-left: 7px; /* 3px less */
}
.block-row.block-row--highlighted .contentRow-main {
font-weight: bold;
}
.block-row.block-row--highlighted .contentRow-main .contentRow-minor {
font-weight: normal;
}
/* New notification entries */
.menu-row.menu-row--highlighted {
background: var(--dark-background-light);
color: var(--dark-text-color-main);
}
/* Old notification entries */
.menu-row.menu-row--alt {
background: var(--dark-background-main);
color: var(--dark-text-color-main);
}
.menu-row.menu-row--clickable:hover {
background: var(--dark-background-main);
}
.menu-row.menu-row--separated + .menu-row {
border-top-color: var(--dark-border-color);
}
/* Notifications page */
.listPlain[data-xf-init="alerts-list"] .alert {
color: var(--dark-text-color-light);
}
.listPlain[data-xf-init="alerts-list"] .alert.is-unread {
color: #FFFFFF;
border-left: 3px solid var(--dark-text-color-thread-title);
padding-left: 7px; /* 10px - 3px border */
background-color: var(--dark-background-dark);
}
/* Updated: Unread entries in the notices overview popup */
.js-alertsMenuBody .is-unread {
color: #FFFFFF;
border-left: 3px solid var(--dark-text-color-thread-title);
background-color: var(--dark-background-dark);
}
/* The mark unread dot */
a.alertToggler {
color: var(--dark-text-color-thread-title-read);
}
/* The settings left menu */
.blockLink:hover,
.blockLink.is-selected {
background-color: var(--dark-background-lighter);
color: var(--dark-text-color-main);
}
.blockLink.is-selected {
border-left-color: var(--dark-text-color-thread-title);
}
/* Forum overview */
.node + .node {
border-color: var(--dark-border-color);
}
.node-body {
background-color: var(--dark-background-darker);
}
/* Size and color of the forum name */
.node-title {
font-size: 16px;
}
.node-title a {
color: var(--dark-text-color-thread-title);
}
/* Sub Forum */
a.subNodeLink {
color: var(--dark-text-color-medium);
}
/* A thread block in the overview */
.structItem {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Slightly decrease the size of the thread title */
.structItem-title {
font-size: 16px;
}
/* The color of the thread titles */
.structItem-title a {
/* color: var(--dark-text-color-thread-title); */
/* color: var(--dark-text-color-code-title); */
/* color: var(--dark-border-color-code); */
color: var(--dark-text-color-thread-title-read);
}
/* Unread thread titles */
.is-unread .structItem-title a {
color: var(--dark-text-color-thread-title);
}
/* Private Messages overview */
.structItem-cell a.structItem-title {
color: var(--dark-text-color-thread-title);
}
/* Search result title */
.contentRow-title a {
color: var(--dark-text-color-thread-title);
}
/* The datetime */
.structItem-minor a time {
color: var(--dark-text-color-main);
}
/* Page number links */
.structItem-pageJump a {
background: var(--dark-background-darker);
border-color: var(--dark-background-main);
color: var(--dark-border-color-code);
opacity: 1;
}
/* On hover */
.structItem:hover .structItem-pageJump a,
.has-touchevents .structItem-pageJump a {
background: var(--dark-background-darker);
border-color: var(--dark-background-main);
color: var(--dark-border-color-code);
}
.structItem .structItem-pageJump a:hover,
.structItem .structItem-pageJump a:focus,
.structItem .structItem-pageJump a:active {
color: var(--dark-text-color-code-title);
}
/* Post container */
.block--messages .message,
.block--messages .block-row {
color: var(--dark-text-color-main);
background-color: var(--dark-background-dark);
border-color: var(--dark-border-color);
}
/* Don't allow other text colors */
.block--messages .message .message-body span[style^="color"] {
color: var(--dark-text-color-main) !important;
}
/* Highlighted posts */
.block--messages .message.message--promoted-post,
.block--messages .message.mtbnews-post--highlight {
background-color: #0c2b0c;
border-color: #54aa54;
}
/* Post user column */
.message-cell.message-cell--user,
.message-cell.message-cell--action {
background-color: var(--dark-background-darker);
border-right-color: var(--dark-border-color);
}
/* The arrow pointing to the user column */
.message-userArrow,
.message-userArrow::after {
border-right-color: var(--dark-border-color);
}
/* Make the post header in another color */
/* Remove the padding from the outer container and move it to the inner ones */
.message.message--post .message-cell.message-cell--main {
padding: 0;
}
/* Add the missing padding to the header, content and footer */
.message.message--post .message-attribution {
background-color: var(--dark-background-darker);
padding: 6px 10px 6px 10px;
}
.message.message--post .message-content {
padding-left: 10px;
padding-right: 10px;
}
.message.message--post .message-footer {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0;
}
/* Move the "new" badge icon to the right */
.message.message--post.is-unread .message-attribution-opposite--list li:first-child {
order: 10;
margin-left: 14px;
}
.message.message--post.is-unread .message-attribution-opposite--list li:first-child span {
padding-left: 0.65em;
padding-right: 0.65em;
}
/* The post header */
.message-attribution {
color: var(--dark-text-color-header);
border-bottom-color: var(--dark-border-color);
}
/* Code blocks and quotes */
.bbCodeBlock {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
border-left-color: var(--dark-border-color-code);
}
/* Quotes */
.fr-view blockquote {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
border-left-color: var(--dark-border-color-code);
}
.fr-view blockquote[data-quote]::before {
background-color: var(--dark-background-dark);
}
/* Code block title */
.bbCodeBlock-title {
color: var(--dark-text-color-code-title);
background-color: var(--dark-background-light);
}
/* Code editor */
.codeEditor.CodeMirror,
.codeEditor.CodeMirror.CodeMirror-focused {
background-color: var(--dark-background-darker);
color: var(--dark-text-color-main);
}
.CodeMirror-gutters {
background-color: var(--dark-background-darker);
border-right-color: var(--dark-background-dark);
}
/* This is the color of the text input cursor */
.CodeMirror-cursor {
border-left-color: var(--dark-text-color-main);
}
/* Signature */
.message-signature {
border-color: var(--dark-border-color);
color: #8c8c8c;
}
/* Reactions bar (likes, etc) */
.reactionsBar {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
/* This now needs a margin to the bottom because we removed the bottom padding of the parent element */
margin-bottom: 10px;
}
.reactionsBar .reactionSummary > li,
.message-responseRow .reactionSummary > li {
background: transparent;
margin-left: 1px;
}
/* Tooltips */
/* Content preview */
.tooltip--preview .tooltip-content {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
color: var(--dark-text-color-main);
}
/* Fade out */
.tooltip--preview .tooltip-content-inner .tooltip-content-cover {
background: linear-gradient(to bottom, rgba(75, 75, 75, 0) 160px, var(--dark-background-darker) 200px);
}
/* Arrows */
.tooltip-arrow {
border-color: var(--dark-border-color);
}
.tooltip--top .tooltip-arrow,
.tooltip--top .tooltip-arrow::after {
border-top-color: var(--dark-border-color) !important;
}
/* Other tooltips */
.tooltip--bookmark .tooltip-content,
.tooltip--member .tooltip-content,
.tooltip--share .tooltip-content {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
.memberTooltip-header {
background-color: var(--dark-background-dark);
color: var(--dark-text-color-main);
}
.memberTooltip-name a {
color: var(--dark-text-color-code-title);
}
.tooltip--bookmark .tooltip-content,
.tooltip--member .tooltip-content,
.tooltip--share .tooltip-content {
color: var(--dark-text-color-main);
}
/* This is the tooltip for likes, etc */
.tooltip--reaction .tooltip-content {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Special user banner */
.userBanner.userBanner--staff,
.userBanner.userBanner--primary {
background-color: var(--dark-background-main);
border-color: var(--dark-border-color-code);
}
/* Quick reply tool bar */
.fr-toolbar,
.fr-box.fr-basic .fr-toolbar.fr-top {
background-color: var(--dark-background-light);
border-color: var(--dark-border-color);
border-top-color: var(--dark-border-color-code);
}
.fr-box.fr-basic.is-focused .fr-toolbar.fr-top {
background: var(--dark-background-light);
}
/* More Toolbars */
.fr-toolbar .fr-more-toolbar {
background-color: var(--dark-background-light);
}
.fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {
background-color: var(--dark-background-light);
}
/* Borders */
.fr-box.fr-basic {
border-color: var( --dark-background-lighter);
}
.fr-toolbar .fr-btn-grp {
border-color: var( --dark-background-lighter);
}
/* Buttons in the tool bar */
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn {
color: var(--dark-text-color-darker);
}
/* Dropdown notification arrow */
.fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
.fr-popup .fr-command.fr-btn.fr-dropdown::after,
.fr-modal .fr-command.fr-btn.fr-dropdown::after {
/*border-top-color: var(--dark-background-light);*/
border-top-color: #000000;
}
/* Selected Dropdown button */
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active {
background: var(--dark-background-lighter);
}
/* Selected Dropdown element */
.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
background: var(--dark-background-light);
}
/* Rounded corners for Dropdowns */
.fr-command.fr-btn + .fr-dropdown-menu {
background: none;
}
/* Activated Buttons */
.fr-toolbar .fr-command.fr-btn.fr-active:not(.fr-disabled),
.fr-popup .fr-command.fr-btn.fr-active:not(.fr-disabled) {
color: var(--dark-text-color-thread-title-read);
}
/* Disabled buttons */
.fr-toolbar .fr-command.fr-btn.fr-disabled,
.fr-popup .fr-command.fr-btn.fr-disabled {
color: var(--dark-text-color-dark);
}
/* Borders between buttons */
.fr-separator {
background-color: var(--dark-border-color);
}
/* Popups */
.fr-popup {
background-color: var(--dark-background-main);
border-top-color: var(--dark-text-color-code-title);
}
.fr-popup .fr-arrow {
border-bottom-color: var(--dark-text-color-code-title);
}
.fr-popup .fr-input-line input[type="text"],
.fr-popup .fr-input-line textarea {
background-color: var(--dark-background-lighter);
border-color: var(--dark-border-color-light);
}
.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
background-color: var(--dark-background-main);
color: var(--dark-text-color-main);
}
.flashMessage {
/*background-color: var(--dark-background-yellow);*/
background-color: rgba(255, 204, 17, 0.9);
}
/* Quick reply text box */
.fr-box.fr-basic .fr-wrapper {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* When switching to BBCode */
.message-editorWrapper .fr-box.fr-basic,
.message-editorWrapper .fr-box.fr-basic.is-focused,
.message-editorWrapper .fr-box.fr-basic.is-focused .fr-toolbar.fr-top {
background: var(--dark-background-light);
}
.message-editorWrapper .fr-box.bbWrapper textarea.input {
background-color: var(--dark-background-darker);
color: var(--dark-text-color-main);
}
/* Bottom border for the toolbar */
.fr-toolbar .fr-btn-grp {
border-bottom-width: 1px;
}
/* Move the bottom bar when an extra toolbar is open */
.fr-box.fr-basic.fr-top.fr-toolbar-open .fr-btn-grp {
border-bottom-width: 0;
}
.fr-box.fr-basic.fr-top.fr-toolbar-open .fr-more-toolbar {
border-bottom: 1px solid var( --dark-background-lighter);
}
/* The BBCode editor in full screen mode */
.formRow.formRow--input.formRow--fullWidth .fr-box textarea.input {
background-color: var(--dark-background-darker);
color: var(--dark-text-color-main);
}
/* The text color in the answer box */
.fr-box.fr-basic .fr-element,
.fr-box.fr-basic.is-focused .fr-element{
color: var(--dark-text-color-main);
}
/* The placeholder text */
.fr-wrapper .fr-placeholder {
color: var(--dark-text-color-header);
}
/* Shortened quote box */
.bbCodeBlock-expandLink {
background: linear-gradient(to bottom, rgba(50, 50, 50, 0) 0%, var(--dark-background-main) 80%);
}
/* Inline Preview */
.bbCodePreview-content {
color: var(--dark-text-color-main);
}
/* New preview mode */
.fr-box.fr-basic.is-preview,
.fr-box.fr-basic.is-preview .fr-toolbar .fr-btn-grp.rte-tab--preview {
background: var(--dark-background-dark);
border-color: var(--dark-border-color);
}
.fr-box.fr-basic.is-preview .fr-toolbar .fr-btn-grp.rte-tab--preview {
border-bottom-width: 0;
}
.fr-box.fr-basic.is-preview .fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
.fr-box.fr-basic.is-preview .fr-popup .fr-command.fr-btn.fr-dropdown::after,
.fr-box.fr-basic.is-preview .fr-modal .fr-command.fr-btn.fr-dropdown::after {
border-top-color: var(--dark-text-color-dark);
}
/* Paginations */
.pageNav-jump {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
color: var(--dark-link-color-default);
}
.pageNav-jump:hover,
.pageNav-jump:active {
background: var(--dark-background-lighter);
color: var(--dark-text-color-darker);
}
.pageNav-page {
background: var(--dark-background-darker);
border-color: var(--dark-border-color) !important; /* Needs to be important or the middle borders display wrong */
color: var(--dark-link-color-default);
}
.pageNav-page:hover,
.pageNav-page:active {
background: var(--dark-background-lighter);
color: var(--dark-text-color-darker);
}
.pageNav-page.pageNav-page--current {
background: var(--dark-text-color-code-title);
color: var(--dark-text-color-darker);
}
/* Button links */
.button.button--link,
a.button.button--link {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
color: var(--dark-link-color-default);
}
.button.button--link:hover,
.button.button--link:focus,
.button.button--link:active,
a.button.button--link:hover,
a.button.button--link:focus,
a.button.button--link:active {
background: var(--dark-background-lighter);
color: var(--dark-text-color-darker);
}
/* Tabs */
.tabs--standalone {
background: var(--dark-background-dark);
border-color: var(--dark-border-color);
}
.block-minorTabHeader {
background: var(--dark-background-dark);
border-color: var(--dark-border-color);
}
/* Overlay menus */
.menu-tabHeader {
background: var(--dark-background-main);
}
.menu-content {
background-color: var(--dark-background-main);
color: var(--dark-text-color-main);
}
.menu-header {
background: var(--dark-background-darker);
color: var(--dark-text-color-code-title);
border-bottom-color: var(--dark-border-color);
}
.menu-footer {
background: var(--dark-background-main);
border-top-color: var(--dark-border-color);
}
/* Settings overlay links */
.menu-linkRow {
color: var(--dark-text-color-main);
}
.menu-linkRow.is-selected,
.menu-linkRow:hover,
.menu-linkRow:focus {
color: var(--dark-text-color-main);
}
/* Extra styles for the smiley overlay */
.menu--emoji .menu-header {
background: var(--dark-background-main);
border-color: var(--dark-border-color);
}
/* More overlays */
.overlay {
border-color: var(--dark-border-color);
}
.overlay-title {
background: linear-gradient(0deg, var(--dark-background-main), var(--dark-background-dark));
}
.overlay-content {
background-color: var(--dark-background-light);
}
/* Overwrite the general block message style */
.overlay-content .blockMessage {
background-color: var(--dark-background-light);
}
/* Input fields */
.input,
select.input,
.input.input--select {
background-color: var(--dark-background-light);
border: 1px solid var(--dark-border-color-light) !important;
}
.input:focus,
.input.is-focused {
background-color: var(--dark-background-lighter);
}
.input::placeholder {
color: rgba(0, 0, 0, 0.8);
}
.input:focus::placeholder,
.input.is-focused::placeholder {
color: rgba(0, 0, 0, 0.8);
}
.inputGroup.inputGroup--joined .inputGroup-text {
background-color: var(--dark-background-light);
color: var(--dark-link-color-default);
border-color: var(--dark-border-color-light);
}
.inputGroup.inputGroup--joined .input + .inputGroup-text,
.inputGroup.inputGroup--joined .input + .input,
.inputGroup.inputGroup--joined .inputGroup-text + .input {
border-left-color: var(--dark-border-color-light);
}
select optgroup {
background-color: var(--dark-background-light);
color: var(--dark-text-color-main);
}
select option {
color: var(--dark-text-color-darker);
}
/* Used e.g. for the settings left row */
.formRow > dt {
background-color: var(--dark-background-darker);
}
/* And the bottom bar */
.formSubmitRow-bar {
background-color: var(--dark-background-darker);
}
/* User profile */
.memberHeader-main {
background-color: var(--dark-background-darker);
}
.memberHeader-name {
color: var(--dark-text-color-code-title);
}
.message-responseRow {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
.memberOverviewBlock-seeMore {
background-color: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Private message receipient */
.select2 .select2-selection ul > li.select2-selection__choice {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
color: var(--dark-text-color-code-title);
}
/* Error message when no recipient is there */
.select2-results__options {
background: var(--dark-background-light);
border-color: var(--dark-border-color);
color: var(--dark-text-color-main);
}
.select2-results__option.select2-results__option--highlighted {
background: var(--dark-background-lighter);
}
/* Photo upload */
.attachUploadList {
background: var(--dark-background-dark);
border-color: var(--dark-border-color);
}
/* Attachments */
.attachment {
background: var(--dark-background-medium);
border-color: var(--dark-border-color);
}
/* The "Filter" link */
.filterBar-menuTrigger {
color: var(--dark-text-color-darker);
}
/* The avatar image */
.avatar img {
background: transparent;
}
/* The small avatar image when you've posted in a thread */
.avatar.avatar--separated {
border: none;
}
/* Tags for a post */
.tagItem {
background: var(--dark-background-light);
border-color: var(--dark-border-color);
color: var(--dark-text-color-code-title);
}
.tagItem:hover {
background: var(--dark-background-medium);
color: var(--dark-text-color-code-title);
}
/* Polls */
.pollResult.pollResult--showVoters:hover {
background: var(--dark-background-darker);
}
.pollResult-voters {
background: var(--dark-background-darker);
}
/* Add quote link */
.actionBar-action.actionBar-action--mq.is-selected {
background: var(--dark-background-darker);
border: none;
color: var(--dark-text-color-code-title);
}
/* BB Inlince code [icode] */
.bbCodeInline {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Inline spoiler */
.bbCodeInlineSpoiler {
text-shadow: #FFFFFF 0 0 14px;
}
/* Tables */
.bbTable > table > thead > tr > th,
.bbTable > table > tbody > tr > th {
background: var(--dark-background-light);
border-color: var(--dark-border-color);
border-bottom-color: var(--dark-border-color-code);
}
.bbTable > table > thead > tr > td,
.bbTable > table > tbody > tr > td {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* Tables when editing */
.fr-view > table > thead > tr > th,
.fr-view > table > tbody > tr > th {
background: var(--dark-background-light);
border-color: var(--dark-border-color);
border-bottom-color: var(--dark-border-color-code);
}
.fr-view > table > thead > tr > td,
.fr-view > table > tbody > tr > td {
background: var(--dark-background-darker);
border-color: var(--dark-border-color);
}
/* A selected cell */
.fr-element table td.fr-selected-cell,
.fr-element table th.fr-selected-cell {
border-color: var(--dark-text-color-code-title);
}
/* Notices */
.notice {
border-color: var(--dark-background-dark);
}
.notice.notice--primary {
background-color: var(--dark-background-yellow);
}
.notice a {
color: var(--dark-background-medium);
text-decoration: underline;
}
/* News entries, the moderator info */
.message-articleUserInfo {
background-color: var(--dark-background-darker);
border-top-color: var(--dark-border-color);
}
.message-expandLink {
background: linear-gradient(to bottom, rgba(75, 75, 75, 0) 0%, var(--dark-background-dark) 70%);
}
/* Special styles for "Unterwegs - Liveberichte" */
/* The header bar */
.block-body .message.message--post .message-content .message-body .bbWrapper > div[style]:first-child {
background: var(--dark-background-darker) !important;
border-color: var(--dark-border-color) !important;
color: var(--dark-text-color-code-title);
}
/* Help Section */
.block-textHeader {
color: var(--dark-text-color-code-title);
}
.block-textHeader .block-textHeader-highlight {
color: var(--dark-border-color-code);
}
.bbCodeDemoBlock-item > dd {
background-color: var(--dark-background-main);
}
/* Buttons, e.g. for spoilers */
/* Disabled, leave them blue for now */
/*
.button, a.button,
.button.button--primary, a.button.button--primary {
color: var(--dark-background-main);
background: var(--dark-text-color-thread-title-read);
border-color: var(--dark-background-medium);
}
*/
/* Button hover, active, etc */
/*
.button:not(.button--splitTrigger):hover, a.button:not(.button--splitTrigger):hover, .button.button--splitTrigger > .button-text:hover, a.button.button--splitTrigger > .button-text:hover, .button.button--splitTrigger > .button-menu:hover, a.button.button--splitTrigger > .button-menu:hover, .button:not(.button--splitTrigger):focus, a.button:not(.button--splitTrigger):focus, .button.button--splitTrigger > .button-text:focus, a.button.button--splitTrigger > .button-text:focus, .button.button--splitTrigger > .button-menu:focus, a.button.button--splitTrigger > .button-menu:focus, .button:not(.button--splitTrigger):active, a.button:not(.button--splitTrigger):active, .button.button--splitTrigger > .button-text:active, a.button.button--splitTrigger > .button-text:active, .button.button--splitTrigger > .button-menu:active, a.button.button--splitTrigger > .button-menu:active,
.button.button--primary:not(.button--splitTrigger):hover, a.button.button--primary:not(.button--splitTrigger):hover, .button.button--primary.button--splitTrigger > .button-text:hover, a.button.button--primary.button--splitTrigger > .button-text:hover, .button.button--primary.button--splitTrigger > .button-menu:hover, a.button.button--primary.button--splitTrigger > .button-menu:hover, .button.button--primary:not(.button--splitTrigger):focus, a.button.button--primary:not(.button--splitTrigger):focus, .button.button--primary.button--splitTrigger > .button-text:focus, a.button.button--primary.button--splitTrigger > .button-text:focus, .button.button--primary.button--splitTrigger > .button-menu:focus, a.button.button--primary.button--splitTrigger > .button-menu:focus, .button.button--primary:not(.button--splitTrigger):active, a.button.button--primary:not(.button--splitTrigger):active, .button.button--primary.button--splitTrigger > .button-text:active, a.button.button--primary.button--splitTrigger > .button-text:active, .button.button--primary.button--splitTrigger > .button-menu:active, a.button.button--primary.button--splitTrigger > .button-menu:active{
background: var(--dark-text-color-thread-title);
}
*/
/* Data tables */
.dataList-cell {
background-color: var(--dark-background-main);
border-color: var(--dark-border-color) !important;
}
/* Header */
.dataList-row.dataList-row--header .dataList-cell {
background-color: var(--dark-background-dark);
color: var(--dark-text-color-code-title);
}
/* Alternative cell */
.dataList-cell.dataList-cell--alt,
.dataList-cell.dataList-cell--action {
background-color: var(--dark-background-light);
}
/* Smilie, the alternative text to use for a smilie */
.smilieText {
background-color: var(--dark-background-darker);
color: var(--dark-text-color-lighter);
}
/* The "skyblue" user banner */
.userBanner.userBanner--skyBlue {
color: var(--dark-text-color-darker);
background: var(--dark-text-color-thread-title-read);
border-color: var(--dark-border-color-code);
}
/* Suggested threads */
.suggestedThreads {
border-color: var(--dark-border-color-code);
}
.suggestedThreads-header {
color: var(--dark-text-color-darker);
background: var(--dark-text-color-thread-title-read);
border-color: var(--dark-border-color-code);
}
.inputTypes-input:checked + .inputTypes-display,
.inputTypes-display:hover {
background: var(--dark-text-color-code-title);
border-color: var(--dark-border-color-code);
}
/* Add attachments */
.attachmentUploads-banner {
background: var(--dark-text-color-thread-title-read);
border-color: var(--dark-border-color-code);
}
/* Reaction Summary */
.reactionSummary > li {
background-color: transparent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment