Author Topic: The Dark Bore  (Read 624 times)

0 Members and 1 Guest are viewing this topic.

MMaRsu

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

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

  • 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

  • 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

  • time to get in love formation
  • 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

  • Section 552
  • Senior Member
Re: The Dark Bore
« Reply #5 on: October 10, 2020, 01:12:48 AM »
does nudemac count as dark?
titor

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

  • 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 :-[

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

  • 🌺 Neo Flower Child 🌸
  • 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

riotous

  • shosta likes this
  • Senior Member
Re: The Dark Bore
« Reply #13 on: November 19, 2020, 12:16:57 PM »
I'ma light mode type-a-guy but nice work.

Nintex

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

filler

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

nudemacusers

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

remy

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

  • 🌺 Neo Flower Child 🌸
  • Senior Member
Re: The Dark Bore
« Reply #18 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.  👀
🕊