MediaWiki:Common.css
Jump to navigation
Jump to search
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.
/* CSS placed here will be applied to all skins */ :root { --VHLSWiki-primary-color: #C9CD80; --VHLSWiki-secondary-color: #61896F; --VHLSWiki-tertiary-color: #395E56; --VHLSWiki-border-color: #000000; } .VHLSWiki, .templateTheme { border: 3px solid var(--VHLSWiki-border-color); background-color: var(--VHLSWiki-tertiary-color); } .VHLSWiki th, .templatePrimary { background-color: var(--VHLSWiki-secondary-color); } .VHLSWiki td, .templateSecondary { background-color: var(--VHLSWiki-primary-color); } /* Site sub / Tagline settings */ #siteSub { display: block; text-align: center; font-size: calc(1em * 0.9); } body.page-Two_Worlds_Wiki.action-view #siteSub, body.page-Two_Worlds_Wiki.action-submit #siteSub { display: none; } /* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; } .cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; } /* This governs the page/section title placement */ h1, h2, h3, h4, h5, h6 { text-align: center } /* Template documentation styles If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0 auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #A78558; padding: 1em; } .doc-header { padding-bottom: 3px; border-bottom: 1px solid #A78558; margin-bottom: 1ex; } .doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #A78558; padding: 1em; } /* Classes permitting setting of alignment on desktop only or differently on desktop and mobile (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft { text-align: left; } .desktopcenter { text-align: center; } .desktopright { text-align: right; } /* This CSS governs the responsive 2 column main page layout */ #fp-container { display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } #fp-container main .columns .leftcol, #fp-container .columns .rightcol { width: 100%; margin: 0; padding: 0; } .fp-section { display: flex; flex-wrap: wrap; } #fp-top { grid-template-areas: a; } #fp-flex { grid-template-areas: b; } #fp-bottom { grid-template-areas: c; } /* Misc */ /* Main page */ .mainPageHeader { color: black; font-size: 160%; text-shadow: 0.3rem 0.3rem 0.3rem #0000004D; } .mainPageBody { background-color: var(--VHLSWiki-secondary-color); } .mainPageFooter { font-size: 80%; padding: 0.5rem 0.4rem; } .mainPageFlex { display: flex; } .mainPageDiv { padding: 0.25rem; border: 5px solid var(--VHLSWiki-border-color); background-color: var(--VHLSWiki-primary-color); margin: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1); } .mainPageContent { font-weight: bold; text-align: center; color: black; background-color: var(--VHLSWiki-secondary-color); font-size: 120%; border: 2px solid var(--VHLSWiki-border-color); padding: 0.5rem 0.4rem; margin-bottom: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); } .mainPageContent > a, .mainPageFooter > a, .versiondiv > div > a { color: black; text-decoration: underline; } .versiondiv { background-color: var(--VHLSWiki-secondary-color); border: solid 2px var(--VHLSWiki-border-color); padding: 0.5rem; font-weight: normal; font-size: 80%; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); } /* End Main page */ .explain { text-decoration: underline dotted; } /* If you want the tabs to be centered rather than left-justified with respect to the tab content */ ul.tabbernav { text-align:center; } /* External links logos */ #content a[href^="https://www.youtube.com/"].external { background: url("https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg") center right no-repeat; background-size: 16px; padding-right: 18px; } #content a[href^="https://twitter.com/"].external { background: url("https://upload.wikimedia.org/wikipedia/commons/c/ce/X_logo_2023.svg") center right no-repeat; background-size: 16px; padding-right: 18px; } #content a[href^="https://www.reddit.com/"].external { background: url("https://upload.wikimedia.org/wikipedia/commons/1/14/Ionicons_logo-reddit.svg") center right no-repeat; background-size: 16px; padding-right: 18px; } /* hide potentially sensitive data on file pages */ #mw_metadata .exif-gpslatitude, #mw_metadata .exif-gpslongitude, #mw_metadata .exif-artist { display: none; } /* Sidebar Separator */ #n- { background: #a2a9b1; font-size: 2px; margin: 2.2em 0; } /* Discord */ #n-Discord a { background: url(https://discord.com/api/guilds/791823141525651506/embed.png) no-repeat; color: transparent !important; display: inline-block; height: 20px; width: 110px; } @media screen and (max-width: 550px) { .mainPageFlex { flex-flow: row wrap; } .mainPageDiv, .niwa { width: -webkit-fill-available!important; } } @media screen and (min-width: 650px) { #fp-container .columns .leftcol { float: left; width: 50%; } #fp-container .columns .rightcol { float: right; width: 50%; } } @media screen and (min-width: 990px) { #fp-container { grid-template-areas: "a b" "c c"; grid-template-columns: 50% 50%; } } @media screen and (max-width: 1023px) { .mainPageAbout { max-height: 100vh; overflow-y: scroll; } } @media screen and (min-width: 1350px) { #fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } } @media screen and (max-width: 1439px) { .mainPageDiv { padding: 0.5rem; } } /* Classes from Gamepedia Help Wiki's Common.css */ .ambox { background-color: rgba(120,120,120,0.2); border-bottom-color: #383838; border-right-color: #383838; border-top-color: #383838; border-collapse: collapse; font-size: 95%; margin: 0 auto 2px auto; width: 80%; } .ambox-gray { border-left-color: #383838; } .ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; } .ambox + .ambox { margin-top: -2px; } .ambox-text { padding: 0.25em 0.5em; } .ambox-image { padding: 2px 0px 2px 0.5em; text-align: center; width: 60px; } .ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; } /* Ambox colors */ .ambox-blue { border-left: 10px solid #1e90ff; } .ambox-red { border-left: 10px solid #b22222; } .ambox-orange { border-left: 10px solid #f28500; } .ambox-yellow { border-left: 10px solid #f4c430; } .ambox-purple { border-left: 10px solid #9932cc; } .ambox-wiki { border-left: 10px solid #454340; } .ambox-gray { border-left: 10px solid #bba; } .ambox-green { border-left: 10px solid #228b22; }