331 lines
7.2 KiB
CSS
331 lines
7.2 KiB
CSS
/* Global Styles */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%; /* Ensure the body and HTML cover the full height */
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh; /* Full viewport height */
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* Wrapper for header and content */
|
|
.wrapper {
|
|
flex: 1; /* Takes up remaining space between header and footer */
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 0.8em; /* Smaller font size for a neat appearance */
|
|
background-color: #c08000; /* Footer background color */
|
|
padding: 3px 0; /* Minimal padding to make it skinny */
|
|
text-align: center;
|
|
color: #000000;
|
|
border-top: 1px solid #a06500; /* Optional subtle top border */
|
|
position: relative;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Table and Layout */
|
|
table {
|
|
width: 80%;
|
|
margin: 20px auto;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td {
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Headers */
|
|
h2 {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
color: #c08000;
|
|
}
|
|
|
|
/* Text Classes */
|
|
.smalltext {
|
|
font-size: 10px;
|
|
background-color: #f0f0f0;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.bodytext {
|
|
line-height: 21px;
|
|
font-size: smaller;
|
|
color: #000000;
|
|
}
|
|
|
|
.footertext {
|
|
font-size: smaller;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
.toplinks {
|
|
font-size: smaller;
|
|
color: #000000;
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.topnum {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Input Fields */
|
|
input.text, textarea, select {
|
|
color: #000000;
|
|
background-color: #ffffff;
|
|
padding: 5px;
|
|
border: 1px solid #c08000;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
input.button {
|
|
background-color: #c08000;
|
|
color: #000000;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
input.button:hover {
|
|
background-color: #a06500;
|
|
}
|
|
|
|
/* Quote Styling */
|
|
.qt {
|
|
font-family: 'Courier New', 'Lucida Console', monospace;
|
|
font-size: 10pt;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.qa {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 8pt;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.quote {
|
|
font-family: 'Courier New', 'Lucida Console', monospace;
|
|
font-size: smaller;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Borders for Quotes and Other Content */
|
|
td.quote-box {
|
|
border: 1px solid #c08000;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Pagination */
|
|
#pagination {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
#pagination a {
|
|
color: #c08000;
|
|
text-decoration: none;
|
|
padding: 5px 10px;
|
|
border: 1px solid #c08000;
|
|
margin: 0 5px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
#pagination a:hover {
|
|
background-color: #f0f0f0;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Quote List */
|
|
.quote-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.quote-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.quote-id {
|
|
color: #c08000;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.quote-id:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Dark Mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Body Styles */
|
|
body {
|
|
background-color: #121212; /* Deep dark background */
|
|
color: #d1d1d1; /* Softer off-white for improved contrast */
|
|
}
|
|
|
|
/* Link Styles */
|
|
a {
|
|
color: #ffa500;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #ffcc80; /* Subtle, warmer hover color */
|
|
text-decoration: underline; /* Underline on hover for better accessibility */
|
|
}
|
|
|
|
/* Body Text */
|
|
.bodytext {
|
|
line-height: 1.7; /* Increased line spacing for readability */
|
|
font-size: 1rem; /* Consistent font size */
|
|
color: #e0e0e0; /* Softer white for text */
|
|
}
|
|
|
|
/* Table, Input Fields, Textarea, Select Elements */
|
|
table, td, input.text, textarea, select {
|
|
background-color: #1a1a1a; /* Darker backgrounds for contrast */
|
|
color: #d1d1d1; /* Softer white text */
|
|
border-color: #ffa500; /* Keeping borders on accents */
|
|
}
|
|
|
|
/* Submit Button */
|
|
input.button {
|
|
background-color: #ffa500;
|
|
color: #121212; /* Darker button text for readability */
|
|
border-radius: 6px; /* Slight rounding for modern design */
|
|
padding: 8px 12px; /* Increased padding for better button size */
|
|
font-weight: bold; /* More defined button text */
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
input.button:hover {
|
|
background-color: #ff8c00; /* Brighter hover color */
|
|
color: #ffffff; /* White text on hover for better contrast */
|
|
}
|
|
|
|
/* Headers, Footer, and Other Text Elements */
|
|
.footertext, .toplinks, h2 {
|
|
color: #ffa500; /* Accent color for headers */
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem; /* Larger headers for better hierarchy */
|
|
border-bottom: 2px solid #ffa500; /* Visual distinction for headers */
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/* Quote Box Borders */
|
|
td.quote-box {
|
|
border-color: #ffa500;
|
|
background-color: #1e1e1e; /* Subtle background for quotes */
|
|
padding: 15px; /* Improved padding for readability */
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background-color: #181818; /* Consistent footer background */
|
|
color: #d1d1d1; /* Softer text in footer */
|
|
border-top: 2px solid #ffa500; /* Accent line to separate footer */
|
|
padding: 15px;
|
|
}
|
|
|
|
/* Pagination Links */
|
|
#pagination a {
|
|
border-color: #ffa500;
|
|
color: #ffa500;
|
|
background-color: transparent;
|
|
padding: 8px 12px; /* Larger clickable area */
|
|
border-radius: 4px; /* Rounded edges for pagination */
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
#pagination a:hover {
|
|
background-color: #2e2e2e; /* Slightly brighter hover */
|
|
color: #ffffff; /* White text for hover state */
|
|
}
|
|
|
|
/* Quote ID Links */
|
|
.quote-id {
|
|
color: #ffa500;
|
|
font-weight: bold; /* Bold for emphasis */
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.quote-id:hover {
|
|
color: #ffcc80; /* Brighter hover for clarity */
|
|
}
|
|
|
|
/* Other Element Styles */
|
|
input.text, textarea, select {
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
input.button:disabled {
|
|
background-color: #444444; /* Disabled button appearance */
|
|
color: #aaaaaa; /* Disabled text color */
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Table and Layout Enhancements */
|
|
table {
|
|
background-color: #1e1e1e;
|
|
border: 1px solid #ffa500;
|
|
}
|
|
|
|
td {
|
|
padding: 15px; /* More padding for larger table cells */
|
|
}
|
|
}
|
|
|
|
/* Header Styles */
|
|
.header-table {
|
|
background-color: #c08000; /* The orange color block for the header */
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.header-left {
|
|
text-align: left;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.header-right {
|
|
text-align: right;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.nav-table {
|
|
background-color: #f0f0f0; /* A lighter background for the navigation section */
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.toplinks a {
|
|
color: #c08000;
|
|
margin: 0 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toplinks a:hover {
|
|
text-decoration: underline;
|
|
}
|