/* ============================================================ Combinatorial Cabinet — Stylesheet ============================================================ */ /* --- Variables & Reset ------------------------------------ */ :root { --red: #D00808; --orange: #FF9613; --lblue: #02A0F7; --dblue: #002D7A; --lgreen: #83D221; --dgreen: #00A341; --navy: var(--dblue); --blue: var(--lblue); --accent: var(--orange); --light: #f7f8fc; --border: #dde2ed; --text: #1a202c; --muted: #4a5568; --white: #ffffff; --radius: 6px; --shadow: 0 2px 8px rgba(0,0,0,0.08); } /* Language visibility — controlled by class on set before first paint */ html.lang-en .lang-de { display: none; } html.lang-de .lang-en { display: none; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.65; color: var(--text); background: var(--light); min-height: 100vh; display: flex; flex-direction: column; } /* --- Layout helpers --------------------------------------- */ .container { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } /* --- Header ----------------------------------------------- */ .site-header { background: var(--navy); color: var(--white); padding: 0.9rem 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; color: var(--white); text-decoration: none; } .site-title:hover { color: #8cc4ff; } .site-nav { display: flex; align-items: center; gap: 1.5rem; } .site-nav a { color: #8cc4ff; text-decoration: none; font-size: 0.9rem; } .site-nav a:hover { color: var(--white); } /* --- Language toggle switch ------------------------------- */ .lang-toggle { display: flex; border-radius: var(--radius); overflow: hidden; border: 1.5px solid #3bb4ff; } .lang-toggle__option { background: #9ca3af; color: var(--white); border: none; padding: 0.25rem 0.65rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s; line-height: 1; } .lang-toggle__option:first-child { border-right: 1px solid #3bb4ff; } .lang-toggle__option--active, html.lang-en .lang-toggle__option[data-lang="en"], html.lang-de .lang-toggle__option[data-lang="de"] { background: var(--lblue); } .lang-toggle__option:not(.lang-toggle__option--active):hover { background: #6b7280; } /* --- Main content ----------------------------------------- */ .main-content { flex: 1; padding: 2.5rem 0 3rem; } /* --- Homepage intro --------------------------------------- */ .collection-intro { margin-bottom: 2.5rem; } .collection-intro h1 { font-size: 2rem; font-weight: 700; color: var(--navy); margin-bottom: 0.6rem; } .collection-intro p { color: var(--muted); font-size: 1.05rem; } .collection-intro__photo { margin: 2rem auto 0; max-width: 480px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); } .collection-intro__photo img { width: 100%; display: block; } /* --- Collection bar (count + sort) ------------------------ */ .collection-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .collection-count { font-size: 0.95rem; color: var(--muted); font-weight: 500; } .sort-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sort-toggle__option { padding: 0.3rem 0.75rem; border: none; background: white; font-size: 0.8rem; cursor: pointer; color: var(--muted); transition: background 0.15s, color 0.15s; } .sort-toggle__option + .sort-toggle__option { border-left: 1px solid var(--border); } .sort-toggle__option--active { background: var(--navy); color: white; } .sort-toggle__option:hover:not(.sort-toggle__option--active) { background: var(--light); color: var(--text); } /* --- Object grid ------------------------------------------ */ .object-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .object-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--dblue); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; } .object-card:nth-child(6n+1) { border-top-color: var(--red); } .object-card:nth-child(6n+2) { border-top-color: var(--orange); } .object-card:nth-child(6n+3) { border-top-color: var(--lblue); } .object-card:nth-child(6n+4) { border-top-color: var(--dblue); } .object-card:nth-child(6n+5) { border-top-color: var(--lgreen); } .object-card:nth-child(6n+6) { border-top-color: var(--dgreen); } .object-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .card-image { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #e6f0fa; } .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-image--placeholder { display: flex; align-items: center; justify-content: center; } .placeholder-icon { font-size: 3rem; color: #aab4cc; } .card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .card-body h2 { font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.3; } .card-subtitle { font-size: 0.8rem; color: var(--accent); font-style: italic; } .card-teaser { font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5; } .card-meta { font-size: 0.75rem; color: #9ca3af; margin: 0; } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.4rem; } /* --- Like button ------------------------------------------ */ .like-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: var(--radius); transition: transform 0.15s; color: #9ca3af; font-size: 0.75rem; line-height: 1; z-index: 1; position: relative; } .like-btn:hover { transform: scale(1.15); } .heart-icon { width: 16px; height: 16px; fill: none; stroke: #9ca3af; stroke-width: 1.5; transition: fill 0.2s, stroke 0.2s; } .like-btn--liked .heart-icon { fill: var(--red); stroke: var(--red); } .like-count { font-variant-numeric: tabular-nums; } /* --- Object detail page: like button --------------------- */ .object-meta-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; } .object-meta-row .like-btn { font-size: 0.85rem; } .object-meta-row .heart-icon { width: 18px; height: 18px; } /* --- Object detail page ----------------------------------- */ .object-page { } .object-header { margin-bottom: 1.75rem; border-bottom: 2px solid var(--lblue); padding-bottom: 1.25rem; } .object-header h1 { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 0.4rem; } .object-subtitle { font-size: 1rem; color: var(--accent); font-style: italic; } .object-meta { font-size: 0.8rem; color: #9ca3af; margin-top: 0.4rem; } .object-image { margin: 0 0 1.75rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .object-image img { width: 100%; display: block; } /* --- Description text ------------------------------------- */ .object-description { margin-bottom: 2rem; font-size: 1rem; line-height: 1.75; color: var(--text); display: flow-root; /* contain floats without clipping overflow */ } .object-description p { margin-bottom: 0.9rem; } .object-description ul, .object-description ol { padding-left: 1.5rem; margin-bottom: 0.9rem; } .object-description strong { color: var(--navy); } .object-description img { max-width: 100%; height: auto; border-radius: var(--radius); } .object-description img.float-right { float: right; max-width: 240px; margin: 0 0 1rem 1.5rem; } .object-description img.float-left { float: left; max-width: 240px; margin: 0 1.5rem 1rem 0; } /* Remove the wrapping

margin when it only contains a floated image */ .object-description p:has(> img.float-right), .object-description p:has(> img.float-left) { margin: 0; padding: 0; } /* Clear floats before bold section headings (paragraphs containing only a ) */ .object-description p:has(> strong:only-child) { clear: both; } } .object-description .lang-en, .object-description .lang-de { overflow-x: auto; -webkit-overflow-scrolling: touch; } .properties-table { border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } .properties-table thead th { background: var(--navy); color: var(--white); font-weight: 600; padding: 0.5rem 0.75rem; text-align: center; } .properties-table tbody th { background: var(--light); font-weight: 600; color: var(--muted); text-align: left; padding: 0.45rem 0.75rem; border-right: 1px solid var(--border); } .properties-table tbody td { text-align: center; padding: 0.45rem 0.75rem; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; } .properties-table tbody tr { border-bottom: 1px solid var(--border); } .properties-table tbody tr:last-child { border-bottom: none; } .properties-table tbody tr:nth-child(even) { background: var(--light); } /* --- Back link & card download ----------------------------- */ .back-link { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .back-link a { font-size: 0.9rem; color: var(--blue); text-decoration: none; } .back-link a:hover { text-decoration: underline; } .card-download { font-size: 0.8rem !important; color: var(--muted) !important; } .card-download:hover { color: var(--blue) !important; } /* --- Footer ----------------------------------------------- */ .site-footer { background: var(--navy); color: #8cc4ff; padding: 0.75rem 0; font-size: 0.825rem; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-footer p { margin: 0; } .site-footer p a { color: #8cc4ff; text-decoration: none; } .site-footer p a:hover { color: var(--white); text-decoration: underline; } .footer-nav { display: flex; gap: 1.5rem; flex-shrink: 0; } .footer-nav a { color: #8cc4ff; text-decoration: none; font-size: 0.8rem; } .footer-nav a:hover { color: var(--white); text-decoration: underline; } /* --- Legal pages (Impressum, Datenschutz) ----------------- */ .legal-page h1 { font-size: 2rem; font-weight: 700; color: var(--navy); margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--lblue); } .legal-page h2 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 0.5rem; } .legal-page p, .legal-page li { font-size: 0.95rem; color: var(--muted); line-height: 1.75; } .legal-page ul { padding-left: 1.5rem; margin-bottom: 0.9rem; } .legal-page a { color: var(--blue); text-decoration: none; } .legal-page a:hover { text-decoration: underline; } /* --- Nav auth button -------------------------------------- */ .nav-auth { font-size: 0.8rem !important; padding: 0.2rem 0.7rem; border: 1px solid #3bb4ff; border-radius: var(--radius); transition: background 0.15s; } .nav-auth:hover, .nav-new:hover { background: rgba(59,180,255,0.15); } .nav-new-icon { display: none; } .nav-new { font-size: 0.8rem !important; padding: 0.2rem 0.7rem; border: 1px solid #3bb4ff; border-radius: var(--radius); font-weight: 600; } /* --- Admin actions (New Object button) -------------------- */ .admin-actions { margin-bottom: 1.5rem; } .btn-new-object { display: inline-block; padding: 0.5rem 1.2rem; background: var(--dblue); color: var(--white); text-decoration: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; transition: background 0.15s; } .btn-new-object:hover { background: var(--lblue); } /* --- Edit button on object page --------------------------- */ .object-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .object-title-row h1 { margin-bottom: 0; } .btn-edit-object { font-size: 0.85rem; padding: 0.25rem 0.9rem; background: var(--dblue); color: var(--white) !important; text-decoration: none !important; border-radius: var(--radius); font-weight: 600; transition: background 0.15s; } .btn-edit-object:hover { background: var(--lblue); } /* --- Login page ------------------------------------------- */ .login-page { max-width: 360px; margin: 3rem auto; text-align: center; } .login-page h1 { font-size: 1.5rem; color: var(--navy); margin-bottom: 1.5rem; } .login-page form { display: flex; flex-direction: column; gap: 0.75rem; } .login-page input[type="password"] { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; } .login-page button { padding: 0.6rem; background: var(--dblue); color: var(--white); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .login-page button:hover { background: var(--lblue); } .login-error { color: var(--red); font-size: 0.9rem; margin-bottom: 0.5rem; } /* --- Editor page ------------------------------------------ */ .editor-page { max-width: 780px; margin: 0 auto; } .preview-hint { font-size: 0.85rem; color: var(--muted); background: var(--light); border: 1px solid var(--border); border-left: 3px solid var(--lblue); border-radius: var(--radius); padding: 0.5rem 0.85rem; margin-bottom: 1.5rem; } /* --- Live preview section (below form) -------------------- */ .editor-preview { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border); } .editor-preview__heading { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 1.25rem; } .preview-block { margin-bottom: 1.75rem; } .preview-block__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; margin-bottom: 0.5rem; } /* Side-by-side row for homepage card + info card */ .preview-cards-row { display: flex; gap: 1.5rem; align-items: flex-start; } .preview-block--card { flex: 1; min-width: 0; } /* --- Object page article preview -------------------------- */ .preview-article { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; font-size: 0.9rem; line-height: 1.65; overflow: hidden; } .preview-article__header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--lblue); } .preview-article__title-row { display: flex; align-items: flex-start; } .preview-article__title { font-size: 1.4rem; font-weight: 700; color: var(--navy); margin: 0 0 0.3rem; line-height: 1.2; } .preview-article__subtitle { font-size: 0.9rem; color: var(--accent); font-style: italic; margin: 0; } .preview-article__meta { font-size: 0.8rem; color: #9ca3af; margin-top: 0.3rem; } .preview-article__image { margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .preview-article__image img { width: 100%; display: block; } .preview-article__description { overflow: hidden; } .preview-article__description p { margin-bottom: 0.75rem; } .preview-article__description ul, .preview-article__description ol { padding-left: 1.5rem; margin-bottom: 0.75rem; } .preview-article__description strong { color: var(--navy); } .preview-article__description img { max-width: 100%; height: auto; border-radius: var(--radius); } .preview-article__description img.float-right { float: right; max-width: 220px; margin: 0 0 1rem 1.25rem; } .preview-article__description img.float-left { float: left; max-width: 220px; margin: 0 1.25rem 1rem 0; } .preview-article__description p:has(> img.float-right), .preview-article__description p:has(> img.float-left) { margin: 0; padding: 0; } .preview-article__description p:has(> strong:only-child) { clear: both; } .preview-article__description table { font-size: 0.85rem; border-collapse: collapse; margin: 0.75rem 0; } .preview-article__description th, .preview-article__description td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; } /* --- Homepage card preview -------------------------------- */ /* Mirrors the real .object-card but is not a link */ .preview-homepage-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; max-width: 280px; } .preview-homepage-card__image { width: 100%; aspect-ratio: 4 / 3; background: #e6f0fa; overflow: hidden; } .preview-homepage-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .preview-homepage-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #aab4cc; } .preview-homepage-card__body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; } .preview-homepage-card__title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.3; } .preview-homepage-card__subtitle { font-size: 0.78rem; color: var(--accent); font-style: italic; } .preview-homepage-card__teaser { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.5; } .preview-homepage-card__meta { font-size: 0.72rem; color: #9ca3af; margin-top: 0.25rem; } /* --- Info card (PDF) preview ------------------------------ */ /* Proportional to 10×6cm card (5:3) with dashed cut border */ .preview-infocard { width: 100%; max-width: 340px; aspect-ratio: 5 / 3; border: 1.5px dashed #9ca3af; border-radius: var(--radius); background: var(--white); display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr auto; padding: 0.65rem 0.7rem 0.45rem; gap: 0.25rem; overflow: hidden; font-size: 0.72rem; box-shadow: none; } .preview-infocard__body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; min-width: 0; } .preview-infocard__qr { grid-column: 2; grid-row: 1; width: 52px; height: 52px; color: var(--text); flex-shrink: 0; align-self: flex-end; padding-left: 0.35rem; } .preview-infocard__qr svg { display: block; width: 100%; height: 100%; } .preview-infocard__title { font-weight: 700; font-size: 1rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-infocard__subtitle { font-size: 0.68rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-infocard__teaser { font-size: 0.68rem; color: #4a5568; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.1rem; } .preview-infocard__footer { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.58rem; color: #9ca3af; border-top: 1px solid var(--border); padding-top: 0.3rem; gap: 0.5rem; overflow: hidden; } .preview-infocard__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 65%; } .editor-page h1 { font-size: 1.6rem; color: var(--navy); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--lblue); } .editor-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; background: var(--white); } .editor-form legend { font-weight: 700; font-size: 0.95rem; color: var(--navy); padding: 0 0.5rem; } .form-hint { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; } .form-hint code { background: var(--light); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.8rem; } .form-row { margin-bottom: 0.75rem; } .form-row label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 0.2rem; } .form-row input[type="text"], .form-row input[type="date"] { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; } .form-row--half { display: flex; gap: 1rem; } .form-row--half > div { flex: 1; } .form-row--checkbox { margin-top: 0.5rem; } .form-row--checkbox label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); cursor: pointer; } .editor-form textarea { width: 100%; padding: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; line-height: 1.6; resize: vertical; } .editor-form input[type="file"] { font-size: 0.85rem; } /* --- Dynamic property/reference rows ---------------------- */ .prop-row, .ref-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } .prop-row input, .ref-row input { flex: 1; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; } .remove-row { background: none; border: 1px solid var(--border); border-radius: var(--radius); width: 28px; height: 28px; cursor: pointer; font-size: 1rem; color: var(--muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .remove-row:hover { color: var(--red); border-color: var(--red); } #add-property, #add-reference { margin-top: 0.5rem; padding: 0.35rem 0.9rem; background: var(--light); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; cursor: pointer; color: var(--muted); transition: color 0.15s, border-color 0.15s; } #add-property:hover, #add-reference:hover { color: var(--dblue); border-color: var(--dblue); } /* --- Upload area ------------------------------------------ */ .upload-area { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; } #upload-btn { padding: 0.4rem 1rem; background: var(--dblue); color: var(--white); border: none; border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } #upload-btn:hover { background: var(--lblue); } #upload-btn:disabled { opacity: 0.6; cursor: not-allowed; } .image-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.85rem; } .image-table thead th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--border); } .image-table tbody tr { border-bottom: 1px solid var(--border); } .image-table tbody tr:hover { background: var(--light); } .image-table td { padding: 0.5rem 0.6rem; vertical-align: middle; } .image-table td:first-child, .image-table th:first-child { width: 3.5rem; text-align: center; } .image-table td:last-child { text-align: right; white-space: nowrap; } .thumb-label { cursor: pointer; } .image-actions { display: flex; gap: 0.3rem; justify-content: flex-end; } .image-preview { width: 48px; height: 36px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); } .rotate-btn { padding: 0.2rem 0.45rem; background: none; border: 1px solid var(--border); border-radius: 3px; font-size: 0.85rem; cursor: pointer; color: var(--muted); transition: color 0.15s, border-color 0.15s; } .rotate-btn:hover { color: var(--dblue); border-color: var(--dblue); } .rotate-btn:disabled { opacity: 0.5; cursor: not-allowed; } .image-table code { background: var(--light); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.8rem; } .copy-btn { padding: 0.2rem 0.5rem; background: var(--light); border: 1px solid var(--border); border-radius: 3px; font-size: 0.75rem; cursor: pointer; color: var(--muted); } .copy-btn:hover { color: var(--dblue); border-color: var(--dblue); } .delete-img-btn { padding: 0.2rem 0.45rem; background: none; border: 1px solid var(--border); border-radius: 3px; font-size: 0.75rem; cursor: pointer; color: var(--muted); transition: color 0.15s, border-color 0.15s; } .delete-img-btn:hover { color: var(--red); border-color: var(--red); } /* --- Form actions (Save/Cancel) --------------------------- */ .form-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 0.5rem; } .btn-save { padding: 0.6rem 2rem; background: var(--dblue); color: var(--white); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-save:hover { background: var(--lblue); } .form-actions a { font-size: 0.9rem; color: var(--muted); text-decoration: none; } .form-actions a:hover { color: var(--blue); text-decoration: underline; } /* --- Responsive ------------------------------------------- */ @media (max-width: 600px) { /* Container */ .container { padding: 0 1rem; } /* Header */ .site-header .container { gap: 0.5rem; } .site-title { font-size: 1rem; } .site-nav { gap: 0.75rem; } .nav-new-text { display: none; } .nav-new-icon { display: inline; } /* Language & sort toggles — touch-friendly */ .lang-toggle__option { padding: 0.4rem 0.7rem; font-size: 0.85rem; } .sort-toggle__option { padding: 0.45rem 0.85rem; font-size: 0.85rem; } /* Footer */ .site-footer .container { flex-direction: column; text-align: center; gap: 0.4rem; } .site-footer { padding: 1rem 0; } .footer-nav { justify-content: center; } /* Frontpage */ .collection-intro h1 { font-size: 1.5rem; } .collection-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .object-grid { grid-template-columns: 1fr; } /* Object detail */ .object-header h1 { font-size: 1.5rem; } .back-link { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* Floated images — full width on narrow screens */ .object-description img.float-right, .object-description img.float-left { float: none; display: block; max-width: 100%; margin: 0 auto 1rem; } /* Properties table */ .properties-table { font-size: 0.85rem; } /* Like button — larger touch target */ .like-btn { padding: 0.4rem 0.5rem; } .heart-icon { width: 20px; height: 20px; } /* Editor preview: stack cards vertically on mobile */ .preview-cards-row { flex-direction: column; } .editor-page { max-width: 100%; } /* Editor form */ .form-row--half { flex-direction: column; } /* Image table in editor — stack actions */ .image-table { font-size: 0.8rem; } .image-table thead { display: none; } .image-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .image-table td { padding: 0; border: none; } .image-table td:first-child { width: auto; } .image-table td:last-child { white-space: normal; } .image-actions { gap: 0.4rem; } .image-table code { font-size: 0.75rem; word-break: break-all; } .rotate-btn, .copy-btn, .delete-img-btn { padding: 0.35rem 0.6rem; font-size: 0.85rem; } /* Upload area */ .upload-area { flex-wrap: wrap; } /* Login */ .login-page { margin: 1.5rem auto; } }