@mtldev514/retro-portfolio-engine 1.0.0

package/engine/admin/admin.css

@@ -0,0 +1,720 @@
+/* ═══════════════════════════════════════════════════
+   ADMIN PAGE STYLES
+   Used by admin.html and edit.html
+   All colors use centralized CSS variables below
+   ═══════════════════════════════════════════════════ */
+
+:root {
+    --admin-muted-text: #666;
+    --admin-file-type: blue;
+    --admin-connected: green;
+    --admin-bg: #3a6ea5;
+    --admin-win-bg: #c0c0c0;
+    --admin-win-blue: #000080;
+    --admin-win-text: #000;
+    --admin-win-border-light: #fff;
+    --admin-win-border-dark: #808080;
+    --admin-tab-inactive: #d4d4d4;
+    --admin-console-bg: #000;
+    --admin-console-text: #0f0;
+    --admin-readonly-bg: #eee;
+    --admin-readonly-text: #555;
+    --admin-save-bg: #e0e0ff;
+    --admin-hint-bg: #fffff0;
+    --admin-hint-border: #cc9;
+    --admin-preview-bg: #eee;
+    --admin-preview-border: #808080;
+    --admin-status-success: lime;
+    --admin-status-error: red;
+    --admin-status-warn: orange;
+    --admin-status-info: cyan;
+    --admin-status-highlight: yellow;
+}
+
+body.admin-page {
+    background-color: var(--admin-bg);
+    font-family: var(--font-admin);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    color: var(--admin-win-text);
+    background-image: none;
+    padding: 0;
+}
+
+.admin-page .desktop-icon {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    text-align: center;
+    color: white;
+    cursor: pointer;
+}
+
+.admin-page .desktop-icon img {
+    width: 32px;
+    display: block;
+    margin: 0 auto 5px;
+}
+
+.admin-page .window {
+    width: 800px;
+    background: var(--admin-win-bg);
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    padding: 2px;
+}
+
+.admin-page .window.narrow {
+    width: 700px;
+}
+
+.admin-page .title-bar {
+    background: var(--admin-win-blue);
+    color: white;
+    padding: 3px 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.admin-page .title-bar-controls button {
+    width: 16px;
+    height: 14px;
+    font-size: 9px;
+    padding: 0;
+    margin-left: 2px;
+    background: var(--admin-win-bg);
+    border: 1px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+}
+
+.admin-page .tab-bar {
+    padding: 10px 10px 0;
+    display: flex;
+    border-bottom: 1px solid var(--admin-win-border-dark);
+}
+
+.admin-page .tab {
+    padding: 5px 15px;
+    border: 1px solid var(--admin-win-border-dark);
+    border-bottom: none;
+    background: var(--admin-tab-inactive);
+    cursor: pointer;
+    margin-right: 2px;
+    border-radius: 4px 4px 0 0;
+}
+
+.admin-page .tab.active {
+    background: var(--admin-win-bg);
+    font-weight: bold;
+    position: relative;
+    top: 1px;
+    z-index: 2;
+}
+
+.admin-page .tab-content {
+    padding: 20px;
+    min-height: 400px;
+    display: none;
+}
+
+.admin-page .tab-content.active {
+    display: block;
+}
+
+.admin-page .form-group {
+    margin-bottom: 15px;
+}
+
+.admin-page label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.admin-page input[type="text"],
+.admin-page select,
+.admin-page textarea {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid;
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+    box-sizing: border-box;
+    background: white;
+}
+
+.admin-page button.action {
+    margin-top: 10px;
+    padding: 8px 20px;
+    background: var(--admin-win-bg);
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    cursor: pointer;
+}
+
+.admin-page button.action:active {
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+}
+
+.admin-page .status-bar {
+    margin-top: 10px;
+    padding: 3px 5px;
+    background: var(--admin-win-bg);
+    border-top: 1px solid var(--admin-win-border-dark);
+    font-size: 12px;
+}
+
+.admin-page .console {
+    background: var(--admin-console-bg);
+    color: var(--admin-console-text);
+    font-family: var(--font-mono);
+    padding: 10px;
+    height: 100px;
+    overflow-y: auto;
+    margin-top: 20px;
+    font-size: 12px;
+    border: 2px inset var(--admin-win-border-dark);
+}
+
+.admin-page .console.short {
+    height: 80px;
+    margin-top: 15px;
+}
+
+.admin-page .translation-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    height: 300px;
+    overflow-y: auto;
+    padding: 5px;
+    background: white;
+    border: 2px inset var(--admin-win-border-dark);
+}
+
+.admin-page .trans-item {
+    padding: 5px;
+    border-bottom: 1px solid var(--admin-readonly-bg);
+}
+
+.admin-page .trans-item input {
+    font-size: 11px;
+}
+
+/* Edit page specific */
+.admin-page .edit-body {
+    padding: 20px;
+}
+
+.admin-page .form-group label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.admin-page .form-group input[type="text"],
+.admin-page .form-group textarea {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid;
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+    box-sizing: border-box;
+    background: white;
+    font-family: inherit;
+    font-size: 13px;
+}
+
+.admin-page .form-group textarea {
+    height: 60px;
+    resize: vertical;
+}
+
+.admin-page .form-group .readonly {
+    background: var(--admin-readonly-bg);
+    color: var(--admin-readonly-text);
+}
+
+.admin-page .preview-box {
+    border: 2px inset var(--admin-win-border-dark);
+    background: white;
+    padding: 10px;
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.admin-page .preview-box img {
+    max-width: 300px;
+    max-height: 200px;
+}
+
+.admin-page .button-bar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+    padding-top: 10px;
+    border-top: 1px solid var(--admin-win-border-dark);
+}
+
+.admin-page .button-bar button {
+    padding: 6px 20px;
+    background: var(--admin-win-bg);
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.admin-page .button-bar button:active {
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+}
+
+.admin-page .button-bar .save-btn {
+    background: var(--admin-save-bg);
+}
+
+.admin-page .info-row {
+    display: flex;
+    gap: 15px;
+}
+
+.admin-page .info-row .form-group {
+    flex: 1;
+}
+
+.admin-page #loading {
+    text-align: center;
+    padding: 40px;
+    font-size: 14px;
+}
+
+.admin-page #editForm {
+    display: none;
+}
+
+.admin-page #errorBox {
+    display: none;
+    text-align: center;
+    padding: 40px;
+    color: var(--admin-status-error);
+    font-weight: bold;
+}
+
+/* Admin console output color classes */
+.admin-page .con-error   { color: var(--admin-status-error); }
+.admin-page .con-success { color: var(--admin-status-success); }
+.admin-page .con-warn    { color: var(--admin-status-warn); }
+.admin-page .con-info    { color: var(--admin-status-info); }
+.admin-page .con-hi      { color: var(--admin-status-highlight); }
+
+/* Admin utility classes */
+.admin-page .admin-muted {
+    font-size: 10px;
+    color: var(--admin-muted-text);
+}
+
+.admin-page .admin-hint {
+    background: var(--admin-hint-bg);
+    padding: 8px;
+    border: 1px solid var(--admin-hint-border);
+    font-size: 10px;
+    margin-bottom: 10px;
+}
+
+.admin-page .admin-preview-area {
+    background: var(--admin-preview-bg);
+    padding: 10px;
+    border: 1px dashed var(--admin-preview-border);
+}
+
+.admin-page .admin-flex-row {
+    display: flex;
+    gap: 20px;
+}
+
+.admin-page .admin-flex-col {
+    flex: 1;
+}
+
+.admin-page .admin-flex-between {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.admin-page .admin-content-list {
+    height: 350px;
+    overflow-y: auto;
+    background: white;
+    border: 2px inset var(--admin-win-border-dark);
+    padding: 5px;
+}
+
+.admin-page .admin-text-right {
+    text-align: right;
+}
+
+.admin-page .admin-connected {
+    color: var(--admin-connected);
+    font-weight: bold;
+}
+
+.admin-page .admin-file-type {
+    color: var(--admin-file-type);
+}
+
+.admin-page .src-btn-active {
+    background: var(--admin-save-bg);
+    font-weight: bold;
+}
+
+.admin-page .content-row {
+    padding: 5px;
+    border-bottom: 1px dotted var(--chrome-soft);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+}
+
+.admin-page .content-header {
+    margin: 10px 0 5px;
+    border-bottom: 1px solid var(--chrome-soft);
+}
+
+/* ── Bulk Upload ── */
+.bulk-drop-zone {
+    border: 2px dashed var(--admin-win-border-dark);
+    background: white;
+    padding: 30px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.bulk-drop-zone:hover,
+.bulk-drop-zone.drag-over {
+    background: var(--admin-save-bg);
+    border-color: var(--admin-win-blue);
+}
+
+.bulk-queue {
+    margin-top: 10px;
+}
+
+.bulk-items {
+    max-height: 320px;
+    overflow-y: auto;
+    border: 2px inset var(--admin-win-border-dark);
+    background: white;
+    padding: 5px;
+}
+
+.bulk-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 4px;
+    border-bottom: 1px dotted var(--admin-win-border-dark);
+}
+.bulk-item:last-child { border-bottom: none; }
+
+.bulk-thumb {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+    border: 1px solid var(--admin-win-border-dark);
+    background: var(--admin-readonly-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.bulk-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.bulk-fields {
+    flex: 1;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+.bulk-fields input[type="text"] {
+    flex: 1;
+    padding: 3px 5px;
+    border: 2px solid;
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+    font-size: 12px;
+}
+.bulk-fields select {
+    padding: 3px;
+    border: 2px solid;
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+    font-size: 11px;
+}
+
+.bulk-status {
+    font-size: 11px;
+    font-weight: bold;
+    min-width: 30px;
+    text-align: center;
+}
+
+.bulk-remove {
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: var(--admin-status-error);
+    padding: 0 4px;
+    line-height: 1;
+}
+
+/* ── Pile Picker ── */
+.pile-btn {
+    margin-right: 5px;
+    color: var(--admin-win-blue);
+}
+
+.pile-picker {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 10;
+    background: white;
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
+    min-width: 220px;
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 11px;
+}
+
+.pile-picker-title {
+    padding: 4px 8px;
+    background: var(--admin-win-blue);
+    color: white;
+    font-weight: bold;
+    font-size: 10px;
+}
+
+.pile-picker-item {
+    padding: 4px 8px;
+    cursor: pointer;
+    border-bottom: 1px dotted var(--admin-win-border-dark);
+}
+.pile-picker-item:last-child { border-bottom: none; }
+.pile-picker-item:hover {
+    background: var(--admin-save-bg);
+}
+
+/* ── Gallery Manager ── */
+.gallery-manager-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 12px;
+    padding: 10px;
+    background: white;
+}
+
+.gallery-card {
+    position: relative;
+    border: 2px solid var(--admin-win-border-dark);
+    background: white;
+    cursor: move;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.gallery-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.gallery-card.dragging {
+    opacity: 0.5;
+}
+
+.gallery-card.drag-over {
+    border-color: var(--admin-win-blue);
+    background: var(--admin-save-bg);
+}
+
+.gallery-card-cover {
+    grid-column: 1 / -1;
+    max-width: 300px;
+    border-color: gold;
+    border-width: 3px;
+    cursor: default;
+}
+
+.gallery-card-cover:hover {
+    transform: none;
+}
+
+.gallery-card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    display: block;
+}
+
+.gallery-card-cover img {
+    height: 200px;
+}
+
+.gallery-card-label {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 6px;
+    font-size: 10px;
+    font-weight: bold;
+    border-radius: 2px;
+}
+
+.gallery-card-cover .gallery-card-label {
+    background: rgba(255, 215, 0, 0.9);
+    color: black;
+}
+
+.gallery-card-actions {
+    padding: 6px;
+    text-align: center;
+}
+
+.gallery-action-btn {
+    padding: 4px 12px;
+    background: var(--admin-win-bg);
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    cursor: pointer;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.gallery-action-btn:hover {
+    background: var(--admin-save-bg);
+}
+
+.gallery-action-btn:active {
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+}
+
+.gallery-extract-btn {
+    background: #ffe4e1;
+    margin-left: 4px;
+}
+
+.gallery-extract-btn:hover {
+    background: #ffcccb;
+}
+
+/* ── Bulk Edit ── */
+.bulk-edit-list {
+    margin-top: 10px;
+}
+
+.bulk-edit-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px;
+    border-bottom: 1px dotted var(--admin-win-border-dark);
+}
+
+.bulk-edit-row:last-child {
+    border-bottom: none;
+}
+
+.bulk-edit-row input[type="checkbox"] {
+    flex-shrink: 0;
+}
+
+.bulk-edit-row label {
+    margin: 0;
+}
+
+.bulk-edit-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.bulk-edit-modal-content {
+    margin: 0;
+}
+
+/* ── Extract Picker ── */
+.extract-picker-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.extract-picker-content {
+    margin: 0;
+}
+
+.extract-option-btn {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    background: var(--admin-win-bg);
+    border: 2px solid;
+    border-color: var(--admin-win-border-light) var(--admin-win-border-dark) var(--admin-win-border-dark) var(--admin-win-border-light);
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: bold;
+    text-align: left;
+}
+
+.extract-option-btn:hover {
+    background: var(--admin-save-bg);
+}
+
+.extract-option-btn:active {
+    border-color: var(--admin-win-border-dark) var(--admin-win-border-light) var(--admin-win-border-light) var(--admin-win-border-dark);
+}
+
+.extract-picker-item {
+    padding: 8px 10px;
+    cursor: pointer;
+    border-bottom: 1px dotted var(--admin-win-border-dark);
+    font-size: 12px;
+}
+
+.extract-picker-item:last-child {
+    border-bottom: none;
+}
+
+.extract-picker-item:hover {
+    background: var(--admin-save-bg);
+}