MediaWiki:Common.css: Difference between revisions

Latest revision as of 12:28, 20 June 2024

/* CSS placed here will be applied to all skins */
#p-logo-text a {
	font-family: sans-serif;
}
#p-logo-text a:first-letter {
	color: #4da93c;
}
@media screen and (min-width: 850px) and (max-width: 1099px) {
	#p-logo-text a {
		padding-top: 0.2em;
	}
}
@media screen and (min-width: 1100px) {
	#p-logo-text a {
		padding: 0.2em 0.5em;
	}
}
.my-search {
	display: none;
}
.my-search .img {
	position: absolute;
	top: 0.8em;
	right: 3.8em;
	width: 30px;
	height: 30px;
	font-size: 1em;
	background-image: url(/mediawiki/my-images/search.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
	cursor: pointer;
}
#user-tools #personal h2 {
	background-image: url(/mediawiki/my-images/userAvatarOutline.svg);
}
@media screen and (max-width: 850px) {
    .my-search {
    	display: block;
    }
	#site-navigation h2 {
		top: 0.8em;
		background-image: url(/mediawiki/my-images/menu.svg);
		background-size: 80%;
	}
	#site-navigation h2:after {
		display: none;
	}
	#site-tools h2 {
		top: 0.8em;
        right: 6.5em;
		background-image: url(/mediawiki/my-images/settings.svg);
		background-size: 80%;
	}
	#site-tools h2:after {
		display: none;
	}
	#user-tools h2 {
		top: 0.8em;
		background-image: url(/mediawiki/my-images/userAvatarOutline.svg);
		background-size: 80%;
	}
	#user-tools h2:after {
		display: none;
	}
}
#searchButton, #mw-searchButton {
	background-image: url(/mediawiki/my-images/search.svg);
}
#mw-page-header-links {
	display: none;
}
#ca-nstab-main {
    display: none;
}
#ca-talk {
    display: none;
}
#ca-history {
    display: none;
}
#ca-viewsource {
    display: none;
}
/*#mw-content-wrapper {
	margin-left: -20em;
}
#mw-content {
	margin-left: 20em;
}
#mw-site-navigation {
	flex-basis: 20em;
	width: 20em;
}*/
@media screen and (min-width: 1340px) {
	#mw-site-navigation>div {
		position: sticky;
		top: 4.2em;
	}
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
	#mw-related-navigation {
		display: none;
	}
}
@media screen and (min-width: 1100px) {
	#mw-site-navigation {
		position: sticky;
		top: 3.475em;
	}
	#page-tools {
		position: sticky;
		top: 4.675em;
	}
}
#page-tools #p-pagemisc {
	display: none;
}
#page-tools .my-toc li {
	margin: 0.5em 0;
	padding: 0;
}
#site-tools {
	display: none;
}
@media screen and (min-width: 1100px) {
	#p-search #searchform {
		width: 300px;
	    margin: 0 0 0 auto;
	}
}
@media screen and (max-width: 850px) {
    #mw-header-container:not(.showSearch) {
        padding: 2.981em 0.45em 0.35em;
    }
    #mw-header-container:not(.showSearch) #p-search {
        display: none;
    }
    #mw-header-container.showSearch {
        padding: 0.75em 6.4em 0.35em 3.75em;
    }
    #mw-header-container.showSearch #p-logo-text {
        display: none;
    }
    #mw-header-container.showSearch #searchInput {
        padding: 0.4em 3em 0.2em 1em;
    }
    #mw-header-container.showSearch #searchButton {
        right: 0.5em;
    }
    #mw-header-container.showSearch #mw-searchButton {
        display: none;
    }
    #mw-content-container.showSearch #site-tools {
    	display: none;
    }
}
#mw-header-hack .color-left {
	background-color: #4da93c;
}
#mw-header-hack .color-middle {
	background-color: #000;
}
#mw-header-hack .color-right {
	background-color: #4da93c;
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
	#mw-header-hack .color-right {
		background-color: #000;
	}
}
@media screen and (max-width: 850px) {
    #mw-header-hack .color-right, #mw-header-hack .color-middle, #mw-header-hack .color-left {
        background: #000;
    }
}
#mw-header-nav-hack .color-left, #mw-header-nav-hack .color-middle, #mw-header-nav-hack .color-right {
	background: #000;
}
#mw-content-container {
	border-bottom-color: #4da93c;
}
#mw-footer {
	display: flex;
	padding: 10px;
	font-family: sans-serif;
}
#mw-footer .logo {
	width: 200px;
	max-width: 100%;
	margin-right: 30px;
}
#mw-footer .content {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
#mw-footer .content .name {
	color: #000;
	font-weight: 700;
}
#mw-footer .content>div:nth-child(2):first-letter {
	color: #4da93c;
}
@media screen and (max-width: 850px) {
	#mw-footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	#mw-footer .logo {
		order: 2;
		margin-top: 20px;
		margin-right: 0;
	}
}

.mw-mmv-image-wrapper {
	bottom: 0;
}
.mw-mmv-post-image {
	display: none;
}