134 lines
3.2 KiB
CSS
134 lines
3.2 KiB
CSS
.f-chsearch {
|
|
@apply mt-6;
|
|
}
|
|
|
|
.f-chsearch__top {
|
|
@apply flex flex-col gap-1 mb-4;
|
|
}
|
|
|
|
/* wrapper dla X w środku inputa */
|
|
.f-chsearch__inputwrap {
|
|
@apply relative;
|
|
}
|
|
|
|
.f-chsearch__input {
|
|
@apply w-full md:flex-1 px-4 py-3 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] outline-none focus:ring-2 focus:ring-[--btn-background];
|
|
padding-right: 2.75rem;
|
|
/* miejsce na X */
|
|
}
|
|
|
|
.f-chsearch__clear {
|
|
@apply absolute right-2 top-1/2 -translate-y-1/2 grid place-items-center rounded-full border-0 bg-transparent text-[--f-text] opacity-70;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.f-chsearch__clear:hover {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.f-chsearch-meta {
|
|
@apply text-sm opacity-70 pl-1 ml-2;
|
|
}
|
|
|
|
/* =========================
|
|
List + Row layout
|
|
========================== */
|
|
.f-chsearch__list {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.f-chsearch__row {
|
|
@apply grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6 rounded-2xl border border-[--f-input-border] bg-[--f-background] p-4;
|
|
}
|
|
|
|
/* =========================
|
|
Column 1: Channel card
|
|
========================== */
|
|
.f-chsearch__left {
|
|
@apply flex flex-col items-center text-center gap-1 px-2;
|
|
}
|
|
|
|
.f-chsearch__logo {
|
|
@apply w-14 h-14 object-contain bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-1 mb-1;
|
|
}
|
|
|
|
.f-chsearch__channel-name {
|
|
@apply font-semibold text-[--fuz-header] leading-tight;
|
|
}
|
|
|
|
/* =========================
|
|
Column 2: Description + Packages
|
|
========================== */
|
|
.f-chsearch__right {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.f-chsearch__desc {
|
|
@apply text-sm md:text-base opacity-90;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.f-chsearch__desc--html :global(p) {
|
|
@apply mb-2;
|
|
}
|
|
|
|
.f-chsearch__desc--html :global(ol),
|
|
.f-chsearch__desc--html :global(ul) {
|
|
@apply pl-6 mb-2;
|
|
}
|
|
|
|
.f-chsearch__desc--html :global(li) {
|
|
@apply mb-1;
|
|
}
|
|
|
|
.f-chsearch__packages {
|
|
@apply text-sm opacity-80;
|
|
}
|
|
|
|
/* klikalny pakiet jak link */
|
|
.f-chsearch-pkg {
|
|
@apply inline-flex items-center justify-center gap-2 font-semibold rounded-lg px-2 py-0 ml-2
|
|
text-base transition-all duration-200 cursor-pointer select-none
|
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-[--f-header] focus-visible:ring-offset-2 focus-visible:ring-offset-[--f-background];
|
|
@apply border border-transparent bg-[--btn-background] text-[--btn-text];
|
|
/* @apply inline
|
|
text-xl;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
|
|
color: var(--f-link, var(--btn-background));
|
|
text-decoration: underline; */
|
|
}
|
|
|
|
.f-chsearch-pkg:hover {
|
|
@apply bg-[--btn-background-hover] text-[--btn-text-hover];
|
|
/* text-decoration-thickness: 2px; */
|
|
}
|
|
|
|
.f-chsearch-pkgnum {
|
|
@apply opacity-70;
|
|
}
|
|
|
|
/* =========================
|
|
Empty state
|
|
========================== */
|
|
.f-chsearch-empty {
|
|
@apply mt-2 p-4 text-lg;
|
|
}
|
|
|
|
.f-chsearch__input::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.f-chsearch__input::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
.f-chsearch__input[type="search"] {
|
|
appearance: none;
|
|
} |