Monoxide V3

Name: Monoxide V3

Author: OxygenNine
License: Creative Commons Attribution-ShareAlike 4.0 License

Tags: css3 sidebar topbar white

Supports top bar menu *: yes
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

Monoxide is an aesthetic theme that is not based on any pre-existing themes. Its visual style draws inspiration from the Bedrock Theme and incorporates some design elements from the Monotypical Theme.

As a foundational theme, Monoxide supports the vast majority of Wikidot page elements, as well as most components within the SCP Wiki. However, its stability and extensibility still fall short of Bedrock or Black Highlighter. If you have no specific requirements or find that Monoxide's compatibility in certain scenarios does not meet your needs, you may opt for one of the following visually similar themes: Parallel, Bedrock, Basalt, or Monotypical.

Through some clever CSS selector techniques, the Monoxide theme translates certain Wikidot English texts (there is no corresponding translation entry on Translate Wikidot). By default, it currently supports Chinese, Traditional Chinese, and Japanese (this is because, for some reason, nearly half of the references to this theme come from sandboxes in the JP branch). If you wish to add/modify translations for a particular language, please send a Wikidot private message to OxygenNine.

How to install

go to: your wiki admin panel » appearance » themes
choose External CSS theme
supply the following URL as the CSS location

http://themes.wdfiles.com/local--code/mox

Code

+ show the code

- hide the code

@import url(https://scp-wiki-cn.wikidot.com/theme:mox/code/8);
 
div#side-bar::after {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(var(--mox-header-height) * -1) / cover !important;
}
 
#header #search-top-box input.button {
    background: url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(var(--mox-header-height)* -2) center / cover !important;
}
 
a.weditor-bold::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 3) center / cover !important;
}
 
a.weditor-italic::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 4) center / cover !important;
}
 
a.weditor-underline::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 22) center / cover !important;
}
 
a.weditor-strikethrough::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 5) center / cover !important;
}
 
a.weditor-quote::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 6) center / cover !important;
}
 
a.weditor-superscript::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 7) center / cover !important;
}
 
a.weditor-subscript::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 8) center / cover !important;
}
 
a.weditor-table::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 9) center / cover !important;
}
 
a.weditor-code::before, a.weditor-codewiz::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 10) center / cover !important;
}
 
a.weditor-uri::before, a.weditor-uriwiz::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 11) center / cover !important;
}
 
a.weditor-pagelink::before, a.weditor-pagelinkwiz::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 12) center / cover !important;
}
 
a.weditor-image::before, a.weditor-imagewiz::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 13) center / cover !important;
}
 
a.weditor-html::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 14) center / cover !important;
}
 
a.weditor-numlist::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 15) center / cover !important;
}
 
a.weditor-bullist::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 15.8) center / cover !important;
}
 
a.weditor-incindent::before, a.weditor-decindent::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 16) center / cover !important;
}
 
a.weditor-deflist::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 17) center / cover !important;
}
 
a.weditor-footnote::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 18) center / cover !important;
}
 
a.weditor-bib::before, a.weditor-bibcite::before {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 20.8) center / cover !important;
}
 
:where(a.weditor-imagewiz, a.weditor-codewiz, a.weditor-uriwiz, a.weditor-pagelinkwiz, a.weditor-incindent, a.weditor-decindent, a.weditor-eqref,a.weditor-bibcite)::after {
    background: var(--mox-layer-light-1) url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2) no-repeat local calc(-2.3rem* 20) center / cover;
}
 
:where(a.weditor-imagewiz, a.weditor-codewiz, a.weditor-uriwiz, a.weditor-pagelinkwiz, a.weditor-incindent, a.weditor-decindent, a.weditor-eqref,a.weditor-bibcite)::after {
    background-color: var(--mox-layer-dark-1);
    background-image: url(https://oxygennine.wdfiles.com/local--files/system:files/icons-2);
    background-repeat: no-repeat;
    background-position: left center !important;
    background-size: cover;
    background-position: -20.055rem !important;
    background-origin: content-box;
}

Notes

The support of this layout for the top bar depends on the following structure, so there may be problems in the preview:

[[div class="top-bar"]]
[!-- Desktop top bar --]
* Option
 * Sub - option
[[/div]]

[[div class="mobile-top-bar"]]
[[div class="open-menu"]]
[#side-bar ≡]
[[/div]]
[!-- Mobile top bar --]
* Option
 * Sub - option
[[/div]]

If you want to get more configurable options, please use the version released on the SCP Wiki at https://scp-wiki-cn.wikidot.com/theme:mox.