fix(front-end): css file reduced
This commit is contained in:
@@ -1,70 +1,75 @@
|
||||
<section class="section-card">
|
||||
<header class="section-header">
|
||||
<div class="header-copy">
|
||||
<p class="eyebrow">Back-office media</p>
|
||||
<h2>Media home</h2>
|
||||
<section class="section-card ui-section-card ui-stack ui-stack--roomy">
|
||||
<header class="section-header ui-section-header">
|
||||
<div class="header-copy ui-section-header__copy">
|
||||
<p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
|
||||
<h2 class="ui-section-header__title">Media home</h2>
|
||||
</div>
|
||||
<div class="header-side">
|
||||
<div class="header-stats">
|
||||
<article class="stat-chip">
|
||||
<div class="header-side ui-stack ui-stack--dense">
|
||||
<div class="header-stats ui-inline-actions">
|
||||
<article class="stat-chip ui-stat-chip">
|
||||
<strong>{{ configuredSectionCount }}</strong>
|
||||
<span>sezioni gestite</span>
|
||||
</article>
|
||||
<article class="stat-chip">
|
||||
<article class="stat-chip ui-stat-chip">
|
||||
<strong>{{ activeImageCount }}</strong>
|
||||
<span>immagini attive</span>
|
||||
</article>
|
||||
</div>
|
||||
<button type="button" (click)="loadHomeMedia()" [disabled]="loading">
|
||||
<button
|
||||
type="button"
|
||||
class="ui-button"
|
||||
(click)="loadHomeMedia()"
|
||||
[disabled]="loading"
|
||||
>
|
||||
Aggiorna
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="status-banner status-banner-error" *ngIf="errorMessage">
|
||||
<p class="status-banner ui-banner ui-banner--error" *ngIf="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<p class="status-banner status-banner-success" *ngIf="successMessage">
|
||||
<p class="status-banner ui-banner ui-banner--success" *ngIf="successMessage">
|
||||
{{ successMessage }}
|
||||
</p>
|
||||
|
||||
<div class="group-stack" *ngIf="!loading; else loadingTpl">
|
||||
<section class="group-card" *ngFor="let group of sectionGroups">
|
||||
<header class="group-header">
|
||||
<div class="group-stack ui-stack" *ngIf="!loading; else loadingTpl">
|
||||
<section class="group-card ui-subpanel ui-subpanel--warm" *ngFor="let group of sectionGroups">
|
||||
<header class="group-header ui-row ui-row--between">
|
||||
<h3>{{ group.title }}</h3>
|
||||
</header>
|
||||
|
||||
<div class="sections">
|
||||
<div class="sections ui-stack ui-stack--dense">
|
||||
<section
|
||||
class="media-panel"
|
||||
class="media-panel ui-subpanel ui-subpanel--elevated"
|
||||
*ngFor="
|
||||
let section of getSectionsForGroup(group.id);
|
||||
trackBy: trackSection
|
||||
"
|
||||
>
|
||||
<header class="media-panel-header">
|
||||
<div class="media-panel-copy">
|
||||
<div class="title-row">
|
||||
<header class="media-panel-header ui-row ui-row--between ui-row--wrap">
|
||||
<div class="media-panel-copy ui-stack ui-stack--dense">
|
||||
<div class="title-row ui-row ui-row--center ui-row--wrap">
|
||||
<h4>{{ section.title }}</h4>
|
||||
<span class="count-pill">
|
||||
<span class="count-pill ui-pill ui-pill--soft">
|
||||
{{ section.items.length }}
|
||||
{{ section.items.length === 1 ? "attiva" : "attive" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-panel-meta">
|
||||
<span class="usage-pill"
|
||||
<div class="media-panel-meta ui-row ui-row--wrap ui-row--end">
|
||||
<span class="usage-pill ui-pill ui-pill--neutral"
|
||||
>{{ section.usageType }} / {{ section.usageKey }}</span
|
||||
>
|
||||
<span class="layout-pill">
|
||||
<span class="layout-pill ui-pill ui-pill--light">
|
||||
Variante {{ section.preferredVariantName }}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="workspace">
|
||||
<div class="upload-panel">
|
||||
<div class="panel-heading">
|
||||
<div class="workspace ui-workspace-compact">
|
||||
<div class="upload-panel ui-subpanel ui-subpanel--soft">
|
||||
<div class="panel-heading ui-stack ui-stack--dense">
|
||||
<h5>
|
||||
{{
|
||||
getFormState(section.usageKey).replacingUsageId
|
||||
@@ -74,9 +79,9 @@
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-field form-field--wide">
|
||||
<span>File immagine</span>
|
||||
<div class="form-grid ui-form-grid ui-form-grid--two">
|
||||
<div class="form-field form-field--wide ui-form-field">
|
||||
<span class="ui-form-caption">File immagine</span>
|
||||
<input
|
||||
[id]="'media-file-' + section.usageKey"
|
||||
class="sr-only"
|
||||
@@ -85,11 +90,13 @@
|
||||
(change)="onFileSelected(section.usageKey, $event)"
|
||||
/>
|
||||
<label
|
||||
class="file-picker"
|
||||
class="file-picker ui-file-picker"
|
||||
[for]="'media-file-' + section.usageKey"
|
||||
>
|
||||
<span class="file-picker-button">Scegli file</span>
|
||||
<span class="file-picker-name">
|
||||
<span class="file-picker-button ui-file-picker__button"
|
||||
>Scegli file</span
|
||||
>
|
||||
<span class="file-picker-name ui-file-picker__name">
|
||||
{{
|
||||
getFormState(section.usageKey).file?.name ||
|
||||
"Nessun file selezionato"
|
||||
@@ -107,16 +114,16 @@
|
||||
<img [src]="previewUrl" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="language-toolbar form-field--wide">
|
||||
<div class="language-copy">
|
||||
<div class="language-toolbar form-field--wide ui-language-toolbar">
|
||||
<div class="language-copy ui-language-toolbar__copy">
|
||||
<span>Testi localizzati</span>
|
||||
<p>IT / EN / DE / FR obbligatorie</p>
|
||||
</div>
|
||||
<div class="language-toggle">
|
||||
<div class="language-toggle ui-language-toolbar__toggle">
|
||||
<button
|
||||
*ngFor="let language of mediaLanguages"
|
||||
type="button"
|
||||
class="language-toggle-btn"
|
||||
class="language-toggle-btn ui-language-toolbar__button"
|
||||
[class.active]="
|
||||
getFormState(section.usageKey).activeLanguage ===
|
||||
language
|
||||
@@ -134,8 +141,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-field">
|
||||
<span>
|
||||
<label class="form-field ui-form-field">
|
||||
<span class="ui-form-caption">
|
||||
Titolo ({{
|
||||
mediaLanguageLabels[
|
||||
getFormState(section.usageKey).activeLanguage
|
||||
@@ -143,14 +150,15 @@
|
||||
}})
|
||||
</span>
|
||||
<input
|
||||
class="ui-form-control"
|
||||
type="text"
|
||||
[(ngModel)]="getActiveTranslation(section.usageKey).title"
|
||||
placeholder="Titolo immagine"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="form-field">
|
||||
<span>
|
||||
<label class="form-field ui-form-field">
|
||||
<span class="ui-form-caption">
|
||||
Alt text ({{
|
||||
mediaLanguageLabels[
|
||||
getFormState(section.usageKey).activeLanguage
|
||||
@@ -158,15 +166,17 @@
|
||||
}})
|
||||
</span>
|
||||
<input
|
||||
class="ui-form-control"
|
||||
type="text"
|
||||
[(ngModel)]="getActiveTranslation(section.usageKey).altText"
|
||||
placeholder="Testo alternativo"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="form-field">
|
||||
<span>Sort order</span>
|
||||
<label class="form-field ui-form-field">
|
||||
<span class="ui-form-caption">Sort order</span>
|
||||
<input
|
||||
class="ui-form-control"
|
||||
type="number"
|
||||
[(ngModel)]="getFormState(section.usageKey).sortOrder"
|
||||
min="0"
|
||||
@@ -183,9 +193,10 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="upload-actions">
|
||||
<div class="upload-actions ui-row ui-row--wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="ui-button"
|
||||
(click)="uploadForSection(section.usageKey)"
|
||||
[disabled]="
|
||||
getFormState(section.usageKey).saving ||
|
||||
@@ -202,7 +213,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ghost"
|
||||
class="ui-button ui-button--ghost"
|
||||
(click)="prepareAdd(section.usageKey)"
|
||||
[disabled]="getFormState(section.usageKey).saving"
|
||||
>
|
||||
@@ -210,7 +221,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ghost"
|
||||
class="ui-button ui-button--ghost"
|
||||
*ngIf="getFormState(section.usageKey).replacingUsageId"
|
||||
(click)="cancelReplace(section.usageKey)"
|
||||
[disabled]="getFormState(section.usageKey).saving"
|
||||
@@ -220,21 +231,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-panel">
|
||||
<div class="panel-heading">
|
||||
<div class="list-panel ui-subpanel ui-subpanel--soft">
|
||||
<div class="panel-heading ui-stack ui-stack--dense">
|
||||
<h5>Immagini attive</h5>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="media-list"
|
||||
class="media-list ui-media-list"
|
||||
*ngIf="section.items.length; else emptySectionState"
|
||||
>
|
||||
<article
|
||||
class="media-item"
|
||||
class="media-item ui-media-item"
|
||||
*ngFor="let item of section.items; trackBy: trackItem"
|
||||
>
|
||||
<div class="thumb-wrap">
|
||||
<div class="thumb">
|
||||
<div class="thumb ui-thumb">
|
||||
<img
|
||||
*ngIf="item.previewUrl; else noPreviewTpl"
|
||||
[src]="item.previewUrl"
|
||||
@@ -243,8 +254,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-copy">
|
||||
<div class="media-copy-top">
|
||||
<div class="media-copy ui-stack ui-stack--dense">
|
||||
<div class="media-copy-top ui-row ui-row--between ui-row--center ui-row--wrap">
|
||||
<div>
|
||||
<h6>
|
||||
{{
|
||||
@@ -259,7 +270,9 @@
|
||||
{{ item.mediaAssetId }}
|
||||
</p>
|
||||
</div>
|
||||
<span class="primary-badge" *ngIf="item.isPrimary"
|
||||
<span
|
||||
class="primary-badge ui-pill ui-pill--accent"
|
||||
*ngIf="item.isPrimary"
|
||||
>Primaria</span
|
||||
>
|
||||
</div>
|
||||
@@ -283,10 +296,11 @@
|
||||
{{ item.createdAt | date: "short" }}
|
||||
</p>
|
||||
|
||||
<div class="sort-editor">
|
||||
<div class="sort-editor ui-row ui-row--wrap">
|
||||
<label>
|
||||
<span>Nuovo ordine</span>
|
||||
<span class="ui-form-caption">Nuovo ordine</span>
|
||||
<input
|
||||
class="ui-form-control"
|
||||
type="number"
|
||||
[(ngModel)]="item.draftSortOrder"
|
||||
min="0"
|
||||
@@ -294,7 +308,7 @@
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
class="ghost"
|
||||
class="ui-button ui-button--ghost"
|
||||
(click)="saveSortOrder(item)"
|
||||
[disabled]="
|
||||
isUsageBusy(item.usageId) ||
|
||||
@@ -305,10 +319,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<div class="item-actions ui-row ui-row--wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="ghost"
|
||||
class="ui-button ui-button--ghost"
|
||||
(click)="prepareReplace(section.usageKey, item)"
|
||||
[disabled]="isUsageBusy(item.usageId)"
|
||||
>
|
||||
@@ -316,7 +330,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ghost"
|
||||
class="ui-button ui-button--ghost"
|
||||
(click)="setPrimary(item)"
|
||||
[disabled]="isUsageBusy(item.usageId) || item.isPrimary"
|
||||
>
|
||||
@@ -324,7 +338,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ghost danger"
|
||||
class="ui-button ui-button--ghost-danger"
|
||||
(click)="removeFromHome(item)"
|
||||
[disabled]="isUsageBusy(item.usageId)"
|
||||
>
|
||||
@@ -342,18 +356,18 @@
|
||||
</div>
|
||||
|
||||
<ng-template #emptySectionState>
|
||||
<p class="empty-state">
|
||||
<p class="empty-state ui-empty-state">
|
||||
Nessuna immagine attiva collegata a questa sezione home.
|
||||
</p>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #noPreviewTpl>
|
||||
<div class="thumb thumb-empty">
|
||||
<div class="thumb thumb-empty ui-thumb ui-thumb--empty">
|
||||
<span>Preview non disponibile</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</section>
|
||||
|
||||
<ng-template #loadingTpl>
|
||||
<p class="loading-state">Caricamento media home...</p>
|
||||
<p class="loading-state ui-empty-state">Caricamento media home...</p>
|
||||
</ng-template>
|
||||
|
||||
@@ -1,286 +1,5 @@
|
||||
.section-card {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header,
|
||||
.media-panel-header,
|
||||
.media-copy-top,
|
||||
.upload-actions,
|
||||
.item-actions,
|
||||
.sort-editor {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 var(--space-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-secondary-600);
|
||||
}
|
||||
|
||||
.header-copy h2,
|
||||
.media-panel-header h4,
|
||||
.panel-heading h5,
|
||||
.media-copy h6,
|
||||
.group-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-copy p,
|
||||
.media-panel-header p,
|
||||
.group-header p,
|
||||
.panel-heading p,
|
||||
.empty-state,
|
||||
.meta {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.header-side > button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.stat-chip {
|
||||
min-width: 128px;
|
||||
padding: 0.75rem 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.stat-chip strong {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-chip span {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.status-banner {
|
||||
margin: 0;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-banner-error {
|
||||
color: #8a241d;
|
||||
background: #fff1f0;
|
||||
border-color: #f2c3bf;
|
||||
}
|
||||
|
||||
.status-banner-success {
|
||||
color: #20613a;
|
||||
background: #eef9f1;
|
||||
border-color: #b7e3c4;
|
||||
}
|
||||
|
||||
.group-stack {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.group-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: calc(var(--radius-lg) + 2px);
|
||||
padding: clamp(12px, 1.8vw, 18px);
|
||||
background: linear-gradient(180deg, #fcfbf8 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.sections {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.media-panel {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: #ffffff;
|
||||
padding: var(--space-3);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.usage-pill,
|
||||
.primary-badge,
|
||||
.count-pill,
|
||||
.layout-pill {
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.usage-pill {
|
||||
background: var(--color-neutral-100);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.layout-pill {
|
||||
background: #f7f4e7;
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.count-pill {
|
||||
background: #f8f9fb;
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.primary-badge {
|
||||
background: #fff5b8;
|
||||
color: var(--color-text);
|
||||
border-color: #f1d65c;
|
||||
}
|
||||
|
||||
.media-panel-copy,
|
||||
.media-panel-meta,
|
||||
.panel-heading {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.media-panel-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.upload-panel,
|
||||
.list-panel {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(180deg, #fcfcfb 0%, #f7f7f4 100%);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.language-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fbfaf6;
|
||||
}
|
||||
|
||||
.language-copy {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.language-copy span {
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.language-copy p {
|
||||
margin: 0;
|
||||
font-size: 0.76rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.language-toggle-btn {
|
||||
min-width: 2.8rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.language-toggle-btn.complete {
|
||||
border-color: #c9d8c4;
|
||||
}
|
||||
|
||||
.language-toggle-btn.incomplete {
|
||||
border-color: #e8c8c2;
|
||||
}
|
||||
|
||||
.language-toggle-btn.active {
|
||||
background: #fff5b8;
|
||||
border-color: var(--color-brand);
|
||||
color: var(--color-text);
|
||||
.form-field--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
@@ -295,83 +14,18 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.form-field--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-field > span,
|
||||
.sort-editor span {
|
||||
font-size: 0.76rem;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.file-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-card);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.file-picker:hover {
|
||||
border-color: var(--color-brand);
|
||||
background: #fffef8;
|
||||
}
|
||||
|
||||
.file-picker-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 6.25rem;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: calc(var(--radius-md) - 2px);
|
||||
background: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-picker-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--color-bg-card);
|
||||
font: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
width: auto;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--color-bg-card);
|
||||
align-self: end;
|
||||
justify-self: start;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -384,16 +38,16 @@ input {
|
||||
.toggle-mark {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 1px solid var(--color-border);
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.3rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.toggle input:checked + .toggle-mark {
|
||||
background: #b14fb8;
|
||||
border-color: #b14fb8;
|
||||
background: var(--color-brand);
|
||||
border-color: var(--color-brand);
|
||||
}
|
||||
|
||||
.toggle input:checked + .toggle-mark::after {
|
||||
@@ -421,188 +75,36 @@ input {
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.preview-card img,
|
||||
.thumb img {
|
||||
.preview-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.media-list {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.media-item {
|
||||
display: grid;
|
||||
grid-template-columns: 168px minmax(0, 1fr);
|
||||
gap: var(--space-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem;
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.thumb-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-neutral-200);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.thumb-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.media-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.media-copy-top {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.media-copy h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.media-copy h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sort-editor {
|
||||
align-items: end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sort-editor label {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.upload-actions {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.upload-actions button {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-brand);
|
||||
color: var(--color-neutral-900);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
opacity 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button.ghost {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
button.ghost:hover:not(:disabled) {
|
||||
background: #fff8cc;
|
||||
border-color: var(--color-brand);
|
||||
}
|
||||
|
||||
button.ghost.danger:hover:not(:disabled) {
|
||||
background: #fff0f0;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
min-width: min(100%, 180px);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.form-grid,
|
||||
.media-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.language-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.file-picker {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.file-picker-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header,
|
||||
.header-side,
|
||||
.header-stats,
|
||||
.group-header,
|
||||
.media-panel-header,
|
||||
.media-copy-top,
|
||||
.upload-actions,
|
||||
.item-actions,
|
||||
.sort-editor {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.usage-pill,
|
||||
.primary-badge,
|
||||
.count-pill,
|
||||
.layout-pill {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.media-panel-meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.sort-editor {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user