From 5d92840208ec50f2fceb4c2242a8b0d6ac149acc Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Sat, 15 Aug 2020 17:12:00 +0200 Subject: [PATCH] refresh css from master --- app/javascript/styles/bliss/_mixins.scss | 18 - app/javascript/styles/bliss/about.scss | 217 +-- .../styles/bliss/accessibility.scss | 13 +- app/javascript/styles/bliss/accounts.scss | 48 +- app/javascript/styles/bliss/admin.scss | 412 +++-- app/javascript/styles/bliss/basics.scss | 136 +- app/javascript/styles/bliss/boost.scss | 15 +- app/javascript/styles/bliss/components.scss | 1394 +++++++++++++---- app/javascript/styles/bliss/containers.scss | 100 +- app/javascript/styles/bliss/dashboard.scss | 2 + app/javascript/styles/bliss/footer.scss | 56 +- app/javascript/styles/bliss/forms.scss | 97 +- app/javascript/styles/bliss/introduction.scss | 3 +- app/javascript/styles/bliss/messaging.scss | 135 -- app/javascript/styles/bliss/polls.scss | 94 +- app/javascript/styles/bliss/rtl.scss | 36 +- app/javascript/styles/bliss/statuses.scss | 117 +- app/javascript/styles/bliss/tables.scss | 64 +- app/javascript/styles/bliss/widgets.scss | 117 +- 19 files changed, 2097 insertions(+), 977 deletions(-) diff --git a/app/javascript/styles/bliss/_mixins.scss b/app/javascript/styles/bliss/_mixins.scss index faaffb30f..68cad0fde 100644 --- a/app/javascript/styles/bliss/_mixins.scss +++ b/app/javascript/styles/bliss/_mixins.scss @@ -22,24 +22,6 @@ color: $darker-text-color; font-size: 14px; margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } } @mixin search-popout { diff --git a/app/javascript/styles/bliss/about.scss b/app/javascript/styles/bliss/about.scss index 61637ce96..3be0aee49 100644 --- a/app/javascript/styles/bliss/about.scss +++ b/app/javascript/styles/bliss/about.scss @@ -17,117 +17,86 @@ $small-breakpoint: 960px; .rich-formatting { font-family: $font-sans-serif, sans-serif; - font-size: 16px; + font-size: 14px; font-weight: 400; - font-size: 16px; - line-height: 30px; + line-height: 1.7; + word-wrap: break-word; color: $darker-text-color; - padding-right: 10px; a { color: $highlight-text-color; text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } } p, li { - font-family: $font-sans-serif, sans-serif; - font-size: 16px; - font-weight: 400; - font-size: 16px; - line-height: 30px; - margin-bottom: 12px; color: $darker-text-color; + } - a { - color: $highlight-text-color; - text-decoration: underline; - } + p { + margin-top: 0; + margin-bottom: .85em; &:last-child { margin-bottom: 0; } } - strong, - em { + strong { font-weight: 700; - color: lighten($darker-text-color, 10%); + color: $secondary-text-color; + } + + em { + font-style: italic; + color: $secondary-text-color; + } + + code { + font-size: 0.85em; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 0.2em 0.3em; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: $font-display, sans-serif; + margin-top: 1.275em; + margin-bottom: .85em; + font-weight: 500; + color: $secondary-text-color; } h1 { - font-family: $font-display, sans-serif; - font-size: 26px; - line-height: 30px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - - small { - font-family: $font-sans-serif, sans-serif; - display: block; - font-size: 18px; - font-weight: 400; - color: lighten($darker-text-color, 10%); - } + font-size: 2em; } h2 { - font-family: $font-display, sans-serif; - font-size: 22px; - line-height: 26px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; + font-size: 1.75em; } h3 { - font-family: $font-display, sans-serif; - font-size: 18px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; + font-size: 1.5em; } h4 { - font-family: $font-display, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - h5 { - font-family: $font-display, sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; + font-size: 1.25em; } + h5, h6 { - font-family: $font-display, sans-serif; - font-size: 12px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $secondary-text-color; - } - - ul, - ol { - margin-left: 20px; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } + font-size: 1em; } ul { @@ -138,23 +107,90 @@ $small-breakpoint: 960px; list-style: decimal; } - li > ol, - li > ul { - margin-top: 6px; + ul, + ol { + margin: 0; + padding: 0; + padding-left: 2em; + margin-bottom: 0.85em; + + &[type='a'] { + list-style-type: lower-alpha; + } + + &[type='i'] { + list-style-type: lower-roman; + } } hr { width: 100%; height: 0; border: 0; - border-bottom: 1px solid rgba($ui-base-lighter-color, .6); - margin: 20px 0; + border-bottom: 1px solid lighten($ui-base-color, 4%); + margin: 1.7em 0; &.spacer { height: 1px; border: 0; } } + + table { + width: 100%; + border-collapse: collapse; + break-inside: auto; + margin-top: 24px; + margin-bottom: 32px; + + thead tr, + tbody tr { + border-bottom: 1px solid lighten($ui-base-color, 4%); + font-size: 1em; + line-height: 1.625; + font-weight: 400; + text-align: left; + color: $darker-text-color; + } + + thead tr { + border-bottom-width: 2px; + line-height: 1.5; + font-weight: 500; + color: $dark-text-color; + } + + th, + td { + padding: 8px; + align-self: start; + align-items: start; + word-break: break-all; + + &.nowrap { + width: 25%; + position: relative; + + &::before { + content: ' '; + visibility: hidden; + } + + span { + position: absolute; + left: 8px; + right: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + + & > :first-child { + margin-top: 0; + } } .information-board { @@ -416,7 +452,7 @@ $small-breakpoint: 960px; } &__call-to-action { - background: darken($ui-base-color, 4%); + background: $ui-base-color; border-radius: 4px; padding: 25px 40px; overflow: hidden; @@ -507,12 +543,6 @@ $small-breakpoint: 960px; flex: 0 0 auto; } - &__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } - .display-name { font-size: 15px; @@ -713,16 +743,15 @@ $small-breakpoint: 960px; display: flex; align-items: center; } + } - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } + &__counters__wrapper { + display: flex; } &__counter { padding: 10px; + width: 50%; strong { font-family: $font-display, sans-serif; diff --git a/app/javascript/styles/bliss/accessibility.scss b/app/javascript/styles/bliss/accessibility.scss index 76b07987a..c5bcb5941 100644 --- a/app/javascript/styles/bliss/accessibility.scss +++ b/app/javascript/styles/bliss/accessibility.scss @@ -1,16 +1,13 @@ -$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash'; +$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; -%white-emoji-outline { - filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white); - transform: scale(.71); +%emoji-color-inversion { + filter: invert(1); } .emojione { - @each $emoji in $black-emojis { + @each $emoji in $emojis-requiring-inversion { &[title=':#{$emoji}:'] { - @extend %white-emoji-outline; + @extend %emoji-color-inversion; } } } - - diff --git a/app/javascript/styles/bliss/accounts.scss b/app/javascript/styles/bliss/accounts.scss index 4bd0f1caf..2c78e81be 100644 --- a/app/javascript/styles/bliss/accounts.scss +++ b/app/javascript/styles/bliss/accounts.scss @@ -13,7 +13,7 @@ &:active, &:focus { .card__bar { - background: lighten($ui-base-color, 4%); + background: lighten($ui-base-color, 8%); } } } @@ -76,6 +76,10 @@ margin-left: 15px; text-align: left; + i[data-hidden] { + display: none; + } + strong { font-size: 15px; color: $primary-text-color; @@ -224,6 +228,7 @@ } .account__header__fields { + max-width: 100vw; padding: 0; margin: 15px -15px -15px; border: 0 none; @@ -320,44 +325,3 @@ margin-top: 10px; } } -.sidebar__toggle__icon{ - margin: 0.5em; - padding: 2em; - margin-left: -2em; -} -.sidebar__toggle{ - padding: 2em; -} -.sidebar__toggle__logo, .sidebar__toggle{ - display: none; -} -.account--panel{ - width: 100%; -} -.account-authorize--more-data{ - margin-bottom: 1em; - display: flex; - a{ - padding: 1em; - margin-bottom: 1em; - flex: auto; - } -} - -@media screen and (max-width: 600px) { - - .sidebar__toggle__logo , .sidebar__toggle{ - display: block; - } -} -.directory__card{ - .u-photo{ - max-width: 5em; - } -.directory__card__img{ - img{ - - max-width: 100%; - } -} -} diff --git a/app/javascript/styles/bliss/admin.scss b/app/javascript/styles/bliss/admin.scss index 503e3f054..25ebc19b0 100644 --- a/app/javascript/styles/bliss/admin.scss +++ b/app/javascript/styles/bliss/admin.scss @@ -1,25 +1,70 @@ $no-columns-breakpoint: 600px; -$sidebar-width: 20vw; -$content-width: 80vw; +$sidebar-width: 240px; +$content-width: 840px; .admin-wrapper { display: flex; justify-content: center; - height: 100%; + width: 100%; + min-height: 100vh; .sidebar-wrapper { - flex: 1 1 $sidebar-width; - height: 100%; - background: $ui-base-color; - display: flex; - justify-content: flex-end; + min-height: 100vh; + overflow: hidden; + pointer-events: none; + flex: 1 1 auto; + + &__inner { + display: flex; + justify-content: flex-end; + background: $ui-base-color; + height: 100%; + } } .sidebar { width: $sidebar-width; - height: 100%; padding: 0; - overflow-y: auto; + pointer-events: auto; + + &__toggle { + display: none; + background: lighten($ui-base-color, 8%); + height: 48px; + + &__logo { + flex: 1 1 auto; + + a { + display: inline-block; + padding: 15px; + } + + svg { + fill: $primary-text-color; + height: 20px; + position: relative; + bottom: -2px; + } + } + + &__icon { + display: block; + color: $darker-text-color; + text-decoration: none; + flex: 0 0 auto; + font-size: 20px; + padding: 15px; + } + + a { + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 12%); + } + } + } .logo { display: block; @@ -52,6 +97,9 @@ $content-width: 80vw; transition: all 200ms linear; transition-property: color, background-color; border-radius: 4px 0 0 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; i.fa { margin-right: 5px; @@ -99,15 +147,31 @@ $content-width: 80vw; } .content-wrapper { - flex: 2 1 $content-width; - overflow: auto; + box-sizing: border-box; + width: 100%; + max-width: $content-width; + flex: 1 1 auto; + } + + @media screen and (max-width: $content-width + $sidebar-width) { + .sidebar-wrapper--empty { + display: none; + } + + .sidebar-wrapper { + width: $sidebar-width; + flex: 0 0 auto; + } + } + + @media screen and (max-width: $no-columns-breakpoint) { + .sidebar-wrapper { + width: 100%; + } } .content { - max-width: $content-width; - padding: 20px 15px; - padding-top: 60px; - padding-left: 25px; + padding: 55px 15px 20px 25px; @media screen and (max-width: $no-columns-breakpoint) { max-width: none; @@ -115,14 +179,46 @@ $content-width: 80vw; padding-top: 30px; } + &-heading { + display: flex; + + padding-bottom: 36px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + margin: -15px -15px 40px 0; + + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + + & > * { + margin-top: 15px; + margin-right: 15px; + } + + &-actions { + display: inline-flex; + + & > :not(:first-child) { + margin-left: 5px; + } + } + + @media screen and (max-width: $no-columns-breakpoint) { + border-bottom: 0; + padding-bottom: 0; + } + } + h2 { color: $secondary-text-color; font-size: 24px; - line-height: 28px; + line-height: 36px; font-weight: 400; - padding-bottom: 40px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; + + @media screen and (max-width: $no-columns-breakpoint) { + font-weight: 700; + } } h3 { @@ -147,7 +243,7 @@ $content-width: 80vw; font-size: 16px; color: $secondary-text-color; line-height: 28px; - font-weight: 400; + font-weight: 500; } .fields-group h6 { @@ -176,7 +272,7 @@ $content-width: 80vw; & > p { font-size: 14px; - line-height: 18px; + line-height: 21px; color: $secondary-text-color; margin-bottom: 20px; @@ -208,20 +304,42 @@ $content-width: 80vw; @media screen and (max-width: $no-columns-breakpoint) { display: block; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - .sidebar-wrapper, - .content-wrapper { - flex: 0 0 auto; - height: auto; - overflow: initial; + .sidebar-wrapper { + min-height: 0; } .sidebar { width: 100%; padding: 0; height: auto; + + &__toggle { + display: flex; + } + + & > ul { + display: none; + } + + ul a, + ul ul a { + border-radius: 0; + border-bottom: 1px solid lighten($ui-base-color, 4%); + transition: none; + + &:hover { + transition: none; + } + } + + ul ul { + border-radius: 0; + } + + ul .simple-navigation-active-leaf a { + border-bottom-color: $ui-highlight-color; + } } } } @@ -233,32 +351,35 @@ hr.spacer { height: 1px; } -.muted-hint { - color: $darker-text-color; +body, +.admin-wrapper .content { + .muted-hint { + color: $darker-text-color; - a { - color: $highlight-text-color; + a { + color: $highlight-text-color; + } } -} -.positive-hint { - color: $valid-value-color; - font-weight: 500; -} + .positive-hint { + color: $valid-value-color; + font-weight: 500; + } -.negative-hint { - color: $error-value-color; - font-weight: 500; -} + .negative-hint { + color: $error-value-color; + font-weight: 500; + } -.neutral-hint { - color: $dark-text-color; - font-weight: 500; -} + .neutral-hint { + color: $dark-text-color; + font-weight: 500; + } -.warning-hint { - color: $gold-star; - font-weight: 500; + .warning-hint { + color: $gold-star; + font-weight: 500; + } } .filters { @@ -267,10 +388,10 @@ hr.spacer { .filter-subset { flex: 0 0 auto; - margin: 0 40px 10px 0; + margin: 0 40px 20px 0; &:last-child { - margin-bottom: 20px; + margin-bottom: 30px; } ul { @@ -295,6 +416,11 @@ hr.spacer { } } + &--with-select strong { + display: block; + margin-bottom: 10px; + } + a { display: inline-block; color: $darker-text-color; @@ -384,6 +510,16 @@ hr.spacer { max-width: 100%; } +.simple_form { + .actions { + margin-top: 15px; + } + + .button { + font-size: 15px; + } +} + .batch-form-box { display: flex; flex-wrap: wrap; @@ -423,24 +559,39 @@ hr.spacer { } } +.special-action-button, +.back-link { + text-align: right; + flex: 1 1 auto; +} + +.action-buttons { + display: flex; + overflow: hidden; + justify-content: space-between; +} + .spacer { flex: 1 1 auto; } .log-entry { - margin-bottom: 20px; line-height: 20px; + padding: 15px 0; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); + + &:last-child { + border-bottom: 0; + } &__header { display: flex; justify-content: flex-start; align-items: center; - padding: 10px; - background: $ui-base-color; color: $darker-text-color; - border-radius: 4px 4px 0 0; font-size: 14px; - position: relative; + padding: 0 10px; } &__avatar { @@ -467,44 +618,6 @@ hr.spacer { color: $dark-text-color; } - &__extras { - background: lighten($ui-base-color, 6%); - border-radius: 0 0 4px 4px; - padding: 10px; - color: $darker-text-color; - font-family: $font-monospace, monospace; - font-size: 12px; - word-wrap: break-word; - min-height: 20px; - } - - &__icon { - font-size: 28px; - margin-right: 10px; - color: $dark-text-color; - } - - &__icon__overlay { - position: absolute; - top: 10px; - right: 10px; - width: 10px; - height: 10px; - border-radius: 50%; - - &.positive { - background: $success-green; - } - - &.negative { - background: lighten($error-red, 12%); - } - - &.neutral { - background: $ui-highlight-color; - } - } - a, .username, .target { @@ -512,18 +625,6 @@ hr.spacer { text-decoration: none; font-weight: 500; } - - .diff-old { - color: lighten($error-red, 12%); - } - - .diff-neutral { - color: $secondary-text-color; - } - - .diff-new { - color: $success-green; - } } a.name-tag, @@ -717,8 +818,101 @@ a.name-tag, vertical-align: middle; } +.admin-account-bio { + display: flex; + flex-wrap: wrap; + margin: 0 -5px; + margin-top: 20px; -.administrate-stuff { - margin-right: 1ch; - color: $classic-highlight-color; + > div { + box-sizing: border-box; + padding: 0 5px; + margin-bottom: 10px; + flex: 1 0 50%; + } + + .account__header__fields, + .account__header__content { + background: lighten($ui-base-color, 8%); + border-radius: 4px; + height: 100%; + } + + .account__header__fields { + margin: 0; + border: 0; + + a { + color: lighten($ui-highlight-color, 8%); + } + + dl:first-child .verified { + border-radius: 0 4px 0 0; + } + + .verified a { + color: $valid-value-color; + } + } + + .account__header__content { + box-sizing: border-box; + padding: 20px; + color: $primary-text-color; + } +} + +.center-text { + text-align: center; +} + +.announcements-list { + border: 1px solid lighten($ui-base-color, 4%); + border-radius: 4px; + + &__item { + padding: 15px 0; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); + + &__title { + padding: 0 15px; + display: block; + font-weight: 500; + font-size: 18px; + line-height: 1.5; + color: $secondary-text-color; + text-decoration: none; + margin-bottom: 10px; + + &:hover, + &:focus, + &:active { + color: $primary-text-color; + } + } + + &__meta { + padding: 0 15px; + color: $dark-text-color; + } + + &__action-bar { + display: flex; + justify-content: space-between; + align-items: center; + } + + &:last-child { + border-bottom: 0; + } + } +} + +.account-badges { + margin: -2px 0; +} + +.dashboard__counters.admin-account-counters { + margin-top: 10px; } diff --git a/app/javascript/styles/bliss/basics.scss b/app/javascript/styles/bliss/basics.scss index 473096d6e..9e63b1d31 100644 --- a/app/javascript/styles/bliss/basics.scss +++ b/app/javascript/styles/bliss/basics.scss @@ -68,7 +68,32 @@ body { } &.player { - text-align: center; + padding: 0; + margin: 0; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + + & > div { + height: 100%; + } + + .video-player video { + width: 100%; + height: 100%; + max-height: 100vh; + } + + .media-gallery { + margin-top: 0; + height: 100% !important; + border-radius: 0; + } + + .media-gallery__item { + border-radius: 0; + } } &.embed { @@ -86,9 +111,6 @@ body { &.admin { background: darken($ui-base-color, 4%); - position: fixed; - width: 100%; - height: 100%; padding: 0; } @@ -138,13 +160,18 @@ button { .app-holder { &, - & > div { + & > div, + & > noscript { display: flex; width: 100%; align-items: center; justify-content: center; outline: 0 !important; } + + & > noscript { + height: 100vh; + } } .layout-single-column .app-holder { @@ -161,52 +188,85 @@ button { } } +.error-boundary, +.app-holder noscript { + flex-direction: column; + font-size: 16px; + font-weight: 400; + line-height: 1.7; + color: lighten($error-red, 4%); + text-align: center; -.media-gallery { - margin-left: 0; -} + & > div { + max-width: 500px; + } -.debug, .well { - padding: 0.5rem; - border: solid 1px greenyellow; - background: yellow; - color: #222; + p { + margin-bottom: .85em; -} + &:last-child { + margin-bottom: 0; + } + } -.spacer { - display: block; - padding: 1em; -} + a { + color: $highlight-text-color; -.small-texts { - .timelines { - .column-link { + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + &__footer { + color: $dark-text-color; + font-size: 13px; + a { + color: $dark-text-color; + } + } + + button { + display: inline; + border: 0; + background: transparent; + color: $dark-text-color; + font: inherit; + padding: 0; + margin: 0; + line-height: inherit; + cursor: pointer; + outline: 0; + transition: color 300ms linear; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; } - span { - display: none; + &.copied { + color: $valid-value-color; + transition: none; } } } -.clickable { - cursor: pointer; +.logo-resources { + display: none; +} - &:hover { - color: $ui-highlight-color; +// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, +// to set the z-index to a high value, which messes with modals and dropdowns. +// Blocked elements can in theory only be media and frames/embeds, so they +// should only appear in statuses, under divs and articles. +body, +div, +article { + .__ns__pop2top { + z-index: unset !important; } } - -.pull-right { - float: right; -} - -.pull-left { - float: left; -} -.content-heading-actions{ - @extend .pull-right; -} diff --git a/app/javascript/styles/bliss/boost.scss b/app/javascript/styles/bliss/boost.scss index 5a6d6ae40..4b6c9b82e 100644 --- a/app/javascript/styles/bliss/boost.scss +++ b/app/javascript/styles/bliss/boost.scss @@ -6,6 +6,17 @@ button.icon-button i.fa-retweet { } } -button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); +.status-private button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + &, + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } } diff --git a/app/javascript/styles/bliss/components.scss b/app/javascript/styles/bliss/components.scss index f0adeea78..ffb7e8b2e 100644 --- a/app/javascript/styles/bliss/components.scss +++ b/app/javascript/styles/bliss/components.scss @@ -3,6 +3,23 @@ -ms-overflow-style: -ms-autohiding-scrollbar; } +.animated-number { + display: inline-flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; + position: relative; +} + +.inline-alert { + color: $valid-value-color; + font-weight: 400; + + .no-reduce-motion & { + transition: opacity 200ms ease; + } +} + .link-button { display: block; font-size: 15px; @@ -52,7 +69,7 @@ &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 4%); + background-color: lighten($ui-highlight-color, 10%); transition: all 200ms ease-out; } @@ -380,8 +397,8 @@ .emoji-picker-dropdown { position: absolute; - top: 5px; - right: 5px; + top: 0; + right: 0; } .compose-form__autosuggest-wrapper { @@ -392,6 +409,7 @@ .autosuggest-input, .spoiler-input { position: relative; + width: 100%; } .spoiler-input { @@ -406,10 +424,6 @@ } } - .autosuggest-textarea__textarea { - margin-bottom: 5px; - } - .autosuggest-textarea__textarea, .spoiler-input__input { display: block; @@ -425,6 +439,10 @@ border: 0; outline: 0; + &::placeholder { + color: $dark-text-color; + } + &:focus { outline: 0; } @@ -507,9 +525,24 @@ .autosuggest-hashtag { justify-content: space-between; + &__name { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + strong { font-weight: 500; } + + &__uses { + flex: 0 0 auto; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .autosuggest-account-icon, @@ -728,7 +761,7 @@ } .reply-indicator__display-name { - color: $dark-text-color; + color: $inverted-text-color; display: block; max-width: 100%; line-height: 24px; @@ -786,7 +819,7 @@ } a { - color: $inverted-text-color; + color: $secondary-text-color; text-decoration: none; &:hover { @@ -844,40 +877,68 @@ } } +.announcements__item__content { + word-wrap: break-word; + overflow-y: auto; + + .emojione { + width: 20px; + height: 20px; + margin: -3px 0 0; + } + + p { + margin-bottom: 10px; + white-space: pre-wrap; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: $secondary-text-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + &.unhandled-link { + color: lighten($ui-highlight-color, 8%); + } + } +} + .status__content.status__content--collapsed { max-height: 20px * 15; // 15 lines is roughly above 500 characters } + .status__content__read-more-button { display: block; - font-size: 0.85em; + font-size: 15px; line-height: 20px; color: lighten($ui-highlight-color, 8%); border: 0; background: transparent; padding: 0; padding-top: 8px; - text-align: right; - width: 100%; + text-decoration: none; &:hover, &:active { text-decoration: underline; } - - img { - transform: rotateY(180deg); - - margin-left: 1ch; - } - - span{ - opacity: 0; - transition: all ease 0.5s; - &:hover{ - opacity: 1; - transition: all ease 0.5s; - } - } } .status__content__spoiler-link { @@ -895,13 +956,6 @@ vertical-align: middle; } -.status__wrapper { - &:hover { - background: mix($ui-base-lighter-color, $ui-base-color); - animation: background ease 0.5s; - } -} - .status__wrapper--filtered { color: $dark-text-color; border: 0; @@ -947,7 +1001,7 @@ position: relative; min-height: 54px; border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; + cursor: auto; @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { // Add margin to avoid Edge auto-hiding scrollbar appearing over content. @@ -967,7 +1021,8 @@ opacity: 1; animation: fade 150ms linear; - .video-player { + .video-player, + .audio-player { margin-top: 8px; } @@ -977,7 +1032,8 @@ } &.light { - .status__relative-time { + .status__relative-time, + .status__visibility-icon { color: $light-text-color; } @@ -986,13 +1042,11 @@ } .display-name { + color: $light-text-color; + strong { color: $inverted-text-color; } - - span { - color: $light-text-color; - } } .status__content { @@ -1025,12 +1079,18 @@ } .status__relative-time, +.status__visibility-icon, .notification__relative_time { color: $dark-text-color; float: right; font-size: 14px; } +.status__visibility-icon { + margin-left: 4px; + margin-right: 4px; +} + .status__display-name { color: $dark-text-color; } @@ -1052,6 +1112,7 @@ .status-check-box__status { margin: 10px 0 10px 10px; flex: 1; + overflow: hidden; .media-gallery { max-width: 250px; @@ -1062,7 +1123,8 @@ white-space: normal; } - .video-player { + .video-player, + .audio-player { margin-top: 8px; max-width: 250px; } @@ -1103,7 +1165,7 @@ .status__action-bar { align-items: center; display: flex; - margin-top: 8px; + margin-left: 2.4em; &__counter { display: inline-flex; @@ -1173,7 +1235,8 @@ } } - .video-player { + .video-player, + .audio-player { margin-top: 8px; } } @@ -1211,8 +1274,8 @@ color: $inverted-text-color; font-size: 14px; - a, a .mention { - color: $lighter-text-color !important; + a { + color: $lighter-text-color; } } @@ -1275,8 +1338,13 @@ .account__avatar { @include avatar-radius; + display: block; position: relative; + width: 36px; + height: 36px; + background-size: 36px 36px; + &-inline { display: inline-block; vertical-align: middle; @@ -1285,14 +1353,27 @@ &-composite { @include avatar-radius; + border-radius: 50%; overflow: hidden; + position: relative; & > div { - @include avatar-radius; float: left; position: relative; box-sizing: border-box; } + + &__label { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: $primary-text-color; + text-shadow: 1px 1px 2px $base-shadow-color; + font-weight: 700; + font-size: 15px; + } } } @@ -1306,6 +1387,12 @@ a .account__avatar { &-base { @include avatar-radius; @include avatar-size(36px); + + img { + @include avatar-radius; + width: 100%; + height: 100%; + } } &-overlay { @@ -1316,6 +1403,12 @@ a .account__avatar { bottom: 0; right: 0; z-index: 1; + + img { + @include avatar-radius; + width: 100%; + height: 100%; + } } } @@ -1428,19 +1521,10 @@ a .account__avatar { padding: 14px 10px; .detailed-status__display-name { - display: inline-block; + display: block; margin-bottom: 15px; overflow: hidden; } - - &--more-data { - margin-bottom: 0.5em; - - a { - padding: 1em; - color: $highlight-text-color; - } - } } .account-authorize__avatar { @@ -1490,6 +1574,10 @@ a.account__display-name { color: inherit; } +.detailed-status .button.logo-button { + margin-bottom: 15px; +} + .detailed-status__display-name { color: $secondary-text-color; display: block; @@ -1533,6 +1621,7 @@ a.account__display-name { } .muted { + .status__content, .status__content p, .status__content a { color: $dark-text-color; @@ -1590,6 +1679,24 @@ a.account__display-name { color: $gold-star; } +.bookmark-icon.active { + color: $red-bookmark; +} + +.no-reduce-motion .icon-button.star-icon { + &.activate { + & > .fa-star { + animation: spring-rotate-in 1s linear; + } + } + + &.deactivate { + & > .fa-star { + animation: spring-rotate-out 1s linear; + } + } +} + .notification__display-name { color: inherit; font-weight: 500; @@ -1614,7 +1721,6 @@ a.account__display-name { } .display-name__html { - color: $dark-text-color; font-weight: 500; } @@ -1816,7 +1922,7 @@ a.account__display-name { box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $inverted-text-color !important; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1825,14 +1931,10 @@ a.account__display-name { &:hover, &:active { background: $ui-highlight-color; - color: $white !important; + color: $secondary-text-color; outline: 0; } } - i.fa{ - margin-left: 1ch; - margin-right: 1ch; - } } .dropdown--active .dropdown__content { @@ -1916,6 +2018,7 @@ a.account__display-name { pointer-events: none; display: flex; justify-content: flex-end; + min-width: 285px; &--start { justify-content: flex-start; @@ -1933,6 +2036,7 @@ a.account__display-name { box-sizing: border-box; width: 100%; max-width: 600px; + flex: 0 0 auto; display: flex; flex-direction: column; @@ -2122,13 +2226,23 @@ a.account__display-name { padding: 0; } - //.column { - // margin-top: 0; + .directory__list { + display: grid; + grid-gap: 10px; + grid-template-columns: minmax(0, 50%) minmax(0, 50%); - // @media screen and (min-width: $no-gap-breakpoint) { - // margin-top: 10px; - // } - //} + @media screen and (max-width: $no-gap-breakpoint) { + display: block; + } + } + + .directory__card { + margin-bottom: 0; + } + + .filter-form { + display: flex; + } .autosuggest-textarea__textarea { font-size: 16px; @@ -2163,7 +2277,8 @@ a.account__display-name { padding: 15px; .media-gallery, - .video-player { + .video-player, + .audio-player { margin-top: 15px; } } @@ -2205,7 +2320,8 @@ a.account__display-name { .media-gallery, &__action-bar, - .video-player { + .video-player, + .audio-player { margin-top: 10px; } } @@ -2287,9 +2403,6 @@ a.account__display-name { .columns-area__panels__pane--compositional { display: none; } - .hide-on-smaller-screens { - display: none; - } } @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { @@ -2344,7 +2457,6 @@ a.account__display-name { flex-direction: column; height: calc(100% - 10px); overflow-y: hidden; - z-index: 1; .navigation-bar { padding-top: 20px; @@ -2446,7 +2558,7 @@ a.account__display-name { display: block; object-fit: contain; object-position: bottom left; - width: 100%; + width: 85%; height: 100%; pointer-events: none; user-drag: none; @@ -2487,7 +2599,6 @@ a.account__display-name { overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; - will-change: transform; // improves perf in mobile Chrome &.optionally-scrollable { overflow-y: auto; @@ -2689,28 +2800,6 @@ a.account__display-name { padding: 15px; text-decoration: none; - .timelines & { - display: inline-block; - width: 20%; - display: inline-block !important; - float: left; - text-align: center; - - span { - opacity: 0; - transition: opacity ease-in 1s; - - - } - - &:hover { - span { - opacity: 1; - transition: opacity ease-in 0.2s; - } - } - } - &:hover, &:focus, &:active { @@ -2824,6 +2913,15 @@ a.account__display-name { animation: fade 150ms linear; margin-top: 10px; + h4 { + font-size: 12px; + text-transform: uppercase; + color: $darker-text-color; + padding: 10px; + font-weight: 500; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + @media screen and (max-height: 810px) { .trends__item:nth-child(3) { display: none; @@ -2896,7 +2994,7 @@ a.account__display-name { } } -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); @@ -2910,21 +3008,18 @@ a.account__display-name { } -.no-reduce-motion button.icon-button.active i.fa-retweet { +button.icon-button.active i.fa-retweet { transition-duration: 0.9s; background-position: 0 100%; } -.reduce-motion button.icon-button i.fa-retweet { - color: $action-button-color; - transition: color 100ms ease-in; -} - +.reduce-motion button.icon-button i.fa-retweet, .reduce-motion button.icon-button.active i.fa-retweet { - color: $highlight-text-color; + transition: none; } .status-card { + position: relative; display: flex; font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); @@ -3056,7 +3151,8 @@ a.status-card { width: 100%; } - .status-card__image-image { + .status-card__image-image, + .status-card__image-preview { border-radius: 4px 4px 0 0; } @@ -3101,6 +3197,24 @@ a.status-card.compact:hover { background-position: center center; } +.status-card__image-preview { + border-radius: 4px 0 0 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: fill; + position: absolute; + top: 0; + left: 0; + z-index: 0; + background: $base-overlay-background; + + &--hidden { + display: none; + } +} + .load-more { display: block; color: $dark-text-color; @@ -3125,6 +3239,31 @@ a.status-card.compact:hover { border-bottom: 1px solid lighten($ui-base-color, 8%); } +.timeline-hint { + text-align: center; + color: $darker-text-color; + padding: 15px; + box-sizing: border-box; + width: 100%; + cursor: default; + + strong { + font-weight: 500; + } + + a { + color: lighten($ui-highlight-color, 8%); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: lighten($ui-highlight-color, 12%); + } + } +} + .regeneration-indicator { text-align: center; font-size: 16px; @@ -3134,37 +3273,27 @@ a.status-card.compact:hover { cursor: default; display: flex; flex: 1 1 auto; + flex-direction: column; align-items: center; justify-content: center; padding: 20px; - & > div { - width: 100%; - background: transparent; - padding-top: 0; - } - &__figure { - background: url('../images/elephant_ui_working.svg') no-repeat center 0; - width: 100%; - height: 160px; - background-size: contain; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - &.missing-indicator { - padding-top: 20px + 48px; - - .regeneration-indicator__figure { - background-image: url('../images/elephant_ui_disappointed.svg'); + &, + img { + display: block; + width: auto; + height: 160px; + margin: 0; } } + &--without-header { + padding-top: 20px + 48px; + } + &__label { - margin-top: 200px; + margin-top: 30px; strong { display: block; @@ -3182,13 +3311,16 @@ a.status-card.compact:hover { .column-header__wrapper { position: relative; flex: 0 0 auto; + z-index: 1; &.active { + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); + &::before { display: block; content: ""; position: absolute; - top: 35px; + bottom: -13px; left: 0; right: 0; margin: 0 auto; @@ -3199,6 +3331,11 @@ a.status-card.compact:hover { background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); } } + + .announcements { + z-index: 1; + position: relative; + } } .column-header { @@ -3231,8 +3368,6 @@ a.status-card.compact:hover { } &.active { - box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); - .column-header__icon { color: $highlight-text-color; text-shadow: 0 0 10px rgba($highlight-text-color, 0.4); @@ -3288,6 +3423,8 @@ a.status-card.compact:hover { color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; + z-index: 1; + position: relative; &.collapsed { max-height: 0; @@ -3390,6 +3527,50 @@ a.status-card.compact:hover { animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } +@keyframes spring-rotate-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-484.8deg); + } + + 60% { + transform: rotate(-316.7deg); + } + + 90% { + transform: rotate(-375deg); + } + + 100% { + transform: rotate(-360deg); + } +} + +@keyframes spring-rotate-out { + 0% { + transform: rotate(-360deg); + } + + 30% { + transform: rotate(124.8deg); + } + + 60% { + transform: rotate(-43.27deg); + } + + 90% { + transform: rotate(15deg); + } + + 100% { + transform: rotate(0deg); + } +} + @keyframes loader-figure { 0% { width: 0; @@ -3490,6 +3671,10 @@ a.status-card.compact:hover { height: auto; } + &--click-thru { + pointer-events: none; + } + &--hidden { display: none; } @@ -3518,6 +3703,12 @@ a.status-card.compact:hover { background: rgba($base-overlay-background, 0.8); } } + + &:disabled { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.5); + } + } } } @@ -3540,16 +3731,6 @@ a.status-card.compact:hover { text-align: center; } -.account-authorize__wrapper { - - .account--panel__button { - .icon-button { - width: 100%; - display: block; - } - } -} - .column-settings__outer { background: lighten($ui-base-color, 8%); padding: 15px; @@ -3571,6 +3752,28 @@ a.status-card.compact:hover { .column-select { &__control { @include search-input; + + &::placeholder { + color: lighten($darker-text-color, 4%); + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } } &__placeholder { @@ -3653,7 +3856,6 @@ a.status-card.compact:hover { color: $primary-text-color; margin-bottom: 4px; display: block; - vertical-align: top; background-color: $base-overlay-background; text-transform: uppercase; font-size: 11px; @@ -3681,7 +3883,8 @@ a.status-card.compact:hover { } .empty-column-indicator, -.error-column { +.error-column, +.follow_requests-unlocked_explanation { color: $dark-text-color; background: $ui-base-color; text-align: center; @@ -3712,6 +3915,11 @@ a.status-card.compact:hover { } } +.follow_requests-unlocked_explanation { + background: darken($ui-base-color, 4%); + contain: initial; +} + .error-column { flex-direction: column; } @@ -3939,10 +4147,7 @@ a.status-card.compact:hover { .emoji-button { display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; + padding: 5px 5px 2px 2px; outline: 0; cursor: pointer; @@ -3958,7 +4163,6 @@ a.status-card.compact:hover { margin: 0; width: 22px; height: 22px; - margin-top: 2px; } &:hover, @@ -4084,6 +4288,28 @@ a.status-card.compact:hover { padding-right: 30px; line-height: 18px; font-size: 16px; + + &::placeholder { + color: lighten($darker-text-color, 4%); + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } } .search__icon { @@ -4240,10 +4466,13 @@ a.status-card.compact:hover { z-index: 9999; } -.video-modal { +.video-modal__container { max-width: 100vw; max-height: 100vh; - position: relative; +} + +.audio-modal__container { + width: 50vw; } .media-modal { @@ -4343,6 +4572,7 @@ a.status-card.compact:hover { } a { + pointer-events: auto; text-decoration: none; font-weight: 500; color: $ui-secondary-color; @@ -4506,7 +4736,8 @@ a.status-card.compact:hover { .confirmation-modal, .report-modal, .actions-modal, -.mute-modal { +.mute-modal, +.block-modal { background: lighten($ui-secondary-color, 8%); color: $inverted-text-color; border-radius: 8px; @@ -4560,7 +4791,8 @@ a.status-card.compact:hover { .boost-modal__action-bar, .confirmation-modal__action-bar, -.mute-modal__action-bar { +.mute-modal__action-bar, +.block-modal__action-bar { display: flex; justify-content: space-between; background: $ui-secondary-color; @@ -4588,11 +4820,13 @@ a.status-card.compact:hover { font-size: 14px; } -.mute-modal { +.mute-modal, +.block-modal { line-height: 24px; } -.mute-modal .react-toggle { +.mute-modal .react-toggle, +.block-modal .react-toggle { vertical-align: middle; } @@ -4649,6 +4883,15 @@ a.status-card.compact:hover { } } +.setting-divider { + background: transparent; + border: 0; + margin: 0; + width: 100%; + height: 1px; + margin-bottom: 29px; +} + .report-modal__comment { padding: 20px; border-right: 1px solid $ui-secondary-color; @@ -4803,33 +5046,36 @@ a.status-card.compact:hover { } .confirmation-modal__action-bar, -.mute-modal__action-bar { - .confirmation-modal__secondary-button, - .confirmation-modal__cancel-button, - .mute-modal__cancel-button { - background-color: transparent; - color: $lighter-text-color; - font-size: 14px; - font-weight: 500; - - &:hover, - &:focus, - &:active { - color: darken($lighter-text-color, 4%); - } - } - +.mute-modal__action-bar, +.block-modal__action-bar { .confirmation-modal__secondary-button { flex-shrink: 1; } } +.confirmation-modal__secondary-button, +.confirmation-modal__cancel-button, +.mute-modal__cancel-button, +.block-modal__cancel-button { + background-color: transparent; + color: $lighter-text-color; + font-size: 14px; + font-weight: 500; + + &:hover, + &:focus, + &:active { + color: darken($lighter-text-color, 4%); + background-color: transparent; + } +} + .confirmation-modal__container, .mute-modal__container, +.block-modal__container, .report-modal__target { padding: 30px; font-size: 16px; - text-align: center; strong { font-weight: 500; @@ -4842,6 +5088,31 @@ a.status-card.compact:hover { } } +.confirmation-modal__container, +.report-modal__target { + text-align: center; +} + +.block-modal, +.mute-modal { + &__explanation { + margin-top: 20px; + } + + .setting-toggle { + margin-top: 20px; + margin-bottom: 24px; + display: flex; + align-items: center; + + &__label { + color: $inverted-text-color; + margin: 0; + margin-left: 8px; + } + } +} + .report-modal__target { padding: 15px; @@ -4857,6 +5128,7 @@ a.status-card.compact:hover { position: absolute; top: 0; left: 0; + z-index: 9999; } .media-gallery__gifv__label { @@ -4878,12 +5150,6 @@ a.status-card.compact:hover { } .media-gallery__gifv { - &.autoplay { - .media-gallery__gifv__label { - display: none; - } - } - &:hover { .media-gallery__gifv__label { opacity: 1; @@ -4963,6 +5229,7 @@ a.status-card.compact:hover { border-radius: 4px; position: relative; width: 100%; + min-height: 64px; } .media-gallery__item { @@ -5043,59 +5310,6 @@ a.status-card.compact:hover { /* End Media Gallery */ -/* Status Video Player */ -.status__video-player { - background: $base-overlay-background; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; - position: relative; -} - -.status__video-player-video { - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; -} - -.status__video-player-expand, -.status__video-player-mute { - color: $primary-text-color; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; -} - -.status__video-player-spoiler { - display: none; - color: $primary-text-color; - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.status__video-player-spoiler--visible { - display: block; - } -} - -.status__video-player-expand { - bottom: 4px; - z-index: 100; -} - -.status__video-player-mute { - top: 4px; - z-index: 5; -} - .detailed, .fullscreen { .video-player__volume__current, @@ -5109,15 +5323,79 @@ a.status-card.compact:hover { } +.audio-player { + overflow: hidden; + box-sizing: border-box; + position: relative; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding-bottom: 44px; + direction: ltr; + + &.editable { + border-radius: 0; + height: 100%; + } + + .video-player__volume::before, + .video-player__seek::before { + background: currentColor; + opacity: 0.15; + } + + .video-player__seek__buffer { + background: currentColor; + opacity: 0.2; + } + + .video-player__buttons button { + color: currentColor; + opacity: 0.75; + + &:active, + &:hover, + &:focus { + color: currentColor; + opacity: 1; + } + } + + .video-player__time-sep, + .video-player__time-total, + .video-player__time-current { + color: currentColor; + } + + .video-player__seek::before, + .video-player__seek__buffer, + .video-player__seek__progress { + top: 0; + } + + .video-player__seek__handle { + top: -4px; + } + + .video-player__controls { + padding: 0 15px; + padding-top: 10px; + background: transparent; + } +} + .video-player { overflow: hidden; position: relative; background: $base-shadow-color; max-width: 100%; border-radius: 4px; + box-sizing: border-box; + direction: ltr; + color: $white; &.editable { border-radius: 0; + height: 100% !important; } &:focus { @@ -5125,6 +5403,7 @@ a.status-card.compact:hover { } video { + display: block; max-width: 100vw; max-height: 80vh; z-index: 1; @@ -5140,6 +5419,7 @@ a.status-card.compact:hover { max-height: 100% !important; width: 100% !important; height: 100% !important; + outline: 0; } } @@ -5217,9 +5497,17 @@ a.status-card.compact:hover { display: flex; justify-content: space-between; padding-bottom: 10px; + + .video-player__download__icon { + color: inherit; + } } &__buttons { + display: flex; + flex: 0 1 auto; + min-width: 30px; + align-items: center; font-size: 16px; white-space: nowrap; overflow: hidden; @@ -5238,6 +5526,7 @@ a.status-card.compact:hover { } button { + flex: 0 0 auto; background: transparent; padding: 2px 10px; font-size: 16px; @@ -5252,6 +5541,13 @@ a.status-card.compact:hover { } } + &__time { + display: inline; + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + } + &__time-sep, &__time-total, &__time-current { @@ -5261,7 +5557,6 @@ a.status-card.compact:hover { &__time-current { color: $white; - margin-left: 60px; } &__time-sep { @@ -5275,9 +5570,22 @@ a.status-card.compact:hover { } &__volume { + flex: 0 0 auto; + display: inline-flex; cursor: pointer; height: 24px; - display: inline; + position: relative; + overflow: hidden; + + .no-reduce-motion & { + transition: all 100ms linear; + } + + &.active { + overflow: visible; + width: 50px; + margin-right: 16px; + } &::before { content: ""; @@ -5287,8 +5595,9 @@ a.status-card.compact:hover { display: block; position: absolute; height: 4px; - left: 70px; - bottom: 20px; + left: 0; + top: 50%; + transform: translate(0, -50%); } &__current { @@ -5296,8 +5605,9 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - left: 70px; - bottom: 20px; + left: 0; + top: 50%; + transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); } @@ -5307,12 +5617,21 @@ a.status-card.compact:hover { border-radius: 50%; width: 12px; height: 12px; - bottom: 16px; - left: 70px; - transition: opacity .1s ease; + top: 50%; + left: 0; + margin-left: -6px; + transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - pointer-events: none; + opacity: 0; + + .no-reduce-motion & { + transition: opacity 100ms linear; + } + } + + &.active &__handle { + opacity: 1; } } @@ -5372,10 +5691,12 @@ a.status-card.compact:hover { height: 12px; top: 6px; margin-left: -6px; - transition: opacity .1s ease; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - pointer-events: none; + + .no-reduce-motion & { + transition: opacity .1s ease; + } &.active { opacity: 1; @@ -5400,29 +5721,144 @@ a.status-card.compact:hover { } } -.media-spoiler-video { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - margin-top: 8px; - position: relative; - border: 0; - display: block; +.gifv { + video { + max-width: 100vw; + max-height: 80vh; + } } -.media-spoiler-video-play-icon { - border-radius: 100px; - color: rgba($primary-text-color, 0.8); - font-size: 36px; - left: 50%; - padding: 5px; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} +.directory { + &__list { + width: 100%; + margin: 10px 0; + transition: opacity 100ms ease-in; -/* End Video Player */ + &.loading { + opacity: 0.7; + } + + @media screen and (max-width: $no-gap-breakpoint) { + margin: 0; + } + } + + &__card { + box-sizing: border-box; + margin-bottom: 10px; + + &__img { + height: 125px; + position: relative; + background: darken($ui-base-color, 12%); + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + margin: 0; + object-fit: cover; + } + } + + &__bar { + display: flex; + align-items: center; + background: lighten($ui-base-color, 4%); + padding: 10px; + + &__name { + flex: 1 1 auto; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + } + + &__relationship { + width: 23px; + min-height: 1px; + flex: 0 0 auto; + } + + .avatar { + flex: 0 0 auto; + width: 48px; + height: 48px; + padding-top: 2px; + + img { + width: 100%; + height: 100%; + display: block; + margin: 0; + border-radius: 4px; + background: darken($ui-base-color, 8%); + object-fit: cover; + } + } + + .display-name { + margin-left: 15px; + text-align: left; + + strong { + font-size: 15px; + color: $primary-text-color; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + } + + span { + display: block; + font-size: 14px; + color: $darker-text-color; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + &__extra { + background: $ui-base-color; + display: flex; + align-items: center; + justify-content: center; + + .accounts-table__count { + width: 33.33%; + flex: 0 0 auto; + padding: 15px 0; + } + + .account__header__content { + box-sizing: border-box; + padding: 15px 10px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + width: 100%; + min-height: 18px + 30px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + p { + display: none; + + &:first-child { + display: inline; + } + } + + br { + display: none; + } + } + } + } +} .account-gallery__container { display: flex; @@ -5473,6 +5909,8 @@ a.status-card.compact:hover { text-align: center; text-decoration: none; position: relative; + width: 100%; + white-space: nowrap; &.active { color: $secondary-text-color; @@ -5498,6 +5936,73 @@ a.status-card.compact:hover { } } } + + &.directory__section-headline { + background: darken($ui-base-color, 2%); + border-bottom-color: transparent; + + a, + button { + &.active { + &::before { + display: none; + } + + &::after { + border-color: transparent transparent darken($ui-base-color, 7%); + } + } + } + } +} + +.filter-form { + background: $ui-base-color; + + &__column { + padding: 10px 15px; + } + + .radio-button { + display: block; + } +} + +.radio-button { + font-size: 14px; + position: relative; + display: inline-block; + padding: 6px 0; + line-height: 18px; + cursor: default; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + + input[type=radio], + input[type=checkbox] { + display: none; + } + + &__input { + display: inline-block; + position: relative; + border: 1px solid $ui-primary-color; + box-sizing: border-box; + width: 18px; + height: 18px; + flex: 0 0 auto; + margin-right: 10px; + top: -1px; + border-radius: 50%; + vertical-align: middle; + + &.checked { + border-color: lighten($ui-highlight-color, 8%); + background: lighten($ui-highlight-color, 8%); + } + } } ::-webkit-scrollbar-thumb { @@ -5628,6 +6133,7 @@ noscript { } .embed-modal { + width: auto; max-width: 80vw; max-height: 80vh; @@ -5658,6 +6164,7 @@ noscript { font-size: 14px; margin: 0; margin-bottom: 15px; + border-radius: 4px; &::-moz-focus-inner { border: 0; @@ -5683,6 +6190,7 @@ noscript { max-width: 100%; overflow: hidden; border: 0; + border-radius: 4px; } } } @@ -5866,7 +6374,8 @@ noscript { background: $base-shadow-color; img, - video { + video, + canvas { display: block; max-height: 80vh; width: 100%; @@ -6013,7 +6522,7 @@ noscript { &__tabs { display: flex; align-items: flex-start; - padding: 7px 5px; + padding: 7px 10px; margin-top: -55px; &__buttons { @@ -6035,7 +6544,7 @@ noscript { } &__name { - padding: 5px; + padding: 5px 10px; .account-role { vertical-align: top; @@ -6079,6 +6588,11 @@ noscript { padding: 20px 15px; padding-bottom: 5px; color: $primary-text-color; + + .columns-area--mobile & { + padding-left: 20px; + padding-right: 20px; + } } .account__header__fields { @@ -6105,13 +6619,13 @@ noscript { &__links { font-size: 14px; color: $darker-text-color; + padding: 10px 0; a { display: inline-block; color: $darker-text-color; text-decoration: none; - padding: 10px; - padding-top: 20px; + padding: 5px 10px; font-weight: 500; strong { @@ -6121,6 +6635,54 @@ noscript { } } } + + &__account-note { + padding: 15px; + padding-bottom: 10px; + color: $primary-text-color; + font-size: 14px; + font-weight: 400; + border-bottom: 1px solid lighten($ui-base-color, 12%); + + .columns-area--mobile & { + padding-left: 20px; + padding-right: 20px; + } + + label { + display: block; + font-size: 12px; + font-weight: 500; + color: $darker-text-color; + text-transform: uppercase; + margin-bottom: 5px; + } + + textarea { + display: block; + box-sizing: border-box; + width: calc(100% + 20px); + color: $secondary-text-color; + background: transparent; + padding: 10px; + margin: 0 -10px; + font-family: inherit; + font-size: 14px; + resize: none; + border: 0; + outline: 0; + border-radius: 4px; + + &::placeholder { + color: $dark-text-color; + opacity: 1; + } + + &:focus { + background: $ui-base-color; + } + } + } } .trends { @@ -6202,58 +6764,286 @@ noscript { path:last-child { stroke: lighten($highlight-text-color, 6%) !important; + fill: none !important; } } } } -.layout-toggle { +.conversation { display: flex; - padding: 5px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 1em; + padding-bottom: 0; - button { - box-sizing: border-box; - flex: 0 0 50%; - background: transparent; - padding: 5px; - border: 0; + &:focus { + background: lighten($ui-base-color, 2%); + outline: 0; + } + + &__avatar { + flex: 0 0 auto; + padding: 10px; + padding-top: 12px; position: relative; + cursor: pointer; + } + + &__unread { + display: inline-block; + background: $highlight-text-color; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + margin: -.1ex .15em .1ex; + } + + &__content { + flex: 1 1 auto; + padding: 10px 5px; + padding-right: 15px; + overflow: hidden; + + &__info { + overflow: hidden; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + + &__relative-time { + font-size: 15px; + color: $darker-text-color; + padding-left: 15px; + } + + &__names { + color: $darker-text-color; + font-size: 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; + flex-basis: 90px; + flex-grow: 1; + + a { + color: $primary-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + a { + word-break: break-word; + } + } + + &--unread { + background: lighten($ui-base-color, 2%); + + &:focus { + background: lighten($ui-base-color, 4%); + } + + .conversation__content__info { + font-weight: 700; + } + + .conversation__content__relative-time { + color: $primary-text-color; + } + } +} + +.announcements { + background: lighten($ui-base-color, 8%); + font-size: 13px; + display: flex; + align-items: flex-end; + + &__mastodon { + width: 124px; + flex: 0 0 auto; + + @media screen and (max-width: 124px + 300px) { + display: none; + } + } + + &__container { + width: calc(100% - 124px); + flex: 0 0 auto; + position: relative; + + @media screen and (max-width: 124px + 300px) { + width: 100%; + } + } + + &__item { + box-sizing: border-box; + width: 100%; + padding: 15px; + position: relative; + font-size: 15px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + max-height: 50vh; + overflow: hidden; + display: flex; + flex-direction: column; + + &__range { + display: block; + font-weight: 500; + margin-bottom: 10px; + padding-right: 18px; + } + + &__unread { + position: absolute; + top: 19px; + right: 19px; + display: block; + background: $highlight-text-color; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + } + } + + &__pagination { + padding: 15px; + color: $darker-text-color; + position: absolute; + bottom: 3px; + right: 0; + } +} + +.layout-multiple-columns .announcements__mastodon { + display: none; +} + +.layout-multiple-columns .announcements__container { + width: 100%; +} + +.reactions-bar { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-top: 15px; + margin-left: -2px; + width: calc(100% - (90px - 33px)); + + &__item { + flex-shrink: 0; + background: lighten($ui-base-color, 12%); + border: 0; + border-radius: 3px; + margin: 2px; + cursor: pointer; + user-select: none; + padding: 0 6px; + display: flex; + align-items: center; + transition: all 100ms ease-in; + transition-property: background-color, color; + + &__emoji { + display: block; + margin: 3px 0; + width: 16px; + height: 16px; + + img { + display: block; + margin: 0; + width: 100%; + height: 100%; + min-width: auto; + min-height: auto; + vertical-align: bottom; + object-fit: contain; + } + } + + &__count { + display: block; + min-width: 9px; + font-size: 13px; + font-weight: 500; + text-align: center; + margin-left: 6px; + color: $darker-text-color; + } &:hover, &:focus, &:active { - svg path:first-child { - fill: lighten($ui-base-color, 16%); + background: lighten($ui-base-color, 16%); + transition: all 200ms ease-out; + transition-property: background-color, color; + + &__count { + color: lighten($darker-text-color, 4%); + } + } + + &.active { + transition: all 100ms ease-in; + transition-property: background-color, color; + background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); + + .reactions-bar__item__count { + color: lighten($highlight-text-color, 8%); } } } - svg { - width: 100%; - height: auto; + .emoji-picker-dropdown { + margin: 2px; + } - path:first-child { - fill: lighten($ui-base-color, 12%); - } + &:hover .emoji-button { + opacity: 0.85; + } - path:last-child { - fill: darken($ui-base-color, 14%); + .emoji-button { + color: $darker-text-color; + margin: 0; + font-size: 16px; + width: auto; + flex-shrink: 0; + padding: 0 6px; + height: 22px; + display: flex; + align-items: center; + opacity: 0.5; + transition: all 100ms ease-in; + transition-property: background-color, color; + + &:hover, + &:active, + &:focus { + opacity: 1; + color: lighten($darker-text-color, 4%); + transition: all 200ms ease-out; + transition-property: background-color, color; } } - &__active { - color: $ui-highlight-color; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: lighten($ui-base-color, 12%); - border-radius: 50%; - padding: 0.35rem; + &--empty { + .emoji-button { + padding: 0; + } } } -.status__visibility-icon { - float: right; - clear: both; - margin: 1ch; -} diff --git a/app/javascript/styles/bliss/containers.scss b/app/javascript/styles/bliss/containers.scss index 2b6794ee2..10a748dfa 100644 --- a/app/javascript/styles/bliss/containers.scss +++ b/app/javascript/styles/bliss/containers.scss @@ -21,7 +21,7 @@ justify-content: center; align-items: center; - svg { + > svg { fill: $primary-text-color; height: 42px; margin-right: 10px; @@ -141,6 +141,63 @@ grid-row: 3; } + @media screen and (max-width: $no-gap-breakpoint) { + grid-gap: 0; + grid-template-columns: minmax(0, 100%); + + .column-0 { + grid-column: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 3; + } + + .column-2 { + grid-column: 1; + grid-row: 2; + } + + .column-3 { + grid-column: 1; + grid-row: 4; + } + } +} + +.grid-4 { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-auto-columns: 25%; + grid-auto-rows: max-content; + + .column-0 { + grid-column: 1 / 5; + grid-row: 1; + } + + .column-1 { + grid-column: 1 / 4; + grid-row: 2; + } + + .column-2 { + grid-column: 4; + grid-row: 2; + } + + .column-3 { + grid-column: 2 / 5; + grid-row: 3; + } + + .column-4 { + grid-column: 1; + grid-row: 3; + } + .landing-page__call-to-action { min-height: 100%; } @@ -189,6 +246,11 @@ } .column-3 { + grid-column: 1; + grid-row: 5; + } + + .column-4 { grid-column: 1; grid-row: 4; } @@ -350,6 +412,20 @@ } } + .directory__card { + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + } + + .page-header { + @media screen and (max-width: $no-gap-breakpoint) { + border-bottom: 0; + } + } + .public-account-header { overflow: hidden; margin-bottom: 10px; @@ -570,7 +646,7 @@ } .counter { - width: 33.3%; + min-width: 33.3%; box-sizing: border-box; flex: 0 0 auto; color: $darker-text-color; @@ -753,14 +829,22 @@ } } - .static-icon-button { - color: $action-button-color; - font-size: 18px; + .directory__list { + display: grid; + grid-gap: 10px; + grid-template-columns: minmax(0, 50%) minmax(0, 50%); - & > span { - font-size: 14px; - font-weight: 500; + @media screen and (max-width: $no-gap-breakpoint) { + display: block; } + + .icon-button { + font-size: 18px; + } + } + + .directory__card { + margin-bottom: 0; } .card-grid { diff --git a/app/javascript/styles/bliss/dashboard.scss b/app/javascript/styles/bliss/dashboard.scss index e4564f062..c0944d417 100644 --- a/app/javascript/styles/bliss/dashboard.scss +++ b/app/javascript/styles/bliss/dashboard.scss @@ -15,6 +15,8 @@ padding: 20px; background: lighten($ui-base-color, 4%); border-radius: 4px; + box-sizing: border-box; + height: 100%; } & > a { diff --git a/app/javascript/styles/bliss/footer.scss b/app/javascript/styles/bliss/footer.scss index e4ddfead5..00d290883 100644 --- a/app/javascript/styles/bliss/footer.scss +++ b/app/javascript/styles/bliss/footer.scss @@ -128,64 +128,10 @@ &:hover, &:focus, &:active { - svg path { + svg { fill: lighten($ui-base-color, 38%); } } } } } - -*|*:link, *|*:visited { - color: $ui-primary-color !important; - - &:hover { - color: $ui-highlight-color !important; - background: $dark-text-color !important; - } -} - -.getting-started__footer, -.links-started__footer { - display: block; - //position: fixed; - //bottom: 0; - //left: 1em; - //width: 268px; - z-index: 10; - font-size: 0.85em; - - .fa { - margin-right: 1ch; - } - - ul { - list-style-type: none; - } - - li { - list-style-type: none; - padding: 0.15rem 0; - display: inline-block; - width: auto; - - &.tag-element, a { - color: $ui-primary-color !important; - padding: 0.25em; - - &:hover { - color: $ui-highlight-color !important; - background: $dark-text-color !important; - } - } - } - - i { - margin: 0.5ch; - } - - a { - margin-left: 2ch; - } - -} diff --git a/app/javascript/styles/bliss/forms.scss b/app/javascript/styles/bliss/forms.scss index 9dad89515..362c44029 100644 --- a/app/javascript/styles/bliss/forms.scss +++ b/app/javascript/styles/bliss/forms.scss @@ -1,40 +1,4 @@ $no-columns-breakpoint: 600px; -table { - thead { - - th { - font-weight: 800; - background: $ui-highlight-color; - } - } - - td, th { - padding: 1rem; - } - - a { - @extend .text-btn - } -} - -.table-responsive { - width: 100%; -} - -.table-striped { - margin: 1rem 0; - - tr { - - &:odd { - background: $ui-base-lighter-color; - } - } -} - -.group-form { - -} code { font-family: $font-monospace, monospace; @@ -120,7 +84,7 @@ code { position: absolute; margin: 0 4px; margin-top: -2px; - background: $ui-highlight-color; + color: $white; } } } @@ -149,6 +113,15 @@ code { padding: 0.2em 0.4em; background: darken($ui-base-color, 12%); } + + li { + list-style: disc; + margin-left: 18px; + } + } + + ul.hint { + margin-bottom: 15px; } span.hint { @@ -170,6 +143,10 @@ code { } } + .otp-hint { + margin-bottom: 25px; + } + .card { margin-bottom: 15px; } @@ -250,6 +227,12 @@ code { } } + .input.datetime .label_input select { + display: inline-block; + width: auto; + flex: 0; + } + .required abbr { text-decoration: none; color: lighten($error-value-color, 12%); @@ -282,6 +265,10 @@ code { &-6 { max-width: 50%; } + + .actions { + margin-top: 27px; + } } .fields-group:last-child, @@ -303,6 +290,14 @@ code { margin-bottom: 25px; } } + + .fields-group.invited-by { + margin-bottom: 30px; + + .hint { + text-align: center; + } + } } .input.radio_buttons .radio label { @@ -362,6 +357,10 @@ code { border-radius: 4px; padding: 10px; + &::placeholder { + color: lighten($darker-text-color, 4%); + } + &:invalid { box-shadow: none; } @@ -533,6 +532,10 @@ code { &__overlay-area { position: relative; + &__blurred form { + filter: blur(2px); + } + &__overlay { position: absolute; top: 0; @@ -543,8 +546,10 @@ code { justify-content: center; align-items: center; background: rgba($ui-base-color, 0.65); - backdrop-filter: blur(2px); border-radius: 4px; + margin-left: -4px; + margin-top: -4px; + padding: 4px; &__content { text-align: center; @@ -583,7 +588,7 @@ code { &.alert { border: 1px solid rgba($error-value-color, 0.5); - background: rgba($error-value-color, 0.25); + background: rgba($error-value-color, 0.1); color: $error-value-color; } @@ -643,6 +648,15 @@ code { @media screen and (max-width: 740px) and (min-width: 441px) { margin-top: 40px; } + + &.translation-prompt { + text-align: unset; + color: unset; + + a { + text-decoration: underline; + } + } } .form-footer { @@ -964,8 +978,3 @@ code { flex-direction: row; } } - -.compose-form__publish-button-wrapper { - width: 100%; - display: block; -} diff --git a/app/javascript/styles/bliss/introduction.scss b/app/javascript/styles/bliss/introduction.scss index 222d8f60e..b44ae7306 100644 --- a/app/javascript/styles/bliss/introduction.scss +++ b/app/javascript/styles/bliss/introduction.scss @@ -3,9 +3,10 @@ flex-direction: column; justify-content: center; align-items: center; + height: 100vh; + background: $ui-base-color; @media screen and (max-width: 920px) { - background: darken($ui-base-color, 8%); display: block !important; } diff --git a/app/javascript/styles/bliss/messaging.scss b/app/javascript/styles/bliss/messaging.scss index 07cb274c7..e69de29bb 100644 --- a/app/javascript/styles/bliss/messaging.scss +++ b/app/javascript/styles/bliss/messaging.scss @@ -1,135 +0,0 @@ -$messagingBoxWidth: 15em; -$messagingBoxHeight: 20em; - -.fixed-box { - border: solid 1px white; - padding: 1em; - position: fixed; - bottom: 0; -} - -.airmail-border { - border: 0.25em solid transparent; - border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em, - #58a 0, #58a 3em, white 0, white 4em); - -} - -.status-direct, -.item-list .conversation { - @extend .airmail-border; - padding: 0.5em 1em; -} - -.messaging-box { - @extend .fixed-box; - - right: 1em; - width: $messagingBoxWidth; - background: $ui-base-color; - - .messager-textarea { - width: 100%; - } -} - -.conversation { - - - .conversation__content { - padding-right: 0; - } - - .conversation_reply, - .icon-button { - &:hover { - color: $ui-highlight-color; - background: mix($ui-base-color, $ui-secondary-color); - } - } - - .conversation_reply, - .icon-button, - .status__action-bar-dropdown { - display: inline-block; - float: right; - width: 18em; - height: 3.2em; - text-align: center; - } -} - -.conversations_list { - right: 1em; - position: absolute; - bottom: 0; - width: 100%; - padding: 0.5em; - background: gray; - -} - -.conversation-item { - @extend .fixed-box; - width: $messagingBoxWidth; - right: $messagingBoxWidth + 5em; - background: $ui-secondary-color; - - &.has-new-message { - background: $ui-highlight-color; - color: $classic-primary-color; - } -} - -.conversation_created-at { - margin-right: 1em; -} - -.conversation_stream { - padding-top: 1em; - height: $messagingBoxHeight; - overflow: auto; - background: $ui-secondary-color; - - .message { - -webkit-border-radius: 0.5rem; - -moz-border-radius: 0.5rem; - border-radius: 0.5rem; - margin-bottom: 0.5em; - padding: 0.5em 1em; - width: 80%; - } - - .mine { - text-align: right; - background: $classic-primary-color; - float: right; - - .arrow-down { - border-top-color: $classic-primary-color; - left: 1em; - } - } - - .theirs { - text-align: left; - background: $ui-highlight-color; - float: left; - - .arrow-down { - border-top-color: $ui-highlight-color; - right: 1em; - } - } - - .arrow-down { - width: 0; - height: 0; - border-left: 10px solid transparent; - border-right: 20px solid transparent; - border-top: 20px solid $classic-primary-color; - position: relative; - bottom: -1em; - - } -} diff --git a/app/javascript/styles/bliss/polls.scss b/app/javascript/styles/bliss/polls.scss index 12f57b7a9..ad7088982 100644 --- a/app/javascript/styles/bliss/polls.scss +++ b/app/javascript/styles/bliss/polls.scss @@ -5,32 +5,64 @@ li { margin-bottom: 10px; position: relative; - height: 18px + 12px; } &__chart { - position: absolute; - top: 0; - left: 0; - height: 100%; - display: inline-block; border-radius: 4px; - background: darken($ui-primary-color, 14%); + display: block; + background: darken($ui-primary-color, 5%); + height: 5px; + min-width: 1%; &.leading { background: $ui-highlight-color; } } - &__text { + progress { + border: 0; + display: block; + width: 100%; + height: 5px; + appearance: none; + background: transparent; + + &::-webkit-progress-bar { + background: transparent; + } + + // Those rules need to be entirely separate or they won't work, hence the + // duplication + &::-moz-progress-bar { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + + &::-ms-fill { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + + &::-webkit-progress-value { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + } + + &__option { position: relative; - display: inline-block; + display: flex; padding: 6px 0; line-height: 18px; cursor: default; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + + &__text { + display: inline-block; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: calc(100% - 45px - 25px); + } input[type=radio], input[type=checkbox] { @@ -82,6 +114,9 @@ top: -1px; border-radius: 50%; vertical-align: middle; + margin-top: auto; + margin-bottom: auto; + flex: 0 0 18px; &.checkbox { border-radius: 4px; @@ -91,14 +126,39 @@ border-color: $valid-value-color; background: $valid-value-color; } + + &:active, + &:focus, + &:hover { + border-color: lighten($valid-value-color, 15%); + border-width: 4px; + } + + &::-moz-focus-inner { + outline: 0 !important; + border: 0; + } + + &:focus, + &:active { + outline: 0 !important; + } } &__number { display: inline-block; - width: 36px; + width: 45px; font-weight: 700; - padding: 0 10px; - text-align: right; + flex: 0 0 45px; + } + + &__voted { + padding: 0 5px; + display: inline-block; + + &__mark { + font-size: 18px; + } } &__footer { @@ -151,6 +211,10 @@ button, select { flex: 1 1 50%; + + &:focus { + border-color: $highlight-text-color; + } } } @@ -169,7 +233,7 @@ display: flex; align-items: center; - .poll__text { + .poll__option { flex: 0 0 auto; width: calc(100% - (23px + 6px)); margin-right: 6px; diff --git a/app/javascript/styles/bliss/rtl.scss b/app/javascript/styles/bliss/rtl.scss index 58bc53b14..fbf26e30b 100644 --- a/app/javascript/styles/bliss/rtl.scss +++ b/app/javascript/styles/bliss/rtl.scss @@ -7,6 +7,34 @@ body.rtl { padding-right: 15px; } + .radio-button__input { + margin-right: 0; + margin-left: 10px; + } + + .directory__card__bar .display-name { + margin-left: 0; + margin-right: 15px; + } + + .display-name { + text-align: right; + } + + .notification__message { + margin-left: 0; + margin-right: 68px; + } + + .drawer__inner__mastodon > img { + transform: scaleX(-1); + } + + .notification__favourite-icon-wrapper { + left: auto; + right: -26px; + } + .landing-page__logo { margin-right: 0; margin-left: 20px; @@ -130,12 +158,12 @@ body.rtl { } .status__relative-time, + .status__visibility-icon, .activity-stream .status.light .status__header .status__meta { float: left; } .status__action-bar { - &__counter { margin-right: 0; margin-left: 11px; @@ -328,6 +356,12 @@ body.rtl { } } + .columns-area--mobile .column, + .columns-area--mobile .drawer { + padding-left: 0; + padding-right: 0; + } + .public-layout { .header { .nav-button { diff --git a/app/javascript/styles/bliss/statuses.scss b/app/javascript/styles/bliss/statuses.scss index 93c10e2fa..7ae1c5a24 100644 --- a/app/javascript/styles/bliss/statuses.scss +++ b/app/javascript/styles/bliss/statuses.scss @@ -19,58 +19,55 @@ margin: 0; box-shadow: none; - } - - .detailed-status, - .status { - border-radius: 0 !important; - - img { - max-width: 100%; - } - } -} - -div[data-component] { - width: 100%; -} -.status__content__text{ - min-height: 3em; -} -.entry { - background: $ui-base-color; - - .account__avatar { - max-width: 5em; - } - - .detailed-status, - .status, - .load-more { - animation: none; - } - - &:last-child { .detailed-status, - .status, - .load-more { - border-bottom: 0; - border-radius: 0 0 4px 4px; + .status { + border-radius: 0 !important; } } - &:first-child { + div[data-component] { + width: 100%; + } + + .entry { + background: $ui-base-color; + .detailed-status, .status, .load-more { - border-radius: 4px 4px 0 0; + animation: none; } &:last-child { .detailed-status, .status, .load-more { - border-radius: 4px; + border-bottom: 0; + border-radius: 0 0 4px 4px; + } + } + + &:first-child { + .detailed-status, + .status, + .load-more { + border-radius: 4px 4px 0 0; + } + + &:last-child { + .detailed-status, + .status, + .load-more { + border-radius: 4px; + } + } + } + + @media screen and (max-width: 740px) { + .detailed-status, + .status, + .load-more { + border-radius: 0 !important; } } } @@ -78,17 +75,8 @@ div[data-component] { &--highlighted .entry { background: lighten($ui-base-color, 8%); } - - @media screen and (max-width: 740px) { - .detailed-status, - .status, - .load-more { - border-radius: 0 !important; - } - } } - .button.logo-button { flex: 0 auto; font-size: 14px; @@ -111,8 +99,9 @@ div[data-component] { &:active, &:focus, &:hover { - background: lighten($ui-highlight-color, 4%); + background: lighten($ui-highlight-color, 10%); } + &:disabled, &.disabled { &:active, @@ -139,14 +128,24 @@ div[data-component] { .embed, .public-layout { - .detailed-status { - padding: 15px; + .status__content[data-spoiler=folded] { + .e-content { + display: none; + } - .account__avatar { - max-width: 5em; + p:first-child { + margin-bottom: 0; } } + .detailed-status { + padding: 15px; + + .detailed-status__display-avatar .account__avatar { + width: 48px; + height: 48px; + } + } .status { padding: 15px 15px 15px (48px + 15px * 2); @@ -155,6 +154,11 @@ div[data-component] { &__avatar { left: 15px; top: 17px; + + .account__avatar { + width: 48px; + height: 48px; + } } &__content { @@ -175,5 +179,12 @@ div[data-component] { .video-player { margin-top: 10px; } + + &__action-bar-button { + font-size: 18px; + width: 23.1429px; + height: 23.1429px; + line-height: 23.15px; + } } } diff --git a/app/javascript/styles/bliss/tables.scss b/app/javascript/styles/bliss/tables.scss index 11ac6dfeb..62f5554ff 100644 --- a/app/javascript/styles/bliss/tables.scss +++ b/app/javascript/styles/bliss/tables.scss @@ -149,10 +149,6 @@ a.table-action-link { margin-top: 0; } } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } } &__actions, @@ -174,9 +170,17 @@ a.table-action-link { text-align: right; padding-right: 16px - 5px; } + } - @media screen and (max-width: $no-gap-breakpoint) { - display: none; + &__form { + padding: 16px; + border: 1px solid darken($ui-base-color, 8%); + border-top: 0; + background: $ui-base-color; + + .fields-row { + padding-top: 0; + margin-bottom: 0; } } @@ -186,7 +190,7 @@ a.table-action-link { background: darken($ui-base-color, 4%); @media screen and (max-width: $no-gap-breakpoint) { - &:first-child { + .optional &:first-child { border-top: 1px solid darken($ui-base-color, 8%); } } @@ -210,6 +214,52 @@ a.table-action-link { &--unpadded { padding: 0; } + + &--with-image { + display: flex; + align-items: center; + } + + &__image { + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + margin-right: 10px; + + .emojione { + width: 32px; + height: 32px; + } + } + + &__text { + flex: 1 1 auto; + } + + &__extra { + flex: 0 0 auto; + text-align: right; + color: $darker-text-color; + font-weight: 500; + } + } + + .directory__tag { + margin: 0; + width: 100%; + + a { + background: transparent; + border-radius: 0; + } + } + } + + &.optional .batch-table__toolbar, + &.optional .batch-table__row__select { + @media screen and (max-width: $no-gap-breakpoint) { + display: none; } } diff --git a/app/javascript/styles/bliss/widgets.scss b/app/javascript/styles/bliss/widgets.scss index bdc0649c9..5b97d1ec4 100644 --- a/app/javascript/styles/bliss/widgets.scss +++ b/app/javascript/styles/bliss/widgets.scss @@ -93,12 +93,16 @@ display: flex; align-items: center; } + } - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } + .trends__item { + padding: 10px; + } +} + +.trends-widget { + h4 { + color: $darker-text-color; } } @@ -109,41 +113,52 @@ box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); } -.contact-widget, -.landing-page__information.contact-widget { - box-sizing: border-box; - padding: 20px; - min-height: 100%; +.placeholder-widget { + padding: 16px; border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border: 2px dashed $dark-text-color; + text-align: center; + color: $darker-text-color; + margin-bottom: 10px; } .contact-widget { + min-height: 100%; font-size: 15px; color: $darker-text-color; line-height: 20px; word-wrap: break-word; font-weight: 400; + padding: 0; - strong { - font-weight: 500; + h4 { + padding: 10px; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + color: $darker-text-color; } - p { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } + .account { + border-bottom: 0; + padding: 10px 0; + padding-top: 5px; } - &__mail { - margin-top: 10px; + & > a { + display: inline-block; + padding: 10px; + padding-top: 0; + color: $darker-text-color; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - a { - color: $primary-text-color; - text-decoration: none; + &:hover, + &:focus, + &:active { + text-decoration: underline; } } } @@ -526,6 +541,12 @@ $fluid-breakpoint: $maximum-width + 20px; a { font-size: 14px; line-height: 20px; + } +} + +.notice-widget, +.placeholder-widget { + a { text-decoration: none; font-weight: 500; color: $ui-highlight-color; @@ -538,31 +559,37 @@ $fluid-breakpoint: $maximum-width + 20px; } } -// christmas snow -.round-button { - cursor: pointer; - margin: 0.5em; - width: 2em; - height: 2em; - display: inline-block; -} +.table-of-contents { + background: darken($ui-base-color, 4%); + min-height: 100%; + font-size: 14px; + border-radius: 4px; -.snow-button { - -webkit-border-radius: 100%; - -moz-border-radius: 100%; - border-radius: 100%; - background: $ui-secondary-color; - @extend .round-button; + li a { + display: block; + font-weight: 500; + padding: 15px; + overflow: hidden; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + color: $primary-text-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); - .icon { - margin: 0.5em; + &:hover, + &:focus, + &:active { + text-decoration: underline; + } } - &:hover { - background: $ui-primary-color; + li:last-child a { + border-bottom: 0; } - &.active { - background: $ui-highlight-color; + li ul { + padding-left: 20px; + border-bottom: 1px solid lighten($ui-base-color, 4%); } }