Add pink media stage and sharing modal system
This commit is contained in:
DCCONSTRUCTIONS
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodedc/ui-core",
|
||||
"version": "0.4.0",
|
||||
"version": "0.5.0",
|
||||
"type": "module",
|
||||
"files": ["dist", "styles.css"],
|
||||
"main": "./dist/index.js",
|
||||
@@ -17,6 +17,6 @@
|
||||
"typecheck": "tsc -p tsconfig.json --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodedc/tokens": "0.4.0"
|
||||
"@nodedc/tokens": "0.5.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,6 +180,7 @@
|
||||
.nodedc-button__icon > svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
transform: scale(var(--nodedc-icon-glyph-scale));
|
||||
}
|
||||
|
||||
.nodedc-icon-button {
|
||||
@@ -213,6 +214,16 @@
|
||||
.nodedc-icon-button > svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
transform: scale(var(--nodedc-icon-glyph-scale));
|
||||
}
|
||||
|
||||
.nodedc-admin-panel__nav-icon > svg,
|
||||
.nodedc-application-panel__action > svg,
|
||||
.nodedc-dropdown-option svg,
|
||||
.nodedc-select__toggle > svg,
|
||||
.nodedc-confirmation__icon > svg,
|
||||
.nodedc-media-preview > svg {
|
||||
transform: scale(var(--nodedc-icon-glyph-scale));
|
||||
}
|
||||
|
||||
.nodedc-field {
|
||||
@@ -1905,6 +1916,212 @@ textarea.nodedc-field__control {
|
||||
gap: var(--nodedc-space-2);
|
||||
}
|
||||
|
||||
.nodedc-window.nodedc-share-access-window {
|
||||
width: min(37.5rem, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.nodedc-window.nodedc-share-access-window,
|
||||
.nodedc-share-access-window .nodedc-window__body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.nodedc-share-access {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__members,
|
||||
.nodedc-share-access__member-list,
|
||||
.nodedc-share-access__identity,
|
||||
.nodedc-share-access__readonly {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nodedc-share-access__members {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__section-label {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-sm);
|
||||
}
|
||||
|
||||
.nodedc-share-access__member-list {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.45rem);
|
||||
left: 0;
|
||||
z-index: var(--nodedc-layer-popover);
|
||||
width: 100%;
|
||||
max-height: 18rem;
|
||||
gap: 0.25rem;
|
||||
overflow-y: auto;
|
||||
border-radius: var(--nodedc-radius-panel);
|
||||
background: var(--nodedc-glass-panel-surface-strong);
|
||||
padding: 0.6rem;
|
||||
box-shadow: var(--nodedc-glass-dropdown-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2);
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 5.375rem;
|
||||
height: 2.375rem;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: var(--nodedc-text-secondary);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary-avatars {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 4.25rem;
|
||||
height: 2.125rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary-avatar {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
display: grid;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: rgba(42, 43, 46, 0.96);
|
||||
color: var(--nodedc-text-primary);
|
||||
box-shadow: 0 0 0 1px var(--nodedc-canvas);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary-count {
|
||||
position: absolute;
|
||||
top: -0.05rem;
|
||||
right: 0.1rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.nodedc-share-access__member {
|
||||
display: grid;
|
||||
min-height: var(--nodedc-control-height);
|
||||
grid-template-columns: 2.25rem minmax(0, 1fr) 8.75rem auto;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
border-radius: var(--nodedc-radius-control-compact);
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
padding: 0.28rem 0.35rem 0.28rem 0.4rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__avatar {
|
||||
display: grid;
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.nodedc-share-access__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nodedc-share-access__identity {
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__identity strong,
|
||||
.nodedc-share-access__identity small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nodedc-share-access__identity strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: var(--nodedc-font-size-md);
|
||||
}
|
||||
|
||||
.nodedc-share-access__identity small,
|
||||
.nodedc-share-access__role {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
}
|
||||
|
||||
.nodedc-share-access__member .nodedc-select-trigger {
|
||||
min-height: var(--nodedc-control-height-compact);
|
||||
}
|
||||
|
||||
.nodedc-share-access__member .nodedc-icon-button {
|
||||
width: var(--nodedc-control-height-compact);
|
||||
height: var(--nodedc-control-height-compact);
|
||||
flex-basis: var(--nodedc-control-height-compact);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nodedc-share-access__empty,
|
||||
.nodedc-share-access__readonly {
|
||||
border-radius: var(--nodedc-radius-control-compact);
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
color: var(--nodedc-text-muted);
|
||||
padding: 0.9rem 1rem;
|
||||
font-size: var(--nodedc-font-size-sm);
|
||||
}
|
||||
|
||||
.nodedc-share-access__invite {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 11rem;
|
||||
align-items: end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__readonly {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__readonly strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.nodedc-share-access__message {
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: var(--nodedc-font-size-sm);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.nodedc-share-access__message[data-tone="success"],
|
||||
.nodedc-share-access__message[data-tone="accent"] {
|
||||
color: rgb(var(--nodedc-accent-rgb));
|
||||
}
|
||||
|
||||
.nodedc-share-access__message[data-tone="danger"] {
|
||||
color: rgb(var(--nodedc-danger-rgb));
|
||||
}
|
||||
|
||||
.nodedc-confirmation {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
@@ -2144,6 +2361,24 @@ textarea.nodedc-field__control {
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__member {
|
||||
grid-template-columns: 2.25rem minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.nodedc-share-access__member-list {
|
||||
position: static;
|
||||
max-height: 14rem;
|
||||
}
|
||||
|
||||
.nodedc-share-access__member .nodedc-dropdown-anchor,
|
||||
.nodedc-share-access__role {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
|
||||
.nodedc-share-access__invite {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nodedc-control-row {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
|
||||
Reference in New Issue
Block a user