discord-user-card
Version:
Display Discord users' profile cards just like in Discord.
1,678 lines (1,663 loc) • 60.7 kB
CSS
@charset "UTF-8";
.duc_root {
/** Radius */
--radius-xs: 4px;
--radius-sm: 8px;
--decoration-to-avatar-ratio: 1.2;
--custom-avatar-avatar-decoration-border-position: calc(
(1 - var(--decoration-to-avatar-ratio)) / 2 * 100%
);
--custom-user-banner-banner-height-popout: 60px;
--custom-user-banner-banner-height-profile: 106px;
--custom-user-banner-premium-banner-height-popout: 120px;
--custom-user-banner-premium-banner-height-profile: 212px;
--custom-user-profile-themed-container-user-popout-width: 340px;
--custom-user-profile-themed-container-user-profile-modal-width: 600px;
--custom-user-profile-modal-header-avatar-size: 120px;
--custom-user-profile-modal-header-total-avatar-border-size: 16px;
--custom-emoji-size-emoji: 1.375em;
--custom-button-link-underline-width: 1px;
--custom-button-link-underline-offset: 1px;
--custom-button-link-underline-stop: calc(
var(--custom-button-link-underline-width) +
var(--custom-button-link-underline-offset)
);
--button--underline-color: transparent;
--primary-130: hsl(var(--primary-130-hsl) / 1);
--primary-130-hsl: 220 calc(var(--saturation-factor, 1) * 13%) 95.5%;
--primary-160: hsl(var(--primary-160-hsl) / 1);
--primary-160-hsl: 210 calc(var(--saturation-factor, 1) * 11.1%) 92.9%;
--primary-200: hsl(var(--primary-200-hsl) / 1);
--primary-200-hsl: 216 calc(var(--saturation-factor, 1) * 9.8%) 90%;
--primary-230: hsl(var(--primary-230-hsl) / 1);
--primary-230-hsl: 210 calc(var(--saturation-factor, 1) * 9.1%) 87.1%;
--primary-300: hsl(var(--primary-300-hsl) / 1);
--primary-300-hsl: 210 calc(var(--saturation-factor, 1) * 9.3%) 78.8%;
--primary-330: hsl(var(--primary-330-hsl) / 1);
--primary-330-hsl: 215 calc(var(--saturation-factor, 1) * 8.8%) 73.3%;
--primary-400: hsl(var(--primary-400-hsl) / 1);
--primary-400-hsl: 223 calc(var(--saturation-factor, 1) * 5.8%) 52.9%;
--primary-430: hsl(var(--primary-430-hsl) / 1);
--primary-430-hsl: 229 calc(var(--saturation-factor, 1) * 4.8%) 44.9%;
--primary-500: hsl(var(--primary-500-hsl) / 1);
--primary-500-hsl: 228 calc(var(--saturation-factor, 1) * 6%) 32.5%;
--primary-600: hsl(var(--primary-600-hsl) / 1);
--primary-600-hsl: 223 calc(var(--saturation-factor, 1) * 6.7%) 20.6%;
--primary-630: hsl(var(--primary-630-hsl) / 1);
--primary-630-hsl: 220 calc(var(--saturation-factor, 1) * 6.5%) 18%;
--primary-660: hsl(var(--primary-660-hsl) / 1);
--primary-660-hsl: 228 calc(var(--saturation-factor, 1) * 6.7%) 14.7%;
--primary-700: hsl(var(--primary-700-hsl) / 1);
--primary-700-hsl: 225 calc(var(--saturation-factor, 1) * 6.3%) 12.5%;
--primary-730: hsl(var(--primary-730-hsl) / 1);
--primary-730-hsl: 225 calc(var(--saturation-factor, 1) * 7.1%) 11%;
--primary-800: hsl(var(--primary-800-hsl) / 1);
--primary-800-hsl: 220 calc(var(--saturation-factor, 1) * 8.1%) 7.3%;
--primary-860: hsl(var(--primary-860-hsl) / 1);
--primary-860-hsl: 240 calc(var(--saturation-factor, 1) * 7.7%) 2.5%;
--white-500: hsl(var(--white-500-hsl) / 1);
--white-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--black-500: hsl(var(--black-500-hsl) / 1);
--black-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--blue-345: hsl(var(--blue-345-hsl) / 1);
--blue-345-hsl: 200 calc(var(--saturation-factor, 1) * 100%) 49.4%;
--blue-430: hsl(var(--blue-430-hsl) / 1);
--blue-430-hsl: 212 calc(var(--saturation-factor, 1) * 100%) 45.3%;
--brand-experiment: var(--brand-500);
--brand-260: hsl(var(--brand-260-hsl) / 1);
--brand-260-hsl: 235 calc(var(--saturation-factor, 1) * 86.2%) 88.6%;
--brand-500: hsl(var(--brand-500-hsl) / 1);
--brand-500-hsl: 235 calc(var(--saturation-factor, 1) * 85.6%) 64.7%;
--theme-base-color-light-hsl: 157.64705882352942 100% 90%;
--theme-base-color-light: rgb(204,255,236);
--theme-text-color-light: rgb(0,47,128);
--theme-base-color-dark-hsl: 219.23076923076923 100% 5.098039215686274%;
--theme-base-color-dark: rgb(0,9,26);
--theme-text-color-dark: rgb(229,255,245);
--theme-base-color-amount: 50%;
--theme-text-color-amount: 25%;
}
.duc_root.duc_user_card {
line-height: 1;
margin: 0;
padding: 0;
font-family: var(--font-primary);
overflow: hidden;
user-select: none;
background: transparent;
}
.duc_root.duc_user_profile {
opacity: 1;
transform: scale(1);
border-radius: 8px;
overflow: hidden;
position: relative;
width: auto;
max-height: none;
min-height: 200px;
background-color: var(--modal-background);
display: flex;
flex-direction: column;
margin: 0 auto;
pointer-events: all;
}
.duc_root ::-moz-placeholder {
font-family: var(--font-primary);
font-weight: 400;
text-rendering: optimizeLegibility;
}
.duc_root textarea,
.duc_root input,
.duc_root button,
.duc_root select,
.duc_root ::placeholder {
font-family: var(--font-primary);
font-weight: 400;
text-rendering: optimizeLegibility;
}
.duc_root a,
.duc_root div,
.duc_root span,
.duc_root strong,
.duc_root button,
.duc_root input,
.duc_root textarea,
.duc_root select,
.duc_root label {
outline: 0;
}
.duc_root img[alt] {
text-indent: -9999px;
}
.duc_root div,
.duc_root span,
.duc_root applet,
.duc_root object,
.duc_root iframe,
.duc_root h1,
.duc_root h2,
.duc_root h3,
.duc_root h4,
.duc_root h5,
.duc_root h6,
.duc_root p,
.duc_root blockquote,
.duc_root pre,
.duc_root a,
.duc_root abbr,
.duc_root acronym,
.duc_root address,
.duc_root big,
.duc_root cite,
.duc_root code,
.duc_root del,
.duc_root dfn,
.duc_root em,
.duc_root img,
.duc_root ins,
.duc_root kbd,
.duc_root q,
.duc_root s,
.duc_root samp,
.duc_root small,
.duc_root strike,
.duc_root strong,
.duc_root tt,
.duc_root var,
.duc_root dl,
.duc_root dt,
.duc_root dd,
.duc_root ol,
.duc_root ul,
.duc_root li,
.duc_root fieldset,
.duc_root form,
.duc_root label,
.duc_root legend,
.duc_root table,
.duc_root caption,
.duc_root tbody,
.duc_root tfoot,
.duc_root thead,
.duc_root tr,
.duc_root th,
.duc_root td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}
.duc_root a {
color: var(--text-link);
text-decoration: none;
cursor: pointer;
}
.duc_root a img {
border: none;
}
.duc_root p {
margin: 14px 0;
}
.duc_root ol,
.duc_root ul {
list-style: none;
}
.duc_root strong {
font-weight: 600;
}
.duc_root button {
font-family: var(--font-primary);
font-weight: 500;
border: 0;
cursor: pointer;
}
.duc_root code {
font-family: var(--font-code);
font-size: 14px;
line-height: 16px;
}
@font-face {
font-family: "ABC Ginto Nord";
font-style: normal;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/ABC_Ginto_Nord_800.woff2) format("woff2");
}
@font-face {
font-family: "ABC Ginto Nord";
font-style: italic;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/ABC_Ginto_Nord_800_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: normal;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_400.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: italic;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_400_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: normal;
font-weight: 500;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_500.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: italic;
font-weight: 500;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_500_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: normal;
font-weight: 600;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_600.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: italic;
font-weight: 600;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_600_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: normal;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_700.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: italic;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_700_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: normal;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_800.woff2) format("woff2");
}
@font-face {
font-family: "gg sans";
font-style: italic;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/gg_sans_800_italic.woff2) format("woff2");
}
@font-face {
font-family: "gg mono";
font-style: normal;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/gg_mono_400.woff2) format("woff2");
}
@font-face {
font-family: "gg mono";
font-style: normal;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/gg_mono_700.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_400.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_400_italic.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 500;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_500.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 500;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_500_italic.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 600;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_600.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 600;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_600_italic.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_700.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_700_italic.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_800.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 800;
src: url(https://cdn.rcd.gg/discord/fonts/Noto_Sans_800_italic.woff2) format("woff2");
}
@font-face {
font-family: "Source Code Pro";
font-style: normal;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/Source_Code_Pro_400.woff2) format("woff2");
}
@font-face {
font-family: "Source Code Pro";
font-style: normal;
font-weight: 700;
src: url(https://cdn.rcd.gg/discord/fonts/Source_Code_Pro_700.woff2) format("woff2");
}
@font-face {
font-family: "Corinthia";
font-style: normal;
font-weight: 400;
src: url(https://cdn.rcd.gg/discord/fonts/Corinthia.woff2) format("woff2");
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 300 800;
src: url(https://cdn.rcd.gg/discord/fonts/Fraunces.woff2) format("woff2");
}
.duc_root {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;
--font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:lang(el) .duc_root,
*:lang(ru) .duc_root,
*:lang(uk) .duc_root,
*:lang(bg) .duc_root {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;
--font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:lang(ko) .duc_root {
--font-primary: "gg sans", "Apple SD Gothic Neo", NanumBarunGothic,
"ë§‘ì€ ê³ ë”•", "Malgun Gothic", Gulim, 굴림, Dotum, ë‹ì›€, "Noto Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Apple SD Gothic Neo", NanumBarunGothic,
"ë§‘ì€ ê³ ë”•", "Malgun Gothic", Gulim, 굴림, Dotum, ë‹ì›€, "Noto Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:lang(ja) .duc_root {
--font-primary: "gg sans", "Hiragino Sans", "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic",
"Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Hiragino Sans", "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic",
"Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:lang(zh-CN) .duc_root {
--font-primary: "gg sans", "Microsoft YaHei New", 微软雅黑,
"Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Microsoft YaHei New", 微软雅黑,
"Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:lang(zh-TW) .duc_root {
--font-primary: "gg sans", "Microsoft JhengHei", 微軟æ£é»‘é«”,
"Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun,
"Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Microsoft JhengHei", 微軟æ£é»‘é«”,
"Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun,
"Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT",
"Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
"Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
.duc_root .theme-dark {
--header-primary: var(--primary-130);
--header-secondary: var(--primary-330);
--text-normal: var(--primary-230);
--text-link: var(--blue-345);
--elevation-high: 0 8px 16px hsl(var(--black-500-hsl) / 0.24);
--background-modifier-accent: hsl(var(--primary-500-hsl) / 0.48);
--background-secondary: var(--primary-630);
--background-secondary-alt: var(--primary-660);
--button-secondary-background: var(--primary-500);
--background-floating: var(--primary-800);
--background-modifier-hover: hsl(var(--primary-500-hsl) / 0.3);
--border-faint: hsl(var(--white-500-hsl) / 0.03);
--background-tertiary: var(--primary-700);
--interactive-normal: var(--primary-330);
--interactive-active: var(--white-500);
--interactive-hover: var(--primary-230);
--interactive-muted: var(--primary-500);
--mention-background: hsl(var(--brand-500-hsl) / 0.3);
--mention-foreground: var(--brand-260);
--modal-background: var(--primary-600);
--bg-mod-faint: hsl(var(--primary-500-hsl) / 0.3);
--bg-mod-strong: hsl(var(--primary-500-hsl) / 0.54);
--scrollbar-thin-thumb: var(--primary-730);
--scrollbar-thin-track: hsl(var(--black-500-hsl) / 0);
--__spoiler-background-color--revealed: hsl(var(--white-500-hsl) / 0.1);
--__spoiler-text-color--hidden: transparent;
--__spoiler-background-color--hidden: var(--primary-700);
--__spoiler-background-color--hidden--hover: hsl(var(--primary-700-hsl) / 0.8);
--theme-base-color: var(--theme-base-color-dark);
--theme-text-color: var(--theme-text-color-dark);
--theme-base-color-hsl: var(--theme-base-color-dark-hsl);
--skeleton-color: rgb(55 65 81);
}
@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.duc_root .theme-dark {
--header-primary: color-mix(
in oklab,
var(--primary-130) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--header-secondary: color-mix(
in oklab,
var(--primary-330) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--text-normal: color-mix(
in oklab,
var(--primary-230) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--background-modifier-accent: color-mix(
in oklab,
hsl(var(--primary-500-hsl) / 0.48) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.48)
var(--custom-theme-mix-amount-base, 0%)
);
--background-secondary: color-mix(
in oklab,
var(--primary-630) 100%,
var(--theme-base-color, black)
var(--theme-base-color-amount, 0%)
);
--background-secondary-alt: color-mix(
in oklab,
var(--primary-660) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--button-secondary-background: color-mix(
in oklab,
var(--primary-500) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--background-floating: color-mix(
in oklab,
var(--primary-800) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--background-modifier-hover: color-mix(
in oklab,
hsl(var(--primary-500-hsl) / 0.3) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.3)
var(--custom-theme-mix-amount-base, 0%)
);
--border-faint: color-mix(
in oklab,
hsl(var(--white-500-hsl) / 0.03) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.03)
var(--custom-theme-mix-amount-base, 0%)
);
--background-tertiary: color-mix(
in oklab,
var(--primary-700) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--interactive-normal: color-mix(
in oklab,
var(--primary-330) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--interactive-active: color-mix(
in oklab,
var(--white-500) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--interactive-hover: color-mix(
in oklab,
var(--primary-230) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--interactive-muted: color-mix(
in oklab,
var(--primary-500) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--mention-background: color-mix(
in oklab,
hsl(var(--brand-500-hsl) / 0.3) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3)
var(--theme-base-color-amount, 0%)
);
--mention-foreground: color-mix(
in oklab,
var(--brand-260) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--modal-background: color-mix(
in oklab,
var(--primary-600) 100%,
var(--theme-base-color, black)
var(--theme-base-color-amount, 0%)
);
--bg-mod-faint: color-mix(
in oklab,
hsl(var(--primary-500-hsl) / 0.3) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3)
var(--theme-base-color-amount, 0%)
);
--bg-mod-strong: color-mix(
in oklab,
hsl(var(--primary-500-hsl) / 0.54) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54)
var(--theme-base-color-amount, 0%)
);
--scrollbar-thin-thumb: color-mix(
in oklab,
var(--primary-730) 100%,
var(--theme-base-color, black)
var(--theme-base-color-amount, 0%)
);
--scrollbar-thin-track: color-mix(
in oklab,
hsl(var(--black-500-hsl) / 0) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0)
var(--theme-base-color-amount, 0%)
);
}
}
.duc_root .theme-dark .hljs-doctag,
.duc_root .theme-dark .hljs-keyword,
.duc_root .theme-dark .hljs-meta .hljs-keyword,
.duc_root .theme-dark .hljs-template-tag,
.duc_root .theme-dark .hljs-template-variable,
.duc_root .theme-dark .hljs-type,
.duc_root .theme-dark .hljs-variable.language_ {
color: #ff7b72;
}
.duc_root .theme-dark .hljs-title,
.duc_root .theme-dark .hljs-title.class_,
.duc_root .theme-dark .hljs-title.class_.inherited__,
.duc_root .theme-dark .hljs-title.function_ {
color: #d2a8ff;
}
.duc_root .theme-dark .hljs-attr,
.duc_root .theme-dark .hljs-attribute,
.duc_root .theme-dark .hljs-literal,
.duc_root .theme-dark .hljs-meta,
.duc_root .theme-dark .hljs-number,
.duc_root .theme-dark .hljs-operator,
.duc_root .theme-dark .hljs-variable,
.duc_root .theme-dark .hljs-selector-attr,
.duc_root .theme-dark .hljs-selector-class,
.duc_root .theme-dark .hljs-selector-id {
color: #79c0ff;
}
.duc_root .theme-dark .hljs-regexp,
.duc_root .theme-dark .hljs-string,
.duc_root .theme-dark .hljs-meta .hljs-string {
color: #a5d6ff;
}
.duc_root .theme-dark .hljs-built_in,
.duc_root .theme-dark .hljs-symbol {
color: #ffa657;
}
.duc_root .theme-dark .hljs-comment,
.duc_root .theme-dark .hljs-code,
.duc_root .theme-dark .hljs-formula {
color: #8b949e;
}
.duc_root .theme-dark .hljs-name,
.duc_root .theme-dark .hljs-quote,
.duc_root .theme-dark .hljs-selector-tag,
.duc_root .theme-dark .hljs-selector-pseudo {
color: #7ee787;
}
.duc_root .theme-dark .hljs-subst {
color: #c9d1d9;
}
.duc_root .theme-dark .hljs-section {
color: #1f6feb;
font-weight: 700;
}
.duc_root .theme-dark .hljs-bullet {
color: #f2cc60;
}
.duc_root .theme-dark .hljs-emphasis {
color: #c9d1d9;
font-style: italic;
}
.duc_root .theme-dark .hljs-strong {
color: #c9d1d9;
font-weight: 700;
}
.duc_root .theme-dark .hljs-addition {
color: #aff5b4;
background-color: #033a16;
}
.duc_root .theme-dark .hljs-deletion {
color: #ffdcd7;
background-color: #67060c;
}
.duc_root .theme-light {
--header-primary: var(--primary-860);
--header-secondary: var(--primary-500);
--text-normal: var(--primary-600);
--text-link: var(--blue-430);
--elevation-high: 0 8px 16px hsl(var(--black-500-hsl) / 0.16);
--background-modifier-accent: hsl(var(--primary-400-hsl) / 0.24);
--background-secondary: var(--primary-130);
--background-secondary-alt: var(--primary-160);
--button-secondary-background: var(--primary-430);
--background-floating: var(--white-500);
--background-modifier-hover: hsl(var(--primary-400-hsl) / 0.16);
--border-faint: hsl(var(--black-500-hsl) / 0.04);
--background-tertiary:var(--primary-200);
--interactive-normal: var(--primary-500);
--interactive-active: var(--primary-860);
--interactive-hover: var(--primary-600);
--interactive-muted: var(--primary-300);
--mention-background: hsl(var(--brand-500-hsl) / 0.15);
--mention-foreground: var(--brand-500);
--modal-background: var(--white-500);
--bg-mod-faint: hsl(var(--primary-400-hsl) / 0.08);
--bg-mod-strong: hsl(var(--primary-400-hsl) / 0.24);
--scrollbar-thin-thumb: hsl(var(--primary-500-hsl) / 0.3);
--scrollbar-thin-track: hsl(var(--black-500-hsl) / 0);
--__spoiler-background-color--revealed: hsl(var(--black-500-hsl) / 0.1);
--__spoiler-text-color--hidden: transparent;
--__spoiler-background-color--hidden: var(--primary-300);
--__spoiler-background-color--hidden--hover: hsl(var(--primary-300-hsl) / 0.8);
--theme-base-color: var(--theme-base-color-light);
--theme-text-color: var(--theme-text-color-light);
--theme-base-color-hsl: var(--theme-base-color-light-hsl);
--skeleton-color: rgb(226 232 240);
}
@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.duc_root .theme-light {
--header-primary: color-mix(
in oklab,
var(--primary-860) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--header-secondary: color-mix(
in oklab,
var(--primary-500) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--text-normal: color-mix(
in oklab,
var(--primary-600) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--background-modifier-accent: color-mix(
in oklab,
hsl(var(--primary-400-hsl) / 0.24) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.24)
var(--custom-theme-mix-amount-base, 0%)
);
--background-secondary: color-mix(
in oklab,
var(--primary-130) 100%,
var(--theme-base-color, black)
var(--theme-base-color-amount, 0%)
);
--background-secondary-alt: color-mix(
in oklab,
var(--primary-160) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--button-secondary-background: color-mix(
in oklab,
var(--primary-430) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--background-floating: color-mix(
in oklab,
var(--white-500) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--background-modifier-hover: color-mix(
in oklab,
hsl(var(--primary-400-hsl) / 0.16) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.16)
var(--custom-theme-mix-amount-base, 0%)
);
--border-faint: color-mix(
in oklab,
hsl(var(--black-500-hsl) / 0.04) 100%,
hsl(var(--custom-theme-mix-base-hsl, 0 0% 0%) / 0.04)
var(--custom-theme-mix-amount-base, 0%)
);
--background-tertiary: color-mix(
in oklab,
var(--primary-200) 100%,
var(--custom-theme-mix-base, black)
var(--custom-theme-mix-amount-base, 0%)
);
--interactive-normal: color-mix(
in oklab,
var(--primary-500) 100%,
var(--custom-theme-mix-text, black)
var(--custom-theme-mix-amount-text, 0%)
);
--interactive-active: color-mix(
in oklab,
var(--primary-860) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--interactive-hover: color-mix(
in oklab,
var(--primary-600) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--interactive-muted: color-mix(
in oklab,
var(--primary-300) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--mention-background: color-mix(
in oklab,
hsl(var(--brand-500-hsl) / 0.15) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15)
var(--theme-base-color-amount, 0%)
);
--mention-foreground: color-mix(
in oklab,
var(--brand-500) 100%,
var(--theme-text-color, black)
var(--theme-text-color-amount, 0%)
);
--modal-background: color-mix(
in oklab,
var(--white-500) 100%,
var(--theme-base-color, black)
var(--theme-base-color-amount, 0%)
);
--bg-mod-faint: color-mix(
in oklab,
hsl(var(--primary-400-hsl) / 0.08) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08)
var(--theme-base-color-amount, 0%)
);
--bg-mod-strong: color-mix(
in oklab,
hsl(var(--primary-400-hsl) / 0.24) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24)
var(--theme-base-color-amount, 0%)
);
--scrollbar-thin-thumb: color-mix(
in oklab,
hsl(var(--primary-500-hsl) / 0.3) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3)
var(--theme-base-color-amount, 0%)
);
--scrollbar-thin-track: color-mix(
in oklab,
hsl(var(--black-500-hsl) / 0) 100%,
hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0)
var(--theme-base-color-amount, 0%)
);
}
}
@media all and (-webkit-max-device-pixel-ratio: 1) {
.duc_root .theme-light ::-moz-placeholder {
font-weight: 500;
}
.duc_root .theme-light select,
.duc_root .theme-light textarea,
.duc_root .theme-light input,
.duc_root .theme-light ::placeholder {
font-weight: 500;
}
}
.duc_root .theme-light .hljs-doctag,
.duc_root .theme-light .hljs-keyword,
.duc_root .theme-light .hljs-meta .hljs-keyword,
.duc_root .theme-light .hljs-template-tag,
.duc_root .theme-light .hljs-template-variable,
.duc_root .theme-light .hljs-type,
.duc_root .theme-light .hljs-variable.language_ {
color: #d73a49;
}
.duc_root .theme-light .hljs-title,
.duc_root .theme-light .hljs-title.class_,
.duc_root .theme-light .hljs-title.class_.inherited__,
.duc_root .theme-light .hljs-title.function_ {
color: #6f42c1;
}
.duc_root .theme-light .hljs-attr,
.duc_root .theme-light .hljs-attribute,
.duc_root .theme-light .hljs-literal,
.duc_root .theme-light .hljs-meta,
.duc_root .theme-light .hljs-number,
.duc_root .theme-light .hljs-operator,
.duc_root .theme-light .hljs-variable,
.duc_root .theme-light .hljs-selector-attr,
.duc_root .theme-light .hljs-selector-class,
.duc_root .theme-light .hljs-selector-id {
color: #005cc5;
}
.duc_root .theme-light .hljs-regexp,
.duc_root .theme-light .hljs-string,
.duc_root .theme-light .hljs-meta .hljs-string {
color: #032f62;
}
.duc_root .theme-light .hljs-built_in,
.duc_root .theme-light .hljs-symbol {
color: #e36209;
}
.duc_root .theme-light .hljs-comment,
.duc_root .theme-light .hljs-code,
.duc_root .theme-light .hljs-formula {
color: #6a737d;
}
.duc_root .theme-light .hljs-name,
.duc_root .theme-light .hljs-quote,
.duc_root .theme-light .hljs-selector-tag,
.duc_root .theme-light .hljs-selector-pseudo {
color: #22863a;
}
.duc_root .theme-light .hljs-subst {
color: #24292e;
}
.duc_root .theme-light .hljs-section {
color: #005cc5;
font-weight: 700;
}
.duc_root .theme-light .hljs-bullet {
color: #735c0f;
}
.duc_root .theme-light .hljs-emphasis {
color: #24292e;
font-style: italic;
}
.duc_root .theme-light .hljs-strong {
color: #24292e;
font-weight: 700;
}
.duc_root .theme-light .hljs-addition {
color: #22863a;
background-color: #f0fff4;
}
.duc_root .theme-light .hljs-deletion {
color: #b31d28;
background-color: #ffeef0;
}
.duc_root {
}
.duc_root .duc_activity {
position: relative;
}
.duc_root .duc_activity_header_container {
width: 100%;
min-width: 0;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
}
.duc_root .duc_activity_header {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
.duc_root .duc_activity_content {
display: flex;
flex-direction: row;
width: 100%;
}
.duc_root .duc_activity_image {
position: relative;
align-self: flex-start;
}
.duc_root .duc_activity_image .duc_activity_image_large {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
object-fit: cover;
display: block;
border-radius: 8px;
-webkit-user-drag: none;
}
.duc_root .duc_activity_image .duc_activity_image_large.duc_activity_image_hang {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 100%;
}
.duc_root .duc_activity_image .duc_activity_image_large.duc_activity_image_app_icon {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 12px;
background-size: 100%;
color: var(--header-primary);
}
.duc_root .duc_activity_image .duc_activity_image_large.duc_spotify_image {
border-radius: 0;
}
.duc_root .duc_activity_image .duc_activity_image_large.duc_has_small_image {
mask: url(https://cdn.rcd.gg/discord/activity-mask-60.svg);
}
.duc_root .duc_activity_image .duc_activity_image_small {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
position: absolute;
bottom: -4px;
right: -4px;
border-radius: 50%;
-webkit-user-drag: none;
}
.duc_root .duc_activity_details {
color: var(--text-normal);
margin-left: 10px;
flex: 1 1 auto;
overflow: hidden;
font-family: var(--font-primary);
}
.duc_root .duc_activity_details .duc_activity_details_line {
display: block;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.duc_root .duc_activity_details .duc_activity_details_line:first-child {
font-family: var(--font-primary);
font-size: 14px;
line-height: 1.2857142857;
font-weight: 600;
}
.duc_root .duc_activity_timebar_container {
margin-top: 12px;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar {
margin-bottom: 4px;
background-color: hsl(var(--primary-500-hsl)/0.16);
border-radius: 2px;
height: 4px;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar .duc_activity_timebar_fill {
background-color: var(--text-normal);
border-radius: 2px;
height: 100%;
min-width: 4px;
transition-property: width;
transition-duration: 0.5s;
transition-timing-function: linear;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar_time {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar_time .duc_activity_timebar_time_left,
.duc_root .duc_activity_timebar_container .duc_activity_timebar_time .duc_activity_timebar_time_right {
color: var(--text-normal);
line-height: 12px;
font-size: 12px;
font-weight: 500;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar_time .duc_activity_timebar_time_left {
flex: 1 1 auto;
}
.duc_root .duc_activity_timebar_container .duc_activity_timebar_time .duc_activity_timebar_time_right {
flex: 0 1 auto;
}
.duc_root .duc_activity_buttons {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
margin-top: 12px;
}
.duc_root .duc_activity_buttons .duc_activity_button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: none;
border: none;
border-radius: 3px;
font-size: 14px;
font-weight: 500;
line-height: 16px;
padding: 2px 16px;
user-select: none;
width: auto;
height: 32px;
min-height: 32px;
background-color: var(--profile-gradient-button-color);
color: var(--white-500);
transition: opacity 0.2s ease-in-out;
font-family: var(--font-primary);
}
.duc_root .duc_activity_buttons .duc_activity_button:not(:first-child) {
margin-top: 8px;
}
.duc_root .duc_activity_buttons .duc_activity_button:hover {
opacity: 0.8;
}
.duc_root .duc_activity_buttons .duc_activity_button .duc_activity_button_label {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-image: linear-gradient(to top, transparent, transparent var(--custom-button-link-underline-offset), var(--button--underline-color) var(--custom-button-link-underline-offset), var(--button--underline-color) var(--custom-button-link-underline-stop), transparent var(--custom-button-link-underline-stop));
}
.duc_root .duc_activity_profile {
padding: 16px;
}
.duc_root .duc_activity_profile .duc_activity_content {
align-items: center;
}
.duc_root .duc_activity_profile .duc_activity_image_large {
width: 90px;
height: 90px;
min-width: 90px;
min-height: 90px;
}
.duc_root .duc_activity_profile .duc_activity_image_large.duc_activity_image_hang {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
}
.duc_root .duc_activity_profile .duc_activity_image_large.duc_has_small_image {
mask: url(https://cdn.rcd.gg/discord/activity-mask-90.svg);
}
.duc_root .duc_activity_profile .duc_activity_image_small {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
}
.duc_root .duc_activity_profile .duc_activity_buttons {
align-items: center;
display: flex;
}
.duc_root .duc_activity_profile .duc_activity_buttons .duc_activity_button {
margin-top: 0;
margin-left: 20px;
}
.duc_root .duc_activity_profile .duc_activity_buttons .duc_activity_button:not(:first-child) {
margin-top: 8px;
}
.duc_root .duc_avatar_stack {
display: grid;
width: 100%;
height: 100%;
}
.duc_root .duc_avatar {
display: block;
object-fit: cover;
pointer-events: none;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
grid-area: 1/1;
}
.duc_root .duc_avatar_svg {
position: absolute;
contain: paint;
width: auto;
display: block;
pointer-events: none;
}
.duc_root .duc_avatar_decoration {
position: absolute;
contain: paint;
pointer-events: none;
top: var(--custom-avatar-avatar-decoration-border-position);
left: var(--custom-avatar-avatar-decoration-border-position);
}
.duc_root .duc_avatar_wrapper {
position: absolute;
z-index: 0;
top: 80px;
left: 22px;
border-radius: 50%;
}
.duc_root .duc_avatar_position_premium {
top: 76px;
}
.duc_root .duc_avatar_position_normal {
top: 16px;
}
.duc_root .duc_avatar_position_profile {
top: calc(-0.5 * (var(--custom-user-profile-modal-header-avatar-size) + var(--custom-user-profile-modal-header-total-avatar-border-size)));
left: 22px;
width: 120px;
height: 120px;
}
.duc_root .duc_avatar_wrapper_inner {
position: relative;
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
border-radius: 50%;
}
.duc_root .duc_avatar::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--background-modifier-accent);
}
.duc_root .duc_profile_badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 2px;
min-height: 22px;
}
.duc_root .duc_profile_badges:empty {
visibility: hidden;
}
.duc_root .duc_profile_badges.duc_user_card {
box-sizing: content-box;
position: relative;
top: 12px;
right: 16px;
width: fit-content;
align-self: flex-end;
background-color: var(--profile-body-background-color);
border-radius: var(--radius-sm);
max-width: 190px;
padding: 4px;
}
.duc_root .duc_profile_badges.duc_user_card .duc_profile_badge {
width: 22px;
height: 22px;
}
.duc_root .duc_profile_badges.duc_user_profile {
padding: 2px 4px;
background-color: var(--profile-body-background-color);
border-radius: 8px;
margin-right: 16px;
justify-content: flex-start;
}
.duc_root .duc_profile_badges.duc_user_profile .duc_profile_badge {
width: 24px;
height: 24px;
}
.duc_root .duc_profile_badges .duc_profile_badge {
display: block;
background-repeat: no-repeat;
background-size: contin;
background-position: center;
overflow: hidden;
pointer-events: none;
object-fit: cover;
filter: saturate(1);
}
.duc_root .duc_banner_wrapper {
z-index: 0;
contain: paint;
}
.duc_root .duc_banner {
transition: background-color 0.1s;
width: 100%;
min-width: 100%;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.duc_root .duc_banner.duc_user_card {
height: var(--custom-user-banner-banner-height-popout);
}
.duc_root .duc_banner.duc_user_profile {
height: var(--custom-user-banner-banner-height-profile);
}
.duc_root .duc_banner_premium {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.duc_root .duc_banner_premium.duc_user_card {
height: var(--custom-user-banner-premium-banner-height-popout);
min-height: var(--custom-user-banner-premium-banner-height-popout);
}
.duc_root .duc_banner_premium.duc_user_profile {
height: var(--custom-user-banner-premium-banner-height-profile);
min-height: var(--custom-user-banner-premium-banner-height-profile);
}
.duc_root .duc_clan {
margin-top: 2px;
}
.duc_root .duc_clan .duc_clan_inner {
line-height: 16px;
display: inline-block;
padding: 0 4px;
background: var(--bg-mod-strong);
border-radius: 4px;
vertical-align: middle;
transition: background 0.1s ease-in-out;
color: var(--text-normal);
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
}
.duc_root .duc_clan .duc_clan_inner:hover {
background: var(--bg-mod-faint);
}
.duc_root .duc_clan .duc_clan_inner .duc_clan_img {
width: 12px;
height: 12px;
margin-right: 2px;
margin-top: 0;
margin-bottom: -1px;
}
.duc_root .duc_clan .duc_clan_inner .duc_clan_text {
user-select: none;
}
.duc_root .duc_custom_status {
padding-top: 12px;
padding-right: 12px;
padding-left: 12px;
box-sizing: border-box;
position: relative;
width: 100%;
word-wrap: break-word;
font-size: 14px;
line-height: 18px;
color: var(--text-normal);
}
.duc_root .duc_custom_status_img {
display: block;
margin: -1px 4px -1px 0;
float: left;
width: 20px;
height: 20px;
object-fit: contain;
}
.duc_root .duc_custom_status_text {
user-select: text;
}
.duc_root .duc_emoji_container {
display: inline-block;
}
.duc_root .duc_emoji {
object-fit: contain;
width: var(--custom-emoji-size-emoji);
height: var(--custom-emoji-size-emoji);
vertical-align: bottom;
}
.duc_root .duc_markdown {
font-size: 1rem;
line-height: 1.375rem;
white-space: pre-wrap;
white-space: break-spaces;
word-wrap: break-word;
user-select: text;
color: var(--text-normal);
}
.duc_root .duc_markdown .duc_blockquote_container {
display: flex;
}
.duc_root .duc_markdown .duc_blockquote_container .duc_blockquote_divider {
width: 4px;
border-radius: 4px;
background-color: var(--interactive-muted);
}
.duc_root .duc_markdown .duc_blockquote_container blockquote {
padding: 0 8px 0 12px;
box-sizing: border-box;
text-indent: 0;
max-width: 90%;
}
.duc_root .duc_markdown .duc_channel {
transition: background-color 50ms ease-out, color 50ms ease-out;
cursor: pointer;
border-radius: 3px;
padding: 0 2px;
font-weight: 500;
unicode-bidi: plaintext;
color: var(--mention-foreground);
background: var(--mention-background);
}
.duc_root .duc_markdown .duc_channel:hover {
color: var(--white-500);
background-color: var(--brand-500);
}
.duc_root .duc_markdown .duc_channel .duc_nowrap {
white-space: nowrap;
}
.duc_root .duc_markdown .duc_channel .duc_nowrap .duc_channel_icon {
width: 1em;
height: 1em;
vertical-align: middle;
margin-bottom: 0.2rem;
margin-right: 4px;
}
.duc_root .duc_markdown .duc_channel .duc_channel_name {
text-overflow: ellipsis;
overflow: hidden;
}
.duc_root .duc_markdown .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
border-radius: 4px;
text-size-adjust: none;
color: var(--text-normal);
background: var(--background-secondary);
}
.duc_root .duc_markdown code {
font-size: 0.875rem;
line-height: 1.125rem;
text-indent: 0;
text-indent: 0;
white-space: pre-wrap;
background: var(--background-secondary);
border: 1px solid var(--background-tertiary);
}
.duc_root .duc_markdown pre {
box-sizing: border-box;
border-radius: 4px;
padding: 0;
font-family: var(--font-code);
font-size: 0.75rem;
line-height: 1rem;
margin-top: 6px;
max-width: 90%;
white-space: pre-wrap;
background-clip: border-box;
}
.duc_root .duc_markdown em {
font-style: italic;
}
.duc_root .duc_markdown h1,
.duc_root .duc_markdown h2,
.duc_root .duc_markdown h3,
.duc_root .duc_markdown h4,
.duc_root .duc_markdown h5,
.duc_root .duc_markdown h6 {
font-family: var(--font-display);
margin: 0;
font-weight: 600;
font-size: inherit;
white-space: normal;
padding-right: 16px;
line-height: 1.25em;
color: inherit;
}
.duc_root .duc_markdown .duc_inline_code {
width: auto;
height: auto;
padding: 0 0.2em;
margin: -0.2em 0;
border-radius: 4px;
font-size: 85%;
font-family: var(--font-code);
text-indent: 0;
text-indent: 0;
white-space: pre-wrap;
}
.duc_root .duc_markdown a {
color: var(--text-link);
word-break: break-word;
cursor: pointer;
}
.duc_root .duc_markdown ul, .duc_root .duc_markdown ol {
margin: 4px 0 0 16px;
list-style-position: outside;
}
.duc_root .duc_markdown ul {
list-style-type: disc;
}
.duc_root .duc_markdown ol {
list-style-type: decimal;
margin-left: calc(0.4em + 0.6em * var(--totalCharacters));
}
.duc_root .duc_markdown li {
white-space: break-spaces;
margin-bottom: 4px;
}
.duc_root .duc_markdown .duc_role_mention {
border-radius: 3px;
padding: 0 2px;
font-weight: 500;
unicode-bidi: plaintext;
color: var(--mention-foreground);
background: var(--mention-background);
}
.duc_root .duc_markdown .duc_spoiler_container {
--__current--spoiler-content-opacity: 1;
--__current--spoiler-background-color: var(--__spoiler-background-color--revealed);
border-radius: 4px;
background-color: var(--__current--spoiler-background-color);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.duc_root .duc_markdown .duc_spoiler_container[aria-expanded=false] {
cursor: pointer;
--__current--spoiler-content-opacity: 0;
--__current--spoiler-text-color: var(--__spoiler-text-color--hidden);
--__current--spoiler-background-color: var(--__spoiler-background-color--hidden);
}
.duc_root .duc_markdown .duc_spoiler_container[aria-expanded=false] .duc_spoiler_obscured {
cursor: pointer;
pointer-events: none;
}
.duc_root .duc_markdown .duc_spoiler_container:hover {
--__current--spoiler-background-color: var(--__spoiler-background-color--hidden--hover);
}
.duc_root .duc_markdown .duc_spoiler_container .duc_spoiler_content {
color: var(--__current--spoiler-text-color);
}
.duc_root .duc_markdown .duc_spoiler_container .duc_spoiler_content span {
opacity: var(--__current--spoiler-content-opacity);
transition: opacity 0.1s ease;
}
.duc_root .duc_markdown strong {
font-weight: 700;
}
.duc_root .duc_markdown .duc_timestamp {
background-color: var(--background-modifier-accent);
border-radius: 3px;
padding: 0 2px;
}
.duc_root .duc_markdown .duc_user_mention {
transition: background-color 50ms ease-out, color 50ms ease-out;
cursor: pointer;
border-radius: 3px;
padding: 0 2px;
font-weight: 500;
unicode-bidi: plaintext;
color: var(--mention-foreground);
background: var(--mention-background);
}
.duc_root .duc_markdown .duc_user_mention:hover {
text-decoration: underline;
color: var(--white-500);
background-color: var(--brand-500);
}
@media all and (-webkit-max-device-pixel-ratio: 1) {
.duc_root .theme-light .duc_markdown {
font-weight: 500;
}
}
.duc_root .duc_profile_header {
z-index: 1;
margin-bottom: calc(-8px + 0.5 * (var(--custom-user-profile-modal-header-avatar-size) + var(--custom-user-profile-modal-header-total-avatar-border-size)));
}
.duc_root .duc_profile_header .duc_profile_header_inner {
position: relative;
}
.duc_root .duc_profile_header .duc_profile_header_inner .duc_profile_header_positioner {
position: absolute;
top: 16px;
right: 16px;
width: calc(100% - 176px);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.duc_root .duc_profile_body {
height: 385px;
max-height: 100%;
margin: 16px;
position: relative;
background-color: var(--profile-body-background-color);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
overflow: hidden;
}
.duc_root .duc_profile_body .duc_profile_body_inner {
display: flex;
flex-direction: column;
box-sizing: border-box;
border-radius: 8px;
overflow: hidden;
}
.duc_root .duc_profile_body .duc_profile_body_inner .duc_custom_status {
font-family: var(--font-primary);
font-size: 14px;
line-height: 1.2857142857;
font-weight: 400;
color: var(--header-secondary);
}
.duc_root .duc_profile_body .duc_profile_body_inner .duc_pronouns {
color: var(--text-normal);
}
.duc_root .duc_profile_body .duc_profile_body_inner .duc_discriminator,
.duc_root .duc_profile_body .duc_profile_body_inner .duc_user_tag_username {
color: var(--header-secondary);
}
.duc_root .duc_profile_body .duc_profile_body_inner .duc_clan {
display: none;
}
.duc_root .duc_profile_tab_bar {
border-bottom: 1px solid var(--profile-body-divider-color);
margin: 20px 12px 0;
padding: 0;
font-family: var(--font-primary);
}
.duc_root .duc_profile_tab_bar .duc_profile_tab_bar_inner {
align-items: stretch;
display: flex;
gap: 40px;
flex-direction: row;
}
.duc_root .duc_profile_tab_bar .duc_profile_tab_bar_inner .duc_profile_tab_bar_item {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: transparent;
color: var(--interactive-normal);
display: inline;
height: 39px;
font-size: 14px;
position: relative;
line-height: 20px;
cursor: pointer;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex-shrink: 0;
}
.duc_root .duc_profile_tab_bar .duc_profile_tab_bar_inner .duc_profile_tab_bar_item:hover {
border-bottom-color: var(--interactive-hover);
}
.duc_root .duc_profile_tab_bar .duc_profile_tab_bar_inner .duc_profile_tab_bar_item[aria-selected=true] {
border-bottom-color: var(--interactive-active);
cursor: default;
color: var(--interactive-active);
}
.duc_root .duc_profile_tab_scroller {
overflow: hidden scroll;
position: relative;
box-sizing: border-box;
min-height: 0;
flex: 1 1 auto;
}
.duc_root .duc_profile_tab_scroller::-webkit-scrollbar-thumb, .duc_root .duc_profile_tab_scroller::-webkit-scrollbar-track {
visibility: hidden;
}
.duc_root .duc_profile_tab_scroller:hover::-webkit-scrollbar-thumb, .duc_root .duc_profile_t