mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
Split form.css into form-base.css and form-admin.css, drop dead upload-progress code
Also introduces $extraCssAdmin support in head.php for admin-only stylesheets (form-admin.css, filepond CSS, system.css). Admin pages now use $extraCssAdmin for admin-only assets and $extraCss for shared stylesheets like form-base.css.
This commit is contained in:
Pontoporeia
@@ -115,7 +115,7 @@
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* ── Form styles → see form.css ─────────────────────────────────────────── */
|
||||
/* ── Form styles → see form-base.css + form-admin.css ───────────────────── */
|
||||
|
||||
/* ── Buttons ────────────────────────────────────────────────────────────── */
|
||||
.admin-form-footer {
|
||||
@@ -763,7 +763,7 @@ th.admin-ap-col {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Jury fieldset → see form.css ───────────────────────────────────────── */
|
||||
/* ── Jury fieldset → see form-base.css ──────────────────────────────────── */
|
||||
|
||||
/* ── Inline form (tags page) ────────────────────────────────────────────── */
|
||||
.admin-inline-form {
|
||||
@@ -1679,7 +1679,7 @@ th.admin-ap-col {
|
||||
}
|
||||
|
||||
|
||||
/* ── Form group, student mode, thanks page → see form.css ───────────────── */
|
||||
/* ── Form group, student mode, thanks page → see form-base.css ──────────── */
|
||||
|
||||
/* ── Utility ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
|
||||
234
app/public/assets/css/form-admin.css
Normal file
234
app/public/assets/css/form-admin.css
Normal file
@@ -0,0 +1,234 @@
|
||||
/* ============================================================
|
||||
FORM — Admin-only extensions
|
||||
Styles used exclusively by admin pages (not the student partage form).
|
||||
Loaded after form-base.css.
|
||||
============================================================ */
|
||||
|
||||
/* ── Recap files table ─────────────────────────────────────────── */
|
||||
|
||||
.recap-files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.recap-files-table thead th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--step--2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.recap-files-table tbody td {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.recap-files-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recap-files-icon {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recap-files-icon-emoji {
|
||||
font-size: 1.3rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
background: var(--accent-muted);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.recap-files-thumb {
|
||||
max-width: 80px;
|
||||
max-height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.recap-files-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recap-files-name a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.recap-files-name a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.recap-files-peertube-id {
|
||||
display: block;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.recap-files-label {
|
||||
display: block;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.recap-files-type {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recap-files-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.recap-files-date {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── File browser (relink) ──────────────────────────────────────── */
|
||||
|
||||
.file-browser-trigger {
|
||||
margin-top: var(--space-2xs);
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
|
||||
.relink-modal {
|
||||
width: min(90vw, 700px);
|
||||
max-height: 80vh;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-primary);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.relink-modal::backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
.relink-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.relink-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.relink-modal-footer {
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
#relink-modal-body {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
/* ── File browser tree ─────────────────────────────────────────── */
|
||||
|
||||
.file-browser {
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.file-browser-hint,
|
||||
.file-browser-empty,
|
||||
.file-browser-loading,
|
||||
.file-browser-error {
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
padding: var(--space-m);
|
||||
}
|
||||
.file-browser-error {
|
||||
color: var(--error);
|
||||
}
|
||||
.file-browser-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: var(--space-s);
|
||||
margin-bottom: var(--space-s);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
.file-browser-breadcrumb a {
|
||||
color: var(--accent-blue, var(--link));
|
||||
text-decoration: none;
|
||||
}
|
||||
.file-browser-breadcrumb a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
.file-browser-sep {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.file-browser-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.file-browser-entry {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.file-browser-entry a,
|
||||
.file-browser-select-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-2xs);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--step--1);
|
||||
text-align: left;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.file-browser-entry a:hover,
|
||||
.file-browser-select-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.file-browser-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.file-browser-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-browser-size {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--step--2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.file-browser-file .file-browser-select-btn {
|
||||
color: var(--accent-green, var(--success));
|
||||
}
|
||||
.file-browser-file .file-browser-select-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
/* ============================================================
|
||||
FORM — TFE submission form
|
||||
FORM — TFE submission form (base styles)
|
||||
Shared between admin add/edit pages and the student partage form.
|
||||
Admin-only extensions live in form-admin.css.
|
||||
Variables loaded via style.css (colors.css + typography.css).
|
||||
============================================================ */
|
||||
|
||||
@@ -1156,61 +1157,7 @@
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* ── Upload progress bar ─────────────────────────────────── */
|
||||
|
||||
#upload-progress-wrap {
|
||||
border: 1px solid var(--accent-muted);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
#upload-progress-wrap legend {
|
||||
font-weight: 600;
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-primary);
|
||||
padding: 0 var(--space-2xs);
|
||||
}
|
||||
|
||||
#upload-progress-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.85rem;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--accent-muted);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#upload-progress-bar::-webkit-progress-bar {
|
||||
background: var(--accent-muted);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
#upload-progress-bar::-webkit-progress-value {
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
#upload-progress-bar::-moz-progress-bar {
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Completion state */
|
||||
#upload-progress-bar[data-complete] {
|
||||
box-shadow: 0 0 12px rgba(149, 87, 181, 0.4);
|
||||
}
|
||||
|
||||
#upload-progress-bar[data-complete]::-webkit-progress-value {
|
||||
background: var(--accent-green);
|
||||
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
#upload-progress-bar[data-complete]::-moz-progress-bar {
|
||||
background: var(--accent-green);
|
||||
}
|
||||
|
||||
/* ── Sticky formats fieldset ──────────────────────────────── */
|
||||
|
||||
@@ -1266,324 +1213,6 @@ legend {
|
||||
padding: 0 var(--space-2xs);
|
||||
}
|
||||
|
||||
/* ── File figures (recap + edit existing files) ──────────── */
|
||||
|
||||
.admin-file-list,
|
||||
.recap-files-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.admin-file-list-item,
|
||||
.recap-files-list-item {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.admin-file-figure {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-file-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-muted);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.admin-file-thumb {
|
||||
max-width: 120px;
|
||||
max-height: 90px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-file-caption {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3xs);
|
||||
}
|
||||
|
||||
.admin-file-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
|
||||
.admin-file-name {
|
||||
font-weight: 600;
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.admin-file-peertube-id {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.admin-file-meta-row {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.admin-file-label {
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Recap files table ─────────────────────────────────────────── */
|
||||
|
||||
.recap-files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.recap-files-table thead th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--step--2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.recap-files-table tbody td {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.recap-files-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recap-files-icon {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recap-files-icon-emoji {
|
||||
font-size: 1.3rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
background: var(--accent-muted);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.recap-files-thumb {
|
||||
max-width: 80px;
|
||||
max-height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.recap-files-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recap-files-name a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.recap-files-name a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.recap-files-peertube-id {
|
||||
display: block;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.recap-files-label {
|
||||
display: block;
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.recap-files-type {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recap-files-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.recap-files-date {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── File browser (relink) ──────────────────────────────────────── */
|
||||
|
||||
.file-browser-trigger {
|
||||
margin-top: var(--space-2xs);
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
|
||||
.relink-modal {
|
||||
width: min(90vw, 700px);
|
||||
max-height: 80vh;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-primary);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.relink-modal::backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
.relink-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.relink-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.relink-modal-footer {
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
#relink-modal-body {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
/* ── File browser tree ─────────────────────────────────────────── */
|
||||
|
||||
.file-browser {
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.file-browser-hint,
|
||||
.file-browser-empty,
|
||||
.file-browser-loading,
|
||||
.file-browser-error {
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
padding: var(--space-m);
|
||||
}
|
||||
.file-browser-error {
|
||||
color: var(--error);
|
||||
}
|
||||
.file-browser-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: var(--space-s);
|
||||
margin-bottom: var(--space-s);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
.file-browser-breadcrumb a {
|
||||
color: var(--accent-blue, var(--link));
|
||||
text-decoration: none;
|
||||
}
|
||||
.file-browser-breadcrumb a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
.file-browser-sep {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.file-browser-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.file-browser-entry {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.file-browser-entry a,
|
||||
.file-browser-select-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-2xs);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--step--1);
|
||||
text-align: left;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.file-browser-entry a:hover,
|
||||
.file-browser-select-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.file-browser-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.file-browser-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-browser-size {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--step--2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.file-browser-file .file-browser-select-btn {
|
||||
color: var(--accent-green, var(--success));
|
||||
}
|
||||
.file-browser-file .file-browser-select-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* ── Mobile-responsive layout ──────────────────────────────────────────── */
|
||||
/* Below 600px: labels stack above inputs, single-column form layout.
|
||||
Reference in New Issue
Block a user