From 95497e252ee0349ebf222b428cae9501f69e9026 Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 16 Sep 2018 14:01:42 -0700 Subject: [PATCH] Scalybiz to 2.5.0 --- app/javascript/images/logo_full_white.svg | 488 ++++++++++++++++++++++ app/javascript/styles/cybre-light.scss | 233 ++++------- app/views/layouts/public.html.haml | 2 +- config/themes.yml | 4 +- 4 files changed, 568 insertions(+), 159 deletions(-) create mode 100644 app/javascript/images/logo_full_white.svg diff --git a/app/javascript/images/logo_full_white.svg b/app/javascript/images/logo_full_white.svg new file mode 100644 index 000000000..e38db4b58 --- /dev/null +++ b/app/javascript/images/logo_full_white.svg @@ -0,0 +1,488 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/javascript/styles/cybre-light.scss b/app/javascript/styles/cybre-light.scss index 97b656250..37f913125 100644 --- a/app/javascript/styles/cybre-light.scss +++ b/app/javascript/styles/cybre-light.scss @@ -1,146 +1,67 @@ $success-green: #B64579; // Padua -$ui-base-color: #f7e8ed; // "darkest" -$ui-base-alt: #f9f2f5; +$ui-base-color: #fafafa; // "darkest" +$ui-base-alt: #fafafa; $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; +$ui-secondary-color: darken($ui-base-color, 15%); // "lightest" +$ui-primary-color: #5f4770; // "lighter" +$ui-highlight-color: #5f4770; // "vibrant" $dark-text-color: #ca748f; -$secondary-text-color: #382b32; +$primary-text-color: #333; $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; +$icon-button-inactive-color: lighten(desaturate($ui-primary-color, 20%), 20%); + $about-page-text: $primary-text-color; @import 'cybre-base'; +$ui-base-lighter-color: $icon-button-inactive-color; +@import 'mastodon/boost'; +$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest + $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; +.landing-page__hero { + position:relative; } -.ui, body { - background: $ui-base-color url('../images/background-cybre-light.png'); -} - -.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%; +.landing-page__hero::before { + content: " "; + display:block; + background-image:url("../images/handshake.png"); + background-size:100% auto; + background-repeat:no-repeat; + background-position:bottom center; + width:600px; + height:600px; 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; - } + bottom:-64px; } /* about.scss */ .landing-page { - h1 { + h1, h3, h6 { color: $about-page-text; small { color: lighten($about-page-text, 10%); + span { + font-weight:bold; + color: $about-page-text; + } } } p, li { color: $about-page-text; } + .information-board__section span:last-child { + color: $about-page-text; + } + .header-wrapper { padding-top:0px; @@ -156,6 +77,10 @@ $gold-star: #dd9d08; } } + .landing-page__logo img { + mix-blend-mode: initial; + } + .container.links { background-color: $ui-base-color; border-top: 5px solid $ui-primary-color; @@ -204,6 +129,10 @@ $gold-star: #dd9d08; .column-header { color:white; } + + p a { + color: $ui-primary-color; + } } } @@ -230,6 +159,10 @@ $gold-star: #dd9d08; /* components.scss */ +.drawer__inner__mastodon { + display: none; +} + .onboarding-modal__page { p { color: $primary-text-color; @@ -287,6 +220,10 @@ $gold-star: #dd9d08; color: darken($ui-base-lighter-color, 15%); } +.navigation-bar strong +{ + color: $primary-text-color; +} .compose-form { .autosuggest-textarea__textarea, @@ -310,6 +247,9 @@ $gold-star: #dd9d08; } .compose-form__buttons-wrapper { background-color:$ui-primary-color; + .character-counter__wrapper .character-counter { + color: white; + } } .icon-button.inverted { @@ -321,6 +261,7 @@ $gold-star: #dd9d08; } } + button.icon-button { &.disabled { } @@ -389,7 +330,7 @@ button.icon-button { } } -.account__header, .account-card { +.account__header { & > div { background: rgba(lighten($ui-base-color, 4%), 0.6); } @@ -397,35 +338,14 @@ button.icon-button { .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; +.account__header__fields dt { + color: $primary-text-color; +} - &::after { - border-bottom-color: $ui-base-alt; - } - - &::after { - border-bottom-color: $ui-base-alt; - } - } +.account__section-headline a.active { + color: $primary-text-color; } .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { @@ -521,8 +441,9 @@ button.icon-button { } } .column-link__badge { - background: saturate(darken($ui-primary-color, 5%), 5%); + background: lighten($ui-primary-color, 25%); } + .column-subheading { background: darken($ui-primary-color, 5%); color:$white; @@ -586,16 +507,13 @@ button.icon-button { .boost-modal, .confirmation-modal, .report-modal, -.actions-modal, -.mute-modal -{ +.actions-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 { +.report-modal__action-bar { & > div { color: $ui-primary-color; } @@ -621,10 +539,6 @@ button.icon-button { } } -.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%); @@ -642,7 +556,7 @@ button.icon-button { } } -.reply-indicator__content a { +.reply-indicator__content { color: lighten($ui-highlight-color, 30%); } @@ -755,11 +669,6 @@ button.icon-button { } .sidebar { - .logo { - -webkit-filter: invert(100%); - filter: invert(100%); - } - ul { ul { a { @@ -787,7 +696,7 @@ button.icon-button { } } -.pagination .current { +a.name-tag, .name-tag, a.inline-name-tag, .inline-name-tag { color: $ui-primary-color; } @@ -804,6 +713,10 @@ button.icon-button { } } +.pagination .current { + color: $ui-primary-color; +} + /* accounts.scss */ .card { .name { @@ -863,6 +776,14 @@ button.icon-button { } } +.account-card { + .counter .counter-number, + & > .detailed-status__display-name .display-name strong + { + color:$primary-text-color; + } +} + .activity-stream-tabs { a { color: lighten($ui-primary-color, 10%); diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index d30b2a3ea..8f6cdc472 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -8,7 +8,7 @@ %nav.header .nav-left = link_to root_url, class: 'brand' do - = image_pack_tag 'logo_full.svg', alt: 'Mastodon' + = image_pack_tag 'logo_full_white.svg', alt: 'Mastodon' = link_to t('directories.directory'), explore_path, class: 'nav-link optional' if Setting.profile_directory = link_to t('about.about_this'), about_more_path, class: 'nav-link optional' diff --git a/config/themes.yml b/config/themes.yml index 83477ac91..3cd4cf316 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,4 +1,4 @@ -default: styles/application.scss +default: styles/cybre-light.scss +mastodon: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss -light: styles/cybre-light.scss