Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
+ | /* Popup container - can be anything you want */ | ||
+ | .popup { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | cursor: pointer; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | /* The actual popup */ | ||
+ | .popup .popuptext { | ||
+ | visibility: hidden; | ||
+ | width: 160px; | ||
+ | background-color: #555; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | border-radius: 6px; | ||
+ | padding: 8px 0; | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | bottom: 125%; | ||
+ | left: 50%; | ||
+ | margin-left: -80px; | ||
+ | } | ||
+ | |||
+ | /* Popup arrow */ | ||
+ | .popup .popuptext::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | margin-left: -5px; | ||
+ | border-width: 5px; | ||
+ | border-style: solid; | ||
+ | border-color: #555 transparent transparent transparent; | ||
+ | } | ||
+ | |||
+ | /* Toggle this class - hide and show the popup */ | ||
+ | .popup .show { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | } | ||
+ | |||
+ | /* Add animation (fade in the popup) */ | ||
+ | @-webkit-keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity: 1;} | ||
+ | } | ||
+ | |||
+ | @keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity:1 ;} | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
.vip3 i { | .vip3 i { | ||
opacity: 0.5; | opacity: 0.5; |
Revision as of 10:48, 13 January 2020
/* Popup container - can be anything you want */ .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } .vip3 i { opacity: 0.5; font-weight: normal; } .vip3 { font-weight: bold; background-color: #450202; color: red; } .vip2 i { opacity: 0.5; font-weight: normal; } .vip2 { font-weight: bold; background-color: #021b45; color: royalblue; } .vip i { opacity: 0.5; font-weight: normal; } .vip { font-weight: bold; background-color: #132b00; color: gold; } .toctogglelabel { color:#337800; } .tocnumber { color:#337800; } .fauxheader { font-weight: bold; color: white; font-size: 1.1em; padding-top: 0.2em; } p.fauxheader { margin: 0px; } .fadediv { background: linear-gradient(to right, rgba(27,61,0,1), rgba(27,61,0,0), rgba(27,61,0,0), rgba(27,61,0,0)); height: 2px; margin: 0px; } .transcriptsum { background-color: #081200; border: 2px solid #1b3d00; border-radius: 15px; margin-top: 1.2em; font-family: monospace; font-size: 1.1em; } .summary { margin-left: 4em; margin-right: 1em; padding: 0em 1em 0.5em 1em; border: 2px solid #1b3d00; border-top: none; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .toc, .mw-warning, .toccolours { background-color: black; border: 2px solid #1b3d00; border-radius: 15px; } ul { list-style-image: none; } .indented { padding: 1em; padding-top: 0.2em; padding-bottom: 0.2em; margin-left: 1.3em; } b { color: gold; } .supple { font-style: italic; opacity: 0.5; color: white; font-size: 0.8em; } .canquote { font-style: italic; font-weight: bold; color: gold; } .mw-body h1 { font-family: Arial; } .mw-body h2 { font-family: Arial; } .mw-collapsible-toggle { float:left; margin-left:0; margin-right:1em; background-color: #0d1c00; border: 3px solid #1b3d00; padding: 0.7em; border-radius: 15px; } .transcript { background-color: #081200; border: 2px solid #1b3d00; border-radius: 15px; margin-top: 1.2em; margin-bottom: 1.2em; font-family: monospace; font-size: 1.1em; } .poem { margin-left: 10px; margin-top: 20px; margin-right: 10px; } .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible) th:before, .mw-content-rtl .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible) th:before, .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible):before, .mw-content-rtl .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible):before, .mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle { float: none; } .mw-collapsible-text { color: gold; font-weight: bold; } .infobox { background-color: #0d1c00; border: 3px solid #1b3d00; float: right; margin: 0 0 1em 1em; padding: 0.7em; padding-top: 0px; padding-bottom: 0px; width: 33%; max-width: 300px; border-radius: 10px; } .infobox img { max-width: 95%; height: auto; margin-left: auto; margin-right: auto; border: 2px solid #1b3d00; border-top: 1px solid #1b3d00; border-radius: 15px; } .infobox-title { font-size: 1.5em; background-color: #1b3d00; border-top: 1px solid #1b3d00; border-bottom: 1px solid #1b3d00; padding-left: 0.4em; padding-right: 0.4em; } .infobox-title p { margin: 0px; text-align: center; background-color: #0d1c00; border: 1px solid #1b3d00; border-radius: 10px; } .infobox-image { text-align: center; background-color: #1b3d00; border: 2px solid #1b3d00; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .infobox-image p { text-align: left; font-style: italic; opacity: 0.5; margin-left: 0.7em; } .infobox table { width: 100%; background-color: #081200; border: 2px solid #081200; border-top-right-radius: 15px; border-top-left-radius: 15px; margin-top: 1em; } .infobox th { vertical-align: top; width: 100px; text-align: left; } .infobox td { vertical-align: top; } .infobox tr { display: block; border-bottom: 2px solid #1b3d00; } .infobox-title h2 { margin: 0px; padding: 0px; margin-top: 10px; font-size: 0.5em; } .nodivider tr { border-bottom: none; } #mw-panel { background-color:black; border: 3px solid #112600; padding-bottom: 20px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #mw-panel .portal h3 { color:white; } #mw-panel .portal .body li a { color:#337800; } #mw-panel .portal .body li a:hover { color:gold; } #mw-panel .portal .body li a:visited { color:#285e00; } #mw-head { background-color:black; } body { background-image: url(https://vignette.wikia.nocookie.net/johnisdead/images/5/50/Wiki-background/revision/latest?cb=20181031082134); } .mw-body, .parsoid-body { background-color: black; border: 3px solid #112600; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; color: white; } .mw-body-content p { color:white; } .mw-body h1, .mw-body-content h1 { color:white; } .mw-body-content h2 { color:white } .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { color:white; } .mw-parser-output a.external { color:#337800; } .mw-parser-output a.external:hover { color:gold; } .mw-parser-output a.external:visited { color:#285e00; } a { color:#337800; } a.new { color:#d33; } a:hover { color:gold; } a:visited { color:#285e00; } .vectorTabs { background-color: #112600; border-top-right-radius: 15px; border-top-left-radius: 15px; background-image: none; } .vectorTabs ul { background-image: none; } .vectorTabs li { background-image: none; padding: 0px 5px 0px 5px; } .vectorTabs li.selected { background-image: none; } .vectorTabs span { background-image: none; } .vectorTabs li.selected a, .vectorTabs li.selected a:visited { color: white; font-weight: normal; margin-top: 5px; background-color: black; border: 3px solid black; border-bottom: none; border-top-right-radius: 25px; border-top-left-radius: 25px; } .vectorTabs li a, .vectorTabs li a:visited { color: gold; font-weight: bold; } .vectorTabs li a:hover, .vectorTabs li a:hover { color: gold; text-shadow: 0px 0px 2px gold; text-decoration: none; font-weight: bold; } .vectorMenu h3 span { color:#337800; padding-top: 1.5em; } .vectorMenu li a { color:#337800; } .vectorMenu .menu { background-color: black; border: 2px solid #112600; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #editform, #toolbar, #wpTextbox1 { background-color: #060d00; color:white; } .editOptions { background-color: #0d1c00; color:white; border: 1px solid #112600; } textarea { border: 1px solid #112600; } .oo-ui-textInputWidget .oo-ui-inputWidget-input { background-color: black; color: white; border: 1px solid #112600; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: #1b3d00; color: gold; border-color: #1b3d00; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: #337800; color: gold; border-color: #337800; box-shadow: 0px 0px 4px gold; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { background-color: #1b3d00; color: #a55858; border-color: #1b3d00; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { background-color: #337800; color: gold; border-color: #337800; box-shadow: 0px 0px 4px gold; } pre, .mw-code { background-color: black; color: white; }