From c424df5192f346dba5332a4b3a2de43b2f028e0c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Feb 2017 01:20:09 +0100 Subject: Progress on moving color styles to Sass --- app/assets/stylesheets/components.scss | 268 +++++++++++++++++++++++++++++++++ 1 file changed, 268 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 13df099b1..6bb683f17 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -77,6 +77,25 @@ color: $color1; } +.compose-form__label { + display: block; + line-height: 24px; + vertical-align: middle; + + &.with-border { + border-top: 1px solid $color1; + padding-top: 10px; + } + + .compose-form__label__text { + display: inline-block; + vertical-align: middle; + margin-bottom: 14px; + margin-left: 8px; + color: $color3; + } +} + .compose-form__textarea, .follow-form__input { background: $color5; @@ -98,6 +117,15 @@ } } +.reply-indicator { + background: $color3; + padding: 10px; + + .reply-indicator__display-name { + color: $color1; + } +} + .status__content, .reply-indicator__content { font-size: 15px; line-height: 20px; @@ -156,6 +184,47 @@ } } +a.status__content__spoiler-link { + display: inline-block; + border-radius: 2px; + color: lighten($color1, 6%); + font-weight: 500; + font-size: 11px; + padding: 0px 6px; + text-transform: uppercase; + line-height: inherit; +} + +.status { + padding: 8px 10px; + padding-left: 68px; + position: relative; + min-height: 48px; + border-bottom: 1px solid lighten($color1, 6%); + cursor: default; + + .status__relative-time { + color: lighten($color1, 26%); + } + + .status__display-name { + color: lighten($color1, 26%); + } +} + +.status__prepend { + margin-left: 68px; + color: lighten($color1, 26%); + padding: 8px 0; + padding-bottom: 2px; + font-size: 14px; + position: relative; + + .status__display-name strong { + color: lighten($color1, 26%); + } +} + .detailed-status { .status__content { font-size: 19px; @@ -168,6 +237,15 @@ } } +.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%); + padding: 10px 0; +} + .reply-indicator__content { color: $color1; font-size: 14px; @@ -177,6 +255,45 @@ } } +.account { + padding: 10px; + border-bottom: 1px solid lighten($color1, 6%); + + .account__display-name { + flex: 1 1 auto; + display: block; + color: $color3; + overflow: hidden; + text-decoration: none; + font-size: 14px; + } +} + +.account__header { + flex: 0 0 auto; + background: lighten($color1, 4%); + text-align: center; + background-size: cover; + background-position: center; + position: relative; + + & > div { + background: rgba(lighten($color1, 4%), 0.9); + } + + .account__header__content { + color: $color2; + } + + .account__header__display-name { + color: $color5; + } + + .account__header__username { + color: $color4; + } +} + .account__header__content { word-wrap: break-word; font-weight: 400; @@ -207,6 +324,37 @@ } } +.account__action-bar { + border-top: 1px solid lighten($color1, 6%); + border-bottom: 1px solid lighten($color1, 6%); + line-height: 36px; + overflow: hidden; + flex: 0 0 auto; + display: flex; +} + +.account__action-bar__tab { + text-decoration: none; + overflow: hidden; + width: 80px; + border-left: 1px solid lighten($color1, 6%); + padding: 10px 5px; + + & > span { + display: block; + text-transform: uppercase; + font-size: 11px; + color: $color3; + } + + strong { + display: block; + font-size: 15px; + font-weight: 500; + color: $color5; + } +} + .status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name { text-decoration: none; } @@ -298,6 +446,18 @@ display: block; } +.navigation-bar { + padding: 10px; + display: flex; + flex-shrink: 0; + cursor: default; + color: $color3; + + strong { + color: $color5; + } +} + .dropdown { display: inline-block; } @@ -381,10 +541,39 @@ .column { width: 330px; position: relative; + box-sizing: border-box; + background: $color1; + display: flex; + flex-direction: column; +} + +.ui { + flex: 0 0 auto; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: darken($color1, 7%); } .drawer { width: 280px; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow-y: hidden; +} + +.drawer__tab { + display: block; + flex: 1 1 auto; + padding: 15px; + padding-bottom: 13px; + color: $color3; + text-decoration: none; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; } @media screen and (min-width: 2560px) { @@ -402,6 +591,12 @@ .drawer__inner { background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65)); + box-sizing: border-box; + padding: 0; + display: flex; + flex-direction: column; + overflow-y: auto; + flex-grow: 1; } .drawer__header { @@ -451,6 +646,26 @@ .tabs-bar { display: flex; + background: lighten($color1, 6%); + flex: 0 0 auto; + overflow-y: auto; +} + +.tabs-bar__link { + display: block; + flex: 1 1 auto; + padding: 10px 5px; + color: $color5; + text-decoration: none; + text-align: center; + font-size:12px; + font-weight: 500; + border-bottom: 2px solid lighten($color1, 6%); + + &.active { + border-bottom: 2px solid $color4; + color: $color4; + } } @media screen and (min-width: 360px) { @@ -516,6 +731,13 @@ } .column-back-button { + padding: 15px; + font-size: 16px; + background: lighten($color1, 4%); + flex: 0 0 auto; + cursor: pointer; + color: $color4; + &:hover { text-decoration: underline; } @@ -699,6 +921,10 @@ p { color: $color2; } + + a { + color: lighten($color1, 26%); + } } .dropdown__content.dropdown__left { @@ -748,7 +974,49 @@ button.active i.fa-retweet { } .load-more { + display: block; + color: lighten($color1, 26%); + text-align: center; + padding: 15px; + text-decoration: none; + &:hover { background: lighten($color1, 6%); } } + +.missing-indicator { + text-align: center; + font-size: 16px; + font-weight: 500; + color: lighten($color1, 26%); + padding-top: 120px; +} + +.column-header { + padding: 15px; + font-size: 16px; + background: lighten($color1, 4%); + flex: 0 0 auto; + cursor: pointer; +} + +.search { + .fa { + color: $color3; + } +} + +.search__input { + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + padding-right: 30px; + font-family: inherit; + background: $color1; + color: $color3; + font-size: 14px; + margin: 0; +} -- cgit