HANSARP Theme

Link to article: HANSARP Theme.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Ahansarp/1")

```
max-width:300px;
```
```
max-width: 300px;
```
```
font-family: var(--header-font);
```
```
font-family: var(--mono-font);
```
```
font-family: var(--UI-font);
```

```
scp-image-block
```
```
block-right
```
```
scp-image-caption
```
```
code
```

[[iftags +theme]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]

[[>]]
[[module Rate]]
[[/>]]

[[*user Woedenaz]] challenged me to make something usable out of his HANSARP Theme. I took it.

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Maybe Green?
| color1-variable=--medium-accent
| color1-info=(60, 84, 111)
| color1-has-light-text=1
| color2-name=Not Red
| color2-variable=--bright-accent
| color2-info=(222, 71, 30)
| color2-has-light-text=1
| subcolor1-name=Manicla
| subcolor1-variable=--pale-gray-monochrome
| subcolor1-info=(226, 191, 130)
| subcolor2-name=Lalalight
| subcolor2-variable=--white-monochrome
| subcolor2-info=(242, 230, 212)
| subcolor3-name=Barely Blue
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48,48,52)
| subcolor3-has-light-text=1
]]

[[div class="scp-image-block block-right" style="max-width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ahansarp/hansarplogo.png width="250px"]]
[[div class="scp-image-caption" style="max-width: 300px;"]]
HANSARP Logo by [[*user Woedenaz]]
[[/div]]
[[/div]]

+ Usage

Note: This is a **Black Highlighter**-based theme. You will need to import the Black Highlighter theme as well in order to use this theme. [[[theme:black-highlighter-theme|To learn more go here]]].
~~~~
On any wiki:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:hansarp]]@@
[[/div]]

+ 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

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.

[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

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

[[=]]
[[span style="font-family: var(--header-font);"]]Header & Title font is Permanent Marker.[[/span]]
The body font is Mali.
[[span style="font-family: var(--mono-font);"]]The monospace font is Azeret Mono.[[/span]]
[[span style="font-family: var(--UI-font);"]]The UI font is Klee One.[[/span]]
[[/=]]

+ Source Code: 

[[collapsible]]
[[code type="CSS"]]
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;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: "black-highlighter";
    /* must be either "black-highlighter" or "sigma9" */
    --theme-id: "hansarp";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "HANSARP Theme";
    /* set this to your theme's full name */

    /* Typefaces */
    --header-font: 'Permanent Marker', cursive;
    --title-font: 'Permanent Marker', cursive;
    --body-font: 'Mali', cursive;
    --mono-font: 'Azeret Mono', monospace;
    --UI-font: 'Klee One', cursive;

    /* Header */
    --logo-image: none;
    --diagonal-stripes: initial;
    --header-height-on-desktop: 10.5rem;
    --header-height-on-mobile: 10.5rem;
    --background-gradient-distance: 0rem;


    /* Standard Colors */
    --white-monochrome: 242, 230, 212;
    --pale-gray-monochrome: 226, 191, 130;
    --bright-accent: 222, 71, 30;
    --medium-accent: 60, 84, 111;
    --dark-accent: 38, 44, 51;
    --pale-accent: var(--bright-accent);


    --topbar-height-on-desktop: 2.5rem;
    --swatch-topmenu-bg-color: var(--dark-accent);
    --swatch-topmenu-border-color: var(--bright-accent);

    --hoverblock-header-bg: var(--swatch-primary-darkest);
}

#main-content {
    --blockquote-bg-color: var(--dark-accent);
    --tables-border: var(--bright-accent);
}

/*-----------------------------------*/
/*-----------------------------------*/

body {
    background: radial-gradient(rgba(var(--swatch-secondary-color), 1) 1.5px, transparent 1.5px),
    	radial-gradient(rgba(var(--swatch-secondary-color), 1) 1.5px, rgba(var(--white-monochrome), 1) 1.5px);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

#header {
    --header-h1-font-size: calc(var(--base-font-size)*3.25);
    --header-title: "WHAT IS HANSARP?";
    --header-title-mobile: "HANSARP?";
    --swatch-headerh1-color: var(--bright-accent);
}

@media only screen and (max-width: 34.25rem) {
    #header {
    	--header-title: var(--header-title-mobile);
    }
}

#header h1 {
    transform: rotate(-10deg);
}

#header h1 a {
    margin-left: calc(var(--header-height-on-desktop)/1.25 - 1.5rem);
    padding-top: 2.5rem;
}

#header h1 a::before {
    -webkit-filter: drop-shadow(-3.95em -1.15em 0 rgb(var(--dark-accent)));
            filter: drop-shadow(-3.95em -1.15em 0 rgb(var(--dark-accent)));
}

#header h2 {
    display: none;
}

#extrac-div-1 {
    width: 100%;
    height: calc(var(--final-header-height-on-desktop)*1.025);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

#extrac-div-1::before,
#extrac-div-1::after {
    content: " ";
    display: block;
    position: absolute;
    height: calc(var(--final-header-height-on-desktop)*0.975);
    width: calc(var(--final-header-height-on-desktop)*0.975);
    box-sizing: border-box;
    border-radius: 50%;
}

#extrac-div-1::before {
    top: -2rem;
    left: -5rem;
    border: solid 3.5rem rgb(var(--bright-accent));
    box-shadow: 4rem 1rem 0 rgb(var(--medium-accent));
}

#extrac-div-1::after {
    content: " ";
    display: block;
    position: absolute;
    height: calc(var(--final-header-height-on-desktop)*0.975);
    width: calc(var(--final-header-height-on-desktop)*0.975);
    border-radius: 76% 64% 66% 80%;
    background-color: rgb(var(--medium-accent));
    right: calc(36vw - 15rem);
    top: calc(var(--final-header-height-on-desktop)/-3);
    transform: skew(0deg, 10deg) rotate(52deg) scale(1.6, 1.75);
    box-shadow: -7rem 3rem 0 rgb(var(--dark-accent));
    z-index: -2;
}

#extrac-div-1 span {
    display: block;
    position: absolute;
    height: calc(var(--final-header-height-on-desktop)*0.75);
    width: calc(var(--final-header-height-on-desktop)*0.75);
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ahansarp/hansarplogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(60% + 4rem);
    bottom: 1.5rem;
    transform: rotate(30deg);
}

/*-----------------------------------*/

#page-content>*:nth-child(3n-2):not(.image-block, .scp-image-block, .page-rate-widget-box) {
    transform: rotate(0.68deg);
}

#page-content>*:nth-child(3n):not(.image-block, .scp-image-block, .page-rate-widget-box) {
    transform: rotate(-0.68deg);
}

/*-----------------------------------*/
/*-----Top Menu-----*/
/*-----------------------------------*/
#top-bar .top-bar {
    position: relative;
    background: linear-gradient(90deg, rgb(var(--bright-accent)) 10%, rgb(var(--swatch-topmenu-bg-color)) 30%, rgb(var(--swatch-topmenu-bg-color)) 70%, rgb(var(--medium-accent)) 90%);
}

#header #top-bar .top-bar ul>li>ul {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    -webkit-filter: drop-shadow(0.3rem 0.35rem 0 rgb(var(--bright-accent)));
            filter: drop-shadow(0.3rem 0.35rem 0 rgb(var(--bright-accent)));
}

#header #top-bar .top-bar ul>li>ul>li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgb(var(--medium-accent));
}

#header #top-bar .top-bar ul>li>ul>li:nth-child(2n)::before {
    background-color: rgb(var(--dark-accent));
}

#top-bar .top-bar>ul>li ul>li:nth-child(2n) {
    transform: perspective(1rem) rotateY(1.5deg) scale(1.02);
}

#top-bar .top-bar>ul>li ul>li:nth-child(2n-1) {
    transform: perspective(1rem) rotateY(-1.5deg) scale(1.02);
}

#extrac-div-2 {
    width: 100%;
    height: calc(var(--final-header-height-on-desktop)*1.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

#extrac-div-2::before,
#extrac-div-2::after {
    content: "";
    display: block;
    position: absolute;
    width: 80%;
    height: 5.5rem;
}

#extrac-div-2::before {
    left: 0;
    bottom: calc(var(--final-header-height-on-desktop)*0.5);
    background-color: rgb(var(--bright-accent));
    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 100%, 0 100%);
}

#extrac-div-2::after {
    right: 0;
    top: var(--header-height-on-desktop);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgb(var(--medium-accent)) 30%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/*-----------------------------------*/
/*-----Side Bar-----*/
/*-----------------------------------*/

#side-bar,
#interwiki {
    --sidebar-bg-color: var(--swatch-secondary-color);
    --swatch-menubg-color: var(--sidebar-bg-color);
}

#side-bar>.scpnet-interwiki-wrapper {
    --swatch-primary: var(--sidebar-bg-color);
}

#interwiki .side-block,
#side-bar .side-block {
    box-shadow: 0.25rem 0.25rem 0 rgb(var(--dark-gray-monochrome)), 0.5rem 0.5rem 0 rgb(var(--bright-accent));
}

#interwiki .side-block>*:nth-child(2n),
#side-bar .side-block>*:nth-child(2n) {
    --sidebar-links-hover-bg-color: var(--medium-accent);
}

#interwiki .heading,
#side-bar .heading {
    box-shadow: none;
    position: relative;
}

#interwiki .heading p,
#side-bar .heading p {
    color: rgb(var(--white-monochrome));
    display: inline-block;
    position: relative;
    padding: 0.45em 1em;
    text-indent: 0;	
    transform: perspective(7em) rotateY(19deg) scale(1.05);
}

#side-bar .heading p {
    margin: 0 1.5em 0 auto;
}

#interwiki .heading p {
    margin: 0 0 0 auto;
}

#interwiki .heading p:first-letter,
#side-bar .heading p:first-letter {
    background-color: rgb(var(--white-monochrome));
    color: rgb(var(--dark-accent));
    padding: 0 0.25em;
    margin-right: 0.2em;
}

#interwiki .heading p::after,
#side-bar .heading p::after {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--dark-accent));
    z-index: -1;
    transform: skewX(-30deg) translateY(0.1em);
    box-shadow: 1.5em 0.25em 0 rgb(var(--swatch-primary));
}


/*-----------------------------------*/
/*-----------------------------------*/

/*-----Links-----*/

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a) {
    color: rgb(var(--link-color));
    display: inline-block;
    position: relative;
    text-decoration: underline;
    padding: 0.05em 0.25em;
    margin: 0.1em 0 0.1em -0.25em;
    --hover-link-color: var(--white-monochrome);
    --link-color: var(--bright-accent);

    transition: transform 0.125s ease;
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transform: none;
    transform-style: flat;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 73.5%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 73.5%);
    transition: transform 0.125s ease-out, background-color 0.01s ease;
    z-index: -2;
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::after {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.075s linear;
    z-index: -1;
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus) {
    text-decoration: none;
    color: rgb(var(--hover-link-color));
    margin-right: -0.465em;
    transform: scale(1.05) rotate(3deg);
    z-index: 2;
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus)::before {
    background-color: rgb(var(--bright-accent));
    transform: skew(-20deg) scale(1.06, 1.4) rotate(-4deg) translate(0.25em, calc(0.12em + 9%));
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus)::after {
    background-color: rgb(var(--dark-accent));
}

#main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus):first-letter {
    background-color: rgb(var(--white-monochrome));
    color: rgb(var(--dark-accent));
    padding: 0 0.15em;
    margin-right: 0.1em;
    font-weight: bold;
    text-transform: capitalize;
}

/*Firefox Styling*/
@supports (-moz-appearance:none) {

    #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus) {
    	margin-right: -0.65em;
    }

    #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a)::before {
    	display: none;
    }

    #main-content a:not(a.footnoteref, .footnote-footer>a:first-child, ul.yui-nav a, .page-rate-widget-box a, .rate-box-with-credit-button a, div[id*="page-options-bottom"] a, #edit-page-form a, .page-tags a):is(:hover, :focus)::after {
    	transition: background-color 0.075s linear, box-shadow 0.08s ease-out 0.03s, transform 0.05s;
    	box-shadow: 0.35em 0.25em 0 rgb(var(--bright-accent));
    	transform: translatex(-3%) scaleY(1.1) skew(-15deg);
    }

}

/*-----Blockquote-----*/

#main-content blockquote,
#main-content div.blockquote {
    color: rgb(var(--white-monochrome));
    background-color: transparent;
    box-shadow: none;
    margin-left: 3.5rem;
    margin-bottom: calc(8% + 2.5rem);
    margin-top: 1rem;
    padding: 1.85rem 1.75rem 1.45rem 1.35rem;
    position: relative;
    -webkit-filter: brightness(1.14) hue-rotate(2deg) drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary)));
            filter: brightness(1.14) hue-rotate(2deg) drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary)));
}

#page-content>blockquote,
#page-content>div.blockquote {
    -webkit-filter: drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary)));
            filter: drop-shadow(0.65rem 0.45rem 0 rgb(var(--swatch-primary)));
}

:is(blockquote, div.blockquote)::before,
:is(blockquote, div.blockquote)::after {
    content: "";
    display: block;
    position: absolute;
    background-color: rgb(var(--blockquote-bg-color));
    z-index: -1;
}

:is(blockquote, div.blockquote)::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0 1rem, 100% 0, calc(100% - 1rem) 100%, 0.5rem calc(100% - 0.5rem));
            clip-path: polygon(0 1rem, 100% 0, calc(100% - 1rem) 100%, 0.5rem calc(100% - 0.5rem));
}

:is(blockquote, div.blockquote)::after {
    top: calc(97.5% - 0.75rem);
    right: calc(90% - 2rem);
    width: calc(15% + 5rem);
    height: calc(10% + 3rem);
    -webkit-clip-path: polygon(0 55%, 40% 40%, 37% 0, 100% 30%, 93% 83%, 60% 64%, 56% 84%);
            clip-path: polygon(0 55%, 40% 40%, 37% 0, 100% 30%, 93% 83%, 60% 64%, 56% 84%);
    transform: rotate(-25deg);
}

@media only screen and (max-width: 42.5rem) {
    :is(blockquote, div.blockquote)::after {
    	display: none;
    }

    #main-content blockquote,
    #main-content div.blockquote {
    	margin: 1rem auto;
    	padding: 1.75rem 1.75rem 1.15rem 1.5rem;
    }
}

/*-----Page Title, h1-6-----*/
#page-title,
.meta-title {
    text-align: center;
    position: relative;
    display: flow-root;
    font-size: 2.5em;
    margin: 0.25em 0.5rem;
}

#main-content :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    display: flow-root;
    margin: 0.35em 0.5rem;
}

#page-title:first-letter,
.meta-title:first-letter,
#main-content :is(h1, h2, h3, h4, h5, h6):first-letter {
    font-size: 135%;
    color: rgb(var(--swatch-primary));
}

#page-title::after,
.meta-title::after,
#main-content :is(h1, h2, h3, h4, h5, h6)::after {
    content: "";
    position: absolute;
    bottom: -0.05em;
    left: 0;
    width: 100%;
    height: 0.65em;
    margin: 0;
    z-index: -1;
    background-color: rgba(var(--pale-gray-monochrome), 0.65);
    transform: skewX(25deg);
}

/*-----Rate Module-----*/
.page-rate-widget-box:not(.rateBox .page-rate-widget-box),
#page-content .rate-box-with-credit-button {
    transform: skew(-15deg) scale(1.03);
    box-shadow: 0.35rem 0.15rem 0 0.05rem rgb(var(--rating-module-bottom-border-color)), -0.75rem 0.45rem 0 0.1rem rgb(var(--medium-accent));
}

.page-rate-widget-box:not(.rateBox .page-rate-widget-box)>*,
#page-content .rate-box-with-credit-button>* {
    transform: skew(15deg);
}

/*-----Horizontal Rule-----*/
hr {
    position: relative;
    background-color: transparent;
    border: none;
    height: 0.75rem;
    --hrmask: linear-gradient(#000 0 0) center/calc(100% - 1.5rem) calc(100% - 1.5rem) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0/1.5rem 0.75rem space no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0 100%/1.5rem 0.75rem space no-repeat, conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0 0/0.75rem 1.5rem no-repeat space, conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 100% 0/0.75rem 1.5rem no-repeat space;
}

hr::before,
hr::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--dark-accent));
    -webkit-mask: var(--hrmask);
    mask: var(--hrmask);
}

hr::before {
    top: 0.4rem;
    left: 0.4rem;
    background-color: rgb(var(--swatch-primary));
}

/*-----Image Block-----*/
#page-content :is(.image-block, .scp-image-block) {
    box-shadow: 0.75rem 0.75rem 0 rgb(var(--swatch-primary)), 1.5rem 1.5rem 0 rgb(var(--dark-accent));
    padding: 0.8rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgb(var(--medium-accent)), rgb(var(--dark-accent)));
    margin-bottom: 2rem;
}

:is(.image-block, .scp-image-block):not(.block-center) {
    transform: perspective(4rem) rotateY(-1.5deg) translateZ(-5px) scale(1.06);
}

#page-content :is(.image-block, .scp-image-block).block-left {
    box-shadow: -0.75rem 0.75rem 0 rgb(var(--swatch-primary)), -1.5rem 1.5rem 0 rgb(var(--dark-accent));
    transform: perspective(4rem) rotateY(1.5deg) translateZ(-5px) scale(1.06);
}

#page-content :is(.image-block, .scp-image-block):not(.block-center) {
    margin-top: calc(5% + 0.65rem);
    margin-bottom: calc(5% + 0.65rem);
}

:is(.image-block, .scp-image-block):not(.block-center) img.image {
    transform: perspective(4rem) rotateY(1.5deg) translateZ(-5px) scale(1.06);
}

:is(.image-block, .scp-image-block).block-left img.image {
    transform: perspective(4rem) rotateY(-1.5deg) translateZ(-5px) scale(1.06);
}

:is(.image-block, .scp-image-block) .scp-image-caption {
    font-size: 1em;
    margin-top: 0.425rem;
    box-shadow: none;
}

:is(.image-block, .scp-image-block):not(.block-center) .scp-image-caption {
    transform: perspective(6rem) rotateY(4.5deg) rotateZ(-2.5deg) rotateX(-1deg) skew(-2deg, -0.35deg);
}

:is(.image-block, .scp-image-block).block-left .scp-image-caption {
    transform: perspective(6rem) rotateY(-4.5deg) rotateZ(2.5deg) rotateX(-1deg) skew(2deg, 0.35deg);
}

/*-----Tabs-----*/
.yui-navset.yui-navset-top {
    display: grid;
    grid-template: "content tabs";
    grid-template-columns: 1fr 9rem;
}

.yui-navset.yui-navset-top>.yui-nav {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: tabs;
    display: flex;
    -webkit-clip-path: none;
            clip-path: none;
    align-items: stretch;
    align-self: flex-start;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    top: var(--topbar-height-on-mobile);
}

.yui-navset.yui-navset-top>.yui-nav>li {
    flex-grow: 0;
}

.yui-navset .yui-nav .selected {
    transform: perspective(6em) rotateY(-15deg) translateZ(1.5em) scale(0.835) translateX(-0.7em);
}

.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav a em {
    white-space: break-spaces;
}

.yui-navset.yui-navset-top>.yui-content {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: content;
    border: none;
    border-right: solid 0.35rem rgb(var(--swatch-primary));
}

/*-----Hovertip-----*/
.hovertip[style*="display: block"] {
    -webkit-filter: drop-shadow(-0.45em -0.45em 0 rgb(var(--swatch-primary)));
            filter: drop-shadow(-0.45em -0.45em 0 rgb(var(--swatch-primary)));
}

.hovertip:before {
    box-shadow: none !important;
}

.hovertip .content {
    box-shadow: -0.5em -0.5em 0 rgb(var(--swatch-primary-darkest));
}

.hovertip .f-heading {
    transform: perspective(5em) rotateY(12deg) rotateZ(0.25deg) scale(1.15) translateY(0.2em);
}


/*-----------------------------------*/
/*-----Edit Area-----*/
/*-----------------------------------*/

div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1),
    	box-shadow .2s cubic-bezier(.4, 0, .2, 1),
    	color .15s cubic-bezier(.4, 0, .2, 1),
    	background-color .15s cubic-bezier(.4, 0, .2, 1),
    	font-weight .2s cubic-bezier(.4, 0, .2, 1),
    	font-variation-settings .2s cubic-bezier(.4, 0, .2, 1),
    	transform 0.15s;
}

div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:is(:hover, :active) {
    transform: scale(0.9) skew(-5deg);
    box-shadow: 0 0 0 .125rem rgb(var(--ui-button-hover-outline)),
    	inset var(--icon-size) 0 0 0 rgb(var(--ui-icon-hover-bg)),
    	0.45rem .35rem 0 .1rem rgb(var(--ui-icon-bg));
}

.page-source {
    background-color: rgba(var(--tabs-content-bg-color));
}

[[/code]]
[[/collapsible]]
[[/iftags]]

[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Ahansarp/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Ahansarp/1
]]

HANSARP Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source