MediaWiki:Common.css: Difference between revisions

Revision as of 21:01, 29 March 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-ac-triangles-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", 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 {
    color: #9D4A3C;
    text-decoration: none;
    transition: all 0.5s ease;
}

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

.mw-footer-container a, .mw-footer-container a:link, .mw-footer-container a:active, .mw-footer-container a:visited {

}

.mw-footer-container a:hover {

}

#mw-content-container {
    background-color: #9D4A3C;
    background-image: url("https://rosiesocosy.com/themes/custom/rosiesocosy/css/images/bg-noise-red.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;
}

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

.color-middle {
    background: #9D4A3C;
}

.color-left {
    background: #693B33;
}

.color-right {
    background: #693B33;
}

.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: 1em;
    margin: -10px -10px 10px;
    padding: 5px 10px;
    border-bottom: 0;
    display: block;
    background-color: #4C312C;
    border-radius: 6px;
    color: white;
    letter-spacing: 0.1em;
    text-transform: capitalize;
    font-variant: petite-caps;
}