discord-card-react/dist/style.css

React Discord profile card component

._discord-card-outer-body_1yxup_1{width:320px;background:#0000008c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0 0 8px 8px;padding:30px 2px 2px;margin:0 4px 4px}._discord-card-inner-body_1yxup_10{width:300px;background:#0000008c;border-radius:6px;padding:12px 16px 16px;margin:20px auto 10px}._container_1yxup_18{display:flex}._cardWrapper_1yxup_22{line-height:1.5rem;font-weight:400;color:#fff;background-color:#242424;border-radius:.5rem;z-index:20;width:328px}._cardContent_1yxup_32{padding:0;margin:0;width:328px;position:relative;-webkit-user-select:none;user-select:none}._profileSection_1yxup_40{position:absolute;z-index:10}._profileImage_1yxup_45{top:65px;left:20px;position:relative;border-radius:9999px;padding:.25rem;width:85px;height:85px;border:2px solid black;z-index:30}._profileBackgroundGradient_1yxup_57{top:-20px;left:20px;position:relative;border-radius:9999px;padding:.25rem;width:85px;height:85px;border:2px solid black;z-index:10}._profileShadowOverlay_1yxup_69{top:-105px;left:20px;position:relative;border-radius:9999px;padding:.25rem;width:85px;height:85px;border:2px solid black;z-index:10}._bannerImage_1yxup_81{width:328px;height:116px;padding:4px 4px 0;border-top-left-radius:.5rem;border-top-right-radius:.5rem}._statusIndicator_1yxup_92{position:absolute;width:24px;height:24px;border-radius:9999px;background-color:#222222ef;top:125px;right:226px;z-index:30;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}._statusIcon_1yxup_107{top:125px;right:226px;width:14px;height:14px;display:flex}._spaceY2_1yxup_116>*+*{margin-top:.5rem}._discordCardScope_vnrxk_2,._discordCardScope_vnrxk_2 *,._discordCardScope_vnrxk_2 :before,._discordCardScope_vnrxk_2 :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}._discordCardScope_vnrxk_2 :before,._discordCardScope_vnrxk_2 :after{--tw-content: ""}._discordCardScope_vnrxk_2{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}._discordCardScope_vnrxk_2 hr{height:0;color:inherit;border-top-width:1px}._discordCardScope_vnrxk_2 abbr:where([title]){text-decoration:underline dotted}._discordCardScope_vnrxk_2 a{color:inherit;text-decoration:inherit}._discordCardScope_vnrxk_2 b,._discordCardScope_vnrxk_2 strong{font-weight:bolder}._discordCardScope_vnrxk_2 code,._discordCardScope_vnrxk_2 kbd,._discordCardScope_vnrxk_2 samp,._discordCardScope_vnrxk_2 pre{font-family:ui-monospace,SFMono-Regular,Roboto Mono,Cascadia Code,Source Code Pro,Consolas,Liberation Mono,Menlo,Monaco,Courier New,monospace;font-size:1em}._discordCardScope_vnrxk_2 small{font-size:80%}._discordCardScope_vnrxk_2 sub,._discordCardScope_vnrxk_2 sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}._discordCardScope_vnrxk_2 sub{bottom:-.25em}._discordCardScope_vnrxk_2 sup{top:-.5em}._discordCardScope_vnrxk_2 table{text-indent:0;border-color:inherit;border-collapse:collapse}._discordCardScope_vnrxk_2 button,._discordCardScope_vnrxk_2 input,._discordCardScope_vnrxk_2 optgroup,._discordCardScope_vnrxk_2 select,._discordCardScope_vnrxk_2 textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}._discordCardScope_vnrxk_2 button,._discordCardScope_vnrxk_2 select{text-transform:none}._discordCardScope_vnrxk_2 button,._discordCardScope_vnrxk_2 [type=button],._discordCardScope_vnrxk_2 [type=reset],._discordCardScope_vnrxk_2 [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}._discordCardScope_vnrxk_2 :-moz-focusring{outline:auto}._discordCardScope_vnrxk_2 :-moz-ui-invalid{box-shadow:none}._discordCardScope_vnrxk_2 progress{vertical-align:baseline}._discordCardScope_vnrxk_2 ::-webkit-inner-spin-button,._discordCardScope_vnrxk_2 ::-webkit-outer-spin-button{height:auto}._discordCardScope_vnrxk_2 [type=search]{-webkit-appearance:textfield;outline-offset:-2px}._discordCardScope_vnrxk_2 ::-webkit-search-decoration{-webkit-appearance:none}._discordCardScope_vnrxk_2 ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}._discordCardScope_vnrxk_2 summary{display:list-item}._discordCardScope_vnrxk_2 blockquote,._discordCardScope_vnrxk_2 dl,._discordCardScope_vnrxk_2 dd,._discordCardScope_vnrxk_2 h1,._discordCardScope_vnrxk_2 h2,._discordCardScope_vnrxk_2 h3,._discordCardScope_vnrxk_2 h4,._discordCardScope_vnrxk_2 h5,._discordCardScope_vnrxk_2 h6,._discordCardScope_vnrxk_2 hr,._discordCardScope_vnrxk_2 figure,._discordCardScope_vnrxk_2 p,._discordCardScope_vnrxk_2 pre{margin:0}._discordCardScope_vnrxk_2 fieldset{margin:0;padding:0}._discordCardScope_vnrxk_2 legend{padding:0}._discordCardScope_vnrxk_2 ol,._discordCardScope_vnrxk_2 ul,._discordCardScope_vnrxk_2 menu{list-style:none;margin:0;padding:0}._discordCardScope_vnrxk_2 dialog{padding:0}._discordCardScope_vnrxk_2 textarea{resize:vertical}._discordCardScope_vnrxk_2 input::placeholder,._discordCardScope_vnrxk_2 textarea::placeholder{opacity:1;color:#9ca3af}._discordCardScope_vnrxk_2 button,._discordCardScope_vnrxk_2 [role=button]{cursor:pointer}._discordCardScope_vnrxk_2 :disabled{cursor:default}._discordCardScope_vnrxk_2 img,._discordCardScope_vnrxk_2 svg,._discordCardScope_vnrxk_2 video,._discordCardScope_vnrxk_2 canvas,._discordCardScope_vnrxk_2 audio,._discordCardScope_vnrxk_2 iframe,._discordCardScope_vnrxk_2 embed,._discordCardScope_vnrxk_2 object{display:block;vertical-align:middle}._discordCardScope_vnrxk_2 img,._discordCardScope_vnrxk_2 video{max-width:100%;height:auto}._discordCardScope_vnrxk_2 [hidden]{display:none}._discordCardScope_vnrxk_2 ._space-y-2_vnrxk_229>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}._badgeContainer_138bc_1{position:absolute;max-width:196px;display:flex;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;z-index:20;bottom:-38px;right:14px;background-color:#00000059;border-radius:.375rem;padding:3px;-webkit-user-select:none;user-select:none}._badgeIcon_138bc_17{width:22px;height:22px}._section_n0viq_1{margin-bottom:.5rem}._displayName_n0viq_5{font-size:1.25rem;font-weight:700}._username_n0viq_10{font-weight:600;font-size:1rem}._pronouns_n0viq_15{font-weight:400;font-size:1rem}._container_1s8e7_1{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}._icon_1s8e7_8,._emoji_1s8e7_14{width:1.25rem;height:1.25rem;font-size:.8rem}._status_1s8e7_20{font-size:.95rem;text-align:start}._title_1dl6p_1{text-transform:uppercase;font-size:.875rem;line-height:1.25rem;font-weight:600;margin-bottom:.125rem}._aboutMeSection_1hay1_1{margin-bottom:.25rem;font-size:14px}._aboutMeLink_1hay1_6{display:block;color:#3b82f6}._aboutMeLink_1hay1_6:hover{color:#60a5fa}._container_3iwfq_1{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}._discordIcon_3iwfq_8{width:14px;height:14px}._text_3iwfq_13{font-size:15px}._separator_3iwfq_17{width:.25rem;height:.25rem;border-radius:50%;background-color:#4b4b4b}._serverIcon_3iwfq_24{width:15px;height:15px;border-radius:50%}._roleContainer_sg5mh_1{background-color:#4b4b4b40;padding:8px;border-radius:4px;height:25px;display:flex;align-items:center;justify-content:center;gap:5px;-webkit-user-select:none;user-select:none;border:.5px solid rgba(136,135,135,.415)}._roleIcon_sg5mh_14{width:12px;height:12px;border-radius:50%}._roleText_sg5mh_20{font-size:.73rem;padding:0;margin:0;text-align:center}._rolesList_15m2y_1{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}._noteTextarea_1ylyn_1{font-size:.8rem;padding:4px;width:100%;background-color:transparent;border:0;resize:none;outline:none}._textarea_1aeiu_4{margin-top:.5rem;width:100%;height:44px;border-radius:.5rem;background-color:transparent;resize:none;outline:none;font-size:.875rem;scrollbar-width:none}._textarea_1aeiu_4::-webkit-scrollbar{display:none}._textarea_1aeiu_4:focus{outline:none}._container_1u63v_1{font-size:.75rem;margin-top:.75rem}._bar_1u63v_6{height:.25rem;background-color:#404040;border-radius:.75rem}._progress_1u63v_12{height:.25rem;background-color:#fff;border-radius:.75rem}._timeContainer_1u63v_18{display:flex;justify-content:space-between;align-items:flex-start}._timeText_1u63v_24{margin:0;padding:0}._header_14trc_1{display:flex;justify-content:space-between;margin-bottom:6px}._content_14trc_7{display:flex;align-items:center;gap:.75rem}._albumArtContainer_14trc_13{min-width:65px;align-self:flex-start}._albumArt_14trc_13{width:65px;height:65px;-webkit-user-select:none;user-select:none;border-radius:.375rem}._songTitle_14trc_25{font-size:.875rem;line-height:1.25rem;font-weight:700}._songInfo_14trc_31{font-size:.875rem;line-height:1.25rem;font-weight:400}._playButton_14trc_37{display:block;width:100%;font-size:.875rem;line-height:1.25rem;padding:6px 4px;text-align:center;margin-top:8px;border-radius:.375rem;color:#fff;transition:filter .15s;text-decoration:none}._playButtonContent_14trc_51{display:flex;justify-content:center;align-items:center;gap:.5rem}._lighten_14trc_58:hover{filter:brightness(1.1)}._header_fw5b9_1{display:flex;justify-content:space-between;margin-bottom:6px}._content_fw5b9_7{display:flex;align-items:center;gap:.75rem}._imageContainer_fw5b9_13{min-width:65px;align-self:flex-start}._imageWrapper_fw5b9_18{position:relative;justify-content:center;align-items:center}._largeImage_fw5b9_24{width:65px;height:65px;-webkit-user-select:none;user-select:none;object-fit:cover;border-radius:.375rem}._smallImageOverlay_fw5b9_32{position:absolute;bottom:-3px;right:-6px;width:20px;height:20px;border-radius:9999px;-webkit-user-select:none;user-select:none;object-fit:cover}._smallImageContainer_fw5b9_43{min-width:65px;align-self:flex-start}._smallImageStandalone_fw5b9_48{width:65px;height:65px;-webkit-user-select:none;user-select:none;object-fit:cover;border-radius:.375rem}._textContainer_fw5b9_56{font-size:.875rem;font-weight:400}._activityName_fw5b9_61{font-size:.875rem;line-height:1.25rem;font-weight:700}._activityDetails_fw5b9_67,._activityState_fw5b9_73,._activityTime_fw5b9_79{font-size:.875rem;line-height:1.25rem;font-weight:400}._button_fw5b9_85{display:block;width:100%;font-size:.875rem;opacity:.7;cursor:not-allowed;line-height:1.25rem;padding:6px 4px;text-align:center;border-radius:.375rem;color:#fff;transition:filter .15s;text-decoration:none}._buttonWrapper_fw5b9_100{margin-top:8px}._buttonContent_fw5b9_104{display:flex;justify-content:center;align-items:center;gap:.5rem}._separator_5yf88_1{width:100%;height:1px;background-color:#5a5757;margin:12px 0}*{margin:0;padding:0}.main-container{width:100%;height:100%;display:flex;gap:20px;justify-content:center;align-items:center;min-height:100vh;background-color:#292929}