/* 
 * Theme made by: @nexy7574 (@nex:nexy7574.co.uk)
 * Theme name: Discord Onyx
 * Theme source: https://css.gomuks.app/theme/discord-onyx
 */

:root {
  --discord-mentioned-overlay: color-mix(in oklab, hsl(36.894 calc(1 * 100%) 31.569% / 0.0784313725490196) 100%, hsl(0 0% 0% / 0.0784313725490196) 0%); /* The yellow overlay on a message when you've been pinged */
  --discord-jump-overlay: color-mix(in oklab, hsl(234.935 calc(1 * 85.556%) 64.706% / 0.1607843137254902) 100%, hsl(0 0% 0% / 0.1607843137254902) 0%);  /* In discord, this will have that purple overlay on a message when you jump to it.
                                                          it will also phase from 0.1 to 0 alpha, and then be removed, however that can't be
                                                          done with gomuks in pure CSS as it requires removing a class after adding it. */
  --discord-mention-pill-hover-background: rgb(114, 137, 218);
  --discord-mention-pill-background: rgba(88, 101, 242, 0.3);

  /* Colours from https://discord.com/branding - 2025-09-30 */
  --discord-blurple: #5865F2;
  --discord-light-blurple: #E0E3FF;
  --discord-green: #57F287;
  --discord-yellow: #FEE75C;
  --discord-fuchsia: #EB459E;
  --discord-red: #ED4245;
  --discord-white: #fff;
  --discord-black: #000;

  /* And role colour presets */
  --discord-role-teal: #19BB9C;
  --discord-role-dark-teal: #107F69;
  --discord-role-green: #2ECB70;
  --discord-role-dark-green: #1E8B4C;
  --discord-role-blue: #3498DB;
  --discord-role-dark-blue: #1F6594;
  --discord-role-purple: #9B58B5;
  --discord-role-dark-purple: #70368A;
  --discord-role-pink: #E91D62;
  --discord-role-dark-pink: #AC1356;
  --discord-role-yellow: #F1C30E;
  --discord-role-dark-yellow: #C17B0D;
  --discord-role-yellow-orange: #E74C3C;
  --discord-role-dark-yellow-orange: #A84300;
  --discord-role-orange: #E74C3C;
  --discord-role-dark-orange: #992D21;
  --discord-role-light-grey: #95A5A6;
  --discord-role-dark-grey: #979C9F;
  --discord-role-blue-grey: #5F7C8B;
  --discord-role-dark-blue-grey: #546D79;

  /* These variables are the same across themes */
  --timeline-jump-bg-color: var(--discord-jump-overlay);
  --timeline-jump-hover-bg-color: var(--discord-jump-overlay);
  --timeline-highlight-bg-color: var(--discord-mentioned-overlay);
  --timeline-highlight-hover-bg-color: var(--discord-mentioned-overlay);
  --highlight-pill-background-color: var(--discord-mention-pill-background);

  --discord-segment-divider-colour: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.23921568627450981) 100%, hsl(0 0% 0% / 0.23921568627450981) 0%);
}

/* From Discord's Onyx theme as of 2025-09-30 */
:root {
  --text-color: #daddda;

  --background-color: color-mix(in oklab, hsl(220 calc(1 * 7.317%) 8.039% / 1) 100%, #000 0%);
  --timeline-hover-bg-color: rgba(0,0,0,0);
  --room-list-background: color-mix(in oklab, hsl(0 calc(1 * 0%) 0% / 1) 100%, #000 0%);
  --room-list-background-overlay: rgba(0,0,0,0);
  --composer-background-color: color-mix(in oklab, hsl(220 calc(1 * 7.317%) 8.039% / 1) 100%, #000 0%);
  --right-panel-background-color: color-mix(in oklab, hsl(240 calc(1 * 12.5%) 3.137% / 1) 100%, #000 0%);
  --blockquote-border-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.4392156862745098) 100%, hsl(0 0% 0% / 0.4392156862745098) 0%);
  --space-list-background-overlay: color-mix(in oklab, hsl(0 calc(1 * 0%) 0% / 1) 100%, #000 0%);
}

/* Set the right panel (member list, profile viewer, moderation tooling, pin viewer, thread view) background colour */
.right-panel-content {
  background-color: var(--right-panel-background-color);
}

/* Set the hover background colour and add padding to events */
.timeline.event {
  padding: 1em;
  background: var(--timeline-hover-bg-color);
}

/* Increase the padding of room list entries */
div.room-entry {
  padding: .25rem 0;
  contain-intrinsic-height: 3.5rem;
}

/* Disable cosmetic stuff on the message composer */
div.message-composer {
  box-shadow: none;
  border: 1px solid oklab(0.678888 0.00325716 -0.011175 / 0.160784);
  border-radius: 8px;
  min-height: 56px;
  vertical-align: baseline;
  
  & > .input-area {
    min-height: 56px;
  }
}

/* Change the colour of blockquotes */
.html-body blockquote {
  border-left: 4px solid var(--blockquote-border-color) !important;
}

/* Add mention pill colours to user mentions */
div.html-body a.hicli-matrix-uri-user:hover {
  background-color: var(--discord-mention-pill-hover-background) !important;
}

/* Add the divider border to the space & room lists, and right panel */
div.room-list {
  border-left: 1px solid var(--discord-segment-divider-colour);
  border-right: 1px solid var(--discord-segment-divider-colour);
  /* And between the room list & search function */
  border-top: 1px solid var(--discord-segment-divider-colour)
}

/* Colour the send button in */
div.message-composer > div.input-area > button[title="Send message"]:not(:disabled) > svg {
	fill: var(--discord-blurple) !important;
}