From 31a965b4c4c6ed1b2aaa2beb7b2025b689c30772 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 28 Apr 2020 22:00:50 -0500 Subject: [PATCH] Start improving cobalt theme, refactor css --- app/gabsocial/actions/settings.js | 2 +- app/gabsocial/components/icon.js | 2 +- .../features/ui/components/tabs_bar.js | 7 +- app/styles/cobalt.scss | 81 +++- app/styles/gabsocial/about.scss | 1 + app/styles/gabsocial/components/tabs-bar.scss | 413 +++++++++--------- app/styles/gabsocial/forms.scss | 6 +- static/index.html | 2 +- 8 files changed, 295 insertions(+), 219 deletions(-) diff --git a/app/gabsocial/actions/settings.js b/app/gabsocial/actions/settings.js index df6c68f6d..59e839f05 100644 --- a/app/gabsocial/actions/settings.js +++ b/app/gabsocial/actions/settings.js @@ -20,7 +20,7 @@ const defaultSettings = ImmutableMap({ boostModal: false, deleteModal: true, defaultPrivacy: 'public', - theme: 'lime', + theme: 'cobalt', // locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales locale: 'en', diff --git a/app/gabsocial/components/icon.js b/app/gabsocial/components/icon.js index a93e8c773..9bf39abf9 100644 --- a/app/gabsocial/components/icon.js +++ b/app/gabsocial/components/icon.js @@ -16,7 +16,7 @@ export default class Icon extends React.PureComponent { // tag. There is a common adblocker rule which hides elements with // alt='retweet' unless the domain is twitter.com. This should // change what screenreaders call it as well. - var alt_id = (id === 'retweet') ? 'repost' : id; + const alt_id = (id === 'retweet') ? 'repost' : id; return ( ); diff --git a/app/gabsocial/features/ui/components/tabs_bar.js b/app/gabsocial/features/ui/components/tabs_bar.js index 7b46c18a7..de9499acd 100644 --- a/app/gabsocial/features/ui/components/tabs_bar.js +++ b/app/gabsocial/features/ui/components/tabs_bar.js @@ -12,6 +12,7 @@ import Avatar from '../../../components/avatar'; import ActionBar from 'gabsocial/features/compose/components/action_bar'; import { openModal } from '../../../actions/modal'; import { openSidebar } from '../../../actions/sidebar'; +import Icon from '../../../components/icon'; @withRouter class TabsBar extends React.PureComponent { @@ -71,20 +72,20 @@ class TabsBar extends React.PureComponent { } links.push( - + ); if (account) { links.push( - + ); } links.push( - + ); diff --git a/app/styles/cobalt.scss b/app/styles/cobalt.scss index 2273b070b..b91ddfd68 100644 --- a/app/styles/cobalt.scss +++ b/app/styles/cobalt.scss @@ -1,12 +1,14 @@ @import 'gabsocial-light/variables'; -$gab-brand-default: #1e00ff; -$gab-background-base-light: #f4f7ff; +// $gab-brand-default: lighten(#149dfb, 10%); +$gab-brand-default: #0482d8; +$gab-background-base-light: #f2f3f6; $gab-background: $gab-background-base-light; -$ui-base-color: #f4f7ff; +$ui-base-color: #d9eaf9; $ui-highlight-color: $gab-brand-default; -$nav-ui-highlight-color: #818dff; -$ui-base-lighter-color: darken(#818dff, 35%); +// $nav-ui-background-color: #000; +$nav-ui-highlight-color: #149dfb; +$ui-base-lighter-color: #b0c0cf; @import 'application'; @import 'gabsocial-light/diff'; @@ -14,3 +16,72 @@ $ui-base-lighter-color: darken(#818dff, 35%); .floating-action-button { filter: hue-rotate(-48deg); } + +.tabs-bar__link { + font-weight: bold; + transition: 0.1s; + outline: none; + + // &.active { + // color: darken(#04d8c4, 40%); + // } + // + // &:hover { + // color: darken(#04d8c4, 60%); + // } + + &::before { + // background-color: darken($nav-ui-highlight-color, 10%); + bottom: auto; + opacity: 0; + height: 15px; + border-radius: 999px; + z-index: -1; + width: calc(100% + 20px); + margin-left: -12px; + + @media screen and (max-width: 895px) { + height: 0; + border-radius: 3px 3px 0 0; + bottom: 0; + } + } + + &.active::before, + &:hover::before { + height: 30px; + opacity: 1; + + @media screen and (max-width: 895px) { + height: 7px; + width: 36px; + margin: 0; + } + } + +} + +.tabs-bar__split--left:hover .tabs-bar__link { + &::before { + height: 15px; + opacity: 0; + + @media screen and (max-width: 895px) { + height: 0; + } + } + + &:hover::before { + height: 30px; + opacity: 1; + + @media screen and (max-width: 895px) { + height: 7px; + } + } +} + +.search__input { + border-radius: 999px; + border: 0; +} diff --git a/app/styles/gabsocial/about.scss b/app/styles/gabsocial/about.scss index 27767ab2b..ac435ea46 100644 --- a/app/styles/gabsocial/about.scss +++ b/app/styles/gabsocial/about.scss @@ -746,6 +746,7 @@ $small-breakpoint: 960px; .brand { margin-right: auto !important; + line-height: normal; } img { diff --git a/app/styles/gabsocial/components/tabs-bar.scss b/app/styles/gabsocial/components/tabs-bar.scss index d67c6878e..4dfe8a2fa 100644 --- a/app/styles/gabsocial/components/tabs-bar.scss +++ b/app/styles/gabsocial/components/tabs-bar.scss @@ -1,223 +1,211 @@ +$nav-ui-background-color: $gab-brand-default !default; + .tabs-bar { - display: flex; - box-sizing: border-box; - background: $gab-brand-default; - flex: 0 0 auto; - overflow-y: auto; - height: 50px; - position: sticky; - top: 0; - z-index: 1000; - transition: transform 0.2s ease; + display: flex; + box-sizing: border-box; + background: $nav-ui-background-color; + flex: 0 0 auto; + overflow-y: auto; + height: 50px; + position: sticky; + top: 0; + z-index: 1000; + transition: transform 0.2s ease; - &--collapsed { - @media screen and (max-width: 895px) { - margin-top: -50px; - transform: translateY(-50px); - } - } + &--collapsed { + @media screen and (max-width: 895px) { + margin-top: -50px; + transform: translateY(-50px); + } + } - &__container { - display: flex; - box-sizing: border-box; - width:100%; - max-width: 1200px; - margin: 0 auto; - padding: 0 15px; + &__container { + display: flex; + box-sizing: border-box; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; - // NOTE - might need to adjust this based on column sizing - @media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;} - } + // NOTE - might need to adjust this based on column sizing + @media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;} + } - &__split { - display: flex; - width: auto; + &__split { + display: flex; + width: auto; - &--left { - margin-right: auto; - } + &--left { + margin-right: auto; + } - &--right { - margin-left: auto; - padding-top: 8px; - } - } + &--right { + margin-left: auto; + padding-top: 8px; + } + } - &__search-container { - display: block; - width: 251px; + &__search-container { + display: block; + width: 251px; - @media screen and (max-width: 895px) { - display: none; - } - } + @media screen and (max-width: 895px) { + display: none; + } + } - &__profile { - position: relative; - overflow: hidden; - margin: 0 0 0 20px; - height: 34px; - width: 34px; + &__profile { + position: relative; + overflow: hidden; + margin: 0 0 0 20px; + height: 34px; + width: 34px; - .account__avatar { - width: 34px; - height: 34px; - background-size: cover; - } + .account__avatar { + width: 34px; + height: 34px; + background-size: cover; + } - .compose__action-bar { - display: block; - position: absolute; - top: 0; - right: 0; - left: -5px; - bottom: 0; + .compose__action-bar { + display: block; + position: absolute; + top: 0; + right: 0; + left: -5px; + bottom: 0; - i { - display: none; - } + i { + display: none; + } - @media screen and (max-width: 895px) { - display: none; - } - } - } + @media screen and (max-width: 895px) { + display: none; + } + } + } - &__sidebar-btn { - display: block; - position: absolute; - top: 0; + &__sidebar-btn { + display: block; + position: absolute; + top: 0; right: 0; left: 0; bottom: 0; - width: 30px; - opacity: 0; + width: 30px; + opacity: 0; - @media (min-width: 895px) { - display: none; - } - } + @media (min-width: 895px) { + display: none; + } + } - &__page-name { - display: block; + &__page-name { + display: block; margin-left: 18px; line-height: 30px; font-weight: 600; font-size: 18px; - color: #fff; + color: #fff; - @media (min-width: 895px) { - display: none; - } - } + @media (min-width: 895px) { + display: none; + } + } - &__button-compose { - display: block; - @media screen and (max-width: $nav-breakpoint-3) {display: none;} - width: 70px; - height: 34px; - margin-left: 20px; - border-radius: 4px; - background-image: url('../images/sprite-main-navigation.png'); - background-color: $nav-ui-highlight-color !important; - background-repeat: no-repeat; - background-size: 161px 152px; - background-position: 18px 2px; - transition: background-color 0.2s; - &:hover { - background-color: darken($nav-ui-highlight-color, 10%) !important; - background-position: 18px -98px; - box-shadow: inset 0px 0px 6px darken($gab-brand-default, 10%); - } - span {display: none;} - } - - &__button { - margin-left: 12px; + &__button-compose { + display: block; + @media screen and (max-width: $nav-breakpoint-3) {display: none;} + width: 70px; height: 34px; - } + margin-left: 20px; + border-radius: 4px; + background-image: url('../images/sprite-main-navigation.png'); + background-color: $nav-ui-highlight-color !important; + background-repeat: no-repeat; + background-size: 161px 152px; + background-position: 18px 2px; + transition: background-color 0.2s; - .flex { - display: flex; - } + &:hover { + background-color: darken($nav-ui-highlight-color, 10%) !important; + background-position: 18px -98px; + box-shadow: inset 0 0 6px darken($gab-brand-default, 10%); + } + + span {display: none;} + } + + &__button { + margin-left: 12px; + height: 34px; + } + + .flex { + display: flex; + } } .tabs-bar__link { - display: flex; - flex: 1 1 auto; - margin: 0 20px 0 0; - color: white; - text-decoration: none; - position: relative; + display: flex; + flex: 1 1 auto; + margin: 0 20px 0 0; + color: #fff; + text-decoration: none; + position: relative; + align-items: center; + padding-right: 4px; - @media screen and (max-width: 895px) { - width: 36px; - margin: 4px 4px 0 0; - justify-content: center; + @media screen and (max-width: 895px) { + width: 36px; + margin: 4px 4px 0 0; + justify-content: center; - & > span {display: none;} - } + & > span {display: none;} + } - > span { - font-size: 15px; - line-height: 50px; + > span { + font-size: 15px; + line-height: 50px; margin-left: 4px; - } + } - &--search { - @media (min-width: 895px) { - display: none; - } - } + &--search { + @media (min-width: 895px) { + display: none; + } + } - &__icon { - width: 20px; - background-repeat: no-repeat; - background-image: url('../images/sprite-main-navigation-links.png'); - background-size: auto 84px; + i.fa { + font-size: 14px; + transform: translate(-1px, -1px); + transition: 0.1s; - @media screen and (max-width: 895px) { - width: 32px; - background-size: auto 120px; - } + @media screen and (max-width: 895px) { + font-size: 20px; + } - &.home { - background-position: 0 18px; - @media screen and (max-width: 895px) { - background-position: 4px 11px; - } - } - &.notifications { - background-position: -137px 18px; - @media screen and (max-width: 895px) { - background-position: -192px 11px; - } - } - &.groups { - background-position: -280px 18px; - @media screen and (max-width: 895px) { - background-position: -397px 11px; - } - } - &.tabs-bar__link__icon--search { - background-position: -697px 18px; - @media screen and (max-width: 895px) { - background-position: -992px 11px; - } - } - } + &.fa-home { + font-size: 18px; + transform: translate(-1px , -2px); - &.optional { - display: none; - @media screen and (max-width: $nav-breakpoint-2) { - display: flex; - background-position: -992px 11px; - } - } + @media screen and (max-width: 895px) { + font-size: 26px; + } + } + } - &::before { - content: ""; + &.optional { + display: none; + @media screen and (max-width: $nav-breakpoint-2) { + display: flex; + background-position: -992px 11px; + } + } + + &::before { + content: ""; display: block; width: 100%; height: 0; @@ -225,36 +213,47 @@ position: absolute; bottom: 0; left: 0; - transition: 0.2s; - } + transition: 0.2s; + } - &.active::before, - &:hover::before { - height: 7px; - } - &--logo { - display: block; - width: 80px; - height: 50px; - margin-right: 30px; - border: none; - background-repeat: no-repeat; - background-position: center; - background-size: 100% calc(100% - 25px); - filter: brightness(0%) grayscale(100%) invert(100%); - & span {display: none !important;} - &:hover { - border: none !important; - } + &.active::before, + &:hover::before { + height: 7px; + } + &--logo { + display: block; + width: 80px; + height: 50px; + margin-right: 30px; + border: 0; + background-repeat: no-repeat; + background-position: center; + background-size: 100% calc(100% - 25px); + filter: brightness(0%) grayscale(100%) invert(100%); + & span {display: none !important;} - } - &--no-highlight, - &--no-highlight:hover, - &--no-highlight.active, - &--no-highlight:active, - &--no-highlight:focus { - background: transparent !important; - border-bottom-color: transparent !important; - } + &:hover { + border: 0 !important; + } + } + + &--no-highlight, + &--no-highlight:hover, + &--no-highlight.active, + &--no-highlight:active, + &--no-highlight:focus { + background: transparent !important; + border-bottom-color: transparent !important; + } +} + +.tabs-bar__split--left:hover .tabs-bar__link { + &::before { + height: 0; + } + + &:hover::before { + height: 7px; + } } diff --git a/app/styles/gabsocial/forms.scss b/app/styles/gabsocial/forms.scss index bf0f43f1e..1d794fe1e 100644 --- a/app/styles/gabsocial/forms.scss +++ b/app/styles/gabsocial/forms.scss @@ -930,10 +930,14 @@ code { .captcha { background-color: #ffffff; - border-radius: 10px; + border-radius: 4px; img { display: table; margin: 0 auto; } + + input[type="text"] { + border-radius: 0 0 4px 4px; + } } diff --git a/static/index.html b/static/index.html index afefa32af..b0ab2ea80 100644 --- a/static/index.html +++ b/static/index.html @@ -9,7 +9,7 @@ - +