Merge branch 'themes_merged' into cybrespace-3.3

app/javascript/styles/cybre-base.scss

@@ -0,0 +1,91 @@
+@import 'application';
+
+/* Wider compose area */
+@media screen and (min-width: 1300px) {
+  .drawer {
+    width: 17%; /* Not part of the flex fun */
+    max-width: 400px;
+    min-width: 330px;
+  }
+  .layout-multiple-columns .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+}
+
+/* Don't show outline around statuses if we're in
+ * mouse or touch mode (rather than keyboard) */
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+  .status__content:focus, .status:focus,
+  .status__wrapper:focus, .status__content__text:focus {
+    outline: none;
+  }
+}
+
+/* Less emphatic show more */
+.status__content__read-more-button {
+  font-size: 14px;
+  color: $dark-text-color;
+
+  .status__prepend-icon {
+    padding-right: 4px;
+  }
+}
+
+/* Show a little arrowey thing after the time in a
+ * status to signal that you can click it to see
+ * a detailed view */
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+/* Don't display the elephant mascot (we have our
+ * own, thanks) */
+.drawer__inner__mastodon {
+  display: none;
+}
+
+/* Let the compose area/drawer be short, but
+ * expand if necessary */
+.drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
+  background-image: none;
+}
+.drawer__pager {
+  overflow-y:auto;
+}
+
+/* Put a reasonable background on the single-column compose form */
+.layout-single-column .compose-panel {
+  background-color: $ui-base-color;
+  height: auto;
+  max-height: 100%;
+  overflow-y: visible;
+  margin-top: 65px;
+}
+
+/* Better distinguish the search bar */
+.layout-single-column .compose-panel .search {
+  position:relative;
+  top: -55px;
+  margin-bottom: -55px;
+}
+
+/* Use display: none instead of visibility:hidden
+ * to hide the suggested follows list on non-mobile */
+@media screen and (min-width: 630px) {
+  .search-results .trends {
+     display:none;
+  }
+}
+
+/* Don't display the weird triangles on the modal layout,
+ * because they look strange on cybrespace themes. */
+.modal-layout__mastodon {
+  display:none;
+}
+
+@import 'fullwidth-media';

app/javascript/styles/cybre-light.scss

@@ -0,0 +1,955 @@
+$success-green: #B64579;    // Padua
+
+$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;
+$dark-text-color: #ca748f;
+$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 'cybre-base';
+
+$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');
+  background-attachment: fixed;
+}
+
+.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%);
+    }
+  }
+}
+
+.status-card, .status-card.compact {
+  border-color: $ui-highlight-color;
+}
+
+// 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%);
+}
+
+.column > .scrollable {
+  background: $ui-base-alt;
+}
+
+.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;
+  }
+
+  .compose-form__warning a {
+    color:white;
+  }
+
+  .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%);
+}
+
+.poll__text input[type="text"],
+.compose-form__poll-wrapper select {
+  color: $primary-text-color;
+}
+
+.compose-form__poll-wrapper .button.button-secondary {
+  color: $ui-highlight-color;
+}
+
+/* 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%);
+            }
+          }
+        }
+      }
+      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 */
+
+.empty-column-indicator, .error-column {
+  background-color: $ui-base-alt;
+}
+
+.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;
+}
+
+.tabs-bar__wrapper {
+  background: $ui-base-color url('../images/background-cybre-light.png');
+}
+
+.layout-single-column .navigation-panel {
+  background-color: $ui-highlight-color;
+  height: auto;
+  .column-link {
+    background: lighten($ui-primary-color, 5%);
+    color:$white;
+    &:hover {
+      background: lighten($ui-primary-color, 10%);
+    }
+    &.active {
+      background: darken($ui-primary-color, 5%);
+    }
+  }
+  hr {
+    display: none;
+  }
+}

app/javascript/styles/cybre.scss

@@ -0,0 +1,278 @@
+$ui-base-color: #1b1b1b; // darkest
+$ui-highlight-color: #1ea21e; // vibrant
+$ui-secondary-color: #E4F2E4; // lightest
+$ui-primary-color: #E4F2E4; // lighter
+$ui-primary-color-alt: #a0b49c; // darker, for external pages
+
+$about-page-text: lighten($ui-base-color, 50%);
+
+@import 'cybre-base';
+
+@keyframes floating {
+  from {
+    transform: translate(0, 0);
+  }
+  65% {
+    transform: translate(0, 4px);
+  }
+  to {
+    transform: translate(0, -0);
+  }
+}
+
+body, body.about-body {
+  background: $ui-base-color url('../images/background-cybre.png');
+  background-attachment: fixed;
+}
+
+body.about-body {
+  // basics.scss &.about-body
+  background: darken($ui-base-color, 8%) url('../images/background-cybre.png');
+
+  background-position-y: 200px;
+  background-position-x: center;
+}
+
+.about-body .mascot {
+  display: none;
+}
+
+.muted {
+  .status__content p, .status__content a {
+    color: lighten($ui-base-color, 35%);
+  }
+
+  .status__display-name strong {
+    color: lighten($ui-base-color, 35%);
+  }
+}
+
+.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;
+}
+
+.column .static-content.getting-started {
+  background-image: url('../images/logo-cybre.png'), url('../images/background-cybre.png');
+  background-size:auto 50%, cover;
+  background-position: 50% 75%, center center;
+  background-repeat:no-repeat, no-repeat;
+}
+
+.columns-area {
+  background: $ui-base-color url('../images/background-cybre.png');
+}
+
+.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/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;
+  }
+}
+
+.status__content a,
+.status__content a.unhandled-link {
+  color: mix($ui-highlight-color, $ui-secondary-color, 10%);
+}

app/javascript/styles/fullwidth-media.scss

@@ -0,0 +1,48 @@
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.status .video-player,
+.media-gallery,
+.status .status-card.interactive {
+  margin-top: 20px;
+  margin-left: -68px;
+  width: calc(100% + 80px);
+}
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.video-player {
+  max-width: none;
+}
+
+/* If there's no status text, add an extra margin on top */
+.status .status__info + .media-gallery,
+.status .status__info + .media-spoiler,
+.status .status__info + .video-player,
+.status .status__info + .status-card {
+  margin-top: 40px;
+}
+
+.status__video-player-video {
+  transform: unset;
+  top: unset;
+}
+
+.detailed-status .media-gallery {
+  margin-left: -10px;
+  width: calc(100% + 22px);
+}
+
+.public-layout .status {
+  .status__content {
+    min-height: 15px;
+  }
+  & > .media-spoiler,
+  .video-player,
+  .media-gallery,
+  .status-card {
+    margin-top: 20px;
+    width: calc(100% + 94px);
+    margin-left: -78px;
+  }
+}

app/javascript/styles/mastodon/components.scss

@@ -3195,7 +3195,6 @@ a.status-card.compact:hover {
 }
 
 .status-card__image-image {
-  border-radius: 4px 0 0 4px;
   display: block;
   margin: 0;
   width: 100%;

config/locales/en.yml

@@ -1331,9 +1331,12 @@ en:
       <p>Originally adapted from the <a href="https://github.com/discourse/discourse">Discourse privacy policy</a>.</p>
     title: "%{instance} Terms of Service and Privacy Policy"
   themes:
+    default: Cybrespace
     contrast: Mastodon (High contrast)
-    default: Mastodon (Dark)
-    mastodon-light: Mastodon (Light)
+    mastodon: Mastodon (Dark)
+    mastodon-light: Mastodon (light)
+    light: Cybre Lite
+    win95: Windows 95
   time:
     formats:
       default: "%b %d, %Y, %H:%M"

config/themes.yml

@@ -1,3 +1,6 @@
-default: styles/application.scss
+default: styles/cybre.scss
+mastodon: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+light: styles/cybre-light.scss
+win95: styles/win95.scss

config/webpacker.yml

@@ -31,6 +31,7 @@ default: &default
     - .ttf
     - .woff
     - .woff2
+    - .gif
 
   extensions:
     - .mjs