diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-11 15:43:09 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-02-11 15:43:09 +0100 |
commit | e6408b2e7ade3dac8dcf14bcda5b5c6a159fa74c (patch) | |
tree | 7ba827f801bea1556231d275a6a8a35471f8a954 /app/assets/stylesheets | |
parent | 0afed995ce60dec11bc7718f83ca5afde86f6228 (diff) | |
parent | 446aad4ce2cb7afd0ba8e4b508e4dcba57eac790 (diff) |
Merge branch 'feature-privacy-federation' into development
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/application.scss | 29 | ||||
-rw-r--r-- | app/assets/stylesheets/components.scss | 135 | ||||
-rw-r--r-- | app/assets/stylesheets/stream_entries.scss | 8 |
3 files changed, 154 insertions, 18 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index c4c876e30..c590f7038 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -256,6 +256,35 @@ button:focus { } } +.compact-header { + h1 { + font-size: 24px; + line-height: 28px; + color: $color3; + overflow: hidden; + font-weight: 500; + margin-bottom: 20px; + + a { + color: inherit; + text-decoration: none; + } + + small { + font-weight: 400; + color: $color2; + } + + img { + display: inline-block; + margin-bottom: -5px; + margin-right: 15px; + width: 36px; + height: 36px; + } + } +} + @import 'forms'; @import 'accounts'; @import 'stream_entries'; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 6bb683f17..f0948b0f3 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -34,6 +34,7 @@ .column-icon { color: $color3; + background: lighten($color1, 4%); &:hover { color: lighten($color3, 7%); @@ -187,7 +188,7 @@ a.status__content__spoiler-link { display: inline-block; border-radius: 2px; - color: lighten($color1, 6%); + color: lighten($color1, 8%); font-weight: 500; font-size: 11px; padding: 0px 6px; @@ -200,7 +201,7 @@ a.status__content__spoiler-link { padding-left: 68px; position: relative; min-height: 48px; - border-bottom: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 8%); cursor: default; .status__relative-time { @@ -226,6 +227,8 @@ a.status__content__spoiler-link { } .detailed-status { + background: lighten($color1, 4%); + .status__content { font-size: 19px; line-height: 24px; @@ -237,12 +240,19 @@ a.status__content__spoiler-link { } } +.detailed-status__meta { + margin-top: 15px; + color: lighten($color1, 26%); + font-size: 14px; + line-height: 18px; +} + .detailed-status__action-bar { background: lighten($color1, 4%); display: flex; flex-direction: row; - border-top: 1px solid lighten($color1, 6%); - border-bottom: 1px solid lighten($color1, 6%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); padding: 10px 0; } @@ -257,7 +267,7 @@ a.status__content__spoiler-link { .account { padding: 10px; - border-bottom: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 8%); .account__display-name { flex: 1 1 auto; @@ -298,6 +308,7 @@ a.status__content__spoiler-link { word-wrap: break-word; font-weight: 400; overflow: hidden; + color: $color3; p { margin-bottom: 20px; @@ -325,8 +336,8 @@ a.status__content__spoiler-link { } .account__action-bar { - border-top: 1px solid lighten($color1, 6%); - border-bottom: 1px solid lighten($color1, 6%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); line-height: 36px; overflow: hidden; flex: 0 0 auto; @@ -337,7 +348,7 @@ a.status__content__spoiler-link { text-decoration: none; overflow: hidden; width: 80px; - border-left: 1px solid lighten($color1, 6%); + border-left: 1px solid lighten($color1, 8%); padding: 10px 5px; & > span { @@ -412,8 +423,9 @@ a.status__content__spoiler-link { opacity: 0.5; } - .status__content__spoiler-link { + a.status__content__spoiler-link { background: lighten($color1, 26%); + color: lighten($color1, 4%); &:hover { background: lighten($color1, 29%); @@ -422,6 +434,20 @@ a.status__content__spoiler-link { } } +.notification__message { + margin-left: 68px; + padding: 8px 0; + padding-bottom: 0; + cursor: default; + color: $color3; + font-size: 15px; + position: relative; + + .fa { + color: $color4; + } +} + .notification__display-name { color: inherit; text-decoration: none; @@ -646,7 +672,7 @@ a.status__content__spoiler-link { .tabs-bar { display: flex; - background: lighten($color1, 6%); + background: lighten($color1, 8%); flex: 0 0 auto; overflow-y: auto; } @@ -660,7 +686,7 @@ a.status__content__spoiler-link { text-align: center; font-size:12px; font-weight: 500; - border-bottom: 2px solid lighten($color1, 6%); + border-bottom: 2px solid lighten($color1, 8%); &.active { border-bottom: 2px solid $color4; @@ -850,7 +876,8 @@ a.status__content__spoiler-link { } .column-link { - background: lighten($color1, 6%); + background: lighten($color1, 8%); + color: $color5; &:hover { background: lighten($color1, 11%); @@ -883,6 +910,7 @@ a.status__content__spoiler-link { .autosuggest-textarea__textarea { height: 100px; + background: $color5; } .autosuggest-textarea__suggestions { @@ -968,11 +996,40 @@ button.active i.fa-retweet { } .status-card { + display: flex; + cursor: pointer; + font-size: 14px; + border: 1px solid lighten($color1, 8%); + border-radius: 4px; + color: lighten($color1, 26%); + margin-top: 14px; + text-decoration: none; + overflow: hidden; + &:hover { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } } +.status-card__title { + display: block; + font-weight: 500; + margin-bottom: 5px; + color: $color3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-card__description { + color: $color3; +} + +.status-card__image { + flex: 0 0 100px; + background: lighten($color1, 8%); +} + .load-more { display: block; color: lighten($color1, 26%); @@ -981,7 +1038,7 @@ button.active i.fa-retweet { text-decoration: none; &:hover { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } } @@ -1020,3 +1077,53 @@ button.active i.fa-retweet { font-size: 14px; margin: 0; } + +.loading-indicator { + color: $color2; +} + +.collapsable-collapsed { + color: $color3; + background: lighten($color1, 4%); +} + +.collapsable { + color: $color5; + background: lighten($color1, 8%); +} + +.media-spoiler { + background: $color8; + color: $color5; +} + +.modal-container--preloader { + background: lighten($color1, 8%); +} + +.account--panel { + background: lighten($color1, 4%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); +} + +.column-settings--outer { + background: lighten($color1, 8%); +} + +.column-settings--section { + color: $color3; +} + +.modal-container--nav { + color: $color5; +} + +.account--follows-info { + color: $color5; +} + +.setting-toggle { + color: $color3; +} + diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss index 595275527..d427c1466 100644 --- a/app/assets/stylesheets/stream_entries.scss +++ b/app/assets/stylesheets/stream_entries.scss @@ -5,24 +5,24 @@ .entry { background: lighten($color2, 8%); - &, .detailed-status.light { + .detailed-status.light, .status.light { border-bottom: 1px solid $color2; } &:last-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-bottom: 0; border-radius: 0 0 4px 4px; } } &:first-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-radius: 4px 4px 0 0; } &:last-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-radius: 4px; } } |