{"html":"

Play

\n \n

32hrs

Last Week-36hrs

","css":".card {\n --primary-clr: #1C204B;\n --dot-clr: #BBC0FF;\n --play: hsl(195, 74%, 62%);\n width: 200px;\n height: 170px;\n border-radius: 10px;\n}\n\n.card {\n font-family: \"Arial\";\n color: #fff;\n display: grid;\n cursor: pointer;\n grid-template-rows: 50px 1fr;\n}\n\n.card:hover .img-section {\n transform: translateY(1em);\n}\n\n.card-desc {\n border-radius: 10px;\n padding: 15px;\n position: relative;\n top: -10px;\n display: grid;\n gap: 10px;\n background: var(--primary-clr);\n}\n\n.card-time {\n font-size: 1.7em;\n font-weight: 500;\n}\n\n.img-section {\n transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n background: hsl(195, 74%, 62%);\n}\n\n.card-header {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.card-title {\n flex: 1;\n font-size: 0.9em;\n font-weight: 500;\n}\n\n.card-menu {\n display: flex;\n gap: 4px;\n margin-inline: auto;\n}\n\n.card svg {\n float: right;\n max-width: 100%;\n max-height: 100%;\n}\n\n.card .dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--dot-clr);\n}\n\n.card .recent {\n line-height: 0;\n font-size: 0.8em;\n}"}

brown-puma-94

👁 实时预览

📝 源代码