/* * Kötés-szerkesztő (AttributeBindingManager) — saját stíluslap. * * MIÉRT KELL: a panel a Filament ELŐRE FORDÍTOTT CSS-ét használja (nincs saját * Tailwind build), abban pedig csak a Filament-komponensek által használt * utility-osztályok szerepelnek. A dark:*, group-hover:*, arbitrary-value * ([22rem]) osztályok többsége HIÁNYZIK belőle — némán nem stílusozódnak. * Ezért itt minden a .abm-* szemantikus osztályokon él. * * Sötét mód: a Filament a elemre .dark osztályt tesz. * Primary szín: a Filament RGB-hármasként adja (--primary-600: R G B). */ .abm { display: flex; flex-direction: column; margin: -1.5rem; font-size: .875rem; } /* Beágyazott mód (kategória-szerkesztő űrlap alján): a modál-paddingot kompenzáló negatív margó helyett önálló kártya-keret. */ .abm--embedded { margin: 0; border: 1px solid rgb(231 229 228); border-radius: .75rem; overflow: hidden; background: #fff; } .dark .abm--embedded { border-color: rgb(255 255 255 / .1); background: rgb(28 25 23); } /* ── fejléc + mérők ─────────────────────────────────────────── */ .abm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .8rem 1rem; border-bottom: 1px solid rgb(231 229 228); } .dark .abm-head { border-color: rgb(255 255 255 / .1); } .abm-head-title { margin-right: auto; min-width: 0; } .abm-head-title b { display: block; font-size: 1rem; font-weight: 700; color: rgb(12 10 9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .abm-head-title b { color: #fff; } .abm-head-title span { display: block; font-size: .75rem; color: rgb(120 113 108); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abm-meters { display: flex; flex-wrap: wrap; gap: .4rem; } .abm-meter { display: inline-flex; align-items: baseline; gap: .4rem; padding: .25rem .6rem; border-radius: .5rem; font-size: .75rem; } .abm-meter b { font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 700; } .abm-meter--inherit { background: rgb(240 249 255); color: rgb(3 105 161); } .abm-meter--own { background: rgb(236 253 245); color: rgb(4 120 87); } .abm-meter--warn { background: rgb(255 251 235); color: rgb(180 83 9); } .dark .abm-meter--inherit { background: rgb(2 132 199 / .12); color: rgb(56 189 248); } .dark .abm-meter--own { background: rgb(5 150 105 / .12); color: rgb(52 211 153); } .dark .abm-meter--warn { background: rgb(180 83 9 / .15); color: rgb(251 191 36); } /* ── panelrács + gutter ─────────────────────────────────────── */ .abm-panes { display: grid; grid-template-columns: 1fr; background: rgb(231 229 228); gap: 1px; } @media (min-width: 768px) { .abm-panes { grid-template-columns: 1fr auto 1fr; } } .dark .abm-panes { background: rgb(255 255 255 / .1); } .abm-pane { display: flex; flex-direction: column; min-width: 0; background: #fff; } .dark .abm-pane { background: rgb(28 25 23); } .abm-pane-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid rgb(231 229 228); background: rgb(250 250 249); } .dark .abm-pane-head { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .04); } .abm-pane-head h3 { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(120 113 108); } .dark .abm-pane-head h3 { color: rgb(168 162 158); } .abm-pane-count { margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums; color: rgb(120 113 108); } .abm-search { padding: .5rem .75rem; border-bottom: 1px solid rgb(231 229 228); } .dark .abm-search { border-color: rgb(255 255 255 / .1); } .abm-search input { width: 100%; font: inherit; font-size: .85rem; padding: .4rem .65rem; border: 1px solid rgb(214 211 209); border-radius: .5rem; background: rgb(250 250 249); color: rgb(28 25 23); } .dark .abm-search input { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); color: #fff; } .abm-search input:focus { outline: 2px solid rgb(var(--primary-500)); outline-offset: 1px; border-color: rgb(var(--primary-500)); } .abm-newgroup { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid rgb(231 229 228); background: rgb(var(--primary-50)); } .dark .abm-newgroup { border-color: rgb(255 255 255 / .1); background: rgb(var(--primary-500) / .06); } .abm-newgroup input { flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: .35rem .6rem; border: 1px solid rgb(var(--primary-400)); border-radius: .5rem; background: #fff; color: rgb(28 25 23); } .dark .abm-newgroup input { background: rgb(28 25 23); color: #fff; } .abm-newgroup input:focus { outline: 2px solid rgb(var(--primary-500)); outline-offset: 1px; } [x-cloak] { display: none !important; } .abm-list { list-style: none; margin: 0; padding: .35rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 15rem; max-height: 22rem; } .abm-empty { padding: 1.5rem .5rem; text-align: center; font-size: .85rem; color: rgb(168 162 158); } .abm-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .4rem .55rem; border-radius: .5rem; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s; } .abm-item:hover { background: rgb(250 250 249); } .dark .abm-item:hover { background: rgb(255 255 255 / .05); } .abm-item:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: -1px; } .abm-item--selected { border-color: rgb(var(--primary-500)); background: rgb(var(--primary-50)); } .dark .abm-item--selected { background: rgb(var(--primary-500) / .1); } .abm-item--inherited { cursor: not-allowed; opacity: .8; } .abm-item--inherited:hover { background: transparent; } .dark .abm-item--inherited:hover { background: transparent; } .abm-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(12 10 9); } .dark .abm-item-name { color: #fff; } .abm-item-meta { display: flex; align-items: center; gap: .35rem; flex: none; } .abm-box { width: 15px; height: 15px; flex: none; display: grid; place-items: center; border: 1.5px solid rgb(214 211 209); border-radius: 4px; } .dark .abm-box { border-color: rgb(255 255 255 / .2); } .abm-box svg { width: 11px; height: 11px; color: #fff; opacity: 0; } .abm-item--selected .abm-box { background: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); } .abm-item--selected .abm-box svg { opacity: 1; } .abm-box--dashed { border-style: dashed; } .abm-pill { flex: none; padding: .1rem .4rem; border-radius: .3rem; font-size: .68rem; font-variant-numeric: tabular-nums; background: rgb(231 229 228); color: rgb(68 64 60); } .dark .abm-pill { background: rgb(255 255 255 / .1); color: rgb(214 211 209); } .abm-tag-inherit { padding: .1rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 600; background: rgb(240 249 255); color: rgb(3 105 161); white-space: nowrap; } .dark .abm-tag-inherit { background: rgb(2 132 199 / .12); color: rgb(56 189 248); } .abm-tag-status { padding: .1rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 600; border: 1px solid rgb(214 211 209); background: transparent; color: rgb(120 113 108); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; } .dark .abm-tag-status { border-color: rgb(255 255 255 / .15); color: rgb(168 162 158); } .abm-tag-status:hover { border-color: rgb(var(--primary-500)); color: rgb(var(--primary-600)); } .abm-gutter { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; background: rgb(250 250 249); } @media (min-width: 768px) { .abm-gutter { flex-direction: column; } } .dark .abm-gutter { background: rgb(255 255 255 / .04); } .abm-xfer { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; cursor: pointer; border: 1px solid rgb(214 211 209); border-radius: .5rem; background: #fff; color: rgb(87 83 78); transition: background-color .15s, color .15s, border-color .15s; } .dark .abm-xfer { border-color: rgb(255 255 255 / .1); background: rgb(28 25 23); color: rgb(214 211 209); } .abm-xfer svg { width: 1.05rem; height: 1.05rem; } .abm-xfer:hover:not(:disabled) { background: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); color: #fff; } .abm-xfer:disabled { opacity: .35; cursor: not-allowed; } .abm-xfer:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; } /* ── alsó nézősáv ───────────────────────────────────────────── */ .abm-detail { border-top: 1px solid rgb(231 229 228); background: rgb(250 250 249); } .dark .abm-detail { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } .abm-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 1rem; } .abm-detail-head h4 { margin: 0; font-size: .875rem; font-weight: 700; color: rgb(12 10 9); } .dark .abm-detail-head h4 { color: #fff; } .abm-detail-sub { font-size: .72rem; color: rgb(120 113 108); } .abm-detail-scroll { max-height: 13rem; overflow: auto; border-top: 1px solid rgb(231 229 228); } .dark .abm-detail-scroll { border-color: rgb(255 255 255 / .1); } .abm-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .abm-table th { position: sticky; top: 0; padding: .35rem 1rem; text-align: left; font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgb(120 113 108); background: rgb(250 250 249); } .dark .abm-table th { background: rgb(41 37 36); color: rgb(168 162 158); } .abm-table th.abm-num, .abm-table td.abm-num { text-align: right; font-variant-numeric: tabular-nums; } .abm-table td { padding: .35rem 1rem; border-top: 1px solid rgb(231 229 228); white-space: nowrap; color: rgb(28 25 23); } .dark .abm-table td { border-color: rgb(255 255 255 / .08); color: rgb(231 229 228); } .abm-row--inactive td { opacity: .45; } .abm-row--draft td { background: rgb(var(--primary-50)); } .dark .abm-row--draft td { background: rgb(var(--primary-500) / .06); } .abm-type { padding: .08rem .35rem; border-radius: .25rem; font-size: .66rem; background: rgb(231 229 228); color: rgb(68 64 60); } .dark .abm-type { background: rgb(255 255 255 / .1); color: rgb(214 211 209); } .abm-table input[type="text"], .abm-table input[type="number"], .abm-table select { font: inherit; font-size: .8rem; padding: .2rem .4rem; border: 1px solid rgb(214 211 209); border-radius: .375rem; background: #fff; color: rgb(28 25 23); } .dark .abm-table input[type="text"], .dark .abm-table input[type="number"], .dark .abm-table select { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .05); color: #fff; } .abm-table input[type="number"] { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; } .abm-table input[type="text"] { width: 100%; min-width: 10rem; } /* ── gombok ─────────────────────────────────────────────────── */ .abm-btn { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; padding: .3rem .7rem; border-radius: .5rem; border: 1px solid rgb(214 211 209); background: #fff; font: inherit; font-size: .78rem; font-weight: 600; color: rgb(68 64 60); transition: background-color .15s, color .15s, border-color .15s; } .dark .abm-btn { border-color: rgb(255 255 255 / .12); background: transparent; color: rgb(214 211 209); } .abm-btn:hover:not(:disabled) { border-color: rgb(var(--primary-500)); color: rgb(var(--primary-600)); } .abm-btn:disabled { opacity: .4; cursor: not-allowed; } .abm-btn:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; } .abm-btn svg { width: .8rem; height: .8rem; } .abm-btn--primary { background: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); color: #fff; } .dark .abm-btn--primary { color: #fff; } .abm-btn--primary:hover:not(:disabled) { background: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); color: #fff; } .abm-btn--mini { padding: .16rem .45rem; font-size: .7rem; } .abm-btn--ghost { border-color: transparent; background: transparent; } .abm-btn--danger:hover:not(:disabled) { border-color: rgb(225 29 72); color: rgb(225 29 72); } .abm-spin { animation: abm-spin 1s linear infinite; } @keyframes abm-spin { to { transform: rotate(360deg); } } /* ── lábléc ─────────────────────────────────────────────────── */ .abm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid rgb(231 229 228); } .dark .abm-foot { border-color: rgb(255 255 255 / .1); } .abm-dirty { margin-right: auto; display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 500; color: rgb(180 83 9); } .dark .abm-dirty { color: rgb(251 191 36); } .abm-dirty i { width: 7px; height: 7px; border-radius: 999px; background: rgb(245 158 11); } .abm-clean { margin-right: auto; font-size: .75rem; color: rgb(168 162 158); } @media (prefers-reduced-motion: reduce) { .abm *, .abm-spin { transition: none !important; animation: none !important; } }