MediaWiki:Refreshed.css

/* Fanon Wiki - Refreshed custom styles */
/* The styles here are specific to Refreshed, the default skin of this wiki*

/* Body layout */
body {
	background-color: var(--bg-color);
    font: var(--font-default);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem;
	max-width: 1575px;
	margin: auto;
}

a, a:visited {
	color: var(--link-color);
}

@media (max-width: 719px) {
	body {
		padding: 0;
	}
}

	/* Topbar */
	#header-wrapper {
		background: none;
		position: relative;
		width: 100%;
		box-shadow: none;
	}
	
	#user-info-search-wrapper {
		background: #f9eeb9;
		color: #000;
		padding: 0 .75rem;
		border-radius: 100px;
	}
	
	@media (min-width: 1001px) {
		#header-wrapper {
			height: 150px;
		}
		#site-navigation-header {
			height: 150px!important;
			position: fixed;
		}
		#user-info-search-wrapper {
			top: 6.5rem;
		}
	}
	
	@media (min-width: 720px) {
		#user-info-search-wrapper {
		    height: 50px!important;
		    position: relative;
		    margin-right: 0;
		}
	}

	@media (max-width: 719px) {
		#header-wrapper {
			margin: .5rem .5rem 0 .5rem;
		}
	}
	
	@media (min-width: 720px) and (max-width: 1000px) {
		#header-wrapper {
			height: 100px;
		}
		#user-info-search-wrapper {
			top: 1.5rem;
		}
	}
	
	.site-navigation-logo-img {
		width: 190px;
	}
	
	#searchInput {
		outline: 3px solid var(--lightgray);
	    border-radius: 100px;
	}
	
	.searchButton {
		opacity: .5;
	    zoom: .8;
	    scale: .8; /* moz compatibility */
	    right: 10px;
	}
	
	.header-button, .header-button:hover, .header-button:active, .refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button, .refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button, #sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button, #user-info-dropdown-button {
		border-radius: 1rem;
	}
	
	.header-button:active, .refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button, .refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button, #sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button {
		background: var(--green);
	}
	
	.header-button:hover {
		background: rgba(0,0,0,.1);
	}

	/* Sidebar */
	#sidebar-wrapper {
		padding: 0;
		margin-top: 0;
		position: relative;
	}
	
	#sidebar {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	
	@media (min-width: 1001px) {
		#sidebar {
			width: 12.75rem;
			position: fixed;
		}
	}
	
	@media (max-width: 1000px) {
		#sidebar-wrapper {
			background: none;
			transform: translateX(-150%);
			transition: all .3s ease-in-out;
			position: absolute;
			box-shadow: none!important;
			height: fit-content;
		}
		.refreshed-modal-background {
			backdrop-filter: blur(5px)
		}
	}
	
	@media (max-width: 719px) {
		#sidebar div:first-of-type {
			display: none;
		}
	}
	
	.refreshed-icon-refreshed-menu.ooui-icon-menu {
		fill: #000;
		color: #000;
	}
	
	.sidebar-section {
		background-color: #fff;
		border: 5px solid var(--red);
		border-radius: 1rem;
	}

	.sidebar-heading {
		background-color: var(--red);
		border-radius: .5rem;
		font-weight: bold;
		font-size: 10.5pt;
		text-align: center;
		text-transform: uppercase;
		display: block;
		padding: .5rem;
		margin: .25rem;
	}

	a.sidebar-item {
		color: var(--link-color);
	}

	a.sidebar-item:focus, a.sidebar-item:hover, a.sidebar-item:active, a.sidebar-item.selected {
		background-color: rgba(0,0,0,.1);
		border-left-color: var(--blue);
	}

	/* Main area */
	#content-footer-wrapper {
		margin: 0;
	}
	
	@media (min-width: 1001px) {
		#content-footer-wrapper {
			flex: 1;
			min-width: 1px;
		}
	}
	
	@media (max-width: 1000px) {
		#content-footer-wrapper {
			width: 100%;
		}
		
		#content {
			overflow-x: auto;
		}
	}
	
	#content-wrapper {
		border: 5px solid var(--blue);
		border-radius: 1rem;
		font-family: inherit;
		color: #000;
		box-shadow: none;
	}
	
	@media (max-width: 719px) {
		#content-wrapper {
			border: none;
			border-top: 5px solid var(--blue);
			border-radius: 0 0 1rem 1rem;
		}
		
		#toc {
			font-size: 13pt;
		}
	}

	.refreshed-toolbox-stuck {
		top: 0!important;
	}

	/* Titles */
		.firstHeading, #firstHeading {
			font-size: 2.5rem;
			padding-bottom: .25rem;
			border-bottom: 4px solid var(--red)
		}

		#main-title-messages {
			border: none;
		}

		/* Edit | Edit Source */
			.mw-editsection {
				font: small-caps 600 12pt var(--sans-serif);
				float: right;
			}
		
			.mw-editsection-bracket {
				color: var(--lightgray)!important;
			}

	/* Page actions */
		#refreshed-toolbox {
			margin-bottom: 1rem;	
		}
		
		.refreshed-dropdown-tray a, #refreshed-toolbox a {
			color: var(--link-color);
		}
		
		#p-namespaces {
			min-width: auto;
		}

		#p-namespaces li.selected a, #p-views li.selected a {
			border-width: 4px;
		}

		#toolbox-dropdown-button {
			border-radius: .33rem;
		}
		
		.refreshed-dropdown-tray {
			border-radius: .5rem;
		}
		
		.refreshed-dropdown-tray a:focus, .refreshed-dropdown-tray a:hover, .refreshed-dropdown-tray a:active, .refreshed-dropdown-tray a.selected {
			background-color: rgba(0,0,0,.1);
		}

/* Footer */
#footer-wrapper {
	color: #000;
	text-align: end;
}

#footer-row-icons {
	display: flex;
	justify-content: flex-end;
}

#footer-row-poweredby a:first-of-type {
	margin-right: 1rem;
}

@media (max-width: 1000px) {
	#footer-wrapper {
		text-align: center;
	}
	#footer-row-icons {
		justify-content: center;
	}
}

	/* Catlinks */
	#catlinks {
		background-color: #eaecf0;
	    padding: .5rem;
	    margin-top: 1rem;
	    border-radius: .5rem;
	}
	
	#catlinks ul a {
		background-color: var(--link-color);
		color: #fff;
		padding: 3px 7px;
		border-radius: 5px;
	}
	
	#catlinks ul a.new {
		background-color: var(--red);
	}
	
	#catlinks ul a:hover {
		box-shadow: inset 0 0 10px 100px rgba(255,255,255,.2);
	}
	
	.catlinks li {
		border: none;
		padding: 0 .2rem;
	}
	
	@media (max-width: 720px) {
		#catlinks ul {
			display: block;
			padding-top: .75rem;
		}
	}

/* Headings */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: var(--title);
	padding-bottom: .5rem;
}

h1, .h1 {
	font-size: 2.15rem;
}

h2, .h2 {
	font-size: 1.95rem;
}

h1, .h1, h2, .h2 {
	border-bottom: 3px solid var(--lightgray);
}

/* Pre, Code & KBDs */
code {
	color: #ff50e1;
	font-weight: 600;
}

kbd {
	font: 700 10.5pt Roboto, sans-serif;
    text-transform: uppercase;
    background: #202020;
    color: #fff;
    border-bottom: 2px solid #909090;
    border-radius: 5px;
    padding: 3px 5px;
    margin: 2px 4px;
}

/* Wikieditor S&R dialog box */
.ui-widget {
	font: inherit;
}