From 3315acb4b76dbaa18da08ddae62b0840425116db Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Wed, 1 May 2019 08:50:45 +0700 Subject: [PATCH] refactor sass with %ellipsis and %nowrap-ellipsis --- ui/analyse/css/_explorer.scss | 3 +- ui/analyse/css/embed/_footer.scss | 3 +- ui/analyse/css/study/_invite.scss | 3 +- ui/analyse/css/study/_list-widget.scss | 6 +- ui/analyse/css/study/_members.scss | 3 +- ui/analyse/css/study/panel/_metadata.scss | 3 +- ui/analyse/css/study/relay/_admin.scss | 3 +- ui/ceval/css/_pv.scss | 3 +- ui/challenge/css/_challenge.scss | 3 +- ui/chat/css/_chat.mod.scss | 3 +- ui/chat/css/_tab.scss | 3 +- ui/chess/css/_opening.scss | 3 +- ui/common/css/abstract/_extends.scss | 282 +++++++++++----------- ui/common/css/abstract/_mixins.scss | 5 + ui/common/css/component/_crosstable.scss | 3 +- ui/common/css/component/_friend-box.scss | 3 +- ui/common/css/component/_power-tip.scss | 3 +- ui/common/css/component/_vs.scss | 3 +- ui/lobby/css/_box.scss | 7 +- ui/lobby/css/_stream.scss | 3 +- ui/lobby/css/_support.scss | 3 +- ui/lobby/css/app/_hook-filter.scss | 4 +- ui/notify/css/_notify.scss | 3 +- ui/perfStat/css/_perf-stat.scss | 3 +- ui/round/css/_meta.scss | 3 +- ui/round/css/_tour-standing.scss | 3 +- ui/round/css/_user.scss | 3 +- ui/site/css/_blog.scss | 3 +- ui/site/css/_message.scss | 3 +- ui/site/css/_relation.scss | 3 +- ui/site/css/coach/_review.scss | 6 +- ui/site/css/mod/_gamify.scss | 3 +- ui/site/css/mod/_inquiry.scss | 4 +- ui/site/css/streamer/_list.scss | 4 +- ui/site/css/streamer/_show.scss | 4 +- ui/site/css/user/_activity.scss | 4 +- ui/site/css/user/_list.scss | 3 +- ui/site/css/user/_profile.scss | 4 +- ui/tournament/css/_app-standing.scss | 4 +- ui/tournament/css/_duel.scss | 3 +- ui/tournament/css/_player.scss | 3 +- ui/tournament/css/_podium.scss | 3 +- ui/tournamentSchedule/css/_schedule.scss | 6 +- ui/tournamentSchedule/css/_side.scss | 3 +- ui/tree/css/_tree.scss | 3 +- 45 files changed, 197 insertions(+), 239 deletions(-) diff --git a/ui/analyse/css/_explorer.scss b/ui/analyse/css/_explorer.scss index 46a9e6686f..765c9d6a88 100644 --- a/ui/analyse/css/_explorer.scss +++ b/ui/analyse/css/_explorer.scss @@ -103,9 +103,8 @@ max-width: 110px; } .games td span { + @extend %ellipsis; display: block; - overflow: hidden; - text-overflow: ellipsis; } .games result { display: block; diff --git a/ui/analyse/css/embed/_footer.scss b/ui/analyse/css/embed/_footer.scss index 5cce2e6ed9..a27249476b 100644 --- a/ui/analyse/css/embed/_footer.scss +++ b/ui/analyse/css/embed/_footer.scss @@ -6,9 +6,8 @@ footer { height: 2.5rem; padding: 0 2vw; .left { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; flex: 1 1 100%; - text-overflow: ellipsis; } h1 { @extend %base-font; diff --git a/ui/analyse/css/study/_invite.scss b/ui/analyse/css/study/_invite.scss index e119ba2e24..707d1961c9 100644 --- a/ui/analyse/css/study/_invite.scss +++ b/ui/analyse/css/study/_invite.scss @@ -18,9 +18,8 @@ @extend %flex-between; margin-bottom: 2em; .button { + @extend %ellipsis; flex: 0 0 48%; - overflow: hidden; - text-overflow: ellipsis; margin-bottom: .7em; text-transform: none; } diff --git a/ui/analyse/css/study/_list-widget.scss b/ui/analyse/css/study/_list-widget.scss index dcf3096866..eda2553891 100644 --- a/ui/analyse/css/study/_list-widget.scss +++ b/ui/analyse/css/study/_list-widget.scss @@ -30,9 +30,8 @@ $c-study: $c-primary; margin-left: 2%; } li { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; color: $c-font-dim; - text-overflow: ellipsis; &::before { color: $c-font-dimmer; } @@ -40,13 +39,12 @@ $c-study: $c-primary; .top { @extend %flex-center-nowrap, %break-word, %roboto; .study-name { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; font-size: 1.5em; font-weight: normal; color: $c-study; display: block; margin: 0; - text-overflow: ellipsis; } span { font-size: .9rem; diff --git a/ui/analyse/css/study/_members.scss b/ui/analyse/css/study/_members.scss index 5b9ee04b9a..c6e97d7b1a 100644 --- a/ui/analyse/css/study/_members.scss +++ b/ui/analyse/css/study/_members.scss @@ -7,8 +7,7 @@ overflow: hidden; } .user-link { - overflow: hidden; - text-overflow: ellipsis; + @extend %ellipsis; margin: .5em 0; } .status { diff --git a/ui/analyse/css/study/panel/_metadata.scss b/ui/analyse/css/study/panel/_metadata.scss index 9ecfb86346..732f85b619 100644 --- a/ui/analyse/css/study/panel/_metadata.scss +++ b/ui/analyse/css/study/panel/_metadata.scss @@ -9,8 +9,7 @@ white-space: nowrap; border-bottom: $border; .name { - overflow: hidden; - text-overflow: ellipsis; + @extend %ellipsis; } .liking { margin-left: 1rem; diff --git a/ui/analyse/css/study/relay/_admin.scss b/ui/analyse/css/study/relay/_admin.scss index 89b4f2f2b3..d660850492 100644 --- a/ui/analyse/css/study/relay/_admin.scss +++ b/ui/analyse/css/study/relay/_admin.scss @@ -28,8 +28,7 @@ color: $c-primary-over; } > div { - overflow: hidden; - text-overflow: ellipsis; + @extend %ellipsis; } .fat { font-size: 1.5em; diff --git a/ui/ceval/css/_pv.scss b/ui/ceval/css/_pv.scss index d8dc15e049..1d8fbd2157 100644 --- a/ui/ceval/css/_pv.scss +++ b/ui/ceval/css/_pv.scss @@ -2,11 +2,10 @@ background: $c-bg-box; font-size: 13px; .pv { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; height: 2em; line-height: 2em; border-top: $border; - text-overflow: ellipsis; &[data-uci]:hover { background: mix($c-secondary, $c-bg-box, 20%); cursor: pointer; diff --git a/ui/challenge/css/_challenge.scss b/ui/challenge/css/_challenge.scss index ebe9ba6aad..8a89bcdfef 100644 --- a/ui/challenge/css/_challenge.scss +++ b/ui/challenge/css/_challenge.scss @@ -112,14 +112,13 @@ font-size: 2.6em; } .content { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; position: absolute; top: 10px; left: 16px; display: block; width: 196px; text-align: left; - text-overflow: ellipsis; } .head { display: block; diff --git a/ui/chat/css/_chat.mod.scss b/ui/chat/css/_chat.mod.scss index 86d47d03a9..8ad96551d8 100644 --- a/ui/chat/css/_chat.mod.scss +++ b/ui/chat/css/_chat.mod.scss @@ -67,10 +67,9 @@ margin-right: 5px; } .timeout a { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; color: $c-accent; display: block; - text-overflow: ellipsis; line-height: 1.5em; @include transition(); margin-left: -10px; diff --git a/ui/chat/css/_tab.scss b/ui/chat/css/_tab.scss index bbf8c3a3a8..d1f52f306a 100644 --- a/ui/chat/css/_tab.scss +++ b/ui/chat/css/_tab.scss @@ -27,8 +27,7 @@ display: block; } span { - @extend %nowrap-hidden; - text-overflow: ellipsis; + @extend %nowrap-ellipsis; } &:last-child { border-right: none; diff --git a/ui/chess/css/_opening.scss b/ui/chess/css/_opening.scss index 19e264842d..4b191815ed 100644 --- a/ui/chess/css/_opening.scss +++ b/ui/chess/css/_opening.scss @@ -1,7 +1,6 @@ .opening_box { - @extend %roboto, %nowrap-hidden; + @extend %roboto, %nowrap-ellipsis; padding: 5px; border-bottom: $border; - text-overflow: ellipsis; background: $c-bg-zebra; } diff --git a/ui/common/css/abstract/_extends.scss b/ui/common/css/abstract/_extends.scss index b49f64c9d2..eb4b597529 100644 --- a/ui/common/css/abstract/_extends.scss +++ b/ui/common/css/abstract/_extends.scss @@ -23,150 +23,158 @@ /* text printed directly on the page background * deserves special treatment (transp theme) */ -%page-font { - color: $c-font-page; -} -%page-text { - @extend %page-font, %page-text-shadow !optional; -} -%page-link { - @extend %page-link-font !optional; - @extend %page-text-shadow !optional; -} + %page-font { + color: $c-font-page; + } + %page-text { + @extend %page-font, %page-text-shadow !optional; + } + %page-link { + @extend %page-link-font !optional; + @extend %page-text-shadow !optional; + } -%metal { - @include metal; -} -%metal-hover { - @include metal-hover; -} -%page-metal { - @include page-metal; -} -%page-metal-hover { - @include page-metal; -} + %metal { + @include metal; + } + %metal-hover { + @include metal-hover; + } + %page-metal { + @include page-metal; + } + %page-metal-hover { + @include page-metal; + } -%active-inset-shadow { - box-shadow: 0 3px 4px hsla(0, 0, 0, 0.15) inset; -} + %active-inset-shadow { + box-shadow: 0 3px 4px hsla(0, 0, 0, 0.15) inset; + } -%active { - @extend %active-inset-shadow; - background: $c-accent; - color: #fff; - text-shadow: 0 1px 1px black!important; -} -%active-hover { - background: mix(white, $c-accent, 20%); -} + %active { + @extend %active-inset-shadow; + background: $c-accent; + color: #fff; + text-shadow: 0 1px 1px black!important; + } + %active-hover { + background: mix(white, $c-accent, 20%); + } -%active-soft { - @extend %active-inset-shadow; - background: $c-shade; - color: $c-font-clearer; - text-shadow: 1px 1px 1px $c-font-shadow!important; - font-weight: bold; -} + %active-soft { + @extend %active-inset-shadow; + background: $c-shade; + color: $c-font-clearer; + text-shadow: 1px 1px 1px $c-font-shadow!important; + font-weight: bold; + } -%dropdown-shadow { - box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3); -} -%popup-shadow { - box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); -} -%button-shadow { - box-shadow: 0 2px 5px 0 hsla(0, 0, 0%, 0.225); -} -%button-raised-shadow { - box-shadow: 0 4px 10px 0px hsla(0, 0, 0, 0.225); -} -%button-none { - background: none; - border: none; - outline: none; - color: $c-font; -} - -%nowrap-hidden { - white-space: nowrap; - overflow: hidden; -} - -%box-padding { - padding: 5vh var(--box-padding); -} -%box-padding-horiz { - padding: 0 var(--box-padding); -} - -%break-word { - overflow-wrap: break-word; - word-break: break-all; /* support: firefox */ - word-break: break-word; -} -%break-nope { - overflow-wrap: normal; - word-break: normal; -} - -%square { - position: relative; - display: block; - height: 0; - padding-bottom: 100%; - width: 100%; -} - -%video { - position: relative; - display: block; - height: 0; - padding-bottom: 56.25%; /* 16/9 */ - // padding-bottom: 75%; /* 4/3 */ - width: 100%; - > * { - @extend %abs-100; + %dropdown-shadow { + box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3); + } + %popup-shadow { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } + %button-shadow { + box-shadow: 0 2px 5px 0 hsla(0, 0, 0%, 0.225); + } + %button-raised-shadow { + box-shadow: 0 4px 10px 0px hsla(0, 0, 0, 0.225); + } + %button-none { + background: none; border: none; + outline: none; + color: $c-font; } -} -%data-icon { - font-size: 1.2em; - vertical-align: middle; - font-family: 'lichess'; - font-style: normal; - font-weight: normal; - text-transform: none; - speak: none; - content: attr(data-icon); - opacity: 0.9; -} -%data-icon-top { - &::before { - vertical-align: text-top; + %nowrap-hidden { + white-space: nowrap; + overflow: hidden; + } + %nowrap-ellipsis { + @extend %ellipsis; + white-space: nowrap; + } + + %box-padding { + padding: 5vh var(--box-padding); + } + %box-padding-horiz { + padding: 0 var(--box-padding); + } + + %break-word { + overflow-wrap: break-word; + word-break: break-all; /* support: firefox */ + word-break: break-word; + } + %break-nope { + overflow-wrap: normal; + word-break: normal; + } + + %ellipsis { + @include ellipsis; + } + + %square { + position: relative; + display: block; + height: 0; + padding-bottom: 100%; + width: 100%; + } + + %video { + position: relative; + display: block; + height: 0; + padding-bottom: 56.25%; /* 16/9 */ + // padding-bottom: 75%; /* 4/3 */ + width: 100%; + > * { + @extend %abs-100; + border: none; + } + } + + %data-icon { + font-size: 1.2em; + vertical-align: middle; + font-family: 'lichess'; + font-style: normal; + font-weight: normal; + text-transform: none; + speak: none; + content: attr(data-icon); + opacity: 0.9; + } + %data-icon-top { + &::before { + vertical-align: text-top; + } + } + %fullscreen-mask { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: $c-page-mask; + z-index: z('fullscreen-mask'); + } + %link-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: z('link-overlay'); + } + %abs-100 { + position: absolute; + width: 100%; + height: 100%; } -} -%fullscreen-mask { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: $c-page-mask; - z-index: z('fullscreen-mask'); -} -%link-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: z('link-overlay'); -} -%abs-100 { - position: absolute; - width: 100%; - height: 100%; -} diff --git a/ui/common/css/abstract/_mixins.scss b/ui/common/css/abstract/_mixins.scss index 48f20b1f4f..be03a3d752 100644 --- a/ui/common/css/abstract/_mixins.scss +++ b/ui/common/css/abstract/_mixins.scss @@ -43,6 +43,11 @@ } } +@mixin ellipsis { + overflow: hidden; + text-overflow: ellipsis; +} + @mixin crosstable-large { .crosstable__users { flex: 7 1 auto; } } diff --git a/ui/common/css/component/_crosstable.scss b/ui/common/css/component/_crosstable.scss index d40eadda6b..e1562679d1 100644 --- a/ui/common/css/component/_crosstable.scss +++ b/ui/common/css/component/_crosstable.scss @@ -23,9 +23,8 @@ @extend %metal; } &__users { + @extend %ellipsis; max-width: 40vw; - overflow: hidden; - text-overflow: ellipsis; text-align: left; a { padding-left: $block-gap; diff --git a/ui/common/css/component/_friend-box.scss b/ui/common/css/component/_friend-box.scss index c707e0ecad..855c64f80d 100644 --- a/ui/common/css/component/_friend-box.scss +++ b/ui/common/css/component/_friend-box.scss @@ -42,9 +42,8 @@ color: $c-font; } &.user-link { + @extend %ellipsis; max-width: 150px; - overflow: hidden; - text-overflow: ellipsis; .line::before { color: $c-good; content: ''; diff --git a/ui/common/css/component/_power-tip.scss b/ui/common/css/component/_power-tip.scss index 347c5094cc..51279da99a 100644 --- a/ui/common/css/component/_power-tip.scss +++ b/ui/common/css/component/_power-tip.scss @@ -28,9 +28,8 @@ margin-left: .5em; } .user-link { + @extend %ellipsis; display: block; - overflow: hidden; - text-overflow: ellipsis; .line { vertical-align: middle; } diff --git a/ui/common/css/component/_vs.scss b/ui/common/css/component/_vs.scss index 4a6fc87de3..cf97c8366f 100644 --- a/ui/common/css/component/_vs.scss +++ b/ui/common/css/component/_vs.scss @@ -8,8 +8,7 @@ } &__pl, &__op { - text-overflow: ellipsis; - overflow: hidden; + @extend %ellipsis; max-width: 45%; } &__pl { diff --git a/ui/lobby/css/_box.scss b/ui/lobby/css/_box.scss index bdcc5391a3..94ddd52e2c 100644 --- a/ui/lobby/css/_box.scss +++ b/ui/lobby/css/_box.scss @@ -28,12 +28,10 @@ height: 100%; } td { + @extend %nowrap-ellipsis; padding: .5em .4em; border-top: $border; - white-space: nowrap; max-width: 21ch; /* prevent leaderboard overflow due to long usernames */ - overflow: hidden; - text-overflow: ellipsis; &:first-child { padding-left: .7em; } @@ -45,8 +43,7 @@ &__leaderboard, &__winners { td:first-child { - overflow: hidden; - text-overflow: ellipsis; + @extend %ellipsis; } td:last-child { text-align: right; diff --git a/ui/lobby/css/_stream.scss b/ui/lobby/css/_stream.scss index 52b81f0eff..f832d40c8d 100644 --- a/ui/lobby/css/_stream.scss +++ b/ui/lobby/css/_stream.scss @@ -1,9 +1,8 @@ .lobby__streams { .stream { - @extend %roboto, %nowrap-hidden, %page-text; + @extend %roboto, %nowrap-ellipsis, %page-text; color: $c-font-page; display: block; - text-overflow: ellipsis; margin-bottom: .5em; line-height: .9; strong { diff --git a/ui/lobby/css/_support.scss b/ui/lobby/css/_support.scss index d90c92a4ac..fc806ca945 100644 --- a/ui/lobby/css/_support.scss +++ b/ui/lobby/css/_support.scss @@ -39,8 +39,7 @@ $c-support: $c-brag; display: block; } span { - @extend %nowrap-hidden; - text-overflow: ellipsis; + @extend %nowrap-ellipsis; display: block; font-size: .8em; } diff --git a/ui/lobby/css/app/_hook-filter.scss b/ui/lobby/css/app/_hook-filter.scss index 49353d3006..915e9ea0c0 100644 --- a/ui/lobby/css/app/_hook-filter.scss +++ b/ui/lobby/css/app/_hook-filter.scss @@ -16,9 +16,7 @@ padding: 4.3px 0; } .checkable { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @extend %nowrap-ellipsis; label, input { vertical-align: middle; cursor: pointer; diff --git a/ui/notify/css/_notify.scss b/ui/notify/css/_notify.scss index 06cf8e76e4..2da8fbe6f5 100644 --- a/ui/notify/css/_notify.scss +++ b/ui/notify/css/_notify.scss @@ -81,9 +81,8 @@ @extend %flex-between; } .site_notification .content span:last-child { + @extend %ellipsis; display: block; - text-overflow: ellipsis; - overflow: hidden; } .site_notification .content time { @extend %roboto; diff --git a/ui/perfStat/css/_perf-stat.scss b/ui/perfStat/css/_perf-stat.scss index 13b3aec918..9465394f7a 100644 --- a/ui/perfStat/css/_perf-stat.scss +++ b/ui/perfStat/css/_perf-stat.scss @@ -93,10 +93,9 @@ } .resultStreak .streak, .playStreak .streak { + @extend %ellipsis; margin: 1em 0 1em 1.5em; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } .playStreak { white-space: nowrap; diff --git a/ui/round/css/_meta.scss b/ui/round/css/_meta.scss index 106802d857..e967d3b068 100644 --- a/ui/round/css/_meta.scss +++ b/ui/round/css/_meta.scss @@ -43,9 +43,8 @@ } } .user-tv { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; font-size: 1.2em; - text-overflow: ellipsis; } } .game__tournament { diff --git a/ui/round/css/_tour-standing.scss b/ui/round/css/_tour-standing.scss index f202292fe4..4cc49f0d84 100644 --- a/ui/round/css/_tour-standing.scss +++ b/ui/round/css/_tour-standing.scss @@ -6,10 +6,9 @@ border-bottom: none; } td { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; padding: .2em 1em; line-height: 2em; - text-overflow: ellipsis; } .name span { display: inline-block; diff --git a/ui/round/css/_user.scss b/ui/round/css/_user.scss index aa31c13f77..3c4b08ee9b 100644 --- a/ui/round/css/_user.scss +++ b/ui/round/css/_user.scss @@ -9,9 +9,8 @@ color: $c-font; } a { + @extend %ellipsis; color: $c-font; - overflow: hidden; - text-overflow: ellipsis; } &.long a { letter-spacing: -0.5px; diff --git a/ui/site/css/_blog.scss b/ui/site/css/_blog.scss index b12d893013..65b284d886 100644 --- a/ui/site/css/_blog.scss +++ b/ui/site/css/_blog.scss @@ -106,12 +106,11 @@ font-size: 1.3em; margin-bottom: 40px; .button { + @extend %ellipsis; margin: auto; text-transform: none; - overflow: hidden; max-width: 90vw; display: block; - text-overflow: ellipsis; &::before { vertical-align: bottom; } diff --git a/ui/site/css/_message.scss b/ui/site/css/_message.scss index a7db046ce5..0562aeebc7 100644 --- a/ui/site/css/_message.scss +++ b/ui/site/css/_message.scss @@ -18,9 +18,8 @@ @include breakpoint($mq-not-small) { .date { display: none } .author { + @include ellipsis; max-width: 22ch; - overflow: hidden; - text-overflow: ellipsis; } } @include breakpoint($mq-not-xx-small) { diff --git a/ui/site/css/_relation.scss b/ui/site/css/_relation.scss index e319cc4f24..365bf4bb41 100644 --- a/ui/site/css/_relation.scss +++ b/ui/site/css/_relation.scss @@ -1,7 +1,6 @@ table td { + @extend %ellipsis; max-width: 50vw; - overflow: hidden; - text-overflow: ellipsis; @include breakpoint($mq-not-x-small) { &:last-child { display: none; diff --git a/ui/site/css/coach/_review.scss b/ui/site/css/coach/_review.scss index 5f041937af..fb63bd1b4e 100644 --- a/ui/site/css/coach/_review.scss +++ b/ui/site/css/coach/_review.scss @@ -18,15 +18,13 @@ margin-bottom: 5px; } .top .user-link { + @extend %ellipsis; margin-left: -4px; - text-overflow: ellipsis; } .content { - @extend %page-text; + @extend %page-text, %ellipsis; font-style: italic; max-height: 10.7em; - overflow: hidden; - text-overflow: ellipsis; @include transition(); } .disapprove { diff --git a/ui/site/css/mod/_gamify.scss b/ui/site/css/mod/_gamify.scss index f51379bbb4..f0904225db 100644 --- a/ui/site/css/mod/_gamify.scss +++ b/ui/site/css/mod/_gamify.scss @@ -16,10 +16,9 @@ opacity: 0.8; } .user-link { + @extend %ellipsis; font-size: 3em; color: $c-brag; - overflow: hidden; - text-overflow: ellipsis; margin: 1rem 0 1.6rem 0; } table tr td { diff --git a/ui/site/css/mod/_inquiry.scss b/ui/site/css/mod/_inquiry.scss index f7d9ca15e2..65be1ce684 100644 --- a/ui/site/css/mod/_inquiry.scss +++ b/ui/site/css/mod/_inquiry.scss @@ -274,9 +274,7 @@ body.no-inquiry { overflow-y: auto; } .history li { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @extend %nowrap-ellipsis; padding: 6px 0; } diff --git a/ui/site/css/streamer/_list.scss b/ui/site/css/streamer/_list.scss index b2d5a8c1f7..0c728aa88b 100644 --- a/ui/site/css/streamer/_list.scss +++ b/ui/site/css/streamer/_list.scss @@ -77,12 +77,10 @@ $mq-picture: $mq-medium; } } .service { + @extend %nowrap-ellipsis; display: flex; font-size: 1.2em; - white-space: nowrap; padding: 3px 0; - overflow: hidden; - text-overflow: ellipsis; svg { width: 1.4em; height: 1.4em; diff --git a/ui/site/css/streamer/_show.scss b/ui/site/css/streamer/_show.scss index 4c3cb9d193..065483f587 100644 --- a/ui/site/css/streamer/_show.scss +++ b/ui/site/css/streamer/_show.scss @@ -7,10 +7,8 @@ $mq-picture: $mq-large; overflow: hidden; /* help with responsive overflow of activity */ } h1 { - @extend %roboto; + @extend %roboto, %ellipsis; @include fluid-size('font-size', 23px, 40px); - text-overflow: ellipsis; - overflow: hidden; &::before { margin-right: .2em; display: none; diff --git a/ui/site/css/user/_activity.scss b/ui/site/css/user/_activity.scss index f7e002052f..9625dcc2c2 100644 --- a/ui/site/css/user/_activity.scss +++ b/ui/site/css/user/_activity.scss @@ -58,9 +58,7 @@ $c-contours: mix($c-brag, $c-shade, 80%); overflow: hidden; } .line { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @extend %nowrap-ellipsis; .more { flex: 0 1 auto; } diff --git a/ui/site/css/user/_list.scss b/ui/site/css/user/_list.scss index 79e4ad3754..bb5c67b630 100644 --- a/ui/site/css/user/_list.scss +++ b/ui/site/css/user/_list.scss @@ -26,8 +26,7 @@ $user-list-width: 25ch; white-space: nowrap; } .user-link { - overflow: hidden; - text-overflow: ellipsis; + @extend %ellipsis; } } &__online { diff --git a/ui/site/css/user/_profile.scss b/ui/site/css/user/_profile.scss index cddaf7df1a..1a27e730bc 100644 --- a/ui/site/css/user/_profile.scss +++ b/ui/site/css/user/_profile.scss @@ -75,10 +75,8 @@ display: flex; flex-flow: row wrap; > a { + @extend %nowrap-ellipsis; flex: 0 0 50%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } } .bio { diff --git a/ui/tournament/css/_app-standing.scss b/ui/tournament/css/_app-standing.scss index 064144deb6..29d2e50ae7 100644 --- a/ui/tournament/css/_app-standing.scss +++ b/ui/tournament/css/_app-standing.scss @@ -3,13 +3,11 @@ padding-left: 0px; padding-right: 0px; .name { + @extend %nowrap-ellipsis; display:inline-block; vertical-align: middle; - white-space: nowrap; padding-right: 5px; max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; } } .user-link.long { diff --git a/ui/tournament/css/_duel.scss b/ui/tournament/css/_duel.scss index 0a181e5f97..1db98cf15c 100644 --- a/ui/tournament/css/_duel.scss +++ b/ui/tournament/css/_duel.scss @@ -42,12 +42,11 @@ @extend %flex-between; } strong { + @extend %ellipsis; font-size: 1.2em; color: $c-font-dim; display: block; max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; } .title { color: $c-brag; diff --git a/ui/tournament/css/_player.scss b/ui/tournament/css/_player.scss index 053e6810db..f8098526ff 100644 --- a/ui/tournament/css/_player.scss +++ b/ui/tournament/css/_player.scss @@ -78,9 +78,8 @@ border-color: $c-bad; } td:nth-child(2) { - @extend %nowrap-hidden; + @extend %nowrap-ellipsis; max-width: 200px; - text-overflow: ellipsis; } td:last-child { font-weight: bold; diff --git a/ui/tournament/css/_podium.scss b/ui/tournament/css/_podium.scss index 7c99fd4141..74df208f27 100644 --- a/ui/tournament/css/_podium.scss +++ b/ui/tournament/css/_podium.scss @@ -1,9 +1,8 @@ .tour__podium { > div { + @extend %ellipsis; display: inline-block; text-align: center; - overflow: hidden; - text-overflow: ellipsis; } .first { width: 44%; diff --git a/ui/tournamentSchedule/css/_schedule.scss b/ui/tournamentSchedule/css/_schedule.scss index 3802597f14..7aa3db88de 100644 --- a/ui/tournamentSchedule/css/_schedule.scss +++ b/ui/tournamentSchedule/css/_schedule.scss @@ -134,8 +134,7 @@ $c-tour-max-rating: #8572ff; } } .name, .body { - @extend %nowrap-hidden; - text-overflow: ellipsis; + @extend %nowrap-ellipsis; } .name { display: inline-block; @@ -150,9 +149,8 @@ $c-tour-max-rating: #8572ff; display: inline-flex; } .infos .text { + @extend %ellipsis; flex: 1 1; - overflow: hidden; - text-overflow: ellipsis; } .infos .nb-players { flex: 0 0 auto; diff --git a/ui/tournamentSchedule/css/_side.scss b/ui/tournamentSchedule/css/_side.scss index dc3ddac2ef..2964511f66 100644 --- a/ui/tournamentSchedule/css/_side.scss +++ b/ui/tournamentSchedule/css/_side.scss @@ -24,9 +24,8 @@ color: $c-font; } .user-link { + @extend %ellipsis; margin: 0 5px 0 -3px; - overflow: hidden; - text-overflow: ellipsis; } span { opacity: 0.7; diff --git a/ui/tree/css/_tree.scss b/ui/tree/css/_tree.scss index 322d13b869..978e293788 100644 --- a/ui/tree/css/_tree.scss +++ b/ui/tree/css/_tree.scss @@ -138,14 +138,13 @@ font-size: 0.9em; } comment .by { - @extend %nowrap-hidden, %roboto; + @extend %nowrap-ellipsis, %roboto; display: inline-block; vertical-align: -0.3em; font-size: 0.9em; opacity: 0.8; margin-right: 0.4em; max-width: 9em; - text-overflow: ellipsis; } &-column comment.white { border-left: 3px solid;