Skip to content

Instantly share code, notes, and snippets.

@watatomo

watatomo/nightcord.theme.css

Created November 15, 2022 18:23
Show Gist options
  • Save watatomo/bcf5599c5ea994bbf0e5722de9d3655c to your computer and use it in GitHub Desktop.
Save watatomo/bcf5599c5ea994bbf0e5722de9d3655c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nightcord.theme.css
/**
* @name Nightcord
* @author mfycode, Ren (@riamuyumemi)
* @version 0.0.1
* @description A theme made to look like the Nightcord UI from Project Sekai (プロセカ)!
* @website https://github.com/mfycode/nightcord.theme
*/
/*Credits to @KageMiyaku and @Pudding77984612 for the original theme. Thank you!*/
[data-popout-root],
html {
--brand-experiment: #884499;
--brand-experiment-100: #e8d6ed;
--brand-experiment-130: #e3cde9;
--brand-experiment-160: #dec4e5;
--brand-experiment-200: #d9bbe1;
--brand-experiment-230: #d5b3dd;
--brand-experiment-260: #d0aad9;
--brand-experiment-300: #cba1d5;
--brand-experiment-330: #c18fcd;
--brand-experiment-360: #b77ec5;
--brand-experiment-400: #ad6cbe;
--brand-experiment-430: #a35ab6;
--brand-experiment-460: #984cab;
--brand-experiment-500: #884499;
--brand-experiment-530: #783c87;
--brand-experiment-560: #693476;
--brand-experiment-600: #592c64;
--brand-experiment-630: #492552;
--brand-experiment-660: #3a1d41;
--brand-experiment-700: #2a152f;
--brand-experiment-730: #221126;
--brand-experiment-760: #1a0d1d;
--brand-experiment-800: #120915;
--brand-experiment-830: #0a050c;
--brand-experiment-860: #030103;
--brand-experiment-900: black;
--brand-experiment-05a: rgba(136, 68, 153, 0.05);
--brand-experiment-10a: rgba(136, 68, 153, 0.1);
--brand-experiment-15a: rgba(136, 68, 153, 0.15);
--brand-experiment-20a: rgba(136, 68, 153, 0.2);
--brand-experiment-25a: rgba(136, 68, 153, 0.25);
--brand-experiment-30a: rgba(136, 68, 153, 0.3);
--brand-experiment-35a: rgba(136, 68, 153, 0.35);
--brand-experiment-40a: rgba(136, 68, 153, 0.4);
--brand-experiment-45a: rgba(136, 68, 153, 0.45);
--brand-experiment-50a: rgba(136, 68, 153, 0.5);
--brand-experiment-55a: rgba(136, 68, 153, 0.55);
--brand-experiment-60a: rgba(136, 68, 153, 0.6);
--brand-experiment-65a: rgba(136, 68, 153, 0.65);
--brand-experiment-70a: rgba(136, 68, 153, 0.7);
--brand-experiment-75a: rgba(136, 68, 153, 0.75);
--brand-experiment-80a: rgba(136, 68, 153, 0.8);
--brand-experiment-85a: rgba(136, 68, 153, 0.85);
--brand-experiment-90a: rgba(136, 68, 153, 0.9);
--brand-experiment-95a: rgba(136, 68, 153, 0.95);
}
.theme-light {
--nc-flamingo: #dd7878;
--nc-pink: #ea76cb;
--nc-mauve: #8839ef;
--nc-red: #d20f39;
--nc-peach: #fe640b;
--nc-yellow: #df8e1d;
--nc-green: #40a02b;
--nc-teal: #179299;
--nc-sky: #04a5e5;
--nc-sapphire: #209fb5;
--nc-blue: #1e66f5;
--nc-text: #312d4a;
--nc-subtext1: #3d365a;
--nc-subtext0: #4e4869;
--nc-overlay2: #5c5776;
--nc-overlay1: #6a6682;
--nc-overlay0: #78748d;
--nc-surface2: #8e8aa2;
--nc-surface1: #a49fb6;
--nc-surface0: #bab6c8;
--nc-base: #eff1f5;
--nc-mantle: #e6e9ef;
--nc-crust: #dce0e8;
--nc-online: #95fff2;
--nc-idle: #fff394;
--nc-dnd: #f394ff;
--nc-close: #ff52a8;
--nc-close-hover: #ff0682;
--nc-max: #42dcff;
--nc-max-hover: #ff0682;
--nc-min: #ffde55;
--nc-min-hover: #ff0682;
--header-primary: #312d4a;
--header-secondary: #4e4869;
--text-normal: #312d4a;
--text-muted: #4e4869;
--text-link: #04a5e5;
--text-link-low-saturation: #209fb5;
--text-positive: #40a02b;
--text-warning: #df8e1d;
--text-danger: #d20f39;
--text-brand: var(--brand-experiment);
--background-primary: #eff1f5;
--background-secondary: #e6e9ef;
--background-secondary-alt: #dde1e9;
--background-tertiary: #dce0e8;
--background-accent: var(--brand-experiment);
--background-floating: #d6dbe4;
--background-nested-floating: #e6e9ef;
--background-mobile-primary: #eff1f5;
--background-mobile-secondary: #e6e9ef;
--chat-background: #eff1f5;
--chat-border: #dce0e8;
--chat-input-container-background: #eff1f5;
--background-modifier-hover: rgba(49, 45, 74, 0.15);
--background-modifier-selected: rgba(49, 45, 74, 0.2);
--background-modifier-accent: rgba(49, 45, 74, 0.26);
--background-modifier-active: rgba(49, 45, 74, 0.17);
--info-positive-background: rgba(64, 160, 43, 0.15);
--info-positive-foreground: #40a02b;
--info-positive-text: #312d4a;
--info-warning-background: rgba(223, 142, 29, 0.15);
--info-warning-foreground: #df8e1d;
--info-warning-text: #312d4a;
--info-danger-background: rgba(210, 15, 57, 0.15);
--info-danger-foreground: #d20f39;
--info-danger-text: #312d4a;
--info-help-background: rgba(4, 165, 229, 0.15);
--info-help-foreground: #04a5e5;
--info-help-text: #312d4a;
--status-positive-background: #40a02b;
--status-positive-text: #dce0e8;
--status-warning-background: #df8e1d;
--status-warning-text: #dce0e8;
--status-danger-background: #d20f39;
--status-danger-text: #312d4a;
--status-danger: #d20f39;
--status-positive: #40a02b;
--status-warning: #df8e1d;
--button-danger-background: #d20f39;
--button-danger-background-hover: #ba0d33;
--button-danger-background-active: #ae0c2f;
--button-danger-background-disabled: #d20f39;
--button-positive-background: #40a02b;
--button-positive-background-hover: #388c26;
--button-positive-background-active: #348223;
--button-positive-background-disabled: #40a02b;
--button-secondary-background: #a49fb6;
--button-secondary-background-hover: #9691ab;
--button-secondary-background-active: #9691ab;
--button-secondary-background-disabled: #a49fb6;
--button-outline-danger-text: #312d4a;
--button-outline-danger-border: #d20f39;
--button-outline-danger-background: transparent;
--button-outline-danger-background-hover: #c60e36;
--button-outline-danger-text-hover: #312d4a;
--button-outline-danger-border-hover: #c60e36;
--button-outline-danger-background-active: #ba0d33;
--button-outline-danger-text-active: #312d4a;
--button-outline-danger-border-active: #c60e36;
--button-outline-positive-text: #312d4a;
--button-outline-positive-border: #40a02b;
--button-outline-positive-background: transparent;
--button-outline-positive-background-hover: #3c9628;
--button-outline-positive-text-hover: #dce0e8;
--button-outline-positive-border-hover: #3c9628;
--button-outline-positive-background-active: #388c26;
--button-outline-positive-text-active: #312d4a;
--button-outline-positive-border-active: #3c9628;
--button-outline-brand-text: #312d4a;
--button-outline-brand-border: var(--brand-experiment);
--button-outline-brand-background: transparent;
--button-outline-brand-background-hover: #804090;
--button-outline-brand-text-hover: #312d4a;
--button-outline-brand-border-hover: #804090;
--button-outline-brand-background-active: #783c87;
--button-outline-brand-text-active: #312d4a;
--button-outline-brand-border-active: #804090;
--button-outline-primary-text: #312d4a;
--button-outline-primary-border: #8e8aa2;
--button-outline-primary-background: transparent;
--button-outline-primary-background-hover: #87839c;
--button-outline-primary-text-hover: #312d4a;
--button-outline-primary-border-hover: #87839c;
--button-outline-primary-background-active: #807c97;
--button-outline-primary-text-active: #312d4a;
--button-outline-primary-border-active: #87839c;
--modal-background: #eff1f5;
--modal-footer-background: #dce0e8;
--scrollbar-thin-thumb: #dce0e8;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #dce0e8;
--scrollbar-auto-track: rgba(230, 233, 239, 0.65);
--scrollbar-auto-scrollbar-color-thumb: var(--brand-experiment);
--scrollbar-auto-scrollbar-color-track: rgba(230, 233, 239, 0.65);
--input-background: #dce0e8;
--input-placeholder-text: #3d365a;
--logo-primary: #312d4a;
--control-brand-foreground: var(--brand-experiment);
--control-brand-foreground-new: var(--brand-experiment);
--background-mentioned: rgba(223, 142, 29, 0.1);
--background-mentioned-hover: rgba(223, 142, 29, 0.08);
--background-message-hover: rgba(230, 233, 239, 0.25);
--background-message-automod: rgba(220, 138, 120, 0.05);
--background-message-automod-hover: rgba(220, 138, 120, 0.1);
--background-message-highlight: rgba(136, 68, 153, 0.1);
--background-message-highlight-hover: rgba(136, 68, 153, 0.08);
--channels-default: #433e5a;
--channel-icon: #433e5a;
--channel-text-area-placeholder: rgba(49, 45, 74, 0.5);
--channeltextarea-background: #e6e9ef;
--activity-card-background: #dce0e8;
--textbox-markdown-syntax: #78748d;
--spoiler-revealed-background: #bab6c8;
--spoiler-hidden-background: #8e8aa2;
--android-navigation-bar-background: #dce0e8;
--android-ripple: rgba(220, 224, 232, 0.3);
--deprecated-card-bg: rgba(220, 224, 232, 0.6);
--deprecated-card-editable-bg: rgba(220, 224, 232, 0.3);
--deprecated-store-bg: #eff1f5;
--deprecated-quickswitcher-input-background: #807c97;
--deprecated-quickswitcher-input-placeholder: rgba(220, 224, 232, 0.3);
--deprecated-text-input-bg: #dce0e8;
--deprecated-text-input-border: rgba(220, 224, 232, 0.3);
--deprecated-text-input-border-hover: #cdd2de;
--deprecated-text-input-border-disabled: #e6e9ef;
--deprecated-text-input-prefix: #4e4869;
--focus-primary: var(--brand-experiment);
--interactive-normal: #312d4a;
--interactive-muted: rgba(49, 45, 74, 0.3);
--interactive-hover: #312d4a;
--interactive-active: #312d4a;
}
.theme-dark {
--nc-flamingo: #eebebe;
--nc-pink: #f4b8e4;
--nc-mauve: #ca9ee6;
--nc-red: #e78284;
--nc-peach: #ef9f76;
--nc-yellow: #e5c890;
--nc-green: #a6d189;
--nc-teal: #81c8be;
--nc-sky: #99d1db;
--nc-sapphire: #85c1dc;
--nc-blue: #8caaee;
--nc-text: #ffffff;
--nc-subtext1: #f4f2f3;
--nc-subtext0: #c0bfcb;
--nc-overlay2: #bab6c8;
--nc-overlay1: #a49fb6;
--nc-overlay0: #8e8aa2;
--nc-surface2: #78748d;
--nc-surface1: #6a6682;
--nc-surface0: #5c5776;
--nc-base: #4e4869;
--nc-mantle: #3d365a;
--nc-crust: #312d4a;
--nc-online: #95fff2;
--nc-idle: #fff394;
--nc-dnd: #f394ff;
--nc-close: #ff52a8;
--nc-close-hover: #ff0682;
--nc-max: #42dcff;
--nc-max-hover: #ff0682;
--nc-min: #ffde55;
--nc-min-hover: #ff0682;
--header-primary: #ffffff;
--header-secondary: #c0bfcb;
--text-normal: #ffffff;
--text-muted: #c0bfcb;
--text-link: #99d1db;
--text-link-low-saturation: #85c1dc;
--text-positive: #a6d189;
--text-warning: #e5c890;
--text-danger: #e78284;
--text-brand: var(--brand-experiment);
--background-primary: #4e4869;
--background-secondary: #3d365a;
--background-secondary-alt: #373050;
--background-tertiary: #312d4a;
--background-accent: var(--brand-experiment);
--background-floating: #2d2944;
--background-nested-floating: #3d365a;
--background-mobile-primary: #4e4869;
--background-mobile-secondary: #3d365a;
--chat-background: #4e4869;
--chat-border: #312d4a;
--chat-input-container-background: #4e4869;
--background-modifier-hover: rgba(255, 255, 255, 0.15);
--background-modifier-selected: rgba(255, 255, 255, 0.2);
--background-modifier-accent: rgba(255, 255, 255, 0.26);
--background-modifier-active: rgba(255, 255, 255, 0.17);
--info-positive-background: rgba(166, 209, 137, 0.15);
--info-positive-foreground: #a6d189;
--info-positive-text: #ffffff;
--info-warning-background: rgba(229, 200, 144, 0.15);
--info-warning-foreground: #e5c890;
--info-warning-text: #ffffff;
--info-danger-background: rgba(231, 130, 132, 0.15);
--info-danger-foreground: #e78284;
--info-danger-text: #ffffff;
--info-help-background: rgba(153, 209, 219, 0.15);
--info-help-foreground: #99d1db;
--info-help-text: #ffffff;
--status-positive-background: #a6d189;
--status-positive-text: #312d4a;
--status-warning-background: #e5c890;
--status-warning-text: #312d4a;
--status-danger-background: #e78284;
--status-danger-text: #ffffff;
--status-danger: #e78284;
--status-positive: #a6d189;
--status-warning: #e5c890;
--button-danger-background: #e78284;
--button-danger-background-hover: #e36d6f;
--button-danger-background-active: #e16264;
--button-danger-background-disabled: #e78284;
--button-positive-background: #a6d189;
--button-positive-background-hover: #98ca77;
--button-positive-background-active: #91c66d;
--button-positive-background-disabled: #a6d189;
--button-secondary-background: #6a6682;
--button-secondary-background-hover: #5e5b74;
--button-secondary-background-active: #5e5b74;
--button-secondary-background-disabled: #6a6682;
--button-outline-danger-text: #ffffff;
--button-outline-danger-border: #e78284;
--button-outline-danger-background: transparent;
--button-outline-danger-background-hover: #e57779;
--button-outline-danger-text-hover: #ffffff;
--button-outline-danger-border-hover: #e57779;
--button-outline-danger-background-active: #e36d6f;
--button-outline-danger-text-active: #ffffff;
--button-outline-danger-border-active: #e57779;
--button-outline-positive-text: #ffffff;
--button-outline-positive-border: #a6d189;
--button-outline-positive-background: transparent;
--button-outline-positive-background-hover: #9fcd80;
--button-outline-positive-text-hover: #312d4a;
--button-outline-positive-border-hover: #9fcd80;
--button-outline-positive-background-active: #98ca77;
--button-outline-positive-text-active: #ffffff;
--button-outline-positive-border-active: #9fcd80;
--button-outline-brand-text: #ffffff;
--button-outline-brand-border: var(--brand-experiment);
--button-outline-brand-background: transparent;
--button-outline-brand-background-hover: #804090;
--button-outline-brand-text-hover: #ffffff;
--button-outline-brand-border-hover: #804090;
--button-outline-brand-background-active: #783c87;
--button-outline-brand-text-active: #ffffff;
--button-outline-brand-border-active: #804090;
--button-outline-primary-text: #ffffff;
--button-outline-primary-border: #78748d;
--button-outline-primary-background: transparent;
--button-outline-primary-background-hover: #726e86;
--button-outline-primary-text-hover: #ffffff;
--button-outline-primary-border-hover: #726e86;
--button-outline-primary-background-active: #6c687f;
--button-outline-primary-text-active: #ffffff;
--button-outline-primary-border-active: #726e86;
--modal-background: #4e4869;
--modal-footer-background: #312d4a;
--scrollbar-thin-thumb: #312d4a;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #312d4a;
--scrollbar-auto-track: rgba(61, 54, 90, 0.65);
--scrollbar-auto-scrollbar-color-thumb: var(--brand-experiment);
--scrollbar-auto-scrollbar-color-track: rgba(61, 54, 90, 0.65);
--input-background: #312d4a;
--input-placeholder-text: #f4f2f3;
--logo-primary: #ffffff;
--control-brand-foreground: var(--brand-experiment);
--control-brand-foreground-new: var(--brand-experiment);
--background-mentioned: rgba(229, 200, 144, 0.1);
--background-mentioned-hover: rgba(229, 200, 144, 0.08);
--background-message-hover: rgba(61, 54, 90, 0.25);
--background-message-automod: rgba(242, 213, 207, 0.05);
--background-message-automod-hover: rgba(242, 213, 207, 0.1);
--background-message-highlight: rgba(136, 68, 153, 0.1);
--background-message-highlight-hover: rgba(136, 68, 153, 0.08);
--channels-default: #b2b1c0;
--channel-icon: #b2b1c0;
--channel-text-area-placeholder: rgba(255, 255, 255, 0.5);
--channeltextarea-background: #3d365a;
--activity-card-background: #312d4a;
--textbox-markdown-syntax: #8e8aa2;
--spoiler-revealed-background: #5c5776;
--spoiler-hidden-background: #78748d;
--android-navigation-bar-background: #312d4a;
--android-ripple: rgba(49, 45, 74, 0.3);
--deprecated-card-bg: rgba(49, 45, 74, 0.6);
--deprecated-card-editable-bg: rgba(49, 45, 74, 0.3);
--deprecated-store-bg: #4e4869;
--deprecated-quickswitcher-input-background: #6c687f;
--deprecated-quickswitcher-input-placeholder: rgba(49, 45, 74, 0.3);
--deprecated-text-input-bg: #312d4a;
--deprecated-text-input-border: rgba(49, 45, 74, 0.3);
--deprecated-text-input-border-hover: #27233a;
--deprecated-text-input-border-disabled: #3d365a;
--deprecated-text-input-prefix: #c0bfcb;
--focus-primary: var(--brand-experiment);
--interactive-normal: #ffffff;
--interactive-muted: rgba(255, 255, 255, 0.3);
--interactive-hover: #ffffff;
--interactive-active: #ffffff;
}
div[class*=titleBar-][class*=typeWindows-][class*=withFrame-] {
height: 24px;
padding: 0 4px;
}
div[class*=titleBar-][class*=typeWindows-] div[class*=winButton-] {
margin: 7px 0 0 12px;
height: 14px;
width: 14px;
border-radius: 50%;
}
div[class*=titleBar-][class*=typeWindows-] div[class*=winButton-] svg * {
fill: transparent;
stroke: transparent;
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonClose-] {
background-color: var(--nc-close);
margin-right: 8px;
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonClose-]:hover {
background-color: var(--nc-close-hover);
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonMinMax-]:nth-child(3) {
background-color: var(--nc-min);
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonMinMax-]:nth-child(3):hover {
background-color: var(--nc-min-hover);
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonMinMax-]:nth-child(4) {
background-color: var(--nc-max);
}
div[class*=titleBar-][class*=typeWindows-] div[class^=winButtonMinMax-]:nth-child(4):hover {
background-color: var(--nc-max-hover);
}
div[class*=titleBar-][class*=typeWindows-] div[class^=wordmarkWindows-] svg {
display: none;
}
div[class*=titleBar-][class*=typeWindows-]::before {
content: "Nightcord";
font-weight: 800;
font-size: 0.85em;
position: absolute;
top: 8px;
left: 10px;
color: var(--text-muted);
width: auto;
}
main[class^=chatContent-] form[class^=form-] div[class^=channelTextArea-] {
border: solid 1px var(--nc-surface1);
}
main[class^=chatContent-] form[class^=form-] div[class^=channelTextArea-] div[class^=attachedBars-] {
border-top: solid 1px var(--nc-surface1);
}
main[class^=chatContent-] form[class^=form-] div[class^=channelTextArea-] div[class^=attachedBars-] div[class^=replyBar-],
main[class^=chatContent-] form[class^=form-] div[class^=channelTextArea-] div[class^=attachedBars-] div[class^=threadSuggestionBar-] {
background: var(--background-floating);
}
main[class^=chatContent-] form[class^=form-] div[class^=channelTextArea-] svg[class*=stickerIcon-] {
color: var(--interactive-normal) !important;
}
main[class^=chatContent-] form[class^=form-] [class*=inlineCode-],
main[class^=chatContent-] form[class^=form-] code.inline {
background: var(--nc-surface0);
}
main[class^=chatContent-] div[class^=container-] div[class^=cardWrapper-] div[class*=completed-] svg[class^=checkmark-] {
background-color: var(--nc-crust);
color: var(--nc-crust);
}
div[class^=channelTextArea-] button[class*=emojiButton-] {
background: transparent !important;
}
div[class*=autocomplete-] {
background-color: var(--nc-crust) !important;
}
div[class*=autocomplete-] div[class*=categoryHeader] {
background-color: var(--nc-mantle) !important;
}
div[class*=autocomplete-] div[class*=autocompleteRowSubheading] {
background-color: transparent;
}
div[class*=autocomplete-] div[class*=autocompleteRowContentSecondary] {
background-color: transparent;
}
div[class*=autocomplete-] div[class^=usageWrapper-] > div[class*=title-] {
color: var(--brand-experiment) !important;
}
div[class*=autocomplete-] strong {
color: var(--brand-experiment) !important;
}
div[class^=chat-] > div[class^=content-] > div:first-child {
background-color: var(--background-primary);
}
div[class^=chat-] > div[class^=content-] > div:first-child div[class*=mainCard-] {
background-color: var(--nc-surface0);
}
div[class^=messageAttachment-] > div[class^=wrapperAudio],
div[class^=messageAttachment-] > div[class^=attachment-] {
--background-secondary: var(--nc-surface1);
--background-secondary-alt: var(--nc-surface1);
--text-link: var(--nc-text);
font-weight: 500;
}
div[class^=messageAttachment-] div[class^=attachmentInner-] div[class^=metadata-] {
color: var(--text-muted);
opacity: 90%;
font-weight: 500;
margin-top: 0.1em;
}
div[class^=messageAttachment-] > div {
border-radius: 10px;
}
div[class^=messageAttachment-] svg[class*=metadataIcon-],
div[class^=messageAttachment-] svg[class*=downloadButton-] {
color: f4f2f3;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' x='0' y='0' version='1.1' viewBox='162.98 233.98 770.93 629.87'%3E%3Cpath fill='currentColor' d='M194.2 474.7c117-1 586.9-.7 703.6-.6 5.6 0 14.9 17.2 11.4 21.1-29.5 33.1-320.7 341.8-346 363.2-6.7 5.6-29.5 8.4-37.5.8-40.9-38.8-317.4-338.4-341.8-367.9-1.1-1.3 5.8-16.6 10.3-16.6zM218.4 234.1s568.8-.6 688 1.1c8.9.1 22.7 15.1 25.2 25.5 4.2 17.1 1.4 36 1 54.2-.6 29.1-19.9 41.8-54 36.4-6.7-1.1-441.5-2.1-652.1-2.2-17.3 0-40.6 2-50.4-7.7-10.9-10.8-12.3-33.9-12.8-51.8-1.4-55.5-.5-55.5 55.1-55.5z'%3E%3C/path%3E%3C/svg%3E") center/cover no-repeat;
transform: scale(0.65);
}
div[class^=messageAttachment-] svg[class*=metadataIcon-] > path,
div[class^=messageAttachment-] svg[class*=downloadButton-] > path {
color: transparent;
}
div[class^=messageAttachment-] img[class^=icon-] {
top: -2px;
left: 1px;
position: relative;
color: var(--nc-subtext1);
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='2.69 2.82 880.44 1077.05'%3E%3Cg%3E%3Cpath fill='currentColor' d='M794.4 1079.5c-4.1-.5-488.6-.3-710-.3-5.7 0-12.2-.3-16.8-3.1-10.7-6.5-20.6-14.5-30.6-22.1-22.7-17.2-34.2-39.8-34.2-68.6.1-181.8.2-363.7.1-545.5 0-114.9.2-229.8-.2-344.7-.1-23.6 10.9-41.6 25.8-57.6 7.6-8.1 18.4-13.1 26.9-20.5C68.4 5.9 83.8 3 99.8 3c141.6-.2 283.2-.2 424.7-.1 25.9 0 48.5 10.3 67.5 26.3 17.8 15 221.7 221.6 245.3 242.9 19.4 17.5 35.4 37.1 45.8 61.2v673.1l-4.5 9.9c-10.6 23.2-28.8 39.3-49.3 53.4-10.5 7.3-21.7 11.4-34.9 9.8zM73.2 538.8v428.5c0 26.9 6.9 39.3 25 43.3 9.5 2 19.2 3 28.9 3 187.2.2 374.4.2 561.6 0 28.6 0 57.2-2.5 85.7-2 27.7.5 37.9-15.3 37.9-40.1.4-202.7.3-405.3-.4-608 0-11.1-5.9-24.6-13.5-32.9-20.1-22.1-209.6-209-239.7-238-14.5-14-94.4-19.6-115.6-19.6-110.1.2-220.2.8-330.4-.3-28.4-.2-39.8 14.5-39.7 40 .3 142 .3 284.1.2 426.1z M623.5 791.2H279.1c-10.7 0-21.6 1.4-32-.4-10.4-1.9-13.1-11.7-12.6-20.9.5-9.1 6.7-13.5 15.8-13.5h351.8c11.1 0 22.2-.2 33.3-.1 9 .1 14.6 4.5 16 13.6 1.5 9.5-3.4 15.8-11.3 19.6-5.1 2.3-16.5 2.8-16.6 1.7zM620.2 639.9c-59.4.2-299.2.1-359.7.1-15 0-22.2-4.9-25.4-17-2.4-9.2 3-17.3 12.7-17.8 9.5-.5 19-.1 28.5-.1h355c9 0 18.7-1.3 20.2 11.7 1.3 11.3-3.8 18-16.5 20.9-4.8 1.3-9.8 2.1-14.8 2.2zM252.9 454c59.8-.1 316.5 0 379.8 0 15.5 0 23.9 8.4 17.9 20-3.1 6.1-13.2 11.2-20.5 11.8-16.3 1.4-269.2.6-371.8.5-15.3 0-23.6-5.6-24-16-.5-11.2 5.1-16.3 18.6-16.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background: transparent;
}
div[class^=messageAttachment-] div[class^=audioMetadata-]:before {
content: "";
color: var(--nc-subtext1);
width: 32px;
height: 38px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.68 0.3 879.95 1078.95'%3E%3Cg%3E%3Cpath fill='currentColor' d='M882.6 331.5v674.2l-4.5 9.9c-10.5 23.2-28.8 39.4-49.2 53.5-10.6 7.3-21.8 11.4-34.9 9.8-4.1-.5-488.5-.3-709.9-.3-5.7 0-12.2-.4-16.8-3.2-10.7-6.6-20.5-14.5-30.6-22.2-22.3-17-34-39.2-34-67.6.2-297.3.2-594.5 0-891.8 0-28.9 13.9-50.8 34.9-67.3C52.2 15.1 70.8 8.8 87.5.3h448.3c1.1.9 2.2 2.4 3.4 2.4 20.7 1.1 37.6 12 52.5 24.3 17.6 14.6 32.5 32.5 48.7 48.8 25 25.2 50.1 50.3 75.2 75.3 17.6 17.6 35.1 35.1 52.8 52.5 22.7 22.3 44.9 45.2 68.5 66.6 19.4 17.6 35.4 37.1 45.7 61.3zM73 111.6c.2 141.5.1 668.9.2 791.1.1 27 1.8 54.1 2.1 81.1.2 13.8 7.6 21.5 19.6 24.5 10.4 2.6 21.3 4.5 32 4.6 188.3.3 376.6.3 564.9.1 27.4 0 54.8-2.5 82.1-2 27.9.6 38-15.6 38-40.1.4-203 .3-406-.4-609 0-11.2-5.9-24.6-13.4-33-20.1-22.2-43-41.8-64.1-63.1-28.8-29-56.7-59-85.7-87.9-29.5-29.5-59.8-58.3-89.8-87.4-14.5-14-30.7-23.5-52-22.2-21.1 1.4-42.3 2.3-63.5 2.4-110 .3-220.1.9-330.1-.3-28.5-.2-40 14.5-39.9 41.2z M405.3 457.4c0-33.5-.4-67 .5-100.4.1-5 6.6-9.8 9.9-14.8 7.2-11.3 17.7-12.5 30.3-12.8 46-1 86.9 12.9 122.3 41.4 43.8 35.2 71 81.4 82.6 136.3 3.8 17.9 5.4 36.4 7.1 54.7 1.6 17.4-14.7 33.9-32.1 32.7-3.9-.3-8.2-2.4-11.4-4.8-23.2-17.5-50.2-26.4-77.8-33.3-16-4-23.1 2.4-23.1 18.9.2 49.6 1.5 99.3 0 148.9-1.2 40.7-21.8 73-52.4 98.5-23.6 19.8-51.7 30-82.4 30.9-34.1 1-65.2-9.4-92-30.8-28.4-22.6-47-51.3-53.1-87.9-6.8-40.8 2.5-77.2 27.3-109.9 24-31.8 56.3-49.9 95.1-55.9 11.8-1.9 24.3-.5 36.4.1 10.1.5 14.1-3.3 13.9-13.8-.4-32.7-.2-65.4-.2-98.1l-.9.1zm43.4 44.2h.1c0 36.7.2 73.3-.2 110-.1 6.6-2.3 13.2-3.6 19.8-5.9-2.3-12.1-4.2-17.7-7.2-38.8-20.7-77.5-20.6-113.3 5.1s-50.3 62-41.6 105.5c10.9 54.9 59.1 86.7 107.4 83.4 64.6-4.4 96.6-54.2 100.6-105.5 2.7-34.4.5-69.2.4-103.8 0-28.6.1-57.2-.4-85.8-.1-7.3 1.7-11 9.4-11.5 43.9-3 85.5 4 123.3 28 2.8 1.8 6.3 2.5 9.5 3.7.1-3.5 1.2-7.4.2-10.5-8.2-23.8-14.6-48.6-25.9-70.9-10.1-19.8-22.8-40.8-39.9-54.1-25.8-20.3-56.5-33.5-89-38.3-15.6-2.3-19.4.3-19.4 16.3.1 38.5.1 77.2.1 115.8z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
div[class^=messageAttachment-] div[class^=audioControls-],
div[class^=messageAttachment-] div[class^=videoControls-] {
background-color: var(--nc-mantle);
margin-top: 6px;
border-radius: 8px;
color: var(--nc-subtext1);
}
div[class^=messageAttachment-] div[class^=mediaBarWrapper-] div[class^=bubble-] {
color: var(--nc-subtext1);
background-color: var(--nc-surface0);
}
div[class^=messageAttachment-] div[class^=mediaBarWrapper-] div[class^=bubble-]::before {
border-top: 5px solid var(--nc-surface0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment