MediaWiki:Gadget-helppage.css

@media only screen and (max-width: 640px) {	
	body.rootpage-Rules,
	body.rootpage-Help_Resources {
		position: absolute;
	}
	
	.rootpage-Rules #navwrapper,
	.rootpage-Help_Resources #navwrapper {
		width: 100%;
	}
	
}

	.rootpage-Rules #tagline,
	.rootpage-Rules #breadcrumbs a:not( ::first-child ) {
		display:none;
	}	
	
	
	.rootpage-Rules h1#firstHeading,
	.rootpage-Help_Resources h1#firstHeading,
	.rootpage-Help_Resources #tagline {
		text-align: center;
		width: 50%;
		margin: 0.5rem auto;
	}
	
	.rootpage-Rules h1#firstHeading,
	.rootpage-Help_Resources h1#firstHeading {
		padding-top: 1rem !important;
		margin: 0 auto;
	}
	
	/*Overwriting Common.css first heading */
	.rootpage-Rules #firstHeading,
	.rootpage-Help_Resources #firstHeading {
		padding-top: 10px !important;
	}
	
	.rootpage-Rules #siteNotice,
	.rootpage-Help_Resources #siteNotice {
		padding-top: 10px !important;
	}
	
	.rootpage-Rules #personal-tools-dropdown,
	.rootpage-Help_Resources #personal-tools-dropdown {
		z-index: 9;
	}
	
	.rootpage-Rules .ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output,
	.rootpage-Help_Resources .ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output {
		background: none;
	}
	
	/* == Topbar stuff == */
	
	.rootpage-Rules #navwrapper,
	.rootpage-Help_Resources #navwrapper {
		background: none;
		position: absolute;
	}
	
	#dogcraftNav {
		height: 80px;
		top: 0;
		background: #8b0024;
		position: relative;
		z-index: 10;
		width: 100%;
		line-height: 80px;
		display: flex;
		box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 2px 0 10px 0 rgba(0, 0, 0, 0.12);
	}
	
	#dc-nav-left {
		display: flex;
		flex-basis: 0;
		-webkit-box-flex: 1;
		flex-grow: 1;
		text-align: center;
		width: 100%;
		line-height: 80px;
		justify-content: start;
	}
	
	#dc-nav-left a {
		font-size: 26px;
	}
	
	#dc-nav-title {
		display: flex;
		position: absolute;
		left: 50%;
		right: 50%;
		justify-content: center;
		max-height: 80px;
	}
	
	#dc-nav-title a {
		display: inline-flex;
		font-weight: 700 !important;
		font-size: 24px !important;
		white-space: nowrap;
	}
	
	#dc-nav-title img {
		width: 80px;
		max-width: 80px;
		padding: 10px;
		border-radius: 50;
	}
	
	#dc-nav-title span {
		line-height: 30px;
		margin: auto 0;
	}
	
@media only screen and (min-width: 641px) {
	
	.dc_nav_icon {
		background: #8b0024;
		margin: auto 5px;
		padding: 5px;
		line-height: 50px;
		height: 50px;
		width: 50px;
		border-radius: 10px;
		text-align: center;
		transition: all 0.4s ease-in-out;
		color: white;
		font-size: 22px;
		font-weight: 700;
	}
	
	.dc_nav_icon img {
		height: 30px;
		margin: auto 5px;
		padding: 0 5px;
		-webkit-filter: brightness(0) invert(1);
		filter: brightness(0) invert(1);
		padding: 0;
	}
	

	#dc-nav-left .wiki,
	.dc_nav_imgicon
	{
		padding: 0;
	}
	
	#dc-nav-left .wiki img {
		margin-bottom: 5px;
	}
	.twitter.dc_nav_icon {
    	font-size: 24px !important;
	}
	
	/*#dc-nav-left .wiki { //this stays, while unused on Rules or Help Resources, it may prove useful in the future
		background: var(--second-color);
	}
	#dc-nav-left .wiki img {
		filter: none;
	}*/
	
	#dc-nav-left .patreon:hover,
	#dc-nav-left .patreon:focus,
	#dc-nav-left .patreon.current {
		color: #f96854;
	}
	
	#dc-nav-left .discord:hover,
	#dc-nav-left .discord:focus,
	#dc-nav-left .discord.current {
		color: #7289da;
	}
	
	.dc_nav_icon:hover,
	.dc_nav_icon:focus,
	.dc_nav_icon.current {
		background: white !important;
		transition: all 0.4s ease-in-out !important;
	}
	
	.dc_nav_icon:hover img,
	.dc_nav_icon:focus img,
	.dc_nav_icon.current img {
		-webkit-filter: brightness(100%) invert(0);
		filter: brightness(100%) invert(0);
	}
	
	#dc-nav-left .youtube:hover,
	#dc-nav-left .youtube:focus,
	#dc-nav-left .youtube.current {
		color: #c4302b;
	}
	
	#dc-nav-left .twitch:hover,
	#dc-nav-left .twitch:focus,
	#dc-nav-left .twitch.current {
		color: #6441a5;
	}
	
	#dc-nav-left .twitter:hover,
	#dc-nav-left .twitter:focus,
	#dc-nav-left .twitter.current {
		color: #00aced;
	}

}

@media only screen and (max-width: 640px) {	
	.dc_nav_icon {
		display: none !important;
	}
}
	
	.dogcraft_statusBar {
		height: 30px;
		background: black;
		background: rgba(0, 0, 0, 0.95);
		opacity: 0.9;
		width: 100%;
		position: absolute;
		transform: translateY(80px);
	}
	
	.rootpage-Rules .top-bar,
	.rootpage-Help_Resources .top-bar {
		display:none;
	}
	
/* ===Help page custom skin=== */
@media only screen and (min-width: 641px) {
	body.rootpage-Rules,
	body.rootpage-Help_Resources {
		background: #f1f1f1;
		background-image: url('https://dogcraft.net/img/bg/17391Spawn.png');
		background-attachment: fixed;
		background-size: cover;
	}
	
	.rootpage-Rules #p-cactions,
	.rootpage-Help_Resources #p-cactions {
		border: 5px white solid;
		border-radius: 15px;
		background: rgb(241, 241, 241);
		background: rgba(241, 241, 241, 0.95);
		opacity: 0.95;
		margin-top: 8rem;
		margin-bottom: 8.6em;
		padding-top: 0.46875rem;
		padding-bottom: 0.9375rem;
		box-shadow: inset 0 0 0 5px var(--main-color);
	}
	
	.rootpage-Rules footer,
	.rootpage-Help_Resources footer {
		max-width: 100%;
		background: #f1f1f1;
		padding-top: 20px;
		box-shadow: inset 0 2px 2px -1px rgba(85, 85, 85, 0.25);
		position: absolute;
		bottom: 0;
	}
	
	.rootpage-Rules #page-content,
	.rootpage-Help_Resources #page-content {
		min-height: 100vh;
		position: relative;
		margin-top: 0;
	}
	
}

@media only screen and (max-width: 640px) {
	.rootpage-Rules #p-cactions,
	.rootpage-Help_Resources #p-cactions {
		margin-top: 5rem;	
	}
}

	#dogcraftNav a {
		padding: 0 10px;
		font-size: 20px;
		font-weight: 600;
		color: white;
		background: #8b0024;
		transition: background, color 0.2s ease-in-out;
	}
	
	
/* === TOPBAR RIGHT === */

	#dc-nav-right {
		display: flex;
		justify-content: flex-end;
		line-height: 80px;
	}
	
	.dc_nav_btns {
		display: flex;
		flex-basis: 0;
		-webkit-box-flex: 1;
		flex-grow: 1;
		width: 100%;
		justify-content: flex-end;
	}
	
	/* Btns */
	
	#navMapToggle a {
		display: none;
	}
	
	#dc-nav-right #navMapToggle:hover,
	#dc-nav-right #navMapToggle:focus,
	#dc-nav-right #navMapToggle.current {
		color: #41bd1e;
	}
	
	#dc-nav-right #dc_nav_lb:hover,
	#dc-nav-right #dc_nav_lb:focus,
	#dc-nav-right #dc_nav_lb.current {
		color: #fc8a00;
	}
	
	#dc-nav-right #dc_nav_settings:hover,
	#dc-nav-right #dc_nav_settings:focus,
	#dc-nav-right #dc_nav_settings.current {
		color: #1cceee;
	}
	
	#dc-nav-right #dc_nav_logout:hover,
	#dc-nav-right #dc_nav_logout:focus,
	#dc-nav-right #dc_nav_logout.current {
		color: var(--main-color);
	}
	
	#dc-nav-right #dc_nav_login:hover,
	#dc-nav-right #dc_nav_login:focus,
	#dc-nav-right #dc_nav_login.current {
		color: var(--main-color);
	}
	
	#dc-nav-right #dc_nav_register:hover,
	#dc-nav-right #dc_nav_register:focus,
	#dc-nav-right #dc_nav_register.current {
		color: var(--main-color);
	}
	
	#dc-nav-right #dc_nav_profile:hover,
	#dc-nav-right #dc_nav_profile:focus,
	#dc-nav-right #dc_nav_profile.current {
		background: none !important;
	}
	
	#dc_nav_profile img:hover {
		height: 50px !important;
		width: 50px !important;
		line-height: 50px !important;
	}
	
	#dc_nav_profile img {
		margin: -10px;
		filter: none;
		height: 40px;
		width: 40px;
		max-width: 60px;
		border-radius: 10px;
		line-height: 40px !important;
	}
	
	#navMapToggle i { /*TEMPORARY*/
		vertical-align: text-top;
	}
	
	#dc_nav_login,
	#dc_nav_register {
		width: unset !important;
		height: unset !important;
		padding: 5px 10px !important;
		border-radius: 10px !important;
	}
	
	#dc-nav-left .expanded,
	#dc-nav-right .expanded {
		display: flex;
		height: unset;
		width: unset;
		color: #41bd1e;
		background: white;
		transition: color, background 0.2s ease-in-out;
		border-radius: 10px;
		padding: 5px 10px;
		z-index: 5;
	}
	
	#dc-nav-left .expanded a,
	#dc-nav-right .expanded a {
		display: inline-flex;
		font-size: 16px;
		color: #41bd1e;
		background: unset;
		height: 100%;
		margin: 0;
		transition: all 0.4s ease-in-out;
	}
	
	#dc-nav-left .expanded i, 
	#dc-nav-right .expanded i { /*TEMPORARY*/
		padding-top: 13px;
	}
	
	.rootpage-Help-Resources #p-Go_to_Dogcraft,
	.rootpage-Rules #p-Go_to_Dogcraft {
		display: none!important;
	}