Adoption Poster: Elsa!

+ Show code

@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Awilsons/national-park.css');
 
/*
    Wilson's Wildlife Theme
    [2019 Wikidot Theme]
    Theme by stormbreath.
    Originally by stormbreath and DarkStuff.
    The WWS logo was created by DrAnnoyingDog.
*/
 
@supports(--css:variables) {
 
:root {
/* Intro */
    --theme-base: "nuscp"
    --theme-id: "wilderness-theme"
    --theme-name: "Wilderness Theme";  
 
/* Header */
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Awilderness/WWS_Logo_2.2_abrv.png");
    --header-title: "Wilson's Wildlife Solutions";
    --header-subtitle: "Where all critters are welcome!";
    --header-font: 'national_parkregular', sans-serif;
    --header-gradient-color-bottom: 81, 181, 75;
    --header-gradient-color-middle: 170, 220, 131;
    --header-gradient-color-top: 209, 237, 154;
    --gradient-header: linear-gradient(to top,
          rgb(var(--header-gradient-color-bottom)) 0%,
          rgb(var(--header-gradient-color-middle)) 70%,
          rgb(var(--header-gradient-color-top)) 100%);
    --diagonal-stripes: unset;
 
/* Colors */
    --pale-gray-monochrome: 220, 242, 176; /* Wilson's Quote Color (Light Green)*/
    --gray-monochrome: 80, 68, 37; /* dark brown */
    --dark-gray-monochrome: 66, 56, 31; /* darker brown */
    --bright-accent: 35, 180, 35; /* bright green */
    --medium-accent: 20, 140, 20; /* medium green */
    --dark-accent: 20, 100, 20; /* dark green */
    --newpage-color: 102, 221, 102; /* pale green */
 
    --wilson-header: 163, 193, 98; /* Wilson's Format Header */
    --wilson-subtitle: 200, 226, 147; /* Wilson's Format Subtitle */
    --wilson-body: 209, 237, 154; /* Wilson's Format Body */
    --wilson-text: 102, 87, 49; /* Wilson's Format Text */
 
    --swatch-topmenu-bg-color: var(--gray-monochrome);
    --rating-module-button-color: var(--wilson-text);
    --rating-module-text-color: var(--wilson-text);
    --sidebar-links-text: var(--wilson-text);
    --pale-accent: var(--dark-accent);  /* Visited Link Color*/
    --barColour: var(--wilson-header); /* Ayer's Info Module */
}
 
/* FONTS */
#header h2 span:before,
#top-bar,
#side-bar {
    font-family: var(--header-font); /*Makes subtitle/top-bar/side-bar National Park */
}
 
/* HEADER */
@media only screen and (max-width: 768px) {
    #header {
        background-size: 0.625rem 2.500rem;
        background-repeat: no-repeat;
        background-position: left 0.75rem top 1.1875rem;
        background-clip: border-box;
        background-size: auto 5.375rem;
    }
} /* Fixes mobile sizing issue */
 
#page-title {
    color: rgb(var(--wilson-text));
    border-color: rgb(var(--wilson-text));
}
 
/* SEARCH-BAR */
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus {
    background: rgb(var(--wilson-header)) !important;
    color: rgb(var(--wilson-text)) !important;
} /* Recolors part of searchbar where text is typed, !importants used in Nu. */
 
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
    background: rgb(var(--gray-monochrome)) !important;
} /* Recolors searchbar button, !important used in Nu. */
 
/* LOGIN STUFF */
#login-status {
    color: rgba(var(--white-monochrome));
}
#login-status a {
    color: rgba(var(--white-monochrome));
}
#login-status ul a {
    color: rgba(var(--gray-monochrome));
}
#account-topbutton {
    color: rgba(var(--wilson-text));
}
 
/* Page Rating Module */
.page-rate-widget-box {
    background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome),1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
#page-content .rate-box-with-credit-button {
    background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome),1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
#page-content .rate-box-with-credit-button > .creditButton > p > a::before {
    background-color: rgb(var(--wilson-text));
}
 
#page-content .rate-box-with-credit-button > .creditButton:hover {
    background: rgba(var(--bright-accent), 0.8);
}
 
#page-content .modalbox {
     background: rgb(var(--pale-gray-monochrome)) !important;
     color: rgb(var(--wilson-text));
     border-radius: 0;
     box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5);
}
 
/* RECOLOR THE QUOTEBLOCK */
blockquote,
.blockquote {
    border-color: transparent;
    color: rgb(var(--wilson-text));
}
 
#toc {
    border-color: transparent;
    color: rgb(var(--wilson-text));
    background-color: rgb(var(--pale-gray-monochrome));
    box-shadow: 0em 0.063em 0.125em rgba(0, 0, 0, 0.1);
    padding: 0 1em;
}
 
hr {
    border-top: 0.063rem solid rgba(var(--wilson-text));
}
 
/* Image Caption */
.scp-image-block .scp-image-caption {
  border-color: rgb(var(--wilson-text));
  color: rgb(var(--wilson-text)); /*Recolors Image captions */
}
 
/* TRANSLATION BLOCK */
iframe.scpnet-interwiki-frame {
  filter: hue-rotate(140deg) brightness(150%);
  -webkit-filter: hue-rotate(140deg) brightness(150%);
}
 
/* RECOLOR THE TABLES */
#page-content .wiki-content-table tr th {
    background-color: rgb(var(--wilson-header)); 
   color: white; border-color: rgb(var(--wilson-text));
}
 
/* TABS */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: rgb(var(--gray-monochrome));
    box-shadow: 0 calc(0.0625rem * 5) 0 0 rgb(var(--gray-monochrome));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--wilson-body));
    /* tab background */
    border-color: transparent! important;
    color: rgb(var(--wilson-text));
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: rgb(var(--wilson-header));
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background-color: rgb(var(--wilson-body));
    border-color: transparent;
    box-shadow: 0 0 0 0.0625rem rgb(var(--wilson-header));
}
 
/* Selected Tab */
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    background-color: rgb(var(--wilson-header));
}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    background-color: rgb(var(--wilson-header));
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-nav .selected a:hover {
    background-color: rgb(var(--wilson-subtitle));
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-content {
    background-color: rgba(var(--wilson-body),0.25);
    color: rgb(var(--wilson-text));
    /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: rgb(var(--gray-monochrome));
    /* content border */
}
 
.yui-navset-left .yui-content {
    border-left-color: rgb(var(--gray-monochrome));
    /* different border color */
}
}
 
/* Wilson's Divs */
div.wilson-border {
    border: 0.063em solid rgb(102, 87, 49);  
    box-shadow: 0em 0.063em 0.125em rgba(0, 0, 0, 0.1);
}
 
div.wilson-header {
    color: white; 
    background: rgb(163, 193, 98); 
    padding: 1em; 
    font-size: 150%; 
    font-weight: bold; 
    text-align: center;
}
 
div.wilson-subtitle {
    color: rgb(102, 87, 49); 
    background: rgba(200, 226, 147); 
    padding: 0.313em; 
    text-align: right; 
    font-weight: bold;
}
 
div.wilson-body {
    color: rgba(102, 87, 49); 
    background: rgb(209, 237, 154); 
    padding: 1em;
}

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            -webkit-transition:
                opacity var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-color))) !important;
            -webkit-border-radius: var(--toggle-roundness, 50%);
            -moz-border-radius: var(--toggle-roundness, 50%);
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
            left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            -webkit-transition:
                left var(--sidebar-transition-timing);
            -o-transition:
                left var(--sidebar-transition-timing);
            -moz-transition:
                left var(--sidebar-transition-timing);
            transition:
                left var(--sidebar-transition-timing);
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            -webkit-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
            width: -moz-calc(100% - var(--sidebar-width-on-desktop));
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -moz-box-orient: horizontal;
            -moz-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-calc(100vw - (100vw - 100%));
            width: -moz-calc(100vw - (100vw - 100%));
            width: calc(100vw - (100vw - 100%));
            min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -moz-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: 45.8rem;
            max-width: 45.8rem;
            margin: 0 auto;
        }
 
        @media not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    -webkit-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -o-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -moz-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity var(--sidebar-transition-timing);
                    transition: opacity var(--sidebar-transition-timing);
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
                    width: -moz-calc(100% - var(--sidebar-width-on-desktop));
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

Groups Of Interest » Wilson's Wildlife Solutions Hub » Adoption Poster: Ol' Shock!

Hi! My Name's Elsa!