805 lines
15 KiB
CSS
805 lines
15 KiB
CSS
body {
|
|
font-family: monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #fef6e4; /* beige */
|
|
color: #001858; /* blue */
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 25px;
|
|
}
|
|
|
|
main > header {
|
|
text-align: center;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
main > section {
|
|
margin: 1em;
|
|
padding: 14px 20px;
|
|
border: 1px solid #001858;
|
|
border-radius: 5px;
|
|
background-color: #f3d2c1; /* orange */
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
width: 80%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
main > div {
|
|
width: 80%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
main > div > article {
|
|
border: 1px solid #001858;
|
|
padding: 14px 20px;
|
|
margin-bottom: 1em;
|
|
background-color: #fef6e4;
|
|
border-radius: 5px;
|
|
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
main > div > article:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
article > header {
|
|
border-bottom: 1px solid #001858;
|
|
background-color: #001858;
|
|
color: #fef6e4;
|
|
padding: 0.5em;
|
|
margin: -14px -20px 1em -20px;
|
|
border-radius: 5px 5px 0 0;
|
|
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
ul.topnav {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: #001858;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-shadow: 0 0.7em 1.2em 0 rgba(0,0,0,0.2);
|
|
}
|
|
|
|
ul.topnav li {
|
|
float: left;
|
|
}
|
|
|
|
ul.topnav li a {
|
|
display: block;
|
|
color: #fef6e4;
|
|
text-align: center;
|
|
padding: 1.2em 1.3em;
|
|
text-decoration: none;
|
|
font-family: monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
ul.topnav li a:hover:not(.active) {
|
|
background-color: #8bd3dd; /* cyan */
|
|
}
|
|
|
|
ul.topnav li a.active {
|
|
background-color: #f582ae; /* pink */
|
|
}
|
|
|
|
div.topnav {
|
|
height: 3em;
|
|
}
|
|
|
|
div.banner {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #001858;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
div.banner p {
|
|
color: #fef6e4;
|
|
margin: 0;
|
|
}
|
|
|
|
div.banner a {
|
|
color: #8bd3dd;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
input, textarea, select {
|
|
margin: 8px 0;
|
|
padding: 14px 20px;
|
|
border: 1px solid #001858;
|
|
border-radius: 4px;
|
|
background-color: #fef6e4;
|
|
color: #001858;
|
|
font-family: monospace;
|
|
box-sizing: border-box;
|
|
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
input[type="submit"] {
|
|
background-color: #001858;
|
|
color: #fef6e4;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="submit"]:hover {
|
|
background-color: #8bd3dd;
|
|
}
|
|
|
|
button {
|
|
margin: 8px 0;
|
|
padding: 14px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: #001858;
|
|
color: #fef6e4;
|
|
cursor: pointer;
|
|
font-family: monospace;
|
|
width: 100%;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #8bd3dd;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: monospace;
|
|
color: #001858;
|
|
}
|
|
|
|
p, a, li {
|
|
font-family: monospace;
|
|
color: #001858;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Styles for board lists */
|
|
ul.board-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li.board-item {
|
|
margin-bottom: 1em;
|
|
padding: 1.2em 1.5em;
|
|
background-color: #fef6e4;
|
|
border: 1px solid #001858;
|
|
border-radius: 8px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
li.board-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
li.board-item a {
|
|
color: #001858;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
li.board-item a:hover {
|
|
color: #f582ae;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p.board-desc {
|
|
margin: 0.5em 0 0 0;
|
|
color: #001858;
|
|
font-size: 1em;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Styles for thread lists */
|
|
ul.thread-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li.thread-item {
|
|
margin-bottom: 1em;
|
|
padding: 1.2em 1.5em;
|
|
background-color: #fef6e4;
|
|
border: 1px solid #001858;
|
|
border-radius: 8px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
li.thread-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
li.thread-item a {
|
|
color: #001858;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
li.thread-item a:hover {
|
|
color: #f582ae;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p.thread-info {
|
|
margin: 0.5em 0 0 0;
|
|
color: #001858;
|
|
font-size: 1em;
|
|
}
|
|
|
|
|
|
/* Specific styles for individual thread posts */
|
|
.thread-posts {
|
|
width: 80%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.post-item {
|
|
background-color: #fef6e4;
|
|
border: 1px solid #001858;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5em;
|
|
padding: 1.2em 1.5em;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.post-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.post-item header {
|
|
background-color: #001858;
|
|
color: #fef6e4;
|
|
padding: 0.5em;
|
|
margin: -1.2em -1.5em 1em -1.5em;
|
|
border-radius: 6px 6px 0 0;
|
|
border-bottom: 1px solid #001858;
|
|
}
|
|
|
|
.post-item header h3 {
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.post-item header p {
|
|
margin: 0.3em 0 0 0;
|
|
font-size: 0.95em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.post-content {
|
|
margin: 0;
|
|
padding: 0.8em;
|
|
line-height: 1.5;
|
|
font-size: 1em;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.post-actions {
|
|
margin-top: 0.8em;
|
|
display: flex;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
}
|
|
|
|
.post-actions a {
|
|
color: #001858;
|
|
text-decoration: none;
|
|
font-size: 1em;
|
|
padding: 0.4em 0.8em;
|
|
border: 1px solid #001858;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.post-actions a:hover {
|
|
background-color: #8bd3dd;
|
|
color: #fef6e4;
|
|
}
|
|
|
|
/* New style for highlighted chat messages */
|
|
.chat-message-highlighted {
|
|
border: 2px solid #f582ae; /* Pink border */
|
|
background-color: #ffe0f0; /* Light pink background */
|
|
animation: highlight-fade 2s ease-out;
|
|
}
|
|
@keyframes highlight-fade {
|
|
from {
|
|
background-color: #f582ae;
|
|
border-color: #f582ae;
|
|
}
|
|
to {
|
|
background-color: #ffe0f0;
|
|
border-color: #f582ae;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #333;
|
|
color: #fef6e4;
|
|
}
|
|
main > section {
|
|
background-color: #555;
|
|
border-color: #fef6e4;
|
|
}
|
|
main > div > article {
|
|
background-color: #444;
|
|
border-color: #fef6e4;
|
|
}
|
|
article > header {
|
|
background-color: #222;
|
|
border-color: #fef6e4;
|
|
}
|
|
input, textarea, select {
|
|
background-color: #444;
|
|
color: #fef6e4;
|
|
border-color: #fef6e4;
|
|
}
|
|
input[type="submit"], button {
|
|
background-color: #fef6e4;
|
|
color: #001858;
|
|
}
|
|
input[type="submit"]:hover, button:hover {
|
|
background-color: #8bd3dd;
|
|
}
|
|
li.board-item, li.thread-item {
|
|
background-color: #444;
|
|
border-color: #fef6e4;
|
|
}
|
|
li.board-item a, li.thread-item a {
|
|
color: #fef6e4;
|
|
}
|
|
li.board-item a:hover, li.thread-item a:hover {
|
|
color: #f582ae;
|
|
}
|
|
p.board-desc, p.thread-info {
|
|
color: #fef6e4;
|
|
}
|
|
.post-item {
|
|
background-color: #444;
|
|
border-color: #fef6e4;
|
|
}
|
|
.post-content {
|
|
color: #fef6e4;
|
|
}
|
|
.post-actions a {
|
|
color: #fef6e4;
|
|
border-color: #fef6e4;
|
|
}
|
|
.post-actions a:hover {
|
|
background-color: #8bd3dd;
|
|
color: #001858;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #fef6e4;
|
|
}
|
|
p, a, li {
|
|
color: #fef6e4;
|
|
}
|
|
/* Dark mode highlight */
|
|
.chat-message-highlighted {
|
|
border: 2px solid #f582ae; /* Pink border */
|
|
background-color: #6a0e3f; /* Darker pink background */
|
|
animation: highlight-fade-dark 2s ease-out;
|
|
}
|
|
@keyframes highlight-fade-dark {
|
|
from {
|
|
background-color: #f582ae;
|
|
border-color: #f582ae;
|
|
}
|
|
to {
|
|
background-color: #6a0e3f;
|
|
border-color: #f582ae;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Breadcrumb navigation */
|
|
.breadcrumb {
|
|
padding: 8px 0;
|
|
margin-bottom: 1em;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: #001858;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
color: #f582ae;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
margin: 0 8px;
|
|
color: #001858;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.breadcrumb-current {
|
|
color: #001858;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Back button */
|
|
.back-button {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
margin-bottom: 1em;
|
|
background-color: #f3d2c1;
|
|
color: #001858;
|
|
text-decoration: none;
|
|
border: 1px solid #001858;
|
|
border-radius: 5px;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #8bd3dd;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.back-button::before {
|
|
content: "← ";
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 3px solid #fef6e4;
|
|
border-top: 3px solid #001858;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.breadcrumb a {
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.breadcrumb-current {
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.back-button {
|
|
background-color: #555;
|
|
color: #fef6e4;
|
|
border-color: #fef6e4;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #8bd3dd;
|
|
color: #001858;
|
|
}
|
|
}
|
|
|
|
/* Loading state for buttons */
|
|
button:disabled, input[type="submit"]:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button.loading, input[type="submit"].loading {
|
|
position: relative;
|
|
color: transparent;
|
|
}
|
|
|
|
button.loading::after, input[type="submit"].loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
margin-top: -8px;
|
|
border: 3px solid #fef6e4;
|
|
border-top: 3px solid transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Success/error message notifications */
|
|
.notification {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 20px;
|
|
padding: 14px 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
|
|
z-index: 1001;
|
|
animation: slideIn 0.3s ease-out;
|
|
max-width: 400px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.notification.success {
|
|
background-color: #8bd3dd;
|
|
color: #001858;
|
|
border: 1px solid #001858;
|
|
}
|
|
|
|
.notification.error {
|
|
background-color: #f582ae;
|
|
color: #fef6e4;
|
|
border: 1px solid #001858;
|
|
}
|
|
|
|
.notification.info {
|
|
background-color: #f3d2c1;
|
|
color: #001858;
|
|
border: 1px solid #001858;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.notification.hiding {
|
|
animation: slideOut 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Form validation styles */
|
|
input.error, textarea.error, select.error {
|
|
border-color: #f582ae;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.field-error {
|
|
color: #f582ae;
|
|
font-size: 0.9em;
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
/* Character counter */
|
|
.char-counter {
|
|
text-align: right;
|
|
font-size: 0.85em;
|
|
color: #001858;
|
|
opacity: 0.7;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.char-counter.warning {
|
|
color: #f582ae;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Draft indicator styles */
|
|
.draft-indicator {
|
|
background-color: #f3d2c1;
|
|
border: 1px solid #001858;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
animation: slideInFromTop 0.3s ease-out;
|
|
}
|
|
|
|
.draft-indicator-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.draft-indicator-icon {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.draft-indicator-text {
|
|
flex: 1;
|
|
color: #001858;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.draft-indicator-button {
|
|
padding: 5px 12px;
|
|
border: 1px solid #001858;
|
|
background-color: #fef6e4;
|
|
color: #001858;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-family: monospace;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.draft-indicator-button:hover {
|
|
background-color: #001858;
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.draft-indicator-button.restore {
|
|
background-color: #8bd3dd;
|
|
border-color: #001858;
|
|
}
|
|
|
|
.draft-indicator-button.restore:hover {
|
|
background-color: #001858;
|
|
color: #8bd3dd;
|
|
}
|
|
|
|
@keyframes slideInFromTop {
|
|
from {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.spinner {
|
|
border-color: #444;
|
|
border-top-color: #fef6e4;
|
|
}
|
|
|
|
button.loading::after, input[type="submit"].loading::after {
|
|
border-color: #001858;
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
.notification.success {
|
|
background-color: #8bd3dd;
|
|
color: #001858;
|
|
}
|
|
|
|
.notification.error {
|
|
background-color: #f582ae;
|
|
color: #001858;
|
|
}
|
|
|
|
.notification.info {
|
|
background-color: #555;
|
|
color: #fef6e4;
|
|
}
|
|
|
|
input.error, textarea.error, select.error {
|
|
border-color: #f582ae;
|
|
}
|
|
|
|
.field-error {
|
|
color: #f582ae;
|
|
}
|
|
|
|
.char-counter {
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.draft-indicator {
|
|
background-color: #2a2a2a;
|
|
border-color: #fef6e4;
|
|
}
|
|
|
|
.draft-indicator-text {
|
|
color: #fef6e4;
|
|
}
|
|
|
|
.draft-indicator-button {
|
|
background-color: #1a1a1a;
|
|
color: #fef6e4;
|
|
border-color: #fef6e4;
|
|
}
|
|
|
|
.draft-indicator-button:hover {
|
|
background-color: #fef6e4;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.draft-indicator-button.restore {
|
|
background-color: #8bd3dd;
|
|
color: #001858;
|
|
border-color: #8bd3dd;
|
|
}
|
|
|
|
.draft-indicator-button.restore:hover {
|
|
background-color: #fef6e4;
|
|
color: #001858;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
ul.topnav li {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
main {
|
|
padding: 10px;
|
|
}
|
|
main > section {
|
|
margin: 0.5em;
|
|
padding: 0.5em;
|
|
width: 95%;
|
|
}
|
|
main > div {
|
|
width: 95%;
|
|
}
|
|
.thread-posts {
|
|
width: 95%;
|
|
}
|
|
|
|
.notification {
|
|
right: 10px;
|
|
left: 10px;
|
|
max-width: none;
|
|
}
|
|
} |