Roblox Wiki Dark by dannyftm

/* ==UserStyle==
@name           Roblox Wiki Dark
@namespace      USO Archive
@author         Dannyftm
@description    `This is a dark theme I made for the Roblox Developer Wiki.This is my first style.`
@version        20200726.1.46
@license        CC-BY-4.0
@preprocessor   uso
@advanced color themeColor "Theme Color" #00A2FF

==/UserStyle== */
@-moz-document domain("developer.roblox.com") {
	:root {
		/*Main*/
		--themeColor: rgb(/*[[themeColor-rgb]]*/
		);
		--themeColorOpacity: rgba(/*[[themeColor-rgb]]*/
		, 0.1);
		--gridColor: var(--themeColor);
		--gridSize: 100px;
		/*Scrollbar*/
		--scrollbarBG: rgb(41, 41, 41);
		--scrollbarWidth: 12px;
		--scrollbarBorderRadius: calc(var(--scrollbarWidth) / 2);
		--scrollbarBorder: calc(var(--scrollbarBorderRadius) / 2);
		/*Grays*/
		--inputFieldBorder: rgb(27, 27, 27);
		--border: rgb(34, 34, 34);
		--inputFieldBackground: rgb(37, 37, 37);
		--tableItem: rgb(43, 43, 43);
		--mainBackground: rgb(46, 46, 46);
		--titlebar: rgb(53, 53, 53);
		--scrollBar: rgb(57, 57, 57);
		--button: rgb(60, 60, 60);
		--shadow: rgb(64, 64, 64);
		--currentMarker: rgb(67, 67, 67);
		--dimmedText: rgb(102, 102, 102);
		--titlebarText: rgb(171, 171, 171);
		--mainText: rgb(204, 204, 204);
		--brightText: rgb(229, 229, 229);
		--dialogMainButtonText: rgb(255, 255, 255);
	}

	/*Body*/
	.logo > a {
		background-image: url('https://www.dannyftm.com/rblxwikilogo.png') !important;
	}

	@keyframes shift {
		from {
			background-position: -1px -1px;
		}
		to {
			background-position: 99px 99px;
		}
	}

	body {
		background-size: var(--gridSize) var(--gridSize);
		background-image: linear-gradient(to right, var(--gridColor) 1px, transparent 1px),
		linear-gradient(to bottom, var(--gridColor) 1px, transparent 1px);
		/*background-image: radial-gradient(circle, var(--gridColor) 1px, rgba(0, 0, 0, 0) 1px);*/
		animation: shift 5s linear infinite;
	}

	body::-webkit-scrollbar {
		width: var(--scrollbarWidth);
	}

	body::-webkit-scrollbar-track {
		background: var(--scrollbarBG);
	}

	body::-webkit-scrollbar-thumb {
		background-color: var(--themeColor);
		border-radius: var(--scrollbarBorderRadius);
		border: var(--scrollbarBorder) solid var(--scrollbarBG);
	}

	body,
	.footer {
		color: white;
		background-color: var(--border);
	}

	.toc-nav {
		overflow: hidden;
	}

	.toc-nav::-webkit-scrollbar {
		width: var(--scrollbarWidth);
	}

	.toc-nav::-webkit-scrollbar-track {
		background: var(--scrollbarBG);
	}

	.toc-nav::-webkit-scrollbar-thumb {
		background-color: var(--themeColor);
		border-radius: var(--scrollbarBorderRadius);
		border: var(--scrollbarBorder) solid var(--scrollbarBG);
	}

	/*Header*/
	.main-container .header {
		background-color: var(--titlebar);
	}

	.header .nav-link > a,
	.nav-tabs-wrap .nav-tabs li.nav-item .nav-link {
		color: white !important;
	}

	.header .search-box {
		border-left: 1px solid var(--inputFieldBorder);
	}

	.my-1,
	.mb-4 {
		color: white !important;
	}

	.form-control {
		background-color: var(--inputFieldBackground) !important;
		border: 1px solid var(--inputFieldBorder) !important;
		color: var(--titlebarText) !important;
	}

	.input-group-prepend,
	#live-search-modal .modal-header .input-group-text,
	.bd-sidebar .bd-toc-item .active {
		background-color: var(--titlebar) !important;
	}

	.fa-search:before {
		color: white;
	}

	#live-search-modal .modal-body {
		background-color: var(--mainBackground);
	}

	.search-container .search-lists li {
		border-bottom-color: var(--inputFieldBorder) !important;
	}

	.search-container .search-lists h5 {
		color: var(--themeColor) !important;
	}

	.custom-select-box > a {
		background-color: var(--inputFieldBackground) !important;
		border: 1px solid var(--inputFieldBorder) !important;
		color: var(--titlebarText) !important;
	}

	/*Table*/
	.table,
	.table-striped,
	.table-bordered,
	.table tr,
	.table th {
		border: 1px solid var(--border) !important;
	}

	.table td {
		color: var(--mainText);
		border-bottom: 1px solid var(--border);
	}

	.table-primary {
		background-color: var(--scrollBar);
	}

	.table thead tr td,
	.table-striped thead th {
		background-color: var(--inputFieldBackground) !important;
	}

	.table tbody tr td {
		border: 1px solid var(--border);
	}

	.table.tbl-items {
		border-bottom: 1px solid var(--border);
	}

	.table.tbl-items th {
		background-color: var(--titlebar);
		border-bottom: 1px solid var(--border);
	}

	.table-striped tr td,
	.code-block {
		border: 1px solid var(--border);
	}

	.table-striped tbody tr:nth-child(even) {
		background-color: var(--mainBackground) !important;
	}

	.table-striped tbody tr:nth-child(odd) {
		background-color: var(--button) !important;
	}

	.table-row td:first-child,
	#onboarding-landing-page .sc-cTkwdZ {
		background-color: var(--inputFieldBackground) !important;
	}

	strong,
	.api-tag span,
	.arguments-wrap,
	.argument,
	.markdown-field-data li,
	.alert,
	.alert-info p,
	.alert-info b,
	.figure-caption,
	#onboarding-landing-page .sc-dOSReg {
		color: var(--mainText) !important;
	}

	hr {
		border-color: var(--border);
	}

	/*bd*/
	.container-fluid,
	#onboarding-landing-page .sc-iUuytg {
		background-color: var(--titlebar);
	}

	.bd-content p,
	.bd-content h1,
	.bd-content h2,
	.bd-content h3,
	h2,
	h6 {
		color: white;
	}

	.bd-content ul > li {
		color: var(--titlebarText);
	}

	.alert,
	.text-muted {
		color: var(--dimmedText) !important;
	}

	.alert a {
		outline: 1px
	}

	.alert p,
	.alert b {
		color: #444C56;
	}

	.learn-roblox-pages .intro {
		border-bottom: 2px solid var(--border);
	}

	/*Sections*/
	.section {
		background-color: var(--inputFieldBackground);
		color: white;
	}

	.section-title,
	.section > p {
		color: var(--titlebarText);
	}

	.carousel-inner p,
	.carousel-inner h6 {
		color: white !important;
	}

	.carousel-control-prev,
	.carousel-control-next {
		background-color: var(--themeColor) !important;
	}

	.gs-article-container {
		background-color: var(--button);
	}

	.gs-article-container-border {
		color: white;
		background-color: var(--button);
		border-left-color: var(--mainBackground);
		border-right-color: var(--mainBackground);
	}

	.container p,
	.container h4 {
		color: white;
	}

	code,
	kbd,
	.tags-list li {
		color: var(--mainText);
		background-color: var(--inputFieldBackground);
		border: 1px solid var(--border);
	}

	.code-link {
		background-color: var(--inputFieldBackground);
		border: 1px solid var(--border);
	}

	.code-wrap code {
		background-color: var(--mainBackground);
	}

	.card {
		background-color: var(--titlebar) !important;
		box-shadow: 0 0 15px var(--titlebar) !important;
	}

	.card-header,
	.card-footer {
		background-color: var(--button) !important;
	}

	.card-text {
		color: var(--titlebarText) !important;
	}

	.card-title,
	.card-header {
		color: var(--mainText) !important;
	}

	/*Main*/
	main {
		background-color: var(--mainBackground);
	}

	a,
	a:hover,
	a:active,
	.learn-roblox-pages .learning-materials-content .tab-content h5,
	.bd-toc .toc-nav nav[data-toggle=toc] .active,
	.code-link a {
		color: var(--themeColor);
	}

	.idx-col ul li a {
		color: var(--mainText) !important;
	}

	.desc,
	.lead {
		color: white !important;
	}

	.nav-tabs-wrap,
	.nav-tabs {
		background-color: var(--titlebar) !important;
	}

	.custom-tabs .nav-tabs li .active {
		border-color: var(--themeColor);
	}

	.custom-tabs .tab-content h5 {
		color: var(--themeColor);
	}

	.badge-dark {
		background-color: var(--button);
	}

	.search-lists p:first-child {
		color: var(--mainText) !important;
	}

	.search-lists p {
		color: var(--titlebarText) !important;
	}

	.markdown-field-data {
		color: var(--mainText);
	}

	/*Sidebar*/
	.multi-nested-list {
		overflow-y: scroll;
	}

	.multi-nested-list::-webkit-scrollbar {
		width: var(--scrollbarWidth);
	}

	.multi-nested-list::-webkit-scrollbar-track {
		background: var(--scrollbarBG);
	}

	.multi-nested-list::-webkit-scrollbar-thumb {
		background-color: var(--themeColor);
		border-radius: var(--scrollbarBorderRadius);
		border: var(--scrollbarBorder) solid var(--scrollbarBG);
	}

	.multi-nested-list li ul li:last-child:after,
	.multi-nested-list li:last-child:after {
		background-color: var(--button);
	}

	.bd-toc-link,
	.sub-nav li a,
	.nav-item > a {
		color: white !important;
	}

	.bd-toc-link:hover,
	.sub-nav li a:hover {
		background-color: var(--titlebar) !important;
	}

	.toggle-sidebar {
		background-color: var(--titlebar);
		border-bottom: 1px solid var(--titlebar) !important;
	}

	.group,
	.addBorderBefore,
	.multi-nested-list a {
		color: white !important;
		background-color: var(--button) !important;
	}

	.multi-nested-list a:after {
		border-color: var(--themeColor) !important;
		content: "";
		border: 1px solid #ccc;
		border-radius: 50%;
		width: 4px;
		height: 4px;
		display: inline-block;
		left: -10px;
		position: absolute;
		top: 9px;
	}

	.no-link .txt {
		color: white;
	}

	.arrow-right {
		border-bottom: 1px solid var(--themeColor) !important;
	}

	.arrow {
		filter: invert();
	}

	.collapsed-sidebar,
	.slide-sidebar,
	.bd-sidebar-wrap,
	.bd-sidebar-wrap > a {
		background-color: var(--button);
		color: var(--titlebarText);
	}

	.bd-sidebar {
		background-color: var(--button);
	}

	.bd-sidebar-wrap .nav-tabs li .active,
	.header .bd-navbar-nav .nav-item > a.active,
	.learn-roblox-pages .learning-materials-content .nav-tabs li .active {
		border-bottom: 2px solid var(--themeColor) !important;
	}

	a.nav-link:hover {
		color: var(--themeColor) !important;
	}

	.bd-toc .toc-nav .inner-toc-nav {
		border-left: 4px solid var(--themeColor);
	}

	.bd-toc .toggle-toc {
		color: var(--themeColor);
		background: var(--themeColorOpacity);
	}

	.play-btn,
	.gs-color-1,
	.gs-color-2,
	a.gs-button:hover {
		color: white !important;
		background-color: var(--themeColor);
	}

	.gs-button.active,
	a.gs-button.active:hover {
		color: var(--themeColor) !important;
	}

	.gs-color-1 {
		filter: grayscale(45%);
	}

	/*Carousel*/
	.creators-stories-carousel .img-wrap img,
	.c...