Fish^12:umaTHEME

YEAR OF THE HORSE GIRL

This is the aesthetic theme for TBA.

This theme is a Sigma Plus theme and uses the Toggle Sidebar Component. Borrows a lot from the Uma Musume: Pretty Derby user interface and associated media.

To include this theme on your page, use the following code:

[[include :scp-wiki:theme:cute-derby]]

Theme Source

/*
    Cute Derby Theme
    [2026 Wikidot Theme]
    by Fish^12
*/
 
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
:root {
    --green: #79ca0b;
    --black: #333333;
    --brown: #7f3f0f;
    --pink: #ff3376;
    --white: #f5f8ff;
    --grey: #efecf7;
    --darkgrey: #635d7f;
    --trans: transparent;
 
    --oswa: "Oswald";
    --open: "Open Sans";
 
    --timer: 200ms;
 
    --header-title: "Horse Girls";
    --header-subtitle: "DARLING CUP";
    --sp_header-logo: none;
    --sp_header-logo-adaptive-size: 0;
    --sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 5.5rem);
    --sp_header-subtitle-size: clamp(1.3rem, 0.086rem + 3.238vw, 4rem);
 
    --sp_header-height: 20rem;
    --sp_top-bar-height: 2rem;
 
    --sp_top-bar-gradient-top-color: var(--trans);
    --sp_top-bar-gradient-bottom-color: var(--trans);
 
    --sp_top-bar-link-color: var(--white);
    --sp_top-bar-link-hover-color: var(--black);
    --sp_top-bar-link-hover-background: var(--trans);
 
    --sp_side-bar-width: 28rem;
 
    --sp_dropdown-link-color: var(--white);
    --sp_dropdown-link-hover-color: var(--black);
    --sp_dropdown-link-background: var(--green);
    --sp_dropdown-link-hover-background: var(--green);
    --sp_dropdown-link-border: none;
 
    --sp_rate-module-text-color: var(--white);
    --sp_rate-module-background: var(--green);
    --sp_rate-module-sub-color: var(--white);
    --sp_rate-module-active-color: var(--black);
    --sp_rate-module-button-color: var(--white);
    --sp_rate-module-button-background: var(--green);
    --sp_rate-module-button-hover-color: var(--black);
    --sp_rate-module-button-hover-background: var(--green);
 
    --sp_tab-text-color: var(--white);
    --sp_tab-background: var(--orange);
    --sp_tab-border-color: var(--red);
    --sp_tab-hover-text-color: var(--white);
    --sp_tab-hover-background: var(--red);
    --sp_tab-hover-border-color: var(--darkorange);
    --sp_tab-selected-text-color: var(--white);
    --sp_tab-selected-background: var(--lightorange);
    --sp_tab-selected-border-color: var(--red);
 
    --sp_tab-text-color: var(--brown);
    --sp_tab-background: var(--white);
    --sp_tab-border-color: var(--brown);
    --sp_tab-hover-text-color: var(--white);
    --sp_tab-hover-background: var(--brown);
    --sp_tab-hover-border-color: var(--brown);
    --sp_tab-selected-text-color: var(--white);
    --sp_tab-selected-background: var(--brown);
    --sp_tab-selected-border-color: var(--brown);
 
    --sp_hovertip-background: var(--grey);
    --sp_hovertip-border: var(--trans);
}
 
/* From the top! */
 
#container {
    overflow-x: hidden;
    background-image:
        url(http://smlt.wikidot.com/local--files/fish-12:umatheme/runner.png),
        linear-gradient(to bottom, var(--trans) 18rem, rgba(245, 248, 255, 1) 24rem 100%),
        url(http://smlt.wikidot.com/local--files/fish-12:umatheme/grass.png);
    background-repeat:
        no-repeat,
        repeat-x,
        repeat-x;
    background-size:
        150px 150px,
        auto 25rem,
        auto 25rem;
    background-position:
        75% 9rem,
        top,
        top;
}
#login-status {
    margin-right: 0.5em;
    margin-top: 0.5em;
    padding: 0;
    color: var(--white);
    font-weight: bold;
    min-width: fit-content;
    background-color: var(--green);
    white-space: nowrap;
    padding-left: 2rem;
    position: relative;
    border-radius: 0 3px 3px 0;
}
#login-status::before {
    content: "Trainer ";
}
#login-status::after {
    position: absolute;
    content: "";
    top: 0;
    right: 99%;
    height: 102%;
    width: 3rem;
    clip-path: polygon(0% 100%, 20% 0, 50% 0, 30% 100%, 100% 100%, 100% 0, 80% 0, 60% 100%);
    background-color: var(--green);
}
#login-status .printuser {
    display: inline-block;
    position: relative;
    transition: var(--timer);
}
#login-status .printuser a {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
#login-status .printuser:hover {
    color: var(--black);
}
#login-status .printuser a img {
    display: none;
}
#login-status a {
    color: var(--white);
    transition: var(--timer);
}
#login-status a:hover {
    color: var(--black);
    text-decoration: none;
}
#account-topbutton {
    font-size: 100%;
    padding: 0 5px 0 0;
    border-color: var(--trans);
}
 
/* Pop-up page. */
 
.owindow {
    background-color: var(--white);
    border: solid 2px var(--grey);
    border-radius: 10px 10px 0 0;
}
.owindow .title {
    cursor: auto;
    text-align: center;
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border-radius: 10px 10px 0 0;
}
div#owindow-1 .title.modal-header {
    text-align: center;
    cursor: auto;
    font-size: 0;
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border-radius: 10px 10px 0 0;
}
div#owindow-1 .title.modal-header::before {
    content: "Trainer Card";
    font-size: 1.5rem;
    color: var(--white);
}
.owindow img {
    background-color: var(--trans) !important;
}
.owindow table {
    border-spacing: 0;
    padding: 0;
    width: 100%;
}
.owindow td {
    text-align: right;
    border-bottom: 2px solid var(--green);
}
.owindow td.active.col-md-3.col-sm-3.col-xs-3.span3, .owindow td.active {
    text-align: left;
}
.owindow .button-bar {
    text-align: center;
    text-transform: capitalize;
}
.owindow .button-bar a {
    background-color: var(--green);
    color: var(--white);
    border-color: var(--trans);
    transition: var(--timer);
}
.owindow .button-bar a:hover {
    background-color: var(--green);
    color: var(--black);
}
.owindow.owait,
.owindow.osuccess {
    border-radius: 0;
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border: solid 2px var(--brown);
}
.owindow.owait .content {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/horse_running.gif");
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--trans);
}
.owindow.osuccess {
    color: var(--trans);
    background-color: var(--green) !important;
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/horse_running.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
 
/* Account and search buttons. */
 
#account-options {
    margin-top: 0.1rem;
    margin-right: -0.1rem;
    text-align: center;
    border: solid ;
    border-color: var(--trans);
    background-color: var(--trans);
}
#account-options li a {
    border: solid 1px var(--darkgrey);
    color: var(--brown);
    background-color: var(--white);
    text-transform: capitalize;
    margin: 6px 0;
    border-radius: 10px;
    padding: 0.4rem 0;
}
#account-options li {
    position: relative;
    transition: var(--timer);
}
#account-options li:nth-child(1)::before,
#account-options li:nth-child(2)::before,
#account-options li:nth-child(3)::before,
#account-options li:nth-child(4)::before,
#account-options li:nth-child(5)::before,
#account-options li:nth-child(6)::before {
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    left: 20%;
    top: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
#account-options li:nth-child(1)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/quill-ink.png");
}
#account-options li:nth-child(2)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/envelope.png");
}
#account-options li:nth-child(3)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/castle.png");
}
#account-options li:nth-child(4)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/cog.png");
}
#account-options li:nth-child(5)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/thrust.png");
}
#account-options li:nth-child(6)::before {
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/exit-door.png");
}
#account-options li:hover {
    transform: scale(1.05);
}
 
#search-top-box {
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding: 8px 12px 0 0;
}
#search-top-box-form input[type=submit] {
    background-color: var(--green);
    background-image: none;
    color: var(--white);
    border-color: var(--trans);
    box-shadow: none;
    border-radius: 0 3px 3px 0;
    transition: var(--timer);
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: var(--green);
    border-color: var(--trans);
    background-image: none;
    color: var(--black);
    box-shadow: none;
}
#search-top-box-form {
    position: relative;
}
#search-top-box-form::after {
    position: absolute;
    content: "";
    top: 0;
    right: 95%;
    height: 102%;
    width: 3rem;
    clip-path: polygon(100% 100%, 100% 0, 80% 0, 55% 100%, 0 100%, 25% 0, 55% 0, 30% 100%);
    background-color: var(--green);
}
 
/* Header. */
 
#header {
grid-template-areas:
    ". . . . login"
    ". . . . search"
    "h1 h1 h1 h1 h1"
    "h2 h2 h2 h2 h2"
    ". . . . ."
    "top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-image: none;
}
#header h1 a::before, #header h2 span::before {
    color: var(--brown);
}
#header h1 a, #header h2 span {
    text-shadow: none;
}
 
/* Top bar. */
 
#top-bar ul li a {
    transition: var(--timer);
    font-weight: bold;
}
#top-bar ul li ul {
    border-width: 0 0;
    box-shadow:
        5px 2px 5px -3px var(--grey),
        -5px 2px 5px -3px var(--grey);
    transition: var(--timer);
}
 
/* Side bar and side bar button. */
 
#top-bar .open-menu a {
    background-color: var(--pink);
    border: solid 2px var(--pink);
    color: var(--white);
    transition: var(--timer);
}
#top-bar .open-menu a:hover {
    background-color: var(--white);
    color: var(--pink);
}
#side-bar {
    background-color: var(--grey);
    overflow-x: auto;
    direction: rtl;
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:umatheme/sample.png");
    background-repeat: repeat-y;
    background-size: 16rem;
    background-position: top right;
}
#side-bar .side-block.media,
#side-bar .side-block.resources,
#side-bar .side-block,
#interwiki .side-block {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: none;
    border: solid 1px var(--darkgrey);
    color: var(--brown);
    width: 213.6px;
    margin-right: auto;
    padding: 0;
}
#side-bar .side-block.media a {
    padding: 0;
}
#side-bar .side-block.resources a,
#side-bar .side-block a,
#interwiki .side-block a {
    padding: 0 5px;
}
#interwiki .heading, #side-bar .heading {
    color: var(--white);
    border: none;
    font-weight: bold;
    padding: 2px 10px;
    background-color: var(--green);
    font-style: italic;
    font-size: 0.9em;
}
#side-bar .side-block.resources .heading {
    border-radius: 10px 10px 0 0;
}
#interwiki .menu-item, #side-bar .menu-item {
    text-align: center;
}
#side-bar .side-block.media a:hover {
    background-color: var(--trans);
    filter: invert(1);
}
 
/* Body content. */
 
body, html {
    color: var(--black);
    background-color: var(--white);
    font-family: var(--open);
    scrollbar-width: thin;
}
h1, h2, h3, h4, h5 {
    color: var(--black);
}
a, a.newpage, a:visited, #interwiki a, #side-bar a, a.action-area-close {
    color: var(--pink);
    font-weight: bold;
    transition: var(--timer);
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover, a.action-area-close:hover {
    color: var(--white);
    background-color: var(--pink);
    text-decoration: none;
}
.licensebox a.collapsible-block-link:hover {
    background-color: var(--trans);
}
#page-title, .meta-title {
    font-weight: bold;
    color: var(--brown);
    font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
    margin-bottom: 2rem;
    border-color: var(--brown);
    border-width: 5px;
    text-align: right;
    position: relative;
}
#page-title::before, .meta-title::before {
    position: absolute;
    content: "";
    background-color: var(--brown);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    height:3rem;
    width: 3rem;
    top: calc(100% + 2.5px);
    left: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}
div.page-rate-widget-box,
.page-rate-widget-box {
    box-shadow: none;
    border-radius: 0 3px 3px 0;
    text-transform: capitalize;
    padding-left: 2rem;
    position: relative;
}
div.page-rate-widget-box::after,
.page-rate-widget-box::after {
    position: absolute;
    content: "";
    top: 0;
    right: 95%;
    height: 100%;
    width: 3rem;
    clip-path: polygon(100% 100%, 100% 0, 80% 0, 55% 100%, 0 100%, 25% 0, 55% 0, 30% 100%);
    background-color: var(--green);
}
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown,
div.page-rate-widget-box .rateup {
    font-family: "Inter";
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: var(--brown);
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border: solid 2px var(--brown);
    border-top-color: var(--brown);
}
.yui-navset .yui-content {
    background-color: var(--grey);
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
    flex: 50%;
}
.hovertip {
    width: fit-content;
    height: fit-content;
    color: var(--brown);
    box-shadow: 0 0.2em var(--brown);
}
 
/* Bottom of page and editor. */
 
.page-tags span {
    border-top: 0;
}
#main-content .page-tags {
    margin: 5em 0 0;
}
#main-content .page-tags a {
    background-color: var(--pink);
    border: solid 2px var(--pink);
    color: var(--white);
    padding: 2px 10px 2px 4px;
    border-radius: 0 100px 100px 0;
}
#main-content .page-tags a::after {
    content:"•";
    padding-left: 5px;
}
#main-content .page-tags a:hover {
    background-color: var(--white);
    color: var(--pink);
}
#page-info {
    font-size: 80%;
    margin-top: 1.5rem;
}
.page-watch-options {
    font-size: 85%;
    margin-bottom: 1rem;
}
.page-options-bottom {
    margin: 0;
}
#page-info, .page-watch-options, .page-options-bottom {
    text-align: center;
}
.page-watch-options a:hover {
    text-decoration: none;
}
#footer {
    background-color: var(--green);
    justify-content: right;
    color: var(--black);
    background-image: linear-gradient(120deg, var(--white) 5rem, var(--trans) 5rem 6rem, var(--white) 6rem 7rem, var(--trans) 7rem);
}
#footer a:hover {
    color: var(--black);
}
#license-area {
    background-color: var(--brown);
    color: var(--white);
}
#license-area a {
    color: var(--white);
    padding: 0 5px;
}
#license-area a:hover {
    background-color: var(--black);
}
.pager .current {
    background-color: var(--pink);
    border: solid 1px var(--grey);
    padding: 0 12px;
}
.page-history {
    border-spacing: 0;
}
.page-history td {
    padding: 2px;
}
.page-history tr:nth-child(1) {
    font-weight: bold;
    text-transform: capitalize;
    background-color: var(--grey);
}
.page-history td:nth-child(1) {
    text-align: right;
}
.page-history td:nth-child(3),
.page-history td:nth-child(6) {
    text-align: center;
}
div.buttons input, input.button, button, file, a.button {
    background-color: var(--green);
    border: none;
    color: var(--white);
    font-weight: bold;
    padding: 0.1em 1em;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: var(--timer);
}
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover {
    background-color: var(--green);
    border: none;
    color: var(--black);
}
.preview-message {
    border: solid 3px var(--white);
    outline: solid 2px var(--grey);
    background-image: linear-gradient(to right, #ddffd5, #d2eee4, #bfe3f2, #b1d6fc, #d3c9fb, #eeb9f2);
    background-color: var(--trans);
    opacity: 0.95;
}
.preview-message a {
    padding: 0 5px;
}
 
/* Resizing to make stuff work on mobile. */
 
@media only screen and (min-width: 767px) {
#top-bar .top-bar {
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border-radius: 100px;
    box-shadow: 0 -2px #b1f025;
    }
#top-bar .mobile-top-bar {
    background-image: none;
    border-radius: 100px;
    box-shadow: none;
    }
}
@media only screen and (max-width: 767px) {
#top-bar .top-bar {
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border-radius: 100px;
    box-shadow: 0 -2px #b1f025;
    }
#top-bar .mobile-top-bar {
    background-image: linear-gradient(to bottom, #99da0a, var(--green));
    border-radius: 100px;
    box-shadow: 0 -2px #b1f025;
    }
#top-bar > div[class*="top-bar"] {
    margin: 0 1rem;
    }
#top-bar div[class*="top-bar"] > ul {
    justify-content: end;
    }
#top-bar div[class*="top-bar"] > ul > li {
    flex-grow: 0;
    }
#top-bar .open-menu a:hover {
    box-shadow: none;
    }
#side-bar {
    left: -30rem;
    }
#footer {
    background-image: none;
    }
}
@media not all and (max-width: 767px) {
#side-bar {
    left: -30rem;
    }
}