/* ── Notes feed (X-style cards + comments) ─────────────────────────────── */ .note-content img { cursor: pointer; max-width: 100%; max-height: min(55vh, 460px); width: auto; height: auto; object-fit: contain; display: block; margin: 6px 0; border-radius: var(--hodl-radius-lg); } /* ── Galeria wielu zdjęć (X-style siatka) ─────────────────────────────── */ .note-gallery { display: grid; gap: 2px; margin: 0.5rem 0; border-radius: var(--hodl-radius-lg); overflow: hidden; border: 1px solid var(--hodl-note-card-border, var(--hodl-border)); } .note-gallery--2 { grid-template-columns: 1fr 1fr; } .note-gallery--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .note-gallery--3 .note-gallery__cell:first-child { grid-row: 1 / 3; } .note-gallery--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .note-gallery--expanded { grid-template-rows: none; grid-auto-rows: 1fr; } .note-gallery__cell { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--hodl-surface-3); cursor: pointer; margin: 0; } .note-gallery--3 .note-gallery__cell:first-child { aspect-ratio: auto; } .note-gallery__cell--hidden { display: none; } .note-gallery__cell img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; display: block; } .note-gallery__more { position: absolute; inset: 0; background: var(--hodl-bg); color: var(--hodl-text); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease; } .note-gallery__more:hover { background: var(--hodl-bg); } /* ── Osadzone wideo z linku (YouTube / Vimeo) — bez autoodtwarzania ──── */ .note-video { position: relative; margin: 0.5rem 0; border-radius: var(--hodl-radius-lg); overflow: hidden; background: var(--hodl-bg); aspect-ratio: 16 / 9; border: 1px solid var(--hodl-note-card-border, var(--hodl-border)); } .note-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; margin: 0 !important; border-radius: 0 !important; max-height: none !important; } .note-video__poster--blank { background: linear-gradient(135deg, var(--hodl-surface), #2b3440); } .note-video__badge { position: absolute; top: 8px; left: 8px; background: var(--hodl-bg); color: var(--hodl-text); font-size: 11px; font-weight: 600; padding: 2px 0.5rem; border-radius: var(--hodl-radius-sm); pointer-events: none; } .note-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: var(--hodl-bg); border: 2px solid var(--hodl-border-subtle); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .note-video__play:hover { background: var(--hodl-accent-muted); } .note-video__play:active { transform: translate(-50%, -50%) scale(0.95); } .note-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .note-video-block { margin: 0.5rem 0; } .note-video-block .note-video { margin: 0; } .note-video__title { font-size: 14px; font-weight: 600; color: var(--hodl-text); line-height: 1.35; padding: 6px 2px 0; margin: 0; } /* ── Lightbox: nawigacja + zoom ───────────────────────────────────────── */ .note-lb { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; } .note-lb.is-open { display: flex; } body.note-lb-open { overflow: hidden; } /* Globalna blokada przewijania pod modalem (hodl-scroll-lock.js, kierownik 2026-09-06). Klasa na , żeby wygrać z regułami modułów na body (np. `overflow: hidden auto`). Na dotyku (iOS ignoruje overflow:hidden na body) body dostaje position:fixed z zapamiętanym scrollY — skrypt przywraca pozycję po zamknięciu. */ html.hodl-scroll-locked, html.hodl-scroll-locked body { overflow: hidden !important; } html.hodl-scroll-locked body { padding-right: var(--hodl-lock-sbw, 0px); } @media (hover: none) and (pointer: coarse) { html.hodl-scroll-locked body { position: fixed; top: var(--hodl-lock-top, 0px); left: 0; right: 0; width: 100%; } } .note-lb__backdrop { position: absolute; inset: 0; background: var(--hodl-bg); } .note-lb__stage { position: relative; z-index: 1; max-width: 94vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .note-lb__img { max-width: 94vw; max-height: 90vh; object-fit: contain; transition: transform 0.12s ease; cursor: zoom-in; user-select: none; border-radius: var(--hodl-radius-sm); } .note-lb.is-zoomed .note-lb__img { cursor: grab; } .note-lb.is-zoomed .note-lb__img:active { cursor: grabbing; } .note-lb__close { position: absolute; top: 14px; right: 18px; z-index: 3; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--hodl-surface); color: var(--hodl-text); font-size: 24px; line-height: 1; cursor: pointer; } .note-lb__close:hover { background: var(--hodl-surface); } .note-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--hodl-surface); color: var(--hodl-text); font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .note-lb__nav:hover { background: var(--hodl-surface); } .note-lb__nav--prev { left: 16px; } .note-lb__nav--next { right: 16px; } .note-lb__counter { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--hodl-text); font-size: 14px; font-weight: 600; background: var(--hodl-bg); padding: 0.25rem 12px; border-radius: var(--hodl-radius-pill); } .note-lb__zoom { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; background: var(--hodl-bg); padding: 4px; border-radius: var(--hodl-radius-pill); } .note-lb__zoom button { width: 38px; height: 32px; border: none; border-radius: var(--hodl-radius-pill); background: transparent; color: var(--hodl-text); font-size: 1rem; font-weight: 600; cursor: pointer; } .note-lb__zoom button:hover { background: var(--hodl-surface); } @media (max-width: 600px) { .note-lb__nav { width: 40px; height: 40px; font-size: 1.5rem; } } /* ── Edytor zdjęć (.hnme) i modal linku wideo (.hnvm) ─────────────────── */ .hnme, .hnvm { position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center; padding: 2vh 1rem; } .hnme.is-open, .hnvm.is-open { display: flex; } body.hnme-open { overflow: hidden; } .hnme__backdrop, .hnvm__backdrop { position: absolute; inset: 0; background: var(--hodl-bg); backdrop-filter: blur(3px); } .hnme__dialog, .hnvm__dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: 94vh; overflow-y: auto; background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .hnme__head, .hnvm__head { display: flex; align-items: center; gap: 0.5rem; padding: 16px 1rem; border-bottom: 1px solid var(--hodl-border); } .hnme__title, .hnvm__title { font-weight: 700; color: var(--hodl-text-2); } .hnme__count { color: var(--hodl-text-2); font-size: 13px; } .hnme__x, .hnvm__x { margin-left: auto; width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--hodl-text-2); font-size: 24px; line-height: 1; cursor: pointer; } .hnme__x:hover, .hnvm__x:hover { background: var(--hodl-surface-3); color: var(--hodl-text); } .hnme__stage { background: var(--hodl-bg); display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 200px; max-height: 56vh; overflow: hidden; } .hnme__viewport { position: relative; line-height: 0; } .hnme__canvas { display: block; border-radius: var(--hodl-radius-sm); } .hnme__draw { position: absolute; inset: 0; border-radius: var(--hodl-radius-sm); touch-action: none; } .hnme__crop { position: absolute; border: 1px solid var(--hodl-border-subtle); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); cursor: move; box-sizing: border-box; } .hnme__crop-h { position: absolute; width: 14px; height: 14px; background: var(--hodl-surface); border-radius: 50%; border: 1px solid var(--hodl-border); } .hnme__crop-h[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; } .hnme__crop-h[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; } .hnme__crop-h[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; } .hnme__crop-h[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; } .hnme__tabs { display: flex; gap: 4px; padding: 12px 1rem 0; } .hnme__tabs button { font: inherit; font-size: 13px; font-weight: 600; color: var(--hodl-text-2); background: transparent; border: 1px solid var(--hodl-border); border-bottom: none; border-radius: var(--hodl-radius-md) var(--hodl-radius-md) 0 0; padding: 6px 16px; cursor: pointer; } .hnme__tabs button.is-active { color: var(--hodl-text-on-accent); background: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent, var(--hodl-accent)); } .hnme__hint { font-size: 12px; color: var(--hodl-text-2); } .hnme__colors { display: inline-flex; gap: 4px; } .hnme__color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .hnme__color.is-active { border-color: var(--hodl-border-subtle); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .hnme__pensize { width: 90px; accent-color: var(--hodl-accent, #727cf5); } .hnme__textedit { position: absolute; z-index: 5; box-sizing: border-box; background: transparent; border: 1px dashed var(--hodl-border-subtle); outline: none; padding: 0; margin: 0; min-width: 48px; line-height: 1.1; } .hnme__textedit::placeholder { color: var(--hodl-text); } .hnme__tools { padding: 12px 1rem; display: flex; flex-direction: column; gap: 12px; } .hnme__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .hnme__sep { width: 1px; height: 22px; background: var(--hodl-surface-3); } .hnme__btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--hodl-text); background: var(--hodl-surface-3); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-md); padding: 8px 12px; cursor: pointer; } .hnme__btn:hover { background: var(--hodl-surface-3); } .hnme__btn--primary { background: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .hnme__btn--primary:hover { background: var(--hodl-accent); color: var(--hodl-text-on-accent); } .hnme__seg { display: inline-flex; border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-md); overflow: hidden; } .hnme__seg button { font: inherit; font-size: 13px; font-weight: 600; color: var(--hodl-text-2); background: transparent; border: none; padding: 6px 12px; cursor: pointer; } .hnme__seg button.is-active { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .hnme__filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .hnme__filter { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; font-size: 11px; color: var(--hodl-text-2); background: none; border: none; cursor: pointer; } .hnme__filter.is-active { color: var(--hodl-text); } .hnme__swatch { width: 48px; height: 48px; border-radius: var(--hodl-radius-md); background: linear-gradient(135deg, #f7931a, var(--hodl-accent)); border: 2px solid transparent; } .hnme__filter.is-active .hnme__swatch { border-color: var(--hodl-accent, var(--hodl-accent)); } .hnme__sliders { display: flex; gap: 1rem; flex-wrap: wrap; } .hnme__sliders label { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hodl-text-2); } .hnme__sliders input[type=range] { accent-color: var(--hodl-accent, #727cf5); } .hnme__foot, .hnvm__foot { display: flex; align-items: center; gap: 0.5rem; padding: 12px 1rem; border-top: 1px solid var(--hodl-border); } .hnme__spacer { flex: 1; } .hnvm__input { margin: 1rem 1rem 0; background: var(--hodl-surface-2); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-md); color: var(--hodl-text-2); padding: 8px 12px; font: inherit; outline: none; } .hnvm__input:focus { border-color: var(--hodl-accent, var(--hodl-accent)); } .hnvm__preview { position: relative; margin: 12px 1rem 0; border-radius: var(--hodl-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--hodl-bg); display: flex; align-items: center; justify-content: center; color: var(--hodl-text-2); font-size: 14px; text-align: center; } .hnvm__preview--empty { border: 1px dashed var(--hodl-border); } .hnvm__preview img { width: 100%; height: 100%; object-fit: cover; } .hnvm__poster-blank { width: 100%; height: 100%; background: linear-gradient(135deg, var(--hodl-surface), #2b3440); } .hnvm__badge { position: absolute; top: 8px; left: 8px; background: var(--hodl-bg); color: var(--hodl-text); font-size: 11px; font-weight: 600; padding: 2px 0.5rem; border-radius: var(--hodl-radius-sm); } .hnvm__cap { font-size: 13px; color: var(--hodl-text); line-height: 1.35; padding: 0.5rem 1rem 0; min-height: 0; } #notes-feed { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); background: var(--hodl-panel-card-bg, transparent); box-shadow: var(--hodl-feed-shadow, var(--hodl-panel-shadow, none)); overflow: hidden; } /* ── Feed middle column: rhythm między header / composer / listą ── */ #middle-panel { display: flex; flex-direction: column; gap: 12px; } .note-card { --note-accent: transparent; position: relative; border-bottom: 1px solid var(--hodl-note-card-border, var(--hodl-border)); padding: 12px 0.5rem; background: transparent; transition: background-color 0.15s ease; } .note-card:hover { background: var(--hodl-note-card-hover, var(--hodl-surface-3)); } .note-card--private { --note-accent: #f1556c; padding-left: 12px; } .note-card--public { --note-accent: #0acf97; padding-left: 12px; } /* Krótki pasek po lewej — nie sięga góry/dołu, nie zlewa się między kartami */ .note-card--private::before, .note-card--public::before { content: ''; position: absolute; left: 0.3rem; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: var(--hodl-radius-xs); background: var(--note-accent); pointer-events: none; } .note-card--neutral { padding-left: 0.5rem; } .note-card__layout { display: flex; gap: 0.75rem; align-items: flex-start; } .note-card__avatar img, .note-card__avatar-link img { width: 40px; height: 40px; border-radius: var(--hodl-radius-lg); object-fit: cover; display: block; } .note-card__main { flex: 1; min-width: 0; } .note-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 6px; } .note-card__header-main { min-width: 0; flex: 1; } .note-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .note-card__title-link { color: inherit; text-decoration: none; } .note-card__title-link:hover { text-decoration: underline; } .note-card__privacy { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.75rem; flex-shrink: 0; } .note-card__privacy--private { color: var(--hodl-down-text); background: var(--hodl-down-soft); } .note-card__privacy--public { color: var(--hodl-up-text); background: var(--hodl-up-soft); } .note-card__meta { font-size: 12px; color: var(--hodl-text-2); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .note-card__meta-sep { opacity: 0.7; } .note-card__tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .note-card__chip { background: var(--hodl-surface-3); color: var(--hodl-text-2); display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--hodl-radius-pill); line-height: 1.3; } .note-card__chip--primary { background: var(--hodl-accent-muted); color: var(--hodl-accent); } .note-card__chip--success { background: var(--hodl-up-soft); color: var(--hodl-up-text); } .note-card__chip--danger { background: var(--hodl-down-soft); color: var(--hodl-down-text); } .note-card__chip--warning { background: var(--hodl-warn-soft); color: var(--hodl-warn-text); } .note-card__chip--info { background: var(--hodl-info-soft); color: var(--hodl-info-text); } .note-card__chip--muted { background: var(--hodl-surface-3); color: var(--hodl-text-2); } .note-card__header-aside { flex-shrink: 0; } .note-card__author { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--hodl-text-2); font-size: 12px; max-width: 10rem; } .note-card__author:hover { color: var(--hodl-accent, var(--hodl-accent)); } .note-card__author-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .note-card__author-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-card__menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--hodl-text-2); text-decoration: none; } .note-card__menu-btn:hover { background: var(--hodl-surface-3); color: inherit; } .note-card__body-wrap { position: relative; } .note-card__body-wrap.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(to bottom, transparent, var(--ct-body-bg, #313a46)); pointer-events: none; } .note-content, .note-card__body { font-size: 14px; line-height: 1.55; color: var(--hodl-text); word-wrap: break-word; } .note-content p, .note-card__body p { margin-bottom: 0.5rem; } .note-content p:last-child, .note-card__body p:last-child { margin-bottom: 0; } /* Bez dużych przerw między tekstem a obrazkami */ .note-content p:empty, .note-card__body p:empty, .note-content p:has(> br:only-child), .note-card__body p:has(> br:only-child) { display: none; } .note-content p:has(img), .note-card__body p:has(img) { margin: 0.25rem 0; } .note-expand-btn { display: none; cursor: pointer; color: var(--hodl-accent); margin: 0.25rem 0 0.5rem; padding: 0; border: none; background: none; font-size: 13px; font-weight: 600; } .note-expand-btn:hover { text-decoration: underline; } .note-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; max-width: 100%; } .note-card__actions-end { display: flex; align-items: center; gap: 16px; margin-left: auto; } .note-card__action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--hodl-text-2); text-decoration: none; font-size: 13px; line-height: 1; border: none; background: none; transition: color 0.15s ease; } .note-card__action:hover { color: var(--hodl-accent); } .note-card__action i { font-size: 18px; } .note-card__action-icon--liked { color: var(--hodl-down-text) !important; } .note-card__action-icon--archived { color: var(--hodl-down-text) !important; } .note-card__action--icon-only { gap: 0; padding: 6px; min-width: 2rem; justify-content: center; } .note-card__action--icon-only i { font-size: 18px; } .note-card__comments { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--hodl-border); } /* Comment composer */ .note-comment-form { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .note-comment-form__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .note-comment-form__input-wrap { flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 6px 6px 6px 12px; border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-pill); background: var(--hodl-surface-3); transition: border-color 0.15s ease, background-color 0.15s ease; } .note-comment-form__input-wrap:focus-within { border-color: var(--hodl-accent); background: var(--hodl-surface-3); box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.12); } .note-comment-form__submit:active { transform: scale(0.94); } .note-comment-form__input { flex: 1; min-width: 0; border: none; background: transparent; color: inherit; font-size: 14px; padding: 6px 0; outline: none; } .note-comment-form__input::placeholder { color: var(--hodl-text-2); } .note-comment-form__submit { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: 50%; background: var(--hodl-accent); color: var(--hodl-text-on-accent); flex-shrink: 0; cursor: pointer; transition: background-color 0.15s ease; } .note-comment-form__submit:hover { background: var(--hodl-accent); color: var(--hodl-text-on-accent); } /* Comment list */ .comments-container { max-height: 500px; overflow: hidden; transition: max-height 0.3s ease-in-out; } .comment-item { display: flex; gap: 8px; padding: 2px 0; align-items: flex-start; } .comment-item__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Dymek komentarza */ .comment-item__body { flex: 1; min-width: 0; background: var(--hodl-surface-3); border: 1px solid var(--hodl-border-subtle); border-radius: var(--hodl-radius-xs) var(--hodl-radius-lg) var(--hodl-radius-lg) var(--hodl-radius-lg); padding: 6px 12px 8px; transition: border-color 0.15s ease, background-color 0.15s ease; } .comment-item:hover .comment-item__body { border-color: var(--hodl-border); } .comment-item--own .comment-item__body { background: var(--hodl-accent-muted); border-color: var(--hodl-accent-muted); } .comment-item__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 4px; } .comment-item__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; font-size: 12px; line-height: 1.35; min-width: 0; } .comment-item__avatar-link { flex-shrink: 0; display: inline-flex; line-height: 0; } .comment-item__name { font-weight: 600; color: var(--hodl-text-2); text-decoration: none; } .comment-item__handle, .comment-item__time { color: var(--hodl-text-2); } a.comment-item__handle { text-decoration: none; } a.comment-item__name:hover, a.comment-item__handle:hover { text-decoration: underline; } .comment-item__sep { color: var(--hodl-text-2); opacity: 0.6; } .comment-edited-flag { color: var(--hodl-text-2); font-size: 12px; } .comment-item__menu { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--hodl-text-2); text-decoration: none; flex-shrink: 0; } .comment-item__menu:hover { background: var(--hodl-surface-3); color: inherit; } .comment-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hodl-text); word-wrap: break-word; } /* Lajki komentarzy */ .comment-item__actions { display: flex; align-items: center; gap: 4px; margin-top: 0.25rem; margin-left: -6px; } .comment-like-btn, .comment-likers-trigger, .comment-reply-btn { border: 0; background: none; padding: 2px 6px; border-radius: var(--hodl-radius-pill); cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1; color: var(--hodl-text-3); display: inline-flex; align-items: center; gap: 4px; transition: color .12s ease, background .12s ease; } /* Serduszko lajka: mniejsze + niebieskie (motyw), spójne z resztą UI. */ .comment-like-btn:hover { color: var(--hodl-accent); background: var(--hodl-accent-muted); } .comment-like-btn.is-liked { color: var(--hodl-accent); } .comment-like-btn i { font-size: 14px; } .comment-likers-trigger:hover { color: var(--hodl-text); background: var(--hodl-surface-3); } .comment-likers-trigger[hidden] { display: none; } .comment-reply-btn:hover { color: var(--hodl-text); background: var(--hodl-surface-3); } .comment-reply-btn i { font-size: 14px; } /* Wątki: odpowiedzi wcięte pod komentarzem nadrzędnym (max 1 poziom). */ .comment-item__replies { margin-left: 2.1rem; display: flex; flex-direction: column; } .comment-item__replies:empty { display: none; } .comment-item--reply .comment-item__avatar { width: 26px; height: 26px; } .comment-reply-form { margin-left: 2.1rem; margin-top: 2px; } /* Modal „kto polubił" */ .comment-likers-modal { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; background: var(--hodl-bg); padding: 16px; } .comment-likers-modal.is-open { display: flex; } .comment-likers-modal__box { width: 320px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; background: var(--ct-secondary-bg, var(--hodl-surface)); color: var(--ct-body-color, var(--hodl-text)); border-radius: var(--hodl-radius-lg); overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); } .comment-likers-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .comment-likers-modal__close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ct-secondary-color, var(--hodl-text-3)); } .comment-likers-modal__body { overflow-y: auto; padding: 6px 0; } .comment-likers { list-style: none; margin: 0; padding: 0; } .comment-likers__link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: inherit; text-decoration: none; } .comment-likers__link:hover { background: var(--ct-tertiary-bg, var(--hodl-surface-3)); } .comment-likers__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .comment-likers__meta { display: flex; flex-direction: column; line-height: 1.2; } .comment-likers__name { font-weight: 600; font-size: 14px; } .comment-likers__handle { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .comment-likers__empty { padding: 24px 16px; text-align: center; color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 14px; } .comment-item__edit-form { margin-top: 0.5rem; } .comment-item__edit-actions { display: flex; gap: 0.5rem; margin-top: 6px; } .btn-load-more { display: block; width: auto; margin: 0.5rem auto 0; padding: 6px 0.75rem; background: transparent; color: var(--hodl-accent); text-align: center; border: none; cursor: pointer; font-size: 13px; font-weight: 600; } .btn-load-more:hover { text-decoration: underline; } /* ── Note composer (X-style) ─────────────────────────────────────────── */ .note-composer { border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); margin-bottom: 0; background: var(--hodl-panel-card-bg, var(--hodl-surface-3)); box-shadow: var(--hodl-feed-shadow, var(--hodl-panel-shadow, none)); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .note-composer:focus-within { border-color: var(--hodl-accent); box-shadow: 0 0 0 1px var(--hodl-accent-muted, rgba(114, 124, 245, 0.15)); } .note-composer__form { display: flex; flex-direction: column; } .note-composer__compact-row { display: flex; align-items: center; gap: 6px; min-height: 48px; } .note-composer__title-input { flex: 1; min-width: 0; width: 100%; border: none; background: transparent; color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 14px; font-weight: 600; padding: 12px 0.5rem 12px 1rem; outline: none; } .note-composer.is-expanded .note-composer__title-input { border-bottom: 1px solid var(--hodl-border-subtle); font-size: 1rem; font-weight: 600; padding: 12px 1rem 8px; } .note-composer__title-input::placeholder { color: var(--hodl-text-2); font-weight: 600; } /* Zwinięty: jedna linia + Post */ .note-composer.is-collapsed { cursor: text; } .note-composer.is-collapsed .note-composer__body, .note-composer.is-collapsed .note-composer__footer, .note-composer.is-collapsed .note-composer__advanced { display: none; } .note-composer__submit--compact { display: none; } .note-composer.is-collapsed .note-composer__submit--compact { display: inline-flex; margin-right: 6px; padding: 6px 12px; } .note-composer.is-collapsed .note-composer__submit--compact span { display: none; } .note-composer.is-expanded .note-composer__submit--compact { display: none; } .note-composer__body { overflow: hidden; } .note-composer__editor.ql-snow, .note-composer .ql-snow { border: none; } .note-composer .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--hodl-border-subtle); padding: 8px 12px; background: transparent; } .note-composer:not(.is-advanced) .ql-toolbar .ql-formats:nth-child(n+4) { display: none; } .note-composer .ql-toolbar .ql-stroke { stroke: #8392a5; } .note-composer .ql-toolbar .ql-fill { fill: #8392a5; } .note-composer .ql-toolbar button:hover .ql-stroke, .note-composer .ql-toolbar button.ql-active .ql-stroke { stroke: #727cf5; } .note-composer .ql-toolbar button:hover .ql-fill, .note-composer .ql-toolbar button.ql-active .ql-fill { fill: #727cf5; } .note-composer .ql-container.ql-snow { border: none; font-size: 16px; } .note-composer .ql-editor { min-height: 88px; max-height: 320px; overflow-y: auto; padding: 0.75rem 1rem; color: var(--ct-emphasis-color, var(--hodl-text)); line-height: 1.55; } .note-composer .ql-editor.ql-blank::before { color: var(--hodl-text-2); font-style: normal; left: 1rem; } .note-composer__advanced { max-height: 0; overflow: hidden; opacity: 0; padding: 0 1rem; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease; } .note-composer.is-expanded.is-advanced .note-composer__advanced { display: block; max-height: 320px; opacity: 1; padding: 0.75rem 1rem 0.25rem; border-top: 1px solid var(--hodl-border-subtle); } .note-composer__advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; } .note-composer__field-group { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .note-composer__field-group:first-child { grid-column: 1 / -1; } .note-composer__task-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; } .note-composer__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hodl-text-2); margin: 0; } .note-composer__select, .note-composer__input { background: var(--hodl-surface-2); border-color: var(--hodl-border); color: var(--hodl-text-2); } .note-composer__select:focus, .note-composer__input:focus { border-color: var(--hodl-accent); box-shadow: none; } .note-composer__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 8px 0.75rem 0.75rem; border-top: 1px solid var(--hodl-border-subtle); } .note-composer__footer-start { display: flex; align-items: center; gap: 0.25rem; } .note-composer__task-checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .note-composer__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; border-radius: 50%; background: transparent; color: var(--hodl-text-2); font-size: 18px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .note-composer__icon-btn:hover { background: var(--hodl-surface-3); color: var(--hodl-text); } .note-composer__icon-btn--active-private { color: var(--hodl-down-text); } .note-composer__icon-btn--active-public { color: var(--hodl-up-text); } .note-composer__icon-btn--active-task { color: var(--hodl-accent); } .note-composer.is-advanced #advancedToggle { color: var(--hodl-accent); background: var(--hodl-accent-muted); } .note-composer__submit { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: var(--hodl-radius-pill); background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; flex-shrink: 0; } .note-composer__submit:hover { background: var(--hodl-accent); color: var(--hodl-text-on-accent); } .note-composer__submit:active { transform: scale(0.98); } /* Media bar — dodawanie zdjęć (do 10) i linku wideo */ .note-composer__media { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 2px 0.5rem 6px; } .note-composer__media-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hodl-accent, var(--hodl-accent)); background: transparent; border: none; padding: 6px 8px; border-radius: var(--hodl-radius-md); cursor: pointer; transition: background-color 0.15s ease; } .note-composer__media-btn:hover { background: var(--hodl-accent-muted, var(--hodl-accent-muted)); } .note-composer__media-btn i { font-size: 16px; } .note-composer__error { display: block; font-size: 12px; color: var(--hodl-down-text); padding: 0 1rem; } .note-composer--edit .note-composer__title-input { border-bottom: 1px solid var(--hodl-border-subtle); font-size: 1rem; font-weight: 600; padding: 12px 1rem 8px; } .note-composer--edit .note-composer__footer { display: flex; } .note-composer__footer-end { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .note-composer__delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--hodl-down); border-radius: var(--hodl-radius-pill); background: transparent; color: var(--hodl-down-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .note-composer__delete-btn:hover { background: var(--hodl-down-soft); border-color: var(--hodl-down); } @media (max-width: 767.98px) { .note-composer__advanced-grid, .note-composer__task-group { grid-template-columns: 1fr; } .note-composer .ql-toolbar.ql-snow { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .note-composer .ql-toolbar.ql-snow::-webkit-scrollbar { display: none; } .note-composer__icon-btn { width: 2.5rem; height: 2.5rem; } .note-composer__submit { min-height: 44px; } } @media (max-width: 575.98px) { .note-card { padding: 0.75rem 0.25rem; } .note-card__layout { gap: 8px; } .note-card__avatar img, .note-card__avatar-link img { width: 36px; height: 36px; } .note-card__actions { gap: 0.1rem 1rem; } .note-card__actions-end { gap: 1rem; } .note-card__action { min-height: 44px; padding: 0.5rem 0; } .note-comment-form__input-wrap { border-radius: var(--hodl-radius-lg); } } .flash_messages_soft { display: flex; /* Umożliwia wyrównanie zawartości do środka */ justify-content: center; /* Wyrównuje zawartość poziomo do środka */ align-items: center; /* Wyrównuje zawartość pionowo do środka */ border: 2px solid red; /* Ustawia obramowanie czerwone o grubości 2px */ border-radius: var(--hodl-radius-lg); /* Zaokrągla narożniki obramowania */ margin: 8px auto; /* Centralnie wyrównuje element na stronie z odstępem 10px od góry i dołu */ min-width: 200px; max-width: 75%; /* Ustawia maksymalną szerokość na 75% */ text-align: center; /* Dodatkowo wyrównuje tekst do środka */ padding: 1px; /* Dodaje odstęp wewnątrz elementu */ } .pagination-container .pagination { border-radius: var(--hodl-radius-lg); /* Dodaje zaokrąglenia do paginacji */ } .pagination-container .page-item.active .page-link { background-color: var(--hodl-accent); /* Kolor tła dla aktywnej strony */ border-color: var(--hodl-accent); /* Kolor obramowania dla aktywnej strony */; color: var(--hodl-text-on-accent); } .pagination-container .page-link { color: var(--hodl-accent); /* Kolor linków */ } .star-rating { display: inline-block; } .star { font-size: 18px; /* było `gray`/`gold` — nazwy kolorów spoza palety. Złoto (#ffd700) na białej karcie daje kontrast 1,4:1 przy progu 3,0 dla elementu niosącego informację (nocny przegląd 2026-09-07). */ color: var(--hodl-text-3); cursor: pointer; border: none; /* Usuń obramowanie */ } .star.highlighted { color: var(--hodl-warn-text); } .compare-user .star.highlighted { color: var(--hodl-accent); /* Ustawienie koloru gwiazdek dla compare-user na niebiesko */ } .star-rating.static .star { cursor: default; /* Usunięcie kursora wskaźnika */ } .toggle-status i { transition: color 0.2s; } .toggle-status:hover i { color: darkgray; } .compare-user, .compare-user-wallets, .compare-user-chart { background-color: transparent; /* Usuń tło */ padding: 0; /* Usuń padding */ margin-top: 0; /* Usuń margines */ border-radius: var(--hodl-radius-pill); /* Zaokrąglenie jak w klasie rounded-pill */ border: none; /* Usuń obramowanie */ color: var(--hodl-accent); /* Kolor tekstu */ display: inline-block; /* Wyświetlanie jako inline */ padding: 0.1em 0.3em; /* Padding wewnętrzny, podobny do Bootstrap */ font-size: 0.875em; /* Zmniejszenie rozmiaru czcionki */ font-weight: 700; /* Pogrubiona czcionka */ text-align: center; /* Wyśrodkowanie tekstu */ white-space: nowrap; /* Tekst nie zawija się */ vertical-align: baseline; } .user-search-dropdown { position: absolute; top: 100%; right: 0; left: auto; width: 300px; /* Adjust as needed */ overflow-y: auto; z-index: 1000; display: none; /* Hide by default */ border: 1px solid var(--hodl-accent); } .user-search-dropdown.show { display: block; } .user-search-dropdown .dropdown-divider { height: 3px; margin: 0.5rem 0; overflow: hidden; background-color: var(--hodl-accent); color: var(--hodl-text-on-accent); } .other-user-selected { color: var(--hodl-accent); } /* Style for Rank Column */ .rank-column { vertical-align: middle; max-width: 50px; text-align: right; white-space: nowrap; /* Prevent text wrapping */ width: 1%; /* Minimal width based on content */ } /* Style for Coin Column */ .coin-column { vertical-align: middle; max-width: 300px; } /* Style for User Status Rating Column */ .user-status-rating-column { text-align: left; vertical-align: middle; padding-right: 8px; white-space: nowrap; max-width: 300px; } /* Style for Price Column */ .price-column { text-align: right; vertical-align: middle; padding-right: 8px; white-space: nowrap; /* Prevent text wrapping */ width: 1%; /* Minimal width based on content */ } /* Style for 24h Price Change Column */ .price-column_change_24h { text-align: right; vertical-align: middle; padding-right: 8px; white-space: nowrap; width: 1%; } /* Style for 7d Price Change Column */ .price-column_change_7d { text-align: right; vertical-align: middle; padding-right: 8px; white-space: nowrap; width: 1%; } /* Style for 30d Price Change Column */ .price-column_change_30d { text-align: right; vertical-align: middle; padding-right: 8px; white-space: nowrap; width: 1%; } /* Style for User Status Shopping Column */ .user-status-shopping-column { vertical-align: middle; max-width: 150px; } /* Style for User Status Position Column */ .user-status-position-column { vertical-align: middle; max-width: 150px; } /* Style for User Status Chart Column */ .user-status-chart-column { vertical-align: middle; max-width: 170px; } /* Style for User Status Short Description Column */ .user-status-short-description { vertical-align: middle; max-width: 200px; } /* Style for hold Column */ .hold-column { vertical-align: middle; text-align: right; white-space: nowrap; width: 1%; /* Ensures column shrinks to fit content */ } .hold-content { display: flex; align-items: center; justify-content: space-between; } .hold-details { text-align: right; } .hold-icon { margin-left: 8px; display: flex; align-items: center; } /* Style for PNL Column */ .pnl-column { text-align: right; vertical-align: middle; white-space: nowrap; /* Prevent text wrapping */ width: 1%; /* Minimal width based on content */ } /* Market Cap Column */ .mkt-cap-column { text-align: right; vertical-align: middle; white-space: nowrap; /* Prevent text wrapping */ width: 1%; /* Minimal width based on content */ } /* Fully Diluted Valuation Column */ .fully_diluted_valuation-column { text-align: right; vertical-align: middle; white-space: nowrap; width: 1%; } /* Market Cap / FDV Column */ .mkt_cap_divide_fdv-column { text-align: right; vertical-align: middle; white-space: nowrap; width: 1%; } /* Adjust the spacing between filter options and AI Friend link */ #filter-form .form-check { margin-right: 8px; } /* Adjust settings icon spacing */ #settings-icon { margin-right: 16px; } /* Adjust search input width if needed */ #user-search { min-width: 150px; } /* Legacy alias — hodl-label-picker is the modern picker */ .color-picker { position: fixed; z-index: 1100; } .hodl-label-picker { position: fixed; z-index: 1100; padding: 0.5rem; background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); animation: hodl-picker-in 0.12s ease; } @keyframes hodl-picker-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .hodl-label-picker__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .hodl-label-picker__swatch { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: var(--hodl-radius-md); background: var(--swatch-color, transparent); cursor: pointer; transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .hodl-label-picker__swatch--clear { background: transparent; border: 2px dashed var(--hodl-border); position: relative; } .hodl-label-picker__swatch--clear::after { content: ''; position: absolute; inset: 6px; border-radius: var(--hodl-radius-xs); background: var(--hodl-surface-3); } .hodl-label-picker__swatch:hover { transform: scale(1.08); border-color: var(--hodl-accent); } .hodl-label-picker__swatch.is-selected { border-color: var(--hodl-border-subtle); box-shadow: 0 0 0 2px #727cf5; transform: scale(1.05); } .color-option { width: 24px; height: 24px; border-radius: 50%; margin-right: 4px; cursor: pointer; border: 1px solid var(--hodl-border); } .color-option:hover { border: 2px solid var(--hodl-border-subtle); } .label-select i { font-size: 24px; vertical-align: middle; } /* Modal overlay */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--hodl-bg); z-index: 999; display: none; } /* Modal settings panel */ .settings-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; max-width: 600px; background-color: var(--hodl-bg); border-radius: var(--hodl-radius-md); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 1000; padding: 16px; overflow-y: auto; max-height: 80vh; } /* Layout for Settings Grid */ .settings-grid { display: flex; flex-wrap: wrap; gap: 16px; } .settings-category { flex: 1 1 45%; /* Two columns */ } .settings-category h3 { font-size: 1.1em; font-weight: bold; margin-bottom: 8px; color: var(--hodl-text); border-bottom: 2px solid var(--hodl-border); padding-bottom: 4px; } .settings-category label { display: block; font-size: 0.9em; color: var(--hodl-text-2); margin-bottom: 6px; } .save-button { display: block; width: 100%; padding: 8px; font-size: 1em; color: var(--hodl-text-on-accent); background-color: var(--hodl-accent); border: none; border-radius: var(--hodl-radius-xs); cursor: pointer; transition: background-color 0.3s ease; margin-top: 16px; } .save-button:hover { background-color: var(--hodl-accent); color: var(--hodl-text-on-accent); } /* Kontener porównania */ .compare-title-box { background-color: var(--hodl-surface-2); border-radius: var(--hodl-radius-lg); padding: 8px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Ikona porównania */ .icon-compare { color: var(--hodl-accent); font-size: 24px; } /* Tekst porównania */ .text-compare { color: var(--hodl-accent); font-size: 1rem; font-weight: 600; } /* Avatar użytkownika */ .avatar-compare { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin-right: 8px; border: 2px solid var(--hodl-accent); } /* Nazwa użytkownika */ .name-compare { font-size: 1rem; font-weight: bold; color: var(--hodl-text); text-decoration: none; } .name-compare:hover { color: var(--hodl-accent-text); text-decoration: underline; } /* Nazwa użytkownika */ .username-compare { font-size: 14px; color: var(--hodl-text-2); text-decoration: none; } .username-compare:hover { color: var(--hodl-text-2); } /* Przycisk usuwania porównania */ .remove-compare { color: var(--hodl-down-text); cursor: pointer; transition: color 0.3s ease; } .remove-compare:hover { color: var(--hodl-down-text); } .icon-remove { font-size: 24px; } .privacy-icon-table { margin-left: 4px; font-size: 14px; cursor: pointer; color: var(--hodl-text-3); opacity: 0.7; transition: color 0.3s ease, opacity 0.3s ease; } .privacy-icon-table:hover { color: var(--hodl-accent-text); opacity: 1; } /* Feed header: tabs + search/filters in one row */ .feed-header { margin-bottom: 0; padding: 8px 12px 12px; border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); background: var(--hodl-feed-header-bg, var(--ct-secondary-bg, var(--hodl-surface-3))); box-shadow: var(--hodl-feed-shadow, var(--hodl-panel-shadow, none)); container-type: inline-size; container-name: feed-header; } .feed-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; } .feed-header__tabs { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; padding: 4px; border-radius: var(--hodl-radius-pill); background: var(--hodl-feed-tabs-bg, var(--ct-tertiary-bg, var(--hodl-surface-3))); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .feed-header__tabs::-webkit-scrollbar { display: none; } .feed-header__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0.75rem; font-size: 14px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); text-decoration: none; border-radius: var(--hodl-radius-pill); border: 1px solid transparent; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; line-height: 1.2; flex-shrink: 0; } .feed-header__tab i { font-size: 1rem; opacity: 0.9; } .feed-header__tab:hover { color: var(--ct-emphasis-color, var(--hodl-text)); background: var(--hodl-accent-muted, var(--hodl-accent-muted)); } .feed-header__tab.is-active { color: var(--hodl-text-on-accent); background: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent-hover, var(--hodl-accent)); box-shadow: 0 1px 4px rgba(114, 124, 245, 0.45); } .feed-header__tab.is-active i { opacity: 1; } .feed-header__tab.is-active:hover { color: var(--hodl-text-on-accent); background: var(--hodl-accent-hover, var(--hodl-accent)); } .feed-header__tools { display: flex; align-items: center; gap: 6px; flex: 1 1 0; justify-content: flex-end; min-width: 0; } .feed-header__search { flex: 1 1 auto; width: auto; max-width: 200px; min-width: 0; } .feed-header__search .input-group { min-width: 0; } .feed-header__filter-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .feed-header__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--hodl-text-2); border: none; background: transparent; border-radius: 50%; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .feed-header__icon-btn:hover, .feed-header__icon-btn:focus { color: var(--hodl-accent, var(--hodl-accent)); background: var(--hodl-accent-muted, var(--hodl-accent-muted)); } .feed-header__icon-btn i { font-size: 18px; line-height: 1; } .feed-header__icon-btn--filter { width: auto; min-width: 2rem; padding: 0 8px; border-radius: var(--hodl-radius-pill); gap: 4px; } .feed-header__category-badge { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 0.1rem 6px; border-radius: var(--hodl-radius-xs); background: var(--hodl-accent-muted, var(--hodl-accent-muted)); color: var(--hodl-accent, var(--hodl-accent)); line-height: 1.3; max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feed-header__symbol { text-transform: uppercase; } .feed-header__leading { display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto; min-width: 0; } .feed-header__coin-logo { flex-shrink: 0; display: flex; align-items: center; line-height: 0; text-decoration: none; } .feed-header__coin-logo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--ct-border-color, var(--hodl-border)); } .feed-header__tab-label-short { display: none; } .feed-header__tabs--coin .feed-header__tab { padding: 6px 8px; font-size: 12px; } .feed-header__tabs--coin .feed-header__tab i { font-size: 14px; } /* Tight header: shorter coin tab labels, hide category text */ @container feed-header (max-width: 620px) { .feed-header__tabs--coin .feed-header__tab-label-full { display: none; } .feed-header__tabs--coin .feed-header__tab-label-short { display: inline; } } @container feed-header (max-width: 420px) { .feed-header__category-badge { display: none; } .feed-header__search { max-width: 120px; } } [data-bs-theme=dark] .feed-header__category-badge { background: var(--hodl-accent-muted); color: var(--ct-primary-text-emphasis); } [data-bs-theme=dark] .feed-header { border-color: var(--hodl-panel-card-border); } [data-bs-theme=dark] .feed-header__tabs { border-color: var(--hodl-panel-card-border); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); } [data-bs-theme=dark] .feed-header__tab { color: var(--ct-secondary-color); } [data-bs-theme=dark] .feed-header__tab:hover { color: var(--ct-emphasis-color); background: var(--hodl-accent-muted, var(--hodl-accent-muted)); } [data-bs-theme=dark] .feed-header__tab.is-active { color: var(--hodl-text-on-accent); background: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent-hover, var(--hodl-accent)); box-shadow: 0 2px 8px rgba(114, 124, 245, 0.5); } [data-bs-theme=dark] .feed-header__icon-btn { color: var(--ct-secondary-color); } [data-bs-theme=dark] .feed-header__icon-btn:hover, [data-bs-theme=dark] .feed-header__icon-btn:focus { color: var(--ct-primary-text-emphasis); background: var(--hodl-accent-muted); } /* ── Hodl panel design tokens (DESIGN_PANEL_PATTERN.md) ───────────────── */ /* ── Right side panel (portfolio / wallets) ─────────────────────────────── */ .side-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; --side-panel-figures-width: 8.5rem; } .side-panel__section { border: 1px solid var(--hodl-panel-card-border); border-radius: var(--hodl-radius-lg); background: var(--hodl-panel-card-bg); box-shadow: var(--hodl-panel-shadow); overflow: hidden; } .side-panel__section--accent { background: var(--hodl-panel-accent-bg); border-color: var(--hodl-panel-accent-border); } .side-panel__section--list { overflow: visible; } .side-panel__section--list > .side-panel__scroll:not(.side-panel__scroll--pf-coins):not(.side-panel__scroll--wl-wallets):not(.side-panel__scroll--coin-details) { overflow: hidden; border-radius: 0 0 var(--hodl-radius-lg) var(--hodl-radius-lg); } .side-panel__head--toolbar, .side-panel__head--details { justify-content: space-between; align-items: center; gap: 0.5rem; padding: 8px 0.75rem; background: var(--hodl-panel-head-bg); border-bottom: 1px solid var(--hodl-panel-head-border); } .side-panel__section--accent > .side-panel__head--portfolio, .side-panel__section--accent > .side-panel__head--toolbar, .side-panel__section--accent > .side-panel__head--profile { background: transparent; border-bottom: 1px solid var(--hodl-panel-head-border); } .side-panel__section--accent.coin-info { border-bottom: none; } .side-panel__section--accent.coin-info .coin-info__header { border-bottom: 1px solid var(--hodl-panel-head-border); } a.side-panel__item:hover, .side-panel__item--static:hover { background: var(--hodl-panel-item-hover); } .side-panel__dropdown--panel { z-index: 1090; } .side-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 12px 0.75rem 8px; border-bottom: 1px solid var(--hodl-border-subtle); } .side-panel__head-end { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Tryby wyświetlania portfolio — pokazujemy tylko aktywny wariant */ .side-panel__figures .pf-fig { display: none; width: 100%; } [data-pf-view="value"] .pf-fig[data-pf-fig="value"], [data-pf-view="pnl"] .pf-fig[data-pf-fig="pnl"], [data-pf-view="changes"] .pf-fig[data-pf-fig="changes"] { display: block; } .pf-fig .side-panel__changes { justify-content: flex-end; margin-top: 0.06rem; } .pf-fig .side-panel__pnl-inline { justify-content: flex-end; margin-top: 0.06rem; width: 100%; } /* Tryby wyświetlania wallets — pokazujemy tylko aktywny wariant */ .side-panel__figures .wl-fig { display: none; width: 100%; } [data-wl-view="value"] .wl-fig[data-wl-fig="value"], [data-wl-view="pnl"] .wl-fig[data-wl-fig="pnl"] { display: block; } .wl-fig .side-panel__pnl-inline { justify-content: flex-end; margin-top: 0.06rem; width: 100%; } /* Portfolio panel — summary + coins list (2 cards jak coin panel) */ .side-panel--feed { display: flex; flex-direction: column; gap: 12px; } /* Panel Portfolio na / i /my_page/ = JEDNA karta (zadanie 4b): nagłówek jak Wallets, pasek kwoty ze zmianą wg widoku ⊞, pod nim lista. */ .side-panel__pf-hero { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 8px 0.75rem 0.5rem; border-bottom: 1px solid var(--hodl-panel-head-border, var(--hodl-border-subtle)); flex-shrink: 0; } .side-panel__pf-hero-start { min-width: 0; line-height: 1.2; } .side-panel__pf-hero .side-panel__hero-value { font-size: 18px; line-height: 1.2; white-space: nowrap; } .side-panel__pf-hero-start .side-panel__meta { margin-top: 0.1rem; font-size: 11px; } .side-panel__pf-hero-end { text-align: right; line-height: 1.25; min-width: 0; } /* „Show hidden": ikona + liczba, jedna linia (napis łamał nagłówek na dwie linie) */ .side-panel__reveal--compact { white-space: nowrap; flex-shrink: 0; gap: 2px; padding: 1px 4px; line-height: 1; } .side-panel__reveal--compact i { font-size: 14px; line-height: 1; } .side-panel__reveal--compact[aria-pressed="true"] { color: var(--hodl-accent, var(--hodl-accent)); } .side-panel__reveal-count { font-size: 11px; font-weight: 700; } /* tryb prywatny: przycisk w nagłówku + rozmycie kwot w całym prawym panelu */ .side-panel__privacy-btn { width: 1.55rem; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .side-panel__privacy-btn[aria-pressed="true"] { color: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent, var(--hodl-accent)); } .side-panel--feed.is-amounts-hidden .side-panel__hero-value, .side-panel--feed.is-amounts-hidden .side-panel__money, .side-panel--feed.is-amounts-hidden .side-panel__qty, .side-panel--feed.is-amounts-hidden .side-panel__pnl-dollar { filter: blur(5px); opacity: 0.8; user-select: none; pointer-events: none; } .side-panel__pf-hero .side-panel__pnl-inline { justify-content: flex-end; font-size: 12px; min-height: 1rem; } .side-panel__section--pf-coins > .side-panel__scroll--pf-coins { border-radius: 0 0 var(--hodl-radius-lg) var(--hodl-radius-lg); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .side-panel__scroll--wl-wallets { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; } .side-panel__section--wl-wallets > .side-panel__scroll--wl-wallets { border-radius: 0 0 var(--hodl-radius-lg) var(--hodl-radius-lg); } @media (min-width: 992px) { #right-panel .side-panel--feed { display: flex; flex-direction: column; max-height: calc(100vh - var(--hodl-topbar-height, var(--ct-topbar-height, 70px)) - 1.5rem); min-height: 0; overflow: hidden; gap: 12px; } #right-panel .side-panel--feed .side-panel__section--pf-coins { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #right-panel .side-panel--feed .side-panel__section--pf-coins .side-panel__head--details, #right-panel .side-panel--feed .side-panel__section--pf-coins .side-panel__pf-hero { flex-shrink: 0; } #right-panel .side-panel--feed .side-panel__scroll--pf-coins { flex: 1 1 auto; min-height: 0; max-height: none; } #right-panel .side-panel--feed > .side-panel__section--wl-wallets { flex: 0 0 auto; min-height: min(28vh, 220px); max-height: min(42vh, 340px); display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-top: 1px solid var(--hodl-panel-head-border, var(--hodl-border-subtle)); } #right-panel .side-panel--feed .side-panel__section--wl-wallets .side-panel__head--details { flex-shrink: 0; } #right-panel .side-panel--feed .side-panel__scroll--wl-wallets { flex: 1 1 auto; min-height: 0; max-height: none; } } @media (max-width: 991.98px) { .side-panel__scroll--pf-coins { max-height: min(52vh, 420px); } .side-panel__scroll--wl-wallets { max-height: min(36vh, 300px); min-height: 12.5rem; } } #portfolio-panel { --side-panel-figures-width: auto; } #portfolio-panel .side-panel__item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 3.35rem; } #portfolio-panel .side-panel__logo { width: 28px; height: 28px; flex-shrink: 0; } #portfolio-panel .side-panel__item-main { flex: 1 1 auto; min-width: 0; overflow: hidden; min-height: 2.45rem; display: flex; flex-direction: column; justify-content: center; } #portfolio-panel .side-panel__figures-stack { min-height: 2.75rem; justify-content: center; } #portfolio-panel .side-panel__item-title { flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: 6px; line-height: 1.25; } #portfolio-panel .side-panel__symbol { color: var(--hodl-accent, var(--hodl-accent)); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #portfolio-panel .side-panel__price { font-size: 12px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); white-space: nowrap; flex-shrink: 0; } #portfolio-panel .side-panel__changes--pf { display: none; margin-top: 0.12rem; gap: 2px; } #portfolio-panel .side-panel__coin-name { display: block; margin-top: 0.1rem; font-size: 11px; line-height: 1.25; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #portfolio-panel .side-panel__price-chg { flex-shrink: 0; font-size: 11px; padding: 0.05rem 4px; } #portfolio-panel[data-pf-view="changes"] .side-panel__coin-name { display: none; } #portfolio-panel[data-pf-view="changes"] .side-panel__changes--pf { display: flex; } #portfolio-panel[data-pf-view="changes"] .side-panel__price-chg { display: none; } #portfolio-panel .side-panel__figures { width: auto; min-width: 0; max-width: none; flex: 0 0 auto; text-align: right; padding-left: 6px; } #portfolio-panel .side-panel__money { font-size: 13px; } #portfolio-panel .side-panel__qty { font-size: 11px; } /* Wallets panel — jedna karta listy */ .side-panel__section--wl-wallets > .side-panel__head--details, .side-panel__section--pf-coins > .side-panel__head--details { align-items: center; gap: 6px; min-height: 0; padding: 4px 8px; } .side-panel__section--wl-wallets .side-panel__head-end, .side-panel__section--pf-coins .side-panel__head-end { gap: 4px; } .side-panel__section--wl-wallets .side-panel__sort-hint, .side-panel__section--pf-coins .side-panel__sort-hint { font-size: 11px; } .side-panel__wl-head-view .side-panel__sort-btn { width: 1.55rem; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .side-panel__section--wl-wallets .side-panel__head-end > .side-panel__sort .side-panel__sort-btn, .side-panel__section--pf-coins .side-panel__head-end > .side-panel__sort .side-panel__sort-btn { font-size: 11px; line-height: 1.15; min-height: 24px; padding: 0.1rem 6px; border-radius: var(--hodl-radius-sm); } #wallets-panel { --side-panel-figures-width: auto; } #wallets-panel .side-panel__item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 2.85rem; } #wallets-panel .side-panel__logo { width: 28px; height: 28px; flex-shrink: 0; } #wallets-panel .side-panel__item-main { flex: 1 1 auto; min-width: 0; overflow: hidden; } #wallets-panel .side-panel__item-title { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 4px; line-height: 1.25; } #wallets-panel .side-panel__wallet-name { font-weight: 600; font-size: 13px; color: var(--ct-emphasis-color, var(--hodl-text)); } #wallets-panel .side-panel__figures { width: auto; min-width: 0; max-width: none; flex: 0 0 auto; text-align: right; padding-left: 6px; } #wallets-panel .side-panel__figures-stack { min-height: 2.45rem; } #wallets-panel[data-wl-view="pnl"] .side-panel__figures-stack { min-height: 2.75rem; } #wallets-panel .side-panel__money { font-size: 13px; } #wallets-panel .side-panel__qty { font-size: 11px; } .side-panel__head--coin { align-items: center; gap: 8px; } .side-panel__head-coin-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; } .side-panel__coin-name--panel { font-size: 11px; line-height: 1.25; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__hero--coin .side-panel__price-chg { flex-shrink: 0; font-size: 11px; padding: 0.05rem 4px; } .side-panel__hero-cell--price { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .side-panel__changes--coin { margin-top: 0; } /* Coin right panel — layout tweaks */ .side-panel--coin .side-panel__hero--coin { border-bottom: none; } .side-panel__section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ct-secondary-color, var(--hodl-text-3)); } .side-panel__sort-hint { font-size: 11px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); opacity: 0.85; } html:not([data-bs-theme=dark]) .side-panel .side-panel__sort-btn { background: var(--hodl-surface); border-color: var(--hodl-border); color: var(--ct-emphasis-color, var(--hodl-text-2)); } html:not([data-bs-theme=dark]) .side-panel .side-panel__dropdown { background: var(--hodl-surface); border-color: var(--hodl-border); box-shadow: 0 6px 20px rgba(31, 41, 55, 0.1); } html:not([data-bs-theme=dark]) .side-panel .side-panel__dropdown .dropdown-item { color: var(--ct-emphasis-color, var(--hodl-text-2)); } html:not([data-bs-theme=dark]) .side-panel .side-panel__dropdown .dropdown-item:hover, html:not([data-bs-theme=dark]) .side-panel .side-panel__dropdown .dropdown-item:focus, html:not([data-bs-theme=dark]) .side-panel .side-panel__dropdown .dropdown-item.active { background: var(--hodl-accent-muted); color: var(--ct-emphasis-color, var(--hodl-text-2)); } html:not([data-bs-theme=dark]) .side-panel .side-panel__item { border-bottom-color: var(--hodl-border-subtle); } .side-panel__head-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .side-panel__title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ct-emphasis-color, var(--hodl-text)); text-decoration: none; } .side-panel__title:hover { color: var(--hodl-accent, var(--hodl-accent)); } .side-panel__meta { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; } .side-panel__hero { padding: 8px 0.75rem 12px; border-bottom: 1px solid var(--hodl-border-subtle); } .side-panel__hero-value { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ct-emphasis-color, var(--hodl-text)); flex-shrink: 0; } .side-panel__hero-row-value { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; } .side-panel__hero-value--sm { font-size: 1rem; } .side-panel__hero-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-secondary-color, var(--hodl-text-3)); margin-bottom: 0.1rem; } .side-panel__hero-row { display: grid; grid-template-columns: 1fr var(--side-panel-figures-width, 6.75rem); gap: 0.5rem; align-items: start; } .side-panel__hero-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; } .side-panel__scroll { padding: 2px 0; } /* ────────────────────────────────────────────────────────────────────────── /my/ prawy panel — przycisk Buy, scroll listy pozycji, akcje wiersza ────────────────────────────────────────────────────────────────────────── */ .side-panel__buy-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--hodl-accent); border-radius: var(--hodl-radius-md); background: linear-gradient(180deg, var(--hodl-accent-muted), transparent); color: var(--ct-link-color, var(--hodl-accent)); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.08s ease; } .side-panel__buy-btn:hover { background: linear-gradient(180deg, var(--hodl-accent-muted), var(--hodl-surface-3)); border-color: var(--hodl-accent); } .side-panel__buy-btn:active { transform: translateY(1px); } .side-panel__buy-btn i { font-size: 16px; } /* Scroll listy pozycji — natywny, zawsze dostępny pasek (niezależny od SimpleBar), żeby przy większej liczbie pozycji wszystkie były osiągalne przez przewijanie. */ .side-panel__scroll--coin-details { max-height: 480px; overflow-y: auto; overflow-x: hidden; border-radius: 0 0 var(--hodl-radius-lg) var(--hodl-radius-lg); scrollbar-width: thin; scrollbar-color: rgba(131, 146, 165, 0.45) transparent; } .side-panel__scroll--coin-details::-webkit-scrollbar { width: 9px; } .side-panel__scroll--coin-details::-webkit-scrollbar-track { background: transparent; } .side-panel__scroll--coin-details::-webkit-scrollbar-thumb { background: var(--hodl-surface-3); border-radius: var(--hodl-radius-sm); border: 2px solid transparent; background-clip: content-box; } .side-panel__scroll--coin-details::-webkit-scrollbar-thumb:hover { background: var(--hodl-surface-3); background-clip: content-box; } /* Akcje pozycji (podgląd / edycja / usuń) — ukryte, pokazywane na hover wiersza. */ #coin-details-list .side-panel__item { position: relative; } .side-panel__item-actions { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; gap: 4px; padding: 2px 4px; border-radius: var(--hodl-radius-md); background: var(--hodl-panel-head-bg, var(--hodl-surface-3)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 3; } #coin-details-list .side-panel__item:hover .side-panel__item-actions, .side-panel__item-actions:focus-within { opacity: 1; visibility: visible; } .side-panel__row-action { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-sm); background: var(--hodl-surface-3); color: var(--ct-secondary-color, var(--hodl-text-2)); font-size: 14px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .side-panel__row-action:hover { background: var(--hodl-surface-3); color: var(--ct-body-color, var(--hodl-text)); border-color: var(--hodl-border); } .side-panel__row-action--danger:hover { background: var(--hodl-down-soft); color: var(--hodl-down-text); border-color: var(--hodl-down); } /* Stała siatka: logo | treść | kolumna liczb (zawsze ta sama szerokość) */ .side-panel__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) var(--side-panel-figures-width); gap: 8px 0.5rem; align-items: start; padding: 8px 0.75rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hodl-border-subtle); transition: background 0.12s ease; min-width: 0; } .side-panel__item:last-child { border-bottom: none; } a.side-panel__item:hover { background: var(--hodl-surface-3); } .side-panel__item--static { color: inherit; } .side-panel__logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; grid-row: 1 / -1; align-self: start; border: 1px solid var(--hodl-border); } .side-panel__logo--wallet { border-radius: var(--hodl-radius-md); } .side-panel__logo-link { grid-row: 1 / -1; align-self: start; line-height: 0; } .side-panel__item-main { min-width: 0; overflow: hidden; } .side-panel__item-title { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); line-height: 1.3; min-width: 0; } .side-panel__item-title--sm { font-size: 12px; flex-direction: column; align-items: flex-start; gap: 0.12rem; } .side-panel__symbol { text-transform: uppercase; font-weight: 700; flex-shrink: 0; } .side-panel__wallet-name, .side-panel__position-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .side-panel__price { font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .side-panel__date { font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); text-transform: uppercase; white-space: nowrap; } .side-panel__position-row { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .side-panel__position-name { color: var(--ct-emphasis-color, var(--hodl-text)); text-decoration: none; font-weight: 600; } .side-panel__position-name:hover { color: var(--hodl-accent); } .side-panel__info { color: var(--ct-secondary-color, var(--hodl-text-3)); text-decoration: none; font-size: 14px; flex-shrink: 0; } .side-panel__changes { display: flex; flex-wrap: nowrap; gap: 2px; margin-top: 4px; max-width: 100%; overflow: hidden; } /* Kolumna liczb — stała szerokość, wyrównanie do prawej */ .side-panel__figures { width: var(--side-panel-figures-width); min-width: var(--side-panel-figures-width); max-width: var(--side-panel-figures-width); text-align: right; } .side-panel__figures-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.06rem; width: 100%; text-align: right; } .side-panel__figures-stack--hero { gap: 0.1rem; } .side-panel__figures-stack--hero .side-panel__hero-value { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ct-emphasis-color, var(--hodl-text)); } .side-panel__figures-stack .side-panel__money, .side-panel__figures-stack .side-panel__qty { width: 100%; } .side-panel__figures-stack .side-panel__changes { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; margin-top: 0.06rem; max-width: 100%; } .side-panel__figures-stack .side-panel__pnl-inline, .side-panel__hero--total .side-panel__pnl-inline, .side-panel__hero-cell--end .side-panel__pnl-inline { margin-top: 0.06rem; justify-content: flex-end; width: 100%; } .side-panel__hero--total { display: flex; justify-content: flex-end; } .side-panel__hero--total .side-panel__figures-stack { width: auto; max-width: 100%; } .side-panel__hero-cell--end .side-panel__figures-stack { width: 100%; } .side-panel__money { font-size: 13px; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__qty { font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__holdings-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 8px; max-width: 100%; } .side-panel__holdings-line .side-panel__qty { flex: 1 1 auto; min-width: 0; max-width: 100%; text-align: right; } .side-panel__holdings-line .side-panel__money { font-size: 13px; } .side-panel__hero-cell .side-panel__holdings-line .side-panel__money { font-size: 1rem; font-weight: 700; } .side-panel__holdings-line .side-panel__pnl-inline { margin-top: 0; width: auto; flex-shrink: 0; } .side-panel__pnl-inline { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-end; gap: 0.5rem; margin-top: 0.1rem; max-width: 100%; white-space: nowrap; } .side-panel__hero .side-panel__pnl-inline { justify-content: flex-start; margin-top: 0; } .side-panel__hero .side-panel__figures-stack .side-panel__pnl-inline { justify-content: flex-end; } .side-panel__hero-foot .side-panel__pnl-inline { margin-top: 0; } .side-panel__figures > .side-panel__pnl-inline { width: 100%; } .side-panel__pnl-dollar, .side-panel__pnl-pct { font-size: 12px; font-weight: 600; line-height: 1.2; flex-shrink: 0; } .side-panel__pnl--up { color: var(--hodl-up-text); } .side-panel__pnl--down { color: var(--hodl-down-text); } .side-panel__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .side-panel__chip-sep { opacity: 0.55; margin: 0 0.08rem; } .side-panel__item-meta { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__privacy { font-size: 14px; flex-shrink: 0; } .side-panel__privacy--public { color: var(--hodl-up-text); } .side-panel__privacy--private { color: var(--hodl-text-2); } .side-panel__hero-grid { display: grid; grid-template-columns: 1fr var(--side-panel-figures-width, 6.75rem); gap: 0.5rem; align-items: start; } .side-panel__hero-cell--end { text-align: right; overflow: hidden; } .side-panel__chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: var(--hodl-radius-xs); line-height: 1.3; white-space: nowrap; height: 18px; } .side-panel__chip--xs { font-size: 11px; padding: 0.08rem 6px; flex-shrink: 0; } .side-panel__chip--up { background: var(--hodl-up-soft); color: var(--hodl-up-text); } .side-panel__chip--down { background: var(--hodl-down-soft); color: var(--hodl-down-text); } .side-panel__chip--muted { opacity: 0.75; } .side-panel__empty { padding: 1rem 0.75rem; margin: 0; font-size: 13px; color: var(--ct-secondary-color, var(--hodl-text-3)); text-align: center; } .side-panel__empty--hero { padding: 0.75rem; border-bottom: 1px solid var(--hodl-border-subtle); } /* ── Side panel: left column (profile + tasks) ───────────────────────────── */ .side-panel--left { overflow: visible; display: flex; flex-direction: column; gap: 12px; } .side-panel__section--profile { overflow: visible; } #tasks-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #tasks-panel .side-panel__scroll--tasks { flex: 1 1 auto; min-height: 14rem; max-height: min(72vh, calc(100vh - var(--hodl-topbar-height, 60px) - 13rem)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Panel Tasks jako widget lewej kolumny (feedy /, /my_page/, /my/) — rozmiar WG TREŚCI, nie na całą wysokość kolumny. Bazowe flex:1 1 auto + min-height:14rem zjadały pół ekranu przy zerze tasków. Override po #left-panel (nie rusza reguł bazowych Tasks; scroll przy wielu taskach nadal działa dzięki max-height). */ #left-panel #tasks-panel { flex: 0 1 auto; } #left-panel #tasks-panel .side-panel__scroll--tasks { min-height: 0; } /* Podwójne tło na rogach paneli: sekcje --list mają overflow:visible, a nagłówek (--toolbar/--details) ma własne tło z kwadratowymi rogami → prześwitywało drugie tło w rogu. Zaokrąglamy górne rogi nagłówka do promienia sekcji. Globalnie (positions, główny feed, my_page, strona coina). */ .side-panel__section--list > .side-panel__head:first-child { border-radius: var(--hodl-radius-lg) var(--hodl-radius-lg) 0 0; } #tasks-panel .side-panel__item--task.is-new { animation: task-row-highlight 2s ease-out; } @keyframes task-row-highlight { 0% { background: var(--hodl-accent-muted); } 100% { background: transparent; } } #tasks-panel.is-loading { opacity: 0.72; pointer-events: none; } .side-panel__quick-add { display: flex; gap: 6px; align-items: center; padding: 0 0.5rem 8px; } .side-panel__quick-add-input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 0.5rem; border-radius: var(--hodl-radius-sm); border: 1px solid var(--hodl-border); background: var(--hodl-surface-2); color: var(--ct-body-color, var(--hodl-text-2)); } .side-panel__quick-add-btn { flex-shrink: 0; width: 1.85rem; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--hodl-radius-sm); border: 1px solid var(--hodl-border); background: var(--hodl-accent-muted); color: var(--ct-primary, var(--hodl-accent)); cursor: pointer; } .side-panel__quick-add-status { margin: 0 0.5rem 6px; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .side-panel__quick-add-status--saving { color: var(--hodl-info-text); } .side-panel__quick-add-status--saved { color: var(--hodl-up-text); } .side-panel__quick-add-status--error { color: var(--hodl-down-text); } .side-panel__task-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0.5rem 0.5rem; } .side-panel__filter-chip { font-size: 11px; font-weight: 600; padding: 0 8px; border-radius: var(--hodl-radius-pill); border: 1px solid var(--hodl-border); background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); cursor: pointer; white-space: nowrap; height: 28px; display: inline-flex; align-items: center; } .side-panel__filter-chip.is-active { border-color: var(--hodl-accent); background: var(--hodl-accent-muted); color: var(--ct-emphasis-color, var(--hodl-text)); } .note-edit.is-saving .note-edit__trigger { opacity: 0.65; pointer-events: none; } .note-edit.is-saved .note-edit__trigger { box-shadow: 0 0 0 1px rgba(10, 207, 151, 0.45); } .note-edit.is-error .note-edit__trigger { box-shadow: 0 0 0 1px rgba(250, 92, 124, 0.55); } /* Note overlay — notatka nad stroną bez zmiany URL */ .note-overlay { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 1rem; } .note-overlay.is-open { display: flex; } body.note-overlay-open { overflow: hidden; } .note-overlay__backdrop { position: absolute; inset: 0; background: var(--hodl-bg); backdrop-filter: blur(2px); } .note-overlay__dialog { position: relative; width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; animation: note-overlay-in 0.16s ease-out; } @keyframes note-overlay-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .note-overlay__close { position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--ct-tertiary-bg, var(--hodl-surface-3)); color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background 0.12s ease, color 0.12s ease; } .note-overlay__close:hover { background: var(--hodl-down); color: var(--hodl-text-on-down); } .note-overlay__body { overflow-y: auto; max-height: 92vh; border-radius: var(--hodl-radius-lg); border: 1px solid var(--hodl-border); background: var(--ct-body-bg, var(--hodl-surface-3)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .note-overlay__body .note-card { margin: 0; padding: 16px 16px; background: var(--ct-body-bg, var(--hodl-surface-3)); border-radius: var(--hodl-radius-lg); border-bottom: none; } .note-overlay__body .note-card:hover { background: var(--ct-body-bg, var(--hodl-surface-3)); } /* W oknie pokazujemy całą notatkę (okno ma własny scroll) — bez klampowania */ .note-overlay__body .note-content, .note-overlay__body .note-card__body { max-height: none !important; overflow: visible !important; } .note-overlay__body .note-expand-btn { display: none !important; } .note-overlay__body .note-card__body-wrap.is-clamped::after { display: none !important; } /* Komentarze: pokaż wszystkie (okno ma własny scroll) */ .note-overlay__body .comments-container { max-height: none !important; overflow: visible !important; } .note-overlay__body .btn-load-more { display: none !important; } .note-overlay__loader, .note-overlay__error { padding: 2rem; text-align: center; color: var(--ct-secondary-color, var(--hodl-text-3)); background: var(--ct-tertiary-bg, var(--hodl-surface-3)); border-radius: var(--hodl-radius-md); } .note-overlay__error { color: var(--hodl-down-text); } /* Strona pojedynczej notatki (/note/) — pełna treść + komentarze od razu */ .note-detail-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); } .note-detail-nav__link { color: var(--ct-body-color, var(--hodl-text-2)); text-decoration: none; } .note-detail-nav__link:hover { color: var(--hodl-accent); } .note-detail-nav__sep { opacity: .45; } .note-detail-nav__current { color: var(--ct-emphasis-color, var(--hodl-text)); font-weight: 600; } .note-detail-page .note-card { margin: 0; } .note-detail-page .note-content, .note-detail-page .note-card__body { max-height: none !important; overflow: visible !important; } .note-detail-page .note-expand-btn { display: none !important; } .note-detail-page .note-card__body-wrap.is-clamped::after { display: none !important; } .note-detail-page .note-card__comments { display: block !important; } .note-detail-page .comments-container { max-height: none !important; overflow: visible !important; } .note-detail-page .btn-load-more { display: none !important; } /* Szybka edycja statusu/priorytetu/deadline w overlayu */ .note-card__tasks--editable { position: relative; flex-wrap: wrap; } .note-edit { position: relative; display: inline-flex; } .note-edit__trigger { cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 2px; font: inherit; } .note-edit__trigger--empty { opacity: 0.6; } .note-edit__caret { font-size: 0.9em; line-height: 1; opacity: 0.75; } .note-edit__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; min-width: 140px; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.1rem; background: var(--ct-tertiary-bg, var(--hodl-surface-3)); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-sm); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .note-edit__menu[hidden] { display: none; } .note-edit__option, .note-edit__clear { text-align: left; background: transparent; border: none; color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 13px; padding: 6px 0.5rem; border-radius: var(--hodl-radius-xs); cursor: pointer; white-space: nowrap; } .note-edit__option:hover, .note-edit__clear:hover { background: var(--hodl-surface-3); } .note-edit__option.is-active { background: var(--hodl-accent-muted); color: var(--hodl-accent-text); font-weight: 600; } .note-edit__date { background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-xs); color: var(--ct-emphasis-color, var(--hodl-text)); padding: 4px 6px; font-size: 13px; color-scheme: dark; } .note-edit__clear { margin-top: 4px; color: var(--hodl-down-text); } /* Lightbox obrazka notatki — ponad overlayem */ .note-lightbox { position: fixed; inset: 0; z-index: 1095; display: none; align-items: center; justify-content: center; padding: 2rem; background: var(--hodl-bg); cursor: zoom-out; } .note-lightbox.is-open { display: flex; } .note-lightbox__img { max-width: 95vw; max-height: 95vh; border-radius: var(--hodl-radius-md); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); } .side-panel__head--tasks { align-items: center; } .side-panel__head-group { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .side-panel__meta-sep { opacity: 0.65; } .side-panel__num { font-variant-numeric: tabular-nums; } .side-panel__sort { flex-shrink: 0; margin: 0; } .side-panel__sort-btn, .side-panel__icon-btn { font-size: 12px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); cursor: pointer; white-space: nowrap; } .side-panel__sort-btn { padding: 4px 8px; border-radius: var(--hodl-radius-md); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: transparent; } .side-panel__sort-btn::after { display: none; } .side-panel__sort-btn:hover, .side-panel__sort-btn:focus, .side-panel__sort-btn.show { border-color: var(--hodl-border); outline: none; box-shadow: none; } .side-panel__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: var(--hodl-radius-md); background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); } .side-panel__icon-btn::after { display: none; } .side-panel__icon-btn:hover, .side-panel__icon-btn:focus, .side-panel__icon-btn.show { background: var(--hodl-surface-3); color: var(--ct-emphasis-color, var(--hodl-text)); outline: none; } .side-panel__dropdown { z-index: 1080; min-width: 9rem; margin-top: 0.25rem !important; /* kształt jak cała rodzina menu (sekcja „Rodzina okienek" na końcu pliku) */ border-radius: var(--hodl-radius-md); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: var(--hodl-surface); box-shadow: var(--hodl-shadow-md); padding: 6px; } .side-panel__dropdown .dropdown-item { border-radius: var(--hodl-radius-sm); font-size: 13px; padding: 6px 8px; color: var(--ct-emphasis-color, var(--hodl-text)); width: 100%; text-align: left; border: none; background: transparent; } .side-panel__dropdown .dropdown-item:hover, .side-panel__dropdown .dropdown-item:focus { background: var(--hodl-surface-3); color: var(--ct-emphasis-color, var(--hodl-text)); } .side-panel__dropdown .dropdown-item.active, .side-panel__dropdown .dropdown-item:active { background: var(--hodl-accent-muted); color: var(--ct-emphasis-color, var(--hodl-text)); } .side-panel__profile { position: relative; padding: 12px 0.75rem; } .side-panel__head--profile { align-items: center; gap: 8px; padding: 12px 0.75rem 8px; } .side-panel__profile-identity { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: inherit; } .side-panel__profile-identity:hover .side-panel__profile-title { color: var(--hodl-accent); } .side-panel__profile-title { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; color: var(--ct-emphasis-color, var(--hodl-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__profile-avatar--head { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--hodl-border); } .side-panel__hero--profile { padding: 0.5rem 0.75rem 8px; border-bottom: none; } .side-panel__profile-menu { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 4; } .side-panel__profile-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 24px; text-decoration: none; color: inherit; } .side-panel__profile-link:hover .side-panel__profile-name { color: var(--hodl-accent); } .side-panel__profile-avatar { width: 40px; height: 40px; border-radius: var(--hodl-radius-lg); object-fit: cover; flex-shrink: 0; border: 1px solid var(--hodl-border); } .side-panel__profile-text { min-width: 0; overflow: hidden; } .side-panel__profile-name { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ct-emphasis-color, var(--hodl-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__profile-handle { font-size: 0.75rem; color: var(--ct-secondary-color, var(--hodl-text-3)); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-panel__country { text-transform: uppercase; } .side-panel__profile-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); font-variant-numeric: tabular-nums; } .side-panel__item--task { grid-template-columns: 32px minmax(0, 1fr) var(--side-panel-figures-width, 8.5rem); grid-template-rows: auto auto; align-items: center; } .side-panel__item--task:hover { background: var(--hodl-surface-3); } .side-panel__item--task .side-panel__task-logo { grid-column: 1; grid-row: 1 / -1; align-self: center; } .side-panel__item--task .side-panel__logo-link { align-self: center; } .side-panel__task-title { grid-column: 2; grid-row: 1; display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ct-emphasis-color, var(--hodl-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .side-panel__task-title:hover { color: var(--hodl-accent, var(--hodl-accent)); } .side-panel__task-chips { grid-column: 3; grid-row: 1; justify-self: end; width: 100%; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px; } .side-panel__task-category { grid-column: 2; grid-row: 2; min-width: 0; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.88; } .side-panel__task-deadline { grid-column: 3; grid-row: 2; justify-self: end; width: 100%; text-align: right; font-size: 11px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; opacity: 0.88; } .side-panel__task-deadline--empty { min-height: 0; padding: 0; } .side-panel__task-deadline i { font-size: 12px; opacity: 0.85; vertical-align: -0.05em; } .side-panel__task-chips .note-card__chip { font-size: 11px; padding: 0.05rem 4px; line-height: 1.2; white-space: nowrap; border-radius: var(--hodl-radius-xs); font-weight: 600; } .side-panel__task-chips .note-card__chip--primary { background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); } .side-panel__task-chips .note-card__chip--success { background: var(--hodl-up-soft); color: var(--hodl-up-text); } .side-panel__task-chips .note-card__chip--danger { background: var(--hodl-down-soft); color: var(--hodl-down-text); } .side-panel__task-chips .note-card__chip--warning { background: var(--hodl-warn-soft); color: var(--hodl-warn-text); } .side-panel__task-chips .note-card__chip--info { background: var(--hodl-info-soft); color: var(--hodl-info-text); } .side-panel__task-chips .note-card__chip--muted { background: var(--hodl-surface-3); color: var(--ct-secondary-color, var(--hodl-text-3)); } .side-panel__item--task { padding-top: 6px; padding-bottom: 6px; } [data-bs-theme=dark] .side-panel__sort-btn { background: transparent; border-color: var(--ct-border-color); color: var(--ct-emphasis-color); } [data-bs-theme=dark] .side-panel__dropdown { background: var(--ct-tertiary-bg); border-color: var(--ct-border-color); } [data-bs-theme=dark] .side-panel__dropdown .dropdown-item { color: var(--ct-emphasis-color); } /* Feed pages (/ , /my_page/, /my//): keep 3 columns aligned on desktop */ @media (min-width: 992px) { #feed-layout-row > #left-panel, #feed-layout-row > #middle-panel, #feed-layout-row > #right-panel { align-self: flex-start; } #feed-layout-row > #right-panel, #feed-layout-row > #left-panel { position: sticky; top: calc(var(--hodl-topbar-height, var(--ct-topbar-height, 70px)) + 0.75rem); overflow: visible; } #notes-feed { min-width: 0; } } /* ── Coin info panel (/my//) ─────────────────────────────────────── */ .coin-info.side-panel__section { padding-bottom: 0; } /* ── Coin info header ───────────────────────────────────────────────────── */ .coin-info__header { padding: 12px 0.75rem 6px; display: flex; flex-direction: column; gap: 4px; } /* Top row: logo · symbol · rank · [badge strip→right] */ .coin-info__top-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .coin-info__logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--hodl-border); } .coin-info__symbol { font-size: 1.0rem; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); letter-spacing: 0.03em; white-space: nowrap; flex-shrink: 0; } .coin-info__rank { font-size: 11px; font-weight: 600; padding: 0.05rem 6px; border-radius: var(--hodl-radius-xs); background: var(--hodl-accent-muted); color: var(--hodl-accent-text); white-space: nowrap; flex-shrink: 0; } /* Badge strip — all icons pushed to the right, uniform size */ .coin-info__badge-strip { margin-left: auto; display: flex; align-items: center; gap: 0.05rem; flex-shrink: 0; } /* Universal badge button — controls size for ALL icons */ .ci-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--hodl-radius-xs); cursor: pointer; text-decoration: none; transition: background 0.12s; font-size: 0; flex-shrink: 0; } /* !important overrides the inline font-size: 18px that JS sets after label clicks */ .ci-badge i, .ci-badge i[style] { font-size: 1rem !important; line-height: 1 !important; display: block !important; width: 1rem !important; height: 1rem !important; } .ci-badge:hover { background: var(--hodl-surface-3); } /* Labels sub-strip */ .coin-info__label-strip { display: inline-flex; gap: 0; } /* Full coin name — always visible, wraps if needed */ .coin-info__full-name { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); font-weight: 400; line-height: 1.3; padding-left: 0.05rem; } /* Stars row */ .coin-info__stars { display: inline-flex; gap: 0.05rem; font-size: 0; } .coin-info__stars .star { font-size: 14px; color: var(--hodl-text-2); cursor: pointer; line-height: 1; transition: color 0.1s; } .coin-info__stars .ri-star-fill { color: var(--hodl-warn-text); } /* --- Price block --- */ .coin-info__price-block { padding: 6px 0.75rem 0.5rem; border-top: 1px solid var(--hodl-border-subtle); } /* Price + chips on one row */ .coin-info__price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .coin-info__price { font-size: 18px; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); line-height: 1.2; white-space: nowrap; } .coin-info__changes { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; } .coin-info__mc { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); display: flex; align-items: center; gap: 6px; } .coin-info__mc strong { color: var(--ct-emphasis-color, var(--hodl-text)); } /* --- Links row --- */ .coin-info__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 6px 0.75rem 0.5rem; border-top: 1px solid var(--hodl-border-subtle); } .coin-info__link-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--hodl-radius-md); background: var(--hodl-surface-3); text-decoration: none; transition: background 0.12s; } .coin-info__link-btn:hover { background: var(--hodl-surface-3); } .coin-info__link-btn img { border-radius: var(--hodl-radius-xs); } .coin-info__link-btn--text { width: auto; padding: 0 0.5rem; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); gap: 4px; } .coin-info__link-btn--text:hover { color: var(--hodl-accent); } /* --- Actions --- */ .coin-info__actions { display: flex; gap: 0.5rem; padding: 6px 0.75rem 12px; border-top: 1px solid var(--hodl-border-subtle); } .coin-info__action-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 0.5rem; border-radius: var(--hodl-radius-md); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--hodl-border); color: var(--ct-emphasis-color, var(--hodl-text)); background: transparent; transition: background 0.12s, border-color 0.12s; } .coin-info__action-btn:hover { background: var(--hodl-surface-3); border-color: var(--hodl-border); color: var(--ct-emphasis-color, var(--hodl-text)); } .coin-info__action-btn--primary { border-color: var(--hodl-accent); color: var(--hodl-accent-text); } .coin-info__action-btn--primary:hover { background: var(--hodl-accent-muted); color: var(--hodl-accent-text); } /* --- My status --- */ .coin-info__status-body { padding: 0.5rem 0.75rem 12px; } .coin-info__desc { width: 100%; min-height: 2.4rem; background: var(--coin-info-field-bg, var(--hodl-surface)); border: 1px solid var(--coin-info-field-border, var(--hodl-border)); border-radius: var(--hodl-radius-md); color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 13px; line-height: 1.45; padding: 6px 0.5rem; resize: none; overflow: hidden; margin-bottom: 8px; } .coin-info__desc:focus { outline: none; border-color: var(--hodl-accent); } .coin-info__selects { display: flex; flex-direction: column; gap: 4px; } .coin-info__select-group { display: flex; align-items: center; gap: 8px; } .coin-info__select-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; min-width: 4.5rem; margin: 0; } /* --- Select --- */ .coin-info__select { flex: 1; min-width: 0; background: var(--coin-info-field-bg, var(--hodl-surface)); border: 1px solid var(--coin-info-field-border, var(--hodl-border)); border-radius: var(--hodl-radius-sm); color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 12px; padding: 0.25rem 6px; color-scheme: light; } [data-bs-theme=dark] .coin-info__select { color-scheme: dark; } .coin-info__select:focus { outline: none; border-color: var(--hodl-accent); } /* --- Price levels table --- */ .coin-info__levels-table { padding: 6px 0.75rem 12px; display: flex; flex-direction: column; gap: 8px; } .coin-info__lt-group { display: flex; flex-direction: column; gap: 0; border-radius: var(--hodl-radius-md); overflow: hidden; border: 1px solid var(--hodl-border-subtle); } /* Section header row */ .coin-info__lt-header { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; background: var(--hodl-surface-3); } .coin-info__lt-header--buy { color: var(--hodl-up-text); } .coin-info__lt-header--tp { color: var(--hodl-accent); } .coin-info__lt-header--sl { color: var(--hodl-down-text); } /* Data rows */ .coin-info__lt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 8px; font-size: 13px; border-top: 1px solid var(--hodl-border-subtle); } .coin-info__lt-row:first-of-type { border-top: none; } .coin-info__lt-price { color: var(--ct-emphasis-color, var(--hodl-text)); font-weight: 600; } .coin-info__lt-pct { font-size: 12px; font-weight: 600; } .coin-info__levels-desc { font-size: 0.75rem; color: var(--ct-secondary-color, var(--hodl-text-3)); margin: 4px 0 0; white-space: pre-wrap; line-height: 1.45; } /* ── coin_view specific ─────────────────────────────────────────────────── */ /* Categories tags */ .cv-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0.75rem 8px; } .cv-tag { font-size: 11px; font-weight: 600; padding: 2px 0.5rem; border-radius: var(--hodl-radius-lg); background: var(--hodl-accent-muted); color: var(--hodl-accent-text); border: 1px solid var(--hodl-accent-muted); white-space: nowrap; } /* Supply & Market metrics */ .cv-metrics { padding: 6px 0.75rem 8px; } .cv-metric-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0 0.5rem; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--hodl-border-subtle); font-size: 12px; } .cv-metric-row:last-child { border-bottom: none; } .cv-metric-row--total { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--hodl-border-subtle); } .cv-metric-label { color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; } .cv-metric-value { text-align: right; color: var(--ct-emphasis-color, var(--hodl-text)); font-weight: 600; font-size: 0.75rem; } .cv-metric-pts { text-align: right; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; min-width: 2rem; } /* Research list */ .cv-research-list { padding: 4px 0.75rem 8px; display: flex; flex-direction: column; gap: 0; } .cv-research-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hodl-border-subtle); } .cv-research-item:last-child { border-bottom: none; } .cv-research-icon img { width: 28px; height: 28px; border-radius: var(--hodl-radius-sm); object-fit: contain; flex-shrink: 0; } .cv-research-body { min-width: 0; flex: 1; } .cv-research-title { display: block; font-size: 12px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); text-decoration: none; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cv-research-title:hover { color: var(--hodl-accent); } /* ── cv-scores-grid (analysis scores table) ── */ .cv-scores-grid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0; font-size: 13px; } .cv-score-row { display: contents; } .cv-score-row > span { padding: 4px 8px; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); white-space: nowrap; } .cv-score-row > .cv-score-name { text-align: left; color: var(--ct-body-color, var(--hodl-text-2)); white-space: normal; } .cv-score-row--total > span { font-weight: 700; background: var(--hodl-surface); border-bottom: none; } .cv-score-basic { color: var(--hodl-up-text); text-align: right; } .cv-score-rf { color: var(--hodl-down-text); text-align: right; } .cv-score-total { text-align: right; font-weight: 600; } .cv-score-total--pos { color: var(--hodl-up-text); } .cv-score-total--neg { color: var(--hodl-down-text); } /* ── cv-accordion ── */ .cv-accordion { border: none; } .cv-accordion-item { background: var(--ct-card-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); border-radius: var(--hodl-radius-md) !important; margin-bottom: .5rem; overflow: hidden; } .cv-acc-btn { background: var(--ct-card-bg, var(--hodl-surface-3)) !important; color: var(--ct-body-color, var(--hodl-text-2)) !important; padding: 8px 16px; box-shadow: none !important; border: none !important; display: flex; align-items: center; gap: .5rem; } .cv-acc-btn:not(.collapsed) { background: var(--hodl-surface) !important; } .cv-acc-title { flex: 1; font-size: 14px; font-weight: 600; } .cv-acc-score { font-size: 14px; font-weight: 700; margin-right: 4px; } .cv-acc-body { padding: 12px 16px 16px; background: var(--hodl-surface-3); } .cv-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .25rem .75rem; margin-bottom: 8px; font-size: 12px; color: var(--ct-body-color, var(--hodl-text-2)); } .cv-mini-grid strong { color: var(--ct-emphasis-color, var(--hodl-text)); } .cv-mini-sub { font-size: 11px; color: var(--ct-body-color, var(--hodl-text-2)); opacity: .75; } .cv-acc-text { margin-top: .5rem; font-size: 13px; line-height: 1.6; border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); padding-top: .5rem; } /* ── Right panel redesign ── */ .cv-total-score { padding: 6px 12px 12px; display: flex; align-items: center; gap: .75rem; } .cv-total-number { font-size: 2rem; font-weight: 700; line-height: 1; } .cv-total-sub { display: flex; flex-direction: column; gap: .1rem; font-size: 12px; color: var(--ct-body-color, var(--hodl-text-2)); } .cv-metrics { padding: 0 12px .5rem; } .cv-metric-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); font-size: 13px; gap: .5rem; } .cv-metric-row:last-child { border-bottom: none; } .cv-metric-label { color: var(--ct-body-color, var(--hodl-text-2)); } .cv-metric-value { font-weight: 600; } .cv-metric-row--total .cv-metric-label, .cv-metric-row--total .cv-metric-value { font-weight: 700; } /* ── cv-research-meta ── (original below) */ .cv-research-meta { display: flex; flex-wrap: wrap; gap: 4px 0.5rem; margin-top: 4px; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .cv-research-stars { margin-top: 0.1rem; display: flex; gap: 0.05rem; } /* ── My Table page (/my_table/) ─────────────────────────────────────────── */ .my-table-page { max-width: 100%; padding-bottom: 1.5rem; } .my-table-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .my-table-page__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); letter-spacing: -0.02em; } .my-table-page__subtitle { margin: 0.25rem 0 0; font-size: 14px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .my-table-page__ai-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 16px; border-radius: var(--hodl-radius-lg); font-size: 13px; font-weight: 600; color: var(--hodl-accent); background: var(--hodl-accent-muted); border: 1px solid var(--hodl-accent-muted); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .my-table-page__ai-btn:hover { color: var(--hodl-text-on-accent); background: var(--hodl-accent); border-color: var(--hodl-accent); } .my-table-page__ai-btn i { font-size: 18px; } /* Toolbar */ .my-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 0.75rem; border-radius: var(--hodl-radius-lg); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: var(--ct-secondary-bg, var(--hodl-surface-3)); } .my-table-toolbar__filters { flex: 1 1 auto; min-width: 0; } .my-table-filter-pills { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--hodl-radius-pill); background: var(--ct-tertiary-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); overflow-x: auto; scrollbar-width: none; max-width: 100%; } .my-table-filter-pills::-webkit-scrollbar { display: none; } .my-table-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); border-radius: var(--hodl-radius-pill); border: 1px solid transparent; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; white-space: nowrap; user-select: none; } .my-table-filter-pill__input { position: absolute; opacity: 0; pointer-events: none; } .my-table-filter-pill i { font-size: 16px; opacity: 0.9; } .my-table-filter-pill:hover { color: var(--ct-emphasis-color, var(--hodl-text)); background: var(--hodl-accent-muted); } .my-table-filter-pill.is-active { color: var(--hodl-text-on-accent); background: var(--hodl-accent); border-color: var(--hodl-accent); box-shadow: 0 1px 4px rgba(114, 124, 245, 0.4); } .my-table-filter-pill.is-active i { opacity: 1; } .my-table-toolbar__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .my-table-search__wrap { position: relative; display: flex; align-items: center; min-width: 180px; } .my-table-search__icon { position: absolute; left: 0.65rem; font-size: 1rem; color: var(--ct-secondary-color, var(--hodl-text-3)); pointer-events: none; } .my-table-search__input { width: 100%; height: 36px; padding: 0 2rem 0 2.1rem; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); transition: border-color 0.15s, box-shadow 0.15s; } .my-table-search__input:focus { outline: none; border-color: var(--hodl-accent); box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.15); } .my-table-search__clear { position: absolute; right: 0.35rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); cursor: pointer; } .my-table-search__clear:hover { color: var(--hodl-accent); background: var(--hodl-accent-muted); } .my-table-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-lg); background: var(--ct-body-bg, var(--hodl-surface-3)); color: var(--ct-secondary-color, var(--hodl-text-3)); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .my-table-icon-btn:hover { color: var(--hodl-accent); border-color: var(--hodl-accent); background: var(--hodl-accent-muted); } .my-table-icon-btn i { font-size: 18px; } .my-table-compare { display: flex; align-items: center; gap: 6px; } .my-table-compare__label { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; } .my-table-compare__input { width: 8.5rem; height: 36px; padding: 0 12px; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); } .my-table-compare__input:focus { outline: none; border-color: var(--hodl-accent); box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.15); } .my-table-compare__dropdown { border-radius: var(--hodl-radius-lg); border-color: var(--ct-border-color, var(--hodl-border)) !important; background: var(--ct-body-bg, var(--hodl-surface-3)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } /* Compare banner */ .my-table-page .compare-title-box, .my-table-compare-banner { background: var(--hodl-accent-muted); border: 1px solid var(--hodl-accent-muted); border-radius: var(--hodl-radius-lg); padding: 12px 1rem; margin-bottom: 12px; box-shadow: none; } .my-table-compare-banner__user { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .my-table-compare-banner__names { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .my-table-page .icon-compare, .my-table-page .text-compare { color: var(--hodl-accent); } .my-table-page .name-compare { color: var(--ct-emphasis-color, var(--hodl-text)); } .my-table-page .username-compare { color: var(--ct-secondary-color, var(--hodl-text-3)); } .my-table-page .avatar-compare { border-color: var(--hodl-accent); } /* Settings modal */ .my-table-settings { width: min(92vw, 640px); max-width: 640px; background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); padding: 0; overflow: hidden; } .my-table-settings__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 16px; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border)); } .my-table-settings__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); } .my-table-settings__close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: var(--hodl-radius-md); background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); cursor: pointer; } .my-table-settings__close:hover { background: var(--hodl-surface-3); color: var(--ct-emphasis-color, var(--hodl-text)); } .my-table-settings__grid { padding: 1rem 16px 16px; gap: 1rem; } .my-table-settings__category h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ct-secondary-color, var(--hodl-text-3)); border-bottom: 1px solid var(--ct-border-color, var(--hodl-border)); padding-bottom: 6px; margin-bottom: 0.5rem; } .my-table-settings__option { display: flex; align-items: center; gap: 0.5rem; padding: 6px 0; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); cursor: pointer; } .my-table-settings__option input { accent-color: #727cf5; } .my-table-settings__save { margin-top: 0.5rem; background: var(--hodl-accent); border-radius: var(--hodl-radius-lg); font-weight: 600; color: var(--hodl-text-on-accent); } .my-table-settings__save:hover { background: var(--hodl-accent); color: var(--hodl-text-on-accent); } .my-table-settings__save.is-saving { opacity: 0.75; } .my-table-settings__save.is-saved { background: var(--hodl-up); color: var(--hodl-text-on-up); } .my-table-settings__save.is-error { background: var(--hodl-down); color: var(--hodl-text-on-down); } /* Table card */ .my-table-card { border-radius: var(--hodl-radius-lg); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: var(--ct-secondary-bg, var(--hodl-surface-3)); overflow: hidden; } .my-table-feed { transition: opacity 0.2s ease; } .my-table-feed.is-loading { opacity: 0.55; pointer-events: none; } .my-table-feed-error { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.75rem 12px 0; padding: 12px 12px; border-radius: var(--hodl-radius-lg); border: 1px solid var(--hodl-down); background: var(--hodl-down-soft); color: var(--ct-body-color, var(--hodl-text)); font-size: 0.875rem; } .my-table-feed-error__text { flex: 1 1 12rem; } .my-table-feed-error__retry, .my-table-feed-error__dismiss { flex: 0 0 auto; } .my-table-feed-error__dismiss { border: none; background: transparent; color: inherit; font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0.7; } .my-table-feed-error__dismiss:hover { opacity: 1; } .my-table-page .label-select.is-saving, .coin-info .label-select.is-saving, .ci-badge.label-select.is-saving { opacity: 0.55; pointer-events: none; } .my-table-page .label-select.is-error, .coin-info .label-select.is-error, .ci-badge.label-select.is-error { box-shadow: 0 0 0 1px rgba(250, 92, 124, 0.65); border-radius: var(--hodl-radius-xs); cursor: pointer; } .my-table-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 12px 12px; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .my-table-meta--bottom { border-bottom: none; border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); justify-content: flex-end; } .my-table-meta__left { display: flex; align-items: center; gap: 0.5rem; } .my-table-meta__label { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); } .my-table-meta__select { height: 30px; padding: 0 24px 0 8px; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); background-color: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); cursor: pointer; } .my-table-meta__count { font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } /* Dwa natywne paski poziome (góra + dół) — tylko gdy .has-h-scroll */ .my-table-scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .my-table-scroll-x[hidden] { display: none !important; } .my-table-scroll-x--top { border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .my-table-scroll-x--bottom { border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .my-table-scroll-x__spacer { height: 1px; pointer-events: none; } /* Tabela przewija się w poziomie, ale bez własnego paska — są góra i dół */ .my-table-card.has-h-scroll .my-table-wrap { scrollbar-width: none; } .my-table-card.has-h-scroll .my-table-wrap::-webkit-scrollbar { display: none; height: 0; } .my-table-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; color: var(--ct-secondary-color, var(--hodl-text-3)); text-align: center; } .my-table-empty i { font-size: 2rem; opacity: 0.5; } .my-table-empty p { margin: 0; font-size: 14px; } .my-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .my-table-wrap::before, .my-table-wrap::after { content: ""; position: sticky; top: 0; display: block; width: 0; height: 0; pointer-events: none; z-index: 4; } .my-table-wrap.can-scroll-left::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, var(--ct-secondary-bg, #fff) 0%, transparent 100%); pointer-events: none; z-index: 4; } .my-table-wrap.can-scroll-right::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(270deg, var(--ct-secondary-bg, #fff) 0%, transparent 100%); pointer-events: none; z-index: 4; } /* Data table — pełna szerokość, bez responsive collapse */ .my-table-page .my-table-datatable { margin: 0; font-size: 13px; border-collapse: separate; border-spacing: 0; width: max-content !important; min-width: 100%; table-layout: auto; } /* Ukryj kontrolkę rozwijania DataTables Responsive (gdyby się włączyła) */ .my-table-page .dtr-control, .my-table-page td.dtr-control, .my-table-page th.dtr-control { display: none !important; width: 0 !important; padding: 0 !important; border: none !important; } /* Sticky: rank + coin zawsze widoczne przy scrollu w poziomie */ .my-table-page .my-table-datatable { --mt-rank-sticky-w: 2.75rem; --mt-coin-sticky-w: 11.5rem; } .my-table-page .my-table-datatable thead th.rank-column, .my-table-page .my-table-datatable tbody td.rank-column { position: sticky; left: 0; z-index: 4; width: var(--mt-rank-sticky-w); min-width: var(--mt-rank-sticky-w); max-width: var(--mt-rank-sticky-w); background: var(--ct-secondary-bg, var(--hodl-surface)) !important; border-right: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .my-table-page .my-table-datatable thead th.rank-column { z-index: 12; background: var(--ct-tertiary-bg, var(--hodl-bg)) !important; } .my-table-page .my-table-datatable tbody td.coin-column { position: sticky; left: 0; z-index: 5; width: var(--mt-coin-sticky-w); min-width: var(--mt-coin-sticky-w); max-width: var(--mt-coin-sticky-w); background: var(--ct-secondary-bg, var(--hodl-surface)) !important; border-right: 1px solid var(--ct-border-color, var(--hodl-border)); box-shadow: 4px 0 10px rgba(0, 0, 0, 0.06); overflow: hidden; isolation: isolate; } .my-table-page .my-table-datatable thead th.coin-column { position: sticky; left: 0; z-index: 14; width: var(--mt-coin-sticky-w); min-width: var(--mt-coin-sticky-w); max-width: var(--mt-coin-sticky-w); background: var(--ct-tertiary-bg, var(--hodl-bg)) !important; border-right: 1px solid var(--ct-border-color, var(--hodl-border)); box-shadow: 4px 0 10px rgba(0, 0, 0, 0.06); } .my-table-page .my-table-datatable[data-has-rank="1"] tbody td.coin-column { left: var(--mt-rank-sticky-w); } .my-table-page .my-table-datatable[data-has-rank="1"] thead th.coin-column { left: var(--mt-rank-sticky-w); z-index: 15; } .my-table-page .my-table-datatable tbody tr:hover td.rank-column, .my-table-page .my-table-datatable tbody tr:hover td.coin-column { background: var(--ct-tertiary-bg, var(--hodl-bg)) !important; } /* Min-width kolumn — coin bez osobnego max w gridzie */ .my-table-page .my-table-datatable .rank-column { min-width: var(--mt-rank-sticky-w); } .my-table-page .my-table-datatable .coin-column { min-width: var(--mt-coin-sticky-w); max-width: var(--mt-coin-sticky-w); } .my-table-page .my-table-datatable .user-status-rating-column, .my-table-page .my-table-datatable .user-status-rating-cell { min-width: 6.5rem; } .my-table-page .my-table-datatable .price-column, .my-table-page .my-table-datatable .price-column_change_24h, .my-table-page .my-table-datatable .price-column_change_7d, .my-table-page .my-table-datatable .price-column_change_30d { min-width: 4.5rem; } .my-table-page .my-table-datatable .mkt-cap-column, .my-table-page .my-table-datatable .fully_diluted_valuation-column, .my-table-page .my-table-datatable .mkt_cap_divide_fdv-column { min-width: 5.5rem; } .my-table-page .my-table-datatable .user-status-shopping-column, .my-table-page .my-table-datatable .user-status-shopping-cell, .my-table-page .my-table-datatable .user-status-position-column, .my-table-page .my-table-datatable .user-status-position-cell, .my-table-page .my-table-datatable .user-status-chart-column, .my-table-page .my-table-datatable .user-status-chart-cell { min-width: 8.5rem; } .my-table-page .my-table-datatable .user-status-short-description, .my-table-page .my-table-datatable .user-status-note-cell { min-width: 9rem; } .my-table-page .my-table-datatable .hold-column { min-width: 9.5rem; } .my-table-page .my-table-datatable .pnl-column { min-width: 5.5rem; } /* Fallback: gdyby child row się pojawił — ładna siatka zamiast pionowej listy */ .my-table-page table.dtr-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 1rem; width: 100%; margin: 0.5rem 0 0; padding: 12px 12px; border-radius: var(--hodl-radius-lg); background: var(--hodl-accent-muted); border: 1px solid var(--hodl-accent-muted); list-style: none; } .my-table-page table.dtr-details tr { display: contents; } .my-table-page table.dtr-details td { display: block; padding: 2px 0 !important; border: none !important; font-size: 12px; } .my-table-page table.dtr-details td:first-child { font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .my-table-page tr.child td { padding: 6px 12px 12px !important; background: transparent !important; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)) !important; } .my-table-page tr.child ul.dtr-details > li { display: grid; grid-template-columns: minmax(5rem, 7rem) 1fr; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } .my-table-page tr.child ul.dtr-details > li:last-child { border-bottom: none; } .my-table-page tr.child .dtr-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-secondary-color, var(--hodl-text-3)); } .my-table-page tr.child .dtr-data { font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); } .my-table-page .my-table-datatable thead th { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ct-secondary-color, var(--hodl-text-3)); background: var(--ct-tertiary-bg, var(--hodl-bg)) !important; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border)); white-space: nowrap; vertical-align: middle; } .my-table-page .my-table-datatable thead th a { color: inherit; text-decoration: none; } .my-table-page .my-table-datatable thead th a:hover { color: var(--hodl-accent); } .my-table-page .my-table-datatable tbody td { padding: 0.5rem 12px; vertical-align: middle; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); background: var(--ct-secondary-bg, var(--hodl-surface)); } .my-table-page .my-table-datatable tbody tr { transition: background 0.12s ease; } .my-table-page .my-table-datatable tbody tr:hover td { background: var(--hodl-accent-muted); } [data-bs-theme=dark] .my-table-page .my-table-datatable tbody td.coin-column, [data-bs-theme=dark] .my-table-page .my-table-datatable thead th.coin-column { box-shadow: 6px 0 14px rgba(0, 0, 0, 0.22); } .my-table-page .my-table-datatable tbody tr:last-child td { border-bottom: none; } /* Coin cell */ .my-table-coin { display: flex; align-items: flex-start; gap: 6px; width: 100%; max-width: 100%; overflow: hidden; } .my-table-coin__verdict { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; margin-top: 0.1rem; text-decoration: none; } .my-table-coin__verdict i { font-size: 16px; } .my-table-coin__logo { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .my-table-coin__body { min-width: 0; flex: 1; overflow: hidden; } .my-table-coin__symbol { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ct-emphasis-color, var(--hodl-text)); text-decoration: none; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .my-table-coin__symbol:hover { color: var(--hodl-accent); } .my-table-coin__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 0.12rem; min-width: 0; } .my-table-coin__actions { display: inline-flex; align-items: center; gap: 0.1rem; flex-shrink: 0; } .my-table-coin__label, .my-table-coin__hot { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; line-height: 1; } .my-table-coin__label i, .my-table-coin__hot i { font-size: 14px; } .my-table-coin__name { font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* Cell controls */ .my-table-page .mt-cell-select { min-width: 7rem; max-width: 10rem; width: 100%; height: 30px; padding: 0 24px 0 0.5rem; font-size: 12px; color: var(--ct-body-color, var(--hodl-text-2)); background-color: var(--ct-body-bg, var(--hodl-surface-2)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); cursor: pointer; transition: border-color 0.15s; } .my-table-page .mt-cell-select:hover, .my-table-page .mt-cell-select:focus { border-color: var(--hodl-accent); outline: none; } .my-table-page .mt-note-input { min-width: 6rem; max-width: 14rem; width: 100%; min-height: 30px; padding: 6px 0.5rem; font-size: 12px; color: var(--ct-body-color, var(--hodl-text-2)); background: var(--ct-body-bg, var(--hodl-surface-2)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); resize: none; transition: border-color 0.15s; } .my-table-page .mt-note-input:focus { border-color: var(--hodl-accent); outline: none; box-shadow: 0 0 0 2px rgba(114, 124, 245, 0.12); } .my-table-chart-btn, .my-table-hold-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--hodl-radius-md); color: var(--hodl-up-text); background: var(--hodl-up-soft); border: 1px solid var(--hodl-up); text-decoration: none; transition: background 0.15s, color 0.15s; } .my-table-hold-btn { color: var(--hodl-accent); background: var(--hodl-accent-muted); border-color: var(--hodl-accent-muted); } .my-table-chart-btn:hover { background: var(--hodl-up-soft); color: var(--hodl-up-text); } .my-table-hold-btn:hover { background: var(--hodl-accent-muted); color: var(--hodl-accent); } /* Stars, price, hold — refinements inside page */ .my-table-page .star-rating .star { font-size: 16px; } .my-table-page .rank-column { font-size: 12px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); text-align: center; } .my-table-page .price-column, .my-table-page .price-column_change_24h, .my-table-page .price-column_change_7d, .my-table-page .price-column_change_30d, .my-table-page .mkt-cap-column, .my-table-page .fully_diluted_valuation-column, .my-table-page .mkt_cap_divide_fdv-column, .my-table-page .pnl-column { font-variant-numeric: tabular-nums; font-size: 13px; } .my-table-page .hold-details span[style] { background: var(--hodl-accent-muted) !important; color: var(--hodl-accent) !important; border-radius: var(--hodl-radius-sm) !important; font-size: 12px; } .my-table-page .privacy-icon-table { opacity: 0.55; } .my-table-page .privacy-icon-table:hover { opacity: 1; color: var(--hodl-accent); } /* Pagination */ .my-table-page .pagination .page-link { border-radius: var(--hodl-radius-md) !important; margin: 0 0.1rem; font-size: 13px; color: var(--ct-body-color, var(--hodl-text-2)); background: var(--ct-body-bg, var(--hodl-surface-3)); border-color: var(--ct-border-color, var(--hodl-border)); } .my-table-page .pagination .page-item.active .page-link { background: var(--hodl-accent); border-color: var(--hodl-accent); color: var(--hodl-text-on-accent); } .my-table-page .pagination .page-link:hover { background: var(--hodl-accent-muted); border-color: var(--hodl-accent); color: var(--hodl-accent); } @media (max-width: 991.98px) { .my-table-toolbar { flex-direction: column; align-items: stretch; } .my-table-toolbar__actions { flex-wrap: wrap; } .my-table-search__wrap { flex: 1 1 100%; min-width: 0; } } @media (max-width: 575.98px) { .my-table-page__header { flex-direction: column; } .my-table-compare__label { display: none; } .my-table-compare__input { width: 6.5rem; } .my-table-page .my-table-datatable thead th.rank-column, .my-table-page .my-table-datatable tbody td.rank-column { display: none; } .my-table-page .my-table-wrap { scroll-padding-left: 9rem; } .my-table-page .my-table-datatable tbody td.coin-column, .my-table-page .my-table-datatable thead th.coin-column { position: sticky; left: 0; z-index: 3; background: var(--ct-body-bg, var(--hodl-surface-3)); box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12); } .my-table-page .my-table-datatable tbody td.user-status-rating-cell, .my-table-page .my-table-datatable thead th.user-status-rating-column { min-width: 6.5rem; } } .my-table-page td.hodl-cell-save--saving, .my-table-page td.hodl-cell-save--saved, .my-table-page td.hodl-cell-save--error { transition: box-shadow 0.2s ease, background-color 0.2s ease; } .my-table-page td.hodl-cell-save--saving { box-shadow: inset 0 0 0 1px rgba(114, 124, 245, 0.45); background-color: var(--hodl-accent-muted); } .my-table-page td.hodl-cell-save--saved { box-shadow: inset 0 0 0 1px rgba(10, 207, 151, 0.55); background-color: var(--hodl-up-soft); } .my-table-page td.hodl-cell-save--error { box-shadow: inset 0 0 0 1px rgba(250, 92, 124, 0.65); background-color: var(--hodl-down-soft); cursor: pointer; } .my-table-page td.hodl-cell-save--error[data-save-error]::after { content: 'Retry'; display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hodl-down-text); line-height: 1; } .hodl-action-feedback { position: fixed; inset: 0; z-index: 1090; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; pointer-events: none; } .hodl-action-feedback__toast { width: min(24rem, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px; border-radius: var(--hodl-radius-lg); background: var(--ct-body-bg, var(--hodl-surface)); border: 1px solid var(--hodl-down); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); pointer-events: auto; animation: hodlActionFeedbackIn 0.22s ease; } .hodl-action-feedback__toast--info { border-color: var(--hodl-info); } .hodl-action-feedback__toast--warning { border-color: var(--hodl-warn); } .hodl-action-feedback__toast.is-dismissed { opacity: 0; transform: scale(0.96); transition: opacity 0.2s ease, transform 0.2s ease; } .hodl-action-feedback__text { flex: 1; font-size: 0.875rem; line-height: 1.35; text-align: center; color: var(--ct-body-color, var(--hodl-text)); } .hodl-action-feedback__dismiss { border: 0; background: transparent; color: inherit; opacity: 0.65; font-size: 18px; line-height: 1; padding: 0 0 0 4px; cursor: pointer; } .hodl-action-feedback__dismiss:hover { opacity: 1; } @keyframes hodlActionFeedbackIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } body.hodl-remote-modal--loading { cursor: progress; } body.hodl-remote-modal--loading .modal-backdrop { cursor: progress; } /* Paleta (kolory i kształty) mieszka teraz w assets/css/hodl-tokens.css — ładowanym przed tym plikiem w parent.html i w auth_base.html. Generuje ją Studio kolorów. */ /* ── App chrome: topbar + icon rail ───────────────────────────────────────── */ :root { --hodl-rail-width: var(--ct-leftbar-width-sm, 70px); --hodl-topbar-height: 60px; --ct-topbar-height: 60px; --hodl-rail-logo-height: 38px; --hodl-topbar-brand-height: calc(var(--hodl-topbar-height) - 0.5rem); --hodl-rail-surface: var(--hodl-rail-bg, #fafbfe); } html[data-bs-theme=dark] { --hodl-rail-surface: var(--hodl-rail-bg, #313a46); } html[data-sidenav-size=default]:not([data-layout=topnav]) { --hodl-rail-width: var(--ct-leftbar-width, 260px); } html[data-sidenav-size=condensed]:not([data-layout=topnav]) { --hodl-rail-width: var(--ct-leftbar-width-sm, 70px); } /* Topbar — fixed, chowa się przy scrollu w dół */ .hodl-topbar.navbar-custom { position: fixed; top: 0; left: var(--hodl-rail-width); right: 0; margin-left: 0 !important; z-index: 1050; min-height: var(--hodl-topbar-height); border-bottom: 1px solid var(--ct-border-color, var(--hodl-border)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, left 0.25s ease-in-out; } [data-bs-theme=dark] .hodl-topbar.navbar-custom, html[data-bs-theme=dark] .hodl-topbar.navbar-custom { background: var(--hodl-topbar-bg, var(--hodl-surface-3)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); } html:not([data-bs-theme=dark]) .hodl-topbar.navbar-custom { background: var(--hodl-topbar-bg, var(--hodl-surface)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hodl-topbar.navbar-custom.hodl-topbar--hidden { transform: translateY(-100%); box-shadow: none; pointer-events: none; } .hodl-topbar .topbar { position: relative; min-height: var(--hodl-topbar-height); } /* Wyśrodkowany wordmark (obrazek) — chowa się z topbarem */ .hodl-topbar-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; max-width: min(55vw, 20rem); max-height: calc(var(--hodl-topbar-height) - 0.35rem); padding: 0 6px; text-decoration: none; pointer-events: auto; opacity: 0.94; transition: opacity 0.2s ease, transform 0.2s ease; } .hodl-topbar-brand:hover { opacity: 1; } .hodl-topbar-brand__img { display: block; width: auto; height: var(--hodl-topbar-brand-height); max-width: 100%; object-fit: contain; object-position: center; } .hodl-topbar-brand__img--light { display: none; } .hodl-topbar-brand__img--dark { display: none; } .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--light { display: block; } .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--dark { display: none; } html[data-bs-theme=dark] .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--light, [data-bs-theme=dark] .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--light { display: none; } html[data-bs-theme=dark] .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--dark, [data-bs-theme=dark] .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__img--dark { display: block; } /* Fallback tekstowy — ukryty po dodaniu plików wordmark (.hodl-topbar-brand--has-wordmark) */ .hodl-topbar-brand__word { display: block; font-family: "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; background: linear-gradient(105deg, var(--ct-emphasis-color, #313a46) 10%, var(--hodl-accent, #727cf5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hodl-topbar-brand--has-wordmark .hodl-topbar-brand__fallback { display: none !important; } @media (min-width: 992px) and (max-width: 1199.98px) { .hodl-topbar-brand { max-width: min(44vw, 14rem); } } @media (min-width: 1200px) { :root { --hodl-topbar-brand-height: calc(var(--hodl-topbar-height) - 0.35rem); } .hodl-topbar-brand { max-width: min(52vw, 22rem); } .hodl-topbar-brand:not(.hodl-topbar-brand--has-wordmark) .hodl-topbar-brand__fallback { font-size: 18px; } } @media (min-width: 1400px) { :root { --hodl-topbar-brand-height: calc(var(--hodl-topbar-height) - 0.25rem); } .hodl-topbar-brand { max-width: min(50vw, 24rem); } .hodl-topbar-brand:not(.hodl-topbar-brand--has-wordmark) .hodl-topbar-brand__fallback { font-size: 24px; } } @media (max-width: 991.98px) { .hodl-topbar-brand { display: none; } } /* Na węższym desktopie schowaj wordmark przy focusie w searchu */ @media (min-width: 992px) and (max-width: 1399.98px) { .hodl-topbar .topbar:focus-within .hodl-topbar-brand { opacity: 0; pointer-events: none; transform: translate(-50%, calc(-50% - 4px)); } } .hodl-topbar .hodl-sidebar-toggle, .hodl-topbar .hodl-topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-lg); background: transparent; color: var(--hodl-topbar-text, var(--ct-topbar-item-color, var(--hodl-text-3))); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .hodl-topbar .hodl-sidebar-toggle:hover, .hodl-topbar .hodl-topbar-icon-btn:hover, .hodl-topbar .hodl-topbar-icon-btn:focus-visible { background: var(--hodl-accent-muted, var(--hodl-accent-muted)); border-color: color-mix(in srgb, var(--hodl-accent, #2563eb) 30%, transparent); color: var(--hodl-accent, var(--ct-topbar-item-hover-color, var(--hodl-accent))); outline: none; } .hodl-topbar .hodl-sidebar-toggle i, .hodl-topbar .hodl-topbar-icon-btn i { font-size: 18px; line-height: 1; } .hodl-topbar-menu > li { display: flex; align-items: center; } .hodl-topbar .topbar-menu .nav-link.hodl-topbar-icon-btn { height: 2rem; width: 2rem; min-height: 0; padding: 0; flex-shrink: 0; } .hodl-topbar-menu .dropdown-toggle::after { display: none; } /* User pill — jak profil w lewym panelu */ .hodl-topbar-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 8px 4px 6px; border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-pill); background: transparent; color: inherit; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .hodl-topbar-user:hover, .hodl-topbar-user:focus-visible { background: var(--hodl-accent-muted, var(--hodl-accent-muted)); border-color: var(--hodl-accent-muted); outline: none; } .hodl-topbar-user__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .hodl-topbar-user__meta { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; line-height: 1.2; } .hodl-topbar-user__name { font-size: 12px; font-weight: 600; color: var(--hodl-topbar-title, var(--ct-emphasis-color, var(--hodl-text))); white-space: nowrap; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; } .hodl-topbar-user__handle { font-size: 11px; color: var(--hodl-topbar-text, var(--ct-secondary-color, var(--hodl-text-3))); white-space: nowrap; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; } .hodl-topbar form { margin: 0; } .hodl-topbar .app-search { position: relative; overflow: visible; } .hodl-topbar .app-search .form-control { min-width: 10.5rem; border-radius: var(--hodl-radius-md); border: 1px solid var(--hodl-topbar-search-border, var(--hodl-border)); background: var(--hodl-topbar-search-bg, var(--hodl-surface-3)); color: var(--ct-emphasis-color, var(--hodl-text)); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .hodl-topbar .app-search .form-control:focus { border-color: var(--hodl-accent); box-shadow: 0 0 0 2px var(--hodl-accent-muted, rgba(114, 124, 245, 0.18)); outline: none; background: var(--hodl-topbar-search-bg, var(--hodl-surface-3)); } .hodl-topbar .app-search .search-icon { color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-topbar #search-dropdown.dropdown-menu { display: none; position: absolute; top: calc(100% + 0.35rem); left: 0; right: auto; min-width: min(22rem, calc(100vw - 2rem)); max-height: min(70vh, 24rem); overflow-y: auto; margin-top: 0; padding: 6px 0; border: 1px solid var(--hodl-topbar-search-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); background: var(--hodl-topbar-search-dropdown-bg, var(--hodl-surface-3)); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); z-index: 1070; isolation: isolate; } .hodl-topbar #search-dropdown.dropdown-menu.d-block { display: block; } .hodl-topbar #search-dropdown .notification-list { background: var(--hodl-topbar-search-dropdown-bg, var(--hodl-surface-3)); } .hodl-topbar #search-dropdown .notify-item, .hodl-topbar #search-dropdown .dropdown-item { background: var(--hodl-topbar-search-dropdown-bg, var(--hodl-surface-3)); color: var(--ct-body-color, var(--hodl-text)); } .hodl-topbar #search-dropdown .notify-item:hover, .hodl-topbar #search-dropdown .dropdown-item:hover, .hodl-topbar #search-dropdown .notify-item:focus-within { background: var(--hodl-topbar-search-item-hover, var(--hodl-accent-muted)); } .hodl-topbar #search-dropdown .hodl-topbar-search-result { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; } .hodl-topbar #search-dropdown .hodl-topbar-search-result__main { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .hodl-topbar #search-dropdown .hodl-topbar-search-info { flex: 0 0 auto; cursor: pointer; } .hodl-topbar #search-dropdown .notify-item h5, .hodl-topbar #search-dropdown .notify-item .font-14 { color: var(--ct-emphasis-color, var(--hodl-text)); } .hodl-topbar #search-dropdown .notify-item .font-12 { color: var(--ct-secondary-color, var(--hodl-text-3)); } html:not([data-bs-theme=dark]) .hodl-topbar #search-dropdown.dropdown-menu { box-shadow: 0 8px 24px rgba(31, 41, 55, 0.12); } .hodl-topbar .topbar-menu .nav-link:not(.hodl-topbar-icon-btn) { border-radius: var(--hodl-radius-lg); } .hodl-content-page.content-page { padding-top: var(--hodl-topbar-height); transition: margin-left 0.25s ease-in-out; } /* Rail — zawsze fixed, domyślnie same ikony */ @media (min-width: 992px) { html:not([data-layout=topnav]) .hodl-rail.leftside-menu { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; height: 100vh !important; width: var(--hodl-rail-width) !important; min-width: var(--hodl-rail-width) !important; z-index: 1060; padding-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--hodl-rail-text, #8392a5) 25%, transparent); box-shadow: none; background: var(--hodl-rail-surface); } [data-bs-theme=dark] .hodl-rail.leftside-menu, html[data-bs-theme=dark] .hodl-rail.leftside-menu { background: var(--hodl-rail-surface); } html:not([data-layout=topnav]) .hodl-rail .button-sm-hover, html:not([data-layout=topnav]) .hodl-rail .button-close-fullsidebar { display: none !important; } /* Logo tylko w sidebarze — nigdy w topbarze na desktopie */ html:not([data-layout=topnav]) .hodl-topbar .logo-topbar { display: none !important; } html:not([data-layout=topnav]) .wrapper .content-page.hodl-content-page { margin-left: var(--hodl-rail-width); } } .hodl-rail .logo { height: var(--hodl-topbar-height); min-height: var(--hodl-topbar-height); align-items: center; justify-content: center; padding: 0 !important; margin: 0; line-height: 1 !important; position: relative; top: auto; width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--hodl-rail-text, #8392a5) 25%, transparent); background: var(--hodl-rail-surface) !important; box-sizing: border-box; } html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .hodl-rail.leftside-menu .logo { background: var(--hodl-rail-surface) !important; } /* Tylko jeden wariant logo (light/dark) — bez podwójnego H */ .hodl-rail > a.logo.logo-light, .hodl-rail > a.logo.logo-dark { display: none !important; } html[data-bs-theme=dark] .hodl-rail > a.logo.logo-light, html[data-menu-color=dark] .hodl-rail > a.logo.logo-light, html[data-menu-color=brand] .hodl-rail > a.logo.logo-light { display: flex !important; } html[data-bs-theme=dark] .hodl-rail > a.logo.logo-dark, html[data-menu-color=dark] .hodl-rail > a.logo.logo-dark, html[data-menu-color=brand] .hodl-rail > a.logo.logo-dark { display: none !important; } html:not([data-bs-theme=dark]):not([data-menu-color=dark]):not([data-menu-color=brand]) .hodl-rail > a.logo.logo-light { display: none !important; } html:not([data-bs-theme=dark]):not([data-menu-color=dark]):not([data-menu-color=brand]) .hodl-rail > a.logo.logo-dark { display: flex !important; } .hodl-rail .logo span.logo-lg, .hodl-rail .logo span.logo-sm { display: flex !important; align-items: center; justify-content: center; width: 100%; margin: 0; line-height: 1; } .hodl-rail .logo img { display: block; height: var(--hodl-rail-logo-height) !important; max-height: var(--hodl-rail-logo-height) !important; width: auto !important; margin: 0 auto; object-fit: contain; } html[data-sidenav-size=condensed]:not([data-layout=topnav]) .hodl-rail .logo img { height: var(--hodl-rail-logo-height) !important; max-height: var(--hodl-rail-logo-height) !important; } html[data-sidenav-size=default]:not([data-layout=topnav]) .hodl-rail .logo .logo-lg img { height: calc(var(--hodl-rail-logo-height) - 4px) !important; max-height: calc(var(--hodl-rail-logo-height) - 4px) !important; } .hodl-rail #leftside-menu-container { height: calc(100vh - var(--hodl-topbar-height)) !important; max-height: calc(100vh - var(--hodl-topbar-height)) !important; padding: 0.5rem 0 1rem; } .hodl-rail .leftbar-user { display: none !important; } .hodl-rail .side-nav { padding: 0.25rem 0; } .hodl-rail .side-nav hr { display: none; } .hodl-rail .side-nav-title { display: none; } html[data-sidenav-size=default] .hodl-rail .side-nav-title { display: block; padding: 12px 16px 4px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hodl-rail-text, var(--hodl-text-3)); opacity: 0.85; } html[data-sidenav-size=default] .hodl-rail .side-nav-title:not(:first-of-type) { margin-top: 6px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--hodl-rail-text, #8392a5) 20%, transparent); } html[data-sidenav-size=default] .hodl-rail .side-nav-link { margin: 0.1rem 12px; padding: 0.5rem 0.75rem; } html[data-sidenav-size=default] .hodl-rail .side-nav-link i { width: auto; min-width: 0; margin-right: 8px; font-size: 16px; } html[data-sidenav-size=default] .hodl-rail .logo span.logo-lg { display: flex !important; } html[data-sidenav-size=default] .hodl-rail .logo span.logo-sm { display: none !important; } html[data-sidenav-size=condensed] .hodl-rail .logo span.logo-lg { display: none !important; } html[data-sidenav-size=condensed] .hodl-rail .logo span.logo-sm { display: flex !important; } .hodl-rail .side-nav-item { margin: 0.1rem 0; } .hodl-rail .side-nav-link { position: relative; border-radius: var(--hodl-radius-lg); margin: 0 8px; padding: 8px 0.5rem; color: var(--hodl-rail-text, var(--hodl-text-3)); transition: background 0.15s ease, color 0.15s ease; } html[data-sidenav-size=condensed] .hodl-rail .side-nav-link { display: flex; align-items: center; justify-content: center; margin: 0.12rem 6px; padding: 8px 6px; text-align: center; } html[data-sidenav-size=condensed] .hodl-rail .side-nav-link span { display: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html[data-sidenav-size=condensed] .hodl-rail .side-nav-link i { display: inline-flex !important; align-items: center; justify-content: center; width: 1.35rem !important; min-width: 1.35rem !important; margin: 0 !important; line-height: 1 !important; text-align: center; } .hodl-rail .side-nav-link i { font-size: 18px; } .hodl-rail .side-nav-item.menuitem-active > .side-nav-link, .hodl-rail .side-nav-link.active { background: var(--hodl-rail-active-bg, var(--hodl-accent-muted)); color: var(--hodl-rail-active-text, var(--hodl-accent)); font-weight: 600; } .hodl-rail .side-nav-item.menuitem-active > .side-nav-link::before, .hodl-rail .side-nav-link.active::before { content: ''; position: absolute; left: 0; top: 0.32rem; bottom: 0.32rem; width: 3px; border-radius: var(--hodl-radius-xs); background: var(--hodl-rail-active-text, var(--hodl-accent)); color: var(--hodl-text-on-accent); } html[data-sidenav-size=condensed] .hodl-rail .side-nav-item.menuitem-active > .side-nav-link::before, html[data-sidenav-size=condensed] .hodl-rail .side-nav-link.active::before { display: none; } .hodl-rail .side-nav-link:hover { background: color-mix(in srgb, var(--hodl-rail-text, #dee2e6) 16%, transparent); color: var(--hodl-rail-active-text, var(--hodl-text)); } html[data-sidenav-size=condensed] .hodl-rail .side-nav-title + .side-nav-item, html[data-sidenav-size=condensed] .hodl-rail .side-nav-section-start { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hodl-panel-head-border, var(--hodl-border-subtle)); } html[data-sidenav-size=condensed] .hodl-rail .side-nav .side-nav-item:hover .side-nav-link { border-radius: var(--hodl-radius-lg); background: color-mix(in srgb, var(--hodl-rail-text, #dee2e6) 16%, transparent); color: var(--hodl-rail-active-text, var(--hodl-accent)); box-shadow: none; } html[data-sidenav-size=condensed] .hodl-rail .side-nav .side-nav-item:hover .side-nav-link span { font-weight: 600; } @media (max-width: 991.98px) { .hodl-topbar.navbar-custom { left: 0; } .hodl-content-page.content-page { padding-top: var(--hodl-topbar-height); } } /* Global confirm-delete modal — above note overlay (1080) and lightbox (1095) */ #globalConfirmDeleteModal.modal { --bs-modal-zindex: 1100; z-index: 1100; } body.modal-open:has(#globalConfirmDeleteModal.show) .modal-backdrop.show { z-index: 1096; } .confirm-delete-modal { border: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .confirm-delete-modal .modal-header { border-bottom: 1px solid var(--hodl-border-subtle); padding: 16px 24px 12px; } .confirm-delete-modal .modal-footer { border-top: 1px solid var(--hodl-border-subtle); padding: 12px 24px 16px; gap: 0.5rem; } .confirm-delete-modal__icon { display: flex; justify-content: center; margin-bottom: 12px; } .confirm-delete-modal__icon .mdi { font-size: 2.5rem; line-height: 1; opacity: 0.92; } .confirm-delete-modal__message { text-align: center; font-size: 16px; line-height: 1.55; color: var(--ct-body-color, var(--hodl-text-2)); } .confirm-delete-modal .btn-danger { min-width: 5.5rem; } /* ── Position preview modal ─────────────────────────────────────────────── */ .pf-position-modal.modal { /* Mocniejsze, lekko przyciemnione tło za oknem podglądu */ background-color: var(--hodl-bg); backdrop-filter: blur(6px); } .pf-position-modal .modal-dialog { max-width: 720px; } .pf-position-modal__sheet { /* W tym modal’u chcemy pełne, nieprzezroczyste tło – bez dziedziczenia pół‑transparentnego panelu */ background-color: var(--hodl-bg); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); color: var(--ct-body-color, var(--hodl-text)); overflow: hidden; } [data-bs-theme="light"] .pf-position-modal__sheet { background-color: var(--ct-secondary-bg, var(--hodl-surface)); border-color: var(--ct-border-color, var(--hodl-border)); box-shadow: 0 18px 40px rgba(36, 50, 74, 0.12); color: var(--ct-body-color, var(--hodl-text)); } .pf-position-modal__head { align-items: flex-start; border-bottom: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); display: flex; gap: 12px; justify-content: space-between; padding: 16px 16px 16px; } .pf-position-modal__identity { align-items: flex-start; display: flex; gap: 12px; min-width: 0; } .pf-position-modal__logo { border-radius: 50%; flex-shrink: 0; height: 44px; object-fit: cover; width: 44px; } .pf-position-modal__logo--placeholder { align-items: center; background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); display: inline-flex; font-size: 12px; font-weight: 700; justify-content: center; letter-spacing: 0.04em; } .pf-position-modal__titles { min-width: 0; } .pf-position-modal__eyebrow { color: var(--ct-secondary-color, var(--hodl-text-3)); display: block; font-size: 12px; letter-spacing: 0.03em; margin-bottom: 2px; text-transform: uppercase; } .pf-position-modal__title { color: var(--ct-headings-color, var(--hodl-text)); font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0; } [data-bs-theme="light"] .pf-position-modal__title { color: var(--ct-headings-color, var(--hodl-text)); } .pf-position-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pf-position-modal__chip { align-items: center; background: var(--hodl-surface-3); border-radius: var(--hodl-radius-pill); color: var(--ct-secondary-color, var(--hodl-text-2)); display: inline-flex; font-size: 11px; gap: 4px; line-height: 1.2; padding: 2px 8px; } .pf-position-modal__chip--warn { background: var(--hodl-warn-soft); color: var(--hodl-warn-text); } .pf-position-modal__chip--ok { background: var(--hodl-up-soft); color: var(--hodl-up-text); } .pf-position-modal__toolbar { align-items: center; display: inline-flex; flex-shrink: 0; gap: 6px; } .pf-position-modal__action { align-items: center; background: transparent; border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); color: var(--ct-body-color, var(--hodl-text)); display: inline-flex; height: 34px; justify-content: center; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; width: 34px; } .pf-position-modal__action:hover { background: var(--hodl-accent-muted); border-color: var(--hodl-accent); color: var(--hodl-accent, var(--hodl-accent)); } .pf-position-modal__action--danger:hover { background: var(--hodl-down-soft); border-color: var(--hodl-down); color: var(--hodl-down-text); } .pf-position-modal__body { display: grid; gap: 16px; padding: 16px 16px 16px; } .pf-position-modal__highlights { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-position-modal__highlight { background: var(--hodl-surface-3); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); display: grid; gap: 4px; padding: 12px 12px; } [data-bs-theme="light"] .pf-position-modal__highlight { background: var(--hodl-surface-3); } .pf-position-modal__highlight--pnl { border-color: var(--hodl-down); } .pf-position-modal__label { color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .pf-position-modal__value { color: var(--ct-headings-color, var(--hodl-text)); font-size: 16px; font-weight: 600; line-height: 1.2; } [data-bs-theme="light"] .pf-position-modal__value { color: var(--ct-headings-color, var(--hodl-text)); } .pf-position-modal__highlight small { color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 12px; } .pf-position-modal__value.is-positive, .pf-position-modal__highlight small.is-positive, .pf-position-modal__change.is-positive { color: var(--hodl-up-text); } .pf-position-modal__value.is-negative, .pf-position-modal__highlight small.is-negative, .pf-position-modal__change.is-negative { color: var(--hodl-down-text); } .pf-position-modal__details { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-position-modal__detail-group { display: grid; gap: 8px; } .pf-position-modal__detail { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; } .pf-position-modal__detail > span { color: var(--ct-secondary-color, var(--hodl-text-3)); flex-shrink: 0; font-size: 12px; } .pf-position-modal__detail > strong { color: var(--ct-body-color, var(--hodl-text)); font-size: 13px; font-weight: 600; text-align: right; } .pf-position-modal__detail--changes { align-items: flex-start; flex-direction: column; gap: 6px; } .pf-position-modal__changes { display: flex; flex-wrap: wrap; gap: 6px; } .pf-position-modal__change { background: var(--hodl-surface-3); border-radius: var(--hodl-radius-pill); font-size: 12px; font-weight: 600; padding: 2px 8px; } .pf-position-modal__note { background: var(--hodl-surface-3); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); padding: 12px 12px; } .pf-position-modal__note p { color: var(--ct-body-color, var(--hodl-text)); font-size: 13px; margin: 6px 0 0; word-break: break-word; } .pf-position-modal__note a { color: var(--hodl-accent, var(--hodl-accent)); } .pf-position-modal__section { border-top: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); margin-top: 12px; padding-top: 12px; } .pf-position-modal__section-title { color: var(--ct-secondary-color, var(--hodl-text-3)); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 8px; text-transform: uppercase; } .pf-position-modal__details--compact { gap: 8px; } .pf-position-modal__note--inline { margin-top: 8px; } .pf-position-modal__chip i { font-size: 0.82em; margin-right: 2px; opacity: 0.85; vertical-align: -1px; } @media (max-width: 640px) { .pf-position-modal__highlights, .pf-position-modal__details { grid-template-columns: 1fr; } .pf-position-modal__head { flex-direction: column; } .pf-position-modal__toolbar { align-self: flex-end; } } /* ── Add position form modal ────────────────────────────────────────────── */ .pf-position-form-modal .modal-dialog { max-width: 640px; } .pf-position-form-modal__live { color: var(--ct-secondary-color, var(--hodl-text-3)); display: block; font-size: 12px; margin-top: 4px; } .pf-position-form-modal__body { padding: 16px 16px 16px; } .pf-position-form__grid { display: grid; gap: 12px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-position-form__field { display: grid; gap: 6px; margin: 0; } .pf-position-form__field--wide { grid-column: 1 / -1; } .pf-position-form__label { color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .pf-position-form__req { color: var(--hodl-down-text); } .pf-position-form__control { background: var(--hodl-surface-3); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); color: var(--ct-body-color, var(--hodl-text)); font-size: 14px; min-height: 40px; padding: 8px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; } [data-bs-theme="light"] .pf-position-form__control { background: var(--hodl-surface); } .pf-position-form__control:focus { border-color: var(--hodl-accent); box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.14); outline: none; } .pf-position-form__control--area { min-height: 88px; resize: vertical; } .pf-position-form__link { color: var(--hodl-accent, var(--hodl-accent)); font-size: 12px; justify-self: start; text-decoration: none; } .pf-position-form__link:hover { text-decoration: underline; } .pf-position-form__error { color: var(--hodl-down-text); font-size: 12px; } .pf-position-form-modal__footer { border-top: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; } .pf-position-form-modal__btn { align-items: center; border: 1px solid transparent; border-radius: var(--hodl-radius-lg); display: inline-flex; font-size: 13px; font-weight: 600; gap: 6px; min-height: 36px; padding: 0 16px; } .pf-position-form-modal__btn--ghost { background: transparent; border-color: var(--hodl-panel-card-border, var(--hodl-border)); color: var(--ct-body-color, var(--hodl-text)); } .pf-position-form-modal__btn--ghost:hover { background: var(--hodl-surface-3); } .pf-position-form-modal__btn--primary { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .pf-position-form-modal__btn--primary:hover { background: var(--hodl-accent-hover, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .pf-position-form-modal--loading .modal-content { min-height: 180px; } .pf-position-form-modal__loading { align-items: center; color: var(--ct-secondary-color, var(--hodl-text-3)); display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 180px; } .pf-position-form-modal__spinner { animation: pf-form-spin 0.7s linear infinite; border: 2px solid var(--hodl-accent-muted); border-radius: 50%; border-top-color: var(--hodl-accent, var(--hodl-accent)); height: 28px; width: 28px; } @keyframes pf-form-spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .pf-position-form__grid { grid-template-columns: 1fr; } } /* Wallet picker (themed select) */ .pf-wallet-picker { position: relative; } .pf-wallet-picker__native { height: 0; opacity: 0; pointer-events: none; position: absolute; width: 0; } .pf-wallet-picker__trigger { cursor: pointer; display: flex; justify-content: space-between; text-align: left; width: 100%; } .pf-wallet-picker__trigger::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ''; flex-shrink: 0; height: 7px; margin-left: 8px; margin-top: 2px; opacity: 0.55; transform: rotate(45deg); width: 7px; } .pf-wallet-picker__menu { background: var(--hodl-bg); border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); left: 0; list-style: none; margin: 6px 0 0; max-height: 240px; overflow-y: auto; padding: 6px; position: absolute; right: 0; top: 100%; z-index: 1400; } [data-bs-theme="light"] .pf-wallet-picker__menu { background: var(--hodl-surface); border-color: var(--hodl-border-subtle); } .pf-wallet-picker__option { border-radius: var(--hodl-radius-md); color: var(--ct-body-color, var(--hodl-text)); cursor: pointer; font-size: 14px; padding: 8px 8px; } .pf-wallet-picker__option:hover, .pf-wallet-picker__option[aria-selected="true"] { background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); } [data-bs-theme="light"] .pf-wallet-picker__option { color: var(--hodl-text); } [data-bs-theme="light"] .pf-wallet-picker__option:hover, [data-bs-theme="light"] .pf-wallet-picker__option[aria-selected="true"] { background: var(--hodl-accent-muted); color: var(--hodl-accent); } .pf-wallet-picker__option[hidden] { display: none; } /* Pole wyszukiwania w pickerze position place (po nazwie lub adresie) */ .pf-wallet-picker__search-row { position: sticky; top: -6px; margin: -6px -6px 4px; padding: 6px; background: var(--hodl-bg); z-index: 1; } [data-bs-theme="light"] .pf-wallet-picker__search-row { background: var(--hodl-surface); } .pf-wallet-picker__search { width: 100%; border: 1px solid var(--hodl-panel-card-border, var(--hodl-border)); border-radius: var(--hodl-radius-md); background: var(--hodl-surface-3); color: var(--ct-body-color, var(--hodl-text)); font-size: 13px; padding: 6px 8px; outline: none; } .pf-wallet-picker__search:focus { border-color: var(--hodl-accent, var(--hodl-accent)); } [data-bs-theme="light"] .pf-wallet-picker__search { color: var(--hodl-text); background: var(--hodl-surface-3); } /* Flatpickr dark theme */ .flatpickr-calendar { background: var(--hodl-bg); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45); color: var(--hodl-text); } .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekdays, .flatpickr-days { background: transparent; color: var(--hodl-text); } .flatpickr-day { border-radius: var(--hodl-radius-md); color: var(--hodl-text); } .flatpickr-day:hover, .flatpickr-day:focus { background: var(--hodl-accent-muted); border-color: transparent; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--hodl-accent, var(--hodl-accent)); border-color: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .flatpickr-day.today { border-color: var(--hodl-accent); } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #d8e0ed; } span.flatpickr-weekday { color: var(--hodl-text-3); } .flatpickr-time input, .numInputWrapper span { color: var(--hodl-text); } .pf-position-form-page { margin: 0 auto; max-width: 720px; padding: 16px 16px 32px; } .pf-position-form-page__shell { border-radius: var(--hodl-radius-lg); overflow: hidden; } .pf-position-form-page__back { display: block; margin-bottom: 4px; } .pf-position-form-page__back a { color: var(--hodl-accent, var(--hodl-accent)); font-size: 12px; text-decoration: none; } .pf-position-form-page__back a:hover { text-decoration: underline; } .pf-position-form__flash { background: var(--hodl-accent-muted); border: 1px solid var(--hodl-accent-muted); border-radius: var(--hodl-radius-lg); color: var(--ct-body-color, var(--hodl-text)); font-size: 13px; margin-bottom: 12px; padding: 8px 12px; } .pf-position-form__flash--error { background: var(--hodl-down-soft); border-color: var(--hodl-down); color: var(--hodl-text); } .pf-position-form__field:has(.pf-position-form__error) .pf-position-form__control, .pf-position-form__field:has(.pf-position-form__error) .pf-wallet-picker__trigger { border-color: var(--hodl-down); } .pf-position-form__advanced { border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); margin-top: 4px; overflow: visible; } .pf-position-form__advanced-summary { align-items: center; cursor: pointer; display: flex; gap: 8px; justify-content: space-between; list-style: none; padding: 12px 12px; } .pf-position-form__advanced-summary::-webkit-details-marker { display: none; } .pf-position-form__advanced-summary::after { color: var(--hodl-text-3); content: '▾'; font-size: 14px; transition: transform 0.15s ease; } .pf-position-form__advanced[open] .pf-position-form__advanced-summary::after { transform: rotate(180deg); } .pf-position-form__advanced-title { color: var(--hodl-text, var(--hodl-text)); font-size: 14px; font-weight: 600; } .pf-position-form__advanced-hint { color: var(--hodl-text-3); font-size: 12px; } .pf-position-form__advanced-body { border-top: 1px solid var(--hodl-border-subtle); display: grid; gap: 12px; padding: 12px; } .pf-position-form__advanced-group { display: grid; gap: 8px; } .pf-position-form__advanced-panel { padding-left: 2px; } .pf-position-form__toggle-row { margin-top: 2px; } /* Wallet form (modal + page) */ .pf-wallet-form__toggle { align-items: center; cursor: pointer; display: inline-flex; gap: 8px; margin: 0; min-height: 40px; } .pf-wallet-form__toggle-input { height: 0; opacity: 0; position: absolute; width: 0; } .pf-wallet-form__toggle-track { background: var(--hodl-surface-3); border-radius: var(--hodl-radius-pill); flex-shrink: 0; height: 22px; position: relative; transition: background 0.2s ease; width: 40px; } .pf-wallet-form__toggle-track::after { background: var(--hodl-surface); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); content: ''; height: 16px; left: 3px; position: absolute; top: 3px; transition: transform 0.2s ease; width: 16px; } .pf-wallet-form__toggle-input:checked + .pf-wallet-form__toggle-track { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } .pf-wallet-form__toggle-input:checked + .pf-wallet-form__toggle-track::after { transform: translateX(18px); } .pf-wallet-form__toggle-copy { color: var(--ct-body-color, var(--hodl-text)); font-size: 13px; } .pf-wallet-form__logo-field { border: none; margin: 16px 0 0; min-width: 0; padding: 0; } .pf-wallet-form__logo-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); margin-top: 8px; max-height: 176px; overflow-y: auto; padding: 2px; } .pf-wallet-form__logo-item { cursor: pointer; margin: 0; } .pf-wallet-form__logo-input { height: 0; opacity: 0; position: absolute; width: 0; } .pf-wallet-form__logo-surface { align-items: center; background: var(--hodl-surface-3); border: 2px solid transparent; border-radius: var(--hodl-radius-lg); display: flex; justify-content: center; padding: 6px; transition: border-color 0.15s ease, background 0.15s ease; } .pf-wallet-form__logo-surface img { border-radius: var(--hodl-radius-md); display: block; height: 48px; object-fit: cover; width: 48px; } .pf-wallet-form__logo-input:checked + .pf-wallet-form__logo-surface { background: var(--hodl-accent-muted); border-color: var(--hodl-accent, var(--hodl-accent)); } .pf-wallet-form__logo-input:focus-visible + .pf-wallet-form__logo-surface { box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.14); } .pf-wallet-form__head-logo[hidden], .pf-wallet-form__head-logo-fallback[hidden] { display: none !important; } /* Prediction modal — dynamiczne wiersze pól (orders/take-profits/stop-loss) */ .pred-field-list { display: grid; gap: 8px; } .pred-field-row { display: flex; align-items: center; gap: 8px; } .pred-field-row .pf-position-form__control { flex: 1; min-width: 0; } .pred-pct { min-width: 66px; text-align: right; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); font-variant-numeric: tabular-nums; } .pred-modal__msg { margin-top: 8px; font-size: 13px; min-height: 1em; } .pred-modal__msg--ok { color: var(--hodl-up-text); } .pred-modal__msg--err { color: var(--hodl-down-text); } .pf-position-form__hint { color: var(--ct-secondary-color, var(--hodl-text-3)); font-weight: 400; font-size: 12px; } /* Ikony przy polach modala predykcji (samowystarczalne — bez portfolio-page.css) */ .pred-modal-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; color: var(--ct-secondary-color, var(--hodl-text-3)); background: var(--ct-secondary-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-lg); cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .pred-modal-iconbtn:hover { color: var(--ct-body-color, var(--hodl-text)); border-color: var(--ct-border-color, var(--hodl-border-strong)); } .pred-modal-iconbtn--danger:hover { color: var(--hodl-text-on-down); background: var(--hodl-down); border-color: var(--hodl-down); } .pf-position-modal__meta { color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 12px; } /* Modal predykcji — wyrównanie pól do góry + reset przycisku "Add ..." */ .pred-modal .pf-position-form__grid { align-items: start; } .pred-modal .pf-position-form__link { background: none; border: 0; padding: 0; cursor: pointer; } /* Topbar nav link „Reports" (po lewej, obok wyszukiwarki) */ .hodl-topbar-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--hodl-radius-md); color: var(--ct-secondary-color, var(--hodl-text-3)); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; } .hodl-topbar-nav-link:hover { background: var(--ct-tertiary-bg, var(--hodl-surface-3)); color: var(--ct-primary, var(--hodl-accent)); } .hodl-topbar-nav-link i { font-size: 18px; } /* === Moduł tasków (model Task) — chip kotwicy, akcje wiersza, strona /tasks/ === */ .hodl-task__badge { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); font-size: 16px; } .hodl-task__badge--plain { background: var(--hodl-surface-3); color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-task--done .side-panel__task-title { text-decoration: line-through; opacity: 0.6; } .hodl-task__anchors { display: inline-flex; align-items: center; gap: 6px; } .hodl-task__anchor { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; } .hodl-task__anchor:hover { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-task__anchor--gone { opacity: 0.55; text-decoration: line-through; } .side-panel__task-chips .js-task-status-cycle { border: 0; cursor: pointer; } /* Akcje wiersza — tylko na /tasks/ (hover) */ .hodl-task { position: relative; } .hodl-task__actions { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); display: none; align-items: center; gap: 0.25rem; padding: 4px 6px; border-radius: var(--hodl-radius-sm); background: var(--ct-secondary-bg, var(--hodl-surface-3)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); z-index: 3; } .hodl-task:hover .hodl-task__actions, .hodl-task__actions:focus-within { display: inline-flex; } .hodl-task__action-btn { border: 0; background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 14px; padding: 0.1rem 4px; cursor: pointer; border-radius: var(--hodl-radius-xs); } .hodl-task__action-btn:hover { color: var(--hodl-accent, var(--hodl-accent)); background: var(--hodl-accent-muted); } .hodl-task__action-btn--danger:hover { color: var(--hodl-down-text); background: var(--hodl-down-soft); } /* Strona /tasks/ */ .hodl-tasks-page { max-width: 860px; margin: 0 auto; } .hodl-tasks-page__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0; } .hodl-tasks-page__counts { display: inline-flex; gap: 6px; } .hodl-tasks-page__quick { margin-bottom: 0.75rem; display: flex; gap: 6px; } .hodl-tasks-page__quick-date, .hodl-tasks-page__quick-priority { flex: 0 0 auto; width: auto; } .hodl-tasks-page__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 8px; } .hodl-tasks-page__selects { display: inline-flex; align-items: center; gap: 8px; } .hodl-tasks-page__select-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); margin: 0; } .hodl-tasks-page__list .side-panel__item--task { padding: 8px 0.5rem; border-bottom: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); } /* Globalny popover quick-add (topbar) */ .hodl-task-popover__anchor { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); background: var(--hodl-accent-muted); border-radius: var(--hodl-radius-xs); padding: 2px 6px; margin-bottom: 0.5rem; max-width: 100%; } .hodl-task-popover__anchor .js-task-popover-anchor-remove { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0.1rem; } /* Kalendarz tasków (/tasks/calendar) */ .hodl-cal { width: 100%; table-layout: fixed; border-collapse: collapse; } .hodl-cal__dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); padding: 4px 0; text-transform: uppercase; } .hodl-cal__day { vertical-align: top; height: 92px; padding: 0.25rem 4px; border: 1px solid var(--ct-border-color, var(--hodl-border)); font-size: 11px; } .hodl-cal__day--other { opacity: 0.38; background: var(--hodl-surface-3); } .hodl-cal__day--today { background: var(--hodl-accent-muted); box-shadow: inset 0 0 0 1px var(--hodl-accent, #727cf5); } .hodl-cal__day--overdue .hodl-cal__daynum { color: var(--hodl-down-text); font-weight: 700; } .hodl-cal__daynum { display: block; font-size: 11px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); margin-bottom: 4px; } .hodl-cal__task { display: block; margin: 0 0 2px; padding: 0.08rem 4px; border-radius: var(--hodl-radius-xs); font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); } .hodl-cal__task--backlog { background: var(--hodl-surface-3); color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-cal__task--blocked { background: var(--hodl-down-soft); color: var(--hodl-down-text); } .hodl-cal__task--inprogress { background: var(--hodl-warn-soft); color: var(--hodl-warn-text); } .hodl-cal__task--inreview { background: var(--hodl-info-soft); color: var(--hodl-info-text); } .hodl-cal__task--done { background: var(--hodl-up-soft); color: var(--hodl-up-text); text-decoration: line-through; opacity: 0.75; } .hodl-cal__task--prio-high { box-shadow: inset 2px 0 0 #f1556c; } .hodl-cal__task:hover { filter: brightness(1.15); } .hodl-cal__nav { display: inline-flex; align-items: center; gap: 6px; } .hodl-cal__month { font-size: 14px; color: var(--ct-emphasis-color, var(--hodl-text)); min-width: 9rem; text-align: center; } .hodl-cal__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--hodl-radius-sm); color: var(--ct-secondary-color, var(--hodl-text-3)); background: var(--hodl-surface-3); text-decoration: none; } .hodl-cal__nav-btn:hover { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-cal__undated { margin-top: 0.75rem; } .hodl-cal__undated-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .hodl-cal__undated-list .hodl-cal__task { display: inline-block; max-width: 14rem; margin: 0; } .hodl-tasks-page__views { display: inline-flex; gap: 4px; } /* Badge liczby tasków w sidebarze / mobile */ .hodl-task-nav-badge { min-width: 1.15rem; padding: 0.05rem 4px; border-radius: var(--hodl-radius-md); font-size: 11px; font-weight: 700; text-align: center; background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); } .hodl-task-nav-badge--overdue { background: var(--hodl-down-soft); color: var(--hodl-down-text); } /* === Tasks UX v2: checkbox done, chipy-edytory, composer, popover === */ .hodl-task__titlewrap { display: flex; align-items: center; gap: 6px; min-width: 0; } .hodl-task__titlewrap .hodl-task__title-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; } .hodl-task__titlewrap .hodl-task__title-link:hover { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-task__check { flex: 0 0 auto; border: 0; background: transparent; padding: 0; font-size: 1rem; line-height: 1; color: var(--ct-secondary-color, var(--hodl-text-3)); cursor: pointer; } .hodl-task__check:hover { color: var(--hodl-up-text); } .hodl-task__check.is-done { color: var(--hodl-up-text); } .hodl-task__deadline-cell { justify-self: end; text-align: right; } /* Menu chipa doklejane do (position: fixed ustawia JS) */ .hodl-task-menu { z-index: 2000; } /* Chipy w wierszu taska — klikalne */ .side-panel__task-chips .js-task-chip, .hodl-task__deadline-cell .js-task-chip { border: 0; cursor: pointer; } /* Chipy tasków na karcie notatki */ .note-card__task-editors { display: inline-flex; align-items: center; gap: 0.25rem; } .note-card__task-ico { color: var(--hodl-accent, var(--hodl-accent)); font-size: 14px; } /* Composer: sekcja taska widoczna dopiero po włączeniu „+ Task" */ .note-composer:not(.is-task) .note-composer__task-group { display: none; } .note-composer__task-hint { grid-column: 1 / -1; margin: 0; padding: 6px 8px; border-radius: var(--hodl-radius-sm); background: var(--hodl-accent-muted); border: 1px dashed var(--hodl-accent); font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .note-composer__task-hint i { color: var(--hodl-accent, var(--hodl-accent)); margin-right: 0.25rem; } .note-composer__task-toggle { width: auto !important; padding: 0 8px; gap: 4px; display: inline-flex; align-items: center; } .note-composer__task-toggle-label { font-size: 12px; font-weight: 600; } .note-composer.is-task .note-composer__task-toggle { background: var(--hodl-accent-muted); border-radius: var(--hodl-radius-pill); } /* Popover: podpowiedź + prefiks kotwicy */ .hodl-task-popover__anchor-prefix { font-weight: 600; opacity: 0.8; } /* === Modal podglądu taska + modal potwierdzenia usunięcia === */ .hodl-task-view { position: fixed; inset: 0; z-index: 1040; /* poniżej modali Bootstrapa (1055) — confirm usuwania ma być NAD */ display: flex; align-items: center; justify-content: center; } .hodl-task-view[hidden] { display: none; } .hodl-task-view__backdrop { position: absolute; inset: 0; background: var(--hodl-bg); } .hodl-task-view__dialog { position: relative; width: min(480px, calc(100vw - 32px)); background: var(--ct-secondary-bg, var(--hodl-surface-3)); border-radius: var(--hodl-radius-lg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); padding: 1rem; } .hodl-task-view__close { position: absolute; top: 0.5rem; right: 0.5rem; border: 0; background: transparent; color: var(--ct-secondary-color, var(--hodl-text-3)); font-size: 18px; cursor: pointer; z-index: 1; } .hodl-task-view__close:hover { color: var(--ct-emphasis-color, var(--hodl-text)); } .hodl-task-modal__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 8px; padding-right: 24px; } .hodl-task-modal__head .hodl-task__check { font-size: 18px; } .hodl-task-modal__title { flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--hodl-radius-sm); padding: 0.25rem 6px; font-size: 16px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); } .hodl-task-modal__title:hover, .hodl-task-modal__title:focus { border-color: var(--ct-border-color, var(--hodl-border)); background: var(--ct-body-bg, var(--hodl-surface-3)); outline: none; } .hodl-task-modal__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .hodl-task-modal__body { width: 100%; background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-sm); color: var(--ct-body-color, var(--hodl-text-2)); font-size: 13px; padding: 8px 8px; resize: vertical; } .hodl-task-modal__anchors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .hodl-task-modal__anchors .hodl-task__anchor { font-size: 12px; max-width: 100%; } .hodl-task-modal__meta { margin: 8px 0 0; font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-task-modal__footer { display: flex; align-items: center; gap: 6px; margin-top: 0.75rem; } .hodl-task-modal__footer .hodl-task__action-btn { font-size: 1rem; } .hodl-task-modal__all { margin-left: auto; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); text-decoration: none; } .hodl-task-modal__all:hover { color: var(--hodl-accent, var(--hodl-accent)); } /* === /tasks/ — redesign listy (UX v4) === */ .hodl-tasks-page__list { margin-top: 0.25rem; } /* Wiersz na stronie: siatka z nazwanymi obszarami — akcje jako stała kolumna (koniec nakładania się overlay'a na chipy), oddech, wyraźniejszy tytuł. */ .hodl-tasks-page__list .side-panel__item--task { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "logo title chips actions" "logo anchors deadline actions"; align-items: center; gap: 4px 16px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--hodl-border-subtle); border-radius: 0; transition: background 0.12s ease; } .hodl-tasks-page__list .side-panel__item--task:hover { background: var(--hodl-surface-3); } .hodl-tasks-page__list .side-panel__task-logo { grid-area: logo; } .hodl-tasks-page__list .hodl-task__titlewrap { grid-area: title; } .hodl-tasks-page__list .side-panel__task-chips { grid-area: chips; justify-self: end; } .hodl-tasks-page__list .hodl-task__anchors { grid-area: anchors; } .hodl-tasks-page__list .hodl-task__deadline-cell { grid-area: deadline; justify-self: end; } .hodl-tasks-page__list .hodl-task__titlewrap { gap: 0.5rem; } .hodl-tasks-page__list .hodl-task__title-link { font-size: 14px; font-weight: 600; } .hodl-tasks-page__list .hodl-task__check { font-size: 18px; } .hodl-tasks-page__list .side-panel__task-chips .note-card__chip, .hodl-tasks-page__list .hodl-task__deadline-cell .note-card__chip { font-size: 11px; padding: 2px 8px; } .hodl-tasks-page__list .hodl-task__anchor { font-size: 11px; } /* Akcje: stała, wąska kolumna po prawej — widoczne po najechaniu na wiersz, ale bez nakładania na treść. */ .hodl-tasks-page__list .hodl-task__actions { grid-area: actions; position: static; transform: none; display: inline-flex; box-shadow: none; background: transparent; padding: 0; opacity: 0; transition: opacity 0.12s ease; } .hodl-tasks-page__list .hodl-task:hover .hodl-task__actions, .hodl-tasks-page__list .hodl-task__actions:focus-within { opacity: 1; } .hodl-tasks-page__list .hodl-task--done { opacity: 0.62; } /* Quick-add na stronie: pole opisu pod spodem na całą szerokość */ .hodl-tasks-page__quick { flex-wrap: wrap; } /* Pigułka Undo po oznaczeniu done (5 s) */ .hodl-task__undo { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 0.25rem 8px; border-radius: var(--hodl-radius-pill); background: var(--hodl-up-soft); color: var(--hodl-up-text); font-size: 12px; font-weight: 600; z-index: 4; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .hodl-task__undo-btn { border: 0; border-radius: var(--hodl-radius-pill); padding: 0.08rem 0.5rem; background: var(--hodl-up); color: var(--hodl-text-on-up); font-size: 11px; font-weight: 700; cursor: pointer; } .hodl-task__undo-btn:hover { filter: brightness(1.1); } .hodl-task__undo-count { min-width: 0.9rem; text-align: center; opacity: 0.75; } /* Toolbar strony: lekki podział od listy */ .hodl-tasks-page__toolbar { padding-bottom: 8px; border-bottom: 1px solid var(--hodl-border-subtle); } /* Przypięty task — pinezka ma się rzucać w oczy */ .hodl-task__pin-chip { background: var(--hodl-warn) !important; color: #1a1d21 !important; font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 188, 0, 0.6), 0 0 8px rgba(255, 188, 0, 0.45); } .hodl-task__action-btn.is-pinned, .hodl-task__action-btn.is-pinned:hover { color: var(--hodl-warn-text); background: var(--hodl-warn-soft); opacity: 1; } /* Wiersz z akcjami: przypięty pin widoczny zawsze (nie tylko na hover) */ .hodl-tasks-page__list .hodl-task__actions:has(.is-pinned) { opacity: 1; } /* Modal tworzenia taska */ .hodl-task-create__heading { font-size: 16px; font-weight: 600; color: var(--ct-emphasis-color, var(--hodl-text)); } .hodl-task-create__form { display: flex; flex-direction: column; gap: 0.5rem; } .hodl-task-create__row { display: flex; gap: 0.5rem; } .hodl-task-create__field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-task-create__status { margin: 0; font-size: 12px; color: var(--hodl-down-text); } /* Composer: pole opisu taska na całą szerokość gridu */ .note-composer__field-group--wide { grid-column: 1 / -1; } /* === Composer: sekcja „+ Task" jako miękka karta (redesign pól) === */ .note-composer.is-task .note-composer__task-group { position: relative; padding: 0.75rem 12px 12px; border-radius: var(--hodl-radius-lg); background: linear-gradient(180deg, rgba(114, 124, 245, 0.07), rgba(114, 124, 245, 0.03)); border: 1px solid var(--hodl-accent-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); animation: task-group-in 0.18s ease-out; } @keyframes task-group-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Nagłówek sekcji zamiast ramki-w-ramce */ .note-composer.is-task .note-composer__task-hint { grid-column: 1 / -1; margin: 0 0 0.1rem; padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } .note-composer.is-task .note-composer__task-hint i { font-size: 14px; } /* Pola: miękkie, zaokrąglone, spokojne — ramka dopiero na hover/focus */ .note-composer__task-group .note-composer__label { font-size: 11px; letter-spacing: 0.06em; color: var(--hodl-accent); margin-bottom: 2px; } .note-composer__task-group .form-select, .note-composer__task-group .form-control { background-color: var(--hodl-surface-2); border: 1px solid transparent; box-shadow: inset 0 0 0 1px rgba(131, 146, 165, 0.14); border-radius: var(--hodl-radius-md); color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 13px; padding: 6px 8px; transition: box-shadow 0.12s ease, background-color 0.12s ease; } .note-composer__task-group .form-select { padding-right: 32px; /* miejsce na strzałkę */ } .note-composer__task-group .form-select:hover, .note-composer__task-group .form-control:hover { box-shadow: inset 0 0 0 1px rgba(131, 146, 165, 0.3); } .note-composer__task-group .form-select:focus, .note-composer__task-group .form-control:focus { outline: none; background-color: var(--hodl-surface-2); box-shadow: inset 0 0 0 1px var(--hodl-accent, #727cf5), 0 0 0 3px rgba(114, 124, 245, 0.15); } .note-composer__task-group textarea.form-control { resize: vertical; min-height: 52px; } .note-composer__task-group ::placeholder { color: var(--hodl-text-3); } /* Data: jaśniejsza ikonka kalendarza w dark mode */ .note-composer__task-group input[type="date"] { color-scheme: dark; } @media (max-width: 767.98px) { .note-composer.is-task .note-composer__task-group { padding: 8px 12px 12px; } } /* Composer z kartą taska potrzebuje więcej miejsca niż bazowe 320px */ .note-composer.is-expanded.is-advanced .note-composer__advanced { overflow-y: auto; } .note-composer.is-expanded.is-advanced.is-task .note-composer__advanced { max-height: min(640px, 70vh); } /* === Kanban (/tasks/board) === */ .hodl-board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; } @media (max-width: 1200px) { .hodl-board { grid-template-columns: repeat(3, minmax(200px, 1fr)); } } @media (max-width: 767.98px) { .hodl-board { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } .hodl-board__col { display: flex; flex-direction: column; min-height: 220px; border-radius: var(--hodl-radius-lg); background: var(--hodl-surface-3); border: 1px solid var(--hodl-border-subtle); transition: border-color 0.12s ease, background 0.12s ease; } .hodl-board__col.is-over { border-color: var(--hodl-accent, var(--hodl-accent)); background: var(--hodl-accent-muted); } .hodl-board__col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 12px; border-bottom: 1px solid var(--hodl-border-subtle); } .hodl-board__col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-board__col--todo .hodl-board__col-label { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-board__col--inprogress .hodl-board__col-label { color: var(--hodl-warn-text); } .hodl-board__col--inreview .hodl-board__col-label { color: var(--hodl-info-text); } .hodl-board__col--blocked .hodl-board__col-label { color: var(--hodl-down-text); } .hodl-board__col--done .hodl-board__col-label { color: var(--hodl-up-text); } .hodl-board__col-count { font-size: 11px; font-weight: 700; padding: 0.05rem 6px; border-radius: var(--hodl-radius-md); background: var(--hodl-surface-3); color: var(--ct-secondary-color, var(--hodl-text-3)); } .hodl-board__col-list { flex: 1 1 auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; } /* Karta taska w kolumnie: kompaktowa, bez siatki panelu */ .hodl-board__col-list .side-panel__item--task { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 0.5rem; border-radius: var(--hodl-radius-md); background: var(--ct-secondary-bg, var(--hodl-surface-3)); border: 1px solid var(--hodl-border-subtle); cursor: grab; } .hodl-board__col-list .hodl-task.is-dragging { opacity: 0.45; } .hodl-board__col-list .side-panel__task-logo { display: none; } .hodl-board__col-list .hodl-task__titlewrap { flex: 1 1 100%; } .hodl-board__col-list .hodl-task__title-link { white-space: normal; font-size: 12px; } .hodl-board__col-list .side-panel__task-chips { display: inline-flex; gap: 4px; } .hodl-board__col-list .hodl-task__anchors { flex: 1 1 auto; } .hodl-board__col-list .hodl-task__deadline-cell { margin-left: auto; } .hodl-board__col-list .side-panel__empty { font-size: 11px; opacity: 0.6; padding: 6px; } .hodl-board__hint { margin: 0; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); } /* Badge liczby tasków przy coinie w my_table */ .mt-coin-cell__taskbadge { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0.02rem 6px; border-radius: var(--hodl-radius-md); font-size: 11px; font-weight: 700; background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); text-decoration: none; white-space: nowrap; } .mt-coin-cell__taskbadge:hover { background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent)); } /* Board: pełna szerokość strony + przycięte długie tytuły kart */ .hodl-tasks-page--board { max-width: none; } .hodl-board__col-list .hodl-task__title-link { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Widoki List | Board | Calendar — aktywny chip wyraźniejszy */ .hodl-tasks-page__views .side-panel__filter-chip.is-active { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); } /* Chipy liczników w nagłówku — delikatnie większe i wyrównane */ .hodl-tasks-page__counts .note-card__chip { font-size: 12px; padding: 2px 0.5rem; } /* === Kalendarz i menu daty — UX v6 === */ /* Kalendarz na pełną szerokość, komórki rosną z ekranem */ .hodl-tasks-page--calendar { max-width: none; } .hodl-cal__day { height: auto; min-height: clamp(84px, 11vh, 150px); } .hodl-cal__task { font-size: clamp(0.6rem, 0.55rem + 0.2vw, 0.72rem); padding: 0.12rem 6px; } .hodl-cal__task-ico { font-size: 0.85em; margin-right: 4px; opacity: 0.8; } @media (max-width: 991.98px) { .hodl-cal__task-ico { display: none; } } .hodl-cal__more { display: block; width: 100%; border: 0; background: transparent; color: var(--hodl-accent, var(--hodl-accent)); font-size: 11px; font-weight: 600; text-align: left; padding: 0.05rem 4px; cursor: pointer; border-radius: var(--hodl-radius-xs); } .hodl-cal__more:hover { background: var(--hodl-accent-muted); } .hodl-cal__overflow { display: flex; flex-direction: column; } /* Month-picker w nawigacji (rok+miesiąc jednym polem) */ .hodl-cal__month-input { background: var(--ct-body-bg, var(--hodl-surface-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-md); color: var(--ct-emphasis-color, var(--hodl-text)); font-size: 13px; font-weight: 600; padding: 4px 0.5rem; color-scheme: dark; min-width: 10.5rem; text-align: center; } .hodl-cal__month-input:focus { outline: none; border-color: var(--hodl-accent, var(--hodl-accent)); box-shadow: 0 0 0 3px rgba(114, 124, 245, 0.15); } /* Menu deadline'u — czytelny szablon: nagłówek, opcje wydłużenia, separator */ .hodl-task-menu--deadline { min-width: 210px; padding: 6px; } .hodl-task-menu__head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ct-secondary-color, var(--hodl-text-3)); padding: 2px 0.5rem 4px; } .hodl-task-menu--deadline .note-edit__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hodl-task-menu__date { font-size: 11px; color: var(--ct-secondary-color, var(--hodl-text-3)); font-variant-numeric: tabular-nums; } .hodl-task-menu__sep { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ct-secondary-color, var(--hodl-text-3)); opacity: 0.7; padding: 6px 0.5rem 4px; border-top: 1px solid var(--hodl-border-subtle); margin-top: 0.25rem; } .hodl-task-menu--deadline .note-edit__date { width: 100%; } /* === Kalendarz — estetyka v2 (à la Google Calendar) === */ /* min-height nie działa na — stąd cienkie wiersze; height = minimum dla komórki */ .hodl-cal__day { min-height: 0; height: clamp(96px, 13vh, 170px); padding: 6px 6px; border-color: var(--hodl-border-subtle); cursor: pointer; } /* Weekend delikatnie przyciemniony */ .hodl-cal td:nth-child(6), .hodl-cal td:nth-child(7) { background: var(--hodl-surface-3); } .hodl-cal__day--other { cursor: default; } .hodl-cal__day:not(.hodl-cal__day--other):hover { background: var(--hodl-accent-muted); } .hodl-cal__day.is-over { background: var(--hodl-accent-muted); box-shadow: inset 0 0 0 2px var(--hodl-accent, #727cf5); } /* Numer dnia: dziś = wypełnione kółko w akcencie */ .hodl-cal__daynum { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 0.25rem; font-size: 11px; } .hodl-cal__day--today { background: transparent; box-shadow: inset 0 0 0 1px rgba(114, 124, 245, 0.35); } .hodl-cal__day--today .hodl-cal__daynum { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); font-weight: 700; } /* Chipy tasków: pełniejsze, z cieniem na hover, przeciągalne */ .hodl-cal__task { margin: 0 0 2px; padding: 2px 6px; border-radius: var(--hodl-radius-xs); font-weight: 600; cursor: grab; transition: filter 0.1s ease, transform 0.1s ease; } .hodl-cal__task:hover { filter: brightness(1.25); transform: translateX(1px); } .hodl-cal__task-time { font-weight: 700; margin-right: 0.25rem; opacity: 0.9; font-variant-numeric: tabular-nums; } /* Pole godziny w menu daty i modalu tworzenia */ .hodl-task-menu__time { margin-top: 4px; } .hodl-task-create__field--time { flex: 0 0 6.2rem; } .hodl-task-create__field input[type="time"] { color-scheme: dark; } /* === Kalendarz: widoki Day/Week (oś godzin) i Year === */ .hodl-cal-timegrid-wrap { max-height: 68vh; overflow-y: auto; border: 1px solid var(--hodl-border-subtle); border-radius: var(--hodl-radius-md); } .hodl-cal--timegrid thead { position: sticky; top: 0; background: var(--ct-secondary-bg, var(--hodl-surface-3)); z-index: 2; } .hodl-cal--timegrid .hodl-cal__dow--today { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-cal--timegrid .hodl-cal__dow-num { font-weight: 800; } .hodl-cal__hourlabel { width: 3.4rem; text-align: right; padding: 2px 0.5rem 2px 0; font-size: 11px; font-weight: 600; color: var(--ct-secondary-color, var(--hodl-text-3)); vertical-align: top; border-right: 1px solid var(--hodl-border-subtle); } .hodl-cal__slot, .hodl-cal__allday { height: 34px; padding: 1px 2px; border: 1px solid var(--hodl-border-subtle); vertical-align: top; cursor: pointer; } .hodl-cal__allday { background: var(--hodl-surface-3); height: auto; min-height: 30px; } .hodl-cal__col--today { background: var(--hodl-accent-muted); } .hodl-cal__slot:hover, .hodl-cal__allday:hover { background: var(--hodl-accent-muted); } .hodl-cal__slot.is-over, .hodl-cal__allday.is-over { background: var(--hodl-accent-muted); box-shadow: inset 0 0 0 2px var(--hodl-accent, #727cf5); } .hodl-cal__slot .hodl-cal__task { margin-bottom: 1px; } /* Rok: 12 mini-miesięcy */ .hodl-cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1200px) { .hodl-cal-year { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .hodl-cal-year { grid-template-columns: repeat(2, 1fr); } } .hodl-cal-year__label { display: block; font-size: 12px; font-weight: 700; color: var(--ct-emphasis-color, var(--hodl-text)); text-decoration: none; margin-bottom: 4px; } .hodl-cal-year__label:hover { color: var(--hodl-accent, var(--hodl-accent)); } .hodl-cal-year__grid { width: 100%; border-collapse: collapse; } .hodl-cal-year__day { text-align: center; font-size: 11px; padding: 1px; } .hodl-cal-year__day a { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--ct-body-color, var(--hodl-text-2)); text-decoration: none; } .hodl-cal-year__day a:hover { background: var(--hodl-accent-muted); } .hodl-cal-year__day.has-tasks a { background: var(--hodl-accent-muted); color: var(--hodl-accent, var(--hodl-accent-text)); font-weight: 700; } .hodl-cal-year__day.is-today a { background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); font-weight: 700; } /* Menu daty: rząd akcji Clear | Apply */ .hodl-task-menu__actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 4px; } .hodl-task-menu__actions .note-edit__clear { margin-top: 0; } .hodl-task-menu__apply { border: 0; border-radius: var(--hodl-radius-sm); padding: 0.25rem 12px; background: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-text-on-accent); font-size: 12px; font-weight: 700; cursor: pointer; } .hodl-task-menu__apply:hover { filter: brightness(1.1); } /* Pas "No time" (data bez godziny) — wyraźny, nie do przeoczenia */ .hodl-cal__hourlabel--allday { color: var(--hodl-accent, var(--hodl-accent-text)); font-weight: 700; } .hodl-cal__allday { min-height: 42px; background: var(--hodl-accent-muted); border-bottom: 2px solid var(--hodl-accent); } .hodl-cal__allday .hodl-cal__task { font-size: 12px; padding: 4px 8px; } /* Czerwona linia "teraz" (Day/Week, jak w Google Calendar) */ .hodl-cal__nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--hodl-down); pointer-events: none; z-index: 1; color: var(--hodl-text-on-down); } .hodl-cal__nowline::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--hodl-down); color: var(--hodl-text-on-down); } /* ============================================================ Notatki 2026-08 — kategorie z ikonami, multi-coin, pin (paczka agenta Notatki; klasy WYŁĄCZNIE nowe, addytywne) ============================================================ */ /* ── Chip kategorii (composer, chipy filtra nad feedem, meta karty) ── */ .note-cat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--hodl-radius-lg); font-size: 12px; line-height: 1.4; color: var(--ct-body-color, var(--hodl-text-2)); border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); background: var(--ct-secondary-bg, var(--hodl-surface)); cursor: pointer; text-decoration: none; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .note-cat-chip i { font-size: 14px; line-height: 1; } .note-cat-chip:hover { border-color: color-mix(in srgb, var(--ct-primary, #727cf5) 45%, transparent); color: var(--ct-primary, var(--hodl-accent)); } .note-cat-chip.is-active { background: var(--ct-primary, var(--hodl-accent)); border-color: var(--ct-primary, var(--hodl-accent)); color: var(--hodl-text-on-accent); } /* Rząd chipów filtra pod nagłówkiem feedu */ .feed-header__cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 8px; } /* Kategoria w meta karty — ikona + etykieta (bez ramki chipa) */ .note-card__category { display: inline-flex; align-items: center; gap: 2px; text-transform: none; } .note-card__category i { font-size: 14px; line-height: 1; } /* Permalink w dacie karty (notatka bez tytułu ma tu jedyny link do detalu) */ .note-card__date-link { color: inherit; text-decoration: none; } .note-card__date-link:hover { color: var(--ct-primary, var(--hodl-accent)); } /* ── Awatar-kategoria (notatka bez coina): NEON (wybór Janka z 5 wariantów, runda 2) — ciemny kafelek, kolorowa ikona i obwódka z poświatą. ── */ .note-card__avatar-cat { width: 40px; height: 40px; border-radius: var(--hodl-radius-lg); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--note-cat-color, var(--ct-primary, var(--hodl-accent))); background: var(--hodl-surface); border: 1px solid var(--note-cat-color, var(--hodl-accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--note-cat-color, #727cf5) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--note-cat-color, #727cf5) 18%, transparent); } .note-card__avatar-cat--primary { --note-cat-color: #727cf5; } .note-card__avatar-cat--amber { --note-cat-color: #ffbc00; } .note-card__avatar-cat--sky { --note-cat-color: #39afd1; } .note-card__avatar-cat--violet { --note-cat-color: #8b5cf6; } .note-card__avatar-cat--teal { --note-cat-color: #02c5ce; } .note-card__avatar-cat--orange { --note-cat-color: #fd7e14; } .note-card__avatar-cat--rose { --note-cat-color: #fa5c7c; } .note-card__avatar-cat--emerald { --note-cat-color: #0acf97; } .note-card__avatar-cat--slate { --note-cat-color: #8a99a8; } /* Ikona kategorii w meta karty — w tonie kategorii (spójnie z awatarem) */ .note-card__category--primary i { color: var(--hodl-accent); } .note-card__category--amber i { color: var(--hodl-warn-text); } .note-card__category--sky i { color: var(--hodl-info-text); } .note-card__category--violet i { color: #8b5cf6; } .note-card__category--teal i { color: #02c5ce; } .note-card__category--orange i { color: #fd7e14; } .note-card__category--rose i { color: var(--hodl-down-text); } .note-card__category--emerald i { color: var(--hodl-up-text); } .note-card__category--slate i { color: var(--hodl-text-3); } /* ── Pin (per użytkownik) ── */ .note-card__pin-flag { color: var(--hodl-warn-text); font-size: 14px; margin-right: 2px; } .note-card__action-icon--pinned { color: var(--hodl-warn-text); } /* Kłódka w wierszu meta (notatka bez tytułu) — mniejsza, bez „sierocego" h5 */ .note-card__privacy--inline { width: 1.1rem; height: 1.1rem; font-size: 11px; } /* ── Chipy coinów (karta + composer) ── */ .note-card__coins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .note-coin-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--hodl-radius-lg); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ct-body-color, var(--hodl-text-2)); border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); background: var(--ct-secondary-bg, var(--hodl-surface)); text-decoration: none; } .note-coin-chip--link:hover { border-color: color-mix(in srgb, var(--ct-primary, #727cf5) 45%, transparent); color: var(--ct-primary, var(--hodl-accent)); } .note-coin-chip__x { border: 0; background: transparent; padding: 0 0 0 2px; line-height: 1; font-size: 14px; color: inherit; cursor: pointer; opacity: 0.6; } .note-coin-chip__x:hover { opacity: 1; color: var(--hodl-down-text); } /* ── Sekcje composera (kategoria / coiny) ── */ .note-composer__section { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px 0; } .note-composer__section-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ct-secondary-color, var(--hodl-text-3)); white-space: nowrap; } .note-composer__chipwrap { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .note-composer__mini-input { border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); border-radius: var(--hodl-radius-md); background: var(--hodl-surface-2); color: inherit; font-size: 13px; padding: 2px 8px; width: 130px; } .note-composer__mini-input:focus { outline: none; border-color: color-mix(in srgb, var(--ct-primary, #727cf5) 55%, transparent); } .note-composer__coin-search { position: relative; display: inline-flex; } .note-composer__coin-suggest { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 210px; max-height: 240px; overflow-y: auto; border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); border-radius: var(--hodl-radius-lg); background: var(--ct-secondary-bg, var(--hodl-surface)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); } .note-composer__coin-suggest button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 6px 8px; font-size: 13px; color: inherit; cursor: pointer; text-align: left; } .note-composer__coin-suggest button:hover { background: color-mix(in srgb, var(--ct-primary, #727cf5) 10%, transparent); } .note-composer__coin-suggest img { width: 18px; height: 18px; border-radius: 50%; } .note-composer__hint { flex-basis: 100%; font-size: 12px; color: var(--hodl-down-text); } /* Panel ⚙ mieści teraz kategorię + coiny + sekcję taska — stary limit 320px OBCINAŁ zawartość i przycinał dropdown sugestii coinów (overflow: hidden). Otwarty panel nie ogranicza wysokości; nadpisanie reguły z góry pliku. */ .note-composer.is-expanded.is-advanced .note-composer__advanced { max-height: none; overflow: visible; } /* Sekcja „+ Task" w composerze — wygląd głównego edytora taska („New task"). Reguły modala są scope'owane do #hodl-task-create, więc układ wiersza pól odtwarzamy tu; sekcje tagów/checklisty stylują wspólne klasy hodl-task-modal (tasks-pack.css wstrzykiwany globalnie przez hodl-tasks.js). */ .note-composer__task-group.hodl-task-create { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--ct-border-color, var(--hodl-border)); } .note-composer__task-group .hodl-task-create__row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .note-composer__task-group .hodl-task-create__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 8rem; min-width: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hodl-text-2); margin: 0; } .note-composer__task-group .hodl-task-modal__section { margin: 0; } /* ── Przełączniki Pin/Hide sekcji „+ Task" (wzór okna „New task") ── Style scope'owane do composera — tasks-pack.css v13 (master) ma własne. */ .note-composer .hodl-task-modal__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--hodl-radius-lg); font-size: 12px; color: var(--ct-body-color, var(--hodl-text-3)); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: transparent; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .note-composer .hodl-task-modal__toggle:hover { border-color: color-mix(in srgb, var(--ct-primary, #727cf5) 45%, transparent); color: var(--ct-primary, var(--hodl-accent)); } .note-composer .hodl-task-modal__toggle.is-on { background: color-mix(in srgb, var(--ct-primary, #727cf5) 16%, transparent); border-color: var(--ct-primary, var(--hodl-accent)); color: var(--ct-primary, var(--hodl-accent)); } /* ══ Karta notatki — FINALNY design W3 (wybór Janka z makiet 2026-08-03) ══ Karty-wyspy z odstępem; nick autora przy prawej krawędzi (cudze); menu ⋯ na hover (Pin/Hide, własne +Edit/Delete); stopka = piguły z obwódką; Task samą ikoną w prawym dolnym rogu; badge Pinned + bursztynowa obwódka. */ /* karta-wyspa zamiast ciągłej listy z separatorami — BEZ tła (feedback Janka: sama ramka + odstęp; tło strony prześwituje) */ .note-card { background: transparent; border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-lg); margin-bottom: 12px; padding: 12px 1rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .note-card:hover { border-color: color-mix(in srgb, var(--ct-primary, #727cf5) 35%, transparent); } /* Prywatna/publiczna (tylko WŁASNE notatki): zamiast pływających pasków — kolorowa lewa krawędź zintegrowana z ramką karty (podąża za zaokrągleniem). Stare ::before gasimy. */ .note-card--private, .note-card--public { padding-left: 16px; } .note-card--private::before, .note-card--public::before { content: none; } .note-card--private { border-left: 3px solid var(--hodl-down); } .note-card--public { border-left: 3px solid var(--hodl-up); } .note-card--private:hover { border-left-color: var(--hodl-down); } .note-card--public:hover { border-left-color: var(--hodl-up); } .note-card--pinned { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffbc00 30%, transparent); } /* Znacznik „Hidden" (notatka ukryta przez oglądającego — filtry Hidden/All) */ .note-card__hidden-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--hodl-text-3); background: var(--hodl-surface-3); border-radius: var(--hodl-radius-pill); padding: 2px 8px; white-space: nowrap; } .note-card__hidden-badge i { font-size: 12px; line-height: 1; } /* ukryta karta jest lekko przygaszona na listach Hidden/All */ .note-card:has(.note-card__hidden-badge) { opacity: 0.85; } .note-card:has(.note-card__hidden-badge):hover { opacity: 1; } /* badge Pinned (bursztyn) — zawsze widoczny, gdy TY przypiąłeś */ .note-card__pinned-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--hodl-warn-text); background: var(--hodl-warn-soft); border-radius: var(--hodl-radius-pill); padding: 2px 8px; vertical-align: 2px; } .note-card__pinned-badge i { font-size: 12px; line-height: 1; } /* licznik coinów na awatarze (jak w taskach: główna ikonka + liczba) */ .note-card__avatar-link { position: relative; display: inline-block; } .note-card__coin-count { position: absolute; right: -7px; bottom: -7px; min-width: 19px; height: 19px; border-radius: var(--hodl-radius-pill); background: var(--ct-primary, var(--hodl-accent)); color: var(--hodl-text-on-accent); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--ct-body-bg, var(--hodl-border-subtle)); pointer-events: none; } /* mini-chipy coinów w linii meta (fallback tekstowy, gdy brak logo) */ .note-coin-chip--mini { font-size: 11px; padding: 0 6px; } /* logotypy coinów w linii meta (zamiast skrótów — feedback Janka); lekko nachodzą na siebie jak stos awatarów */ .note-card__coin-logos { display: inline-flex; align-items: center; } .note-card__coin-logo { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; border: 1px solid var(--ct-border-color, var(--hodl-border)); background: var(--ct-body-bg, var(--hodl-surface)); margin-left: -5px; transition: transform 0.1s ease; } .note-card__coin-logo:first-child { margin-left: 0; } .note-card__coin-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .note-card__coin-logo:hover { transform: translateY(-1px) scale(1.12); z-index: 2; } /* prawa strona nagłówka: nick i ⋯ w JEDNEJ linii (dropdown jest divem blokowym — bez flexa spadał pod autora) */ .note-card__header-aside { display: flex; align-items: center; gap: 6px; } /* Runda 2: Pin/Hide jako ikony stopki widoczne NA HOVER karty (obok Task); menu ⋯ autora jest zawsze widoczne. Na dotyku ikony zawsze widoczne. */ .note-card__action--hover { opacity: 0; transition: opacity 0.12s ease; } .note-card:hover .note-card__action--hover, .note-card__action--hover:focus-visible { opacity: 1; } @media (hover: none) { .note-card__action--hover { opacity: 1; } } /* aktywny stan zawsze widoczny — przypięta/ukryta nie chowa swojej ikony */ .note-card__action--hover:has(.note-card__action-icon--pinned), .note-card__action--hover:has(.note-card__action-icon--archived) { opacity: 1; } /* stopka: piguły z obwódką; Task samą ikoną w prawym dolnym rogu */ .note-card__actions { gap: 4px 6px; margin-top: 8px; } .note-card__action, .note-card__action--icon-only { border: 1px solid var(--ct-border-color, var(--hodl-border)); border-radius: var(--hodl-radius-pill); padding: 4px 0.75rem; transition: border-color 0.12s ease, color 0.12s ease; } .note-card__action--icon-only { padding: 4px 8px; } .note-card__action:hover { border-color: currentcolor; color: var(--ct-primary, var(--hodl-accent)); background: transparent; } .note-card__action i { font-size: 1rem; } .note-card__action[aria-label="Like"]:hover { color: var(--hodl-down-text); } .note-card__action[aria-label="Comments"]:hover { color: var(--hodl-info-text); } .note-card__actions-end { gap: 4px; } /* ── Dymek komentarza wyróżniony, gdy TY komentowałeś (jak serduszko) ── */ .note-card__action-icon--commented { color: var(--hodl-info-text) !important; } /* ── Panel Portfolio (feed /, /my_page/): nagłówek pod kwotą idzie za widokiem ⊞ (zadanie 4 Portfolio, wariant B 2026-08-29). Trzy warianty w markupie, CSS pokazuje jeden — ten sam wzorzec co .pf-fig wyżej. ─────────────────────────── */ #portfolio-panel .side-panel__pf-hdr { display: none; } #portfolio-panel[data-pf-view="value"] .side-panel__pf-hdr[data-pf-hdr="value"], #portfolio-panel[data-pf-view="pnl"] .side-panel__pf-hdr[data-pf-hdr="pnl"] { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } #portfolio-panel[data-pf-view="changes"] .side-panel__pf-hdr[data-pf-hdr="changes"] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; } .side-panel__pf-hdr-row { display: flex; align-items: baseline; gap: 6px; } .side-panel__pf-hdr-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ct-secondary-color, var(--hodl-text-3)); opacity: 0.85; white-space: nowrap; } /* Menu sortowania paneli (Janek 2026-08-30): „Sort by" + przełącznik kierunku, Value, grupy chipów „Price change 24h/7d/30d" i „Profit since buy $/%" — czytelnie i kompaktowo. */ .side-panel__sort-menu { min-width: 13.5rem; padding: 6px; } .side-panel__sort-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 6px 4px; } .side-panel__sort-menu-title, .side-panel__sort-group-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ct-secondary-color, var(--hodl-text-3)); } .side-panel__sort-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1.1; padding: 2px 8px; border-radius: var(--hodl-radius-sm); border: 1px solid var(--ct-border-color, var(--hodl-border)); background: transparent; color: var(--ct-emphasis-color, var(--hodl-text)); cursor: pointer; white-space: nowrap; } .side-panel__sort-dir i { font-size: 14px; line-height: 1; } .side-panel__sort-dir:hover { background: var(--hodl-surface-3); } .side-panel__sort-dir[aria-pressed="true"] { border-color: var(--hodl-accent, var(--hodl-accent)); color: var(--hodl-accent, var(--hodl-accent)); } .side-panel__sort-menu > li > .dropdown-item { padding: 6px 8px; } .side-panel__sort-group { padding: 4px 6px 0.12rem; } .side-panel__sort-group-lbl { display: block; margin-bottom: 2px; } .side-panel__sort-chips { display: flex; gap: 0.25rem; } .side-panel__sort-menu .side-panel__sort-chips .dropdown-item { width: auto; flex: 1 1 0; text-align: center; padding: 4px 6px; font-size: 12px; border: 1px solid transparent; } .side-panel__sort-menu .side-panel__sort-chips .dropdown-item.active { border-color: var(--hodl-accent); } html:not([data-bs-theme=dark]) .side-panel .side-panel__sort-dir { color: var(--ct-emphasis-color, var(--hodl-text-2)); border-color: var(--hodl-border); } /* ── Pola natywne: data, liczba, czas, kolor, plik ──────────────────────────── Bez tego przeglądarka rysuje je własnymi barwami (w ciemnym motywie wychodziły szare prostokąty niezależne od palety). Ustawiamy tylko kolory i kształt — rozmiary i odstępy zostają, jakie były. ⚠️ Wyłącznie pola BEZ klasy: pole z klasą ma własne style modułu, a dołożenie obramowania zmieniało jego rozmiar (wpadka złapana dowodem geometrii na /tasks/). */ input[type="date"]:not([class]), input[type="datetime-local"]:not([class]), input[type="time"]:not([class]), input[type="month"]:not([class]), input[type="week"]:not([class]), input[type="number"]:not([class]), input[type="search"]:not([class]), input[type="text"]:not([class]), textarea:not([class]), select:not([class]) { background-color: var(--hodl-surface-2); color: var(--hodl-text); /* tylko KOLOR obramowania — grubość zostawiamy przeglądarce, inaczej pole zmienia rozmiar */ border-color: var(--hodl-border); border-radius: var(--hodl-radius-md); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(var(--hodl-icon-invert, 0)); opacity: .7; } html[data-bs-theme=dark] { --hodl-icon-invert: 1; } /* ── Zaznaczenie klawiaturą (Tab) — jedna reguła na całą apkę ───────────────── Audyt 2026-09-06: 136 rodzajów elementów nie dawało ŻADNEGO sygnału po Tab — nawigacja klawiaturą była praktycznie niemożliwa. `:focus-visible` pokazuje obwódkę tylko przy klawiaturze, więc klikanie myszą wygląda jak dotąd. `outline` nie wpływa na układ (nie zajmuje miejsca), więc nic się nie przesuwa. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--hodl-accent); outline-offset: 2px; border-radius: var(--hodl-radius-sm); } /* Elementy na kolorowym tle (przycisk główny, aktywna pozycja paska) — obwódka w kolorze powierzchni, żeby była widoczna na akcencie. */ :where(.btn-primary, .side-nav-link.active, .hodl-rail a.active):focus-visible { outline-color: var(--hodl-surface); } /* Vendor Bootstrapa gasi własny cień focusu — przywracamy go w kolorze palety. */ :where(.form-control, .form-select, .form-check-input):focus { border-color: var(--hodl-accent); box-shadow: 0 0 0 3px var(--hodl-focus-ring); } /* ── Obszar kliknięcia małych kontrolek ────────────────────────────────────── Audyt 2026-09-06: 122 rodzaje przycisków i przełączników miały cel mniejszy niż 24 px (przełączniki w /my_table/ 15×15, „ⓘ" w Raportach 20×17). Na myszy to znośne, palcem to trafianie w igłę. Technika: niewidoczna nakładka `::after` wychodząca poza element. NIC nie zmienia się wizualnie ani w układzie — pseudoelement jest pozycjonowany absolutnie, więc nie zajmuje miejsca. Element dostaje `position: relative`, żeby nakładka liczyła się od niego. Nie stosujemy tego do elementów z `overflow: hidden` (nakładka byłaby przycięta) — te są wypisane niżej z powiększonym `padding` zamiast nakładki. */ :where( .rv-mod__collapse, .js-table-sort, .note-card__date, .note-card__chip, .pred-htag, .tk-row__act, .hodl-task__check, .hodl-task__title-link, .side-panel__filter-chip, .side-panel__section-label, .pf2-lh-value, .pf2-lh-pnl, .pf2-lh-actions, .scanner-beta-bar__x, .lab-rest-btn, .user-profile-card-link, .mt-ipill, .mt-coin-verdict, .mt-rank-hot, .mt-note-trigger, .mt-coin-cell__symbol, .rv-info-btn, .rv-vis-btn, .rv-status, .rv-note-btn, .rv-mod__vis-btn, .rv-link, .pred-newbtn, .pred-dec, .pred-hot-badge, .lab-link, .lab-sim-chkbox, .note-card__title-link, .ind-author, .side-panel__title, .pf-history-unit__btn, .pf2-lh-asset, .pf2-lh-spark, .pf2-lh-price ) { position: relative; } :where( .rv-mod__collapse, .js-table-sort, .note-card__date, .note-card__chip, .pred-htag, .tk-row__act, .hodl-task__check, .hodl-task__title-link, .side-panel__filter-chip, .side-panel__section-label, .pf2-lh-value, .pf2-lh-pnl, .pf2-lh-actions, .scanner-beta-bar__x, .lab-rest-btn, .user-profile-card-link, .mt-ipill, .mt-coin-verdict, .mt-rank-hot, .mt-note-trigger, .mt-coin-cell__symbol, .rv-info-btn, .rv-vis-btn, .rv-status, .rv-note-btn, .rv-mod__vis-btn, .rv-link, .pred-newbtn, .pred-dec, .pred-hot-badge, .lab-link, .lab-sim-chkbox, .note-card__title-link, .ind-author, .side-panel__title, .pf-history-unit__btn, .pf2-lh-asset, .pf2-lh-spark, .pf2-lh-price )::after { content: ""; position: absolute; inset: -6px; /* nakładka tylko łapie kliknięcia — nie rysuje się i nie zasłania sąsiadów */ background: transparent; pointer-events: auto; } /* ── Skala ikon ────────────────────────────────────────────────────────────── Audyt 2026-09-06: ikony (wszystkie Remix) miały na ekranie 10 różnych rozmiarów, bo większość dziedziczy `font-size` z otoczenia — ikona w wierszu z drobnym tekstem robiła się 10 px i ginęła. Reguły niżej mają ZEROWĄ ważność (`:where`), więc każda istniejąca reguła modułu je bije. Ustawiają rozmiar tylko tam, gdzie ikona dotąd po prostu dziedziczyła. */ :where(i, span)[class*="ri-"] { font-size: 16px; } /* gęste miejsca — tabele, chipy, plakietki, wiersze meta */ :where(td, th, .badge, .chip, [class*="chip"], [class*="badge"], [class*="pill"], [class*="meta"], [class*="__sub"], small) :where(i, span)[class*="ri-"] { font-size: 14px; } /* pasek boczny i górny — ikony są tam jedynym oznaczeniem, więc większe */ :where(.hodl-rail, .leftside-menu, .hodl-topbar) :where(i, span)[class*="ri-"] { font-size: 18px; } /* nagłówki sekcji i kart */ :where(h1, h2, h3, h4, [class*="__head"], [class*="-head"]) :where(i, span)[class*="ri-"] { font-size: 18px; } /* ══════════════════════════════════════════════════════════════════════════════ RODZINA OKIENEK I DROBIAZGI INTERFEJSU — agent `design`, 2026-09-06 (paczki 2·3·5·7·9) Jedna definicja modala, menu rozwijanego, dymka, pustego stanu i szkieletu ładowania dla całej apki. Kolory i kształty WYŁĄCZNIE z tokenów (hodl-tokens.css). ══════════════════════════════════════════════════════════════════════════════ */ /* ── Modal: jeden arkusz dla 24 okien ────────────────────────────────────────── Bootstrap/Hyper czyta te zmienne w .modal-content/.modal-header/.modal-footer. Warianty modułów (pf-position-modal__sheet, profile-editor__sheet…) dziedziczą kształt i cień, a dokładają tylko własny układ w środku. */ .modal { --ct-modal-bg: var(--hodl-surface); --ct-modal-color: var(--hodl-text); --ct-modal-border-color: var(--hodl-border); --ct-modal-border-width: 1px; --ct-modal-border-radius: var(--hodl-radius-lg); --ct-modal-inner-border-radius: calc(var(--hodl-radius-lg) - 1px); --ct-modal-box-shadow: var(--hodl-shadow-lg); --ct-modal-box-shadow-sm-up: var(--hodl-shadow-lg); --ct-modal-header-border-color: var(--hodl-border-subtle); --ct-modal-footer-border-color: var(--hodl-border-subtle); --ct-modal-header-padding: 16px 16px 12px; --ct-modal-padding: 16px 16px; --ct-modal-footer-gap: 8px; } .modal .modal-content { box-shadow: var(--hodl-shadow-lg); } .modal .modal-title { font-size: 16px; font-weight: 700; line-height: 1.3; } .modal .modal-footer { padding: 12px 16px 16px; } .modal .btn-close { border-radius: var(--hodl-radius-sm); opacity: 0.6; transition: opacity 0.15s ease, background-color 0.15s ease; } .modal .btn-close:hover, .modal .btn-close:focus-visible { opacity: 1; background-color: var(--hodl-surface-3); } .modal-backdrop { --ct-backdrop-bg: var(--hodl-overlay); --ct-backdrop-opacity: 1; } /* Warianty modułów: ten sam cień i tło co reszta rodziny (były: 4 różne rgba). */ .pf-position-modal__sheet, [data-bs-theme="light"] .pf-position-modal__sheet { background-color: var(--hodl-surface); border-color: var(--hodl-border); box-shadow: var(--hodl-shadow-lg); } .confirm-delete-modal { box-shadow: var(--hodl-shadow-lg); } /* ── Menu rozwijane: jeden kształt dla 8 wariantów ──────────────────────────── */ .dropdown-menu { --ct-dropdown-bg: var(--hodl-surface); --ct-dropdown-color: var(--hodl-text); --ct-dropdown-border-color: var(--hodl-border); --ct-dropdown-border-radius: var(--hodl-radius-md); --ct-dropdown-inner-border-radius: var(--hodl-radius-sm); --ct-dropdown-padding-y: 6px; --ct-dropdown-padding-x: 6px; --ct-dropdown-item-padding-x: 12px; --ct-dropdown-item-padding-y: 7px; --ct-dropdown-link-color: var(--hodl-text); --ct-dropdown-link-hover-color: var(--hodl-text); --ct-dropdown-link-hover-bg: var(--hodl-surface-3); --ct-dropdown-link-active-color: var(--hodl-accent-text); --ct-dropdown-link-active-bg: var(--hodl-accent-soft); --ct-dropdown-link-disabled-color: var(--hodl-text-3); --ct-dropdown-divider-bg: var(--hodl-border-subtle); --ct-dropdown-divider-margin-y: 6px; --ct-dropdown-header-color: var(--hodl-text-3); --ct-dropdown-box-shadow: var(--hodl-shadow-md); box-shadow: var(--hodl-shadow-md); } .dropdown-menu .dropdown-item { border-radius: var(--hodl-radius-sm); } /* Trzy menu górnego paska (kierownik, v413: avatar, powiadomienia, szukajka) mają własną budowę z nagłówkami i stopką — zostają co do piksela (odstępy Bootstrapa jak przed zmianą). */ .dropdown-menu.profile-dropdown, .dropdown-menu.hodl-notif-menu, .dropdown-menu.dropdown-lg { --ct-dropdown-padding-y: 0.25rem; --ct-dropdown-padding-x: 0; --ct-dropdown-item-padding-x: 1.5rem; --ct-dropdown-item-padding-y: 0.375rem; --ct-dropdown-divider-margin-y: 0.75rem; } .dropdown-menu.profile-dropdown .dropdown-item, .dropdown-menu.hodl-notif-menu .dropdown-item, .dropdown-menu.dropdown-lg .dropdown-item { border-radius: 0; } /* tylko zwykłe nagłówki Bootstrapa (
); menu avatara i powiadomień (kierownik, v413) mają własne nagłówki i zostają bez zmian */ .dropdown-menu h6.dropdown-header { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ── Dymek podpowiedzi (hodl-ui.js) + dymki Bootstrapa w tym samym stroju ───── */ .hodl-tip { position: fixed; left: 0; top: 0; z-index: 2000; max-width: 280px; padding: 6px 8px; border-radius: var(--hodl-radius-sm); background: var(--hodl-text); color: var(--hodl-bg); font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal; box-shadow: var(--hodl-shadow-md); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .hodl-tip::after { content: ""; position: absolute; left: var(--hodl-tip-arrow-x, 50%); bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); } .hodl-tip.is-below::after { bottom: auto; top: -4px; } .hodl-tip.is-on { opacity: 1; transform: none; } .tooltip { --ct-tooltip-bg: var(--hodl-text); --ct-tooltip-color: var(--hodl-bg); --ct-tooltip-border-radius: var(--hodl-radius-sm); --ct-tooltip-font-size: 12px; --ct-tooltip-padding-x: 10px; --ct-tooltip-padding-y: 6px; --ct-tooltip-max-width: 280px; } .tooltip .tooltip-inner { font-weight: 600; box-shadow: var(--hodl-shadow-md); } /* ── Pusty stan: jeden wzór (makro empty_state w _hodl_ui.html) ─────────────── */ .hodl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; text-align: center; color: var(--hodl-text-2); } .hodl-empty__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: var(--hodl-radius-lg); background: var(--hodl-accent-soft); color: var(--hodl-accent); } .hodl-empty__icon i { font-size: 24px; line-height: 1; } .hodl-empty__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--hodl-text); } .hodl-empty__text { margin: 0; max-width: 44ch; font-size: 13px; line-height: 1.45; } .hodl-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } .hodl-empty--compact { gap: 2px; padding: 12px 12px; } .hodl-empty--compact .hodl-empty__icon { width: 32px; height: 32px; margin-bottom: 2px; border-radius: var(--hodl-radius-md); } .hodl-empty--compact .hodl-empty__icon i { font-size: 16px; } .hodl-empty--compact .hodl-empty__title { font-size: 13px; } .hodl-empty--compact .hodl-empty__text { font-size: 12px; } /* ── Szkielet ładowania: zamiast pustki, gdy moduł liczy ───────────────────── Użycie: dodaj klasę na element o docelowym rozmiarze (albo wstaw ), zdejmij, gdy dane przyjdą. */ .hodl-skeleton { position: relative; overflow: hidden; border-radius: var(--hodl-radius-sm); background: var(--hodl-surface-3); color: transparent !important; pointer-events: none; user-select: none; } .hodl-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hodl-text) 8%, transparent), transparent); animation: hodl-shimmer 1.4s ease-in-out infinite; } .hodl-skeleton--text { display: inline-block; width: 60%; height: 0.9em; vertical-align: middle; } .hodl-skeleton--circle { border-radius: 50%; } @keyframes hodl-shimmer { to { transform: translateX(100%); } } /* ── Ruch: płynna zmiana motywu, uniesienie karty (opt-in), wciśnięcie przycisku ── */ html.hodl-theme-fade, html.hodl-theme-fade *, html.hodl-theme-fade *::before, html.hodl-theme-fade *::after { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, fill 0.25s ease !important; } .hodl-hover-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; } .hodl-hover-lift:hover { transform: translateY(-1px); box-shadow: var(--hodl-shadow-md); } .btn:not(:disabled):not(.disabled):active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .hodl-skeleton::after { animation: none; } .hodl-hover-lift, .hodl-hover-lift:hover { transform: none; transition: none; } .btn:not(:disabled):not(.disabled):active { transform: none; } } /* ── Logo raz, nie dwa razy (decyzja Janka 2026-09-06): na komputerze zostaje znak w pasku bocznym; napis ze środka górnego paska znika. Na telefonie pasek boczny jest schowany, więc hodl-mobile.css nadal pokazuje napis (poniżej 992 px). */ @media (min-width: 992px) { .hodl-topbar .hodl-topbar-brand { display: none; } } /* ── JEDEN NAGŁÓWEK STRONY (wariant C „kompaktowy pasek", wybór Janka 2026-09-06 z makiet naglowek-c.html) i JEDEN PRZEŁĄCZNIK (S1 „pigułka w torze", przelacznik.html). Makra: page_head() i seg() w app/templates/_hodl_ui.html. Zastosowanie w modułach = osobna runda (po zgodzie kierownika); do tego czasu klasy nic nie zmieniają. ────────────────────────────── */ .hodl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--hodl-border-subtle); } .hodl-page-head__lead { display: flex; align-items: center; gap: 12px; /* `flex: 1 1 auto` + `min-width: 0` — bez tego pasek akcji szerszy od nagłówka ściskał tożsamość do ZERA i podtytuł łamał się na pojedyncze słowa (zmierzone na /scanner/ przy 390 px: lead 0 px, akcje 415 px na ekranie 390 px). Ta sama pułapka co w pf2-topbar. */ flex: 1 1 auto; min-width: 0; } .hodl-page-head__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--hodl-radius-md); background: var(--hodl-accent-soft); color: var(--hodl-accent); } .hodl-page-head__icon i { font-size: 18px; line-height: 1; } .hodl-page-head__text { min-width: 0; } .hodl-page-head__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--hodl-text); } .hodl-page-head__sub { margin: 1px 0 0; font-size: 13px; line-height: 1.4; color: var(--hodl-text-2); } .hodl-page-head__badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--hodl-radius-pill); border: 1px dashed var(--hodl-warn); background: var(--hodl-warn-soft); color: var(--hodl-warn-text); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .hodl-page-head__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .hodl-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--hodl-radius-pill); border: 1px solid var(--hodl-border); background: var(--hodl-surface-2); } /* moduły, które nie dają klasy przyciskom (lab, review, my_table) — bezpośrednie dziecko `