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); }

/* 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 (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; }		.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; }	}	@media (max-width: 1000px) { #content-footer-wrapper { width: 100%; }	}

.refreshed-toolbox-stuck { top: 0!important; }	#content-wrapper { border: 5px solid var(--blue); border-radius: 1rem; font-family: inherit; color: #000; box-shadow: none; }

/* 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-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 */ color: #000; text-align: end; }
 * 1) footer-wrapper {

display: flex; justify-content: flex-end; }
 * 1) footer-row-icons {

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

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

/* Catlinks */ #catlinks { background-color: #eaecf0; padding: .5rem; 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); }