Converted to Material UI v7 - bare.
This commit is contained in:
318
src/App.css
318
src/App.css
@@ -1,318 +1,46 @@
|
||||
/* JMESPath Testing Tool Custom Styles */
|
||||
/* JMESPath Testing Tool - Minimal Styles */
|
||||
|
||||
:root {
|
||||
/* Common variables */
|
||||
--font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||||
--accent-color: #007bff;
|
||||
|
||||
/* Brand colors */
|
||||
--brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--brand-white: #ffffff;
|
||||
--brand-dark: #212529;
|
||||
--brand-warning: #ffc107;
|
||||
|
||||
/* Brand opacity levels */
|
||||
--brand-white-60: rgba(255, 255, 255, 0.6);
|
||||
--brand-white-10: rgba(255, 255, 255, 0.1);
|
||||
--brand-warning-50: rgba(255, 193, 7, 0.5);
|
||||
--brand-warning-10: rgba(255, 193, 7, 0.1);
|
||||
|
||||
/* Elevation and overlays */
|
||||
--shadow-light: rgba(0, 0, 0, 0.1);
|
||||
--focus-ring: rgba(0, 123, 255, 0.25);
|
||||
|
||||
/* 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;
|
||||
--font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", "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 {
|
||||
background: var(--brand-gradient);
|
||||
color: var(--brand-white);
|
||||
padding: 1.2rem 0;
|
||||
margin-bottom: 1rem;
|
||||
margin: 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-section h2 {
|
||||
color: var(--brand-white);
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Ensure buttons in header are clearly visible against gradient */
|
||||
.header-section .btn-light.active {
|
||||
background-color: var(--brand-white);
|
||||
color: var(--brand-dark) !important; /* Deep dark text for selected states */
|
||||
border-color: var(--brand-white);
|
||||
/* Scrollbar styling for a cleaner look */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.header-section .btn-outline-light {
|
||||
color: var(--brand-white);
|
||||
border-color: var(--brand-white-60);
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header-section .btn-outline-light:hover {
|
||||
background-color: var(--brand-white-10);
|
||||
color: var(--brand-white);
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.header-section .btn-outline-warning {
|
||||
color: var(--brand-warning);
|
||||
border-color: var(--brand-warning-50);
|
||||
[data-mui-color-scheme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header-section .btn-outline-warning:hover {
|
||||
background-color: var(--brand-warning-10);
|
||||
color: var(--brand-warning);
|
||||
}
|
||||
|
||||
/* Custom card styling */
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px var(--shadow-light);
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 2px solid var(--border);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
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;
|
||||
}
|
||||
|
||||
.json-input, .result-output {
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.btn {
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bootstrap theme integration */
|
||||
[data-bs-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #495057;
|
||||
--text-muted: #6c757d;
|
||||
--border: #dee2e6;
|
||||
--border-input: #ced4da;
|
||||
|
||||
--success-bg: #d4edda;
|
||||
--success-border: #c3e6cb;
|
||||
--success-text: #155724;
|
||||
|
||||
--error-bg: #f8d7da;
|
||||
--error-border: #f5c6cb;
|
||||
--error-text: #721c24;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--bg-primary: #1a1a1a;
|
||||
--bg-secondary: #2d2d2d;
|
||||
--bg-card: #323232;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #e9ecef;
|
||||
--text-muted: #adb5bd;
|
||||
--border: #495057;
|
||||
--border-input: #6c757d;
|
||||
|
||||
--success-bg: #1e4a1e;
|
||||
--success-border: #2c6d2c;
|
||||
--success-text: #d4edda;
|
||||
|
||||
--error-bg: #4a1e1e;
|
||||
--error-border: #6d2c2c;
|
||||
--error-text: #f8d7da;
|
||||
}
|
||||
|
||||
/* Apply theme colors */
|
||||
body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--bg-primary);
|
||||
border-color: var(--border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom-color: var(--border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.jmespath-input {
|
||||
background-color: var(--bg-primary);
|
||||
border-color: var(--border-input);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.json-input, .result-output {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
footer.bg-light {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* State styles */
|
||||
.jmespath-input.success {
|
||||
background-color: var(--success-bg) !important;
|
||||
border-color: var(--success-border) !important;
|
||||
color: var(--success-text) !important;
|
||||
}
|
||||
|
||||
.jmespath-input.error {
|
||||
background-color: var(--error-bg) !important;
|
||||
border-color: var(--error-border) !important;
|
||||
color: var(--error-text) !important;
|
||||
}
|
||||
|
||||
.json-input.success {
|
||||
background-color: var(--success-bg) !important;
|
||||
border-color: var(--success-border) !important;
|
||||
color: var(--success-text) !important;
|
||||
}
|
||||
|
||||
.json-input.error {
|
||||
background-color: var(--error-bg) !important;
|
||||
border-color: var(--error-border) !important;
|
||||
color: var(--error-text) !important;
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.jmespath-input:focus {
|
||||
border-color: var(--accent-color, #007bff);
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-ring);
|
||||
}
|
||||
|
||||
.json-input:focus,
|
||||
.result-output:focus {
|
||||
background-color: var(--bg-primary);
|
||||
border-color: var(--accent-color, #007bff);
|
||||
color: var(--text-secondary);
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-ring);
|
||||
}
|
||||
|
||||
/* Placeholder colors */
|
||||
.jmespath-input::placeholder,
|
||||
.json-input::placeholder,
|
||||
.result-output::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Alert styles */
|
||||
.alert-danger {
|
||||
background-color: var(--error-bg);
|
||||
border-color: var(--error-border);
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--success-bg);
|
||||
border-color: var(--success-border);
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
/* Code block styles */
|
||||
pre.bg-light {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--text-secondary);
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user