Link to article: Draft Swap 2025!.
/*
Green Theme
[2025 Wikidot Theme]
by Fish^12 & Queerious
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Wallpoet&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
:root {
--leaf: #9bbf60;
--leafshade: #94bb55;
--leaftrans: rgba(155, 191, 96, 0.9);
--leafshadetrans: rgba(148, 187, 85, 0.9);
--cream: #FCFBF4;
--carbon: #333333;
--woody: "Wallpoet";
--standardfont: "Roboto Condensed";
--title: "Black Ops One";
--subtitle: "Quicksand";
--header-title: "DRAFT SWAP 2025";
--header-subtitle: "What will you get?";
--sp_header-logo: none;
--sp_header-height: 20rem;
--sp_top-bar-height: 2rem;
--sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 4.5rem);
--sp_header-subtitle-size: 1.3rem;
--sp_top-bar-link-hover-background: var(--carbon);
--sp_top-bar-link-hover-color: var(--leafshade);
--sp_dropdown-link-color: var(--carbon);
--sp_rate-module-background: var(--carbon);
--sp_rate-module-text-color: var(--leaf);
--sp_rate-module-button-color: var(--cream);
--sp_rate-module-button-background: var(--carbon);
--sp_rate-module-sub-color: var(--leaf);
}
.printuser {
color: var(--carbon);
}
#login-status {
padding-right: 12px;
}
#login-status a, #login-status ul a {
color: var(--carbon);
}
#account-options {
margin-right: 12px;
text-align: center;
border: none;
}
#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(--carbon);
background-image: none;
color: var(--cream);
box-shadow: none;
border-color: var(--carbon);
border-radius: 0;
transition: 200ms;
clip-path: polygon(8% 0, 92% 0, 100% 20%, 100% 80%, 92% 100%, 8% 100%, 0% 80%, 0% 20%);
}
#search-top-box-form input[type=submit]:hover {
background-color: var(--carbon);
background-image: none;
color: var(--leaf);
box-shadow: none;
border-color: var(--carbon);
}
#header {
grid-template-areas:
". . login login 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: repeating-conic-gradient(at 45% 100%, var(--leafshadetrans) 18deg, var(--leaftrans) 18deg 340deg, var(--leafshadetrans) 340deg 360deg), url(https://scp-wiki.wdfiles.com/local--files/uncle-nicolini-author-page/recycle.png);
background-size: 100% 100%, 300px 300px;
background-repeat: no-repeat;
background-position: 50% 19%;
}
#header h1, #header h2 {
text-align: center;
padding-inline-start: 0;
}
#header h1 a, #header h2 span {
font-family: var(--title);
color: var(--carbon);
text-shadow: none;
font-weight: 100;
}
#top-bar {
width: 100%;
background-image: none;
background-color: var(--carbon);
position: relative;
}
#top-bar:before {
position: absolute;
content: "";
bottom: 100%;
right: 0;
border-color: transparent transparent var(--carbon) transparent;
border-width: 0 0 2em 98vw;
border-style: solid;
}
#top-bar:after {
position: absolute;
content: "";
top: 100%;
left: 0;
border-color: var(--carbon) transparent transparent transparent;
border-width: 2em 98vw 0 0;
border-style: solid;
}
#top-bar .open-menu a {
border-color: var(--carbon);
color: var(--carbon);
background-color: var(--cream);
}
#top-bar ul li {
flex-grow: 1;
}
#top-bar ul li a {
transition: 200ms;
}
#top-bar div[class*="top-bar"] > ul {
justify-content: center;
}
#side-bar .heading {
color: #78c17a;
border-color: #78c17a;
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block {
background: var(--carbon);
border: none;
border-radius: 0;
box-shadow: none;
}
#side-bar .side-block.media a, #side-bar .side-block.resources a, #side-bar .side-block a {
color: var(--cream);
transition: 200ms;
}
#side-bar .side-block.media a:hover, #side-bar .side-block.resources a:hover, #side-bar .side-block a:hover {
color: var(--leaf);
text-decoration: none;
}
#side-bar .side-block.media {
clip-path: polygon(5% 0, 95% 0, 100% 20%, 100% 80%, 95% 100%, 5% 100%, 0% 80%, 0% 20%);
}
#side-bar .side-block.resources {
clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80%, 0% 20%);
}
#side-bar .side-block {
clip-path: polygon(12% 0, 88% 0, 100% 5%, 100% 95%, 88% 100%, 12% 100%, 0 95%, 0 5%);
}
#container {
background-color: var(--cream);
}
#content-wrap {
margin: 0;
max-width: 100%;
width: 100%;
}
#main-content {
max-width:100%;
width:100%;
}
#page-title {
display: none;
}
.banner {
background: var(--carbon);
font-weight: bold;
font-size: clamp(2.5rem, 1.974rem + 2.807vw, 4.5rem);
text-align: center;
color: var(--cream);
font-family: var(--woody);
position: relative;
margin: 2em 0;
}
.banner:before {
content: "";
position: absolute;
left: 50%;
top: -99%;
transform: translate(-50%, 50%);
border-left: solid 3em transparent;
border-right: solid 5em transparent;
border-bottom: solid 1em var(--carbon);
}
.banner:after {
content: "";
position: absolute;
left: 50%;
top: 99%;
transform: translate(-50%, 0%);
border-left: solid 5em transparent;
border-right: solid 3em transparent;
border-top: solid 1em var(--carbon);
}
.greent {
color: var(--leafshade);
}
.pseudomain{
max-width: 800px;
margin: auto;
padding: 10px;
}
.calendar {
display: grid;
max-width: 280px;
margin: auto;
grid-template-columns: repeat(7, 1fr);
position: relative;
}
.calendar:before {
content: "MARCH";
position: absolute;
right: 100%;
top: 1.6rem;
height: 10rem;
border-right: solid 10px rgba(0, 0, 255, 0.4);
line-height: 10rem;
padding-right: 5px;
}
.calendar:after{
content: "APRIL";
position: absolute;
right: 100%;
top: 10rem;
height: 8.5rem;
border-right: solid 10px rgba(255, 0, 0, 0.4);
line-height: 8.5rem;
padding-right: 5px;
}
.date {
text-align: center;
}
.date p {
margin-block-start: 2px;
margin-block-end: 2px;
}
.days {
background: #eee;
}
.prev {
color: #bebebe;
}
.subperiod {
background: lightgreen;
}
.writeperiod {
background: #FFC18A;
}
#page-options-container {
padding: 2em;
}
.page-watch-options a, .printuser a {
color: #4a6741;
}
.btn {
background: var(--carbon);
color: var(--cream);
transition: 200ms;
clip-path: polygon(8% 0, 92% 0, 100% 20%, 100% 80%, 92% 100%, 8% 100%, 0% 80%, 0% 20%);
}
.btn:hover {
background: var(--carbon);
color: var(--leaf);
text-decoration: none;
}
#page-info {
margin-top: 200px;
}
#page-info, .page-watch-options, .page-options-bottom {
text-align: center;
}
#footer {
background: var(--carbon);
}
#footer a:hover {
color: var(--leaf);
}
background:lightgreen;border:solid 1px black;padding:0 6px;
background:#FFC18A;border:solid 1px black;padding:0 6px;
:scp-wiki:component:sigma-plus
[info]
:scp-wiki:component:toggle-sidebar
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
pseudomain
banner
greent
pseudomain
banner
greent
calendar
date
days
date
days
date
days
date
days
date
days
date
days
date
days
date
prev
date
prev
date
prev
date
prev
date
prev
date
prev
date
date
date
date
date
date
date
date
date
date
subperiod
date
subperiod
date
subperiod
date
subperiod
date
subperiod
date
subperiod
date
subperiod
date
subperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
writeperiod
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
date
prev
date
prev
date
prev
pseudomain
banner
greent
pseudomain
banner
greent