83 lines
2.4 KiB
CSS
83 lines
2.4 KiB
CSS
/* ============================================================
|
|
keyring.css — lanyard.cafe webring widget (#lc-embed)
|
|
re-theme. Bottom-left, shared across all pages.
|
|
============================================================ */
|
|
|
|
/* =====================================================================
|
|
* lanyard.cafe keyring (webring) — embed.js injects #lc-embed with all
|
|
* styles inline, so every override here needs !important. Re-themes the
|
|
* default cream/brown look to Catppuccin and the site font, keeping the
|
|
* widget floating in the bottom-left (which is otherwise empty chrome).
|
|
* ===================================================================== */
|
|
#lc-embed {
|
|
font-family: 'Comic Code', 'Quicksand', system-ui, sans-serif !important;
|
|
left: 1rem !important;
|
|
bottom: 1rem !important;
|
|
z-index: 5 !important;
|
|
}
|
|
|
|
#lc-embed>section {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* the card */
|
|
#lc-embed>section>div {
|
|
background: var(--surface-0) !important;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45) !important;
|
|
border-radius: 14px !important;
|
|
box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.7) !important;
|
|
}
|
|
|
|
/* prev / random / next buttons */
|
|
#lc-embed a {
|
|
background: var(--surface-1) !important;
|
|
border-radius: 10px !important;
|
|
font-weight: 600 !important;
|
|
transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease !important;
|
|
}
|
|
|
|
#lc-embed a:nth-child(1),
|
|
#lc-embed a:nth-child(3) {
|
|
color: rgb(var(--accent-rgb)) !important;
|
|
}
|
|
|
|
#lc-embed a:nth-child(2) {
|
|
color: var(--lavender) !important;
|
|
}
|
|
|
|
#lc-embed a:hover {
|
|
background: var(--surface-2) !important;
|
|
transform: translateY(-2px) !important;
|
|
}
|
|
|
|
/* the "you are at <url>" line */
|
|
#lc-embed p {
|
|
color: var(--subtext-0) !important;
|
|
}
|
|
|
|
#lc-embed p span {
|
|
color: rgb(var(--accent-rgb)) !important;
|
|
}
|
|
|
|
/* On mobile the body is a single flex column and every other floating
|
|
widget (nav, badges, presence card) is reflowed into it. The keyring,
|
|
left fixed, floated over the nav pills when scrolled to the bottom — so
|
|
here we drop it into the column too, last and centered. */
|
|
@media (max-width: 640px) {
|
|
#lc-embed {
|
|
position: static !important;
|
|
inset: auto !important;
|
|
order: 6 !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
z-index: auto !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
#lc-embed>section>div {
|
|
min-width: 0 !important;
|
|
}
|
|
}
|
|
|