/* ── THUMBNAIL ── */ .proj-thumb { width: 100%; height: 90px; border-radius: 10px; overflow: hidden; background: #0d1120; border: 1px solid rgba(201,168,76,0.1); margin-bottom: 2px; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .proj-thumb canvas { display: block; width: 100%; height: 100%; } .proj-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: .18; } .proj-thumb-placeholder svg { width: 36px; height: 36px; color: var(--gold); } /* Schnellzugriff grosse Cards */ #pinned-section .projects-grid { grid-template-columns: repeat(2, 1fr); } #pinned-section .project-card { min-height: 200px; } #pinned-section .proj-thumb { height: 110px; } /* TAGS */ .proj-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .proj-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s; } .proj-tag:hover { opacity: .8; } .proj-tag.industrie { background: rgba(76,143,175,.18); color: #4c8faf; border-color: rgba(76,143,175,.3); } .proj-tag.gebaeudetechnik { background: rgba(76,175,132,.18); color: #4caf84; border-color: rgba(76,175,132,.3); } .proj-tag.bmz { background: rgba(224,92,92,.18); color: #e05c5c; border-color: rgba(224,92,92,.3); } .proj-tag.automation { background: rgba(201,168,76,.18); color: #c9a84c; border-color: rgba(201,168,76,.3); } .proj-tag.solar { background: rgba(245,158,11,.18); color: #f59e0b; border-color: rgba(245,158,11,.3); } .proj-tag.bahn { background: rgba(139,92,246,.18); color: #8b5cf6; border-color: rgba(139,92,246,.3); } .proj-tag.energie { background: rgba(249,115,22,.18); color: #f97316; border-color: rgba(249,115,22,.3); } .proj-tag.default { background: rgba(136,144,164,.18); color: #8890a4; border-color: rgba(136,144,164,.3); } /* TAG FILTER PILLS */ #tag-filter-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .tag-filter-pill { font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px; border:1px solid var(--border);background:none;color:var(--text-muted); cursor:pointer;font-family:inherit;transition:all .15s; } .tag-filter-pill:hover { border-color:var(--gold);color:var(--gold); } .tag-filter-pill.active { background:rgba(201,168,76,.15);border-color:var(--gold);color:var(--gold); } /* BULK SELECTION */ .bulk-checkbox { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; z-index: 10; display: none; border-radius: 4px; } body.bulk-mode .bulk-checkbox { display: block; } body.bulk-mode .project-card { padding-left: 36px; } .project-card.selected-bulk { border-color: var(--gold) !important; background: rgba(201,168,76,.05) !important; } #bulk-action-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--gold); border-radius: 14px; padding: 12px 20px; display: none; align-items: center; gap: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.5); z-index: 200; white-space: nowrap; } #bulk-action-bar.visible { display: flex; } #bulk-count { font-size: 13px; font-weight: 600; color: var(--gold); } .bulk-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); color: var(--text-dim); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .15s; } .bulk-btn:hover { border-color: var(--border-hover); color: var(--text); } .bulk-btn.danger:hover { border-color: rgba(224,92,92,.5); color: var(--red); } .bulk-btn svg { width: 13px; height: 13px; } #bulk-toggle-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; color: var(--text-dim); font-size: 12px; font-family: inherit; cursor: pointer; transition: all .15s; } #bulk-toggle-btn:hover { border-color: var(--gold); color: var(--gold); } #bulk-toggle-btn.active { background: rgba(201,168,76,.1); border-color: var(--gold); color: var(--gold); } #bulk-toggle-btn svg { width: 13px; height: 13px; } /* LAZY LOAD */ #load-more-trigger { height: 30px; } /* DRC Progress enhanced */ .progress-drc-label { font-size: 10px; color: var(--green); } /* SORT improvements */ .sort-select option { background: var(--bg2); } /* PINNED big cards */ #pinned-section { margin-bottom: 28px; } @media (max-width: 768px) { #pinned-section .projects-grid { grid-template-columns: 1fr; } } /* TAGS MODAL */ #modal-tags .modal { width: 460px; } .tags-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .tag-preset-btn { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: all .15s; } .tags-current { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; background: var(--bg3); border-radius: 8px; padding: 8px; } .tag-current-item { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: rgba(201,168,76,.15); color: var(--gold); cursor: pointer; } .tag-current-item:hover { background: rgba(224,92,92,.15); color: var(--red); }
Bitte warten.