From c9f42a7b851ed80442cbfba8ba4a3a0ec062f8da Mon Sep 17 00:00:00 2001 From: Lorenz Diener Date: Fri, 10 Feb 2017 15:35:19 +0000 Subject: Move more inline colours to scss --- app/assets/stylesheets/components.scss | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/components.scss') diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 6bb683f17..6c2e45755 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -34,7 +34,8 @@ .column-icon { color: $color3; - + background: lighten($color1, 4%); + &:hover { color: lighten($color3, 7%); } @@ -883,6 +884,7 @@ a.status__content__spoiler-link { .autosuggest-textarea__textarea { height: 100px; + background: $color5; } .autosuggest-textarea__suggestions { @@ -1020,3 +1022,23 @@ button.active i.fa-retweet { font-size: 14px; margin: 0; } + +.loading-indicator { + color: #616b86; + color: #00FF00; +} + +.collapsable-collapsed { + color: $color3; + background: lighten($color1, 4%); +} + +.collapsable { + color: $color5; + background: lighten($color1, 6%); +} + +.media-spoiler { + background: $color8; + color: $color5; +} -- cgit From cbb962fd77db1a7deb79128ae777c3bc647ad089 Mon Sep 17 00:00:00 2001 From: Lorenz Diener Date: Fri, 10 Feb 2017 16:30:06 +0000 Subject: Move more colours to scss --- .../features/account/components/header.jsx | 2 +- .../components/account_authorize.jsx | 7 +-- .../home_timeline/components/column_settings.jsx | 8 ++-- .../notifications/components/column_settings.jsx | 12 ++--- .../notifications/components/setting_toggle.jsx | 5 +- .../features/status/components/detailed_status.jsx | 2 +- .../features/ui/components/column_link.jsx | 1 - .../features/ui/containers/modal_container.jsx | 9 ++-- app/assets/stylesheets/components.scss | 54 ++++++++++++++++++---- 9 files changed, 61 insertions(+), 39 deletions(-) (limited to 'app/assets/stylesheets/components.scss') diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx index b2d943c1c..a4f0ca768 100644 --- a/app/assets/javascripts/components/features/account/components/header.jsx +++ b/app/assets/javascripts/components/features/account/components/header.jsx @@ -35,7 +35,7 @@ const Header = React.createClass({ } if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) { - info = + info = } if (me !== account.get('id')) { diff --git a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx index 0d41d192f..1766655c2 100644 --- a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx +++ b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx @@ -16,11 +16,8 @@ const outerStyle = { }; const panelStyle = { - background: '#2f3441', display: 'flex', flexDirection: 'row', - borderTop: '1px solid #363c4b', - borderBottom: '1px solid #363c4b', padding: '10px 0' }; @@ -40,10 +37,10 @@ const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => { -
+
-
+
diff --git a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx index 714be309b..3317210bf 100644 --- a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx +++ b/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx @@ -10,7 +10,6 @@ const messages = defineMessages({ }); const outerStyle = { - background: '#373b4a', padding: '15px' }; @@ -18,7 +17,6 @@ const sectionStyle = { cursor: 'default', display: 'block', fontWeight: '500', - color: '#9baec8', marginBottom: '10px' }; @@ -42,8 +40,8 @@ const ColumnSettings = React.createClass({ return ( -
- +
+
} /> @@ -53,7 +51,7 @@ const ColumnSettings = React.createClass({ } />
- +
diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx index b63c1881a..f1b8ef57f 100644 --- a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx +++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx @@ -5,7 +5,6 @@ import ColumnCollapsable from '../../../components/column_collapsable'; import SettingToggle from './setting_toggle'; const outerStyle = { - background: '#373b4a', padding: '15px' }; @@ -13,7 +12,6 @@ const sectionStyle = { cursor: 'default', display: 'block', fontWeight: '500', - color: '#9baec8', marginBottom: '10px' }; @@ -40,8 +38,8 @@ const ColumnSettings = React.createClass({ return ( -
- +
+
@@ -49,7 +47,7 @@ const ColumnSettings = React.createClass({
- +
@@ -57,7 +55,7 @@ const ColumnSettings = React.createClass({
- +
@@ -65,7 +63,7 @@ const ColumnSettings = React.createClass({
- +
diff --git a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx index c2438f716..eae3c2be2 100644 --- a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx +++ b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx @@ -11,14 +11,13 @@ const labelSpanStyle = { display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', - marginLeft: '8px', - color: '#9baec8' + marginLeft: '8px' }; const SettingToggle = ({ settings, settingKey, label, onChange }) => ( ); diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index f2d6ae48a..6080c9ccd 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -52,7 +52,7 @@ const DetailedStatus = React.createClass({ } return ( -
+
diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx index 901a29f5c..2bd1e1017 100644 --- a/app/assets/javascripts/components/features/ui/components/column_link.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx @@ -4,7 +4,6 @@ const outerStyle = { display: 'block', padding: '15px', fontSize: '16px', - color: '#fff', textDecoration: 'none' }; diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx index 334e5c199..4c47fb8c5 100644 --- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx @@ -41,13 +41,12 @@ const imageStyle = { }; const loadingStyle = { - background: '#373b4a', width: '400px', paddingBottom: '120px' }; const preloader = () => ( -
+
); @@ -57,7 +56,6 @@ const leftNavStyle = { background: 'rgba(0, 0, 0, 0.5)', padding: '30px 15px', cursor: 'pointer', - color: '#fff', fontSize: '24px', top: '0', left: '-61px', @@ -72,7 +70,6 @@ const rightNavStyle = { background: 'rgba(0, 0, 0, 0.5)', padding: '30px 15px', cursor: 'pointer', - color: '#fff', fontSize: '24px', top: '0', right: '-61px', @@ -143,11 +140,11 @@ const Modal = React.createClass({ leftNav = rightNav = ''; if (hasLeft) { - leftNav =
; + leftNav =
; } if (hasRight) { - rightNav =
; + rightNav =
; } return ( diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 6c2e45755..faad9ee58 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -227,6 +227,8 @@ a.status__content__spoiler-link { } .detailed-status { + background: lighten($color1, 4%); + .status__content { font-size: 19px; line-height: 24px; @@ -299,7 +301,8 @@ a.status__content__spoiler-link { word-wrap: break-word; font-weight: 400; overflow: hidden; - + color: $color3; + p { margin-bottom: 20px; @@ -852,7 +855,8 @@ a.status__content__spoiler-link { .column-link { background: lighten($color1, 6%); - + color: $color5; + &:hover { background: lighten($color1, 11%); } @@ -1024,21 +1028,51 @@ button.active i.fa-retweet { } .loading-indicator { - color: #616b86; - color: #00FF00; + color: $color2; } .collapsable-collapsed { - color: $color3; - background: lighten($color1, 4%); + color: $color3; + background: lighten($color1, 4%); } .collapsable { - color: $color5; - background: lighten($color1, 6%); + color: $color5; + background: lighten($color1, 6%); } .media-spoiler { - background: $color8; - color: $color5; + background: $color8; + color: $color5; +} + +.modal-container--preloader { + background: lighten($color1, 6%); +} + +.account--panel { + background: lighten($color1, 4%); + border-top: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 6%); +} + +.column-settings--outer { + background: lighten($color1, 6%); +} + +.column-settings--section { + color: $color3; } + +.modal-container--nav { + color: $color5; +} + +.account--follows-info { + color: $color5; +} + +.setting-toggle { + color: $color3; +} + -- cgit From 5c4c046132da522887b11143d06eb5bec0f5f677 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 10 Feb 2017 22:58:29 +0100 Subject: Finish up moving colors from JSX to Sass (#584, #348) --- .../notifications/components/notification.jsx | 20 ++--- .../components/features/status/components/card.jsx | 43 ++-------- .../features/status/components/detailed_status.jsx | 2 +- app/assets/stylesheets/components.scss | 96 ++++++++++++++++------ app/assets/stylesheets/stream_entries.scss | 8 +- 5 files changed, 89 insertions(+), 80 deletions(-) (limited to 'app/assets/stylesheets/components.scss') diff --git a/app/assets/javascripts/components/features/notifications/components/notification.jsx b/app/assets/javascripts/components/features/notifications/components/notification.jsx index 140ba9134..fa8466140 100644 --- a/app/assets/javascripts/components/features/notifications/components/notification.jsx +++ b/app/assets/javascripts/components/features/notifications/components/notification.jsx @@ -7,16 +7,6 @@ import Permalink from '../../../components/permalink'; import emojify from '../../../emoji'; import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser'; -const messageStyle = { - marginLeft: '68px', - padding: '8px 0', - paddingBottom: '0', - cursor: 'default', - color: '#d9e1e8', - fontSize: '15px', - position: 'relative' -}; - const linkStyle = { fontWeight: '500' }; @@ -32,9 +22,9 @@ const Notification = React.createClass({ renderFollow (account, link) { return (
-
+
- +
@@ -52,7 +42,7 @@ const Notification = React.createClass({ renderFavourite (notification, link) { return (
-
+
@@ -68,9 +58,9 @@ const Notification = React.createClass({ renderReblog (notification, link) { return (
-
+
- +
diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx index ccb06dfd5..1bb281c70 100644 --- a/app/assets/javascripts/components/features/status/components/card.jsx +++ b/app/assets/javascripts/components/features/status/components/card.jsx @@ -1,18 +1,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -const outerStyle = { - display: 'flex', - cursor: 'pointer', - fontSize: '14px', - border: '1px solid #363c4b', - borderRadius: '4px', - color: '#616b86', - marginTop: '14px', - textDecoration: 'none', - overflow: 'hidden' -}; - const contentStyle = { flex: '1 1 auto', padding: '8px', @@ -20,25 +8,6 @@ const contentStyle = { overflow: 'hidden' }; -const titleStyle = { - display: 'block', - fontWeight: '500', - marginBottom: '5px', - color: '#d9e1e8', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap' -}; - -const descriptionStyle = { - color: '#d9e1e8' -}; - -const imageOuterStyle = { - flex: '0 0 100px', - background: '#373b4a' -}; - const imageStyle = { display: 'block', width: '100%', @@ -77,20 +46,20 @@ const Card = React.createClass({ if (card.get('image')) { image = ( -
+
{card.get('title')}
); } return ( - + {image} -
- {card.get('title')} -

{card.get('description').substring(0, 50)}

- {getHostname(card.get('url'))} +
+ {card.get('title')} +

{card.get('description').substring(0, 50)}

+ {getHostname(card.get('url'))}
); diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index 6080c9ccd..8a7c0c5d5 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({ {media} -
+
{applicationLink} · ·
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index faad9ee58..c60ca0291 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -35,7 +35,7 @@ .column-icon { color: $color3; background: lighten($color1, 4%); - + &:hover { color: lighten($color3, 7%); } @@ -188,7 +188,7 @@ a.status__content__spoiler-link { display: inline-block; border-radius: 2px; - color: lighten($color1, 6%); + color: lighten($color1, 8%); font-weight: 500; font-size: 11px; padding: 0px 6px; @@ -201,7 +201,7 @@ a.status__content__spoiler-link { padding-left: 68px; position: relative; min-height: 48px; - border-bottom: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 8%); cursor: default; .status__relative-time { @@ -228,7 +228,7 @@ a.status__content__spoiler-link { .detailed-status { background: lighten($color1, 4%); - + .status__content { font-size: 19px; line-height: 24px; @@ -240,12 +240,19 @@ a.status__content__spoiler-link { } } +.detailed-status__meta { + margin-top: 15px; + color: lighten($color1, 26%); + font-size: 14px; + line-height: 18px; +} + .detailed-status__action-bar { background: lighten($color1, 4%); display: flex; flex-direction: row; - border-top: 1px solid lighten($color1, 6%); - border-bottom: 1px solid lighten($color1, 6%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); padding: 10px 0; } @@ -260,7 +267,7 @@ a.status__content__spoiler-link { .account { padding: 10px; - border-bottom: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 8%); .account__display-name { flex: 1 1 auto; @@ -302,7 +309,7 @@ a.status__content__spoiler-link { font-weight: 400; overflow: hidden; color: $color3; - + p { margin-bottom: 20px; @@ -329,8 +336,8 @@ a.status__content__spoiler-link { } .account__action-bar { - border-top: 1px solid lighten($color1, 6%); - border-bottom: 1px solid lighten($color1, 6%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); line-height: 36px; overflow: hidden; flex: 0 0 auto; @@ -341,7 +348,7 @@ a.status__content__spoiler-link { text-decoration: none; overflow: hidden; width: 80px; - border-left: 1px solid lighten($color1, 6%); + border-left: 1px solid lighten($color1, 8%); padding: 10px 5px; & > span { @@ -426,6 +433,20 @@ a.status__content__spoiler-link { } } +.notification__message { + margin-left: 68px; + padding: 8px 0; + padding-bottom: 0; + cursor: default; + color: $color3; + font-size: 15px; + position: relative; + + .fa { + color: $color4; + } +} + .notification__display-name { color: inherit; text-decoration: none; @@ -650,7 +671,7 @@ a.status__content__spoiler-link { .tabs-bar { display: flex; - background: lighten($color1, 6%); + background: lighten($color1, 8%); flex: 0 0 auto; overflow-y: auto; } @@ -664,7 +685,7 @@ a.status__content__spoiler-link { text-align: center; font-size:12px; font-weight: 500; - border-bottom: 2px solid lighten($color1, 6%); + border-bottom: 2px solid lighten($color1, 8%); &.active { border-bottom: 2px solid $color4; @@ -854,9 +875,9 @@ a.status__content__spoiler-link { } .column-link { - background: lighten($color1, 6%); + background: lighten($color1, 8%); color: $color5; - + &:hover { background: lighten($color1, 11%); } @@ -974,11 +995,40 @@ button.active i.fa-retweet { } .status-card { + display: flex; + cursor: pointer; + font-size: 14px; + border: 1px solid lighten($color1, 8%); + border-radius: 4px; + color: lighten($color1, 26%); + margin-top: 14px; + text-decoration: none; + overflow: hidden; + &:hover { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } } +.status-card__title { + display: block; + font-weight: 500; + margin-bottom: 5px; + color: $color3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-card__description { + color: $color3; +} + +.status-card__image { + flex: 0 0 100px; + background: lighten($color1, 8%); +} + .load-more { display: block; color: lighten($color1, 26%); @@ -987,7 +1037,7 @@ button.active i.fa-retweet { text-decoration: none; &:hover { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } } @@ -1037,8 +1087,8 @@ button.active i.fa-retweet { } .collapsable { - color: $color5; - background: lighten($color1, 6%); + color: $color5; + background: lighten($color1, 8%); } .media-spoiler { @@ -1047,17 +1097,17 @@ button.active i.fa-retweet { } .modal-container--preloader { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } .account--panel { background: lighten($color1, 4%); - border-top: 1px solid lighten($color1, 6%); - border-bottom: 1px solid lighten($color1, 6%); + border-top: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($color1, 8%); } .column-settings--outer { - background: lighten($color1, 6%); + background: lighten($color1, 8%); } .column-settings--section { diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss index 595275527..d427c1466 100644 --- a/app/assets/stylesheets/stream_entries.scss +++ b/app/assets/stylesheets/stream_entries.scss @@ -5,24 +5,24 @@ .entry { background: lighten($color2, 8%); - &, .detailed-status.light { + .detailed-status.light, .status.light { border-bottom: 1px solid $color2; } &:last-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-bottom: 0; border-radius: 0 0 4px 4px; } } &:first-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-radius: 4px 4px 0 0; } &:last-child { - &, .detailed-status.light { + &, .detailed-status.light, .status.light { border-radius: 4px; } } -- cgit From 8cca6bc58c1d5b42e5acdce294ddbe048f0c5e85 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 10 Feb 2017 23:01:02 +0100 Subject: Fix spoiler link color in muted context --- app/assets/stylesheets/components.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/components.scss') diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index c60ca0291..f0948b0f3 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -423,8 +423,9 @@ a.status__content__spoiler-link { opacity: 0.5; } - .status__content__spoiler-link { + a.status__content__spoiler-link { background: lighten($color1, 26%); + color: lighten($color1, 4%); &:hover { background: lighten($color1, 29%); -- cgit