>>60664>>60662* {
font-family: "Futura", "Trebuchet MS", "Arial", "Helvetica", sans-serif;
color: #3A8F9E; /* Default cool blue color for text */
}
label:not(:has(span.capcode)) span.name {
color: #4F7E96 !important; /* Muted blue for green text */
}
form table tr th {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
color: #3A8F9E; /* Cool blue color for table headings */
}
div.post, div.post.reply {
color: #3A8F9E; /* Cool blue for text */
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
border: 2px solid white; /* White border */
padding: 20px;
}
div.post.reply.highlighted {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
}
.boardlist {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
border: 2px solid white; /* White border */
color: #3A8F9E; /* Cool blue for text */
}
div.pages.top, div.pages {
background: #83BDD5;
border-radius: 4px; /* Small edge curve */
color: #3A8F9E; /* Cool blue for text */
}
div.banner {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
border: 2px solid white; /* White border */
color: #3A8F9E; /* Cool blue for text */
font-weight: normal;
}
h1 {
color: #1A6D7A; /* A deeper cool blue with a hint of green */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
div.dropzone-wrap,
div#news,
td#upload_selection,
div#post-moderation-fields {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
border: 2px solid white; /* White border */
color: #3A8F9E; /* Cool blue for text */
}
div.mix {
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
color: #3A8F9E; /* Cool blue for text */
}
span#thread-links, span#updater {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
border-radius: 4px; /* Small edge curve */
border: 2px solid white; /* White border */
color: #3A8F9E; /* Cool blue for text */
}
/* Animated scrolling foreground (low opacity overlay) */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-image: url('
https://files.catbox.moe/3qojx5.png');
background-repeat: repeat-x;
background-size: contain;
z-index: -2;
animation: scroll-bg 30s linear infinite;
opacity: 0.2;
}
@keyframes scroll-bg {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Overlay image above the scrolling image */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('
https://files.catbox.moe/vjb2cd.png'); /* Replace with your overlay image URL */
background-repeat: no-repeat;
background-size: cover;
z-index: -3; /* Place this above the scrolling image */
opacity: 0.8; /* Adjust opacity for overlay */
}
/* Stretch the gradient-image background from top to bottom and show top of image at top of page */
html {
min-height: 100%;
background-image: url('
https://files.catbox.moe/uhe0ud.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: scroll;
background-position: top center;
background-color: #52F2E2; /* Added background color */
}
body {
background: transparent;
}
/* Responsive fix for mobile */
@media only screen and (max-width: 767px) {
html {
background-image: url('
https://files.catbox.moe/c2pi5v.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: scroll;
background-position: top center;
background-color: #52F2E2; /* Added background color */
}
body {
background: transparent;
}
}
I made this CSS and they are going to add this to the site soon (And be the default for our board)