Dark Theme for mhrise.wiki-db.com by dukecroc

/* ==UserStyle==
@name           Dark Theme for mhrise.wiki-db.com
@namespace      github.com/openstyles/stylus
@version        1.0.2
@description    A custom dark theme for "Monster Hunter Rise:Sunbreak Armorset Search"
@author         Croc Yu
==/UserStyle== */
@-moz-document domain("mhrise.wiki-db.com") {
	:root {
		--fc: #fff;
		--bgc: #111;
		--theme-color: #414;
		--theme-color-lighten: #e46ce4;	
		--form-elements-bgc: #2f2f2f;
		--table-hover-color: rgba(255,255,255, .1);
		--table-border-color: #666;
	}
	
	body {
		background-color: var(--bgc);
		color: var(--fc);
	}
	
	a, a:focus, a:hover{
		color: var(--theme-color-lighten);
	}
	
	h1 + div + br {
		display: none;
	}
	
	ul.nav-tabs {
		display: flex;
		border-bottom: 1px solid var(--theme-color-lighten);
	}
	
	ul.nav-tabs>li {
		display: flex;
		margin-bottom: 0;
	}
	
	ul.nav-tabs>li>a {
		display: flex;
		align-items: center;
		padding-bottom: 8px !important;
		border: none !important;
		cursor: pointer !important;
	}
	
	ul.nav-tabs>li>a:hover {
		background-color: var(--theme-color-lighten);
		color: var(--bgc);
	}
	
	ul.nav-tabs>li.active>a, 
	ul.nav-tabs>li.active>a:focus, 
	ul.nav-tabs>li.active>a:hover {
		background-color: var(--theme-color-lighten);
		color: var(--bgc);
	}

	button,
	input,
	select,
	textarea {
		border-radius: 4px !important;
		border: none !important;
		background-color: var(--form-elements-bgc) !important;
		color: var(--fc) !important;
		outline: 0 !important;
		-webkit-appearance: none !important;
	}
	
	button {
		padding: 8px 10px;
		background-color: var(--theme-color-lighten) !important;
		color: var(--bgc) !important;
	}

	input,
	select {
		height: 1.75em !important;
		padding: 0 8px !important;
		border: none !important;
		line-height: 1em !important;
	}
	
	input#limit {
		width: 40px;
	}
	
	input[type="checkbox"] {
		box-sizing: border-box;
		height: 16px !important;
		margin-top: 0 !important;
		margin-right: 4px !important;
	}
	
	input[type="checkbox"]:checked {
		border: 2px solid var(--form-elements-bgc);
		background-color: var(--theme-color-lighten) !important;
	}
	
	div#ui>div>div>div>div[style*="float: left"] {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		line-height: 1.5em !important;
	}
	
	div#ui>div>div>div:nth-child(1)>div:not(:first-child)>select,
	div#ui>div>div>div:nth-child(1)>div:not(:first-child)>input{
		margin-left: 4px !important;
		margin-right: 10px !important;
	}
	
	div#ui>div>div>div:nth-child(2):before {
		content: "";
		display: table;
		width: 100%;
	}
	
	.panel {
		margin-top: 40px;
		border: none;
		background-color: transparent !important;
	}

	.panel-body {
		margin-bottom: 4px;
		padding: 4px 0 8px !important;
		border-radius: 0;
		border-bottom: 1px solid #666;
		font-size: 16px;
	}
	
	.panel ~ div {
		background-color: transparent !important;
	}

	.panel ~ div > select {
		height: 4em !important;
		padding: 24px 8px 4px !important;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
		background-position: right 4px bottom 7px !important;
		background-repeat: no-repeat !important;
		line-height: 1em !important;
	}

	.panel ~ div[style*="background-color"] > select {
		background-color: var(--theme-color) !important;
	}
	
	.panel ~ div > select + label {
		padding: 4px 8px !important;
		color: var(--fc) !important;
	}
	
	.table-hover > tbody > tr:hover {
		background-color: transparent;
	}
	
	.table-hover > tbody > tr [style*="cursor: pointer"]:hover {
		background-color: var(--table-hover-color);
	}
	
	.table-responsive * {
		border-color: var(--table-border-color) !important;
	}
	
	.table-responsive > .table > tbody:first-child {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	
	.table-responsive > .table > tbody button + input[type="text"] {
		margin-left: 6px;
	}
	
	.table-responsive > .table > tbody > tr:not([style*="cursor: pointer;"]) > td > div {
		padding-top: 20px;
	}
	
	.table-responsive > .table > tbody > tr:nth-child(1) > td:only-of-type {
		padding-left: 0;
	}
	
	.table .table {
		background-color: transparent !important;
	}
	
	.table-striped>tbody>tr:nth-of-type(odd) {
		background-color: transparent;
	}

	.table > tbody + tbody {
		border-top: none;
	}
	
	.table input {
		height: 36px !important;
		margin-right: 6px;
		border: 1px solid var(--table-border-color) !important;
	}
	
	.table input:disabled {
		border-color: var(--form-elements-bgc) !important;
		background-color: var(--form-elements-bgc) !important;
	}
	
	.mobile-line-wrap button {
		padding: 2px 10px;
	}
}