Link to article: OpusConfidant CSS.
:root {
--basalt-undertone: 242,126,31;
--basalt-overtone: 62,62,96;
--basalt-light-text-color: 236,236,248;
--basalt-sub-text-color: 216,216,227;
--header-logo: url("https://scp-wiki.wdfiles.com/local--files/opusconfidant/opconf.png");
--header-title: "OpusConfidant";
--header-title-color: var(--basalt-light-text-color);
--header-subtitle: "Sampling Competitive Plays";
--header-subtitle-color: var(--basalt-light-text-color);
--subtitle-size: 0.875rem;
--top-bar-link-color: var(--basalt-light-text-color);
--top-bar-dropdown-link-color: var(--basalt-main-text-color);
--header-background-color: 99,99,176;
--header-border-width: 0rem;
--search-icon-color: var(--basalt-light-text-color);
--top-bar-dropdown-background-hover: var(--basalt-undertone);
--side-bar-background-color: 38,40,45;
--side-bar-link-color: var(--basalt-light-text-color);
--side-bar-link-background-hover: var(--basalt-undertone);
--main-content-top-margin: 1.75rem;
--main-content-side-margin: 1.325rem;
--bottom-area-text-color: var(--basalt-light-text-color);
--bottom-area-background-color: var(--header-background-color);
}
#license-area {
--link-color: var(--basalt-undertone);
}
#page-content h1 {
border-bottom: solid 0.08rem rgb(var(--basalt-overtone));
margin-top: 1.25em;
}
/*------------------------------------*/
#page-title { display: none; }
.card-holder {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr) 16.75rem);
grid-gap: 1.5rem 1rem;
align-items: center;
}
.card-holder > .mon-card { display: contents; }
.card-holder > .mon-card > br { display: none; }
.mon-card {
display: flex;
justify-content: center;
align-items: center;
grid-gap: 0.75rem;
flex-wrap: wrap;
}
#page-content .mon-card .sprite {
width: 10rem;
padding: 0.75rem;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-self: center;
box-sizing: border-box;
border: solid 0.1rem rgb(var(--general-border-color));
border-radius: 0.75rem;
max-width: 100%;
image-rendering: pixelated;
}
.mon-card .sprite img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.325rem;
}
#page-content .mon-card table {
margin: unset;
}
#page-content .mon-card table td { border: none; padding: 0.25em 0.5em;}
#page-content .mon-card table td:first-child { text-align: right; font-size: 0.8em; }
#page-content .mon-card table td:nth-child(2) { font-size: 1.05em; }
.mon-card table td span {
--num: 1;
--num-clamp: max(0, min(var(--num), 255));
position: relative;
display: inline-block;
padding: 0.325em 0.675em;
isolation: isolate;
color: white;
}
.mon-card table td span::before {
content: "";
display: block;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
background-color: black;
z-index: -1;
transform: skew(-20deg);
}
.mon-card table td span.dread::before { background: #3e6163; }
.mon-card table td span.divine::before { background: #e0a000; }
.mon-card table td span.mortal::before { background: #d6c4a1; }
.mon-card table td span.auto::before { background: #9ca2b1; }
.mon-card table td span.humor::before { background: #f16565; }
.mon-card table td span.mineral::before { background: #8f623c; }
.mon-card table td span.cosmos::before { background: #3c4476; }
.mon-card table td span.nature::before { background: #268c12; }
.mon-card table td span.meta::before { background: #6363b0; }
.mon-card .stat { flex-grow: 1; flex-basis: 25rem; }
#page-content .mon-card .stat table { display: block; width: 100%; }
#page-content .mon-card .stat table tbody { display: contents; }
.mon-card .stat table tr { display: flex; align-items: center; }
#page-content .mon-card .stat table tr td:nth-child(1) {
width: 6.25em;
text-align: left;
}
.mon-card .stat table tr td:nth-child(2) {
flex-grow: 1;
}
.mon-card .stat table td span {
display: block;
color: black;
font-family: var(--mono-font);
font-weight: bold;
padding: 0.125em;
font-size: 0.925em;
width: 100%;
max-width: calc(100% * var(--num-clamp)/255);
word-break: keep-all;
overflow-wrap: normal;
}
.mon-card .stat table td span::before {
background: linear-gradient(to right, red, red, #f54d18, #ffe400, #91f300, #00ff6b, #02ffd3, cyan, cyan);
background-size: 1000rem;
left: -0.275em;
top: -0.05em;
background-position-x: calc(100% * var(--num-clamp)/255);
filter: brightness(0.975) saturate(1.65);
}
#page-content div.blockquote.large {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
max-width: 100%;
margin: 0.5rem 0;
padding: 1rem;
}
#page-content div.blockquote.large table {
display: block;
margin: 0;
}
#page-content div.blockquote.large table:first-child {
display: grid;
grid-template-columns: repeat(auto-fill, 13.25em);
max-width: 28em;
}
#page-content div.blockquote.large table:first-child tbody { display: contents; }
#page-content div.blockquote.large table td { border: none; padding: 0.15em 0.675em; }
#page-content div.blockquote.large table td:first-child { font-size: 0.875em; font-family: var(--mono-font); }
.comment {
position: relative;
display: grid;
grid-template-areas:
"pfp name"
"pfp content";
grid-template-columns: min(4.75rem, calc(2.25rem + 2.5vw)) minmax(0,1fr);
grid-template-rows: auto 1fr;
margin: 0.5rem 0;
}
.comment:not([class*="reply"]) {
margin-top: 1.5rem;
}
.comment.reply1 { margin-left: 7.5%; }
.comment.reply2 { margin-left: 15%; }
.comment.reply3 { margin-left: 22.5%; }
.comment > .printuser { display: contents; }
.comment > .printuser a:nth-child(1) {
grid-area: pfp;
justify-content: center;
display: block;
z-index: 1;
align-self: flex-start;
width: 100%;
min-width: unset;
box-sizing: border-box;
pointer-events: none;
}
.comment > .printuser a:nth-child(1) img {
background-image: none!important;
padding: 0;
height: 100%;
width: 100%;
}
.comment > .printuser a:nth-child(2) {
grid-area: name;
padding: 0.125em; padding-left: 0.5rem;
background-color: rgb(var(--basalt-UI-dark-palette));
color: rgb(var(--basalt-light-text-color));
font-family: var(--header-font);
font-size: 1.05em;
}
.comment > div {
padding: 0 0.5rem;
}
.comment > div hr {
margin: 0.25rem 0;
}