β CSS Codes for Janitor.ai β
bot card animations
<style>
/* π Bio preview (hidden until hover) π */
.css-96l1id {
position: absolute;
top: 120px;
left: 0;
width: 100%;
height: 89px;
color: white;
text-align: center;
padding: 10px;
opacity: 0;
transform: translateY(30px);
transition: transform 0.4s ease, opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
/* π Tags container π */
.css-4ofde4 {
position: absolute;
top: 240px;
left: 0;
width: 100%;
height: 89px;
text-align: center;
padding: 10px;
opacity: 0;
transform: translateY(10px);
transition: transform 0.4s ease, opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
/* π Show bio & tags on hover π */
.css-1sxhvxh:hover .css-96l1id,
.css-1sxhvxh:hover .css-4ofde4 {
opacity: 1;
transform: translateY(0);
}
}
/* π Bot card size π */ .css-1s5evre { height: 450px; position: relative; overflow: hidden; }
/* π Bot image π */ .css-1q7rmf0 { height: 450px; object-fit: cover; transition: filter 0.3s ease; }
/* π On hover, image dims π */ .css-1sxhvxh:hover .css-1q7rmf0 { filter: brightness(30%); }
/* π Put bot name at bottom π */ .css-1s5evre > a { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; }
/* π Bot name style π */ .css-zgqw37 { font-size: 20px; position: absolute; left: 0; top: 400px; text-align: center; width: 100%; z-index: 7; }
/* π Bio preview (hidden until hover) π */ .css-96l1id { position: absolute; top: 120px; left: 0; width: 100%; height: 89px; color: white; text-align: center; padding: 10px; opacity: 0; backface-visibility: hidden; transition: transform 0.6s, opacity 0.3s; display: flex; align-items: center; justify-content: center; }
/* π Tags container π */ .css-4ofde4 { position: absolute; top: 240px; left: 0; width: 100%; height: 89px; text-align: center; padding: 10px; opacity: 0; transition: transform 0.6s, opacity 0.3s; display: flex; align-items: center; justify-content: center; }
/* π Show bio & tags on hover π */ .css-1sxhvxh:hover .css-96l1id, .css-1sxhvxh:hover .css-4ofde4 { opacity: 1; transform: rotateY(0deg); }
/* π Limitless tag π */ .css-1ylu7un { border: none; border-radius: 0px; font-size: 0.8rem; padding: 3px 12px; margin: 6px 0; width: fit-content; white-space: nowrap; Width: 150px; }
/* π Tags container layout π */ .css-k1urot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; z-index: 1; }
/* π Regular tags π */ .css-x2gqu0, [href*="custom_tags"] span { border-radius: 0; padding: 2px 8px; font-size: 0.7rem; white-space: nowrap; }
/* π Clean up card background π */ .css-2n7zf2 > div > div:not(:first-child):not(:last-child) > div, .css-2n7zf2 > div > div:not(:first-child):not(:last-child) > div > div:nth-child(-n+5):not(.css-1s5evre) {
background: transparent !important; }
/* π Hide divider and username π */ .css-1lgnt2x, .css-1m151rf, .css-fo6ddv:nth-child(2) { display: none !important; }
/* π Optional: star icon hidden π */ .css-1h8fads { display: none; } /* π makes the username go dark when hoveringπ */ .css-1sxhvxh:hover .css-zgqw37 { filter: brightness(30%); } </style>