Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
.varnyra-hero {
background: linear-gradient(135deg, #10131a, #2b1230);
border: 1px solid #3d2b4f;
border-radius: 16px;
padding: 42px;
margin-bottom: 24px;
color: #ffffff;
}
.varnyra-hero h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 40px;
font-weight: 800;
}
.varnyra-hero p {
font-size: 18px;
opacity: 0.9;
margin-bottom: 0;
}
.varnyra-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.varnyra-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid #263244;
border-radius: 14px;
padding: 20px;
}
.varnyra-card h2 {
margin-top: 0;
padding-bottom: 8px;
border-bottom: 1px solid #334155;
font-size: 22px;
}
.varnyra-card ul {
margin-bottom: 0;
}
.varnyra-card li {
margin: 6px 0;
}
.varnyra-infobox {
float: right;
width: 330px;
margin: 0 0 20px 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #263244;
border-radius: 14px;
padding: 10px;
}
.varnyra-infobox table {
width: 100%;
margin: 0;
background: transparent;
}
.varnyra-infobox th {
text-align: center;
font-size: 20px;
padding: 12px;
}
.varnyra-infobox td {
padding: 8px;
}
.varnyra-infobox img {
image-rendering: pixelated;
}
/* ------------------------------
Varnyra Home Page
------------------------------ */
.vy-home {
font-family: Georgia, "Times New Roman", serif;
}
.vy-home-hero {
position: relative;
overflow: hidden;
margin-bottom: 28px;
padding: 42px 44px;
border: 1px solid rgba(251, 191, 36, 0.28);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.26), transparent 36%),
radial-gradient(circle at bottom left, rgba(251, 191, 36, 0.12), transparent 34%),
linear-gradient(180deg, rgba(12, 16, 28, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 34px rgba(0, 0, 0, 0.34),
inset 0 0 28px rgba(255, 255, 255, 0.018);
}
.vy-home-kicker {
color: #c084fc;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-home-title {
color: #fff8e7;
font-size: 58px;
font-weight: 900;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
}
.vy-home-subtitle {
max-width: 820px;
color: #e9ddc3;
font-size: 18px;
line-height: 1.65;
}
.vy-home-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.vy-home-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 16px;
border: 1px solid rgba(251, 191, 36, 0.34);
border-radius: 999px;
background: rgba(251, 191, 36, 0.10);
color: #fbbf24 !important;
font-size: 14px;
font-weight: 800;
text-decoration: none !important;
}
.vy-home-button:hover {
background: rgba(251, 191, 36, 0.18);
color: #fff8e7 !important;
border-color: rgba(251, 191, 36, 0.58);
}
.vy-home-section-title {
margin: 30px 0 14px;
color: #fbbf24;
font-size: 25px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 1px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
padding-bottom: 8px;
}
.vy-home-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.vy-home-card {
min-height: 150px;
padding: 20px;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 10px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.10), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.012);
}
.vy-home-card:hover {
border-color: rgba(251, 191, 36, 0.36);
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.16), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
}
.vy-home-card-icon {
color: #c084fc;
font-size: 25px;
margin-bottom: 10px;
}
.vy-home-card-title {
color: #fff8e7;
font-size: 20px;
font-weight: 900;
margin-bottom: 8px;
}
.vy-home-card-desc {
color: rgba(245, 239, 225, 0.78);
font-size: 15px;
line-height: 1.55;
margin-bottom: 14px;
}
.vy-home-card-link {
color: #fbbf24 !important;
font-size: 14px;
font-weight: 800;
text-decoration: none !important;
}
.vy-home-card-link:hover {
color: #c084fc !important;
}
.vy-home-journey {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.vy-home-step {
padding: 16px;
border: 1px solid rgba(251, 191, 36, 0.18);
border-radius: 10px;
background: rgba(0, 0, 0, 0.18);
}
.vy-home-step-number {
color: #c084fc;
font-size: 13px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.vy-home-step-title {
color: #fff8e7;
font-size: 16px;
font-weight: 900;
margin-bottom: 5px;
}
.vy-home-step-desc {
color: rgba(245, 239, 225, 0.72);
font-size: 13px;
line-height: 1.45;
}
@media screen and (max-width: 1100px) {
.vy-home-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vy-home-journey {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 640px) {
.vy-home-hero {
padding: 30px 22px;
}
.vy-home-title {
font-size: 40px;
}
.vy-home-grid,
.vy-home-journey {
grid-template-columns: 1fr;
}
}
/* Home page MediaWiki link support */
.vy-home-button a,
.vy-home-card-link a {
color: inherit !important;
text-decoration: none !important;
font-weight: inherit !important;
}
.vy-home-button a:hover,
.vy-home-card-link a:hover {
color: inherit !important;
text-decoration: none !important;
}
/* Home page spacing polish */
.page-Main_Page .varnyra-page {
padding-top: 22px !important;
}
.page-Main_Page .varnyra-adminbar {
margin-bottom: 82px !important;
}
.page-Main_Page .vy-home-hero {
margin-top: 0 !important;
}
/* ------------------------------
Varnyra Wiki Portal v1
Minecraft MMO-RPG homepage
------------------------------ */
.vy-portal {
font-family: Georgia, "Times New Roman", serif;
}
.vy-portal a {
text-decoration: none !important;
}
.vy-portal-hero {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
gap: 22px;
align-items: stretch;
margin-bottom: 18px;
}
.vy-portal-welcome,
.vy-portal-news {
border: 1px solid rgba(251, 191, 36, 0.26);
border-radius: 10px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.22), transparent 36%),
linear-gradient(180deg, rgba(10, 14, 25, 0.95), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 26px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
overflow: hidden;
}
.vy-portal-welcome {
padding: 30px 34px;
}
.vy-portal-kicker {
color: #c084fc;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-portal-title {
color: #fff8e7;
font-size: 48px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.15);
margin-bottom: 12px;
}
.vy-portal-intro {
max-width: 760px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 20px;
}
.vy-portal-pill {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border: 1px solid rgba(251, 191, 36, 0.32);
border-radius: 999px;
background: rgba(251, 191, 36, 0.09);
color: #fbbf24 !important;
font-size: 13px;
font-weight: 900;
}
.vy-portal-pill a {
color: inherit !important;
font-weight: inherit !important;
}
.vy-portal-pill:hover {
background: rgba(251, 191, 36, 0.16);
border-color: rgba(251, 191, 36, 0.55);
}
.vy-portal-news {
padding: 0;
}
.vy-portal-box-title {
padding: 12px 16px;
border-bottom: 1px solid rgba(251, 191, 36, 0.18);
background: rgba(0, 0, 0, 0.22);
color: #fbbf24;
font-size: 17px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.7px;
}
.vy-portal-box-body {
padding: 15px 16px;
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
.vy-portal-news-item {
padding: 0 0 11px;
margin-bottom: 11px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.vy-portal-news-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.vy-portal-news-date {
color: #c084fc;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.vy-portal-news-title {
color: #fff8e7;
font-size: 15px;
font-weight: 900;
margin-top: 2px;
}
.vy-portal-stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin: 0 0 20px;
}
.vy-portal-stat {
padding: 13px 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 9px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 45%),
rgba(255, 255, 255, 0.025);
text-align: center;
}
.vy-portal-stat-number {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
line-height: 1;
}
.vy-portal-stat-label {
margin-top: 5px;
color: #c084fc;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.vy-portal-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 18px;
align-items: start;
}
.vy-portal-section {
margin-bottom: 18px;
}
.vy-portal-section-title {
color: #fbbf24;
font-size: 22px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
padding-bottom: 7px;
margin-bottom: 13px;
}
.vy-portal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
}
.vy-portal-card {
min-height: 112px;
padding: 15px;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 9px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 45%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
}
.vy-portal-card:hover {
border-color: rgba(251, 191, 36, 0.38);
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.18), transparent 45%),
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}
.vy-portal-card-icon {
color: #c084fc;
font-size: 20px;
margin-bottom: 6px;
}
.vy-portal-card-title {
color: #fff8e7;
font-size: 17px;
font-weight: 900;
margin-bottom: 6px;
}
.vy-portal-card-desc {
color: rgba(245, 239, 225, 0.76);
font-size: 13.5px;
line-height: 1.45;
margin-bottom: 9px;
}
.vy-portal-card-link,
.vy-portal-card-link a {
color: #fbbf24 !important;
font-size: 13px;
font-weight: 900;
}
.vy-portal-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
.vy-portal-feature {
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 10px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
}
.vy-portal-feature-image {
height: 135px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(168, 85, 247, 0.24), transparent 52%),
linear-gradient(135deg, rgba(10, 14, 25, 0.98), rgba(38, 20, 60, 0.92));
border-bottom: 1px solid rgba(251, 191, 36, 0.18);
color: rgba(255, 248, 231, 0.45);
font-size: 13px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.vy-portal-feature-image img {
width: 100%;
height: 135px;
object-fit: cover;
image-rendering: auto;
}
.vy-portal-feature-body {
padding: 14px 15px 16px;
}
.vy-portal-feature-title {
color: #fff8e7;
font-size: 18px;
font-weight: 900;
margin-bottom: 6px;
}
.vy-portal-feature-desc {
color: rgba(245, 239, 225, 0.76);
font-size: 13.5px;
line-height: 1.45;
margin-bottom: 10px;
}
.vy-portal-sidebar-box {
margin-bottom: 14px;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 10px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 46%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
overflow: hidden;
}
.vy-portal-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vy-portal-list li {
margin: 0 !important;
padding: 8px 0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
font-size: 13.5px !important;
line-height: 1.35 !important;
}
.vy-portal-list li:last-child {
border-bottom: 0;
}
.vy-portal-list a {
color: #f5efe1 !important;
font-weight: 800 !important;
}
.vy-portal-list a:hover {
color: #fbbf24 !important;
}
.vy-portal-muted {
color: rgba(245, 239, 225, 0.62);
}
@media screen and (max-width: 1150px) {
.vy-portal-hero,
.vy-portal-layout {
grid-template-columns: 1fr;
}
.vy-portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vy-portal-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 680px) {
.vy-portal-title {
font-size: 36px;
}
.vy-portal-welcome {
padding: 24px 20px;
}
.vy-portal-grid,
.vy-portal-feature-grid,
.vy-portal-stats {
grid-template-columns: 1fr;
}
}