MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, 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 */
/* basic link color */
body.mediawiki #mw-panel a {color:#685c7a;}
body.mediawiki #mw-panel a:hover {color:#483c60; background-color: #f6f6f6; background-color:rgba(255, 255, 255, 0.5);}
body.mediawiki #mw-panel a:visited {color:#784f7a;}
body.mediawiki #content a {color:#685c7a;}
body.mediawiki #content a:hover {color:#483c60; background-color: #f6f6f6; background-color:rgba(255, 255, 255, 0.5);}
body.mediawiki #content a:visited {color:#784f7a;}
body.mediawiki #content a.new {color:#dd3333;}
body.mediawiki #content a.new:hover {color:#dd3333; background-color: #f6f6f6; background-color:rgba(255, 255, 255, 0.5);}
body.mediawiki #content a.new:visited {color:#dd3333;}
@media all and (min-width: 982px) {
#mw-panel nav.portal .vector-menu-content ul li,
#mw-panel nav.portal h3 {
font-size: 1em; /* original was 0.75em */
}
#p-logo {
margin-bottom:0;
margin-top: -18px;
}
#mw-panel, #p-logo, #p-logo a {
width: 13em; /* 10em */
}
.mw-body, #mw-head-base, #mw-data-after-content, .mw-footer, #left-navigation {
margin-left: 12.6em; /* 11em */
}
#p-logo, #p-logo a {
height: 250px;
}
.ns-162 #mw-panel #p-film_links a {
line-height: 1.5;
padding: 6px 18px;
font-size: 1rem;
}
/* new page creation navigation */
#createContentBtns {
float: right;
}
#createContentBtns .container{
padding: 5px;
}
#createContentBtns .card{
width: 300px;
height: 300px;
background-color: #f2ece5;
border-radius: 10px 10px;
border: 5px solid #f6f6f6;
}
#createContentBtns .container .jjrcard { height: auto; }
#createContentBtns .jjrcard .body li{ padding:9px 15px; }
#createContentBtns .header{
border-radius: 10px 10px 0px 0px;
padding: 5px;
background-color: #f6f6f6;
}
#createContentBtns h3{
color: #191919;
margin-left: 1rem;
margin-top: 0;
padding-top: 0;
}
#createContentBtns svg.fa-w-10 {
font-size: 18px;
margin-left: 150px;
color: #c9bddc;
}
#createContentBtns .icon{ margin-right: 8px; }
#createContentBtns .body {
border-top: 1px solid #dddddd;
}
#createContentBtns .body ul{
margin: auto;
padding: revert;
margin-top: 5px;
}
#createContentBtns .body li{
transition: 400ms all;
margin-left: -40px;
margin-top: 0px;
color: #444;
list-style: none;
display: block;
font-size: 18px;
padding:15px;
}
#createContentBtns li:hover, #createContentBtns li:focus, #createContentBtns li:focus-visible{
transition: 400ms all;
color: #000000;
background-color: #FEFEFE;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
#createContentBtns li .svg-inline--fa{
margin-right: 8px;
color: #666;
}
#createContentBtns li:hover .svg-inline--fa{
color: #000000;
transform: rotate(-10deg);
}
#createContentBtns li a{
color: #666;
cursor: pointer;
padding: 15px 50px 15px 0;
}
#createContentBtns li:hover a{
color: #000000;
cursor: pointer;
text-decoration: none;
}
#createContentBtns a:focus-visible{
color: #000000;
cursor: pointer;
text-decoration: none;
outline-offset: 10px;
}
#createContentBtns .body > li{
float: left;
}
#createContentBtns .body li ul{
background: #1E2B32;
margin-left: 280px;
margin-top: -38px;
display: none;
position: absolute;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
}
#createContentBtns .body li:hover > ul{
display: block;
cursor: pointer;
}
/* end new page creation navigation */
}
@media all and (max-width: 982px) {
#p-logo a { background-position: top right; }
#p-logo .mw-wiki-logo { background-image: url(/resources/assets/wiki-tiny.png); }
.ns-162 #mw-panel #p-film_links a {
line-height: 1.2;
padding: 1px 4px;
font-size: 1rem;
}
#createContentBtns { display:none; }
}
/* Most Samsung phones and iPhones are less than 415, 700 is a compromise */
@media all and (max-width: 700px) {
.tplFlex small.jrdebug { display: none; }
.ns-162 .tplContainer .tplFlex {
display:flex;
flex-direction:column;
}
.ns-162 .tplContainer .tplFlex .tplFlexLeft {
order: 3;
width:350px;
flex-shrink:1;
}
.ns-162 .mw-parser-output div.tplContainer > p {font-size: 1em;}
}
@media all and (min-width: 700px) {
.ns-162 .tplContainer .tplFlex {
display:flex;
flex-direction:row;
width:calc(95vw - 200px);
justify-content: flex-start;
}
.ns-162 .tplContainer .tplFlex .tplFlexLeft {
order: 1;
width:650px;
flex-shrink:0;
}
.ns-162 .tplContainer .tplFlex .tplFlexRight {
order: 2;
max-width: 35vw;
flex-shrink:1;
min-width: 180px;
}
.ns-162 .mw-parser-output div.tplContainer > p {font-size: 1.5em;}
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
font-size: 88%;
line-height: 1.5em;
width: 22em;
}
}
.mw-customtoggle { color: #0645ad; }
.mw-customtoggle:hover { background-color:#defaed; }
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-jrtools a {
color: #c80874;
font-weight: bold;
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-fontaw a {
color: #a195aa;
font-weight: bold;
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-filmtpl a {
color: #a30ba5;
font-weight: bold;
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-ppltpl a {
color: #397087;
font-weight: bold;
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-filmtpl a:hover,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-ppltpl a:hover,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-fontaw a:hover,
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-jrtools a:hover {
color:black;
background-color:white;
}
.wikiEditor-ui-toolbar .section-filmtpl .page-characters div span {
cursor: pointer;
outline: 0;
display: inline-block;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
font-family: sans-serif;
color: #685c7a;
box-shadow: rgb(0 0 0 / 20%) 0 3px 5px -1px, rgb(0 0 0 / 14%) 0 6px 10px 0, rgb(0 0 0 / 12%) 0 1px 18px 0;
border-color: #685c7a;
background-color: #c9bddc;
border-radius: 0.25rem;
}
.wikiEditor-ui-toolbar .section-filmtpl .index div:first-child {
color: #a30ba5;
}
.wikiEditor-ui-toolbar .section-filmtpl .index div:not(:first-child) {
color: #888888;
font-style: italic;
font-size: calc(1em * 0.8);
}
small.jrdebug {
color: #FFFFFF;
float: right;
font-size: 0.7em;
display:block;
position:absolute;
top:-50px;
right:1px;
margin:15px;
background-color: #c9bddc;
-webkit-clip-path: polygon( 0 50%, 3% 0, 90% 0, 100% 0, 100% 100%, 90% 100%, 10% 100%, 0% 100%, 0% 100% );
clip-path: polygon( 0 50%, 3% 0, 90% 0, 100% 0, 100% 100%, 90% 100%, 10% 100%, 0% 100%, 0% 100% );
width: 400px;
overflow: hidden;
}
.edit-help-doc {
background-color:#e1ffec;
color: #0e591e;
background-image: url(/skins/jjr/assets/info.svg);
background-position: center right;
background-repeat: no-repeat;
padding-right: 14px;
background-size: 13px 13px;
margin-left: 0.5em;
border: 1px #effffa solid;
}
/*Year Nav*/
.yearNav {
display: flex;
font-size: 2.3em;
justify-content: center;
align-items: center;
}
.yearNav .prev, .yearNav .next { font-size:0.7em; }
.yearNav .curr {
padding:0 1.5em 0;
font-weight:bold;
}
.ns-162 .tplEnd {
clear:both;
border-bottom: 1px #f2ece5 solid;
}
.ns-162 .embedvideo .embedvideo{ margin-left:1px; }
.ns-162 #mw-page-base{
background-image: -webkit-linear-gradient(top,#ffffff 50%,#f2ece5 100%);
background-image: linear-gradient(to bottom,#ffffff 50%,#f2ece5 100%);
}
.ns-162 .mw-body{ border: 1px solid #cfb89d; }
/*.ns-162 .vector-menu-tabs, .ns-162 .vector-menu-tabs a, .ns-162 #mw-head .vector-menu-dropdown h3*/
.ns-162 .catlinks{ border: 1px solid #cfb89d; }
body.ns-162 { background-color: #f2ece5; }
.ns-162 .tplContainer .tplFlex dl {
padding-right: 5rem;
border-right: 1px solid transparent;
}
.ns-162 #mw-panel #p-film_links a {
cursor: pointer;
outline: 0;
display: inline-block;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
color: #685c7a;
border-color: #685c7a;
background-color: #c9bddc;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ns-162 #mw-panel #p-film_links a:hover {
color: #fff;
background-color: #685c7a;
border-color: #685c7a;
}
.ns-162 svg.fa-film {
background-color: #CFEECF;
padding: 1px 4px;
}
.phc {
border: 2px dashed #eebbbb;
background-color: #ffeaea;
padding: 10px;
margin: 3px;
display:flex;
flex-direction:column;
}
.phc .phcWarnMain {
display:flex;
flex-direction:row;
}
.phc .phcWarnMain .phcicon svg{
height: 34px;
vertical-align: 1em;
margin-top: 14px;
margin-right: 20px;
width: 34px;
color:#eebbbb;
}
.phc .phcwarn {
font-size:1.5em;
color:#da9a9a;
width: 400px;
margin-right:10px;
}
.phc .phcmain {
font-size:1em;
display:flex;
flex-direction:column;
}
.phc .phcseeing {
font-size:0.8em;
align-self:center;
}
small.debugData {
font-family: 'Courier New', monospace;
color: #AAAAAA;
font-size: 0.8em;
margin-top: -9px;
position: absolute;
}
small.debugData a {color:#999999;}
.docsub {
font-size:1.1em;
background-color:rgba(225, 255, 236, 0.6);
padding:22px;
float: right;
}
span.descHeader {
font-weight: bold;
margin-bottom: 0.1em;
}
span.createpg a {
cursor: pointer;
outline: 0;
display: inline-block;
font-weight: bold;
text-align: center;
background-color: transparent;
border: 1px solid transparent;
color: #685c7a;
border-color: #685c7a;
background-color: #c9bddc;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
span.createpg a:hover {
color: #fff;
background-color: #685c7a;
border-color: #685c7a;
}
.huge { font-size:2em;}