MediaWiki:Common.css: Difference between revisions

Revision as of 23:49, 19 April 2024

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Short+Stack&family=Open+Sans:ital,wght@0,700;1,700&display=swap')

.open-sans-regular {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-semibold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.mountains-of christmas-regular {
  font-family: "Mountains of Christmas", serif;
  font-weight: 400;
  font-style: normal;
}

.mountains-of christmas-bold {
  font-family: "Mountains of Christmas", serif;
  font-weight: 700;
  font-style: normal;
}

/* Skin Custom CSS */

body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    color: #5D3C34;
    background-color: #5D3C34;
    background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-brown.png);
    background-repeat: repeat;
}

#mw-content {
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-cream.png");
}

strong {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#p-logo-text a.long {
    padding: 0.1em 0.75em 0 0;
    font-size: 2.2em;
}

#p-logo-text a {
    font-variant: normal;
}

#p-logo-text a {
    color: #E5977F;
    /*font-family: 'Banana Days', Helvetica, Verdana, sans-serif;*/
    font-family: "Mountains of Christmas", Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
}

a, a:link, a:active, a:visited {
    color: #C37F3A;
    text-decoration: none;
    transition: all 0.5s ease;
}

a:hover, a:visited:hover {
    color: #b55905;
    text-decoration: none;
    transition: all 0.5s ease;
}

a.new, .new a, a.new:visited, .new a:visited {
    color: #B83823;
    text-decoration: none;
    transition: all 0.5s ease;
}

a.new:hover, .new a:hover {
    color: #ED563D;
    text-decoration: none;
}

.mw-footer-container a, .mw-footer-container a:link, .mw-footer-container a:active, .mw-footer-container a:visited {
    color: #C37F3A;
}

.mw-footer-container a:hover {
    color: #b55905;
}

#mw-content-container {
    background-color: #9D4A3C;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-ac-nacho-pink.png");
    background-repeat: repeat;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#mw-related-navigation .sidebar-chunk label, #mw-related-navigation .sidebar-chunk h3 {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

/* Media */

figure, figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
    box-shadow: 4px 4px 0 2px rgba(0,0,0,0.1);
    border-radius: 6px;
    background-color: #FFF;
    border: 1px solid #E5E0D3;
}

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
    display: grid;
}

figure[typeof~="mw:File/Thumb"] > figcaption, figure[typeof~="mw:File/Frame"] > figcaption {
    border: none;
    box-shadow: none;
    background: none;
}

#mw-header-container {
    background-color: #4C312C;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-brown.png");
    background-repeat: repeat;
}

.color-middle {
    background: #4C312C;
}

.color-left {
    background: #62332B;
}

.color-right {
    background: #62332B;
}

.mw-footer-container {
    color: #8A6B5A;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

#mw-site-navigation .sidebar-chunk .mw-portlet > div, #mw-site-navigation .sidebar-chunk .mw-portlet-body {
    margin-bottom: 1em;
}

#mw-site-navigation .sidebar-chunk {
    background: none;
    border: 0;
    padding: 1.25em 1.75em;
    padding: 1.5em 1.5em 0.5em;
    margin: 1em 0;
    line-height: 1;
    font-size: 0.95em;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: #5D3C34;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-cream-r.png");
    background-repeat: repeat;
}

#mw-site-navigation #site-navigation {
    background-position: right top;
}

#mw-site-navigation #site-tools {
    background-position: right bottom;
}

#mw-related-navigation .sidebar-chunk {
    background: none;
    border: 0;
    padding: 1.25em 1.75em;
    padding: 1.5em 1.5em 0.5em;
    margin: 1em 0;
    line-height: 1;
    font-size: 0.95em;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    background-color: #5D3C34;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-sakura-cream-r.png");
    background-repeat: repeat;
}

#mw-related-navigation #page-tools {
    background-position: right bottom;
}

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk label, #mw-related-navigation .sidebar-chunk h3 {
    font-size: 2em;
    margin: -10px -10px 10px;
    padding: 5px 10px;
    border-bottom: 0;
    display: block;
    background-color: #4C312C;
    border-radius: 6px;
    color: #E5977F;
    letter-spacing: 0.1em;
    text-transform: capitalize;
    font-variant: petite-caps;
    font-family: "Mountains of Christmas", Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
}

#mw-header-container {
    color: #c37f3a;
}

#personal h2 {
    font-family: "Open Sans", sans-serif;
    padding: 0.3em 0 0 25px;
}

code, pre, .mw-code {
    color: #86837c;
    background-color: #47413e;
    border: 5px solid #9a725e;
}

form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
    border: solid 2px #9f4a37;
    border-radius: 6px;
    background-color: #f9b993;
    color: #4c312c;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-pink.png");
}

.mw-body h1.firstHeading {
    font-family: "Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-red.png);
  border-radius: 6px;
  background-color: #f9b993;
  padding: 10px;
  margin: 10px auto 20px;
  text-align: center;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
}

.mw-body h2 {
  font-family: "Mountains of Christmas",Verdana,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-image: url(https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-mcm-sparkles-l-red.png);
  border-radius: 6px;
  background-color: #f9b993;
  padding: 10px;
  margin: 10px auto 20px;
  text-align: left;
  color: #F9F3E8;
  border: none;
  letter-spacing: 0.05em;
  font-size: 1.4em;
  clear: both;
}

.mw-body h2 a {
  color: #F9F3E8;
}

.mw-body h2 .new, .mw-body h2 .new a, .mw-body h2 a.new:visited, .mw-body h2 .new a:visited {
  color: #F9F3E8;
}

.mw-body h2 a:hover {
  color: #F9F3E8;
}

  .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
    color: #9e4a40;
    background: #f0bb9782;
    border: solid #4993e2;
    border-top-width: medium;
    border-top-color: #f0bb97;
    border-right-width: medium;
    border-right-color: #f0bb97;
    border-bottom-width: medium;
    border-bottom-color: #f0bb97;
    border-left-width: medium;
    border-left-color: #f0bb97;
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
    width: 100%;
  }

  .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
    color: #c87e75;
  }

  .wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #5f3d3a;
    text-align: center;
    color: #F9F3E8;
  }

.mw_metadata > tr > th, .mw-datatable > tr > th, .wikitable > tr > th, .mw_metadata > tr > td, .mw-datatable > tr > td, .wikitable > tr > td, .mw_metadata > * > tr > th, .mw-datatable > * > tr > th, .wikitable > * > tr > th, .mw_metadata > * > tr > td, .mw-datatable > * > tr > td, .wikitable > * > tr > td {
    border: 1px solid #fdf3e3;
    padding: 0.4em 0.5em;
    vertical-align: top;
  }

.wikitable.wikitable-villagers td {
  padding: 25px;
  text-align: center;
}

.wikitable.wikitable-villagers td img {
  margin-bottom: 15px;
}

.wikitable.wikitable-villagers td p {
  padding: 0;
  margin: 0;
}

.wikitable.personality-villagers-wikitable td {
  text-align: center;
  padding: 25px;
}

.wikitable.personality-villagers-wikitable td p {
  margin: 0;
  padding: 0;
}

.wikitable.personality-villagers-wikitable td img {
  width: calc(100% - 50px);
}

.mw-halign-right {
  width: 25%;
}

.mw-halign-right .mw-file-element {
  width: calc(100% - 25px);
}


.mw-halign-left {
  width: 25%;
}

.mw-halign-left .mw-file-element {
  width: calc(100% - 25px);
}