Dark Mode Style

As some people tend to, I prefer darker versions of websites, so I decided to throw something together (not entirely complete) that is importable and gives the game website a more toned down look.

Here's an example of what it looks like.



Just import the following CSS into a new style under Stylish, UserStyles, Stylus (my preferred) or anything other addons that support per-domain CSS modifications. The base URL would be: thegraillords.net

Code:

body{
    background-color:#0c0c0c !important;
}

input.main{
    background: #060606;
    border: 2px outset #67608e;
    box-shadow: none;
    text-shadow: none;
    color: #64606f;
}

input.main:hover {
    background: #060606;
    border: 2px inset #67608e;
}

.depth_01 {
 background-image: none;
 box-shadow: none;
}

.navi_on {
    background-color: #000000;
}

.navi_off {
    background-color: #060606;
}

.navi_link {
    color: #64606f
}

#main_table {
 background: none;
    background-color: #0c0c0c;
 border-collapse: collapse;
 box-shadow: 0px 0px 15px 10px #110000;
 margin-left: auto;
 margin-right: auto;
 width: 980px;
    color: #64606f;
}

.table_03 {
    background: #060606;
    border: 3px outset #67608e;
    box-shadow: 0px 0px 0px;
}

fieldset {
   border: 1px solid #67608e;
}

.text_box_inner {
    background: #060606;
    border: 1px solid #67608e;
    box-shadow: inset 0px 0px 0px 0px;  
}

tr.main td {
 border: 1px solid #67608e;
}

a:link { color: #67608e; }
a:visited { color: #a65bbd; }
a:active { color: #780eff; }
a:hover { color: #990000; }

img.bor {
    border: 2px solid #67608e;
}

.paper {
 background-image: none;
    background-color: #0c0c0c;
 box-shadow: none;
 border-radius: 8px;
}

.d3c4ad {
 background: #0c0c0c;
 border: 1px solid #67608e;
 border-radius: 5px;
 box-shadow: none;
}

.move{
    color: #67608e;
    text-shadow: none;
}

.bg_b4 { background-color: #0c0c0c; }

.list {
    background-image: none;
    box-shadow: none;
}

Oh, cool work man. Thanks for sharing!

Lord Arogandor wrote:Another new thing I learned!


Few questions:
- Why do you prefer a darker version? Is it just a preference in taste or are there benefits I'm unaware of?

I have sleep apnea, so I end up playing late at night on my phone during one of my 'waking periods' and sometimes the brightness of certain websites wakes up my wife so I try to avoid that as much as possible.

Lord Arogandor wrote:- If I add/alter/delete anything on the website (like adding a new CSS class, changing the name of a CSS class,...) how does that affect your own modifications?

The only changes that would alter these overrides would be renaming the components. For example if you renamed the main table from #main_table to #primary_table it wouldn't apply correctly on my end until I also updated the CSS to reflect the name change. Nothing too drastic or difficult.

Lord Arogandor wrote:
- I'm not really familiar with CSS or with coding in general, much of the code is still in early 2000 style, how does that affect your work in making alternative styles?

It doesn't at all, with extensions like Stylus they just override whatever is currently there. Kind of like a CSS proxy of sorts.

Thank you for your clear answers.

I'm not planning to rename, but in case I would, I'll try to remember and keep you updated.

Great idea!
I generally like darker style games as well, especially while playing late at night. The text colour in your dark layout seems a little hard to read on my eyes though. Then again, I'm trying this now during broad daylight *grin*

Darker layouts generally tend to attract less attention when you have them running on your workpc as well. The graillords isn't as bright coloured as some of the other games I've played though, so I haven't been bothered with it here. (Especially as you don't need to be logged in all day to progress faster.)