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