The Dreamers' Library Theme

by LAN 2D

The Dreaming Eye

This is the Dreamers' Library Theme. It was initially meant to be a small thing for Din-Bidor, but I got carried away and now here we are.

If you like the way this theme looks, don't feel like you need a dream-related story to use it - you can always change the header title to whatever you want.

How to include

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

[[include :wanderers-library:component:dreamers-theme]]

Theme Components

---

The body font is Skolar Sana
The Header font is Playfair Display SC.
The Title font is Playfair Display SC.
The monospace font used is Recursive Mono.

---

Here's some links for you:

• Visited link
• Unvisited link
• Missing link

---

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

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

---

Tabulator

This is a tab view.

Tabulation

Hey look, text in a tab. Cool!

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

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

---

+ Click to see code

/* Dreamers' Library Theme by LAN 2D in 2022
*    Based on Dust Jacket by Woedenaz, Black Highlighter by Woedenaz and Croquembouche, and Ghost Record by UncertaintyCrossing
* Background and header texture's based off of webtreats: https://www.flickr.com/photos/44071822@N08/5436446554 and edited by LAN 2D, released under CC BY 2.0
* The Dreaming Eye logo based off of OpenMandriva Association: https://commons.wikimedia.org/wiki/File:Oma-logo-22042013_300pp.png and edited by LAN 2D, under CC BY-SA 3.0
* Fonts used are  */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap');
 
:root{
    /* 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: "dreamers-theme";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Dreamers' Library Theme";
    /* set this to your theme's full name */
--header-title: "The Dreamers' Library";
--header-font: 'Playfair Display SC', serif;
--title-font: 'Playfair Display SC', serif;
--gradient-header: url("https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/baloon-bg.png");
--logo-image: url("https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/Oma-logo-22042013_300pp.png");
/* ===STANDARD THEME COLORS=== */
    --white-monochrome: 252, 252, 252;
    --pale-gray-monochrome: 161, 161, 161;
    --light-pale-gray-monochrome: 255, 250, 215;
    --very-light-gray-monochrome: 220, 230, 220;
    --light-gray-monochrome: 130, 160, 135;
    --gray-monochrome: 79, 79, 79;
    --dark-gray-monochrome: 82, 82, 82;
    --black-monochrome: 250, 250, 250;
    --bright-accent: 235, 235, 235;
    --medium-accent:163, 162, 160;
    --dark-accent: var(--dark-gray-monochrome);
    --alt-accent: 166, 157, 151;
 
/* ===PRIMARY COLORS=== */
    /* ===GENERAL COLORS=== */    
    --swatch-primary: var(--bright-accent);
    --swatch-primary-darker: var(--medium-accent);
    --swatch-primary-darkest: var(--dark-accent);
    --swatch-border-color: var(--medium-accent);
 
    /* ===GENERAL TEXT COLORS=== */
    --swatch-text-dark: var(--black-monochrome);
    --swatch-text-light: var(--white-monochrome);
    --swatch-important-text: var(--bright-accent);
    --newpage-color: 200, 200, 200;
    --visited-link-color: 120, 120, 120;
 
/* ===BACKGROUND & HEADER COLORS=== */
    /* General Background Color */
    --swatch-background: 161, 161, 161, 1.0;
    --swatch-menubg-medium-color: var(--white-monochrome);
    --modal-body-header-txt: 0, 0, 0;
    --modal-body-text: 255, 255, 255;
     --tabs-content-bg-color: var(--swatch-secondary-color),1.0;
    /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
 
/* ===MENU COLORS=== */
    /* ===MENU BACKGROUND COLORS=== */
    --swatch-menubg-color: var(--dark-gray-monochrome);
    /* ===MENU TEXT COLORS=== */
    --swatch-menutxt-dark-color: var(--dark-gray-monochrome);
    --swatch-menutxt-light-color: var(--bright-accent);
 
    /* ===TOPBAR MENU BACKGROUND COLORS=== */
    /* Colors used in the --gradient-topmenu var to give the topbar its color */
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
 
/* ===LINK COLORS=== */
    --link-color: var(--medium-accent);
    --hover-link-color: var(--dark-gray-monochrome);
  --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);
/* ===RATING MODULE COLORS=== */
 }
.page-rate-widget-box {
    background: linear-gradient(to top, rgb(0 0 0) 0, rgb(0 0 0) 100%);
    border: 0.0625rem solid rgba(81, 81, 81, 1.0);
}
#edit-page-textarea{
background-color: rgb(50, 50, 50);
}
 
.blockquote, blockquote {
       border: 3px outset rgb(var(--gray-monochrome));
       background: rgb(var(--pale-gray-monochrome));
       color: rgb(0, 0, 0);
}
 
#footer {
       color: rgb(var(--white-monochrome));
}
 
.page-tags a {
       color: rgb(var(--white-monochrome)) !important;
}
 
 .page-tags a::after {
       background-color: rgb(var(--white-monochrome)) !important;
}
 
#main-content hr {
    background: rgb(var(--dark-gray-monochrome));
}
 
 .collection>.collapsible-block {
    display: block;
    padding: 0.15em;
    border: 0.0625rem solid black;
    background-color: #202020;
    text-align: center;
}
 
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a {
    color: rgb(200, 200, 200);
    font-weight: bold;
}
 
 #page-title::before, .meta-title::before, #page-title::after, .meta-title::after {
    background-color: rgb(var(--swatch-primary));
    background-image: url(https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/whitefoil.png);
}
 
#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.wikidot.com/local--files/component:dreamers-theme/greyhr.png);
    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.wikidot.com/local--files/component:dreamers-theme/greyborder.png) 600 round;
       -moz-border-image: url(https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/greyborder.png) 600 round;
         -o-border-image: url(https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/greyborder.png) 600 round;
            border-image: url(https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/greyborder.png) 600 round;
    border-image-width: 6;
    padding: 2vw;
}
 
div#extra-div-1 {
    z-index: -2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(30, 55, 30, 1) 30%, rgba(255, 219, 90, 1) 100%);
    background: var(--gradient-header);
    background-repeat: repeat;
    background-size: var(--header-background-image-size);
}
 
/* Mobile */
@media only screen and (max-width: 768px) {
 
   #skrollr-body {
      height: var(--header-height-on-mobile);
   }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgb(var(--gray-monochrome));
        border-bottom: none;
        border-right: none;
    }
 
}
 
.yui-navset .yui-content {
    background-color: rgba(81, 81, 81, 1.0);
}
 
a, a.newpage {
    background: transparent;
    color: rgb( 170, 170, 170);
}
#page-content table.wiki-content-table {
    display: table;
    margin: 0.5em auto;
    border-spacing: 0;
    background-color: rgb(81, 81, 81);
    color: rgb(var(--tables-body-txt));
}
 
#page-content table.wiki-content-table th {
    --wght: calc(var(--ui-wght) + 200);
    padding: 0.5em 1em;
    background: rgb(45, 45, 45);
    color: rgb(var(--tables-header-txt));
    font-weight: var(--wght);
}
 
form#edit-page-form .edit-page-bottomtable tr > td:first-of-type > div:first-of-type textarea:not(:placeholder-shown) {
    color: rgb(var(--white-monochrome));
}
 
#header h1 a::before {
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 8rem;
    opacity: 1.0;
    pointer-events: none;
    content: "The Dreamers' Library";
    content: var(--header-title);
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px #000000, 0 0 20px #ffffff;
}
 
#header h1 a::after {
    background: white; 
    -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;
}
#content-wrap {
    background-image: url(https://wanderers-library.wikidot.com/local--files/component:dreamers-theme/backgroundfinal4.png);
}
#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.wikidot.com/local--files/component:dreamers-theme/greyglow3.png);
  opacity: 0.7;
}

Footnotes

1. And here's a footnote!