MediaWiki:MainPageSlider.css

/* New slider for the main page. Original made by Duckey at pl.witcher */ .mpb-slider { margin-bottom: 14px; background-color: #000810; border: 2px solid #000000; width: 100%; height: 450px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap font-family: "Rubik"; } .mpb-view { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: -ms-grid; display: grid; grid-template-areas: 'title title' 'links subcats' 'back back'; -ms-grid-rows: 45px 1fr 30px; grid-template-rows: 45px 1fr 30px; -ms-grid-columns: 200px 1fr; grid-template-columns: 200px 1fr; background-size: cover; overflow: hidden } .mpb-view:not(.mpb-main) { width: 0 } .mpb-view-title { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: title; font-size: 24px; text-shadow: 0 0 5px #000, 0 0 5px #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #000810f2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default } .mpb-view-back { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: back; background-color: #000810f2; font-size: 16px; text-shadow: 0 0 5px #000, 0 0 5px #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; -webkit-transition: background 0.25s ease-in-out; -o-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out } .mpb-view-back:hover { background-color: #000810bf } .mpb-subcat-links { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: links; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .mpb-subcat-link { background-color: #000810bf; padding: 10px 15px; font-size: 18px; text-shadow: 0 0 5px #000, 0 0 5px #000; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background 0.25s ease-in-out; -o-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out } .mpb-subcat-link:not(.mpb-active):hover { background-color: #00081080 } .mpb-subcat-link.mpb-active { background-color: #00081040 } .mpb-subcat-gutter { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #000810bf } .mpb-subcats { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: subcats; background-color: #00081040; overflow: hidden } .mpb-subcat { font-size: 16px; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; height: 100% } .mpb-subcat:not(.mpb-active) { display: none } .mpb-subcat > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100% } .mpb-subcat > ul > li:not(.mpb-nested) { max-height: 1.2em } .mpb-subcat ul > li > ul { padding: 0 1em; margin-left: 0.5em }

.mpb-item { background-size: 100% auto } .mpb-inner { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 5px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-size: 20px; text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000; background-color: #00081080; -webkit-transition: background 0.25s ease-in-out; -o-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .mpb-inner:hover { background-color: transparent } .mpb-view.mpb-main { grid-template-areas: 'main1 b1' 'main1 b2' 'main2 b3' 'main2 b4'; -ms-grid-rows: (1fr)[4]; grid-template-rows: repeat(4, 1fr); -ms-grid-columns: 450px 1fr; grid-template-columns: 450px 1fr } .mpb-item.mpb-main:nth-child(1) { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: main1; background-size: cover } .mpb-item.mpb-main:nth-child(2) { -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: main2; background-size: cover } .mpb-item.mpb-main .mpb-inner { font-size: 30px; padding: 10px } .mpb-view.mpb-main .mpb-item:nth-child(1), .mpb-view.mpb-manga { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: center 20% } .mpb-view.mpb-main .mpb-item:nth-child(2), .mpb-view.mpb-anime { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: center 70% } .mpb-view.mpb-main .mpb-item:nth-child(3), .mpb-view.mpb-characters { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: center 70% } .mpb-view.mpb-main .mpb-item:nth-child(4), .mpb-view.mpb-magic { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: left center } .mpb-view.mpb-main .mpb-item:nth-child(5), .mpb-view.mpb-locations { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: center 30% } .mpb-view.mpb-main .mpb-item:nth-child(6), .mpb-view.mpb-music { background-image: url('/Special:Filepath/Satsuki tea.png'); background-position: center 20% }