Hidden Palace

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(45 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("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.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://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-face{  
Line 11: Line 13:
    url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.ttf') format('truetype'),
    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');
    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
}
}


Line 18: Line 31:
}
}


#p-logo
{
  top: -180px;
}


#p-logo a
#p-logo a
{
{
   width: 160px;
   width: 160px;
   height: 180px;
   height: 142px;
   color: #333;
   color: #333;
   font-size: 22px;
   font-size: 22px;
Line 33: Line 42:
   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, a#n-\.\.-visually .minerva-icon::before {
  content: "\f06e";
  font: var(--fa-font-solid)
}
li#n-\.\.-as-a-table a::before, a#n-\.\.-as-a-table .minerva-icon::before {
  content: "\f0ce";
  font: var(--fa-font-solid)
}
li#n-\.\.-by-lot a::before, a#n-\.\.-by-lot .minerva-icon::before {
  content: "\f187";
  font: var(--fa-font-solid)
}
li#n-\.\.-by-hardware a::before, a#n-\.\.-by-hardware .minerva-icon::before {
  content: "\f2db";
  font: var(--fa-font-solid)
}
li#n-How-to-contribute a::before, a#n-How-to-contribute .minerva-icon::before {
  content: "\f059";
  font: var(--fa-font-solid)
}
li#n-Add-a-prototype a::before, a#n-Add-a-prototype .minerva-icon::before {
  content: "\f067";
  font: var(--fa-font-solid)
}
li#n-Add-a-video a::before, a#n-Add-a-video .minerva-icon::before {
  content: "\f067";
  font: var(--fa-font-solid)
}
li#n-Add-assets a::before, a#n-Add-assets .minerva-icon::before {
  content: "\f067";
  font: var(--fa-font-solid)
}
li#n-To-do a::before, a#n-To-do .minerva-icon::before {
  content: "\f0ca";
  font: var(--fa-font-solid)
}
li#n-Forums a::before, a#n-Forums .minerva-icon::before {
  content: "\f086";
  font: var(--fa-font-solid)
}
li#n-Discord a::before, a#n-Discord .minerva-icon::before {
  content: "\f2ee";
}
li#n-IRC a::before, a#n-IRC .minerva-icon::before {
  content: "\f292";
  font: var(--fa-font-solid)
}
li#n-Twitter a::before, a#n-Twitter .minerva-icon::before {
  content: "\f081";
  font: var(--fa-font-brands)
}
li#n-BlueSky a::before, a#n-BlueSky .minerva-icon::before {
  content: "\e6a3";
  font: var(--fa-font-brands)
}
li#n-Facebook a::before, a#n-Facebook .minerva-icon::before {
  content: "\f082";
  font: var(--fa-font-brands)
}
}


.mw-wiki-logo
li#n-Tumblr a::before, a#n-Tumblr .minerva-icon::before {
{
   content: "\f174";
   background-image: none;
  font: var(--fa-font-brands)
}
}


div#mw-panel
li#n-YouTube a::before, a#n-YouTube .minerva-icon::before {
{
   content: "\f166";
   top: 180px;
  font: var(--fa-font-brands)
}
}
li#n-Discord a:hover::before, a#n-Discord:hover .minerva-icon::before { color: #738adb; }
li#n-Twitter a:hover::before, a#n-Twitter:hover .minerva-icon::before  { color: #55acee; }
li#n-Facebook a:hover::before, a#n-Facebook:hover .minerva-icon::before { color: #3b5998; }
li#n-BlueSky a:hover::before, a#n-BlueSky:hover .minerva-icon::before  { color: #208bfe; }
li#n-Tumblr a:hover::before, a#n-Tumblr:hover .minerva-icon::before { color: #35465c; }
li#n-YouTube a:hover::before, a#n-YouTube:hover .minerva-icon::before { color: #e52d27; }


pre, span.hex-snippet, span.pre
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;
Line 90: Line 214:
color: #f8f8f8;
color: #f8f8f8;
}
}
tr.infobox-title.infobox-video
{
background-color:#DA7D2E;
}
tr.infobox-title.infobox-demo
{
background-color:#933;
}
tr.infobox-title.infobox-assets
{
background-color:#14B53F;
}


tr.infobox-title > th
tr.infobox-title > th
Line 119: Line 259:
     float: left;
     float: left;
     width: 50%;
     width: 50%;
}
div.panel.wata div.panel-body {
text-align: left;
}
}
div.panel-heading
div.panel-heading
{
{
     background-color: #666;
     background-color: #999;
     color: #f8f8f8;
     color: #f8f8f8;
     padding: 0.25em 0.5em;
     padding: 0.25em 0.5em;
}
div.panel-heading:first-child {
    background-color: #666;
}
:where(div.panel.navbox) div.panel-heading:first-child {
     border-top-left-radius: 3px;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
     border-top-right-radius: 3px;
}
:where(div.panel.navbox ~ div.panel.navbox) div.panel-heading:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
div.panel.navbox:last-of-type div.panel-body:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
}
div.panel-body
div.panel-body
Line 132: Line 288:
     background-color: #eee;
     background-color: #eee;
     padding: 0.25em 0.5em;
     padding: 0.25em 0.5em;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
}


Line 142: Line 296:
     float: none;
     float: none;
     clear: both;
     clear: both;
     margin: 0.5em auto;
     margin: 0 auto;
     padding: 1em;
     padding: 0;
}
div.panel.navbox:first-of-type
{
padding-top: 2em;
}
div.panel.navbox:last-of-type
{
padding-bottom: 1em;
}
}
div.panel.navbox ul
div.panel.navbox ul
Line 234: Line 396:
   margin-bottom: -90000px;
   margin-bottom: -90000px;
}
}
/* Sidebar icon colors */
div#mw-panel li > a.no-underline { text-decoration: none; }
div#mw-panel li > a:hover > span.link-underline { text-decoration: underline; }
div#mw-panel i.fa { color: #333; }
div#mw-panel a:hover > i.fa { color: #0645ad; }
li#n-Twitter > a:hover > i.fa { color: #55acee; }
li#n-Facebook > a:hover > i.fa { color: #3b5998; }
li#n-Tumblr > a:hover > i.fa { color: #35465c; }
li#n-YouTube > a:hover > i.fa { color: #e52d27; }


div.panel-body td.panel-group
div.panel-body td.panel-group
Line 267: Line 418:
   font-size: 0.7em;
   font-size: 0.7em;
}
}
.sonic-panel a, .sonic-panel a:visited, .sonic-panel a:active {
div.sonic-panel a, div.sonic-panel a:visited, div.sonic-panel a:active {
   color: #f8f8f8 !important;
   color: #3466a8 !important;
   text-decoration: none;
   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;
}
pre, .mw-code {
overflow-x: auto !important;
}
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;
}
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1px;
  gap: 4px;
}
.masonry-item {
  align-self: start;
  text-align: center;
  font-size: 12px;
}
/* Page Forms: stack labels above fields on narrow screens instead of a two-column table */
@media screen and (max-width: 720px) {
  table.formtable,
  table.formtable tbody,
  table.formtable tr,
  table.formtable th,
  table.formtable td {
    display: block;
    width: auto;
    box-sizing: border-box;
  }
  table.formtable th {
    text-align: left;
    padding: 0.8em 0 0.2em;
  }
  table.formtable th[colspan] {
    text-align: center;
  }
  table.formtable td {
    padding: 0 0 0.4em;
  }
  table.formtable .createboxInput {
    width: 100%;
  }
  #pfForm input[type="text"],
  #pfForm select,
  #pfForm textarea {
    max-width: 100%;
  }
  /* Page Forms gives the combobox an inline pixel width and a negative top margin
    meant to line it up with the label cell beside it */
  #pfForm .oo-ui-comboBoxInputWidget {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
}
/* Main Page: stack the front page columns on narrow screens, latest articles first */
@media screen and (max-width: 720px) {
  div.front-page {
    display: flex;
    flex-direction: column;
  }
  div.front-page > div[style*="display:flex"] {
    flex-direction: column;
  }
  div.front-page > div.right {
    float: none;
    width: auto;
    order: 1;
  }
  div.front-page > div.left {
    margin-right: 0;
  }
  /* The equal-height padding trick is not needed once the columns stack */
  div.front-page div.last-cell.cell {
    padding-bottom: 0.3em;
    margin-bottom: 0;
  }
}
  /* Text inputs here carry no type attribute, so match every input */
  #pfForm input,
  #pfForm select,
  #pfForm textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  #pfForm .oo-ui-comboBoxInputWidget {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
Retrieved from "http://hiddenpalace.org/MediaWiki:Common.css"