User:MCPopFan/common.css

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FontAwesome.css&only=styles"; /* All selectors that point to body should be renamed .page-Main_Page once the rewrite will be complete */ body { --vyw-padding: 20px; --vyw-border-radius: 12px; --vyw-margin: 20px; --vyw-accent-color: #524cbd; --vyw-accent-color--rgb: 82, 76, 189; --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) } body .mw-parser-output { font-size: 14px; } body .mw-parser-output * { line-height: 1.45 } .vyw-block p { margin: 0 } .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); border: 1px solid var(--theme-border-color) } .mw-parser-output .vyw-block .vyw-block__title { margin-top: 0; font-size: 24px; padding: 0 0 10px; font-weight: 600; border:0; font-family: inherit!important; line-height:1.25; margin-bottom:0 } .mw-parser-output .vyw-with-border-bottom { border-bottom: 1px solid var(--theme-border-color); } .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 { font-size:inherit; margin-bottom:calc(var(--vyw-margin) / 4) } .mw-parser-output .vyw-block .vyw-block__title.with-item span.mw-headline span { font-size: 24px; } .mw-parser-output .vyw-block .vyw-block__title.with-item span.mw-headline { display: flex; justify-content: space-between; align-items: center; }	margin-right: 5px }	background-color: #fff; background-image: url('/wiki/Special:FilePath/Hololive_1st_fes._Nonstop_Story_02.png'); background-size: auto 225%; background-position: 12% 33%; 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); width: calc(100% - var(--vyw-padding)); font-size: 20px; }	color:var(--theme-accent-color) } .vyw-block#vtuberslist form { margin-bottom:12px; } .vyw-block#vtuberslist form .bodySearchWrap { display:flex; min-height:40px; border-radius:10px; background-color:rgba(var(--theme-page-dynamic-color-1--rgb),.07) } .vyw-block#vtuberslist form .mw-ui-input-inline { border: 0; box-shadow: none; padding: 12px 15px 10px; flex: 1; } .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:11px 15px 10px!important; width:auto; font-weight:400; font-size:14px; line-height:15px; border:0; transition:.2s ease } .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); } .vyw-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: calc(var(--vyw-margin) / 2); } .vyw-list a { text-decoration:none; }	--i: url('https://cdn.pixabay.com/photo/2012/04/10/22/59/japan-26803_960_720.png'); }	--i: url('https://cdn.pixabay.com/photo/2012/04/23/16/15/flags-38754_960_720.png'); }	--i: url('https://cdn.pixabay.com/photo/2012/04/10/23/01/indonesia-26817_960_720.png'); }	--i: url('https://cdn.pixabay.com/photo/2015/11/12/16/03/flag-1040555_960_720.png'); }	--i: url('https://cdn.pixabay.com/photo/2013/07/12/17/58/thailand-152711_960_720.png'); }	height:150px; justify-content:center; align-items:center; text-align:center; margin-top:10px; border:2px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1); position:relative; }	content:''; display:block; width:100%; height:100%; background-image:var(--i); background-size:cover; background-position:center; background-repeat:no-repeat; 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; }	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) } .vyw-card { display: flex; flex-direction: column; 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; } .vyw-card:hover { background-color: rgba(var(--theme-accent-color--rgb),.5); color: var(--vyw-card-label-color--hover); box-shadow: rgba(17, 12, 46, 0.15) 0px 12px 25px 0px; } .vyw-card img { border-radius:var(--vyw-border-radius) var(--vyw-border-radius) 5px 5px; width: calc(100% - 4px); background-color:#fff; height: 125px; object-fit: cover; margin:2px; object-position: top center; } .vyw-card__text { padding: 12px; font-weight: 500 } .vyw-button { display: flex; } body.page-Заглавная_страница .mw-parser-output:has(+ #mw-content) .vyw-button a { background-color: var(--vyw-button-color); color: var(--vyw-button-label-color); border: none; border-radius: 10px; font-size: 14px; font-weight: 400; padding: 8px 16px; cursor: pointer; transition: .2s; text-decoration: none; } body.page-Заглавная_страница .mw-parser-output .vyw-button:hover a, body.page-Заглавная_страница .mw-parser-output .vyw-button:active a { background-color:var(--vyw-button-color--hover) } body.page-Заглавная_страница .mw-parser-output .vyw-button a img { margin-right: 8px; } .vyw-news-block:not(:last-of-type) { border-bottom:1px solid var(--vyw-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 } .vyw-block a div { cursor:pointer } .vyw-block i.fas { margin-right:10px }	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; } .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) } .vyw-button:hover { background-color:var(--vyw-button-bg-hover); 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; }
 * 1) welcome.vyw-block img {
 * 1) welcome.vyw-block {
 * 1) welcome.vyw-block #welcome-text {
 * 1) welcome.vyw-block .fas {
 * 1) lang-list #jp {
 * 1) lang-list #en {
 * 1) lang-list #id {
 * 1) lang-list #cn {
 * 1) lang-list #th {
 * 1) lang-list.vyw-list .vyw-card {
 * 1) lang-list.vyw-list .vyw-card:before {
 * 1) lang-list.vyw-list:hover .vyw-card:before {
 * 1) lang-list.vyw-list .vyw-card:hover:before {
 * 1) lang-list.vyw-list .vyw-card .text {
 * 1) lang-list.vyw-list .vyw-card:hover .text {
 * 1) lang-list.vyw-list .vyw-card:hover {
 * 1) selectedarticle.vyw-block {
 * 1) selectedarticle.vyw-block .vyw-block__image {