From 35843598331fe76caca3ec0beba3d4715a258858 Mon Sep 17 00:00:00 2001 From: CODEX Date: Sat, 20 Jun 2026 21:17:16 +0300 Subject: [PATCH] Apply BIM glass window material --- frontend/dcViewer.css | 204 ++++++++++++++++++++++++------------------ frontend/index.html | 2 +- 2 files changed, 118 insertions(+), 88 deletions(-) diff --git a/frontend/dcViewer.css b/frontend/dcViewer.css index ed53bda..36d8dcd 100644 --- a/frontend/dcViewer.css +++ b/frontend/dcViewer.css @@ -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); diff --git a/frontend/index.html b/frontend/index.html index be6e819..0ba7f3f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -134,7 +134,7 @@ - +