Revontuli

Commit info

add some border radius

Description

Dark high-contrast-ish theme. See https://git.sr.ht/~akselmo/Revontuli

Previews

Code

To use this theme, paste this into your custom CSS:

@import url("https://css.gomuks.app/theme/revontuli.css");

Full CSS:

:root {
  --background-color: #202020;
  --timeline-hover-bg-color: #252525;
  --composer-background-color: #191919;
  --space-list-background-overlay: rgba(0, 0, 0, 0);
  --room-list-background-overlay: rgba(0, 0, 0, 0);
  --room-list-search-background-overlay: rgba(0, 0, 0, 0);
  --primary-color-dark: #33bbff;
  --text-color: #ffffff;
  --font-stack: sans-serif;
  --monospace-font-stack: monospace;
  --timeline-horizontal-padding: 1rem;
  --room-list-background: #232323;
  --timeline-highlight-bg-color: #ff92331a;
  --timeline-highlight-hover-bg-color: #ff92332e;
  --room-list-width: 255px;
  --pill-background-color: #00538f;
  --code-background-color: #101010;
  --link-text-color: #33bbff;
  --modal-box-shadow-color: #00000033;
  --border-color: #454545;
  --room-list-scrollbar-color: #8B8B8Bff #00000000
}

* {
  scrollbar-width: thin;
}

div.timeline-view {
  scrollbar-color: var(--room-list-scrollbar-color);
}

/* Allows resizing */
.room-search-wrapper input {
  width: 0 !important;
}

div.room-list-wrapper {
  font-size: 0.9em;
}

div.room-entry {
  height: 2.6rem;
}

img.avatar {
  width: 2rem;
  height: 2rem;
}

div.event-reactions {
  &>div.reaction {
    background-color: #181818;
  }
}

div.room-header {
  background-color: #232323;
}

pre.chroma {
  background-color: #181818;
}

/* Bottom right user avatar */
#root>main>div.room-list-wrapper>div.profile-switcher>div>img {
  width: 2.5rem;
  height: 2.5rem;
}

span.change-description,
span.sender-name {
  color: #9f9f9f;
}

textarea,
.string-preference {
  background-color: #151515;
}

div.room-entry:nth-last-child(-n+1 of .favorite) {
  border-bottom: 2px dashed #45454570;
}

div.room-entry:nth-child(1 of .low-priority) {
  border-top: 2px dashed #45454570;
}

div.room-entry {
  &.low-priority {
    font-style: italic;
  }

  &.active,
  &:hover,
  &:focus {
    border-radius: 5px;
  }
}

div.timeline-event {

  &:hover:not(.no-hover),
  &.focused-event {
    border-radius: 5px;
  }
}