diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
4 files changed, 63 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index cdf2d116b..2cc43afec 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -324,7 +324,6 @@ $small-breakpoint: 960px; 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; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index dcc551c5b..0089445e1 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -48,6 +48,8 @@ overflow: hidden; transition: color .1s ease-out; cursor: pointer; + background: transparent; + border: 0; &:hover { color: darken($lighter-text-color, 4%); @@ -106,11 +108,13 @@ padding: 10px; padding-right: 45px; background: $simple-background-color; + position: relative; input { font-size: 14px; font-weight: 400; padding: 7px 9px; + padding-right: 25px; font-family: inherit; display: block; width: 100%; @@ -131,6 +135,30 @@ } } +.emoji-mart-search-icon { + position: absolute; + top: 18px; + right: 45px + 5px; + z-index: 2; + padding: 2px 5px 1px; + border: 0; + background: none; + transition: all 100ms linear; + transition-property: opacity; + pointer-events: auto; + opacity: 0.7; + + &:disabled { + cursor: default; + pointer-events: none; + opacity: 0.3; + } + + svg { + fill: $action-button-color; + } +} + .emoji-mart-category .emoji-mart-emoji { cursor: pointer; @@ -169,9 +197,36 @@ } } +/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ +.emoji-mart-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.emoji-mart-category-list { + margin: 0; + padding: 0; +} + +.emoji-mart-category-list li { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + .emoji-mart-emoji { position: relative; display: inline-block; + background: transparent; + border: 0; + padding: 0; font-size: 0; span { @@ -182,19 +237,17 @@ .emoji-mart-no-results { font-size: 14px; + color: $light-text-color; text-align: center; + padding: 5px 6px; padding-top: 70px; - color: $light-text-color; - - .emoji-mart-category-label { - display: none; - } - .emoji-mart-no-results-label { + .emoji-mart-no-results-label { margin-top: .2em; } .emoji-mart-emoji:hover::before { + cursor: default; content: none; } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 16045d5ee..24f750e1d 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1232,7 +1232,6 @@ button.icon-button.active i.fa-retweet { span { display: block; float: left; - margin-left: 50%; transform: translateX(-50%); margin: 82px 0 0 50%; white-space: nowrap; diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index b397844a2..06bf55e1e 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + .hero-widget { margin-bottom: 10px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); @@ -489,10 +491,10 @@ $fluid-breakpoint: $maximum-width + 20px; } &__item { - width: (960px - 20px) / 3; + width: math.div(960px - 20px, 3); @media screen and (max-width: $fluid-breakpoint) { - width: (940px - 20px) / 3; + width: math.div(940px - 20px, 3); } @media screen and (max-width: 640px) { @@ -584,7 +586,6 @@ $fluid-breakpoint: $maximum-width + 20px; display: block; font-weight: 500; padding: 15px; - overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |