/* FABRIC Artifact Manager — main styling */ /* ===== Theme tokens ===== Light is the default. The dark block is applied by the theme switcher in base.html, which sets data-bs-theme on ("light" or "dark", with "system" resolved to one of the two). Bootstrap 5.3 reads that same attribute for its own components, so these tokens only need to cover the custom surfaces defined further down this file. Filled brand buttons keep their literal colors below rather than becoming tokens: a FABRIC-blue button with white text reads correctly on either ground, and re-tinting it per theme would lose the brand. Only text, surface and border uses flip. */ :root { --am-surface: #fff; --am-surface-2: #f5f8fa; --am-surface-3: #f8f9fa; --am-surface-hover: #f8fafb; --am-border: #e2e8f0; --am-border-subtle: #f0f2f5; --am-border-input: #d1d9e0; --am-border-callout: #e9ecef; --am-text: #555; --am-text-strong: #374955; --am-text-muted: #838385; --am-text-subtle: #6c757d; --am-danger-text: #b00020; --am-danger-bg: rgba(176, 0, 32, 0.1); --am-success-text: #008e7a; --am-success-bg: rgba(0, 142, 122, 0.15); --am-link: #5798bc; --am-link-hover: #1f6a8c; --am-focus-ring: rgba(87, 152, 188, 0.15); --am-badge-bg: #eef5fa; --am-badge-text: #1f6a8c; --am-badge-project-bg: #e8f5f2; --am-badge-project-text: #008e7a; --am-bar-bg: #374955; --am-code-bg: #374955; --am-code-text: #e8e8e8; --am-card-shadow: 0 4px 16px rgba(55, 73, 85, 0.1); } [data-bs-theme="dark"] { /* Bootstrap's own dark defaults, re-tinted toward the FABRIC dark (#374955) so framework components sit on the same ground as ours. */ --bs-body-bg: #161d23; --bs-body-color: #d6dee5; --bs-emphasis-color: #f2f6f9; --bs-border-color: #35444f; --am-surface: #1e272e; --am-surface-2: #253038; --am-surface-3: #253038; --am-surface-hover: #2a3742; --am-border: #35444f; --am-border-subtle: #2b3841; --am-border-input: #3d4d59; --am-border-callout: #35444f; --am-text: #c3ced7; --am-text-strong: #e6edf3; --am-text-muted: #94a5b2; --am-text-subtle: #8fa1ae; /* The brand red and green are too dark to read as text on a dark ground; these lighten only the text uses, never the filled buttons. */ --am-danger-text: #ff7a8a; --am-danger-bg: rgba(176, 0, 32, 0.25); --am-success-text: #3ecfb4; --am-success-bg: rgba(0, 142, 122, 0.22); --am-link: #8ac9ef; --am-link-hover: #b6ddf7; --am-focus-ring: rgba(138, 201, 239, 0.25); --am-badge-bg: rgba(87, 152, 188, 0.2); --am-badge-text: #a8d3ee; --am-badge-project-bg: rgba(0, 142, 122, 0.22); --am-badge-project-text: #4fd1b6; --am-code-bg: #131a20; --am-code-text: #d6dee5; --am-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } /* Scoped to rather than sharing the block above: the navbar pins its own subtree to data-bs-theme="dark" so its dropdown stays dark in both site themes, which would otherwise re-resolve --am-bar-bg and darken the bar in light mode. */ :root[data-bs-theme="dark"] { --am-bar-bg: #22303a; } /* Typography */ body { font-family: 'Roboto', sans-serif; position: relative; min-height: 100%; padding-bottom: 8em; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; } html { height: 100%; box-sizing: border-box; } main { margin: 2rem; bottom: 5rem; } /* Form validation errors */ ul.errorlist { margin: 0; padding: 0; } .errorlist li { border: 1px solid var(--am-danger-text); color: var(--am-danger-text); background: var(--am-danger-bg); list-style-position: inside; display: block; font-size: 1.2em; margin: 0 0 3px; padding: 4px 5px; text-align: center; border-radius: 3px; } .errorlist { display: none; } input:not([type="submit"], [type="checkbox"]), textarea, select { width: 100%; padding: 5px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .success { background-color: var(--am-success-bg); padding: 10px; text-align: center; color: var(--am-success-text); border: 1px solid var(--am-success-text); border-radius: 3px; } /* Layout */ .profile-body { margin: 1rem 0; padding-left: 2rem; } .message-body { margin-top: 1rem; } .profile-body .active { background-color: var(--am-surface); } .list-group-item.active { background-color: #5798bc; border: none; } #profile-list-tab { margin-top: 5.5rem; } h4[aria-expanded="true"] .fa-plus { display: none; } h4[aria-expanded="false"] .fa-minus { display: none; } /* Preferences form */ .preference-form p { margin: 0.8rem 0; } .preference-form p label { font-size: 1.25rem; font-weight: 500; margin: 0; } .preference-form ul { list-style-type: none; display: inline; } .preference-form ul li { display: inline; } .preference-form ul li label { padding-right: 1rem; } #id_role, #id_show_uuid { padding-left: 0; } /* Tooltips */ .tooltip-inner { max-width: 25rem; text-align: left; border-radius: 0.25rem; } /* Buttons and messages */ .message-btn { padding: 0.35rem 1rem; margin-right: 0.5rem; } .unlink { color: #fff !important; text-decoration: none; } .unlink:hover, .unlink:focus { color: #fff !important; text-decoration: none; } .courier-font-link { font-family: Courier; } /* Links — FABRIC primary color */ .card-header a { color: var(--am-link); } a { color: var(--am-link); text-decoration: none; } a:hover { color: var(--am-link-hover) !important; } .btn:hover { color: #fff !important; } /* Callouts */ .bd-callout { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--am-border-callout); border-left-width: 0.25rem; border-radius: 0.25rem; } .bd-callout-info { border-left-color: var(--am-link); } /* Button colors — FABRIC palette */ .btn-primary { background-color: #5798bc !important; border-color: #5798bc !important; } .btn-outline-primary:hover { background-color: #5798bc !important; color: #fff !important; } .btn-outline-primary { border-color: var(--am-link) !important; color: var(--am-link) !important; } .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { background-color: #5798bc !important; } .btn-secondary { background-color: #838385 !important; border-color: #838385 !important; } .btn-success { background-color: #008e7a !important; border-color: #008e7a !important; } .btn-outline-success { border-color: var(--am-success-text) !important; color: var(--am-success-text) !important; } .btn-outline-success:hover { background-color: #008e7a !important; color: #fff !important; } .btn-danger { background-color: #b00020 !important; border-color: #b00020 !important; } .btn-outline-danger { border-color: var(--am-danger-text) !important; color: var(--am-danger-text) !important; } .btn-outline-danger:hover { background-color: #b00020 !important; color: #fff !important; } .btn-warning { background-color: #ff8542 !important; border-color: #ff8542 !important; color: #fff !important; } .btn-info { background-color: #a8c9dc !important; border-color: #a8c9dc !important; color: #fff !important; } .text-info { color: #a8c9dc !important; } /* Alerts */ .alert { width: 100%; border-radius: 0.5rem; } /* Navbar */ .navbar-fabric { background-color: var(--am-bar-bg); } .navbar { padding-top: 0 !important; padding-bottom: 0 !important; --bs-navbar-padding-y: 0 !important; } .navbar .navbar-brand { color: #fff !important; } .navbar .nav-link { color: rgba(255, 255, 255, 0.85) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; } /* Utilities */ .sm-font { font-size: 0.8rem; } .badge-primary { background-color: #5798bc !important; } /* ===== Shared component styles ===== */ /* Page headers */ .page-header { margin-bottom: 1.25rem; } .page-header h2, .page-header h3 { margin-bottom: 0.25rem; } .page-header .subtitle { font-size: 0.9rem; color: var(--am-text-muted); } /* Search bar */ .search-bar { border-radius: 0.5rem; border: 1px solid var(--am-border-input); padding: 0.6rem 1rem; font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .search-bar:focus { border-color: var(--am-link); box-shadow: 0 0 0 3px var(--am-focus-ring); outline: none; } /* Fabric-branded buttons */ .btn-fabric { border-radius: 0.5rem; font-weight: 500; padding: 0.5rem 1.25rem; transition: all 0.2s ease; } /* Detail cards */ .detail-card { background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.5rem; } .detail-row { display: flex; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--am-border-subtle); align-items: baseline; } .detail-row:last-child { border-bottom: none; } .detail-row:hover { background: var(--am-surface-hover); } .detail-label { flex: 0 0 160px; font-weight: 500; color: var(--am-text-strong); font-size: 0.9rem; } .detail-value { flex: 1; color: var(--am-text); } /* Form cards */ .form-card { background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 0.75rem; padding: 1.5rem 2rem; margin-bottom: 1.5rem; } .form-card p { margin-bottom: 1rem; } .form-card label { font-weight: 500; color: var(--am-text-strong); margin-bottom: 0.25rem; display: block; } .form-card input, .form-card textarea, .form-card select { border-radius: 0.4rem; border: 1px solid var(--am-border-input); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: var(--am-link); box-shadow: 0 0 0 3px var(--am-focus-ring); } .form-card hr { border-color: var(--am-border); margin: 1.25rem 0; } .form-divider { border: none; border-top: 1px solid var(--am-border); margin: 1.25rem 0; } label.required::after { content: ' * required'; color: var(--am-danger-text); font-size: small; font-weight: 400; } /* Soft table */ .soft-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--am-border); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.5rem; } .soft-table thead th { background: var(--am-surface-2); color: var(--am-text-strong); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.75rem 1rem; border-bottom: 2px solid var(--am-border); } .soft-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--am-border-subtle); color: var(--am-text); font-size: 0.92rem; } .soft-table tbody tr:last-child td { border-bottom: none; } .soft-table tbody tr:hover { background: var(--am-surface-hover); } /* Pagination bar */ .pagination-bar { background: var(--am-surface-3); border-radius: 0.75rem; padding: 0.75rem 1.25rem; margin-top: 0.5rem; } .pagination-bar .btn { border-radius: 0.5rem; } .results-count { font-size: 0.9rem; color: var(--am-text-subtle); font-weight: 500; } /* Empty state */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--am-text-muted); } .empty-state i { display: block; margin-bottom: 0.75rem; } /* Action button row */ .action-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* Artifact badges */ .pub-badge { display: inline-block; background: var(--am-badge-bg); color: var(--am-badge-text); font-size: 0.8rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 1rem; margin-right: 0.35rem; } .pub-badge a { color: inherit !important; text-decoration: none; } .pub-badge-project { background: var(--am-badge-project-bg); color: var(--am-badge-project-text); } /* Publication/artifact cards (list views) */ .pub-card { background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: box-shadow 0.2s ease, transform 0.15s ease; } .pub-card:hover { box-shadow: var(--am-card-shadow); transform: translateY(-1px); } .pub-title { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; } .pub-title a { color: var(--am-link-hover); text-decoration: none; } .pub-title a:hover { color: var(--am-link) !important; } .pub-meta { color: var(--am-text-subtle); font-size: 0.9rem; line-height: 1.5; } /* Code block styling */ .code-block { background: var(--am-code-bg); border-radius: 0.75rem; padding: 1.25rem 1.5rem; overflow-x: auto; } .code-block code { color: var(--am-code-text); font-size: 0.9rem; } /* Debug output block — white background, monospace JSON */ .debug-block { background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 0.75rem; padding: 1.25rem 1.5rem; overflow-x: auto; } .debug-block pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; color: var(--am-text-strong); } /* ===== Theme switcher (navbar) ===== Selection state is driven entirely by data-am-theme-choice on , which the head script sets before first paint. Nothing here depends on JavaScript having run, so the menu never shows a stale choice. */ .theme-toggle { --bs-btn-padding-x: 0.6rem; line-height: 1.5; } [data-theme-icon] { display: none; } :root[data-am-theme-choice="light"] [data-theme-icon="light"], :root[data-am-theme-choice="dark"] [data-theme-icon="dark"], :root[data-am-theme-choice="system"] [data-theme-icon="system"] { display: inline-block; } .dropdown-item[data-set-theme] { display: flex; align-items: center; } :root[data-am-theme-choice="light"] .dropdown-item[data-set-theme="light"], :root[data-am-theme-choice="dark"] .dropdown-item[data-set-theme="dark"], :root[data-am-theme-choice="system"] .dropdown-item[data-set-theme="system"] { background-color: #5798bc; color: #fff; } .theme-check { margin-left: auto; visibility: hidden; } :root[data-am-theme-choice="light"] .dropdown-item[data-set-theme="light"] .theme-check, :root[data-am-theme-choice="dark"] .dropdown-item[data-set-theme="dark"] .theme-check, :root[data-am-theme-choice="system"] .dropdown-item[data-set-theme="system"] .theme-check { visibility: visible; }