THE BORE

General => The Superdeep Borehole => Topic started by: MMaRsu on October 09, 2020, 06:08:00 PM

Title: The Dark Bore
Post by: MMaRsu on October 09, 2020, 06:08:00 PM

Where is the dark theme at yo

Title: Re: The Dark Bore
Post by: Trent Dole on October 09, 2020, 06:52:43 PM

Yeah Tasty hit us up with the plugin.

Title: Re: The Dark Bore
Post by: remy on October 09, 2020, 07:00:40 PM

I wrote one awhile ago

Code: [Select]

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


div.like {
    margin: 0 1em 0 18em !important;
    padding: 0.3em 1em 0.3em 2.5em !important;
    font-size: 11px;
    background: #210c48 url(../../default/images/likes/like.png) no-repeat 7px center;
    border-radius: 2px;
    color: white;
    border: 1px solid #575193;
}
html {
    background-color: #141313;
}
body,
td,
th,
tr {
    color: #f3f3f3;
}
body {
    font: 95%/130% "Fira Sans";
    color: #e2e2e2;

    background: #141313;
}
.postarea,
.moderatorbar {
    margin: 0 0 0 12em;
}
.poster {
    width: 12em;
}
.windowbg,
#preview_body {
    color: #cecece;
    background-color: #1e1e1f;
}
a:link,
a:visited {
    color: #83acff;
    text-decoration: none;
}
a:hover {
    color: orange;
}
a:active {
    color: white;
}
.bbc_link:link,
.bbc_link:visited {
    border-bottom: 0px solid #A8B6CF;
}
.inner {
    padding: 1em 1em 2px 0;
    margin: 0 1em 0 0;
    border-top: 1px solid #47474e;
}

.windowbg2 {
    color: #e2e2e2;
    background-color: #2a2a2c;
}
blockquote.bbc_standard_quote,
blockquote.bbc_alternate_quote {
    font-size: x-small;
    color: white;
    line-height: 1.4em;
    background: #353538 url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
    border: 1px solid #3a3939;
    border-radius: 6px;
    padding: 1.1em 1.4em;
    margin: 0.1em 0 0.3em 0;
    overflow: auto;
}
blockquote.bbc_standard_quote {
    background-color: #414144;
}
.codeheader,
.quoteheader {
    color: #bbc;
    font-size: x-small;
    font-weight: bold;
}

#header div.frame {
    background: #141313;
}
#header {
    background: #141313;
}
#content_section div.frame {
    background: #141313;
}
#content_section {
    background: #141313;
}
h3.catbg,
h3.catbg2,
.table_list tbody.header td.catbg {
    background: #2b445f !important;
    padding-right: 9px;
}
div.cat_bar {
    background: #2b445f !important;
    border-radius: 6px;
}
.buttonlist ul li a.active span {
    background: #285077;
    border-radius: 6px;
}
.buttonlist ul li a.active {
    background: #285077;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
}
.buttonlist ul li a span {
    background: #586775;
    display: block;
    height: 19px;
    line-height: 19px;
    padding: 0 8px 0 0;
    border-radius: 5px;
}
.buttonlist ul li a {
    display: block;
    font-size: 0.8em;
    color: #000;
    background: #586775;
    padding: 0 0 0 8px;
    margin-left: 12px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 5px;
}

.like {
    /* margin: 0.2em 1em 0.2em 1em; */
    margin: 0 1em 0 18em;
    padding: 0.3em 1em 0.3em 2.5em;
    font-size: 11px;
    background: #1b232b url(../../default/images/likes/like.png) no-repeat 7px center;
    border-radius: 2px;
    border: 1px solid #3F51B5;
}

.description,
.description_board,
.plainbox {
    padding: 0.5em 1em;
    font-size: 0.9em;
    line-height: 1.4em;
    border: 0;
    background: #141313;
    margin: 0.2em 1px 1em 1px;
}
.signature,
.custom_fields_above_signature {
    border-top: 1px #4a4a4a solid;
}
#footer_section div.frame {
    background: #141313;
    display: block;
    padding: 60px 0 0 0;
}
#footer_section {
    text-align: center;
    background: #141313;
    padding-left: 20px;
}
input,
button,
select,
textarea {
    font: 95%/115% verdana, Helvetica, sans-serif;
    color: #dedede;
    background: #2f2f2f;
    border: 1px solid #000;
    padding: 2px;
}
.button_submit,
.button_reset {
    background: #2b445f;
    /* border: 1px solid #aaa; */
    cursor: pointer;
    font-weight: normal;
}
.roundframe {
    padding: 0 10px;
    background: #272727;
    border-left: 1px solid #404040;
    border-right: 1px solid #404040;
}
span.upperframe span {
    padding: 0;
    height: 12px;
    display: none;
    background: url(../images/theme/main_block.png) 100% -90px no-repeat;
}
span.lowerframe span {
    padding: 0;
    height: 12px;
    display: none;
    background: url(../images/theme/main_block.png) 100% -90px no-repeat;
}
h4.titlebg,
h3.titlebg {
    background: #383737 !important;
    padding-right: 9px;
    color: white;
}
div.title_barIC {
    background: #383737;
    padding-left: 9px;
    height: 31px;
    overflow: hidden;
    margin-bottom: 1px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #bbc;
}
table.table_grid td {
    padding: 3px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
}
.stickybg {
    background: #1c1c1c;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #1c1c1c;
}
.stickybg2 {
    background: #1a1a1c;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #1a1a1c;
}
.catbg,
.catbg2,
tr.catbg td,
tr.catbg2 td,
tr.catbg th,
tr.catbg2 th {
    color: #bbc;
    font-family: arial, helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    background: #2b445f;
}
tr.catbg th.last_th {
    background: #2b445f;
    background-image: url(../images/theme/main_block.png);
    background-position-x: 100%;
    background-position-y: -280px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #2b445f;
}
tr.catbg th.first_th {
    background: #2b445f;
    background-image: url("");
    background-position-x: 0px;
    background-position-y: -280px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #2b445f;
}
.table_grid tr.catbg,
.table_grid tr.titlebg {
    font-size: 0.95em;
    border-bottom: 1px solid #242424;
}
.table_frame .table_list td.icon,
.table_frame .table_list td.info,
.table_frame .table_list td.stats {
    border-right: 2px solid #303033;
}
.navigate_section ul {
    display: block;
    margin: 0;
    font-size: 0.9em;
    padding: 1em 0 0.5em 0;
    border-top: 0px solid #bbc;
    overflow: hidden;
    list-style: none;
    clear: both;
    width: 100%;
}

element.style {}
.dropmenu li a.active span.firstlevel {
    background: orange;
    border-radius: 3px;
}
.dropmenu li a.active {
    background: orange;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
}

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: normal;
    border-bottom: 0px solid #999;
    background: #333;
    padding: 7px 0 0 0;
}
.dropmenu li li {
    width: 19em;
    margin: 0;
    border-left: 0px solid #999;
    border-right: 0px solid #999;
}
code.bbc_code {
    display: block;
    font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
    font-size: x-small;
    background: #151414;
    border-top: 2px solid #0e0e19;
    border-bottom: 2px solid #0e0e19;
    line-height: 1.5em;
    padding: 3px 1em;
    overflow: auto;
    white-space: nowrap;
    max-height: 24em;
    color: greenyellow;
}
.richedit_resize {
    height: 5px;
    font-size: 0;
    background: none;
    border: 0px solid #ddd;
    border-top-width: 0;
    cursor: s-resize;
    width: 100%;
    padding: 0 2px;
}
hr,
.hrcolor {
    height: 0px;
    border: 0;
    color: #ccc;
    background-color: #ccc;
}
.sp-wrap-default .sp-body {
    background: #131313;
    border-top: 1px solid #bbc;
}
.post {
    margin-top: 0.5em;
    clear: right;
    MAX-WIDTH: 768PX;
}

#forumposts {
    MIN-WIDTH: 900PX;
    MAX-WIDTH: 1280PX;
    clear: both;
}

Use stylus.

If you don't like my color choices, too bad :rash

Title: Re: The Dark Bore
Post by: remy on October 10, 2020, 12:39:53 AM

MMaRsu I gave gave you a complete dark theme in under one hour, and you couldn't even give me a like? I get you're Hollywood Youtube now but that shit is cold breh  :kermit

Title: Re: The Dark Bore
Post by: benjipwns on October 10, 2020, 12:41:26 AM

It's where The Bork Who Laughs comes from...

Title: Re: The Dark Bore
Post by: Cauliflower Of Love on October 10, 2020, 01:12:48 AM

does nudemac count as dark?

Title: Re: The Dark Bore
Post by: chronovore on October 10, 2020, 03:35:34 AM

Quote from: benjipwns on October 10, 2020, 12:41:26 AM

It's where The Bork Who Laughs comes from...

No, it’s the Univeral Pictures cinematic thing that faceplanted.

Title: Re: The Dark Bore
Post by: MMaRsu on October 10, 2020, 07:04:34 AM

Quote from: remy on October 10, 2020, 12:39:53 AM

MMaRsu I gave gave you a complete dark theme in under one hour, and you couldn't even give me a like? I get you're Hollywood Youtube now but that shit is cold breh  :kermit

Heyy I was sleeping man Im sorry for living in another timezone  :P

How do I use it while browsing on mobile?

You are the best remy :-[

Title: Re: The Dark Bore
Post by: thisismyusername on October 10, 2020, 11:37:49 AM

Quote from: MMaRsu on October 10, 2020, 07:04:34 AM

How do I use it while browsing on mobile?

:girlaff

(Probably root your phone and then dev tools it)

Title: Re: The Dark Bore
Post by: Coax on October 10, 2020, 12:06:08 PM

You can use Firefox for Android + Stylus addon. Keep in mind in the last 2 weeks Mozilla changed something with their mobile addons so for the time being it's only available (https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/) for Nightly builds before it'll be back in the regular builds.

If I had my alternate dark theme stylesheet on hand I would have shared it here, too.

Title: Re: The Dark Bore
Post by: Coax on November 19, 2020, 07:38:19 AM

Quote from: Coax on October 10, 2020, 12:06:08 PM

If I had my alternate dark theme stylesheet on hand I would have shared it here, too.

Aaand finally got around to grabbing it from my old system, reminded by Tasty's recent topic title.

Thanks to remy's initial selectors (from like last year?) for the original push. Kept it to a more vanilla look though, outside of the colors. Normalized Cindi's purple to the regular Icon color since I can. Did just enough to make it something I'd use but it's no passion project :P

Click for stylesheet

Code: [Select]

:root {
    --bg-buttons: #3c3c3c;
    --bg-code: #15141485;
    --bg-compose: #272727;
    --bg-dropdowns: #333437;
    --bg-fields: #2f2f2f;
    --bg-header: linear-gradient(#6b737942 0%, transparent 100%);
    --bg-headings: linear-gradient(#3f4c64 0%, #4e6c99 100%);
    --bg-headings-active: linear-gradient(#667797 0%, #6b93ce 100%);
    --bg-inline: #1b1d1e52;
    --bg-menu-active: orange;
    --bg-quotes: #2d2f3e;
    --bg-quotes-alt: #383b4a;
    --bg-page: #2d2f33;
    --bg-posts: #232324;
    --bg-posts-alt: #272727;
    --bg-stickied: #2a2a2b;
    --border-cells: #333;
    --border-fields: #4a4a4a;
    --border-inline: #313133;
    --border-quotes: #5b5b5b80;
    --border-misc: #4a4a4a;
    --border-post: #4a4a4a;
    --color-buttons: #cecece;
    --color-code: #cecece;
    --color-cells: inherit;
    --color-links: #81b3e7;
    --color-links-faded: #81b3e77a;
    --color-primary-1: #d0d0d0;
    --color-primary-2: #c1c1c1;
    --color-links-users-admin: #f42f2f;
    --color-links-users-mods: #2b66fc;
    --color-links-users-iconed: #8941c1;
    --radius-primary: 5px;
}

html{
    background-color: var(--bg-page);
}

td, th, tr {
    color: var(--color-cells);
}

body {
    background: var(--bg-page);
    color: var(--color-primary-1);
}

body::before {
    background: var(--bg-header);
    content: '';
    height: 112px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

a:link, a:visited {
    color: var(--color-links);
}

input:focus, textarea:focus, button:focus, select:focus {
    border-color: var(--color-primary-1);
    outline: 1px solid var(--color-primary-1);
}

/* Unread posts indicator when logged in */
img[alt="New"] { opacity: 0.8; }

a[style="color: #FF0000;"] { color: var(--color-links-users-admin) !important; }
a[style="color: #0000FF;"] { color: var(--color-links-users-mods) !important; }
a[style="color: Purple;"], a[style="color: #6600CC;"] { color: var(--color-links-users-iconed) !important; }

.bbc_link:link, .bbc_link:visited {
     border-bottom-color: var(--color-links-faded);
}
.bbc_link:link:hover, .bbc_link:visited:hover {
     border-bottom-color: var(--color-links);
}

code.bbc_code {
    background: var(--bg-code);
    border-top-color: var(--border-quotes);
    border-bottom-color: var(--border-quotes);
    color: var(--color-code);
}

#top_section {
    padding: 5px 0px 0 20px;
    position: relative;
    left: -20px;
    top: -5px;
    width: calc(100% + 20px);
}

.lockedbg,
.windowbg, #preview_body {
    background-color: var(--bg-posts);
    color: var(--color-primary-2);
}

.inner {
    border-top-color: var(--border-post);
}

.lockedbg2,
.windowbg2 {
    background-color: var(--bg-posts-alt);
    color:  var(--color-primary);
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    background-color: var(--bg-quotes);
    border-color: var(--border-quotes);
    color: var(--color-primary-1);
    font-size: 90%;
}
blockquote.bbc_alternate_quote {
    background-color: var(--bg-quotes-alt);
}
blockquote.bbc_standard_quote blockquote, blockquote.bbc_alternate_quote blockquote {
    font-size: 100%;
}


#header div.frame {
    background: var(--bg-page);
}
#header {
    background:  var(--bg-page);
}
#content_section div.frame {
    background:  var(--bg-page);
   }
#content_section {
    background:  var(--bg-page);
}
h3.catbg, h3.catbg2,
.table_list tbody.header td.catbg,
div.title_bar,
.title_barIC, .titlebg,
div.cat_bar {
    background: var(--bg-headings) !important;
}

/* PM messages upper table heading */
div.title_bar { border-radius: var(--radius-primary); }

div.cat_bar,
.first_th,.last_th {
    border-radius: var(--radius-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.first_th { border-top-right-radius: 0; }
.last_th { border-top-left-radius: 0; }

h3.titlebg a, h3.titlebg, h4.titlebg, h4.titlebg a {
    color: var(--color-primary-1);
}

.buttonlist ul li a,
.buttonlist ul li a.active {
    background: var(--bg-buttons);
    border-radius: var(--radius-primary);
    color: var(--color-buttons);
}
.buttonlist ul li a span,
.buttonlist ul li a.active span {
    background: var(--bg-buttons);
    border-radius: var(--radius-primary);
}

.buttonlist ul li a.active:hover span,
.buttonlist ul li a:hover { background: var(--bg-menu-active); }

div.like,
.sp-wrap,
.sp-body, .sp-wrap-default .sp-body {
    background-color: var(--bg-inline);
    border-color: var(--border-inline);
}

.information {
    background: var(--bg-compose);
    border-color: transparent;
}

/* Message compose area */
span.upperframe,
span.upperframe span,
span.lowerframe,
span.lowerframe span,
.roundframe,
#quickReplyOptions span {
    background: var(--bg-compose);
}
.roundframe { border-color: transparent }
.richedit_resize { background: transparent; border-color: transparent; }

.sp-wrap-default .sp-head { color: var(--color-primary-2); }

.description, .description_board, .plainbox {
    background:  var(--bg-page);
}
.signature, .custom_fields_above_signature {
    border-top-color: var(--border-post);
}
#footer_section div.frame {
    background:  var(--bg-page);
}
#footer_section {
    background:   var(--bg-page);
}
input, button, select, textarea {
    background: var(--bg-fields);
    border-color: var(--border-fields);
    color: inherit;
}
.button_submit, .button_reset {
    background: var(--bg-headings);
}
.button_submit:hover, .button_reset:hover {
    background: var(--bg-headings-active);
}

table.table_grid td {
    border-bottom-color: var(--border-cells);
    border-right-color: var(--border-cells);
    border-left-color: var(--border-cells);
}
.stickybg, .stickybg2 {
    background: var(--bg-stickied);
}

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th {
    background: var(--bg-headings);
}
tr.catbg th.last_th {
    background: var(--bg-headings);
}
tr.catbg th.first_th {
    background: var(--bg-headings);
}

h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
    background: none;
}

.table_grid tr.catbg, .table_grid tr.titlebg {
    border-bottom-color: transparent;
}
.table_frame .table_list td.icon, .table_frame .table_list td.info, .table_frame .table_list td.stats {
    border-right-color: var(--border-cells);
}
.navigate_section ul {
    border-top-color: transparent;
}

.dropmenu li ul {
    background: var(--bg-dropdowns);
    border-bottom-color: transparent;
}
.dropmenu li li {
    border-left-color: transparent;
    border-right-color: transparent;
}

.dropmenu li {
    margin-right: var(--radius-primary);
}

.dropmenu li a.firstlevel span.firstlevel,
.dropmenu li a.firstlevel.active span.firstlevel {
    left: 0;
}

.dropmenu li a.firstlevel,
.dropmenu li a.firstlevel.active:hover,
.dropmenu li a.firstlevel.active {
    border-radius: var(--radius-primary);
    height: 20px;
    margin: 0;
    padding: 0 4px 0 0;
}

.dropmenu li a.active,
.dropmenu li:hover a.active:hover {
    background: var(--bg-menu-active) !important;
}

.dropmenu li:hover li:hover {
    background: var(--color-links-faded);
}

/* Lazy way to avoid listing selectors */
.dropmenu li a span,
.dropmenu li a { background: none !important; }

.dropmenu li:hover a.firstlevel {
    background: var(--color-links-faded) !important;
}

.dropmenu li:hover a { color: var(--color-primary-1); }
.dropmenu li:hover a:not(.firstlevel):hover { color: var(--color-primary-1); }

.plainbox {
    border-color: var(--border-misc)
}


[close]

A couple quick screens:

(https://abload.de/img/1.1erkde.png)

(https://abload.de/img/3csj3n.png)

Title: Re: The Dark Bore
Post by: Tasty on November 19, 2020, 11:09:21 AM

Looks nice! My version of dark mode is linked below.

https://chrome.google.com/webstore/detail/dark-mode-for-the-bore/janaegfjobnmghakdaggndbijcccklmg

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-for-the-bore/

Title: Re: The Dark Bore
Post by: Trent Dole on November 19, 2020, 12:09:54 PM

ooh yeah this is tight. :pimp

Title: Re: The Dark Bore
Post by: Nintex on November 19, 2020, 12:21:06 PM

Maybe I should make an exclusive limited edition Nintex version of The Bore  :thinking

Title: Re: The Dark Bore
Post by: team filler on November 19, 2020, 02:02:34 PM

bore direct mode  8)

Title: Re: The Dark Bore
Post by: nudemacusers on November 19, 2020, 05:37:20 PM

just imagine if this site was built for modern browsers  :doge

Title: Re: The Dark Bore
Post by: remy on November 19, 2020, 08:23:00 PM

Quote from: Coax on November 19, 2020, 07:38:19 AM

Quote from: Coax on October 10, 2020, 12:06:08 PM

If I had my alternate dark theme stylesheet on hand I would have shared it here, too.

Aaand finally got around to grabbing it from my old system, reminded by Tasty's recent topic title.

Thanks to remy's initial selectors (from like last year?) for the original push. Kept it to a more vanilla look though, outside of the colors. Normalized Cindi's purple to the regular Icon color since I can. Did just enough to make it something I'd use but it's no passion project :P

Click for stylesheet

Code: [Select]

:root {
    --bg-buttons: #3c3c3c;
    --bg-code: #15141485;
    --bg-compose: #272727;
    --bg-dropdowns: #333437;
    --bg-fields: #2f2f2f;
    --bg-header: linear-gradient(#6b737942 0%, transparent 100%);
    --bg-headings: linear-gradient(#3f4c64 0%, #4e6c99 100%);
    --bg-headings-active: linear-gradient(#667797 0%, #6b93ce 100%);
    --bg-inline: #1b1d1e52;
    --bg-menu-active: orange;
    --bg-quotes: #2d2f3e;
    --bg-quotes-alt: #383b4a;
    --bg-page: #2d2f33;
    --bg-posts: #232324;
    --bg-posts-alt: #272727;
    --bg-stickied: #2a2a2b;
    --border-cells: #333;
    --border-fields: #4a4a4a;
    --border-inline: #313133;
    --border-quotes: #5b5b5b80;
    --border-misc: #4a4a4a;
    --border-post: #4a4a4a;
    --color-buttons: #cecece;
    --color-code: #cecece;
    --color-cells: inherit;
    --color-links: #81b3e7;
    --color-links-faded: #81b3e77a;
    --color-primary-1: #d0d0d0;
    --color-primary-2: #c1c1c1;
    --color-links-users-admin: #f42f2f;
    --color-links-users-mods: #2b66fc;
    --color-links-users-iconed: #8941c1;
    --radius-primary: 5px;
}

html{
    background-color: var(--bg-page);
}

td, th, tr {
    color: var(--color-cells);
}

body {
    background: var(--bg-page);
    color: var(--color-primary-1);
}

body::before {
    background: var(--bg-header);
    content: '';
    height: 112px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

a:link, a:visited {
    color: var(--color-links);
}

input:focus, textarea:focus, button:focus, select:focus {
    border-color: var(--color-primary-1);
    outline: 1px solid var(--color-primary-1);
}

/* Unread posts indicator when logged in */
img[alt="New"] { opacity: 0.8; }

a[style="color: #FF0000;"] { color: var(--color-links-users-admin) !important; }
a[style="color: #0000FF;"] { color: var(--color-links-users-mods) !important; }
a[style="color: Purple;"], a[style="color: #6600CC;"] { color: var(--color-links-users-iconed) !important; }

.bbc_link:link, .bbc_link:visited {
     border-bottom-color: var(--color-links-faded);
}
.bbc_link:link:hover, .bbc_link:visited:hover {
     border-bottom-color: var(--color-links);
}

code.bbc_code {
    background: var(--bg-code);
    border-top-color: var(--border-quotes);
    border-bottom-color: var(--border-quotes);
    color: var(--color-code);
}

#top_section {
    padding: 5px 0px 0 20px;
    position: relative;
    left: -20px;
    top: -5px;
    width: calc(100% + 20px);
}

.lockedbg,
.windowbg, #preview_body {
    background-color: var(--bg-posts);
    color: var(--color-primary-2);
}

.inner {
    border-top-color: var(--border-post);
}

.lockedbg2,
.windowbg2 {
    background-color: var(--bg-posts-alt);
    color:  var(--color-primary);
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    background-color: var(--bg-quotes);
    border-color: var(--border-quotes);
    color: var(--color-primary-1);
    font-size: 90%;
}
blockquote.bbc_alternate_quote {
    background-color: var(--bg-quotes-alt);
}
blockquote.bbc_standard_quote blockquote, blockquote.bbc_alternate_quote blockquote {
    font-size: 100%;
}


#header div.frame {
    background: var(--bg-page);
}
#header {
    background:  var(--bg-page);
}
#content_section div.frame {
    background:  var(--bg-page);
   }
#content_section {
    background:  var(--bg-page);
}
h3.catbg, h3.catbg2,
.table_list tbody.header td.catbg,
div.title_bar,
.title_barIC, .titlebg,
div.cat_bar {
    background: var(--bg-headings) !important;
}

/* PM messages upper table heading */
div.title_bar { border-radius: var(--radius-primary); }

div.cat_bar,
.first_th,.last_th {
    border-radius: var(--radius-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.first_th { border-top-right-radius: 0; }
.last_th { border-top-left-radius: 0; }

h3.titlebg a, h3.titlebg, h4.titlebg, h4.titlebg a {
    color: var(--color-primary-1);
}

.buttonlist ul li a,
.buttonlist ul li a.active {
    background: var(--bg-buttons);
    border-radius: var(--radius-primary);
    color: var(--color-buttons);
}
.buttonlist ul li a span,
.buttonlist ul li a.active span {
    background: var(--bg-buttons);
    border-radius: var(--radius-primary);
}

.buttonlist ul li a.active:hover span,
.buttonlist ul li a:hover { background: var(--bg-menu-active); }

div.like,
.sp-wrap,
.sp-body, .sp-wrap-default .sp-body {
    background-color: var(--bg-inline);
    border-color: var(--border-inline);
}

.information {
    background: var(--bg-compose);
    border-color: transparent;
}

/* Message compose area */
span.upperframe,
span.upperframe span,
span.lowerframe,
span.lowerframe span,
.roundframe,
#quickReplyOptions span {
    background: var(--bg-compose);
}
.roundframe { border-color: transparent }
.richedit_resize { background: transparent; border-color: transparent; }

.sp-wrap-default .sp-head { color: var(--color-primary-2); }

.description, .description_board, .plainbox {
    background:  var(--bg-page);
}
.signature, .custom_fields_above_signature {
    border-top-color: var(--border-post);
}
#footer_section div.frame {
    background:  var(--bg-page);
}
#footer_section {
    background:   var(--bg-page);
}
input, button, select, textarea {
    background: var(--bg-fields);
    border-color: var(--border-fields);
    color: inherit;
}
.button_submit, .button_reset {
    background: var(--bg-headings);
}
.button_submit:hover, .button_reset:hover {
    background: var(--bg-headings-active);
}

table.table_grid td {
    border-bottom-color: var(--border-cells);
    border-right-color: var(--border-cells);
    border-left-color: var(--border-cells);
}
.stickybg, .stickybg2 {
    background: var(--bg-stickied);
}

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th {
    background: var(--bg-headings);
}
tr.catbg th.last_th {
    background: var(--bg-headings);
}
tr.catbg th.first_th {
    background: var(--bg-headings);
}

h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
    background: none;
}

.table_grid tr.catbg, .table_grid tr.titlebg {
    border-bottom-color: transparent;
}
.table_frame .table_list td.icon, .table_frame .table_list td.info, .table_frame .table_list td.stats {
    border-right-color: var(--border-cells);
}
.navigate_section ul {
    border-top-color: transparent;
}

.dropmenu li ul {
    background: var(--bg-dropdowns);
    border-bottom-color: transparent;
}
.dropmenu li li {
    border-left-color: transparent;
    border-right-color: transparent;
}

.dropmenu li {
    margin-right: var(--radius-primary);
}

.dropmenu li a.firstlevel span.firstlevel,
.dropmenu li a.firstlevel.active span.firstlevel {
    left: 0;
}

.dropmenu li a.firstlevel,
.dropmenu li a.firstlevel.active:hover,
.dropmenu li a.firstlevel.active {
    border-radius: var(--radius-primary);
    height: 20px;
    margin: 0;
    padding: 0 4px 0 0;
}

.dropmenu li a.active,
.dropmenu li:hover a.active:hover {
    background: var(--bg-menu-active) !important;
}

.dropmenu li:hover li:hover {
    background: var(--color-links-faded);
}

/* Lazy way to avoid listing selectors */
.dropmenu li a span,
.dropmenu li a { background: none !important; }

.dropmenu li:hover a.firstlevel {
    background: var(--color-links-faded) !important;
}

.dropmenu li:hover a { color: var(--color-primary-1); }
.dropmenu li:hover a:not(.firstlevel):hover { color: var(--color-primary-1); }

.plainbox {
    border-color: var(--border-misc)
}


[close]

A couple quick screens:

(https://abload.de/img/1.1erkde.png)

(https://abload.de/img/3csj3n.png)

man yours is pretty dope tbh, between you and tasty i feel like I should finally go back and properly finish mine.

Title: Re: The Dark Bore
Post by: Tasty on November 19, 2020, 08:44:06 PM

Quote from: nudemacusers on November 19, 2020, 05:37:20 PM

just imagine if this site was built for modern browsers  :doge

Can't speak for the others but making my theme was super satisfying since a good chunk of it was replacing low res raster background images for things like rounded corners with straight CSS.

The net effect is that my dark mode theme is much more optimized for retina displays than the default site.  👀

Title: Re: The Dark Bore
Post by: kingv on November 20, 2020, 11:37:03 AM

Quote from: Tasty on November 19, 2020, 11:09:21 AM

Looks nice! My version of dark mode is linked below.

https://chrome.google.com/webstore/detail/dark-mode-for-the-bore/janaegfjobnmghakdaggndbijcccklmg

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-for-the-bore/

thanks daddy!

Title: Re: The Dark Bore
Post by: MMaRsu on November 20, 2020, 12:00:16 PM

Quote from: Tasty on November 19, 2020, 11:09:21 AM

Looks nice! My version of dark mode is linked below.

https://chrome.google.com/webstore/detail/dark-mode-for-the-bore/janaegfjobnmghakdaggndbijcccklmg

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-for-the-bore/

I could kiss you

 :-*