MediaWiki:Common.css
From RosieSoCrossing
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');
.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;
}
.merriweather-sans-400 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.merriweather-sans-700 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.comfortaa-400 {
font-family: "Comfortaa", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.comfortaa-700 {
font-family: "Comfortaa", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.noto-sans-400 {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.noto-sans-700 {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.poppins-thin {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;
}
.poppins-extralight {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
}
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
.poppins-extrabold {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: normal;
}
.poppins-black {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}
.poppins-thin-italic {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: italic;
}
.poppins-extralight-italic {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: italic;
}
.poppins-light-italic {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: italic;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium-italic {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
}
.poppins-semibold-italic {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: italic;
}
.poppins-bold-italic {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: italic;
}
.poppins-extrabold-italic {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: italic;
}
.poppins-black-italic {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: italic;
}
/* 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;
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;
}
