mafBlackPlus: a custom mafBlack-based theme

[lynnya]

maf

Black

Plus

v1.0.1

Hello everyone! This is my first thread ever so umm

taps the microphone

this thing is on right? I'll assume so...

Anyways, you might have clicked this thread wondering

what the hell is this woman doing messing with my favorite forum theme

and like, yea ok so like my goal with this is to improve mafBlack since it's already a great theme and just needs a bit of love to get closer to a true dark theme experience. All is explained in step 3 below in great detail, including notes about current changes, mBP issues, and site-specific issues I want to fix.

Installing

1) Select mafBlack as your site theme. Using any other site theme will make things look weird probably.
2) Install the Stylus extension. (Chrome, Firefox)
3)

Go here

and click

Install

.

Disabling / Uninstalling

1) Click the Stylus extension icon and toggle

mafBlackPlus

or just uninstall Stylus by right-clicking the icon and clicking

Remove Extension

.

That's it! If you want to contribute to the project, you can give me feedback here or request access to the

Git repository

.

DISCLAIMER:

I am not affiliated with the staff or administration of Mafiascum.net, nor do I have their express permission to be distributing something like this. If requested, I will stop all work on this project and remove all public access to the project. It is CSS-only, so you can assure yourself it is not malware. It is MIT-licensed.

[Roxas]

yippee!!!

[lynnya]

1.0.1 changelog

- use CSS variables for all colors
-

unify border styles

- more spacing in navigation
- darken hovered pagination buttons
-

make ISO menu appear above the button

-

fix pride flags wrapping on mobile

- darken hovered links

Install

|

Git commit

[lynnya]

I have confirmed that this works on Firefox for Android. Google Chrome for Android does not allow extensions to be used. If someone could test on Firefox for iOS, that would be awesome!

[Ythan]

[Extasly]

heck yeah

[Extasly]

mafsilvercels seething rn

[lynnya]

working on PT colors now

[lynnya]

1.0.2 changelog

- "Mark Read" icon/button in Notifications is now dark themed
- Private threads are now fully dark-blue themed (including blockquote backgrounds)

Install

|

Git commit

[lynnya]

1.0.3 changelog

- Fix text-shadow rules in private threads (inaccuracy on my part)
- Add spacing between text title and banners (equal to spacing between avatar and post count)

Install

|

Git commit

[lynnya]

TODO: fix PT "bg2" color applied on unread notification backgrounds. apparently this affects regular ol' mafBlack too. it's erroneously given a grey-blue background in PTs like odd-numbered posts, when it should give the grey non-PT color

[DeathRowKitty]

I've been using a mafgreen theme I made for myself when the forum layout last changed, stealing a post in this thread to share that too in case anyone's interested. It might only display properly if you select mafsilver but I'm not going to change themes to check

Spoiler: greeeeeeeeen

Code: Select all

@import url(https://fonts.googleapis.com/css2?family=Kavoon:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

@import url(https://fonts.googleapis.com/css2?family=Kalam:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

div.page-body {
  font-family: Kalam;
}

a {
  color: #105289;
}

h2 {
  color: #040;
}

a:hover {
  color: #105289;
  text-shadow: 0 0 1px #105289;
  text-decoration: none;
}

a[class="postlink"] {
  text-decoration: none;
  border: none;
  color: #05a;
}

a[class="postlink"]:hover {
  background: none;
  text-shadow: 0 0 1px #05a;
}

div.wrap {
  background-color: #66bb6a;
}

ul.topiclist li {
  color: #050;
}

div.navbar .icon {
  color:#11c;
}

div.navbar .icon:hover {
  text-shadow: 0 0 1px #11c;
}

td, label, not(a) > strong, dd, dt, p, h3, li {
  color: #050;
}

div.action-bar {
  color: #050;
}

a[href*="\.\/ucp.php\?i=pm\&folder\=inbox"] .badge {
  display: none;
}

div.forumbg {
  margin-bottom: 20px;
  padding: 0px;
}

div[class="forumbg forumbg-table"] {
  background: #008065;
}

div[class="forumbg forumbg-table"] thead a {
  color: #050;
}

div[class="forumbg forumbg-table"] thead a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
}

div[class="forumbg forumbg-table"] tr th {
  background-color: #008065;
  color: #008065;
  padding-top: 10px;
  border-radius: 5px;
}

div.forabg {
  margin-bottom: 20px;
  padding: 0px;
}

div.forabg li.header a {
  color: #050;
}

div.forabg li.header a:hover {
  text-shadow: 0 0 1px #050;
}

h2 a {
  color: #050;
}

h2 a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
}

div.list-inner a[class="forumtitle"], div.forumbg div.list-inner a[class="topictitle"], div.list-inner a[class="topictitle"] {
  color: #084;
}

div.list-inner a[class="forumtitle"]:hover, div.forumbg div.list-inner a[class="topictitle"]:hover, div.list-inner a[class="topictitle"]:hover {
  color: #084;
  text-shadow: 0 0 1px #084;
}

li.row.bg2, tr.bg2 td {
  background-color: #95d697;
}

li.row.bg2:hover, tr.bg2:hover td {
  background-color: #95e697;
}

li.row.bg1, tr.bg1 td {
  background-color: #b8e6b9;
}

li.row.bg1:hover, tr.bg1:hover td {
  background-color: #b8f6b9;
}

div[class="member-search panel"] a {
  color: #050;
}

div[class="member-search panel"] a:hover {
  text-shadow: 0 0 1px #050;
}

[class="topiclist forums"] li.row {
  background-color: #b8e6b9;
}

[class="topiclist forums"] li.row:hover {
  background-color: #b8f6b9;
}

a.button, div.pagination ul li a {
  background-color: #dcedc8;
  color: #1b5e20;
  border-color: #1b5e20;
  font-family: Kavoon; 
}

a.button:hover, div.pagination ul li a:hover {
  background: #cfb;
  text-shadow: 0 0 1px #1b5e20;
}

div.pagination {
  color: #050;
}

.button i, ul[class="post-buttons"] li a.button i {
  color: #888;
  text-shadow: none;
}

a.button:hover i, ul[class="post-buttons"] li:hover a.button i {
  color: #080;
  text-shadow: none;
}

div[id=page-header] div[role=banner] {
  background: linear-gradient(#6cffa0,#4caf70);
}

a[title="Advanced search"] {
  margin: 0;
}

div[role="search"] {
	box-shadow: 0 0 5px #0F0;
}

a[class="username"] {
  color: #F0A;
}

a[style*="#007525"],
[style*="#007525"] {
  color: #0A5;
}

a[style*="#5544DD"],
[style*="#5544DD"] {
  color: #45F;
}

a[style*="#AA0000"],
[style*="#AA0000"] {
  color: #C00;
}
a[style*="#8E728E"],
[style*="#8E728E"] {
  color: #FF9;
}

a[style*="#4F5500"],
[style*="#4F5500"] {
  color: #660;
}

a[style*="#00aacc"], a[style*="#00AACC"] {
  color: #0af;
}

a[class="username"]:hover {
  text-shadow: 0 0 1px #f0a;
}

a[style*="#007525"]:hover {
  text-shadow: 0 0 1px #0C5;
}

a[style*="#5544DD"]:hover {
  text-shadow: 0 0 1px #45F;
}

a[style*="#AA0000"]:hover {
  text-shadow: 0 0 1px #C00;
}
a[style*="#8E728E"]:hover {
  text-shadow: 0 0 1px #FF9;
}

a[style*="#4F5500"]:hover {
  text-shadow: 0 0 1px #660;
}

a[style*="#00aacc"]:hover, a[style*="#00AACC"]:hover {
  text-shadow: 0 0 1px #0af;
}

strong a[href="\.\/memberlist\.php\?mode\=group\&g\=13634"] {
  color: #f0a;
}

strong a[href="\.\/memberlist\.php\?mode\=group\&g\=13634"]:hover {
  text-shadow: 0 0 1px #f0a;
}

ul[class="topiclist topics"] a.topictitle, a.forumtitle {
  color: #119;
}

ul[class="topiclist topics"] a.topictitle:hover, a.forumtitle:hover {
  text-shadow: 0 0 1px #119;
}

ul[class="topiclist topics"] a[href*="viewforum"]:hover {
  color: #11d;
}

.topic_unread, .forum_unread_subforum {
  background-image: url(https://i.imgur.com/XUBl7ba.png);
  background-size: 32px 32px;
}

.topic_unread_locked {
  background-image: url(https://i.imgur.com/2Z0IAte.png);
  background-size: 32px 32px;
}

.topic_read, .pm_read {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/topic_read.gif);
  background-size: 32px 32px;
}

.topic_read_locked {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/topic_read_locked.gif);
  background-size: 32px 32px;
}

.forum_unread, .pm_unread {
  background-image: url(https://i.imgur.com/BciogZI.png);
  background-size: 32px 32px;
}

.forum_read_subforum {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/forum_read_subforum.gif);
  background-size: 32px 32px;
}

.announce_unread, .global_unread {
  background-image: url(https://i.imgur.com/1dsT9ph.png);
  background-size: 32px 32px;
}

.announce_unread_locked, .global_unread_locked {
  background-image: url(https://i.imgur.com/0pwGoZ5.png);
  background-size: 32px 32px;
}

.sticky_unread {
  background-image: url(https://i.imgur.com/bF0Rhgf.png);
  background-size: 32px 32px;
}

.sticky_unread_locked {
  background-image: url(https://i.imgur.com/NlN3KPc.png);
  background-size: 32px 32px;
}

.sticky_read {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/sticky_read.gif);
  background-size: 32px 32px;
}

.sticky_read_locked {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/sticky_read_locked.gif);
  background-size: 32px 32px;
}

.global_read {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/announce_read.gif);
  background-size: 32px 32px;
}

.global_read_locked, .announce_read_locked {
  background-image: url(https://forum.mafiascum.net/styles/mafSilver/theme/images/announce_read_locked.gif);
  background-size: 32px 32px;
}

a.unread i.icon-red {
  color: #A3B;
}

a.unread i.icon-red:hover {
  color: #C5D;
}

a.unread i[class="icon fa-file fa-fw icon-lightgray icon-md"], dd[class="lastpost"] i {
  color: #090;
}

a.unread i[class="icon fa-file fa-fw icon-lightgray icon-md"]:hover, dd[class="lastpost"] i:hover {
  color: #0A0;
}

dd.posts, dd.views {
  display: table;
  text-align: bottom;
  width: 60px;
  height: 100%;
}

div.navbar {
  background-color: #c8e6c9;
}

div.navbar a {
  color: #1b5e20;
}

div.navbar a:hover {
  text-shadow: 0 0 1px #1b5e20;
}

div.navbar a:hover i {
  text-shadow: none;
}

div.pagination i.icon {
  color: #1b5e20;
  background: none;
}

div.pagination i.icon:hover {
  background: none;
}

table thead {
  background-color:#008065;
}

table[class="table1 responsive"] thead a {
  color: #050;
}

table[class="table1 responsive"] thead a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
}

table tbody {
  background-color: #afa;
}

table tbody tr:hover {
  background-color: #8f8;
}

a[title="Post a reply"], a[title="Post a new topic"] {
  background: linear-gradient(#fff,#3f4);
  box-shadow: none;
  border-color: #050;
  box-shadow: 0 0 5px #0F0;
}

a[title="Post a reply"]:hover, a[title="Post a new topic"]:hover {
  background: linear-gradient(#efe,#1f1);
  text-shadow: none;
  box-shadow: 0 0 10px #0F0;
}

span[title="Topic tools"], a[title*="locked"], a[title="Reply to message"], a[title="Forward message"] {
  background: linear-gradient(#fff,#3f4);
  border-color: #050;
  box-shadow: 0 0 5px #0F0;
}

span[title="Topic tools"]:hover, a[title*="locked"]:hover, a[title="Reply to message"]:hover, a[title="Forward message"]:hover {
  background: linear-gradient(#efe,#1f1);
  box-shadow: 0 0 10px #0F0;
}

span[title="Topic tools"]:hover i {
  color: #080;
  text-shadow: none;
}

form[id$="search"] fieldset button,form[id$="search"] fieldset a, span.button {
  background: linear-gradient(#fff,#3f4);
  color: #777;
  box-shadow: none;
  border-color: #050;
  box-shadow: 0 0 5px #0F0;
}

form[id$="search"] fieldset button:hover,form[id$="search"] fieldset a:hover, span.button:hover {
  background: linear-gradient(#efe,#1f1);
  color: #080;
  text-shadow: none;
  box-shadow: 0 0 10px #0F0;
}

span.button:hover i, button:hover i {
  color: #080;
  text-shadow: none;
}

input.button1, input.button2, div[id="format-buttons"] button, ul[class="post-buttons"] li a {
  background: linear-gradient(#efe,#9ca);
  color: #000;
}

input.button1:hover, input.button2:hover, div[id="format-buttons"] button:hover, ul[class="post-buttons"] li a:hover {
  background: linear-gradient(#efe,#9da);
  color: #080;
  border-color: #050;
  text-shadow: none;
}

div[id="format-buttons"] button {
  color: #444;
}

div[id="format-buttons"] button i {
  color: #555;
}

div[id="format-buttons"] button:hover i {
  color: #080;
}

li.active span {
  background-color: #1b5e20;
  border-color: #66bb6a;
}

ul.topiclist li.header   {
  background-color: #008065;
}

div.navigation ul li a {
  font-weight: normal;
  color: #050;
  background: #4caf70;
}

div.navigation ul li.active-subsection a {
  font-weight: bold;
  color: #050;
  background-color: #4cdf70;
}

div.navigation ul li a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
  background: #4cbf80;
}

div.navigation ul li.active-subsection a:hover {
  text-shadow: 0 0 1px #050;
  background-color: #4cef70;
}

li.tab a {
  font-weight: normal;
  color: #050;
  background: #4caf70;
  border-bottom: none;
}

li.activetab a {
  font-weight: bold;
  color: #050;
  background-color: #4cd670;
  border-color: #050;
}

li.tab a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
  background: #4cbf70;
}

li.activetab a:hover {
  color: #050;
  text-shadow: 0 0 1px #050;
  background-color: #4ce670;
}

div.panel {
  background-color: #cceecc;
}

div.cp-main div.panel,
div.cp-mini {
  background-color: #efffdd;
}

div.cp-main div.post {
  background-color: #eeffdd;
}

select {
  background-color: #f9fbe7;
}

input {
  background-color: #f9fbe7;
  border-color: #1b5e20;
}

textarea {
  background-color: #f9fbe7;
}

div.dropdown ul {
  background: #f9fbe7;
}

div.copyright {
  background: #eeffee;
  color: #050;
}

div.permissions * {
  color: #050;
}

tr.bg3, div.post.bg3 {
  background: #4caf70;
}

div.bg1, tr.bg1 {
  background-color: #c8e6c9;
}

div.wrap div.bg2, tr.bg2 {
  background-color: #a5d6a7;
}

div.bg2 blockquote,
div.bg1 blockquote blockquote,
div.bg2 blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
  background-color: #c8e6c9;
}

div.bg1 blockquote,
div.bg2 blockquote blockquote,
div.bg1 blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote,
div.bg2 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
  background-color: #a5d6a7;
}

body {
  background: none;
}

div.chatWindowInner {
  color: #050;
}

div.backgroundColorTransition {
  background-color: #8cb;
}

div.backgroundColorTransition:hover {
  background-color: #8dc;
}

div.chatWindowInner ul[id="chattabs"]  {
  background-color: #cec;
}

div.chatWindowInner ul[id="chattabs"] li[class*="tab"]  {
  background-color: #bdb;
}

div[id="settingsInner"] {
  background-color: #bdb;
}

div[id="settingstab"] {
  background-color: #9d9;
}

div[class="messages"] {
  background-color: #efe;
}

div[class="messagecontent"] {
  color:#070;
}

div[class="outputBuffer"] {
  background-color: #EFE;
}

ul[id="chattabs"] li.tab[class*="tab"] {
  padding: 0px
}

ul[id="chattabs"] li.tab[class="tab"] a {
  background: #aeb;

}


ul[id="chattabs"] li.tab[class="tab active"] {
  background: #adb;
}

div[class="emojiIcon"] {
  background-color: #f9fbe7;
}

a[class="loadMore"]{
  background-color: #bdc;
}

form[id="settingsForm"] button{
  background: linear-gradient(#fff,#4F5);
  border-color: #0A0;
}

form[id="settingsForm"] button:hover {
  background: linear-gradient(#efe,#4e5);
}

form[id="settingsForm"] input {
  color: #050;
  background: #f9fbe7;
}

div[class="title backgroundColorTransition blink"],
div[class="title backgroundColorTransition blink blinkEnd"],
div[class="title backgroundColorTransition blink blink End"] {
  background: #8eb;
}

div[class="title blink backgroundColorTransition"],
div[class="title blink backgroundColorTransition blinkEnd"] {
  background: #8eb;
}

Pros:
-It's green

If anyone tries it and finds something wrong feel free to let me know so I can probably ignore you and not fix it.

[lynnya]

thanks for sharing! this probably highlights some stuff im missing, judging from the number of rules

[lynnya]

that is in fact certainly very green upon inspection

[lynnya]

alright ive decided that im too lazy to make changes right now but i still want to post about things i dislike about mobile:
1) you cannot tell which notifications are unread. it is impossible because you cannot "hover"
2) post options all wrap weirdly (lock topic goes to new line, isolate users is just kinda out there on a new line)
3) before i fixed it the pride flags didn't wrap right heehee haha
4) search thread should wrap onto a new line for the entered text to be readable (right now it's just like 50px wide)
5) no way to quote selections on mobile (this is probably capturable the same way "clicks" are)

[yessiree]

[Extasly]

banger new PT theme i have to say

[lynnya]

banger new PT theme i have to say

glad you like it!

[lynnya]

TODO: ensure contrast with all tag types (hurt and heal tags have low contrast)

[lynnya]

1.0.4 changelog

- Increase contrast for Heal/Hurt tags

Install

|

Git commit

[Extasly]

HURT: lynnya

[lynnya]

WOW

[Senor Pink]

Thanks I didn't know this was finished, I will try it, (Still manually adding spaces under my quotes xD)

[lynnya]

let me know if you like it, or if you have suggestions / issues!

[yessiree]

how do i send a patch?