MediaWiki:Gadget-ShroomStyle.css: Difference between revisions

m
Updates for issue 189
m (Shroomthumbs)
m (Updates for issue 189)
Line 347: Line 347:
}
}


/* SPECIAL 189 */
.shroom189main {
--shroom-main: #6d72a0;
--shroom-main-text: #000;
--shroom-main-link: green;
--shroom-dark: #1c36b7;
--shroom-dark-text: #fff;
--shroom-bg: #e6f3f3;
--shroom-section-bg: #f4f8f8;
--shroom-section-text: #000;
--shroom-section-link: green;
--shroom-60: #a7d7d799;
--shroom-40: #a7d7d766;
--shroom-20: #a7d7d733;
/* Left banner: [[File:ShroomVerticalBannerLeft.png]] */
--shroom-banner-left: url(https://mario.wiki.gallery/images/e/e2/ShroomVerticalBannerLeft.png);
/* Right banner: [[File:ShroomVerticalBannerRight.png]] */
--shroom-banner-right: url(https://mario.wiki.gallery/images/8/8b/ShroomVerticalBannerRight.png);
}
.shroom189staff {
--shroom-main: #a6d1e4;
--shroom-main-text: #fff;
--shroom-main-link: #fff;
--shroom-dark: #183f72;
--shroom-dark-text: #fff;
--shroom-bg: #002353;
--shroom-section-bg: #93b0dd;
--shroom-section-text: #000;
--shroom-section-link: #00f;
--shroom-60: #6163aa99;
--shroom-40: #6163aa66;
--shroom-20: #6163aa33;
}


/* AWARDS */
/* AWARDS */
Line 589: Line 623:


.shroombg.shroombanner {
.shroombg.shroombanner {
padding-left: 45px;
padding-left: calc(41px + .3em);
padding-right: 45px;
padding-right: calc(41px + .3em);
position: relative;
position: relative;
}
}
Line 1,122: Line 1,156:
padding: 0 !important;
padding: 0 !important;
width: min-content !important;
width: min-content !important;
position: relative;
}
}


Line 3,053: Line 3,088:
}
}


/* mask: [[File:Shroom183ink.png]] */
.shroom183ocean::before {
.shroom183ocean::before {
content: '';
content: '';
Line 3,154: Line 3,190:
}
}


/* <h4> Responsive images </h4> */
/* <h4> 'Shroom 189 theme </h4> */
.img-responsive {
max-width: 100%;
height: auto;
}


/*
/* TOCs */
* Issue banner
.toc-189-header {
*/
margin: .666em;
 
text-align: center;
.shroomissuebanner {
background: #0005 padding-box;
border: var(--shroom-main) solid;
color: #fff;
font-weight: bold;
font-size: 1.5em;
line-height: 1;
padding: .5em;
border: solid #0003;
border-width: 2px 0;
border-width: 2px 0;
clear: both;
clip-path: polygon(0 0, .5em 100%, calc(100% - .5em) 100%, 100% 0);
margin: 1em auto;
padding: 4px 0;
min-width: 80%;
max-width: max-content;
display: flex;
align-items: center;
gap: .5em;
}
}


.shroomissuebanner > div {
.toc-189-container {
flex: 1;
background: #fff9 padding-box;
}
margin: 1em -.3em;
 
border: solid #fff4;
.shroomissuebanner .issueno {
border-width: .2em 0;
text-align: left;
padding: 1em 2em;
font-weight: bold;
display: flex;
}
flex-wrap: wrap;
 
justify-content: center;
.shroomissuebanner .issuedate {
gap: 1em
text-align: center;
}
font-weight: bold;
 
}
.toc-189-container .icon {
 
padding-top: 128px;
.shroomissuebanner .issueabout {
position: relative;
text-align: right;
display: flex;
}
}
 
 
@media (max-width: 480px) {
.toc-189-container .icon.cup {
.shroomissuebanner > div {
width: 13em;
flex: auto;
filter: drop-shadow(0px 1px 2px #0005);
}
}
 
 
.shroomissuebanner .issuedate {
.toc-189-container .icon.course {
text-align: right;
width: 15em;
}
}
 
 
.shroomissuebanner .issueabout {
.toc-189-container .icon a {
display: none
position: absolute;
}
inset: 0;
}
z-index: 1;
 
}
/*
 
  * Table of contents
.toc-189-container .icon a img {
  */
position: absolute;
 
left: 50%;
.shroom-toc {
transform: translateX(-50%);
text-align: center;
transition: transform .2s;
line-height: 1.5;
}
margin: 1em;
 
}
.toc-189-container .icon .icon-description {
 
text-align: center;
.shroom-toc-header {
display: flex;
color: var(--shroom-main-text);
}
background: var(--shroom-main);
 
border-radius: .8rem;
.toc-189-container .icon.cup .icon-description {
transition: background .2s;
padding: 0 .5em;
background: #fff;
align-items: center;
clip-path: polygon(8px 0, 0 8px, 0 calc(100% - 8px), 8px 100%, calc(100% - 8px) 100%, 100% calc(100% - 8px), 100% 8px, calc(100% - 8px) 0);
}
 
.toc-189-container .icon.course .icon-description {
transition: color .2s;
padding: .25em .5em 0;
text-shadow: 0 0 8px #fff, 0 0 5px #fff, 0 0 3px #fff, 0 0 1px #fff;
}
 
.toc-189-container .icon.cup a:hover img, .toc-189-container .icon.cup a:focus img {
transform: translateX(-50%) rotate(3deg) scale(1.1);
}
 
.toc-189-container .icon.cup a:hover ~ .icon-description, .toc-189-container .icon.cup a:focus ~ .icon-description {
background: #efe000;
}
 
.toc-189-container .icon.course a:hover img, .toc-189-container .icon.course a:focus img {
transform: translateX(-50%) scale(1.05);
}
 
.toc-189-container .icon.course a:hover ~ .icon-description, .toc-189-container .icon.course a:focus ~ .icon-description {
color: var(--shroom-dark);
}
 
/* Main: [[File:Shroom189main.png]] */
.shroombg.shroom189main.shroom189main {
background: #10a6ed;
background-image: url(https://mario.wiki.gallery/images/9/96/Shroom189main.png),
linear-gradient(to top right, #1c36b700, #10a6ed88 40%, #03cdd8bb),
url(https://mario.wiki.gallery/images/9/90/Shroom189sparkles.png),
linear-gradient(to top right, #1c36b7, #10a6ed 40%, #03cdd8);
}
 
.shroom189main .shroomfooter {
text-shadow: 0 0 4px #000b;
color: #fff9;
--shroom-dark: #fff9;
--shroom-main-link: #fff;
}
 
.shroomnav-winter.shroomnav-winter a {
color: blue;
}
 
.shroomnav-winter.shroomnav-winter a:visited {
color: purple;
}
 
.shroomnav-winter.shroomnav-winter a:active {
color: orange;
}
 
/* Staff: [[File:Shroom189dd.png]] */
.shroombg.shroom189staff.shroom189staff {
background-image: url(https://mario.wiki.gallery/images/2/23/Shroom189dd.png);
}
 
/* Fake News: [[File:Shroom189fn.png]] */
.shroombg.shroom189fn.shroom189fn {
background-image: url(https://mario.wiki.gallery/images/9/9f/Shroom189fn.png);
}
 
/* Fun Stuff: [[File:Shroom189fs.png]] */
.shroombg.shroom189fs.shroom189fs {
background-image: url(https://mario.wiki.gallery/images/8/85/Shroom189fs.png);
}
 
/* Palette Swap: [[File:Shroom189ps.png]] */
.shroombg.shroom189ps.shroom189ps {
background-image: url(https://mario.wiki.gallery/images/f/fa/Shroom189ps.png);
}
 
/* Pipe Plaza: [[File:Shroom189pp.png]] */
.shroombg.shroom189pp.shroom189pp {
background-image: url(https://mario.wiki.gallery/images/f/f1/Shroom189pp.png);
}
 
/* Critic Corner: [[File:Shroom189cc.png]] */
.shroombg.shroom189cc.shroom189cc {
background-image: url(https://mario.wiki.gallery/images/7/7c/Shroom189cc.png);
}
 
/* Strategy Wing: [[File:Shroom189sw.png]] */
.shroombg.shroom189sw.shroom189sw {
background-image: url(https://mario.wiki.gallery/images/2/26/Shroom189sw.png);
}
 
/* Scavenger */
.shroom-scav {
position: relative;
max-width: 100%;
}
 
.shroom-scav.left {
float: left;
}
 
.shroom-scav.right {
float: right;
}
 
.shroom-scav.center {
margin: auto;
width: max-content;
}
 
.shroom-scav span.plainlinks {
position: absolute;
pointer-events: none;
}
 
.shroom-scav span.plainlinks a {
pointer-events: all;
}
 
.shroom-scav span.plainlinks img {
max-width: 100%;
}
 
.shroom-scav-layer {
z-index: 1;
position: relative;
}
 
/* <h4> Responsive images </h4> */
.img-responsive {
max-width: 100%;
height: auto;
}
 
/*
* Issue banner
*/
 
.shroomissuebanner {
border: var(--shroom-main) solid;
border-width: 2px 0;
clear: both;
margin: 1em auto;
padding: 4px 0;
min-width: 80%;
max-width: max-content;
display: flex;
align-items: center;
gap: .5em;
}
 
.shroomissuebanner > div {
flex: 1;
}
 
.shroomissuebanner .issueno {
text-align: left;
font-weight: bold;
}
 
.shroomissuebanner .issuedate {
text-align: center;
font-weight: bold;
}
 
.shroomissuebanner .issueabout {
text-align: right;
}
 
@media (max-width: 480px) {
.shroomissuebanner > div {
flex: auto;
}
 
.shroomissuebanner .issuedate {
text-align: right;
}
 
.shroomissuebanner .issueabout {
display: none
}
}
 
/*
  * Table of contents
  */
 
.shroom-toc {
text-align: center;
line-height: 1.5;
margin: 1em;
}
 
.shroom-toc-header {
color: var(--shroom-main-text);
background: var(--shroom-main);
border-radius: .8rem;
font-size: 1.1em;
font-size: 1.1em;
font-weight: bold;
font-weight: bold;
Line 3,336: Line 3,564:
--shroom-dark: #5a85b3;
--shroom-dark: #5a85b3;
--shroom-dark-text: #fff;
--shroom-dark-text: #fff;
}
/* MediaWiki TOCSs */
.shroombg .toc {
background: var(--shroom-section-bg);
color: var(--shroom-section-text);
border: none;
border-radius: .8rem;
}
.shroombg .toc a {
color: var(--shroom-section-link);
}
}