Difference between revisions of "Darkbootstrap.css"

Revision as of 22:50, 27 February 2023

html {
	scroll-behavior: smooth;
	scroll-padding-top: 69px;
}

body {
	--background-color--primary: #111111;
	--background-color--secondary: #1d1d1d;
	
	background-color: var(--background-color--secondary);
	color: #ccc;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
	color: #fff;
	overflow: hidden;
}

h1, h2 {
	border-bottom: 2px solid var(--background-color--secondary);
	padding: 0 0 0.15em;
}

footer {
	text-align: center;
	font-size: 80%;
	color: #ccc;
}

footer ul {
	padding: 0;
	list-style-type: none;
}

/* LINKS */
a, .toctogglelabel {
	color: #f9a916;
	text-decoration: none;
}
a:hover, .toctogglelabel:hover {
	color: #fff;
	text-decoration: none;
}
a.new { color: #e55757; }
a.new:hover { color: #fff; }
a:visited { color: #c70; }

.navbar {
	box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
}

.navbar .form-control {
	color: #cacaca;
	background-color: rgba(255,255,255,0.1);
	border: none;
}

.bg-dark {
	background-color: var(--background-color--primary) !important;
}

.navbar-dark .navbar-nav .nav-link {
	color: #cacaca;
	font-size: 13px;
	margin-left: 0.75rem;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
	color: rgb(255 255 255);
}

.dropdown-menu {
	background-color: #333333;
	border: none;
	border-radius: 0;
	font-size: 14px;
}

.dropdown-item {
	color: #fff;
	padding: .5rem 0.75rem;
}

.dropdown-item:focus, .dropdown-item:hover {
	color: #fff;
	background-color: var(--background-color--secondary);
}

.dropdown-toggle::after {
	color: #f9a916;
	vertical-align: middle;
}

.dropdown-icon {
	margin-right: 0.5rem;
}

#page-content {
	background-color: var(--background-color--primary);
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
	padding: 1rem;
	margin-top: 60px;
}

#content {
	margin-bottom: 2rem;
}

#sidebar {
	min-width: 300px;
	max-width: 300px;
	margin-left: 1rem;
	display: none;
}

.default-box {
	padding: 1rem;
	background: var(--background-color--secondary);
	margin-bottom: 1rem;
	border: #F90 1px solid;
	border-radius: 10px;
}

.default-box > *:last-child  {
	margin-bottom: 0!important;
}

.toc {
	background-color: var(--background-color--secondary);
	padding: 0.75rem;
	margin-bottom: 1rem;
	width: fit-content;
}

.toctitle {
	margin-bottom: 0.5rem;
}

.toc h2 {
	font-size: 1.75em;
}

.tocnumber {
	display: none;
}

.toc ul {
	list-style-type: none;
	margin-bottom: 0;
	padding-left: 1.5rem;
}

.toc > ul {
	padding-left: 0;
}

.toc li {
	margin-bottom: 0.25rem;
}

.toc li:last-child {
	margin-bottom: 0;
}

.toc li ul {
	margin-top: 0.25rem;
}

#pageActions {
	float: right;
}

#pageActions .dropdown-toggle::after {
	color: var(--background-color--primary);
}

.printfooter {
	display: none;
}

.mw-editsection > a {
	margin: 0 0.25rem;
}

.mw-editsection {
	margin-left: 0.75rem;
	font-size: 13px;
	font-weight: 400;
}

.mw-editsection-bracket {
	opacity: 0.75;
}

.thumb.tright {
	/*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/
}

.thumbinner {
	border: none!important;
	padding: 0.5rem!important;
	background-color: var(--background-color--secondary) !important;
}

.thumbimage {
	border: 1px solid #000!important;
	background: var(--background-color--secondary) !important;
	width: 100%;
	height: auto;
}

.thumbcaption {
	margin-top: 0.5rem;
}

div.tright {
	margin: 0 0 1rem 1rem;
}

div.tright,div.floatright,table.floatright {
    clear: right;
    float: right;
}

.stub-box {
	padding: 0.5rem 0.75rem;
	background: linear-gradient(135deg,rgb(255 51 51 / 20%) 0%,rgba(255,255,255,0) 100%);
	margin: 0 auto;
	margin-bottom: 1rem;
	width: fit-content;
	border-left: 10px solid #ff3333;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background-color: var(--background-color--secondary);
	border: none;
}

/* PREFERENCES SPECIAL PAGE */
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { border-color: var(--background-color--secondary); }
.oo-ui-tabSelectWidget-framed { background-color: var(--background-color--secondary); }
.mw-prefs-buttons { background-color: var(--background-color--secondary); border-top: 0; }
.mw-prefs-buttons .mw-htmlform-submit-buttons { margin-left: 1rem; }

@media screen and (max-width: 768px) {
	div.tright {
		width: 100%!important;
    	float: none!important;
    	clear: none!important;
    	margin: 1rem 0 1rem 0!important;
	}
}