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 @@
-
+