badbl0cks
7dd61775b3
Remove Google Fonts and the old external stylesheet link. Add (inline for now) @font-face rules for unscii fonts and new link/p/ul styles, and set the root font to unscii16. Minor UI tweaks: style the skip link background, remove the "Tools" nav item for now, fix the contact page title and link markup, and replace the homepage copy with an "Under Construction" message.
1172 lines
20 KiB
CSS
1172 lines
20 KiB
CSS
/* Global reset */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Base styles */
|
|
body {
|
|
/*font-family: "Courier New", Courier, monospace;*/
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
transition:
|
|
background-color 0.3s,
|
|
color 0.3s;
|
|
}
|
|
|
|
header,
|
|
main,
|
|
footer {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Containers */
|
|
.container {
|
|
padding: 20px;
|
|
border: 2px solid var(--accent-color);
|
|
background-color: var(--section-bg);
|
|
max-width: 800px;
|
|
margin: 20px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 6px var(--shadow-color);
|
|
}
|
|
|
|
/* Headers */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 10px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 5px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
h5 {
|
|
font-size: 1rem;
|
|
}
|
|
h6 {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
p,
|
|
label {
|
|
font-size: 1rem;
|
|
margin-bottom: 15px;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--border-color);
|
|
transition:
|
|
color 0.3s ease,
|
|
border-color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
/* Lists */
|
|
ul,
|
|
ol {
|
|
margin: 15px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
button {
|
|
padding: 10px 20px;
|
|
font-size: 1rem;
|
|
border: 1px solid var(--accent-color);
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.3s ease,
|
|
transform 0.2s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--text-color);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Inputs */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="file"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
input[type="color"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
font-size: 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg);
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
/* Form */
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid var(--border-color);
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
legend {
|
|
font-weight: bold;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre,
|
|
code {
|
|
background-color: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
overflow-x: auto;
|
|
color: var(--text-color);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Inline code elements */
|
|
code {
|
|
padding: 2px 4px;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Blockquote */
|
|
blockquote {
|
|
border-left: 3px solid var(--accent-color);
|
|
padding-left: 10px;
|
|
margin: 20px 0;
|
|
font-style: italic;
|
|
color: var(--blockquote-color);
|
|
}
|
|
|
|
footer {
|
|
margin-top: 40px;
|
|
font-size: 0.6rem;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Figures */
|
|
figure {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
color: var(--figcaption-color);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Inline elements */
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
u {
|
|
text-decoration: underline;
|
|
}
|
|
abbr,
|
|
kbd,
|
|
mark {
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Progress bar */
|
|
progress {
|
|
width: 100%;
|
|
height: 15px;
|
|
}
|
|
|
|
/* Details (accordion) */
|
|
details {
|
|
margin: 15px 0;
|
|
padding: 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Modals */
|
|
dialog {
|
|
border: 1px solid var(--dialog-border);
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: var(--dialog-backdrop);
|
|
}
|
|
|
|
/* Section styling */
|
|
section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--section-bg);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Header styling */
|
|
header {
|
|
margin-bottom: 20px;
|
|
padding: 10px 0;
|
|
border-bottom: 2px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Main content styling */
|
|
main {
|
|
width: 100%;
|
|
padding: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Horizontal rule */
|
|
hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 600px) {
|
|
.container {
|
|
padding: 15px;
|
|
margin: 10px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
textarea,
|
|
select {
|
|
font-size: 0.8rem;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
/* Links Section */
|
|
.links-section {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.links-section ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.links-section li {
|
|
display: inline;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.links-section a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.links-section a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
/* Additional Styling for Install Section */
|
|
.install-section {
|
|
margin-top: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.install-section pre {
|
|
background-color: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Definition Lists */
|
|
dl {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Article styling */
|
|
article {
|
|
margin: 25px 0;
|
|
padding: 20px;
|
|
background-color: var(--section-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Aside styling */
|
|
aside {
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
background-color: var(--aside-bg);
|
|
border-left: 3px solid var(--aside-border);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Navigation enhancements */
|
|
nav {
|
|
padding: 10px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
nav li {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Mark styling */
|
|
mark {
|
|
background-color: var(--mark-bg);
|
|
color: var(--mark-color);
|
|
}
|
|
|
|
/* Keyboard styling */
|
|
kbd {
|
|
background-color: var(--input-bg);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 1px 0 var(--border-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Time and small elements */
|
|
time,
|
|
small {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Address styling */
|
|
address {
|
|
font-style: normal;
|
|
margin: 15px 0;
|
|
padding: 10px;
|
|
border-left: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Description list improvements */
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 10px 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
dt {
|
|
grid-column: 1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
grid-column: 2;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Form elements base styling */
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
max-width: 600px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Fieldset styling */
|
|
fieldset {
|
|
border: 2px solid var(--border-color);
|
|
padding: 20px;
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
legend {
|
|
font-weight: bold;
|
|
padding: 0 10px;
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Label styling */
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Checkbox and radio container */
|
|
label:has(> input[type="checkbox"]),
|
|
label:has(> input[type="radio"]) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 8px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Input fields */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
input[type="datetime-local"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
margin: 4px 0 12px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg);
|
|
font-family: "Courier New", Courier, monospace;
|
|
font-size: 1rem;
|
|
transition:
|
|
border-color 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
|
|
/* Input focus states */
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 2px var(--shadow-color);
|
|
}
|
|
|
|
/* Checkbox and radio styling */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--border-color);
|
|
background-color: var(--input-bg);
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Checkbox and radio checked states */
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
input[type="checkbox"]:checked::after {
|
|
content: "✓";
|
|
position: absolute;
|
|
color: var(--checkbox-check-color);
|
|
font-size: 0.8rem;
|
|
left: 2px;
|
|
top: -1px;
|
|
}
|
|
|
|
input[type="radio"]:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: var(--radio-dot-color);
|
|
border-radius: 50%;
|
|
left: 3px;
|
|
top: 3px;
|
|
}
|
|
|
|
/* Select styling */
|
|
select {
|
|
appearance: none;
|
|
padding-right: 30px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: calc(100% - 8px) center;
|
|
}
|
|
|
|
/* File input styling */
|
|
input[type="file"] {
|
|
border: 2px dashed var(--border-color);
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background-color: var(--input-bg);
|
|
}
|
|
|
|
input[type="file"]::file-selector-button {
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Range input styling */
|
|
input[type="range"] {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 6px;
|
|
background-color: var(--border-color);
|
|
border-radius: 3px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: var(--accent-color);
|
|
border: 2px solid var(--bg-color);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Color input styling */
|
|
input[type="color"] {
|
|
width: 60px;
|
|
height: 40px;
|
|
padding: 2px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Textarea styling */
|
|
textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Form validation styling */
|
|
input:invalid,
|
|
textarea:invalid,
|
|
select:invalid {
|
|
border-color: var(--error-color);
|
|
}
|
|
|
|
/* Required field indicator */
|
|
label.required::after {
|
|
content: "*";
|
|
color: var(--required-color);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Disabled state */
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled,
|
|
button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Button styling (submit, reset, etc.) */
|
|
button,
|
|
input[type="submit"],
|
|
input[type="reset"] {
|
|
padding: 10px 20px;
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
border: 2px solid var(--accent-color);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="reset"]:hover {
|
|
background-color: var(--text-color);
|
|
border-color: var(--text-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
button:active,
|
|
input[type="submit"]:active,
|
|
input[type="reset"]:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Progress element styling */
|
|
progress {
|
|
width: 100%;
|
|
height: 20px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg);
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
background-color: var(--input-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background-color: var(--accent-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 600px) {
|
|
fieldset {
|
|
padding: 15px;
|
|
}
|
|
|
|
input[type="file"] {
|
|
padding: 15px;
|
|
}
|
|
|
|
button,
|
|
input[type="submit"],
|
|
input[type="reset"] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Base text size adjustments */
|
|
p,
|
|
label,
|
|
li,
|
|
td,
|
|
th,
|
|
input,
|
|
select,
|
|
textarea,
|
|
button {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
small,
|
|
figcaption,
|
|
time,
|
|
.small-text {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Form elements text color fix */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
input[type="datetime-local"],
|
|
textarea,
|
|
select {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Placeholder text color */
|
|
::placeholder {
|
|
color: var(--blockquote-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Select option text color */
|
|
option {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 600px) {
|
|
p,
|
|
label,
|
|
li,
|
|
td,
|
|
th,
|
|
input,
|
|
select,
|
|
textarea,
|
|
button {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
small,
|
|
figcaption,
|
|
time,
|
|
.small-text {
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
/* Theme toggle button */
|
|
#theme-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Theme-specific variables */
|
|
:root {
|
|
/* Light theme (default) */
|
|
--bg-color: #f4f4f4;
|
|
--text-color: #333;
|
|
--text-muted: #666;
|
|
--text-light: #555;
|
|
--link-color: #333;
|
|
--link-hover: #000;
|
|
--heading-color: #333;
|
|
--blockquote-color: #666;
|
|
--code-color: #333;
|
|
--label-color: #333;
|
|
--small-color: #666;
|
|
--figcaption-color: #555;
|
|
--time-color: #666;
|
|
--border-color: #ddd;
|
|
--hover-color: #f0f0f0;
|
|
--input-bg: #fff;
|
|
--section-bg: #fafafa;
|
|
--code-bg: #f0f0f0;
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
--accent-color: #333;
|
|
--error-color: #d32f2f;
|
|
--mark-bg: #fff3bf;
|
|
--mark-color: #333;
|
|
--intro-bg: var(--section-bg);
|
|
--aside-bg: #f0f0f0;
|
|
--aside-border: var(--accent-color);
|
|
--dialog-border: var(--border-color);
|
|
--dialog-backdrop: rgba(0, 0, 0, 0.3);
|
|
--required-color: var(--error-color);
|
|
--checkbox-check-color: var(--bg-color);
|
|
--radio-dot-color: var(--bg-color);
|
|
--kbd-bg: #f5f5f5;
|
|
--kbd-border: #ccc;
|
|
--kbd-shadow: rgba(0, 0, 0, 0.1);
|
|
--progress-bg: #f0f0f0;
|
|
--progress-value: var(--accent-color);
|
|
--button-hover-bg: var(--hover-color);
|
|
--button-active-shadow: rgba(0, 0, 0, 0.2);
|
|
--file-button-hover: var(--hover-color);
|
|
--range-thumb-bg: var(--accent-color);
|
|
--range-track-bg: var(--border-color);
|
|
--dropdown-shadow: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Update dark theme variables */
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #f4f4f4;
|
|
--text-muted: #ccc;
|
|
--text-light: #ddd;
|
|
--link-color: #f4f4f4;
|
|
--link-hover: #fff;
|
|
--heading-color: #f4f4f4;
|
|
--blockquote-color: #ccc;
|
|
--code-color: #f4f4f4;
|
|
--label-color: #f4f4f4;
|
|
--small-color: #ccc;
|
|
--figcaption-color: #ccc;
|
|
--time-color: #ccc;
|
|
--border-color: #404040;
|
|
--hover-color: #333;
|
|
--input-bg: #262626;
|
|
--section-bg: #262626;
|
|
--code-bg: #333;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--accent-color: #f4f4f4;
|
|
--error-color: #ff5252;
|
|
--mark-bg: #665c00;
|
|
--mark-color: #f4f4f4;
|
|
--intro-bg: #1a1a1a;
|
|
--aside-bg: var(--section-bg);
|
|
--aside-border: var(--accent-color);
|
|
--dialog-border: var(--border-color);
|
|
--dialog-backdrop: rgba(0, 0, 0, 0.5);
|
|
--required-color: var(--error-color);
|
|
--checkbox-check-color: var(--bg-color);
|
|
--radio-dot-color: var(--bg-color);
|
|
--kbd-bg: #333;
|
|
--kbd-border: #444;
|
|
--kbd-shadow: rgba(0, 0, 0, 0.2);
|
|
--progress-bg: #333;
|
|
--progress-value: var(--accent-color);
|
|
--button-hover-bg: #444;
|
|
--button-active-shadow: rgba(0, 0, 0, 0.4);
|
|
--file-button-hover: #444;
|
|
--range-thumb-bg: var(--accent-color);
|
|
--range-track-bg: #444;
|
|
--dropdown-shadow: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Fix hardcoded colors */
|
|
/* Remove these hardcoded colors */
|
|
section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 20px;
|
|
padding: 10px 0;
|
|
border-bottom: 2px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
fieldset {
|
|
border: 2px solid var(--border-color);
|
|
padding: 20px;
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
legend {
|
|
font-weight: bold;
|
|
padding: 0 10px;
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
label {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
address {
|
|
border-left: 2px solid var(--border-color);
|
|
}
|
|
|
|
input[type="file"] {
|
|
border: 2px dashed var(--border-color);
|
|
background-color: var(--input-bg);
|
|
}
|
|
|
|
input[type="file"]::file-selector-button {
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
}
|
|
|
|
input[type="color"] {
|
|
border: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Fix time and small elements */
|
|
time,
|
|
small {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Remove old theme toggle button styles */
|
|
#theme-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Update links section */
|
|
.links-section a {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.links-section a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
/* Fix install section */
|
|
.install-section pre {
|
|
background-color: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Update theme switcher dropdown styles */
|
|
details.dropdown {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
details.dropdown summary {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--section-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
details.dropdown ul {
|
|
position: absolute;
|
|
right: 0;
|
|
min-width: 120px;
|
|
margin: 4px 0;
|
|
padding: 0;
|
|
background: var(--section-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
list-style: none;
|
|
box-shadow: 0 2px 4px var(--shadow-color);
|
|
}
|
|
|
|
details.dropdown ul a {
|
|
display: block;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
details.dropdown ul a:hover {
|
|
background: var(--hover-color);
|
|
}
|
|
|
|
/* Update section styling for better dark mode contrast */
|
|
section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--section-bg);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Add specific styling for the introduction section */
|
|
#introduction {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--intro-bg) !important;
|
|
border-radius: 4px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
[data-theme="dark"] #introduction {
|
|
background-color: var(--intro-bg) !important;
|
|
}
|
|
|
|
/* Update the aside within introduction */
|
|
#introduction aside {
|
|
background-color: var(--section-bg);
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-left: 2px solid var(--accent-color);
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
/* Update kbd elements in introduction */
|
|
#introduction kbd {
|
|
background-color: var(--section-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 0 var(--border-color);
|
|
color: var(--text-color);
|
|
display: inline-block;
|
|
font-size: 0.85em;
|
|
padding: 2px 4px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
/* Ensure proper contrast for strong elements */
|
|
#introduction strong {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Update blockquote styling */
|
|
blockquote {
|
|
border-left: 3px solid var(--accent-color);
|
|
color: var(--blockquote-color);
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
/* Update code block styling */
|
|
pre,
|
|
code {
|
|
background-color: var(--code-bg);
|
|
border-color: var(--border-color);
|
|
color: var(--code-color);
|
|
}
|
|
|
|
/* Update table styling */
|
|
table {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: var(--section-bg);
|
|
}
|
|
|
|
/* Update form elements */
|
|
select option {
|
|
background-color: var(--input-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Update focus states */
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 2px var(--shadow-color);
|
|
}
|