Fix all scss linter warnings
This commit is contained in:
parent
66dbed005d
commit
c889269ecb
32 changed files with 493 additions and 343 deletions
|
@ -5,12 +5,13 @@
|
|||
&-description {
|
||||
input {
|
||||
&::placeholder {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__warning {
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
|
|
|
@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default;
|
|||
$action-button-color: #8d9ac2;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color,6%) !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !default;
|
||||
|
|
|
@ -15,7 +15,10 @@ body.app-body::after,
|
|||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
|
@ -70,21 +73,24 @@ body.app-body::after {
|
|||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui .page__columns::after {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.ui .page__top::after {
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
}
|
||||
|
||||
.ui .page__top + .page__columns::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
border-color: $halloween-dark;
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.search__icon .fa-times-circle,
|
||||
|
@ -101,7 +107,7 @@ body.app-body::after {
|
|||
}
|
||||
|
||||
.admin-wrapper .content h2 {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.compose-form .autosuggest-textarea__textarea,
|
||||
|
@ -115,11 +121,18 @@ body.app-body::after {
|
|||
|
||||
.button {
|
||||
background-color: $halloween-orange;
|
||||
&:focus, &:hover { background-color: darken($halloween-orange, 10%);}
|
||||
color: black;
|
||||
color: #000;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken($halloween-orange, 10%);
|
||||
}
|
||||
}
|
||||
.simple_form button, .simple_form .button, .simple_form .block-button {
|
||||
color: black;
|
||||
|
||||
.simple_form button,
|
||||
.simple_form .button,
|
||||
.simple_form .block-button {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.getting-started__footer::before {
|
||||
|
@ -160,12 +173,15 @@ body.app-body::after {
|
|||
.dropdown-menu {
|
||||
border-color: $halloween-orange;
|
||||
}
|
||||
|
||||
.dropdown-menu__item a {
|
||||
color: $halloween-orange;
|
||||
}
|
||||
|
||||
.dropdown-menu__arrow.bottom {
|
||||
border-bottom-color: $halloween-orange;
|
||||
}
|
||||
|
||||
.dropdown-menu__arrow.top {
|
||||
border-top-color: $halloween-orange;
|
||||
}
|
||||
|
@ -174,13 +190,20 @@ body.app-body::after {
|
|||
background: $gab-background-container;
|
||||
}
|
||||
|
||||
.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar {
|
||||
background: $halloween-dark;
|
||||
}
|
||||
.boost-modal, .confirmation-modal, .report-modal, .actions-modal, .mute-modal {
|
||||
|
||||
.boost-modal,
|
||||
.confirmation-modal,
|
||||
.report-modal,
|
||||
.actions-modal,
|
||||
.mute-modal {
|
||||
border-color: $halloween-orange;
|
||||
}
|
||||
|
||||
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
@ -19,12 +19,15 @@ $ui-base-lighter-color: darken(#2da8be, 35%);
|
|||
}
|
||||
|
||||
.brand__tagline {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .nav-link {
|
||||
color: white;
|
||||
&:hover, &:focus, &:active {
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $gab-background-base-light;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ body {
|
|||
color: $white;
|
||||
|
||||
&.button-alternative-2 {
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -175,7 +175,7 @@ body {
|
|||
|
||||
.embed-modal {
|
||||
background: #333;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.boost-modal__action-bar,
|
||||
|
@ -290,6 +290,7 @@ body {
|
|||
.simple_form input[type="password"],
|
||||
.simple_form textarea {
|
||||
border-color: $gab-brand-default;
|
||||
|
||||
&:hover {
|
||||
border-color: $gab-brand-default;
|
||||
}
|
||||
|
@ -364,11 +365,11 @@ body {
|
|||
}
|
||||
|
||||
.admin-wrapper .content > p {
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btngroup__btn--active {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.timeline-compose-block .compose-form .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
|
||||
|
@ -376,7 +377,7 @@ body {
|
|||
}
|
||||
|
||||
.promo-panel-item {
|
||||
@include light-theme-shadow();
|
||||
@include light-theme-shadow;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
|
@ -395,7 +396,7 @@ body {
|
|||
}
|
||||
|
||||
.wtf-panel {
|
||||
@include light-theme-shadow();
|
||||
@include light-theme-shadow;
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
|
@ -424,10 +425,10 @@ body {
|
|||
input[type='text'],
|
||||
textarea {
|
||||
&.standard {
|
||||
@include input-placeholder($gab-secondary-text);
|
||||
color: $gab-placeholder-accent;
|
||||
border-color: $gab-secondary-text;
|
||||
background: $gab-background-base-light;
|
||||
@include input-placeholder($gab-secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -467,6 +468,6 @@ textarea {
|
|||
color: $gab-default-text-light;
|
||||
}
|
||||
|
||||
.fa-site-icon:before {
|
||||
.fa-site-icon::before {
|
||||
filter: grayscale(100%) invert(0);
|
||||
}
|
||||
|
|
|
@ -39,6 +39,8 @@
|
|||
}
|
||||
|
||||
@mixin search-input {
|
||||
@include font-size(16);
|
||||
@include line-height(19);
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
@ -47,8 +49,6 @@
|
|||
font-family: inherit;
|
||||
background: $nav-ui-search-bg-color;
|
||||
color: $nav-ui-highlight-color;
|
||||
@include font-size(16);
|
||||
@include line-height(19);
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
|
@ -69,22 +69,22 @@
|
|||
}
|
||||
|
||||
@mixin search-popout {
|
||||
@include font-size(12);
|
||||
@include line-height(14);
|
||||
@include font-weight(normal);
|
||||
background: $gab-background-container;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $gab-placeholder-accent;
|
||||
padding: 8px 10px 17px;
|
||||
margin: 4px 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);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
|
@ -62,7 +62,12 @@ $small-breakpoint: 960px;
|
|||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-display, sans-serif;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1.25em;
|
||||
|
@ -71,7 +76,12 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
|
||||
hr + {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
}
|
||||
|
@ -663,18 +673,33 @@ $small-breakpoint: 960px;
|
|||
|
||||
@media screen and (max-width: 767px) {
|
||||
background-image: none;
|
||||
.brand__tagline, .brand h1 { color: white; }
|
||||
|
||||
.brand__tagline,
|
||||
.brand h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
.nav-link {
|
||||
color: white;
|
||||
&:hover, &:focus, &:active { color: $gab-background-base-light; }
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $gab-background-base-light;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
filter: brightness(0) invert(100%);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: darken($gab-brand-default, 10%);
|
||||
&:hover, &:focus, &:active {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($gab-brand-default, 15%);
|
||||
}
|
||||
}
|
||||
|
@ -690,7 +715,7 @@ $small-breakpoint: 960px;
|
|||
height: auto;
|
||||
min-height: 80vh;
|
||||
|
||||
@media (min-width:767px) {
|
||||
@media (min-width: 767px) {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
|
@ -708,8 +733,8 @@ $small-breakpoint: 960px;
|
|||
width: 395px;
|
||||
}
|
||||
|
||||
@media (min-width:767px) and (max-width:1024px) {
|
||||
padding: 40px 20px 20px 20px;
|
||||
@media (min-width: 767px) and (max-width: 1024px) {
|
||||
padding: 40px 20px 20px;
|
||||
|
||||
&--left {
|
||||
margin-right: 40px;
|
||||
|
@ -720,7 +745,7 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
height: auto;
|
||||
padding: 20px 10px 30px;
|
||||
flex-direction: column;
|
||||
|
@ -752,11 +777,11 @@ $small-breakpoint: 960px;
|
|||
img {
|
||||
height: 100px;
|
||||
|
||||
@media (min-width:767px) and (max-width:1024px) {
|
||||
@media (min-width: 767px) and (max-width: 1024px) {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -933,7 +958,7 @@ $small-breakpoint: 960px;
|
|||
margin-right: 15px;
|
||||
|
||||
h1 {
|
||||
@include font-montserrat();
|
||||
@include font-montserrat;
|
||||
color: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
|
@ -947,19 +972,19 @@ $small-breakpoint: 960px;
|
|||
margin-top: 25px;
|
||||
font-weight: 400;
|
||||
|
||||
@media (min-width:767px) and (max-width:1024px) {
|
||||
@media (min-width: 767px) and (max-width: 1024px) {
|
||||
width: 320px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
font-size: 22px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:767px) {
|
||||
@media (min-width: 767px) {
|
||||
.hidden-sm {
|
||||
display: block;
|
||||
}
|
||||
|
@ -969,7 +994,7 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
@ -170,7 +170,7 @@ $content-width: 840px;
|
|||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
|
@ -502,10 +502,11 @@ $content-width: 840px;
|
|||
a {
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.diff-old {
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
@if type-of($color) == 'color' {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
}
|
||||
@return '%23' + unquote($color)
|
||||
@return '%23' + unquote($color);
|
||||
}
|
||||
|
||||
html {
|
||||
@include font-roboto();
|
||||
@include font-roboto;
|
||||
@include font-weight(normal);
|
||||
font-size: 62.5%;
|
||||
text-size-adjust: 100%;
|
||||
|
@ -21,9 +21,9 @@ body {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: "kern";
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background-color: $gab-background-base;
|
||||
|
||||
&.system-font {
|
||||
|
@ -150,7 +150,7 @@ button {
|
|||
|
||||
.visuallyhidden {
|
||||
border: 0 !important;
|
||||
clip: rect(1px,1px,1px,1px) !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
font-size: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
|
|
|
@ -28,7 +28,9 @@
|
|||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {background-color: lighten($ui-highlight-color, 10%);}
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
}
|
||||
|
||||
&--destructive {
|
||||
transition: none;
|
||||
|
@ -187,7 +189,7 @@
|
|||
|
||||
.text-icon-button {
|
||||
color: $gab-secondary-text;
|
||||
border: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
@ -245,14 +247,16 @@
|
|||
.ellipsis::after {content: "…";}
|
||||
|
||||
.timeline-compose-block {
|
||||
@include gab-container-standards;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
@include gab-container-standards();
|
||||
|
||||
.emoji-picker-wrapper {
|
||||
.emoji-picker-dropdown {top: 10px;}
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
flex: 1 1;
|
||||
padding: 0 0 0 20px !important;
|
||||
|
@ -263,12 +267,12 @@
|
|||
}
|
||||
|
||||
.compose-form__autosuggest-wrapper {
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-top: 11px solid transparent;
|
||||
border-right: 12px solid #fff;
|
||||
border-bottom: 11px solid transparent;
|
||||
|
@ -276,6 +280,7 @@
|
|||
left: -22px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
padding: 14px 32px 13px 10px !important;
|
||||
}
|
||||
|
@ -314,7 +319,7 @@
|
|||
flex: 0 2 auto;
|
||||
max-height: 500px;
|
||||
@media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;}
|
||||
@media screen and (max-width: 320px) {max-height :130px;}
|
||||
@media screen and (max-width: 320px) {max-height: 130px;}
|
||||
}
|
||||
|
||||
.reply-indicator__header {
|
||||
|
@ -453,6 +458,7 @@
|
|||
background: transparent;
|
||||
padding: 0;
|
||||
padding-top: 8px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
|
@ -788,7 +794,7 @@
|
|||
}
|
||||
|
||||
.account__avatar {
|
||||
@include avatar-radius();
|
||||
@include avatar-radius;
|
||||
position: relative;
|
||||
background-color: $ui-base-color;
|
||||
|
||||
|
@ -799,11 +805,11 @@
|
|||
}
|
||||
|
||||
&-composite {
|
||||
@include avatar-radius();
|
||||
@include avatar-radius;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
@include avatar-radius();
|
||||
@include avatar-radius;
|
||||
float: left;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
@ -819,12 +825,12 @@ a .account__avatar {
|
|||
@include avatar-size(48px);
|
||||
|
||||
&-base {
|
||||
@include avatar-radius();
|
||||
@include avatar-radius;
|
||||
@include avatar-size(36px);
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
@include avatar-radius();
|
||||
@include avatar-radius;
|
||||
@include avatar-size(24px);
|
||||
|
||||
position: absolute;
|
||||
|
@ -846,7 +852,7 @@ a .account__avatar {
|
|||
}
|
||||
|
||||
.account__reciprocal_follow_message {
|
||||
padding: 0px 5px;
|
||||
padding: 0 5px;
|
||||
color: $gab-secondary-text;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -1198,7 +1204,7 @@ a.account__display-name {
|
|||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1228,13 +1234,13 @@ a.account__display-name {
|
|||
.icon-button.close {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transform: scale(0.0, 1.0) translate(-100%, 0);
|
||||
transform: scale(0, 1) translate(-100%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.compose__action-bar .icon-button {
|
||||
pointer-events: auto;
|
||||
transform: scale(1.0, 1.0) translate(0, 0);
|
||||
transform: scale(1, 1) translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -1341,7 +1347,7 @@ a.account__display-name {
|
|||
.ui {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 0 100px 0;
|
||||
padding: 0 0 100px;
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
|
@ -1354,7 +1360,7 @@ a.account__display-name {
|
|||
height: auto;
|
||||
z-index: 105;
|
||||
|
||||
@media (min-width:895px) {
|
||||
@media (min-width: 895px) {
|
||||
top: -290px;
|
||||
position: sticky;
|
||||
}
|
||||
|
@ -1439,6 +1445,7 @@ a.account__display-name {
|
|||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
|
||||
.column,
|
||||
.drawer {
|
||||
width: 100%;
|
||||
|
@ -1446,6 +1453,7 @@ a.account__display-name {
|
|||
padding: 0;
|
||||
}
|
||||
.autosuggest-textarea__textarea {font-size: 16px;}
|
||||
|
||||
.search__input {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
|
@ -1456,15 +1464,20 @@ a.account__display-name {
|
|||
@media screen and (min-width: 630px) {
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.media-gallery,
|
||||
.video-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.account__header__bar {padding: 5px 10px;}
|
||||
|
||||
.navigation-bar,
|
||||
.compose-form {padding: 15px;}
|
||||
.compose-form {
|
||||
padding: 15px;
|
||||
}
|
||||
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
|
||||
|
||||
.status {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
@ -1534,7 +1547,7 @@ a.account__display-name {
|
|||
background-color: $nav-ui-highlight-color;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
box-shadow: 2px 5px 5px rgba(0,0,0,0.5);
|
||||
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -1592,23 +1605,24 @@ a.account__display-name {
|
|||
height: 100%;
|
||||
|
||||
&__badge {
|
||||
@include font-montserrat;
|
||||
@include font-size(14);
|
||||
@include line-height(14);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: -10px;
|
||||
top: 3px;
|
||||
@media screen and (max-width: 895px) {
|
||||
top: 0;
|
||||
}
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 1px 3px 0;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
@include font-montserrat();
|
||||
@include font-size(14);
|
||||
@include line-height(14);
|
||||
color: #fff;
|
||||
background: $nav-ui-highlight-color;
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1630,7 +1644,7 @@ a.account__display-name {
|
|||
background: $gab-background-container;
|
||||
|
||||
&--highlighted {
|
||||
background-color: #30CE7D;
|
||||
background-color: #30ce7d;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
|
@ -1642,7 +1656,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
|
@ -2057,7 +2071,7 @@ a.account__display-name {
|
|||
.setting-text {
|
||||
color: $darker-text-color;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
@ -2367,7 +2381,8 @@ a.status-card.compact:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile .column {@include gab-container-standards();}
|
||||
.columns-area--mobile .column {@include gab-container-standards;}
|
||||
|
||||
.column-header__wrapper {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
|
@ -2405,7 +2420,7 @@ a.status-card.compact:hover {
|
|||
& > button,
|
||||
& > .btn {
|
||||
margin: 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
@ -2531,6 +2546,7 @@ a.status-card.compact:hover {
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $darker-text-color;
|
||||
text-decoration: underline;
|
||||
|
@ -2607,11 +2623,11 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.no-reduce-motion .loading-indicator span {
|
||||
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.no-reduce-motion .loading-indicator__figure {
|
||||
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes loader-figure {
|
||||
|
@ -2778,7 +2794,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.column-select {
|
||||
&__control {
|
||||
@include search-input();
|
||||
@include search-input;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
|
@ -2829,7 +2845,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
&__menu {
|
||||
@include search-popout();
|
||||
@include search-popout;
|
||||
padding: 0;
|
||||
background: $ui-secondary-color;
|
||||
}
|
||||
|
@ -2991,7 +3007,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.no-reduce-motion .shake-bottom {
|
||||
transform-origin: 50% 100%;
|
||||
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
|
||||
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown__menu {
|
||||
|
@ -3287,9 +3303,9 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.search__input {
|
||||
@include search-input;
|
||||
display: block;
|
||||
padding: 7px 30px 6px 10px;
|
||||
@include search-input();
|
||||
}
|
||||
|
||||
.search__icon {
|
||||
|
@ -3303,6 +3319,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.fa {
|
||||
@include font-size(16);
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
@ -3311,7 +3328,6 @@ a.status-card.compact:hover {
|
|||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@include font-size(16);
|
||||
color: $gab-placeholder-accent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
@ -3324,8 +3340,8 @@ a.status-card.compact:hover {
|
|||
.fa-search.active {pointer-events: none;}
|
||||
|
||||
.fa-times-circle {
|
||||
cursor: pointer;
|
||||
@include font-size(17);
|
||||
cursor: pointer;
|
||||
color: $nav-ui-highlight-color;
|
||||
&:hover {color: lighten($nav-ui-highlight-color, 7%);}
|
||||
}
|
||||
|
@ -3506,7 +3522,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.media-gallery__item {
|
||||
border: none;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
|
@ -3993,7 +4009,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.account-gallery__item {
|
||||
border: none;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
@ -4076,13 +4092,13 @@ a.status-card.compact:hover {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-popout-container{
|
||||
.search-popout-container {
|
||||
width: 251px;
|
||||
@media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
@include search-popout();
|
||||
@include search-popout;
|
||||
}
|
||||
|
||||
noscript {
|
||||
|
@ -4184,14 +4200,14 @@ noscript {
|
|||
.icon-button.close {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: scale(1.0, 1.0) translate(0, 0);
|
||||
transform: scale(1, 1) translate(0, 0);
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.compose__action-bar .icon-button {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: scale(0.0, 1.0) translate(100%, 0);
|
||||
transform: scale(0, 1) translate(100%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4221,7 +4237,7 @@ noscript {
|
|||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
|
@ -4432,7 +4448,7 @@ noscript {
|
|||
display: flex;
|
||||
|
||||
.account__relationship {
|
||||
padding: 8px 5px 0 5px;
|
||||
padding: 8px 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4667,7 +4683,7 @@ noscript {
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 15px 0 15px;
|
||||
padding: 15px 15px 0;
|
||||
|
||||
&__icon {
|
||||
margin-right: 10px;
|
||||
|
@ -4732,11 +4748,11 @@ noscript {
|
|||
padding-right: 10px;
|
||||
|
||||
&__avatar {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: red;
|
||||
left: -58px;
|
||||
position: absolute;
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-color: #ff0000;
|
||||
left: -58px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
@ -4786,11 +4802,11 @@ noscript {
|
|||
width: 15px;
|
||||
height: 15px;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: #00A3ED;
|
||||
background-color: #00a3ed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
@ -4798,7 +4814,7 @@ noscript {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '\f00c';
|
||||
|
@ -4879,14 +4895,14 @@ noscript {
|
|||
max-height: 160px !important;
|
||||
}
|
||||
|
||||
.compose-form__autosuggest-wrapper:before {
|
||||
.compose-form__autosuggest-wrapper::before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 100vh;
|
||||
|
@ -4910,7 +4926,7 @@ noscript {
|
|||
flex-direction: column;
|
||||
flex: 1 1;
|
||||
|
||||
@media (min-width:895px) {
|
||||
@media (min-width: 895px) {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
@ -4998,7 +5014,7 @@ noscript {
|
|||
padding: 10px 0;
|
||||
margin: 5px 0;
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
|
@ -5079,7 +5095,7 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
height: 270px !important;
|
||||
width: 330px !important;
|
||||
}
|
||||
|
@ -5113,7 +5129,7 @@ noscript {
|
|||
padding: 25px 0;
|
||||
background-color: lighten($ui-base-color, 6%);
|
||||
|
||||
@media (min-width:895px) {
|
||||
@media (min-width: 895px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
@ -5137,12 +5153,12 @@ noscript {
|
|||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
max-width: 580px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:895px) and (max-width:1190px) {
|
||||
@media (min-width: 895px) and (max-width: 1190px) {
|
||||
&__title-text,
|
||||
&__type-filters-tabs {
|
||||
max-width: 900px;
|
||||
|
@ -5163,7 +5179,7 @@ noscript {
|
|||
overflow: hidden;
|
||||
|
||||
&.hidden {
|
||||
max-height: 0px;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
|
@ -5193,17 +5209,17 @@ noscript {
|
|||
margin: 0 5px 5px 0;
|
||||
|
||||
&--pro {
|
||||
background-color: blueviolet;
|
||||
background-color: #8a2be2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--investor {
|
||||
background-color: gold;
|
||||
background-color: #ffd700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&--donor {
|
||||
background-color: lightgreen;
|
||||
background-color: #90ee90;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,21 +1,27 @@
|
|||
.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;}
|
||||
@media screen and (max-width: 895px) {height: 225px;}
|
||||
&--none {height: 125px;}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
|
@ -24,14 +30,16 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
@ -49,11 +57,12 @@
|
|||
height: 200px;
|
||||
background-size: 200px 200px;
|
||||
}
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
top: -45px;
|
||||
left: 10px;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
|
||||
.account__avatar {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
|
@ -62,6 +71,7 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
&__extra {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -72,20 +82,22 @@
|
|||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
@media (min-width:895px) and (max-width:1190px) {
|
||||
@media (min-width: 895px) and (max-width: 1190px) {
|
||||
max-width: 900px;
|
||||
padding-left: 300px;
|
||||
}
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
max-width: 900px;
|
||||
padding: 10px 10px 0 10px;
|
||||
padding: 10px 10px 0;
|
||||
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;
|
||||
|
@ -94,32 +106,37 @@
|
|||
}
|
||||
.button {margin-right: 10px;}
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
@media screen and (max-width:895px) {
|
||||
@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;
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: $ui-secondary-color;
|
||||
font-size: 12px;
|
||||
|
@ -127,20 +144,23 @@
|
|||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: 0 !important;}
|
||||
}
|
||||
}
|
||||
} // end .account__header__extra
|
||||
@media screen and (max-width:895px) {
|
||||
@media screen and (max-width: 895px) {
|
||||
.account-mobile-container {
|
||||
display: block;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
padding: 10px 10px 0px;
|
||||
padding: 10px 10px 0;
|
||||
&--nonuser {padding: 10px 10px 15px;}
|
||||
}
|
||||
}
|
||||
} // end .account__header
|
||||
} // end .account__header
|
||||
|
|
|
@ -5,15 +5,15 @@ a.button {
|
|||
// NOTE - will define the larger standard buttons here and apply class where used.
|
||||
|
||||
&-small {
|
||||
height: 20px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@include font-size(11);
|
||||
@include line-height(11);
|
||||
@include font-weight(bold);
|
||||
height: 20px;
|
||||
padding: 5px 15px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: $gab-small-cta-primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,42 +1,47 @@
|
|||
.dropdown-menu {
|
||||
@include font-size(13);
|
||||
@include line-height(26);
|
||||
@include font-weight(normal);
|
||||
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);
|
||||
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;
|
||||
|
@ -44,10 +49,12 @@
|
|||
border-right-color: $gab-placeholder-accent;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
&__item a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
@ -58,14 +65,16 @@
|
|||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
color: $gab-secondary-text;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: $gab-brand-default !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__separator {
|
||||
display: block;
|
||||
margin: 10px !important;
|
||||
|
|
|
@ -1,71 +1,73 @@
|
|||
.group-column-header {
|
||||
overflow: hidden;
|
||||
@include gab-container-standards();
|
||||
.group-column-header__title {
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-column-header__cta {
|
||||
float: right;
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
a {color: #fff;}
|
||||
}
|
||||
@include gab-container-standards;
|
||||
overflow: hidden;
|
||||
|
||||
.group-column-header__title {
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-column-header__cta {
|
||||
float: right;
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
a {color: #fff;}
|
||||
}
|
||||
}
|
||||
|
||||
.group-card-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
display: block;
|
||||
flex: 0 0 calc(50% - 20px/2);
|
||||
@include gab-container-standards();
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
@include gab-container-standards;
|
||||
display: block;
|
||||
flex: 0 0 calc(50% - 20px/2);
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
.group-card__header {
|
||||
overflow: hidden;
|
||||
|
||||
.group-card__header {
|
||||
overflow: hidden;
|
||||
img {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
background: $gab-background-container;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
background: $gab-background-container;
|
||||
}
|
||||
.group-card__content {
|
||||
padding: 15px;
|
||||
|
||||
.group-card__title {
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-card__content {
|
||||
padding: 15px;
|
||||
|
||||
.group-card__title {
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-card__meta {
|
||||
color: $gab-secondary-text;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-card__description {
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
.group-card__meta {
|
||||
color: $gab-secondary-text;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.group-card__title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.group-card__description {
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.group-card__title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,84 +1,84 @@
|
|||
.group {
|
||||
.group__header-container {
|
||||
.group__header-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.group__header {
|
||||
width: 100%;
|
||||
max-width: 1150px;
|
||||
background: $gab-background-container;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
|
||||
.group__cover {
|
||||
img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.group__header {
|
||||
width: 100%;
|
||||
max-width: 1150px;
|
||||
background: $gab-background-container;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
.group__tabs {
|
||||
.group__tabs__tab {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 16px 22px;
|
||||
text-align: center;
|
||||
color: $primary-text-color;
|
||||
|
||||
.group__cover {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
&:hover,
|
||||
&--active {
|
||||
border-bottom: 2px solid $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.group__tabs {
|
||||
.group__tabs__tab {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 16px 22px;
|
||||
text-align: center;
|
||||
color: $primary-text-color;
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
border-bottom: 2px solid $primary-text-color;
|
||||
}
|
||||
}
|
||||
button {
|
||||
float: right;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
div {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
float: right;
|
||||
margin: 7px;
|
||||
}
|
||||
.group__panel {
|
||||
padding: 10px 10px 20px;
|
||||
|
||||
div {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group__panel {
|
||||
padding: 10px 10px 20px 10px;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group__panel__description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.group__panel__label {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
background: $gab-background-container;
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.group__panel__description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.group__feed {
|
||||
.group__panel__label {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
background: $gab-background-container;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.group__feed {
|
||||
background: $gab-background-container;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
.group-form {
|
||||
@include gab-container-standards;
|
||||
padding: 20px;
|
||||
@include gab-container-standards();
|
||||
&,
|
||||
|
||||
&,
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
textarea {
|
||||
&.standard {
|
||||
|
@ -14,32 +16,37 @@
|
|||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
float: left;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.group-form__file-label {
|
||||
@include font-size(12);
|
||||
@include font-weight(light);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
height: 20px;
|
||||
padding: 3px 0 0 33px;
|
||||
@include font-size(12);
|
||||
@include font-weight(light);
|
||||
height: 20px;
|
||||
padding: 3px 0 0 33px;
|
||||
color: $gab-secondary-text;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/sprite-post-functions.png');
|
||||
background-size: 100px 1200px;
|
||||
|
||||
&:hover {
|
||||
color: $gab-brand-default;
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
&.group-form__file-label--selected {
|
||||
background-position: 0 -100px;
|
||||
color: $gab-brand-default;;
|
||||
color: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
|
||||
.group-form__file {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
|
@ -49,4 +56,4 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
button {float: right;}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,33 +1,33 @@
|
|||
.group-sidebar-panel {
|
||||
&__items {
|
||||
padding: 0 15px 15px;
|
||||
&__items {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
&__show-all {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
&__show-all {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: 0.8em;
|
||||
color: $gab-secondary-text;
|
||||
|
||||
&__unread {
|
||||
color: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: 0.8em;
|
||||
color: $gab-secondary-text;
|
||||
|
||||
&__unread {
|
||||
color: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
input[type='text'],
|
||||
textarea {
|
||||
&.standard {
|
||||
@include font-size(16);
|
||||
@include line-height(18);
|
||||
@include input-placeholder($gab-placeholder-accent);
|
||||
box-sizing: border-box;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
@include font-size(16);
|
||||
@include line-height(18);
|
||||
color: $gab-brand-default;
|
||||
border-color: $gab-placeholder-accent;
|
||||
background: $gab-background-container;
|
||||
@include input-placeholder($gab-placeholder-accent);
|
||||
&:focus {outline: none;}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -318,11 +318,13 @@
|
|||
border: 1px solid $gab-placeholder-accent;
|
||||
color: $gab-secondary-text;
|
||||
background: $gab-background-container;
|
||||
|
||||
.status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
height: 28px;
|
||||
left: 10px;
|
||||
|
@ -330,6 +332,7 @@
|
|||
top: 10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
|
@ -500,13 +503,16 @@
|
|||
}
|
||||
|
||||
.actions-modal {
|
||||
width: calc(100% - 72px);
|
||||
margin: 35px;
|
||||
|
||||
.status {
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
width: calc(100% - 72px);
|
||||
margin: 35px;
|
||||
|
||||
.actions-modal__item-label {font-weight: 500;}
|
||||
|
||||
ul {
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
|
@ -516,9 +522,11 @@
|
|||
&.with-status {max-height: calc(80vh - 75px);}
|
||||
|
||||
li:empty {margin: 0;}
|
||||
|
||||
li:not(:empty) {
|
||||
&:first-of-type{margin: 10px 0 0;}
|
||||
&:last-of-type{margin: 0 0 10px;}
|
||||
&:first-of-type {margin: 10px 0 0;}
|
||||
&:last-of-type {margin: 0 0 10px;}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -526,8 +534,12 @@
|
|||
@inclide font-size(14);
|
||||
color: $gab-secondary-text;
|
||||
text-decoration: none;
|
||||
|
||||
&,
|
||||
button {transition: none;}
|
||||
button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
|
@ -536,7 +548,7 @@
|
|||
button {
|
||||
background: $gab-background-base;
|
||||
color: $gab-text-highlight;
|
||||
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
button:first-child {margin-right: 10px;}
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
&--borderless {
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
.sidebar-menu__wrapper {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
.user-panel {
|
||||
@include gab-container-standards;
|
||||
display: flex;
|
||||
width: 265px;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden;
|
||||
@include gab-container-standards();
|
||||
|
||||
&__header {
|
||||
display: block;
|
||||
height: 112px;
|
||||
|
@ -36,7 +37,7 @@
|
|||
|
||||
&__meta {
|
||||
display: block;
|
||||
padding: 6px 20px 17px 20px;
|
||||
padding: 6px 20px 17px;
|
||||
}
|
||||
|
||||
&__account {
|
||||
|
|
|
@ -121,7 +121,7 @@
|
|||
grid-auto-rows: max-content;
|
||||
|
||||
.column-0 {
|
||||
grid-column: 1/3;
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
|
@ -136,7 +136,7 @@
|
|||
}
|
||||
|
||||
.column-3 {
|
||||
grid-column: 1/3;
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
|
@ -360,7 +360,7 @@
|
|||
|
||||
.nav-button {
|
||||
background: $gab-brand-default;
|
||||
color: white;
|
||||
color: #fff;
|
||||
margin: 8px;
|
||||
margin-left: 0;
|
||||
border-radius: 4px;
|
||||
|
|
|
@ -7,8 +7,9 @@ body.demetricator {
|
|||
.sidebar-menu-profile__stats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account__header__bar {
|
||||
min-height: 50px;
|
||||
@media (min-width:895px) {height: 50px;}
|
||||
@media (min-width: 895px) {height: 50px;}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
.btngroup {
|
||||
display: flex;
|
||||
margin: 10px 0 15px 0;
|
||||
margin: 10px 0 15px;
|
||||
|
||||
&__btn {
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
border-radius: 0;
|
||||
|
@ -13,6 +13,7 @@
|
|||
&:first-of-type {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
@ -36,14 +37,17 @@
|
|||
font-size: 1.3rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 2rem;
|
||||
line-height: normal;
|
||||
margin: 4px 0 12px 0;
|
||||
margin: 4px 0 12px;
|
||||
}
|
||||
|
||||
&__billing {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
@ -60,15 +64,23 @@
|
|||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
&--trialing, &--active {
|
||||
|
||||
&--trialing,
|
||||
&--active {
|
||||
&::before {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
}
|
||||
|
||||
&--cancelling::before {
|
||||
background-color: yellow;
|
||||
background-color: #ffff00;
|
||||
}
|
||||
&--incomplete, &--incomplete_expired, &--past_due, &--canceled, &--unpaid {
|
||||
|
||||
&--incomplete,
|
||||
&--incomplete_expired,
|
||||
&--past_due,
|
||||
&--canceled,
|
||||
&--unpaid {
|
||||
&::before {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
@ -78,13 +90,16 @@
|
|||
.subs {
|
||||
.sub {
|
||||
border-radius: 0;
|
||||
|
||||
& + .sub {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
|
@ -105,6 +120,7 @@
|
|||
margin-right: 6px;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
&__price {
|
||||
font-size: 60px;
|
||||
background: transparent;
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
body.dyslexic {
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
.column-header > button, .column-header > .btn {
|
||||
.column-header > button,
|
||||
.column-header > .btn {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
.emoji-mart {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
color: $inverted-text-color;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
color: $inverted-text-color;
|
||||
|
||||
.emoji-mart-emoji {
|
||||
padding: 6px;
|
||||
}
|
||||
|
|
|
@ -116,8 +116,8 @@
|
|||
// TYPEOGRAPHY MIXINS
|
||||
|
||||
// declare the font family using these shortcuts
|
||||
@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;}
|
||||
@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;}
|
||||
@mixin font-roboto {font-family: 'Roboto', Arial, sans-serif !important;}
|
||||
@mixin font-montserrat {font-family: 'Montserrat', Arial, sans-serif !important;}
|
||||
|
||||
// Declare font weights as a numerical value in rendered output
|
||||
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
|
||||
|
@ -158,11 +158,13 @@
|
|||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.fa-site-icon:before {
|
||||
|
||||
.fa-site-icon::before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f0c0';
|
||||
}
|
||||
.fa-fediverse:before {
|
||||
|
||||
.fa-fediverse::before {
|
||||
font-family: 'spinster' !important;
|
||||
content: "\e901";
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
background-color: lighten($ui-base-color, 5%);
|
||||
border-top: darken($ui-base-color, 10%);
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
|
@ -20,11 +20,11 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
@media screen and (max-width: 767px) {
|
||||
.copyright {
|
||||
margin: 0 auto auto;
|
||||
text-align: center;
|
||||
|
|
|
@ -564,7 +564,7 @@ code {
|
|||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border: 0;
|
||||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: $ui-base-color;
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
|
|
|
@ -8,8 +8,9 @@ body.theme-purple-contrast {
|
|||
body.theme-halloween {
|
||||
.page--customization {
|
||||
background-color: #904700;
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(circle, transparent 0%, transparent 60%, black 100%);
|
||||
background: radial-gradient(circle, transparent 0%, transparent 60%, #000 100%);
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
|
|
@ -3,32 +3,39 @@
|
|||
// For now linking default gab colors to replace the base UI colors and formulas
|
||||
|
||||
html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: none;
|
||||
border: 0;
|
||||
background: rgba($gab-placeholder-accent, .5);
|
||||
@if $light-theme {background: rgba($gab-background-container-light, .3);}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba($gab-placeholder-accent, .75);
|
||||
@if $light-theme {background: rgba($gab-background-container-light, .4);}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: $gab-placeholder-accent;
|
||||
@if $light-theme {background: rgba($gab-background-container-light, .5);}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: none;
|
||||
border: 0;
|
||||
background: rgba($gab-background-container, .5);
|
||||
@if $light-theme {background: rgba($gab-background-base, .3);}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: rgba($gab-background-container, .75);
|
||||
@if $light-theme {background: rgba($gab-background-base, .4);}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: $gab-background-container;
|
||||
@if $light-theme {background: rgba($gab-background-base, .5);}
|
||||
|
|
Loading…
Reference in a new issue