/* ============================================================================
MATT FRAMEWORK v2 — Custom CSS Mini Framework
Author: Matt Butler (Built with ❤️ and clarity)
Purpose: Simple, powerful CSS foundation for ALL your current and future sites
----------------------------------------------------------------------------
📌 HOW TO USE:
- Link this in : Save
*/
/* ----------------------------------------------------------------------------
SECTION 5: Forms
---------------------------------------------------------------------------- */
.input-field {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
margin-bottom: 1em;
}
label {
display: block;
font-weight: 600;
margin-bottom: 0.5em;
}
.form-button {
background-color: #007BFF; /* Bootstrap-style blue */
color: #fff;
border: none;
padding: 0.5em 1.2em;
font-size: 1rem;
border-radius: 0.3em;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
margin-right: 0.5em;
}
.form-button:hover {
background-color: #0056b3;
}
.form-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
select,
select.form-control {
appearance: none; /* Remove default OS styling */
-webkit-appearance: none;
-moz-appearance: none;
padding: 0.6rem 2.5rem 0.6rem 0.75rem;
font-size: 1rem;
font-family: inherit;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0.4rem;
box-sizing: border-box;
width: 100%;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='70,105 20,35 120,35' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
select:focus {
border-color: #007BFF;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
outline: none;
}
/* ----------------------------------------------------------------------------
SECTION 6: Spacing Utilities
---------------------------------------------------------------------------- */
/* Margin */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0px; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
/* Padding */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* ----------------------------------------------------------------------------
SECTION 7: Text + Alignment Utilities
---------------------------------------------------------------------------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-red { color: #c40233; }
.text-green { color: #278a2e; }
.text-blue { color: #0044cc; }
/* ----------------------------------------------------------------------------
SECTION 8: Flex + Positioning
---------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-center { justify-content: center; align-items: center; }
.flex-space-between{ justify-content: space-between; align-items: center; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
/* ----------------------------------------------------------------------------
SECTION 9: Alerts + Badges
---------------------------------------------------------------------------- */
.alert {
padding: 1em;
border-radius: 4px;
margin-bottom: 1em;
}
.alert-success { background: #e0f6e9; color: #276749; }
.alert-error { background: #fdecea; color: #b91c1c; }
.alert-warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
padding: 10px;
border-radius: .25em;
margin-bottom: 1rem;
}
.alert-info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
padding: 10px;
border-radius: .25em;
margin-bottom: 1rem;
}
.alert-fixed {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
padding: 12px 20px;
border-radius: .25em;
max-width: 90%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.badge {
display: inline-block;
padding: 0.25em 0.5em;
border-radius: 12px;
font-size: 0.75rem;
background: #0044cc;
color: white;
}
/* ----------------------------------------------------------------------------
SECTION 10: Visibility Helpers
---------------------------------------------------------------------------- */
.hidden { display: none !important; }
@media (min-width: 768px) {
.visible-md { display: block; }
.hide-mobile { display: none !important; }
}
/* ----------------------------------------------------------------------------
SECTION 11: Dark Mode
---------------------------------------------------------------------------- */
.dark-toggle {
background: #0044CC;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.8rem;
margin-left: 16px;
cursor: pointer;
}
.dark-toggle:hover {
background: #555;
}
body.dark-mode {
background: #111;
color: #eee;
}
.dark-mode .container {
background: #222;
}
.dark-mode .btn-primary {
background-color: #0066ff;
}
.dark-mode .alert-success {
background: #1c4532;
color: #c6f6d5;
}
.dark-mode .dark-toggle {
background: #555555;
color: #111;
}
.dark-mode .dark-toggle:hover {
background: #0044CC;
}
/* ----------------------------------------------------------------------------
COMPONENT: NAVBAR
Responsive top navigation bar with light/dark support
Add ...
at the top of your pages
---------------------------------------------------------------------------- */
.navbar {
background-color: #f8f8f8;
border-bottom: 1px solid #ddd;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.navbar a {
text-decoration: none;
color: #333;
margin-right: 16px;
font-weight: 500;
transition: color 0.2s ease;
}
.navbar a:hover {
color: #0044cc;
}
.navbar .logo {
font-size: 1.25rem;
font-weight: 700;
color: #0044cc;
}
.navbar .nav-links {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.navbar .nav-links {
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: 10px;
}
.navbar a {
margin: 8px 0;
}
}
/* Dark mode navbar override */
body.dark-mode .navbar {
background-color: #222;
border-color: #444;
}
body.dark-mode .navbar a {
color: #eee;
}
body.dark-mode .navbar a:hover {
color: #66aaff;
}
body.dark-mode .navbar .logo {
color: #66aaff;
}
/* ----------------------------------------------------------------------------
COMPONENT: Responsive Hamburger Menu
---------------------------------------------------------------------------- */
.menu-toggle {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
display: none;
color: #0044cc;
}
body.dark-mode .menu-toggle {
color: #eee;
}
/* Hide menu toggle by default on desktop */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.navbar .nav-links {
display: none;
flex-direction: column;
width: 100%;
margin-top: 10px;
background: #f8f8f8;
padding: 10px 0;
border-top: 1px solid #ccc;
}
.navbar .nav-links a,
.navbar .dark-toggle {
margin: 8px 16px;
}
/* Show nav when toggled */
body.menu-open .navbar .nav-links {
display: flex;
}
body.dark-mode.menu-open .navbar .nav-links {
background: #222;
border-color: #444;
}
}
/* ============================================================================
MATT FRAMEWORK v2 — Custom CSS Mini Framework
Author: Matt Butler (Built with ❤️ and clarity)
Purpose: Simple, powerful CSS foundation for ALL your current and future sites
----------------------------------------------------------------------------
📌 HOW TO USE:
- Link this in : ...
---------------------------------------------------------------------------- */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
}
th {
background: #f4f4f4;
}
body.dark-mode table {
border-color: #444;
}
body.dark-mode th {
background: #333;
color: #eee;
}
/* Example:
*/
/* ---------------------------------------------------------------------------
SECTION: List Styling
Controls indentation and spacing of / lists
📌 Use for content lists, menus, etc.
---------------------------------------------------------------------------- */
ul, ol {
margin-left: 1.25rem;
margin-bottom: 1rem;
}
ul li, ol li {
margin-bottom: 0.25rem;
}
/* Example:
*/
/* ---------------------------------------------------------------------------
SECTION: Width Utilities
Useful for limiting block widths
📌 Combine with .mx-auto or .text-center for effect
---------------------------------------------------------------------------- */
.w-100 { width: 100%; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }
/* Example:
Narrow block
*/
/* ---------------------------------------------------------------------------
SECTION: Print Styles
Hide non-print elements when printing/exporting
📌 Helpful for reports and certificates
---------------------------------------------------------------------------- */
@media print {
.navbar, .footer, .dark-toggle, .menu-toggle {
display: none !important;
}
body {
color: #000;
background: #fff;
}
}
/* ---------------------------------------------------------------------------
SECTION: Collapsible Sections
Prepares visual styling for toggleable content blocks
📌 Add JS to toggle .open class on the trigger
---------------------------------------------------------------------------- */
/* Collapsible Header */
.collapsible {
background: #f4f4f4;
padding: 1rem;
border-radius: 0.5rem;
cursor: pointer;
position: relative;
font-size: 1rem;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
word-break: break-word;
transition: background 0.2s ease;
}
.collapsible:hover {
background: #e8e8e8;
}
/* Arrow Indicator */
.collapsible::after {
content: "▸";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease;
font-size: 1.2rem;
color: #555;
}
.collapsible.open::after {
transform: translateY(-50%) rotate(90deg);
}
/* Collapsible Content */
.collapsible-content {
display: none;
margin-top: 0.5rem;
max-width: 100%;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
/* Show on open */
.collapsible.open + .collapsible-content {
display: block;
}
/* Individual Item Inside */
.collapsible-item {
border: 1px solid #444;
border-radius: 0.25em;
padding: 1rem;
margin: 0 0 12px 0;
background-color: #fff;
font-size: 1rem;
line-height: 1.5;
word-break: break-word;
box-sizing: border-box;
width: 100%;
overflow-wrap: break-word;
}
/* Anchor Styling */
.collapsible-content a {
color: #004080;
text-decoration: none;
font-weight: 600;
max-width: 100%;
display: inline-block;
word-break: break-word;
overflow-wrap: break-word;
}
.collapsible-content a:hover {
text-decoration: underline;
}
/* Quantity Tags */
.qty-green {
color: #028A0F;
font-weight: bold;
}
.qty-red {
color: #B00020;
font-weight: bold;
}
/* Responsive Adjustments */
@media (max-width: 600px) {
.collapsible {
font-size: 0.95rem;
padding: 0.75rem;
}
.collapsible::after {
font-size: 1rem;
right: 0.75rem;
}
.collapsible-item {
padding: 0.75rem;
font-size: 0.95rem;
}
.collapsible-content a {
font-size: 0.95rem;
}
}
/* Example:
Show Details
Hidden until open
*/
/* ---------------------------------------------------------------------------
SECTION: view-details.php
---------------------------------------------------------------------------- */
.view-details {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius:.25em;
font-size: 0.9rem;
color: #444;
}
.detail-line {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.detail-line-description {
font-size: 1.1rem;
font-weight: bold;
width: 150px;
flex-shrink: 0;
}
.detail-line-value {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: .25em;
font-size: 1.1rem;
padding: 0.25em 0.5em;
flex-grow: 1;
}
/* ============================================================================
ADDITIONS — v2 (2025-08-12)
Minimal, non-breaking utilities approved by Matt
Nothing removed; purely additive.
============================================================================ */
/* Buttons */
.btn-secondary {
background-color: #6c757d;
color: #fff;
border: none;
}
.btn-secondary:hover { opacity: 0.9; }
/* Text helpers */
.text-danger { color: #b91c1c; } /* alias for error tone */
.text-muted { color: #666; } /* subtle, de-emphasized text */
/* Radius helper */
.rounded { border-radius: .25rem; }
/* Messaging thread helpers */
.msg-thread {
display: flex;
flex-direction: column;
gap: 8px;
}
.msg {
max-width: 75%;
padding: 10px 12px;
border-radius: 10px;
line-height: 1.4;
word-break: break-word;
}
.msg-in { background: #f1f3f5; align-self: flex-start; }
.msg-out { background: #e7f0ff; align-self: flex-end; text-align: right; }
/* Dark mode tweaks for messages */
body.dark-mode .msg-in { background: #2a2a2a; color: #ddd; }
body.dark-mode .msg-out { background: #1f2b3a; color: #eee; }
/* ============================================================================
ADDITIONS — v3 (2025-08-12)
Safe, additive utilities for mobile spacing, visibility, widths, truncation,
hover helpers, extra colors, and flex shorthands.
============================================================================ */
/* 1) Responsive Spacing Utilities (mobile-first tweaks) */
@media (max-width: 576px) {
.btn,
.form-button {
padding: 10px 14px;
font-size: 0.95rem;
}
.mt-sm-1 { margin-top: 0.25rem; }
.mt-sm-2 { margin-top: 0.5rem; }
.mb-sm-1 { margin-bottom: 0.25rem; }
.mb-sm-2 { margin-bottom: 0.5rem; }
.px-sm-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
}
/* Gap utilities for flex/grid groups */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
/* 2) Responsive Visibility Classes (initial v3 set) */
@media (max-width: 576px) {
.hide-sm { display: none !important; }
.show-sm { display: block !important; }
}
@media (min-width: 577px) and (max-width: 992px) {
.hide-md { display: none !important; }
.show-md { display: block !important; }
}
@media (min-width: 993px) {
.hide-lg { display: none !important; }
.show-lg { display: block !important; }
}
/* 3) Width Helpers */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
/* 4) Text Truncation */
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 5) Hover Helpers */
.hover-underline:hover { text-decoration: underline; }
.hover-opacity:hover { opacity: 0.85; }
/* 6) Additional Text Color Utilities */
.text-gray { color: #6c757d; }
.text-yellow { color: #ffc107; }
.text-white { color: #ffffff; }
/* 7) Flex Alignment Shorthands */
.flex-start { justify-content: flex-start; align-items: center; }
.flex-end { justify-content: flex-end; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
/* ============================================================================
ADDITIONS — v3.1 (2025-08-12)
Finalized helpers per Matt's approval. Unified breakpoints, button sizes,
form validation, tables, cards, badges, spacing fill-ins, display helpers,
and dark-mode adjustments. Purely additive; no removals.
============================================================================ */
/* === Breakpoints (for documentation) ===============================
xs: <576px
sm: 576–767.98px
md: 768–1023.98px
lg: ≥1024px
=================================================================== */
/* Unified visibility helpers (override earlier v3 ranges by cascade) */
@media (max-width: 575.98px) {
.hide-sm { display: none !important; }
.show-sm { display: block !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.hide-md { display: none !important; }
.show-md { display: block !important; }
}
@media (min-width: 1024px) {
.hide-lg { display: none !important; }
.show-lg { display: block !important; }
}
/* === Buttons ======================================================= */
.btn-sm { padding: 8px 12px; font-size: 0.9rem; }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }
.btn-link {
background: transparent;
border: none;
color: #0044cc;
padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.btn-outline-secondary {
background: transparent;
color: #6c757d;
border: 2px solid #6c757d;
}
.btn-outline-secondary:hover {
background: rgba(108,117,125,0.08);
}
.btn[disabled], .btn.disabled,
.form-button[disabled], .form-button.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Focus ring for accessibility */
.btn:focus-visible,
.form-button:focus-visible,
.input-field:focus-visible,
select:focus-visible {
outline: 2px solid #0066ff;
outline-offset: 2px;
}
/* === Forms ========================================================= */
.is-invalid { border-color: #b91c1c !important; }
.is-valid { border-color: #278a2e !important; }
.invalid-feedback {
display: none;
color: #b91c1c;
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Show feedback when preceding input has .is-invalid */
.is-invalid + .invalid-feedback { display: block; }
/* Required indicator helper (apply to a label) */
.required::after {
content: " *";
color: #b91c1c;
font-weight: 700;
}
/* Lightweight input group */
.input-group {
display: flex;
width: 100%;
}
.input-group > .prepend,
.input-group > .append {
display: inline-flex;
align-items: center;
padding: 0 0.75rem;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
}
.input-group > .prepend { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .append { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-field {
margin: 0;
border-radius: 0;
flex: 1 1 auto;
}
/* === Tables ======================================================== */
.table-responsive { width: 100%; overflow-x: auto; }
.table-sm th, .table-sm td { padding: 4px 8px; }
/* === Cards & Badges =============================================== */
.card-header {
padding: 12px;
border-bottom: 1px solid #ccc;
font-weight: 600;
}
.card-footer {
padding: 12px;
border-top: 1px solid #ccc;
}
.badge-success { background: #278a2e; color: #fff; }
.badge-warning { background: #ffc107; color: #222; }
.badge-danger { background: #b91c1c; color: #fff; }
/* === Spacing Scale Fill-ins ======================================= */
.mt-3 { margin-top: 0.75rem; }
.mb-3 { margin-bottom: 0.75rem; }
.p-3 { padding: 0.75rem; }
.mt-6 { margin-top: 2rem; }
.mb-6 { margin-bottom: 2rem; }
.p-6 { padding: 2rem; }
/* === Z-index & Display Helpers ==================================== */
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }
/* === Dark Mode for new pieces ===================================== */
body.dark-mode .card {
background: #1d1d1d;
border-color: #333;
}
body.dark-mode .card-header {
border-color: #333;
background: #232323;
}
body.dark-mode .card-footer {
border-color: #333;
background: #232323;
}
body.dark-mode .input-field,
body.dark-mode select {
background: #1e1e1e;
color: #eee;
border-color: #444;
}
body.dark-mode .btn-outline-secondary {
color: #ddd;
border-color: #777;
}
body.dark-mode .btn-outline-secondary:hover {
background: #2a2a2a;
}
body.dark-mode .btn-link { color: #66aaff; }
/* ============================================================================
ADDITIONS — v3.2 (2025-08-12)
Card header visual lift + optional accent. No other changes.
============================================================================ */
/* Stronger, still-neutral card headers */
.card-header {
background: #f4f6f8;
border-bottom: 1px solid #d9dee3;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.01em;
}
/* Dark mode */
body.dark-mode .card-header {
background: #222a31;
border-color: #2f3942;
}
/* Optional accent variant (brand stripe on the left) */
.card-header.accent {
border-left: 4px solid #0044cc;
padding-left: 12px;
}
body.dark-mode .card-header.accent {
border-left-color: #66aaff;
}
/* ============================================================================
ADDITIONS — v3.3 (2025-08-12)
Count badges (pill style) for review summary and similar stats.
Purely additive.
============================================================================ */
.count-badge {
display: inline-block;
min-width: 1.75em;
padding: 0.25em 0.6em;
border-radius: 9999px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
text-align: center;
border: 1px solid transparent;
}
.count-badge--good {
background: #e0f6e9; /* align with alert-success */
color: #276749;
border-color: #b9e6c1;
}
.count-badge--neutral {
background: #f0f0f0;
color: #444;
border-color: #d6d6d6;
}
.count-badge--bad {
background: #fdecea; /* align with alert-error */
color: #b91c1c;
border-color: #f5c6cb;
}
/* Dark mode variants */
body.dark-mode .count-badge--neutral {
background: #2a2a2a;
color: #ddd;
border-color: #444;
}
body.dark-mode .count-badge--good {
background: #1c4532;
color: #c6f6d5;
border-color: #2f6d52;
}
body.dark-mode .count-badge--bad {
background: #3a1f1f;
color: #f5b5b5;
border-color: #5a2b2b;
}
/* ============================================================================
ADDITIONS — v3.3.1 (2025-08-12)
Dark mode styles for footer. Purely additive.
============================================================================ */
body.dark-mode .footer {
background-color: #1b1b1b;
border-top-color: #333;
color: #cccccc;
}
body.dark-mode .footer a {
color: #66aaff;
text-decoration: none;
}
body.dark-mode .footer a:hover {
text-decoration: underline;
}
/* ============================================================================
ADDITIONS — v3.3.2 (2025-08-12)
1) Dark mode container transparency (Option A)
2) Fix: ensure dark background extends on long pages
(override earlier `html, body { height:100%; }` with auto + min-height)
============================================================================ */
/* 1) Dark mode containers match light mode (no boxed background) */
body.dark-mode .container,
body.dark-mode .container-full,
body.dark-mode .container-narrow {
background: transparent;
}
/* 2) Background cutoff fix on long pages */
html, body {
height: auto; /* override previous height:100% */
min-height: 100%; /* still at least viewport height */
}
/* ============================================================================
ADDITIONS — v3.3.3 (2025-08-12)
- Dark mode button colors (neutral gray/black)
- Consistent link colors (no purple visited)
- Scoped to avoid clobbering navbar/footer palettes
Purely additive.
============================================================================ */
/* 1) Dark mode — primary/button styles to neutral gray/black */
body.dark-mode .btn-primary,
body.dark-mode .form-button {
background-color: #2b2b2b;
color: #ffffff;
border: 1px solid #444444;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .form-button:hover {
background-color: #353535;
}
/* Outline secondary already has a dark-mode style; reinforce neutrality */
body.dark-mode .btn-outline-secondary {
color: #dddddd;
border-color: #777777;
}
body.dark-mode .btn-outline-secondary:hover {
background: #2a2a2a;
}
/* Ensure generic .btn (without variant) doesn't pick up blue in dark mode */
body.dark-mode .btn {
background-color: #2b2b2b;
color: #ffffff;
border: 1px solid #444444;
}
body.dark-mode .btn:hover {
background-color: #353535;
}
/* 2) Link colors — remove purple visited and harmonize per theme
Scope to page content so navbar/footer custom colors remain intact. */
.page-wrapper a {
color: #0044cc;
text-decoration: none;
}
.page-wrapper a:hover {
text-decoration: underline;
}
.page-wrapper a:visited {
color: #0044cc; /* avoid default purple */
}
/* Dark mode link palette (content only) */
body.dark-mode .page-wrapper a {
color: #66aaff;
}
body.dark-mode .page-wrapper a:visited {
color: #66aaff;
}
body.dark-mode .page-wrapper a:hover {
text-decoration: underline;
}
/* ============================================================================
ADDITIONS — v3.3.4 (2025-08-12)
Thumbnail helpers (remove inline widths from listings)
Purely additive.
============================================================================ */
.thumb-sm {
width: 75px;
max-width: 100%;
height: auto;
display: block;
}
.thumb-md {
width: 100px;
max-width: 100%;
height: auto;
display: block;
}
/* ============================================================================
ADDITIONS — v3.3.5 (2025-08-12)
Dark mode for item detail wrapper and fields (view-detail pages)
Purely additive.
============================================================================ */
body.dark-mode .view-details {
background: #1e1e1e;
border-color: #333;
color: #eee;
}
body.dark-mode .detail-line-value {
background: #1e1e1e;
border-color: #333;
color: #eee;
}
body.dark-mode .detail-line-description {
color: #ddd;
}
/* ============================================================================
ADDITIONS — v3.3.6 (2025-08-12)
Messages page UI helpers (tabs, muted badges, tight button groups, text-muted)
Purely additive; no existing rules changed.
============================================================================ */
/* Tabs (for Unread / All / With Offers) */
.tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tabs a {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #ddd;
background: #f8f8f8;
text-decoration: none;
color: #333;
font-weight: 500;
}
.tabs a.active {
background: #0044cc;
color: #fff;
border-color: #0044cc;
}
body.dark-mode .tabs a {
background: #1e1e1e;
border-color: #333;
color: #ddd;
}
body.dark-mode .tabs a.active {
background: #2b2b2b;
color: #fff;
border-color: #555;
}
/* Muted badge (counts) */
.badge-muted {
display: inline-block;
padding: 0.15em 0.5em;
border-radius: 999px;
font-size: 0.8rem;
background: #e6e6e6;
color: #333;
}
body.dark-mode .badge-muted {
background: #2a2a2a;
color: #ddd;
}
/* Offer badge (for messages with a coin) */
.badge-offer {
display: inline-block;
padding: 0.15em 0.5em;
border-radius: 999px;
font-size: 0.8rem;
background: #e0f6e9;
color: #276749;
}
body.dark-mode .badge-offer {
background: #1c4532;
color: #c6f6d5;
}
/* Tight button group */
.btn-group-tight {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Muted text */
.text-muted {
color: #666;
}
body.dark-mode .text-muted {
color: #aaa;
}
/* ============================================================================
ADDITIONS — v3.3.7 (2025-08-12)
Dark mode for alerts (info/warning) + collapsibles. Append-only.
Nothing else changed.
============================================================================ */
/* Alerts: darker neutrals for readability in dark mode */
body.dark-mode .alert-info {
background-color: #12323a; /* deep teal */
color: #bfe8f2; /* soft cyan text */
border: 1px solid #1e4a56; /* muted border */
}
body.dark-mode .alert-warning {
background-color: #3a2e12; /* warm brown */
color: #ffe8a3; /* readable warm text */
border: 1px solid #5a4617;
}
/* Collapsibles: header, arrow, and content block */
body.dark-mode .collapsible {
background: #222a31;
color: #ddd;
}
body.dark-mode .collapsible:hover {
background: #2a323a;
}
body.dark-mode .collapsible::after {
color: #bbb; /* arrow */
}
/* Content block + items inside */
body.dark-mode .collapsible-content .collapsible-item {
background-color: #1e1e1e;
color: #eee;
border-color: #333;
}
/* Links inside collapsible content */
body.dark-mode .collapsible-content a {
color: #66aaff;
}
/* Keep primary button text white, even inside containers that restyle */
a.btn.btn-primary,
a.btn.btn-primary:visited,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
color: #fff;
text-decoration: none;
}
/* Chips / tags */
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
line-height: 1;
border: 1px solid #c9c9c9;
background: #f3f3f3;
margin-left: 6px;
}
.dark .tag { border-color: #3a3a3a; background: #1f1f1f; }
/* Specific variants */
.tag--tbs { /* trade/sell status */
font-weight: 500;
}
.tag--presale {
font-weight: 600;
}
/* --- Tag chips: improve dark-mode contrast --- */
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
line-height: 1;
border: 1px solid #c9c9c9;
background: #f3f3f3;
color: #222; /* ensure readable text in light mode */
margin-left: 6px;
}
.dark .tag {
border-color: #3a3a3a;
background: #1f1f1f;
color: #ececec; /* <-- key fix: readable text in dark mode */
}
/* Variants (subtle tints; still readable in dark) */
.tag--tbs { /* For Trade / For Sale / Trade or Sell */
font-weight: 500;
background: #e9eef9;
border-color: #c9d7f2;
color: #1a4fb4;
}
.dark .tag--tbs {
background: #12213d;
border-color: #2a4273;
color: #a8c3ff;
}
.tag--presale {
font-weight: 600;
background: #fff1d6;
border-color: #ffd79a;
color: #8a5600;
}
.dark .tag--presale {
background: #3a2a00;
border-color: #6a4b00;
color: #ffd38a;
}
---------------------------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Example:
*/
iframe, video {
max-width: 100%;
display: block;
}
/* ---------------------------------------------------------------------------
SECTION: Table Styling
Clean table layout for data-heavy content
📌 Use: wrap tabular data with