From a16d885ac9598763b050757eae2c01b13bfb2c53 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 08:47:59 +0900 Subject: [PATCH] Improve scss refactor 3 --- .../glitch/styles/components/account.scss | 30 +- .../glitch/styles/components/glitch.scss | 505 ------------------ .../glitch/styles/components/index.scss | 164 +++++- .../glitch/styles/components/modal.scss | 20 +- .../glitch/styles/components/status.scss | 141 ++++- 5 files changed, 330 insertions(+), 530 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/components/glitch.scss diff --git a/app/javascript/flavours/glitch/styles/components/account.scss b/app/javascript/flavours/glitch/styles/components/account.scss index e6f71fd30f..efeea836c9 100644 --- a/app/javascript/flavours/glitch/styles/components/account.scss +++ b/app/javascript/flavours/glitch/styles/components/account.scss @@ -1,6 +1,8 @@ .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); + color: inherit; + text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -10,6 +12,18 @@ text-decoration: none; font-size: 14px; } + + &.small { + border: none; + padding: 0; + + & > .account__avatar-wrapper { margin: 0 8px 0 0 } + + & > .display-name { + height: 24px; + line-height: 24px; + } + } } .account__wrapper { @@ -18,8 +32,7 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin: 6px 16px 6px 6px; } .account__avatar { @@ -59,6 +72,11 @@ white-space: nowrap; } +.account__header__wrapper { + flex: 0 0 auto; + background: lighten($ui-base-color, 4%); +} + .account__header { flex: 0 0 auto; background: lighten($ui-base-color, 4%); @@ -67,6 +85,14 @@ background-position: center; position: relative; + .account__avatar { + @include avatar-radius(); + @include avatar-size(90px); + display: block; + margin: 0 auto 10px; + overflow: hidden; + } + &.inactive { opacity: 0.5; diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss deleted file mode 100644 index b30f26cd89..0000000000 --- a/app/javascript/flavours/glitch/styles/components/glitch.scss +++ /dev/null @@ -1,505 +0,0 @@ -.status__content { - //reset - overflow: initial; - padding-top: inherit; - //glitch - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 15px; - line-height: 20px; - color: $primary-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; -} - -.status-check-box { - .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } - } -} - -.status__content__spoiler { - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } -} - -.status__content__text { - display: none; - - &.status__content__spoiler--visible { - display: block; - } -} - -.status__content__spoiler-link { - //reset - background: initial; - border: initial; - padding: initial; - //glitch - background: lighten($ui-base-color, 30%); - border: none; - padding: 0 5px; - vertical-align: bottom; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; - font-size: 16px; - vertical-align: -2px; - } -} - -.status__prepend-icon-wrapper { - //reset - left: initial; - position: initial; - //glitch - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; -} - -.notif-cleaning { - .status, .notification-follow { - padding-right: ($dismiss-overlay-width + 0.5rem); - } -} - -.notification-follow { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } -} - -.status { - //reset - padding-left: initial; - //glitch - padding: 8px 10px; - position: relative; - height: auto; - min-height: 48px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; - - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { - text-decoration: none; - } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } - } - - .notification__message { - margin: -10px -10px 10px; - } -} - -.status__relative-time { - //reset - float: initial; - //glitch - display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; - color: $ui-base-lighter-color; - font-size: 14px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.status__display-name { - margin: 0 auto 0 0; - color: $ui-base-lighter-color; - overflow: hidden; -} - -.status__info { - display: flex; - margin: 2px 0 5px; - font-size: 15px; - line-height: 24px; -} - -.status__info__icons { - flex: none; - position: relative; - color: lighten($ui-base-color, 26%); - - .status__visibility-icon { - padding-left: 6px; - } -} - -.status__prepend { - //reset - margin-left: initial; - padding: initial; - padding-bottom: initial; - //glitch - margin: -10px -10px 10px; - color: $ui-base-lighter-color; - padding: 8px 10px 0 68px; - font-size: 14px; - position: relative; -} - -.account { - color: inherit; - text-decoration: none; - - &.small { - border: none; - padding: 0; - - & > .account__avatar-wrapper { margin: 0 8px 0 0 } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } -} - -.account__avatar-wrapper { - //reset - margin-left: initial; - margin-right: initial; - //glitch - margin: 6px 16px 6px 6px; -} - -.account__header__wrapper { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); -} - -.account__header { - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } -} - -.status__avatar { - //reset - left: initial; - position: initial; - top: initial; - //glitch - flex: none; - margin: 0 10px 0 0; - height: 48px; - width: 48px; -} - -.display-name { - display: block; - padding: 6px 0; - max-width: 100%; - height: 36px; - overflow: hidden; - - strong { - display: block; - height: 18px; - font-size: 16px; - font-weight: 500; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - span { - display: block; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - &:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } - - > .scrollable { - background: $ui-base-color; - } -} - -.column-header__button { - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $ui-primary-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; -} - -.column-header__collapsible { - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } -} - -.media-spoiler { - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player - } - @include fullwidth-gallery; -} - -.boost-modal, -.favourite-modal, -.confirmation-modal, -.report-modal, -.actions-modal, -.mute-modal { - background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; - border-radius: 8px; - overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - flex-direction: column; - - .status__display-name { - //reset - display: initial; - max-width: initial; - padding-right: initial; - //glitch - display: flex; - } -} - -.boost-modal__container, -.favourite-modal__container { - overflow-x: scroll; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; - } -} - -.boost-modal__action-bar, -.favourite-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.report-modal__action-bar { - display: flex; - justify-content: space-between; - background: $ui-secondary-color; - padding: 10px; - line-height: 36px; - - & > div { - flex: 1 1 auto; - text-align: right; - color: lighten($ui-base-color, 33%); - padding-right: 10px; - } - - .button { - flex: 0 0 auto; - } -} - -.boost-modal__status-header, -.favourite-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time, -.favourite-modal__status-time { - float: right; - font-size: 14px; -} - -.actions-modal { - strong { - display: block; - font-weight: 500; - } -} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8910d000d3..21c2b89de9 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -304,10 +304,63 @@ .display-name { display: block; + padding: 6px 0; max-width: 100%; + height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } } .display-name__html { @@ -1127,6 +1180,25 @@ } } +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .wide & { + flex: auto; + min-width: 330px; + max-width: 400px; + } + + > .scrollable { + background: $ui-base-color; + } +} + .column-header__buttons { height: 48px; display: flex; @@ -1159,6 +1231,88 @@ background: lighten($ui-base-color, 8%); } } + + // glitch - added focus ring for keyboard navigation + &:focus { + text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + padding-left: 15px; // space for the box shadow to be visible + + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-left: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $ui-primary-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.column-header__notif-cleaning-buttons { + display: flex; + align-items: stretch; + justify-content: space-around; + + button { + @extend .column-header__button; + background: transparent; + text-align: center; + padding: 10px 0; + white-space: pre-wrap; + } + + b { + font-weight: bold; + } +} + +// The notifs drawer with no padding to have more space for the buttons +.column-header__collapsible-inner.nopad-drawer { + padding: 0; } .column-header__collapsible { @@ -1185,6 +1339,15 @@ border-top: 1px solid lighten($ui-base-color, 12%); margin: 10px 0; } + + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } } .column-header__collapsible-inner { @@ -1772,4 +1935,3 @@ noscript { @import 'list'; @import 'emoji_picker'; @import 'local_settings'; -@import 'glitch'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 1f283b9afa..764f1ad6b9 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -392,6 +392,7 @@ } .boost-modal, +.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -406,9 +407,7 @@ flex-direction: column; .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; + display: flex; } .status__avatar { @@ -433,7 +432,8 @@ } } -.boost-modal__container { +.boost-modal__container, +.favourite-modal__container { overflow-x: scroll; padding: 10px; @@ -444,6 +444,7 @@ } .boost-modal__action-bar, +.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .report-modal__action-bar { @@ -465,11 +466,13 @@ } } -.boost-modal__status-header { +.boost-modal__status-header, +.favourite-modal__status-header { font-size: 15px; } -.boost-modal__status-time { +.boost-modal__status-time, +.favourite-modal__status-time { float: right; font-size: 14px; } @@ -514,6 +517,11 @@ max-height: 300px; } + strong { + display: block; + font-weight: 500; + } + max-height: 80vh; max-width: 80vw; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 453923901e..22787ea94a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -3,13 +3,17 @@ } .status__content { + position: relative; + margin: 10px 0; + padding: 0 12px; font-size: 15px; line-height: 20px; + color: $primary-text-color; word-wrap: break-word; font-weight: 400; - overflow: hidden; + overflow: visible; white-space: pre-wrap; - padding-top: 2px; + padding-top: 5px; &:focus { outline: 0; @@ -64,6 +68,15 @@ } } + .status__content__spoiler { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + .status__content__spoiler-link { background: lighten($ui-base-color, 30%); @@ -76,7 +89,7 @@ .status__content__text { display: none; - &.status__content__text--visible { + &.status__content__spoiler--visible { display: block; } } @@ -85,20 +98,54 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: transparent; - border: 0; + background: lighten($ui-base-color, 30%); + border: none; color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; - padding: 0 6px; + padding: 0 5px; text-transform: uppercase; line-height: inherit; cursor: pointer; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } +} + +.notif-cleaning { + .status, .notification-follow { + padding-right: ($dismiss-overlay-width + 0.5rem); + } } .status__prepend-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; +} + +.notification-follow { + position: relative; + + // same like Status + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account { + border-bottom: 0 none; + } } .focusable { @@ -123,8 +170,8 @@ .status { padding: 8px 10px; - padding-left: 68px; position: relative; + height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -190,6 +237,41 @@ } } } + + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px -10px 10px; + } } } @@ -204,13 +286,22 @@ } .status__relative-time { + display: inline-block; + margin-left: auto; + padding-left: 18px; + width: 120px; color: $ui-base-lighter-color; - float: right; font-size: 14px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .status__display-name { + margin: 0 auto 0 0; color: $ui-base-lighter-color; + overflow: hidden; } .status__info .status__display-name { @@ -220,7 +311,20 @@ } .status__info { + display: flex; + margin: 2px 0 5px; font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + flex: none; + position: relative; + color: lighten($ui-base-color, 26%); + + .status__visibility-icon { + padding-left: 6px; + } } .status-check-box { @@ -233,6 +337,13 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + .status__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } } } @@ -245,10 +356,9 @@ } .status__prepend { - margin-left: 68px; + margin: -10px -10px 10px; color: $ui-base-lighter-color; - padding: 8px 0; - padding-bottom: 2px; + padding: 8px 10px 0 68px; font-size: 14px; position: relative; @@ -405,10 +515,9 @@ } .status__avatar { + flex: none; + margin: 0 10px 0 0; height: 48px; - left: 10px; - position: absolute; - top: 10px; width: 48px; }