@mtldev514/retro-portfolio-engine 1.0.0 → 1.1.2

package/engine/admin/admin.css

@@ -1,720 +0,0 @@
-/* ═══════════════════════════════════════════════════
-   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);
-}