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.
/* ================== */
/* I. GENERAL STYLING */
/* ================== */
html, body {
height:100% !important;
}
div#mw-panel {
min-height: 100% !important;
border-right: 1px solid #7F7F7F !important;
}
/* fonts */
@font-face {
font-family: 'OMORI_GAME';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/OMORI_GAME.woff2) format('woff2');
}
@font-face {
font-family: 'OMORI_GAME2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/OMORI_GAME2.woff2) format('woff2');
}
@keyframes slide {
0%{
background-position: 0px 0px;
}
100%{
background-position: -1023px 0px;
}
}
/* ====================== */
/* II. USER-RELATED STUFF */
/* ====================== */
/* personal link colors */
#p-personal li * {
color: #ffffff !important;
text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000;
}
/* staff colors */
.mw-userlink[title="User:Gilbert"],
li#pt-userpage a[href="/User:Gilbert"],
.mw-userlink[title="User:Boba"],
li#pt-userpage a[href="/User:Boba"],
.mw-userlink[title="User:Rph"],
li#pt-userpage a[href="/User:Rph"],
a.trusted, .bur, .adm, .mod, .loc, .helpUser {
color:#FF7AD7 !important;
}
/* bold all userlinks */
.mw-userlink {
font-weight: bold;
}
/* bold personal user link */
li#pt-userpage {
font-weight: bold;
}
/* personal tab user icon */
li#pt-userpage a {
background-image: url(https://omori.wiki/images/6/67/Login_OMORI.png);
background-position: left top 3px;
padding-left: 24px !important;
background-size: 20px;
height: 16px;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* don't wordwrap top links on main page */
.mp-content-table ul > li a.external.text, .mp-content-table ul > li > b > a
{
white-space: nowrap;
}
/* ================== */
/* III. AMBOX STYLING */
/* ================== */
th.ambox-text, td.ambox-text {
border: none;
padding: 0.25em 0.9em;
width: 100%;
}
td.ambox-image {
border: none;
padding: 2px 0 2px 0.9em;
text-align: center;
}
td.ambox-image2 {
border: none;
padding: 2px 0.9em 2px 0;
text-align: center;
}
td.ambox-empty-cell {
border: none;
padding: 0px;
width: 1px;
}
table.ambox {
margin: 0px 10%;
border: 1px solid #AAAAAA;
background: #fbfbfb;
}
table.ambox + table.ambox {
margin-top: -1px;
}
.ambox th.ambox-text, .ambox td.ambox-text {
padding: 0.25em 0.5em;
}
.ambox td.ambox-image {
padding: 2px 0 2px 0.5em;
}
.ambox td.ambox-image2 {
padding: 2px 0.5em 2px 0;
}
/* red */
td.ambox-delete, td.ambox-serious {
border-left: 10px solid #b22222;
}
/* orange */
table.ambox-content, td.ambox-content {
border-left: 10px solid #f28500;
}
/* yellow */
table.ambox-style, td.ambox-style {
border-left: 10px solid #ffcc00;
}
/* gray-gold */
table.ambox-protection, td.ambox-protection {
border-left: 10px solid #bba;
}
/* green */
table.ambox-good, td.ambox-good {
border-left: 10px solid #73D216;
}
/* blue */
table.ambox-notice, td.ambox-notice {
border-left: 10px solid #1e90ff;
}
/* dark blue */
table.ambox-notice-2, td.ambox-notice-2 {
border-left: 10px solid #3f6180;
}
/* pink */
table.ambox-delete, table.ambox-serious {
background: #FEE;
border: 1px solid #BB7070;
}
/* black */
table.ambox-images,td.ambox-images {
border-left: 10px solid #000000;
}
/* fmbox */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div.mw-newarticletext,
div#mw-protect-cascadeon,
.fmbox {
clear: both;
margin: 0.2em 0;
background-color: #f9f9f9;
border: 1px solid #aaa;
padding: 0.125em 0.25em;
margin: 3px auto;
width: auto;
}
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div.mw-newarticletext,
div#mw-protect-cascadeon {
padding: 0.5em 1em;
}
th.fmbox-text, td.fmbox-text {
border: none;
padding: 0em;
width: 100%;
}
td.fmbox-image {
border: none;
padding: 2px 0 2px 0;
text-align: center;
}
td.fmbox-image2 {
border: none;
padding: 2px 0 2px 0;
text-align: center;
}
td.fmbox-empty-cell {
border: none;
padding: 0px;
width: 1px;
}
/* ================ */
/* IV. EDIT NOTICES */
/* ================ */
.editnoticemain {
background-color: #F7FFF5; border: 1px solid #D4F2CE;
}
.editnoticered {
background-color: #FFDBDB; border: 1px solid #BB7070;
}
.editnoticeblue {
background-color: #E6F2FF; border: 1px solid #B8C7D9;
}
/* =========== */
/* V. SKINNING */
/* =========== */
.mw-wiki-logo {
background-size: 135px 135px;
}
#p-logo
{
border-right: 1px solid #7F7F7F !important;
}
#mw-page-base {
width: 100%;
}
/* footer */
footer#footer.mw-footer {
margin-left: 10em;
border-left: 1px solid #7F7F7F !important;
}
/* slightly smaller page heading */
/* #firstHeading {
font-size: 1.7em !important;
} */
#content {
border-left: 1px solid #7F7F7F !important;
border-top: 1px solid #7F7F7F !important;
border-bottom: 1px solid #7F7F7F !important;
}
body {
overflow-x: hidden;
}
/* fix for top section of sidebar */
div.body.vector-menu-content {
margin-left: 0.5em !important;
}
/* make font generally smaller */
/* #bodyContent, .mw-body-content {
font-size: 0.8em;
} */
/* force bullet lists to not use img */
ul {
list-style-image: none !important;
}
/* fix for 982px screen discrimination code */
@media screen and (min-width:982px) {
div#content {
margin-left: 10em !important;
padding: 1em 1em 1em 1em !important;
}
#mw-panel {
padding-left: 0em !important;
}
#p-search {
margin-right: 0.5em !important;
}
#p-personal {
right: 0.75em !important;
}
}
/* keeping for now, account for additions to shared.css */
table.wikitable {
border-collapse: separate;
}
/* keeping for now, for site notice */
#siteNotice div, #siteNotice p {
margin: -0.5em 0em 1.5em 0em
}
/* TABS */
/* make tabs use relative so center section works */
nav.vectorTabs ul li {
position: relative;
}
/* get rid of default tab separators */
nav.vectorTabs, nav.vectorTabs ul, nav.vectorMenu h5 a {
background: none !important;
}
/* position text correctly */
nav.vectorTabs ul li, nav.vectorTabs ul li * {
margin: 0px !important;
padding: 0px !important;
background: none !important;
}
/* sidebar separator */
h3#p-tb-label {
background-position: left bottom;
background-size: 122px 1px;
}
nav.vectorTabs ul li * {
font-size: 22px !important;
}
/* UNSELECTED TAB */
/* tab positioning and left */
nav.vectorTabs ul li {
padding-left: 10px !important;
height: 24px !important;
margin-top: 16px !important;
margin-right: 4px !important;
background-size: 20px 24px !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
}
/* center */
nav.vectorTabs ul li:before {
content: "";
width: calc(100% - 12px);
position: absolute;
top: 0;
left: 8px;
height: 24px;
background-size: 10px 24px !important;
}
/* tab positioning and right */
nav.vectorTabs ul li a {
padding-right: 10px !important;
padding-left: 10px !important;
margin-left: -10px !important;
padding-bottom: 0px !important;
line-height: 24px !important;
height: 24px !important;
display: block !important;
position: relative !important;
background-size: 20px 24px !important;
background-position: bottom right !important;
background-repeat: no-repeat !important;
}
/* UNCREATED TAB */
/* left */
nav.vectorTabs ul li.new {
background-size: 20px 24px !important;
}
/* center */
nav.vectorTabs ul li.new:before {
content: "";
width: calc(100% - 14px);
position: absolute;
top: 0;
left: 8px;
height: 24px;
background-size: 10px 24px !important;
}
/* right */
nav.vectorTabs ul li.new a {
background-size: 20px 24px !important;
}
/* SELECTED TAB */
/* left */
nav.vectorTabs ul li.selected {
background-size: 20px 24px !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
}
/* center */
nav.vectorTabs ul li.selected:before {
content: "";
width: calc(100% - 14px);
position: absolute;
top: 0;
left: 8px;
height: 24px;
background-size: 10px 24px !important;
}
/* right */
nav.vectorTabs ul li.selected a {
background-size: 20px 24px !important;
background-position: bottom right !important;
background-repeat: no-repeat !important;
}
/* disable text coloring for selected tabs */
nav.vectorTabs ul li.selected * {
cursor: default !important;
}
/* MORE TAB */
/* more tab bg and fixing + left */
nav.vectorMenu {
top: 16px !important;
transition: none !important;
height: 24px;
background-size: 20px 24px !important;
background-repeat: no-repeat;
}
/* center */
h3#p-cactions-label::before {
content: "";
width: calc(100% - 14px);
position: absolute;
top: 0;
left: 8px;
height: 24px;
background-size: 10px 24px !important;
}
/* right - this is really hacky and will break in an update guaranteed */
nav#p-cactions.vector-menu.vector-menu-dropdown.vectorMenu::after {
content: "";
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 24px;
background-size: 20px 24px !important;
background-repeat: no-repeat;
background-position: top right;
}
/* more tab text fixing, get rid of default separator */
div#mw-head nav.vectorMenu h3 {
padding: 3px 10px 3px 10px;
background-image: none;
height: 24px;
}
/* replace default more down arrow */
h3#p-cactions-label:after {
z-index: 11;
width: 12px !important;
height: 12px !important;
top: 7px !important;
left: 9px !important;
opacity: 1 !important;
background-size: 12px 12px;
}
/* margin between tabs and more tab */
/* ul.vector-menu-content-list {
margin-right:4px;
} */
/* more tab font */
nav.vectorMenu h3 span {
padding: 3px 0px 3px 15px;
font-size: 22px !important;
z-index: 10;
position: relative;
}
/* more dropdown menu */
nav.vectorMenu .menu {
top: 1.5em !important;
left: 0px !important;
}
/* more dropdown menu bg */
nav.vectorMenu ul {
border-left: 1px solid #7F7F7F !important;
border-right: 1px solid #7F7F7F !important;
border-bottom: 1px solid #7F7F7F !important;
margin-left: 0px !important;
background-position: top !important;
background-repeat: repeat-x !important;
}
ul.menu.vector-menu-content-list {
min-width: 64px;
}
/* SEARCH TAB */
/* search bg */
#p-search {
width: 280px !important;
max-width: 280px !important;
height: 24px !important;
margin-top: 16px !important;
margin-left: 4px !important;
background-size: 280px 24px !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
}
/* fix search content being super low */
#p-search form, #p-search input {
margin-top: 0px !important;
}
/* fix search button being at an offset */
#simpleSearch {
background: none !important;
border: none !important;
width: 280px !important;
bottom: 7px !important;
top: 1px !important;
}
/* search input */
#searchInput {
border: none !important;
margin: 0px !important;
padding: 4px !important;
height: 18px !important;
font-size: 11px !important;
border-radius: 2px !important;
-moz-border-radius: 2px !important;
margin-left: 4px !important;
width: 186px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* search button */
#searchButton {
border: 0px !important;
padding: 0px !important;
width: 81px !important;
height: 18px !important;
cursor: pointer !important;
text-indent: -5000px !important;
position: relative !important;
top: 2px !important;
right: 4px !important;
float: right !important;
background-size: 81px 36px !important;
background-position: top !important;
background-repeat: no-repeat !important;
}
/* search button hover */
#searchButton:hover {
background-position: 0px -18px !important;
}
/* main page styling */
.mp-content-table {
width: 100%;
}
.mp-content-header {
font-size: 140%;
border: none;
padding-top:10px;
padding-bottom:10px;
margin:-3px;
padding:10px;
}
div.mp-content-header-alt {
font-size: 140%;
font-weight: bold;
border: none;
text-align: left;
padding-top:10px;
padding-bottom:10px;
margin:-3px;
padding:10px;
}
.mp-content-spacer {
margin-left: 3px;
margin-right: 3px;
margin-bottom: -3px;
color: none;
border: none;
text-align: center;
}
.mp-content-image a img {
width: 50%;
height: 100%;
}