Start improving cobalt theme, refactor css
This commit is contained in:
Alex Gleason
parent
c0f17cfc21
commit
31a965b4c4
8 changed files with 295 additions and 219 deletions
|
|
@ -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',
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<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' />
|
||||
</NavLink>);
|
||||
if (account) {
|
||||
links.push(
|
||||
<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 />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>);
|
||||
}
|
||||
links.push(
|
||||
<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' />
|
||||
</NavLink>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -746,6 +746,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
.brand {
|
||||
margin-right: auto !important;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script src="/packs/js/common.js"></script>
|
||||
<script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></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>
|
||||
<body class="app-body">
|
||||
<noscript>To use Soapbox, please enable JavaScript.</noscript>
|
||||
|
|
|
|||
Loading…
Reference in a new issue