mirror of
https://github.com/sotam0316/drawNET_test.git
synced 2026-04-25 03:58:38 +09:00
폴더 및 하위 파일 업로드
This commit is contained in:
sotam0316
Vendored
+9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,306 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVgaY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVgaY.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVgaY.woff2) format('woff2');
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVgaY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/static/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/*
|
||||
drawNET Premium CSS Manifest
|
||||
This file imports modules to keep the production bundle organized.
|
||||
*/
|
||||
|
||||
@import "modules/base.css";
|
||||
@import "modules/sidebar.css";
|
||||
@import "modules/sidebar_footer.css";
|
||||
@import "modules/assets.css";
|
||||
@import "modules/flyout.css";
|
||||
@import "modules/header.css";
|
||||
@import "modules/editor.css";
|
||||
@import "modules/layout.css";
|
||||
@import "modules/animations.css";
|
||||
@import "modules/modal.css";
|
||||
@import "modules/settings_panel.css";
|
||||
@import "modules/properties_sidebar.css";
|
||||
|
||||
/* Floating Context Menu */
|
||||
.floating-menu {
|
||||
background: rgba(30, 41, 59, 0.85); /* Slate 800-ish with glassmorphism */
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
||||
padding: 6px;
|
||||
min-width: 180px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #f1f5f9;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #3b82f6; /* Blue 500 */
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
padding: 6px 14px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #475569;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.menu-icon-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: #94a3b8;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon-btn i.fa-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* --- X6 Port Styles --- */
|
||||
.x6-port {
|
||||
visibility: hidden;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.x6-node:hover .x6-port {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.x6-port circle {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.x6-port circle:hover {
|
||||
fill: #3b82f6 !important;
|
||||
r: 6 !important;
|
||||
}
|
||||
|
||||
/* --- X6 Edge Selection Highlight --- */
|
||||
.x6-edge-selected path {
|
||||
stroke: #3b82f6 !important;
|
||||
stroke-width: 3px !important;
|
||||
filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.8));
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Flow animation for selected flow lines */
|
||||
.x6-edge-selected.flow-animation path {
|
||||
stroke-width: 4px !important;
|
||||
}
|
||||
|
||||
/* Mini buttons for editor actions */
|
||||
.footer-btn.mini {
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
height: 28px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
color: #3b82f6;
|
||||
border-radius: 6px;
|
||||
margin-left: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer-btn.mini:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* --- Export Loading Overlay --- */
|
||||
.export-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(15, 23, 42, 0.65); /* Slate 900 with transparency */
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.export-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.1);
|
||||
border-left-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.export-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
/*
|
||||
* drawNET Studio - Asset Management Styles
|
||||
*/
|
||||
|
||||
body.studio-body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #0f172a;
|
||||
color: #f8fafc;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.studio-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 320px;
|
||||
grid-template-rows: 60px 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.studio-header {
|
||||
grid-column: 1 / 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.studio-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.header-metadata {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 9px;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.meta-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #f8fafc;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.meta-input:focus {
|
||||
outline: none;
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
.meta-input.highlight {
|
||||
color: #38bdf8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Source Panel (Left) */
|
||||
.source-panel {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
.upload-area i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
color: #38bdf8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.source-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.source-item i {
|
||||
width: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Workspace (Center) */
|
||||
.workspace {
|
||||
background: #020617;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.asset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
background: rgba(30, 41, 59, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.asset-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
.asset-card.selected {
|
||||
border-color: #38bdf8;
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
box-shadow: 0 0 0 1px #38bdf8;
|
||||
}
|
||||
|
||||
.asset-preview {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.asset-preview img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Comparison View */
|
||||
.comparison-view {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.comp-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.comp-preview {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.comp-preview img, .comp-preview svg {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.comp-label {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.choice-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #94a3b8;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.choice-btn.active {
|
||||
background: #38bdf8;
|
||||
color: #0f172a;
|
||||
border-color: #38bdf8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Property Panel (Right) */
|
||||
.property-panel {
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.property-empty {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.property-empty i {
|
||||
font-size: 30px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.property-empty p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #38bdf8;
|
||||
color: #0f172a;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #7dd3fc;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
text-decoration: none;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 32px;
|
||||
color: #334155;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/* Ghost file to prevent MIME type 404 errors in legacy/library environments */
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user