MediaWiki
Gadget-helppage.css
From Dogcraft Wiki
mNo edit summary |
No edit summary |
||
(45 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
@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-Rules h1#firstHeading, | ||
.rootpage-Help_Resources h1#firstHeading, | .rootpage-Help_Resources h1#firstHeading, | ||
.rootpage-Help_Resources #tagline { | .rootpage-Help_Resources #tagline { | ||
text-align: center; | 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; | |||
} | } | ||
Line 15: | Line 41: | ||
.rootpage-Help_Resources #siteNotice { | .rootpage-Help_Resources #siteNotice { | ||
padding-top: 10px !important; | 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; | |||
} | } | ||
Line 22: | Line 58: | ||
.rootpage-Help_Resources #navwrapper { | .rootpage-Help_Resources #navwrapper { | ||
background: none; | background: none; | ||
position: absolute; | |||
} | } | ||
Line 51: | Line 88: | ||
} | } | ||
#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: | 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) { | @media only screen and (min-width: 641px) { | ||
. | .dc_nav_icon { | ||
background: #8b0024; | background: #8b0024; | ||
margin: auto 5px; | margin: auto 5px; | ||
padding: 5px; | padding: 5px; | ||
line-height: | line-height: 50px; | ||
height: | height: 50px; | ||
width: | width: 50px; | ||
border-radius: 10px; | border-radius: 10px; | ||
text-align: center; | text-align: center; | ||
Line 90: | Line 133: | ||
} | } | ||
.dc_nav_icon img { | |||
height: 30px; | height: 30px; | ||
margin: auto 5px; | margin: auto 5px; | ||
Line 99: | Line 139: | ||
-webkit-filter: brightness(0) invert(1); | -webkit-filter: brightness(0) invert(1); | ||
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; | |||
}*/ | }*/ | ||
Line 112: | Line 166: | ||
#dc-nav-left .patreon:focus, | #dc-nav-left .patreon:focus, | ||
#dc-nav-left .patreon.current { | #dc-nav-left .patreon.current { | ||
color: #f96854; | |||
} | } | ||
Line 119: | Line 172: | ||
#dc-nav-left .discord:focus, | #dc-nav-left .discord:focus, | ||
#dc-nav-left .discord.current { | #dc-nav-left .discord.current { | ||
background: white; | color: #7289da; | ||
transition: all 0.4s ease-in-out; | } | ||
.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); | |||
} | } | ||
Line 127: | Line 193: | ||
#dc-nav-left .youtube.current { | #dc-nav-left .youtube.current { | ||
color: #c4302b; | color: #c4302b; | ||
} | } | ||
Line 135: | Line 199: | ||
#dc-nav-left .twitch.current { | #dc-nav-left .twitch.current { | ||
color: #6441a5; | color: #6441a5; | ||
} | } | ||
Line 143: | Line 205: | ||
#dc-nav-left .twitter.current { | #dc-nav-left .twitter.current { | ||
color: #00aced; | color: #00aced; | ||
} | } | ||
} | } | ||
@media only screen and (max-width: 640px) { | @media only screen and (max-width: 640px) { | ||
.dc_nav_icon { | |||
. | display: none !important; | ||
display:none !important; | |||
} | } | ||
} | } | ||
Line 261: | Line 220: | ||
background: rgba(0, 0, 0, 0.95); | background: rgba(0, 0, 0, 0.95); | ||
opacity: 0.9; | opacity: 0.9; | ||
width: 100%; | |||
position: absolute; | |||
transform: translateY(80px); | |||
} | } | ||
Line 319: | Line 281: | ||
#dogcraftNav a { | #dogcraftNav a { | ||
padding: 0 10px; | padding: 0 10px; | ||
font-size: 20px; | font-size: 20px; | ||
Line 328: | Line 287: | ||
background: #8b0024; | background: #8b0024; | ||
transition: background, color 0.2s ease-in-out; | 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; | |||
} | } |
Latest revision as of 21:10, 31 August 2021
@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;
}