Skip to content

mafBlackPlus: Mafiascum dark theme by kaitlynia

Screenshot of mafBlackPlus: Mafiascum dark theme
Write a review Install Get Stylus

Details

Authorkaitlynia

LicenseMIT

Categoryforum.mafiascum.net

Created

Updated

Size3.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Improvements for mafBlack, a Mafiascum.net theme

Notes

  • Header is now "floating" (inherits the background of the site)
  • Unified border styles
  • Replaced low-quality quote icon used in blockquotes with the Quote button icon
  • Spacing has been increased/normalized around some components (Navigation, Quick Reply, nested blockquotes, space between avatars and post count on desktop)
  • Red from the logo is used for red components (active page number, notifications, matched search text, reported message border)
  • Dark mode text inputs and buttons!
  • Pride flags now wrap correctly on mobile
  • ISO dropdown opens above the button instead of below (no more scrolling down again!)

Current issues

  • Contrast of notification badge is no longer adequate. Might just make the navigation bar darker as a "fix" or support this as an option to disable it but unsure
  • Checkboxes and radio buttons are not "darkened" but I'm not sure if I can guarantee browser support with this

Planned fixes

  • Mark Read icon in notifications menu is not dark-themed
  • Unnecessarily many horizontal lines in thread start options (this might be intentional? but in either case it could be more compact)
  • When tag buttons wrap in post creation, there is no spacing between the rows (some display: flex; fix?)
  • Make text size selection the same style as tag buttons (may not be able to guarantee browser support)

General goals

  • Bring the community together and make certain things on the site nicer/easier-to-use (consistent spacing, color use, consistency between component styles)
  • Allow the community to pick colors of components, and other options like auto-tagging URLs, images, YouTube links, votes (will require JavaScript, so this is not my priority now, I would rather stick to CSS-only for a while)

Source code

/* ==UserStyle==
@name         mafBlackPlus
@version      20241013.05.02
@namespace    https://git.sr.ht/~lynnya/mafBlackPlus
@description  Improvements to mafBlack
@homepage     https://git.sr.ht/~lynnya/mafBlackPlus
@author       lynnya
@license      MIT
==/UserStyle== */

@-moz-document domain("forum.mafiascum.net") {
:root {
    --bg: #181818;
    --bg1: #313131;
    --border: #777;
    --subdued: #aaa;
    --mafiascumRed: #800;
    --fg: #fff;
}

html, body {
    background-color: var(--bg);
    margin: 0;
}

.headerbar, .wrap {
    background-color: unset; /* see above color */
}

/********************
 * COMPONENT STYLES *
 ********************/

/* search header */

/*.search-header .button-search, .search-header .button-search-end {
    border-width: 1px;
}*/

#search-box {
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* navigation */

ul.linklist > li, ul.linklist li.responsive-menu {
    margin-right: 12px; /* breathable navigation spacing */
}
ul.linklist > li.rightside, p.rightside, a.rightside {
    margin-left: 12px; /* consistency with above */
}
#nav-main {
    border-color: var(--border); /* darken horizontal separator */
}

/* pagination */

.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
    background-color: var(--border);
}

/* quotes */

blockquote {
    background-image: none; /* no pixelated quote icon please! */
}

blockquote::before {
    font-family: 'FontAwesome';
    content: '\f10d';
    position: absolute;
    margin-left: 2px; /* that's better :) */
}

blockquote, blockquote blockquote {
    margin-bottom: 0.5em; /* even blockquote spacing */
}

/* isolate users menu */

span[title="Isolate Users"] + .dropdown {
    top: unset;
    bottom: 34px; /* open above */
}
span[title="Isolate Users"] + .dropdown .pointer {
    top: unset;
    bottom: -10px; /* move arrow to bottom */
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* quick reply */

.panel {
    padding-left: 18px; /* aligns with profile avatars in threads */
}

/* post profiles */

@media (min-width: 700px) {
    .postprofile .has-avatar .avatar-container {
        margin-bottom: 6px; /* let the avatar breathe a bit lol */
    }
}

.postprofile {
    max-width: 240px; /* wraps pride flags correctly on mobile */
}

/******************
 * GENERAL STYLES *
 ******************/

/* make all red accents mafiascum red */

.pagination li.active span, .badge {
    color: var(--fg) !important; /* has inline style :( */
    background: var(--mafiascumRed);
}
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
    border-color: var(--mafiascumRed);
}
.posthilit {
    background-color: var(--mafiascumRed);
    color: var(--fg);
}

/* links */

.postlink:hover {
    background-color: var(--subdued);
}

/* text inputs */

select, input, .inputbox {
    background: var(--bg1) !important; /* !important in colours.css :( */
    color: var(--fg) !important; /* has inline style :( */
}
.message-box textarea {
    transition: none; /* try to avoid the fade effect as a result of loading this sheet */
}
#search-box input.inputbox::placeholder {
    color: var(--subdued); /* fix contrast */
}

/* borders */

.button, .inputbox, a.button2, input.button2, input.button3, .pagination li a,
.dropdown li, .dropdown li li, .dropdown li.separator,
.signature {
    border-color: var(--border);
}

.inputbox:hover, .button:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
    border-color: var(--subdued);
}

}

Reviews

No reviews yet.