Difference between revisions of "Darkbootstrap.css"

m (change searchoptions color)
 
(41 intermediate revisions by 3 users not shown)
Line 5: Line 5:
  
 
body {
 
body {
background-color: #1d1d1d;
+
--text-color: #ccc;
color: #ccc;
+
--background-color--primary: #111;
 +
--background-color--secondary: #1d1d1d;
 +
 +
background-color: var(--background-color--secondary);
 +
color: var(--text-color);
 
font-family: 'Roboto', sans-serif;
 
font-family: 'Roboto', sans-serif;
 
font-size: 15px;
 
font-size: 15px;
Line 13: Line 17:
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
 
color: #fff;
 
color: #fff;
 +
overflow: hidden;
 
}
 
}
  
 
h1, h2 {
 
h1, h2 {
border-bottom: 2px solid #1d1d1d;
+
border-bottom: 2px solid var(--background-color--secondary);
 
padding: 0 0 0.15em;
 
padding: 0 0 0.15em;
 
}
 
}
Line 23: Line 28:
 
text-align: center;
 
text-align: center;
 
font-size: 80%;
 
font-size: 80%;
color: #ccc;
+
color: var(--text-color);
 
}
 
}
  
Line 31: Line 36:
 
}
 
}
  
 +
/* LINKS */
 
a, .toctogglelabel {
 
a, .toctogglelabel {
 
color: #f9a916;
 
color: #f9a916;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
 
 
a:hover, .toctogglelabel:hover {
 
a:hover, .toctogglelabel:hover {
 
color: #fff;
 
color: #fff;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
 +
a.new { color: #e55757; }
 +
a.new:hover { color: #fff; }
 +
a.new:visited { color: #e55757; }
 +
a:visited { color: #c70; }
 +
a:visited:hover { color: #fff; }
  
 
.navbar {
 
.navbar {
Line 52: Line 62:
  
 
.bg-dark {
 
.bg-dark {
background-color: #111111!important;
+
background-color: var(--background-color--primary) !important;
 
}
 
}
  
Line 73: Line 83:
  
 
.dropdown-item {
 
.dropdown-item {
color: #fff;
+
color: #fff!important;
 
padding: .5rem 0.75rem;
 
padding: .5rem 0.75rem;
 
}
 
}
Line 79: Line 89:
 
.dropdown-item:focus, .dropdown-item:hover {
 
.dropdown-item:focus, .dropdown-item:hover {
 
color: #fff;
 
color: #fff;
background-color: #1d1d1d;
+
background-color: var(--background-color--secondary);
 
}
 
}
  
Line 92: Line 102:
  
 
#page-content {
 
#page-content {
background-color: #111111;
+
background-color: var(--background-color--primary);
 
width: 100%;
 
width: 100%;
 
max-width: 1460px;
 
max-width: 1460px;
Line 109: Line 119:
 
margin-left: 1rem;
 
margin-left: 1rem;
 
display: none;
 
display: none;
 +
}
 +
 +
.default-box {
 +
padding: 1rem;
 +
background: #171717;
 +
margin-bottom: 1rem;
 +
border: var(--background-color--secondary) 1px solid;
 +
border-radius: 0.5rem;
 +
}
 +
 +
.default-box > *:last-child  {
 +
margin-bottom: 0!important;
 
}
 
}
  
 
.toc {
 
.toc {
background-color: #1d1d1d;
+
background-color: var(--background-color--secondary);
 
padding: 0.75rem;
 
padding: 0.75rem;
 
margin-bottom: 1rem;
 
margin-bottom: 1rem;
Line 157: Line 179:
  
 
#pageActions .dropdown-toggle::after {
 
#pageActions .dropdown-toggle::after {
color: #111;
+
color: var(--background-color--primary);
 
}
 
}
  
Line 179: Line 201:
  
 
.thumb.tright {
 
.thumb.tright {
 +
overflow: hidden;
 
/*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/
 
/*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/
 
}
 
}
Line 184: Line 207:
 
.thumbinner {
 
.thumbinner {
 
border: none!important;
 
border: none!important;
padding: 0.25rem!important;
+
padding: 0.5rem!important;
background-color: #262831!important;
+
background-color: var(--background-color--secondary) !important;
 
}
 
}
  
 
.thumbimage {
 
.thumbimage {
border: 1px solid #111217!important;
+
border: 1px solid #000!important;
background: #111217!important;
+
background: var(--background-color--secondary) !important;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 
 +
.thumbcaption {
 +
margin-top: 0.5rem;
 
}
 
}
  
Line 196: Line 225:
 
margin: 0 0 1rem 1rem;
 
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;
 +
}
 +
 +
.diff-context {
 +
background: #1d1d1d;
 +
color: #ccc;
 +
border-color: #000;
 +
}
 +
 +
.diff-addedline, .diff-deletedline, .diff-context {
 +
border-radius: 0;
 +
}
 +
 +
.diff-addedline {
 +
border-color: #5e9a6b;
 +
}
 +
 +
.diff-addedline .diffchange {
 +
background: #5e9a6b;
 +
color: #111217;
 +
}
 +
 +
.diff-deletedline {
 +
border-color: #9a5e5e;
 +
}
 +
 +
.diff-deletedline .diffchange {
 +
background: #9a5e5e;
 +
color: #111217;
 +
}
 +
 +
.mw-plusminus-pos {
 +
color: green;
 +
}
 +
 +
.mw-plusminus-neg {
 +
color: red;
 +
}
 +
 +
#mw-searchoptions {
 +
  color: var(--background-color--secondary) !important;
 +
}
 +
 +
/* GALLERIES */
 +
li.gallerybox div.thumb {
 +
background-color: var(--background-color--secondary) !important;
 +
border: none;
 +
overflow: hidden;
 +
}
 +
li.gallerybox div.thumb img { border: 1px solid #000 !important; }
 +
ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper { width: 100% !important; }
 +
 +
/* 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) {
 
@media screen and (max-width: 768px) {

Latest revision as of 18:22, 19 August 2023

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

body {
	--text-color: #ccc;
	--background-color--primary: #111;
	--background-color--secondary: #1d1d1d;
	
	background-color: var(--background-color--secondary);
	color: var(--text-color);
	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: var(--text-color);
}

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.new:visited { color: #e55757; }
a:visited { color: #c70; }
a:visited:hover { color: #fff; }

.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!important;
	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: #171717;
	margin-bottom: 1rem;
	border: var(--background-color--secondary) 1px solid;
	border-radius: 0.5rem;
}

.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 {
	overflow: hidden;
	/*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;
}

.diff-context {
	background: #1d1d1d;
	color: #ccc;
	border-color: #000;
}

.diff-addedline, .diff-deletedline, .diff-context {
	border-radius: 0;
}

.diff-addedline {
	border-color: #5e9a6b;
}

.diff-addedline .diffchange {
	background: #5e9a6b;
	color: #111217;
}

.diff-deletedline {
	border-color: #9a5e5e;
}

.diff-deletedline .diffchange {
	background: #9a5e5e;
	color: #111217;
}

.mw-plusminus-pos {
	color: green;
}

.mw-plusminus-neg {
	color: red;
}

#mw-searchoptions {
  color: var(--background-color--secondary) !important;
}

/* GALLERIES */
li.gallerybox div.thumb {
	background-color: var(--background-color--secondary) !important;
	border: none;
	overflow: hidden;
}
li.gallerybox div.thumb img { border: 1px solid #000 !important; }
ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper { width: 100% !important; }

/* 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;
	}
}