app/javascript/styles/neon-city.scss
$ui-base-color: #1b1b1b; // darkest
$ui-highlight-color: rgb(149, 84, 148); // vibrant
$ui-secondary-color: #b9b9ba; // lightest
$ui-primary-color: #b9b9ba; // lighter
$ui-primary-color-alt: #b49cac; // darker, for external pages
$ui-link-text-color: $ui-highlight-color;
$about-page-text: lighten($ui-base-color, 50%);
$transparent-light:rgba(27, 27, 27, 0.9);
$transparent-dark:rgba(17, 17, 17, 0.9);
@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 'Font Awesome 5 Pro';
// 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 {
height: auto;
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;
}
}
@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, 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;
}
.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;
}
}
.public-layout {
.header,
.table-of-contents,
.landing-page__call-to-action,
.nothing-here,
.contact-widget,
.box-widget,
.hero-widget__text,
.trends-widget,
.endorsements-widget,
.placeholder-widget,
.public-account-header,
.public-account-bio,
.footer {
// background: $ui-base-color;
background: $transparent-light;
}
.contact-widget,
.trends-widget,
.public-account-header,
.footer {
border-radius: 4px;
}
.footer {
padding: 25px 40px;
margin: 10px 0;
}
}
.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,
.hashtag,
.u-url.status-link:not(.unhandled-link) {
color: $ui-link-text-color;
background: linear-gradient(92.05deg, #BCA1F7 12.09%, #E577B4 42.58%, #FF7170 84.96%);
// background: linear-gradient(92.05deg, rgb(150, 84, 149) 12.09%, rgb(191, 137, 153) 42.58%, rgb(250, 147, 62) 84.96%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
.muted .status__content a {
border-color: $ui-highlight-color;
}
.status__content {
color: lighten($ui-primary-color, 6%);
}
.status__display-name strong {
color: lighten($ui-primary-color, 15%);
}
.column>.scrollable {
background-color: $transparent-light;
}
.drawer__inner,
.drawer__inner__mastodon {
opacity: 0.8;
}
body,
.landing-page,
.public-layout {
background-image: url("images/neoncity/starry-sky.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: $transparent-light;
}
.account__section-headline {
background-color: $transparent-dark;
}
.notification__filter-bar,
.account__section-headline {
background: $transparent-dark;
}
.notification__filter-bar button,
.account__section-headline button {
background: $transparent-dark;
}
.notification__filter-bar button.active::after,
.notification__filter-bar a.active::after,
.account__section-headline button.active::after,
.account__section-headline a.active::after {
border-color: transparent transparent $transparent-light;
}
.search__input {
background: $transparent-light;
}
.empty-column-indicator,
.error-column,
.follow_requests-unlocked_explanation {
background: transparent;
}
.detailed-status,
.detailed-status__action-bar {
background: transparent;
}
.simple_form .label_input__append:after {
background-image: linear-gradient(90deg, rgba(2, 2, 2, 0), transparent);
}
.highlight {
background: rgba(45, 45, 45, .5);
}
pre.highlight>code {
background-color: rgba(45, 45, 45, .5);
}
.column-subheading {
color: $white;
}
.getting-started__footer p {
color: $ui-secondary-color;
a {
color: $ui-secondary-color;
}
}
.drawer__tab,
.navigation-bar__profile-account,
.navigation-bar__profile-edit {
color: $white !important;
}