Slawomir Koszewski
4fe1ece3a3
Major changes: - Move server.js to project root for cleaner architecture - Remove server tests due to CRA Jest configuration conflicts - Fix React component tests (clipboard API and user interaction issues) - Optimize Dockerfile to copy only essential files (server.js, build/) - Fix upload script to only upload JSON data (no JMESPath expression) - Improve reload button UI to avoid layout shifts - Update demo script with accurate commands and Docker support All 17 React tests now pass. Server structure simplified and consistent.
676 lines
17 KiB
CSS
676 lines
17 KiB
CSS
/* JMESPath Testing Tool Custom Styles */
|
|
|
|
:root {
|
|
/* Light theme colors */
|
|
--bg-primary-light: #ffffff;
|
|
--bg-secondary-light: #f8f9fa;
|
|
--text-primary-light: #212529;
|
|
--text-secondary-light: #495057;
|
|
--text-muted-light: #6c757d;
|
|
--border-light: #dee2e6;
|
|
--border-input-light: #ced4da;
|
|
--accent-color: #007bff;
|
|
--accent-shadow: rgba(0, 123, 255, 0.25);
|
|
|
|
/* Dark theme colors */
|
|
--bg-primary-dark: #1a1a1a;
|
|
--bg-secondary-dark: #2d2d2d;
|
|
--bg-card-dark: #323232;
|
|
--text-primary-dark: #ffffff;
|
|
--text-secondary-dark: #e9ecef;
|
|
--text-muted-dark: #adb5bd;
|
|
--border-dark: #495057;
|
|
--border-input-dark: #6c757d;
|
|
|
|
/* State colors */
|
|
--success-bg-light: #d4edda;
|
|
--success-border-light: #c3e6cb;
|
|
--success-text-light: #155724;
|
|
--success-bg-dark: #1e4a1e;
|
|
--success-border-dark: #2c6d2c;
|
|
--success-text-dark: #d4edda;
|
|
|
|
--error-bg-light: #f8d7da;
|
|
--error-border-light: #f5c6cb;
|
|
--error-text-light: #721c24;
|
|
--error-bg-dark: #4a1e1e;
|
|
--error-border-dark: #6d2c2c;
|
|
--error-text-dark: #f8d7da;
|
|
|
|
/* Button variants */
|
|
--btn-success: #28a745;
|
|
--btn-info: #17a2b8;
|
|
--btn-primary: #007bff;
|
|
--btn-danger: #dc3545;
|
|
--btn-secondary: #6c757d;
|
|
|
|
/* Common transitions */
|
|
--transition-fast: 0.2s ease;
|
|
--transition-normal: 0.3s ease;
|
|
|
|
/* Font families */
|
|
--font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
--font-mono: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
}
|
|
|
|
/* Base font family */
|
|
body {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
transition: background-color var(--transition-normal), color var(--transition-normal);
|
|
}
|
|
|
|
/* Layout structure */
|
|
.vh-100 {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Header section styling - more compact */
|
|
.header-section {
|
|
/* Removed gradient background to fix text visibility */
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Custom card styling */
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Input and textarea styling */
|
|
.jmespath-input, .json-input, .result-output {
|
|
font-family: var(--font-mono);
|
|
font-weight: 400;
|
|
transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
|
|
}
|
|
|
|
.jmespath-input {
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
background-color: var(--bg-primary-light);
|
|
border: 1px solid var(--border-input-light);
|
|
color: var(--text-secondary-light);
|
|
}
|
|
|
|
.json-input, .result-output {
|
|
font-size: 13px;
|
|
background-color: var(--bg-secondary-light);
|
|
border: 1px solid var(--border-light);
|
|
color: var(--text-secondary-light);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn {
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Footer styling */
|
|
footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--text-muted-light);
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
footer a:hover {
|
|
color: var(--text-secondary-light);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.header-section {
|
|
padding: 1.5rem 0 !important;
|
|
}
|
|
|
|
.display-4 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-sm {
|
|
font-size: 0.8rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.card-body textarea {
|
|
min-height: 300px !important;
|
|
}
|
|
}
|
|
|
|
/* Manual theme overrides */
|
|
.theme-light {
|
|
/* Force light theme regardless of system preference */
|
|
background-color: #ffffff !important;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.theme-light .header-section {
|
|
background-color: transparent !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.theme-light .card {
|
|
background-color: #ffffff !important;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.theme-light .card-header {
|
|
background-color: #f8f9fa !important;
|
|
border-bottom: 2px solid #dee2e6 !important;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.theme-light .jmespath-input {
|
|
background-color: #ffffff;
|
|
border: 1px solid #ced4da;
|
|
color: #495057;
|
|
}
|
|
|
|
.theme-light .json-input,
|
|
.theme-light .result-output {
|
|
background-color: #f8f9fa !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
color: #495057 !important;
|
|
}
|
|
|
|
/* Success and Error state overrides - must come after base input rules */
|
|
.theme-light .jmespath-input.success {
|
|
background-color: #d4edda !important;
|
|
border-color: #c3e6cb !important;
|
|
color: #155724 !important;
|
|
}
|
|
|
|
.theme-light .jmespath-input.error {
|
|
background-color: #f8d7da !important;
|
|
border-color: #f5c6cb !important;
|
|
color: #721c24 !important;
|
|
}
|
|
|
|
.theme-light .text-muted {
|
|
color: #6c757d !important;
|
|
}
|
|
|
|
.theme-light .jmespath-input:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 0.2rem var(--accent-shadow);
|
|
}
|
|
|
|
.theme-light .jmespath-input::placeholder {
|
|
color: var(--text-muted-light) !important;
|
|
}
|
|
|
|
.theme-light .json-input::placeholder,
|
|
.theme-light .result-output::placeholder {
|
|
color: var(--text-muted-light) !important;
|
|
}
|
|
|
|
.theme-light .json-input:focus,
|
|
.theme-light .result-output:focus {
|
|
background-color: var(--bg-primary-light) !important;
|
|
border-color: var(--accent-color) !important;
|
|
color: var(--text-secondary-light) !important;
|
|
box-shadow: 0 0 0 0.2rem var(--accent-shadow) !important;
|
|
}
|
|
|
|
.theme-light .output-section .form-control {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
.theme-light .alert-danger {
|
|
background-color: #f8d7da !important;
|
|
border-color: #f5c6cb !important;
|
|
color: #721c24 !important;
|
|
}
|
|
|
|
.theme-light .alert-success {
|
|
background-color: #d4edda !important;
|
|
border-color: #c3e6cb !important;
|
|
color: #155724 !important;
|
|
}
|
|
|
|
.theme-light .btn-primary {
|
|
background-color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-secondary {
|
|
color: var(--btn-secondary) !important;
|
|
border-color: var(--btn-secondary) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-secondary:hover {
|
|
background-color: var(--btn-secondary) !important;
|
|
border-color: var(--btn-secondary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-success {
|
|
color: var(--btn-success) !important;
|
|
border-color: var(--btn-success) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-success:hover {
|
|
background-color: var(--btn-success) !important;
|
|
border-color: var(--btn-success) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-info {
|
|
color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-info:hover {
|
|
background-color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-primary {
|
|
color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-primary:hover {
|
|
background-color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-danger {
|
|
color: var(--btn-danger) !important;
|
|
border-color: var(--btn-danger) !important;
|
|
}
|
|
|
|
.theme-light .btn-outline-danger:hover {
|
|
background-color: var(--btn-danger) !important;
|
|
border-color: var(--btn-danger) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-light footer {
|
|
background-color: #f8f9fa !important;
|
|
border-top: 1px solid #dee2e6 !important;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.theme-light footer a {
|
|
color: #6c757d !important;
|
|
}
|
|
|
|
.theme-light footer a:hover {
|
|
color: #495057 !important;
|
|
}
|
|
|
|
/* Force dark theme regardless of system preference */
|
|
.theme-dark {
|
|
background-color: var(--bg-primary-dark) !important;
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .header-section {
|
|
background-color: var(--bg-secondary-dark) !important;
|
|
border-bottom: 1px solid #404040 !important;
|
|
}
|
|
|
|
.theme-dark .card {
|
|
background-color: var(--bg-secondary-dark) !important;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .card-header {
|
|
background-color: var(--bg-card-dark) !important;
|
|
border-bottom: 2px solid #505050 !important;
|
|
color: var(--text-primary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .jmespath-input {
|
|
background-color: var(--bg-card-dark);
|
|
border: 1px solid #505050;
|
|
color: var(--text-primary-dark);
|
|
}
|
|
|
|
/* Success and Error state overrides - must come after base input rules */
|
|
.theme-dark .jmespath-input.success {
|
|
background-color: #1e4a1e !important;
|
|
border-color: #2c6d2c !important;
|
|
color: #d4edda !important;
|
|
}
|
|
|
|
.theme-dark .jmespath-input.error {
|
|
background-color: #4a1e1e !important;
|
|
border-color: #6d2c2c !important;
|
|
color: #f8d7da !important;
|
|
}
|
|
|
|
.theme-dark .jmespath-input::placeholder {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
.theme-dark .jmespath-input:focus {
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.theme-dark .json-input,
|
|
.theme-dark .result-output {
|
|
background-color: #2a2a2a !important;
|
|
border: 1px solid #505050 !important;
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .json-input::placeholder,
|
|
.theme-dark .result-output::placeholder {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
.theme-dark .json-input:focus,
|
|
.theme-dark .result-output:focus {
|
|
background-color: var(--bg-card-dark) !important;
|
|
border-color: var(--accent-color) !important;
|
|
color: var(--text-primary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .output-section .form-control {
|
|
background-color: var(--bg-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .alert-danger {
|
|
background-color: #3d1a1a !important;
|
|
border-color: #dc3545 !important;
|
|
color: #f8d7da !important;
|
|
}
|
|
|
|
.theme-dark .alert-success {
|
|
background-color: #1e4a1e !important;
|
|
border-color: #2c6d2c !important;
|
|
color: #d4edda !important;
|
|
}
|
|
|
|
.theme-dark .text-muted {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
.theme-dark footer {
|
|
background-color: var(--bg-secondary-dark) !important;
|
|
border-top: 1px solid #404040 !important;
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark footer a {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
.theme-dark footer a:hover {
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
.theme-dark .btn-primary {
|
|
background-color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-dark .btn-outline-secondary {
|
|
color: var(--btn-secondary) !important;
|
|
border-color: var(--btn-secondary) !important;
|
|
}
|
|
.theme-dark .btn-outline-secondary:hover {
|
|
background-color: var(--btn-secondary) !important;
|
|
border-color: var(--btn-secondary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-dark .btn-outline-success {
|
|
color: var(--btn-success) !important;
|
|
border-color: var(--btn-success) !important;
|
|
}
|
|
.theme-dark .btn-outline-success:hover {
|
|
background-color: var(--btn-success) !important;
|
|
border-color: var(--btn-success) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-dark .btn-outline-info {
|
|
color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
}
|
|
.theme-dark .btn-outline-info:hover {
|
|
background-color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
.theme-light .btn-outline-info {
|
|
color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
}
|
|
.theme-light .btn-outline-info:hover {
|
|
background-color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
.theme-dark .btn-outline-info {
|
|
color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
}
|
|
.theme-dark .btn-outline-info:hover {
|
|
background-color: var(--btn-info) !important;
|
|
border-color: var(--btn-info) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-dark .btn-outline-primary {
|
|
color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
}
|
|
.theme-dark .btn-outline-primary:hover {
|
|
background-color: var(--btn-primary) !important;
|
|
border-color: var(--btn-primary) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
.theme-dark .btn-outline-danger {
|
|
color: var(--btn-danger) !important;
|
|
border-color: var(--btn-danger) !important;
|
|
}
|
|
.theme-dark .btn-outline-danger:hover {
|
|
background-color: var(--btn-danger) !important;
|
|
border-color: var(--btn-danger) !important;
|
|
color: var(--bg-primary-light) !important;
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
body:not(.theme-light):not(.theme-dark) {
|
|
background-color: var(--bg-primary-dark);
|
|
color: var(--text-secondary-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .header-section {
|
|
background-color: var(--bg-secondary-dark);
|
|
border-bottom: 1px solid var(--border-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .card {
|
|
background-color: var(--bg-secondary-dark);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
color: var(--text-secondary-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .card-header {
|
|
background-color: var(--bg-card-dark);
|
|
border-bottom: 2px solid var(--border-dark);
|
|
color: var(--text-primary-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .jmespath-input {
|
|
background-color: var(--bg-card-dark) !important;
|
|
border: 1px solid var(--border-input-dark) !important;
|
|
color: var(--text-primary-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .jmespath-input.success {
|
|
background-color: var(--success-bg-dark) !important;
|
|
border-color: var(--success-border-dark) !important;
|
|
color: var(--success-text-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .jmespath-input.error {
|
|
background-color: var(--error-bg-dark) !important;
|
|
border-color: var(--error-border-dark) !important;
|
|
color: var(--error-text-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .jmespath-input::placeholder {
|
|
color: var(--text-muted-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .jmespath-input:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 0.2rem var(--accent-shadow);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .json-input,
|
|
body:not(.theme-light):not(.theme-dark) .result-output {
|
|
background-color: #2a2a2a;
|
|
border: 1px solid var(--border-input-dark);
|
|
color: var(--text-secondary-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .json-input::placeholder,
|
|
body:not(.theme-light):not(.theme-dark) .result-output::placeholder {
|
|
color: var(--text-muted-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .json-input:focus,
|
|
body:not(.theme-light):not(.theme-dark) .result-output:focus {
|
|
background-color: #323232;
|
|
border-color: var(--accent-color);
|
|
color: var(--text-primary-dark);
|
|
box-shadow: 0 0 0 0.2rem var(--accent-shadow);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .alert-danger {
|
|
background-color: var(--error-bg-dark);
|
|
border-color: var(--error-border-dark);
|
|
color: var(--error-text-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .alert-success {
|
|
background-color: var(--success-bg-dark);
|
|
border-color: var(--success-border-dark);
|
|
color: var(--success-text-dark);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .text-muted {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) footer.bg-light {
|
|
background-color: var(--bg-secondary-dark) !important;
|
|
border-top: 1px solid var(--border-dark) !important;
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) footer .text-muted {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) footer a {
|
|
color: var(--text-muted-dark) !important;
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) footer a:hover {
|
|
color: var(--text-secondary-dark) !important;
|
|
}
|
|
|
|
/* Bootstrap dark mode overrides */
|
|
body:not(.theme-light):not(.theme-dark) .btn-outline-info {
|
|
color: var(--btn-info);
|
|
border-color: var(--btn-info);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .btn-outline-info:hover {
|
|
background-color: var(--btn-info);
|
|
border-color: var(--btn-info);
|
|
color: var(--bg-primary-light);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .btn-outline-success {
|
|
color: var(--btn-success);
|
|
border-color: var(--btn-success);
|
|
}
|
|
|
|
body:not(.theme-light):not(.theme-dark) .btn-outline-success:hover {
|
|
background-color: var(--btn-success);
|
|
border-color: var(--btn-success);
|
|
color: var(--bg-primary-light);
|
|
}
|
|
|
|
.btn-outline-info {
|
|
color: #17a2b8;
|
|
border-color: #17a2b8;
|
|
}
|
|
|
|
.btn-outline-info:hover {
|
|
background-color: #17a2b8;
|
|
border-color: #17a2b8;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: #007bff;
|
|
border-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
color: #6c757d;
|
|
border-color: #6c757d;
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background-color: #6c757d;
|
|
border-color: var(--btn-secondary);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
color: var(--btn-danger);
|
|
border-color: var(--btn-danger);
|
|
}
|
|
|
|
.btn-outline-danger:hover {
|
|
background-color: var(--btn-danger);
|
|
border-color: var(--btn-danger);
|
|
color: #fff;
|
|
}
|
|
} |