iot/spore-ledlab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve editor layout

Browse Source
This commit is contained in:
0x1d
2025-10-12 17:02:47 +02:00
parent 01350ac233
commit 9d5d0e4d67
4 changed files with 267 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
public/styles/main.css
View File

@@ -955,23 +955,23 @@ body {
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-primary) 0%, #22c55e 100%);
background: linear-gradient(135deg, rgba(74, 222, 128, 0.8) 0%, rgba(34, 197, 94, 0.8) 100%);
color: white;
border-color: var(--accent-primary);
box-shadow: 0 2px 8px rgba(74, 222, 128, 0.25);
border-color: rgba(74, 222, 128, 0.6);
box-shadow: 0 2px 8px rgba(74, 222, 128, 0.15);
}
.btn-primary:hover {
background: linear-gradient(135deg, #22c55e 0%, var(--accent-primary) 100%);
border-color: #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(74, 222, 128, 0.9) 100%);
border-color: rgba(34, 197, 94, 0.8);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.35);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(74, 222, 128, 0.2);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(74, 222, 128, 0.25);
box-shadow: 0 1px 4px rgba(74, 222, 128, 0.15);
}
.btn-stop {
@@ -1004,15 +1004,18 @@ body {
}
.btn-secondary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
color: var(--text-secondary);
border-color: var(--border-secondary);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
color: var(--text-primary);
border-color: var(--border-tertiary);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn-small {
@@ -1806,6 +1809,17 @@ body {
opacity: 0.85;
}
.section-title-with-button {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.65rem;
}
.section-title-with-button .section-title-compact {
margin-bottom: 0;
}
.editor-section {
margin-bottom: 1.5rem;
}
@@ -2012,6 +2026,132 @@ body {
margin-top: 0.15rem;
}
.editor-preset-section {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.75rem;
}
.preset-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
}
.preset-actions-row {
display: flex;
gap: 0.375rem;
align-items: center;
}
.preset-actions-row:first-child {
justify-content: stretch;
}
.preset-actions-row .preset-select {
flex: 1;
margin: 0;
}
.editor-preset-section .editor-input-wrapper {
margin-bottom: 0.5rem;
}
.editor-preset-section .editor-input-wrapper input {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
min-height: 2rem;
}
.editor-preset-section .section-title-compact {
margin-bottom: 0.5rem;
font-size: 0.8rem;
}
.preset-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.preset-header .section-title-compact {
margin-bottom: 0;
}
.preset-header-buttons {
display: flex;
gap: 0.25rem;
}
.btn-icon {
padding: 0.5rem;
min-width: 2.5rem;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border: 1px solid var(--border-secondary);
border-radius: 6px;
color: var(--text-secondary);
transition: all 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-icon:hover {
background: var(--bg-hover);
border-color: var(--border-hover);
color: var(--text-primary);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-icon:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.btn-icon svg {
transition: all 0.2s ease;
}
.btn-icon:hover svg {
transform: scale(1.05);
}
.btn-icon:active svg {
transform: scale(0.95);
}
/* Icon button color variations */
.btn-icon[id="editor-new-preset"]:hover {
border-color: rgba(74, 222, 128, 0.4);
color: var(--accent-primary);
}
.btn-icon[id="editor-save-preset"]:hover {
border-color: rgba(76, 175, 80, 0.4);
color: var(--accent-success);
}
.btn-icon[id="editor-delete-preset"]:hover {
border-color: rgba(248, 113, 113, 0.4);
color: var(--accent-error);
}
.btn-icon[id="editor-export-json"]:hover,
.btn-icon[for="editor-import-json"]:hover {
border-color: rgba(96, 165, 250, 0.4);
color: var(--accent-secondary);
}
.editor-layer-buttons {
display: flex;
gap: 0.3rem;
@@ -2103,21 +2243,31 @@ body {
/* Button Variants */
.btn-success {
background: linear-gradient(135deg, var(--accent-success) 0%, #45a049 100%);
background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(69, 160, 73, 0.8) 100%);
color: white;
border-color: rgba(76, 175, 80, 0.6);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}
.btn-success:hover {
background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
background: linear-gradient(135deg, rgba(69, 160, 73, 0.9) 0%, rgba(61, 139, 64, 0.9) 100%);
border-color: rgba(69, 160, 73, 0.8);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2);
}
.btn-danger {
background: linear-gradient(135deg, var(--accent-error) 0%, #dc2626 100%);
background: linear-gradient(135deg, rgba(248, 113, 113, 0.8) 0%, rgba(220, 38, 38, 0.8) 100%);
color: white;
border-color: rgba(248, 113, 113, 0.6);
box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15);
}
.btn-danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
background: linear-gradient(135deg, rgba(220, 38, 38, 0.9) 0%, rgba(185, 28, 28, 0.9) 100%);
border-color: rgba(220, 38, 38, 0.8);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(248, 113, 113, 0.2);
}
/* Notifications */