diff --git a/app/javascript/images/background-cybre-light.png b/app/javascript/images/background-cybre-light.png new file mode 100644 index 000000000..44d76c24c Binary files /dev/null and b/app/javascript/images/background-cybre-light.png differ diff --git a/app/javascript/images/header-cybre-alt.jpg b/app/javascript/images/header-cybre-alt.jpg new file mode 100644 index 000000000..4d2b6b3a8 Binary files /dev/null and b/app/javascript/images/header-cybre-alt.jpg differ diff --git a/app/javascript/images/header-cybre-colour.jpg b/app/javascript/images/header-cybre-colour.jpg new file mode 100644 index 000000000..2d1b5b4f0 Binary files /dev/null and b/app/javascript/images/header-cybre-colour.jpg differ diff --git a/app/javascript/images/logo-cybre-light.png b/app/javascript/images/logo-cybre-light.png new file mode 100644 index 000000000..91908f6d3 Binary files /dev/null and b/app/javascript/images/logo-cybre-light.png differ diff --git a/app/javascript/styles/cybre-light.scss b/app/javascript/styles/cybre-light.scss new file mode 100644 index 000000000..fb29c0521 --- /dev/null +++ b/app/javascript/styles/cybre-light.scss @@ -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; + } +} diff --git a/config/locales/en.yml b/config/locales/en.yml index a03b12a39..3a141c4c3 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -316,9 +316,6 @@ en: peers_api_enabled: desc_html: Domain names this instance has encountered in the fediverse 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: closed_message: desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags @@ -477,22 +474,6 @@ en: follows: You follow mutes: You mute 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: domain: Domain explanation_html: If you want to ensure the privacy of your statuses, you must be aware of who is following you. Your private statuses are delivered to all instances where you have followers. 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 expires_in_prompt: Never generate: Generate - invited_by: 'You were invited by:' max_uses: one: 1 use other: "%{count} uses" @@ -618,7 +598,6 @@ en: remote_follow: acct: Enter your username@domain you want to follow from missing_resource: Could not find the required redirect URL for your account - no_account_html: Don't have an account? You can sign up here proceed: Proceed to follow prompt: 'You are going to follow:' remote_unfollow: @@ -695,7 +674,6 @@ en: disallowed_hashtags: one: 'contained a disallowed hashtag: %{tags}' other: 'contained the disallowed hashtags: %{tags}' - language_detection: Automatically detect language open_in_web: Open in web over_character_limit: character limit of %{max} exceeded pin_errors: @@ -804,6 +782,7 @@ en: contrast: High contrast default: Mastodon mastodon-light: Mastodon (light) + light: Cybre Lite time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459..83477ac91 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,4 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss +light: styles/cybre-light.scss