diff options
Diffstat (limited to 'app/assets/stylesheets/components.scss')
-rw-r--r-- | app/assets/stylesheets/components.scss | 146 |
1 files changed, 93 insertions, 53 deletions
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index d31f148a2..316398874 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1,7 +1,7 @@ @import 'variables'; .app-body{ - -ms-overflow-style: -ms-autohiding-scrollbar; + -ms-overflow-style: -ms-autohiding-scrollbar; } .button { @@ -49,6 +49,22 @@ } } +.column-icon-clear { + font-size: 16px; + padding: 15px; + position: absolute; + right: 48px; + top: 0; + cursor: pointer; + z-index: 2; +} + +@media screen and (min-width: 1024px) { + .column-icon-clear { + top: 10px; + } +} + .icon-button { display: inline-block; padding: 0; @@ -149,6 +165,14 @@ } } +.avatar { + border-radius: 4px; + background: transparent no-repeat; + background-position: 50%; + background-clip: padding-box; + position: relative; +} + .lightbox .icon-button { color: $color1; } @@ -714,7 +738,7 @@ a.status__content__spoiler-link { @media screen and (min-width: 360px) { .columns-area { - margin: 10px; + padding: 10px; } } @@ -722,9 +746,12 @@ a.status__content__spoiler-link { width: 330px; position: relative; box-sizing: border-box; - background: $color1; display: flex; flex-direction: column; + + > .scrollable { + background: $color1; + } } .ui { @@ -756,6 +783,58 @@ a.status__content__spoiler-link { border-bottom: 2px solid transparent; } +.column, .drawer { + flex: 1 1 100%; + overflow: hidden; +} + +@media screen and (min-width: 360px) { + .tabs-bar { + margin: 10px; + margin-bottom: 0; + } + + .search { + margin-bottom: 10px; + } +} + +@media screen and (max-width: 1024px) { + .column, .drawer { + width: 100%; + padding: 0; + } + + .columns-area { + flex-direction: column; + } + + .search__input, .autosuggest-textarea__textarea { + font-size: 16px; + } +} + +@media screen and (min-width: 1024px) { + .columns-area { + padding: 0; + } + + .column, .drawer { + flex: 0 0 auto; + padding: 10px; + padding-left: 5px; + padding-right: 5px; + + &:first-child { + padding-left: 10px; + } + + &:last-child { + padding-right: 10px; + } + } +} + @media screen and (min-width: 2560px) { .columns-area { justify-content: center; @@ -815,37 +894,6 @@ a.status__content__spoiler-link { } } -.column, .drawer { - margin-left: 5px; - margin-right: 5px; - flex: 0 0 auto; - overflow: hidden; -} - -.column:first-child, .drawer:first-child { - margin-left: 0; -} - -.column:last-child, .drawer:last-child { - margin-right: 0; -} - -@media screen and (max-width: 1024px) { - .column, .drawer { - width: 100%; - margin: 0; - flex: 1 1 100%; - } - - .columns-area { - flex-direction: column; - } - - .search__input, .autosuggest-textarea__textarea { - font-size: 16px; - } -} - .tabs-bar { display: flex; background: lighten($color1, 8%); @@ -856,17 +904,18 @@ a.status__content__spoiler-link { .tabs-bar__link { display: block; flex: 1 1 auto; - padding: 10px 5px; + padding: 15px 10px; color: $color5; text-decoration: none; text-align: center; - font-size:12px; + font-size: 14px; font-weight: 500; border-bottom: 2px solid lighten($color1, 8%); transition: all 200ms linear; .fa { font-weight: 400; + font-size: 16px; } &.active { @@ -880,27 +929,13 @@ a.status__content__spoiler-link { } span { + margin-left: 5px; display: none; } } -@media screen and (min-width: 360px) { - .tabs-bar { - margin: 10px; - margin-bottom: 0; - } - - .search { - margin-bottom: 10px; - } -} - @media screen and (min-width: 600px) { .tabs-bar__link { - .fa { - margin-right: 5px; - } - span { display: inline; } @@ -1362,12 +1397,15 @@ button.icon-button.active i.fa-retweet { .empty-column-indicator { color: lighten($color1, 20%); + background: $color1; text-align: center; padding: 20px; - padding-top: 100px; font-size: 15px; font-weight: 400; cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; a { color: $color4; @@ -1395,7 +1433,7 @@ button.icon-button.active i.fa-retweet { .emoji-dialog { width: 280px; height: 220px; - background: $color2; + background: darken($color3, 10%); box-sizing: border-box; border-radius: 2px; overflow: hidden; @@ -1404,6 +1442,8 @@ button.icon-button.active i.fa-retweet { .emojione { margin: 0; + width: 100%; + height: auto; } .emoji-dialog-header { |