Cybrespace light theme

This commit is contained in:
chr 2018-07-21 15:51:09 -07:00
parent c231e16adb
commit 21d6a10707
7 changed files with 253 additions and 22 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 786 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

View File

@ -0,0 +1,251 @@
@import 'mastodon-light/variables';
// $ui-base-color: #f7e8ed; // "darkest"
// $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;
//
// $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;
$ui-base-color: #f7e8ed; // "darkest"
$ui-base-lighter-color: lighten($ui-base-color, 40%); // Lighter darkest
$ui-primary-color: #ed9aad; // "lighter"
$ui-secondary-color: #6d3e4d;
$ui-highlight-color: #bf5677; // "vibrant"
$ui-base-alt: #f9f2f5;
$header-color: $ui-highlight-color;
$header-text-color: #fff;
$darker-text-color: #38282c;
$dark-text-color: #5b4348;
$lighter-text-color: #38282c;
$light-text-color: #5b4348;
$icon-button-inactive-color: darken(desaturate($ui-base-lighter-color, 10%), 20%);
$action-button-color: $icon-button-inactive-color;
@import 'cybre-base';
@import 'mastodon-light/diff';
$gold-star: #dd9d08;
//Un-invert darkened and lightened functions
@function darken($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
}
@function lighten($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
}
// 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');
}
// about.scss
#mastodon-timeline {
.column-header {
color:white;
}
}
// components.scss
.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%);
}
/* More colorful compose form */
.compose-form {
.autosuggest-textarea__textarea,
.spoiler-input__input {
color: $primary-text-color;
border: 1px solid $ui-highlight-color;
}
.autosuggest-textarea__textarea {
border-bottom-width:0px;
}
.compose-form__modifiers {
border: 1px solid $ui-highlight-color;
border-top-width:0px;
}
.compose-form__buttons button.active:last-child {
border-radius:3px;
background: $ui-base-color;
color: $ui-highlight-color;
}
.compose-form__buttons-wrapper {
background-color:$ui-highlight-color;
}
.icon-button.inverted {
color: $white;
&:hover {
color:darken($ui-base-color, 5%);
}
}
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper
.character-counter {
color: $white;
}
/* Fix the privacy dropdown options */
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
color: $ui-highlight-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;
}
}
}
}
/* Fix the CW button */
.text-icon-button {
color: $white;
&.active {
background: $ui-base-color;
color: $ui-primary-color;
}
&:focus, &:hover {
color: darken($ui-base-color, 3%);
}
}
.column-link {
background: lighten($ui-highlight-color, 5%);
color:$white;
&:hover {
background: lighten($ui-highlight-color, 10%);
}
}
.column-link__badge {
background: saturate(darken($ui-highlight-color, 5%), 5%);
}
.column-subheading {
background: darken($ui-highlight-color, 5%);
color:$white;
}
.status__relative-time, .status__display-name {
color: darken($ui-base-color, 60%);
}
.status__content {
.status__content__spoiler-link {
background: $ui-base-lighter-color;
color: $white;
&:hover {
background: lighten($ui-base-lighter-color, 5%);
color: $white;
}
}
}
.modal-root__overlay {
background: rgba(0,0,0,.7);
}
.reply-indicator {
background-color: $ui-highlight-color;
color: $white;
}
.reply-indicator__display-name,
.reply-indicator__content {
color: $white;
}
.reply-indicator__content a {
color: lighten($ui-primary-color, 10%);
}
.drawer .drawer__inner {
background:$ui-base-alt;
}
.drawer .drawer__header {
background: $ui-base-color;
border-radius:3px;
}
.column {
& > .scrollable {
background-color: $ui-base-alt;
}
}

View File

@ -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:
@ -804,6 +782,7 @@ en:
contrast: High contrast contrast: High contrast
default: Mastodon default: Mastodon
mastodon-light: Mastodon (light) mastodon-light: Mastodon (light)
light: Cybre Lite
time: time:
formats: formats:
default: "%b %d, %Y, %H:%M" default: "%b %d, %Y, %H:%M"

View File

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