mastodon/app/javascript/styles/swan-lake.scss

$ui-base-color: #0C023D; // darkest
$ui-highlight-color: #5c82c2; // vibrant
$ui-secondary-color: #b5c6d4; // lightest
$ui-primary-color: #afc5d6; // lighter
$ui-primary-color-alt: #9498be; // darker, for external pages
$ui-link-text-color: #85d7ee;

$about-page-text: lighten($ui-base-color, 50%);

@import 'neon-base';

@keyframes floating {
  from {
    transform: translate(0, 0);
  }
  65% {
    transform: translate(0, 4px);
  }
  to {
    transform: translate(0, -0);
  }
}

.about-body .mascot {
  display: none;
}

.muted {
  .status__content p, .status__content a {
    color: lighten($ui-base-color, 60%);
  }

  .status__display-name strong {
    color: lighten($ui-base-color, 60%);
  }
}

.status__content__read-more-button {
  color: lighten($ui-base-color, 60%) !important;
}

.compose-form__buttons button.active:last-child {
  color:$ui-secondary-color;
  background-color: $ui-highlight-color;
  border-radius:3px;
}

.screenshot-with-signup {
  min-height:300px;
}

.container.hero .closed-registrations-message .clock {
  font-size: 150%;
  margin: 1em auto;
}

.actions .button.button-alternative {
    background: $ui-highlight-color;
    color: $ui-primary-color;

    &:active,
    &:focus,
    &:hover {
      background-color: lighten($ui-highlight-color, 4%);
    }
}

@media screen and (max-width: 1280px) {
  .landing-page .container.links {
      top: -15px;
  }
}

.landing-page.alternative .header {
    background-image:url('../images/neoncity/header-cybre-colour.jpg');
    background-repeat: repeat-x;
    background-size:contain;
    height:45vh;
    width: 100%;
    position:absolute;
    z-index: 1;
    text-align:center;

    display: unset!important;
}

.landing-page.alternative .header img {
    margin: auto;
    max-height:45vh;
}


.landing-page.alternative .grid {
    position: relative;
    z-index:2;
    margin-top:15vh;
}

.landing-page.alternative .landing-page__hero img {
    visibility: hidden;
    max-height:170px;
}

.landing-page.alternative .landing-page__forms {
    height:auto;
}

.landing-page.alternative .column-1 {
    display:flex;
    align-items:flex-end;
}

.landing-page.alternative .column {
    max-height:initial;
}

.landing-page.alternative .row__mascot {
    .floats {
        position:absolute;
        img {
            width:100%;
            height:100%;
        }
        transition: all 0.1s linear;
        animation-name: floating;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }

    .float-1 {
        width:50px;
        height:50px;
        bottom:60px;
        left:110px;
        animation-duration: 3s;
    }

    .float-2 {
        width:130px;
        height:130px;
        left:85px;
        bottom: -60px;
        animation-duration: 3.5s;
        animation-delay: 0.2s;
    }

    .float-3 {
        width:100px;
        height:100px;
        right: 50;
        top: -10px;
        animation-duration: 4s;
        animation-delay: 0.5s;
    }
}

.activity-stream {
  .status.light {
    .status__header .status__meta .status__relative-time {
      color: $ui-primary-color-alt;
    }

    .display-name span {
      color: $ui-primary-color-alt;
    }

    .status__content {
      a.status__content__spoiler-link {
        background: $ui-primary-color-alt;

        &:hover {
          background: lighten($ui-primary-color-alt, 8%);
        }
      }
    }
  }

  .detailed-status.light {
    .detailed-status__display-name .display-name span {
      color: $ui-primary-color-alt;
    }

    .status__content a.status__content__spoiler-link {
      background: $ui-primary-color-alt;

      &:hover {
        background: lighten($ui-primary-color-alt, 8%);
      }
    }

    .detailed-status__meta {
      color: $ui-primary-color-alt;
    }
  }

  .media-spoiler {
    background: $ui-primary-color-alt;
    &:hover {
      background: darken($ui-primary-color-alt, 5%);
    }
  }

  .pre-header {
    color: $ui-primary-color-alt;
    .status__display-name.muted strong {
      color: $ui-primary-color-alt;
    }
  }
}

.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
  color: $ui-primary-color-alt;
  svg {
    path:first-child {
      fill: $ui-primary-color-alt;
    }
  }
  &:active,
  &:focus,
  &:hover {
    svg path:first-child {
      fill: lighten($ui-primary-color-alt, 4%);
    }
  }
}

.emoji-mart-search {
  background: $simple-background-color;
  input {
    color: $ui-primary-color-alt;
    border: 1px solid $ui-primary-color-alt;
  }
}

.emoji-mart-anchor {
  color: $ui-primary-color-alt;
  &:hover {
    color: darken($ui-primary-color-alt, 8%);
  }
}

.search-popout {
  background: $ui-base-color;
  color: $ui-primary-color;

  h4 {
    color: $ui-primary-color;
  }

  em {
    color: $ui-highlight-color;
  }
}

/* customize color and opacity */
.status__content a,
.status__content a.unhandled-link {
  color: $ui-link-text-color;
}

.status__content {
  color: lighten($ui-primary-color, 6%);
}

.status__display-name strong {
  color: lighten($ui-primary-color, 15%);
}

.column > .scrollable {
  background-color: #0C023DB5;
}

.drawer__inner, .drawer__inner__mastodon {
  opacity: 0.8;
}

body, .landing-page, .public-layout {
  background-image: url("../images/swan-lake/swan-lake.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.layout-single-column .navigation-panel {
  //background-color: $ui-highlight-color;
  opacity: 0.8;
  height: auto;
  .column-link {
    background: lighten($ui-base-color, 5%);
    color:$white;
    &:hover {
      background: lighten($ui-base-color, 10%);
    }
    &.active {
      background: darken($ui-base-color, 5%);
    }
  }
  hr {
    display: none;
  }
}

.getting-started {
  opacity: 0.8;
  .column-link {
    background: lighten($ui-base-color, 5%);
    color:$white;
    &:hover {
      background: lighten($ui-base-color, 10%);
    }
  }
}

.landing__grid {
  opacity: 0.9;
}

.activity-stream .entry {
  background-color:#0C023DB5;
}

.account__section-headline {
  background-color: #0C023D;
}

.hashtag:hover, .mention:hover {
  text-shadow: 0 0 8px #fff;
}
.status-link:hover {
  text-shadow: 0 0 8px #8ca6f6;
}

.button:hover {
  text-shadow: 0 0 8px #fcfcf6 !important;
}

.status__content__read-more-button:hover {
text-shadow: 0 0 8px #A59BD6 !important;
}