MediaWiki:Common.css: Forskelle mellem versioner
Hop til navigation
Admin (diskussion | bidrag) No edit summary |
Admin (diskussion | bidrag) No edit summary |
||
(7 mellemliggende versioner af 3 andre brugere ikke vist) | |||
Linje 1: | Linje 1: | ||
/* CSS | /* CSS placed here will be applied to all skins */ | ||
div. | |||
/* HEADER AND TOP NAVIGATION */ | |||
/* Prevent sitenotice from showing */ | |||
div.sitenotice { | |||
display: none; | |||
} | |||
#mirage-fixed-header { | |||
background: #2d5488; | |||
box-shadow: none; | |||
} | |||
#mirage-top-header { | |||
background: #feb; | |||
} | |||
/* Respect width of logo */ | |||
img.mw-logo-icon { | |||
width: inherit; | |||
} | |||
/* Word mark color in fixed header */ | |||
.mw-wordmark-container span.mw-logo-wordmark { | |||
color: #fff; | |||
} | |||
/* Remove duplicated word mark from main page */ | |||
#mirage-navigation-header .mw-logo-wordmark { | |||
display: none; | |||
} | |||
.skin-mirage-dropdown-list a { | |||
font-weight: normal; | |||
} | |||
div#right-navigation { | |||
background-color: transparent; | |||
} | |||
li.mw-list-item, | |||
li.skin-mirage-dropdown-container { | |||
background: #2d5488; | |||
} | |||
/* Colors of Recent Changes and Edit rows buttons on hover*/ | |||
#module-site-tools > ul > li:hover, | |||
li .mw-list-item:hover { | |||
background: #2d5488; | |||
} | |||
/* Background color of "more" button in Recent Changes row */ | |||
#module-site-tools > ul > li:last-child { | |||
background: #2d5488; | |||
color: black; | |||
} | |||
/* Backgorund color of the contents of the dropdown list on "more" button in Recent Changes row */ | |||
div.skin-mirage-dropdown-list > ul > li.mw-list-item { | |||
background: none; | |||
} | |||
/* Move wiki navigation menus to same line as logo */ | |||
div#module-site-navigation { | |||
margin-top: -2.5rem; | |||
} | |||
/* Limit space used by site navigation to avoid overlapping buttons */ | |||
div#module-site-navigation.skin-mirage-mirage-navigation { | |||
max-width: 70%; | |||
} | |||
/* Move Right Navigation (edit button etc.) in line with Recent changes */ | |||
div#right-navigation { | |||
position: absolute; | |||
margin-right: 15px; | |||
margin-top: -1.25rem; | |||
right: 0px; | |||
} | |||
/* Recent Changes button text */ | |||
#module-site-tools > ul > li:nth-child(1) > a { | |||
color: #fff; | |||
} | |||
/* Recent Changes button hover text color */ | |||
#module-site-tools > ul > li:hover > :not(.skin-mirage-ooui-icon-no-label) { | |||
color: rgba(255,255,255,0.85); | |||
} | |||
/* Edit button row hover styling */ | |||
#p-views > ul > li:hover, | |||
#mirage-right-rail-button:hover { | |||
background-color: rgba(255,255,255,0.15); | |||
background: #2d5488; | |||
color: #404244; | |||
} | |||
/* Have to set this color back to transparent to ensure no text shows on the right rail button on hover */ | |||
#mirage-right-rail-button:hover { | |||
color: transparent; | |||
} | |||
/* Adjust color for Recent Changes icon */ | |||
.skin-mirage-ooui-icon-recentChanges:before { | |||
background-image: url(/load.php?modules=skin.mirage.icons&image=recentChanges&format=rasterized&lang=en&skin=fallback&version=14jep); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E recent changes %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M1 3h16v2H1V3Zm0 6h11v2H1V9Zm0 6h7v2H1v-2Zm17.8-3.1 1-1.1a.6.6 0 0 0 0-.8L18 8.2a.6.6 0 0 0-.8 0l-1 1 2.6 2.7Zm-3.3-2L10 15.3V18h2.6l5.6-5.5-2.7-2.7Z%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Adjust color for Special Pages icon */ | |||
.skin-mirage-ooui-icon-specialPages:before { | |||
background-image: url(/load.php?modules=skin.mirage.icons&image=specialPages&format=rasterized&lang=en&skin=fallback&version=dk89p); | |||
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E special pages %3C/title%3E%3Cg fill=%22%23000%22%3E%3Cpath fill=%22%23fff%22 d=%22M7 0a2 2 0 0 0-2 2h9a2 2 0 0 1 2 2v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M13 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2zm-6.5-3.5.41-1.09L8 15l-1.09-.41-.41-1.09-.41 1.09L5 15l1.09.41.41 1.09zm2.982-.949.952-2.561 2.53-.964-2.53-.964L9.482 8.5l-.952 2.562-2.53.964 2.53.964.952 2.561zM6 10.5l.547-1.453L8 8.5l-1.453-.547L6 6.5l-.547 1.453L4 8.5l1.453.547L6 10.5z%22/%3E%3C/g%3E%3C/svg%3E") | |||
} | |||
/* Adjust color for Random Page icon */ | |||
.skin-mirage-ooui-icon-die:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=die&format=rasterized&skin=fallback&version=14jep); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E die %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm2 16a2 2 0 1 1 2-2 2 2 0 0 1-2 2zM5 7a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm5 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm5 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm0-10a2 2 0 1 1 2-2 2 2 0 0 1-2 2z%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Adjust color for three dots menu icon */ | |||
.skin-mirage-ooui-icon-ellipsis:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=ellipsis&format=rasterized&skin=fallback&version=14jep); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E ellipsis %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%222%22/%3E%3Ccircle cx=%223%22 cy=%2210%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%222%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Background color for Edit Button and Right Rail collapse/expand button */ | |||
#mirage-edit-button > li, | |||
#mirage-right-rail-button { | |||
background: #2d5488; | |||
} | |||
/* Border color definitions for the top navigation buttons */ | |||
#mirage-edit-button > li, | |||
#mirage-edit-button > li + li, | |||
#mirage-edit-button > li:first-child, | |||
#mirage-edit-button > li:last-child, | |||
#mirage-edit-button > li:hover, | |||
#mirage-edit-button > li + li:hover, | |||
#mirage-edit-button > li:hover:first-child, | |||
#mirage-edit-button > li:hover:last-child, | |||
#mirage-right-rail-button, | |||
#mirage-right-rail-button:focus { | |||
border-color: #b99968; | |||
} | |||
/* Hover color for Edit button */ | |||
#mirage-edit-button > li:first-child a:hover { | |||
color: rgba(255,255,255,0.85); | |||
} | |||
/* Color for Edit button */ | |||
#mirage-edit-button > li:first-child a { | |||
color: white; /*Previous value #white*/ | |||
} | |||
/* Adjust color for Edit icon */ | |||
.skin-mirage-ooui-icon-edit-invert:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=edit&variant=invert&format=rasterized&skin=fallback&version=dk89p); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E edit %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Adjust color for Watch icon */ | |||
.skin-mirage-ooui-icon-star-invert:before,#ca-watch a:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=star&variant=invert&format=rasterized&skin=fallback&version=dk89p); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E star %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z%22/%3E%3C/g%3E%3C/svg%3E")} | |||
/* Adjust color for Unwatch icon */ | |||
.skin-mirage-ooui-icon-unStar-invert:before,#ca-unwatch a:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=unStar&variant=invert&format=rasterized&skin=fallback&version=dk89p); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E un-star %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z%22/%3E%3C/g%3E%3C/svg%3E")} | |||
/* Adjust color for "More" menu icon */ | |||
.skin-mirage-ooui-icon-indicator-down-invert:before { | |||
background-image:url(/load.php?modules=skin.mirage.indicators&image=down&variant=invert&format=rasterized&skin=fallback&version=1h8wn); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Adjust color for Right Rail button icon */ | |||
.skin-mirage-ooui-icon-doubleChevronEnd:before { | |||
background-image:url(/load.php?modules=skin.mirage.icons&image=doubleChevronEnd&format=rasterized&lang=en&skin=fallback&version=14jep); | |||
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E double chevron start %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M11 2 9.7 3.3l6.6 6.7-6.6 6.7L11 18l8-8zM2.5 2 1 3.3 7.8 10l-6.7 6.7L2.5 18l8-8z%22/%3E%3C/g%3E%3C/svg%3E"); | |||
} | |||
/* Hide the editLock icon that doesn't want to be edited for some unexplainable reason */ | |||
.skin-mirage-ooui-icon-editLock-invert:before { | |||
display: none; | |||
} | |||
/* Dropdown list for history, deletion, protection etc. */ | |||
li#ca-history, | |||
li#ca-delete, | |||
li#ca-move, | |||
li#ca-protect { | |||
background: none; | |||
} | |||
/* Remove Main Page header from Main page */ | |||
body.page-Main_Page .mw-page-title-main { | |||
display: none; | |||
} | |||
/* Remove the Page and Discussion buttons from all pages */ | |||
div#left-navigation nav#p-namespaces { | |||
display: none; | |||
} | |||
#module-page-navigation { | |||
margin: 0; | |||
} | |||
/* Styling of username when logged in / don't show username */ | |||
#mirage-fixed-header .skin-mirage-username { | |||
color: orange; | |||
display: none; | |||
} | |||
/* Styling for background of dropdown on username/not logged in */ | |||
.skin-mirage-personaltools-dropdown li { | |||
background: none; | |||
} | |||
/* Text color of dropdown on username/not logged in */ | |||
li#pt-login { | |||
color: black; | |||
} | |||
/* Text color on dropdown when no new messages */ | |||
.skin-mirage-no-new-messages { | |||
color: black; | |||
} | |||
/* Main background */ | |||
body { | |||
background: #a6805a; | |||
background-position: center center; | |||
background-size: cover; | |||
background-attachment: fixed; | |||
background-repeat: no-repeat; | |||
background-image: url("/skins/MirageGrepolis/images/background.jpg"); | |||
background-position: center center; | |||
background-size: cover; | |||
background-repeat: no-repeat; | |||
} | |||
/* Removes endless spinner for logged out users on main page */ | |||
#mw-indicator-smw-entity-examiner { | |||
display: none; | |||
} | |||
/* GENERAL ARTICLE STYLING */ | |||
main#content.mw-body, | |||
main#content.mw-body-content, | |||
#mirage-navigation-header, | |||
#module-page-navigation, | |||
.skin-mirage-content-container { | |||
background: #feb; | |||
} | |||
h1, | |||
h2, | |||
.skin-mirage-right-rail-module h3, | |||
hr { | |||
border-color: #d4ba91; | |||
} | |||
p, | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6, | |||
li, | |||
i { | |||
color: #5e321a; | |||
} | |||
h2 a, | |||
h2 a:visited { | |||
font-size: normal; | |||
color: #3d2718; | |||
font-weight: bold; | |||
} | |||
h2 a:hover { | |||
color: #1480a4; | |||
} | |||
p a, | |||
p a:visited, | |||
li a, | |||
li a:visited { | |||
color: #3d2718; | |||
font-weight: bold; | |||
} | |||
p a:hover { | |||
color: #1480a4; | |||
} | |||
/* Warning on MediaWiki:Custom.css page */ | |||
.mw-editinginterface { | |||
color: ##5e321a; | |||
} | |||
/* Table of Contents styling */ | |||
.toc { | |||
background-color: #d4ba91; | |||
border: 1px solid #996b39; | |||
border-color: rgba(110,57,0,0.5); | |||
min-width: 175px; | |||
} | |||
.toc h2 { | |||
color: #5e321a; | |||
} | |||
.toc li a, | |||
.toc li a:visited, | |||
.toctogglelabel { | |||
color: #5f391a; | |||
font-weight: normal; | |||
} | |||
/* In-article edit icon styling */ | |||
a.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small, | |||
a:visited.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small { | |||
color: #3d2718; | |||
} | |||
a:hover.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small { | |||
color: #1480a4; | |||
} | |||
/* TABLE STYLING */ | |||
table th { | |||
font-weight: normal; | |||
background-color: #b99968; | |||
color: #5e321a; | |||
padding: 10px; | |||
} | |||
table, | |||
th, | |||
td, | |||
.wikitable { | |||
/* Border definition needs to be marked !important to overwrite border color defined inline in multiple navigation templates like Template:GodNav; */ | |||
border: 1px solid rgba(110,57,0,0.5) !important; | |||
} | |||
/* Special .announcement class table on the Main Page */ | |||
th.announcement { | |||
font-weight: bold; | |||
} | |||
table td .announcement { | |||
color: 5e321a; | |||
} | |||
table td, | |||
table th { | |||
text-align: center; | |||
padding: 5px; | |||
box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.1) inset; | |||
background-color: #d4ba91 !important; | |||
} | |||
td, | |||
th { | |||
padding: 0; | |||
} | |||
td { | |||
display: table-cell; | |||
vertical-align: inherit; | |||
} | |||
table { | |||
display: table !important; | |||
width: 100%; | |||
border-collapse: separate; | |||
border-spacing: 1px !important; | |||
margin-bottom: 4px; | |||
border-radius: 3px; | |||
border-color: rgba(110,57,0,0.5); | |||
} | |||
table center { | |||
color: #5e321a; | |||
} | |||
table a, | |||
table a:visited { | |||
color: #3d2718; | |||
} | |||
table a:hover { | |||
color: #1480a4; | |||
} | |||
/* RIGHT RAIL STYLING */ | |||
#mirage-right-rail { | |||
background: #feb; | |||
} | |||
#mirage-right-rail a, | |||
#mirage-right-rail a:visited { | |||
color: #3d2718; | |||
} | |||
#mirage-right-rail a:hover { | |||
color: #1480a4; | |||
} | |||
/* Remove background color on Page tools section of Right Rail */ | |||
.skin-mirage-module-body ul.skin-mirage-unstyled-list > li { | |||
background: none; | |||
} | |||
/* FOOTER STYLING */ | |||
footer { | |||
display: grid; | |||
align-content: center; | |||
justify-content: center; | |||
justify-items: center; | |||
margin-top: -25px; | |||
} | |||
footer.mw-footer { | |||
background-color: transparent; | |||
box-shadow: none; | |||
align-content: center; | |||
} | |||
#footer-info-lastmod, | |||
#footer-info-copyright, | |||
#footer-places-privacy, | |||
#footer-places-about, | |||
#footer-places-disclaimer { | |||
display: inline-block; | |||
margin-right: 15px; | |||
} | |||
li#footer-info-lastmod, | |||
li#footer-info-copyright { | |||
font-size: small; | |||
color: #efdba6; | |||
} | |||
footer ul.skin-mirage-unstyled-list#footer-info { | |||
margin-right: 0px; | |||
color: #efdba6; | |||
text-shadow: 1px 1px 1px black; | |||
} | |||
div#footer-places { | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | |||
.mw-footer p, | |||
.mw-footer h3 { | |||
color: #efdba6; | |||
} | |||
.mw-footer a { | |||
color: #efdba6; | |||
font-weight: normal; | |||
} | |||
.mw-footer a:hover { | |||
color: #efdba6; | |||
} | |||
.mw-footer li { | |||
line-height: 1 !important; | |||
} | |||
div#footer-places { | |||
margin-left: initial; | |||
} | |||
h3#footer-places-label { | |||
display: none; | |||
} | |||
/* The animated tiles on the main page */ | |||
#mf-menu { | |||
display: none; | |||
} | |||
.infinitum { | |||
background-color: #F9F9F9; | |||
border: 1px solid #AAAAAA; | |||
font-size: 95%; | |||
padding: 5px; | |||
} | } | ||
.infinirow { | |||
border-bottom: 1px solid #AA9977 !important; | |||
border-left: medium none currentColor !important; | |||
border-right: 1px solid #AA9977 !important; | |||
border-top: medium none currentColor !important; | |||
padding: 2px 3px; | |||
} | } | ||
.tilt { | |||
. | |||
-webkit-transition: all 1s ease; | -webkit-transition: all 1s ease; | ||
-moz-transition: all 1s ease; | -moz-transition: all 1s ease; | ||
Linje 61: | Linje 535: | ||
} | } | ||
. | .tilt:hover { | ||
-webkit-transform: rotate(-10deg); | -webkit-transform: rotate(-10deg); | ||
-moz-transform: rotate(-10deg); | -moz-transform: rotate(-10deg); | ||
Linje 85: | Linje 559: | ||
} | } | ||
. | .move { | ||
-webkit-transition: all 1s ease; | -webkit-transition: all 1s ease; | ||
-moz-transition: all 1s ease; | -moz-transition: all 1s ease; | ||
Linje 93: | Linje 567: | ||
} | } | ||
. | .move:hover { | ||
-webkit-transform: translate(0px,-10px); | -webkit-transform: translate(0px,-10px); | ||
-moz-transform: translate(0px,-10px); | -moz-transform: translate(0px,-10px); | ||
Linje 101: | Linje 575: | ||
} | } | ||
.grow img { | .grow img { | ||
height: | height: 500px; | ||
width: | width: 750px; | ||
-webkit-transition: all 1s ease; | -webkit-transition: all 1s ease; | ||
Linje 129: | Linje 588: | ||
.grow img:hover { | .grow img:hover { | ||
width: | width: 1000px; | ||
height: | height: 1800px; | ||
} | } | ||
div.mvisto:hover { | |||
{ | opacity:0.7; | ||
} | } | ||
div.NavFrame { | |||
margin: 0; | |||
padding: 1px; | |||
border: 0px solid #322618; | |||
text-align: top; | |||
border-collapse: collapse; | |||
font-size: 95%; | |||
} | } | ||
div.NavFrame + div.NavFrame { | |||
border-top-style: none; | |||
border-top-style: hidden; | |||
} | } | ||
div.NavPic { | |||
background-color: #fff; | |||
margin: 0; | |||
padding: 0px; | |||
float: left; | |||
} | } | ||
div.NavFrame div.NavHead { | |||
# | height: 1.9em; | ||
font-weight: bold; | |||
background-color: #C0A875; | |||
position: relative; | |||
} | } | ||
div.NavFrame p, | |||
. | div.NavFrame div.NavContent, | ||
div.NavFrame div.NavContent p { | |||
font-size: 12px; | |||
} | } | ||
div.NavEnd { | |||
. | margin: 0; | ||
padding: 0; | |||
line-height: 1px; | |||
clear: both; | |||
} | } | ||
. | a.NavToggle { | ||
position: absolute; | position: absolute; | ||
top: | top: 0; | ||
right: 3px; | |||
font-weight: normal; | |||
font-size: 93%; | |||
} | } | ||
. | |||
.slideUp{ | |||
animation-name: slideUp; | |||
-webkit-animation-name: slideUp; | |||
animation-duration: 1s; | |||
-webkit-animation-duration: 1s; | |||
animation-timing-function: ease; | |||
-webkit-animation-timing-function: ease; | |||
visibility: visible !important; | |||
} | } | ||
@keyframes slideUp { | |||
- | 0% { | ||
transform: translateY(100%); | |||
} | |||
50%{ | |||
transform: translateY(-8%); | |||
} | |||
65%{ | |||
transform: translateY(4%); | |||
} | |||
80%{ | |||
transform: translateY(-4%); | |||
} | |||
95%{ | |||
transform: translateY(2%); | |||
} | |||
100% { | |||
transform: translateY(0%); | |||
} | |||
} | } | ||
@-webkit-keyframes slideUp { | |||
0% { | |||
-webkit-transform: translateY(100%); | |||
} | |||
50%{ | |||
-webkit-transform: translateY(-8%); | |||
} | |||
65%{ | |||
-webkit-transform: translateY(4%); | |||
} | |||
80%{ | |||
-webkit-transform: translateY(-4%); | |||
} | |||
95%{ | |||
-webkit-transform: translateY(2%); | |||
} | |||
100% { | |||
-webkit-transform: translateY(0%); | |||
} | |||
} | } | ||
. | |||
.slideRight{ | |||
animation-name: slideRight; | |||
-webkit-animation-name: slideRight; | |||
animation-duration: 1s; | |||
-webkit-animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
-webkit-animation-timing-function: ease-in-out; | |||
visibility: visible !important; | |||
} | } | ||
@keyframes slideRight { | |||
0% { | |||
transform: translateX(-150%); | |||
} | |||
50%{ | |||
transform: translateX(8%); | |||
} | |||
65%{ | |||
transform: translateX(-4%); | |||
} | |||
80%{ | |||
transform: translateX(4%); | |||
} | |||
95%{ | |||
transform: translateX(-2%); | |||
} | |||
100% { | |||
transform: translateX(0%); | |||
} | |||
} | } | ||
@-webkit-keyframes slideRight { | |||
0% { | |||
-webkit-transform: translateX(-150%); | |||
} | |||
50%{ | |||
-webkit-transform: translateX(8%); | |||
} | |||
65%{ | |||
-webkit-transform: translateX(-4%); | |||
} | |||
80%{ | |||
-webkit-transform: translateX(4%); | |||
} | |||
95%{ | |||
-webkit-transform: translateX(-2%); | |||
} | |||
100% { | |||
-webkit-transform: translateX(0%); | |||
} | |||
} | } | ||
.slideExpandUp{ | |||
animation-name: slideExpandUp; | |||
-webkit-animation-name: slideExpandUp; | |||
animation-duration: 1.6s; | |||
-webkit-animation-duration: 1.6s; | |||
animation-timing-function: ease-out; | |||
-webkit-animation-timing-function: ease -out; | |||
visibility: visible !important; | |||
} | } | ||
@keyframes slideExpandUp { | |||
0% { | |||
transform: translateY(100%) scaleX(0.5); | |||
} | |||
30%{ | |||
transform: translateY(-8%) scaleX(0.5); | |||
} | |||
40%{ | |||
transform: translateY(2%) scaleX(0.5); | |||
} | |||
50%{ | |||
transform: translateY(0%) scaleX(1.1); | |||
} | |||
60%{ | |||
transform: translateY(0%) scaleX(0.9); | |||
} | |||
70% { | |||
transform: translateY(0%) scaleX(1.05); | |||
} | |||
80%{ | |||
transform: translateY(0%) scaleX(0.95); | |||
} | |||
90% { | |||
transform: translateY(0%) scaleX(1.02); | |||
} | |||
100%{ | |||
transform: translateY(0%) scaleX(1); | |||
} | |||
} | } | ||
@-webkit-keyframes slideExpandUp { | |||
0% { | |||
-webkit-transform: translateY(100%) scaleX(0.5); | |||
} | |||
30%{ | |||
-webkit-transform: translateY(-8%) scaleX(0.5); | |||
} | |||
40%{ | |||
-webkit-transform: translateY(2%) scaleX(0.5); | |||
} | |||
50%{ | |||
-webkit-transform: translateY(0%) scaleX(1.1); | |||
} | |||
60%{ | |||
-webkit-transform: translateY(0%) scaleX(0.9); | |||
} | |||
70% { | |||
-webkit-transform: translateY(0%) scaleX(1.05); | |||
} | |||
80%{ | |||
-webkit-transform: translateY(0%) scaleX(0.95); | |||
} | |||
90% { | |||
-webkit-transform: translateY(0%) scaleX(1.02); | |||
} | |||
100%{ | |||
-webkit-transform: translateY(0%) scaleX(1); | |||
} | |||
} | } | ||
.pullUp{ | |||
animation-name: pullUp; | |||
-webkit-animation-name: pullUp; | |||
animation-duration: 1.1s; | |||
-webkit-animation-duration: 1.1s; | |||
animation-timing-function: ease-out; | |||
-webkit-animation-timing-function: ease-out; | |||
transform-origin: 50% 100%; | |||
-ms-transform-origin: 50% 100%; | |||
-webkit-transform-origin: 50% 100%; | |||
} | } | ||
@keyframes pullUp { | |||
0% { | |||
transform: scaleY(0.1); | |||
} | |||
40% { | |||
transform: scaleY(1.02); | |||
} | |||
60% { | |||
transform: scaleY(0.98); | |||
} | |||
80% { | |||
transform: scaleY(1.01); | |||
} | |||
100% { | |||
transform: scaleY(0.98); | |||
} | |||
80% { | |||
transform: scaleY(1.01); | |||
} | |||
100% { | |||
transform: scaleY(1); | |||
} | |||
} | } | ||
@-webkit-keyframes pullUp { | |||
0% { | |||
-webkit-transform: scaleY(0.1); | |||
} | |||
40% { | |||
-webkit-transform: scaleY(1.02); | |||
} | |||
60% { | |||
-webkit-transform: scaleY(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleY(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleY(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleY(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleY(1); | |||
} | |||
} | } | ||
.slideDown{ | |||
animation-name: slideDown; | |||
-webkit-animation-name: slideDown; | |||
animation-duration: 1s; | |||
-webkit-animation-duration: 1s; | |||
animation-timing-function: ease; | |||
-webkit-animation-timing-function: ease; | |||
visibility: visible !important; | |||
} | } | ||
@keyframes slideDown { | |||
0% { | |||
transform: translateY(-100%); | |||
} | |||
50%{ | |||
transform: translateY(8%); | |||
} | |||
65%{ | |||
- | transform: translateY(-4%); | ||
} | |||
80%{ | |||
transform: translateY(4%); | |||
} | |||
95%{ | |||
transform: translateY(-2%); | |||
} | |||
100% { | |||
transform: translateY(0%); | |||
} | |||
} | } | ||
@-webkit-keyframes slideDown { | |||
0% { | |||
-webkit-transform: translateY(-100%); | |||
} | |||
50%{ | |||
-webkit-transform: translateY(8%); | |||
} | |||
65%{ | |||
-webkit-transform: translateY(-4%); | |||
} | |||
80%{ | |||
-webkit-transform: translateY(4%); | |||
} | |||
95%{ | |||
-webkit-transform: translateY(-2%); | |||
} | |||
100% { | |||
-webkit-transform: translateY(0%); | |||
} | |||
} | } | ||
.bigEntrance{ | |||
animation-name: bigEntrance; | |||
-webkit-animation-name: bigEntrance; | |||
animation-duration: 1.6s; | |||
-webkit-animation-duration: 1.6s; | |||
animation-timing-function: ease-out; | |||
-webkit-animation-timing-function: ease-out; | |||
visibility: visible !important; | |||
} | } | ||
@keyframes bigEntrance { | |||
0% { | |||
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); | |||
opacity: 0.2; | |||
} | |||
30% { | |||
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); | |||
opacity: 1; | |||
} | |||
45% { | |||
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
60% { | |||
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
75% { | |||
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
90% { | |||
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
100% { | |||
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
} | } | ||
opacity:0; | @-webkit-keyframes bigEntrance { | ||
0% { | |||
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); | |||
opacity: 0.2; | |||
} | |||
30% { | |||
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); | |||
opacity: 1; | |||
} | |||
45% { | |||
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
60% { | |||
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
75% { | |||
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
90% { | |||
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
100% { | |||
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); | |||
opacity: 1; | |||
} | |||
} | } | ||
. | |||
.pulse:hover{ | |||
animation-name: pulse; | |||
-webkit-animation-name: pulse; | |||
animation-duration: 1.5s; | |||
-webkit-animation-duration: 1.5s; | |||
animation-iteration-count: infinite; | |||
-webkit-animation-iteration-count: infinite; | |||
} | } | ||
@keyframes pulse { | |||
0% { | |||
transform: scale(0.9); | |||
opacity: 0.7; | |||
} | |||
50% { | |||
transform: scale(1); | |||
opacity: 1; | |||
} | |||
100% { | |||
transform: scale(0.9); | |||
opacity: 0.7; | |||
} | |||
} | } | ||
. | |||
@-webkit-keyframes pulse { | |||
0% { | |||
-webkit-transform: scale(0.95); | |||
opacity: 0.7; | |||
} | |||
50% { | |||
-webkit-transform: scale(1); | |||
opacity: 1; | |||
} | |||
100% { | |||
-webkit-transform: scale(0.95); | |||
opacity: 0.7; | |||
} | |||
} | } | ||
. | |||
.stretchLeft{ | |||
animation-name: stretchLeft; | |||
-webkit-animation-name: stretchLeft; | |||
animation-duration: 1.5s; | |||
-webkit-animation-duration: 1.5s; | |||
animation-timing-function: ease-out; | |||
-webkit-animation-timing-function: ease-out; | |||
transform-origin: 100% 0%; | |||
-ms-transform-origin: 100% 0%; | |||
-webkit-transform-origin: 100% 0%; | |||
} | } | ||
. | |||
@keyframes stretchLeft { | |||
0% { | |||
transform: scaleX(0.3); | |||
} | |||
40% { | |||
transform: scaleX(1.02); | |||
} | |||
60% { | |||
transform: scaleX(0.98); | |||
} | |||
80% { | |||
transform: scaleX(1.01); | |||
} | |||
100% { | |||
transform: scaleX(0.98); | |||
} | |||
80% { | |||
transform: scaleX(1.01); | |||
} | |||
100% { | |||
transform: scaleX(1); | |||
} | |||
} | } | ||
@-webkit-keyframes stretchLeft { | |||
0% { | |||
-webkit-transform: scaleX(0.3); | |||
} | |||
40% { | |||
-webkit-transform: scaleX(1.02); | |||
} | |||
60% { | |||
-webkit-transform: scaleX(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleX(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleX(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleX(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleX(1); | |||
} | |||
} | } | ||
.stretchRight{ | |||
animation-name: stretchRight; | |||
-webkit-animation-name: stretchRight; | |||
animation-duration: 1.5s; | |||
-webkit-animation-duration: 1.5s; | |||
animation-timing-function: ease-out; | |||
-webkit-animation-timing-function: ease-out; | |||
transform-origin: 0% 0%; | |||
-ms-transform-origin: 0% 0%; | |||
-webkit-transform-origin: 0% 0%; | |||
} | } | ||
@keyframes stretchRight { | |||
0% { | |||
transform: scaleX(0.3); | |||
} | |||
40% { | |||
transform: scaleX(1.02); | |||
} | |||
60% { | |||
transform: scaleX(0.98); | |||
} | |||
80% { | |||
transform: scaleX(1.01); | |||
} | |||
100% { | |||
transform: scaleX(0.98); | |||
} | |||
80% { | |||
transform: scaleX(1.01); | |||
} | |||
100% { | |||
transform: scaleX(1); | |||
} | |||
} | } | ||
@-webkit-keyframes stretchRight { | |||
0% { | |||
-webkit-transform: scaleX(0.3); | |||
} | |||
40% { | |||
-webkit-transform: scaleX(1.02); | |||
} | |||
60% { | |||
-webkit-transform: scaleX(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleX(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleX(0.98); | |||
} | |||
80% { | |||
-webkit-transform: scaleX(1.01); | |||
} | |||
100% { | |||
-webkit-transform: scaleX(1); | |||
} | |||
} | } | ||
@media only screen and (max-width : 1300px) { | |||
.fastlinks { | |||
display:none !important; | |||
} | } | ||
} | } | ||
/*Make the semantic media wiki readable*/ | |||
.smw-editpage-help { | |||
background-color: #565656; | |||
} | } | ||
/* | /* Make the errors on uploading the same file readable */ | ||
. | .mw-destfile-warning { | ||
color: #5e321a; | |||
} | } | ||
.externalimage-holder { | |||
position: relative; | position: relative; | ||
margin: auto; | margin: auto; | ||
display: inline-block; | display: inline-block; | ||
width: | max-width: 600px; | ||
} | } | ||
. | .externalimage-holder img { | ||
width: 100%; | |||
height: auto; | |||
} | } | ||
img { | |||
max-width: 900px; | |||
} | } | ||
#document-wrapper | |||
{ | |||
max-width: 1200px; | |||
} | } | ||
. | /* Mobile-specific changes */ | ||
@media screen and (max-width: 720px) | |||
{ | |||
/* Remove the unnecessary logo next to the navigation links */ | |||
#mirage-navigation-header #mirage-logo { | |||
display: none; | |||
} | |||
/*Remove the wiki title on mobile*/ | |||
.mw-logo-wordmark { | |||
display: none; | |||
} | |||
/*Set max image size on mobile, so they scale*/ | |||
img { | |||
display: block; | |||
max-width:90%; | |||
width: auto; | |||
height: auto; | |||
} | |||
/* Remove text of Recent Changes button */ | |||
div#module-site-tools li.mw-list-item:first-child a { | |||
color: transparent; | |||
} | |||
} | } | ||
Nuværende version fra 10. aug. 2023, 12:19
/* CSS placed here will be applied to all skins */ /* HEADER AND TOP NAVIGATION */ /* Prevent sitenotice from showing */ div.sitenotice { display: none; } #mirage-fixed-header { background: #2d5488; box-shadow: none; } #mirage-top-header { background: #feb; } /* Respect width of logo */ img.mw-logo-icon { width: inherit; } /* Word mark color in fixed header */ .mw-wordmark-container span.mw-logo-wordmark { color: #fff; } /* Remove duplicated word mark from main page */ #mirage-navigation-header .mw-logo-wordmark { display: none; } .skin-mirage-dropdown-list a { font-weight: normal; } div#right-navigation { background-color: transparent; } li.mw-list-item, li.skin-mirage-dropdown-container { background: #2d5488; } /* Colors of Recent Changes and Edit rows buttons on hover*/ #module-site-tools > ul > li:hover, li .mw-list-item:hover { background: #2d5488; } /* Background color of "more" button in Recent Changes row */ #module-site-tools > ul > li:last-child { background: #2d5488; color: black; } /* Backgorund color of the contents of the dropdown list on "more" button in Recent Changes row */ div.skin-mirage-dropdown-list > ul > li.mw-list-item { background: none; } /* Move wiki navigation menus to same line as logo */ div#module-site-navigation { margin-top: -2.5rem; } /* Limit space used by site navigation to avoid overlapping buttons */ div#module-site-navigation.skin-mirage-mirage-navigation { max-width: 70%; } /* Move Right Navigation (edit button etc.) in line with Recent changes */ div#right-navigation { position: absolute; margin-right: 15px; margin-top: -1.25rem; right: 0px; } /* Recent Changes button text */ #module-site-tools > ul > li:nth-child(1) > a { color: #fff; } /* Recent Changes button hover text color */ #module-site-tools > ul > li:hover > :not(.skin-mirage-ooui-icon-no-label) { color: rgba(255,255,255,0.85); } /* Edit button row hover styling */ #p-views > ul > li:hover, #mirage-right-rail-button:hover { background-color: rgba(255,255,255,0.15); background: #2d5488; color: #404244; } /* Have to set this color back to transparent to ensure no text shows on the right rail button on hover */ #mirage-right-rail-button:hover { color: transparent; } /* Adjust color for Recent Changes icon */ .skin-mirage-ooui-icon-recentChanges:before { background-image: url(/load.php?modules=skin.mirage.icons&image=recentChanges&format=rasterized&lang=en&skin=fallback&version=14jep); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E recent changes %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M1 3h16v2H1V3Zm0 6h11v2H1V9Zm0 6h7v2H1v-2Zm17.8-3.1 1-1.1a.6.6 0 0 0 0-.8L18 8.2a.6.6 0 0 0-.8 0l-1 1 2.6 2.7Zm-3.3-2L10 15.3V18h2.6l5.6-5.5-2.7-2.7Z%22/%3E%3C/g%3E%3C/svg%3E"); } /* Adjust color for Special Pages icon */ .skin-mirage-ooui-icon-specialPages:before { background-image: url(/load.php?modules=skin.mirage.icons&image=specialPages&format=rasterized&lang=en&skin=fallback&version=dk89p); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E special pages %3C/title%3E%3Cg fill=%22%23000%22%3E%3Cpath fill=%22%23fff%22 d=%22M7 0a2 2 0 0 0-2 2h9a2 2 0 0 1 2 2v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M13 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2zm-6.5-3.5.41-1.09L8 15l-1.09-.41-.41-1.09-.41 1.09L5 15l1.09.41.41 1.09zm2.982-.949.952-2.561 2.53-.964-2.53-.964L9.482 8.5l-.952 2.562-2.53.964 2.53.964.952 2.561zM6 10.5l.547-1.453L8 8.5l-1.453-.547L6 6.5l-.547 1.453L4 8.5l1.453.547L6 10.5z%22/%3E%3C/g%3E%3C/svg%3E") } /* Adjust color for Random Page icon */ .skin-mirage-ooui-icon-die:before { background-image:url(/load.php?modules=skin.mirage.icons&image=die&format=rasterized&skin=fallback&version=14jep); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E die %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm2 16a2 2 0 1 1 2-2 2 2 0 0 1-2 2zM5 7a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm5 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm5 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm0-10a2 2 0 1 1 2-2 2 2 0 0 1-2 2z%22/%3E%3C/g%3E%3C/svg%3E"); } /* Adjust color for three dots menu icon */ .skin-mirage-ooui-icon-ellipsis:before { background-image:url(/load.php?modules=skin.mirage.icons&image=ellipsis&format=rasterized&skin=fallback&version=14jep); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E ellipsis %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%222%22/%3E%3Ccircle cx=%223%22 cy=%2210%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%222%22/%3E%3C/g%3E%3C/svg%3E"); } /* Background color for Edit Button and Right Rail collapse/expand button */ #mirage-edit-button > li, #mirage-right-rail-button { background: #2d5488; } /* Border color definitions for the top navigation buttons */ #mirage-edit-button > li, #mirage-edit-button > li + li, #mirage-edit-button > li:first-child, #mirage-edit-button > li:last-child, #mirage-edit-button > li:hover, #mirage-edit-button > li + li:hover, #mirage-edit-button > li:hover:first-child, #mirage-edit-button > li:hover:last-child, #mirage-right-rail-button, #mirage-right-rail-button:focus { border-color: #b99968; } /* Hover color for Edit button */ #mirage-edit-button > li:first-child a:hover { color: rgba(255,255,255,0.85); } /* Color for Edit button */ #mirage-edit-button > li:first-child a { color: white; /*Previous value #white*/ } /* Adjust color for Edit icon */ .skin-mirage-ooui-icon-edit-invert:before { background-image:url(/load.php?modules=skin.mirage.icons&image=edit&variant=invert&format=rasterized&skin=fallback&version=dk89p); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E edit %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z%22/%3E%3C/g%3E%3C/svg%3E"); } /* Adjust color for Watch icon */ .skin-mirage-ooui-icon-star-invert:before,#ca-watch a:before { background-image:url(/load.php?modules=skin.mirage.icons&image=star&variant=invert&format=rasterized&skin=fallback&version=dk89p); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E star %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z%22/%3E%3C/g%3E%3C/svg%3E")} /* Adjust color for Unwatch icon */ .skin-mirage-ooui-icon-unStar-invert:before,#ca-unwatch a:before { background-image:url(/load.php?modules=skin.mirage.icons&image=unStar&variant=invert&format=rasterized&skin=fallback&version=dk89p); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E un-star %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z%22/%3E%3C/g%3E%3C/svg%3E")} /* Adjust color for "More" menu icon */ .skin-mirage-ooui-icon-indicator-down-invert:before { background-image:url(/load.php?modules=skin.mirage.indicators&image=down&variant=invert&format=rasterized&skin=fallback&version=1h8wn); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E"); } /* Adjust color for Right Rail button icon */ .skin-mirage-ooui-icon-doubleChevronEnd:before { background-image:url(/load.php?modules=skin.mirage.icons&image=doubleChevronEnd&format=rasterized&lang=en&skin=fallback&version=14jep); background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E double chevron start %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M11 2 9.7 3.3l6.6 6.7-6.6 6.7L11 18l8-8zM2.5 2 1 3.3 7.8 10l-6.7 6.7L2.5 18l8-8z%22/%3E%3C/g%3E%3C/svg%3E"); } /* Hide the editLock icon that doesn't want to be edited for some unexplainable reason */ .skin-mirage-ooui-icon-editLock-invert:before { display: none; } /* Dropdown list for history, deletion, protection etc. */ li#ca-history, li#ca-delete, li#ca-move, li#ca-protect { background: none; } /* Remove Main Page header from Main page */ body.page-Main_Page .mw-page-title-main { display: none; } /* Remove the Page and Discussion buttons from all pages */ div#left-navigation nav#p-namespaces { display: none; } #module-page-navigation { margin: 0; } /* Styling of username when logged in / don't show username */ #mirage-fixed-header .skin-mirage-username { color: orange; display: none; } /* Styling for background of dropdown on username/not logged in */ .skin-mirage-personaltools-dropdown li { background: none; } /* Text color of dropdown on username/not logged in */ li#pt-login { color: black; } /* Text color on dropdown when no new messages */ .skin-mirage-no-new-messages { color: black; } /* Main background */ body { background: #a6805a; background-position: center center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-image: url("/skins/MirageGrepolis/images/background.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; } /* Removes endless spinner for logged out users on main page */ #mw-indicator-smw-entity-examiner { display: none; } /* GENERAL ARTICLE STYLING */ main#content.mw-body, main#content.mw-body-content, #mirage-navigation-header, #module-page-navigation, .skin-mirage-content-container { background: #feb; } h1, h2, .skin-mirage-right-rail-module h3, hr { border-color: #d4ba91; } p, h1, h2, h3, h4, h5, h6, li, i { color: #5e321a; } h2 a, h2 a:visited { font-size: normal; color: #3d2718; font-weight: bold; } h2 a:hover { color: #1480a4; } p a, p a:visited, li a, li a:visited { color: #3d2718; font-weight: bold; } p a:hover { color: #1480a4; } /* Warning on MediaWiki:Custom.css page */ .mw-editinginterface { color: ##5e321a; } /* Table of Contents styling */ .toc { background-color: #d4ba91; border: 1px solid #996b39; border-color: rgba(110,57,0,0.5); min-width: 175px; } .toc h2 { color: #5e321a; } .toc li a, .toc li a:visited, .toctogglelabel { color: #5f391a; font-weight: normal; } /* In-article edit icon styling */ a.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small, a:visited.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small { color: #3d2718; } a:hover.skin-mirage-ooui-icon.skin-mirage-ooui-icon-edit.skin-mirage-ooui-icon-small { color: #1480a4; } /* TABLE STYLING */ table th { font-weight: normal; background-color: #b99968; color: #5e321a; padding: 10px; } table, th, td, .wikitable { /* Border definition needs to be marked !important to overwrite border color defined inline in multiple navigation templates like Template:GodNav; */ border: 1px solid rgba(110,57,0,0.5) !important; } /* Special .announcement class table on the Main Page */ th.announcement { font-weight: bold; } table td .announcement { color: 5e321a; } table td, table th { text-align: center; padding: 5px; box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.1) inset; background-color: #d4ba91 !important; } td, th { padding: 0; } td { display: table-cell; vertical-align: inherit; } table { display: table !important; width: 100%; border-collapse: separate; border-spacing: 1px !important; margin-bottom: 4px; border-radius: 3px; border-color: rgba(110,57,0,0.5); } table center { color: #5e321a; } table a, table a:visited { color: #3d2718; } table a:hover { color: #1480a4; } /* RIGHT RAIL STYLING */ #mirage-right-rail { background: #feb; } #mirage-right-rail a, #mirage-right-rail a:visited { color: #3d2718; } #mirage-right-rail a:hover { color: #1480a4; } /* Remove background color on Page tools section of Right Rail */ .skin-mirage-module-body ul.skin-mirage-unstyled-list > li { background: none; } /* FOOTER STYLING */ footer { display: grid; align-content: center; justify-content: center; justify-items: center; margin-top: -25px; } footer.mw-footer { background-color: transparent; box-shadow: none; align-content: center; } #footer-info-lastmod, #footer-info-copyright, #footer-places-privacy, #footer-places-about, #footer-places-disclaimer { display: inline-block; margin-right: 15px; } li#footer-info-lastmod, li#footer-info-copyright { font-size: small; color: #efdba6; } footer ul.skin-mirage-unstyled-list#footer-info { margin-right: 0px; color: #efdba6; text-shadow: 1px 1px 1px black; } div#footer-places { margin-right: auto; margin-left: auto; } .mw-footer p, .mw-footer h3 { color: #efdba6; } .mw-footer a { color: #efdba6; font-weight: normal; } .mw-footer a:hover { color: #efdba6; } .mw-footer li { line-height: 1 !important; } div#footer-places { margin-left: initial; } h3#footer-places-label { display: none; } /* The animated tiles on the main page */ #mf-menu { display: none; } .infinitum { background-color: #F9F9F9; border: 1px solid #AAAAAA; font-size: 95%; padding: 5px; } .infinirow { border-bottom: 1px solid #AA9977 !important; border-left: medium none currentColor !important; border-right: 1px solid #AA9977 !important; border-top: medium none currentColor !important; padding: 2px 3px; } .tilt { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .tiltright { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .tiltright:hover { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } .move { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .move:hover { -webkit-transform: translate(0px,-10px); -moz-transform: translate(0px,-10px); -o-transform: translate(0px,-10px); -ms-transform: translate(0px,-10px); transform: translate(0px,-10px); } .grow img { height: 500px; width: 750px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { width: 1000px; height: 1800px; } div.mvisto:hover { opacity:0.7; } div.NavFrame { margin: 0; padding: 1px; border: 0px solid #322618; text-align: top; border-collapse: collapse; font-size: 95%; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavPic { background-color: #fff; margin: 0; padding: 0px; float: left; } div.NavFrame div.NavHead { height: 1.9em; font-weight: bold; background-color: #C0A875; position: relative; } div.NavFrame p, div.NavFrame div.NavContent, div.NavFrame div.NavContent p { font-size: 12px; } div.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } a.NavToggle { position: absolute; top: 0; right: 3px; font-weight: normal; font-size: 93%; } .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } .pulse:hover{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } @media only screen and (max-width : 1300px) { .fastlinks { display:none !important; } } /*Make the semantic media wiki readable*/ .smw-editpage-help { background-color: #565656; } /* Make the errors on uploading the same file readable */ .mw-destfile-warning { color: #5e321a; } .externalimage-holder { position: relative; margin: auto; display: inline-block; max-width: 600px; } .externalimage-holder img { width: 100%; height: auto; } img { max-width: 900px; } #document-wrapper { max-width: 1200px; } /* Mobile-specific changes */ @media screen and (max-width: 720px) { /* Remove the unnecessary logo next to the navigation links */ #mirage-navigation-header #mirage-logo { display: none; } /*Remove the wiki title on mobile*/ .mw-logo-wordmark { display: none; } /*Set max image size on mobile, so they scale*/ img { display: block; max-width:90%; width: auto; height: auto; } /* Remove text of Recent Changes button */ div#module-site-tools li.mw-list-item:first-child a { color: transparent; } }