slawek/jmespath-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release v1.3.1: Added PowerShell support and fixed theme issues

Browse Source
This commit is contained in:
Sławek Koszewski
2026-01-31 11:06:25 +01:00
parent d398c34aa5
commit 57371feeb0
8 changed files with 168 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/App.css
View File

@@ -5,6 +5,22 @@
--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;
@@ -36,23 +52,57 @@ body {
/* Header section styling - more compact */
.header-section {
/* Removed gradient background to fix text visibility */
background: var(--brand-gradient);
color: var(--brand-white);
padding: 1.2rem 0;
margin-bottom: 1rem;
transition: background-color 0.3s ease;
}
.header-section h2 {
color: var(--brand-white);
}
/* 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);
}
.header-section .btn-outline-light {
color: var(--brand-white);
border-color: var(--brand-white-60);
}
.header-section .btn-outline-light:hover {
background-color: var(--brand-white-10);
color: var(--brand-white);
}
.header-section .btn-outline-warning {
color: var(--brand-warning);
border-color: var(--brand-warning-50);
}
.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 rgba(0,0,0,0.1);
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: #f8f9fa;
border-bottom: 2px solid #dee2e6;
background-color: var(--bg-secondary);
border-bottom: 2px solid var(--border);
font-weight: 600;
color: #212529;
color: var(--text-primary);
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
@@ -224,7 +274,7 @@ footer a:hover {
/* Focus states */
.jmespath-input:focus {
border-color: var(--accent-color, #007bff);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
.json-input:focus,
@@ -232,7 +282,7 @@ footer a:hover {
background-color: var(--bg-primary);
border-color: var(--accent-color, #007bff);
color: var(--text-secondary);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem var(--focus-ring);
}
/* Placeholder colors */
@@ -249,6 +299,12 @@ footer a:hover {
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;