712 lines
14 KiB
CSS

.identity {
display: flex;
min-width: 0;
align-items: center;
gap: var(--space-3);
}
.thumb {
position: relative;
display: inline-flex;
width: 36px;
height: 36px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card-strong);
color: var(--text-secondary);
}
.giftGlobalBroadcastBadge {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
border-bottom-right-radius: 6px;
background: linear-gradient(135deg, #e85cff 0%, #7a3cff 100%);
color: #fff;
font-size: 10px;
box-shadow: 0 2px 6px rgb(122 60 255 / 28%);
}
.globalBroadcastEffect {
display: inline-flex;
width: max-content;
max-width: 100%;
align-items: center;
border: 1px solid rgb(122 60 255 / 26%);
border-radius: var(--radius-sm);
padding: 2px 7px;
background: rgb(122 60 255 / 10%);
color: #5f2bd8;
font-size: var(--admin-font-size);
font-weight: 700;
line-height: 1.3;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.operatorAvatar {
display: inline-flex;
width: 34px;
height: 34px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--bg-card-strong);
color: var(--text-secondary);
}
.operatorAvatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.identityText,
.stack {
display: grid;
min-width: 0;
gap: 2px;
}
.name {
overflow: hidden;
color: var(--text-primary);
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta {
overflow: hidden;
color: var(--text-tertiary);
font-size: var(--admin-font-size);
text-overflow: ellipsis;
white-space: nowrap;
}
.grantMediaScroller {
display: flex;
min-width: 0;
max-width: 100%;
align-items: stretch;
gap: var(--space-2);
overflow-x: auto;
overscroll-behavior-x: contain;
padding-bottom: 2px;
scrollbar-width: thin;
}
.grantMediaCard {
display: grid;
width: 72px;
flex: 0 0 72px;
min-width: 0;
justify-items: center;
gap: 4px;
}
.grantMediaThumb {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card-strong);
color: var(--text-secondary);
}
.grantMediaThumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grantMediaName {
width: 100%;
min-width: 0;
overflow: hidden;
color: var(--text-secondary);
font-size: 12px;
font-weight: 650;
line-height: 1.25;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.grantAssetPill {
display: inline-flex;
height: var(--admin-tag-height);
flex: 0 0 auto;
align-items: center;
border: 1px solid var(--admin-tag-border);
border-radius: var(--admin-tag-radius);
background: var(--admin-tag-bg);
color: var(--admin-tag-color);
font-size: var(--admin-tag-font-size);
font-weight: var(--admin-tag-font-weight);
line-height: 1;
padding: 0 var(--admin-tag-padding-x);
white-space: nowrap;
}
.identityGrantLabel {
display: inline-flex;
min-height: var(--control-height);
align-items: center;
color: var(--text-primary);
font-weight: 700;
}
.selectColumn {
justify-content: center;
}
.dateTimeField {
width: 100%;
}
.giftSwitch {
min-height: var(--control-height);
}
.datePopover {
display: grid;
width: 320px;
gap: var(--space-3);
padding: var(--space-3);
}
.calendarHeader {
display: grid;
grid-template-columns: var(--control-height) 1fr var(--control-height);
align-items: center;
gap: var(--space-2);
}
.calendarTitle {
color: var(--text-primary);
font-weight: 700;
text-align: center;
}
.calendarGrid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.weekday {
color: var(--text-tertiary);
font-size: 12px;
font-weight: 650;
line-height: 24px;
text-align: center;
}
.dayButton {
display: inline-flex;
height: 34px;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary);
cursor: pointer;
font: inherit;
line-height: 1;
}
.dayButton:hover {
border-color: var(--primary-border);
background: var(--primary-surface);
color: var(--primary);
}
.dayOutside {
color: var(--text-tertiary);
}
.daySelected,
.daySelected:hover {
border-color: var(--primary);
background: var(--primary);
color: var(--primary-contrast);
}
.timeGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.popoverActions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
.shopDrawerTools {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.7fr);
gap: var(--space-3);
}
.shopSelectionList {
display: grid;
gap: var(--space-2);
}
.shopSelectionRow {
display: grid;
min-height: 56px;
align-items: center;
gap: var(--space-3);
grid-template-columns: 40px minmax(220px, 1fr) minmax(132px, auto);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border-muted);
}
.shopSpecList {
display: grid;
min-width: 0;
gap: var(--space-2);
grid-column: 2 / -1;
}
.shopSpecRow {
display: grid;
min-width: 0;
align-items: center;
gap: var(--space-2);
grid-template-columns: minmax(88px, 0.45fr) minmax(120px, 0.65fr) minmax(220px, 1.25fr) minmax(84px, 0.45fr);
}
.shopSpecToggle {
display: inline-flex;
min-width: 0;
align-items: center;
color: var(--text-primary);
font-weight: 650;
white-space: nowrap;
}
.shopSpecTimeRange {
width: 100% !important;
max-width: none !important;
}
.shopSpecDisabled {
grid-column: 2 / -1;
color: var(--text-tertiary);
}
.shopBasePrice {
color: var(--text-secondary);
font-weight: 650;
white-space: nowrap;
}
.shopEmpty {
display: flex;
min-height: 180px;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
}
.giftDraftList {
display: grid;
gap: var(--space-3);
}
.giftDraftItem {
display: grid;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--bg-card);
}
.giftDraftHeader {
display: grid;
min-width: 0;
align-items: center;
gap: var(--space-2);
grid-template-columns: 44px minmax(0, 1fr) var(--control-height);
}
.giftDraftThumb {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card-strong);
color: var(--text-secondary);
}
.giftDraftThumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.giftDraftTitle {
display: grid;
min-width: 0;
gap: 3px;
}
.giftDraftTitle span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.giftDraftTitle span:first-child {
color: var(--text-primary);
font-weight: 750;
}
.giftDraftTitle span:last-child {
color: var(--text-tertiary);
font-size: 12px;
}
.giftDraftEmpty {
display: flex;
min-height: 120px;
align-items: center;
justify-content: center;
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
background: var(--bg-card-strong);
color: var(--text-tertiary);
font-weight: 650;
}
.batchInput {
display: none;
}
.batchActions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.batchHelp {
display: inline-flex;
width: var(--control-height);
height: var(--control-height);
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text-secondary);
cursor: help;
}
.batchHelp:hover {
border-color: var(--primary-border);
background: var(--primary-surface);
color: var(--primary);
}
.batchRules {
display: grid;
max-width: 460px;
gap: 6px;
color: inherit;
font-size: 13px;
line-height: 1.5;
}
.batchPickButton {
display: inline-flex;
height: var(--control-height);
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0 var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text-primary);
cursor: pointer;
font: inherit;
font-weight: 650;
}
.batchPickButton:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.batchHint {
color: var(--text-secondary);
line-height: 1.6;
}
.batchProgress,
.batchEmpty {
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
background: var(--bg-card-strong);
color: var(--text-secondary);
}
.batchEmpty {
display: flex;
align-items: center;
}
.batchProgress {
display: grid;
gap: var(--space-2);
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.batchProgressHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.batchProgressLabel {
display: inline-flex;
min-width: 0;
align-items: center;
gap: var(--space-2);
}
.batchProgressPercent {
color: var(--text-primary);
font-weight: 750;
white-space: nowrap;
}
.batchProgressBar {
height: 6px;
border-radius: 999px;
background-color: var(--border-muted);
}
.batchProgressBar :global(.MuiLinearProgress-bar) {
border-radius: 999px;
background-color: var(--primary);
}
.batchTable {
display: grid;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.batchTableHead,
.batchTableRow {
display: grid;
min-height: 42px;
align-items: center;
gap: var(--space-3);
grid-template-columns:
minmax(160px, 1fr) minmax(100px, 0.55fr) minmax(90px, 0.45fr) minmax(130px, 0.65fr)
minmax(220px, 1.25fr);
padding: 0 var(--space-3);
}
.mp4LayoutPanel {
display: grid;
gap: var(--space-3);
padding-top: var(--space-2);
}
.mp4LayoutEmpty {
color: var(--text-secondary);
font-size: var(--admin-font-size);
}
.mp4LayoutActions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.mp4BatchCell {
display: grid;
min-width: 0;
gap: 6px;
}
.mp4Select,
.mp4FrameInput {
width: 100%;
min-width: 0;
height: 30px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text-primary);
font: inherit;
}
.mp4FrameGrid {
display: grid;
gap: 6px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mp4FrameInput {
padding: 0 8px;
}
.mp4ConfirmButton {
display: inline-flex;
width: fit-content;
min-height: 30px;
align-items: center;
justify-content: center;
padding: 0 var(--space-2);
border: 1px solid var(--primary-border);
border-radius: var(--radius-sm);
background: var(--primary-surface);
color: var(--primary);
cursor: pointer;
font: inherit;
font-weight: 650;
}
.mp4ConfirmButton:disabled {
border-color: var(--border);
background: var(--bg-card-strong);
color: var(--text-tertiary);
cursor: not-allowed;
}
.mp4ResultSummary {
margin-bottom: var(--space-3);
color: var(--text-primary);
font-weight: 650;
line-height: 1.6;
}
.mp4ResultTableWrap {
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.mp4ResultTable {
width: 100%;
min-width: 980px;
border-collapse: collapse;
font-size: var(--admin-font-size);
}
.mp4ResultTable th,
.mp4ResultTable td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-muted);
color: var(--text-primary);
text-align: left;
vertical-align: top;
white-space: nowrap;
}
.mp4ResultTable th {
background: var(--bg-card-strong);
color: var(--text-secondary);
font-weight: 750;
}
.mp4ResultTable tbody tr:last-child td {
border-bottom: 0;
}
.mp4ResultResource,
.mp4ResultCode {
display: block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.mp4ResultResource {
color: var(--text-primary);
font-weight: 650;
}
.mp4ResultCode {
margin-top: 2px;
color: var(--text-tertiary);
}
.batchTableHead {
border-bottom: 1px solid var(--border);
background: var(--bg-card-strong);
color: var(--text-secondary);
font-size: var(--admin-font-size);
font-weight: 700;
}
.batchTableRow {
border-bottom: 1px solid var(--border-muted);
color: var(--text-primary);
}
.batchTableRow:last-child {
border-bottom: 0;
}
@media (max-width: 860px) {
.shopDrawerTools,
.shopSelectionRow,
.shopSpecRow,
.batchTableHead,
.batchTableRow {
grid-template-columns: 1fr;
}
.shopSelectionRow {
align-items: stretch;
}
.shopSpecList,
.shopSpecDisabled {
grid-column: auto;
}
}