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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
img {
border: 0;
vertical-align: middle;
}
/* Infoboxes */
.infobox {
text-align: center;
font-weight: normal;
width: 300px;
background: #d8d8dd;
color: #000;
border-radius: 10px;
display: table;
}
.infobox-image {
border-radius: 10px 10px 0 0;
overflow: hidden;
}
.infobox-title{
text-align: center;
background: #C6C6C6;
font-weight: bold;
font-size: 0.95rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.infobox-texttitle {
width: 40%;
text-align: right;
font-size: 85%;
font-weight: bold;
}
.infobox-text {
text-align: left;
font-size: 80%;
font-weight: normal;
}
.infobox-drop-image {
width: 30%;
margin: 0 auto;
padding-right: 10px;
}
.skin-citizen-dark .infobox {
background: #2b2f36;
color: #fff;
}
.skin-citizen-dark .infobox-text {
color: #fff;
}
.skin-citizen-dark .infobox-title{
background: #181B1F;
color: #fff;
}
/* End of Infoboxes */
/* Cards for Main Page */
.mainpage-card{
margin: 0 0.3rem 0.5rem 0.3rem;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.mainpage-contents {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 0.9rem;
}
.mainpage-contents-card{
display: flex;
flex-direction: row;
background: rgba(100,100,120,0.25);
justify-content: space-between;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
flex: 1;
border-radius: 0.5rem;
}
.mainpage-image {
display: flex;
flex-direction: column;
align-items: center;
}
.mainpage-image a {
overflow: hidden;
}
.mainpage-image a:nth-child(2) {
width: 100%;
text-align: center;
font-size: 115%;
padding: 0.5rem;
}
.mainpage-image .image {
justify-self: center;
}
.mainpage-image img {
width: 100%;
height: 100%;
justify-self: center;
object-fit: contain;
transition: transform .5s ease;
overflow: hidden;
}
.mainpage-image:hover img {
transform: scale(1.1);
}
.mainpage-social {
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
display: block;
}
.mainpage-social .tile-top {
display: flex;
border: none;
align-items: center;
padding: 0.3rem 1.5rem;
border-radius: 0.5rem;
max-height: 40px;
height: 40px;
}
.mainpage-social .tile-bottom {
border: none;
}
.mainpage-social .tile-bottom p {
font-weight: bold;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
}
.mainpage-social.mainpage-discord .tile-top {
background: #5865F2;
}
.mainpage-social.mainpage-discord .tile-top img{
transition: transform .2s ease;
}
.mainpage-social.mainpage-discord .tile-top:hover img{
transform: scale(1.1);
}
.mainpage-social.mainpage-gitlab .tile-top img{
transition: transform .2s ease;
}
.mainpage-social.mainpage-gitlab .tile-top:hover img{
transform: scale(1.1);
}
.mainpage-social.mainpage-opencollective .tile-top img{
transition: transform .2s ease;
}
.mainpage-social.mainpage-opencollective .tile-top:hover img{
transform: scale(1.1);
}
.mainpage-social.mainpage-reddit .tile-top img{
transition: transform .2s ease;
}
.mainpage-social.mainpage-reddit .tile-top:hover img{
transform: scale(1.1);
}
.mainpage-social.mainpage-opencollective .tile-top {
background: #135ae4;
}
.mainpage-social.mainpage-discord .tile-bottom {
background: #525ee0;
}
.mainpage-social.mainpage-gitlab .tile-top {
background: #fca326;
white-space: nowrap;
}
.mainpage-social.mainpage-reddit .tile-top {
background: #ff4500;
}
.mainpage-social.mainpage-gitlab .tile-bottom {
background: #fc6d27;
}
.mainpage-social .social-icon {
margin-right: 0.75em;
text-align: center;
}
.mainpage-body {
display: flex;
flex-flow: row wrap;
}
.mainpage-left {
flex: 2;
display: flex;
flex-flow: column wrap;
margin-right: 0.9rem;
}
.mainpage-left > * {
margin: 0 0 0.9rem;
}
.mainpage-right > * {
margin: 0 0 0.9rem;
}
.mainpage-right {
flex: 1;
display: flex;
flex-flow: column wrap;
}
.tile-top {
padding: 1.3rem 1.5rem 0.6rem;
background: rgba(100,100,120,0.25);
border-radius: 0.5rem 0.5rem 0 0;
}
.tile-top.tile-image {
display: flex;
align-items: center;
background-color: #949eaa;
overflow: hidden;
padding: 0;
height: 13vw;
max-height: 12em;
}
.tile-top.tile-image a {
width: 100%;
}
.tile-top.tile-image img {
width: 100%;
height: auto;
transition: 0.4s ease-out;
}
.tile-bottom {
background: #3366cc;
border-top: 1px solid #e4eaee;
padding: 0.5rem 0 0.5rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.tile-bottom.link-button {
align-self: flex-end;
padding: 0;
}
.tile-bottom.link-button a {
display: block;
text-align: center;
padding: 0.75em 1.5em 0.8em;
text-decoration: none;
}
.tile-bottom.read-more {
transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
color: #ffffff;
font-weight: bold;
text-align: right;
}
.tile-bottom.read-more:hover {
background: #5b84d6;
}
.tile-halves {
display: flex;
flex-flow: column wrap;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}
.page-Veloren_Wiki_Editing .tile-halves {
margin: 1em 0.5em 1em;
width: 45%;
max-width: 30em;
}
.tile-halves h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 0.4em;
}
.mainpage-social .social-header {
color: #ffffff;
font-weight: bold;
font-size: 1.15em;
margin: 0.5em 0 -0.15em;
display: inline;
}
.mainpage-social .social-tagline {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0.5em;
}
.mainpage-editing {
border: none;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.mainpage-editing .tile-top {
background: #5b84d6;
color: #ffffff;
}
.mainpage-editing .tile-bottom {
background: #3366cc;
color: #ffffff;
border: none;
padding: 0.8rem 1.5rem 0.4rem;
}
.mainpage-editing h2,
.mainpage-editing a,
.mainpage-editing a:visited,
.mainpage-editing a:active {
color: #ffffff;
}
.tile {
background: rgba(100, 100, 120, 0.25);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
padding: 1.5em 2em 1em;
border-radius: 0.5rem;
}
.tile-recentupdates {
flex: 1;
padding: 0.3rem
}
.tile-recentupdates-card {
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
overflow: hidden;
}
.recentupdates-background img {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
overflow: hidden;
}
.recentupdates-foreground {
pointer-events:none;
height:100%;
width:100%;
display:flex;
align-items:center;
padding:0 15px;
color:#fff;
font-weight:500
}
.recentupdates-background::after {
position:absolute;
pointer-events:none;
top:0;
right:0;
bottom:0;
left:0;
display:block;
content:""
}
/* Veloren_Wiki/Dev */
.dev-grid {
display: grid;
margin-top: 6px;
font-size: 0.875rem;
font-weight: 500;
grid-gap: 6px;
text-align: center;
border-radius: 0.5rem;
}
/* Veloren_Wiki/Game Version*/
.gameversion-tile {
background: rgba(100, 100, 120, 0.25);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
padding: 0.2rem;
border-radius: 0.5rem;
font-size: 115%;
margin-bottom: 0.9rem;
}
.gameversion-current {
background: var(--background-color-success);
border: 0;
border-radius: 50px;
padding: 0.1rem 0.6rem;
}
.gameversion-tile a.external {
background: transparent;
margin-right: -13px;
}
/* wikitable */
table.wikitable {
border-radius: 10px;
border-collapse: unset;
overflow: hidden;
}
.skin-citizen-dark table.wikitable {
border-radius: 10px;
border-collapse: unset;
overflow: hidden;
background: #2b2f36;
color: #fff;
}
.skin-citizen-dark table.wikitable tr th {
color: #fff;
}
table.wikitable tr td {
padding: 5px 10px;
border: 1px solid var(--border-color-base);
}
table.wikitable tr th {
padding: 5px;
}
.messagebox {
border-left: 15px solid #3366cc;
background: #d8d8dd;
border-radius: 10px;
display: flex;
margin: 0 auto;
padding: 5px;
}
.skin-citizen-dark .messagebox {
border-left: 15px solid #3366cc;
background: #2b2f36;
border-radius: 10px;
display: flex;
margin: 0 auto;
}
.messagebox a.external {
background: transparent;
margin-right: -13px;
}
/* Loot Tables */
.rarity-blue {
background: #1d7bb0;
}
.rarity-green {
background: #3c780a;
}
.rarity-yellow {
background: #bba11c;
}
.rarity-orange {
background: #bb702a;
}
.rarity-red {
background: #b0322a;
}
.unknown a.external {
background: transparent;
margin-right: -13px;
}
.update-history {
background: rgba(100,100,120,0.25);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
padding: 1.5em 2em 1em;
border-radius: 0.5rem;
line-height: 1rem;
}
.update-history > ul {
margin:0;
}
.update-history > ul > li {
margin-bottom:0.75em;
list-style:none
}
.update-history > ul > li > ul {
margin-bottom:0
}
.update-list {
line-height: 1.7rem;
list-style:none;
}
.update-type {
color: white;
background: #3ea6e6;
font-size:80%;
font-weight:bold;
text-transform:uppercase;
border-radius:3px;
padding:2px 5px;
margin-right:5px;
}