MediaWiki:Mainpage.css

/* CSS for the wiki's main page */ /* Variables */
 * root {

--mp-box-color: #1c56e6; --mp-box-text-color: white; --mp-box-link-color: #bff5fd; --mp-header-font: 'Byngve LT W01', serif; } .theme-fandomdesktop-light { --mp-header-color: #1c56e6; --mp-link-color: #1c56e6; } .theme-fandomdesktop-dark { --mp-header-color: #5cc3fe; --mp-link-color: #5cc3fe; }

/* Import custom fonts */ @font-face{ font-family:Matterhorn; font-weight:400; font-style:normal; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-b6b4f5da5330.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-eed88f0756d6.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-07d90ea407f5.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-bc3e22ea86d1.svg#Matterhorn") format("svg") } @font-face{ font-family:Matterhorn; font-weight:700; font-style:normal; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-2e320b8c4852.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-5c32f7bb9baf.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-9cab245c49d2.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-8d475c305607.svg#Matterhorn") format("svg") } @font-face { font-family: "Byngve LT W01"; src: url("https://static.wikia.nocookie.net/cartoons/images/d/d9/Byngve_LT_W01.otf/revision/latest?cb=20230109083311&format=original"); } @font-face { font-family: "Byngve LT W01"; src: url("https://static.wikia.nocookie.net/cartoons/images/1/1f/Byngve_LT_W01_Bold.otf/revision/latest?cb=20230109083316&format=original"); font-weight: bold; }

/* ==================================

Elements mainly affecting just the mainpage. ================================= */ /* Credits to Wookieepedia and Harry Potter Wiki, with some modifications */ /** General mainpage qualities **/ .mainpage h1.page-header__title { display:none } .mainpage-wrap { /* future use */ }

.mainpage-wrap a, .mainpage-wrap a:visited, .mainpage-wrap a:link, .mainpage-wrap a.new, .mainpage-wrap a.new:visited { color:var(--mp-link-color); } .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new:visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.link, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption { color:var(--mp-link-color); } .mainpage ficaption p.title, .mainpage .article-thumb figcaption { display:none; } .mainpage .article-thumb { margin-top:0px; }

.mainpage .wikia-gallery-item .lightbox-caption { line-height:150%; font-size:14px; background:transparent; } .mainpage-box-explore .gallery .description, .mainpage-box-upcoming .gallery .description, .mainpage-box-books .gallery .description, .mainpage-box-films .gallery .description { font-size:11px; color:#fff; letter-spacing:0; font-weight:normal; } .mainpage .wikia-gallery-item .lightbox-caption .subheader { text-transform:none; letter-spacing:1px; font-family:var(--mp-header-font); font-size:16px; font-weight:600; } /* Basic box qualities */ .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming, .mainpage-box-books, .mainpage-box-films { margin:30px auto 10px auto; width:670px; } .mainpage-box-about { padding:10px 0; }

/* Main declarations for all the left rail headers */ .mainpage-box-welcome .header { text-align:left; font-size:16px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: var(--mp-header-font); color:var(--mp-header-color); line-height:100%; }

.mainpage-box-explore .header, .mainpage-box-upcoming .header, .mainpage-box-books .header, .mainpage-box-films .header { text-align:left; font-size:18px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: var(--mp-header-font); color:var(--mp-header-color); line-height:100%; }

.mainpage-box-welcome .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; }

.mainpage-box-explore .top, .mainpage-box-upcoming .top, .mainpage-box-books .top, .mainpage-box-films .top { text-align:left; font-size:28px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; }

/* Exceptions for the left rail */

.mainpage-box-welcome .header { font-size:54px; margin-bottom:20px; } .mainpage-box-explore .header { margin-bottom:20px!important; } .mainpage-box-videos .header { margin-bottom:20px; } .mainpage-box-featured-videos .vid2 { margin-top:20px; } .mainpage-box-welcome { margin-top:0; }

/* Broad declarations for the right rail */ .mainpage-box-wiki { padding:10px 0; } .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-randomcharacter, .mainpage-box-randomposter, .mainpage-box-browse { margin:20px auto; padding:20px 0; }

.mainpage-box-wiki { background:var(--mp-box-color); color:var(--mp-box-text-color); font-size:14px; line-height:150%; text-align:left; padding:20px; margin: 20px auto; } .mainpage-box-wiki a, .mainpage-box-wiki a.visited, .mainpage-box-wiki a.link, .mainpage-box-wiki a.new { color:var(--mp-box-link-color)!important; text-decoration:underline!important;

} .mainpage-box-contribute a.visited, .mainpage-box-contribute a.link, .mainpage-box-contribute a.new { color:var(--mp-link-color); text-decoration:none; }

.mainpage-box-wiki .header, .mainpage-box-today .header, .mainpage-box-contribute .header, .mainpage-box-randomcharacter .header, .mainpage-box-randomposter .header { font-size:18px; text-align:left; line-height:130%; color:var(--mp-header-color); text-transform:uppercase; letter-spacing:0; font-weight:bold; font-family:var(--mp-header-font); }

.mainpage-box-wiki .top, .mainpage-box-today .top, .mainpage-box-contribute .top, .mainpage-box-randomcharacter .top, .mainpage-box-randomposter .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; }

.mainpage-box-wiki .top, .mainpage-box-wiki .header { color:#fff }

/* Portability */ @media (max-width: 1024px) { .mainpage-box-wiki, .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-randomcharacter, .mainpage-box-randomposter { display:inline-block; }    .mainpage-box-wiki .header { line-height:120%; } } /* Remove overlapping rails */ @media (min-width:1024px) and (max-width:1125px) { .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming { margin-left: 20px; margin-right: 20px; width: auto; } } /* Remove overlapping rails */ @media (min-width:1024px) and (max-width:1125px) { .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming { margin-left: 20px; margin-right: 20px; width: auto; } } @media (min-width:1126px) and (max-width:1280px) { .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming { margin-left: 30px; margin-right: 30px; width: auto; } }

img[alt="Mainpage Mickey Head.svg"] { background: var(--mp-header-color); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("/Special:FilePath/File:Mainpage_Mickey_Head.svg"); mask-image: url("/Special:FilePath/File:Mainpage_Mickey_Head.svg"); object-position: -1000px 1000px; }

/* ==========    ALBUMS ========== */

.book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 250px; }

.book-container { width: 250px; }

.book-container-comic { width: 150px; }

.book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; }

.book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; }

.book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); }

.book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); }

.book-cover { position: relative; z-index: 10; }

.book-cover img { height: auto; max-width: 100%; vertical-align: bottom; }

.book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); }

.book-spine-comic1 { background: #EF0070; }

.book-spine-comic2 { background: #2F29B0; }

.book-spine-comic3 { background: #7229B0; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #fff; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; }

.book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px; }

.book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #fff; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; }

.book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }