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-base.scss b/app/javascript/styles/cybre-base.scss new file mode 100644 index 000000000..b9bb4ecb8 --- /dev/null +++ b/app/javascript/styles/cybre-base.scss @@ -0,0 +1,81 @@ + +@import 'application'; + +/* Allow columns to grow wider as the screen gets + * wider, but don't ever let them get more than + * 400px (some people have a bunch of columns!) */ +@media screen and (min-width: 1300px) { + .column { + flex-grow: 1 !important; + max-width: 400px; + } + + .drawer { + width: 17%; /* Not part of the flex fun */ + max-width: 400px; + min-width: 330px; + } +} + +/* Cap the column height at 100vh (fixed an old + * bug someone encountered in safari, but which + * I've seen resurface from time to time) */ +.column { + max-height:100vh; +} + +/* 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 FontAwesome; + 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; +} + +/* 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; + } +} + +@import 'fullwidth-media'; + diff --git a/app/javascript/styles/cybre-light.scss b/app/javascript/styles/cybre-light.scss new file mode 100644 index 000000000..97b656250 --- /dev/null +++ b/app/javascript/styles/cybre-light.scss @@ -0,0 +1,952 @@ +$success-green: #B64579; // Padua + +$ui-base-color: #f7e8ed; // "darkest" +$ui-base-alt: #f9f2f5; +$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; +$dark-text-color: #ca748f; +$secondary-text-color: #382b32; + +$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; + +$about-page-text: $primary-text-color; + +@import 'cybre-base'; + +$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; +} + +.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%; + 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; + } +} + +/* about.scss */ + +.landing-page { + h1 { + color: $about-page-text; + small { + color: lighten($about-page-text, 10%); + } + } + p, li { + color: $about-page-text; + } + + .header-wrapper { + padding-top:0px; + + background-size:cover; + background-position:50% 55%; + } + + .header-wrapper { + .mascot { + width:500px; + bottom:-52px; + left:-120px; + } + } + + .container.links { + background-color: $ui-base-color; + border-top: 5px solid $ui-primary-color; + width:100%; + max-width:100%; + padding:0px calc(50% - 400px); + + a { + &:hover { + color: lighten($ui-primary-color, 10%); + } + } + } + + .container.hero { + .floats { + display:none; + } + + .closed-registrations-message, form { + border-top: 50px solid #5f4770; + -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1); + box-shadow: 0 0 6px rgba(0,0,0,.1); + + &:before { + font-size: 16px; + font-family:inherit; + line-height:inherit; + font-weight:normal; + color:white; + position:absolute; + top:-35px; + } + } + + .closed-registrations-message:before { + content: "Registrations closed"; + } + + form:before { + content: "Register now"; + } + } + + #mastodon-timeline { + .column-header { + color:white; + } + } +} + +.features-list__row { + .text { + color: $about-page-text; + } +} + +.information-board { + .panel { + .panel-header { + color: $primary-text-color; + border-bottom: 1px solid lighten($ui-secondary-color, 4%); + + a, + span { + font-weight: 400; + color: lighten($ui-primary-color, 4%); + } + } + } +} + +/* components.scss */ + +.onboarding-modal__page { + p { + color: $primary-text-color; + } +} + +.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%); + } + } +} + +.status-card, .status-card.compact { + border-color: $ui-highlight-color; +} + +// 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%); +} + +.empty-column-indicator, +.error-column { + color: darken($ui-base-lighter-color, 15%); +} + + +.compose-form { + .autosuggest-textarea__textarea, + .spoiler-input__input { + color: $primary-text-color; + border: 1px solid $ui-primary-color; + } + + .autosuggest-textarea__textarea { + border-bottom-width:0px; + } + .compose-form__modifiers { + border: 1px solid $ui-primary-color; + border-top-width:0px; + } + + .compose-form__buttons button.active:last-child { + border-radius:3px; + background: $ui-base-color; + color: $ui-primary-color; + } + .compose-form__buttons-wrapper { + background-color:$ui-primary-color; + } + + .icon-button.inverted { + color:white; + + &:hover { + color:$ui-secondary-color; + } + } +} + +button.icon-button { + &.disabled { + } +} + +.icon-button { + &.inverted { + color: darken($ui-base-lighter-color, 10%); + } + + &.overlayed { + background: rgba($base-overlay-background, 0.2); + color: rgba($white, 0.7); + + &:hover { + background: rgba($base-overlay-background, 0.4); + } + } + + &.disabled { + color: desaturate($icon-button-inactive-color, 5%); + + &:hover, + &:active, + &:focus { + color: desaturate($icon-button-inactive-color, 5%); + } + } + + color: $icon-button-inactive-color; + + &:hover, + &:active, + &:focus { + color: darken($icon-button-inactive-color, 5%); + } +} + +.icon-button.star-icon, +.icon-button.star-icon:active { + background:transparent; + border:none; +} + +.icon-button.star-icon.active { + color: $gold-star; + &:active, &:hover, &:focus { + color: $gold-star; + } +} + +.text-icon-button { + color: $white; + &.active { + background: $ui-base-color; + color: $ui-primary-color; + } + &:focus, &:hover { + color: darken($ui-base-color, 3%); + } +} +.status.status-direct { + background: darken($ui-base-alt, 5%); + .icon-button.disabled { + color: lighten($ui-base-lighter-color, 10%); + } +} + +.account__header, .account-card { + & > div { + background: rgba(lighten($ui-base-color, 4%), 0.6); + } + + .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; + + &::after { + border-bottom-color: $ui-base-alt; + } + + &::after { + border-bottom-color: $ui-base-alt; + } + } +} + +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $ui-primary-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; + } + } + } +} + +.emoji-picker-dropdown__menu { + .emoji-search-wrapper { + border-color: darken($ui-base-color, 10%); + } + .emoji-search { + background: darken($ui-base-color, 5%); + border-color: darken($ui-base-color, 10%); + } + .emoji-mart { + color: $ui-primary-color; + } +} + +.search-popout { + background: $ui-base-color; + color: $ui-primary-color; + + h4 { + color: $ui-primary-color; + } + + em { + color: $ui-highlight-color; + } +} +.search__icon .fa.active { + opacity:1.0; +} +.search-results__hashtag { + color: darken($ui-primary-color, 10%); + &:hover { + color: lighten($ui-primary-color, 5%); + } +} + +.static-content { + /*color: $primary-text-color;*/ +} + +#Getting-started { + background: $ui-primary-color; + border-bottom:0px; + color:white; +} + +.getting-started { + p { + color: $primary-text-color; + } + + a { + color: darken($ui-base-lighter-color, 10%); + } +} +.getting-started__wrapper { + flex: 0 0.5 auto; +} + +.getting-started { + .column-link { + background: lighten($ui-primary-color, 5%); + color:$white; + &:hover { + background: lighten($ui-primary-color, 10%); + } + } +} +.column-link__badge { + background: saturate(darken($ui-primary-color, 5%), 5%); +} +.column-subheading { + background: darken($ui-primary-color, 5%); + color:$white; +} + +.media-spoiler, +.video-player__spoiler.active { + color: $white; + &:hover { + color: darken($white, 5%); + } +} + +.status { + border-bottom: 1px solid $ui-secondary-color; +} + +.status__relative-time, .status__display-name { + color: darken($ui-base-color, 40%); +} + +.status__content { + .status__content__spoiler-link { + background: $ui-base-lighter-color; + + &:hover { + background: lighten($ui-base-lighter-color, 5%); + } + } +} + +.muted .status__content p { + color: $icon-button-inactive-color; +} + +.dropdown-menu__item { + & > a { + color: $primary-text-color; + &:hover, &:active, &:focus { + color: $white; + } + } +} + +.dropdown--active .dropdown__content { + & > ul { + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); + & > li > a { + background: $ui-base-color; + color: $primary-text-color; + + &:hover { + background: $ui-highlight-color; + color: $ui-base-color; + } + } + } +} + +.boost-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-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 { + & > div { + color: $ui-primary-color; + } +} + +.actions-modal +{ + ul { + li:not(:empty) { + a { + color: $primary-text-color; + button { + + } + &.active, &:hover, &:active, &:focus { + color: $white; + button { + color: $white; + } + } + } + } + } +} + +.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%); + &:focus, &:active { + color: $primary-text-color; + } +} + +.status.light { + .status__content { + color: $primary-text-color; + } + .display-name strong { + color: $primary-text-color; + } +} + +.reply-indicator__content a { + color: lighten($ui-highlight-color, 30%); +} + +.status__content +{ + a { + color: $ui-highlight-color; + + &:hover { + .fa { + color: darken($ui-base-color, 40%); + } + } + } +} + +.detailed-status__display-name { + color: $ui-base-lighter-color; +} + +.drawer .drawer__inner { + overflow: visible; + height:inherit; + background:$ui-base-alt; +} + +.search__icon .fa { + color: $ui-highlight-color; +} + +.drawer__pager { + overflow-y:auto; +} + +.drawer .drawer__header { + background: $ui-base-color; + border-radius:3px; +} + +.onboarding-modal__page h1 { + background-color: darken($ui-primary-color, 5%); +} + +.poll__text input[type="text"], +.compose-form__poll-wrapper select { + color: $primary-text-color; +} + +.compose-form__poll-wrapper .button.button-secondary { + color: $ui-highlight-color; +} + +/* forms.scss */ +.block-button, .button, button { + background-color: $ui-primary-color; + color: $white; + + &.button-alternative { + color: $ui-base-color; + } + + &.logo-button { + color: $white; + svg path:first-child { + fill: $white; + } + } +} + +.simple_form { + p.hint { + color: $primary-text-color; + } + + .block-button, .button, button { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 5%); + } + + &:active, + &:focus { + background-color: darken($ui-primary-color, 5%); + } + + } +} + +/* admin.scss */ + +.table > thead > tr > th { + border-bottom-color: $ui-secondary-color; +} + +.simple_form h4 { + border-bottom: 1px solid $ui-highlight-color; +} + +.admin-wrapper { + .content { + h2, p.hint, h4, h6 { + color: $primary-text-color; + } + + .muted-hint { + color: $primary-text-color; + } + } + + .sidebar { + .logo { + -webkit-filter: invert(100%); + filter: invert(100%); + } + + ul { + ul { + a { + &.selected { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 10%); + } + } + } + } + a { + &.selected { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 10%); + } + } + } + } + } +} + +.pagination .current { + color: $ui-primary-color; +} + +.report-accounts__item > strong { + color: $primary-text-color; +} + +.admin-wrapper .content { + & > p { + color: $primary-text-color; + } + hr { + border-color: $ui-highlight-color; + } +} + +/* accounts.scss */ +.card { + .name { + color: $white; + } + + .counter { + .counter-number { + color: $white; + } + } +} + +/* stream_entries.scss */ +.activity-stream { + .entry { + } + .status.light { + .display-name { + strong { + color: $primary-text-color; + } + } + .status__content { + color: $primary-text-color; + } + } + .detailed-status.light { + .detailed-status__display-name { + .display-name { + strong { + color: $primary-text-color; + } + } + } + .status__content { + color: $primary-text-color; + } + .status-card, + .status-card__title, + .status-card__description { + color: $primary-text-color; + } + } +} + +/* accounts.scss */ +.card { + .name { + color: darken($ui-primary-color, 15%); + } + .counter { + .counter-number { + color: darken($ui-primary-color, 15%); + } + border-color: $ui-primary-color; + } +} + +.activity-stream-tabs { + a { + color: lighten($ui-primary-color, 10%); + &.active { + color: darken($ui-primary-color, 10%); + } + } +} + +/* uncategorized */ + +@media screen and (min-width: 1300px) { + .column { + flex-grow: 1 !important; + max-width: 400px; + } + + .drawer { + width: 17%; + max-width: 400px; + min-width: 330px; + } +} + +.status time:after, +.detailed-status__datetime span:after { + font: normal normal normal 14px/1 FontAwesome; + content: "\00a0\00a0\f08e"; +} + + +.column { + max-height:100vh; + & > .scrollable { + background-color: $ui-base-alt; + } +} + +.empty-column-indicator, .error-column { + background-color: $ui-base-alt; +} + +.actions .button.button-alternative { + background: $ui-highlight-color; + color: $white; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-highlight-color, 4%); + } +} + +.public-layout .header { + background: $ui-highlight-color; + color: $white; +} + +.public-layout .public-account-header__tabs__name h1 { + color: $white; + small { + color: $white; + } +} +.public-layout .header .brand:hover, +.public-layout .header .brand:focus, +.public-layout .header .brand:active { + background: lighten($ui-highlight-color, 5%); +} + +.public-layout .container:last-child { + background:$ui-highlight-color; + padding-left: 100px; + padding-right: 100px; + border-radius: 4px; + h4 { + color: white; + } +} + +.modal-layout, .modal-layout__mastodon > * { + background: none; +} + +.dashboard__widgets a:not(.name-tag) { + color: $primary-text-color; +} diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..f6a036d4f --- /dev/null +++ b/app/javascript/styles/fullwidth-media.scss @@ -0,0 +1,48 @@ + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.status .video-player, +.media-gallery, +.status .status-card.interactive { + margin-top: 20px; + margin-left: -68px; + width: calc(100% + 80px); +} + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.video-player { + max-width: none; +} + +/* If there's no status text, add an extra margin on top */ +.status .status__info + .media-gallery, +.status .status__info + .media-spoiler, +.status .status__info + .video-player, +.status .status__info + .status-card { + margin-top: 40px; +} + +.status__video-player-video { + transform: unset; + top: unset; +} + +.detailed-status .media-gallery { + margin-left: -10px; + width: calc(100% + 22px); +} + +.public-layout .status { + .status__content { + min-height: 15px; + } + & > .media-spoiler, + .video-player, + .media-gallery, + .status-card { + margin-top: 20px; + width: calc(100% + 94px); + margin-left: -78px; + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cdf3b3b13..833d9acb8 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2567,10 +2567,6 @@ a.status-card { width: 100%; } - .status-card__image-image { - border-radius: 4px 4px 0 0; - } - .status-card__title { white-space: inherit; } @@ -2602,7 +2598,6 @@ a.status-card.compact:hover { } .status-card__image-image { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%; diff --git a/config/locales/en.yml b/config/locales/en.yml index 6d59411a5..c8ba72623 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1005,9 +1005,10 @@ en:
Originally adapted from the Discourse privacy policy.
title: "%{instance} Terms of Service and Privacy Policy" themes: - contrast: Mastodon (High contrast) - default: Mastodon (Dark) - mastodon-light: Mastodon (Light) + 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