Author Topic: The Dark Bore  (Read 1463 times)

0 Members and 1 Guest are viewing this topic.

MMaRsu

  • Administrator
  • Senior Member
The Dark Bore
« on: October 09, 2020, 06:08:00 PM »
Where is the dark theme at yo
What

Trent Dole

  • the sharpest tool in the shed
  • Senior Member
Re: The Dark Bore
« Reply #1 on: October 09, 2020, 06:52:43 PM »
Yeah Tasty hit us up with the plugin.
Hi

remy

  • my hog is small but it is mighty
  • Senior Member
Re: The Dark Bore
« Reply #2 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

remy

  • my hog is small but it is mighty
  • Senior Member
Re: The Dark Bore
« Reply #3 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

benjipwns

  • your bright ideas always burn me
  • Senior Member
Re: The Dark Bore
« Reply #4 on: October 10, 2020, 12:41:26 AM »
It's where The Bork Who Laughs comes from...

Cauliflower Of Love

  • I found my bearings, they were in the race
  • Senior Member
Re: The Dark Bore
« Reply #5 on: October 10, 2020, 01:12:48 AM »
does nudemac count as dark?

chronovore

  • relapsed dev
  • Senior Member
Re: The Dark Bore
« Reply #6 on: October 10, 2020, 03:35:34 AM »
It's where The Bork Who Laughs comes from...

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

MMaRsu

  • Administrator
  • Senior Member
Re: The Dark Bore
« Reply #7 on: October 10, 2020, 07:04:34 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 :-[
What

thisismyusername

  • GunOn™! Apply directly to forehead!
  • Senior Member
Re: The Dark Bore
« Reply #8 on: October 10, 2020, 11:37:49 AM »
How do I use it while browsing on mobile?

:girlaff

(Probably root your phone and then dev tools it)

Coax

  • Member
Re: The Dark Bore
« Reply #9 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 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.

Coax

  • Member
Re: The Dark Bore
« Reply #10 on: November 19, 2020, 07:38:19 AM »
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:




Tasty

  • Senior Member

Trent Dole

  • the sharpest tool in the shed
  • Senior Member
Re: The Dark Bore
« Reply #12 on: November 19, 2020, 12:09:54 PM »
ooh yeah this is tight. :pimp
Hi

Nintex

  • Finish the Fight
  • Senior Member
Re: The Dark Bore
« Reply #13 on: November 19, 2020, 12:21:06 PM »
Maybe I should make an exclusive limited edition Nintex version of The Bore  :thinking
🤴

team filler

  • filler
  • filler
Re: The Dark Bore
« Reply #14 on: November 19, 2020, 02:02:34 PM »
bore direct mode  8)
*****

nudemacusers

  • Senior Member
Re: The Dark Bore
« Reply #15 on: November 19, 2020, 05:37:20 PM »
just imagine if this site was built for modern browsers  :doge
﷽﷽﷽﷽﷽

remy

  • my hog is small but it is mighty
  • Senior Member
Re: The Dark Bore
« Reply #16 on: November 19, 2020, 08:23:00 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:

(Image removed from quote.)

(Image removed from quote.)

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

Tasty

  • Senior Member
Re: The Dark Bore
« Reply #17 on: November 19, 2020, 08:44:06 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.  👀


MMaRsu

  • Administrator
  • Senior Member
What