From 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 Mon Sep 17 00:00:00 2001 From: Markus Hatvan Date: Tue, 10 Aug 2021 19:04:54 +0200 Subject: feat: follow OS reduced motion setting (#1757) - add missing meta charset to index.html - dont restrict scaling for user in index.html - load animations.css conditionally based on motion preference - load transitions conditionally in js and css based on motion preference Co-authored-by: Vijay Raghavan Aravamudhan --- src/styles/button.scss | 91 ++++++++++++------ src/styles/content-tabs.scss | 29 ++++-- src/styles/fonts.scss | 6 ++ src/styles/image-upload.scss | 32 +++++-- src/styles/layout.scss | 70 +++++++++----- src/styles/main.scss | 1 - src/styles/radio.scss | 19 ++-- src/styles/recipes.scss | 36 +++++--- src/styles/settings.scss | 213 ++++++++++++++++++++++++++++++------------- src/styles/slider.scss | 29 +++--- src/styles/tabs.scss | 58 ++++++++---- src/styles/toggle.scss | 4 +- src/styles/type.scss | 46 +++++++--- src/styles/welcome.scss | 36 +++++--- 14 files changed, 464 insertions(+), 206 deletions(-) (limited to 'src/styles') diff --git a/src/styles/button.scss b/src/styles/button.scss index d18b683d5..86b3501f0 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -4,29 +4,45 @@ background: $theme-brand-primary; color: $dark-theme-text-color; - &:hover { background: darken($theme-brand-primary, 5%); } - &:active { background: lighten($theme-brand-primary, 5%); } + &:hover { + background: darken($theme-brand-primary, 5%); + } + &:active { + background: lighten($theme-brand-primary, 5%); + } &.franz-form__button--secondary { background: $dark-theme-gray-dark; color: $dark-theme-text-color; - &:hover { background: lighten($dark-theme-gray-dark, 10%); } - &:active { background: lighten($dark-theme-gray-dark, 20%); } + &:hover { + background: lighten($dark-theme-gray-dark, 10%); + } + &:active { + background: lighten($dark-theme-gray-dark, 20%); + } } &.franz-form__button--danger { background: $theme-brand-danger; - &:hover { background: darken($theme-brand-danger, 5%); } - &:active { background: lighten($theme-brand-danger, 5%); } + &:hover { + background: darken($theme-brand-danger, 5%); + } + &:active { + background: lighten($theme-brand-danger, 5%); + } } &.franz-form__button--warning { background: $theme-brand-warning; - &:hover { background: darken($theme-brand-warning, 5%); } - &:active { background: lighten($theme-brand-warning, 5%); } + &:hover { + background: darken($theme-brand-warning, 5%); + } + &:active { + background: lighten($theme-brand-warning, 5%); + } } &.franz-form__button--inverted { @@ -39,27 +55,35 @@ } } - &:disabled { opacity: .5; } + &:disabled { + opacity: 0.5; + } } .franz-form__button { background: $theme-brand-primary; border-radius: 3px; display: block; - color: #FFF; + color: #fff; padding: 10px 20px; position: relative; - transition: background .5s; + @media (prefers-reduced-motion: no-preference) { + transition: background 0.5s; + } text-align: center; - &:hover { background: darken($theme-brand-primary, 5%) } + &:hover { + background: darken($theme-brand-primary, 5%); + } &:active { background: lighten($theme-brand-primary, 5%); transition: none; } - &:disabled { opacity: .2; } + &:disabled { + opacity: 0.2; + } &.franz-form__button--large { width: 100%; @@ -70,22 +94,34 @@ background: $theme-gray-lighter; color: $theme-gray; - &:hover { background: darken($theme-gray-lighter, 5%); } - &:active { background: lighten($theme-gray-lighter, 5%); } + &:hover { + background: darken($theme-gray-lighter, 5%); + } + &:active { + background: lighten($theme-gray-lighter, 5%); + } } &.franz-form__button--danger { background: $theme-brand-danger; - &:hover { background: darken($theme-brand-danger, 5%); } - &:active { background: lighten($theme-brand-danger, 5%); } + &:hover { + background: darken($theme-brand-danger, 5%); + } + &:active { + background: lighten($theme-brand-danger, 5%); + } } &.franz-form__button--warning { background: $theme-brand-warning; - &:hover { background: darken($theme-brand-warning, 5%); } - &:active { background: lighten($theme-brand-warning, 5%); } + &:hover { + background: darken($theme-brand-warning, 5%); + } + &:active { + background: lighten($theme-brand-warning, 5%); + } } &.franz-form__button--inverted { @@ -93,11 +129,12 @@ border: 2px solid $theme-brand-primary; color: $theme-brand-primary; padding: 10px 20px; - transition: background .5s, color .5s; - + @media (prefers-reduced-motion: no-preference) { + transition: background 0.5s, color 0.5s; + } &:hover { background: darken($theme-brand-primary, 5%); - color: #FFF; + color: #fff; } } @@ -122,20 +159,20 @@ z-index: 9998; list-style: none; background: $theme-brand-primary; - + position: absolute; bottom: 20px; right: 20px; cursor: pointer; - + display: flex; justify-content: center; align-items: center; - + a { font-size: 30px; - color: #FFFFFF; - cursor: pointer; + color: #ffffff; + cursor: pointer; } } diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 03befedcb..41bd2c251 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss @@ -9,7 +9,7 @@ .content-tabs__tabs { .content-tabs__item { background: $dark-theme-gray; - color: #FFF; + color: #fff; border: 0; } } @@ -24,19 +24,26 @@ overflow: hidden; .content-tabs__item { - background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); + background: linear-gradient( + $theme-gray-lightest 80%, + darken($theme-gray-lightest, 3%) + ); border-right: 1px solid $theme-gray-lighter; color: $theme-gray-dark; flex: 1; padding: 10px; - transition: background $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time; + } - &:last-of-type { border-right: 0; } + &:last-of-type { + border-right: 0; + } &.is-active { background: $theme-brand-primary; box-shadow: none; - color: #FFF; + color: #fff; } } } @@ -51,10 +58,16 @@ display: none; top: 0; - &.is-active { display: block; } + &.is-active { + display: block; + } } - .franz-form__input-wrapper { background: #FFF; } - .franz-form__field:last-of-type { margin-bottom: 0; } + .franz-form__input-wrapper { + background: #fff; + } + .franz-form__field:last-of-type { + margin-bottom: 0; + } } } diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 432332b49..1b2c99945 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -5,6 +5,7 @@ src: url('../assets/fonts/OpenSans-Light.ttf'); font-weight: 300; font-style: normal; + display: swap; } @font-face { @@ -12,6 +13,7 @@ src: url('../assets/fonts/OpenSans-Regular.ttf'); font-weight: normal; font-style: normal; + display: swap; } @font-face { @@ -19,6 +21,7 @@ src: url('../assets/fonts/OpenSans-Bold.ttf'); font-weight: bold; font-style: normal; + display: swap; } @font-face { @@ -26,6 +29,7 @@ src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); font-weight: bold; font-style: italic; + display: swap; } @font-face { @@ -33,6 +37,7 @@ src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); font-weight: 800; font-style: normal; + display: swap; } @font-face { @@ -40,4 +45,5 @@ src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); font-weight: 800; font-style: italic; + display: swap; } diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 31300c227..b5f6d5cd4 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss @@ -5,17 +5,23 @@ color: $dark-theme-gray-lighter; &__action { - &-background { background: rgba($dark-theme-black, .7); } + &-background { + background: rgba($dark-theme-black, 0.7); + } button { color: $dark-theme-gray-lightest; - .mdi { color: $dark-theme-gray-lightest; } + .mdi { + color: $dark-theme-gray-lightest; + } } } } - .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } + .image-upload-wrapper .mdi { + color: $dark-theme-gray-light; + } } .image-upload { @@ -49,11 +55,13 @@ justify-content: center; opacity: 0; position: relative; - transition: opacity .5s; + @media (prefers-reduced-motion: no-preference) { + transition: opacity 0.5s; + } z-index: 10; &-background { - background: rgba($theme-gray, .7); + background: rgba($theme-gray, 0.7); bottom: 0; left: 0; position: absolute; @@ -63,11 +71,13 @@ } button { - color: #FFF; + color: #fff; position: relative; z-index: 100; - .mdi { color: #FFF; } + .mdi { + color: #fff; + } } } @@ -83,7 +93,9 @@ &__dropzone, button { - .mdi { margin-bottom: 5px; } + .mdi { + margin-bottom: 5px; + } p { font-size: 10px; @@ -91,7 +103,9 @@ } } - &:hover .image-upload__action { opacity: 1; } + &:hover .image-upload__action { + opacity: 1; + } } .image-upload-wrapper .mdi { diff --git a/src/styles/layout.scss b/src/styles/layout.scss index acbd65ad1..49e041022 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -1,6 +1,8 @@ @import './config.scss'; -html { overflow: hidden; } +html { + overflow: hidden; +} @keyframes pulse-danger { 0% { @@ -21,7 +23,7 @@ html { overflow: hidden; } &::after { box-shadow: inset 0 0 5px 0 $dark-theme-black, - inset 0 0 2px 0 rgba(0, 0, 0, 0.4); + inset 0 0 2px 0 rgba(0, 0, 0, 0.4); } .sidebar__add-service { @@ -48,12 +50,12 @@ html { overflow: hidden; } filter: grayscale(1); } - .update-available { + .update-available { align-items: center; background: $theme-brand-danger; border-radius: 20px; bottom: 5px; - color: #FFF; + color: #fff; display: flex; justify-content: center; padding: 0px 5px; @@ -71,7 +73,9 @@ html { overflow: hidden; } } } - .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } + .app-loader .app-loader__title { + color: $dark-theme-gray-lightest; + } } body.win32:not(.isFullScreen) .app .app__content { @@ -96,7 +100,9 @@ body.win32:not(.isFullScreen) .app .app__content { } } -.electron-app-title-bar { z-index: 99999999; } +.electron-app-title-bar { + z-index: 99999999; +} .window-draggable { height: 22px; @@ -109,7 +115,9 @@ body.win32:not(.isFullScreen) .app .app__content { -webkit-app-region: drag; } -.darwin .sidebar { padding-top: 23px; } +.darwin .sidebar { + padding-top: 23px; +} .sidebar { position: relative; @@ -133,8 +141,8 @@ body.win32:not(.isFullScreen) .app .app__content { z-index: 1000; pointer-events: none; clip-path: inset(10px 0 10px 10px); - box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12), - inset 0 0 2px 0 rgba(0, 0, 0, 0.24); + box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12), + inset 0 0 2px 0 rgba(0, 0, 0, 0.24); } .sidebar__add-service { @@ -154,16 +162,25 @@ body.win32:not(.isFullScreen) .app .app__content { width: $theme-sidebar-width; &:hover, - &:active { color: lighten($theme-gray-light, 10%); } - &.is-muted, &.is-active { color: $theme-brand-primary; } - &--new-service { padding-bottom: 6px; } + &:active { + color: lighten($theme-gray-light, 10%); + } + &.is-muted, + &.is-active { + color: $theme-brand-primary; + } + &--new-service { + padding-bottom: 6px; + } } & > div { display: flex; overflow-y: scroll; - &::-webkit-scrollbar { display: none; } + &::-webkit-scrollbar { + display: none; + } } } @@ -171,8 +188,12 @@ body.win32:not(.isFullScreen) .app .app__content { display: flex; flex-direction: row; - & > * { margin-right: 20px; } - & :last-child { margin-right: 0; } + & > * { + margin-right: 20px; + } + & :last-child { + margin-right: 0; + } } .app-loader { @@ -181,19 +202,23 @@ body.win32:not(.isFullScreen) .app .app__content { justify-content: center; .app-loader__title { - color: #FFF; + color: #fff; font-size: 40px; } - & > span { height: auto; } + & > span { + height: auto; + } } -.dev-warning { display: none; } +.dev-warning { + display: none; +} .isDevMode .dev-warning { border-radius: 3px; background: $theme-brand-warning; - color: #FFF; + color: #fff; display: block; font-size: 8px; height: auto; @@ -201,12 +226,15 @@ body.win32:not(.isFullScreen) .app .app__content { position: fixed; left: 9px; bottom: 0px; - transition: opacity .5s ease; + @media (prefers-reduced-motion: no-preference) { + transition: opacity 0.5s ease; + } width: auto; z-index: 999999999; pointer-events: none; } -a, button { +a, +button { cursor: pointer; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 4cc996785..b0815e086 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -22,7 +22,6 @@ $mdi-font-path: '../node_modules/@mdi/font/fonts'; @import './tooltip.scss'; @import './info-bar.scss'; @import './status-bar-target-url.scss'; -@import './animations.scss'; @import './infobox.scss'; @import './badge.scss'; @import './content-tabs.scss'; diff --git a/src/styles/radio.scss b/src/styles/radio.scss index b1e148ca0..e8297408d 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -11,9 +11,10 @@ } } - .franz-form { - .franz-form__radio-wrapper { display: flex; } + .franz-form__radio-wrapper { + display: flex; + } .franz-form__radio { border: 2px solid $theme-gray-lighter; @@ -24,18 +25,24 @@ margin-right: 20px; padding: 11px; text-align: center; - transition: background $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time; + } - &:last-of-type { margin-right: 0; } + &:last-of-type { + margin-right: 0; + } &.is-selected { - background: #FFF; + background: #fff; border-width: 2px; border-style: solid; border-color: $theme-brand-primary; color: $theme-brand-primary; } - input { display: none; } + input { + display: none; + } } } diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 5bdc60a57..37c2febf6 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss @@ -4,7 +4,9 @@ background-color: $dark-theme-gray-dark; color: $dark-theme-text-color; - &:hover { background-color: $dark-theme-gray; } + &:hover { + background-color: $dark-theme-gray; + } } .recipes { @@ -17,7 +19,7 @@ &.recipes__list--disabled { filter: grayscale(100%); - opacity: .3; + opacity: 0.3; pointer-events: none; } } @@ -26,16 +28,20 @@ height: auto; margin-bottom: 35px; - .badge { margin-right: 10px; } + .badge { + margin-right: 10px; + } &.recipes__navigation--disabled { filter: grayscale(100%); - opacity: .3; + opacity: 0.3; pointer-events: none; } } - &__service-request { float: right; } + &__service-request { + float: right; + } } .recipe-teaser { @@ -45,24 +51,32 @@ margin: 0 20px 20px 0; overflow: hidden; position: relative; - transition: background $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time; + } width: calc(25% - 20px); - &:hover { background-color: $theme-gray-lighter; } + &:hover { + background-color: $theme-gray-lighter; + } .recipe-teaser__icon { margin-bottom: 10px; width: 50px; } - .recipe-teaser__label { display: block; } + .recipe-teaser__label { + display: block; + } - h2 { z-index: 10; } + h2 { + z-index: 10; + } &__dev-badge { background: $theme-brand-warning; - box-shadow: 0 0 4px rgba(black, .2); - color: #FFF; + box-shadow: 0 0 4px rgba(black, 0.2); + color: #fff; font-size: 10px; position: absolute; right: -13px; diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 5d4e81a4f..501f97b98 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -1,63 +1,85 @@ @import './config.scss'; %headline { - color: #FFF; + color: #fff; font-size: 20px; font-weight: 400; letter-spacing: -1px; - a { color: #FFF } + a { + color: #fff; + } } %headline__dark { - color: #FFF; + color: #fff; font-size: 20px; font-weight: 400; letter-spacing: -1px; - a { color: #FFF } + a { + color: #fff; + } } .theme__dark { - .settings-wrapper { background: rgba($dark-theme-black, .8); } + .settings-wrapper { + background: rgba($dark-theme-black, 0.8); + } .settings { .settings__header { - .mdi { color: #FFF } + .mdi { + color: #fff; + } } .settings__main { background: $dark-theme-gray-darkest; } - .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } + .settings__body::-webkit-scrollbar-thumb { + background: $dark-theme-gray; + } .settings__close { - color: #FFF; + color: #fff; } - &__settings-group h3 { color: $dark-theme-gray-lightest; } + &__settings-group h3 { + color: $dark-theme-gray-lightest; + } .settings__message { border-top: 1px solid $theme-gray-lighter; color: $dark-theme-gray-lightest; - .mdi { color: $dark-theme-gray-lightest; } + .mdi { + color: $dark-theme-gray-lightest; + } } - .settings__help { color: $dark-theme-gray-lightest; } + .settings__help { + color: $dark-theme-gray-lightest; + } .settings__controls { background: $dark-theme-gray-darker; - .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } + .franz-form__button.franz-form__button--secondary { + background: $theme-gray-light; + } } .account { - .account__box { background: $dark-theme-gray-darker; } + .account__box { + background: $dark-theme-gray-darker; + } } - .legal { color: $theme-gray-light; } + .legal { + color: $theme-gray-light; + } } .settings-navigation { @@ -69,7 +91,7 @@ border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); &:last-child { - border: 0, + border: 0; } .badge { @@ -87,7 +109,7 @@ } &.is-disabled { - filter: grayscale(100%) opacity(.2); + filter: grayscale(100%) opacity(0.2); } &.is-active { @@ -101,13 +123,15 @@ } } - .settings-navigation__action-badge { background: $theme-brand-danger; } + .settings-navigation__action-badge { + background: $theme-brand-danger; + } } } .settings-wrapper { align-items: center; - background: rgba(black, .5); + background: rgba(black, 0.5); display: flex; height: 100%; left: 0; @@ -129,7 +153,7 @@ .settings { border-radius: $theme-border-radius; - box-shadow: 0 20px 50px rgba($dark-theme-black, .5); + box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); display: flex; height: 100%; max-height: 720px; @@ -147,7 +171,7 @@ height: auto; border-radius: 0 $theme-border-radius $theme-border-radius 0; overflow: hidden; - background: #FFF; + background: #fff; } .settings__header { @@ -157,7 +181,7 @@ height: 50px; padding: 0 40px; width: calc(100% - 60px); - color: #FFF; + color: #fff; h1 { @extend %headline; @@ -177,11 +201,13 @@ transform: skew(15deg) rotate(2deg); } - .mdi { color: $theme-gray-light; } + .mdi { + color: $theme-gray-light; + } } .settings_titles { - display:inline-block; + display: inline-block; } .settings__body { @@ -190,9 +216,13 @@ overflow-y: scroll; padding: 25px 15px 15px 25px; - .badge { margin-right: 10px; } + .badge { + margin-right: 10px; + } - &::-webkit-scrollbar { width: 8px; } + &::-webkit-scrollbar { + width: 8px; + } /* Track */ &::-webkit-scrollbar-track { @@ -208,9 +238,16 @@ -webkit-border-radius: 10px; } - &::-webkit-scrollbar-thumb:window-inactive { background: none; } - .service-flex-grid { display: flex; } - .service-name,.user-agent { flex: 1px; } + &::-webkit-scrollbar-thumb:window-inactive { + background: none; + } + .service-flex-grid { + display: flex; + } + .service-name, + .user-agent { + flex: 1px; + } .service-icon { float: right; @@ -232,20 +269,28 @@ .settings__close { background: $theme-brand-primary; // border-left: 1px solid darken($theme-brand-primary, 8%); - color: #FFF; + color: #fff; font-size: 20px; height: 50px; padding: 0 20px; position: absolute; right: 0; - transition: background $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time; + } cursor: pointer; - &::before { cursor: pointer; } - &:hover { background: darken($theme-brand-primary, 5%); } + &::before { + cursor: pointer; + } + &:hover { + background: darken($theme-brand-primary, 5%); + } } - .search-input { margin-bottom: 30px; } + .search-input { + margin-bottom: 30px; + } &__options { flex: 1; @@ -258,10 +303,12 @@ h3 { color: $theme-gray-light; font-weight: bold; - letter-spacing: -.1px; + letter-spacing: -0.1px; margin: 25px 0 15px; - &:first-of-type { margin-top: 0; } + &:first-of-type { + margin-top: 0; + } .badge { font-weight: normal; @@ -302,14 +349,20 @@ padding: 10px 20px; .franz-form__button { - &[type='submit'] { margin-left: auto; } - &.franz-form__button--secondary { background: $theme-gray-light; } + &[type='submit'] { + margin-left: auto; + } + &.franz-form__button--secondary { + background: $theme-gray-light; + } } } - .settings__delete-button { right: 0; } + .settings__delete-button { + right: 0; + } .settings__open-recipe-file-button { - cursor:pointer; + cursor: pointer; margin-right: 10px; } .settings__open-recipe-file-container { @@ -330,7 +383,9 @@ margin-bottom: 1em; } - a.button { margin-top: 40px; } + a.button { + margin-top: 40px; + } } .account { @@ -343,8 +398,12 @@ margin-bottom: 40px; padding: 20px; - &.account__box--flex { display: flex; } - &.account__box--last { margin-bottom: 0; } + &.account__box--flex { + display: flex; + } + &.account__box--last { + margin-bottom: 0; + } .auth__button { margin-top: 10px; @@ -360,16 +419,24 @@ .account__info { flex: 1; - h2 { margin-bottom: 5px; } - .badge { margin-top: 5px; } - .username { margin-right: 10 } + h2 { + margin-bottom: 5px; + } + .badge { + margin-top: 5px; + } + .username { + margin-right: 10; + } } .account__subscription { align-items: center; display: flex; - .badge { margin-left: 10px; } + .badge { + margin-left: 10px; + } } .manage-user-links { @@ -378,10 +445,18 @@ justify-content: space-between; } - .account__subscription-button { margin-left: auto; } - .franz-form__button { white-space: nowrap; } - div { height: auto; } - [data-type="franz-button"] div { height: 20px } + .account__subscription-button { + margin-left: auto; + } + .franz-form__button { + white-space: nowrap; + } + div { + height: auto; + } + [data-type='franz-button'] div { + height: 20px; + } .invoices { width: 100%; @@ -399,7 +474,9 @@ .invoices__action { text-align: right; - button { color: $theme-brand-primary; } + button { + color: $theme-brand-primary; + } } } } @@ -409,7 +486,9 @@ font-size: 40px; margin-bottom: 20px; - img { width: 40px; } + img { + width: 40px; + } } .content-tabs { @@ -432,8 +511,8 @@ width: 240px; height: 100%; align-self: center; - border-top-left-radius: $theme-border-radius;; - border-bottom-left-radius: $theme-border-radius;; + border-top-left-radius: $theme-border-radius; + border-bottom-left-radius: $theme-border-radius; overflow: hidden; .settings-navigation__link { @@ -445,12 +524,15 @@ height: 51px; padding: 0 20px; text-decoration: none; - transition: background $theme-transition-time, color $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time, + color $theme-transition-time; + } border-bottom: 1px solid darken($theme-gray-lightest, 3%); .badge { background: $theme-gray-light; - color: #FFF; + color: #fff; } &:hover { @@ -458,26 +540,31 @@ .badge { background: $theme-gray-light; - color: #FFF; + color: #fff; } } &.is-active { background: $theme-brand-primary; - color: #FFF; + color: #fff; .badge { - background: #FFF; + background: #fff; color: $theme-brand-primary; } } } - .settings-navigation__expander { flex: 1; } + .settings-navigation__expander { + flex: 1; + } .badge { display: initial; - transition: background $theme-transition-time, color $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time, + color $theme-transition-time; + } } .settings-navigation__action-badge { @@ -491,5 +578,7 @@ } .settings__support-badges { - a { margin-right: 10px } + a { + margin-right: 10px; + } } diff --git a/src/styles/slider.scss b/src/styles/slider.scss index 8bb771586..85b31660f 100644 --- a/src/styles/slider.scss +++ b/src/styles/slider.scss @@ -3,43 +3,44 @@ .theme__dark .franz-form .franz-form__slider-wrapper .slider { border: 1px solid $dark-theme-gray; background: $dark-theme-gray; - } - .franz-form { - .franz-form__slider-wrapper { + .franz-form__slider-wrapper { display: flex; flex-direction: row; - .franz-form__label { margin-left: 20px; } + .franz-form__label { + margin-left: 20px; + } .slider-container { - width: 100%; /* Width of the outside container */ + width: 100%; /* Width of the outside container */ } - + /* The slider itself */ .slider { -webkit-appearance: none; width: 100%; height: 14px; - border-radius: $theme-border-radius; + border-radius: $theme-border-radius; background: $theme-gray-lighter; outline: none; - opacity: 1.0; - -webkit-transition: .2s; - transition: opacity .2s; + opacity: 1; + @media (prefers-reduced-motion: no-preference) { + transition: opacity 0.2s; + } } - + .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; - border-radius: 50%; + border-radius: 50%; background: $theme-brand-primary; - box-shadow: 0 1px 4px rgba(0, 0, 0, .3); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; } - } + } } diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 31a239387..df10da77c 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -4,11 +4,17 @@ &.is-active { background: $dark-theme-gray; - .tab-item__icon { margin-left: -4px; } + .tab-item__icon { + margin-left: -4px; + } } - &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } - .tab-item__icon { width: 34px; } + &.is-disabled .tab-item__icon { + filter: grayscale(100%) opacity(0.2); + } + .tab-item__icon { + width: 34px; + } } .tabs { @@ -29,22 +35,34 @@ justify-content: center; min-height: 50px; position: relative; - transition: background $theme-transition-time; + @media (prefers-reduced-motion: no-preference) { + transition: background $theme-transition-time; + } width: $theme-sidebar-width; &.is-active { - background: change-color($theme-brand-primary, - $lightness: min(lightness($theme-brand-primary) * 1.35, 100)); + background: change-color( + $theme-brand-primary, + $lightness: min(lightness($theme-brand-primary) * 1.35, 100) + ); border-left-width: 4px; border-left-style: solid; color: $theme-brand-primary; - .tab-item__icon { margin-left: -4px; } + .tab-item__icon { + margin-left: -4px; + } } - &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } - &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } - &:active .tab-item__icon { opacity: .7; } + &.is-disabled .tab-item__icon { + filter: grayscale(100%) opacity(0.2); + } + &.has-custom-icon .tab-item__icon { + border-radius: $theme-border-radius; + } + &:active .tab-item__icon { + opacity: 0.7; + } .tab-item__icon { height: auto; @@ -56,7 +74,7 @@ background: $theme-brand-danger; border-radius: 20px; bottom: 8px; - color: #FFF; + color: #fff; display: flex; font-size: 11px; justify-content: center; @@ -66,13 +84,13 @@ position: absolute; right: 8px; - &.is-indirect { + &.is-indirect { padding-top: 0; background: #0088cc; - } - &.hibernating { - padding-top: 0; - background: $theme-gray; + } + &.hibernating { + padding-top: 0; + background: $theme-gray; font-size: 0px; min-height: 10px; min-width: 10px; @@ -96,11 +114,13 @@ right: 8px; width: 17px; - &.is-indirect { + &.is-indirect { padding-top: 0; background: #0088cc; - } + } } - &.is-reordering { z-index: 99999; } + &.is-reordering { + z-index: 99999; + } } diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 5cd9e4526..ed4c0d11b 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss @@ -39,7 +39,9 @@ $toggle-button-size: 22px; left: 1px; top: 1px; position: absolute; - transition: all 0.5s; + @media (prefers-reduced-motion: no-preference) { + transition: all 0.5s; + } width: $toggle-size - 2; } diff --git a/src/styles/type.scss b/src/styles/type.scss index 37ec0bcca..234c4d5c4 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss @@ -2,9 +2,15 @@ @import './mixins.scss'; .theme__dark { - a { color: $dark-theme-gray-smoke; } - .label { color: $dark-theme-gray-lightest; } - .footnote { color: $dark-theme-gray-lightest; } + a { + color: $dark-theme-gray-smoke; + } + .label { + color: $dark-theme-gray-lightest; + } + .footnote { + color: $dark-theme-gray-lightest; + } } h1 { @@ -21,36 +27,45 @@ h2 { margin-bottom: 25px; margin-top: 5px; - &:first-of-type { margin-top: 0; } + &:first-of-type { + margin-top: 0; + } } p { margin-bottom: 10px; line-height: 1.7rem; - &:last-of-type { margin-bottom: 0; } + &:last-of-type { + margin-bottom: 0; + } } -strong { font-weight: bold; } +strong { + font-weight: bold; +} -a, button { +a, +button { color: $theme-text-color; text-decoration: none; &.button { background: $theme-brand-primary; - color: #FFF; + color: #fff; border-radius: 3px; display: inline-block; padding: 10px 20px; position: relative; text-align: center; - transition: background .5s, color .5s; + @media (prefers-reduced-motion: no-preference) { + transition: background 0.5s, color 0.5s; + } cursor: pointer; &:hover { background: darken($theme-brand-primary, 10%); - color: #FFF; + color: #fff; } } @@ -60,14 +75,19 @@ a, button { } } -.error-message, .error-message:last-of-type { +.error-message, +.error-message:last-of-type { color: $theme-brand-danger; margin: 10px 0; } -.center { text-align: center; } +.center { + text-align: center; +} -.label { @include formLabel(); } +.label { + @include formLabel(); +} .footnote { color: $theme-gray-light; diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index c1f85391e..7202fe148 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss @@ -1,24 +1,26 @@ .auth .welcome { height: auto; - + &__content { align-items: center; - color: #FFF; + color: #fff; display: flex; justify-content: center; height: auto; } - &__logo { width: 100px; } + &__logo { + width: 100px; + } &__text { - border-left: 1px solid #FFF; + border-left: 1px solid #fff; margin-left: 40px; padding-left: 40px; h1 { font-size: 60px; - letter-spacing: -.4rem; + letter-spacing: -0.4rem; margin-bottom: 5px; } @@ -42,33 +44,35 @@ text-align: center; height: auto; - .button:first-of-type { margin-right: 25px; } + .button:first-of-type { + margin-right: 25px; + } } .button { - border-color: #FFF; - color: #FFF; + border-color: #fff; + color: #fff; cursor: pointer; &:hover { - background: #FFF; + background: #fff; color: $theme-brand-primary; } &__inverted { - background: #FFF; + background: #fff; color: $theme-brand-primary; } &__inverted:hover { background: none; - color: #FFF; + color: #fff; } } &__featured-services { align-items: center; - background: #FFF; + background: #fff; border-radius: 6px; display: flex; flex-wrap: wrap; @@ -82,9 +86,13 @@ &__featured-service { margin: 0 10px 15px; height: 35px; - transition: .5s filter, .5s opacity; + @media (prefers-reduced-motion: no-preference) { + transition: 0.5s filter, 0.5s opacity; + } width: 35px; - img { width: 35px; } + img { + width: 35px; + } } } -- cgit v1.2.3-54-g00ecf