MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Add div.help-block) |
No edit summary |
||
(63 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
@import url(" | @import url("https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css"); | ||
@import url(https://fonts.googleapis.com/css?family=Playfair+Display|Droid+Sans+Mono|Roboto:400,400italic,700italic,700); | @import url(https://fonts.googleapis.com/css?family=Playfair+Display|Droid+Sans+Mono|Roboto:400,400italic,700italic,700); | ||
@import url("https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css"); | |||
@import url("https://unpkg.com/tippy.js@6/themes/light.css"); | |||
@font-face{ | |||
font-family: 'Moder DOS 437'; | |||
src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot'); | |||
src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot?#iefix') format('embedded-opentype'), | |||
url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.woff') format('woff'), | |||
url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.ttf') format('truetype'), | |||
url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.svg#ModerDOS437') format('svg'); | |||
} | |||
@font-face { | |||
font-family: 'ibmvga8'; | |||
src: url('/w/resources/assets/ibm_vga8.eot'); | |||
src: url('/w/resources/assets/ibm_vga8.eot?#iefix') format('embedded-opentype'), | |||
url('/w/resources/assets/ibm_vga8.woff2') format('woff2'), | |||
url('/w/resources/assets/ibm_vga8.woff') format('woff'), | |||
url('/w/resources/assets/ibm_vga8.ttf') format('truetype'); | |||
font-weight: 400; | |||
font-style: normal | |||
} | |||
body | body | ||
Line 8: | Line 30: | ||
} | } | ||
#p-logo a | #p-logo a | ||
{ | { | ||
width: 160px; | width: 160px; | ||
height: | height: 142px; | ||
color: #333; | color: #333; | ||
font-size: 22px; | font-size: 22px; | ||
Line 23: | Line 41: | ||
padding-top: 1em; | padding-top: 1em; | ||
line-height: 1em; | line-height: 1em; | ||
background-size: 120px 120px; | |||
} | |||
#p-logo a:after { | |||
content: "Hidden Palace"; | |||
position: relative; | |||
top: 120px; | |||
} | |||
/* Sidebar icon colors */ | |||
div#p-Prototypes a::before, | |||
div#p-Contribute a::before, | |||
div#p-Community a::before, | |||
div#p-Videos a::before, | |||
nav#p-Prototypes a::before, | |||
nav#p-Contribute a::before, | |||
nav#p-Community a::before, | |||
nav#p-Videos a::before { | |||
display: inline-block; | |||
text-decoration: none; | |||
color: #333; | |||
padding-right: .3em; | |||
font-family: "ForkAwesome"; | |||
} | |||
div#p-Prototypes a:hover::before, | |||
div#p-Contribute a:hover::before, | |||
div#p-Community a:hover::before, | |||
nav#p-Prototypes a:hover::before, | |||
nav#p-Contribute a:hover::before, | |||
nav#p-Community a:hover::before { | |||
color: #0645ad; | |||
} | |||
li#n-\.\.-visually a::before { | |||
content: "\f06e"; | |||
} | |||
li#n-\.\.-as-a-table a::before { | |||
content: "\f0ce"; | |||
} | |||
li#n-\.\.-by-lot a::before { | |||
content: "\f187"; | |||
} | |||
li#n-How-to-contribute a::before { | |||
content: "\f059"; | |||
} | |||
li#n-Add-a-prototype a::before { | |||
content: "\f067"; | |||
} | } | ||
li#n-Add-a-video a::before { | |||
{ | content: "\f067"; | ||
} | |||
li#n-Add-assets a::before { | |||
content: "\f067"; | |||
} | |||
li#n-To-do a::before { | |||
content: "\f0ca"; | |||
} | |||
li#n-Forums a::before { | |||
content: "\f086"; | |||
} | |||
li#n-Discord a::before { | |||
content: "\f2ee"; | |||
} | |||
li#n-IRC a::before { | |||
content: "\f292"; | |||
} | |||
li#n-Twitter a::before { | |||
content: "\f081"; | |||
} | |||
li#n-Facebook a::before { | |||
content: "\f082"; | |||
} | |||
li#n-Tumblr a::before { | |||
content: "\f174"; | |||
} | } | ||
li#n-YouTube a::before { | |||
{ | content: "\f166"; | ||
} | } | ||
pre, span.hex-snippet | li#n-Discord a:hover::before { color: #738adb; } | ||
li#n-Twitter a:hover::before { color: #55acee; } | |||
li#n-Facebook a:hover::before { color: #3b5998; } | |||
li#n-Tumblr a:hover::before { color: #35465c; } | |||
li#n-YouTube a:hover::before { color: #e52d27; } | |||
pre, span.hex-snippet, span.pre | |||
{ | { | ||
font-family: 'Droid Sans Mono', monospace; | font-family: 'Droid Sans Mono', monospace; | ||
white-space: pre; | white-space: pre-wrap !important; | ||
background-color: inherit; | background-color: inherit; | ||
border: 0; | border: 0; | ||
padding: 0; | padding: 0; | ||
} | |||
code, tt, kbd, samp, .mw-code | |||
{ | |||
font-family: 'Droid Sans Mono', monospace; | |||
} | |||
pre.nfo | |||
{ | |||
font-family: 'Moder DOS 437'; | |||
line-height: 1em; | |||
} | } | ||
Line 69: | Line 187: | ||
color: #f8f8f8; | color: #f8f8f8; | ||
} | } | ||
tr.infobox-title.infobox-video | |||
{ | |||
background-color:#DA7D2E; | |||
} | |||
tr.infobox-title.infobox-assets | |||
{ | |||
background-color:#14B53F; | |||
} | |||
tr.infobox-title > th | tr.infobox-title > th | ||
Line 113: | Line 242: | ||
border-bottom-left-radius: 3px; | border-bottom-left-radius: 3px; | ||
border-bottom-right-radius: 3px; | border-bottom-right-radius: 3px; | ||
} | |||
div.panel.navbox | |||
{ | |||
font-size: 0.85em; | |||
width: 80%; | |||
float: none; | |||
clear: both; | |||
margin: 0.5em auto; | |||
padding: 1em; | |||
} | |||
div.panel.navbox ul | |||
{ | |||
margin: 0.3em; | |||
} | |||
div.panel.navbox ul > li:after | |||
{ | |||
content: " · "; | |||
} | |||
div.panel.navbox ul > li:last-child:after | |||
{ | |||
content: ""; | |||
} | |||
div.panel.navbox ul > li | |||
{ | |||
display: inline-block; | |||
} | } | ||
Line 130: | Line 285: | ||
margin: 2px 9px 6px 9px; | margin: 2px 9px 6px 9px; | ||
color: #666; | color: #666; | ||
} | |||
div.smw-image-link | |||
{ | |||
float: left; | |||
width: 240px; | |||
min-height: 210px; | |||
margin-right:5px; | |||
text-align: center; | |||
} | |||
div.smw-image-link > div.smw-image-caption | |||
{ | |||
min-height: 50px; | |||
text-align: center; | |||
} | |||
div.front-page | |||
{ | |||
background: #f5faff; | |||
overflow: hidden; | |||
} | |||
div.front-page > div.right | |||
{ | |||
float: right; | |||
width: 350px; | |||
} | |||
div.front-page > div.left | |||
{ | |||
margin-right: 350px; | |||
} | |||
div.front-page div.heading | |||
{ | |||
background-color: #e7eef6; | |||
border: 1px solid white; | |||
font-weight: bold; | |||
text-align: center; | |||
padding: 1px; | |||
} | |||
div.front-page div.cell | |||
{ | |||
border: 1px solid white; | |||
background: #f5faff; | |||
padding: 0.3em 1em; | |||
} | |||
div.front-page div.cell ul, div.front-page div.cell dd | |||
{ | |||
margin-left: 0.6em; | |||
} | |||
div.front-page div.cell li, div.front-page div.cell dd | |||
{ | |||
margin-bottom: .2em; | |||
} | |||
div.front-page div.last-cell.cell | |||
{ | |||
padding-bottom: 90000px; | |||
margin-bottom: -90000px; | |||
} | |||
div.panel-body td.panel-group | |||
{ | |||
background-color: #ddd; | |||
width: 20%; | |||
border-bottom: 2px solid #eee; | |||
border-top: 2px solid #eee; | |||
} | |||
div.panel-body > table | |||
{ | |||
width: 100%; | |||
margin: 0 0 0 -0.5em; | |||
border-spacing: 0; | |||
} | |||
s | |||
{ | |||
color: #ccc; | |||
} | |||
span.sha1 | |||
{ | |||
font-size: 0.7em; | |||
} | |||
div.sonic-panel a, div.sonic-panel a:visited, div.sonic-panel a:active { | |||
color: #3466a8 !important; | |||
text-decoration: none; | |||
} | |||
div.translation-text { | |||
border: 1px solid #eee; | |||
padding: 0.5em 0.75em | |||
;max-width: 300px; | |||
} | |||
.xml { | |||
font-family: 'Droid Sans Mono', monospace; | |||
white-space: pre; | |||
font-size: 8px; | |||
overflow: scroll; | |||
padding: 1em 1.5em; | |||
} | |||
li > .smw-field { | |||
padding-left: 4px; | |||
padding-right: 2px; | |||
} | |||
.msgbox { | |||
border-radius: 4px; | |||
padding: 10px 20px; | |||
} | |||
/* News items */ | |||
.front-page .cell dd b { | |||
min-width: 100px; | |||
display: inline-block; | |||
text-align: right; | |||
} | } |
Latest revision as of 22:38, August 19, 2023
/* CSS placed here will be applied to all skins */ @import url("https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css"); @import url(https://fonts.googleapis.com/css?family=Playfair+Display|Droid+Sans+Mono|Roboto:400,400italic,700italic,700); @import url("https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css"); @import url("https://unpkg.com/tippy.js@6/themes/light.css"); @font-face{ font-family: 'Moder DOS 437'; src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot'); src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot?#iefix') format('embedded-opentype'), url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.woff') format('woff'), url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.ttf') format('truetype'), url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.svg#ModerDOS437') format('svg'); } @font-face { font-family: 'ibmvga8'; src: url('/w/resources/assets/ibm_vga8.eot'); src: url('/w/resources/assets/ibm_vga8.eot?#iefix') format('embedded-opentype'), url('/w/resources/assets/ibm_vga8.woff2') format('woff2'), url('/w/resources/assets/ibm_vga8.woff') format('woff'), url('/w/resources/assets/ibm_vga8.ttf') format('truetype'); font-weight: 400; font-style: normal } body { font-family: 'Roboto', sans-serif; } #p-logo a { width: 160px; height: 142px; color: #333; font-size: 22px; font-family: "Playfair Display", serif; text-align: center; padding-top: 1em; line-height: 1em; background-size: 120px 120px; } #p-logo a:after { content: "Hidden Palace"; position: relative; top: 120px; } /* Sidebar icon colors */ div#p-Prototypes a::before, div#p-Contribute a::before, div#p-Community a::before, div#p-Videos a::before, nav#p-Prototypes a::before, nav#p-Contribute a::before, nav#p-Community a::before, nav#p-Videos a::before { display: inline-block; text-decoration: none; color: #333; padding-right: .3em; font-family: "ForkAwesome"; } div#p-Prototypes a:hover::before, div#p-Contribute a:hover::before, div#p-Community a:hover::before, nav#p-Prototypes a:hover::before, nav#p-Contribute a:hover::before, nav#p-Community a:hover::before { color: #0645ad; } li#n-\.\.-visually a::before { content: "\f06e"; } li#n-\.\.-as-a-table a::before { content: "\f0ce"; } li#n-\.\.-by-lot a::before { content: "\f187"; } li#n-How-to-contribute a::before { content: "\f059"; } li#n-Add-a-prototype a::before { content: "\f067"; } li#n-Add-a-video a::before { content: "\f067"; } li#n-Add-assets a::before { content: "\f067"; } li#n-To-do a::before { content: "\f0ca"; } li#n-Forums a::before { content: "\f086"; } li#n-Discord a::before { content: "\f2ee"; } li#n-IRC a::before { content: "\f292"; } li#n-Twitter a::before { content: "\f081"; } li#n-Facebook a::before { content: "\f082"; } li#n-Tumblr a::before { content: "\f174"; } li#n-YouTube a::before { content: "\f166"; } li#n-Discord a:hover::before { color: #738adb; } li#n-Twitter a:hover::before { color: #55acee; } li#n-Facebook a:hover::before { color: #3b5998; } li#n-Tumblr a:hover::before { color: #35465c; } li#n-YouTube a:hover::before { color: #e52d27; } pre, span.hex-snippet, span.pre { font-family: 'Droid Sans Mono', monospace; white-space: pre-wrap !important; background-color: inherit; border: 0; padding: 0; } code, tt, kbd, samp, .mw-code { font-family: 'Droid Sans Mono', monospace; } pre.nfo { font-family: 'Moder DOS 437'; line-height: 1em; } span.hover-link { background-color: #f8f8f8; } span.hover-link.hover { background-color: #eee; } table.infobox { float: right; background-color: #eee; } table.infobox.download a, table.infobox.download i { vertical-align: middle; } tr.infobox-title { background-color:#666; color: #f8f8f8; } tr.infobox-title.infobox-video { background-color:#DA7D2E; } tr.infobox-title.infobox-assets { background-color:#14B53F; } tr.infobox-title > th { padding: 5px 10px; } table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { padding-left: 0.5em; padding-right: 0.5em; } table.wikitable td .fa { padding-right: 0.2em; } table.infobox table td { line-height: 1.3em; vertical-align: top; padding-right: 10px; } div.panel { margin: 1em 1.5em; text-align: center; float: left; width: 50%; } div.panel-heading { background-color: #666; color: #f8f8f8; padding: 0.25em 0.5em; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.panel-body { background-color: #eee; padding: 0.25em 0.5em; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } div.panel.navbox { font-size: 0.85em; width: 80%; float: none; clear: both; margin: 0.5em auto; padding: 1em; } div.panel.navbox ul { margin: 0.3em; } div.panel.navbox ul > li:after { content: " · "; } div.panel.navbox ul > li:last-child:after { content: ""; } div.panel.navbox ul > li { display: inline-block; } table.formtable .createboxInput { width: 85%; } table.wikitable.noborder, table.wikitable.noborder > tr > th, table.wikitable.noborder > tr > td, table.wikitable.noborder > * > tr > th, table.wikitable.noborder > * > tr > td { border: none; } div.help-block { font-size: 11px; margin: 2px 9px 6px 9px; color: #666; } div.smw-image-link { float: left; width: 240px; min-height: 210px; margin-right:5px; text-align: center; } div.smw-image-link > div.smw-image-caption { min-height: 50px; text-align: center; } div.front-page { background: #f5faff; overflow: hidden; } div.front-page > div.right { float: right; width: 350px; } div.front-page > div.left { margin-right: 350px; } div.front-page div.heading { background-color: #e7eef6; border: 1px solid white; font-weight: bold; text-align: center; padding: 1px; } div.front-page div.cell { border: 1px solid white; background: #f5faff; padding: 0.3em 1em; } div.front-page div.cell ul, div.front-page div.cell dd { margin-left: 0.6em; } div.front-page div.cell li, div.front-page div.cell dd { margin-bottom: .2em; } div.front-page div.last-cell.cell { padding-bottom: 90000px; margin-bottom: -90000px; } div.panel-body td.panel-group { background-color: #ddd; width: 20%; border-bottom: 2px solid #eee; border-top: 2px solid #eee; } div.panel-body > table { width: 100%; margin: 0 0 0 -0.5em; border-spacing: 0; } s { color: #ccc; } span.sha1 { font-size: 0.7em; } div.sonic-panel a, div.sonic-panel a:visited, div.sonic-panel a:active { color: #3466a8 !important; text-decoration: none; } div.translation-text { border: 1px solid #eee; padding: 0.5em 0.75em ;max-width: 300px; } .xml { font-family: 'Droid Sans Mono', monospace; white-space: pre; font-size: 8px; overflow: scroll; padding: 1em 1.5em; } li > .smw-field { padding-left: 4px; padding-right: 2px; } .msgbox { border-radius: 4px; padding: 10px 20px; } /* News items */ .front-page .cell dd b { min-width: 100px; display: inline-block; text-align: right; }