forked from cybrespace/mastodon
Cybrespace dark theme
This commit is contained in:
parent
c231e16adb
commit
d74271faa9
Binary file not shown.
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
After Width: | Height: | Size: 184 KiB |
|
@ -0,0 +1,282 @@
|
||||||
|
$ui-base-color: #181818; // 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');
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Octagonal avatars, because ???? */
|
||||||
|
.account__avatar,
|
||||||
|
.account__avatar-overlay-base,
|
||||||
|
.account__header__avatar,
|
||||||
|
.account__avatar-overlay-overlay {
|
||||||
|
border-radius:0px !important;
|
||||||
|
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||||
|
clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||||
|
}
|
|
@ -316,9 +316,6 @@ en:
|
||||||
peers_api_enabled:
|
peers_api_enabled:
|
||||||
desc_html: Domain names this instance has encountered in the fediverse
|
desc_html: Domain names this instance has encountered in the fediverse
|
||||||
title: Publish list of discovered instances
|
title: Publish list of discovered instances
|
||||||
preview_sensitive_media:
|
|
||||||
desc_html: Link previews on other websites will display a thumbnail even if the media is marked as sensitive
|
|
||||||
title: Show sensitive media in OpenGraph previews
|
|
||||||
registrations:
|
registrations:
|
||||||
closed_message:
|
closed_message:
|
||||||
desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags
|
desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags
|
||||||
|
@ -477,22 +474,6 @@ en:
|
||||||
follows: You follow
|
follows: You follow
|
||||||
mutes: You mute
|
mutes: You mute
|
||||||
storage: Media storage
|
storage: Media storage
|
||||||
filters:
|
|
||||||
contexts:
|
|
||||||
home: Home timeline
|
|
||||||
notifications: Notifications
|
|
||||||
public: Public timelines
|
|
||||||
thread: Conversations
|
|
||||||
edit:
|
|
||||||
title: Edit filter
|
|
||||||
errors:
|
|
||||||
invalid_context: None or invalid context supplied
|
|
||||||
invalid_irreversible: Irreversible filtering only works with home or notifications context
|
|
||||||
index:
|
|
||||||
delete: Delete
|
|
||||||
title: Filters
|
|
||||||
new:
|
|
||||||
title: Add new filter
|
|
||||||
followers:
|
followers:
|
||||||
domain: Domain
|
domain: Domain
|
||||||
explanation_html: If you want to ensure the privacy of your statuses, you must be aware of who is following you. <strong>Your private statuses are delivered to all instances where you have followers</strong>. You may wish to review them, and remove followers if you do not trust your privacy to be respected by the staff or software of those instances.
|
explanation_html: If you want to ensure the privacy of your statuses, you must be aware of who is following you. <strong>Your private statuses are delivered to all instances where you have followers</strong>. You may wish to review them, and remove followers if you do not trust your privacy to be respected by the staff or software of those instances.
|
||||||
|
@ -533,7 +514,6 @@ en:
|
||||||
'86400': 1 day
|
'86400': 1 day
|
||||||
expires_in_prompt: Never
|
expires_in_prompt: Never
|
||||||
generate: Generate
|
generate: Generate
|
||||||
invited_by: 'You were invited by:'
|
|
||||||
max_uses:
|
max_uses:
|
||||||
one: 1 use
|
one: 1 use
|
||||||
other: "%{count} uses"
|
other: "%{count} uses"
|
||||||
|
@ -618,7 +598,6 @@ en:
|
||||||
remote_follow:
|
remote_follow:
|
||||||
acct: Enter your username@domain you want to follow from
|
acct: Enter your username@domain you want to follow from
|
||||||
missing_resource: Could not find the required redirect URL for your account
|
missing_resource: Could not find the required redirect URL for your account
|
||||||
no_account_html: Don't have an account? You can <a href='%{sign_up_path}' target='_blank'>sign up here</a>
|
|
||||||
proceed: Proceed to follow
|
proceed: Proceed to follow
|
||||||
prompt: 'You are going to follow:'
|
prompt: 'You are going to follow:'
|
||||||
remote_unfollow:
|
remote_unfollow:
|
||||||
|
@ -695,7 +674,6 @@ en:
|
||||||
disallowed_hashtags:
|
disallowed_hashtags:
|
||||||
one: 'contained a disallowed hashtag: %{tags}'
|
one: 'contained a disallowed hashtag: %{tags}'
|
||||||
other: 'contained the disallowed hashtags: %{tags}'
|
other: 'contained the disallowed hashtags: %{tags}'
|
||||||
language_detection: Automatically detect language
|
|
||||||
open_in_web: Open in web
|
open_in_web: Open in web
|
||||||
over_character_limit: character limit of %{max} exceeded
|
over_character_limit: character limit of %{max} exceeded
|
||||||
pin_errors:
|
pin_errors:
|
||||||
|
@ -802,7 +780,8 @@ en:
|
||||||
title: "%{instance} Terms of Service and Privacy Policy"
|
title: "%{instance} Terms of Service and Privacy Policy"
|
||||||
themes:
|
themes:
|
||||||
contrast: High contrast
|
contrast: High contrast
|
||||||
default: Mastodon
|
default: Cybrespace
|
||||||
|
mastodon: Mastodon
|
||||||
mastodon-light: Mastodon (light)
|
mastodon-light: Mastodon (light)
|
||||||
time:
|
time:
|
||||||
formats:
|
formats:
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
default: styles/application.scss
|
default: styles/cybre.scss
|
||||||
|
mastodon: styles/application.scss
|
||||||
contrast: styles/contrast.scss
|
contrast: styles/contrast.scss
|
||||||
mastodon-light: styles/mastodon-light.scss
|
mastodon-light: styles/mastodon-light.scss
|
||||||
|
|
Loading…
Reference in New Issue