mirror of
https://github.com/sotam0316/drawNET_test.git
synced 2026-04-25 03:58:38 +09:00
static 폴더 및 하위 파일 업로드
This commit is contained in:
sotam0316
@@ -0,0 +1,120 @@
|
||||
/* analysis.css - Theme-aware styles for Inventory and Analysis Panels */
|
||||
|
||||
.inventory-panel {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: 260px;
|
||||
max-height: 320px;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.inventory-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
padding-bottom: 10px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.inventory-header i {
|
||||
color: var(--accent-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inventory-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Inventory */
|
||||
.inventory-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.inventory-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.inventory-list::-webkit-scrollbar-thumb {
|
||||
background: var(--panel-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.inventory-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--item-bg);
|
||||
padding: 8px 14px 8px 18px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--panel-border);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.inventory-item:hover {
|
||||
background: var(--item-hover-bg);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.inventory-item .lbl {
|
||||
font-weight: 600;
|
||||
color: var(--sub-text);
|
||||
font-size: 11px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.inventory-item .val {
|
||||
font-weight: 800;
|
||||
color: var(--accent-color);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inventory-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.btn-export-bom {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-export-bom:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.btn-export-bom i {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
|
||||
.animate-up {
|
||||
animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
||||
}
|
||||
|
||||
/* Edge Flow Animation */
|
||||
@keyframes drawnet-flow {
|
||||
from { stroke-dashoffset: 20; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
.flow-animation path {
|
||||
stroke-dasharray: 5, 5;
|
||||
animation: drawnet-flow 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Modal Animations */
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
|
||||
@keyframes scaleUp { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
||||
@keyframes scaleDown { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(20px); } }
|
||||
|
||||
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
|
||||
.animate-fade-out { animation: fadeOut 0.2s ease forwards; }
|
||||
.animate-scale-up { animation: scaleUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
|
||||
.animate-scale-down { animation: scaleDown 0.3s ease forwards; }
|
||||
@@ -0,0 +1,175 @@
|
||||
.asset-library {
|
||||
padding: 0 16px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.asset-library h3 {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--sub-text);
|
||||
margin: 24px 16px 12px;
|
||||
white-space: nowrap;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .asset-library h3 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.asset-category {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: var(--item-bg);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.category-header:hover {
|
||||
background: var(--item-hover-bg);
|
||||
}
|
||||
|
||||
.category-header span {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.category-header i {
|
||||
font-size: 10px;
|
||||
color: var(--sub-text);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.asset-category.active .category-header i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.category-content {
|
||||
display: none;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.asset-category.active .category-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .category-content {
|
||||
display: none !important; /* Always hide content in sidebar when collapsed */
|
||||
}
|
||||
|
||||
.asset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: grab;
|
||||
transition: all 0.3s;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.asset-item span {
|
||||
font-size: 9px;
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
line-height: 1.3;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .asset-item span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.asset-item:hover {
|
||||
background: var(--item-hover-bg);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.asset-item img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fixed Category Optimization */
|
||||
.fixed-category .asset-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fixed-category .asset-item {
|
||||
padding: 8px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fixed-category .asset-item span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-category .asset-item i,
|
||||
.fixed-category .asset-item img {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.category-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-divider::after {
|
||||
content: '-';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--sidebar-bg);
|
||||
padding: 0 10px;
|
||||
font-size: 10px;
|
||||
color: var(--sub-text);
|
||||
font-weight: 800;
|
||||
}
|
||||
.asset-group-label {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
color: var(--sub-text);
|
||||
padding: 12px 16px 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.asset-group-label::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
:root {
|
||||
--bg-color: #f8fafc;
|
||||
--bg-rgb: 248, 250, 252;
|
||||
--text-color: #0f172a;
|
||||
--accent-color: #3b82f6;
|
||||
--panel-bg: rgba(255, 255, 255, 0.7);
|
||||
--panel-border: rgba(255, 255, 255, 0.5);
|
||||
--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
|
||||
--sub-text: #64748b;
|
||||
--canvas-bg: #ffffff;
|
||||
--grid-color: rgba(0, 0, 0, 0.05);
|
||||
--grid-size: 20px;
|
||||
--item-bg: rgba(255, 255, 255, 0.4);
|
||||
--item-hover-bg: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #020617;
|
||||
--bg-rgb: 2, 6, 23;
|
||||
--text-color: #f8fafc;
|
||||
--accent-color: #3b82f6;
|
||||
--panel-bg: rgba(15, 23, 42, 0.8);
|
||||
--panel-border: rgba(255, 255, 255, 0.1);
|
||||
--shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
||||
--sub-text: #cbd5e1;
|
||||
--canvas-bg: #1e293b;
|
||||
--grid-color: rgba(255, 255, 255, 0.1);
|
||||
--grid-size: 20px;
|
||||
--item-bg: rgba(255, 255, 255, 0.05);
|
||||
--item-hover-bg: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid var(--panel-border);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
/* Markdown Rendering Styles */
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.markdown-body h1 { font-size: 1.8em; }
|
||||
.markdown-body h2 {
|
||||
font-size: 1.4em;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
padding-bottom: 8px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.markdown-body h3 { font-size: 1.2em; }
|
||||
|
||||
.markdown-body p { margin-bottom: 16px; color: var(--sub-text); }
|
||||
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body li { margin-bottom: 8px; }
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 12px 20px;
|
||||
margin: 16px 0;
|
||||
background: var(--item-bg);
|
||||
border-left: 4px solid var(--accent-color);
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
background: var(--item-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.9em;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
background: var(--item-bg);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body th, .markdown-body td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background: var(--item-bg);
|
||||
font-weight: 800;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--panel-border);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
margin: 16px 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.editor-panel {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: 480px;
|
||||
min-width: 400px;
|
||||
height: 200px;
|
||||
z-index: 90;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.editor-panel.collapsed {
|
||||
height: 40px; /* Header only height */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
padding: 12px 25px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editor-header span {
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
color: var(--sub-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
resize: none;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.sidebar.collapsed .category-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-collapsed-icon {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .category-collapsed-icon {
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.category-collapsed-icon:hover {
|
||||
background: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Flyout Panel */
|
||||
.category-flyout {
|
||||
position: fixed;
|
||||
left: 90px;
|
||||
top: auto;
|
||||
width: 280px;
|
||||
max-height: 80vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.category-flyout.active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.flyout-menu {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 20px;
|
||||
width: 220px;
|
||||
padding: 12px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
border: 1px solid var(--panel-border);
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.flyout-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
color: var(--sub-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 8px 14px 4px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.flyout-item {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.flyout-item i {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.flyout-item:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.flyout-item:hover i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.flyout-item.primary {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.flyout-item.primary:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--panel-border);
|
||||
margin: 8px 4px;
|
||||
}
|
||||
.flyout-header {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.flyout-header strong {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flyout-header small {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.flyout-grid {
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
height: 80px;
|
||||
z-index: 90;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.header-compact {
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
top: 15px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.header-compact h2 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.header-compact p {
|
||||
font-size: 9px !important;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.help-circle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #047857;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.help-circle-btn:hover {
|
||||
color: #10b981;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 8px #10b981;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.header-btns {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--item-bg);
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 40px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 20px;
|
||||
padding: 6px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.header-search:focus-within {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.header-search i {
|
||||
color: var(--sub-text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-search input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-color);
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
/* layers.css - Layer Management Panel Styles */
|
||||
|
||||
.layer-panel {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
right: 300px; /* Offset from Inventory */
|
||||
width: 250px;
|
||||
max-height: 400px;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.layer-item.dragging {
|
||||
opacity: 0.4;
|
||||
background: var(--primary-color-dim);
|
||||
border: 1px dashed var(--primary-color);
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
color: #64748b;
|
||||
margin-right: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layer-item:active .drag-handle {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-header i {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.layer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
background: var(--item-hover-bg);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.layer-item.active {
|
||||
border-color: var(--accent-color);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.layer-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.layer-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.layer-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.layer-actions button:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.panel-header button {
|
||||
background: var(--accent-color);
|
||||
color: white !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.panel-header button:hover {
|
||||
background: #2563eb;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.panel-header button i {
|
||||
color: white !important; /* Force icon color */
|
||||
}
|
||||
|
||||
.mini-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.layer-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.opacity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.opacity-control input[type="range"] {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 3px;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.opacity-control input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(to right, var(--accent-color), #ddd);
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.opacity-control input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--accent-color);
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
margin-top: -4px; /* Align with track */
|
||||
}
|
||||
|
||||
#opacity-val {
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.layer-rename-input {
|
||||
background: white;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
font-size: 13px;
|
||||
width: 100px;
|
||||
outline: none;
|
||||
color: var(--main-text);
|
||||
}
|
||||
/* Trash Bin for Deletion */
|
||||
.layer-trash {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border: 1.5px dashed rgba(239, 68, 68, 0.4);
|
||||
border-radius: 10px;
|
||||
color: #ef4444;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.layer-trash i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layer-trash.drag-over {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border-color: #ef4444;
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
/* Visual Nudge: Pulse Animation */
|
||||
@keyframes nudgePulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
|
||||
}
|
||||
|
||||
.pulse-nudge {
|
||||
animation: nudgePulse 1.5s infinite;
|
||||
border-radius: 4px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Mini Guide Tooltip */
|
||||
.nudge-tooltip {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
animation: tooltipFadeIn 0.3s ease-out forwards;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.nudge-tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-right: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
@keyframes tooltipFadeIn {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes tooltipFadeOut {
|
||||
from { opacity: 1; transform: translateX(0); }
|
||||
to { opacity: 0; transform: translateX(5px); }
|
||||
}
|
||||
|
||||
/* Active Layer Floating Badge */
|
||||
.active-layer-badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
}
|
||||
|
||||
.active-layer-badge .badge-label {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.active-layer-badge .badge-value {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes badgePop {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.badge-pop {
|
||||
animation: badgePop 0.3s ease-out;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/* Main Area Adjustment */
|
||||
.header, .editor-panel {
|
||||
left: 284px; /* Default sidebar width + margin */
|
||||
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.sidebar.collapsed ~ .header,
|
||||
.sidebar.collapsed ~ .editor-panel,
|
||||
.sidebar.collapsed ~ .main-viewport {
|
||||
left: 104px; /* Collapsed sidebar width + margin */
|
||||
}
|
||||
.main-viewport {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 284px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background-color: var(--bg-color);
|
||||
display: flex;
|
||||
/* justify-content and align-items removed to allow margin:auto to handle centering with overflow */
|
||||
padding: 60px; /* Space for shadow and boundaries */
|
||||
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#cy {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--canvas-bg); /* Theme-aware paper background */
|
||||
position: relative;
|
||||
/* Sizes will be set by JS or default to 100% */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto; /* Handles centering when sized fixed (A3/A4) */
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.1);
|
||||
border: 1px solid var(--panel-border); /* Visible canvas boundary */
|
||||
}
|
||||
|
||||
#cy.grid-solid {
|
||||
background-image:
|
||||
linear-gradient(var(--grid-color) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
|
||||
background-size: var(--grid-size) var(--grid-size);
|
||||
}
|
||||
|
||||
#cy.grid-dashed {
|
||||
background-image:
|
||||
radial-gradient(var(--grid-color) 1px, transparent 1px);
|
||||
background-size: var(--grid-size) var(--grid-size);
|
||||
}
|
||||
|
||||
/* Inventory Panel Overlay (Legacy - handled in analysis.css) */
|
||||
/* .inventory-panel { ... } */
|
||||
|
||||
.inventory-header {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
color: var(--sub-text);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inventory-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.inventory-item .count {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 24px 30px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.settings-group h3 {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--sub-text);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.setting-item select,
|
||||
.setting-item input[type="number"],
|
||||
.setting-item input[type="text"] {
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.setting-item select:focus,
|
||||
.setting-item input:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.setting-item select option {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.setting-item input[type="color"] {
|
||||
appearance: none;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.setting-item input[type="color"]::-webkit-color-swatch {
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20px 30px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
/* Properties Sidebar Styles */
|
||||
#properties-sidebar {
|
||||
position: fixed;
|
||||
right: -320px; /* Hidden by default */
|
||||
top: 60px; /* Below header */
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-left: 1px solid var(--panel-border);
|
||||
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.3);
|
||||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#properties-sidebar.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.close-sidebar {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: var(--sub-text);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-sidebar:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.prop-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.prop-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.prop-row .prop-group {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prop-group.horizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.prop-group.horizontal label {
|
||||
flex: 0 0 80px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prop-group.horizontal .prop-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.prop-group label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--sub-text);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.prop-input {
|
||||
width: 100%;
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 8px;
|
||||
padding: 9px 12px;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prop-input:focus {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--item-hover-bg);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
background: rgba(var(--bg-rgb), 0.05);
|
||||
}
|
||||
|
||||
.btn-apply {
|
||||
flex: 1;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-apply:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Toggle Switch Styles */
|
||||
.toggle-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding: 12px 14px;
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toggle-switch:hover {
|
||||
background: var(--item-hover-bg);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.toggle-switch span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch-slider {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: #475569;
|
||||
border-radius: 20px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.switch-slider:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .switch-slider {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .switch-slider:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
/* Multi-Selection Alignment UI */
|
||||
.alignment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.align-btn {
|
||||
aspect-ratio: 1;
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 8px;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.align-btn:hover:not(:disabled) {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.align-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Color Input Consistency */
|
||||
.input-with-color {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-color .prop-input[type="color"] {
|
||||
width: 44px;
|
||||
height: 38px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-with-color .prop-input[type="color"]::-webkit-color-swatch {
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Danger variant for toggle-switch */
|
||||
.toggle-switch.danger input:checked + .switch-slider {
|
||||
background: #ef4444;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/* settings_panel.css - Professional Sliding Settings Panel */
|
||||
|
||||
.settings-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: -420px; /* Hidden by default */
|
||||
width: 400px;
|
||||
height: calc(100vh - 20px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-panel.active {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.header-title i {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar Tabs */
|
||||
.settings-sidebar {
|
||||
width: 100px;
|
||||
background: var(--item-bg);
|
||||
border-right: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
padding: 18px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--sub-text);
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-tab i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.settings-tab span {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: var(--text-color);
|
||||
background: var(--item-hover-bg);
|
||||
}
|
||||
|
||||
.settings-tab.active {
|
||||
color: var(--accent-color);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 3px solid var(--accent-color);
|
||||
}
|
||||
|
||||
/* Body Content */
|
||||
.settings-body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: rgba(var(--bg-rgb), 0.1);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 30px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
font-size: 11px;
|
||||
color: var(--sub-text);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.8px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.setting-info .label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.setting-info .desc {
|
||||
font-size: 11px;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.setting-ctrl select,
|
||||
.setting-ctrl input[type="number"],
|
||||
.setting-ctrl input[type="text"] {
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
color: var(--text-color);
|
||||
padding: 7px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.setting-ctrl select:focus,
|
||||
.setting-ctrl input:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Toggle switch adjustments within settings */
|
||||
.toggle-switch {
|
||||
background: var(--item-bg) !important;
|
||||
border: 1px solid var(--panel-border) !important;
|
||||
}
|
||||
|
||||
.toggle-switch:hover {
|
||||
background: var(--item-hover-bg) !important;
|
||||
border-color: var(--accent-color) !important;
|
||||
}
|
||||
|
||||
.toggle-switch .label {
|
||||
color: var(--sub-text) !important;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
transition: all 0.2s;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 260px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 80px;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 80px;
|
||||
transition: padding 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-header {
|
||||
padding: 24px 0;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--sub-text);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-toggle {
|
||||
order: -1; /* Toggle button first when collapsed */
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background: var(--item-bg);
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: opacity 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .logo-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
min-width: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
padding: 0 24px 20px;
|
||||
position: relative;
|
||||
transition: padding 0.3s;
|
||||
}
|
||||
|
||||
.search-container i {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 13px;
|
||||
font-size: 14px;
|
||||
color: var(--sub-text);
|
||||
z-index: 5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#asset-search {
|
||||
width: 100%;
|
||||
background: var(--item-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
padding: 10px 15px 10px 40px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
#asset-search:focus {
|
||||
background: var(--item-hover-bg);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .search-container {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed #asset-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .search-container i {
|
||||
font-size: 18px;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
position: static;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* Sidebar Footer Settings */
|
||||
.sidebar-footer {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: auto; /* Push to bottom */
|
||||
}
|
||||
|
||||
.footer-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--item-bg);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.footer-btn:hover {
|
||||
background: var(--item-hover-bg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#settings-btn:hover {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#system-menu-btn.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer-text p {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-text small {
|
||||
font-size: 9px;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-footer {
|
||||
padding: 20px 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .footer-text {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
.floating-window {
|
||||
position: fixed;
|
||||
background: var(--sidebar-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: win-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes win-appear {
|
||||
from { opacity: 0; transform: scale(0.9) translateY(20px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.win-header {
|
||||
padding: 12px 20px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.win-header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.win-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.win-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.win-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--sub-text);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.win-btn:hover {
|
||||
background: var(--item-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.win-btn.win-close:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.floating-window.minimized {
|
||||
height: 48px !important;
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
.floating-window.minimized .win-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.win-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Studio Specific Polish */
|
||||
.studio-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.studio-modal .preview-area {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .floating-window {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
Reference in New Issue
Block a user