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

Refine SEO light theme and environment controls

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 20:22:42 +03:00
parent f1e28c267a
commit 4c74c22a6e
21 changed files with 437 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@nodedc/ui-core",
"version": "0.5.0",
"version": "0.5.1",
"type": "module",
"files": ["dist", "styles.css"],
"main": "./dist/index.js",
@@ -17,6 +17,6 @@
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
"@nodedc/tokens": "0.5.0"
"@nodedc/tokens": "0.5.1"
}
}
packages/ui-core/styles.css
+146 -37
View File
@@ -723,24 +723,137 @@ textarea.nodedc-field__control {
box-shadow: var(--nodedc-glass-control-shadow);
}
.nodedc-color-field__picker {
position: relative;
width: 1.625rem;
height: 1.625rem;
overflow: hidden;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-color-value, #000);
.nodedc-color-field__dropdown {
display: contents;
}
.nodedc-color-field__picker input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
.nodedc-color-field__picker {
position: relative;
display: grid;
width: 1.625rem;
height: 1.625rem;
place-items: center;
overflow: hidden;
border: 0;
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: var(--nodedc-color-value, #000);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
cursor: pointer;
}
.nodedc-color-field__picker[data-open="true"],
.nodedc-color-field__picker:focus-visible {
box-shadow: 0 0 0 2px rgba(var(--nodedc-accent-rgb), 0.3), 0 0 0 3px var(--nodedc-canvas);
}
.nodedc-color-field__picker:disabled {
cursor: not-allowed;
opacity: 0.48;
}
.nodedc-color-palette-surface {
width: min(18.5rem, calc(100vw - 1rem));
overflow: visible;
border-radius: var(--nodedc-radius-card);
background: var(--nodedc-glass-panel-surface-strong);
padding: 0.7rem;
}
.nodedc-color-palette {
display: grid;
gap: 0.75rem;
}
.nodedc-color-palette__spectrum {
position: relative;
aspect-ratio: 1.5 / 1;
overflow: hidden;
border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--nodedc-radius-control);
outline: 0;
background:
linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
linear-gradient(to right, rgba(255, 255, 255, 1), var(--nodedc-color-hue));
cursor: crosshair;
touch-action: none;
}
.nodedc-color-palette__spectrum:focus-visible {
box-shadow: 0 0 0 2px rgba(var(--nodedc-accent-rgb), 0.28);
}
.nodedc-color-palette__marker {
position: absolute;
top: var(--nodedc-color-v);
left: var(--nodedc-color-s);
width: 0.82rem;
height: 0.82rem;
border: 2px solid rgba(255, 255, 255, 0.96);
border-radius: var(--nodedc-radius-circle);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
pointer-events: none;
transform: translate(-50%, -50%);
}
.nodedc-color-palette__hue {
display: grid;
gap: 0.35rem;
color: var(--nodedc-text-muted);
font-size: var(--nodedc-font-size-xs);
font-weight: var(--nodedc-font-weight-medium);
}
.nodedc-color-palette__hue input {
width: 100%;
height: 0.7rem;
margin: 0;
appearance: none;
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
cursor: pointer;
}
.nodedc-color-palette__hue input::-webkit-slider-thumb {
width: 0.88rem;
height: 0.88rem;
appearance: none;
border: 2px solid rgba(255, 255, 255, 0.96);
border-radius: var(--nodedc-radius-circle);
background: rgba(12, 12, 15, 0.92);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}
.nodedc-color-palette__hue input::-moz-range-thumb {
width: 0.68rem;
height: 0.68rem;
border: 2px solid rgba(255, 255, 255, 0.96);
border-radius: var(--nodedc-radius-circle);
background: rgba(12, 12, 15, 0.92);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}
.nodedc-color-palette__presets {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 0.35rem;
}
.nodedc-color-palette__presets button {
aspect-ratio: 1;
border: 1px solid var(--nodedc-glass-outline);
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: var(--nodedc-palette-swatch);
cursor: pointer;
}
.nodedc-color-palette__presets button[aria-pressed="true"],
.nodedc-color-palette__presets button:focus-visible {
box-shadow: 0 0 0 2px var(--nodedc-canvas), 0 0 0 3px rgb(var(--nodedc-accent-rgb));
}
.nodedc-color-field__text {
width: 100%;
border: 0;
@@ -1117,12 +1230,10 @@ textarea.nodedc-field__control {
overflow: hidden;
border: 0;
border-radius: var(--nodedc-radius-card);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
rgba(10, 10, 13, 0.9);
background: var(--nodedc-app-panel-surface);
color: var(--nodedc-text-primary);
padding: 1rem;
box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
box-shadow: var(--nodedc-app-panel-shadow);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
animation: nodedc-application-panel-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
@@ -1186,7 +1297,7 @@ textarea.nodedc-field__control {
width: 2.92rem;
height: 2.92rem;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.22);
border: 1px solid var(--nodedc-panel-action-border);
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: transparent;
@@ -1196,7 +1307,7 @@ textarea.nodedc-field__control {
.nodedc-application-panel__action:hover,
.nodedc-application-panel__action:focus-visible {
border-color: rgba(255, 255, 255, 0.3);
border-color: var(--nodedc-panel-action-border-hover);
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
}
@@ -1212,7 +1323,7 @@ textarea.nodedc-field__control {
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
scrollbar-color: var(--nodedc-scrollbar-thumb) transparent;
}
.nodedc-admin-panel {
@@ -1226,12 +1337,10 @@ textarea.nodedc-field__control {
overflow: hidden;
border: 0;
border-radius: var(--nodedc-radius-card);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
rgba(10, 10, 13, 0.9);
background: var(--nodedc-app-panel-surface);
color: var(--nodedc-text-primary);
padding: 1.1rem;
box-shadow: 0 34px 110px rgba(0, 0, 0, 0.52);
box-shadow: var(--nodedc-app-panel-shadow-strong);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
animation: nodedc-admin-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
@@ -1281,7 +1390,7 @@ textarea.nodedc-field__control {
width: 2.92rem;
height: 2.92rem;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.22);
border: 1px solid var(--nodedc-panel-action-border);
border-radius: var(--nodedc-radius-circle);
outline: 0;
background: transparent;
@@ -1290,7 +1399,7 @@ textarea.nodedc-field__control {
}
.nodedc-admin-panel__close:hover {
border-color: rgba(255, 255, 255, 0.3);
border-color: var(--nodedc-panel-action-border-hover);
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
}
@@ -1322,13 +1431,13 @@ textarea.nodedc-field__control {
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.04);
background: var(--nodedc-panel-item-bg);
color: var(--nodedc-text-secondary);
opacity: 0.72;
}
.nodedc-admin-context[data-active="true"] {
background: rgba(74, 74, 74, 0.5);
background: var(--nodedc-panel-item-active-bg);
color: var(--nodedc-text-primary);
opacity: 1;
}
@@ -1378,7 +1487,7 @@ textarea.nodedc-field__control {
flex: 0 0 2.92rem;
place-items: center;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.06);
background: var(--nodedc-panel-icon-bg);
color: var(--nodedc-text-secondary);
}
@@ -1432,7 +1541,7 @@ textarea.nodedc-field__control {
gap: 0.86rem;
border: 0;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.04);
background: var(--nodedc-panel-item-bg);
color: var(--nodedc-text-secondary);
padding: 5px 0.9rem 5px calc(5px + 2.92rem + 0.86rem);
font: inherit;
@@ -1449,22 +1558,22 @@ textarea.nodedc-field__control {
}
.nodedc-admin-panel__nav-item:hover {
background: rgba(255, 255, 255, 0.085);
background: var(--nodedc-panel-item-hover-bg);
color: var(--nodedc-text-primary);
opacity: 0.92;
transform: translateY(-1px);
}
.nodedc-admin-panel__nav-item[data-active="true"] {
background: rgba(255, 255, 255, 0.115);
background: var(--nodedc-panel-item-active-bg);
color: var(--nodedc-text-primary);
opacity: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 10px 22px rgba(0, 0, 0, 0.12);
box-shadow: var(--nodedc-glass-control-shadow), 0 10px 22px rgba(24, 32, 29, 0.12);
}
.nodedc-admin-panel__nav-item:focus-visible {
outline: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 0 1px var(--nodedc-glass-outline), 0 10px 22px rgba(24, 32, 29, 0.12);
}
.nodedc-app-shell__navigation > .nodedc-admin-panel {
@@ -1475,13 +1584,13 @@ textarea.nodedc-field__control {
position: absolute;
top: 50%;
left: 5px;
background: rgba(255, 255, 255, 0.045);
background: var(--nodedc-panel-icon-bg);
transform: translateY(-50%);
}
.nodedc-admin-panel__nav-item[data-active="true"] .nodedc-admin-panel__nav-icon {
background: rgba(247, 248, 244, 0.96);
color: rgb(var(--nodedc-on-accent-rgb));
background: var(--nodedc-panel-active-icon-bg);
color: var(--nodedc-panel-active-icon-color);
}
.nodedc-admin-panel__footer {