c48cd87d16
Some checks failed
Build Multi-Arch Container Image / test (push) Has been cancelled
Build Multi-Arch Container Image / build-and-push (push) Has been cancelled
Build Multi-Arch Container Image / security-scan (push) Has been cancelled
Build Multi-Arch Container Image / deploy-staging (push) Has been cancelled
Build Multi-Arch Container Image / deploy-production (push) Has been cancelled
Nightly Build / notify-results (push) Has been cancelled
Nightly Build / check-changes (push) Has been cancelled
Nightly Build / nightly-tests (3.10) (push) Has been cancelled
Nightly Build / nightly-tests (3.11) (push) Has been cancelled
Nightly Build / nightly-tests (3.12) (push) Has been cancelled
Nightly Build / nightly-tests (3.8) (push) Has been cancelled
Nightly Build / nightly-tests (3.9) (push) Has been cancelled
Nightly Build / build-nightly (push) Has been cancelled
Nightly Build / performance-test (push) Has been cancelled
Nightly Build / security-scan-nightly (push) Has been cancelled
Nightly Build / cleanup-old-nightlies (push) Has been cancelled
686 lines
14 KiB
CSS
686 lines
14 KiB
CSS
/* UnitForge CSS Styles */
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--primary-color: #0d6efd;
|
|
--secondary-color: #6c757d;
|
|
--success-color: #198754;
|
|
--danger-color: #dc3545;
|
|
--warning-color: #ffc107;
|
|
--info-color: #0dcaf0;
|
|
--light-color: #f8f9fa;
|
|
--dark-color: #212529;
|
|
--border-radius: 0.375rem;
|
|
--box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
--box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
--body-bg: #ffffff;
|
|
--surface-bg: #ffffff;
|
|
--surface-alt-bg: #f8f9fa;
|
|
--surface-border: #dee2e6;
|
|
--text-color: #212529;
|
|
--muted-color: #6c757d;
|
|
--muted-on-dark-color: #cbd5e0;
|
|
--divider-color: #f1f3f4;
|
|
--hero-bg-start: #f8f9fa;
|
|
--hero-bg-stop: #e9ecef;
|
|
--code-bg: #1a202c;
|
|
--code-color: #f7fafc;
|
|
--placeholder-color: #6c757d;
|
|
--input-bg: #ffffff;
|
|
--input-text-color: #212529;
|
|
--theme-color: #0d6efd;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--primary-color: #3b82f6;
|
|
--secondary-color: #94a3b8;
|
|
--success-color: #34d399;
|
|
--danger-color: #f87171;
|
|
--warning-color: #facc15;
|
|
--info-color: #38bdf8;
|
|
--light-color: #1f2937;
|
|
--dark-color: #e2e8f0;
|
|
--body-bg: #0f172a;
|
|
--surface-bg: #1e293b;
|
|
--surface-alt-bg: #16213b;
|
|
--surface-border: #334155;
|
|
--text-color: #e2e8f0;
|
|
--muted-color: #94a3b8;
|
|
--muted-on-dark-color: #a8b4cc;
|
|
--divider-color: #273449;
|
|
--hero-bg-start: #111c2f;
|
|
--hero-bg-stop: #1e293b;
|
|
--code-bg: #111c2f;
|
|
--code-color: #e2e8f0;
|
|
--placeholder-color: #94a3b8;
|
|
--input-bg: #16213b;
|
|
--input-text-color: #e2e8f0;
|
|
--theme-color: #0b1120;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) {
|
|
color-scheme: dark;
|
|
--primary-color: #3b82f6;
|
|
--secondary-color: #94a3b8;
|
|
--success-color: #34d399;
|
|
--danger-color: #f87171;
|
|
--warning-color: #facc15;
|
|
--info-color: #38bdf8;
|
|
--light-color: #1f2937;
|
|
--dark-color: #e2e8f0;
|
|
--body-bg: #0f172a;
|
|
--surface-bg: #1e293b;
|
|
--surface-alt-bg: #16213b;
|
|
--surface-border: #334155;
|
|
--text-color: #e2e8f0;
|
|
--muted-color: #94a3b8;
|
|
--muted-on-dark-color: #a8b4cc;
|
|
--divider-color: #273449;
|
|
--hero-bg-start: #111c2f;
|
|
--hero-bg-stop: #1e293b;
|
|
--code-bg: #111c2f;
|
|
--code-color: #e2e8f0;
|
|
--placeholder-color: #94a3b8;
|
|
--input-bg: #16213b;
|
|
--input-text-color: #e2e8f0;
|
|
--theme-color: #0b1120;
|
|
}
|
|
}
|
|
|
|
/* General Styles */
|
|
|
|
/* Navbar link contrast fix on primary bg */
|
|
.navbar-dark.bg-primary .navbar-nav .nav-link {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
.navbar-dark.bg-primary .navbar-nav .nav-link:hover,
|
|
.navbar-dark.bg-primary .navbar-nav .nav-link:focus,
|
|
.navbar-dark.bg-primary .navbar-nav .nav-link.active {
|
|
color: #ffffff;
|
|
}
|
|
body {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
background-color: var(--body-bg);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.hero-section {
|
|
background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-stop) 100%);
|
|
border-bottom: 1px solid var(--surface-border);
|
|
}
|
|
|
|
/* Feature Icons */
|
|
.feature-icon {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Card Hover Effects */
|
|
.hover-lift {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--box-shadow-lg);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--surface-bg);
|
|
border-color: var(--surface-border);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* Unit Type Badges */
|
|
.unit-type-badge {
|
|
background: var(--surface-alt-bg);
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: var(--border-radius);
|
|
padding: 0.75rem 1rem;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.unit-type-badge:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Code Preview */
|
|
.code-preview {
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow-lg);
|
|
}
|
|
|
|
.code-preview pre {
|
|
margin: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-preview code {
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Fix contrast for dark backgrounds */
|
|
.bg-dark pre,
|
|
.bg-dark code {
|
|
color: #f8f9fa !important;
|
|
}
|
|
|
|
.card.bg-dark .card-body pre,
|
|
.card.bg-dark .card-body code {
|
|
color: #f8f9fa !important;
|
|
}
|
|
|
|
/* Override Bootstrap bg-dark for better contrast */
|
|
.bg-dark {
|
|
background-color: #1a202c !important;
|
|
color: #f7fafc !important;
|
|
}
|
|
|
|
.bg-dark pre,
|
|
.bg-dark code {
|
|
color: #f7fafc !important;
|
|
}
|
|
|
|
.bg-light {
|
|
background-color: var(--surface-alt-bg) !important;
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
/* Muted text helpers */
|
|
.text-muted {
|
|
color: var(--muted-color) !important;
|
|
}
|
|
|
|
.card .text-muted,
|
|
.hero-section .text-muted {
|
|
color: var(--muted-color) !important;
|
|
}
|
|
|
|
.bg-dark .text-muted,
|
|
.card.bg-dark .text-muted,
|
|
footer.bg-dark .text-muted,
|
|
.modal.bg-dark .text-muted,
|
|
.modal-content.bg-dark .text-muted,
|
|
.bg-dark .form-text.text-muted {
|
|
color: var(--muted-on-dark-color) !important;
|
|
}
|
|
|
|
/* Editor Specific Styles */
|
|
.unit-type-fields {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.unit-type-fields.d-none {
|
|
display: none !important;
|
|
}
|
|
|
|
#editor {
|
|
font-family: "Courier New", Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
border: none !important;
|
|
resize: none;
|
|
outline: none;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#editor:focus {
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Validation Styles */
|
|
.validation-error {
|
|
background-color: #f8d7da;
|
|
border-color: #f5c6cb;
|
|
color: #721c24;
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--danger-color);
|
|
}
|
|
|
|
.validation-warning {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
color: #856404;
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--warning-color);
|
|
}
|
|
|
|
.validation-success {
|
|
background-color: #d1e7dd;
|
|
border-color: #badbcc;
|
|
color: #0f5132;
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--success-color);
|
|
}
|
|
|
|
.validation-info {
|
|
background-color: #cff4fc;
|
|
border-color: #b8daff;
|
|
color: #055160;
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--info-color);
|
|
}
|
|
|
|
/* Info Items */
|
|
.info-item {
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Help Content */
|
|
.help-content {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.help-item {
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
/* Template Cards */
|
|
.template-card {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
}
|
|
|
|
.template-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--box-shadow-lg);
|
|
}
|
|
|
|
.template-card .card-header {
|
|
background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.template-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.template-tag {
|
|
background: var(--surface-alt-bg);
|
|
color: var(--text-color);
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Navigation Pills */
|
|
.nav-pills .nav-link {
|
|
color: var(--secondary-color);
|
|
border-radius: var(--border-radius);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-pills .nav-link.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.nav-pills .nav-link:hover:not(.active) {
|
|
background-color: var(--surface-alt-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text-color);
|
|
border-color: var(--surface-border);
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--placeholder-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.form-control:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text-color);
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text-color);
|
|
}
|
|
|
|
/* Button Styles */
|
|
.btn {
|
|
border-radius: var(--border-radius);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0b5ed7;
|
|
border-color: #0a58ca;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-content {
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow-lg);
|
|
background-color: var(--surface-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--surface-border);
|
|
background: var(--surface-alt-bg);
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid var(--surface-border);
|
|
background: var(--surface-alt-bg);
|
|
}
|
|
|
|
/* Loading States */
|
|
.spinner-border {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
/* Parameter Form Styles */
|
|
.parameter-group {
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
background: var(--surface-alt-bg);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--surface-border);
|
|
}
|
|
|
|
.parameter-label {
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.parameter-description {
|
|
font-size: 0.875rem;
|
|
color: var(--secondary-color);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.parameter-required {
|
|
color: var(--danger-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.parameter-optional {
|
|
color: var(--secondary-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Preview Code Block */
|
|
.preview-code {
|
|
background: var(--code-bg);
|
|
color: var(--code-color);
|
|
border-radius: var(--border-radius);
|
|
padding: 1rem;
|
|
font-family: "Courier New", Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.display-4 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.nav-pills {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-pills .nav-link {
|
|
text-align: center;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.container-fluid .row > div {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.modal-dialog {
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Animation Classes */
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.text-monospace {
|
|
font-family: "Courier New", Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
.bg-gradient {
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.15),
|
|
rgba(255, 255, 255, 0)
|
|
);
|
|
}
|
|
|
|
.border-start-primary {
|
|
border-left: 4px solid var(--primary-color) !important;
|
|
}
|
|
|
|
.border-start-success {
|
|
border-left: 4px solid var(--success-color) !important;
|
|
}
|
|
|
|
.border-start-warning {
|
|
border-left: 4px solid var(--warning-color) !important;
|
|
}
|
|
|
|
.border-start-danger {
|
|
border-left: 4px solid var(--danger-color) !important;
|
|
}
|
|
|
|
/* Outline button contrast helpers */
|
|
.btn-outline-secondary {
|
|
color: var(--muted-color);
|
|
border-color: var(--muted-color);
|
|
}
|
|
|
|
.btn-outline-secondary:hover,
|
|
.btn-outline-secondary:focus {
|
|
color: #ffffff;
|
|
background-color: var(--muted-color);
|
|
border-color: var(--muted-color);
|
|
}
|
|
|
|
.card.bg-dark .btn-outline-secondary,
|
|
.bg-dark .btn-outline-secondary {
|
|
color: #e2e8f0;
|
|
border-color: #e2e8f0;
|
|
}
|
|
|
|
.card.bg-dark .btn-outline-secondary:hover,
|
|
.bg-dark .btn-outline-secondary:hover,
|
|
.card.bg-dark .btn-outline-secondary:focus,
|
|
.bg-dark .btn-outline-secondary:focus {
|
|
color: #1a202c;
|
|
background-color: #e2e8f0;
|
|
border-color: #e2e8f0;
|
|
}
|
|
|
|
.card.bg-dark a,
|
|
.bg-dark a {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.card.bg-dark a:hover,
|
|
.bg-dark a:hover,
|
|
.card.bg-dark a:focus,
|
|
.bg-dark a:focus {
|
|
color: #bfdbfe;
|
|
}
|
|
|
|
.card.bg-dark .btn-outline-primary,
|
|
.bg-dark .btn-outline-primary {
|
|
color: #e2e8f0;
|
|
border-color: #93c5fd;
|
|
}
|
|
|
|
.card.bg-dark .btn-outline-primary:hover,
|
|
.bg-dark .btn-outline-primary:hover,
|
|
.card.bg-dark .btn-outline-primary:focus,
|
|
.bg-dark .btn-outline-primary:focus {
|
|
color: #1a202c;
|
|
background-color: #93c5fd;
|
|
border-color: #93c5fd;
|
|
}
|
|
|
|
.link-contrast {
|
|
color: #93c5fd !important;
|
|
}
|
|
|
|
.link-contrast:hover,
|
|
.link-contrast:focus {
|
|
color: #bfdbfe !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Footer OSI logo */
|
|
footer .badge.bg-success {
|
|
position: relative;
|
|
padding-left: 1.5rem;
|
|
}
|
|
footer .badge.bg-success::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0.35rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: url('/static/img/osi-logo.svg') no-repeat center / contain;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.navbar,
|
|
.modal,
|
|
.btn,
|
|
footer {
|
|
display: none !important;
|
|
}
|
|
|
|
.container {
|
|
width: 100% !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid #000 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
white-space: pre-wrap !important;
|
|
word-break: break-all !important;
|
|
}
|
|
}
|