moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Start improving cobalt theme, refactor css

This commit is contained in:
Alex Gleason 2020-04-28 22:00:50 -05:00
parent c0f17cfc21
commit 31a965b4c4
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
8 changed files with 295 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/gabsocial/actions/settings.js
View File

@ -20,7 +20,7 @@ const defaultSettings = ImmutableMap({
boostModal: false, boostModal: false,
deleteModal: true, deleteModal: true,
defaultPrivacy: 'public', defaultPrivacy: 'public',
theme: 'lime', theme: 'cobalt',
// locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales // locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
locale: 'en', locale: 'en',

2
app/gabsocial/components/icon.js
View File

@ -16,7 +16,7 @@ export default class Icon extends React.PureComponent {
// tag. There is a common adblocker rule which hides elements with // tag. There is a common adblocker rule which hides elements with
// alt='retweet' unless the domain is twitter.com. This should // alt='retweet' unless the domain is twitter.com. This should
// change what screenreaders call it as well. // change what screenreaders call it as well.
var alt_id = (id === 'retweet') ? 'repost' : id; const alt_id = (id === 'retweet') ? 'repost' : id;
return ( return (
<i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} /> <i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
); );

7
app/gabsocial/features/ui/components/tabs_bar.js
View File

@ -12,6 +12,7 @@ import Avatar from '../../../components/avatar';
import ActionBar from 'gabsocial/features/compose/components/action_bar'; import ActionBar from 'gabsocial/features/compose/components/action_bar';
import { openModal } from '../../../actions/modal'; import { openModal } from '../../../actions/modal';
import { openSidebar } from '../../../actions/sidebar'; import { openSidebar } from '../../../actions/sidebar';
import Icon from '../../../components/icon';
@withRouter @withRouter
class TabsBar extends React.PureComponent { class TabsBar extends React.PureComponent {
@ -71,20 +72,20 @@ class TabsBar extends React.PureComponent {
} }
links.push( links.push(
<NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home'> <NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home'>
<i className='tabs-bar__link__icon home' /> <Icon id='home' />
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink>); </NavLink>);
if (account) { if (account) {
links.push( links.push(
<NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'> <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
<i className='tabs-bar__link__icon notifications' /> <Icon id='bell' />
<NotificationsCounterIcon /> <NotificationsCounterIcon />
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
</NavLink>); </NavLink>);
} }
links.push( links.push(
<NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'> <NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
<i className='tabs-bar__link__icon tabs-bar__link__icon--search' /> <Icon id='search' />
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' /> <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</NavLink> </NavLink>
); );

81
app/styles/cobalt.scss
View File

@ -1,12 +1,14 @@
@import 'gabsocial-light/variables'; @import 'gabsocial-light/variables';
$gab-brand-default: #1e00ff; // $gab-brand-default: lighten(#149dfb, 10%);
$gab-background-base-light: #f4f7ff; $gab-brand-default: #0482d8;
$gab-background-base-light: #f2f3f6;
$gab-background: $gab-background-base-light; $gab-background: $gab-background-base-light;
$ui-base-color: #f4f7ff; $ui-base-color: #d9eaf9;
$ui-highlight-color: $gab-brand-default; $ui-highlight-color: $gab-brand-default;
$nav-ui-highlight-color: #818dff; // $nav-ui-background-color: #000;
$ui-base-lighter-color: darken(#818dff, 35%); $nav-ui-highlight-color: #149dfb;
$ui-base-lighter-color: #b0c0cf;
@import 'application'; @import 'application';
@import 'gabsocial-light/diff'; @import 'gabsocial-light/diff';
@ -14,3 +16,72 @@ $ui-base-lighter-color: darken(#818dff, 35%);
.floating-action-button { .floating-action-button {
filter: hue-rotate(-48deg); 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;
}

1
app/styles/gabsocial/about.scss
View File

@ -746,6 +746,7 @@ $small-breakpoint: 960px;
.brand { .brand {
margin-right: auto !important; margin-right: auto !important;
line-height: normal;
} }
img { img {

413
app/styles/gabsocial/components/tabs-bar.scss
View File

@ -1,223 +1,211 @@
$nav-ui-background-color: $gab-brand-default !default;
.tabs-bar { .tabs-bar {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
background: $gab-brand-default; background: $nav-ui-background-color;
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
height: 50px; height: 50px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
transition: transform 0.2s ease; transition: transform 0.2s ease;
&--collapsed { &--collapsed {
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
margin-top: -50px; margin-top: -50px;
transform: translateY(-50px); transform: translateY(-50px);
} }
} }
&__container { &__container {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width:100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 15px; padding: 0 15px;
// NOTE - might need to adjust this based on column sizing // NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;} @media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;}
} }
&__split { &__split {
display: flex; display: flex;
width: auto; width: auto;
&--left { &--left {
margin-right: auto; margin-right: auto;
} }
&--right { &--right {
margin-left: auto; margin-left: auto;
padding-top: 8px; padding-top: 8px;
} }
} }
&__search-container { &__search-container {
display: block; display: block;
width: 251px; width: 251px;
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
display: none; display: none;
} }
} }
&__profile { &__profile {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 0 0 0 20px; margin: 0 0 0 20px;
height: 34px; height: 34px;
width: 34px; width: 34px;
.account__avatar { .account__avatar {
width: 34px; width: 34px;
height: 34px; height: 34px;
background-size: cover; background-size: cover;
} }
.compose__action-bar { .compose__action-bar {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: -5px; left: -5px;
bottom: 0; bottom: 0;
i { i {
display: none; display: none;
} }
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
display: none; display: none;
} }
} }
} }
&__sidebar-btn { &__sidebar-btn {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 30px; width: 30px;
opacity: 0; opacity: 0;
@media (min-width: 895px) { @media (min-width: 895px) {
display: none; display: none;
} }
} }
&__page-name { &__page-name {
display: block; display: block;
margin-left: 18px; margin-left: 18px;
line-height: 30px; line-height: 30px;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
@media (min-width: 895px) { @media (min-width: 895px) {
display: none; display: none;
} }
} }
&__button-compose { &__button-compose {
display: block; display: block;
@media screen and (max-width: $nav-breakpoint-3) {display: none;} @media screen and (max-width: $nav-breakpoint-3) {display: none;}
width: 70px; 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;
height: 34px; 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 { &:hover {
display: flex; 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 { .tabs-bar__link {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
margin: 0 20px 0 0; margin: 0 20px 0 0;
color: white; color: #fff;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
align-items: center;
padding-right: 4px;
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
width: 36px; width: 36px;
margin: 4px 4px 0 0; margin: 4px 4px 0 0;
justify-content: center; justify-content: center;
& > span {display: none;} & > span {display: none;}
} }
> span { > span {
font-size: 15px; font-size: 15px;
line-height: 50px; line-height: 50px;
margin-left: 4px; margin-left: 4px;
} }
&--search { &--search {
@media (min-width: 895px) { @media (min-width: 895px) {
display: none; display: none;
} }
} }
&__icon { i.fa {
width: 20px; font-size: 14px;
background-repeat: no-repeat; transform: translate(-1px, -1px);
background-image: url('../images/sprite-main-navigation-links.png'); transition: 0.1s;
background-size: auto 84px;
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
width: 32px; font-size: 20px;
background-size: auto 120px; }
}
&.home { &.fa-home {
background-position: 0 18px; font-size: 18px;
@media screen and (max-width: 895px) { transform: translate(-1px , -2px);
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;
}
}
}
&.optional { @media screen and (max-width: 895px) {
display: none; font-size: 26px;
@media screen and (max-width: $nav-breakpoint-2) { }
display: flex; }
background-position: -992px 11px; }
}
}
&::before { &.optional {
content: ""; display: none;
@media screen and (max-width: $nav-breakpoint-2) {
display: flex;
background-position: -992px 11px;
}
}
&::before {
content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 0; height: 0;
@ -225,36 +213,47 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
transition: 0.2s; transition: 0.2s;
} }
&.active::before, &.active::before,
&:hover::before { &:hover::before {
height: 7px; 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;
}
&--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;}
} &:hover {
&--no-highlight, border: 0 !important;
&--no-highlight:hover, }
&--no-highlight.active, }
&--no-highlight:active,
&--no-highlight:focus { &--no-highlight,
background: transparent !important; &--no-highlight:hover,
border-bottom-color: transparent !important; &--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;
}
} }

6
app/styles/gabsocial/forms.scss
View File

@ -930,10 +930,14 @@ code {
.captcha { .captcha {
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 4px;
img { img {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
} }
input[type="text"] {
border-radius: 0 0 4px 4px;
}
} }

2
static/index.html
View File

@ -9,7 +9,7 @@
<script src="/packs/js/common.js"></script> <script src="/packs/js/common.js"></script>
<script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></script> <script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></script>
<script src="/packs/js/application.chunk.js"></script> <script src="/packs/js/application.chunk.js"></script>
<link rel="stylesheet" href="/packs/css/lime.chunk.css" data-react-helmet="true"> <link rel="stylesheet" href="/packs/css/cobalt.chunk.css" data-react-helmet="true">
</head> </head>
<body class="app-body"> <body class="app-body">
<noscript>To use Soapbox, please enable JavaScript.</noscript> <noscript>To use Soapbox, please enable JavaScript.</noscript>