Stylus Template WD - Darklily's Standard

/* This is a note! Notes can be left like this and do not interfere with the code itself. Please leave this note as credit, but all others feel free to remove or add on to if you need to and are comfortable with that ^^

Original Template by Darklily #1058 */
/* This template will guide you through making a Stylus layout with my own personal preference for color schemes, at least in terms of which colors go where. The intent of this is to make an easy plug and go template without too much technical stuff. As a result, this template is quite condensed, often with multiple elements being grouped together to have the same properties.

I used the colors from my Dark Blues layout mainly, although some colors were changed so that they stand out more.

For further advice on making a color palette and even how to make your own background image, go to: https://www.wolvden.com/chatter/topic/15186
*/
/* Basics and background image are first!*/
body {
    background: url('https://i.imgur.com/Kmcv07A.jpg')/* Your image link goes here instead of this one */ !important;
    background-attachment: fixed!important;
    background-size: 100%!important;
    background-color: #000!important;
    /*I always include a backup color for the background just in case the image isn't loading or loads in slowly. */
    color: gray!important;
    /* Main color of text for the page, but not nessarily the whole page. Pick a color that shows up well on all background colors you are using just in case needed. */
}

/* Links. Pick a color that will show up well on all your background colors.*/
a:link,
a:visited {
    color: gray!important;
}
a:hover,
a:active {
    color: white!important;
    transition: all ease 2s;
    /* Slight transition to make the colors fade into each other. Can be removed if you prefer. */
}

/* Header text color. As with the text and link colors above, be sure to pick a color that works with all colors you have chosen. */
h1,
h2,
h3 {
    color: gray!important;
}

/* The color of bookmark when not page is not bookmarked */
.text-danger {
    color: #1a1f60!important
}


/* Right, now that we have the true basics done, we can get on to the colors themselves. I recommend playing around with which colors go where. I have simply numbered the element groups, with no particular order them. */
/* Element group #1. Includes the main box of the site's layout. */
#main,
.main,
.bg-warning {
    background: #202133!important;
}

/* Element group #2 */
#sidebar,
.index .sidebar,
.breadcrumb-nav,
th.top,
#sidebar .card-body,
#header .navbar-main,
#footer {
    background: #0f0f10!important;
    color: gray!important;
}

#sidebar .card {border-bottom:none!important;}

/* Element group #3. Since weirdly (I was surprised by this actually) this is only used for one thing, it's the main color for the forums and other tables across the site.  */
.table td {
    background: #252748!important;
    color: gray!important;
}

/* Element group #4. Again, like the above, it's used once. This is the headers for most tables, but not all. */
th {
    background: #0a0b14!important;
    color: gray!important;
}

/* Emement Group #5 */
td.bottom,
div.left,
td.b,
.table .subheader,
.pup {
    background: #565d72!important;
    color: black!important;
}

/* Element Group #6 */
.card,
.card-body,
.hoard .item {
    color: gray!important;
    background: #333556!important;
    border-bottom:none!important;
}

.hoard .item {
    border: none!important; }

#sidebar .card {background:none!important;}


/* Element Group #7. This will almost largely be the buttons and parts of the chatbox, but also some other elements. */
.btn,
.btn-warning.disabled,
.btn-warning:disabled,
.btn-info,
.s-chat-message:nth-child(odd),
#fra_chatContainer #txtChatInput,
.form-control,
.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable,
#header .navbar-status {
    background: #1c1b1e!important;
    color: white!important;
}
/* This goes with the above, just to add some effects to the buttons; feel free to change the border color */
.btn,
.btn-warning:disabled,
.btn-info,
#fra_chatContainer #txtChatInput,
.form-control,
.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    border: 1px solid black!important;
    /*Border color around the buttons */
    transition: all ease 1s;
}

#header .navbar-status {
    border: none!important;
}

#fra_chatContainer #txtChatInput {
    border-radius: 15px;
    /* This adds a rounded effect to the box which you type chat messages in. Just rounds the corners off. */
}

.form-control {
    transition: all ease 1s;
    border: none!important;
    /* Again, this just adds some effects; this is the box in which you type messages pretty much everywhere but the chatbox, i.e. your den description, forums, PMs, etc. */
}

/* Element Group #7.5; I'm adding this here kind of to go with the above about the message boxes. This is the color of the box when you have clicked on it and are typing in it. */
.form-control:focus {
    background: #000!important;
    color: gray!important;
    transition: all ease 1s;
    border: none!important;
}

/* Element Group #8. This is going to be for hovering over buttons. */
.btn:hover,
.btn-info:hover {
    background: #4e4663!important;
    color: black!important;
    border: 1px solid black;
    transition: all ease 1s;
}

/*Element Group #9. This is for the other color for the chatbox messages. */
.s-chat-message:nth-child(even) {
    background: #1e1a40!important;
    color: gray!important;
}

/* Element Group #10. This is which chat is selected in the drop down box for the chatbox. */
.s-chat-sidebar #label_currentChannel,
#fra_chatContainer .channelMenu .channelSwitcher.active {
    background: #464663!important;
    color: black!important;
    border: 1px solid black;
    transition: all ease 1s;
}

/* Element Group 10.5. This is the font color for that drop down box.*/
#fra_chatContainer .channelMenu .channelSwitcher {
    color: gray!important;
}

/* And this is the background color when you hover over the options. */
#fra_chatContainer .channelMenu .channelSwitcher:hover {
    background: #000!important;
    color: #fff!important;
}

/* Element Group #11. These are the progress bars. I'll label each of them here so that it's obvious which one is which, since their names doesn't entirely make sense, at least to me. It is possible that they are used elsewhere too, like for event progress bars. */
.progress-bar {
    /* Some event bars; can't garentee this works on all. You may want to remove if you prefer the normal gradient, or look up how to do gradients (link will be in guide post!). */
    background: #767291!important;
}
.progress {
    background: #622525!important;
}
.bg-warning {
    /* Energy */
    background-color: #8f94f1!important;
}
.bg-danger {
    /* Hunger */
    background-color: #0c2282!important;
}
.bg-info {
    /* Hunger */
    background-color: #324b75!important;
}
.bg-success {
    /* HP */
    background-color: #04011d!important;
}
.bg-primary {
    /* EXP */
    background-color: #0f0c21!important;
}

/*Element Group #12 */
.hoard .item-foot,
.hoard .item-head,
.page-item.active .page-link,
.bg-dark {
    background: #0f0c21!important;
    color: gray!important;
}
.page-item.active .page-link {
    border-color: black!important;
    /* border color for number of the page you are on in your hoard or in a forum post.*/
}

/* Element Group #13; this is the alert messages. I actually suggest making them different colors. */
.alert-info, .alert-success  {
    background: #041b22!important;
    color: gray!important;
    border: 1px gray solid!important;
    border-radius: 10px;
}
.alert-danger {
    background: #1e1b3f!important;
    color: gray!important;
    border: 1px gray solid!important;
    border-radius: 10px;
}