MediaWiki:Home.css

@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap); .home-wrap { display:flex; flex-wrap:nowrap; overflow:auto } .home-left-wrap { display:inline-block; flex:100 1 80% } .home-right-wrap { flex:1 1 300px; margin:0px 40px } .background-cover { justify-content:center; align-items:flex-end; overflow:hidden; height:400px; width:100%; border-radius:20px 20px 0px 0px } .background-cover img { object-fit:cover; object-position:center; width:100% } .mw-parser-output { overflow:hidden } .home-wrapper { max-width:1280px; padding:0px 40px; margin:-60px auto 0px auto } @keyframes flyUpwards { 0% { transform:translateY(0.5em); opacity:0 } 100% { transform:translateY(0); opacity:1 } } @keyframes flyLeftwards { 0% { transform:translateX(10%); opacity:0 } 100% { transform:translateX(0%); opacity:1 } } @keyframes slideUpwards { 0% { transform:translateY(300%) } 100% { transform:translateY(0) } } @keyframes peek { 0% { transform:translateY(100%) } 100% { transform:translateY(90%) } } .home-title { animation:1s cubic-bezier(.03,.66,.09,.99) 0s 1 forwards flyUpwards; font-family:'Montserrat',sans-serif; font-style:italic; font-size:36pt !important; font-weight:800 !important; line-height:105.4% !important; letter-spacing:7px; margin-bottom:0px !important } span.line { display:inline-block } .home-subtitle { opacity:0; animation:1s cubic-bezier(.03,.66,.09,.99) 0.3s 1 forwards flyUpwards; font-family:'Rubik',sans-serif; font-size:11pt !important; font-weight:900 !important; line-height:105.4% !important; letter-spacing:3px; margin:13px 0px !important } .home-navi-wrapper { margin:20px 0px; display:flex; justify-content:space-between; flex-wrap:wrap-reverse; flex-direction:row-reverse; gap:12px; overflow:hidden } .home-navi-button a { display:block; padding:8px 30px } .home-navi-button, .home-navi-button a { font:800 11pt 'Montserrat',sans-serif !important; letter-spacing:3px; color:white !important; transition:letter-spacing .2s ease } .home-navi-button { transform:translateY(300%); display:inline-block; flex-grow:1; width:30%; position:relative } padding:8px 30px; animation:1s cubic-bezier(.03,.66,.09,.99) 0.4s 1 forwards slideUpwards } animation:1s cubic-bezier(.03,.66,.09,.99) 0.5s 1 forwards slideUpwards } animation:1s cubic-bezier(.03,.66,.09,.99) 0.6s 1 forwards slideUpwards } .home-navi-button:hover > a, .home-gameplay-option:hover > a { letter-spacing:4px; text-decoration:none !important } .home-navi-button:hover { transform:translateY(-5%) } .home-navi-button:active > a, .home-gameplay-option:active > a { letter-spacing:4px; text-decoration:none !important } .home-gameplay-option-wrapper { display:flex; position:absolute; top:0; left:0; width:100%; transform:translateY(90%); animation:1s cubic-bezier(.03,.66,.09,.99) 1s 1 backwards peek; transition:transform 0.6s cubic-bezier(.03,.66,.09,.99) } .home-gameplay-option-wrapper a { opacity:0.6; transition:all 1s cubic-bezier(.03,.66,.09,.99) } overflow:hidden } transform:translateY(0%) } .home-gameplay-option { transition:all 1s cubic-bezier(.03,.66,.09,.99); flex:1 1 50% } .home-gameplay-option:hover { flex:2 1 55% } .home-gameplay-option:hover a { opacity:1; letter-spacing:4px; text-decoration:none } .home-contents { display:flex; flex-wrap:wrap; gap:12px } .home-left { animation:1s cubic-bezier(.03,.66,.09,.99) 0.8s 1 forwards flyUpwards; opacity:0; flex:2 0 60% } .home-right { animation:1s cubic-bezier(.03,.66,.09,.99) 0.8s 1 forwards flyLeftwards; opacity:0; flex:1 0 30%; min-width:260px } .home-widget-title { font:800 10pt 'Montserrat',sans-serif !important; letter-spacing:3px; display:block; margin-bottom:22px !important } .home-widget-title::after { content:''; display:block; position:absolute; background-color:var(--theme-page-text-color); margin-top:7px; width:50px; height:3px } background-color:#FF9543 } background-color:#FF4C55 } background-color:#343682 } flex:3 1 30%; min-width:240px } flex:4 1 40%; min-width:320px } flex:4 1 40%; min-width:320px } .home-widget, .home-widget-sidebar { margin-bottom:30px } .home-birthday-char { display:flex; align-items:center; margin-bottom:12px } .home-birthday-icon { flex-grow:0 } .home-birthday-text { margin-left:15px; line-height:1.4 } .home-birthday-name { font:700 13pt 'Rubik',sans-serif !important } .home-birthday-date { font:500 11pt 'Rubik',sans-serif !important } .home-widget ul, .home-widget-sidebar ul { list-style-type:none; margin:0 } .home-widget ul li, .home-widget-sidebar ul li, .home-birthday-char { transition:margin 1s cubic-bezier(.03,.66,.09,.99) } .home-widget ul li::before, .home-widget-sidebar ul li::before { content:'>'; font:700 14px 'Montserrat',sans-serif !important; margin-right:10px } .home-widget ul li:hover, .home-widget-sidebar ul li:hover, .home-birthday-char:hover { margin-left:5px } .home-widget ul li a, .home-widget-sidebar ul li a { text-decoration:none !important } .home-widget-wrapper, .home-right { display:flex; flex-wrap:wrap } .home-widget-wrapper > div, .home-right > div { flex:1 1 30%; min-width:260px } .db-banner { transform:none !important } div[style="border-left-color:#e33825;background-color:#FFFFFF"] { visibility:hidden; height:0px !important; display:none } @keyframes coverFly { 0% { transform:scale(2.0); opacity:0 } 100% { transform:scale(1); opacity:1 } } .background-cover { position:relative } .background-cover img:not(.background-cover-default) { animation:1s cubic-bezier(.03,.66,.09,.99) 0s 1 forwards coverFly } @keyframes starsFly { 0% { transform:scale(1.4); opacity:0; filter:contrast(0%) brightness(100) blur(50px) } 100% { transform:scale(1); opacity:1; filter:contrast(100%) brightness(100%) blur(0px) } } .background-cover img:not(.background-cover-default) + div { animation:0.6s ease 0.6s 1 both starsFly; transform-origin:center; position:absolute; right: 40px; top: 40px; width: 30vw; max-width: 240px; height:550px; background-size:contain; background-repeat:no-repeat; background-position:top center } .background-cover-4 + div { background-image:url(https://static.wikia.nocookie.net/ensemble-stars/images/b/b5/Home_gacha_4.png/revision/latest?cb=20210615173426) } .background-cover-5 + div { background-image:url(https://static.wikia.nocookie.net/ensemble-stars/images/d/d1/Home_gacha_5.png/revision/latest?cb=20210615173429) } @keyframes coverFly { 0% { transform:scale(2.0); opacity:0 } 100% { transform:scale(1); opacity:1 } } .background-cover { position:relative } .background-cover img:not(.background-cover-default) { animation:1s cubic-bezier(.03,.66,.09,.99) 0s 1 forwards coverFly } @keyframes starsFly { 0% { transform:scale(1.4); opacity:0; filter:contrast(0%) brightness(100) blur(50px) } 100% { transform:scale(1); opacity:1; filter:contrast(100%) brightness(100%) blur(0px) } } .background-cover img:not(.background-cover-default)+div { animation:0.6s ease 0.6s 1 both starsFly; transform-origin:center; position:absolute; right:40px; top:40px; width:30vw; max-width:240px; height:550px; background-size:contain; background-repeat:no-repeat; background-position:top center } .background-cover-4+div { background-image:url(https://static.wikia.nocookie.net/ensemble-stars/images/b/b5/Home_gacha_4.png/revision/latest?cb=20210615173426) } .background-cover-5+div { background-image:url(https://static.wikia.nocookie.net/ensemble-stars/images/d/d1/Home_gacha_5.png/revision/latest?cb=20210615173429) }
 * 1) home-navi-button1 {
 * 1) home-navi-button2 {
 * 1) home-navi-button3 {
 * 1) home-navi-button1 {
 * 1) home-navi-button1:hover div {
 * 1) home-start span::after {
 * 1) home-featured span::after {
 * 1) home-contribute span::after {
 * 1) home-start {
 * 1) home-featured {
 * 1) home-contribute {

/* github @jeaoq/enstars-wiki */