diff options
author | Eugen <eugen@zeonfederated.com> | 2017-03-15 22:55:22 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-15 22:55:22 +0100 |
commit | e245115f47082ffba27205f508301d14e792c369 (patch) | |
tree | 21a77b788dace45b734da6e64f1b0705016192f0 /app/assets/stylesheets/components.scss | |
parent | 620f70e42c16c324459ca2da52c68f1def8683de (diff) | |
parent | c1124228e857b0e85f5bf927d2c41c7fadfdf955 (diff) |
Merge branch 'master' into mastodon-site-api
Diffstat (limited to 'app/assets/stylesheets/components.scss')
-rw-r--r-- | app/assets/stylesheets/components.scss | 223 |
1 files changed, 207 insertions, 16 deletions
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 5fc67d9c1..4b1e86aca 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1,3 +1,5 @@ +@import 'variables'; + .button { background-color: darken($color4, 3%); font-family: inherit; @@ -59,6 +61,14 @@ &.active { color: $color4; } + + &:focus { + outline: none; + } +} + +.dropdown--active .icon-button { + color: $color4; } .invisible { @@ -387,6 +397,10 @@ a.status__content__spoiler-link { font-weight: 500; color: $color5; } + + abbr { + color: lighten($color1, 26%); + } } .status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name { @@ -516,6 +530,12 @@ a.status__content__spoiler-link { position: absolute; } +.dropdown__sep { + border-bottom: 1px solid darken($color2, 8%); + margin: 5px 7px 6px; + padding-top: 1px; +} + .dropdown--active .dropdown__content { display: block; z-index: 9999; @@ -533,23 +553,40 @@ a.status__content__spoiler-link { left: 8px; } - ul { + & > ul { list-style: none; background: $color2; padding: 4px 0; border-radius: 4px; box-shadow: 0 0 15px rgba($color8, 0.4); - min-width: 100px; + min-width: 140px; + position: relative; + left: -10px; } - a { + &.dropdown__left { + & > ul { + left: -98px; + } + } + + & > ul > li > a { font-size: 13px; + line-height: 18px; display: block; - padding: 6px 16px; - width: 100px; + padding: 4px 14px; + box-sizing: border-box; + width: 140px; text-decoration: none; background: $color2; color: $color1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:focus { + outline: none; + } &:hover { background: $color4; @@ -983,15 +1020,6 @@ a.status__content__spoiler-link { } } -.dropdown__content.dropdown__left { - transform: translateX(-108px); - - &::before { - right: 8px !important; - left: initial !important; - } -} - .setting-text { color: $color3; background: transparent; @@ -1074,8 +1102,10 @@ button.active i.fa-retweet { text-align: center; font-size: 16px; font-weight: 500; - color: lighten($color1, 26%); - padding-top: 120px; + color: lighten($color1, 16%); + padding-top: 210px; + background: image-url('mastodon-not-found.png') no-repeat center -50px; + cursor: default; } .column-header { @@ -1230,3 +1260,164 @@ button.active i.fa-retweet { z-index: 1; background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%); } + +.emoji-dialog { + width: 280px; + height: 220px; + background: $color2; + box-sizing: border-box; + border-radius: 2px; + overflow: hidden; + position: relative; + box-shadow: 0 0 15px rgba($color8, 0.4); + + .emojione { + margin: 0; + } + + .emoji-dialog-header { + padding: 0 10px; + background-color: $color3; + + ul { + padding: 0; + margin: 0; + list-style: none; + } + + li { + display: inline-block; + box-sizing: border-box; + height: 42px; + padding: 9px 5px; + cursor: pointer; + + img, svg { + width: 22px; + height: 22px; + filter: grayscale(100%); + } + + &.active { + background: lighten($color3, 6%); + + img, svg { + filter: grayscale(0); + } + } + } + } + + .emoji-row { + box-sizing: border-box; + overflow-y: hidden; + padding-left: 10px; + + .emoji { + display: inline-block; + padding: 5px; + border-radius: 4px; + } + } + + .emoji-category-header { + box-sizing: border-box; + overflow-y: hidden; + padding: 8px 16px 0; + display: table; + + > * { + display: table-cell; + vertical-align: middle; + } + } + + .emoji-category-title { + font-size: 14px; + font-family: sans-serif; + font-weight: normal; + color: $color1; + cursor: default; + } + + .emoji-category-heading-decoration { + text-align: right; + } + + .modifiers { + list-style: none; + padding: 0; + margin: 0; + vertical-align: middle; + white-space: nowrap; + margin-top: 4px; + + li { + display: inline-block; + padding: 0 2px; + + &:last-of-type { + padding-right: 0; + } + } + + .modifier { + display: inline-block; + border-radius: 10px; + width: 15px; + height: 15px; + position: relative; + cursor: pointer; + + &.active:after { + content: ""; + display: block; + position: absolute; + width: 7px; + height: 7px; + border-radius: 10px; + border: 2px solid $color1; + top: 2px; + left: 2px; + } + } + } + + .emoji-search-wrapper { + padding: 6px 16px; + } + + .emoji-search { + font-size: 12px; + padding: 6px 4px; + width: 100%; + border: 1px solid #ddd; + border-radius: 4px; + } + + .emoji-categories-wrapper { + position: absolute; + top: 42px; + bottom: 0; + left: 0; + right: 0; + } + + .emoji-search-wrapper + .emoji-categories-wrapper { + top: 83px; + } + + .emoji-row .emoji:hover { + background: lighten($color2, 3%); + } + + .emoji { + width: 22px; + height: 22px; + cursor: pointer; + + &:focus { + outline: none; + } + } +} |