MediaWiki:Common.css

From RosieSoCrossing
Revision as of 00:42, 27 April 2024 by Rosie (talk | contribs)

Note: After publishing, 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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
@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&family=Comfortaa:wght@300..700&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Skin Custom CSS */

body {
    font-family: "Poppins", 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;
    font-size: 1em;
}

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

strong {
    font-family: "Poppins", 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: "Poppins", 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: "Poppins", 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: "Poppins", 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: "Poppins", 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;
  width: 25%;
}

.wikitable.personality-villagers-wikitable td .mw-file-element {
  max-width: 100%;
  min-width: 128px;
}

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

.wikitable.personality-villagers-wikitable td img {

}

.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);
}









#mw-content-text h1 {
  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-brown.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: 2em;
  clear: both;
}

#mw-content-text h1 a {
  color: #F9F3E8;
}

#mw-content-text h1 .new, #mw-content-text h1 .new a, #mw-content-text h1 a.new:visited, #mw-content-text h1 .new a:visited {
  color: #F9F3E8;
}

#mw-content-text h1 a:hover {
  color: #F9F3E8;
}

/*.rainbow {
  background: #FF0000;
  background: linear-gradient(to right, #FF0000 0%, #FF8C00 17%, #FFD001 34%, #60E600 50%, #00FFD0 66%, #00D9FF 83%, #D900FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}*/

@keyframes wiggle {
 50% {
  transform:rotate(-4deg) scale(1.1);
 }
}

.rainbow.wiggle:nth-child(20n+1),
.rainbow.wiggle:nth-child(20n+13) {
  color:#AD4132;
}

.rainbow.wiggle:nth-child(20n+2),
.rainbow.wiggle:nth-child(20n+14) {
  color:#C05D2B;
}

.rainbow.wiggle:nth-child(20n+3),
.rainbow.wiggle:nth-child(20n+15) {
  color:#CD8C38;
}

.rainbow.wiggle:nth-child(20n+4),
.rainbow.wiggle:nth-child(20n+16) {
  color:#E0AF28;
}

.rainbow.wiggle:nth-child(20n+5),
.rainbow.wiggle:nth-child(20n+17) {
  color:#C2B63F;
}

.rainbow.wiggle:nth-child(20n+6),
.rainbow.wiggle:nth-child(20n+18) {
  color:#81A572;
}

.rainbow.wiggle:nth-child(20n+7),
.rainbow.wiggle:nth-child(20n+19) {
  color:#4CAB98;
}

.rainbow.wiggle:nth-child(20n+8),
.rainbow.wiggle:nth-child(20n) {
  color:#6AB3C4;
}

.rainbow.wiggle:nth-child(20n+9) {
  color:#A19FBE;
}

.rainbow.wiggle:nth-child(20n+10) {
  color:#D3A1BA;
}

.rainbow.wiggle:nth-child(20n+11) {
  color:#E88DAE;
}

.rainbow.wiggle:nth-child(20n+12) {
  color:#CB6770;
}

.wiggle {
  animation-name:wiggle;
  animation-duration:.5s;
}

.wiggle {
  animation: wiggle 0.75s infinite;
  display: inline-block;
}

.wiggle:nth-child(20n+1) {
  animation-delay:0s;
}

.wiggle:nth-child(20n+2) {
  animation-delay:-.1s;
}

.wiggle:nth-child(20n+3) {
  animation-delay:-.2s;
}

.wiggle:nth-child(20n+4) {
  animation-delay:-.3s;
}

.wiggle:nth-child(20n+5) {
  animation-delay:-.4s;
}

.wiggle:nth-child(20n+6) {
  animation-delay:-.5s;
}

.wiggle:nth-child(20n+7) {
  animation-delay:-.6s;
}

.wiggle:nth-child(20n+8) {
  animation-delay:-.7s;
}

.wiggle:nth-child(20n+9) {
  animation-delay:-.8s;
}

.wiggle:nth-child(20n+10) {
  animation-delay:-.9s;
}

.wiggle:nth-child(20n+11) {
  animation-delay:-1s;
}

.wiggle:nth-child(20n+12) {
  animation-delay:-1.1s;
}

.wiggle:nth-child(20n+13) {
  animation-delay:-1.2s;
}

.wiggle:nth-child(20n+14) {
  animation-delay:-1.3s;
}

.wiggle:nth-child(20n+15) {
  animation-delay:-1.4s;
}

.wiggle:nth-child(20n+16) {
  animation-delay:-1.5s;
}

.wiggle:nth-child(20n+17) {
  animation-delay:-1.6s;
}

.wiggle:nth-child(20n+18) {
  animation-delay:-1.7s;
}

.wiggle:nth-child(20n+19) {
  animation-delay:-1.8s;
}

.wiggle:nth-child(20n) {
  animation-delay:-1.9s;
}

.wellhellothere {
  font-family: "Mountains of Christmas", Verdana, Helvetica, sans-serif;
  font-size: 20pt;
}

.center {
  text-align: center;
}

.date {
  font-size: 0.85em;
  font-style: italic;
  color: #984e3e85;
}

.source {
  font-size: 0.85em;
  font-style: italic;
  color: #984e3e85;
}