Catkkunen

/*
 * Catkkunen for gomuks v3.5.3
 * Theme by @vrkknn:vrkknn.net
 * https://github.com/Virkkunen/themes/
 * Based on Catppuccin: https://github.com/catppuccin/catppuccin
 */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  color-scheme: light dark;

  /* latte and mocha */
  --ctp-rosewater: light-dark(#dc8a78, #f5e0dc);
  --ctp-flamingo: light-dark(#dd7878, #f2cdcd);
  --ctp-pink: light-dark(#ea76cb, #f5c2e7);
  --ctp-mauve: light-dark(#8839ef, #cba6f7);
  --ctp-red: light-dark(#d20f39, #f38ba8);
  --ctp-maroon: light-dark(#e64553, #eba0ac);
  --ctp-peach: light-dark(#fe640b, #fab387);
  --ctp-yellow: light-dark(#df8e1d, #f9e1ae);
  --ctp-green: light-dark(#40a02b, #a6e3a1);
  --ctp-teal: light-dark(#179299, #94e2d5);
  --ctp-sky: light-dark(#04a5e5, #89dceb);
  --ctp-sapphire: light-dark(#209fb5, #74c7ec);
  --ctp-blue: light-dark(#1e66f5, #89b4fa);
  --ctp-lavender: light-dark(#7287fd, #b4befe);
  --ctp-text: light-dark(#4c4f69, #cdd6f4);
  --ctp-subtext1: light-dark(#5c5f77, #bac2de);
  --ctp-subtext0: light-dark(#6c6f85, #a6adc8);
  --ctp-overlay2: light-dark(#7c7f93, #9399b2);
  --ctp-overlay1: light-dark(#8c8fa1, #7f849c);
  --ctp-overlay0: light-dark(#9ca0b0, #6c7086);
  --ctp-surface2: light-dark(#acb0be, #585b70);
  --ctp-surface1: light-dark(#bcc0cc, #45475a);
  --ctp-surface0: light-dark(#ccd0da, #313244);
  --ctp-base: light-dark(#eff1f5, #1e1e2e);
  --ctp-mantle: light-dark(#e6e9ef, #181825);
  --ctp-crust: light-dark(#dce0e8, #11111b);

  /* overlays and shadows */
  --opacity-overlay0: light-dark(
    rgba(114, 135, 253, 0.15),
    rgba(180, 190, 254, 0.15)
  );
  --opacity-overlay1: light-dark(
    rgba(114, 135, 253, 0.25),
    rgba(180, 190, 254, 0.25)
  );
  --jump-to-reply-overlay0: light-dark(
    rgba(136, 57, 239, 0.25),
    rgba(203, 166, 247, 0.25)
  );
  --box-shadow0: light-dark(rgba(17, 17, 27, 0.45), rgba(0, 0, 0, 0.65));
  --box-shadow1: light-dark(rgba(17, 17, 27, 0.2), rgba(0, 0, 0, 0.2));
  --glow-shadow: 0 0 0.625rem var(--box-shadow0);
  --spread-shadow: 0 0 0.625rem 0.125rem var(--box-shadow1);

  /* misc */
  --round: 0.625rem;
  --font-stack: 'Fira Sans', sans-serif;

  /* Gomuks variables */
  --primary-color: var(--ctp-mauve);
  --primary-color-dark: var(--ctp-mauve);
  --background-color: var(--ctp-crust);
  --login-background-color: var(--ctp-crust);
  --text-color: var(--ctp-text);
  --inverted-text-color: var(--background-color);
  --secondary-text-color: var(--ctp-subtext0);
  --semisecondary-text-color: var(--ctp-subtext1);
  --link-text-color: var(--ctp-blue);
  --visited-link-text-color: var(--ctp-lavender);
  --code-background-color: var(--ctp-surface0);
  --media-placeholder-default-background: var(--ctp-surface0);
  --media-placeholder-button-background: var(--ctp-maroon);
  --error-color: var(--ctp-red);
  --border-color: var(--ctp-mantle);
  --pill-background-color: var(--ctp-mauve);
  --highlight-pill-background-color: var(--ctp-maroon);
  --highlight-pill-text-color: var(--ctp-crust);
  --url-preview-background-color: var(--ctp-mantle);
  --dimmed-overlay-background-color: var(--box-shadow0);
  --button-hover-color: var(--opacity-overlay0);
  --light-hover-color: var(--opacity-overlay1);
  --composer-background-color: var(--ctp-base);
  --timeline-hover-bg-color: var(--ctp-base);
  --timeline-highlight-bg-color: var(--ctp-mantle);
  --timeline-highlight-hover-bg-color: var(--ctp-base);
  --timeline-jump-bg-color: var(--ctp-surface0);
  --timeline-jump-hover-bg-color: var(--ctp-surface1);
  --timeline-soft-failed-bg-color: rgba(210, 15, 57, 0.3);
  --timeline-policy-server-spammy-bg-color: rgba(230, 69, 83, 0.2);
  --room-list-background: var(--ctp-mantle);
  --room-list-background-overlay: var(--ctp-mantle);
  --space-list-background-overlay: var(--ctp-base);
  --room-list-scrollbar-color: var(--ctp-overlay0) var(--ctp-surface0);
  --room-list-entry-hover-color: var(--ctp-surface0);
  --room-list-entry-selected-color: var(--opacity-overlay0);
  --room-list-search-background-overlay: var(--ctp-surface1);
  --modal-box-shadow-color: var(--box-shadow0);
  --emoji-selected-border-color: var(--ctp-mantle);
  --image-pack-editor-selected-color: var(--ctp-surface1);
  --unread-counter-message-bg: var(--ctp-lavender);
  --unread-counter-notification-bg: var(--ctp-maroon);
  --unread-counter-highlight-bg: var(--ctp-green);
  --space-unread-counter-message-bg: var(--ctp-lavender);
  --space-unread-counter-notification-bg: var(--ctp-maroon);
  --space-unread-counter-highlight-bg: var(--ctp-green);
  --sender-color-0: var(--ctp-red);
  --sender-color-1: var(--ctp-maroon);
  --sender-color-2: var(--ctp-yellow);
  --sender-color-3: var(--ctp-green);
  --sender-color-4: var(--ctp-teal);
  --sender-color-5: var(--ctp-sapphire);
  --sender-color-6: var(--ctp-blue);
  --sender-color-7: var(--ctp-mauve);
  --sender-color-8: var(--ctp-pink);
  --sender-color-9: var(--ctp-sky);
  --sent-ok-color: var(--ctp-green);
  --blockquote-border-color: var(--ctp-lavender);
  --lightbox-button-color: var(--ctp-rosewater);
  --own-reaction-border-color: var(--ctp-mauve);
  --own-reaction-background-color: var(--ctp-surface1);
  --own-reaction-hover-color: var(--ctp-surface2);

  /* spacing */
  --room-list-padding: 0.625rem;
  --timeline-avatar-size: 2.5rem;
  --timeline-avatar-gap: 0.5rem;
  --timeline-avatar-total-size: calc(
    var(--timeline-avatar-size) + var(--timeline-avatar-gap)
  );
  --timeline-message-gap: 1.2rem;
  --timeline-message-gap-same-sender: calc(var(--timeline-message-gap) / 6);
  --timeline-message-gap-small-event: 0.125rem;
  --timeline-message-gap-same-thread: 0.125rem;
  --timeline-sender-name-timestamp-gap: 0.25rem;
  --timeline-sender-name-content-gap: 0.225rem;
  --timeline-vertical-padding: 0;
  --timeline-horizontal-padding: min(1.5rem, 3.2vw);
  --timeline-status-size: 4rem;
  --image-picker-width: 22rem;
  --image-picker-height: 34rem;
  --image-picker-category-rows: 3;
}

/* pills and badges */
:is(a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias):not(.hicli-matrix-uri-plaintext) {
  color: var(--ctp-crust) !important;
  border-radius: var(--round) !important;
  padding: 0 0.5rem !important;
  font-weight: 500;
}

div.policy-body {
  &
    :is(a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias):not(.hicli-matrix-uri-plaintext) {
    color: var(--ctp-maroon) !important;
    border-radius: unset !important;
    padding: unset !important;
    font-weight: unset !important;
  }
}

div.event-reactions > div.reaction {
  background-color: var(--ctp-surface0);
  gap: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-color: var(--ctp-surface1);
}

/* inputs*/
textarea,
input,
select {
  background-color: var(--ctp-base);
  border-radius: var(--round);
  border: none;
  padding: 0 0.625rem;
  color: var(--ctp-text);
}

.input-area {
  & > [title~='emoji'] {
    color: var(--ctp-yellow);
  }
  & > [title~='sticker'] {
    color: var(--ctp-teal);
  }
  & > [title~='gif'] {
    color: var(--ctp-maroon);
  }
  & > [title~='location'] {
    color: var(--ctp-sapphire);
  }
  & > [title~='voice'] {
    color: var(--ctp-mauve);
  }
  & > [title~='file'] {
    color: var(--ctp-blue);
  }
  & > [title~='Send']:not([disabled]) {
    color: var(--ctp-green);
  }
}

div.message-composer {
  border-top: none;
  box-shadow: var(--spread-shadow);
}

.silent-reply {
  color: var(--ctp-yellow);
}
.thread-explicit-reply {
  color: var(--ctp-sapphire);
}
.close-reply {
  color: var(--ctp-red);
}

/* context menu */
:is(div.event-context-menu, div.event-hover-menu, div.context-menu) {
  background-color: var(--ctp-surface0);
  border: none;
}

.timeline-event.own-event > .event-sender-and-time > span.event-sender {
  color: var(--ctp-red) !important;
}

/* pickers */
:is(div.emoji-picker, div.sticker-picker, div.gif-picker, div.autocompletions) {
  background-color: var(--ctp-base);
  border: none;

  & div.emoji-category-bar {
    border: none;
  }

  & :is(div.emoji-search, div.gif-search) {
    background-color: var(--room-list-search-background-overlay);
    border: none;
    border-radius: var(--round);
    padding: 0.25rem;

    & > input {
      border-radius: var(--round);
    }
  }
}

/* right panel */
div.right-panel {
  border-left: none;
  box-shadow: -0.125rem 0 0.625rem var(--box-shadow0);
  margin-bottom: var(--window-bottom-margin);

  & > div.right-panel-header {
    background-color: var(--ctp-base);
    border: none;
    height: 4.8rem;

    @media screen and (width < 37.5rem) {
      height: 4.2rem;
      padding: 0 0.625rem;
    }
  }

  & > div.right-panel-content {
    background-color: var(--ctp-mantle);
    padding: 0.625rem 1rem;

    :is(input, select, textarea) {
      border: none !important;
      background-color: var(--ctp-surface0);
    }

    &.members {
      & > input.member-filter {
        background-color: var(--ctp-surface0);
        border-radius: var(--round);
        margin-bottom: 0.5rem;
        padding: 1.125rem;
      }

      & > div.member-list > div.member {
        border-radius: var(--round);
        padding: 0.25rem 0.5rem;
      }
    }

    &.user {
      :is(div.extended-profile, div.devices, div.mutual-rooms, div.user-moderation) {
        border-radius: var(--round);
        background-color: var(--ctp-base);
        padding: 0.625rem;
      }

      div.mutual-rooms .room-entry {
        border-radius: var(--round);
      }

      & div.avatar-container > img {
        border-radius: var(--round);
      }

      & p.verified-message {
        &.verified {
          color: var(--ctp-green);
        }
        &.tofu {
          color: var(--ctp-lavender);
        }
      }
    }

    div.extended-profile {
      button {
        margin-top: 0.625rem;
        border-radius: var(--round);
        background-color: var(--ctp-surface0);
        color: var(--ctp-text);
        padding: 0.25rem 0.5rem !important;

        &:hover {
          background-color: var(--ctp-surface1);
        }
      }

      div.profile-small-bio {
        margin-bottom: 0.625rem;
      }

      div.view-buttons {
        gap: 0.5rem;
      }
    }
  }
}

/* overlays */
.overlay.dimmed {
  backdrop-filter: blur(10px);
}

div.overlay.modal > div.modal-box {
  border-radius: var(--round);

  & > div.modal-box-inner {
    padding: 0.25rem;
  }
}

div.media-container {
  border-radius: var(--round);

  & > div.placeholder > div.placeholder-reason {
    border-radius: var(--round);
    color: var(--inverted-text-color);
    padding: 0.625rem;
    font-weight: 500;
  }
}

blockquote.reply-body {
  border-left: 3px solid var(--reply-border-color);
  border-radius: var(--round);

  &:not(.small) {
    background: var(--box-shadow1);
  }
}

.acl-body {
  color: var(--ctp-overlay2);
}

div.message-text.notice-message {
  opacity: 1;
  color: var(--ctp-subtext0);
}

.timeline-event.small-event {
  color: var(--ctp-subtext0);
}

/* notifications panel */
.notifications {
  & > .controls {
    background-color: var(--ctp-surface0);
    border-radius: var(--round);
    box-shadow: var(--spread-shadow);
    padding: 0.5rem 0.25rem;
    display: flex;
    justify-content: space-around;
  }

  & > .notification-panel-content > .timeline-event {
    border-radius: var(--round);
    padding: 0.5rem;
  }
}

/* space view */
div.space-view {
  max-width: 100rem;
  align-items: start;
  padding: 1.125rem;

  .space-children {
    row-gap: 0.625rem;

    .space-child {
      padding: 0.5rem 0.25rem;
      border-radius: var(--round);
    }
  }

  .space-adder {
    border: none;
    border-radius: var(--round);
    background-color: var(--room-list-search-background-overlay);
    padding: 1rem;

    & > input {
      border: none;
      padding: 0;
    }
  }
}

/* headers */
div.room-view {
  grid-template:
    'header' var(--window-top-margin)
    'header' 4.8rem
    'messageview' 1fr
    'autocomplete' 0
    'input' auto
    'typing' auto / 1fr;

  & .room-header {
    background-color: var(--ctp-base);
    border-bottom: unset;
    box-shadow: var(--glow-shadow);
    z-index: 10;
  }
}

/* room List */
div.room-list-wrapper {
  grid-template:
    'spacebar search' var(--window-top-margin)
    'spacebar search' 4.8rem
    'spacebar roomlist' 1fr
    'profile  roomlist' 3rem
    'blank    roomlist' calc(var(--window-bottom-margin) * 1.6)
    / 3rem 1fr;
  box-shadow: 0.125rem 0 0.625rem var(--box-shadow0);

  .room-search-wrapper {
    background-color: var(--ctp-base);
    height: 4.8rem;
    border-bottom: unset;
    box-shadow: var(--glow-shadow);
    z-index: 10;

    & > input {
      background-color: var(--ctp-surface0);
      border-radius: var(--round);
      margin: 0 0.625rem;
    }
  }

  .space-bar {
    z-index: 10;
  }

  .room-list {
    margin-top: 0.125rem;
    padding: 0 min(0.625rem, 1.8vw);
    overflow-x: hidden;

    .room-entry {
      border-radius: var(--round);

      & > img.room-avatar {
        margin: var(--vertical-margin) 0.625rem;
      }

      &
        > :is(div.room-entry-timestamp, div.room-entry-unreads, div.message-preview) {
        margin-right: 0.625rem;
      }
    }
  }

  .favorite {
    border-left: 2px solid var(--ctp-green);
  }
}

button.search-clear-button:disabled {
  display: none;
}

.message-preview span:first-of-type {
  font-weight: 500;
  color: var(--ctp-lavender);
}

.room-name {
  font-weight: 800;
}

/* share box */
div.choose-share-target {
  color: var(--ctp-crust);
  padding: 1rem !important;
  margin: 0 1rem;
  bottom: 5rem !important;
  height: fit-content !important;
  border-radius: var(--round);
  background-color: var(--ctp-lavender) !important;
  text-wrap: balance;
  box-shadow: var(--spread-shadow);
}

/* GIF picker */
.gif-picker {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.gif-search {
  position: sticky !important;
  top: 0.25rem !important;
  z-index: 1 !important;
  margin-top: 0.625rem !important;
  background: var(--background-color);
  align-items: unset !important;
  box-shadow: var(--glow-shadow);
}

.gif-list {
  display: block !important;
  columns: 3;
  column-gap: 0.625rem;
  height: auto;
  max-height: none;
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
  padding: 0.625rem !important;
  padding-top: 0 !important;
  margin: 0;
}

.gif-entry {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 0.625rem;

  img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 16.66667rem;
    object-fit: cover;
    border-radius: var(--round);
    padding: 0 !important;
  }
}

.powered-by-footer {
  display: block !important;
  column-span: all;
  margin-top: 0.25rem !important;
  text-align: center;
}

/* the airplane dashboard */
div.settings-view {
  & > nav.tabs {
    border-radius: var(--round);
    box-shadow: 0 0.125rem 0.625rem 0.125rem var(--box-shadow1);

    & button:not(.active) {
      background-color: var(--ctp-base);

      &:hover {
        background-color: var(--ctp-surface0);
      }
    }
  }
}

div.settings-tab
  > div.preference-table
  > div.preference.select-preference
  > select {
  padding: 0.25rem 0.625rem;
}

/*  */

/* Desktop (>= 37.5rem) */
@media screen and (width >= 37.5rem) {
  button.back {
    display: none;
  }

  div.room-header {
    padding-left: 1.36667rem;
    padding-right: 0.36667rem;
  }
}

/* Mobile (< 37.5rem) */
@media screen and (width < 37.5rem) {
  :root {
    --timeline-message-gap-same-sender: calc(var(--timeline-message-gap) / 5);
  }

  div.space-view {
    align-items: center;
    padding: 0 0 2rem;
  }

  /* Bubblemuks */
  .room-view .timeline-event:not(.small-event) {
    .event-content {
      width: 100%;
      max-width: max-content;
      padding: 0.5rem;
      background: var(--ctp-base);
      border-radius: var(--round);

      .message-text {
        margin-inline: 0.35rem;
      }
    }

    &.same-sender {
      &:not(.own-event) .event-content {
        border-top-left-radius: 0;
      }
      &.own-event .event-content {
        border-top-right-radius: 0;
      }
    }

    &:has(+ .same-sender) {
      &:not(.own-event) .event-content {
        border-bottom-left-radius: 0;
      }
      &.own-event .event-content {
        border-bottom-right-radius: 0;
      }
    }

    &.own-event {
      direction: rtl;

      > * {
        direction: ltr;
      }

      > :is(.read-receipts, .event-send-status) {
        justify-content: flex-start;
      }

      .event-sender-and-time {
        flex-direction: row-reverse;
      }

      .event-content {
        background-color: var(--ctp-red);
        color: var(--ctp-crust);

        .event-reactions {
          color: var(--ctp-text);
        }

        @media (prefers-color-scheme: dark) {
          a {
            text-decoration: underline;
            color: var(--ctp-surface0);
          }
        }

        blockquote > div.message-text {
          color: var(--ctp-surface0);
        }
      }
    }

    &:has(.media-container) {
      .media-container {
        margin: auto;
      }

      .event-content .message-text {
        margin-top: 0.5rem;
      }
    }

    & > div.event-content > div.event-edited {
      margin-inline: 0.25rem;
      margin-top: 0.125rem;
      color: var(--ctp-surface2);
    }
  }

  div.html-body code.hicli-inline-code {
    color: var(--ctp-text);
  }

  /*  */
  :is(div.message-composer, div.typing-notifications) {
    margin: 0 1.125rem;
  }

  div.space-bar > div.space-entry {
    margin-bottom: 0.625rem;
  }

  blockquote.reply-body > div.reply-sender {
    text-shadow: 1px 1px 2px var(--box-shadow1);
  }

  /* offsets */
  div.typing-notifications {
    margin-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
  }

  /* mobile pickers modals */
  :is(div.emoji-picker, div.gif-picker, div.sticker-picker) {
    border-radius: var(--round);
    width: calc(100% - 2.13332rem);
    margin: 1.06666rem;
    margin-top: 40vh;
    height: 50%;
  }
}