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]]
/* 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; } }
page revision: 441, last edited: 12 Jan 2026 15:36






