random-mirrors
/
gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit

This commit is contained in:
mgabdev 2019-09-16 19:31:30 -04:00
parent 293c6502da
commit deb9ed29bd
43 changed files with 1285 additions and 7786 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/gabsocial/containers/gabsocial.js
View File

@ -15,7 +15,6 @@ import { getLocale } from '../locales';
import initialState from '../initial_state';
import { me } from '../initial_state';
import ErrorBoundary from '../components/error_boundary';
// import { whyDidYouUpdate } from 'why-did-you-update';
import '../../styles/gabsocial/components.scss';
import '../../styles/gabsocial/components/buttons.scss';
@ -84,10 +83,6 @@ class GabSocialMount extends PureComponent {
}
// whyDidYouUpdate(React);
// whyDidYouUpdate(React, { groupByComponent: true, collapseComponentGroups: false });
// whyDidYouUpdate(React, { exclude: [/^Connect|Link|NavLink|Route/] });
export default class GabSocial extends PureComponent {
static propTypes = {

10
app/javascript/styles/contrast/diff.scss
View File

@ -58,16 +58,6 @@
}
}
.getting-started__footer a {
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
.nothing-here {
color: $darker-text-color;
}

7
app/javascript/styles/gabsocial-light/diff.scss
View File

@ -5,7 +5,7 @@
.button {
color: $white;
&.button-alternative-2 {
&.button--alternative-2 {
color: $white;
}
}
@ -79,7 +79,7 @@
}
.detailed-status,
.detailed-status__action-bar {
.detailed-status-action-bar {
background: darken($ui-base-color, 6%);
}
@ -214,7 +214,6 @@
}
// Change the default color used for the text in an empty column or on the error column
.empty-column-indicator,
.error-column {
color: $primary-text-color;
background: $white;
@ -317,7 +316,7 @@
}
}
.account__section-headline a.active::after {
.account-section-headline a.active::after {
border-color: transparent transparent $white;
}

93
app/javascript/styles/gabsocial/_mixins.scss
View File

@ -1,93 +0,0 @@
// NEW GAB SPECIFIC MIXINS
// THEME MIXINS
// standard container drop shadow
@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
// common properties for all standard containers
@mixin gab-container-standards() {
border-radius: 10px;
background: $gab-background-container;
body.theme-gabsocial-light & {
@include light-theme-shadow();
background: $gab-background-container-light;
}
}
// SHORTCUTS
@mixin input-placeholder($color) {
&::-webkit-input-placeholder {color: $color;}
&::-moz-placeholder {color: $color;}
&:-ms-input-placeholder {color: $color;}
&:-moz-placeholder {color: $color;}
}
// OLDER MIXINS
@mixin avatar-radius() {
border-radius: 50%;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
}
@mixin avatar-size($size:48px) {
width: $size;
height: $size;
background-size: $size $size;
}
@mixin search-input() {
outline: 0;
box-sizing: border-box;
width: 100%;
border: 1px $gab-placeholder-accent solid;
box-shadow: none;
font-family: inherit;
background: $gab-background-container;
color: $gab-text-highlight;
@include font-size(16);
@include line-height(19);
margin: 0;
border-radius: 4px;
// Chrome does not like these concatinated together
&::placeholder {color: $gab-placeholder-accent;}
&:-ms-input-placeholder {color: $gab-placeholder-accent;}
&::-ms-input-placeholder{color: $gab-placeholder-accent;}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
}
@mixin search-popout() {
background: $gab-background-container;
border-radius: 4px;
border: 1px solid $gab-placeholder-accent;
padding: 8px 10px 17px 10px;
margin: 4px 0 0 0;
@include font-size(12);
@include line-height(14);
@include font-weight(normal);
color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
h4 {
color: #fff;
@include font-size(14);
@include line-height(16);
@include font-weight(bold);
}
ul {
margin: 6px 0 6px;
li {
margin: 0 0 2px 0;
em {color: $gab-text-highlight;}
}
}
}

249
app/javascript/styles/gabsocial/about.scss
View File

@ -17,13 +17,11 @@ $small-breakpoint: 960px;
.rich-formatting {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $darker-text-color;
padding-right: 10px;
@include text-sizing(16px, 400, 30px);
a {
color: $highlight-text-color;
text-decoration: underline;
@ -32,13 +30,11 @@ $small-breakpoint: 960px;
p,
li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
@include text-sizing(16px, 400, 30px);
a {
color: $highlight-text-color;
text-decoration: underline;
@ -57,64 +53,58 @@ $small-breakpoint: 960px;
h1 {
font-family: $font-display, sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(26px, 500, 30px);
small {
font-family: $font-sans-serif, sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
@include text-sizing(18px, 400);
}
}
h2 {
font-family: $font-display, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(22px, 500, 26px);
}
h3 {
font-family: $font-display, sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(18px, 500, 24px);
}
h4 {
font-family: $font-display, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(16px, 500, 24px);
}
h5 {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(14px, 500, 24px);
}
h6 {
font-family: $font-display, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(12px, 500, 24px);
}
ul,
@ -144,12 +134,12 @@ $small-breakpoint: 960px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
@include size(100%, 0);
&.spacer {
height: 1px;
border: 0;
@ -163,24 +153,23 @@ $small-breakpoint: 960px;
.container-alt {
position: relative;
padding-right: 280px + 15px;
padding-right: 295px;
}
&__sections {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@include flex(space-between);
}
&__section {
flex: 1 0 0;
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
line-height: 28px;
color: $primary-text-color;
text-align: right;
padding: 10px 15px;
@include text-sizing(16px, 400, 28px, right);
span,
strong {
display: block;
@ -194,9 +183,8 @@ $small-breakpoint: 960px;
strong {
font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 48px;
@include text-sizing(32px, 500, 48px);
}
@media screen and (max-width: $column-breakpoint) {
@ -204,56 +192,19 @@ $small-breakpoint: 960px;
}
}
.panel {
position: absolute;
width: 280px;
box-sizing: border-box;
background: darken($ui-base-color, 8%);
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
right: 0;
bottom: -40px;
.panel-header {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $darker-text-color;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
a,
span {
font-weight: 400;
color: darken($darker-text-color, 10%);
}
a {
text-decoration: none;
}
}
}
.owner {
text-align: center;
.avatar {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 15px;
@include size(80px);
@include margin-center;
img {
display: block;
width: 80px;
height: 80px;
border-radius: 48px;
@include circle(80px);
}
}
@ -284,13 +235,11 @@ $small-breakpoint: 960px;
p,
li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
@include text-sizing(16px, 400, 30px);
a {
color: $highlight-text-color;
text-decoration: underline;
@ -301,74 +250,67 @@ $small-breakpoint: 960px;
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
@include text-sizing(inherit, 700, inherit);
}
h1 {
font-family: $font-display, sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(26px, 500, 30px);
small {
font-family: $font-sans-serif, sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
@include text-sizing(18px, 400);
}
}
h2 {
font-family: $font-display, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(22px, 500, 26px);
}
h3 {
font-family: $font-display, sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(18px, 500, 24px);
}
h4 {
font-family: $font-display, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(16px, 500, 24px);
}
h5 {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(14px, 500, 24px);
}
h6 {
font-family: $font-display, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
@include text-sizing(12px, 24px, 500);
}
ul,
@ -398,12 +340,12 @@ $small-breakpoint: 960px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
@include size(100%, 0);
&.spacer {
height: 1px;
border: 0;
@ -424,17 +366,12 @@ $small-breakpoint: 960px;
.row {
width: 100%;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
@include flex(space-between, center, row-reverse, nowrap);
}
.row__information-board {
display: flex;
justify-content: flex-end;
align-items: flex-end;
@include flex(flex-end, flex-end);
.information-board__section {
flex: 1 0 auto;
@ -446,24 +383,15 @@ $small-breakpoint: 960px;
justify-content: space-between;
}
}
.row__mascot {
flex: 1;
margin: 10px -50px 0 0;
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
}
&__logo {
margin-right: 20px;
img {
height: 50px;
width: auto;
mix-blend-mode: lighten;
@include size(auto, 50px);
}
}
@ -508,9 +436,9 @@ $small-breakpoint: 960px;
}
&__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
@include size(44px);
}
.display-name {
@ -542,18 +470,6 @@ $small-breakpoint: 960px;
box-shadow: 0 0 6px rgba($black, 0.1);
}
&__mascot {
height: 104px;
position: relative;
left: -40px;
bottom: 25px;
img {
height: 190px;
width: auto;
}
}
&__short-description {
.row {
display: flex;
@ -608,17 +524,6 @@ $small-breakpoint: 960px;
.container-alt {
padding-right: 20px;
}
.panel {
position: static;
margin-top: 20px;
width: 100%;
border-radius: 4px;
.panel-header {
text-align: center;
}
}
}
}
@ -674,7 +579,7 @@ $small-breakpoint: 960px;
padding: 40px 20px 20px 20px;
&--left {
margin-right: 40px;
margin-: 40px;
}
&--right {
@ -701,10 +606,7 @@ $small-breakpoint: 960px;
}
&__brand {
display: flex;
justify-content: start;
align-items: center;
flex-direction: column;
@include flex(start, center, column);
.brand {
margin-right: auto !important;
@ -731,15 +633,14 @@ $small-breakpoint: 960px;
}
.hero-widget {
margin-top: 30px;
margin-bottom: 0;
@include vertical-margin(30px, 0);
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
&__text {
@ -768,9 +669,9 @@ $small-breakpoint: 960px;
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
@include size(44px);
}
}
@ -779,9 +680,9 @@ $small-breakpoint: 960px;
strong {
font-family: $font-display, sans-serif;
font-size: 15px;
font-weight: 700;
display: block;
@include text-sizing(15px, 700);
}
span {
@ -798,10 +699,9 @@ $small-breakpoint: 960px;
.simple_form p.lead {
color: $darker-text-color;
font-size: 15px;
line-height: 20px;
font-weight: 400;
margin-bottom: 25px;
@include text-sizing(15px, 400, 20px);
}
&__grid {
@ -826,10 +726,10 @@ $small-breakpoint: 960px;
}
.hero-widget {
margin-top: 0;
margin-bottom: 10px;
order: 1;
flex: 0 0 auto;
@include vertical-margin(0, 10px);
}
}
@ -894,10 +794,9 @@ $small-breakpoint: 960px;
display: block;
width: 470px;
color: $primary-text-color;
font-size: 30px;
line-height: 1.4;
margin-top: 25px;
font-weight: 400;
@include text-sizing(30px, 400, 1.4);
@media (min-width:767px) and (max-width:1024px) {
width: 320px;

72
app/javascript/styles/gabsocial/accounts.scss
View File

@ -1,5 +1,5 @@
.card {
& > a {
&>a {
display: block;
text-decoration: none;
color: inherit;
@ -26,14 +26,14 @@
img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
border-radius: 4px 4px 0 0;
@include size(100%);
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
height: 200px;
}
@ -45,30 +45,29 @@
&__bar {
position: relative;
padding: 15px;
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
@include flex(flex-start, center);
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
.avatar {
flex: 0 0 auto;
width: 48px;
height: 48px;
padding-top: 2px;
@include size(48px);
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
border-radius: 4px;
background: darken($ui-base-color, 8%);
object-fit: cover;
@include size(100%);
}
}
@ -77,20 +76,18 @@
text-align: left;
strong {
font-size: 15px;
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow;
@include text-sizing(15px, 500);
}
span {
display: block;
font-size: 14px;
color: $gab-secondary-text;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow;
@include text-sizing(14px, 400);
}
}
}
@ -107,12 +104,12 @@
.older,
.page,
.gap {
font-size: 14px;
color: $primary-text-color;
font-weight: 500;
display: inline-block;
padding: 6px 10px;
text-decoration: none;
@include text-sizing(14px, 500);
}
.current {
@ -176,17 +173,14 @@
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $gab-secondary-text;
font-size: 14px;
font-weight: 500;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
border-radius: 4px;
padding: 20px;
min-height: 30vh;
@include flex(center, center);
@include text-sizing(14px, 500, 1, center);
&--under-tabs {
border-radius: 0 0 4px 4px;
}
@ -201,13 +195,11 @@
display: inline-block;
padding: 4px 6px;
cursor: default;
border-radius: 3px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: $ui-secondary-color;
background-color: rgba($ui-secondary-color, 0.1);
border: 1px solid rgba($ui-secondary-color, 0.5);
@include text-sizing(12px, 500, 12px);
@include border-design(rgba($ui-secondary-color, 0.5), 1px, 3px);
&.moderator {
color: $success-green;
@ -228,8 +220,8 @@
border: 0 none;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
font-size: 14px;
line-height: 20px;
@include text-sizing(14px, 400, 20px);
dl {
display: flex;
@ -239,12 +231,10 @@
dt,
dd {
box-sizing: border-box;
padding: 14px;
text-align: center;
max-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include text-overflow(nowrap);
@include text-sizing(14px, 400, 1, center);
}
dt {
@ -290,7 +280,7 @@
}
}
.directory__tag .trends__item__current {
.directory__tag .trending-item__uses {
width: auto;
}
@ -318,4 +308,4 @@
&__body {
margin-top: 10px;
}
}
}

136
app/javascript/styles/gabsocial/admin.scss
View File

@ -3,16 +3,16 @@ $sidebar-width: 240px;
$content-width: 840px;
.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
@include flex(center);
.sidebar-wrapper {
flex: 1 1 $sidebar-width;
height: 100%;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
@include flex(flex-end);
}
.sidebar {
@ -24,12 +24,12 @@ $content-width: 840px;
.logo {
display: block;
margin: 40px auto;
width: 100px;
height: 100px;
@include size(100px);
}
@media screen and (max-width: $no-columns-breakpoint) {
& > a:first-child {
&>a:first-child {
display: none;
}
}
@ -93,7 +93,7 @@ $content-width: 840px;
}
}
& > ul > .simple-navigation-active-leaf a {
&>ul>.simple-navigation-active-leaf a {
border-radius: 4px 0 0 4px;
}
}
@ -105,49 +105,41 @@ $content-width: 840px;
.content {
max-width: $content-width;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
padding: 60px 15px 20px 25px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
padding: 15px;
padding-top: 30px;
padding: 30px 15px 15px 15px;
}
h2 {
color: $secondary-text-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px;
@include text-sizing(24px, 400, 28px);
@include bottom-spacing(40px);
}
h3 {
color: $secondary-text-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 30px;
@include text-sizing(20px, 400, 28px);
}
h4 {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: $gab-secondary-text;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
@include text-sizing(13px, 700);
@include bottom-spacing(8px);
}
h6 {
font-size: 16px;
color: $secondary-text-color;
line-height: 28px;
font-weight: 400;
@include text-sizing(16px, 400, 28px);
}
.fields-group h6 {
@ -155,8 +147,8 @@ $content-width: 840px;
font-weight: 500;
}
.directory__tag > a,
.directory__tag > div {
.directory__tag>a,
.directory__tag>div {
box-shadow: none;
}
@ -165,21 +157,20 @@ $content-width: 840px;
}
.directory__tag h4 {
font-size: 18px;
font-weight: 700;
color: $gab-secondary-text;
text-transform: none;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
@include text-sizing(18px, 700);
@include bottom-spacing(0);
}
& > p {
font-size: 14px;
line-height: 18px;
&>p {
color: $gab-secondary-text;
margin-bottom: 20px;
@include text-sizing(14px, 400, 18px);
strong {
color: $gab-secondary-text;
font-weight: 500;
@ -193,12 +184,12 @@ $content-width: 840px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
@include size(100%, 0);
&.spacer {
height: 1px;
border: 0;
@ -272,9 +263,9 @@ $content-width: 840px;
}
strong {
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
@include text-sizing(12px, 500);
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@ -288,10 +279,10 @@ $content-width: 840px;
color: $gab-secondary-text;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid $gab-secondary-text;
@include text-sizing(12px, 500);
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($gab-secondary-text, 5%);
@ -317,14 +308,13 @@ $content-width: 840px;
flex-direction: column;
margin: 0 5px;
& > strong {
&>strong {
display: block;
margin: 0 0 10px -5px;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $secondary-text-color;
@include text-sizing(14px, 500, 18px);
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
@ -420,15 +410,14 @@ $content-width: 840px;
line-height: 20px;
&__header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
background: $ui-base-color;
color: $darker-text-color;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
@include flex(flex-start, center);
}
&__avatar {
@ -437,9 +426,8 @@ $content-width: 840px;
.avatar {
display: block;
margin: 0;
border-radius: 50%;
width: 40px;
height: 40px;
@include circle(40px);
}
}
@ -473,12 +461,8 @@ $content-width: 840px;
}
&__icon__overlay {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
@include circle(10px);
@include abs-position(10px, 10px);
&.positive {
background: $success-green;
@ -575,13 +559,11 @@ a.name-tag,
}
&__bubble {
padding: 16px;
padding-left: 14px;
font-size: 15px;
line-height: 20px;
padding: 16px 16px 16px 14px;
border-radius: 4px 4px 4px 0;
position: relative;
font-weight: 500;
@include text-sizing(15px, 500, 20px);
a {
color: $darker-text-color;
@ -589,8 +571,7 @@ a.name-tag,
}
&__owner {
padding: 8px;
padding-left: 12px;
padding: 8px 8px 8px 12px;
}
time {
@ -604,11 +585,10 @@ a.name-tag,
margin-bottom: 20px;
&__profile {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
@include flex(space-between, center);
.account {
padding: 0;
border: 0;
@ -644,10 +624,10 @@ a.name-tag,
&__summary {
&__item {
display: flex;
justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%);
@include flex(flex-start);
&:hover {
background: lighten($ui-base-color, 2%);
}
@ -662,9 +642,7 @@ a.name-tag,
&,
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow(nowrap);
}
}
@ -692,15 +670,13 @@ a.name-tag,
}
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow(nowrap);
}
.ellipsized-ip {
display: inline-block;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
@include text-overflow;
}

64
app/javascript/styles/gabsocial/basics.scss
View File

@ -1,8 +1,9 @@
@function hex-color($color) {
@if type-of($color) == 'color' {
@if type-of($color)=='color' {
$color: str-slice(ie-hex-str($color), 4);
}
@return '%23' + unquote($color)
@return '%23'+unquote($color)
}
html {
@ -15,16 +16,17 @@ html {
}
body {
@include font-size(16);
@include line-height(19);
font-size: 16px;
line-height: 19px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
color: white;
background: $gab-background-base;
&.theme-gabsocial-light {
color: $gab-default-text-light;
background: $gab-background-base-light;
@ -82,18 +84,18 @@ body {
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
@include size(100%);
}
}
&.admin {
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;
padding: 0;
@include size(100%);
}
&.error {
@ -101,12 +103,10 @@ body {
text-align: center;
color: $darker-text-color;
background: $ui-base-color;
width: 100%;
height: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
@include flex(center, center);
@include size(100%);
.dialog {
vertical-align: middle;
@ -116,16 +116,14 @@ body {
img {
display: block;
max-width: 470px;
width: 100%;
height: auto;
margin-top: -120px;
@include size(100%, auto);
}
}
h1 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
@include text-sizing(20px, 400, 28px);
}
}
}
@ -141,24 +139,12 @@ button {
}
.app-holder {
&,
& > div {
display: flex;
width: 100%;
height: 100%;
align-items: start;
justify-content: center;
outline: 0 !important;
}
}
.visuallyhidden {
border: 0 !important;
clip: rect(1px,1px,1px,1px) !important;
font-size: 1px !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
&,
&>div {
outline: 0 !important;
@include flex(center, start);
@include size(100%);
}
}

27
app/javascript/styles/gabsocial/boost.scss
View File

File diff suppressed because one or more lines are too long

34
app/javascript/styles/gabsocial/compact_header.scss
View File

@ -1,34 +0,0 @@
.compact-header {
h1 {
font-size: 24px;
line-height: 28px;
color: $darker-text-color;
font-weight: 500;
margin-bottom: 20px;
padding: 0 10px;
word-wrap: break-word;
@media screen and (max-width: 740px) {
text-align: center;
padding: 20px 10px 0;
}
a {
color: inherit;
text-decoration: none;
}
small {
font-weight: 400;
color: $secondary-text-color;
}
img {
display: inline-block;
margin-bottom: -5px;
margin-right: 15px;
width: 36px;
height: 36px;
}
}
}

5311
app/javascript/styles/gabsocial/components.scss
View File

File diff suppressed because it is too large Load Diff

334
app/javascript/styles/gabsocial/components/account-header.scss
View File

@ -1,146 +1,194 @@
.account__header {
&.inactive {
opacity: 0.5;
.account__header__image,
.account__avatar {filter: grayscale(100%);}
}
&__info {
position: absolute;
top: 10px;
left: 10px;
}
&__image {
overflow: hidden;
height: 350px;
position: relative;
background: darken($ui-base-color, 4%);
@media screen and (max-width:895px) {height: 225px;}
&--none {height: 125px;}
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
}
}
&__bar {
display: block;
min-height: 74px;
width: 100%;
position: relative;
background: lighten($ui-base-color, 4%);
@media (min-width:895px) {height: 74px;}
}
&__avatar {
display: block;
position: absolute;
border: 5px solid lighten($ui-base-color, 4%);
left: 0;
top: -90px;
border-radius: 50%;
height: 200px;
width: 200px;
background-color: darken($ui-base-color, 8%);
// NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
.account__avatar {
width: 200px;
height: 200px;
background-size: 200px 200px;
}
@media screen and (max-width:895px) {
top: -45px;
left: 10px;
height: 90px;
width: 90px;
.account__avatar {
width: 90px;
height: 90px;
background-size: 90px 90px;
}
}
&.inactive {
opacity: 0.5;
}
&__extra {
display: flex;
flex-direction: row;
height: 100%;
margin: 0 auto;
padding-left: 310px;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
position: relative;
@media (min-width:895px) and (max-width:1190px) {
max-width: 900px;
padding-left: 300px;
}
@media screen and (max-width:895px) {
max-width: 900px;
padding: 10px 10px 0 10px;
flex-direction: column-reverse;
min-height: 50px;
}
&__buttons {
display: flex;
align-items: center;
margin-left: auto;
.icon-button {
border: 1px solid lighten($ui-base-color, 12%);
border-radius: 4px;
box-sizing: content-box;
padding: 2px;
}
.button {margin-right: 10px;}
}
&__links {
display: flex;
font-size: 14px;
color: $darker-text-color;
@media screen and (max-width:895px) {
justify-content: center;
flex-wrap: wrap;
}
a {
display: inline-block;
text-decoration: none;
padding: 16px 22px;
text-align: center;
@media screen and (max-width:1190px) {padding: 16px;}
> span {
display: block;
&:first-of-type {
color: $primary-text-color;
font-size: 20px;
font-weight: 800;
line-height: 24px;
@media screen and (max-width:895px) {
font-size: 16px;
line-height: 20px;
}
}
&:last-of-type {
color: $ui-secondary-color;
font-size: 12px;
line-height: 14px;
padding-top: 2px;
}
}
&:hover,
&.active {border-bottom: 2px solid $primary-text-color;}
&.score {border-bottom:none !important;}
}
}
} // end .account__header__extra
@media screen and (max-width:895px) {
.account-mobile-container {
display: block;
background: lighten($ui-base-color, 4%);
margin-top: 10px;
position: relative;
padding: 10px 10px 0px;
&--nonuser {padding: 10px 10px 15px;}
}
}
} // end .account__header
.account__header__image,
.account__avatar {
filter: grayscale(100%);
}
}
&__info {
position: absolute;
top: 10px;
left: 10px;
}
&__image {
overflow: hidden;
height: 350px;
position: relative;
background: darken($ui-base-color, 4%);
&--none {
height: 125px;
}
@media screen and (max-width:895px) {
height: 225px;
}
img {
object-fit: cover;
display: block;
margin: 0;
@include size(100%);
}
}
&__bar {
display: block;
min-height: 74px;
width: 100%;
position: relative;
background: lighten($ui-base-color, 4%);
@media (min-width:895px) {
height: 74px;
}
}
&__avatar {
display: block;
position: absolute;
border: 5px solid lighten($ui-base-color, 4%);
left: 0;
top: -90px;
background-color: darken($ui-base-color, 8%);
@include circle(200px);
// NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
.account__avatar {
background-size: 200px 200px;
@include size(200px);
}
@media screen and (max-width:895px) {
top: -45px;
left: 10px;
@include size(90px);
.account__avatar {
background-size: 90px 90px;
@include size(90px);
}
}
}
&__extra {
display: flex;
flex-direction: row;
padding-left: 310px;
max-width: 1200px;
box-sizing: border-box;
position: relative;
@include size(100%);
@include margin-center;
@media (min-width:895px) and (max-width:1190px) {
max-width: 900px;
padding-left: 300px;
}
@media screen and (max-width:895px) {
max-width: 900px;
padding: 10px 10px 0 10px;
flex-direction: column-reverse;
min-height: 50px;
}
&__buttons {
display: flex;
align-items: center;
margin-left: auto;
.icon-button {
box-sizing: content-box;
padding: 2px;
@include border-design(lighten($ui-base-color, 12%), 1px, 4px);
}
.button {
margin-right: 10px;
}
}
&__links {
display: flex;
font-size: 14px;
color: $darker-text-color;
@media screen and (max-width:895px) {
justify-content: center;
flex-wrap: wrap;
}
a {
display: inline-block;
text-decoration: none;
padding: 16px 22px;
text-align: center;
@media screen and (max-width:1190px) {
padding: 16px;
}
>span {
display: block;
&:first-of-type {
color: $primary-text-color;
@include text-sizing(20px, 800, 24px);
@media screen and (max-width:895px) {
@include text-sizing(16px, 800, 20px);
}
}
&:last-of-type {
color: $ui-secondary-color;
padding-top: 2px;
@include text-sizing(12px, 400, 14px);
}
}
&:hover,
&.active {
border-bottom: 2px solid $primary-text-color;
}
&.score {
border-bottom: none !important;
}
}
}
}
// end .account__header__extra
@media screen and (max-width:895px) {
.account-mobile-container {
display: block;
background: lighten($ui-base-color, 4%);
margin-top: 10px;
position: relative;
padding: 10px 10px 0px;
&--nonuser {
padding: 10px 10px 15px;
}
}
}
}
// end .account__header

5
app/javascript/styles/gabsocial/components/buttons.scss
View File

@ -9,12 +9,11 @@ a.button {
padding: 5px 15px;
border: none;
border-radius: 4px;
@include font-size(11);
@include line-height(11);
@include font-weight(bold);
text-transform: uppercase;
color: white;
background: $gab-small-cta-primary;
@include text-sizing(11px, 700, 11px);
}
}
}

285
app/javascript/styles/gabsocial/components/compose-form.scss
View File

@ -1,285 +0,0 @@
.compose-form {
padding: 10px;
&__sensitive-button {
padding: 10px;
padding-top: 0;
font-size: 14px;
font-weight: 500;
&.active {color: $highlight-text-color;}
input[type=checkbox] {display: none;}
.checkbox {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
border-radius: 4px;
vertical-align: middle;
&.active {
border-color: $highlight-text-color;
background: $highlight-text-color;
}
}
}
.compose-form__warning {
color: $inverted-text-color;
margin-bottom: 10px;
background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
strong {
color: $inverted-text-color;
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: $lighter-text-color;
font-weight: 500;
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
.emoji-picker-dropdown {
position: absolute;
top: 5px;
right: 5px;
z-index: 1;
}
.compose-form__autosuggest-wrapper {
position: relative;
}
.autosuggest-textarea,
.autosuggest-input,
.spoiler-input {
position: relative;
}
.spoiler-input {
height: 0;
transform-origin: bottom;
opacity: 0.0;
&.spoiler-input--visible {
height: 36px;
margin-bottom: 11px;
opacity: 1.0;
}
}
.autosuggest-textarea__textarea,
.spoiler-input__input {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $simple-background-color;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
&:focus {outline: 0;}
@media screen and (max-width: 600px) {font-size: 16px;}
}
.spoiler-input__input {border-radius: 4px;}
.autosuggest-textarea__textarea {
min-height: 100px;
border-radius: 5px 5px 0 0;
padding-bottom: 0;
padding-right: 10px + 22px;
resize: none;
scrollbar-color: initial;
&::-webkit-scrollbar {all: unset;}
@media screen and (max-width: 600px) {
max-height: 100px !important; // prevent auto-resize textarea
resize: vertical;
}
}
&.condensed {
.autosuggest-textarea__textarea {
min-height: 46px;
border-radius: 5px;
}
}
.emoji-picker-wrapper,
.autosuggest-textarea__suggestions-wrapper {
position: relative;
height: 0;
}
.autosuggest-textarea__suggestions {
box-sizing: border-box;
display: none;
position: absolute;
top: 100%;
width: 100%;
z-index: 99;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
border-radius: 0 0 4px 4px;
color: $inverted-text-color;
font-size: 14px;
padding: 6px;
&.autosuggest-textarea__suggestions--visible {display: block;}
}
.autosuggest-textarea__suggestions__item {
padding: 10px;
cursor: pointer;
border-radius: 4px;
&:hover,
&:focus,
&:active,
&.selected {background: darken($ui-secondary-color, 10%);}
}
.autosuggest-account,
.autosuggest-emoji {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
line-height: 18px;
font-size: 14px;
}
.autosuggest-account-icon,
.autosuggest-emoji img {
display: block;
margin-right: 8px;
width: 16px;
height: 16px;
}
.autosuggest-account .display-name__account {color: $lighter-text-color;}
.compose-form__modifiers {
color: $inverted-text-color;
font-family: inherit;
font-size: 14px;
background: $simple-background-color;
.compose-form__upload-wrapper {overflow: hidden;}
.compose-form__uploads-wrapper {
display: flex;
flex-direction: row;
padding: 5px;
flex-wrap: wrap;
}
.compose-form__upload {
flex: 1 1 0;
min-width: 40%;
margin: 5px;
&__actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
transition: opacity .1s ease;
.icon-button {
flex: 0 1 auto;
color: $gab-secondary-text;
font-size: 14px;
font-weight: 500;
padding: 10px;
font-family: inherit;
&:hover,
&:focus,
&:active {color: $gab-text-highlight;}
}
&.active {opacity: 1;}
}
&-description {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
padding: 10px;
opacity: 0;
transition: opacity .1s ease;
textarea {
background: rgba(0,0,0,0.3);
box-sizing: border-box;
background: transparent;
color: $gab-secondary-text;
border: 1px solid $gab-secondary-text;
outline: none;
padding: 10px;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14px;
font-weight: 500;
&:focus {color: #fff;}
&::placeholder {
color: $gab-secondary-text;
}
}
&.active {opacity: 1;}
}
}
.compose-form__upload-thumbnail {
border-radius: 4px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 140px;
width: 100%;
overflow: hidden;
}
} // end .compose-form .compose-form__modifiers
.compose-form__buttons-wrapper {
padding: 10px;
background: darken($simple-background-color, 8%);
border-radius: 0 0 4px 4px;
display: flex;
justify-content: space-between;
flex: 0 0 auto;
.compose-form__buttons {
display: flex;
.compose-form__upload-button-icon {line-height: 27px;}
.compose-form__sensitive-button {
display: none;
&.compose-form__sensitive-button--visible {display: block;}
.compose-form__sensitive-button__icon {line-height: 27px;}
}
}
.icon-button {
box-sizing: content-box;
padding: 0 3px;
}
.character-counter__wrapper {
align-self: center;
margin-right: 4px;
.character-counter {
cursor: default;
font-family: $font-sans-serif, sans-serif;
font-size: 14px;
font-weight: 600;
color: $gab-secondary-text;
&.character-counter--over {color: $warning-red;}
}
}
}
.compose-form__publish {
display: flex;
justify-content: flex-end;
min-width: 0;
flex: 0 0 auto;
.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px;
}
}
} // end .compose-form

150
app/javascript/styles/gabsocial/components/dropdown-menu.scss
View File

@ -1,150 +0,0 @@
.dropdown-menu {
z-index: 9999;
position: absolute;
background: $gab-background-container;
border-radius: 4px;
border: 1px solid $gab-placeholder-accent;
padding: 4px 0;
@include font-size(13);
@include line-height(26);
@include font-weight(normal);
color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
&.left {transform-origin: 100% 50%;}
&.top {transform-origin: 50% 100%;}
&.bottom {transform-origin: 50% 0;}
&.right {transform-origin: 0 50%;}
&__arrow {
position: absolute;
width: 0;
height: 0;
border: 0 solid transparent;
&.left {
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: $gab-placeholder-accent;
}
&.top {
bottom: -5px;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: $gab-placeholder-accent;
}
&.bottom {
top: -5px;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: $gab-placeholder-accent;
}
&.right {
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: $gab-placeholder-accent;
}
}
ul {
overflow: hidden;
padding: 6px 0;
}
&__item a {
display: block;
box-sizing: border-box;
overflow: hidden;
padding: 3px 10px 1px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: capitalize;
color: $gab-secondary-text;
&:focus,
&:hover,
&:active {
outline: 0;
color: $gab-text-highlight;
background: $gab-background-base !important;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
}
}
&__separator {
display: block;
margin: 10px !important;
height: 1px;
background: $gab-background-base;
}
}
// end .dropdown-menu
// NOTE - not sure what this relates to — but it doesn't involve the navbar dropdown
.dropdown {
display: inline-block;
}
.dropdown__content {
display: none;
position: absolute;
}
.dropdown--active .dropdown__content {
display: block;
line-height: 18px;
max-width: 311px;
right: 0;
text-align: left;
z-index: 9999;
& > ul {
list-style: none;
background: $ui-secondary-color;
padding: 4px 0;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
min-width: 140px;
position: relative;
}
&.dropdown__right {
right: 0;
}
&.dropdown__left {
& > ul {
left: -98px;
}
}
& > ul > li > a {
font-size: 13px;
line-height: 18px;
display: block;
padding: 4px 14px;
box-sizing: border-box;
text-decoration: none;
background: $ui-secondary-color;
color: $inverted-text-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:focus {
outline: 0;
}
&:hover {
background: $ui-highlight-color;
color: $secondary-text-color;
}
}
}
.dropdown__icon {
vertical-align: middle;
}

18
app/javascript/styles/gabsocial/components/group-card.scss
View File

@ -3,8 +3,8 @@
@include gab-container-standards();
.group-column-header__title {
padding: 15px;
font-size: 20px;
font-weight: bold;
@include text-sizing(20px, 700);
}
.group-column-header__cta {
float: right;
@ -15,12 +15,10 @@
}
.group-card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
@include flex(space-between, stretch, row, wrap);
}
.group-card {
@ -49,15 +47,15 @@
.group-card__title {
color: $primary-text-color;
font-size: 16px;
font-weight: bold;
@include text-sizing(16px, bold);
}
.group-card__meta {
color: $gab-secondary-text;
font-size: 14px;
margin-top: 5px;
margin-bottom: 10px;
@include vertical-margin(5px, 10px);
}
.group-card__description {

15
app/javascript/styles/gabsocial/components/group-detail.scss
View File

@ -59,9 +59,9 @@
padding: 10px 10px 20px 10px;
h1 {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
@include text-sizing(22px, 700);
}
.group__panel__description {
@ -72,22 +72,23 @@
display: inline-block;
margin-bottom: 10px;
border-radius: 4px;
font-size: 13px;
padding: 4px 8px;
background: $gab-background-container;
body.theme-gabsocial-light & {
background: $gab-background-container-light;
}
font-size: 13px;
padding: 4px 8px;
}
}
.group__feed {
background: $gab-background-container;
body.theme-gabsocial-light & {
background: $gab-background-container-light;
}
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
body.theme-gabsocial-light & {
background: $gab-background-container-light;
}
}
}

15
app/javascript/styles/gabsocial/components/group-form.scss
View File

@ -23,14 +23,13 @@
display: block;
box-sizing: border-box;
float: left;
height: 20px;
height: 20px;
padding: 3px 0 0 33px;
@include font-size(12);
@include font-weight(light);
color: $gab-secondary-text;
background-repeat: no-repeat;
background-image: url('../images/sprite-post-functions.png');
background-size: 100px 1200px;
@include text-sizing(12px, 400);
@include background-image('/assets/images/sprite-post-functions.png', 100px 1200px);
&:hover {
color: $gab-brand-default;
background-position: 0 -100px;
@ -41,12 +40,12 @@
}
}
.group-form__file {
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
position: absolute;
pointer-events: none;
@include size(1px);
}
button {float: right;}
}

52
app/javascript/styles/gabsocial/components/inputs.scss
View File

@ -1,23 +1,35 @@
input[type='text'],
textarea {
&.standard {
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid;
border-radius: 4px;
@include font-size(16);
@include line-height(18);
color: $gab-brand-default;
border-color: $gab-placeholder-accent;
background: $gab-background-container;
@include input-placeholder($gab-placeholder-accent);
body.theme-gabsocial-light & {
color: $gab-placeholder-accent;
border-color: $gab-secondary-text;
background: $gab-background-base-light;
@include input-placeholder($gab-secondary-text);
}
&:focus {outline: none;}
}
&.standard {
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid;
border-radius: 4px;
color: $gab-brand-default;
border-color: $gab-placeholder-accent;
background: $gab-background-container;
@include text-sizing(16px, 400, 18);
@include input-placeholder {
color: $gab-placeholder-accent;
}
body.theme-gabsocial-light & {
color: $gab-placeholder-accent;
border-color: $gab-secondary-text;
background: $gab-background-base-light;
@include input-placeholder {
color: $gab-secondary-text;
}
}
&:focus {
outline: none;
}
}
}
textarea.standard {resize: vertical;}
textarea.standard {
resize: vertical;
}

804
app/javascript/styles/gabsocial/components/modal.scss
View File

@ -1,303 +1,113 @@
.modal-root {
position: relative;
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
.modal-root__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($base-overlay-background, 0.7);
}
.modal-root__container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: space-around;
z-index: 9999;
pointer-events: none;
user-select: none;
}
.modal-root__modal {
pointer-events: auto;
display: flex;
z-index: 9999;
max-height: 100%;
overflow-y: hidden;
}
.video-modal {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
.media-modal {
width: 100%;
height: 100%;
position: relative;
.extended-video-player {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
video {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
}
}
}
.media-modal__closer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.media-modal__navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.3s linear;
will-change: opacity;
* {
pointer-events: auto;
}
&.media-modal__navigation--hidden {
opacity: 0;
* {
pointer-events: none;
}
}
}
.media-modal__nav {
background: rgba($base-overlay-background, 0.5);
box-sizing: border-box;
border: 0;
color: $primary-text-color;
cursor: pointer;
display: flex;
align-items: center;
font-size: 24px;
height: 20vmax;
margin: auto 0;
padding: 30px 15px;
position: absolute;
top: 0;
bottom: 0;
}
.media-modal__nav--left {
left: 0;
}
.media-modal__nav--right {
right: 0;
}
.media-modal__pagination {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
pointer-events: none;
}
.media-modal__meta {
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
pointer-events: none;
&--shifted {
bottom: 62px;
}
a {
text-decoration: none;
font-weight: 500;
color: $ui-secondary-color;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
.media-modal__page-dot {
display: inline-block;
}
.media-modal__button {
background-color: $primary-text-color;
height: 12px;
width: 12px;
border-radius: 6px;
margin: 10px;
padding: 0;
border: 0;
font-size: 0;
}
.media-modal__button--active {
background-color: $highlight-text-color;
}
.media-modal__close {
position: absolute;
right: 8px;
top: 8px;
z-index: 100;
}
.onboarding-modal,
.error-modal,
.embed-modal {
background: $ui-secondary-color;
color: $inverted-text-color;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
background: $ui-secondary-color;
color: $inverted-text-color;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.error-modal__body {
height: 80vh;
width: 80vw;
max-width: 520px;
max-height: 420px;
position: relative;
position: relative;
& > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 25px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
opacity: 0;
user-select: text;
}
@include size(80vw, 80vh);
@include max-size(520px, 420px);
&>div {
box-sizing: border-box;
padding: 25px;
display: none;
opacity: 0;
user-select: text;
@include size(100%);
@include abs-position(0, auto, auto, 0);
@include flex(center, center, column);
}
}
.error-modal__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-align: center;
@include flex(center, center, column);
}
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
display: flex;
padding: 25px;
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
display: flex;
padding: 25px;
& > div {
min-width: 33px;
}
&>div {
min-width: 33px;
}
.onboarding-modal__nav,
.error-modal__nav {
color: $lighter-text-color;
border: 0;
font-size: 14px;
font-weight: 500;
padding: 10px 25px;
line-height: inherit;
height: auto;
margin: -10px;
border-radius: 4px;
background-color: transparent;
.onboarding-modal__nav,
.error-modal__nav {
color: $lighter-text-color;
border: 0;
padding: 10px 25px;
height: auto;
margin: -10px;
border-radius: 4px;
background-color: transparent;
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: darken($ui-secondary-color, 16%);
}
@include text-sizing(14px, 500, inherit);
&.onboarding-modal__done,
&.onboarding-modal__next {
color: $inverted-text-color;
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: darken($ui-secondary-color, 16%);
}
&:hover,
&:focus,
&:active {
color: lighten($inverted-text-color, 4%);
}
}
}
&.onboarding-modal__done,
&.onboarding-modal__next {
color: $inverted-text-color;
&:hover,
&:focus,
&:active {
color: lighten($inverted-text-color, 4%);
}
}
}
}
.error-modal__footer {
justify-content: center;
justify-content: center;
}
.display-case {
text-align: center;
font-size: 15px;
margin-bottom: 15px;
text-align: center;
font-size: 15px;
margin-bottom: 15px;
&__label {
font-weight: 500;
color: $inverted-text-color;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 12px;
}
&__label {
color: $inverted-text-color;
margin-bottom: 5px;
text-transform: uppercase;
&__case {
background: $ui-base-color;
color: $secondary-text-color;
font-weight: 500;
padding: 10px;
border-radius: 4px;
}
@include text-sizing(12px, 500);
}
&__case {
background: $ui-base-color;
color: $secondary-text-color;
font-weight: 500;
padding: 10px;
border-radius: 4px;
}
}
.onboard-sliders {
display: inline-block;
max-width: 30px;
max-height: auto;
margin-left: 10px;
display: inline-block;
margin-left: 10px;
@include max-size(30px, auto);
}
.boost-modal,
@ -305,291 +115,325 @@
.report-modal,
.actions-modal,
.mute-modal {
position: relative;
flex-direction: column;
overflow: hidden;
width: 480px;
max-width: 90vw;
border-radius: 4px;
border: 1px solid $gab-placeholder-accent;
color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
background: $gab-background-container;
.status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__avatar {
height: 28px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.status__content__spoiler-link {
color: lighten($secondary-text-color, 8%);
}
position: relative;
flex-direction: column;
overflow: hidden;
width: 480px;
max-width: 90vw;
color: $gab-secondary-text;
@include border-design($gab-placeholder-accent, 1px, 4px);
body.theme-gabsocial-light & {
color: $gab-default-text-light;
}
background: $gab-background-container;
.status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__avatar {
height: 28px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.status__content__spoiler-link {
color: lighten($secondary-text-color, 8%);
}
}
.actions-modal {
.status {
background: $white;
border-bottom-color: $ui-secondary-color;
padding-top: 10px;
padding-bottom: 10px;
}
.status {
background: $white;
border-bottom-color: $ui-secondary-color;
.dropdown-menu__separator {
display: block;
margin: 10px;
height: 1px;
background: $gab-background-base;
}
@include vertical-padding(10px);
}
.dropdown-menu__separator {
display: block;
margin: 10px;
height: 1px;
background: $gab-background-base;
}
}
.boost-modal__container {
overflow-x: scroll;
padding: 10px;
overflow-x: scroll;
padding: 10px;
.status {
user-select: text;
border-bottom: 0;
}
.status {
user-select: text;
border-bottom: 0;
}
}
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
padding: 10px;
line-height: 36px;
background: $ui-secondary-color;
padding: 10px;
line-height: 36px;
& > div {
flex: 1 1 auto;
text-align: right;
color: $lighter-text-color;
padding-right: 10px;
}
@include flex(space-between);
.button {
flex: 0 0 auto;
}
&>div {
flex: 1 1 auto;
text-align: right;
color: $lighter-text-color;
padding-right: 10px;
}
.button {
flex: 0 0 auto;
}
}
.boost-modal__status-header {
font-size: 15px;
font-size: 15px;
}
.boost-modal__status-time {
float: right;
font-size: 14px;
float: right;
font-size: 14px;
}
.mute-modal {
line-height: 24px;
line-height: 24px;
}
.mute-modal .react-toggle {
vertical-align: middle;
vertical-align: middle;
}
.report-modal {
width: 90vw;
max-width: 700px;
width: 90vw;
max-width: 700px;
}
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
display: flex;
border-top: 1px solid $ui-secondary-color;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
overflow-y: auto;
}
@media screen and (max-width: 480px) {
flex-wrap: wrap;
overflow-y: auto;
}
}
.report-modal__statuses,
.report-modal__comment {
box-sizing: border-box;
width: 50%;
box-sizing: border-box;
width: 50%;
@media screen and (max-width: 480px) {
width: 100%;
}
@media screen and (max-width: 480px) {
width: 100%;
}
}
.report-modal__statuses {
flex: 1 1 auto;
min-height: 20vh;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
min-height: 20vh;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
.status__content a {
color: $highlight-text-color;
}
.status__content a {
color: $highlight-text-color;
}
.status__content,
.status__content p {
color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
}
.status__content,
.status__content p {
color: $gab-secondary-text;
@media screen and (max-width: 480px) {
max-height: 10vh;
}
body.theme-gabsocial-light & {
color: $gab-default-text-light;
}
}
@media screen and (max-width: 480px) {
max-height: 10vh;
}
}
.report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
max-width: 320px;
padding: 20px;
border-right: 1px solid $ui-secondary-color;
max-width: 320px;
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
.setting-text {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $white;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
margin-bottom: 20px;
.setting-text {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $white;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
margin-bottom: 20px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
}
@include border-design($ui-secondary-color, 1px, 4px);
.setting-toggle {
margin-top: 20px;
margin-bottom: 24px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
}
&__label {
color: $inverted-text-color;
font-size: 14px;
}
}
.setting-toggle {
@include vertical-margin(20px, 24px);
@media screen and (max-width: 480px) {
padding: 10px;
max-width: 100%;
order: 2;
&__label {
color: $inverted-text-color;
font-size: 14px;
}
}
.setting-toggle {
margin-bottom: 4px;
}
}
@media screen and (max-width: 480px) {
padding: 10px;
max-width: 100%;
order: 2;
.setting-toggle {
margin-bottom: 4px;
}
}
}
.actions-modal {
.status {
overflow-y: auto;
max-height: 300px;
}
width: calc(100% - 72px);
margin: 35px;
.actions-modal__item-label {font-weight: 500;}
ul {
overflow-y: auto;
flex-shrink: 0;
max-height: calc(100vh - 147px);
.status {
overflow-y: auto;
max-height: 300px;
}
// NOTE - not sure what this is yet, leaving alone for now until I find out.
&.with-status {max-height: calc(80vh - 75px);}
width: calc(100% - 72px);
margin: 35px;
li:empty {margin: 0;}
li:not(:empty) {
&:first-of-type{margin: 10px 0 0;}
&:last-of-type{margin: 0 0 10px;}
a {
display: flex;
align-items: center;
padding: 13px 10px 12px;
@inclide font-size(14);
color: $gab-secondary-text;
text-decoration: none;
&,
button {transition: none;}
&.active,
&:hover,
&:active,
&:focus {
&,
button {
background: $gab-background-base;
color: $gab-text-highlight;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
}
}
button:first-child {margin-right: 10px;}
}
}
}
.actions-modal__item-label {
font-weight: 500;
}
ul {
overflow-y: auto;
flex-shrink: 0;
max-height: calc(100vh - 147px);
// NOTE - not sure what this is yet, leaving alone for now until I find out.
&.with-status {
max-height: calc(80vh - 75px);
}
li:empty {
margin: 0;
}
li:not(:empty) {
&:first-of-type {
margin: 10px 0 0;
}
&:last-of-type {
margin: 0 0 10px;
}
a {
display: flex;
align-items: center;
padding: 13px 10px 12px;
font-size: 14px;
color: $gab-secondary-text;
text-decoration: none;
&,
button {
transition: none;
}
&.active,
&:hover,
&:active,
&:focus {
&,
button {
background: $gab-background-base;
color: $gab-text-highlight;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
}
button:first-child {
margin-right: 10px;
}
}
}
}
}
.confirmation-modal__action-bar,
.mute-modal__action-bar {
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.mute-modal__cancel-button {
background-color: transparent;
color: $lighter-text-color;
font-size: 14px;
font-weight: 500;
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
}
}
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.mute-modal__cancel-button {
background-color: transparent;
color: $lighter-text-color;
.confirmation-modal__secondary-button {
flex-shrink: 1;
}
@include text-sizing(14px, 500);
&:hover,
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
}
}
.confirmation-modal__secondary-button {
flex-shrink: 1;
}
}
.confirmation-modal__container,
.mute-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;
padding: 30px;
font-size: 16px;
text-align: center;
strong {
font-weight: 500;
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
.report-modal__target {
padding: 20px;
padding: 20px;
.media-modal__close {
top: 19px;
right: 15px;
}
.media-modal__close {
top: 19px;
right: 15px;
}
}
.modal-layout {
@ -600,8 +444,8 @@
padding: 0;
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
.account-header {
margin-top: 0;
}
}
}

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

@ -1,209 +0,0 @@
.tabs-bar {
display: flex;
box-sizing: border-box;
background: #000;
flex: 0 0 auto;
overflow-y: auto;
height: 50px;
position: sticky;
top: 0;
z-index: 1000;
&__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 20px;}
}
&__split {
display: flex;
width: auto;
&--left {
margin-right: auto;
}
&--right {
margin-left: auto;
padding-top: 8px;
@media screen and (max-width: $nav-breakpoint-3) {padding-top: 4px;}
}
}
&__search-container {
display: block;
@media screen and (max-width: $nav-breakpoint-2) {display: none;}
width: 251px;
.search {
margin: 0;
}
}
&__profile {
position: relative;
overflow: hidden;
margin: 0 0 0 20px;
height: 34px;
width: 34px;
@media screen and (max-width: $nav-breakpoint-3) {
height: 42px;
width: 42px;
margin: 0;
}
.account__avatar {
width: 34px;
height: 34px;
background-size: 34px 34px;
@media screen and (max-width: $nav-breakpoint-3) {
width: 42px;
height: 42px;
background-size: 42px 42px;
}
}
.compose__action-bar {
display: block;
position: absolute;
top: 0;
right: 0;
left: -5px;
bottom: 0;
i {
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: $gab-brand-default !important;
background-repeat: no-repeat;
background-size: 161px 152px;
background-position: 18px 2px;
&:hover {
background-color: lighten($gab-brand-default, 5%) !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;
}
.flex {
display: flex;
}
}
.tabs-bar__link {
display: flex;
flex: 1 1 auto;
margin: 0 25px 0 0;
color: white;
text-decoration: none;
text-align: center;
background-repeat: no-repeat;
background-image: url('../images/sprite-main-navigation-links.png');
background-size: auto 84px;
@media screen and (max-width: $nav-breakpoint-1) {
background-size: auto 120px;
width: 46px;
height: 42px;
margin: 4px 0 0 0;
padding: 0 !important;
&.active {
height: 38px;
border-bottom: 4px solid $gab-default-text-light;
}
& > span {display: none;}
}
// REMINDER - to add the remaining icons (globe / word balloon) from the sprite into this css as necessary
&.home {
padding: 16px 0 0 26px;
background-position: 0 18px;
&.active {background-position: 0 -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: 11px 11px;
&.active {background-position: 11px -89px;}
}
}
&.notifications {
padding: 16px 0 0 22px;
background-position: -140px 18px;
&.active {background-position: -140px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -186px 11px;
&.active {background-position: -186px -89px;}
}
}
&.groups {
padding: 16px 0 0 29px;
background-position: -280px 18px;
&.active {background-position: -280px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -391px 11px;
&.active {background-position: -391px -89px;}
}
}
&.optional {
display: none;
@media screen and (max-width: $nav-breakpoint-2) {
display: flex;
background-position: -987px 11px;
&.active {background-position: -987px -89px;}
}
}
&.active {color: $gab-text-highlight;}
&--logo {
display: block;
// NOTE - Revisit right-margin of home button / positioning between 376px and 350px
// - want to keep the icons centered between logo and profile image while shrinking
@media screen and (max-width: $nav-breakpoint-4) {display:none;}
width: 50px;
height: 50px;
margin-right: 35px;
border: none;
background-image: url('../images/gab_logo.svg');
background-repeat: no-repeat;
background-position: 0 10px;
background-size: 50px 30px;
& span {display: none !important;}
&:hover {
background-color: #000 !important;
border: none !important;
}
}
&--no-highlight,
&--no-highlight:hover,
&--no-highlight.active,
&--no-highlight:active,
&--no-highlight:focus {
background: transparent !important;
border-bottom-color: transparent !important;
}
}

117
app/javascript/styles/gabsocial/components/user-panel.scss
View File

@ -1,117 +0,0 @@
.user-panel {
display: flex;
width: 265px;
flex-direction: column;
overflow-y: hidden;
@include gab-container-standards();
&__header {
display: block;
height: 112px;
width: 100%;
background: lighten($gab-background-container, 4%);
body.theme-gabsocial-light & {
background: darken($gab-background-container-light, 4%);
}
img {
display: block;
height: 100%;
width: 100%;
margin: 0;
object-fit: cover;
}
}
&__profile {
display: flex;
align-items: flex-start;
padding: 0 10px;
margin-top: -53px;
.account__avatar {
display: block;
width: 82px;
height: 82px;
border: 6px solid $gab-background-base;
body.theme-gabsocial-light & {border: 6px solid $gab-background-base-light;}
background-size: cover;
}
}
&__meta {
display: block;
padding: 6px 20px 17px 20px;
}
&__account {
a {
text-decoration: none;
color: $primary-text-color;
}
&__name {
display: block;
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #fff;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
}
&:hover & {
&__name {
text-decoration: underline;
}
}
&__username {
display: block;
font-size: 14px;
line-height: 16px;
color: $gab-secondary-text;
text-decoration: none !important;
}
}
&__stats-block {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
.user-panel-stats-item {
display: flex;
align-items: start;
justify-content: left;
flex-wrap: wrap;
flex-direction: column;
a {
text-decoration: none;
color: $primary-text-color;
&:hover {
opacity: 0.8;
}
}
&__value {
display: block;
width: 100%;
color: #fff;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
font-size: 20px;
font-weight: 800;
line-height: 24px;
}
&__label {
display: block;
width: 100%;
color: $gab-secondary-text;
font-size: 12px;
line-height: 14px;
}
}
}

215
app/javascript/styles/gabsocial/containers.scss
View File

@ -1,7 +1,6 @@
.container-alt {
width: 700px;
margin: 0 auto;
margin-top: 40px;
margin: 40px auto 0 auto;
@media screen and (max-width: 740px) {
width: 100%;
@ -17,9 +16,7 @@
}
h1 {
display: flex;
justify-content: center;
align-items: center;
@include flex(center, center);
img {
height: 42px;
@ -27,17 +24,14 @@
}
a {
display: flex;
justify-content: center;
align-items: center;
color: $primary-text-color;
text-decoration: none;
outline: 0;
padding: 12px 16px;
line-height: 32px;
font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 14px;
@include flex(center, center);
@include text-sizing(14px, 500, 32px);
}
}
}
@ -62,33 +56,29 @@
width: 400px;
margin: 0 auto;
display: flex;
font-size: 13px;
line-height: 18px;
box-sizing: border-box;
padding: 20px 0;
padding-bottom: 0;
margin-bottom: -30px;
margin-top: 40px;
padding: 20px 0 0 0;
@include text-sizing(13px, 400, 18px);
@include vertical-margin(40px, -30px);
@media screen and (max-width: 440px) {
width: 100%;
margin: 0;
margin-bottom: 10px;
padding: 20px;
padding-bottom: 0;
margin: 0 0 10px 0;
padding: 20px 20px 0 20px;
}
.avatar {
width: 40px;
height: 40px;
margin-right: 8px;
@include size(40px);
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
border-radius: 4px;
@include size(100%);
}
}
@ -100,16 +90,16 @@
.username {
display: block;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
@include text-overflow;
}
}
.logout-link {
display: block;
font-size: 32px;
line-height: 40px;
margin-left: 8px;
@include text-sizing(32px, 400, 40px);
}
}
@ -149,9 +139,8 @@
.landing-page__call-to-action {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
@include flex(center, center);
}
.row__information-board {
@ -159,10 +148,6 @@
justify-content: center;
align-items: center;
}
.row__mascot {
display: none;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
@ -207,66 +192,48 @@
.background-svg {
display: block;
position: absolute;
height: 100%;
width: 100%;
min-height: 580px;
z-index: -1;
background-image:url('/landing/wave.svg');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
@include size(100%);
@include background-image('/landing/wave.svg', cover, bottom);
}
.header {
height: 80px;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
padding: 14px 0;
box-sizing: border-box;
@include flex(center, stretch, row, nowrap);
@media screen and (max-width: 1024px) {
padding: 14px 20px;
}
.header-container {
display: flex;
width: 960px;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
& > div {
@include flex(center, stretch, row, nowrap);
&>div {
flex: 1 1 33.3%;
min-height: 1px;
}
}
.nav-left {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
@include flex(flex-start, center, row, nowrap);
}
.nav-center {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
@include flex(center, stretch, row, nowrap);
}
.nav-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
@include flex(flex-end, center, row, nowrap);
.simple_form.new_user {
display: flex;
flex-direction: row;
align-items: center;
@include flex(flex-start, center, row);
.fields-group {
display: flex;
@ -319,11 +286,11 @@
img {
display: block;
height: 30px;
width: auto;
position: relative;
bottom: -2px;
@include size(auto, 30px);
@media screen and (max-width: $no-gap-breakpoint) {
height: 20px;
}
@ -334,12 +301,11 @@
display: flex;
align-items: center;
padding: 12px 22px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: $primary-text-color;
white-space: nowrap;
text-align: center;
@include text-sizing(14px, 600, 1, center);
&:hover,
&:focus,
@ -446,26 +412,24 @@
background: darken($ui-base-color, 12%);
&::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
top: 0;
left: 0;
@include pseudo;
@include size(100%);
}
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 4px 4px 0 0;
@include size(100%);
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
height: 200px;
}
}
@ -500,41 +464,37 @@
&__bar {
position: relative;
margin-top: -80px;
display: flex;
justify-content: flex-start;
@include flex(flex-start);
&::before {
content: "";
display: block;
background: lighten($ui-base-color, 4%);
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
border-radius: 0 0 4px 4px;
z-index: -1;
@include pseudo;
@include abs-position(auto, 0, 0, 0, false);
}
.avatar {
display: block;
width: 120px;
height: 120px;
padding-left: 20px - 4px;
flex: 0 0 auto;
@include size(120px);
img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
border: 4px solid lighten($ui-base-color, 4%);
background: darken($ui-base-color, 8%);
@include circle(100%);
}
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
@ -545,10 +505,9 @@
}
.avatar {
width: 48px;
height: 48px;
padding: 7px 0;
padding-left: 10px;
padding: 7px 0 7px 10px;
@include size(48px);
img {
border: 0;
@ -575,39 +534,32 @@
margin-left: 20px;
&__name {
padding-top: 20px;
padding-bottom: 8px;
@include vertical-padding(20px 8px);
h1 {
font-size: 20px;
line-height: 18px * 1.5;
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-shadow: 1px 1px 1px $base-shadow-color;
@include text-overflow(nowrap);
@include text-sizing(20px, 500, 27px);
small {
display: block;
font-size: 14px;
color: $primary-text-color;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow;
@include text-sizing(14px, 400);
}
}
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
margin-left: 15px;
display: flex;
justify-content: space-between;
align-items: center;
@include flex(space-between, center);
&__name {
padding-top: 0;
padding-bottom: 0;
@include vertical-padding(0);
h1 {
font-size: 16px;
@ -622,11 +574,10 @@
}
&__tabs {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 58px;
@include flex(flex-start, stretch);
.details-counters {
display: flex;
flex-direction: row;
@ -659,15 +610,14 @@
}
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 4px solid $ui-primary-color;
opacity: 0.5;
transition: all 400ms ease;
@include pseudo;
}
&.active {
@ -699,11 +649,11 @@
}
.counter-number {
font-weight: 500;
font-size: 18px;
margin-bottom: 5px;
color: $primary-text-color;
font-family: $font-display, sans-serif;
@include text-sizing(18px, 500);
}
}
@ -746,8 +696,8 @@
display: inline-block;
color: $darker-text-color;
text-decoration: none;
padding: 15px;
font-weight: 500;
@include text-sizing(15px, 500);
strong {
font-weight: 700;
@ -763,7 +713,7 @@
}
}
.account__section-headline {
.account-section-headline {
border-radius: 4px 4px 0 0;
@media screen and (max-width: $no-gap-breakpoint) {
@ -827,9 +777,8 @@
color: $action-button-color;
font-size: 18px;
& > span {
font-size: 14px;
font-weight: 500;
&>span {
@include text-sizing(14px, 500);
}
}
@ -839,7 +788,7 @@
min-width: 100%;
margin: 0 -5px;
& > div {
&>div {
box-sizing: border-box;
flex: 1 0 auto;
width: 300px;
@ -851,7 +800,7 @@
max-width: 50%;
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
max-width: 100%;
}
}
@ -860,7 +809,7 @@
margin: 0;
border-top: 1px solid lighten($ui-base-color, 8%);
& > div {
&>div {
width: 100%;
padding: 0;
margin-bottom: 0;
@ -882,4 +831,4 @@
}
}
}
}
}

12
app/javascript/styles/gabsocial/dashboard.scss
View File

@ -32,14 +32,11 @@
&__num,
&__text {
text-align: center;
font-weight: 500;
font-size: 24px;
line-height: 21px;
color: $primary-text-color;
font-family: $font-display, sans-serif;
margin-bottom: 20px;
line-height: 30px;
@include text-sizing(24px, 500, 30px, center);
}
&__text {
@ -47,10 +44,9 @@
}
&__label {
font-size: 14px;
color: $gab-secondary-text;
text-align: center;
font-weight: 500;
@include text-sizing(14px, 500, 1, center);
}
}

38
app/javascript/styles/gabsocial/emoji_picker.scss
View File

@ -1,4 +1,5 @@
.emoji-mart {
&,
* {
box-sizing: border-box;
@ -33,11 +34,11 @@
}
.emoji-mart-anchors {
display: flex;
justify-content: space-between;
padding: 0 6px;
color: $lighter-text-color;
line-height: 0;
@include flex(space-between);
}
.emoji-mart-anchor {
@ -67,12 +68,10 @@
}
.emoji-mart-anchor-bar {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
background-color: $highlight-text-color;
@include size(100%, 4px);
@include abs-position(auto, auto, -5px, 0);
}
.emoji-mart-anchors {
@ -103,21 +102,19 @@
}
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
padding: 10px 45px 10px 10px;
background: $simple-background-color;
input {
font-size: 14px;
font-weight: 400;
padding: 7px 9px;
font-family: inherit;
display: block;
width: 100%;
background: rgba($ui-secondary-color, 0.3);
color: $inverted-text-color;
border: 1px solid $ui-secondary-color;
border-radius: 4px;
@include text-sizing(14px, 400);
@include border-design($ui-secondary-color, 1px, 4px);
&::-moz-focus-inner {
border: 0;
@ -142,14 +139,12 @@
&:hover::before {
z-index: 0;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($ui-secondary-color, 0.7);
border-radius: 100%;
@include pseudo;
@include size(100%);
@include abs-position(0, auto, auto, 0, false);
}
}
@ -175,8 +170,7 @@
font-size: 0;
span {
width: 22px;
height: 22px;
@include size(22px);
}
}
@ -201,4 +195,4 @@
.emoji-mart-preview {
display: none;
}
}

26
app/javascript/styles/gabsocial/footer.scss
View File

@ -1,23 +1,20 @@
.public-layout {
.footer {
display: flex;
padding: 40px 0;
font-size: 12px;
justify-content: center;
align-items: center;
background-color: lighten($ui-base-color, 5%);
border-top: darken($ui-base-color, 10%);
@include flex(center, center);
@media screen and (max-width:1024px) {
padding: 40px 20px;
}
.footer-container {
display: flex;
width: 960px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
@include flex(flex-start, center, row, wrap);
@media screen and (max-width:1024px) {
width: 100%;
@ -31,11 +28,10 @@
h4 {
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
color: $darker-text-color;
font-size: 1.6rem;
line-height: 1.5;
@include text-sizing(1.6rem, 700, 1.5);
a {
color: inherit;
@ -48,9 +44,8 @@
span {
color: $primary-text-color;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.5;
@include text-sizing(1.3rem, 500, 1.5);
&:last-of-type {
color: darken($primary-text-color, 20%);
@ -67,12 +62,11 @@
a {
text-decoration: none;
color: lighten($ui-base-color, 34%);
font-size: 1.3rem;
font-weight: 500;
line-height: 1.5;
padding: 10px 4px;
margin-left: 10px;
@include text-sizing(1.3rem, 500, 1.5);
&:hover,
&:active,
&:focus {

105
app/javascript/styles/gabsocial/forms.scss
View File

@ -29,14 +29,12 @@ code {
}
}
.radio > label {
.radio>label {
position: relative;
padding-left: 28px;
input {
position: absolute;
top: -2px;
left: 0;
@include abs-position(-2px, auto, auto, 0);
}
}
}
@ -45,7 +43,7 @@ code {
position: relative;
margin-bottom: 0;
.label_input > label {
.label_input>label {
font-family: inherit;
font-size: 14px;
padding-top: 5px;
@ -119,11 +117,8 @@ code {
color: $gab-secondary-text;
&.subtle-hint {
text-align: center;
font-size: 12px;
line-height: 18px;
margin-top: 15px;
margin-bottom: 0;
@include text-sizing(12px, 400, 18px, center);
@include vertical-margin(15px, 0);
}
}
@ -145,13 +140,13 @@ code {
.label_input {
display: flex;
& > label {
&>label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
font-weight: 500;
min-width: 150px;
flex: 0 0 auto;
@include text-sizing(14px, 500);
}
input,
@ -167,14 +162,14 @@ code {
}
.input.with_label {
.label_input > label {
.label_input>label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: block;
margin-bottom: 8px;
word-wrap: break-word;
font-weight: 500;
@include text-sizing(14px, 500);
}
.hint {
@ -189,13 +184,13 @@ code {
.input.with_block_label {
max-width: none;
& > label {
&>label {
font-family: inherit;
font-size: 16px;
color: $primary-text-color;
display: block;
font-weight: 500;
padding-top: 5px;
@include text-sizing(16px, 500);
}
.hint {
@ -308,10 +303,10 @@ code {
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding: 10px;
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
&:invalid {
box-shadow: none;
}
@ -366,8 +361,7 @@ code {
display: flex;
&.actions--top {
margin-top: 0;
margin-bottom: 30px;
@include vertical-margin(0, 30px);
}
}
@ -375,25 +369,22 @@ code {
.button,
.block-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
line-height: inherit;
height: auto;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
box-sizing: border-box;
cursor: pointer;
font-weight: 500;
outline: 0;
margin-bottom: 10px;
margin-right: 10px;
@include size(100%, auto);
@include text-sizing(18px, 500, inherit, center);
&:last-child {
margin-right: 0;
}
@ -431,16 +422,14 @@ code {
font-size: 16px;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding-left: 10px;
padding-right: 30px;
height: 41px;
@include size(100%, 41px);
@include horizontal-padding(10px, 30px);
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
}
.label_input {
@ -449,9 +438,6 @@ code {
}
&__append {
position: absolute;
right: 3px;
top: 1px;
padding: 10px;
padding-bottom: 9px;
font-size: 16px;
@ -463,15 +449,16 @@ code {
white-space: nowrap;
overflow: hidden;
@include abs-position(1px, 3px);
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 1px;
width: 5px;
background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
@include pseudo;
}
}
}
@ -480,22 +467,19 @@ code {
position: relative;
&__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba($ui-base-color, 0.65);
backdrop-filter: blur(2px);
border-radius: 4px;
@include flex(center, center);
@include size(100%);
@include abs-position(0, auto, auto, 0);
&__content {
text-align: center;
&.rich-formatting {
&,
p {
color: $primary-text-color;
@ -755,8 +739,7 @@ code {
}
.actions {
padding: 30px 0;
padding-right: 20px;
padding: 30px 20px 30px 0;
flex: 0 0 auto;
}
}
@ -771,8 +754,7 @@ code {
}
.alternative-login {
margin-top: 20px;
margin-bottom: 20px;
@include vertical-margin(20px);
h4 {
font-size: 16px;
@ -805,8 +787,6 @@ code {
.input-copy {
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
display: flex;
align-items: center;
padding-right: 4px;
@ -814,6 +794,8 @@ code {
top: 1px;
transition: border-color 300ms linear;
@include border-design(darken($ui-base-color, 14%), 1px, 4px);
&__wrapper {
flex: 1 1 auto;
}
@ -830,12 +812,12 @@ code {
flex: 0 0 auto;
margin: 4px;
text-transform: none;
font-weight: 400;
font-size: 14px;
padding: 7px 18px;
padding-bottom: 6px;
width: auto;
transition: background 300ms linear;
@include text-sizing(14px, 400);
}
&.copied {
@ -894,13 +876,12 @@ code {
&::after {
background-color: darken($ui-base-color, 4%);
content: '';
display: block;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 1px;
@include pseudo;
@include size(1px, 100%);
}
}
@ -909,4 +890,4 @@ code {
display: flex;
flex-direction: row;
}
}
}

151
app/javascript/styles/gabsocial/introduction.scss
View File

@ -1,151 +0,0 @@
.introduction {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
@media screen and (max-width: 920px) {
background: darken($ui-base-color, 8%);
display: block !important;
}
&__pager {
background: darken($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
}
&__pager,
&__frame {
border-radius: 10px;
width: 50vw;
min-width: 920px;
@media screen and (max-width: 920px) {
min-width: 0;
width: 100%;
border-radius: 0;
box-shadow: none;
}
}
&__frame-wrapper {
opacity: 0;
transition: opacity 500ms linear;
&.active {
opacity: 1;
transition: opacity 50ms linear;
}
}
&__frame {
overflow: hidden;
}
&__illustration {
height: 50vh;
@media screen and (max-width: 630px) {
height: auto;
}
img {
object-fit: cover;
display: block;
margin: 0;
width: 100%;
height: 100%;
}
}
&__text {
&--columnized {
display: flex;
& > div {
flex: 1 1 33.33%;
text-align: center;
padding: 25px;
padding-bottom: 30px;
}
@media screen and (max-width: 630px) {
display: block;
padding: 15px 0;
padding-bottom: 20px;
& > div {
padding: 10px 25px;
}
}
}
h3 {
font-size: 24px;
line-height: 1.5;
font-weight: 700;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: $darker-text-color;
code {
display: inline-block;
background: darken($ui-base-color, 8%);
font-size: 15px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 2px;
padding: 1px 3px;
}
}
&--centered {
padding: 25px;
padding-bottom: 30px;
text-align: center;
}
}
&__dots {
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
@media screen and (max-width: 630px) {
display: none;
}
}
&__dot {
width: 14px;
height: 14px;
border-radius: 14px;
border: 1px solid $ui-highlight-color;
background: transparent;
margin: 0 3px;
cursor: pointer;
&:hover {
background: lighten($ui-base-color, 8%);
}
&.active {
cursor: default;
background: $ui-highlight-color;
}
}
&__action {
padding: 25px;
padding-top: 0;
display: flex;
align-items: center;
justify-content: center;
}
}

4
app/javascript/styles/gabsocial/modal.scss
View File

@ -6,8 +6,8 @@
padding: 0;
}
@media screen and (max-width: 600px) {
@include breakpoint(sm) {
.account-header {
margin-top: 0;
}
}
}

152
app/javascript/styles/gabsocial/polls.scss
View File

@ -1,139 +1,3 @@
.poll {
margin-top: 16px;
font-size: 14px;
li {
margin-bottom: 10px;
position: relative;
height: 18px + 12px;
}
&__chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: inline-block;
border-radius: 4px;
background: rgba($gab-placeholder-accent, .3);
&.leading {background: rgba($gab-placeholder-accent, .6);}
}
&__text {
position: relative;
display: inline-block;
padding: 6px 0;
line-height: 18px;
cursor: default;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
input[type=radio],
input[type=checkbox] {
display: none;
}
.autossugest-input {
flex: 1 1 auto;
}
input[type=text] {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
color: $inverted-text-color;
display: block;
outline: 0;
font-family: inherit;
background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
&:focus {
border-color: $highlight-text-color;
}
}
&.selectable {
cursor: pointer;
}
&.editable {
display: flex;
align-items: center;
overflow: visible;
}
}
&__input {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
border-radius: 50%;
vertical-align: middle;
&.checkbox {
border-radius: 4px;
}
&.active {
border-color: $valid-value-color;
background: $valid-value-color;
}
}
&__number {
display: inline-block;
width: 36px;
font-weight: 700;
padding: 0 10px;
text-align: right;
}
&__footer {
padding-top: 6px;
padding-bottom: 5px;
color: $dark-text-color;
}
&__link {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border: 0;
color: $dark-text-color;
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
&:active,
&:focus {
background-color: rgba($dark-text-color, .1);
}
}
.button {
height: 36px;
padding: 0 16px;
margin-right: 10px;
font-size: 14px;
}
}
.compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%);
@ -153,15 +17,14 @@
}
}
.button.button-secondary {
font-size: 14px;
font-weight: 400;
.button.button--secondary {
padding: 6px 10px;
height: auto;
line-height: inherit;
color: $action-button-color;
border-color: $action-button-color;
margin-right: 5px;
@include text-sizing(14px, 400, inherit);
}
li {
@ -185,10 +48,9 @@
outline: 0;
font-family: inherit;
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
padding: 6px 30px 6px 10px;
@include border-design(darken($simple-background-color, 14%), 1px, 4px);
}
.icon-button.disabled {
@ -206,4 +68,4 @@
background: rgba($ui-highlight-color, 0.2);
}
}
}
}

145
app/javascript/styles/gabsocial/rtl.scss
View File

@ -1,41 +1,35 @@
body.rtl {
direction: rtl;
.column-header > button {
.column-header>button {
text-align: right;
padding-left: 0;
padding-right: 15px;
@include horizontal-padding(0, 15px);
}
.landing-page__logo {
margin-right: 0;
margin-left: 20px;
@include horizontal-margin(20px, 0);
}
.landing-page .features-list .features-list__row .visual {
margin-left: 0;
margin-right: 15px;
@include horizontal-margin(0, 15px);
}
.column-link__icon,
.column-header__icon {
margin-right: 0;
margin-left: 5px;
@include horizontal-margin(0, 5px);
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
margin-right: 0;
margin-left: 4px;
@include horizontal-margin(4px, 0);
}
.navigation-bar__profile {
margin-left: 0;
margin-right: 8px;
@include horizontal-margin(0, 8px);
}
.search__input {
padding-right: 10px;
padding-left: 30px;
@include horizontal-padding(30px, 10px);
}
.search__icon .fa {
@ -46,18 +40,16 @@ body.rtl {
.column-header__buttons {
left: 0;
right: auto;
margin-left: 0;
margin-right: -15px;
@include horizontal-margin(0, -15px);
}
.column-inline-form .icon-button {
margin-left: 0;
margin-right: 5px;
@include horizontal-margin(0, 5px);
}
.column-header__links .text-btn {
margin-left: 10px;
margin-right: 0;
@include horizontal-margin(10px, 0);
}
.account__avatar-wrapper {
@ -65,8 +57,7 @@ body.rtl {
}
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
@include horizontal-padding(5px, 0);
}
.column-header__setting-arrows {
@ -74,8 +65,7 @@ body.rtl {
}
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
@include horizontal-margin(0, 8px);
}
.status__avatar {
@ -85,24 +75,20 @@ body.rtl {
.status,
.activity-stream .status.light {
padding-left: 10px;
padding-right: 68px;
@include horizontal-padding(10px, 68px);
}
.status__info .status__display-name,
.activity-stream .status.light .status__display-name {
padding-left: 25px;
padding-right: 0;
@include horizontal-padding(25px, 0);
}
.activity-stream .pre-header {
padding-right: 68px;
padding-left: 0;
@include horizontal-padding(0, 68px);
}
.status__prepend {
margin-left: 0;
margin-right: 68px;
@include horizontal-margin(0, 68px);
}
.status__prepend-icon-wrapper {
@ -120,7 +106,7 @@ body.rtl {
left: 0;
}
.column-back-button--slim-button {
.column-back-button--slim {
right: auto;
left: 0;
}
@ -133,20 +119,18 @@ body.rtl {
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
@include horizontal-margin(11px, 0);
.status__action-bar-button {
margin-right: 0;
margin-left: 4px;
@include horizontal-margin(4px, 0);
}
}
}
.status__action-bar-button {
float: right;
margin-right: 0;
margin-left: 18px;
@include horizontal-margin(18px, 0);
}
.status__action-bar-dropdown {
@ -154,13 +138,11 @@ body.rtl {
}
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
@include horizontal-margin(0, 40px);
}
.privacy-dropdown__option__icon {
margin-left: 10px;
margin-right: 0;
@include horizontal-margin(10px, 0);
}
.detailed-status__display-name .display-name {
@ -168,15 +150,14 @@ body.rtl {
}
.detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
float: right;
@include horizontal-margin(10px, 0);
}
.detailed-status__favorites,
.detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
@include horizontal-margin(0, 6px);
}
.fa-ul {
@ -195,18 +176,15 @@ body.rtl {
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
margin-right: 0;
margin-left: 5px;
@include horizontal-margin(5px, 0);
}
.simple_form .check_boxes .checkbox label {
padding-left: 0;
padding-right: 25px;
@include horizontal-padding(0, 25px);
}
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
@include horizontal-padding(25px, 0);
}
.simple_form .check_boxes .checkbox input[type="checkbox"],
@ -220,14 +198,12 @@ body.rtl {
right: 0;
}
.simple_form .input.radio_buttons .radio > label {
padding-right: 28px;
padding-left: 0;
.simple_form .input.radio_buttons .radio>label {
@include horizontal-padding(0, 28px);
}
.simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
@include horizontal-padding(142px, 0);
}
.simple_form .input.boolean label.checkbox {
@ -237,8 +213,7 @@ body.rtl {
.simple_form .input.boolean .label_input,
.simple_form .input.boolean .hint {
padding-left: 0;
padding-right: 28px;
@include horizontal-padding(0, 28px);
}
.simple_form .label_input__append {
@ -262,8 +237,7 @@ body.rtl {
}
.filters .filter-subset {
margin-right: 0;
margin-left: 45px;
@include horizontal-margin(45px, 0);
}
.landing-page .header-wrapper .mascot {
@ -295,32 +269,29 @@ body.rtl {
}
.landing-page .fa-external-link {
padding-right: 5px;
padding-left: 0 !important;
@include horizontal-padding(0 !important, 5px);
}
.landing-page .features #gabsocial-timeline {
margin-right: 0;
margin-left: 30px;
@include horizontal-margin(30px, 0);
}
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
@include horizontal-padding(5px);
&:first-child {
padding-left: 5px;
padding-right: 10px;
@include horizontal-padding(5px, 10px);
}
}
.columns-area > div {
.columns-area>div {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
@include horizontal-padding(5px);
}
}
}
@ -328,33 +299,29 @@ body.rtl {
.public-layout {
.header {
.nav-button {
margin-left: 8px;
margin-right: 0;
@include horizontal-margin(8px, 0);
}
}
.public-account-header__tabs {
margin-left: 0;
margin-right: 20px;
@include horizontal-margin(0, 20px);
}
}
.landing-page__information {
.account__display-name {
margin-right: 0;
margin-left: 5px;
@include horizontal-margin(5px, 0);
}
.account__avatar-wrapper {
margin-left: 12px;
margin-right: 0;
@include horizontal-margin(12px, 0);
}
}
.card__bar .display-name {
margin-left: 0;
margin-right: 15px;
text-align: right;
@include horizontal-margin(0, 15px);
}
.fa-chevron-left::before {
@ -366,17 +333,15 @@ body.rtl {
}
.column-back-button__icon {
margin-right: 0;
margin-left: 5px;
@include horizontal-margin(5px, 0);
}
.column-header__setting-arrows .column-header__setting-btn:last-child {
padding-left: 0;
padding-right: 10px;
@include horizontal-padding(0, 10px);
}
.simple_form .input.radio_buttons .radio > label input {
.simple_form .input.radio_buttons .radio>label input {
left: auto;
right: 0;
}
}
}

3
app/javascript/styles/gabsocial/scrollbars.scss
View File

@ -4,8 +4,7 @@
html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
::-webkit-scrollbar {
width: 12px;
height: 12px;
@include size(12px);
}
::-webkit-scrollbar-thumb {
border: none;

8
app/javascript/styles/gabsocial/stream_entries.scss
View File

@ -75,21 +75,21 @@
.button.logo-button {
flex: 0 auto;
font-size: 14px;
background: $ui-highlight-color;
color: $primary-text-color;
text-transform: none;
line-height: 36px;
height: auto;
padding: 3px 15px;
border: 0;
@include text-sizing(14px, 400, 36px);
svg {
width: 20px;
height: auto;
vertical-align: middle;
margin-right: 5px;
fill: $primary-text-color;
@include size(20px, auto);
}
&:active,

6
app/javascript/styles/gabsocial/tables.scss
View File

@ -157,8 +157,7 @@ a.table-action-link {
&__actions,
&__content {
padding: 8px 0;
padding-right: 16px;
padding: 8px 16px 8px 0;
flex: 1 1 auto;
}
}
@ -204,8 +203,7 @@ a.table-action-link {
}
&__content {
padding-top: 12px;
padding-bottom: 16px;
@include vertical-padding(12px, 16px);
&--unpadded {
padding: 0;

4
app/javascript/styles/gabsocial/variables.scss
View File

@ -105,7 +105,3 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px;
$font-sans-serif: 'gabsocial-font-sans-serif' !default;
$font-display: 'gabsocial-font-display' !default;
$font-monospace: 'gabsocial-font-monospace' !default;

98
app/javascript/styles/gabsocial/widgets.scss
View File

@ -12,10 +12,10 @@
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 4px 4px 0 0;
@include size(100%);
}
}
@ -23,16 +23,15 @@
background: $ui-base-color;
padding: 20px;
border-radius: 0 0 4px 4px;
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
@include text-sizing(15px, 400, 20px);
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
@include size(20px);
}
p {
@ -47,12 +46,11 @@
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
@include text-sizing(inherit, 700, inherit);
}
a {
@ -77,9 +75,9 @@
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
.account {
@ -95,9 +93,9 @@
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
@include size(44px);
}
}
}
@ -120,11 +118,10 @@
}
.contact-widget {
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
@include text-sizing(15px, 400, 20px);
strong {
font-weight: 500;
@ -238,10 +235,9 @@
h1 {
color: $primary-text-color;
font-size: 36px;
line-height: 1.1;
font-weight: 700;
margin-bottom: 10px;
@include text-sizing(36px, 700, 1.1);
}
p {
@ -268,20 +264,20 @@
box-sizing: border-box;
margin-bottom: 10px;
& > a,
& > div {
display: flex;
align-items: center;
justify-content: space-between;
&>a,
&>div {
background: $ui-base-color;
border-radius: 4px;
padding: 15px;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@include flex(space-between, center);
}
& > a {
&>a {
&:hover,
&:active,
&:focus {
@ -289,24 +285,22 @@
}
}
&.active > a {
&.active>a {
background: $ui-highlight-color;
cursor: default;
}
&.disabled > div {
&.disabled>div {
opacity: 0.5;
cursor: default;
}
h4 {
flex: 1 1 auto;
font-size: 18px;
font-weight: 700;
color: $primary-text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include text-overflow(nowrap);
@include text-sizing(18px, 700);
.fa {
color: $darker-text-color;
@ -314,14 +308,15 @@
small {
display: block;
font-weight: 400;
font-size: 15px;
margin-top: 8px;
color: $darker-text-color;
@include text-sizing(15px, 400);
}
}
&.active h4 {
&,
.fa,
small {
@ -341,19 +336,17 @@
}
.avatar-stack {
display: flex;
justify-content: flex-end;
@include flex(flex-end);
.account__avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
position: relative;
margin-left: -10px;
background: darken($ui-base-color, 8%);
border: 2px solid $ui-base-color;
@include circle(36px);
&:nth-child(1) {
z-index: 1;
}
@ -404,16 +397,15 @@
&__count {
width: 120px;
text-align: center;
font-size: 15px;
font-weight: 500;
color: $primary-text-color;
@include text-sizing(15px, 500, 1, center);
small {
display: block;
color: $darker-text-color;
font-weight: 400;
font-size: 14px;
@include text-sizing(14px, 400);
}
}
@ -444,7 +436,7 @@
}
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
$fluid-breakpoint: $maximum-width+20px;
.statuses-grid {
min-height: 600px;
@ -482,13 +474,12 @@ $fluid-breakpoint: $maximum-width + 20px;
}
.status__content {
font-size: 15px;
line-height: 20px;
@include text-sizing(15px, 400, 20px);
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
@include size(20px);
}
.status__content__spoiler-link {
@ -519,16 +510,15 @@ $fluid-breakpoint: $maximum-width + 20px;
}
a {
font-size: 14px;
line-height: 20px;
text-decoration: none;
font-weight: 500;
color: $ui-highlight-color;
@include text-sizing(14px, 500, 20px);
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
}

79
app/javascript/styles/mailer.scss
View File

@ -20,6 +20,7 @@ body {
}
.email-body {
td,
div,
a,
@ -29,6 +30,7 @@ body {
}
a {
&,
&:visited,
span {
@ -72,8 +74,8 @@ td {
font-size: 0 !important;
line-height: 100%;
text-align: center;
padding-left: 16px;
padding-right: 16px;
@include horizontal-padding(16px);
}
.email-start {
@ -98,7 +100,8 @@ body {
.col-3,
.col-4,
.col-5,
.col-6, {
.col-6,
{
font-size: 0;
display: inline-block;
width: 100%;
@ -114,10 +117,10 @@ body {
}
.column-cell {
padding-top: 16px;
padding-bottom: 16px;
vertical-align: top;
@include vertical-padding(16px);
&.button-cell {
padding-top: 0;
}
@ -187,8 +190,8 @@ p {
p {
display: block;
margin-top: 0;
margin-bottom: 16px;
@include vertical-margin(0, 16px);
&.small {
font-size: 13px;
@ -207,12 +210,11 @@ h4,
h5,
h6 {
color: $ui-secondary-color;
margin-left: 0;
margin-right: 0;
margin-top: 20px;
margin-bottom: 8px;
padding: 0;
font-weight: 500;
@include horizontal-margin(0);
@include vertical-margin(20px, 8px);
}
h1 {
@ -231,10 +233,9 @@ h3 {
}
h5 {
font-size: 16px;
line-height: 21px;
font-weight: 700;
color: lighten($ui-base-color, 34%);
@include text-sizing(16px, 700, 21px);
}
.input-cell {
@ -248,12 +249,10 @@ h5 {
background: darken($ui-base-color, 8%);
border-radius: 4px;
padding: 16px;
line-height: 20px;
mso-line-height-rule: exactly;
border-radius: 4px;
text-align: center;
font-weight: 500;
font-size: 17px;
@include text-sizing(17px, 500, 20px, center);
}
}
@ -263,8 +262,8 @@ h5 {
font-size: 0;
text-align: center;
vertical-align: top;
padding-left: 16px;
padding-right: 16px;
@include horizontal-padding(16px);
}
.content-cell {
@ -298,8 +297,8 @@ h5 {
.column-cell {
text-align: center;
padding-top: 20px;
padding-bottom: 8px;
@include vertical-padding(20px, 8px);
}
}
@ -313,6 +312,7 @@ h5 {
}
.footer {
.column-cell,
p {
color: lighten($ui-base-color, 34%);
@ -344,18 +344,16 @@ h5 {
.button {
display: table;
margin-left: auto;
margin-right: auto;
@include horizontal-margin(auto);
td {
line-height: 20px;
mso-line-height-rule: exactly;
border-radius: 4px;
text-align: center;
font-weight: 500;
font-size: 17px;
padding: 0 !important;
@include text-sizing(17px, 500, 20x, center);
a,
a span {
color: $primary-text-color;
@ -403,8 +401,7 @@ h5 {
}
.padded {
padding-left: 16px;
padding-right: 16px;
@include horizontal-padding(16px);
}
.padded-bottom {
@ -434,10 +431,10 @@ h5 {
img {
max-width: 32px;
width: 32px;
height: 32px;
display: block;
line-height: 100%;
@include size(32px);
}
}
@ -467,9 +464,9 @@ h5 {
bdi {
color: $white;
font-size: 16px;
display: block;
font-weight: 500;
@include text-sizing(16px, 500);
}
td:first-child {
@ -477,9 +474,9 @@ h5 {
}
img {
width: 48px;
height: 48px;
border-radius: 4px;
@include size(48px);
}
}
@ -505,10 +502,10 @@ h5 {
ul {
padding-left: 15px;
margin-top: 0;
margin-bottom: 0;
padding-top: 16px;
@include vertical-margin(0);
li {
margin-bottom: 16px;
color: lighten($ui-base-color, 26%);
@ -526,6 +523,7 @@ ul {
}
@media (max-width: 697px) {
.email-container,
.col-1,
.col-2,
@ -546,7 +544,6 @@ ul {
}
.padded {
padding-left: 0 !important;
padding-right: 0 !important;
@include horizontal-padding(0 !important);
}
}
}

2
app/views/accounts/show.html.haml
View File

@ -28,7 +28,7 @@
.h-feed
%data.p-name{ value: "#{@account.username} on #{site_hostname}" }/
.account__section-headline
.account-section-headline
= active_link_to t('accounts.posts_tab_heading'), short_account_url(@account)
= active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account)
= active_link_to t('accounts.media'), short_account_media_url(@account)

1
app/views/home/index.html.haml
View File

@ -1,5 +1,4 @@
- content_for :header_tags do
= preload_link_tag asset_pack_path('features/getting_started.js'), crossorigin: 'anonymous'
= preload_link_tag asset_pack_path('features/compose.js'), crossorigin: 'anonymous'
= preload_link_tag asset_pack_path('features/home_timeline.js'), crossorigin: 'anonymous'
= preload_link_tag asset_pack_path('features/notifications.js'), crossorigin: 'anonymous'

4
app/views/layouts/application.html.haml
View File

@ -20,8 +20,8 @@
%title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title
= stylesheet_pack_tag 'common', media: 'all'
= stylesheet_pack_tag current_theme, media: 'all'
-# = stylesheet_pack_tag 'common', media: 'all'
-# = stylesheet_pack_tag current_theme, media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= csrf_meta_tags

2
app/views/stream_entries/_poll.html.haml
View File

@ -17,7 +17,7 @@
= Formatter.instance.format_poll_option(status, option, autoplay: autoplay)
.poll__footer
- unless show_results
%button.button.button-secondary{ disabled: true }
%button.button.button--secondary{ disabled: true }
= t('statuses.poll.vote')
%span= t('statuses.poll.total_votes', count: poll.votes_count)

1
config/webpack/shared.js
View File

@ -84,6 +84,7 @@ module.exports = {
new MiniCssExtractPlugin({
filename: 'css/[name]-[contenthash:8].css',
chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
ignoreOrder: true,
}),
new AssetsManifestPlugin({
integrity: false,

3
package.json
View File

@ -12,7 +12,8 @@
"start": "node ./streaming/index.js",
"test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest",
"test:lint": "eslint --ext=js .",
"test:jest": "cross-env NODE_ENV=test jest --coverage"
"test:jest": "cross-env NODE_ENV=test jest --coverage",
"webpack-defaults": "webpack-defaults"
},
"repository": {
"type": "git",