MediaWiki:Theme-test.css

From Voices of the Void Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
.mediawiki {
	background-image: var(--votv-background);
	background-size: cover;
	background-position: bottom left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: var(--votv-background-color);

	.content-wrapper {
		#mw-head {
			background: var(--votv-background-color);
			border-bottom: var(--votv-border);
			font-weight: bold;
			
			@Media screen and (max-width:720px){
				top: 0px;
			}
			
			#ca-watch{
				border: var(--votv-border);
				width: fill-cotent;
			}
			#left-navigation {
				padding-left: 11em;
				background: no-repeat 0.5em/10em auto var(--votv-side-title);
			}
			
			.vector-menu-dropdown {
				.vector-menu-heading {
					font-weight: bold;
					background: none;
					color: var(--votv-link);
					
					&::after {
						display: none;
					}
				}
			
				.vector-menu-content {
					background: var(--votv-background-color);
					border: var(--votv-border);
					border-top: none;
				}
			
				.mw-list-item a{
					color: var(--votv-link);
				}
			}
			
			.vector-menu-tabs-legacy {
				.selected {
					border-bottom: var(--votv-border_selected_thick);
					border-inline: var(--votv-border_selected_thick);
					
					a {
						color: var(--votv-accent-color);
					}
				}
				
				li {
					background: var(--votv-background-color);
					a {
						color: var(--votv-link);
					}
				}             
			}

			.vector-menu-tabs {
				background: none;
				a {
					background: none;
				}
			}
			
			.vector-search-box-input {
				background: var(--votv-background-color);
				border: var(--votv-border);
				color: var(--votv-text-body);
			}
		}
		
		#mw-panel {
			margin-bottom:2em;
			
			#p-logo{
				margin-top:0.5em;
				margin-bottom:0.5em;
			}
			
			.mw-wiki-logo {
				background-image: var(--votv-side-icon);
				background-size: 100%;
			}
			
			.vector-menu-portal {
				color: var(--votv-text-body);
				background: var(--votv-background-color);
				border-left: var(--votv-border);
				border-right: var(--votv-border);
				margin: 0;
				
				&:nth-of-type(2) {
					border-top: var(--votv-border);
				}
				
				&:last-of-type {
					border-bottom: var(--votv-border);
				}
				.vector-menu-heading {
					
					background-image: none;
					border-top: var(--votv-border);
					border-bottom: var(--votv-border);
					color: var(--votv-header);
					text-shadow: var(--votv-header-shadow);
					text-align: center;
					margin: 0;
					font-size: 100%;
				}
				
				h3#p-Navigation-label.vector-menu-heading.custom-cursor-default-hover {
                    margin-top: -4px;
                }
				.vector-menu-content {
					margin-right: 0.5em;
					
					li {
						font-family: 'Segoe UI';
						font-size: 0.9em;
						line-height: 1;
						
						a {
							color: var(--votv-link);
							
							&:visited {
								color: var(--votv-link-visited);
							}
						}
					}
				}
			}
		}

		#content {
			background: var(--votv-background-color);
			border: var(--votv-border);
			color: var(--votv-text-body);
			
			#firstHeading {
				color: var(--votv-firstheader);
				text-shadow: var(--votv-firstheader-shadow);
				font-family: var(--votv-font-ru-friendly);
				border-bottom: var(--votv-border);
				font-size: 300%;
				margin: 0;
			}
			
			#bodyContent {
				font-family: 'Segoe UI';
				font-size: 0.95em;
				line-height: 1.5;
				
				table {
					display: table;
					white-space: normal;
					
					> caption {
						white-space: nowrap;
					}
					
					&:is(.mw-collapsed, :not(.wikitable)) > caption {
						border-bottom: var(--votv-border);
					}
					
					&.wikitable {
						border: var(--votv-border);
						color: var(--votv-text-body);
						background: none;
						
						&.infobox {
							float: right;
							margin: 0 0 0.5em 1em;
							max-width: 25%;
							
							.mw-gallery-slideshow { 
								margin: 0 auto;
								max-width: 200px;
								
								.mw-gallery-slideshow-buttons span:nth-of-type(2) {
									margin: 0;
								}
							}
							
							tr:first-child th:only-child {
								background: var(--votv-midground-color);
								font-size: 1.25em;
							}
							
							th:only-child {
								background: var(--votv-midground-color);
								font-size: 1.1em;
							}
						}
					}
					
					&.mw-datatable {
						border: var(--votv-border);
						color: var(--votv-text-body);
						background: none;
					}
					
					&:is(.wikitable, .mw-datatable) {
					
						td {
							border: var(--votv-border);
							background: var(--votv-background-color);
							padding: 0.4em 0.5em;
						}
						
						th {
							border: var(--votv-border);
							background: var(--votv-background-color);
						}
					}
				}
				
				.infobox {
				
					.tabber {
					
						.wikitable.infobox {
							max-width: 100%;
							width: 100%;
						}
						
						:has(.tabber) {
							width: min-content;
						}
						
					}
					
					> .tabber {
						float: right;
						margin-left: 16px;
					}
				}
				
				div.thumbinner {
					background-color: var(--votv-midground-color);
					border: var(--votv-border);
					border-bottom-width: 0.2em;
					padding: 0.75em;
					
					.thumbimage {
						border: none;
					}
					
					.thumbcaption {
						text-align: center;
						padding: 0.5em 0.25em 0;
						
						.magnify {
							display: none;
						}
					}
				}
				
				.gallery {
				
					&.mw-gallery-slideshow .gallerybox {
					
						&.slideshow-current {
							background-color: var(--votv-background-color);
							border: var(--votv-border);
						}
						
						div {
							max-width: 100%;
						}
					}
					
					&.mw-gallery-packed {
						text-align: left;
						
						.gallerytext {
							text-align: center;
						}
					}
				}
				
				.tabber__tab, .tabber__tab:visited{
					color: var(--votv-main-color);
				}
				
				.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited{
					color: var(--votv-accent-color);
				}

				.tabber__indicator{
					background: var(--votv-accent-color);
				}
				
				#toc {
					padding: 0.5em 1em 0;
					font-size: 100%;
					background: var(--votv-background-color);
					border: var(--votv-border);
					color: var(--votv-text-body);
					
					#toctogglecheckbox:checked ~ .toctitle {
						border-bottom: none;
					}
					
					.toctitle {
						border-bottom: var(--votv-border_thin_w);
						text-align: left;
						
						#mw-toc-heading {
							color: var(--votv-text-body);
							text-transform: none;
							font-size: initial;
							font-family: initial;
						}
						
						.toctogglespan {
							float: right;
							margin-left: 0.5em;
							
							.toctogglelabel {
								color: var(--votv-secondary-accent-color);
							}
						}
					}
					
					.tocnumber {
						color: var(--votv-text-body);
					}
				}
				
				#filetoc{
					border: var(--votv-border);
					background-color: var(--votv-background-color);
				}
			}
			
			.search-types .current a {
				color: var(--votv-accent-color);
			}
			
			.mw-highlight-lines pre {
				border: var(--votv-border);
				box-shadow: inset 2.75em 0 0 var(--votv-midground-color);
			}
		}
		
		h1, h2, h3, h4, h5, h6 {
			font-family: var(--votv-font-ru-friendly);
			color: var(--votv-body-text);
			margin: 0.5em 0 0 0;
		}
	}
	
	hr {
		background-color: var(--votv-main-color);
		padding: 1px;
	}
	
	a {
		color: var(--votv-link);

		&:visited {
			color: var(--votv-link-visited);
		}

		&.new {
			color: var(--votv-link-new);
		}
		
		&.external{
			color: var(--votv-link-outside);
		}
		
		&.external:visited {
			color: var(--votv-link-visited-outside);
		}
	}
	
	#footer {
		background: #131313;
		border-top: solid 6px #D61E1E;
		color: white;
		margin-left: 0;

		padding: 12px;
		box-sizing: border-box;
		position: relative;

		display: grid;
		grid-template-columns: [l] 1fr 0fr [r];
		grid-template-rows: [t] auto auto [b];
		z-index: 0;

		ul li {
			font-size: inherit;
			line-height: 1.5;
			padding: 0;
			color: gray;
		}

		#footer-info {
			font-size: 11px;
			display: contents;

			#footer-info-lastmod {
				grid-column: l / span 1;
				grid-row: t / span 1;
				place-self: start;
				margin-bottom: 1em;
			}

			#footer-info-copyright {
				grid-column: l / span 1;
				grid-row: span 1 / b;
				place-self: end stretch;
				position: relative;
				padding-right: 100px;

				img {
					position: absolute;
					right: 0;
					bottom: -1px;
					height: 33px;
					width: auto;
				}
			}
		}

		#footer-icons {
			grid-column: span 1 / r;
			grid-row: t / b;
			place-self: end;
		}
	}
	
	.mw-search-profile-tabs, #mw-searchoptions {
		background: #2B2B2B;
		border: 1px solid #646464;
	}

	.mw-changeslist-legend {
		background-color: #242424;
	}

	code, pre, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
		background: #2B2B2B;
		border: 1px solid #646464;
		color: #FFFFFF;
	}

	.diff-context {
	  color: #FFFFFF;
	  background: #2B2B2B;
	  border-color: #646464;
	}
	
	.diff-deletedline {
		border-color: #BF0000;
		background: #161616;

		.diffchange {
			background: #600000;
		}
	}
	
	.diff-addedline {
		border-color: #00BF00;
		background: #161616;

		.diffchange {
			background: #006000;
		}
	}
	
	.tabs-label {
		background: #646464;
	}
	
	.tabs-tabbox > .tabs-input:checked + .tabs-label {
		background: #2B2B2B;
	}
}

#mw-page-base{
	background-color: var(--votv-background-color);
	background-image: none;
}
/* Nah, I'd win */
.content-size-expanded {
	#mw-panel {
	    margin-bottom: 2em;
	    display: none;
	}	
	#content.mw-body {
	    margin: 0 25px;
	}
}
#nav-content-size-toggle {
    color: var(--votv-link);
    position: absolute;
    bottom: 8px;
    left: 70px;
}