FROWNSTYLE

Link to article: FROWNSTYLE.

@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/1);

@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/2);

@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/3);

@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/4);

width: 50%; color: var(--dark-accent); font-size: 18px; margin: auto; margin-top: 20px;

width: 70%; margin: auto; margin-top: 20px;

```
height: 10px
```
```
height: 10px
```

width: 70%; margin: auto; margin-top: 20px;

```
height: 10px
```

```
blockquote
```
```
twosideblock
```
```
blockquote
```
```
onesideblock
```
```
onesideblock
```
```
twosideblock
```
```
twosideblock
```
```
twosideblock
```
```
blockquote
```
```
blockquote
```
```
blockquote
```

[[iftags +theme]]

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

[[=]]

+++ [[size 120%]] Use on Any Wiki: [[/size]]

[[div class="blockquote" style="width: 50%; color: var(--dark-accent); font-size: 18px; margin: auto; margin-top: 20px;"]]

@@[[include :scp-wiki:theme:frownstyle]]@@

[[/div]]

[[/=]]

@@ @@
@@ @@

[[div class="twosideblock" style="width: 70%; margin: auto; margin-top: 20px;"]]

[[=]]

+++ [[size 120%]] What is This? [[/size]]

[[/=]]

Frownstyle is an aesthetic theme by [[*user MisterFrown]] primarily based on [[[theme:blankstyle|Blankstyle]]], [[[theme:foxtrot|Foxtrot]]], and [https://scpko.wikidot.com/theme:navla-style Navlastyle]. It is intended to have a somewhat futuristic style and overall be very, very blue.

This theme comes with various alternate settings, including a dark mode, an alternate rating module intended to look better while centered, and a short intro animation for the header logo. More on how to activate them is below.

[[/div]]

@@ @@
@@ @@

----

[[=]]

+++ [[size 120%]] Examples: [[/size]]

[[/=]]

[[div style="height: 10px"]]
[[/div]]

[[include :scp-wiki:component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Afrownstyle/hotel.png|align=right|caption=Image Block.|width=320px]]

[[[misterfrown| A Link]]].[[footnote]] test [[/footnote]]

[[collapsible show="Collapsible" hide="Close"]]

[[/collapsible]]

+ Header 1
++ Header 2
+++ Header 3
++++ Header 4
+++++ Header 5
++++++ Header 6

@@ @@

||~ test ||~ test ||
|| this is || a table ||
|| i dont || use these ||
|| very || often tbh ||

@@ @@

[[div class="blockquote"]]

Here's a blockquote.

> nested blockquote

[[/div]]

[[tabview]]

[[tab test1]]

[[/tab]]

[[tab test2]]

[[/tab]]

[[tab test3]]

[[/tab]]

[[/tabview]]

@@ @@

[[div class="onesideblock"]]

@@[[div class="onesideblock"]]@@

[[/div]]

[[div class="twosideblock"]]

@@[[div class="twosideblock"]]@@

[[/div]]

@@ @@
@@ @@

----

[[=]]

+++ [[size 120%]] Settings: [[/size]]

[[/=]]

[[div style="height: 10px"]]
[[/div]]

[[div class="twosideblock" style="width: 70%; margin: auto; margin-top: 20px;"]]

[[=]]

++++ Dark Mode:

[[/=]]

[[div class="blockquote"]]

@@[[include :scp-wiki:theme:frownstyle@@
@@|dark=--]@@
@@]]@@

[[/div]]

[[=]]

++++ Alternate Rating Module:

[[/=]]

[[div class="blockquote"]]

@@[[include :scp-wiki:theme:frownstyle@@
@@|rate=--]@@
@@]]@@

[[/div]]

[[=]]

++++ Intro Animation:

[[/=]]

[[div class="blockquote"]]

@@[[include :scp-wiki:theme:frownstyle@@
@@|anim=--]@@
@@]]@@

[[/div]]

[[/div]]

@@ @@
@@ @@

----

[[=]]

+++ [[size 120%]] Source Code: [[/size]]

[[/=]]

[[div style="height: 10px"]]
[[/div]]

[[collapsible show="Show Theme Code" hide="Hide Theme Code"]]

[[code type="css"]]

/* Frownstyle Theme by MisterFrown */

/* Fonts */

@import url("https://fonts.bunny.net/css2?family=Aldrich&family=Electrolize&family=Kdam+Thmor+Pro&family=Odibee+Sans&family=Orbitron:wght@400..900&display=swap");
@import url('https://fonts.bunny.net/css?family=Lato:400,900|PT+Mono|Poppins:600,800');
@import url('https://fonts.bunny.net/css2?family=Oxanium&display=swap');

/* Root Block */

:root {

--bright-accent: #0c499c;
--medium-accent: #4169e1;
--dark-accent: #000060;
--ghost-accent: #f0ffff;

--title-font: 'Oxanium', cursive;
--header-font: "Aldrich", sans-serif;
--body-font: 'Lato', sans-serif;

--font-color: #000000;

}

/* ACS Bar */

.top-left-box > .item {

display: none;

}

/* Logo */

div#extra-div-1 {

margin-top: 10px;
opacity: 75%;
height: 140px;
width: 100%;
top: 0;
position: absolute;
background: url('https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg') center no-repeat;
background-size: contain;
background-position: 50% 50%;
z-index: -1;

}

/* Header */

#header h1, #header h2 {

margin-left: 0; float: none; text-align: center;

}

#header h1 span, #header h2 span {

font-size: 0; display: none;

}

#header h2 {

margin-top: 15px;

}

#header h1 a::before, #header h2::before {

color: var(--dark-accent);
font-family: var(--header-font);
text-shadow: none;

}

#header h1 a::before {

content: "THE FOUNDATION";
font-weight: 600;
font-size: 1.3em;

}
 
#header h2::before {

content: "INTERNAL FILE STORAGE";
font-weight: 700;
font-size: 1.2em;

}

/* Background */

div#container-wrap, div#header {

background-image: none;

}

body {

background-image: linear-gradient(to bottom, #b4d5df, #e7feff 200px);
font-size: 93%;
font-family: var(--body-font);
color: var(--font-color);

}

/* Title, Header, and Links */

#page-title {

color: var(--bright-accent);
text-align: center;
margin-top: 50px;
font-family: var(--title-font);
font-weight: bold;

}

h1 {

color: var(--bright-accent);

}

h1,
h2,
h3,
h4,
h5,
h6 {

font-family: var(--header-font);

}

a {

color: var(--bright-accent);
text-decoration: none;
background: transparent;

}

a:visited {

color: var(--dark-accent);
text-decoration: none;
background: transparent;

}

a.newpage {

color: var(--medium-accent);
text-decoration: none;
background: transparent;

}

.interwiki_entry a {

color: var(--bright-accent);

}

/* Top Bar */

#top-bar {

margin-top: 15px;
display: flex;
justify-content: center;
font-family: var(--title-font);

}

#top-bar a {

color: var(--dark-accent);

}

#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
transition: background 0.25s linear;

}

#top-bar div.open-menu a {

border: 2px solid var(--dark-accent);
color: var(--dark-accent);
background: var(--ghost-accent);
border-radius: 15%;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

#side-bar {

background: #cacaca45;
color: var(--font-color);

}

#side-bar .side-block,
#side-bar .side-block.resources,
#side-bar .side-block.media {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
border-radius: 0;
box-shadow: inset 0px 0px 4px var(--bright-accent);

}

#side-bar .heading,
#interwiki .heading {

color: var(--dark-accent);
border-color: var(--dark-accent);
font-family: var(--title-font);
font-size: 15px;

}

#side-bar a {

color: var(--bright-accent);

}

/* Search Button */

#search-top-box { top: 25px; transform: translate(1%, -7%); }
#search-top-box-form > input[type=text] { display: none; }

#search-top-box-form input[type=submit] {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: none;
margin-bottom: 50px;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {

border: 2px solid var(--dark-accent);
background: #FFFFFF;
color: var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: 0px 0px 4px var(--bright-accent);

}

/* Image Block */

.image-block,
.scp-image-block {

border: solid 1.8px var(--dark-accent);
box-shadow: none;
box-shadow: 0px 0px 4px var(--bright-accent);

}
 
:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {

color: var(--dark-accent);
border-top: solid 1.8px var(--dark-accent);
font-family: var(--title-font);
background: var(--ghost-accent);

}

.scp-image-block.block-right {

margin: 0 0 1rem 2rem;

}

/* Tables */

#page-content tr th {

color: white;
background-color: var(--dark-accent);
border: solid 2px var(--dark-accent);
font-family: var(--title-font);

}

#page-content tr td {

border: solid 2px var(--dark-accent);
background-color: var(--ghost-accent);

}

/* Horizontal Rule */

hr {

background: var(--dark-accent);
height: 2px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;

}

/* Rating Module */

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

border-radius: 0;
font-family: var(--title-font);
box-shadow: none;
background-color: var(--dark-accent);
border-color: var(--dark-accent);
padding-top: 1px;
padding-bottom: 1px;

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

background-color: var(--ghost-accent);
padding-top: 1px;
padding-bottom: 1px;
border-color: var(--dark-accent);

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-accent);

}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
text-decoration: none;

}

.page-rate-widget-box .cancel a {

color: var(--ghost-accent);

}

.page-rate-widget-box .cancel a:hover {

color: var(--bright-accent);
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--dark-accent);
border-color: var(--dark-accent);

}
 
.page-rate-widget-box {

margin-right: 0;

}
 
.page-rate-widget-box .cancel {

border-radius: 0 !important;
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--dark-accent);
border-color: var(--dark-accent);

}

#page-content .rate-box-with-credit-button {

background-color: var(--dark-accent);
border-radius: 0;
border-color: var(--dark-accent);
box-shadow: none;

}

/* Login Status + Account Options */

#login-status {

color: var(--dark-accent);
font-family: var(--title-font);
font-weight: bold;
right: calc(10px + 49.3rem);
top: 20px;
flex-grow: 1;
right: initial;

}

#login-status a {

color: var(--dark-accent);

}

#account-topbutton {

border: 2px solid var(--dark-accent);
border-radius: 5px;
background: var(--ghost-accent) !important;
box-shadow: inset 0px 0px 2px var(--bright-accent);
padding-top: 2px;
padding-bottom: 2px;

}

#account-options {

width: 6.25rem;
background: var(--ghost-accent);
border: none;
border: solid 2px var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
margin-top: 5px;

}

#account-options ul a {

color: var(--bright-accent);

}

/* Hovertip + Buttons */

.hovertip .content {

border: 1.5px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
font-family: var(--title-font);
font-weight: 900;
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

.buttons .btn {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;
padding: 2px 5px 2px 5px;

}

/* Table of Contents */

#toc {

border: 2px solid var(--dark-accent);
background: var(--ghost-accent);
color: var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);
font-family: var(--title-font);
font-weight: 900;

}

/* Footnotes */

.footnotes-footer .title {

font-family: var(--title-font);
color: var(--dark-accent);
text-transform: uppercase !important;
font-size: 20px;
text-align: center;
padding-bottom: 10px;
margin-bottom: 10px;

}

.footnotes-footer {

border-left: solid 3px var(--dark-accent);
border-right: solid 3px var(--dark-accent);
background: var(--ghost-accent);
box-shadow: 0px 0px 2px var(--bright-accent);
margin: 10px;
margin-bottom: 20px;
padding: 10px;

}

/* Footer + License Area */

#footer {

background: transparent;
color: var(--dark-accent);

}
 
#footer a {

color: var(--bright-accent);

}

#license-area {

color: var(--dark-accent);
background: var(--ghost-accent);
border-top: solid 2px var(--dark-accent);
margin-top: 10px;

}

#license-area a {

color: var(--bright-accent);

}
 
#license-area a::after {

content: ".";

}

/* Tabs Code from Foxtrot Theme */

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {

display: flex;
flex-wrap: wrap;
width: calc(100% - .125rem);
margin: 0 auto;
border-color: var(--dark-accent);
box-shadow: none;

}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {

color: var(--dark-accent);
background-color: var(--ghost-accent);
border: solid 1px var(--dark-accent);
box-shadow: none;
box-shadow: none;

}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {

background-color: var(--dark-accent);
color: var(--bright-accent);

}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {

position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--ghost-accent);
background-color: var(--ghost-accent);
border-color: transparent;
box-shadow: none;

}
 
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {

display: flex;
align-items: center;
justify-content: center;
width: 100%;

}
 
.yui-navset .yui-nav li em {

border: unset;

}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {

padding: .35em .75em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {

flex-grow: 2;
margin: 0;
padding: 0;
background-color: var(--dark-accent);

}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {

border: none;

}
 
.yui-navset .yui-nav .selected a {

width: 100%;
color: var(--ghost-accent);

}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {

color: var(--ghost-accent);
background-color: var(--dark-accent);

}
 
.yui-navset .yui-content {

background-color: var(--ghost-accent);
box-shadow: none;

}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {

padding: .5em;
border: 1px solid var(--dark-accent);
box-sizing: border-box;

}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {

background-color: inherit;
background-image: inherit;

}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {

background: inherit;
text-decoration: inherit;

}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {

color: inherit;
background: inherit;

}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {

border-color: inherit;

}
 
.yui-navset li {

line-height: inherit;

}

/* Collapsible Code from Penumbra BHL Theme and DJK Component */

#page-content .info-container .collapsible-block-folded,
#page-content .info-container .collapsible-block-unfolded-link {

width: 100%;
max-width: 100%;
margin: 0 auto;
box-shadow: none;
background: var(--dark-accent);

}
 
#page-content .info-container .collapsible-block-link {

padding: 0;

}
 
#page-content .info-container .collapsible-block-link::before,
#page-content .info-container .collapsible-block-unfolded-link::before {

content: " ";
display: none;

}
 
#page-content .info-container .collapsible-block-content::after {

display: none;

}

#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {

background: transparent;
transition: background 0.25s linear;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
overflow: hidden;
margin: auto;
box-sizing: border-box;

}
 
#page-content .collapsible-block-folded .collapsible-block-link::before {

content: "▷ ";

}
 
#page-content .collapsible-block-unfolded .collapsible-block-link::before {

content: "▽ ";

}
 
#page-content .collapsible-block-link {

display: inline-block;
padding: 0.5rem 1rem;
text-decoration: none;
text-align: center;
color: var(--dark-accent);
font-weight: 700;

}
 
#page-content .collapsible-block-link:hover {

color: var(--ghost-accent);

}
 
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {

background: var(--bright-accent);
color: var(--ghost-accent);

}
 
#page-content .collapsible-block-unfolded-link {

box-shadow: 0rem -0.26rem 0rem 0rem var(--bright-accent);

}
 
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {

margin: 0;

}

/* Mobile Adjustments */

@media only screen and (max-width: 600px) {

#header h1 a::before {

font-size: 1em;

}

#login-status {

left: 40px;

}

#my-account {

display: none;

}

}

/* Info Bar */

.info-container {
 
--barColour: var(--dark-accent);
--linkColour: #FFF;
 
}

/* Divs */

:is(blockquote, div.blockquote, [class*="blockquote"]) {

background-color: var(--ghost-accent);
border: solid 2px var(--dark-accent);
box-shadow: inset 0px 0px 2px var(--bright-accent);

}

.onesideblock {

margin: auto;
background: var(--ghost-accent);
border-left: solid 5px var(--dark-accent);
margin-bottom: 5px;
margin-top: 5px;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 2px var(--bright-accent);

}

.twosideblock {

margin-left: auto;
margin-right: auto;
background: var(--ghost-accent);
border-left: solid 2.5px var(--dark-accent);
border-right: solid 2.5px var(--dark-accent);
margin-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 0px 2px var(--bright-accent);

}

[[/code]]

[[code type="css"]]

/* Dark Mode */

:root {

--bright-accent: #87ceeb;
--medium-accent: #00bfff;
--dark-accent: #abcdef;
--ghost-accent: #cacaca45;

--dark-rate-color: #000060;

--font-color: #f8f8ff;

}

div#extra-div-1 {

opacity: 25%;

}

body {

background-color: #0047ab;
background-image: linear-gradient(180deg, #0047ab 0%, #483d8bA4 80%, #0038a8 100%), url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/color-bg.png), linear-gradient(to right, #63D8FF, #63D8FF);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

}

.hovertip .content {

background: #000060;
color: var(--bright-accent);

}

.buttons .btn {

background: #000060;
color: var(--bright-accent);

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background-color: #ffffff;

}

.page-rate-widget-box .cancel a {

color: #ffffff;

}

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

border-color: var(--dark-rate-color);

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-rate-color);

}

.page-rate-widget-box .cancel a:hover {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}
 
.page-rate-widget-box .cancel {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

#page-content .rate-box-with-credit-button {

background-color: var(--dark-rate-color);
border-color: var(--dark-rate-color);

}

#page-content .modalbox {

background: #000060;
border-color: var(--bright-accent);

}

#page-content .collapsible-block-link:hover,
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {

color: #ffffff;

}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {

background-color: var(--ghost-accent);
color: #ffffff;

}

.yui-navset .yui-navset-top .yui-nav .selected em,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {

color: #ffffff;

}

#top-bar div.open-menu a,
#search-top-box-form input[type=submit],
#account-topbutton,
#account-options,
.hovertip .content,
.buttons .btn,
#side-bar .side-block,
#side-bar .side-block.resources,
#side-bar .side-block.media,
.footnotes-footer,
#toc,
.image-block,
.scp-image-block,
:is(blockquote, div.blockquote, [class*="blockquote"]),
.onesideblock,
.twosideblock {

box-shadow: none;

}

#lock-info,
.owindow {

background-color: #000060;
border-color: var(--bright-accent);

}

[[/code]]

[[code type="css"]]

/* Alternate Rating Module */

.page-rate-widget-box,
div.page-rate-widget-box .rate-points {

color: var(--dark-accent);
border-radius: 0;
font-family: var(--title-font);
box-shadow: none;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;
padding-top: 1px;
padding-bottom: 1px;

}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {

background-color: var(--ghost-accent);
padding-top: 1px;
padding-bottom: 1px;
border-color: var(--dark-accent);
border-width: 2px;

}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {

color: var(--dark-accent);

}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {

background: var(--ghost-accent);
color: var(--bright-accent);
text-decoration: none;

}

.page-rate-widget-box .cancel a {

color: var(--bright-accent);
border-color: var(--dark-accent);
border-width: 2px;

}

.page-rate-widget-box .cancel a:hover {

color: var(--bright-accent);
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;

}
 
.page-rate-widget-box {

margin-right: 0;

}
 
.page-rate-widget-box .cancel {

border-radius: 0 !important;
padding-top: 1px;
padding-bottom: 1px;
background-color: var(--ghost-accent);
border-color: var(--dark-accent);
border-width: 2px;

}

#page-content .rate-box-with-credit-button {

background-color: var(--ghost-accent);
border: solid 2px var(--dark-accent);
border-radius: 0;
box-shadow: none;

}

#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points,
#page-content .rate-box-with-credit-button .page-rate-widget-box .rateup,
#page-content .rate-box-with-credit-button .page-rate-widget-box .ratedown,
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {

border: none;

}

[[/code]]

[[code type="css"]]

/* Logo Animation */

div#extra-div-1 {

animation: intro, spin cubic-bezier(1,1,1,1);
animation-duration: 1s, .5s;
animation-delay: 0s, 1s;

}

@keyframes intro {

from { scale: .1; }
to { scale: 1; }

}

@keyframes spin {

100% { transform: rotate(360deg); }

}

[[/code]]

[[/collapsible]]

@@@@
@@@@
@@@@
@@@@

[[/iftags]]

[[include :scp-wiki:component:toggle-sidebar]]

[[include :scp-wiki:component:customizable-acs
|accent-one= 25,25,112
|accent-two= 25,25,112
|class-number-color= 255, 255, 255
|inc-color-accent = --]]]

[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/1);
[[/module]]

[!-- {$dark}
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/2);
[[/module]]
[!-- --]

[!-- {$rate}
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/3);
[[/module]]
[!-- --]

[!-- {$anim}
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:frownstyle/code/4);
[[/module]]
[!-- --]

FROWNSTYLE

Module Styles

Inline Styles

Includes

CSS Classes

Page Source