Dream of the Stars Theme

Theme Colors

--gray-monochrome(0, 35, 100)

--bright-accent(163,233,224)

--pale-gray-monochrome(214,245,255)

--light-gray-monochrome(70,130,183)

--dark-gray-monochrome(10,30,55)

--medium-accent(41,127,128)

--dark-accent(10,30,55)

--newpage-color(41,128,92)

About This Page

This is the Paradigm Inapplicable Theme. It was created by Mercuresphere for CN branch book series: Paradigm Shift.

This theme is not dedicated to Paradigm Shift book series.

To put this theme on your page, slap this somewhere in your page:

[[include :scp-wiki-cn:theme:paradigm-inapplicable]]

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.

---

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]]

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

The body font is Skolar Sans
The Header font is Anonymous Pro.
The Title font is Zuijin.
The monospace font used is Recursive.

---

+ Show theme code

/* Sister Luvere's Dream of the Stars Theme */
/* 2022 Wikidot Theme */
/* By Mercuresphere, Based off The Flowing Night Sky Theme by wallowing and Dustjacket Theme by Woedenaz and Croquembouche */
/* Header Image: https://pixabay.com/illustrations/banner-header-sky-night-stars-1557834/ */
/* CC BY-SA 3.0 */
 
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
 
/* ----BEGIN---- */
 
: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: "dream-of-the-stars";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Sister Luvere's Dream of the Stars Theme";
    /* set this to your theme's full name */
 
    /* ===STANDARD THEME COLORS=== */
    --white-monochrome: 252, 252, 252;
    --pale-gray-monochrome: 233, 240, 255;
    --light-pale-gray-monochrome: 251, 242, 255;
    --very-light-gray-monochrome: 220, 222, 230;
    --light-gray-monochrome: 91, 97, 138;
    --gray-monochrome: 43, 14, 116;    
    --dark-gray-monochrome: 41, 26, 91;
    --alt-accent: 153, 0, 255;
 
    --gradient-header: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/flowing.jpg");
    --header-background-image-size: auto var(--header-height-on-desktop);
 
    --link-color: 48, 0, 171;
    --visited-link-color: 48, 0, 171;
    --hover-link-color: 205, 0, 189;
 
    --header-font: Alice, 'Noto Serif SC', Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif;
}
 
#header h1, #header h1 a, #header h1 a::before, #header h1 a::after {
    --wght: 400;
}
 
/* ===yui-tabs=== */
 
#main-content {
    --tabs-bg: var(--swatch-secondary-color);
    --tabs-txt: var(--swatch-text-tertiary-color);
    --tabs-hover-bg: var(--gray-monochrome);
    --tabs-hover-txt: var(--swatch-text-secondary-color);
    --tabs-selected-bg: var(--dark-gray-monochrome);
    --tabs-selected-txt: var(--swatch-text-secondary-color);
    --tabs-selected-outline: var(--dark-gray-monochrome);
    --tabs-bottom-border-color: var(--gray-monochrome);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.25;
    --tabs-content-border-color: var(--swatch-tertiary-color);
}
 
.yui-navset .yui-nav .selected {
    background-color: rgb(var(--dark-gray-monochrome));
}
 
/* ===compatibility patch=== */
div.earthworm div.inner,
div.earthworm div.inner > div {
    display: contents;
}
 
div#u-credit-view h2 {
     font-family:  "EB Garamond", kaiti, 'Ma Shan Zheng',  '华文隶书', 'lisu', 'Noto Serif SC', Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif;
}
 
/* ===hr and border=== */
hr:not(.fancyhr hr), #page-title::before, .meta-title::before, #page-title::after, .meta-title::after {
    filter: hue-rotate(207deg) saturate(109.23%) brightness(36%);
}
 
.fancyhr hr {
    border-image-source: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/wl_hr.png");
}
 
.fancyborder {
    box-sizing: border-box;
    padding: 2vw;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    border-image: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/wl_border.png") 600 round;
    border-image-width: 6;
}
 
blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
    border: 0.1875rem outset rgb(131, 124, 156);
}
 
/* ===link hover=== */
div.page-watch-options a, div.page-watch-options a:visited {
    --hover-link-color: var(--hover-link-color);
}
 
#footer {
    --footer-link-hover-color: var(--dark-gray-monochrome);
}
 
#license-area {
    --license-link-hover-color: var(--dark-gray-monochrome);
}
 
div#extra-div-1 {
    background-position: center;
}
 
#breadcrumbs a:before, #breadcrumbs a:visited:before, .pseudocrumbs a:before, .pseudocrumbs a:visited:before {
    box-shadow: .0625rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1),.25rem .0625rem 0 0 rgba(255,255,255,.85),.25rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1),.3125rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1);
}
 
#breadcrumbs a:active:before, #breadcrumbs a:hover:before, .pseudocrumbs a:active:before, .pseudocrumbs a:hover:before {
    background-color: rgb(var(--gray-monochrome));
    box-shadow: 0 0 0 .25rem rgba(var(--gray-monochrome),1),0 0 0 0 rgba(var(--background-gradient-color),0),0 0 0 0 rgba(var(--swatch-background),0),0 0 0 0 rgba(var(--gray-monochrome),0)
}
 
#breadcrumbs a:focus-within:before,.pseudocrumbs a:focus-within:before {
    background-color: rgb(var(--gray-monochrome));
    box-shadow: 0 0 0 .25rem rgba(var(--gray-monochrome),1),0 0 0 0 rgba(var(--background-gradient-color),0),0 0 0 0 rgba(var(--swatch-background),0),0 0 0 0 rgba(var(--gray-monochrome),0)  
}
 
#page-content .rate-box-with-credit-button > .creditButton > p > a:after {
    background-color: rgba(var(--light-gray-monochrome), 1);
}
 
/* ===mobile header font size=== */
@media only screen and (max-width: 375px) {
    #header h1 a {
        font-size: 2rem;
    }
}
 
@media only screen and (max-width: 425px) {
    div[id*=page-options-bottom] > a:after {
        left: 0.125rem;
    }
}
 
@media only screen and (max-width: 375px) {
    div[id*=page-options-bottom] > a:after {
        left: 0.25rem;
    }
}
 
@media (max-width: 375px) {
    #odialog-container div.owindow {
        width: 100%!important;
    }
}
 
@media only screen and (max-width: 56.25rem) {
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgba(0, 0, 0, 0);
    }
}
 
/* ===Hide Login Status and Search Top Box=== */
 
@media (min-width: 56.25rem) {
    #login-status {
        flex-grow: 0;
        left: inherit;
        right: calc(3% + var(--search-height) - .25em);
    }
 
    #login-status #my-account {
        --wght: var(--ui-wght);
    }
 
    #search-top-box {
        background: none;
        box-shadow: none;
    }
 
    #search-top-box::after {
        transition: none;
    }
 
    #search-top-box:not(:focus-within)::after {
        background-color: rgb(var(--search-icon-focus-bg-color), 0);
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
 
    #search-top-box:not(:focus-within):hover::after {
        --clip-path: var(--clip-path);
        background-color: rgb(var(--search-icon-focus-bg-color), 0);
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
        max-width: var(--search-width);
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        max-width: var(--search-height);
        padding: 0;
        outline-width: 0;
        background-color: rgba(var(--search-icon-hover-bg-color), 0);
        color: rgba(var(--search-textbox-text-color));
        cursor: pointer;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"] {
        pointer-events: none;
    }
}
 
@media only screen and (min-width: 56.25rem) {
    #search-top-box {
        top: 2em;
        right: 3%
    }
 
    #login-status {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        top: 2em;
        right: calc(3% + var(--account-height) + .25em);
        color: transparent;
        pointer-events: none;
        transition: color .2s cubic-bezier(.4,0,.2,1);
        user-select: none
    }
 
    #login-status:active, #login-status:hover {
        -webkit-user-select: initial;
        -moz-user-select: initial;
        -ms-user-select: initial;
        color: rgb(var(--login-line-divider-color));
        pointer-events: all;
        user-select: auto
    }
 
    #login-status:focus-within {
        -webkit-user-select: initial;
        -moz-user-select: initial;
        -ms-user-select: initial;
        color: rgb(var(--login-line-divider-color));
        pointer-events: all;
        user-select: auto
    }
 
    #login-status:active #account-options, #login-status:hover #account-options {
        pointer-events: all
    }
 
    #login-status:focus-within #account-options {
        pointer-events: all
    }
 
    #login-status > :not(#account-topbutton):not([href*="account/messages"]) {
        --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
        -webkit-clip-path: var(--clip-path);
        clip-path: var(--clip-path);
        opacity: 0;
        transition: box-shadow .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-text-decoration .2s cubic-bezier(.4,0,.2,1),-webkit-clip-path .2s cubic-bezier(.4,0,.2,1);
        transition: box-shadow .2s cubic-bezier(.4,0,.2,1),text-decoration .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),clip-path .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
        transition: box-shadow .2s cubic-bezier(.4,0,.2,1),text-decoration .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),clip-path .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-text-decoration .2s cubic-bezier(.4,0,.2,1),-webkit-clip-path .2s cubic-bezier(.4,0,.2,1)
    }
 
    #login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) {
        --clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        -webkit-clip-path: var(--clip-path);
        clip-path: var(--clip-path);
        opacity: 1
    }
 
    #login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) {
        --clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        -webkit-clip-path: var(--clip-path);
        clip-path: var(--clip-path);
        opacity: 1
    }
 
    #login-status #account-topbutton {
        margin-left: 0;
        background-color: initial;
        pointer-events: all;
        transition: background-color .15s cubic-bezier(.4,0,.2,1),-webkit-clip-path .15s cubic-bezier(.4,0,.2,1);
        transition: clip-path .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);
        transition: clip-path .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1),-webkit-clip-path .15s cubic-bezier(.4,0,.2,1)
    }
 
    #login-status:hover #account-topbutton {
        background-color: rgb(var(--login-arrow-color))
    }
 
    #login-status:before {
        -webkit-mask-image: var(--user-account-mask);
        -webkit-mask-size: calc(var(--account-height) - .5em);
        -webkit-mask-position: center right;
        -webkit-mask-repeat: no-repeat;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--login-mobile-icon-color),0);
        background-color: rgba(var(--login-mobile-icon-color),1);
        content: "";
        cursor: pointer;
        mask-image: var(--user-account-mask);
        mask-position: center right;
        mask-repeat: no-repeat;
        mask-size: calc(var(--account-height) - .5em);
        pointer-events: all;
        transition: background-color .15s cubic-bezier(.4,0,.2,1)
    }
 
    #login-status:hover:before {
        background-color: rgba(var(--login-mobile-icon-hover-color),1)
    }
 
    #login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before {
        background-color: rgba(var(--login-mobile-icon-hover-bg-color),0);
        cursor: auto;
        pointer-events: none
    }
 
    #login-status:focus-within:after, #login-status:focus-within:before {
        background-color: rgba(var(--login-mobile-icon-hover-bg-color),0);
        cursor: auto;
        pointer-events: none
    }
 
    #login-status #account-topbutton {
        --clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        -webkit-clip-path: var(--clip-path);
        background-color: rgba(var(--login-arrow-color),0);
        clip-path: var(--clip-path)
    }
 
    #login-status:active #account-topbutton, #login-status:hover #account-topbutton {
        --clip-path: polygon(30% 35%,70% 35%,50% 60%,50% 60%);
        -webkit-clip-path: var(--clip-path);
        background-color: rgb(var(--login-arrow-color));
        clip-path: var(--clip-path)
    }
 
    #login-status:focus-within #account-topbutton {
        --clip-path: polygon(30% 35%,70% 35%,50% 60%,50% 60%);
        -webkit-clip-path: var(--clip-path);
        background-color: rgb(var(--login-arrow-color));
        clip-path: var(--clip-path)
    }
 
    #login-status #account-options {
        margin: 0
    }
 
    #login-status a[href*="account/messages"] {
        color: rgb(var(--login-myaccount-color));
        pointer-events: all
    }
}
 
/* ----END---- */