/* Gosscard — smajlíci v komentářích (js/gosscard-emoji-input.js). Spoušť se vkládá do existujícího markupu, mřížka visí `fixed` v — proto tu nejsou žádné selektory závislé na struktuře komentáře. */ /* -------------------------------------------------------------------------- Spoušť (🙂) u komentářového políčka -------------------------------------------------------------------------- */ .gcEmojiTrigger { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--gc-border, #cbd5e1); border-radius: 8px; background: var(--gc-surface, #fff); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .gcEmojiTrigger:hover, .gcEmojiTrigger.is-open { border-color: var(--gc-primary, #007bff); background: var(--gc-primary-soft, #eff6ff); } .gcEmojiTrigger:focus-visible { outline: none; box-shadow: var(--gc-focus-ring, 0 0 0 3px rgba(0, 123, 255, .3)); } /* Formulář odpovědi i editace komentáře staví prvky pod sebe — spoušť by tam sama zabrala celou šířku řádku, tak ať aspoň sedí na svém místě nad tlačítky. */ .pointBodyAddonsCommentReplyForm .gcEmojiTrigger, .pointBodyAddonsCommentTextEditTextarea .gcEmojiTrigger, .pointPageBodyCommentInput .gcEmojiTrigger { margin: 5px 0 0; } /* -------------------------------------------------------------------------- Mřížka smajlíků — jedna pro celou stránku -------------------------------------------------------------------------- */ .gcEmojiPick { position: fixed; z-index: 100000; /* nad bublinou na mapě i nad mini chatem */ display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; box-sizing: border-box; width: 288px; max-height: 196px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; background: var(--gc-surface, #fff); border: 1px solid var(--gc-border, #e2e8f0); border-radius: 10px; box-shadow: var(--gc-shadow-md, 0 10px 26px rgba(30, 64, 175, .13)); } /* Bez tohohle pravidla by `hidden` prohrálo s `display: grid` výš (autorský styl přebíjí výchozí styl prohlížeče). */ .gcEmojiPick[hidden] { display: none; } .gcEmojiPick::-webkit-scrollbar { width: 6px; } .gcEmojiPick::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .gcEmojiPick__item { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 6px; font-size: 20px; line-height: 1; cursor: pointer; user-select: none; } .gcEmojiPick__item:hover { background: var(--gc-bg-soft, #f1f5f9); } /* Na mobilu je místo na šířku vzácné — mřížka se zúží, dlaždice zůstanou dostatečně velké na prst. */ @media (max-width: 480px) { .gcEmojiPick { grid-template-columns: repeat(7, 1fr); width: 266px; } }