diff --git a/mc-multiserver-gallery/assets/css/gallery-pro.css b/mc-multiserver-gallery/assets/css/gallery-pro.css deleted file mode 100644 index 514a7e1..0000000 --- a/mc-multiserver-gallery/assets/css/gallery-pro.css +++ /dev/null @@ -1,785 +0,0 @@ -:root { - --mc-bg-dark: #1a1a1a; - --mc-bg-darker: #111111; - --mc-bg-light: #2d2d2d; - --mc-primary: #10b981; - --mc-primary-hover: #059669; - --mc-text-main: #f3f4f6; - --mc-text-muted: #9ca3af; - --mc-error: #ef4444; - --mc-border: #374151; - --mc-radius: 8px; - --mc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); -} - -/* =================================================================== */ -/* === 1. GLOBAL: UPLOAD WRAPPER (Für den Button auf der Seite) ====== */ -/* =================================================================== */ - -/* Styling für den Upload-Button auf der Frontend-Seite */ -.mc-upload-wrapper .mc-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - border: none; - border-radius: var(--mc-radius); - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s ease; - width: 100%; - font-size: 15px; - white-space: nowrap; - position: relative; - z-index: 1; - text-decoration: none; /* Falls es als Link agiert */ -} - -.mc-upload-wrapper .mc-btn-primary { - background-color: var(--mc-primary); - color: white; -} - -.mc-upload-wrapper .mc-btn-primary:hover { - background-color: var(--mc-primary-hover); -} - - -/* =================================================================== */ -/* === 2. MODAL SPECIFIC CSS (Fix für das Popup) ================== */ -/* =================================================================== */ - -/* Da das Modal Fixed ist, benötigen wir globale oder ID-spezifische Regeln */ -.mc-modal { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - min-height: 100vh; - background-color: rgba(0,0,0,0.85); - z-index: 999999; - padding: 50px 20px; -} - -.mc-modal.open { - display: block; - position: absolute; /* Ändert zu absolute damit Seite wachsen kann */ - opacity: 0; - animation: fadeIn 0.3s forwards; -} - -@keyframes fadeIn { to { opacity:1; } } - -.mc-modal-content { - background-color: var(--mc-bg-light); - width: 100%; - max-width: 550px; - border-radius: var(--mc-radius); - position: relative; - z-index: 1000000; - box-shadow: 0 0 50px rgba(0,0,0,0.8); - padding: 30px; - margin: 0 auto; -} - -/* Scoping: Inputs im Modal */ -#mc-upload-modal input[type="text"], -#mc-upload-modal input[type="file"], -#mc-upload-modal select { - width: 100%; - padding: 12px; - background-color: var(--mc-bg-dark); - border: 2px solid transparent; - border-radius: var(--mc-radius); - color: white; - margin-bottom: 15px; - box-sizing: border-box; - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -#mc-upload-modal input:focus, -#mc-upload-modal select:focus { - outline: none; - border-color: var(--mc-primary); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); -} - -#mc-upload-modal input:hover:not(:focus), -#mc-upload-modal select:hover:not(:focus) { - border-color: var(--mc-border); -} - -/* Scoping: Labels im Modal (damit sie nicht überall verändert werden) */ -#mc-upload-modal label { - display: block; - margin-bottom: 8px; - color: var(--mc-text-muted); - font-size: 14px; -} - -/* Scoping: Buttons im Modal */ -#mc-upload-modal .mc-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - border: none; - border-radius: var(--mc-radius); - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s ease; - width: 100%; - font-size: 15px; - white-space: nowrap; - position: relative; - z-index: 1; - margin-bottom: 10px; -} - -#mc-upload-modal .mc-btn-disabled { - opacity: 0.6; - cursor: not-allowed; - pointer-events: none; -} - -#mc-upload-modal .mc-btn-primary { - background-color: var(--mc-primary); - color: white; -} -#mc-upload-modal .mc-btn-primary:hover { - background-color: var(--mc-primary-hover); -} - -#mc-upload-modal .mc-btn-ghost { - background-color: transparent; - color: var(--mc-text-muted); - border: 1px solid var(--mc-border); -} -#mc-upload-modal .mc-btn-ghost:hover { - background-color: rgba(255,255,255,0.05); - color: white; -} - -#mc-upload-modal .mc-btn-success { - background-color: var(--mc-primary); - color: white; -} - -#mc-upload-modal .mc-btn-small { - padding: 6px 12px; - font-size: 13px; - width: auto; - margin-bottom: 0; -} - -#mc-upload-modal .mc-full-width { - width: 100%; - margin-bottom: 10px; -} -#mc-upload-modal .mc-full-width:last-child { margin-bottom: 0; } - -/* Scoping: Upload Elements im Modal */ -#mc-upload-modal .mc-file-drop { - border: 2px dashed var(--mc-border); - border-radius: var(--mc-radius); - padding: 30px; - text-align: center; - cursor: pointer; - transition: border-color 0.2s ease; - margin-bottom: 15px; - position: relative; - background: var(--mc-bg-dark); -} - -#mc-upload-modal .mc-file-drop:hover { - border-color: var(--mc-primary); -} - -#mc-upload-modal .mc-file-drop input[type="file"] { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0; - cursor: pointer; - padding: 0; - margin: 0; - z-index: 2; -} - -#mc-upload-modal .mc-file-preview { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 15px; -} - -#mc-upload-modal .mc-preview-item { - position: relative; - width: 60px; - height: 60px; - border-radius: 6px; - overflow: hidden; - border: 2px solid var(--mc-border); - background: var(--mc-bg-dark); -} - -#mc-upload-modal .mc-preview-item img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - -#mc-upload-modal .mc-preview-name { - display: none; -} - -#mc-upload-modal .mc-preview-remove { - position: absolute; - top: 2px; - right: 2px; - background: rgba(0,0,0,0.7); - color: white; - border: none; - border-radius: 50%; - width: 18px; - height: 18px; - line-height: 18px; - text-align: center; - font-size: 12px; - cursor: pointer; - display: block; - z-index: 3; -} - -#mc-upload-modal .mc-progress-bar { - height: 6px; - background-color: var(--mc-bg-dark); - border-radius: 3px; - overflow: hidden; - margin-bottom: 10px; -} - -#mc-upload-modal .mc-progress-fill { - height: 100%; - background-color: var(--mc-primary); - width: 0%; - transition: width 0.2s linear; -} - -/* Modal Close Button */ -.mc-modal-close { - position: absolute; - right: 15px; - top: 15px; - background: none; - border: none; - color: var(--mc-text-muted); - font-size: 24px; - cursor: pointer; - line-height: 1; - z-index: 10; -} - -.mc-modal-close:hover { - color: var(--mc-text-main); -} - -/* Modal Steps */ -.mc-step { - display: none; - animation: slideIn 0.3s ease-out; -} - -@keyframes slideIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -.mc-step.active { display: block; } - -.mc-step-header { - border-bottom: 1px solid var(--mc-border); - padding-bottom: 15px; - margin-bottom: 20px; - display: flex; - align-items: center; - gap: 10px; -} - -.mc-step-num { - background: var(--mc-primary); - color: white; - width: 28px; - height: 28px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 14px; - flex-shrink: 0; -} - -.mc-step-header h3 { - margin: 0; - font-size: 18px; -} - -/* Modal Feedback Elements */ -#mc-upload-modal .mc-info-box { - background-color: rgba(59, 130, 246, 0.1); - border-left: 3px solid #3b82f6; - padding: 12px; - margin-bottom: 15px; - font-size: 14px; - color: #93c5fd; -} - -#mc-upload-modal .mc-token-box { - background-color: var(--mc-bg-dark); - padding: 15px; - border-radius: var(--mc-radius); - margin-bottom: 15px; - display: flex; - align-items: center; - justify-content: space-between; - border: 1px solid var(--mc-border); - transform: translateZ(0); -} - -#mc-upload-modal .mc-token-box code { - color: var(--mc-primary); - font-family: monospace; - font-size: 16px; - word-break: break-all; - margin-right: 10px; -} - -#mc-upload-modal .mc-copy-btn { - background: none; - border: none; - color: var(--mc-text-muted); - cursor: pointer; - font-size: 18px; - transition: color 0.2s; - min-width: 24px; - text-align: center; -} - -#mc-upload-modal .mc-copy-btn:hover { color: white; } - -#mc-upload-modal .mc-msg-success { - color: var(--mc-primary); - background-color: rgba(16, 185, 129, 0.1); - border: 1px solid var(--mc-primary); - padding: 15px; - border-radius: var(--mc-radius); - margin-top: 15px; - font-weight: bold; - font-size: 16px; - line-height: 1.5; -} - -#mc-upload-modal .mc-msg-error { - color: var(--mc-error); - background-color: rgba(239, 68, 68, 0.1); - border: 1px solid var(--mc-error); - padding: 15px; - border-radius: var(--mc-radius); - margin-top: 15px; - font-weight: bold; - font-size: 16px; - line-height: 1.5; -} - -#mc-upload-modal .mc-loading { - display: inline-block; - width: 14px; - height: 14px; - border: 2px solid rgba(255,255,255,0.3); - border-radius: 50%; - border-top-color: #fff; - animation: spin 1s ease-in-out infinite; -} - -@keyframes spin { to { transform: rotate(360deg); } } - -/* Modal: Album Selector */ -#mc-upload-modal .mc-album-selector { - display: flex; - gap: 8px; - margin-bottom: 15px; -} - -#mc-upload-modal .mc-album-selector select { - flex: 1; - margin-bottom: 0; -} - -#mc-upload-modal #mc-new-album-form { - margin-top: 10px; - margin-bottom: 15px; - padding: 15px; - background: var(--mc-bg-dark); - border-radius: var(--mc-radius); - border: 2px dashed var(--mc-border); -} - -#mc-upload-modal #mc-new-album-form label { - margin-bottom: 8px; -} - -#mc-upload-modal #mc-new-album-form input { - margin-bottom: 10px; -} - -#mc-upload-modal .mc-session-info { - background: var(--mc-bg-dark); - padding: 12px; - border-radius: var(--mc-radius); - margin-bottom: 15px; - display: flex; - align-items: center; - gap: 10px; -} - -#mc-upload-modal .mc-session-badge { - background: var(--mc-primary); - color: white; - padding: 4px 10px; - border-radius: 4px; - font-size: 12px; - font-weight: bold; -} - - -/* =================================================================== */ -/* === 3. GALLERY CONTAINER SCOPING (Gilt nur für die Gallery Ansicht) === */ -/* =================================================================== */ - -.mc-gallery-container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - padding-bottom: 60px; /* Mehr Platz nach unten für Modal */ - min-height: 60vh; /* Mindestens volle Viewport-Höhe */ - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - color: var(--mc-text-main); - position: relative; - z-index: 1; -} - -/* Inputs nur im Gallery Container scopen (für evtl. Suchfelder o.ä.) */ -.mc-gallery-container input[type="text"], -.mc-gallery-container select { - width: 100%; - padding: 12px; - background-color: var(--mc-bg-dark); - border: 2px solid transparent; - border-radius: var(--mc-radius); - color: white; - margin-bottom: 15px; - box-sizing: border-box; - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -.mc-gallery-container input:focus, -.mc-gallery-container select:focus { - outline: none; - border-color: var(--mc-primary); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); -} - -.mc-gallery-container input:hover:not(:focus), -.mc-gallery-container select:hover:not(:focus) { - border-color: var(--mc-border); -} - -/* Labels nur im Container scopen */ -.mc-gallery-container label { - display: block; - margin-bottom: 8px; - color: var(--mc-text-muted); - font-size: 14px; -} - -/* Buttons nur im Container scopen (z.B. "Zurück" Button) */ -.mc-gallery-container .mc-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - border: none; - border-radius: var(--mc-radius); - font-weight: 600; - cursor: pointer; - transition: background-color 0.2s ease; - width: auto; /* Automatische Breite für Header Buttons */ - font-size: 15px; - white-space: nowrap; - position: relative; - z-index: 1; - margin-bottom: 10px; -} - -.mc-gallery-container .mc-btn-disabled { - opacity: 0.6; - cursor: not-allowed; - pointer-events: none; -} - -.mc-gallery-container .mc-btn-primary { - background-color: var(--mc-primary); - color: white; -} -.mc-gallery-container .mc-btn-primary:hover { - background-color: var(--mc-primary-hover); -} - -.mc-gallery-container .mc-btn-ghost { - background-color: transparent; - color: var(--mc-text-muted); - border: 1px solid var(--mc-border); -} -.mc-gallery-container .mc-btn-ghost:hover { - background-color: rgba(255,255,255,0.05); - color: white; -} - -.mc-gallery-container .mc-btn-success { - background-color: var(--mc-primary); - color: white; -} - -.mc-gallery-container .mc-btn-small { - padding: 6px 12px; - font-size: 13px; - margin-bottom: 0; -} - -/* === FRONTEND GALLERY === */ -.mc-filter-bar { margin-bottom: 20px; position: relative; z-index: 2; } -.mc-filter-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } -.mc-filter-icon { width: 20px; height: 20px; flex-shrink: 0; } -.mc-filter-title { font-size: 16px; font-weight: 600; margin: 0; } - -.mc-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; } -.mc-tag { - background: var(--mc-bg-light); - color: var(--mc-text-muted); - padding: 5px 12px; - border-radius: 20px; - text-decoration: none; - font-size: 13px; - border: 1px solid var(--mc-border); - transition: 0.2s; - display: inline-flex; - align-items: center; - gap: 6px; - position: relative; - z-index: 1; -} -.mc-tag:hover, .mc-tag-active { - background: var(--mc-primary); - color: white; - border-color: var(--mc-primary); -} -.mc-tag-count { background: rgba(0,0,0,0.2); padding: 1px 6px; border-radius: 10px; font-size: 11px; } - -.mc-gallery-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 15px; -} - -.mc-gallery-item { - display: block; - text-decoration: none; - color: white; - border-radius: var(--mc-radius); - overflow: hidden; - position: relative; - background: var(--mc-bg-light); - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - transition: transform 0.2s; - z-index: 1; -} - -/* FIX: Link Farbe nur im Container ändern */ -.mc-gallery-container .mc-gallery-item, -.mc-gallery-container .mc-gallery-item:hover { - color: white; /* Reset für Anchor-Tag innerhalb Gallery Item */ -} - -.mc-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.3); } - -.mc-gallery-item-inner { - position: relative; - aspect-ratio: 16/9; - overflow: hidden; -} - -.mc-gallery-item img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; -} - -.mc-gallery-item:hover img { transform: scale(1.05); } - -.mc-gallery-overlay { - position: absolute; - inset: 0; - background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); - opacity: 0; - transition: opacity 0.2s; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 10px; -} - -.mc-gallery-item:hover .mc-gallery-overlay { opacity: 1; } - -.mc-watermark { - font-size: 12px; - font-weight: bold; - text-shadow: 0 1px 2px black; -} - -/* Views Badge */ -.mc-views-badge { - position: absolute; - top: 8px; - left: 8px; - background: rgba(0, 0, 0, 0.7); - color: white; - padding: 3px 8px; - border-radius: 4px; - font-size: 11px; - display: flex; - gap: 4px; - pointer-events: none; - z-index: 5; -} - -.mc-views-count { - font-weight: bold; - font-size: 12px; -} - -.mc-date-badge { - position: absolute; - top: 8px; - right: 8px; - background: rgba(0, 0, 0, 0.7); - color: white; - padding: 3px 8px; - border-radius: 4px; - font-size: 11px; - pointer-events: none; - z-index: 5; -} - -.mc-empty-state { - text-align: center; - padding: 40px; - color: var(--mc-text-muted); - background: var(--mc-bg-light); - border-radius: var(--mc-radius); -} - -/* === LIGHTBOX === */ -.mc-lightbox { - display: none; - position: fixed; - z-index: 9999999; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.95); - align-items: center; - justify-content: center; - opacity: 0; -} - -.mc-lightbox.active { - display: flex; - animation: fadeIn 0.3s forwards; -} - -.mc-lightbox-content { - position: relative; - max-width: 90%; - max-height: 90%; - text-align: center; -} - -.mc-lightbox img { - max-width: 100%; - max-height: 85vh; - border-radius: 4px; - box-shadow: 0 0 20px rgba(0,0,0,0.5); -} - -.mc-lightbox-info { - margin-top: 15px; - font-size: 16px; - color: white; -} - -.mc-lightbox-close { - position: absolute; - top: -40px; - right: 0; - background: none; - border: none; - color: white; - font-size: 30px; - cursor: pointer; -} - -/* === ALBUMS === */ -.mc-player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } -.mc-player-title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0; } -.mc-highlight { color: var(--mc-primary); } - -.mc-albums-section { margin-bottom: 30px; } -.mc-section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; border-bottom: 1px solid var(--mc-border); padding-bottom: 10px; } - -.mc-albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-bottom: 30px; } -.mc-album-card { - background: var(--mc-bg-light); - border-radius: var(--mc-radius); - overflow: hidden; - text-decoration: none; - color: white; - display: block; - transition: 0.2s; -} -.mc-album-card:hover { background: #374151; } -.mc-album-cover { height: 100px; background-size: cover; background-position: center; background-color: #222; } -.mc-album-empty { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--mc-border); } -.mc-album-info { padding: 10px; } -.mc-album-info h4 { margin: 0 0 5px 0; font-size: 14px; } -.mc-album-count { font-size: 12px; color: var(--mc-text-muted); } -.mc-album-player { display: block; font-size: 12px; color: var(--mc-text-muted); margin-top: 2px; } - -/* === RESPONSIVE === */ -@media (max-width: 768px) { - #mc-upload-modal .mc-modal-content { - max-width: 90%; - padding: 20px; - } -} \ No newline at end of file