diff options
author | Ondřej Hruška <ondra@ondrovo.com> | 2017-07-25 21:36:22 +0200 |
---|---|---|
committer | Ondřej Hruška <ondra@ondrovo.com> | 2017-07-25 21:36:22 +0200 |
commit | 7e5691804d4f0019a89b8b8a3dad532bc9d940ea (patch) | |
tree | 84c2f4e4ac07bea3915639a50df84eb62b6c5768 /app/javascript/styles/components.scss | |
parent | 852acbd7385a640d9e00e462d58a847851744034 (diff) | |
parent | 7232cdf7e8249f79078005931b1165e54e413fa9 (diff) |
Merge git://github.com/tootsuite/mastodon into tootsuite-master
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 165 |
1 files changed, 133 insertions, 32 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 43df263d5..9e5d34f53 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -107,7 +107,7 @@ .icon-button { display: inline-block; padding: 0; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; border: none; background: transparent; cursor: pointer; @@ -145,7 +145,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } &.active { @@ -185,7 +185,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; transition: color 200ms ease-out; } @@ -807,7 +807,7 @@ margin-left: auto; padding-left: 18px; width: 120px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; font-size: 14px; text-align: right; white-space: nowrap; @@ -816,7 +816,7 @@ } .status__display-name { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } .status__info .status__display-name { @@ -865,13 +865,13 @@ .status__prepend { margin: -10px 0 10px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; padding: 8px 0 2px; font-size: 14px; position: relative; .status__display-name strong { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } } @@ -963,7 +963,7 @@ .detailed-status__meta { margin-top: 15px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; font-size: 14px; line-height: 18px; } @@ -1096,6 +1096,28 @@ } } +.account__disclaimer { + padding: 10px; + border-top: 1px solid lighten($ui-base-color, 8%); + color: $ui-base-lighter-color; + + strong { + font-weight: 500; + } + + a { + font-weight: 500; + color: inherit; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } +} + .account__header__content { color: $ui-primary-color; font-size: 14px; @@ -1238,7 +1260,7 @@ } abbr { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } } @@ -1332,11 +1354,11 @@ .muted { .status__content p, .status__content a { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } .status__display-name strong { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } .status__avatar, .emojione { @@ -1344,7 +1366,7 @@ } a.status__content__spoiler-link { - background: lighten($ui-base-color, 26%); + background: $ui-base-lighter-color; color: lighten($ui-base-color, 4%); &:hover { @@ -1560,7 +1582,7 @@ .static-content { padding: 10px; padding-top: 20px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; h1 { font-size: 16px; @@ -2041,7 +2063,7 @@ .column-subheading { background: $ui-base-color; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -2161,7 +2183,7 @@ .getting-started__wrapper { position: relative; - flex: 0 0 auto; + overflow-y: auto; } .getting-started__footer { @@ -2180,7 +2202,7 @@ } a { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; } } @@ -2244,7 +2266,7 @@ button.icon-button.active i.fa-retweet { font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; margin-top: 14px; text-decoration: none; overflow: hidden; @@ -2339,7 +2361,7 @@ button.icon-button.active i.fa-retweet { .load-more { display: block; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; background-color: transparent; border: 0; font-size: inherit; @@ -2529,11 +2551,72 @@ button.icon-button.active i.fa-retweet { } .loading-indicator { - color: $ui-secondary-color; - font-size: 16px; - font-weight: 500; - padding-top: 120px; - text-align: center; + color: lighten($ui-base-color, 26%); + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + overflow: visible; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + span { + display: block; + float: left; + margin-left: 50%; + transform: translateX(-50%); + margin: 82px 0 0 50%; + white-space: nowrap; + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + } +} + +.loading-indicator__figure { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 0; + height: 0; + box-sizing: border-box; + border: 0 solid lighten($ui-base-color, 26%); + border-radius: 50%; + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); +} + +@keyframes loader-figure { + 0% { + width: 0; + height: 0; + background-color: lighten($ui-base-color, 26%); + } + + 29% { + background-color: lighten($ui-base-color, 26%); + } + + 30% { + width: 42px; + height: 42px; + background-color: transparent; + border-width: 21px; + opacity: 1; + } + + 100% { + width: 42px; + height: 42px; + border-width: 0; + opacity: 0; + background-color: transparent; + } +} + +@keyframes loader-label { + 0% { opacity: 0.25; } + 30% { opacity: 1; } + 100% { opacity: 0.25; } } .video-error-cover { @@ -2987,13 +3070,13 @@ button.icon-button.active i.fa-retweet { color: $ui-secondary-color; font-size: 18px; font-weight: 500; - border: 2px dashed lighten($ui-base-color, 26%); + border: 2px dashed $ui-base-lighter-color; border-radius: 4px; } .upload-progress { padding: 10px; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; overflow: hidden; display: flex; @@ -3018,7 +3101,7 @@ button.icon-button.active i.fa-retweet { width: 100%; height: 6px; border-radius: 6px; - background: lighten($ui-base-color, 26%); + background: $ui-base-lighter-color; position: relative; margin-top: 5px; } @@ -3303,7 +3386,7 @@ button.icon-button.active i.fa-retweet { } .search-results__header { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; @@ -3399,6 +3482,10 @@ button.icon-button.active i.fa-retweet { } } +.media-modal__content { + background: $base-overlay-background; +} + .media-modal__close { position: absolute; right: 4px; @@ -3897,7 +3984,7 @@ button.icon-button.active i.fa-retweet { .attachment-list__icon { flex: 0 0 auto; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; padding: 8px 18px; cursor: default; border-right: 1px solid lighten($ui-base-color, 8%); @@ -3927,7 +4014,7 @@ button.icon-button.active i.fa-retweet { a { text-decoration: none; - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; font-weight: 500; &:hover { @@ -4124,7 +4211,7 @@ button.icon-button.active i.fa-retweet { } .account-section-headline { - color: lighten($ui-base-color, 26%); + color: $ui-base-lighter-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid lighten($ui-base-color, 4%); padding: 15px 10px; @@ -4160,12 +4247,26 @@ button.icon-button.active i.fa-retweet { noscript { text-align: center; + img { + width: 200px; + opacity: 0.5; + animation: flicker 4s infinite; + } + div { - font-size: 20px; - margin: 20px 0; + font-size: 14px; + margin: 30px auto; + color: $ui-secondary-color; + max-width: 400px; } } +@keyframes flicker { + 0% { opacity: 1; } + 30% { opacity: 0.75; } + 100% { opacity: 1; } +} + @media screen and (max-width: 1024px) and (max-height: 400px) { $duration: 400ms; $delay: 100ms; |