MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (20 intermediate revisions by the same user not shown) | |||
| Line 49: | Line 49: | ||
.mainpage-header { | .mainpage-header { | ||
display: flex; | display: flex; | ||
} | } | ||
.mainpage-header .header-intro { | .mainpage-header .header-intro { | ||
flex: 2; | flex: 2; | ||
max-width: 770px; | |||
background: #f6f6f6; | |||
padding: 0px 20px 20px; | |||
border-radius: 12px; | |||
font-family: sans-serif; | |||
color: #101418; | |||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); | |||
} | } | ||
.mainpage-header .header-stats { | .mainpage-header .header-stats { | ||
| Line 59: | Line 65: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
margin- | margin-left: 35px; | ||
max-width: 300px; | |||
background: #f6f6f6; | |||
border-radius: 12px; | |||
font-family: sans-serif; | |||
color: #101418; | |||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); | |||
} | } | ||
.header-stats ul { | .header-stats ul { | ||
| Line 81: | Line 93: | ||
.table-bg-always, | .table-bg-always, | ||
.table-bg-blue { | .table-bg-blue { | ||
background: | background: color-mix(in srgb, #3288bd, transparent 50%); | ||
} | } | ||
.table-bg-common, | .table-bg-common, | ||
.table-bg-green { | .table-bg-green { | ||
background: | background: color-mix(in srgb, #abdda4, transparent 50%); | ||
} | } | ||
.table-bg-uncommon, | .table-bg-uncommon, | ||
.table-bg-yellow { | .table-bg-yellow { | ||
background: | background: color-mix(in srgb, #fee08b, transparent 50%); | ||
} | } | ||
.table-bg-rare, | .table-bg-rare, | ||
.table-bg-orange { | .table-bg-orange { | ||
background: | background: color-mix(in srgb, #f46d43, transparent 50%); | ||
} | } | ||
.table-bg-veryrare, | .table-bg-veryrare, | ||
.table-bg-red { | .table-bg-red { | ||
background: | background: color-mix(in srgb, #d53e4f, transparent 50%); | ||
} | } | ||
.table-bg-random, | .table-bg-random, | ||
.table-bg-pink { | .table-bg-pink { | ||
background:# | background: color-mix(in srgb, #5e4fa2, transparent 50%); | ||
color:#f8f9fa; | color: #f8f9fa; | ||
} | } | ||
.table-bg-gray, | .table-bg-gray, | ||
.table-bg-grey { | .table-bg-grey { | ||
background:#5d6773; | background:#5d6773; | ||
} | } | ||
.table-bg-fade { | .table-bg-fade { | ||
| Line 121: | Line 127: | ||
/* Frontpage stuff */ | /* Frontpage stuff */ | ||
.skill-wrapper { | .skill-wrapper { | ||
max-width: | max-width: 810px; | ||
} | } | ||
| Line 194: | Line 199: | ||
.skill-potionmaking .skill-icon { background-color: #98b7f9; } | .skill-potionmaking .skill-icon { background-color: #98b7f9; } | ||
.skill-smithing .skill-icon { background-color: #ff7cf1; } | .skill-smithing .skill-icon { background-color: #ff7cf1; } | ||
.tile-halves { | |||
background: #5b4d48; | |||
border: none; | |||
} | |||
.mainpage-social { | |||
border: none; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3); | |||
} | |||
.tile-halves { | |||
display: flex; | |||
flex-flow: row wrap; | |||
background: var(--tile-background-color); | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1); | |||
} | |||
.mainpage-social.mainpage-discord .tile-top { | |||
background: #5865f2; | |||
} | |||
.mainpage-social .tile-top { | |||
display: flex; | |||
align-items: center; | |||
padding: 1em 1.5em; | |||
} | |||
.tile-top { | |||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | |||
.mainpage-social .social-icon { | |||
margin-right: 0.75em; | |||
text-align: center; | |||
width: 60px; | |||
} | |||
.mainpage-social .arrow { | |||
position: absolute; | |||
top: calc(50% - .5em); | |||
right: 0; | |||
height: 1em; | |||
width: 0.7em; | |||
background-size: 0.7em 1em; | |||
transition: 0.3s ease-out; | |||
transition-duration: 0.3s; | |||
} | |||
.arrow { | |||
background: url(https://brightershoreswiki.org/images/White-chevron.svg) no-repeat; | |||
background-size: auto; | |||
display: inline-block; | |||
height: 0.7rem; | |||
width: 0.45rem; | |||
vertical-align: middle; | |||
} | |||
.mainpage-social .social-header { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 1.15em; | |||
margin: 0.5em 0 -0.15em; | |||
} | |||
.mainpage-social .server-tagline { | |||
color: rgba(255,255,255,0.9); | |||
margin-bottom: 0.5em; | |||
} | |||
.mainpage-social.mainpage-discord .tile-bottom { | |||
background: #525ee0; | |||
} | |||
.mainpage-social .tile-bottom p { | |||
color: #fff; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
text-align: center; | |||
text-transform: uppercase; | |||
letter-spacing: 0.03em; | |||
margin: 0; | |||
} | |||
/* Sidebar Discord */ | |||
#n-Discord a { | |||
color:#fff !important; | |||
font-weight:bold; | |||
border-radius:4px; | |||
border:1px solid #4c57d0; | |||
background-color:#5865f2; | |||
display:block; | |||
position:relative; | |||
padding:4px 4px 5px calc(17px + 6.5px * 2); | |||
box-shadow:0 2px 3px rgba(0,0,0,0.1); | |||
transition:0.2s | |||
} | |||
#n-Discord a::before { | |||
content:'Chat on '; | |||
font-weight:normal; | |||
opacity:0.85 | |||
} | |||
#n-Discord a::after { | |||
content:''; | |||
background:url(https://brightershoreswiki.org/images/Discord_logo_icon.svg) no-repeat; | |||
background-size:17px 13px; | |||
filter:drop-shadow(0 1px 1px rgba(0,0,0,0.1)); | |||
position:absolute; | |||
top:5px; | |||
left:7px; | |||
width:17px; | |||
height:13px | |||
} | |||
#n-Discord a:hover { | |||
text-decoration:none; | |||
background-color:#525ee0 | |||
} | |||