Dark Mode Style

Go down

Dark Mode Style Empty Dark Mode Style

Post by Raine on Wed Mar 27, 2019 1:17 am

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.

Dark Mode Style Chrome_2019-03-26_23-13-52

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;
}


Last edited by Raine on Wed Mar 27, 2019 8:18 am; edited 1 time in total

Raine
Seeker

Number of posts : 2
Registration date : 2019-03-27

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Terrai on Wed Mar 27, 2019 3:42 am

Oh, cool work man. Thanks for sharing!
Terrai
Terrai
Seeker

Number of posts : 56
Registration date : 2017-03-10

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Lord Arogandor on Wed Mar 27, 2019 6:48 am

Another new thing I learned! Smile


Few questions:
- Why do you prefer a darker version? Is it just a preference in taste or are there benefits I'm unaware of?
- 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?
- 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?

_________________
Dark Mode Style Banner_arogandor
Lord Arogandor
Lord Arogandor
Game Master/Owner

Number of posts : 2754
Location : Somewhere around the Grail Monastery
Registration date : 2008-09-19

http://www.thegraillords.net

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Raine on Wed Mar 27, 2019 8:09 am

Lord Arogandor wrote:Another new thing I learned! Smile


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.

Raine
Seeker

Number of posts : 2
Registration date : 2019-03-27

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Lord Arogandor on Thu Mar 28, 2019 3:31 pm

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.

_________________
Dark Mode Style Banner_arogandor
Lord Arogandor
Lord Arogandor
Game Master/Owner

Number of posts : 2754
Location : Somewhere around the Grail Monastery
Registration date : 2008-09-19

http://www.thegraillords.net

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Aglarele on Mon May 20, 2019 7:24 am

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.)
Aglarele
Aglarele
Seeker

Number of posts : 49
Registration date : 2017-03-15

Back to top Go down

Dark Mode Style Empty Re: Dark Mode Style

Post by Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum