Thành viên:Nguyenhai314/Nguyenhai314-4/styles.css

Bách khoa toàn thư mở Wikipedia
.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;
}
#siteNotice {
    text-align: center;
    margin: 0.75em 0 1em;
}
.vector-body {
    font-size: 0.9em;
    line-height: 1.75;
}
body.page-RuneScape_Wiki .mw-parser-output {
    max-width: 75em;
    margin: 0 auto;
}
.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;
}
.mainpage-header .header-intro {
    flex: 2;
}
.mainpage-header .header-intro big {
    font-size: 2.5em;
    border: none;
    margin: 0 0 0.15em;
}
.mainpage-header .header-intro p {
    font-size: 1.1em;
    line-height: 1.7em;
}
.mainpage-header .header-stats {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
}
@media only screen and (max-width: 65.999rem){
.mainpage-header .header-stats, .mainpage-onthisday {
    display: none;
}
}
.mainpage-header .header-stats ul {
    list-style: none;
}
li {
    margin-bottom: 0.1em;
}
.mainpage-body {
    display: flex;
    flex-flow: row wrap;
}
.mainpage-body .tile-row {
    width: 100%;
    margin-bottom: 0.9rem;
}
.tile-row {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}
.mainpage-recent-updates .tile-halves {
    flex: 1;
    align-content: flex-start;
    margin-right: 0.9rem;
}
.tile-halves {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #e4eaee;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
}
.tile-top.tile-image {
    display: flex;
    align-items: center;
    background-color: #949eaa;
    overflow: hidden;
    padding: 0;
    height: 13vw;
    max-height: 12em;
}
.tile-top {
    width: 100%;
    padding: 1.3rem 1.5rem 0.6rem;
}
@media only screen and (max-width: 65.999rem){
.mainpage-recent-updates .tile-top {
    height: 18vw;
}
}
.tile-top.tile-image a {
    width: 100%;
}
a:visited, image a:visited, a:active, image a:active {
    color: #327ba7;
}
.tile-top.tile-image img {
    width: 100%;
    height: auto;
    transition: 0.4s ease-out;
}
.tile-bottom.link-button {
    align-self: flex-end;
    padding: 0;
}
.tile-bottom {
    background: #ffffff;
    border-top: 1px solid #e4eaee;
    width: 100%;
    padding: 1rem 1.5rem 0.6rem;
}
.mainpage-recent-updates .tile-bottom.link-button a {
    text-align: left;
    padding: 1rem 1.5rem 0.75rem;
}
.tile-bottom.link-button a {
    display: block;
    text-align: center;
    padding: 0.75em 1.5em 0.8em;
    text-decoration: none;
}
.vector-body p {
    margin: 0 0 0.8em;
}
.byline {
    font-size: 0.9em;
    color: #949eaa;
}
.tile-halves .byline + h2 {
    margin-top: -0.5em;
}
.mw-parser-output h2:first-of-type {
    clear: left;
}
.mainpage-recent-updates h2 {
    margin: -0.5em 0 0.3em;
}
.tile-halves h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}
.mainpage-recent-updates p:not(.byline) {
    font-size: 0.9em;
    line-height: 1.75em;
    color: #444e5a;
}
@media only screen and (max-width: 65.999rem){
.mainpage-recent-updates {
    display: block;
}
}
@media only screen and (max-width: 65.999rem){
.mainpage-recent-updates .tile-top {
    height: 18vw;
}
}
.mainpage-recent-updates .tile-halves:hover .tile-top img {
    transform: scale(1.04);
}
.mainpage-contents .tile-halves {
    flex: 1;
    margin-right: 0.9rem;
}
@media only screen and (max-width: 65.999rem){
.mainpage-contents .tile-halves:nth-child(1), .mainpage-contents .tile-halves:nth-child(2), .mainpage-contents .tile-halves:nth-child(3) {
    margin-bottom: 0.9rem;
}
}
.mainpage-contents .tile-top {
    height: 4.5rem;
    position: relative;
}
.mainpage-contents h2 {
    margin: 0;
    padding: 0;
}
.tile-halves h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}
.mainpage-body h2 a {
    color: #444e5a;
}
@media only screen and (max-width: 65.999rem){
.mainpage-contents .tile-halves:nth-child(3) {
    margin-right: 0;
}
}
@media only screen and (max-width: 65.999rem){
.mainpage-contents .tile-halves:nth-child(1), .mainpage-contents .tile-halves:nth-child(2), .mainpage-contents .tile-halves:nth-child(3) {
    margin-bottom: 0.9rem;
}
}
@media only screen and (max-width: 65.999rem){
.mainpage-contents .line-break {
    width: 100%;
}
}
.mainpage-contents .tile-halves:last-child {
    margin-right: 0;
}
.mainpage-left {
    flex: 2;
    display: flex;
    flex-flow: column wrap;
    margin-right: 0.9rem;
}
.mainpage-left > * {
    margin: 0 0 0.9rem;
}
.tile-bottom.read-more {
    background: #f9fafa;
    transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
    color: #949eaa;
    font-weight: bold;
    text-align: right;
}
.tile-bottom.link-button a {
    display: block;
    text-align: center;
    padding: 0.75em 1.5em 0.8em;
    text-decoration: none;
}
.tile-bottom.read-more .arrow {
    filter: invert(43%) sepia(50%) hue-rotate(175deg);
    margin-left: 0.4em;
    transition: 0.3s ease-out;
}
.arrow.dark {
    filter: invert(80%);
}
.arrow {
    background: green no-repeat;
    display: inline-block;
    height: 0.7rem;
    width: 0.45rem;
    vertical-align: middle;
}
.mainpage-body .tile {
    padding-left: 1.75em;
    padding-right: 1.75em;
    max-width: 100%;
}
.mainpage-left > * {
    margin: 0 0 0.9rem;
}
.tile {
    background: #ffffff;
    border: 1px solid #e4eaee;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
    padding: 1.5em 2em 1em;
    max-width: 40em;
}
.tile h2, .tile .rsw-h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}
.mainpage-wikinews .news-date {
    font-weight: bold;
    margin-bottom: 0.3em;
}
.mainpage-wikinews p:not(.news-date) {
    margin-left: 1em;
}
.mw-body-content a.external, .mw-body-content a.extiw {
    color: #3869bb;
}
.mw-parser-output a.extiw, .mw-parser-output a.external {
    color: #3366bb;
}
.mw-parser-output a.external {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/df/WD10_-_landscape_background_-_light.svg);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;
}
.mw-content-ltr ul {
    margin-top: 0;
    margin-bottom: 0.8em;
}
@media only screen and (max-width: 65.999rem){
.mainpage-header .header-stats, .mainpage-onthisday {
    display: none;
}
}
.mainpage-right {
    flex: 1;
    display: flex;
    flex-flow: column wrap;
}
.mainpage-right > * {
    margin: 0 0 0.9rem;
}
@media only screen and (max-width: 800px){
.mainpage-right{
display:block;	
}
.mainpage-social {
    border: none;
    margin-bottom: 0;
}
}
.mainpage-social {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);
}
.mainpage-editing {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);
}
.mainpage-body .tile {
    padding-left: 1.75em;
    padding-right: 1.75em;
    max-width: 100%;
}
.mainpage-social.mainpage-discord .tile-top {
    background: #5865F2;
}
.mainpage-social .tile-top {
    display: flex;
    align-items: center;
    padding: 1em 1.5em;
}
.mainpage-social .social-icon {
    margin-right: 0.75em;
    width: 60px;
    text-align: center;
}
.mainpage-social .tile-top a {
    flex: 1;
    position: relative;
    text-decoration: none;
}
.mainpage-social .social-header {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.15em;
    margin: 0.5em 0 -0.15em;
}
.mainpage-social .social-tagline {
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.5em;
}
.mainpage-social.mainpage-discord .tile-bottom {
    background: #525ee0;
}
.mainpage-social .tile-bottom {
    border: none;
    padding: 1em 1.75em;
}
.mainpage-social .tile-bottom p {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.mainpage-social.mainpage-twitter .tile-top {
    background: #1da1f2;
}
.mainpage-social.mainpage-twitter .tile-bottom {
    background: #1e96e0;
}
.mainpage-editing {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);
}
.mainpage-editing .tile-top {
    background: #438ab5;
}
.mainpage-editing h2, .mainpage-editing a, .mainpage-editing a:visited, .mainpage-editing a:active {
    color: #ffffff;
}
.mainpage-editing p {
    color: rgba(255,255,255,0.9);
}
.mainpage-editing .tile-bottom {
    background: #3980ab;
    border: none;
    padding: 0.8rem 1.5rem 0.4rem;
}
.mainpage-editing ul {
    list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/d/df/WD10_-_landscape_background_-_light.svg);
}
.center, .centre {
    display: block;
    text-align: center;
}
.center {
    width: 100%;
    text-align: center;
}
*.center * {
    margin-left: auto;
    margin-right: auto;
}
.mainpage-fimg img {
    margin: 0.7em 0 1.15em;
    
    filter: drop-shadow(0 0.15em 0.25em rgba(0,0,0,0.15));
}
.mainpage-fimg .tile-top p:not(.byline) {
    font-size: 0.9em;
    line-height: 1.8em;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}