giles
5dd1161816
- Move .sx-fade-in and .sx-loading-btn CSS from inline (style) tags to basics.css so they go through the on-demand CSS registry - Pretty-print sx source in wire response display (not all on one line) - Change sx logo from </> icon to (</>) text Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
52 lines
1.3 KiB
CSS
52 lines
1.3 KiB
CSS
:root {
|
|
--brand-color: var(--ghost-accent-color, #ff572f);
|
|
--primary-text-color: #333;
|
|
--secondary-text-color: #999;
|
|
--white-color: #fff;
|
|
--lighter-gray-color: #f6f6f6;
|
|
--light-gray-color: #e6e6e6;
|
|
--mid-gray-color: #ccc;
|
|
--dark-gray-color: #444;
|
|
--darker-gray-color: #1a1a1a;
|
|
--black-color: #000;
|
|
--green-color: #28a745;
|
|
--orange-color: #ffc107;
|
|
--red-color: #dc3545;
|
|
--facebook-color: #3b5998;
|
|
--twitter-color: #1da1f2;
|
|
--rss-color: #f26522;
|
|
--animation-base: ease-in-out;
|
|
--font-sans: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
|
--font-serif: Lora, Times, serif;
|
|
--navbar-height: 80px;
|
|
--content-font-size: 1.7rem;
|
|
--header-spacing: 6vmin;
|
|
}
|
|
|
|
.is-head-brand {
|
|
--header-spacing: 8vmin;
|
|
}
|
|
|
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* sx example demos — on-demand CSS for interactive examples */
|
|
@keyframes sxFadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.sx-fade-in {
|
|
animation: sxFadeIn 0.5s ease-out;
|
|
}
|
|
.sx-loading-btn.sx-request {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
.sx-loading-btn.sx-request .sx-spinner {
|
|
display: inline-block;
|
|
}
|
|
.sx-loading-btn .sx-spinner {
|
|
display: none;
|
|
}
|