Vitalis LLC Theme
Vitalis LLC!
This is the Vitalis LLC Theme. It was created for tales to use in the second SSS Event - Vitalis LLC.
How to include

To put this theme on your page, slap this somewhere in your page:
[[include :wanderers-library:component:vitalis-llc]]
Theme Components

The body font is Raleway
The Header font is Cinzel Decorative.
The Title font is Poiret One.
The monospace font used is Fira Code.
Here's some links for you:
Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
+ Titles
This is a tab view.
This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

And another¹
An alternative horizontal rule is available as well if the "-----" is enclosed in a "fancyhr" class div, like so:
[[div_ class="fancyhr"]]
-----
[[/div]]
Resulting in this:
There is also a special border that can be enabled by adding the "fancyborder" class to any element. For instance, this is the code to this block:
[[div_ class="fancyborder"]]
content goes here
[[/div]]
This is a	table
You should know	how to make these
already
+ Show theme code
- Hide theme code
/* Vitalis LLC Theme */
/* 2021 Wikidot Theme */
/* By UncertaintyCrossing, based off Wanderers Station theme by Rounderhouse, Dust Jacket theme by Woedenaz, with additional items taken from the Foundless Theme by Greyve and the Pernumbra theme by EstrellaYoshte */
/* All images, textures, and so on are create by me, excluding the fancy hr and border which are made by Woedenaz. In either case, all items are licensed under CC BY SA 3.0. */
 
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
 
 /* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Raleway&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
 
:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "vitalis-LLC";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Vitalis LLC Theme";
    /* set this to your theme's full name */
 
* Colors */
    --pale-gray-monochrome: 255, 226, 147; /* Light Yellow */
    --light-gray-monochrome: 95, 85, 58; /* Accent Grey Yellow */
    --gray-monochrome: 80, 59, 1; /* Grey Yellow  */
    --dark-gray-monochrome: 80, 59, 1; /*Grey Yellow */
    --pale-gray-monochrome: 196, 144, 1;
 
    --pale-accent: 245, 180, 1; /* Bright Yellow*/
    --bright-accent: 255, 222, 132; /* Light Yellow Alt*/
    --medium-accent: 138, 101, 1; /* Warm light brown */
    --dark-accent: 119, 87, 1; /* Warm brown */
    --newpage-color: 57, 42, 1; /* Dark brown */
 
    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);
 
    --tables-body-txt: var(--bright-accent);
    --modal-bg: var(--dark-accent);
 
/* Menu Colors */
    --swatch-background: var(--mid-black);  
    --swatch-menubg-color: var(--gray-monochrome);
    --swatch-menubg-light-color: var(--pale-gray-monochrome);
    --swatch-menubg-medium-color: var(--light-gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--newpage-color);
    --swatch-menubg-dark-color: var(--dark-gray-monochrome);
    --swatch-menubg-black-color: var(--newpage-color);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-dark-color: var(--white-monochrome);
    --swatch-menutxt-light-color: var(--white-monochrome);
    --swatch-border-color: var(--newpage-color);
 
/* Header Colors */
  --swatch-topmenu-border-color: var(--pale-accent);
  --swatch-topmenu-bg-color: var(--pale-gray-monochrome);
 
/* Link Colors */
  --link-color: var(--bright-accent);
  --visited-link-color: var(--pale-gray-monochrome);
  --hover-link-color: var(--pale-accent);
 
    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
 
    /* Header */
    --logo-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/logo_1");
    --header-title: "Vitalis LLC";
    --header-subtitle: "Till Death Do Us Part";
 
    /* Typefaces */
    --body-font: 'Raleway', sans-serif;
    --header-font: 'Cinzel Decorative', cursive;
    --title-font: 'Poiret One', cursive;
    --mono-font: "Fira Code", monospace;
 /
 
}
#header h1 a::before {
    content: "Vitalis LLC";
    content: var(--header-title);
    color: rgb(226, 62, 16);
    color: rgb(var(--bright-accent));
    text-shadow: inherit;
}
 
#header h1 a::after {
    background: url("https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
 
.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
    border-color: rgb(var(--dark-accent));
    font-family: var(--title-font);
    -webkit-transition:
        border-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition:
        border-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition:
        border-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
        border-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
.owindow .button-bar a:hover,
.owindow .button-bar a:active,
a.button:hover,
a.button:active,
button:hover,
button:active,
div.buttons input:hover,
div.buttons input:active,
file:hover,
file:active,
input.button:hover,
input.button:active {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
    border-color: rgb(var(--bright-accent));
}
 
#container-wrap-wrap {
  width: 100%;
}
 
#content-wrap {
    background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/div_v);
}
 
#content-wrap { position: relative; }
#content-wrap::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V);
  opacity: 0;
  background-color: #120d01;
}
 
.page-rate-widget-box {
    border-radius: 0px 15px 0px 15px !important;
    background-color: #232d2c;
}
 
#top-bar div.top-bar > ul > li > ul {
    background: rgba(var(--medium-accent), 1);
}
 
#login-status, #my-account {
   color: rgb(var(--bright-accent)) !important;
}
 
#login-status a {
   color: rgb(var(--bright-accent)) !important;
}
 
#login-status > a > strong {
   color: rgb(var(--bright-accent)) !important;
}
 
#account-topbutton{
    border: solid 1px var(--bright-accent);
}
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--medium-accent), 1);
    color: rgb(var(--swatch-text-light));
}
 
#footer, #footer a {
    background:#211f1c;
}
 
#license-area {
      background:#211f1c;
}
 
   .titlecolumn {
  border: 2px solid rgb(var(--dark-accent));
  background-color: rgba(var(--medium-accent), 0.75);
}
 
.articlecolumn {
  background-color: rgb(var(--dark-accent));
}
 
/* Tables */
table.wiki-content-table th {
    border-top-color: rgba(var(--swatch-menutxt-dark-color), 1) !important;
    border-right-color: rgba(var(--swatch-menutxt-light-color), 1) !important;
    border-bottom-color: rgba(var(--swatch-menutxt-light-color), 1) !important;
    border-left-color: rgba(var(--swatch-menutxt-light-color), 1) !important;
    background: rgb(var(--swatch-menubg-dark-color));
    box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-menutxt-light-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-family: var(--title-font);
    font-weight: 400;
    text-shadow: none;
 
}
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a {
    color: rgb(var(--swatch-menutxt-light-color));
    font-weight: 400 !important;
    -webkit-transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: color;
}
.yui-navset .yui-nav li {
    background-color: rgb(var(--swatch-menubg-dark-color));
    -webkit-transition: background-color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: background-color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: background-color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: background-color 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
       -moz-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
         -o-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forward;
       -moz-animation-fill-mode: forward;
         -o-animation-fill-mode: forward;
            animation-fill-mode: forward;
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}
.yui-navset .yui-nav li em {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: -o-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}
.yui-navset .yui-nav li.selected {
    margin-top: -0.5em;
    padding-top: 0.5em;
    margin-right: 0.0625rem;
    background-color: rgb(var(--tab-border-color)) !important;
    -webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
       -moz-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
         -o-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;
         -o-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
    -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
         -o-animation-play-state: running;
            animation-play-state: running;
}
.yui-navset .yui-nav li.selected a em {
    -webkit-transform: translateY(-0.25em);
       -moz-transform: translateY(-0.25em);
        -ms-transform: translateY(-0.25em);
         -o-transform: translateY(-0.25em);
            transform: translateY(-0.25em);
}
.yui-navset .yui-nav a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus-within {
    background-color: rgba(0, 0, 0, 0);
    font-family: var(--title-font);
    font-weight: 600;
    isolation: isolate;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus-within,
.yui-navset .yui-nav li.selected a {
    color: rgb(var(--swatch-menutxt-dark-color)) !important;
}
.yui-navset .yui-nav a::before,
.yui-navset .yui-nav a::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
}
.yui-navset .yui-nav a::before {
    background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V");
    -webkit-background-size: 100vw 100vw;
       -moz-background-size: 100vw;
         -o-background-size: 100vw;
            background-size: 100vw;
    background-attachment: fixed;
    background-position: 100% 200vh;
    -webkit-mask-image: 
        -webkit-gradient(linear, 
            left bottom, left top, 
            from(rgba(0, 0, 0, 1)), 
            color-stop(33%, rgba(0, 0, 0, 1)), 
            color-stop(66%, rgba(0, 0, 0, 0)), 
            to(rgba(0, 0, 0, 0)));
    -webkit-mask-image: 
        -webkit-linear-gradient(bottom, 
            rgba(0, 0, 0, 1) 0%, 
            rgba(0, 0, 0, 1) 33%, 
            rgba(0, 0, 0, 0) 66%, 
            rgba(0, 0, 0, 0) 100%);
            mask-image: 
        -webkit-gradient(linear, 
            left bottom, left top, 
            from(rgba(0, 0, 0, 1)), 
            color-stop(33%, rgba(0, 0, 0, 1)), 
            color-stop(66%, rgba(0, 0, 0, 0)), 
            to(rgba(0, 0, 0, 0)));
            mask-image: 
        linear-gradient(to top, 
            rgba(0, 0, 0, 1) 0%, 
            rgba(0, 0, 0, 1) 33%, 
            rgba(0, 0, 0, 0) 66%, 
            rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 90px;
            mask-size: 100% 90px;
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    -webkit-mask-position: center 0px;
            mask-position: center 0px;
    -webkit-transition: 
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
        mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
        mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
        mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
        mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), 
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: mask-position, background-position, color;
    pointer-events: none;
}
.yui-navset .yui-nav a:hover::before,
.yui-navset .yui-nav a:focus::before,
.yui-navset .yui-nav li.selected a::before {
    -webkit-mask-position: center -58px;
            mask-position: center -58px;
    background-position: top center;
}
.yui-navset .yui-nav li a::before {
    background-color: rgb(var(--tab-border-color), 1);
    -webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
       -moz-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
         -o-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forward;
       -moz-animation-fill-mode: forward;
         -o-animation-fill-mode: forward;
            animation-fill-mode: forward;
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}
.yui-navset .yui-nav li.selected a::before {
    margin-top: -0.5em;
    padding: 0.5em 0;
    margin-right: 0.0625rem;
    -webkit-mask-position: center -50px;
            mask-position: center -50px;
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;
         -o-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
    -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
         -o-animation-play-state: running;
            animation-play-state: running;
}
.yui-navset .yui-nav a:hover::after,
.yui-navset .yui-nav a:focus::after,
.yui-navset .yui-nav li.selected a::after {
    opacity: 0;
    -webkit-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
       -moz-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
         -o-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-direction: backwards;
       -moz-animation-direction: backwards;
         -o-animation-direction: backwards;
            animation-direction: backwards;
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
}
 
/* Pop-Up Windows */
.owindow {
    background-color: #232d2c;
    border-color: var(--bright-accent);
}
 
.owindow .modal-header {
    background-color: #232d2c;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: #232d2c;
    color: #var(--bright-accent);
    border-bottom: 1px solid #2F333C;
}
 
.owindow .button-bar a {
    background-color: #232d2c;
    border-color: var(--bright-accent);
    color: #ededed;
}
.owindow .button-bar a:hover {
    background-color: var(--bright-accent);
}
 
#toc {
     background-color: rgba(var(--medium-accent));
     color: rgba(var(--bright-accent));
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    background-color: rgba(var(--bright-accent));
    color: rgba(var(--medium-accent));
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover {
    color: rgba(var(--bright-accent));
    border: solid 2px rgba(var(--bright-accent));
}
 
#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a, #top-bar div.top-bar > ul > li > ul > li:hover > a {
    color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
   color: rgba(var(--bright-accent));
}
 
.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
    background-color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav li a em:hover, .yui-navset-top .yui-nav li a em:hover, .yui-navset-bottom .yui-nav li a em:hover {
    color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgba(var(--medium-accent));
}
 
#skrollr-body {
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/header_v);
    background-size: cover;
    background-position: 50% 50%;
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover {
    background-color: rgb(var(--medium-accent));
}
 
#search-top-box:not(:focus-within)::before {  
    color: rgb(var(--bright-accent));
}
       #search-top-box-form input[type="submit"] {
        background-color: rgb(var(--swatch-menutxt-dark-color));
        color: rgb(var(--medium-accent));
        font-size: var(--base-font-size);
        font-weight: 500;
        padding: 0 0.25em;
        border: none;
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-dark-color));
        -webkit-transition:
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-box-shadow 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    #search-top-box-form input[type="submit"]:focus,
   #search-top-box-form input[type="submit"]:hover {
        border: none;
        background-color: rgb(var(--dark-accent));
        color: rgb(var(--swatch-menutxt-dark-color));
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-light-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-light-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menutxt-light-color));
    }
 
#page-title {
    grid-area: page-title;
    border-color: rgb(var(--bright-accent,66,66,72));
    color: rgb(var(--bright-accent,12,12,12));
}
 
h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--bright-accent));
}
 
#lock-info {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}
 
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background-color: rgba(178, 210, 180, 0.25);
    background-color: rgba(var(--swatch-menubg-light-color), 0.25);
    border: 0.0625rem solid rgba(255, 219, 90, 1);
    border: 0.0625rem solid rgba(var(--swatch-primary), 1);
    color: rgba(var(--bright-accent));
}
 
div#page-options-bottom > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom-2 > a:active {
    background-color: rgba(30, 55, 30, 1);
    background-color: rgba(var(--swatch-menubg-dark-color), 1);
    color: rgba(255, 219, 90, 1);
    color: rgba(var(--bright-accent), 1);
}
 
.wl-translations {
    border: 1px solid rgba(var(--bright-accent), 1);
    border-radius: 2px;
}
 
.wl-translations a {
    color: rgba(var(--bright-accent), 1);
}
 
.blockquote, blockquote {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
    border: .063em solid rgba(var(--bright-accent),.25)
}
 
table.wiki-content-table th {
    background-color: rgb(var(--medium-accent));
}
 
table.wiki-content-table th, table.wiki-content-table tr {
    border: .075rem solid rgba(var(--bright-accent),.50) !important;
}
 
tr
{
  color:#ffe293;
}
 
div.text a {
    color: #c49001;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #f5b401:
}
 
div.text a:hover {
    color: #c49001;
    text-decoration: underline;
    background-color: #392a01;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}
#main-content hr {
    height: .125rem;
    border: 0;
    border-top: 0.0625rem solid transparent;
    background-color: rgba(255, 219, 90);
    background-color: rgba(var(--bright-accent));
    background: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
   border: 1px solid rgb(var(--bright-accent));
}
 
#search-top-box:not(:focus-within)::before {  
    color: rgb(var(--bright-accent));
}
 
.blockquote, blockquote {
    border: 3px ridge rgb(var(--dark-accent));
    background: rgba(var(--medium-accent),0.05);
}
 
#main-content hr {
    height: .125rem;
    border: 0;
    border-top: 0.0625rem solid transparent;
    background-color: rgba(255, 219, 90);
    background-color: rgba(var(--bright-accent));
    background: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
.footnotes-footer {
   border: 3px ridge rgb(var(--dark-accent));
   background-color: rgb(var(--dark-gray-monochrome));
}
 
.footnotes-footer .title {
   font-family: var(--title-font);
}
 
#toc {
    border: 3px ridge rgb(var(--medium-accent));
    background-color: rgb(var(--dark-gray-monochrome));
}
 
#toc .title {
    color: rgb(var(--bright-two));
}
 
    textarea,
    input.text {
        background-color: rgb(var(--black-monochrome));
        color: rgb(var(--pale-gray-monochrome));
        padding: 0.5em;
    }
html,
    body {
        color: rgb(var(--swatch-text-light));
        -webkit-font-feature-settings: "onum"0;
        -moz-font-feature-settings: "onum"0;
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
        scrollbar-color: rgb(var(--pale-gray-monochrome)) rgb(var(--dark-gray-monochrome));
    }
 
.footnotes-footer {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 95%;
    height: auto;
    margin: 1.5rem 1.5rem .5rem;
    padding: .15em 1em 1em 0;
    background-color: rgb(var(--pale-gray-monochrome));
    box-shadow: inset .5em 0 0 0 rgba(var(--footnotes-footer-colorbar-color));
    color: rgb(var(--footnotes-footer-text-color));
}
 
#toc {
    border: 3px ridge rgb(var(--medium-accent));
    background: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/div_v);
}
 
#toc .title {
    color: rgb(var(--bright-two));
}
a {
    color: rgb(var(--bright-accent));
}
 
a:visited {
    color: rgb(var(--pale-gray-monochrome));
}
 
a:hover {
    color: rgba(var(--bright-two), .6);
}
 
#main-content .fancyhr hr {
    border-top: 2vw solid transparent;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-image-source: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/hr_VR);
    border-image-repeat: round round;
    background: none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
.fancyborder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    -webkit-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/border_VR) 600 round;
    -moz-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/border_VR) 600 round;
    -o-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/border_VR) 600 round;
    border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/border_VR) 600 round;
    border-image-width: 6;
    padding: 2vw;
}
 
/* mobile */
 
@media only screen and (max-width: 48rem) {
 
 div#extrac-div-3::before {
        text-shadow: inherit;
        background: url(https://wanderers-library.wdfiles.com/local--files/component%3Avitalis-llc/headertexture_V);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        content: "Vitalis LLC";
        content: var(--header-title);
        font-family: var(--header-font);
        font-size: 1%;
        width: 100%;
        height: 6 rem
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        background-color: transparent;
        text-align: center;
        font-weight: 700;
    }
theme vitalis
page revision: 20, last edited: 18 May 2023 15:23
Edit Rate (+14) Tags Discuss (1) History Files Print Site tools + Options
The Wanderers' Library

Fiction from another world.

How to include

Theme Components

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title
