Files
vgui-cicd/static/custom/css/vorgaben-ui.css

819 lines
15 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* Vorgaben UI Custom Styles */
:root {
/* Professional color scheme for security standards */
--primary-color: #1e3a8a;
--primary-dark: #1e2f5a;
--primary-light: #3b82f6;
--secondary-color: #64748b;
--accent-color: #0ea5e9;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--info-color: #06b6d4;
/* Neutral colors */
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Border radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
}
/* Dark mode variables */
[data-theme="dark"] {
--bg-primary: var(--gray-900);
--bg-secondary: var(--gray-800);
--bg-tertiary: var(--gray-700);
--text-primary: var(--gray-100);
--text-secondary: var(--gray-300);
--text-muted: var(--gray-400);
--border-color: var(--gray-700);
--card-bg: var(--gray-800);
--navbar-bg: var(--gray-900);
}
/* Light mode variables */
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: var(--gray-50);
--bg-tertiary: var(--gray-100);
--text-primary: var(--gray-900);
--text-secondary: var(--gray-700);
--text-muted: var(--gray-500);
--border-color: var(--gray-200);
--card-bg: #ffffff;
--navbar-bg: #ffffff;
}
/* Base styles */
* {
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color var(--transition-normal), color var(--transition-normal);
line-height: 1.6;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
/* Navbar enhancements */
.navbar {
background-color: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
padding: var(--spacing-md) 0;
transition: all var(--transition-normal);
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color) !important;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.navbar-brand::before {
content: "🔒";
font-size: 1.25rem;
}
.navbar-nav .nav-link {
color: var(--text-secondary) !important;
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-md) !important;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
margin: 0 var(--spacing-xs);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--primary-color) !important;
background-color: var(--bg-secondary);
}
/* Search bar in navbar */
.navbar-search {
position: relative;
max-width: 400px;
flex: 1;
}
.navbar-search input {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-sm) var(--spacing-lg);
padding-right: 2.5rem;
width: 100%;
transition: all var(--transition-fast);
}
.navbar-search input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}
.navbar-search button {
position: absolute;
right: var(--spacing-xs);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
padding: var(--spacing-sm);
}
/* Dark mode toggle */
.theme-toggle {
background: none;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-sm);
cursor: pointer;
color: var(--text-secondary);
transition: all var(--transition-fast);
font-size: 1.25rem;
}
.theme-toggle:hover {
background-color: var(--bg-secondary);
color: var(--primary-color);
}
/* Breadcrumb */
.breadcrumb {
background-color: transparent;
padding: var(--spacing-md) 0;
margin-bottom: var(--spacing-lg);
}
.breadcrumb-item + .breadcrumb-item::before {
content: "";
color: var(--text-muted);
}
.breadcrumb-item a {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-item a:hover {
color: var(--primary-color);
}
/* Card enhancements */
.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
overflow: hidden;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
font-weight: 600;
padding: var(--spacing-lg);
}
.card-body {
padding: var(--spacing-lg);
}
/* Standard cards */
.standard-card {
border-left: 4px solid var(--primary-color);
margin-bottom: var(--spacing-lg);
}
.standard-card.inactive {
border-left-color: var(--gray-400);
opacity: 0.7;
}
.standard-card .card-title {
color: var(--text-primary);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.standard-card .standard-number {
color: var(--primary-color);
font-weight: 700;
font-family: var(--font-mono);
}
.standard-card .standard-meta {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: var(--spacing-md);
}
/* Badges */
.badge {
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.badge-relevance {
background-color: var(--info-color);
color: white;
}
.badge-status-active {
background-color: var(--success-color);
color: white;
}
.badge-status-inactive {
background-color: var(--gray-400);
color: white;
}
/* Buttons */
.btn {
font-weight: 500;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
border: none;
cursor: pointer;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.btn-outline:hover {
background-color: var(--bg-secondary);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Search enhancements */
.search-container {
max-width: 600px;
margin: 0 auto;
}
.search-form {
background-color: var(--card-bg);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
.search-results {
margin-top: var(--spacing-xl);
}
.result-item {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
transition: all var(--transition-fast);
}
.result-item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--primary-color);
}
/* Table of contents */
.toc {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
position: sticky;
top: var(--spacing-lg);
}
.toc h3 {
margin-top: 0;
margin-bottom: var(--spacing-md);
font-size: 1.125rem;
color: var(--text-primary);
}
.toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.toc li {
margin-bottom: var(--spacing-xs);
}
.toc a {
color: var(--text-secondary);
text-decoration: none;
display: block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.toc a:hover,
.toc a.active {
background-color: var(--bg-tertiary);
color: var(--primary-color);
}
/* Footer */
.footer {
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: var(--spacing-xl) 0;
margin-top: var(--spacing-2xl);
color: var(--text-muted);
text-align: center;
}
/* Responsive design */
@media (max-width: 1200px) {
.container-fluid {
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
}
@media (max-width: 992px) {
.navbar-search {
max-width: 300px;
}
.standard-card {
margin-bottom: var(--spacing-md);
}
.toc {
position: static;
margin-bottom: var(--spacing-lg);
}
}
@media (max-width: 768px) {
/* Navigation */
.navbar {
padding: var(--spacing-sm) 0;
}
.navbar-brand {
font-size: 1.25rem;
}
.navbar-search {
max-width: 100%;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.navbar-nav .nav-link {
padding: var(--spacing-sm) var(--spacing-md) !important;
margin: 0;
}
/* Typography */
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
/* Cards */
.card {
margin-bottom: var(--spacing-md);
}
.standard-card {
border-left-width: 3px;
}
.standard-card .card-body {
padding: var(--spacing-md);
}
/* Buttons */
.btn {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-lg);
font-size: 1rem;
}
/* Forms */
.form-control, .form-select {
font-size: 0.875rem;
}
/* Search */
.search-form {
padding: var(--spacing-md);
}
.result-item {
padding: var(--spacing-md);
}
/* Table of Contents */
.toc {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.toc ul {
font-size: 0.875rem;
}
/* Standard Detail Page */
.vorgabe-card .card-header {
padding: var(--spacing-md);
font-size: 0.875rem;
}
.vorgabe-card .card-body {
padding: var(--spacing-md);
}
.vorgabe-content {
font-size: 0.875rem;
}
/* Homepage */
.display-4 {
font-size: 2rem;
}
.statistics-card .h2 {
font-size: 1.5rem;
}
/* References Tree */
.tree-node-content {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
.tree-children {
padding-left: var(--spacing-lg);
}
.tree-node-meta {
display: none;
}
/* Breadcrumb */
.breadcrumb {
padding: var(--spacing-sm) 0;
font-size: 0.875rem;
}
/* Footer */
.footer {
padding: var(--spacing-lg) 0;
font-size: 0.875rem;
}
}
@media (max-width: 576px) {
/* Extra small screens */
.container-fluid {
padding-left: var(--spacing-sm);
padding-right: var(--spacing-sm);
}
/* Typography */
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
/* Cards */
.card {
border-radius: var(--radius-md);
}
.card-header {
padding: var(--spacing-sm) var(--spacing-md);
}
.card-body {
padding: var(--spacing-sm) var(--spacing-md);
}
/* Buttons */
.btn {
width: 100%;
margin-bottom: var(--spacing-xs);
}
.btn-group .btn {
width: auto;
}
/* Forms */
.row.g-3 > .col {
margin-bottom: var(--spacing-md);
}
/* Homepage */
.display-4 {
font-size: 1.75rem;
}
.hero-section .btn-lg {
width: 100%;
margin-bottom: var(--spacing-sm);
}
.statistics-row .col-6 {
margin-bottom: var(--spacing-md);
}
/* Search */
.search-page .row {
flex-direction: column;
}
.search-page .col-lg-4 {
order: 2;
}
.search-page .col-lg-8 {
order: 1;
}
/* Standard Detail */
.standard-detail-page .row {
flex-direction: column;
}
.standard-detail-page .col-lg-8 {
order: 1;
}
.standard-detail-page .col-lg-4 {
order: 2;
}
/* References */
.references-page .row {
flex-direction: column;
}
.references-page .col-lg-8 {
order: 1;
}
.references-page .col-lg-4 {
order: 2;
}
/* Tree navigation */
.tree-node-content {
flex-wrap: wrap;
}
.tree-link {
min-width: 0;
flex: 1;
}
/* Badges */
.badge {
font-size: 0.625rem;
padding: 0.125rem 0.375rem;
}
/* Lists */
.list-group-item {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
/* Tables */
.table {
font-size: 0.75rem;
}
.table th,
.table td {
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* Touch-friendly adjustments for mobile */
@media (hover: none) and (pointer: coarse) {
.card:hover {
transform: none;
}
.btn:hover {
transform: none;
}
.tree-node-content:hover {
background-color: transparent;
border-color: transparent;
}
.navbar-nav .nav-link:hover {
background-color: transparent;
}
/* Increase touch targets */
.btn {
min-height: 44px;
min-width: 44px;
}
.tree-node-content {
min-height: 44px;
}
.navbar-nav .nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
.navbar {
padding: var(--spacing-xs) 0;
}
.navbar-brand {
font-size: 1.125rem;
}
h1 { font-size: 1.625rem; }
.card {
margin-bottom: var(--spacing-sm);
}
.search-form {
padding: var(--spacing-sm) var(--spacing-md);
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.navbar-brand::before {
image-rendering: -webkit-optimize-contrast;
}
.tree-toggle {
font-weight: 300;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.card:hover {
transform: none;
}
.btn:hover {
transform: none;
}
}
/* Loading states */
.loading {
opacity: 0.6;
pointer-events: none;
}
.spinner {
border: 2px solid var(--border-color);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Print styles */
@media print {
.navbar,
.theme-toggle,
.btn,
.toc {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.card {
border: 1px solid #ccc !important;
box-shadow: none !important;
break-inside: avoid;
}
}