MediaWiki:Bar.css

/* MP - Vars */ .MainPageElement, .MainPageTable { --mp-gray-element: #6B6B6B; --mp-gray-element--hover: #313131; --mp-gray-color: #FFFFFF; --mp-black-element: #313131; --mp-black-element--hover: #282828; --mp-black-color: #FFFFFF; }

.theme-fandomdesktop-dark .MainPageElement, .theme-fandomdesktop-dark .MainPageTable { --mp-gray-element: #383838; --mp-gray-element--hover: #0A0A0A; --mp-black-element: #EFEFEF; --mp-black-element--hover: #BDBDBD; --mp-black-color: #000000; }

/* MainPageTable */ .MainPageTable { width: 100%; height: 59px;/* DO NOT MODIFY W/O UPDATING SHUTTER ANIMATIONS */ background-color: var(--mp-black-element, #313131); text-align: center; border-radius: 0 0 5px 5px; border-spacing: 0; margin: 0 auto 15px; }

.MainPageTable td { position: relative; color: var(--mp-black-color, #FFFFFF); padding-bottom: 6px; /* DO NOT MODIFY W/O UPDATING a:before HEIGHT*/ }

.MainPageTable td div span { width: 30px; height: 30px; }

.MainPageTable td[class^="mp-"] div span { content: ""; display: block; -webkit-mask-size: 30px 30px; mask-size: 30px 30px; margin: 0 auto; }

.MainPageTable td[class^="mp-"]:hover div span { background-color: var(--mp-black-color, #FFFFFF); }

.MainPageTable td > div > a { color: var(--mp-black-color, #FFFFFF); }

.MainPageTable td > div > a:hover { text-decoration: none; }

.MainPageTable td > div > a:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; width: 100%; height: calc(100% + 6px); /* DO NOT MODIFY W/O UPDATING TD PADDING-BOTTOM */ }

/* MainPageTable - Trim/Animations */ .MainPageTable td[class^="mp-"] > div { position: absolute; top: 1px; right: 0; left: 0; z-index: 2; }

.MainPageTable td[class^="mp-"]:before, .MainPageTable td[class^="mp-"]:after { content: ""; display: block; position: absolute; top: 0; right: 1px; bottom: 59px; left: 1px; z-index: 1; background-color: #919191; }

.MainPageTable td[class^="mp-"]:after { top: auto; bottom: 0; height: 5px; }

.MainPageTable td[class^="mp-"]:first-child:before, .MainPageTable td[class^="mp-"]:first-child:after { left: 0; border-radius: 0 0 0 5px; }

.MainPageTable td[class^="mp-"]:last-child:before, .MainPageTable td[class^="mp-"]:last-child:after { right: 0; border-radius: 0 0 5px 0; }

/* MainPageTable - Call, configure, & deploy animation */ .MainPageTable td[class^="mp-"]:before { animation-name: shutter-reverse; animation-duration: 0.15s; animation-timing-function: linear; }

.MainPageTable td[class^="mp-"]:hover:before { animation-name: shutter; bottom: 0; }

/* MainPageTable - Define animations */ @keyframes shutter { 0% {       bottom: auto; }

10% {       bottom: calc(9/10 * 59px); }

20% {       bottom: calc(8/10 * 59px); }

30% {       bottom: calc(7/10 * 59px); }

40% {       bottom: calc(6/10 * 59px); }

50% {       bottom: calc(5/10 * 59px); }

60% {       bottom: calc(4/10 * 59px); }

70% {       bottom: calc(3/10 * 59px); }

80% {       bottom: calc(2/10 * 59px); }

90% {       bottom: calc(1/10 * 59px); }

100% {       bottom: 0; } }

@keyframes shutter-reverse { 0% {       bottom: 0; }

10% {       bottom: calc(1/10 * 59px); }

20% {       bottom: calc(2/10 * 59px); }

30% {       bottom: calc(3/10 * 59px); }

40% {       bottom: calc(4/10 * 59px); }

50% {       bottom: calc(5/10 * 59px); }

60% {       bottom: calc(6/10 * 59px); }

70% {       bottom: calc(7/10 * 59px); }

80% {       bottom: calc(8/10 * 59px); }

90% {       bottom: calc(9/10 * 59px); }

100% {       bottom: auto; } }

/* MainPageElement - Default */ .MainPageElement { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-perspective: 1000; display: flex; flex-direction: column; position: relative; width: 100%; overflow: hidden; border-radius: 5px; margin-bottom: 15px; }

.WikiaArticle .MainPageElement .mp-banner { margin-right: 0; margin-left: 0; }

/* MainPageElement - mp-banner */ .MainPageElement .mp-banner { order: 1; background-color: #1B53BA; padding: 20px; border-radius: 0 0 5px 5px; transition: background-color 0.1s linear; }

.MainPageElement:hover .mp-banner { background-color: #1847D7; }

.MainPageElement .mp-banner h2 { font-weight: bold; font-size: 22px; font-family: Rubik, Arial, sans-serif; line-height: 27px; text-transform: uppercase; border: none; margin-top: 0; }

.MainPageElement .mp-banner .caption { margin-bottom: 0; }

.MainPageElement .mp-banner .caption, .MainPageElement .mp-banner h2 { color: #FFFFFF; }

.MainPageElement.items .mp-banner .caption { display: flex; flex-wrap: wrap; justify-content: space-evenly; }

/* MainPageElement - mp-images */ .MainPageElement .mp-images { border-radius: 5px; }

.MainPageElement .mp-banner + .mp-images { border-radius: 5px 5px 0 0; }

.MainPageElement .mp-images > img { width: 100%; height: auto; }

/* MainPageElement - mp-link */ .MainPageElement .mp-link a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.MainPageElement .mp-link a img { width: 100%; height: 100%; visibility: hidden; font-size: 0; color: transparent; }

/* MainPageElement - Container */ .MainPageElement-container { display: flex; align-items: flex-start; }

.MainPageElement-container .MainPageElement .mp-images > img { -o-object-fit: cover; object-fit: cover; max-height: 190px;/* tweak as desired */ margin-bottom: -1px; }

.MainPageElement-container .MainPageElement:not(:first-child) { margin-left: 15px; }

/* MainPageElement - Prepare for animation clipping */ .mainpage #mw-content-text { padding-top: 5px; }

/* MainPageElement - Call, configure, & deploy animation */ .MainPageElement:hover { animation-name: hop; animation-duration: 0.2s; animation-timing-function: linear; }

/* MainPageElement - Define animation */ @keyframes hop { 50% {       margin-top: -5px; margin-bottom: 20px; } }

/** MAIN PAGE ELEMENT/TABLE ACCENT & ANIMATION COLORS **/

/* MP Color - Gray */ .MainPageTable .mp-gray div .mp-home, .MainPageTable .mp-gray div .mp-novel, .MainPageTable .mp-gray div .mp-manga, .MainPageTable .mp-gray div .mp-location, .MainPageTable .mp-gray div .mp-char, .MainPageTable .mp-gray div .mp-site, .MainPageTable .mp-gray div .mp-admin, .MainPageTable td.mp-gray:before, .MainPageTable td.mp-gray:after { background-color: #919191; }

.MainPageElement.mp-gray .mp-banner { background-color: var(--mp-gray-element, #6B6B6B); }

.MainPageElement.mp-gray .caption .embeddable-discussions-threads { border-color: var(--mp-gray-element, #6B6B6B); }

.MainPageElement.mp-gray:hover .mp-banner { background-color: var(--mp-gray-element--hover, #313131); }

.MainPageElement.mp-gray .mp-banner a { color: #E6BC2F; }

.MainPageElement.mp-gray .mp-banner .caption, .MainPageElement.mp-gray .mp-banner > h2 { color: var(--mp-gray-color); }

/* MP Color - Red */ .MainPageTable .mp-red div .mp-home, .MainPageTable .mp-red div .mp-novel, .MainPageTable .mp-red div .mp-manga, .MainPageTable .mp-red div .mp-location, .MainPageTable .mp-red div .mp-char, .MainPageTable .mp-red div .mp-site, .MainPageTable .mp-red div .mp-admin, .MainPageElement.mp-red .mp-banner, .MainPageTable td.mp-red:before, .MainPageTable td.mp-red:after { background-color: #E3350D; }

.MainPageElement.mp-red .caption .embeddable-discussions-threads { border-color: #E3350D; }

.MainPageElement.mp-red:hover .mp-banner { background-color: #C72F0C; }

/* MP Color - Orange */ .MainPageTable .mp-orange div .mp-home, .MainPageTable .mp-orange div .mp-novel, .MainPageTable .mp-orange div .mp-manga, .MainPageTable .mp-orange div .mp-location, .MainPageTable .mp-orange div .mp-char, .MainPageTable .mp-orange div .mp-site, .MainPageTable .mp-orange div .mp-admin, .MainPageElement.mp-orange .mp-banner, .MainPageTable td.mp-orange:before, .MainPageTable td.mp-orange:after { background-color: #EE6B2F; }

.MainPageElement.mp-orange .caption .embeddable-discussions-threads { border-color: #EE6B2F; }

.MainPageElement.mp-orange:hover .mp-banner { background-color: #CF5C27; }

/* MP Color - Mustard */ .MainPageTable .mp-mustard div .mp-home, .MainPageTable .mp-mustard div .mp-novel, .MainPageTable .mp-mustard div .mp-manga, .MainPageTable .mp-mustard div .mp-location, .MainPageTable .mp-mustard div .mp-char, .MainPageTable .mp-mustard div .mp-site, .MainPageTable .mp-mustard div .mp-admin, .MainPageElement.mp-mustard .mp-banner, .MainPageTable td.mp-mustard:before, .MainPageTable td.mp-mustard:after { background-color: #E6BC2F; }

.MainPageElement.mp-mustard .caption .embeddable-discussions-threads { border-color: #E6BC2F; }

.MainPageElement.mp-mustard:hover .mp-banner { background-color: #DAA31C; }

/* MP Color - Green */ .MainPageTable .mp-green div .mp-home, .MainPageTable .mp-green div .mp-novel, .MainPageTable .mp-green div .mp-manga, .MainPageTable .mp-green div .mp-location, .MainPageTable .mp-green div .mp-char, .MainPageTable .mp-green div .mp-site, .MainPageTable .mp-green div .mp-admin, .MainPageElement.mp-green .mp-banner, .MainPageTable td.mp-green:before, .MainPageTable td.mp-green:after { background-color: #4DAD5B; }

.MainPageElement.mp-green .caption .embeddable-discussions-threads { border-color: #4DAD5B; }

.MainPageElement.mp-green:hover .mp-banner { background-color: #369143; }

/* MP Color - Teal */ .MainPageTable .mp-teal div .mp-home, .MainPageTable .mp-teal div .mp-novel, .MainPageTable .mp-teal div .mp-manga, .MainPageTable .mp-teal div .mp-location, .MainPageTable .mp-teal div .mp-char, .MainPageTable .mp-teal div .mp-site, .MainPageTable .mp-teal div .mp-admin, .MainPageElement.mp-teal .mp-banner, .MainPageTable td.mp-teal:before, .MainPageTable td.mp-teal:after { background-color: #30A7D7; }

.MainPageElement.mp-teal .caption .embeddable-discussions-threads { border-color: #30A7D7; }

.MainPageElement.mp-teal:hover .mp-banner { background-color: #1B82B1; }

/* MainPageElement - Blue */ .MainPageTable .mp-blue div .mp-home, .MainPageTable .mp-blue div .mp-novel, .MainPageTable .mp-blue div .mp-manga, .MainPageTable .mp-blue div .mp-location, .MainPageTable .mp-blue div .mp-char, .MainPageTable .mp-blue div .mp-site, .MainPageTable .mp-blue div .mp-admin, .MainPageElement.mp-blue .mp-banner, .MainPageTable td.mp-blue:before, .MainPageTable td.mp-blue:after { background-color: #1B53BA; }

.MainPageElement.mp-blue .caption .embeddable-discussions-threads { border-color: #1B53BA; }

.MainPageElement.mp-blue:hover .mp-banner { background-color: #1847D7; }

/* MainPageElement - Black */ .MainPageTable .mp-black div .mp-home, .MainPageTable .mp-black div .mp-novel, .MainPageTable .mp-black div .mp-manga, .MainPageTable .mp-black div .mp-location, .MainPageTable .mp-black div .mp-char, .MainPageTable .mp-black div .mp-site, .MainPageTable .mp-black div .mp-admin, .MainPageElement.mp-black .mp-banner, .MainPageTable td.mp-black:before, .MainPageTable td.mp-black:after { background-color: var(--mp-black-element, #313131); }

.MainPageElement.mp-black .caption .embeddable-discussions-threads { border-color: var(--mp-black-element, #313131); }

.MainPageElement.mp-black:hover .mp-banner { background-color: var(--mp-black-element--hover, #282828); }

.MainPageElement.mp-black .mp-banner .caption, .MainPageElement.mp-black .mp-banner > h2 { color: var(--mp-black-color); }

/* MainPageElement - Purple */ .MainPageTable .mp-purple div .mp-home, .MainPageTable .mp-purple div .mp-novel, .MainPageTable .mp-purple div .mp-manga, .MainPageTable .mp-purple div .mp-location, .MainPageTable .mp-purple div .mp-char, .MainPageTable .mp-purple div .mp-site, .MainPageTable .mp-purple div .mp-admin, .MainPageElement.mp-purple .mp-banner, .MainPageTable td.mp-purple:before, .MainPageTable td.mp-purple:after { background-color: #933FA4; }

/* MP Color - LegendYellow */ .MainPageTable .mp-legendyellow div .mp-home, .MainPageTable .mp-legendyellow div .mp-novel, .MainPageTable .mp-legendyellow div .mp-manga, .MainPageTable .mp-legendyellow div .mp-location, .MainPageTable .mp-legendyellow div .mp-char, .MainPageTable .mp-legendyellow div .mp-site, .MainPageTable .mp-legendyellow div .mp-admin, .MainPageTable td.mp-legendyellow:before, .MainPageTable td.mp-legendyellow:after { background-color: #3D7DCA; }

/* MP Color - LegendBlue */ .MainPageTable .mp-legendblue div .mp-home, .MainPageTable .mp-legendblue div .mp-novel, .MainPageTable .mp-legendblue div .mp-manga, .MainPageTable .mp-legendblue div .mp-location, .MainPageTable .mp-legendblue div .mp-char, .MainPageTable .mp-legendblue div .mp-site, .MainPageTable .mp-legendblue div .mp-admin, .MainPageTable td.mp-legendblue:before, .MainPageTable td.mp-legendblue:after { background-color: #FFCB05; }

/* MP Color - LegendRed */ .MainPageTable .mp-legendred div .mp-home, .MainPageTable .mp-legendred div .mp-novel, .MainPageTable .mp-legendred div .mp-manga, .MainPageTable .mp-legendred div .mp-location, .MainPageTable .mp-legendred div .mp-char, .MainPageTable .mp-legendred div .mp-site, .MainPageTable .mp-legendred div .mp-admin, .MainPageTable td.mp-legendred:before, .MainPageTable td.mp-legendred:after { background-color: #ce2029; }

.MainPageElement.mp-purple .caption .embeddable-discussions-threads { border-color: #855AC9; }

.MainPageElement.mp-purple:hover .mp-banner { background-color: #773684; }

/** MAIN PAGE TABLE IMAGE MASKS **/ .MainPageTable td div .mp-home { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/2/25/Home.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/2/25/Home.svg"); }

.MainPageTable td div .mp-novel { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/3/39/Book.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/3/39/Book.svg"); }

.MainPageTable td div .mp-manga { -webkit-mask-image: url("https://static.wikia.nocookie.net/shijou-saikyou-daimaou/images/f/f0/Bar_Manga.svg"); mask-image: url("https://static.wikia.nocookie.net/shijou-saikyou-daimaou/images/f/f0/Bar_Manga.svg"); }

.MainPageTable td div .mp-location { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/d/d8/Location.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/d/d8/Location.svg"); }

.MainPageTable td div .mp-char { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/7/70/Characters.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/7/70/Characters.svg"); }

.MainPageTable td div .mp-site { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/4/43/Site.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/4/43/Site.svg"); }

.MainPageTable td div .mp-admin { -webkit-mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/5/5c/Adminstration.svg"); mask-image: url("https://static.wikia.nocookie.net/majin-ga-tsukurishi/images/5/5c/Adminstration.svg"); }

/* Discussions Module */ .MainPageElement .caption .embeddable-discussions-module { padding: 0; border: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-heading-container, .MainPageElement .caption .embeddable-discussions-module .embeddable-action-gap { display: none; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-threads { max-height: 500px; overflow: scroll; background: #FFFFFF; padding: 0; border-width: 2px; border-style: inset; border-radius: 5px; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-detail { background-color: transparent; padding: 10px 0 0 0; border-style: inset; border-color: inherit; border-top-width: 2px; border-right: 0; border-bottom: 0; border-left: 0; margin-bottom: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-detail:first-child { border-top-width: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-actions { justify-content: space-around; padding: 0 5px; border-top-width: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-side-spaced { padding: 0 10px; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-title { color: #000000; }

.MainPageElement .caption .embeddable-discussions-module .avatar-details { font-size: 12px; }

/* News Module */ .MainPageElement .mp-twins { display: flex; justify-content: space-evenly; }

.MainPageElement .mp-twin { display: flex; flex-direction: column; justify-content: space-between; }

.MainPageElement .mp-twin + .mp-twin { flex-shrink: 0; flex-basis: calc(50% - 16px); padding-left: 15px; border-left: 2px outset; margin-left: 15px; }

.MainPageElement .mp-twin:before { content: "This month"; display: block; font-weight: bold; font-size: medium; text-align: center; text-decoration: underline; }

.MainPageElement .mp-twin + .mp-twin:before { content: "Last month"; }

/* Breakpoints */ @media only screen and (max-width: 1023px) { .MainPageElement .mp-banner .caption > table { width: auto !important;/* override inline style */ }

.MainPageElement .mp-banner .caption .embeddable-discussions-module { width: auto; } }

/* FandomDesktop patches */ .mp-banner h2 span:empty { display: none; }