Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(49 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* 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) { | @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 */ | font-size: 1em; /* original was 0.75em */ | ||
} | } | ||
Line 23: | Line 35: | ||
font-size: 1rem; | 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) { | @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); } | #p-logo .mw-wiki-logo { background-image: url(/resources/assets/wiki-tiny.png); } | ||
.ns-162 #mw-panel #p-film_links a { | .ns-162 #mw-panel #p-film_links a { | ||
Line 32: | Line 160: | ||
font-size: 1rem; | font-size: 1rem; | ||
} | } | ||
#createContentBtns { display:none; } | |||
} | } | ||
Line 49: | Line 178: | ||
} | } | ||
@media all and (min-width: 700px) { | @media all and (min-width: 700px) { | ||
.ns-162 .tplContainer .tplFlex { | .ns-162 .tplContainer .tplFlex { | ||
display:flex; | display:flex; | ||
Line 68: | Line 196: | ||
} | } | ||
.ns-162 .mw-parser-output div.tplContainer > p {font-size: 1.5em;} | .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 { | .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-jrtools a { | ||
Line 80: | Line 224: | ||
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-filmtpl a { | .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-filmtpl a { | ||
color: #a30ba5; | color: #a30ba5; | ||
font-weight: bold; | |||
} | |||
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-ppltpl a { | |||
color: #397087; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-filmtpl a:hover, | .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-fontaw a:hover, | ||
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-jrtools a:hover { | .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab-jrtools a:hover { | ||
color:black; | color:black; | ||
background-color:white; | 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 { | small.jrdebug { | ||
color: #FFFFFF; | |||
float: right; | float: right; | ||
font-size: 0.7em; | font-size: 0.7em; | ||
Line 97: | Line 269: | ||
top:-50px; | top:-50px; | ||
right:1px; | right:1px; | ||
margin:15px; | margin:15px; | ||
background-color:# | 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; | background-color:#e1ffec; | ||
color: #0e591e; | color: #0e591e; | ||
Line 164: | Line 330: | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
border: 1px solid transparent; | border: 1px solid transparent; | ||
color: #685c7a; | color: #685c7a; | ||
Line 233: | Line 398: | ||
.docsub { | .docsub { | ||
font-size: | font-size:0.8em; | ||
background-color: | background-color:rgba(225, 255, 236, 0.6); | ||
padding: | padding:18px; | ||
float: right; | |||
max-width:350px; | |||
} | } | ||
Line 242: | Line 409: | ||
margin-bottom: 0.1em; | 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;} |
Latest revision as of 19:24, 2 July 2024
/* 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:0.8em; background-color:rgba(225, 255, 236, 0.6); padding:18px; float: right; max-width:350px; } 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;}