{"html":"

\n \n \n

\n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Jane Doe

\n CEO of media Ink\n

\n \n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Google Meet Call

\n 28 03 2024 at\n 2 pm\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Waiting

\n \n \n

\n","css":".card {\n --black: 0, 0%, 0%;\n --white: 0, 0%, 100%;\n --black-muted: 0, 0%, 13%;\n --white-smoke: 0, 0%, 89%;\n --green-light: 87, 73%, 63%;\n --gap: 12px;\n --w-card: 330px;\n --h-card: 280px;\n --p-card: 1rem;\n --gap-action: 6px;\n --sz-action: 58px;\n --index-action: 2;\n --round-card: calc(var(--sz-action) / 2 + calc(var(--gap-action) / 2));\n\n width: var(--w-card);\n height: var(--h-card);\n border-radius: var(--round-card);\n position: relative;\n background-color: var(--color-boxes, hsl(var(--green-light)));\n padding: var(--p-card);\n box-shadow: rgba(0, 0, 0, 0.15) -1.95px 1.95px 2.6px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.corner {\n position: absolute;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n height: auto;\n right: 0;\n top: 0;\n background-color: hsl(var(--white-smoke));\n z-index: 2;\n border-bottom-left-radius: var(--round-card);\n padding-bottom: var(--gap-action);\n padding-left: var(--gap-action);\n gap: var(--gap-action);\n}\n.corner i[data-corner] {\n position: absolute;\n width: 50%;\n height: 50%;\n z-index: 2;\n background-color: hsl(var(--white-smoke));\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.corner i[data-corner]::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border-top-right-radius: var(--round-card);\n background-color: var(--color-boxes, hsl(var(--green-light)));\n z-index: -1;\n}\n.corner i[data-corner=\"tl\"] {\n top: 0;\n right: 100%;\n}\n.corner i[data-corner=\"br\"] {\n right: 0;\n top: 100%;\n}\n.corner .action {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n height: var(--sz-action);\n min-height: var(--sz-action);\n max-height: var(--sz-action);\n width: var(--sz-action);\n min-width: var(--sz-action);\n max-width: var(--sz-action);\n border: none;\n outline: none;\n transition: all 0.5s ease;\n background-color: hsl(var(--white-smoke));\n color: hsl(var(--black-muted));\n box-shadow:\n rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,\n rgba(27, 31, 35, 0.15) 0px 0px 0px 1px,\n rgba(0, 0, 0, 0.07) 0px 1px 2px,\n rgba(0, 0, 0, 0.07) 0px 2px 4px;\n}\n.corner .action:hover {\n background: hsl(var(--green-light));\n}\n.corner .action svg {\n width: 32px;\n height: 32px;\n}\n.corner .action:hover svg {\n color: white;\n}\n\n.boxes {\n --sz-img: 46px;\n gap: 16px;\n width: 100%;\n position: relative;\n z-index: 9;\n max-width: 50%;\n height: var(--sz-img);\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.boxes .caption {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: calc(\n var(--w-card) - calc(var(--p-card) * 2) -\n calc(var(--sz-action) * var(--index-action)) -\n calc(var(--gap-action) * var(--index-action)) - var(--sz-img) - 16px\n );\n margin-top: 18px;\n}\n.boxes .name {\n font-size: 16px;\n font-weight: 600;\n line-height: 16px;\n}\n.boxes .as {\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: hsl(var(--black-muted));\n}\n.boxes .name,\n.boxes .as {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.box-body {\n --sz-img: 32px;\n gap: 16px;\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 9;\n}\n.box-body .box-content {\n gap: 16px;\n display: flex;\n align-items: start;\n justify-content: flex-start;\n flex-direction: row;\n position: relative;\n}\n.box-body .caption {\n gap: 4px;\n font-size: 1.25rem;\n line-height: 1.5;\n font-weight: 400;\n display: flex;\n align-items: start;\n flex-direction: column;\n}\n\n.box-foot {\n --sz-img: 36px;\n position: relative;\n z-index: 9;\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n}\n.box-foot::before {\n content: attr(data-title);\n position: absolute;\n bottom: calc(100% + 4px);\n color: hsl(var(--black-muted));\n min-width: max-content;\n font-size: 14px;\n}\n.box-foot-figure {\n font-weight: 400;\n outline: 1px solid hsl(var(--black-muted), 0.3);\n width: max-content;\n border-radius: 9999px;\n display: flex;\n align-items: center;\n flex-direction: row;\n position: relative;\n z-index: 1;\n gap: 0.5rem;\n padding: 0.5rem;\n overflow: hidden;\n}\n.box-foot-figure .img {\n transition: all 0.25s ease;\n position: relative;\n z-index: 1;\n}\n.box-foot-figure button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n cursor: pointer;\n outline: none;\n border: none;\n background: none transparent;\n transition: all 0.25s ease;\n}\n.box-foot-figure button svg {\n transition: all 0.25s ease;\n transform: rotate(45deg);\n}\n.box-foot-figure .img:hover {\n transform: scale(1.2);\n}\n.box-foot-figure .img:hover ~ button svg,\n.box-foot-figure button:hover svg {\n transform: scale(1.25) rotate(0);\n}\n.box-foot-actions {\n --sz-toggle: 46px;\n gap: var(--gap);\n display: grid;\n grid-auto-flow: column;\n}\n.box-foot-action {\n cursor: pointer;\n border-radius: 9999px;\n border: none;\n outline: none;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--sz-toggle);\n min-height: var(--sz-toggle);\n max-height: var(--sz-toggle);\n width: var(--sz-toggle);\n min-width: var(--sz-toggle);\n max-width: var(--sz-toggle);\n transition: all 0.5s ease;\n color: hsl(var(--black-muted), 0.75);\n}\n.box-foot-action[aria-label=\"meets\"] {\n background-color: hsl(var(--black-muted));\n color: hsl(var(--white-smoke));\n}\n.box-foot-action:hover {\n color: hsl(var(--black-muted));\n background-color: hsl(var(--white-smoke), 0.5);\n}\n.box-foot-action svg {\n height: calc(var(--sz-toggle) * 0.65);\n min-height: calc(var(--sz-toggle) * 0.65);\n max-height: calc(var(--sz-toggle) * 0.65);\n width: calc(var(--sz-toggle) * 0.65);\n min-width: calc(var(--sz-toggle) * 0.65);\n max-width: calc(var(--sz-toggle) * 0.65);\n}\n\n.img {\n font-size: 24px;\n font-weight: 800;\n border-radius: 9999px;\n height: var(--sz-img);\n min-height: var(--sz-img);\n max-height: var(--sz-img);\n width: var(--sz-img);\n min-width: var(--sz-img);\n max-width: var(--sz-img);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n color: hsl(var(--black-muted), 0);\n border: 1px solid hsl(var(--black-muted), 0);\n cursor: pointer;\n user-select: none;\n -moz-user-select: -moz-none;\n}\n.img svg {\n position: absolute;\n background-size: var(--sz-img);\n height: var(--sz-img);\n min-height: var(--sz-img);\n max-height: var(--sz-img);\n width: var(--sz-img);\n min-width: var(--sz-img);\n max-width: var(--sz-img);\n}\n\n.box-body .img {\n border-radius: 0;\n}\n\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-xs {\n font-size: 12px;\n}\n.text-sm {\n font-size: 14px;\n}\n"}

curvy-dragonfly-6

👁 实时预览

📝 源代码