/* Skin Kolego pro makety (/mock-client, /mock-console) — vizuální jazyk Kolega. Zdroj hodnot: logomanuál https://kolego.liquiddesign.work/logomanual/, `kolego/src/views/theme.ts` (paleta, kostičkové tlačítko) a `styles.ts` (typografie). Načítá se až za `style.css` (``), který drží jen kostru. Skin nemění strukturu ani texty — jen tokeny, tvary a značku: grafit + signální oranžová → teplá off-white + cihlová #FF3333 s tyrkysem ostré rohy 4 px → kulaté 10 px a kapsle, kostičková hrana u tlačítek Familjen Grotesk + Martian → Baloo 2 + Source Sans 3 + IBM Plex Mono značka z promo repa → kostička s obličejem a odznaky s písmenem Výchozí je světlý režim: Kolego je světlá aplikace. ◐ ve stavovém řádku přepne do tmavé varianty Kolega (#181B20 / #20242B / #2A2F37), ne do grafitu. */ /* ---------- tokeny ---------- */ body.kolego { /* tmavá varianta Kolega */ --ink: #181B20; --panel: #20242B; --sunk: #2A2F37; --edge: rgba(247, 247, 244, .14); --edge-hard: rgba(247, 247, 244, .26); --edge-soft: rgba(247, 247, 244, .05); --tx: #E2E0DB; --dim: #9A9A94; --faint: #7C7C77; /* značka: cihlová s tmavší spodní hranou, tyrkys jako akcent */ --acc: #FF3333; --acc-2: #D92626; --acc-soft: rgba(255, 51, 51, .13); --acc-line: rgba(255, 51, 51, .42); --teal: #18C5C3; --teal-deep: #129E9C; /* Barva akce. Plná cihlová na tlačítku se čte jako „smazat" — červená je v rozhraních zaběhnutá jako destrukce. Značka si ji drží dál (logo, kostičky, ouško disku, razítka), akce mluví tyrkysem: v logomanuálu je to vědomě studený protipól červené a v paletě „Tyrkys" přesně tahle dvojice slouží jako tlačítko (#129E9C tělo, #0E7E7C spodní hrana). */ --cta: #129E9C; --cta-edge: #0E7E7C; --cta-soft: rgba(18, 158, 156, .12); --cta-line: rgba(18, 158, 156, .45); --ok: #3B9E5F; /* Značková žlutá #F5B32F je na světlé off-white nečitelná — logomanuál má pro stavy vlastní dvojici: na papíře tmavší jantar, na inkoustu světlejší. Značce zůstává jen tam, kde je z ní plocha, ne text. */ --warn: #F5BF60; --term: #181B20; --term-tx: #E2E0DB; --term-dim: #9A9A94; --term-line: rgba(247, 247, 244, .12); --paper: #F7F7F4; --paper-2: #EFEEEA; --paper-tx: #20242B; --paper-dim: #6A7078; --paper-line:rgba(32, 36, 43, .12); --paper-acc: #FF3333; --disp: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --head: "Baloo 2", "Source Sans 3", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r: 10px; /* Obličeje maskota — jedno místo, odkud si je berou všechny výskyty (řádka v konverzaci, replika v rozhovoru). */ --face-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='23' cy='27' r='6' fill='%23fff'/%3E%3Ccircle cx='41' cy='27' r='6' fill='%23fff'/%3E%3Cpath d='M22 41 Q32 51 42 41' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); --face-think: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='22' cy='24' r='5.5' fill='%23fff'/%3E%3Ccircle cx='40' cy='24' r='5.5' fill='%23fff'/%3E%3Cpath d='M24 43 H40' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E"); --face-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='23' cy='29' r='6' fill='%23fff'/%3E%3Ccircle cx='41' cy='24' r='6' fill='%23fff'/%3E%3Ccircle cx='32' cy='44' r='5' fill='%23fff'/%3E%3C/svg%3E"); --face-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 29 Q23 21 29 29' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M35 29 Q41 21 47 29' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M20 39 Q32 53 44 39' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* `.ide.light` má vlastní blok proměnných (světlý režim v2), přebije `body` specificitou — Kolego hodnoty se proto musí zopakovat i sem. */ body.kolego .ide.light { --paper: #F7F7F4; --paper-2: #EFEEEA; --paper-line: rgba(32, 36, 43, .12); --paper-dim: #6A7078; --c-grid: rgba(32, 36, 43, .035); --c-wm: rgba(32, 36, 43, .02); --c-wms: rgba(32, 36, 43, .05); --c-in: #ffffff; --c-ok: #2E8054; --c-del: #C93E35; --warn: #B0740C; } /* ---------- typografie ---------- */ body.kolego { font-size: 15px; } body.kolego h1, body.kolego h2, body.kolego h3, body.kolego .logo-tx, body.kolego .sheet h1, body.kolego .sheet h2, body.kolego .tile b, body.kolego .pj-head b, body.kolego .dr-title, body.kolego .mc-head b, body.kolego .au-main b, body.kolego .um-head b, body.kolego .ph-card b, body.kolego .crumb b { font-family: var(--head); font-weight: 600; letter-spacing: -.005em; } body.kolego .logo-tx { font-weight: 700; letter-spacing: -.01em; } /* Baloo 2 sedí opticky níž než Familjen Grotesk; nadpisy listu chtějí míň vzduchu */ body.kolego .sheet h1 { letter-spacing: -.01em; line-height: 1.15; } /* ---------- značka: kostička ---------- */ .brick { width: var(--m); height: var(--m); flex: none; display: block; } .brick .b { fill: var(--acc); } .brick .e { fill: var(--acc-2); opacity: .55; } .brick .f { fill: #fff; } .brick .s { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; } body.kolego .logo-anim .brick { animation: brick-in .6s cubic-bezier(.2, .9, .25, 1) both; transition: transform .25s cubic-bezier(.2, .9, .25, 1); } @keyframes brick-in { from { opacity: 0; transform: translateY(-40%) scale(.7); } to { opacity: 1; transform: none; } } body.kolego .logo-anim:hover .brick { transform: translateY(-2px) rotate(-6deg); } @keyframes ltr-wave { 50% { color: var(--acc); transform: translateY(-2px); } } /* Odznak: kostička bez obličeje s písmenem. Nahrazuje kanji razítka — čepy jsou kapsle jako u maskota, spodní hrana o odstín tmavší. */ .kbrick { position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; margin-top: 4px; background: var(--acc); color: #fff; border-radius: 8px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1; font-style: normal; letter-spacing: 0; padding-bottom: 2px; } .kbrick::before, .kbrick::after { content: ""; position: absolute; top: -4px; width: 26%; height: 5px; border-radius: 3px; background: var(--acc); } .kbrick::before { left: 18%; } .kbrick::after { right: 18%; } .kbrick.sm { width: 18px; height: 18px; margin-top: 2px; font-size: 10px; border-radius: 5px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); } .kbrick.sm::before, .kbrick.sm::after { top: -2px; height: 3px; } /* ---------- kostičkové tlačítko ---------- Plná cihlová a tmavší spodní hrana, jako tělo maskota. Hloubku dělá hrana a stín, ne přechod do jiného odstínu (viz BRICK_BUTTON v theme.ts). */ body.kolego .hd-pub, body.kolego .pj-btn.sm, body.kolego .pj-btn.big, body.kolego .pj-addr .pj-btn, body.kolego .env-top .pj-btn, body.kolego .ph-btns .b1, body.kolego .btn-1, body.kolego .fm-btn.hi { background: var(--acc); color: #fff; border-radius: 8px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 6px 18px rgba(255, 51, 51, .22); transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; } body.kolego .hd-pub:hover, body.kolego .pj-btn.sm:hover, body.kolego .pj-btn.big:hover, body.kolego .pj-addr .pj-btn:hover, body.kolego .env-top .pj-btn:hover, body.kolego .ph-btns .b1:hover, body.kolego .btn-1:hover, body.kolego .fm-btn.hi:hover { background: var(--acc-2); transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 9px 24px rgba(255, 51, 51, .3); } body.kolego .hd-pub:active, body.kolego .pj-btn.sm:active, body.kolego .pj-btn.big:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 3px 9px rgba(255, 51, 51, .2); } body.kolego .hd-pub.ghost { background: none; box-shadow: none; border: 1px solid var(--paper-line); color: var(--paper-dim); } body.kolego .hd-pub.ghost:hover { background: none; transform: none; border-color: var(--acc-line); color: var(--paper-tx); } body.kolego .env-top .pj-btn { margin-left: 0; padding: 5px 10px; font-family: var(--mono); font-size: 9.5px; cursor: pointer; } /* text na cihlové ploše je bílý, ne inkoustový */ body.kolego .tile.sel::after { color: #fff; border-radius: 0 12px 0 8px; } body.kolego .ide-input.rec .mic { color: #fff; } body.kolego .fav[style*="--fc"] { color: #fff; } /* ---------- kulaté rohy ---------- */ body.kolego .fav, body.kolego .sw i, body.kolego .pj-state i, body.kolego .sheet-foot .chip i { border-radius: 4px; } body.kolego .sw { border-radius: 999px; } body.kolego .sw i { border-radius: 999px; } body.kolego .chip { border-radius: 999px; } body.kolego .ide-search { border-radius: 999px; } body.kolego .tile, body.kolego .pj-card, body.kolego .np-set, body.kolego .tasks, body.kolego .mc-tile, body.kolego .mchart, body.kolego .mc-checks, body.kolego .env, body.kolego .ide-input, body.kolego .gs-box, body.kolego .umenu, body.kolego .sheet { border-radius: 14px; } body.kolego .drawer-tab { border-radius: 12px 0 0 12px; } /* ---------- ořezové značky pryč ---------- Rohy tiskového archu jsou řeč zásilky, ne stavebnice. List papíru místo nich drží měkký stín a kulaté rohy. */ body.kolego .tagged::before { display: none; } /* ---------- razítko: kostička s písmenem místo hanka ---------- */ body.kolego .hanko { right: -12px; bottom: -16px; width: 52px; height: 52px; background: var(--acc); color: #fff; border-radius: 12px; font-family: var(--head); font-weight: 700; font-size: 24px; transform: rotate(-6deg); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), 0 0 0 4px var(--paper), 0 8px 20px rgba(255, 51, 51, .25); } body.kolego .hanko::before { content: ""; position: absolute; inset: auto auto 100% 16%; width: 28%; height: 7px; border: 0; border-radius: 4px; background: var(--acc); } body.kolego .hanko::after { content: ""; position: absolute; inset: auto 16% 100% auto; width: 28%; height: 7px; border-radius: 4px; background: var(--acc); } /* svislý popisek listu: kostička místo kanji */ body.kolego .sheet-side .brick { --m: 17px; } /* číslování kapitol: arabské číslice v tyrkysu */ body.kolego .sheet h2::before { content: counter(sec) ". "; font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--teal-deep); } body.kolego .sheet .lede { border-left-color: var(--acc); } body.kolego .sheet li::before { content: "•"; color: var(--acc); } /* ---------- vodoznak plochy: velká šedá kostička ---------- */ body.kolego .ide-kanji { right: 4%; bottom: 5%; opacity: .5; } body.kolego .ide-kanji .brick { --m: clamp(180px, 30vh, 320px); } body.kolego .ide-kanji .brick .b { fill: var(--c-wms); } body.kolego .ide-kanji .brick .e { fill: var(--c-wms); opacity: .5; } /* ---------- akcenty: tyrkys jako druhý hlas ---------- */ body.kolego .pj-sub .hl, body.kolego .ide-scroll .app-proj em.hl { color: var(--teal-deep); } body.kolego .chip.on { border-color: var(--teal-deep); color: var(--teal-deep); } body.kolego .ide-user em { color: var(--teal-deep); border-color: rgba(18, 158, 156, .4); } body.kolego .app-proj.on { background: var(--acc-soft); } body.kolego .ide.light .app-proj.on { background: rgba(255, 51, 51, .1); color: var(--paper-tx); } body.kolego .ide.light .ide-scroll .app-proj.on:hover { background: rgba(255, 51, 51, .15); } /* ---------- ouško disku ---------- Ouško je `writing-mode: vertical-rl`, takže se osy flexu otáčejí: `column` skládal kostičku a popisek VEDLE sebe přes šířku ouška (popisek vlevo, ikona vpravo). `row` je v téhle ose směr dolů — ikona nahoře, popisek pod ní, obojí na střed. */ body.kolego .drawer-tab { flex-direction: row; background: var(--acc); color: #fff; } body.kolego .drawer-tab:hover { background: var(--acc-2); } body.kolego .drawer-tab .brick { --m: 15px; } body.kolego .drawer-tab .brick .b, body.kolego .drawer-tab .brick .e { fill: #fff; } /* ---------- terminál zůstává tmavý ---------- Kolego je světlá aplikace, ale shell je pořád shell: tmavá karta uvnitř světlé plochy, ať se nečte jako obyčejný text. */ body.kolego .ide.light .pane[data-pane="sh"] { background: #20242B; color: #E2E0DB; border-radius: 14px; padding: 16px 18px; gap: 6px; font-family: var(--mono); font-size: 12.5px; } body.kolego .ide.light .pane[data-pane="sh"] .xrow { color: #E2E0DB; } body.kolego .ide.light .pane[data-pane="sh"] .p { color: var(--teal); } body.kolego .ide.light .pane[data-pane="sh"] .ok { color: #6AC28F; } /* ---------- panel a hlavička ---------- */ body.kolego .ide.light .ide-side { background: var(--paper-2); } body.kolego .ide.light .ide-brand { border-color: var(--paper-line); } body.kolego .ide-brand .logo-tx { font-size: 17px; } body.kolego .logo-link { gap: 8px; align-items: center; } body.kolego .ex-limit i { border-radius: 999px; overflow: hidden; } body.kolego .ex-limit i b { background: var(--teal-deep); } /* ---------- průvodce rozhraním ---------- Štítek měl kolem sebe 2px skoro černý prstenec — na grafitu to byla jen hrana, na světlé ploše Kolega z toho byl tlustý rám. Tady drží štítek nad plochou vlastní stín a vlásková linka, ne obtah. Stejně tak toast. */ body.kolego .cal b, body.kolego .toast { border-radius: 10px; box-shadow: 0 0 0 1px rgb(32 36 43 / .1), 0 8px 22px rgb(32 36 43 / .16); } body.kolego .cal .ar { stroke: var(--acc); stroke-linecap: round; } /* ---------- svislé zarovnání ---------- Písmeno v destičce sedělo o dva pixely nad středem: `padding-top: 1.5px` v `style.css` je vyrovnání na Martian Mono, které má jinou výšku dotahů než IBM Plex Mono. Mřížka obsah centruje, takže odsazení posune text o půlku své hodnoty — dva pixely dolů tedy stojí čtyři pixely odsazení navíc. Piktogramy (`.fav.gen`, `.fav svg`) mají odsazení nulové a nechají se být. */ body.kolego .fav { padding-top: 3.5px; } body.kolego .av { padding-top: 1px; } /* Menší a větší destičky centrují jinak (`place-items: center` počítá s výškou řádku, ne s tvarem písmene), takže vyrovnání se ladí po velikostech. Zkoušené proti čáře vedené přesným středem destičky. */ body.kolego .crumb .fav, body.kolego .npv .fav, body.kolego .mc-ct td .fav { padding-top: 1.5px; } body.kolego .nf-row .fav, body.kolego .dg-list .fav { padding-top: 1px; } /* „Ranní shrnutí" má štítek `nové` jako inline pokračování věty, jenže rodič je sloupcový flex a ten z inline prvku udělá blok — štítek spadl na druhou řádku. Řádky s takovým štítkem se sázejí normálním tokem. */ body.kolego .ide-scroll .app-proj span:has(em.hl) { display: block; } /* Hlavička levého railu byla o 4 px vyšší než hlavička vpravo, takže linka pod nimi nešla přes celou šířku v jedné výšce. */ body.kolego .ide-brand { height: 46px; } /* ---------- automatizace ---------- `.ide.light .au-ico` je specifičtější než `body.kolego .au-ico`, proto selektory přes `.ide` — odznak má být plná kostička, ne bledá plocha. */ body.kolego .ide .au-ico, body.kolego .ide .fav.auf { background: var(--acc); color: #fff; } body.kolego .fav.auf.kbrick { width: 26px; height: 26px; font-size: 13px; margin-top: 0; border-radius: 7px; } body.kolego .nf-row .fav.auf.kbrick { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; } /* ---------- grafy: tyrkys ---------- Čtyři červené řady vedle sebe křičí víc než data. Cihlová zůstává značce a tlačítkům, datová řada mluví tyrkysem (druhý hlas palety Kolega). */ body.kolego .mchart .area { fill: var(--teal-deep); opacity: .13; } body.kolego .mchart .line { stroke: var(--teal-deep); } body.kolego .mchart .dot { fill: var(--teal-deep); } body.kolego .vis i, body.kolego .hbar i { background: var(--teal-deep); } body.kolego .meter i b, body.kolego .mc-tile i u { background: var(--teal-deep); } /* ---------- drobnosti ---------- */ body.kolego :focus-visible { outline-color: var(--acc); } body.kolego .ide-input .p, body.kolego .au-new .p { color: var(--acc); } body.kolego .ide-input .wave i { background: var(--acc); border-radius: 2px; } body.kolego .xrow .ok { color: var(--ok); } /* ---------- mobil: světlá obrazovka Domů ---------- Desktop je ve skinu Kolego světlý, mobil se musí přeladit s ním — jinak by se na úzké obrazovce ukázal grafit, který jinde na stránce není. */ @media (max-width: 760px) { body.kolego .ide.light .ide-mobile { background: var(--paper); color: var(--paper-tx); } body.kolego .ide.light .phone-bar { border-color: var(--paper-line); } body.kolego .ide.light .ph-lbl, body.kolego .ide.light .ph-card em, body.kolego .ide.light .ph-row em, body.kolego .ide.light .ide-mnote { color: var(--paper-dim); } body.kolego .ide.light .ph-lbl.hl { color: var(--acc); } body.kolego .ide.light .ph-card { border-color: var(--paper-line); background: #fff; } body.kolego .ide.light .ph-card.hi { border-color: var(--acc-line); background: rgba(255, 51, 51, .07); } body.kolego .ide.light .ph-card p { color: var(--paper-tx); } body.kolego .ide.light .ph-btns .b2 { border-color: var(--paper-line); color: var(--paper-tx); } body.kolego .ide.light .av.sm { background: rgba(32, 36, 43, .07); color: var(--paper-dim); } body.kolego .ide.light .phone-nav { background: var(--paper-2); border-color: var(--paper-line); color: var(--paper-dim); } body.kolego .ide.light .phone-nav .on { color: var(--acc); } } /* ---------- ovladače ve skinu ---------- Na cihlové ploše je text bílý; `style.css` tam dává inkoust, protože v původní paletě je akcent světlá oranžová. */ body.kolego .fm-btn.hi, body.kolego .ide.light .fm-btn.hi { color: #fff; border-color: transparent; } body.kolego .fm-btn.hi:hover { border-color: transparent; } body.kolego .app-new:hover i { color: #fff; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); } /* „Nový projekt": kulaté rohy a plus v kostičce, ať je vidět, že je to akce. */ body.kolego .app-new { border-radius: 10px; } body.kolego .app-new i { border-radius: 5px; font-family: var(--head); font-weight: 700; } /* ---------- kostička v konverzaci ---------- Odpověď nepřistane jen tak. Dokud se píše, kostička u ní čeká a pohupuje se (oči nahoru, pusa rovná); jakmile je text hotový, zacvakne na místo jako díl stavebnice — skok shora, krátké zmáčknutí a doznívající prstenec, a tvář se usměje. Puntík `●` zůstává statickým řádkům makety (mají `data-i`); maskota dostanou jen zprávy, které vzniknou za chodu — jinak by jich byl plný panel. */ body.kolego .ide-chat .xrow:not([data-i]) > .ok { position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px; font-size: 0; color: transparent; background-color: var(--acc); background-image: var(--face-ok); background-repeat: no-repeat; background-position: 50% 56%; background-size: 76%; border-radius: 6px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); } /* čepy jsou kapsle jako u velké kostičky, jen zmenšené na dva pixely */ body.kolego .ide-chat .xrow:not([data-i]) > .ok::before, body.kolego .ide-chat .xrow:not([data-i]) > .ok::after { content: ""; position: absolute; top: -3px; width: 5px; height: 4px; border-radius: 2px 2px 0 0; background: var(--acc); } body.kolego .ide-chat .xrow:not([data-i]) > .ok::before { left: 3px; } body.kolego .ide-chat .xrow:not([data-i]) > .ok::after { right: 3px; } body.kolego .ide-chat .xrow.think > .ok { background-image: var(--face-think); animation: bot-think 1.5s ease-in-out infinite; } @keyframes bot-think { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } body.kolego .ide-chat .xrow:not([data-i]):not(.think) > .ok { animation: bot-snap .44s cubic-bezier(.22, 1.4, .36, 1) both; } @keyframes bot-snap { 0% { transform: translateY(-8px) scale(.92, 1.08); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 0 0 0 rgb(255 51 51 / .45); } 58% { transform: translateY(1.5px) scale(1.1, .9); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 0 7px rgb(255 51 51 / 0); } 100% { transform: none; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 0 0 10px rgb(255 51 51 / 0); } } @media (prefers-reduced-motion: reduce) { body.kolego .ide-chat .xrow > .ok { animation: none !important; } } /* ---------- výraz podle toho, čím řádka je ---------- Náladu dává `data-mood` ze `script.js`, ne odhad citu z textu: rozepsaná odpověď přemýšlí, hotová se usměje, odpověď zakončená otázkou nakloní hlavu („teď jsi na řadě ty") a zveřejnění se raduje. Čtyři výrazy stačí — víc už by z informace udělalo cirkus. */ body.kolego .ide-chat .xrow[data-mood="ask"] > .ok { background-image: var(--face-ask); } body.kolego .ide-chat .xrow[data-mood="done"] > .ok { background-image: var(--face-done); } body.kolego .ide-chat .xrow[data-mood="ask"]:not([data-i]) > .ok { animation-name: bot-snap-ask; } @keyframes bot-snap-ask { 0% { transform: translateY(-8px) scale(.92, 1.08); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 0 0 0 rgb(255 51 51 / .45); } 58% { transform: translateY(1.5px) rotate(-8deg) scale(1.1, .9); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 0 7px rgb(255 51 51 / 0); } 100% { transform: rotate(-7deg); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 0 0 10px rgb(255 51 51 / 0); } } /* ---------- ať toho není plný panel ---------- Druhá a další řádka téže odpovědi kostičku nedostane — mluví pořád stejný kolega, stačí tichá značka. Novou kostičku si zaslouží jen nová událost: přiložený soubor, zveřejnění a otázka na tebe, proto mají výjimku. Statické řádky makety (`data-i`) do toho nepatří vůbec, ty zůstávají u puntíku. Šířka zůstává 20 px, aby text všech řádek začínal na stejném místě. */ body.kolego .ide-chat .xrow:has(> .ok) + .xrow:not([data-i]):has(> .ok):not(.file):not([data-mood="done"]):not([data-mood="ask"]) > .ok { width: 8px; height: 8px; margin: 7px 6px 0 6px; border-radius: 3px; background-image: none; background-color: var(--acc); opacity: .34; box-shadow: none; animation: none; } body.kolego .ide-chat .xrow:has(> .ok) + .xrow:not([data-i]):has(> .ok):not(.file):not([data-mood="done"]):not([data-mood="ask"]) > .ok::before, body.kolego .ide-chat .xrow:has(> .ok) + .xrow:not([data-i]):has(> .ok):not(.file):not([data-mood="done"]):not([data-mood="ask"]) > .ok::after { display: none; } /* ---------- rozhovor ve skinu ---------- Claudova replika je kostička položená naplocho: tmavší spodní hrana jako u těla maskota. Moje je jen deska — obrys bez těla, a tyrkysový, aby se dvě červené nepraly. Odznak mluvčího je celá kostička; u repliky, která se ptá, nakloní hlavu, stejně jako v terminálovém výpisu. */ body.kolego .bub p { border-radius: 14px; } body.kolego .bub.cl p { border-bottom-left-radius: 5px; box-shadow: inset 0 -3px 0 rgb(32 36 43 / .07); } body.kolego .ide.light .bub.me p, body.kolego .bub.me p { border-bottom-right-radius: 5px; background: none; border-color: rgb(18 158 156 / .5); color: var(--paper-tx); } body.kolego .bub .chip { border-radius: 999px; } body.kolego .bub .bot { position: relative; width: 22px; height: 22px; margin-top: 4px; border-radius: 7px; background-color: var(--acc); background-image: var(--face-ok); background-repeat: no-repeat; background-position: 50% 56%; background-size: 76%; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); } body.kolego .bub .bot::before, body.kolego .bub .bot::after { content: ""; position: absolute; top: -3px; width: 5px; height: 4px; border-radius: 2px 2px 0 0; background: var(--acc); } body.kolego .bub .bot::before { left: 4px; } body.kolego .bub .bot::after { right: 4px; } body.kolego .bub.ask .bot { background-image: var(--face-ask); transform: rotate(-7deg); } /* Ve skinu má hero kostičku místo promptu `›_` a tlačítko bílý text na cihlové. */ body.kolego .nc-hero .mark { display: none; } body.kolego .nc-hero .brick { display: block; } body.kolego .newc-btn { border-radius: 10px; } body.kolego .app-newc i { border-radius: 5px; color: #fff; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); } body.kolego .app-newc:hover, body.kolego .app-newc-more:hover, body.kolego .app-newc-more[aria-expanded="true"] { color: #fff; } body.kolego .app-newc:hover i { background: rgb(255 255 255 / .28); box-shadow: none; } /* ---------- červená značí, tyrkys jedná ---------- Jediné místo, kde se rozhoduje, co je akce. Cihlová zůstává tomu, co je značka nebo stav (logo, kostičky, ouško disku, razítka, vybraná session, odznak upozornění); klikací „udělej to" je tyrkysové. */ body.kolego .hd-pub, body.kolego .pj-btn.sm, body.kolego .pj-btn.big, body.kolego .pj-addr .pj-btn, body.kolego .env-top .pj-btn, body.kolego .ph-btns .b1, body.kolego .btn-1, body.kolego .fm-btn.hi, body.kolego .ide.light .fm-btn.hi, body.kolego .ide-send.on { background: var(--cta); color: #fff; border-color: transparent; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 6px 18px rgb(18 158 156 / .22); } body.kolego .hd-pub:hover, body.kolego .pj-btn.sm:hover, body.kolego .pj-btn.big:hover, body.kolego .pj-addr .pj-btn:hover, body.kolego .env-top .pj-btn:hover, body.kolego .ph-btns .b1:hover, body.kolego .btn-1:hover, body.kolego .fm-btn.hi:hover, body.kolego .ide-send.on:hover { background: var(--cta-edge); border-color: transparent; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .28), 0 9px 24px rgb(18 158 156 / .3); } body.kolego .hd-pub:active, body.kolego .pj-btn.sm:active, body.kolego .pj-btn.big:active { box-shadow: inset 0 -1px 0 rgb(0 0 0 / .25), 0 3px 9px rgb(18 158 156 / .2); } body.kolego .hd-pub.ghost:hover { border-color: var(--cta-line); color: var(--cta); } /* Nová konverzace: nejdůležitější akce v panelu, takže tyrkysová celá */ body.kolego .newc-btn { border-color: var(--cta-line); background: var(--cta-soft); } body.kolego .app-newc i { background: var(--cta); color: #fff; } body.kolego .app-newc-more { border-left-color: var(--cta-line); color: var(--cta); } body.kolego .app-newc:hover, body.kolego .app-newc-more:hover, body.kolego .app-newc-more[aria-expanded="true"] { background: var(--cta); color: #fff; } body.kolego .newc-item:hover { background: var(--cta-soft); } /* přepínač, zaškrtnutí a rychlé odpovědi jsou taky „udělej to" */ body.kolego .sw.on { border-color: var(--cta-line); background: var(--cta-soft); } body.kolego .sw.on i { background: var(--cta); } body.kolego .tile.sel { border-color: var(--cta); background: var(--cta-soft); } body.kolego .tile.sel::after { background: var(--cta); color: #fff; } body.kolego .fm-sel .chip.hi, body.kolego .chip.on { border-color: var(--cta-line); color: var(--cta); background: var(--cta-soft); } body.kolego .bub.ask .chip:hover, body.kolego .fm-sel .chip:hover, body.kolego .artm-foot .chip:hover { border-color: var(--cta-line); color: var(--cta); background: var(--cta-soft); } /* odkaz na to, co vzniklo, je odkaz — a odkazy v Kolegovi mluví tyrkysem */ body.kolego .lchip { border-color: var(--cta-line); background: var(--cta-soft); } body.kolego .lchip:hover { border-color: var(--cta); } body.kolego .lchip svg { stroke: var(--cta); } /* Poslat: v klidu jen obrys, plný tyrkys až když je co poslat */ body.kolego .ide-send.on { border-color: transparent; } body.kolego .ide-send:not(.on):hover { border-color: var(--cta-line); color: var(--cta); } /* nástroje tabulky jsou taky ovladače, ne stav */ body.kolego .grid-btn[aria-pressed="true"] { color: var(--cta); border-color: var(--cta-line); background: var(--cta-soft); } body.kolego .grid-find:focus-within { border-color: var(--cta-line); } body.kolego .nc-proj.on { border-color: var(--acc); background: var(--acc-soft); } /* Odznak u zvonku: bílá na cihlové. Černá na červené se na malém kolečku skoro nepřečte a proti zbytku skinu (bílý obličej v kostičce) je to cizí. */ body.kolego .hd-bell b { background: var(--acc-2); color: #fff; box-shadow: 0 0 0 2px var(--panel); } body.kolego .ide.light .hd-bell b { box-shadow: 0 0 0 2px var(--paper-2); } body.kolego .ide-ch b { background: var(--cta); color: #fff; box-shadow: 0 0 0 2px var(--panel); } body.kolego .ide.light .ide-ch b { box-shadow: 0 0 0 2px var(--paper-2); }