mastodon/app/javascript/styles/cybre-light.scss

$ui-base-color: #f7e8ed; // "darkest"
$ui-base-alt: #f9f2f5;
$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
$ui-secondary-color: #ead0d6; // "lightest"
$ui-primary-color: #bf5677; // "lighter"
$ui-highlight-color: #bf5677; // "vibrant"
$primary-text-color: #382b32;
$secondary-text-color: #382b32;

$header-color: $ui-primary-color;
$header-text-color: #fff;
$icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%);
$action-button-color: $icon-button-inactive-color;

$about-page-text: $primary-text-color;

@import 'application';


$gold-star: #dd9d08;

/* cybre-specific additions */

.column .static-content.getting-started {
  background-image: url('../images/logo-cybre-light.png');
  background-size:auto 50%;
  background-position: 50% 75%;
  background-repeat:no-repeat;
}

.ui, body {
  background: $ui-base-color url('../images/background-cybre-light.png');
}

.drawer__inner__mastodon {
  display: none;
}

.landing-page .header-wrapper {
    background-image:url('../images/header-cybre-alt.jpg');
    background-size:cover;
    background-position:50% 50%;
}

.landing-page.alternative .header {
    background-image:url('../images/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;
    }
}

/* about.scss */

.landing-page {
  h1 {
    color: $about-page-text;
    small {
      color: lighten($about-page-text, 10%);
    }
  }
  p, li {
    color: $about-page-text;
  }

  .header-wrapper {
    padding-top:0px;

    background-size:cover;
    background-position:50% 55%;
  }

  .header-wrapper {
    .mascot {
        width:500px;
        bottom:-52px;
        left:-120px;
    }
  }

  .container.links {
     background-color: $ui-base-color;
     border-top: 5px solid $ui-primary-color;
     width:100%;
     max-width:100%;
     padding:0px calc(50% - 400px);

     a {
        &:hover {
          color: lighten($ui-primary-color, 10%);
        }
     }
  }

  .container.hero {
      .floats {
          display:none;
      }

      .closed-registrations-message, form {
          border-top: 50px solid #5f4770;
          -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
          box-shadow: 0 0 6px rgba(0,0,0,.1);

          &:before {
              font-size: 16px;
              font-family:inherit;
              line-height:inherit;
              font-weight:normal;
              color:white;
              position:absolute;
              top:-35px;
          }
      }

      .closed-registrations-message:before {
          content: "Registrations closed";
      }

      form:before {
          content: "Register now";
      }
  }

  #mastodon-timeline {
    .column-header {
      color:white;
    }
  }
}

.features-list__row {
  .text {
    color: $about-page-text;
  }
}

.information-board {
  .panel {
    .panel-header {
      color: $primary-text-color;
      border-bottom: 1px solid lighten($ui-secondary-color, 4%);

      a,
      span {
        font-weight: 400;
        color: lighten($ui-primary-color, 4%);
      }
    }
  }
}

/* components.scss */

.onboarding-modal__page {
  p {
    color: $primary-text-color;
  }
}

.column-header {
  background: $header-color;
  color: $header-text-color;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.column-header__button {
  background: $header-color;
  color: $header-text-color;
  border-top-right-radius: 3px;

  &:hover {
    color: darken($ui-base-color, 10%);
  }

  &.active {
    color: $primary-text-color;
    background: darken($ui-base-color, 5%);

    &:hover {
      background: darken($ui-base-color, 5%);
    }
  }
}

// selectivity -- needs to override .column-header > button
.column-header .column-header__back-button {
  background: $header-color;
  color:$header-text-color;
}

.column-back-button {
  background: $header-color;
  color:$header-text-color;
}

.column-header__collapsible-inner {
  background: darken($ui-base-alt, 2%);
}

.empty-column-indicator,
.error-column {
  color: darken($ui-base-lighter-color, 15%);
}


.compose-form {
  .autosuggest-textarea__textarea,
  .spoiler-input__input {
    color: $primary-text-color;
    border: 1px solid $ui-primary-color;
  }

  .autosuggest-textarea__textarea {
    border-bottom-width:0px;
  }
  .compose-form__modifiers {
    border: 1px solid $ui-primary-color;
    border-top-width:0px;
  }

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

  .icon-button.inverted {
    color:white;

    &:hover {
      color:$ui-secondary-color;
    }
  }
}

button.icon-button {
  &.disabled {
  }
}

.icon-button {
  &.inverted {
    color: darken($ui-base-lighter-color, 10%);
  }

  &.overlayed {
    background: rgba($base-overlay-background, 0.2);
    color: rgba($white, 0.7);

    &:hover {
      background: rgba($base-overlay-background, 0.4);
    }
  }

  &.disabled {
    color: desaturate($icon-button-inactive-color, 5%);

    &:hover,
    &:active,
    &:focus {
      color: desaturate($icon-button-inactive-color, 5%);
    }
  }

  color: $icon-button-inactive-color;

  &:hover,
  &:active,
  &:focus {
    color: darken($icon-button-inactive-color, 5%);
  }
}

.icon-button.star-icon,
.icon-button.star-icon:active {
  background:transparent;
  border:none;
}

.icon-button.star-icon.active {
  color: $gold-star;
  &:active,  &:hover, &:focus {
    color: $gold-star;
  }
}

.text-icon-button {
  color: $white;
  &.active {
    background: $ui-base-color;
    color: $ui-primary-color;
  }
  &:focus, &:hover {
    color: darken($ui-base-color, 3%);
  }
}
.status.status-direct {
  background: darken($ui-base-alt, 5%);
  .icon-button.disabled {
    color: lighten($ui-base-lighter-color, 10%);
  }
}

.account__header, .account-card {
  & > div {
    background: rgba(lighten($ui-base-color, 4%), 0.6);
  }

  .account__header__content {
    color: $primary-text-color;
  }

  .detailed-status__display-name .display-name strong {
    color: $ui-highlight-color;
  }

  .icon-button {
    &, &:hover {
      color:desaturate($ui-base-lighter-color, 20%);
    }
    &.active {
      &, &:hover {
        color:$ui-base-lighter-color;
      }
    }
  }
}

.account__section-headline a {
  &.active {
    color: $primary-text-color;

    &::after {
      border-bottom-color: $ui-base-alt;
    }

    &::after {
      border-bottom-color: $ui-base-alt;
    }
  }
}

.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
    color: $ui-primary-color;
}

.privacy-dropdown__option {
  color: $primary-text-color;

  strong {
    color: $primary-text-color;
  }

  &:hover,
  &.active {
    color: $white;

    .privacy-dropdown__option__content {
      color: $white;

      strong {
        color: $white;
      }
    }
  }
}

.emoji-picker-dropdown__menu {
  .emoji-search-wrapper {
    border-color: darken($ui-base-color, 10%);
  }
  .emoji-search {
    background: darken($ui-base-color, 5%);
    border-color: darken($ui-base-color, 10%);
  }
  .emoji-mart {
    color: $ui-primary-color;
  }
}

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

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

  em {
    color: $ui-highlight-color;
  }
}
.search__icon .fa.active {
  opacity:1.0;
}
.search-results__hashtag {
  color: darken($ui-primary-color, 10%);
  &:hover {
    color: lighten($ui-primary-color, 5%);
  }
}

.static-content {
    /*color: $primary-text-color;*/
}

#Getting-started {
  background: $ui-primary-color;
  border-bottom:0px;
  color:white;
}

.getting-started {
  p {
    color: $primary-text-color;
  }

  a {
    color: darken($ui-base-lighter-color, 10%);
  }
}
.getting-started__wrapper {
  flex: 0 0.5 auto;
}

.getting-started {
  .column-link {
    background: lighten($ui-primary-color, 5%);
    color:$white;
    &:hover {
      background: lighten($ui-primary-color, 10%);
    }
  }
}
.column-link__badge {
  background: saturate(darken($ui-primary-color, 5%), 5%);
}
.column-subheading {
  background: darken($ui-primary-color, 5%);
  color:$white;
}

.media-spoiler,
.video-player__spoiler.active {
  color: $white;
  &:hover {
    color: darken($white, 5%);
  }
}

.status {
  border-bottom: 1px solid $ui-secondary-color;
}

.status__relative-time, .status__display-name {
  color: darken($ui-base-color, 40%);
}

.status__content {
  .status__content__spoiler-link {
    background: $ui-base-lighter-color;

    &:hover {
      background: lighten($ui-base-lighter-color, 5%);
    }
  }
}

.muted .status__content p {
  color: $icon-button-inactive-color;
}

.dropdown-menu__item {
  & > a {
    color: $primary-text-color;
    &:hover, &:active, &:focus {
      color: $white;
    }
  }
}

.dropdown--active .dropdown__content {
  & > ul {
    background: $ui-base-color;
    box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
    & > li > a {
      background: $ui-base-color;
      color: $primary-text-color;

      &:hover {
        background: $ui-highlight-color;
        color: $ui-base-color;
      }
    }
  }
}

.boost-modal,
.confirmation-modal,
.report-modal,
.actions-modal,
.mute-modal
{
  color: $primary-text-color;
}
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.report-modal__action-bar,
.mute-modal__action-bar  {
  & > div {
    color: $ui-primary-color;
  }
}

.actions-modal
{
  ul {
    li:not(:empty) {
      a {
        color: $primary-text-color;
        button {

        }
        &.active, &:hover, &:active, &:focus {
          color: $white;
          button {
            color: $white;
          }
        }
      }
    }
  }
}

.react-toggle-track {
  background-color: $icon-button-inactive-color;
}

.report-modal__comment .setting-text {
  color: $primary-text-color;
  border-bottom-color: lighten($ui-primary-color, 10%);
  &:focus, &:active {
    color: $primary-text-color;
  }
}

.status.light {
  .status__content {
    color: $primary-text-color;
  }
  .display-name strong {
    color: $primary-text-color;
  }
}

.reply-indicator__content a {
  color: lighten($ui-highlight-color, 30%);
}

.status__content
{
  a {
    color: $ui-highlight-color;

    &:hover {
      .fa {
        color: darken($ui-base-color, 40%);
      }
    }
  }
}

.detailed-status__display-name {
  color: $ui-base-lighter-color;
}

.drawer .drawer__inner {
  overflow: visible;
  height:inherit;
  background:$ui-base-alt;
}

.search__icon .fa {
  color: $ui-highlight-color;
}

.drawer__pager {
  overflow-y:auto;
}

.drawer .drawer__header {
  background: $ui-base-color;
  border-radius:3px;
}

.onboarding-modal__page h1 {
  background-color: darken($ui-primary-color, 5%);
}

/* forms.scss */
.block-button, .button, button {
  background-color: $ui-primary-color;
  color: $white;

  &.button-alternative {
    color: $ui-base-color;
  }

  &.logo-button {
    color: $white;
    svg path:first-child {
      fill: $white;
    }
  }
}

.simple_form {
  p.hint {
    color: $primary-text-color;
  }

  .block-button, .button, button {
    background-color: $ui-primary-color;
    color: $white;

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

    &:active,
    &:focus {
      background-color: darken($ui-primary-color, 5%);
    }

  }
}

/* admin.scss */

.table > thead > tr > th {
  border-bottom-color:  $ui-secondary-color;
}

.simple_form h4 {
  border-bottom: 1px solid $ui-highlight-color;
}

.admin-wrapper {
  .content {
    h2, p.hint, h4, h6 {
      color: $primary-text-color;
    }

    .muted-hint {
      color: $primary-text-color;
    }
  }

  .sidebar {
    .logo {
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }

    ul {
      ul {
        a {
          &.selected {
            background-color: $ui-primary-color;
            color: $white;

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

.pagination .current {
  color: $ui-primary-color;
}

.report-accounts__item > strong {
  color: $primary-text-color;
}

.admin-wrapper .content { 
  & > p {
    color: $primary-text-color;
  }
  hr {
    border-color: $ui-highlight-color;
  }
}

/* accounts.scss */
.card {
  .name {
    color: $white;
  }

  .counter {
    .counter-number {
      color: $white;
    }
  }
}

/* stream_entries.scss */
.activity-stream {
  .entry {
  }
  .status.light {
    .display-name {
      strong {
        color: $primary-text-color;
      }
    }
    .status__content {
      color: $primary-text-color;
    }
  }
  .detailed-status.light {
    .detailed-status__display-name {
      .display-name {
        strong {
          color: $primary-text-color;
        }
      }
    }
    .status__content {
      color: $primary-text-color;
    }
    .status-card,
    .status-card__title,
    .status-card__description {
      color: $primary-text-color;
    }
  }
}

/* accounts.scss */
.card {
  .name {
    color: darken($ui-primary-color, 15%);
  }
  .counter {
    .counter-number {
      color: darken($ui-primary-color, 15%);
    }
    border-color: $ui-primary-color;
  }
}

.activity-stream-tabs {
  a {
    color: lighten($ui-primary-color, 10%);
    &.active {
      color: darken($ui-primary-color, 10%);
    }
  }
}

/* uncategorized */

@media screen and (min-width: 1300px) {
  .column {
    flex-grow: 1 !important;
    max-width: 400px;
  }

  .drawer {
    width: 17%;
    max-width: 400px;
    min-width: 330px;
  }
}

.status time:after,
.detailed-status__datetime span:after {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\00a0\00a0\f08e";
}


.column {
  max-height:100vh;
  & > .scrollable {
    background-color: $ui-base-alt;
  }
}

.empty-column-indicator, .error-column {
  background-color: $ui-base-alt;
}


.media-gallery,
.video-player {
  max-height:30vh;
  height:30vh !important;
  position:relative;
  margin-top:20px;
  margin-left:-68px;
  width: calc(100% + 80px) !important;
  max-width: calc(100% + 80px);
}

.detailed-status .media-gallery,
.detailed-status .video-player {
  margin-left:-10px;
  width: calc(100% + 22px);
  max-width: calc(100% + 22px);
}

.video-player video {
  transform: unset;
  top: unset;
}

.detailed-status .media-spoiler,
.status .media-spoiler {
  height:100% !important;
  vertical-align:middle;
}

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

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

.public-layout .header {
  background: $ui-highlight-color;
  color: $white;
}

.public-layout .public-account-header__tabs__name h1 {
  color: $white;
  small {
    color: $white;
  }
}
.public-layout .header .brand:hover, 
.public-layout .header .brand:focus, 
.public-layout .header .brand:active {
  background: lighten($ui-highlight-color, 5%);
}

.public-layout .container:last-child {
  background:$ui-highlight-color;
  padding-left: 100px;
  padding-right: 100px;
  border-radius: 4px;
  h4 {
    color: white;
  }
}

.modal-layout, .modal-layout__mastodon > * {
  background: none;
}

.dashboard__widgets a:not(.name-tag) {
  color: $primary-text-color;
}