SILVER
/
NODEDC_BIM_VIEWER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply BIM glass window material

This commit is contained in:
CODEX 2026-06-20 21:17:16 +03:00
parent 778a56ea39
commit 3584359833
2 changed files with 118 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
frontend/dcViewer.css
View File

@ -73,12 +73,22 @@
--nodedc-header-dropdown-item-hover-bg: rgba(42, 42, 46, 0.86); --nodedc-header-dropdown-item-hover-bg: rgba(42, 42, 46, 0.86);
--nodedc-header-dropdown-item-active-bg: rgba(47, 47, 52, 0.96); --nodedc-header-dropdown-item-active-bg: rgba(47, 47, 52, 0.96);
--nodedc-header-dropdown-item-active-color: #ffffff; --nodedc-header-dropdown-item-active-color: #ffffff;
--nodedc-glass-panel-bg: rgba(28, 28, 30, 0.72);
--nodedc-glass-panel-bg-strong: rgba(28, 28, 30, 0.82);
--nodedc-glass-panel-bg-soft: rgba(28, 28, 30, 0.56);
--nodedc-glass-panel-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.014) 100%), var(--nodedc-glass-panel-bg);
--nodedc-glass-panel-surface-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.016) 100%), var(--nodedc-glass-panel-bg-strong);
--nodedc-glass-section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(255, 255, 255, 0.032);
--nodedc-glass-outline: rgba(255, 255, 255, 0.075);
--nodedc-glass-outline-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.058) 56%, rgba(255, 255, 255, 0.034) 100%);
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 22px 72px rgba(0, 0, 0, 0.42);
--nodedc-glass-filter: blur(30px) saturate(1.26) brightness(1.05);
--nodedc-glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%), rgba(255, 255, 255, 0.048);
--nodedc-glass-control-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.026) 100%), rgba(255, 255, 255, 0.066);
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--text-primary: rgba(255, 255, 255, 0.96); --text-primary: rgba(255, 255, 255, 0.96);
--section-toolbar-left: calc(12px + var(--tb-size, 25px) + var(--tb-gap, 10px)); --section-toolbar-left: calc(12px + var(--tb-size, 25px) + var(--tb-gap, 10px));
--section-toolbar-bottom: 123px; --section-toolbar-bottom: 123px;
--nodedc-glass-control-bg: var(--modal-element);
--nodedc-glass-control-hover: color-mix(in srgb, var(--modal-element) 86%, white 8%);
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01);
--tb-size: 25px; --tb-size: 25px;
--tb-gap: 10px; --tb-gap: 10px;
--tb-radius: 7px; --tb-radius: 7px;
@ -389,11 +399,13 @@ header {
width: 320px; width: 320px;
max-height: calc(100vh - 90px); max-height: calc(100vh - 90px);
overflow: auto; overflow: auto;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 16px); border-radius: var(--modal-radius, 16px);
padding: 12px; padding: 12px;
box-shadow: var(--shadow); box-shadow: var(--nodedc-glass-panel-shadow);
backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@ -418,7 +430,7 @@ header {
min-height: var(--env-control-h); min-height: var(--env-control-h);
margin: -12px -12px 0; margin: -12px -12px 0;
padding: 12px 12px 8px 16px; padding: 12px 12px 8px 16px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface-strong);
border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0; border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
color: var(--text); color: var(--text);
font-weight: 700; font-weight: 700;
@ -535,12 +547,13 @@ header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 16px); border-radius: var(--modal-radius, 16px);
box-shadow: var(--shadow); box-shadow: var(--nodedc-glass-panel-shadow);
z-index: 11; z-index: 11;
backdrop-filter: blur(16px); backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.comments-panel.hidden { .comments-panel.hidden {
@ -557,7 +570,7 @@ header {
gap: 10px; gap: 10px;
min-height: calc(var(--env-control-h) + 20px); min-height: calc(var(--env-control-h) + 20px);
padding: 12px 12px 8px 16px; padding: 12px 12px 8px 16px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface-strong);
border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0; border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
color: var(--text); color: var(--text);
font-weight: 700; font-weight: 700;
@ -601,9 +614,9 @@ header {
width: 100%; width: 100%;
min-height: 58px; min-height: 58px;
padding: 10px; padding: 10px;
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 10px); border-radius: var(--modal-radius, 10px);
background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent); background: var(--nodedc-glass-control-bg);
color: var(--text); color: var(--text);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@ -863,16 +876,16 @@ header {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border-radius: var(--modal-radius, 10px); border-radius: var(--modal-radius, 10px);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
color: var(--text); color: var(--text);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
} }
.project-name-input:focus { .project-name-input:focus {
border-color: var(--modal-element-outline); border-color: var(--nodedc-glass-outline);
box-shadow: 0 0 0 2px rgba(255, 234, 0, 0.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--modal-btn-primary, var(--accent)) 18%, transparent);
} }
.inline-error { .inline-error {
@ -882,7 +895,7 @@ header {
.primary-btn, .primary-btn,
.secondary-btn { .secondary-btn {
border-radius: var(--modal-radius, 12px); border-radius: var(--modal-radius, 12px);
border: 1px solid var(--template-outline); border: 1px solid var(--nodedc-glass-outline);
font-weight: 700; font-weight: 700;
padding: 12px; padding: 12px;
width: 100%; width: 100%;
@ -891,9 +904,9 @@ header {
} }
.danger-btn { .danger-btn {
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
color: var(--text); color: var(--text);
border-color: var(--modal-border); border-color: var(--nodedc-glass-outline);
} }
.danger-btn:not(:disabled):hover { .danger-btn:not(:disabled):hover {
@ -918,13 +931,16 @@ header {
} }
.secondary-btn { .secondary-btn {
background: color-mix(in srgb, var(--modal-btn-secondary, var(--modal-focus)) var(--modal-focus-alpha, 100%), transparent); background: var(--nodedc-glass-control-bg);
color: var(--text); color: var(--text);
border-color: var(--modal-border); border-color: var(--nodedc-glass-outline);
box-shadow: var(--nodedc-glass-control-shadow);
backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.secondary-btn:not(:disabled):hover { .secondary-btn:not(:disabled):hover {
background: var(--modal-border); background: var(--nodedc-glass-control-hover);
} }
#saveProjectSection { #saveProjectSection {
@ -940,9 +956,9 @@ header {
} }
.log { .log {
background: var(--modal-focus); background: var(--nodedc-glass-section-bg);
border-radius: var(--modal-radius, 12px); border-radius: var(--modal-radius, 12px);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
min-height: 100px; min-height: 100px;
max-height: 140px; max-height: 140px;
overflow: auto; overflow: auto;
@ -987,9 +1003,9 @@ header {
} }
.tree { .tree {
background: var(--modal-element); background: var(--nodedc-glass-section-bg);
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--modal-element-outline, var(--modal-element)); border: 1px solid var(--nodedc-glass-outline);
height: 260px; height: 260px;
overflow: auto; overflow: auto;
padding: 8px; padding: 8px;
@ -1084,8 +1100,8 @@ header {
vertical-align: -1px; vertical-align: -1px;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
box-shadow: inset 0 0 0 1px var(--modal-element-outline, var(--modal-element)); box-shadow: var(--nodedc-glass-control-shadow);
cursor: pointer; cursor: pointer;
transition: transition:
background-color 160ms ease, background-color 160ms ease,
@ -1239,7 +1255,7 @@ header {
overflow: auto; overflow: auto;
border: 0; border: 0;
border-radius: 20px; border-radius: 20px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface-strong);
padding: 7px; padding: 7px;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055);
scrollbar-width: none; scrollbar-width: none;
@ -1276,7 +1292,7 @@ header {
} }
.nodedc-dropdown-option.nodedc-select__option[data-selected="true"] { .nodedc-dropdown-option.nodedc-select__option[data-selected="true"] {
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
color: rgba(255, 255, 255, 0.96); color: rgba(255, 255, 255, 0.96);
} }
@ -1304,8 +1320,8 @@ header {
--env-glass-control-shadow: var(--nodedc-glass-control-shadow); --env-glass-control-shadow: var(--nodedc-glass-control-shadow);
left: var(--templates-left, 72px); left: var(--templates-left, 72px);
bottom: var(--templates-bottom, 12px); bottom: var(--templates-bottom, 12px);
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 14px); border-radius: var(--modal-radius, 14px);
padding: 12px; padding: 12px;
display: grid; display: grid;
@ -1314,9 +1330,10 @@ header {
min-height: 200px; min-height: 200px;
max-height: 420px; max-height: 420px;
overflow: auto; overflow: auto;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); box-shadow: var(--nodedc-glass-panel-shadow);
z-index: 20; z-index: 20;
backdrop-filter: blur(5px); backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.templates-panel.hidden { .templates-panel.hidden {
@ -1336,7 +1353,7 @@ header {
margin: -12px -12px 0; margin: -12px -12px 0;
padding: 12px 12px 8px 16px; padding: 12px 12px 8px 16px;
border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0; border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface-strong);
color: var(--text); color: var(--text);
font-weight: 700; font-weight: 700;
} }
@ -1396,8 +1413,8 @@ header {
} }
.templates-panel .example-card { .templates-panel .example-card {
background: color-mix(in srgb, var(--project-btn-fill) var(--modal-focus-alpha, 100%), transparent); background: var(--nodedc-glass-control-bg);
border: 1px solid var(--project-btn-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: 12px; border-radius: 12px;
padding: 10px 12px; padding: 10px 12px;
text-align: left; text-align: left;
@ -1456,8 +1473,8 @@ header {
gap: 6px; gap: 6px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 10px; border-radius: 10px;
background: var(--modal-focus); background: var(--nodedc-glass-control-bg);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
color: var(--text); color: var(--text);
font-size: 12px; font-size: 12px;
} }
@ -1478,7 +1495,8 @@ header {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(12, 17, 24, 0.6); background: rgba(12, 17, 24, 0.6);
backdrop-filter: blur(2px); backdrop-filter: blur(10px) saturate(1.08);
-webkit-backdrop-filter: blur(10px) saturate(1.08);
z-index: 35; z-index: 35;
} }
@ -1494,6 +1512,15 @@ header {
pointer-events: none; pointer-events: none;
} }
#saveProjectBackdrop,
#deleteProjectBackdrop,
#shareModalBackdrop {
z-index: 60000;
background: rgba(10, 12, 16, 0.38);
backdrop-filter: blur(18px) saturate(1.18) brightness(0.82);
-webkit-backdrop-filter: blur(18px) saturate(1.18) brightness(0.82);
}
.templates-panel.measurement-modal { .templates-panel.measurement-modal {
left: var(--measure-left, var(--templates-left, 72px)); left: var(--measure-left, var(--templates-left, 72px));
bottom: var(--measure-bottom, var(--templates-bottom, 12px)); bottom: var(--measure-bottom, var(--templates-bottom, 12px));
@ -1525,14 +1552,16 @@ header {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: min(460px, calc(100vw - 40px)); width: min(460px, calc(100vw - 40px));
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 1), transparent); background: var(--nodedc-glass-panel-surface-strong);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 14px); border-radius: var(--modal-radius, 14px);
padding: 16px; padding: 16px;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); box-shadow: var(--nodedc-glass-panel-shadow), 0 32px 96px rgba(0, 0, 0, 0.58);
z-index: 45; z-index: 60010;
display: grid; display: grid;
gap: 10px; gap: 10px;
backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.save-project-modal.hidden { .save-project-modal.hidden {
@ -1569,16 +1598,16 @@ header {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
border-radius: var(--modal-radius, 10px); border-radius: var(--modal-radius, 10px);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
color: var(--text); color: var(--text);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
} }
.save-project-modal input[type="text"]:focus { .save-project-modal input[type="text"]:focus {
border-color: var(--modal-element-outline); border-color: var(--nodedc-glass-outline);
box-shadow: 0 0 0 2px rgba(255, 234, 0, 0.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--modal-btn-primary, var(--accent)) 18%, transparent);
} }
.save-project-modal #shareLinkInput, .save-project-modal #shareLinkInput,
@ -1633,10 +1662,10 @@ header {
position: fixed; position: fixed;
--env-control-h: 42px; --env-control-h: 42px;
--ops-comment-accent: var(--comment-target-active, #c4ff67); --ops-comment-accent: var(--comment-target-active, #c4ff67);
--ops-detail-bg: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); --ops-detail-bg: var(--nodedc-glass-panel-bg);
--ops-detail-surface: rgba(28, 28, 31, 0.76); --ops-detail-surface: rgba(255, 255, 255, 0.048);
--ops-detail-surface-strong: rgba(32, 32, 35, 0.92); --ops-detail-surface-strong: rgba(255, 255, 255, 0.064);
--ops-detail-border: rgba(255, 255, 255, 0.055); --ops-detail-border: var(--nodedc-glass-outline);
--ops-detail-muted: rgba(229, 231, 235, 0.54); --ops-detail-muted: rgba(229, 231, 235, 0.54);
top: 34px; top: 34px;
left: calc(50vw - 440px); left: calc(50vw - 440px);
@ -1647,13 +1676,11 @@ header {
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 30px; border-radius: 30px;
background: background: var(--nodedc-glass-panel-surface);
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)), box-shadow: var(--nodedc-glass-panel-shadow), 0 28px 80px rgba(0, 0, 0, 0.48);
var(--ops-detail-bg);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.64);
z-index: 30050; z-index: 30050;
backdrop-filter: blur(30px) saturate(1.08); backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: blur(30px) saturate(1.08); -webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.comment-card-modal.is-expanded { .comment-card-modal.is-expanded {
@ -1781,7 +1808,7 @@ header {
padding: 0; padding: 0;
border: 0; border: 0;
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.038); background: var(--nodedc-glass-control-bg);
color: rgba(245, 245, 250, 0.78); color: rgba(245, 245, 250, 0.78);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -1797,7 +1824,7 @@ header {
.ops-detail-icon-btn:hover, .ops-detail-icon-btn:hover,
.ops-detail-mini-btn:hover, .ops-detail-mini-btn:hover,
.ops-activity-send:hover { .ops-activity-send:hover {
background: rgba(255, 255, 255, 0.07); background: var(--nodedc-glass-control-hover);
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
} }
@ -1914,7 +1941,7 @@ header {
padding: 0 18px; padding: 0 18px;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.034); background: var(--nodedc-glass-control-bg);
color: rgba(245, 245, 250, 0.78); color: rgba(245, 245, 250, 0.78);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
@ -1923,7 +1950,7 @@ header {
} }
.ops-detail-pill:hover { .ops-detail-pill:hover {
background: rgba(255, 255, 255, 0.065); background: var(--nodedc-glass-control-hover);
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
} }
@ -1968,7 +1995,7 @@ header {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--ops-detail-border); border: 1px solid var(--ops-detail-border);
border-radius: 15px; border-radius: 15px;
background: rgba(255, 255, 255, 0.026); background: var(--nodedc-glass-control-bg);
} }
.ops-comment-subitem[data-kind="text"] { .ops-comment-subitem[data-kind="text"] {
@ -2025,7 +2052,7 @@ header {
padding: 16px 18px; padding: 16px 18px;
border: 0; border: 0;
border-radius: 21px; border-radius: 21px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.024)); background: var(--nodedc-glass-control-bg);
transition: background 140ms ease, box-shadow 140ms ease; transition: background 140ms ease, box-shadow 140ms ease;
} }
@ -2181,7 +2208,7 @@ header {
padding: 16px; padding: 16px;
border: 1px solid var(--ops-detail-border); border: 1px solid var(--ops-detail-border);
border-radius: 24px; border-radius: 24px;
background: rgba(22, 23, 25, 0.78); background: var(--nodedc-glass-section-bg);
} }
.ops-activity-composer > span { .ops-activity-composer > span {
@ -2214,7 +2241,7 @@ header {
.ops-activity-send { .ops-activity-send {
margin-left: auto; margin-left: auto;
background: rgba(255, 255, 255, 0.16); background: var(--nodedc-glass-control-bg);
color: rgba(245, 245, 250, 0.74); color: rgba(245, 245, 250, 0.74);
} }
@ -2278,7 +2305,7 @@ header {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px; gap: 10px;
padding: 14px 32px 18px; padding: 14px 32px 18px;
background: var(--ops-detail-bg); background: var(--nodedc-glass-panel-surface-strong);
border-top: 1px solid rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.04);
} }
@ -2346,8 +2373,8 @@ header {
--env-glass-control-shadow: var(--nodedc-glass-control-shadow); --env-glass-control-shadow: var(--nodedc-glass-control-shadow);
left: var(--settings-left, 72px); left: var(--settings-left, 72px);
bottom: var(--settings-bottom, 12px); bottom: var(--settings-bottom, 12px);
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 14px); border-radius: var(--modal-radius, 14px);
padding: 12px; padding: 12px;
display: grid; display: grid;
@ -2356,9 +2383,11 @@ header {
min-height: 420px; min-height: 420px;
max-height: min(720px, calc(100vh - 72px)); max-height: min(720px, calc(100vh - 72px));
overflow: auto; overflow: auto;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); box-shadow: var(--nodedc-glass-panel-shadow);
z-index: 22; z-index: 22;
font-size: 12px; font-size: 12px;
backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.settings-panel .settings-header { .settings-panel .settings-header {
@ -2375,7 +2404,7 @@ header {
min-height: var(--env-control-h); min-height: var(--env-control-h);
margin: -12px -12px 0; margin: -12px -12px 0;
padding: 12px 12px 8px 16px; padding: 12px 12px 8px 16px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface-strong);
border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0; border-radius: var(--modal-radius, 14px) var(--modal-radius, 14px) 0 0;
} }
@ -2425,10 +2454,10 @@ header {
} }
.settings-panel .settings-section { .settings-panel .settings-section {
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 10px); border-radius: var(--modal-radius, 10px);
padding: 8px; padding: 8px;
background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent); background: var(--nodedc-glass-section-bg);
display: grid; display: grid;
gap: 8px; gap: 8px;
} }
@ -2865,8 +2894,8 @@ header {
.settings-panel input[type="number"] { .settings-panel input[type="number"] {
width: 100%; width: 100%;
max-width: 86px; max-width: 86px;
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
border: 1px solid var(--modal-element-outline, var(--modal-element)); border: 1px solid var(--nodedc-glass-outline);
border-radius: 8px; border-radius: 8px;
color: var(--text); color: var(--text);
padding: 5px 6px; padding: 5px 6px;
@ -2929,8 +2958,8 @@ header {
} }
.log { .log {
background: var(--modal-element); background: var(--nodedc-glass-section-bg);
border: 1px solid var(--modal-element-outline, var(--modal-element)); border: 1px solid var(--nodedc-glass-outline);
} }
@ -3088,8 +3117,8 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
position: fixed; position: fixed;
left: var(--templates-left, 72px); left: var(--templates-left, 72px);
bottom: var(--templates-bottom, 12px); bottom: var(--templates-bottom, 12px);
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--nodedc-glass-panel-surface);
border: 1px solid var(--modal-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--modal-radius, 14px); border-radius: var(--modal-radius, 14px);
padding: 10px; padding: 10px;
display: grid; display: grid;
@ -3098,14 +3127,15 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
min-height: 200px; min-height: 200px;
max-height: 420px; max-height: 420px;
overflow: auto; overflow: auto;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); box-shadow: var(--nodedc-glass-panel-shadow);
z-index: 20; z-index: 20;
backdrop-filter: blur(5px); backdrop-filter: var(--nodedc-glass-filter);
-webkit-backdrop-filter: var(--nodedc-glass-filter);
} }
.example-card { .example-card {
background: color-mix(in srgb, var(--project-btn-fill) var(--modal-focus-alpha, 100%), transparent); background: var(--nodedc-glass-control-bg);
border: 1px solid var(--project-btn-border); border: 1px solid var(--nodedc-glass-outline);
border-radius: 12px; border-radius: 12px;
padding: 12px 14px; padding: 12px 14px;
cursor: pointer; cursor: pointer;
@ -3163,8 +3193,8 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
.transform-grid input { .transform-grid input {
flex: 1; flex: 1;
background: var(--modal-element); background: var(--nodedc-glass-control-bg);
border: 1px solid var(--modal-element-outline, var(--modal-element)); border: 1px solid var(--nodedc-glass-outline);
border-radius: 8px; border-radius: 8px;
padding: 6px 8px; padding: 6px 8px;
color: var(--text); color: var(--text);

2
frontend/index.html
View File

@ -134,7 +134,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./dcViewer.css?v=29"> <link rel="stylesheet" href="./dcViewer.css?v=30">
</head> </head>
<body> <body>
<header> <header>