User:U.ayaao.p/common.css

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FontAwesome.css&only=styles"; @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); body .vyw-block { --vyw-padding: 20px; --vyw-border-radius: 12px; --vyw-margin: 20px; --theme-link-color--rgb: var(--theme-accent-color--rgb); --theme-link-color: var(--theme-accent-color); --theme-link-color--hover: var(--theme-accent-color--hover); --vyw-heading:24px; } .rcs-container { --vyw-padding:17px; } /* Defining images */ .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, .vyw-mainpage-button-flag-vi a:before, .vyw-mainpage-button-flag-pl a:before, .vyw-mainpage-button-flag-ms a:before, .vyw-mainpage-button-flag-it a:before { content: ''; display: inline-block; width: 21px; height: 21px; background-image: url('/ru/Special:FilePath/File:Jp_lang.svg'); background-size: contain; margin: 0 .7em 0 0; 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-button-flag-vi a:before { background-image: url('/ru/Special:FilePath/File:Vi_lang.svg'); } .vyw-mainpage-button-flag-pl a:before { background-image: url('/ru/Special:FilePath/File:Pl_lang.svg'); } .vyw-mainpage-button-flag-ms a:before { background-image: url('/ru/Special:FilePath/File:Ms_lang.svg'); } .vyw-mainpage-button-flag-it a:before { background-image: url('/ru/Special:FilePath/File:It_lang.svg'); }	display: flex; align-items: center } /* BLOCKS */ .page-content .vyw-block { padding: var(--vyw-padding); border-radius: var(--vyw-border-radius); margin-bottom: var(--vyw-margin); background-color: var(--theme-page-background-color--secondary); color: var(--theme-page-text-color); font-family: 'Poppins', 'Raleway', 'Rubik', sans-serif!important; /* Using Raleway for Cyrillic */ --theme-page-headings-font: 'Poppins', 'Raleway', 'Rubik', sans-serif } .vyw-block a div { cursor: pointer } .vyw-block p { margin: 0/* Fandom adds margin-bottom: 24px to all p's */ } .vyw-block ul { margin: 0 0 6px 18px; } /* Block title */ .mw-parser-output .vyw-block .vyw-block__title, .vyw-block .vyw-block__title.with-item .inner-flex { margin-top: 0; font-size: var(--vyw-heading); padding: 0 0 10px; font-weight: 600; border: 0; line-height: 1.25; margin-bottom: 0 } .vyw-block .vyw-block__title.smaller { --vyw-heading:18px; font-size: var(--vyw-heading)!important; margin-bottom:0 } .vyw-block .with-border-bottom { border-bottom: 1px solid var(--theme-border-color)!important; padding-bottom: 15px!important; } .vyw-block .vyw-block__title .subtitle { font-size: 16px; font-weight: 400; color: var(--theme-page-text-mix-color) } .mw-parser-output .vyw-block .vyw-block__title.with-item:not(.with-border-bottom) { margin-bottom: calc(var(--vyw-margin) / 4); margin-top:0 } .mw-parser-output .vyw-block .vyw-block__title.with-item { display: flex; justify-content: space-between; align-items: center; } .vyw-block__title.with-icon .vyw-icon { margin-right: 12px; color: var(--theme-accent-color); display: inline-block } .vyw-block__title.with-item .inner-flex { display: inline-flex; align-items: center; padding-bottom: 0!important } /* Block title end */ /* Welcome */ margin-right: 5px }	background-color: #fff; background-image: url('/wiki/Special:FilePath/Kizuna_AI_A.I.Games.png'); background-size: 150%; background-position: -80%; background-repeat: no-repeat; }	padding: var(--vyw-padding) 40% var(--vyw-padding) var(--vyw-padding); background: linear-gradient(to right, var(--theme-page-background-color--secondary) 40%, transparent); border-radius: var(--vyw-border-radius); font-size: 20px; } /* VTubers list */ /*Search form*/ .vyw-block#vtuberslist form { margin-bottom: 12px; } .vyw-block#vtuberslist form .bodySearchWrap { display: flex; height: 40px; border-radius: 10px; background-color: rgba(var(--theme-page-dynamic-color-1--rgb), .07); position: relative; } .vyw-block#vtuberslist form .mw-ui-input-inline { border: 0; box-shadow: none; padding: 12px 15px 10px; flex: 1; border-right: 80px solid var(--theme-page-background-color--secondary) } .vyw-block#vtuberslist .bodySearch .mw-ui-button { --theme-accent-color: rgba(var(--theme-accent-color--rgb), .3); --theme-accent-color--hover: rgba(var(--theme-accent-color--rgb), .9); border-radius: 0 10px 10px 0; text-transform: none; padding: 12px 15px 10px!important; height: 40px; width: 80px; font-weight: 400; font-size: 14px; line-height: 15px; border: 0; transition: .2s ease; position: absolute; right: 0; } .suggestions-results { background-color: var(--theme-page-background-color); border: 1px solid var(--theme-border-color); padding: 10px; border-radius: 10px; cursor: default; box-sizing: border-box; font-family: 'Raleway', 'Rubik', sans-serif!important } .suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus { color: var(--theme-page-text-color); text-decoration: none; } .suggestions-result { color: var(--theme-page-text-color); margin: 0; line-height: 1.25; padding: 10px 8px; transition: 0.1s; border-radius: 5px; } .suggestions-result-current { background-color: rgba(154, 154, 154, .19); color: var(--theme-page-text-color); } /*Search form end*/ .vyw-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top:calc(var(--vyw-margin) / 2); grid-gap: calc(var(--vyw-margin) / 2); } .vyw-list a, .vyw-button a { text-decoration: none; } /*Cards*/ /* Cards for larger wikis (above 1000 pages) require a different layout for the "Explore"/"Browse the wiki" section. This is basically that. */	height: 150px; justify-content: center; align-items: center; text-align: center; border: 2px solid rgba(var(--theme-page-dynamic-color-1--rgb), .1); position: relative; border-radius:15px }	display: block; width: 100%; height: 100%; object-fit:cover; position: absolute; transition: .2s ease; }	opacity: .3; }	opacity: 1; }	background-color: rgba(0, 0, 0, .4); padding: 10px; border-radius: 10px; position: relative; z-index: 1s; transition: .2s ease; backdrop-filter: blur(10px); color: #fff; max-width: 150px; word-break: break-all; }	background-color: var(--theme-accent-color); color: var(--theme-accent-label-color) }	background-color: rgba(var(--theme-page-dynamic-color-1--rgb), .07); border: 2px solid rgba(var(--theme-page-dynamic-color-1--rgb), .15) }	width: 100%; background-color: rgba(var(--theme-page-dynamic-color-1--rgb), .07); border-radius: var(--vyw-border-radius); overflow: hidden; transition: .2s ease; cursor: pointer; }	position:absolute; width:100%; height:100%; display: flex; flex-direction: column; justify-content:center; align-items:center; } /*Regular cards*/ position: relative; height: auto; text-align: left; background-color: rgba(var(--theme-accent-color--rgb), .1); border-radius: var(--vyw-border-radius); transition: .2s; border: 1px solid var(--theme-accent-color) }	background-color: rgba(var(--theme-accent-color--rgb), .5); color: var(--theme-accent-label-color--hover); box-shadow: rgba(17, 12, 46, 0.15) 0px 12px 25px 0px; }	color: var(--theme-accent-label-color); }	background-color: white; border-radius: var(--vyw-border-radius) var(--vyw-border-radius) 0 0; }	border-radius: var(--vyw-border-radius) var(--vyw-border-radius) 0 0; width: calc(100% - 2px); height: 125px; object-fit: cover; padding: 1px 1px 0; object-position: center 10%; }	padding: 12px; font-weight: 500 } /*Cards end*/ /* VTubers list end */ /* News */ .vyw-news-block:not(:last-of-type) { border-bottom: 1px solid var(--theme-border-color); padding: 10px 0; margin-bottom: 5px } .vyw-news-block { padding-top: 10px; } .vyw-news-block .date { opacity: .7 } .vyw-news-block .title { font-size: 15px; font-weight: 600 } /* News end */ /* Featured article */ position: relative }	max-width: 200px; margin: var(--vyw-margin); float: right; clear: right; } body #selectedarticle.vyw-block .vyw-block__image img { height: 100%; width: 100%; object-fit: contain; display: block; border-radius: var(--vyw-border-radius); background-color: #fff; } /* Featured article end */ /* See also */ .vyw-external { text-align: center; padding: 9px; border-radius: calc(var(--vyw-border-radius) / 2); transition: .2s; } .vyw-external a { text-decoration: none; } .vyw-external p { font-size: 13px; margin-top: 5px } .vyw-external img.visual-representation { display: block; width: fit-content; margin: 0 auto; } .vyw-external:not(:last-of-type) { margin-bottom: 3px } .vyw-external:hover { background-color: rgba(var(--theme-page-dynamic-color-1--rgb), .05); } .vyw-external .visual-representation { font-size: 24px; font-weight: 500; line-height: 1.25; transition:.2s } .vyw-external img.visual-representation:hover { opacity:.7 } /* See also end */ /* Meta */ position: relative; } .vyw-statistics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 calc(var(--vyw-margin) * -1) 20px; position: relative } .vyw-statistics::after { content: ''; display: block; width: calc(100% - var(--vyw-margin) * 2); margin: .5px var(--vyw-margin) 0; height: 1px; background-color: var(--theme-border-color); position: absolute; bottom: 0 } .vyw-statistics .vyw-statistic { max-height: 100px; justify-content: center; display: inline-flex; flex-direction: column; padding: var(--vyw-padding); line-height: 1.45 } .vyw-statistic:not(:last-of-type) { border-right: 1px solid var(--theme-border-color) } .vyw-statistics .vyw-statistic:first-of-type { background: linear-gradient(rgba(var(--theme-accent-color--rgb), .3), rgba(var(--theme-accent-color--rgb), .7)); align-items: center; } .vyw-statistic .data { font-size: 18px; font-weight: 500; color: var(--theme-accent-color); margin-bottom: 2px; } .vyw-statistic .label { color: var(--theme-page-text-mix-color) } .theme-fandomdesktop-light .vyw-statistics .vyw-statistic:first-of-type img { filter: invert(1); opacity: .8 } .vyw-metabar { margin: 0 calc(var(--vyw-margin) * -1) calc(var(--vyw-margin) * -1); padding: calc(var(--vyw-padding) / 2) var(--vyw-padding); border-radius: 0 0 var(--vyw-border-radius) var(--vyw-border-radius); background-color: var(--theme-accent-color); color: var(--theme-accent-label-color); text-align: center; } .vyw-metabar a { color: var(--theme-accent-label-color); transition: .2s } .vyw-metabar a:hover { opacity: .65 } .vyw-buttons { display: flex; justify-content: left; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } /* Meta end */ /* BLOCKS END */ /* BUTTONS */ .vyw-button { --vyw-button-bg: rgba(var(--theme-accent-color--rgb), .2); --vyw-button-bg-hover: var(--theme-accent-color); --vyw-button-text: var(--theme-accent-label-color); --vyw-button-text-hover: var(--theme-accent-label-color); padding: 9px 16px; font-size: 14px; background-color: var(--vyw-button-bg); color: var(--vyw-button-text); transition: .2s; font-weight: 400!important; display: inline-block; border-radius: var(--vyw-border-radius) } .theme-fandomdesktop-dark .vyw-button a { color: var(--theme-page-text-color) } .vyw-button:hover { background-color: var(--vyw-button-bg-hover); color: var(--vyw-button-text-hover); } .vyw-button:hover a { color: var(--vyw-button-text-hover); } .vyw-button.vyw-button-secondary { --vyw-button-bg: transparent; --vyw-button-bg-hover: rgba(var(--theme-accent-color--rgb), .1); --vyw-button-text: var(--theme-accent-color); --vyw-button-text-hover: var(--theme-accent-color--hover) } .vyw-button.vyw-button-sm { padding: 4px 8px; border-radius: calc(var(--vyw-border-radius) / 2); margin: 0 4px; } /* BUTTONS END */
 * 1) meta .vyw-buttons a {
 * 1) welcome.vyw-block img {
 * 1) welcome.vyw-block {
 * 1) welcome.vyw-block #welcome-text {
 * 1) category-list .vyw-card {
 * 1) category-list .vyw-card img {
 * 1) category-list:hover .vyw-card img {
 * 1) category-list .vyw-card:hover img {
 * 1) category-list .vyw-card .text {
 * 1) category-list .vyw-card:hover .text {
 * 1) category-list .vyw-card:hover {
 * 1) category-list .vyw-card {
 * 1) category-list .vyw-card a {
 * 1) vtuber-list .vyw-card {
 * 1) vtuber-list .vyw-card:hover {
 * 1) vtuber-list .vyw-card:hover .vyw-card__text a {
 * 1) vtuber-list .vyw-card__img {
 * 1) vtuber-list .vyw-card__img img {
 * 1) vtuber-list .vyw-card__text {
 * 1) selectedarticle.vyw-block {
 * 1) selectedarticle.vyw-block .vyw-block__image {
 * 1) meta.vyw-block {