openclaw
Version:
Multi-channel AI gateway with extensible messaging integrations
2 lines (1 loc) • 3.81 kB
CSS
.lobsterdex-page{gap:22px;display:grid}.lobsterdex-page__header{border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%), var(--card);justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 20px;display:flex;position:relative;overflow:hidden}.lobsterdex-page__header:after{content:"";background:0 0;height:2px;position:absolute;bottom:0;left:18px;right:18px}.lobsterdex-page__header--complete:after{opacity:.7;background:linear-gradient(90deg,#0000,#f4b840 30%,#f9d47a 50%,#f4b840 70%,#0000)}.lobsterdex-page__header h2,.lobsterdex-page__card h3,.lobsterdex-page__header p,.lobsterdex-page__card p{margin:0}.lobsterdex-page__header h2{letter-spacing:-.025em;font-size:24px}.lobsterdex-page__header p{color:var(--muted);margin-top:4px}.lobsterdex-page__count{border:1px solid var(--border);color:var(--muted);background:color-mix(in srgb, var(--card) 75%, transparent);border-radius:999px;flex:none;padding:5px 9px;font-size:12px;font-weight:650}.lobsterdex-page__header--complete .lobsterdex-page__count{border-color:color-mix(in srgb, #f4b840 55%, var(--border));color:color-mix(in srgb, #f4b840 75%, var(--text))}.lobsterdex-page__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.lobsterdex-page__card{border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white 6%), var(--card));text-align:center;grid-template-rows:94px auto minmax(42px,auto) auto;justify-items:center;gap:7px;min-width:0;padding:16px 13px 13px;display:grid;position:relative;box-shadow:0 8px 22px #00000014}.lobsterdex-page__card--highlight{animation:2s ease-out lobsterdex-card-highlight}@keyframes lobsterdex-card-highlight{0%,to{border-color:var(--border);box-shadow:0 8px 22px #00000014}35%{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 34%, transparent)}}.lobsterdex-page__card--unseen{box-shadow:none;border-style:dashed}.lobsterdex-page__sprite.lobster-pet{aspect-ratio:120/105;pointer-events:none;align-self:center;width:90px;height:auto;position:relative;bottom:auto;left:auto;transform:none}.lobsterdex-page__card h3{color:var(--text-strong);font-size:14px;font-weight:700}.lobsterdex-page__lore{color:var(--muted);font-size:12px;line-height:1.4}.lobsterdex-page__date{color:var(--muted);font-size:10px}.lobsterdex-page__dates{min-height:18px}.lobsterdex-page__copy-link{width:26px;height:26px;color:var(--muted);background:color-mix(in srgb, var(--card) 82%, transparent);opacity:0;pointer-events:none;cursor:var(--cursor-action);border:0;border-radius:7px;place-items:center;padding:5px;transition:opacity .16s,color .16s,background .16s;display:grid;position:absolute;top:8px;left:8px}.lobsterdex-page__copy-link svg{width:15px;height:15px}.lobsterdex-page__card:focus-within .lobsterdex-page__copy-link{opacity:1;pointer-events:auto}@media (hover:hover){.lobsterdex-page__card:hover .lobsterdex-page__copy-link{opacity:1;pointer-events:auto}}@media (hover:none){.lobsterdex-page__copy-link{opacity:.55;pointer-events:auto}}.lobsterdex-page__copy-link:focus-visible{color:var(--text-strong);background:color-mix(in srgb, var(--accent) 13%, var(--card))}@media (hover:hover){.lobsterdex-page__copy-link:hover{color:var(--text-strong);background:color-mix(in srgb, var(--accent) 13%, var(--card))}}.lobsterdex-page__star{filter:drop-shadow(0 0 4px #f4b84066);font-size:14px;top:-1px;right:1px}@media (width<=560px){.lobsterdex-page__header{flex-direction:column;align-items:flex-start;gap:12px}.lobsterdex-page__grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}