User:U.ayaao.p/common.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,500;0,600;0,700;0,800;1,500;1,600;1,700;1,800&display=swap'); @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomIcons.css&only=styles";


 * root {

--vyw-accent-color: #f490b3; --vyw-headerbg-color: #f9f9f9; --vyw-headertext-color: #1e1e1e; --vyw-headerseparator-color: #f9c8d9; --vyw-boldtext-color: #f06a99; --vyw-regulartext-color: #f27da6; --vyw-graytext-color: #a9b0b8; --vyw-button-color: #fbdae5; --vyw-buttontext-color: #1e1e1e; --vyw-vtubercard-color: #ee588d; --vyw-vtubercardtext-color: #f9f9f9; --vyw-hyperlink-color: #f27da6; --vyw-searchbar-color: #fdecf2; --vyw-searchtext-color: #f06a99; --vyw-newstext-color: #232324; --vyw-logobg-color: #faf5f7; --vyw-separator-color: #f9c8d9; --vyw-metalinksbg-color: #f06a99; --vyw-statsboldtext-color: #f06a99; --vyw-buttonhover-color: #f27da6; --vyw-buttontexthover-color: #f9f9f9; } .theme-fandomdesktop-dark { --vyw-accent-color: #524cbd; --vyw-headerbg-color: #17173a; --vyw-headertext-color: #7f79cd; --vyw-headerseparator-color: #3d3e5a; --vyw-boldtext-color: #7f79cd; --vyw-regulartext-color: #6762a9; --vyw-graytext-color: #525091; --vyw-button-color: #363286; --vyw-buttontext-color: #e6e9ff; --vyw-vtubercard-color: #2c2768; --vyw-vtubercardtext-color: #e1e1e1; --vyw-hyperlink-color: #7d79cd; --vyw-searchbar-color: #2f2f4e; --vyw-searchtext-color: #9797a1; --vyw-newstext-color: #c6c4e9; --vyw-logobg-color: #232358; --vyw-separator-color: #3d3e5a; --vyw-metalinksbg-color: #363286; --vyw-statsboldtext-color: #c6c4e9; }

.vyw-mainpage-intro > img { height:250%; width:auto; position: absolute; top: -200px; left: -200px; } .vyw-mainpage-intro { margin:24px; box-shadow:0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); background-color: var(--vyw-headerbg-color); background-image: url(https://static.wikia.nocookie.net/virtualyoutuber/images/4/4f/Kizuna_AI_A.I.Games.png/revision/latest/scale-to-width-down/4371); background-size: 150%; background-position: -70%; background-repeat: no-repeat; } .vyw-mainpage-intro-text { padding:20px; font-family:'Raleway',sans-serif; background:linear-gradient(90deg,var(--vyw-headerbg-color) 40%,transparent); height:100%; font-weight: 600; font-size:24px; color: var(--vyw-regulartext-color); line-height: 30px; padding-right: 30%; } .vyw-mainpage-intro-welcome { font-family:'Raleway',sans-serif !important; margin-top:0 !important; font-weight: 700 !important; color: var(--vyw-boldtext-color); border: none !important; } .vyw-mainpage-intro-welcome img { height: 20px; width: auto; margin-top: -3px; margin-right: 10px; } .vyw-mainpage-intro-about { color: var(--vyw-boldtext-color); font-weight: 700; margin-bottom: 9px; } .vyw-mainpage-intro-description { margin-bottom: 9px; color: var(--vyw-regulartext-color); } .vyw-mainpage-intro-hololive { color: var(--vyw-graytext-color); font-size: 18px; } .vyw-mainpage-card { margin:20px; box-shadow:0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); padding:20px; font-family:'Raleway',sans-serif; background:var(--vyw-headerbg-color); } .vyw-mainpage-card-header { margin-top: 0 !important; font-family: 'Raleway',sans-serif !important; font-weight: 800 !important; font-size: 24px; color: var(--vyw-headertext-color); border-bottom: 2px solid var(--vyw-headerseparator-color) !important; padding-top: 0 !important; }

.vyw-mainpage-card .bodySearchWrap { overflow: hidden; border-radius: 20px; background-color: var(--vyw-searchbar-color); padding: 0 20px; height: 40px; } .vyw-mainpage-card .bodySearchWrap .mw-ui-input { border: none; box-shadow: none !important; font-family: 'Raleway', sans-serif !important; color: var(--vyw-searchtext-color); font-weight: 700; width: calc(100% - 100px); height: 40px; } .vyw-mainpage-card .bodySearchWrap .mw-ui-button { background: none; border: none; color: var(--vyw-hyperlink-color); height: 40px; transition: .2s; }

.vyw-mainpage-vtubercard p img { height: 130px; width: 220px; object-fit: cover; margin-top: -200px; display:block; object-position: center 5%; }

.vyw-mainpage-vtubercard p { height: 190px; width: 220px; background-color: var(--vyw-vtubercard-color); border-radius: 30px; overflow: hidden; transition: .2s; } .vyw-mainpage-vtubercard p a { color: var(--vyw-vtubercardtext-color); font-weight: 600; font-size: 18px; padding: 20px; display: block; position: relative; text-decoration: none; height: 200px; z-index: 1; padding-top: 147px; line-height: 24px; } .vyw-mainpage-vtuberslist { display: flex; flex-wrap: wrap; justify-content: center; grid-column-gap: 25px; margin-top: 20px; } .vyw-mainpage-showallvtubers { text-align: center; font-weight:700; font-size: 20px; } .vyw-mainpage-showallvtubers a,.vyw-mainpage-newsarchive a, .vyw-mainpage-news-footer a,.vyw-mainpage-event a, .vyw-mainpage-showmore a { color: var(--vyw-hyperlink-color); transition: .2s; text-decoration: none; } .vyw-mainpage-newsarchive { float: right; font-weight: 600; font-size: 18px; margin-top: 5px; } .vyw-mainpage-event { border-bottom: 2px solid var(--vyw-separator-color); font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 18px; color: var(--vyw-newstext-color); padding: 10px 0; line-height: 28px; } .vyw-mainpage-event-date { color: var(--vyw-graytext-color); text-transform: lowercase; letter-spacing: .1em; } .vyw-mainpage-event-title { font-weight: 800; } .vyw-mainpage-event-readmore { font-weight: 700; } .vyw-mainpage-news-footer { font-weight: 600; font-size: 15px; text-align: center; color: var(--vyw-graytext-color); margin-top: 10px; } .vyw-mainpage-event a.new,.vyw-mainpage-news-footer a.new { color: #eb4250; }

.vyw-mainpage-stats { margin: 24px; box-shadow: 0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); font-family: 'Raleway',sans-serif; background: var(--vyw-headerbg-color); } .vyw-mainpage-stats-firstrow { display: grid; grid-template-columns: repeat(4, 1fr); } .vyw-mainpage-stats-numbers { margin: 13px 0; border-left: 2px solid var(--vyw-separator-color); margin-left: -1px; padding: 0 15%; color: var(--vyw-graytext-color); font-weight: 600; line-height: 24px; font-size: 15px; } .vyw-mainpage-stats-logo { background-color: var(--vyw-logobg-color); display: flex; align-items: center; justify-content: center; } .vyw-mainpage-stats-metalinks { background-color: var(--vyw-metalinksbg-color); text-align: center; font-weight: 600; color: #f9f9f9; } .vyw-mainpage-stats-metalinks a { color: var(--vyw-vtubercardtext-color); text-decoration: none; transition: .2s; } .vyw-mainpage-stats-logo img { margin: auto; width: 75%; height: auto; } .vyw-mainpage-stats-number { font-weight: 800; color: var(--vyw-statsboldtext-color); font-size: 18px; }

.vyw-mainpage-minicard { margin: 24px; box-shadow: 0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); padding: 15px; font-family: 'Raleway',sans-serif; background: var(--vyw-headerbg-color); margin-left: 0; } .vyw-mainpage-minicard .vyw-mainpage-card-header { font-size: 16px; text-align: center; padding-bottom: 5px; margin-bottom: 15px; } .vyw-mainpage-showmore { text-align: center; font-weight: 700; font-size: 16px; } .vyw-mainpage-button { height: 50px; border-radius: 15px; margin-bottom: 15px; overflow: hidden; } .vyw-mainpage-button a { display: inline-block; font-weight: 600; color: var(--vyw-buttontext-color); text-decoration: none; width: 100%; text-align: center; background-color: var(--vyw-button-color); transition: .2s; padding: 10px 1em; font-size: 16px; height: 100%; } .vyw-mainpage-button-flag-jp a:before, .vyw-mainpage-button-flag-ru a:before, .vyw-mainpage-button-flag-en a:before, .vyw-mainpage-button-flag-id a:before, .vyw-mainpage-button-flag-zh-tw a:before, .vyw-mainpage-button-flag-es a:before, .vyw-mainpage-button-flag-ko a:before, .vyw-mainpage-button-flag-th a:before { content: ''; display: inline-block; width: 22px; height: 22px; background-image: url('/ru/Special:FilePath/File:Jp_lang.svg'); background-size: contain; margin: 0 .5em 0 .3em; vertical-align: -.5em; } .vyw-mainpage-button-flag-jp a:before { background-image: url('/ru/Special:FilePath/File:Jp_lang.svg'); } .vyw-mainpage-button-flag-ru a:before { background-image: url('/ru/Special:FilePath/File:Ru_lang.svg'); } .vyw-mainpage-button-flag-en a:before { height: 17px; background-image: url('/ru/Special:FilePath/File:En_lang.svg'); vertical-align: -.25em; } .vyw-mainpage-button-flag-id a:before { background-image: url('/ru/Special:FilePath/File:Id_lang.svg'); } .vyw-mainpage-button-flag-zh-tw a:before { background-image: url('/ru/Special:FilePath/File:Zh-Tw_lang.svg'); } .vyw-mainpage-button-flag-es a:before { background-image: url('/ru/Special:FilePath/File:Es_lang.svg'); } .vyw-mainpage-button-flag-ko a:before { background-image: url('/ru/Special:FilePath/File:Ko_lang.svg'); } .vyw-mainpage-button-flag-th a:before { background-image: url('/ru/Special:FilePath/File:Th_lang.svg'); }

.vyw-mainpage-minicard .lightbox-caption { font-weight: 600; color: var(--vyw-newstext-color); }

/* Inline style table #20 | https://virtualyoutuber.fandom.com/ru/wiki/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:WerySkok/Styleguide_sandbox?action=submit */

.vyw-mainpage-extsite-description { font-weight: 600; text-align: center; font-size: 14px; padding: 0 10px; }

.vyw-mainpage-extsite a { text-align: center; display: block; font-weight: 700; color: var(--vyw-hyperlink-color); font-size: 22px; text-decoration: none; transition: .2s; }

.vyw-mainpage-extsite a:hover { opacity: .7; }

/* anims */ .vyw-mainpage-card .bodySearchWrap .mw-ui-button:hover { color: var(--vyw-accent-color) !important; } .vyw-mainpage-vtubercard p:hover { box-shadow: 0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); background-color: var(--vyw-accent-color); } .vyw-mainpage-showallvtubers:hover a,.vyw-mainpage-newsarchive a:hover, .vyw-mainpage-event a:hover, .vyw-mainpage-news-footer a:hover, .vyw-mainpage-showmore a:hover{ color: var(--vyw-accent-color); } .vyw-mainpage-event a.new:hover,.vyw-mainpage-news-footer a.new:hover { color: #b4333d; } .vyw-mainpage-stats-metalinks a:hover { color: #f9c8d7; } .vyw-mainpage-button a:hover { color: var(--vyw-buttontexthover-color); background-color: var(--vyw-buttonhover-color); box-shadow: 0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08); }