Refine SEO light theme and environment controls
This commit is contained in:
DCCONSTRUCTIONS
+146
-37
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user