MediaWiki:Gadget-ShroomStyle.css: Difference between revisions

m
Upcoming 'Shroom release
No edit summary
m (Upcoming 'Shroom release)
Line 235: Line 235:
.specialorange, .shroomhalloween2015 {
.specialorange, .shroomhalloween2015 {
--shroom-main: #ec8c24;
--shroom-main: #ec8c24;
--shroom-bg: #f8d1a6;
--shroom-section-bg: #fff4e9;
}
}


Line 476: Line 478:
--shroom-t3: #6163aa66;
--shroom-t3: #6163aa66;
--shroom-t4: #6163aa33;
--shroom-t4: #6163aa33;
}
/* SPECIAL 195 */
.shroom195main {
--shroom-main: #ffb644;
--shroom-main-text: #fff;
--shroom-main-link: #eb9622;
--shroom-dark: #c30029;
--shroom-dark-text: #fff;
--shroom-bg: #5f403b;
--shroom-section-bg: #e1cbb1;
--shroom-section-text: #000;
--shroom-section-link: #00f;
--shroom-t1: #ffb644cc;
--shroom-t2: #ffb64499;
--shroom-t3: #ffb64466;
--shroom-t4: #ffb64433;
/* Left banner: [[File:ShroomVerticalBannerLeft_summer.png]] */
--shroom-banner-left: url(https://mario.wiki.gallery/images/a/ac/ShroomVerticalBannerLeft_summer.png);
/* Right banner: [[File:ShroomVerticalBannerRight_summer.png]] */
--shroom-banner-right: url(https://mario.wiki.gallery/images/f/fb/ShroomVerticalBannerRight_summer.png);
}
}


Line 2,010: Line 2,033:
/* <h4> Autumn theme </h4> */
/* <h4> Autumn theme </h4> */


.shroomfall {
.shroombg.shroomfall {
background-image: url(https://mario.wiki.gallery/images/f/f2/Shroomfall.png);
background-image: url(https://mario.wiki.gallery/images/f/f2/Shroomfall.png);
}
}
Line 2,016: Line 2,039:
/* <h4> Winter theme </h4> */
/* <h4> Winter theme </h4> */


.shroomwinter {
.shroombg.shroomwinter {
background-image: url(https://mario.wiki.gallery/images/3/35/Shroomwinter.png);
background-image: url(https://mario.wiki.gallery/images/3/35/Shroomwinter.png);
}
}
Line 2,022: Line 2,045:
/* <h4> Spring theme </h4> */
/* <h4> Spring theme </h4> */


.shroomspring {
.shroombg.shroomspring {
background-image: url(https://mario.wiki.gallery/images/3/37/Shroomspring.png);
background-image: url(https://mario.wiki.gallery/images/3/37/Shroomspring.png);
}
}
Line 2,028: Line 2,051:
/* <h4> Summer theme </h4> */
/* <h4> Summer theme </h4> */


.shroomsummer {
.shroombg.shroomsummer {
background-image: url(https://mario.wiki.gallery/images/8/8d/Shroomsummer.png);
background-image: url(https://mario.wiki.gallery/images/8/8d/Shroomsummer.png);
}
}
Line 3,279: Line 3,302:
.shroombg.shroom189sw.shroom189sw {
.shroombg.shroom189sw.shroom189sw {
background-image: url(https://mario.wiki.gallery/images/2/26/Shroom189sw.png);
background-image: url(https://mario.wiki.gallery/images/2/26/Shroom189sw.png);
}
/* <h4> 'Shroom 195 theme </h4> */
/* Main: [[File:Shroom195main.png]] */
.shroombg.shroom195main.shroom195main {
background-image: url(https://mario.wiki.gallery/images/6/6f/Shroom195main.png);
}
.shroom195main .shroom-toc .shroom-toc-header {
--shroom-main: #c30029;
--shroom-main-text: #fff;
}
.shroom195main .shroom-toc-item {
--shroom-main: #dc0029;
--shroom-main-text: #fff;
box-shadow: 0 0 5px var(--shroom-bg);
}
.shroom195main .shroom-toc-item-header {
--shroom-dark: #7e0010;
--shroom-dark-text: #fff;
}
.shroom195main .shroom-toc.specials .shroom-toc-item-header {
--shroom-dark: #353331;
}
.shroom195main .shroom-toc.specials .shroom-toc-item {
--shroom-main: #24221f;
}
.shroom195main .shroom-toc.specials .shroom-toc-item-title {
display: flex;
min-height: 3em;
justify-content: center;
align-items: center;
}
.shroom195main .shroom-toc-link a, .shroom195main .shroom-toc-link a:visited {
color: #fff;
}
.shroom195curtain-canvas {
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.client-nojs .shroom195curtain-placeholder {
display: none;
}
.shroom195curtain-placeholder {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: 6;
background: #800 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAKBAMAAAAEOBBCAAAALVBMVEWlAACHAACpAACWAACtAACdAACZAACgAACyAACNAACSAAC/AAC3AAC9AADDAACGDBgzAAAAgklEQVQY02OYmBgZnG5kEqJ0YMMOBm9uHiXXZuWypaJikmCZBKCMAlCGyZsXJiMMlVkClfEDyrg1K5cuR5ZxgMm0ocmUQGU4FKAygjCZIqDMDaiMGkhmIkgmzQAsswkuUw6WWYiQuVMElQlHyCwyKWqHyGg4YMoch8k4q4VPF5WaCACtDlmYROE6pQAAAABJRU5ErkJggg==) no-repeat 0 0;
background-size: 100% 100%;
filter: blur(5px);
transition: opacity 1s ease-in-out;
pointer-events: none;
}
.shroom195curtain-placeholder.exit {
opacity: 0;
}
.shroom195curtain-button {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
width: 12em;
padding: 1em;
background: #0003;
border-radius: 1em;
color: #fff;
border: 5px solid transparent;
font: normal 20px/1 Courgette, sans-serif;
cursor: pointer;
transition: opacity 1s, transform 1s ease-in, background .3s;
}
@media (min-width: 600px) {
.shroom195curtain-button {
padding: 2em;
width: 14em;
}
}
.shroom195curtain-button:hover, .shroom195curtain-button:focus {
background: #90F5;
}
.shroom195curtain-button:focus {
border-color: #90F;
}
.shroom195curtain-button.exit {
opacity: 0;
transform: translateX(-50%) translateY(-1em);
}
/* Mario silhouette:  [[File:Shroom195mario.png]]
* Bowser silhouette: [[File:Shroom195bowser.png]]
* Poochy silhouette: [[File:Shroom195poochy.png]]
* Chair silhouette : [[File:Shroom195chair.png]] */
.shroom195footer {
margin: 0 -.3em -.3em;
height: 200px;
background-image: url(https://mario.wiki.gallery/images/c/c3/Shroom195mario.png),
url(https://mario.wiki.gallery/images/5/58/Shroom195bowser.png),
url(https://mario.wiki.gallery/images/9/97/Shroom195poochy.png),
url(https://mario.wiki.gallery/images/5/52/Shroom195chair.png),
linear-gradient(0deg,var(--shroom-bg) 20%,transparent);
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;
background-position: right calc(5% + 350px) bottom 10px, right calc(5% + 122px) bottom, right calc(5% + 5px) bottom 22px, bottom right 5%, bottom right;
background-size: 112px, 210px, 90px, 112px;
position: relative;
z-index: 6;
}
/* Brick: [[File:Shroom195brick.png]] */
.shroombg.shroom195brick.shroom195brick {
background-image: url(https://mario.wiki.gallery/images/7/7a/Shroom195brick.png);
}
@media (max-width: 650px) {
.shroom195footer {
height: 125px;
background-position: right calc(5% + 175px) bottom 5px, right calc(5% + 61px) bottom, right calc(5% + 2px) bottom 11px, bottom right 5%, bottom right;
background-size: 56px, 105px, 45px, 56px;
}
}
}