Deciduous Spring by arbyrd33

/* ==UserStyle==
@name         Deciduous Spring
@version      20220407.23.38
@namespace    userstyles.world/user/arbyrd33
@description  A simple style (wip)
@author       arbyrd33
@license      No License
==/UserStyle== */

@-moz-document domain("wolvden.com") {
/*..userstyle by arbor..*/
body {
	background-image: url(https://images.unsplash.com/photo-1458724029936-2cc6ee38f5ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80);
	color: #889373;
}




/*---------------------Arbor's Better Header---------------------*/
.navbar-main/* Very topmost navbar div */
{
	background-color: #889373 !important;
	/* !important is useful in cases where the site's original 
	settings are more powerful than your CSS. Become the wizard. */
}
.navbar-main .nav-link/* Navbar links. */
{
	color: #1B2A33 !important;
}
.navbar-main:hover .nav-link:hover/* This is what happens when you 
hover over the navbar links. */
{
	color: #43554F !important;
}
/*-----Icons-----*/
/* These are the navigation bar icons! */
#header .navbar-main .active .nav-link,
#header .navbar-main .active .nav-link .fa,
#header .navbar-main .nav-link:hover,
#header .navbar-main .nav-link .fa/* This is what they look like 
without hovering over them. */
{
	color: #394843;
}
#header .navbar-main .active .nav-link,
#header .navbar-main .active .nav-link .fa,
#header .navbar-main .nav-link:hover,
#header .navbar-main .nav-link:hover .fa/* What the icons next to 
the navbar links look like when you do hover over them. */
{
	color: #b9360f;
}


/*-------------------------Arbor's Better Status Bar-------------------------*/
/* This is directly below the navbar. You can use it to access your inbox and 
view your currency. It also has a welcome back message. */
.navbar-status {
	background-color: #475848 !important;
}
#header .navbar-status/* Welcome Message */
{
	color: #97A38A;
}
.text-light/* Your name in the welcome message is actually a dropdown button/
menu. Maybe I'll style that menu later. */
{
	color: #97A38A !important;
}
.breadcrumb-item.active/* The page you're currently on! Make sure this is a 
color that you want to compliment all of the other links on Wolvden, which will
be assigned later. */
{
	color: #97A38A;
}
/* --------end header*/
/**/
/**/
/**/
/**/
/*----------------------Arbor's Better Sidebar----------------------*/
/* These are your boxes! There are a lot of fiddly bits here. If you 
can't guess what a given selector is targeting, just make the color 
or background-color red!! You can do this by typing 

background-color: red; 

or 

color: blue; 

or violet or whatever you need to find something quickly. If it 
doesn't show up, try typing !important immediately after the color,  
and before the semicolon. */
/**/
/**/
/**/
#sidebar .card {
	background-color: #213033;
	border-color: #162629;
}
/* Notice h3 a? 'a' means anchor tag in CSS. It basically means in 
this context, 'All header-3s that are links, have this style applied 
to them'. */
#sidebar #card-user h3 a,
#sidebar h3,
#sidebar h4/* All of these things are selected at once so you don't 
have to type redundant code. */
{
	font-weight: 500;
	/* This is how bold the header text is, I wouldn't mess with it 
	too much. */
	color: #889373
}
#sidebar #card-user h3 a:hover/* What happens when you hover over 
your lead's name in the sidebar. */
{
	color: #b9360f;
	text-decoration: none;
}
#sidebar {
	color: #525E46 !important;
}
a/* This affects all links on the page that don't have more specific 
targeted selectors attached to them!! */
{
	color: #536256;
}
a:hover {
	color: #b9360f;
	text-decoration: none;
}
/**/
/* We'll worry about the chat box later. Moving on! */
/**/
/**/
/*------------------------Arbor's Wolvden Makeover------------------------*/
/* This is CSS relating to the main content of your den and the rest of 
the site! There's a lot of ground to cover here so it's okay to take lots
of breaks and please be sure to get plenty of water before you dive into 
this next section, ok? Thanks! */
#main {
	background-color: #213033;
}
div#sidebar.col-lg-3.order-lg-1 {
	background-color: transparent;
}
div.row.justify-content-center {
	background-color: #2B3B40 !important;
}
.breadcrumb-nav {
	background-color: #2b3b40 !important;
	margin-bottom: 1em;
	/* This gives the navbar a bit of space between your content and makes 
	for transparent backgrounds to look prettier! */
}
h1 {
	color: #97A38A;
}
/**/
/**/
/* Den and Profile tabs */
.nav-tabs {
	color: #b9360f;
}
.nav-tabs .nav-link {
	color: #97A38A;
}
.nav-tabs .nav-link.active {
	background-color: #97A38A;
	color: #2B3B40;
}
.nav-tabs {
	border-bottom: 1px double transparent;
}

/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/* The majority of forums coded in Ye Olden Days (before HTML5 and ES6) were 
marked down in 'tables'. It's not SUPER rare today, but it's quite uncommon, 
so if Wolvden ever updates their CSS to include flexbox items instead of 
tables, I'll be here. We've already seen the addition of several flexbox 
items so far, so stay tuned! In the meantime, be aware that this code will 
affect a LOT of changes sitewide, from forums to your den caves. Update with 
caution and curiosity! I recommend having three tabs open while you mess with
this process: a page to cycle between your den and profile, the landing page 
in Chatter, and your Messages inbox. There's not really one specific target I 
can introduce for most given selectors, so please do some exploring! */
/**/
/**/
/**/
/**/
/**/
.table {
	background-color: #43554F;
	/* This notably affects the html editor in messages and forums. */
}
.table th,
.table th a/* th stands for table header. */
{
	background-color: #43554F;
	color: #97A38A;
}
.table .subheader/* Notable ffect seen on your den page.*/
{
	background-color: #394843;
}
.table .bottom,
.table tfoot td/* This is notably seen surrounding the sort selector and the 
bar containing the 'Preview' and 'Reply' buttons on Chatter. */
{
	background-color: #394743 !important;
}
.table-striped {
	background-color: #43554F;
	color: #97A38A !important;
}
.table-striped a {
	color: #97A38A !important;
}
.table-striped tbody tr:nth-of-type(2n+1) {
	background-color: #304039;
}


/**/
/* This box is for your Lead Wolf! */
/**/
.border-none {
	background-color: #2B3B40;
}
.border-none img {
	border-radius: 100%;
}
.border-none .card/* Card containing the Lead Wolf avatar. */
{
	background-color: #b9360f !important;
	border-radius: 49%
}
.pb-1,
.py-1/*That silly line under the Lead Wolf avatar that I assume is important
somehow*/
{
	padding-bottom: .25rem !important;
	background-color: transparent !important;
}
.border-none .striped/* Table of stats between the Lead and Featured wolves. */
{
	background-color: #43554F;
}
.featured-wolf/* Featured wolf section. */
{
	color: #b9360f;
}

.col-6 .card.text-center/* Big buttons under the Lead Wolf table. */
{
	color: orange;
}





.bottom/* Bottom row of the Member Information table. */
{
	color: violet
}
.text-success {
	color: green !important;
}
.left/* Lefthand cells of the Member Information tables. */
{
	background-color: orange !important;
	color: purple !important;
}
.right/* Righthand cells of the Member Information tables. */
{
	/* CODE HERE */
	background-color: green;
}

.alert/* Alerts and notifications that appear at the top of the page. */
{
	background-color: #536256;
}

.progress/* Progress bars. */
{
	background-color: #889373 !important;
}
.bg-info/* HP bars. These are blue. */
{
	background-color: #525E46 !important;
}
.bg-danger/* Hunger bars. These are red. */
{
	background-color: #536256 !important;
}
.bg-primary/* Mood bars. These are dark blue. */
{
	background-color: #43554F !important;
}
.bg-warning/* Energy bars. These are yellow. */
{
	background-color: #394843 !important;
}
.bg-success/* EXP bars. These are green. */
{
	background-color: #304039 !important;
}




/*---------------------------------Arbor's Better Account Settings------------------------*/
/*You can change the cells of your settings tables with .left and .right which can be found 
in Member Info*/
/*These are the buttons (change password, manage devices, user log)*/
#main .card {
	background-color: #43554F;
}
.border,
.border-bottom,
.border-left,
.border-right,
.border-top/*The border for the settings checkboxes is a very thin line surrounding */
{
	border-color: transparent !important;
}

/*checkboxes themselves*/
body.theme_dark .custom-control-label::before {
	border-color: #213033;
}
.custom-control-label::before {
	pointer-events: none;
	background-color: #2B3B40;
}






.bg-light,
.btn-light,
/*Make these two sections separate with different background colors if you want to change the margin color but I think it's kinda gross that way eh*/
.card-body .form-row/* The settings container*/
{
	background-color: #525E46 !important;
	color: #97A38A;
}


/*Save Changes Button*/
.btn-primary,
.btn-success {
	color: #97A38A;
	background-color: #525E46;
}

.btn-success:hover {
	border-bottom-color: #213033;
}

.btn-success:hover {
	color: #97A38A;
	background-color: #536256;
	border-color: #2B3B40;
}


/*----------------------------------Arbor's Better Text Fields--------*/
.bg-bar-input/*The banner that holds the buttons*/
{
	background-color: #2A352D;
}
.btn.btn-htmlinput {
	background-color: #97A38A;
	color: #2A352D;
}
.form-row/*You can give this a color if you want, I just think it's ugly!*/
{
	background-color: transparent;
}
input.form-control,
input.form-control:focus,
select.form-control,
select.form-control:focus,
textarea.form-control,
textarea.form-control:focus {
	background-color: #97A38A;
}
input.form-control,
input.form-control:focus,
select.form-control,
select.form-control:focus,
textarea.form-control,
textarea.form-control:focus {
	color: #2A352D;
}
.text-td-bottom {
	color: #97A38A;
}




/*
#chatMessageContainer = the chatbox.
○ #chatMessagePinned = the blue Pinned Message section.
○ .s-chat-message...