commit
This commit is contained in:
mgabdev
parent
293c6502da
commit
deb9ed29bd
@ -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 = {
|
||||
|
||||
@ -58,16 +58,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started__footer a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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,8 +24,8 @@ $content-width: 840px;
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@include size(100px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
@ -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 {
|
||||
@ -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;
|
||||
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%);
|
||||
@ -320,11 +311,10 @@ $content-width: 840px;
|
||||
&>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;
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
@if type-of($color)=='color' {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
}
|
||||
|
||||
@return '%23'+unquote($color)
|
||||
}
|
||||
|
||||
@ -15,8 +16,8 @@ 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;
|
||||
@ -25,6 +26,7 @@ body {
|
||||
-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;
|
||||
@include flex(center, start);
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,138 +1,181 @@
|
||||
.account__header {
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.5;
|
||||
|
||||
.account__header__image,
|
||||
.account__avatar {filter: grayscale(100%);}
|
||||
.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;}
|
||||
|
||||
&--none {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;}
|
||||
|
||||
@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%);
|
||||
|
||||
@include circle(200px);
|
||||
|
||||
// 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;
|
||||
|
||||
@include size(200px);
|
||||
}
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
top: -45px;
|
||||
left: 10px;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
|
||||
@include size(90px);
|
||||
|
||||
.account__avatar {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-size: 90px 90px;
|
||||
|
||||
@include size(90px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
@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 {
|
||||
border: 1px solid lighten($ui-base-color, 12%);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
padding: 2px;
|
||||
|
||||
@include border-design(lighten($ui-base-color, 12%), 1px, 4px);
|
||||
}
|
||||
.button {margin-right: 10px;}
|
||||
|
||||
.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;}
|
||||
|
||||
@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;
|
||||
|
||||
@include text-sizing(20px, 800, 24px);
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
@include text-sizing(16px, 800, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: $ui-secondary-color;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-top: 2px;
|
||||
|
||||
@include text-sizing(12px, 400, 14px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {border-bottom: 2px solid $primary-text-color;}
|
||||
&.score {border-bottom:none !important;}
|
||||
&.active {
|
||||
border-bottom: 2px solid $primary-text-color;
|
||||
}
|
||||
|
||||
&.score {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
} // end .account__header__extra
|
||||
}
|
||||
}
|
||||
|
||||
// end .account__header__extra
|
||||
@media screen and (max-width:895px) {
|
||||
.account-mobile-container {
|
||||
display: block;
|
||||
@ -140,7 +183,12 @@
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
padding: 10px 10px 0px;
|
||||
&--nonuser {padding: 10px 10px 15px;}
|
||||
|
||||
&--nonuser {
|
||||
padding: 10px 10px 15px;
|
||||
}
|
||||
}
|
||||
} // end .account__header
|
||||
}
|
||||
}
|
||||
|
||||
// end .account__header
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,12 +25,11 @@
|
||||
float: left;
|
||||
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;}
|
||||
}
|
||||
@ -5,19 +5,31 @@ textarea {
|
||||
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);
|
||||
|
||||
@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($gab-secondary-text);
|
||||
}
|
||||
&:focus {outline: none;}
|
||||
|
||||
@include input-placeholder {
|
||||
color: $gab-secondary-text;
|
||||
}
|
||||
}
|
||||
textarea.standard {resize: vertical;}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.standard {
|
||||
resize: vertical;
|
||||
}
|
||||
@ -1,184 +1,3 @@
|
||||
.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 {
|
||||
@ -191,36 +10,28 @@
|
||||
}
|
||||
|
||||
.error-modal__body {
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
max-width: 520px;
|
||||
max-height: 420px;
|
||||
position: relative;
|
||||
|
||||
@include size(80vw, 80vh);
|
||||
@include max-size(520px, 420px);
|
||||
|
||||
&>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(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;
|
||||
|
||||
@include flex(center, center, column);
|
||||
}
|
||||
|
||||
.onboarding-modal__paginator,
|
||||
@ -238,15 +49,14 @@
|
||||
.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;
|
||||
|
||||
@include text-sizing(14px, 500, inherit);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@ -277,11 +87,11 @@
|
||||
margin-bottom: 15px;
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: $inverted-text-color;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
||||
@include text-sizing(12px, 500);
|
||||
}
|
||||
|
||||
&__case {
|
||||
@ -295,9 +105,9 @@
|
||||
|
||||
.onboard-sliders {
|
||||
display: inline-block;
|
||||
max-width: 30px;
|
||||
max-height: auto;
|
||||
margin-left: 10px;
|
||||
|
||||
@include max-size(30px, auto);
|
||||
}
|
||||
|
||||
.boost-modal,
|
||||
@ -310,16 +120,22 @@
|
||||
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;}
|
||||
|
||||
@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;
|
||||
@ -327,6 +143,7 @@
|
||||
top: 10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
@ -336,8 +153,8 @@
|
||||
.status {
|
||||
background: $white;
|
||||
border-bottom-color: $ui-secondary-color;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
@include vertical-padding(10px);
|
||||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
@ -361,12 +178,12 @@
|
||||
.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;
|
||||
|
||||
@include flex(space-between);
|
||||
|
||||
&>div {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
@ -435,7 +252,10 @@
|
||||
.status__content,
|
||||
.status__content p {
|
||||
color: $gab-secondary-text;
|
||||
body.theme-gabsocial-light & {color: $gab-default-text-light;}
|
||||
|
||||
body.theme-gabsocial-light & {
|
||||
color: $gab-default-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@ -467,18 +287,17 @@
|
||||
resize: vertical;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include border-design($ui-secondary-color, 1px, 4px);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid darken($ui-secondary-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 24px;
|
||||
@include vertical-margin(20px, 24px);
|
||||
|
||||
&__label {
|
||||
color: $inverted-text-color;
|
||||
@ -502,34 +321,55 @@
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
width: calc(100% - 72px);
|
||||
margin: 35px;
|
||||
.actions-modal__item-label {font-weight: 500;}
|
||||
|
||||
.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);}
|
||||
&.with-status {
|
||||
max-height: calc(80vh - 75px);
|
||||
}
|
||||
|
||||
li:empty {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:empty {margin: 0;}
|
||||
li:not(:empty) {
|
||||
&:first-of-type{margin: 10px 0 0;}
|
||||
&:last-of-type{margin: 0 0 10px;}
|
||||
&: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);
|
||||
font-size: 14px;
|
||||
color: $gab-secondary-text;
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
button {transition: none;}
|
||||
button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
||||
&,
|
||||
button {
|
||||
background: $gab-background-base;
|
||||
@ -537,7 +377,10 @@
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
button:first-child {margin-right: 10px;}
|
||||
|
||||
button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -545,13 +388,14 @@
|
||||
|
||||
.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;
|
||||
|
||||
@include text-sizing(14px, 500);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -600,7 +444,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@include breakpoint(sm) {
|
||||
.account-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,35 +192,28 @@
|
||||
.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;
|
||||
|
||||
@include flex(center, stretch, row, nowrap);
|
||||
|
||||
&>div {
|
||||
flex: 1 1 33.3%;
|
||||
@ -244,29 +222,18 @@
|
||||
}
|
||||
|
||||
.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) {
|
||||
@ -828,8 +778,7 @@
|
||||
font-size: 18px;
|
||||
|
||||
&>span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@include text-sizing(14px, 500);
|
||||
}
|
||||
}
|
||||
|
||||
@ -851,7 +800,7 @@
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@include breakpoint(sm) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -34,9 +34,7 @@ code {
|
||||
padding-left: 28px;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
@include abs-position(-2px, auto, auto, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,11 +142,11 @@ code {
|
||||
|
||||
&>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,
|
||||
@ -169,12 +164,12 @@ code {
|
||||
.input.with_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 {
|
||||
@ -191,11 +186,11 @@ code {
|
||||
|
||||
&>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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@include breakpoint(sm) {
|
||||
.account-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -3,39 +3,33 @@ body.rtl {
|
||||
|
||||
.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"],
|
||||
@ -221,13 +199,11 @@ body.rtl {
|
||||
}
|
||||
|
||||
.simple_form .input.radio_buttons .radio>label {
|
||||
padding-right: 28px;
|
||||
padding-left: 0;
|
||||
@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 {
|
||||
|
||||
.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,13 +333,11 @@ 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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -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 {
|
||||
@ -270,18 +266,18 @@
|
||||
|
||||
&>a,
|
||||
&>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@ -301,12 +297,10 @@
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,12 +510,11 @@ $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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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,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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user