custom.css

@charset "UTF-8";
/* By:        Bunker D
   Twitter:   @Bunker_D_
   Mastodon:  @bunkerd@piaille.fr
   Email:     contact@bunkerd.fr
   License:   GNU AGPL
*/
/* Columns: resizable, spread, round */
.drawer {
  margin-right: auto;
  resize: horizontal;
  min-width: 240px;
}

.column {
  padding: 0 !important;
  margin: 0.5em;
  margin-right: auto;
  border-radius: 25px;
  resize: horizontal;
}

.column-header {
  padding: 0 0.4em 0 0.1em;
}

.column-header__back-button {
  background-color: inherit;
}

.drawer__inner {
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: #282c39 #20232c;
}

.drawer__inner__mastodon {
  max-height: 200px; /* 💡 If the bottom-left picture grows to big, change that. */
  background: none;
  flex: none;
  margin: auto 0 0 0;
}

/* Recolor */
body {
  background: #16191e;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers {
  background: #181a1b;
  color: #ddd;
}
.compose-form .compose-form__buttons-wrapper {
  background: #232628;
}

.text-icon-button,
.icon-button.inverted,
.character-counter {
  color: #a8a9a9;
}

.search__input {
  background: #20232c;
}

.search__input:focus {
  background: #242733;
}

.search-popout {
  background: #181a1b;
  color: #98B0C6;
}
.search-popout em {
  color: #ddd;
}

.column-header,
.column-header__button {
  background: #282c39;
}

.column-header__collapsible {
  scrollbar-width: thin;
  scrollbar-color: #393f4f #20232c;
}

.column > .scrollable {
  background: #20232c;
  scrollbar-width: thin;
  scrollbar-color: #282c39 #20232c;
}

.column-link {
  background: #20232c;
}

.account__header__bar,
.column-back-button,
.detailed-status,
.detailed-status__action-bar {
  background: #282c39;
}

.drawer__inner {
  background: linear-gradient(0deg, #20232c 0%, #333746 100%);
}

/* Roundness */
.drawer__header, .drawer__tab {
  border-radius: 25px;
}

.search__input {
  border-radius: 25px;
  padding-left: 20px;
}

.search__icon .fa {
  right: 20px;
}

.drawer__pager {
  border-radius: 10px 10px 25px 25px;
}

.autosuggest-textarea textarea {
  border-radius: 12px 12px 0 0 !important;
}

.compose-form__buttons-wrapper {
  border-radius: 0 0 12px 12px !important;
}

.compose-form__publish-button-wrapper button {
  border-radius: 12px !important;
}

/* Default widths */
.drawer { /* Left pannel */
  width: 15%;
}

.column { /* Other pannels */
  width: 17%;
}

.column:nth-of-type(2) { /* Second pannel (overriding “other pannels”) */
  width: 27%;
}

.column:nth-of-type(4) { /* Fourth pannel (overriding “other pannels”) */
  width: 22%;
}

/* Properly frame a custom of instance-specific bottom-left image */
.drawer__inner__mastodon {
  padding: 10px;
}

.drawer__inner__mastodon img {
  max-width: 100%;
  width: unset;
  border-radius: 15px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  max-height: inherit;
  margin: 0 auto;
}

/* Custom picture */
.drawer__inner__mastodon {
  background: url(""); /* 👈 Put image url here. */
  background-position: center center;
  /* 💡 👆 Controls the focus point when cropped.
    First word:  top, center, or bottom
    Second word: left, center, or right
  */
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
  margin: auto 10px 10px 10px;
  border-radius: 15px;
  height: 5000px;
}

.drawer__inner__mastodon img {
  visibility: hidden;
}