/* ============================================================================= Writer — vlastní rich-text editor pro canirace.com. Layout: .writer-editor obaluje [.writer-toolbar, .writer-content]. Content area je contenteditable s vloženými special bloky (.writer-block). Modaly se renderují do body přes .writer-modal-backdrop. Dark mode: třída `dark` na aktivuje dark varianty (stejný pattern jako .prose v tailwind.input.css). Záměrně NEpoužívá @apply — writer.css je samostatný soubor mimo Tailwind pipeline pro snadnou portabilitu. Velikosti záměrně v px / rem (ne Tailwind tokeny) — editor je samostatná komponenta, nemá smysl provazovat na specifický design system. ============================================================================= */ /* --- Skrytí původní textarey, nahrazení editorem --- */ .writer-textarea.writer-textarea { display: none !important; } /* --- Editor wrapper --- */ .writer-editor { border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; overflow: hidden; font-family: inherit; } .dark .writer-editor { border-color: #4b5563; background: #111827; } /* --- Toolbar --- */ .writer-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; } .dark .writer-toolbar { background: #1f2937; border-bottom-color: #374151; } .writer-toolbar-group { display: flex; gap: 0; border: 1px solid #e5e7eb; border-radius: 6px; background: #ffffff; overflow: hidden; } .dark .writer-toolbar-group { border-color: #374151; background: #111827; } .writer-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background: transparent; border: 0; color: #374151; cursor: pointer; font-size: 14px; line-height: 1; transition: background-color 0.12s ease, color 0.12s ease; user-select: none; } .dark .writer-btn { color: #d1d5db; } .writer-btn:hover { background: #f3f4f6; color: #111827; } .dark .writer-btn:hover { background: #374151; color: #ffffff; } .writer-btn.is-active { background: #ede9fe; color: #6d28d9; } .dark .writer-btn.is-active { background: #4c1d95; color: #ddd6fe; } .writer-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Select pro nadpisy */ .writer-select { height: 32px; padding: 0 8px; background: transparent; border: 0; color: #374151; cursor: pointer; font-size: 13px; font-weight: 500; } .dark .writer-select { color: #d1d5db; background: #111827; } /* --- Content area (contenteditable) --- */ .writer-content { min-height: 400px; padding: 16px 20px; color: #111827; background: #ffffff; line-height: 1.6; font-size: 16px; outline: none; /* white-space: pre-wrap zachová consecutive spaces uvnitř textu a respektuje newlines. Default `normal` collapsne multi-space na jeden a v některých prohlížečích/dead-key scénářích může polykat single space mezi slovy (potvrzeno na české klávesnici při rychlém psaní). pre-wrap je doporučená hodnota pro contenteditable. */ white-space: pre-wrap; word-wrap: break-word; } .dark .writer-content { color: #f3f4f6; background: #111827; } .writer-content:focus { /* ring přes box-shadow — neposunuje layout */ box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.4); } /* Clearfix — bez něj by floated image/gallery blok na konci článku „protékal" pod editor wrapper a vizuálně narušoval následující UI (Nastavení článku karta). */ .writer-content::after { content: ''; display: block; clear: both; } .writer-content[data-empty="true"]::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; } /* Native HTML elementy uvnitř editoru */ .writer-content h1 { font-size: 1.875rem; font-weight: 700; margin: 1rem 0 0.5rem; } .writer-content h2 { font-size: 1.5rem; font-weight: 700; margin: 0.875rem 0 0.5rem; } .writer-content h3 { font-size: 1.25rem; font-weight: 700; margin: 0.75rem 0 0.5rem; } .writer-content h4 { font-size: 1.125rem; font-weight: 600; margin: 0.625rem 0 0.5rem; } .writer-content p { margin: 0 0 0.75rem; } .writer-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 0.75rem; } .writer-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 0.75rem; } .writer-content li { margin: 0.25rem 0; } .writer-content a { color: #7c3aed; text-decoration: underline; } .dark .writer-content a { color: #c4b5fd; } .writer-content blockquote { border-left: 4px solid #a78bfa; padding-left: 1rem; margin: 0.75rem 0; color: #4b5563; font-style: italic; } .dark .writer-content blockquote { color: #9ca3af; } /* ============================================================================= Writer bloky (image, gallery) — společný styling pro editor i public render. POZOR: Tyto pravidla se aplikují I na renderované HTML v .prose, takže align/float a slideshow logika funguje stejně v editoru i na blogu/race info. ============================================================================= */ .writer-block { margin: 1rem auto; position: relative; } /* --- Image blok --- */ .writer-block.writer-image[data-align="center"] { display: block; margin: 1rem auto; text-align: center; clear: both; } .writer-block.writer-image[data-align="left"] { float: left; margin: 0.5rem 1rem 0.5rem 0; max-width: 50%; } .writer-block.writer-image[data-align="right"] { float: right; margin: 0.5rem 0 0.5rem 1rem; max-width: 50%; } .writer-block.writer-image img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Mobile safety net pro responsivnost — bez !important by inline `width: 300px` (kterou nastavil resize handle) přebíjelo CSS regulárního selektoru. Floated bloky se na malých obrazovkách zruší a roztáhnou na plnou šířku, aby se obrázek vešel do viewportu. `width: auto` umožní img inside zaplnit přirozenou šířku containeru. */ @media (max-width: 640px) { .writer-block.writer-image { float: none !important; width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* Editor-only: alignment toolbar nad blokem */ .writer-content .writer-block { /* Klikatelný blok — kurzor naznačuje, že lze interagovat */ cursor: default; } .writer-content .writer-block.is-selected { outline: 2px solid #8b5cf6; outline-offset: 2px; } /* Resize handle — fialový kruhek v pravém-dolním rohu bloku, viditelný na hover/is-selected. Tažením NW-SE směrem mění šířku bloku (height: auto na imgu se sám dopočítá). Implementace v writer.js: mousedown → document mousemove/mouseup listeners, delta klientových X se přičítá k startovní šířce. Min 100px, max 1200px. */ .writer-resize-handle { position: absolute; bottom: 6px; right: 6px; width: 18px; height: 18px; background: rgba(124, 58, 237, 0.9); border: 2px solid #ffffff; border-radius: 50%; cursor: nwse-resize; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease; z-index: 8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .writer-content .writer-block:hover .writer-resize-handle, .writer-content .writer-block.is-selected .writer-resize-handle { opacity: 1; } .writer-resize-handle:hover { background: rgba(109, 40, 217, 1); } /* Když uživatel táhne, kurzor by se neměl změnit i mimo handle — zachytíme přes class na body, kterou JS přidá na začátek drag (a sundá na konci). */ body.writer-resizing, body.writer-resizing * { cursor: nwse-resize !important; user-select: none !important; } .writer-block-controls { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; background: #1f2937; border-radius: 6px; padding: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 10; white-space: nowrap; } .writer-content .writer-block.is-selected .writer-block-controls { display: flex; } .writer-block-controls button { background: transparent; border: 0; color: #d1d5db; cursor: pointer; width: 28px; height: 28px; border-radius: 4px; font-size: 14px; line-height: 1; } .writer-block-controls button:hover { background: #374151; color: #ffffff; } .writer-block-controls button.is-active { background: #7c3aed; color: #ffffff; } /* Drag handle (⠿) — úchyt v controls liště. Táhnutím přesune celý media blok (obrázek/galerie/mapa) mezi odstavce; logika v writer.js (nativní HTML5 DnD). Vizuál dědí z `.writer-block-controls button`, měníme jen kurzor. */ .writer-drag-handle { cursor: grab; } .writer-drag-handle:active { cursor: grabbing; } /* Tažený blok ztlumíme — vizuální zpětná vazba „tohle se právě přesouvá". */ .writer-content .writer-block.is-dragging { opacity: 0.4; } /* Během dragu zakázat výběr textu, ať contenteditable nezačne dělat selection pod taženým blokem (kurzor grabbing přes celé okno). */ body.writer-dragging, body.writer-dragging * { user-select: none !important; cursor: grabbing !important; } /* Drop indikátor — vodorovná fialová linka, kam blok spadne. position: fixed (souřadnice z getBoundingClientRect), aby nezasahoval do contenteditable DOM. */ .writer-drop-indicator { position: fixed; height: 3px; background: #7c3aed; border-radius: 2px; box-shadow: 0 0 4px rgba(124, 58, 237, 0.6); pointer-events: none; z-index: 9999; display: none; } /* --- Gallery blok --- Stejná align logika jako u image bloku — center (plná šířka, default), left/right (float wrap textu). Mobilní fallback níž ruší float pod 640px. */ .writer-block.writer-gallery { position: relative; margin: 1.5rem 0; /* 3:2 na šířku = nativní poměr fotek z foťáku (race fotky jsou 3:2). Landscape fotka tak box VYPLNÍ beze zbytku — žádné letterbox pruhy. Na výšku 2:3 níž. */ aspect-ratio: 3 / 2; background: #1f2937; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .writer-block.writer-gallery[data-align="center"] { display: block; width: 100%; margin: 1.5rem auto; clear: both; } .writer-block.writer-gallery[data-align="left"] { float: left; width: 50%; margin: 0.5rem 1rem 0.5rem 0; } .writer-block.writer-gallery[data-align="right"] { float: right; width: 50%; margin: 0.5rem 0 0.5rem 1rem; } /* Default (bez data-align) — fallback na plnou šířku (pro starší galerie bez attr) */ .writer-block.writer-gallery:not([data-align]) { width: 100%; } /* Mobile: floated galerie zruší a roztáhne na plnou šířku — stejně jako image. `!important` přebije inline `width: 800px` z resize handle (specificity inline > media query stylesheet bez important). */ @media (max-width: 640px) { .writer-block.writer-gallery { float: none !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* Orientace galerie (volí se při vkládání). Bez atributu = na šířku (base 3/2). Na výšku = 2/3 — stejný poměr jako landscape, jen otočený (= nativní poměr portrétních fotek, takže taky vyplní box beze zbytku). POZOR: portrétní poměr na plné šířce článku (~1536px) by dal blok ~2300px vysoký, proto u centrované varianty omezíme šířku; floatovanou taky, ať neroste do nesmyslné výšky vedle textu. Resize handle pak dovolí doladit ručně. Pod 640px mobilní media query výš stejně přebije na 100 %. */ .writer-block.writer-gallery[data-orientation="portrait"] { aspect-ratio: 2 / 3; } .writer-block.writer-gallery[data-orientation="portrait"][data-align="center"] { max-width: 440px; } .writer-block.writer-gallery[data-orientation="portrait"][data-align="left"], .writer-block.writer-gallery[data-orientation="portrait"][data-align="right"] { width: 40%; max-width: 360px; } /* Block controls UVNITŘ galerie (ne nad ní), protože gallery má `overflow: hidden` pro rounded corners slideshow — controls s `top: -36px` defaultním pozicováním by byly cut-off a uživatel by nemohl vybrat align nebo blok smazat. Pozice: nahoře vpravo, tmavé pozadí pro čitelnost přes obrázek. */ .writer-block.writer-gallery .writer-block-controls { top: 8px; left: auto; right: 8px; transform: none; z-index: 11; } .writer-gallery-slides { position: absolute; inset: 0; } .writer-gallery-slide { position: absolute; inset: 0; /* contain (ne cover): fotka se zobrazí CELÁ, neořízne se. Plocha, kterou fotka v boxu nezaplní, prosvítá tmavým pozadím bloku (#1f2937) = letterbox. Záměr — uživatel chce fotky „jak jsou vyfocené" i za cenu pruhů. Pevný poměr boxu (3:2 / 2:3 = nativní poměr fotek) drží slideshow stabilní; při shodě orientace fotka box vyplní beze zbytku, pruhy jen u opačné orientace. */ background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.6s ease-in-out; } .writer-gallery-slide.is-active { opacity: 1; } /* Decentní šipky — viditelné jen na hover gallery wrapperu */ .writer-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.4); color: #ffffff; border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease; z-index: 2; } .writer-block.writer-gallery:hover .writer-gallery-arrow { opacity: 1; } .writer-gallery-arrow:hover { background: rgba(0, 0, 0, 0.65); } .writer-gallery-arrow.prev { left: 10px; } .writer-gallery-arrow.next { right: 10px; } /* Indikátor počtu fotek + odkaz na album */ .writer-gallery-meta { position: absolute; bottom: 10px; right: 12px; background: rgba(0, 0, 0, 0.55); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; z-index: 2; } .writer-gallery-meta a { color: #fde047; text-decoration: none; } .writer-gallery-meta a:hover { text-decoration: underline; } /* Editor-only badge "Galerie z alba: " */ .writer-gallery-album-label { position: absolute; top: 10px; left: 12px; background: rgba(124, 58, 237, 0.85); color: #ffffff; padding: 4px 10px; border-radius: 12px; font-size: 12px; z-index: 2; } /* ============================================================================= Modaly (link, image, gallery) ============================================================================= */ .writer-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .writer-modal { background: #ffffff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); max-width: 720px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } .dark .writer-modal { background: #1f2937; color: #f3f4f6; } .writer-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 16px; } .dark .writer-modal-header { border-bottom-color: #374151; } .writer-modal-close { background: transparent; border: 0; color: #6b7280; cursor: pointer; font-size: 24px; line-height: 1; padding: 0 4px; } .writer-modal-close:hover { color: #111827; } .dark .writer-modal-close { color: #9ca3af; } .dark .writer-modal-close:hover { color: #ffffff; } .writer-modal-body { padding: 18px; overflow-y: auto; flex: 1; } .writer-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e5e7eb; background: #f9fafb; } .dark .writer-modal-footer { border-top-color: #374151; background: #111827; } .writer-modal label { display: block; font-size: 13px; font-weight: 500; margin: 8px 0 4px; color: #374151; } .dark .writer-modal label { color: #d1d5db; } /* Nápověda pod inputem v modalu (12 px, šedá). Dříve byl tento styl inline u 7+ elementů — třída ho sjednocuje a respektuje dark mode. */ .writer-hint { font-size: 12px; color: #6b7280; margin-top: 6px; } .dark .writer-hint { color: #9ca3af; } /* Status řádek (upload progress, „Nahrávám…", error message). O 1 px větší než .writer-hint a se symetrickým marginem — jiný semantický kontext. */ .writer-status { font-size: 13px; color: #6b7280; margin-top: 8px; } .dark .writer-status { color: #9ca3af; } .writer-modal input[type="text"], .writer-modal input[type="url"], .writer-modal input[type="search"] { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: #ffffff; color: #111827; } .dark .writer-modal input[type="text"], .dark .writer-modal input[type="url"], .dark .writer-modal input[type="search"] { background: #111827; color: #f3f4f6; border-color: #4b5563; } /* File input — native button je v dark módu nečitelný (text v color: buttontext se chová podle OS preferencí, na dark page invisible). Stylujeme přes ::file-selector-button pseudo-element (cross-browser support 2022+). */ .writer-modal input[type="file"] { display: block; width: 100%; padding: 6px 0; color: #374151; font-size: 14px; cursor: pointer; } .dark .writer-modal input[type="file"] { color: #d1d5db; } .writer-modal input[type="file"]::file-selector-button { padding: 6px 14px; background: #7c3aed; color: #ffffff; border: 0; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; margin-right: 12px; transition: background-color 0.12s ease; } .writer-modal input[type="file"]::file-selector-button:hover { background: #6d28d9; } .writer-modal-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 6px; border: 1px solid transparent; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.12s ease; } .writer-modal-btn.primary { background: #7c3aed; color: #ffffff; } .writer-modal-btn.primary:hover { background: #6d28d9; } .writer-modal-btn.secondary { background: transparent; color: #374151; border-color: #d1d5db; } .dark .writer-modal-btn.secondary { color: #d1d5db; border-color: #4b5563; } .writer-modal-btn.secondary:hover { background: #f3f4f6; } .dark .writer-modal-btn.secondary:hover { background: #374151; } /* Album picker grid */ .writer-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .writer-album-card { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; background: #ffffff; transition: border-color 0.12s ease, transform 0.12s ease; } .dark .writer-album-card { border-color: #4b5563; background: #111827; } .writer-album-card:hover { border-color: #7c3aed; transform: translateY(-2px); } .writer-album-thumb { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #f3f4f6; } .dark .writer-album-thumb { background-color: #374151; } .writer-album-info { padding: 8px 10px; font-size: 13px; } .writer-album-info .name { font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .writer-album-info .name { color: #ffffff; } .writer-album-info .meta { color: #6b7280; font-size: 11px; margin-top: 2px; } .dark .writer-album-info .meta { color: #9ca3af; } .writer-album-empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: #6b7280; font-style: italic; } /* Tabs uvnitř modalu (gallery: výběr alba vs manuální upload). */ .writer-tabs { display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 16px; } .dark .writer-tabs { border-bottom-color: #374151; } .writer-tab { flex: 1; padding: 10px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: #6b7280; transition: color 0.12s ease, border-color 0.12s ease; margin-bottom: -1px; } .dark .writer-tab { color: #9ca3af; } .writer-tab:hover { color: #374151; } .dark .writer-tab:hover { color: #e5e7eb; } .writer-tab.is-active { color: #7c3aed; border-bottom-color: #7c3aed; } .dark .writer-tab.is-active { color: #c4b5fd; border-bottom-color: #c4b5fd; } .writer-tab-panel { display: none; } .writer-tab-panel.is-active { display: block; } /* Segmentovaný přepínač orientace galerie (na šířku / na výšku) v modalu. */ .writer-orient-row { margin-bottom: 14px; } .writer-orient-group { display: inline-flex; margin-top: 4px; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; } .dark .writer-orient-group { border-color: #4b5563; } .writer-orient-btn { background: transparent; border: 0; padding: 6px 16px; cursor: pointer; font-size: 13px; color: inherit; } .writer-orient-btn + .writer-orient-btn { border-left: 1px solid #d1d5db; } .dark .writer-orient-btn + .writer-orient-btn { border-left-color: #4b5563; } .writer-orient-btn.is-active { background: #7c3aed; color: #ffffff; } /* Mini grid pro thumbnails nahraných fotek v gallery upload tabu. */ .writer-upload-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; min-height: 40px; } .writer-upload-thumb { position: relative; aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 6px; border: 1px solid #e5e7eb; } .dark .writer-upload-thumb { border-color: #4b5563; } .writer-upload-thumb.is-loading { background: #f3f4f6; display: flex; align-items: center; justify-content: center; } .dark .writer-upload-thumb.is-loading { background: #374151; } .writer-upload-thumb-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: rgba(0, 0, 0, 0.65); color: #ffffff; border: 0; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; } .writer-upload-thumb-remove:hover { background: rgba(220, 38, 38, 0.9); } /* Image preview v image modalu */ .writer-image-preview { margin-top: 12px; max-width: 100%; max-height: 280px; border-radius: 6px; border: 1px solid #e5e7eb; } .dark .writer-image-preview { border-color: #4b5563; } /* Loading spinner pro async operace */ .writer-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #d1d5db; border-top-color: #7c3aed; border-radius: 50%; animation: writer-spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes writer-spin { to { transform: rotate(360deg); } } /* --- Map blok (mapy.com embed) --- Stejná align/float logika jako writer-image. Resize handle mění šířku floated varianty; výška je fixní z data-height (nastavena v modalu). */ .writer-block.writer-map[data-align="center"] { display: block; margin: 1rem auto; clear: both; /* Bez explicitní šířky (inline style) se blok smrskne na fit-content — správně, protože iframe má přesné rozměry z embed kódu. */ width: fit-content; max-width: 100%; } .writer-block.writer-map[data-align="left"] { float: left; margin: 0.5rem 1rem 0.5rem 0; max-width: 50%; } .writer-block.writer-map[data-align="right"] { float: right; margin: 0.5rem 0 0.5rem 1rem; max-width: 50%; } .writer-map-iframe { display: block; width: 100%; border: 0; border-radius: 8px; } /* V editoru iframe nesmí zachytávat kurzor — jinak při dragu resize handle přejede myš nad mapou a iframe pohltí události (mapa se začne posouvat). */ .writer-content .writer-map-iframe { pointer-events: none; } @media (max-width: 640px) { .writer-block.writer-map { float: none !important; width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* Stejná výchozí pozice controls jako u gallery (mapa je vyšší než obráz) */ .writer-block.writer-map .writer-block-controls { top: 8px; } /* Click-to-load placeholder pro mapu (jen public render, viz writer.js buildMapPlaceholder). Mimikuje rozměry iframe — width 100 % v rámci parent .writer-block.writer-map[data-align], height nastavena inline JS z data-height, takže klik nezpůsobí CLS při swapu na