Phantom Prom Theme
Let us dance!
This is the Phantom Prom Theme. It was created for the Phantom's Promenade Halloween Event, but also can be used for unrelated tales as well.
How to include

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

The body font is Raleway
The Header font is Bigelow Rules.
The Title font is Cinzel Decorative.
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
/* Phantom's Promenade Theme */
/* 2024 Wikidot Theme */
/* By UncertaintyCrossing, based off the Vitalis LLC Theme */
/* Assets are released under CC BY SA 3.0. */
 
 /* Fonts */
@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');
@import url('https://fonts.googleapis.com/css2?family=Bigelow+Rules&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: "phantomprom";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Phantom's Promenade Theme";
    /* set this to your theme's full name */
 
* Colors */
    --pale-gray-monochrome: 175, 47, 248; /* Light Purple */
    --light-gray-monochrome: 129, 110, 147; /* Accent Grey Purple */
    --dark-gray-monochrome: 73, 58, 95; /* Grey Purple  */
    --gray-monochrome: 61, 58, 64; /*Dark Grey Purple */
    --pale-gray-monochrome: 240, 98, 0;
 
    --pale-accent: 255, 172, 17; /* Bright Orange*/
    --bright-accent: 185, 71, 255; /*Purple*/
    --medium-accent: 255, 224, 125; /* Warm light yellow */
    --dark-accent: 13, 9, 17; /* Darkest Shade */
    --newpage-color: 57, 42, 1; /* Dark brown */
    --paler-accent: 255, 172, 17, 0.7;
 
    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--pale-accent);
 
    --tables-body-txt: var(--bright-accent);
    --modal-bg: var(--dark-accent);
    --modal-body-header-txt: var(--bright-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);
    --swatch-text-general: var(--pale-accent);
 
/* Header Colors */
  --swatch-topmenu-border-color: var(--bright-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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/logo_patch.png");
    --header-title: "Phantom's Promenade";
    --header-subtitle: " ";
 
    /* Typefaces */
    --body-font: 'Raleway', sans-serif;
    --header-font: 'Bigelow Rules', serif;
    --title-font: 'Cinzel Decorative', cursive;
    --mono-font: "Fira Code", monospace;
 /
 
}
#header h1 a::before {
    content: "'Phantom's Promenade";
    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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg");
    -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;
}
 
blockquote, .blockquote {
  color: rgb(var(--white-monochrome));
}
:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]) {
  color: rgb(var(--white-monochrome));
}
 
.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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/patch_bg.jpg);
}
 
#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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg);
  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(--dark-accent), 1);
}
 
#header #login-status a.btn:is(.login-status-create-account,.login-status-sign-in) {
    color: rgb(var(--swatch-text-secondary-color));
}
 
.code {
 background-color: rgb(var(--medium-accent));
 color: rgb(var(--dark-accent));
}
 
#search-top-box { box-shadow: none; }
 
#login-status #account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--pale-accent), 0.5);
    color: rgb(var(--swatch-text-light));
}
 
#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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg");
    -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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/header_patch);
    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(--pale-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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg);
    -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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
.footnotes-footer .title {
   font-family: var(--title-font);
}
.footnotes-footer .footnote-footer {
  color: rgb(var(--dark-accent));
}
 
#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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/patch_bg.jpg);
}
 
#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-sandbox-2.wdfiles.com/local--files/uncertaintycrossing/headertexture_P.jpg);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        content: "Phantom's Promenade";
        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;
    }
phantomprom2024 theme
page revision: 16, last edited: 05 Nov 2024 01:52
Edit Rate (+6) 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
