Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
528 lines
13 KiB
CSS
528 lines
13 KiB
CSS
/**
|
|
* Component Playground Styles
|
|
*
|
|
* Interactive development tool for LiveComponents.
|
|
* Modern, responsive UI with code editor aesthetics.
|
|
*
|
|
* Features:
|
|
* - Component browser with search
|
|
* - JSON state editor with syntax highlighting
|
|
* - Live component preview
|
|
* - Action testing interface
|
|
* - Performance metrics display
|
|
* - Code generator with copy-to-clipboard
|
|
*/
|
|
|
|
@layer components {
|
|
/* ========================================
|
|
Layout & Container
|
|
======================================== */
|
|
|
|
.playground {
|
|
min-height: 100vh;
|
|
background: oklch(98% 0.01 280);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.playground__header {
|
|
padding: 2rem;
|
|
background: oklch(100% 0 0);
|
|
border-bottom: 1px solid oklch(90% 0.01 280);
|
|
}
|
|
|
|
.playground__title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: oklch(20% 0.02 280);
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.playground__subtitle {
|
|
font-size: 1rem;
|
|
color: oklch(50% 0.05 280);
|
|
margin: 0;
|
|
}
|
|
|
|
.playground__layout {
|
|
display: grid;
|
|
grid-template-columns: 320px 1fr;
|
|
gap: 0;
|
|
min-height: calc(100vh - 120px);
|
|
}
|
|
|
|
/* ========================================
|
|
Sidebar: Component Selector
|
|
======================================== */
|
|
|
|
.playground__sidebar {
|
|
background: oklch(100% 0 0);
|
|
border-right: 1px solid oklch(90% 0.01 280);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.playground__search {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid oklch(90% 0.01 280);
|
|
}
|
|
|
|
.playground__search-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid oklch(85% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
transition: border-color 0.2s;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: oklch(60% 0.2 280);
|
|
box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
|
|
}
|
|
}
|
|
|
|
.playground__component-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.playground__component-item {
|
|
padding: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
background: oklch(98% 0.01 280);
|
|
border: 1px solid oklch(90% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
background: oklch(95% 0.01 280);
|
|
border-color: oklch(80% 0.05 280);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
&--active {
|
|
background: oklch(85% 0.15 280);
|
|
border-color: oklch(60% 0.2 280);
|
|
box-shadow: 0 2px 8px oklch(60% 0.2 280 / 0.2);
|
|
|
|
&:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.playground__component-name {
|
|
font-weight: 600;
|
|
color: oklch(20% 0.02 280);
|
|
margin-bottom: 0.5rem;
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
}
|
|
|
|
.playground__component-meta {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.playground__badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
background: oklch(92% 0.01 280);
|
|
color: oklch(40% 0.05 280);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
|
|
&--cache {
|
|
background: oklch(85% 0.15 140);
|
|
color: oklch(30% 0.1 140);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Main Content Area
|
|
======================================== */
|
|
|
|
.playground__main {
|
|
padding: 2rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.playground__section {
|
|
margin-bottom: 3rem;
|
|
background: oklch(100% 0 0);
|
|
border: 1px solid oklch(90% 0.01 280);
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1px 3px oklch(0% 0 0 / 0.05);
|
|
}
|
|
|
|
.playground__section-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: oklch(20% 0.02 280);
|
|
margin: 0 0 1rem 0;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid oklch(90% 0.01 280);
|
|
}
|
|
|
|
/* ========================================
|
|
State Editor
|
|
======================================== */
|
|
|
|
.playground__state-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.playground__textarea {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border: 1px solid oklch(85% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
background: oklch(98% 0.01 280);
|
|
color: oklch(20% 0.02 280);
|
|
resize: vertical;
|
|
min-height: 200px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: oklch(60% 0.2 280);
|
|
box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
|
|
}
|
|
}
|
|
|
|
.playground__editor-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.playground__validation {
|
|
padding: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
min-height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.playground__success {
|
|
color: oklch(35% 0.15 140);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.playground__error {
|
|
color: oklch(50% 0.2 30);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ========================================
|
|
Buttons
|
|
======================================== */
|
|
|
|
.playground__button {
|
|
padding: 0.75rem 1.5rem;
|
|
background: oklch(95% 0.01 280);
|
|
color: oklch(30% 0.05 280);
|
|
border: 1px solid oklch(85% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
background: oklch(92% 0.01 280);
|
|
border-color: oklch(80% 0.05 280);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
|
|
}
|
|
|
|
&--primary {
|
|
background: oklch(60% 0.2 280);
|
|
color: oklch(100% 0 0);
|
|
border-color: oklch(60% 0.2 280);
|
|
|
|
&:hover {
|
|
background: oklch(55% 0.2 280);
|
|
border-color: oklch(55% 0.2 280);
|
|
}
|
|
}
|
|
|
|
&--action {
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
background: oklch(85% 0.15 140);
|
|
color: oklch(25% 0.1 140);
|
|
border-color: oklch(75% 0.15 140);
|
|
|
|
&:hover {
|
|
background: oklch(80% 0.15 140);
|
|
border-color: oklch(70% 0.15 140);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Live Preview
|
|
======================================== */
|
|
|
|
.playground__preview {
|
|
min-height: 300px;
|
|
padding: 2rem;
|
|
background: oklch(98% 0.01 280);
|
|
border: 1px dashed oklch(85% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ========================================
|
|
Performance Metrics
|
|
======================================== */
|
|
|
|
.playground__metrics {
|
|
padding: 1rem;
|
|
background: oklch(95% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid oklch(90% 0.01 280);
|
|
}
|
|
|
|
.playground__metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.playground__metric {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.playground__metric-label {
|
|
font-size: 0.75rem;
|
|
color: oklch(50% 0.05 280);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.playground__metric-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: oklch(20% 0.02 280);
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
}
|
|
|
|
/* ========================================
|
|
Actions
|
|
======================================== */
|
|
|
|
.playground__actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.playground__action {
|
|
padding: 1rem;
|
|
background: oklch(98% 0.01 280);
|
|
border: 1px solid oklch(90% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.playground__action-params {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid oklch(90% 0.01 280);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: oklch(30% 0.05 280);
|
|
font-weight: 500;
|
|
}
|
|
|
|
input {
|
|
padding: 0.75rem;
|
|
border: 1px solid oklch(85% 0.01 280);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: oklch(60% 0.2 280);
|
|
box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Code Generator
|
|
======================================== */
|
|
|
|
.playground__code-generator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.playground__code {
|
|
padding: 1.5rem;
|
|
background: oklch(15% 0.01 280);
|
|
color: oklch(90% 0.05 140);
|
|
border-radius: 0.5rem;
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
|
|
code {
|
|
color: inherit;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Empty States & Loading
|
|
======================================== */
|
|
|
|
.playground__empty {
|
|
padding: 3rem;
|
|
text-align: center;
|
|
color: oklch(60% 0.05 280);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.playground__loading {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: oklch(50% 0.05 280);
|
|
font-size: 0.875rem;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
border: 2px solid oklch(80% 0.05 280);
|
|
border-top-color: oklch(60% 0.2 280);
|
|
border-radius: 50%;
|
|
animation: playground-spin 0.8s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes playground-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Responsive Design
|
|
======================================== */
|
|
|
|
@media (max-width: 1024px) {
|
|
.playground__layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.playground__sidebar {
|
|
border-right: none;
|
|
border-bottom: 1px solid oklch(90% 0.01 280);
|
|
max-height: 400px;
|
|
}
|
|
|
|
.playground__metrics-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Dark Mode Support
|
|
======================================== */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.playground {
|
|
background: oklch(15% 0.01 280);
|
|
}
|
|
|
|
.playground__header,
|
|
.playground__sidebar,
|
|
.playground__section {
|
|
background: oklch(20% 0.01 280);
|
|
border-color: oklch(30% 0.01 280);
|
|
}
|
|
|
|
.playground__title {
|
|
color: oklch(90% 0.02 280);
|
|
}
|
|
|
|
.playground__subtitle {
|
|
color: oklch(70% 0.05 280);
|
|
}
|
|
|
|
.playground__search-input,
|
|
.playground__textarea {
|
|
background: oklch(15% 0.01 280);
|
|
color: oklch(90% 0.02 280);
|
|
border-color: oklch(30% 0.01 280);
|
|
}
|
|
|
|
.playground__component-item {
|
|
background: oklch(18% 0.01 280);
|
|
border-color: oklch(30% 0.01 280);
|
|
|
|
&:hover {
|
|
background: oklch(25% 0.01 280);
|
|
}
|
|
|
|
&--active {
|
|
background: oklch(35% 0.15 280);
|
|
border-color: oklch(50% 0.2 280);
|
|
}
|
|
}
|
|
|
|
.playground__button {
|
|
background: oklch(25% 0.01 280);
|
|
color: oklch(85% 0.02 280);
|
|
border-color: oklch(35% 0.01 280);
|
|
|
|
&:hover {
|
|
background: oklch(30% 0.01 280);
|
|
}
|
|
}
|
|
|
|
.playground__preview,
|
|
.playground__metrics,
|
|
.playground__action {
|
|
background: oklch(18% 0.01 280);
|
|
border-color: oklch(30% 0.01 280);
|
|
}
|
|
|
|
.playground__metric-value {
|
|
color: oklch(90% 0.02 280);
|
|
}
|
|
}
|
|
}
|