While you're at it try this one on for size too.
It's not finished at all but I think I like where it's headed. I plan to make the font thicker and bit more 80's computer too so bear that in mind when deciding if the white font is visible enough.
@import "./syntax/srcery.css";
:root {
--background-color: #242F15;
--background-gradient: #30401B;
--text-color: white;
--contrast-color: rgba(105, 205, 207, 1);
--menu-color: #333333;
--background-highlight-color: green;
--horizon-sep-color: none;
--border-color: #7F5613;
--marked-color: #906719;
--marked-border-color: silver;
--horizon-sep-color: var(--border-color);
--board-title-color: gold;
--index-text-color: var(--text-color);
--link-color: Ivory;
--link-hover-color: Ivory;
--navbar-text-color: var(--horizon-sep-color);
--table-every-other-color: var(--contrast-color);
--sfw-indicator-color: navy;
--subject-color: white;
--thread-navbar-background: var(--background-color);
--thread-navbar-color: var(--border-color);
scrollbar-color: #69CDCF #9FECED;
--logo-image: url("/.static/logo/logo_blue_light.png");
}
.quoteLink {
color: var(--link-color);
}
[Expand Post]
.quoteLink:hover {
color: var(--link-hover-color);
}
code {
background-color: rgba(0,0,0,0.15);
}
.modalTableBody input[type="text"], .modalTableBody select,
#themeSelector,
#modalAnswer,
#cssInput, #jsInput,
#postingForm input[type="text"], #postingForm textarea,
#quick-reply input[type="text"], #quick-reply textarea {
color: var(--text-color);
background-color: var(--background-color);
}
.innerPost {
border-radius: 16px;
background-image: url(/.media/5e195fd9186e7f8204542fcf28f1715d25ec7f9bce52dbf4c104a8ec58fa04ff.gif),
url(/.media/157308ec88639e5c219d367af36d0f10892caad509555614ee798f35abd4422e.png),
linear-gradient(rgba(0,94,215), rgba(0,165,149));
background-repeat: no-repeat, repeat, no-repeat;
background-position: right bottom, left top, right bottom;
background-size: 8vmin, auto, contain;
}
.postInfo {
padding-top: 0.25em;
padding-left: 1em;
}
:root {
--index-text-color: var(--text-color);
--navbar-text-color: var(--text-color);
--table-every-other-color: var(--contrast-color);
}
div.innerOP {
position: relative;
border: 3px dotted #7F5613;
border-radius: 6px;
}
div.innerOP::after {
content: "";
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
background : linear-gradient(rgba(0,94,215), rgba(0,165,149));;
border-radius: 6px;
opacity: 0.9;
z-index: -1;
}
#dynamicAnnouncement table {
visibility:hidden
}
header {
margin: 1em 0px 1em 0px;
text-align: center;
margin-top: 36px;
text-shadow: 1px 1px #323F0B, 0 0 5px gold, 0 0 5px darkgreen;
}
body {
text-shadow: none;
}
.floatingMenu {
background-color: #69CDCF;
}
.noEmailName, .noEmailName:hover {
color: #DDD1AE;
}
.greenText {
color: gold;
}
.pinkText {
color: plum;
}
.redText {
color: darkred;
text-shadow: 0 0 5px white;
font-size: 200%;
}
.echoText {
background: green;
color: rebeccapurple;
}
.doomText {
color: orange;
font-size: 150%;
}
.boardHeader p, #overboardId {
font-family: CHAOS;
font-size: 300%;
}
#newPostFieldset {
display: inline-block;
min-width: 27.5em;
color: #919191;
border: none;
background: #69CDCF;
border-radius: 6px;
}
#newPostFieldset table {
width: 100%;
}
#newPostFieldset legend label {
width: 100%;
display: inline-block;
margin: 0;
cursor: pointer;
}
#newPostFieldset #newPostFieldHide:checked + form {
display: none;
}
fieldset legend {
font-weight: bold;
font-size: 200%;
background : linear-gradient(rgba(0,94,215), rgba(0,165,149));
padding: 4px;
width: 100%;
}
#quick-reply th,
#newPostFieldset legend,
#postingForm th, .modalTableBody th {
font-family: CHAOS;
color: white;
background: #242F15;
}
.boardHeader p#labelDescription:before{
display: inline-block;
width: 100px;
height: 160px;
margin-right: 5px;
content: "";
background: url("/.media/7693a82ff4a87848b8806c0d623a943b5711fbc3248b167e4f9015d844470094.png") no-repeat 0 0;
background-size: 100%;
font-size: 16px;
font-weight: bold;
}
.boardHeader p#labelDescription{
letter-spacing: 0.3px;
font-size: 0pt;
}
@font-face {
font-family: CHAOS;
src: url(/.media/093929e8ddbb805f0580ffaa2112cb2aabb5e4a59f082f0348ff6b9f091fbf77);
}
form.modalForm{
background-image: url(/.media/109b2667503eb80ac635b65da6aef0b2c0ac5f11ce3b391630fe48a24331af03.jpg) ;
float right;
bottom: 0;
height: 300px;
width: 300px;
}
body {
background-image:url(/.media/be632e8b43ea354daf47ca7e43addcf92525e64f31bdb3c076f44c416c2153e2.png),
url(/.media/2df3444feded114f7b25071cfc7de2d213c3c919ba188b8f84c572cbebf83656.gif),
url(/.media/78bc7063b51a366c5165a4f6246e6ace2df605d5254c1d97b0c06b384e018812.png),
linear-gradient(rgba(82,148,203), rgba(82,148,203), rgba(222,219,188), rgba(222,219,188));
background-repeat: no-repeat, repeat-x, repeat-x, no repeat;
background-attachment: fixed, fixed, fixed, fixed;
background-position: right bottom, left, left, left;
background-blend-mode: normal, normal, normal, normal;
background-size: 31.5vmin, contain, contain, auto;
}
html, *, hover, #postingForm th {
cursor: url(/.media/683f39aa552750a5e37d1701ad288b783b7f3754b77c1c29a296e3a61af65ead.png), default;
}
a, .embedButton, select, .divRefresh input, #postingForm button, #qrbutton {
cursor: url(/.media/2299bc3f75099354cd664deb58c4f33585b28733094d79d65934658fea26c502.png), progress !important;
}
label, img, .hideFileButton {
cursor: url(/.media/273b5f23bf010214b2a3329d072900f24969e1bb86ec8b614d9a3c88d96ba9c8.png), progress !important;
}
#dropzone, #dropzoneQr {
cursor: url(/.media/2ca1f9aa24357f67569e4b61ae2a05510d7ac8ff2d3e528799c5b081cf7deecb.png), progress !important;
font-size: 14px;
}
.imgFlag {
max-width: 100px;
max-height: 100px;
margin-top: -2.2em;
transform: translateY(0.4em);
}
.flagPreview {
float: right;
# max-width: 100%;
height:auto !important;
}
#flagPreview {
float: right;
# max-width: 100%;
height:auto !important;
}
Edited last time by MisterE on 07/15/2025 (Tue) 19:34:45.