diff --git a/app/styles/gabsocial-light/diff.scss b/app/styles/gabsocial-light/diff.scss
index 80abde4e4..e446d3ab0 100644
--- a/app/styles/gabsocial-light/diff.scss
+++ b/app/styles/gabsocial-light/diff.scss
@@ -423,12 +423,12 @@ body {
input[type='text'],
textarea {
- &.standard {
- color: $gab-placeholder-accent;
- border-color: $gab-secondary-text;
- background: $gab-background-base-light;
- @include input-placeholder($gab-secondary-text);
- }
+ &.standard {
+ color: $gab-placeholder-accent;
+ border-color: $gab-secondary-text;
+ background: $gab-background-base-light;
+ @include input-placeholder($gab-secondary-text);
+ }
}
@@ -437,14 +437,14 @@ textarea {
.report-modal,
.actions-modal,
.mute-modal {
- color: $gab-default-text-light;
+ color: $gab-default-text-light;
}
.report-modal__statuses {
- .status__content,
- .status__content p {
- color: $gab-default-text-light;
- }
+ .status__content,
+ .status__content p {
+ color: $gab-default-text-light;
+ }
}
.user-panel__header {
diff --git a/app/styles/gabsocial/_mixins.scss b/app/styles/gabsocial/_mixins.scss
index a0a10115a..f54f3cb71 100644
--- a/app/styles/gabsocial/_mixins.scss
+++ b/app/styles/gabsocial/_mixins.scss
@@ -3,92 +3,96 @@
// THEME MIXINS
// standard container drop shadow
-@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
+@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;
- $light-theme: false !default;
- @if $light-theme {
- @include light-theme-shadow();
- background: $gab-background-container-light;
- }
+@mixin gab-container-standards {
+ border-radius: 10px;
+ background: $gab-background-container;
+ $light-theme: false !default;
+ @if $light-theme {
+ @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;}
+ &::-webkit-input-placeholder {color: $color;}
+ &::-moz-placeholder {color: $color;}
+ &:-ms-input-placeholder {color: $color;}
+ &:-moz-placeholder {color: $color;}
}
// OLDER MIXINS
-@mixin avatar-radius() {
+@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 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: $nav-ui-search-bg-color;
- color: $nav-ui-highlight-color;
- @include font-size(16);
- @include line-height(19);
- margin: 0;
- border-radius: 4px;
+@mixin search-input {
+ outline: 0;
+ box-sizing: border-box;
+ width: 100%;
+ border: 1px $gab-placeholder-accent solid;
+ box-shadow: none;
+ 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;
- // 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;}
+ // 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;
- }
+ &::-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: $nav-ui-highlight-color;}
- }
- }
+@mixin search-popout {
+ 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);
+ }
+
+ ul {
+ margin: 6px 0;
+
+ li {
+ margin: 0 0 2px;
+ em {color: $nav-ui-highlight-color;}
+ }
+ }
}
diff --git a/app/styles/gabsocial/components.scss b/app/styles/gabsocial/components.scss
index 42273142a..7f152b0c6 100644
--- a/app/styles/gabsocial/components.scss
+++ b/app/styles/gabsocial/components.scss
@@ -1,1044 +1,1044 @@
.app-body {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
}
.button {
- background-color: $ui-highlight-color;
- border: 10px none;
- border-radius: 4px;
- box-sizing: border-box;
- color: $primary-text-color;
- cursor: pointer;
- display: inline-block;
- font-family: inherit;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- letter-spacing: 0;
- line-height: 36px;
- overflow: hidden;
- padding: 0 16px;
- position: relative;
- text-align: center;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: auto;
-
- &:active,
- &:focus,
- &:hover {background-color: lighten($ui-highlight-color, 10%);}
-
- &--destructive {
- transition: none;
-
- &:active,
- &:focus,
- &:hover {
- background-color: $error-red;
- transition: none;
- }
- }
-
- &--small {
- font-size: 13px;
- height: auto;
- line-height: normal;
- padding: 4px 8px;
- }
-
- &:disabled,
- &.disabled {
- background-color: $ui-primary-color;
- cursor: default;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &.button-alternative {
- color: $inverted-text-color;
- background: $ui-primary-color;
-
- &:active,
- &:focus,
- &:hover {
- background-color: lighten($ui-primary-color, 4%);
- }
- }
-
- &.button-alternative-2 {
- background: $ui-base-lighter-color;
-
- &:active,
- &:focus,
- &:hover {
- background-color: lighten($ui-base-lighter-color, 4%);
- }
- }
-
- &.button-secondary {
- color: $darker-text-color;
- background: transparent;
- padding: 3px 15px;
- border: 1px solid $ui-primary-color;
-
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($ui-primary-color, 4%);
- color: lighten($darker-text-color, 4%);
- }
-
- &:disabled {
- opacity: 0.5;
- }
- }
-
- &.button--block {
- display: block;
- width: 100%;
- }
+ background-color: $ui-highlight-color;
+ border: 10px none;
+ border-radius: 4px;
+ box-sizing: border-box;
+ color: $primary-text-color;
+ cursor: pointer;
+ display: inline-block;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ letter-spacing: 0;
+ line-height: 36px;
+ overflow: hidden;
+ padding: 0 16px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: auto;
+
+ &:active,
+ &:focus,
+ &:hover {background-color: lighten($ui-highlight-color, 10%);}
+
+ &--destructive {
+ transition: none;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $error-red;
+ transition: none;
+ }
+ }
+
+ &--small {
+ font-size: 13px;
+ height: auto;
+ line-height: normal;
+ padding: 4px 8px;
+ }
+
+ &:disabled,
+ &.disabled {
+ background-color: $ui-primary-color;
+ cursor: default;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &.button-alternative {
+ color: $inverted-text-color;
+ background: $ui-primary-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: lighten($ui-primary-color, 4%);
+ }
+ }
+
+ &.button-alternative-2 {
+ background: $ui-base-lighter-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: lighten($ui-base-lighter-color, 4%);
+ }
+ }
+
+ &.button-secondary {
+ color: $darker-text-color;
+ background: transparent;
+ padding: 3px 15px;
+ border: 1px solid $ui-primary-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: lighten($ui-primary-color, 4%);
+ color: lighten($darker-text-color, 4%);
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+
+ &.button--block {
+ display: block;
+ width: 100%;
+ }
}
.column__wrapper {
- display: flex;
- flex: 1 1 auto;
- position: relative;
+ display: flex;
+ flex: 1 1 auto;
+ position: relative;
}
.icon-button {
- display: inline-block;
- padding: 0;
- color: $gab-secondary-text;
- border: none;
- background: transparent;
- cursor: pointer;
- transition: color 100ms ease-in;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($action-button-color, 7%);
- transition: color 200ms ease-out;
- }
-
- &.disabled {
- color: darken($action-button-color, 13%);
- cursor: default;
- }
-
- &.active {
- color: $highlight-text-color;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &.inverted {
- color: $gab-secondary-text;
-
- &:hover,
- &:active,
- &:focus {
- color: darken($lighter-text-color, 7%);
- }
-
- &.disabled {
- color: lighten($lighter-text-color, 7%);
- }
-
- &.active {
- color: $highlight-text-color;
-
- &.disabled {
- color: lighten($highlight-text-color, 13%);
- }
- }
- }
-
- &.overlayed {
- box-sizing: content-box;
- background: rgba($base-overlay-background, 0.6);
- color: rgba($primary-text-color, 0.7);
- border-radius: 4px;
- padding: 2px;
-
- &:hover {
- background: rgba($base-overlay-background, 0.9);
- }
- }
+ display: inline-block;
+ padding: 0;
+ color: $gab-secondary-text;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ transition: color 100ms ease-in;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: lighten($action-button-color, 7%);
+ transition: color 200ms ease-out;
+ }
+
+ &.disabled {
+ color: darken($action-button-color, 13%);
+ cursor: default;
+ }
+
+ &.active {
+ color: $highlight-text-color;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &.inverted {
+ color: $gab-secondary-text;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: darken($lighter-text-color, 7%);
+ }
+
+ &.disabled {
+ color: lighten($lighter-text-color, 7%);
+ }
+
+ &.active {
+ color: $highlight-text-color;
+
+ &.disabled {
+ color: lighten($highlight-text-color, 13%);
+ }
+ }
+ }
+
+ &.overlayed {
+ box-sizing: content-box;
+ background: rgba($base-overlay-background, 0.6);
+ color: rgba($primary-text-color, 0.7);
+ border-radius: 4px;
+ padding: 2px;
+
+ &:hover {
+ background: rgba($base-overlay-background, 0.9);
+ }
+ }
}
.text-icon-button {
- color: $gab-secondary-text;
- border: none;
- background: transparent;
- cursor: pointer;
- font-weight: 600;
- font-size: 11px;
- padding: 0 3px;
- line-height: 27px;
- outline: 0;
- transition: color 100ms ease-in;
-
- &:hover,
- &:active,
- &:focus {
- color: darken($lighter-text-color, 7%);
- transition: color 200ms ease-out;
- }
-
- &.disabled {
- color: lighten($lighter-text-color, 20%);
- cursor: default;
- }
-
- &.active {
- color: $highlight-text-color;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
+ color: $gab-secondary-text;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 11px;
+ padding: 0 3px;
+ line-height: 27px;
+ outline: 0;
+ transition: color 100ms ease-in;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: darken($lighter-text-color, 7%);
+ transition: color 200ms ease-out;
+ }
+
+ &.disabled {
+ color: lighten($lighter-text-color, 20%);
+ cursor: default;
+ }
+
+ &.active {
+ color: $highlight-text-color;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
}
.invisible {
- font-size: 0 !important;
- line-height: 0 !important;
- display: inline-block;
- width: 0;
- height: 0;
- position: absolute;
-
- img,
- svg {
- margin: 0 !important;
- border: 0 !important;
- padding: 0 !important;
- width: 0 !important;
- height: 0 !important;
- }
+ font-size: 0 !important;
+ line-height: 0 !important;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ position: absolute;
+
+ img,
+ svg {
+ margin: 0 !important;
+ border: 0 !important;
+ padding: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+ }
}
.ellipsis::after {content: "…";}
.timeline-compose-block {
- 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;
- position: relative;
-
- @media(max-width: 405px) {
- padding: 0 !important;
- }
-
- .compose-form__autosuggest-wrapper {
- &:before {
- content: "";
- display: block;
- position: absolute;
- height: 0px;
- width: 0px;
- border-top: 11px solid transparent;
- border-right: 12px solid #fff;
- border-bottom: 11px solid transparent;
- border-left: 11px solid transparent;
- left: -22px;
- top: 13px;
- }
- .autosuggest-textarea__textarea {
- padding: 14px 32px 13px 10px !important;
- }
- }
- }
-
- &__avatar {
- @media(max-width: 405px) { display: none; }
- }
+ 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;
+ position: relative;
+
+ @media(max-width: 405px) {
+ padding: 0 !important;
+ }
+
+ .compose-form__autosuggest-wrapper {
+ &:before {
+ content: "";
+ display: block;
+ position: absolute;
+ height: 0px;
+ width: 0px;
+ border-top: 11px solid transparent;
+ border-right: 12px solid #fff;
+ border-bottom: 11px solid transparent;
+ border-left: 11px solid transparent;
+ left: -22px;
+ top: 13px;
+ }
+ .autosuggest-textarea__textarea {
+ padding: 14px 32px 13px 10px !important;
+ }
+ }
+ }
+
+ &__avatar {
+ @media(max-width: 405px) { display: none; }
+ }
}
.no-reduce-motion .spoiler-input {
- transition: height 0.4s ease, opacity 0.4s ease;
+ transition: height 0.4s ease, opacity 0.4s ease;
}
.emojione {
- font-size: inherit;
- vertical-align: middle;
- object-fit: contain;
- margin: -.2ex .15em .2ex;
- width: 16px;
- height: 16px;
-
- img {
- width: auto;
- }
+ font-size: inherit;
+ vertical-align: middle;
+ object-fit: contain;
+ margin: -.2ex .15em .2ex;
+ width: 16px;
+ height: 16px;
+
+ img {
+ width: auto;
+ }
}
.reply-indicator {
- border-radius: 4px;
- margin-bottom: 10px;
- background: $gab-background-base-light;
- padding: 10px;
- min-height: 23px;
- overflow-y: auto;
- 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;}
+ border-radius: 4px;
+ margin-bottom: 10px;
+ background: $gab-background-base-light;
+ padding: 10px;
+ min-height: 23px;
+ overflow-y: auto;
+ 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;}
}
.reply-indicator__header {
- margin-bottom: 5px;
- overflow: hidden;
+ margin-bottom: 5px;
+ overflow: hidden;
}
.reply-indicator__cancel {
- float: right;
- line-height: 24px;
+ float: right;
+ line-height: 24px;
}
.reply-indicator__display-name {
- color: $inverted-text-color;
- display: block;
- max-width: 100%;
- line-height: 24px;
- overflow: hidden;
- padding-right: 25px;
- text-decoration: none;
+ color: $inverted-text-color;
+ display: block;
+ max-width: 100%;
+ line-height: 24px;
+ overflow: hidden;
+ padding-right: 25px;
+ text-decoration: none;
}
.reply-indicator__display-avatar {
- float: left;
- margin-right: 5px;
+ float: left;
+ margin-right: 5px;
}
.status__content--with-action {
- cursor: pointer;
+ cursor: pointer;
}
.status__content,
.reply-indicator__content {
- position: relative;
- font-size: 15px;
- line-height: 20px;
- word-wrap: break-word;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- padding-top: 2px;
- color: $primary-text-color;
-
- &:focus {
- outline: 0;
- }
-
- &.status__content--with-spoiler {
- white-space: normal;
-
- .status__content__text {
- white-space: pre-wrap;
- }
- }
-
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- }
-
- p {
- margin-bottom: 20px;
- white-space: pre-wrap;
-
- &:last-child {
- margin-bottom: 2px;
- }
- }
-
- a {
- color: $gab-brand-default;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
-
- .fa {
- color: lighten($dark-text-color, 7%);
- }
- }
-
- &.mention {
- &:hover {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
- }
- }
-
- .fa {
- color: $dark-text-color;
- }
- }
-
- .status__content__spoiler-link {
- background: $action-button-color;
-
- &:hover {
- background: lighten($action-button-color, 7%);
- text-decoration: none;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- }
-
- .status__content__text {
- display: none;
-
- &.status__content__text--visible {
- display: block;
- }
- }
+ position: relative;
+ font-size: 15px;
+ line-height: 20px;
+ word-wrap: break-word;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+ color: $primary-text-color;
+
+ &:focus {
+ outline: 0;
+ }
+
+ &.status__content--with-spoiler {
+ white-space: normal;
+
+ .status__content__text {
+ white-space: pre-wrap;
+ }
+ }
+
+ .emojione {
+ width: 20px;
+ height: 20px;
+ margin: -3px 0 0;
+ }
+
+ p {
+ margin-bottom: 20px;
+ white-space: pre-wrap;
+
+ &:last-child {
+ margin-bottom: 2px;
+ }
+ }
+
+ a {
+ color: $gab-brand-default;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+
+ .fa {
+ color: lighten($dark-text-color, 7%);
+ }
+ }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .fa {
+ color: $dark-text-color;
+ }
+ }
+
+ .status__content__spoiler-link {
+ background: $action-button-color;
+
+ &:hover {
+ background: lighten($action-button-color, 7%);
+ text-decoration: none;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+ }
+
+ .status__content__text {
+ display: none;
+
+ &.status__content__text--visible {
+ display: block;
+ }
+ }
}
.status__content.status__content--collapsed {
- max-height: 20px * 15; // 15 lines is roughly above 500 characters
+ max-height: 20px * 15; // 15 lines is roughly above 500 characters
}
.status__content__read-more-button {
- display: block;
- font-size: 15px;
- line-height: 20px;
- color: $gab-brand-default;
- border: 0;
- background: transparent;
- padding: 0;
- padding-top: 8px;
- &:hover,
- &:active {
- text-decoration: underline;
- }
+ display: block;
+ font-size: 15px;
+ line-height: 20px;
+ color: $gab-brand-default;
+ border: 0;
+ background: transparent;
+ padding: 0;
+ padding-top: 8px;
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
}
.status__content__spoiler-link {
- display: inline-block;
- border-radius: 2px;
- background: transparent;
- border: 0;
- color: $inverted-text-color;
- font-weight: 700;
- font-size: 11px;
- padding: 0 6px;
- text-transform: uppercase;
- line-height: 20px;
- cursor: pointer;
- vertical-align: middle;
+ display: inline-block;
+ border-radius: 2px;
+ background: transparent;
+ border: 0;
+ color: $inverted-text-color;
+ font-weight: 700;
+ font-size: 11px;
+ padding: 0 6px;
+ text-transform: uppercase;
+ line-height: 20px;
+ cursor: pointer;
+ vertical-align: middle;
}
.status__wrapper--filtered {
- color: $dark-text-color;
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ color: $dark-text-color;
+ border: 0;
+ font-size: inherit;
+ text-align: center;
+ line-height: inherit;
+ margin: 0;
+ padding: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ clear: both;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.status__prepend-icon-wrapper {
- left: -26px;
- position: absolute;
+ left: -26px;
+ position: absolute;
}
.focusable {
- &:focus {
- outline: 0;
- background: lighten($ui-base-color, 4%);
+ &:focus {
+ outline: 0;
+ background: lighten($ui-base-color, 4%);
+
+ .status.status-direct {
+ background: lighten($ui-base-color, 12%);
+
+ &.muted {
+ background: transparent;
+ }
+ }
+
+ .detailed-status,
+ .detailed-status__action-bar {
+ background: lighten($ui-base-color, 8%);
+ }
+ }
+}
- .status.status-direct {
- background: lighten($ui-base-color, 12%);
+.status {
+ padding: 8px 10px;
+ padding-left: 68px;
+ position: relative;
+ min-height: 54px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ cursor: default;
+
+ @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
+ // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
+ // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
+ padding-right: 26px; // 10px + 16px
+ }
- &.muted {
- background: transparent;
- }
- }
+ @keyframes fade {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
- .detailed-status,
- .detailed-status__action-bar {
- background: lighten($ui-base-color, 8%);
- }
- }
-}
+ opacity: 1;
+ animation: fade 150ms linear;
-.status {
- padding: 8px 10px;
- padding-left: 68px;
- position: relative;
- min-height: 54px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
-
- @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
- // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
- // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
- padding-right: 26px; // 10px + 16px
- }
-
- @keyframes fade {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
-
- opacity: 1;
- animation: fade 150ms linear;
-
- .video-player {
- margin-top: 8px;
- }
-
- &.status-direct:not(.read) {
- background: lighten($ui-base-color, 8%);
- border-bottom-color: lighten($ui-base-color, 12%);
- }
-
- &.light {
- .status__relative-time {
- color: $light-text-color;
- }
-
- .status__display-name {
- color: $inverted-text-color;
- }
-
- .display-name {
- strong {
- color: $inverted-text-color;
- }
-
- span {
- color: $light-text-color;
- }
- }
-
- .status__content {
- color: $inverted-text-color;
-
- a {
- color: $highlight-text-color;
- }
-
- a.status__content__spoiler-link {
- color: $primary-text-color;
- background: $ui-primary-color;
-
- &:hover {
- background: lighten($ui-primary-color, 8%);
- }
- }
- }
- }
-
- &__meta {
- font-size: 14px;
- color: $gab-secondary-text;
-
- a {
- color: $gab-brand-default;
- font-weight: bold;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
+ .video-player {
+ margin-top: 8px;
+ }
+
+ &.status-direct:not(.read) {
+ background: lighten($ui-base-color, 8%);
+ border-bottom-color: lighten($ui-base-color, 12%);
+ }
+
+ &.light {
+ .status__relative-time {
+ color: $light-text-color;
+ }
+
+ .status__display-name {
+ color: $inverted-text-color;
+ }
+
+ .display-name {
+ strong {
+ color: $inverted-text-color;
+ }
+
+ span {
+ color: $light-text-color;
+ }
+ }
+
+ .status__content {
+ color: $inverted-text-color;
+
+ a {
+ color: $highlight-text-color;
+ }
+
+ a.status__content__spoiler-link {
+ color: $primary-text-color;
+ background: $ui-primary-color;
+
+ &:hover {
+ background: lighten($ui-primary-color, 8%);
+ }
+ }
+ }
+ }
+
+ &__meta {
+ font-size: 14px;
+ color: $gab-secondary-text;
+
+ a {
+ color: $gab-brand-default;
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
}
.notification-favourite {
- .status.status-direct {
- background: transparent;
+ .status.status-direct {
+ background: transparent;
- .icon-button.disabled {
- color: lighten($action-button-color, 13%);
- }
- }
+ .icon-button.disabled {
+ color: lighten($action-button-color, 13%);
+ }
+ }
}
.status__relative-time,
.notification__relative_time {
- color: $dark-text-color;
- float: right;
- font-size: 14px;
+ color: $dark-text-color;
+ float: right;
+ font-size: 14px;
}
.status__display-name {
- color: $dark-text-color;
+ color: $dark-text-color;
}
.status__info .status__display-name {
- display: block;
- max-width: 100%;
- padding-right: 25px;
+ display: block;
+ max-width: 100%;
+ padding-right: 25px;
}
.status__info {
- font-size: 15px;
- z-index: 4;
+ font-size: 15px;
+ z-index: 4;
}
.status-check-box {
- border-bottom: 1px solid $ui-secondary-color;
- display: flex;
+ border-bottom: 1px solid $ui-secondary-color;
+ display: flex;
- .status-check-box__status {
- margin: 10px 0 10px 10px;
- flex: 1;
+ .status-check-box__status {
+ margin: 10px 0 10px 10px;
+ flex: 1;
- .media-gallery {
- max-width: 250px;
- }
+ .media-gallery {
+ max-width: 250px;
+ }
- .status__content {
- padding: 0;
- white-space: normal;
- }
+ .status__content {
+ padding: 0;
+ white-space: normal;
+ }
- .video-player {
- margin-top: 8px;
- max-width: 250px;
- }
+ .video-player {
+ margin-top: 8px;
+ max-width: 250px;
+ }
- .media-gallery__item-thumbnail {
- cursor: default;
- }
- }
+ .media-gallery__item-thumbnail {
+ cursor: default;
+ }
+ }
}
.status-check-box-toggle {
- align-items: center;
- display: flex;
- flex: 0 0 auto;
- justify-content: center;
- padding: 10px;
+ align-items: center;
+ display: flex;
+ flex: 0 0 auto;
+ justify-content: center;
+ padding: 10px;
}
.status__prepend {
- margin-left: 68px;
- color: $dark-text-color;
- padding: 8px 0;
- padding-bottom: 2px;
- font-size: 14px;
- position: relative;
-
- .status__display-name strong {
- color: $dark-text-color;
- }
+ margin-left: 68px;
+ color: $dark-text-color;
+ padding: 8px 0;
+ padding-bottom: 2px;
+ font-size: 14px;
+ position: relative;
+
+ .status__display-name strong {
+ color: $dark-text-color;
+ }
- > span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ > span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
.status__action-bar {
- align-items: center;
- display: flex;
- margin-top: 25px;
- z-index: 4;
-
- &__counter {
- display: inline-flex;
- margin-right: 22px;
- align-items: center;
-
- .status__action-bar-button {
- margin-right: 4px;
- }
-
- &__label {
- display: inline-block;
- width: 14px;
- font-size: 12px;
- font-weight: 500;
- color: $action-button-color;
- }
- }
+ align-items: center;
+ display: flex;
+ margin-top: 25px;
+ z-index: 4;
+
+ &__counter {
+ display: inline-flex;
+ margin-right: 22px;
+ align-items: center;
+
+ .status__action-bar-button {
+ margin-right: 4px;
+ }
+
+ &__label {
+ display: inline-block;
+ width: 14px;
+ font-size: 12px;
+ font-weight: 500;
+ color: $action-button-color;
+ }
+ }
}
.status__action-bar-button {
- margin-right: 18px;
+ margin-right: 18px;
}
.status__action-bar-dropdown {
- height: 23.15px;
- width: 23.15px;
+ height: 23.15px;
+ width: 23.15px;
}
.detailed-status__action-bar-dropdown {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
}
.detailed-status {
- background: lighten($ui-base-color, 4%);
- padding: 14px 10px;
-
- &--flex {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
-
- .status__content,
- .detailed-status__meta {
- flex: 100%;
- }
- }
-
- .status__content {
- font-size: 19px;
- line-height: 24px;
-
- .emojione {
- width: 24px;
- height: 24px;
- margin: -1px 0 0;
- }
-
- .status__content__spoiler-link {
- line-height: 24px;
- margin: -1px 0 0;
- }
- }
-
- .video-player {
- margin-top: 8px;
- }
+ background: lighten($ui-base-color, 4%);
+ padding: 14px 10px;
+
+ &--flex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .status__content,
+ .detailed-status__meta {
+ flex: 100%;
+ }
+ }
+
+ .status__content {
+ font-size: 19px;
+ line-height: 24px;
+
+ .emojione {
+ width: 24px;
+ height: 24px;
+ margin: -1px 0 0;
+ }
+
+ .status__content__spoiler-link {
+ line-height: 24px;
+ margin: -1px 0 0;
+ }
+ }
+
+ .video-player {
+ margin-top: 8px;
+ }
}
.detailed-status__meta {
- margin-top: 15px;
- color: $dark-text-color;
- font-size: 14px;
- line-height: 18px;
+ margin-top: 15px;
+ color: $dark-text-color;
+ font-size: 14px;
+ line-height: 18px;
}
.detailed-status__action-bar {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: row;
- padding: 10px 0;
+ background: lighten($ui-base-color, 4%);
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0;
}
.detailed-status__link {
- color: $action-button-color;
- cursor: pointer;
- text-decoration: none;
- font-size: 13px;
+ color: $action-button-color;
+ cursor: pointer;
+ text-decoration: none;
+ font-size: 13px;
}
.detailed-status__favorites,
.detailed-status__reblogs {
- display: inline-block;
- font-weight: 500;
- font-size: 12px;
- margin-left: 6px;
+ display: inline-block;
+ font-weight: 500;
+ font-size: 12px;
+ margin-left: 6px;
}
.reply-indicator__content {
- color: $gab-default-text-light;
- font-size: 14px;
- user-select: text;
+ color: $gab-default-text-light;
+ font-size: 14px;
+ user-select: text;
- a {
- color: $lighter-text-color;
- }
+ a {
+ color: $lighter-text-color;
+ }
}
.domain {
- padding: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
-
- .domain__domain-name {
- flex: 1 1 auto;
- display: block;
- color: $primary-text-color;
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- }
+ padding: 10px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ .domain__domain-name {
+ flex: 1 1 auto;
+ display: block;
+ color: $primary-text-color;
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ }
}
.domain__wrapper {
- display: flex;
+ display: flex;
}
.domain_buttons {
- height: 18px;
- padding: 10px;
- white-space: nowrap;
+ height: 18px;
+ padding: 10px;
+ white-space: nowrap;
}
.account {
- padding: 10px;
+ padding: 10px;
&:not(:last-of-type) {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
}
- &.compact {
- padding: 0;
- border-bottom: 0;
+ &.compact {
+ padding: 0;
+ border-bottom: 0;
- .account__avatar-wrapper {
- margin-left: 0;
- }
- }
+ .account__avatar-wrapper {
+ margin-left: 0;
+ }
+ }
- .account__display-name {
- flex: 1 1 auto;
- display: block;
- color: $darker-text-color;
- overflow: hidden;
- text-decoration: none;
- font-size: 14px;
- }
+ .account__display-name {
+ flex: 1 1 auto;
+ display: block;
+ color: $darker-text-color;
+ overflow: hidden;
+ text-decoration: none;
+ font-size: 14px;
+ }
}
.account__wrapper {
- display: flex;
+ display: flex;
}
.account__avatar-wrapper {
- float: left;
- margin-right: 12px;
+ float: left;
+ margin-right: 12px;
}
.account__avatar {
- @include avatar-radius();
- position: relative;
- background-color: $ui-base-color;
-
- &-inline {
- display: inline-block;
- vertical-align: middle;
- margin-right: 5px;
- }
+ @include avatar-radius();
+ position: relative;
+ background-color: $ui-base-color;
+
+ &-inline {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 5px;
+ }
- &-composite {
- @include avatar-radius();
- overflow: hidden;
+ &-composite {
+ @include avatar-radius();
+ overflow: hidden;
- & > div {
- @include avatar-radius();
- float: left;
- position: relative;
- box-sizing: border-box;
- }
- }
+ & > div {
+ @include avatar-radius();
+ float: left;
+ position: relative;
+ box-sizing: border-box;
+ }
+ }
}
a .account__avatar {
- cursor: pointer;
+ cursor: pointer;
}
.account__avatar-overlay {
- @include avatar-size(48px);
+ @include avatar-size(48px);
- &-base {
- @include avatar-radius();
- @include avatar-size(36px);
- }
+ &-base {
+ @include avatar-radius();
+ @include avatar-size(36px);
+ }
- &-overlay {
- @include avatar-radius();
- @include avatar-size(24px);
+ &-overlay {
+ @include avatar-radius();
+ @include avatar-size(24px);
- position: absolute;
- bottom: 0;
- right: 0;
- z-index: 1;
- }
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ }
}
.account__relationship {
- height: auto;
- padding: 0 0 0 5px;
- position: relative;
+ height: auto;
+ padding: 0 0 0 5px;
+ position: relative;
- .dismiss-account-btn {
- display: block;
- margin-bottom: 5px;
- }
+ .dismiss-account-btn {
+ display: block;
+ margin-bottom: 5px;
+ }
}
.account__reciprocal_follow_message {
- padding: 0px 5px;
- color: $gab-secondary-text;
- text-align: center;
+ padding: 0px 5px;
+ color: $gab-secondary-text;
+ text-align: center;
}
.account__disclaimer {
- padding: 10px;
- border-top: 1px solid lighten($ui-base-color, 8%);
- color: $dark-text-color;
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
+ padding: 10px;
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ color: $dark-text-color;
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
- a {
- font-weight: 500;
- color: inherit;
- text-decoration: underline;
+ a {
+ font-weight: 500;
+ color: inherit;
+ text-decoration: underline;
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
}
.account__action-bar {
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- line-height: 36px;
- overflow: hidden;
- flex: 0 0 auto;
- display: flex;
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ line-height: 36px;
+ overflow: hidden;
+ flex: 0 0 auto;
+ display: flex;
}
.account__action-bar-dropdown {
- padding: 10px;
+ padding: 10px;
- .icon-button {
- vertical-align: middle;
- }
-
- .dropdown--active {
- .dropdown__content.dropdown__right {
- left: 6px;
- right: initial;
- }
+ .icon-button {
+ vertical-align: middle;
+ }
- &::after {
- bottom: initial;
- margin-left: 11px;
- margin-top: -7px;
- right: initial;
- }
- }
+ .dropdown--active {
+ .dropdown__content.dropdown__right {
+ left: 6px;
+ right: initial;
+ }
+
+ &::after {
+ bottom: initial;
+ margin-left: 11px;
+ margin-top: -7px;
+ right: initial;
+ }
+ }
}
.account__action-bar-links {
- display: flex;
- flex: 1 1 auto;
- line-height: 18px;
- text-align: center;
+ display: flex;
+ flex: 1 1 auto;
+ line-height: 18px;
+ text-align: center;
}
.account__action-bar__tab {
- text-decoration: none;
- overflow: hidden;
- flex: 0 1 100%;
- border-right: 1px solid lighten($ui-base-color, 8%);
- padding: 10px 0;
- border-bottom: 4px solid transparent;
-
- &.active {
- border-bottom: 4px solid $ui-highlight-color;
- }
-
- & > span {
- display: block;
- text-transform: uppercase;
- font-size: 11px;
- color: $darker-text-color;
- }
-
- strong {
- display: block;
- font-size: 15px;
- font-weight: 500;
- color: $primary-text-color;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
+ text-decoration: none;
+ overflow: hidden;
+ flex: 0 1 100%;
+ border-right: 1px solid lighten($ui-base-color, 8%);
+ padding: 10px 0;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $ui-highlight-color;
+ }
+
+ & > span {
+ display: block;
+ text-transform: uppercase;
+ font-size: 11px;
+ color: $darker-text-color;
+ }
+
+ strong {
+ display: block;
+ font-size: 15px;
+ font-weight: 500;
+ color: $primary-text-color;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
}
.account-authorize {
- padding: 14px 10px;
+ padding: 14px 10px;
- .detailed-status__display-name {
- display: block;
- margin-bottom: 15px;
- overflow: hidden;
- }
+ .detailed-status__display-name {
+ display: block;
+ margin-bottom: 15px;
+ overflow: hidden;
+ }
}
.account-authorize__avatar {
- float: left;
- margin-right: 10px;
+ float: left;
+ margin-right: 10px;
}
.status__display-name,
@@ -1047,2374 +1047,2374 @@ a .account__avatar {
.detailed-status__datetime,
.detailed-status__application,
.account__display-name {
- text-decoration: none;
+ text-decoration: none;
}
.status__display-name,
.account__display-name {
- strong {
- color: $primary-text-color;
- }
+ strong {
+ color: $primary-text-color;
+ }
}
.muted {
- .emojione {
- opacity: 0.5;
- }
+ .emojione {
+ opacity: 0.5;
+ }
}
.status__display-name,
.reply-indicator__display-name,
.detailed-status__display-name,
a.account__display-name {
- &:hover strong {
- text-decoration: underline;
- }
+ &:hover strong {
+ text-decoration: underline;
+ }
}
.account__display-name strong {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.detailed-status__application,
.detailed-status__datetime {
- color: inherit;
+ color: inherit;
}
.detailed-status__display-name {
- color: $secondary-text-color;
- display: flex;
- line-height: 24px;
- margin-bottom: 15px;
- overflow: hidden;
-
- strong,
- span {
- display: inline-block;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- .display-name__account {
- display: block;
- margin-top: -10px;
- }
+ color: $secondary-text-color;
+ display: flex;
+ line-height: 24px;
+ margin-bottom: 15px;
+ overflow: hidden;
+
+ strong,
+ span {
+ display: inline-block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ strong {
+ font-size: 16px;
+ color: $primary-text-color;
+ }
+
+ .display-name__account {
+ display: block;
+ margin-top: -10px;
+ }
}
.detailed-status__display-avatar {
- float: left;
- margin-right: 10px;
+ float: left;
+ margin-right: 10px;
}
.status__avatar {
- height: 48px;
- left: 10px;
- position: absolute;
- top: 10px;
- width: 48px;
+ height: 48px;
+ left: 10px;
+ position: absolute;
+ top: 10px;
+ width: 48px;
}
.status__expand {
- width: 68px;
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- cursor: pointer;
+ width: 68px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ cursor: pointer;
}
.muted {
- .status__content p,
- .status__content a {
- color: $dark-text-color;
- }
+ .status__content p,
+ .status__content a {
+ color: $dark-text-color;
+ }
- .status__display-name strong {
- color: $dark-text-color;
- }
+ .status__display-name strong {
+ color: $dark-text-color;
+ }
- .status__avatar {
- opacity: 0.5;
- }
+ .status__avatar {
+ opacity: 0.5;
+ }
- a.status__content__spoiler-link {
- background: $ui-base-lighter-color;
- color: $inverted-text-color;
+ a.status__content__spoiler-link {
+ background: $ui-base-lighter-color;
+ color: $inverted-text-color;
- &:hover {
- background: lighten($ui-base-lighter-color, 7%);
- text-decoration: none;
- }
- }
+ &:hover {
+ background: lighten($ui-base-lighter-color, 7%);
+ text-decoration: none;
+ }
+ }
}
.notification__message {
- margin: 0 10px 0 68px;
- padding: 8px 0 0;
- cursor: default;
- color: $gab-secondary-text;
- font-size: 15px;
- line-height: 22px;
- position: relative;
-
- .fa {
- color: $highlight-text-color;
- }
+ margin: 0 10px 0 68px;
+ padding: 8px 0 0;
+ cursor: default;
+ color: $gab-secondary-text;
+ font-size: 15px;
+ line-height: 22px;
+ position: relative;
+
+ .fa {
+ color: $highlight-text-color;
+ }
- > span {
- display: inline;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ > span {
+ display: inline;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
.notification__favourite-icon-wrapper {
- left: -26px;
- position: absolute;
+ left: -26px;
+ position: absolute;
- .star-icon {
- color: $gold-star;
- }
+ .star-icon {
+ color: $gold-star;
+ }
}
.star-icon.active {
- color: $gold-star;
+ color: $gold-star;
}
.notification__display-name {
- color: inherit;
- font-weight: 500;
- text-decoration: none;
+ color: inherit;
+ font-weight: 500;
+ text-decoration: none;
- &:hover {
- color: $primary-text-color;
- text-decoration: underline;
- }
+ &:hover {
+ color: $primary-text-color;
+ text-decoration: underline;
+ }
}
.notification__relative_time {
- float: right;
+ float: right;
}
.display-name {
- display: block;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.display-name__html {
- font-weight: 600;
- padding-right: 4px;
+ font-weight: 600;
+ padding-right: 4px;
}
.display-name__account {
- font-size: 14px;
+ font-size: 14px;
}
// Hide "verified" emoji to avoid confusion
.display-name,
.notification__display-name {
- .emojione[alt*="verified"] {
- display: none;
- }
+ .emojione[alt*="verified"] {
+ display: none;
+ }
}
.status__relative-time,
.detailed-status__datetime {
- &:hover {
- text-decoration: underline;
- }
+ &:hover {
+ text-decoration: underline;
+ }
}
.image-loader {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
-
- .image-loader__preview-canvas {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- background: url('../images/void.png') repeat;
- object-fit: contain;
- }
-
- .loading-bar {
- position: relative;
- }
-
- &.image-loader--amorphous .image-loader__preview-canvas {
- display: none;
- }
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+
+ .image-loader__preview-canvas {
+ max-width: $media-modal-media-max-width;
+ max-height: $media-modal-media-max-height;
+ background: url('../images/void.png') repeat;
+ object-fit: contain;
+ }
+
+ .loading-bar {
+ position: relative;
+ }
+
+ &.image-loader--amorphous .image-loader__preview-canvas {
+ display: none;
+ }
}
.zoomable-image {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-
- img {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- width: auto;
- height: auto;
- object-fit: contain;
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
- }
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ max-width: $media-modal-media-max-width;
+ max-height: $media-modal-media-max-height;
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
+ }
}
.navigation-bar {
- padding: 10px;
- display: flex;
- align-items: center;
- flex-shrink: 0;
- cursor: default;
- color: $darker-text-color;
-
- strong {
- color: $secondary-text-color;
- }
-
- a {
- color: inherit;
- }
-
- .permalink {
- text-decoration: none;
- }
-
- .navigation-bar__actions {
- position: relative;
-
- .icon-button.close {
- position: absolute;
- pointer-events: none;
- transform: scale(0.0, 1.0) translate(-100%, 0);
- opacity: 0;
- }
-
- .compose__action-bar .icon-button {
- pointer-events: auto;
- transform: scale(1.0, 1.0) translate(0, 0);
- opacity: 1;
- }
- }
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ cursor: default;
+ color: $darker-text-color;
+
+ strong {
+ color: $secondary-text-color;
+ }
+
+ a {
+ color: inherit;
+ }
+
+ .permalink {
+ text-decoration: none;
+ }
+
+ .navigation-bar__actions {
+ position: relative;
+
+ .icon-button.close {
+ position: absolute;
+ pointer-events: none;
+ transform: scale(0.0, 1.0) translate(-100%, 0);
+ opacity: 0;
+ }
+
+ .compose__action-bar .icon-button {
+ pointer-events: auto;
+ transform: scale(1.0, 1.0) translate(0, 0);
+ opacity: 1;
+ }
+ }
}
.navigation-bar__profile {
- flex: 1 1 auto;
- margin-left: 8px;
- line-height: 20px;
- margin-top: -1px;
- overflow: hidden;
+ flex: 1 1 auto;
+ margin-left: 8px;
+ line-height: 20px;
+ margin-top: -1px;
+ overflow: hidden;
}
.navigation-bar__profile-account {
- display: block;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
+ display: block;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.navigation-bar__profile-edit {
- color: inherit;
- text-decoration: none;
+ color: inherit;
+ text-decoration: none;
}
.columns-area {
- display: flex;
- flex: 1 1 auto;
- flex-direction: row;
- justify-content: flex-start;
- position: relative;
-
- &__panels {
- display: flex;
- justify-content: center;
- width: 100%;
- height: 100%;
-
- &__pane {
- height: 100%;
- pointer-events: none;
- display: flex;
- justify-content: flex-end;
- padding-top: 15px;
-
- &--start {
- justify-content: flex-start;
- }
-
- &__inner {
- width: 265px;
- pointer-events: auto;
- height: 100%;
- }
- }
-
- &__main {
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- width: 100%;
- max-width: 600px;
- padding: 0 20px;
- @media screen and (max-width: 375px) {
- padding: 0 10px;
- }
- @media screen and (min-width: 895px) {
- margin: 0 20px;
- padding: 0;
- }
- }
- }
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: row;
+ justify-content: flex-start;
+ position: relative;
+
+ &__panels {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ &__pane {
+ height: 100%;
+ pointer-events: none;
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 15px;
+
+ &--start {
+ justify-content: flex-start;
+ }
+
+ &__inner {
+ width: 265px;
+ pointer-events: auto;
+ height: 100%;
+ }
+ }
+
+ &__main {
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 600px;
+ padding: 0 20px;
+ @media screen and (max-width: 375px) {
+ padding: 0 10px;
+ }
+ @media screen and (min-width: 895px) {
+ margin: 0 20px;
+ padding: 0;
+ }
+ }
+ }
}
.react-swipeable-view-container {
- &,
- .columns-area,
- .drawer,
- .column {
- height: 100%;
- }
+ &,
+ .columns-area,
+ .drawer,
+ .column {
+ height: 100%;
+ }
}
.react-swipeable-view-container > * {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
}
.column {
- width: 350px;
- position: relative;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
+ width: 350px;
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
- article {
- // TEMPORARY - content of columns may be significantly altered
- background: $gab-background-container;
- }
+ article {
+ // TEMPORARY - content of columns may be significantly altered
+ background: $gab-background-container;
+ }
}
.ui {
- display: block;
- width: 100%;
- padding: 0 0 100px 0;
+ display: block;
+ width: 100%;
+ padding: 0 0 100px 0;
- .page {
- display: flex;
- flex-direction: column;
- width: 100%;
+ .page {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
- &__top {
- display: flex;
- width: 100%;
- height: auto;
- z-index: 105;
+ &__top {
+ display: flex;
+ width: 100%;
+ height: auto;
+ z-index: 105;
- @media (min-width:895px) {
- top: -290px;
- position: sticky;
- }
- }
+ @media (min-width:895px) {
+ top: -290px;
+ position: sticky;
+ }
+ }
- &__columns {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- }
+ &__columns {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ }
}
}
.drawer {
- width: 300px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
+ width: 300px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ overflow-y: hidden;
}
.drawer__tab {
- display: block;
- flex: 1 1 auto;
- padding: 15px 5px 13px;
- color: $darker-text-color;
- text-decoration: none;
- text-align: center;
- font-size: 16px;
- border-bottom: 2px solid transparent;
+ display: block;
+ flex: 1 1 auto;
+ padding: 15px 5px 13px;
+ color: $darker-text-color;
+ text-decoration: none;
+ text-align: center;
+ font-size: 16px;
+ border-bottom: 2px solid transparent;
}
.column,
.drawer {
- flex: 1 1 100%;
- overflow: hidden;
+ flex: 1 1 100%;
+ overflow: hidden;
}
@media screen and (min-width: 631px) {
- .columns-area {
- padding: 0;
- }
-
- .column,
- .drawer {
- flex: 0 0 auto;
- padding: 10px;
- padding-left: 5px;
- padding-right: 5px;
-
- &:first-child {
- padding-left: 10px;
- }
-
- &:last-child {
- padding-right: 10px;
- }
- }
-
- .columns-area > div {
- .column,
- .drawer {
- padding-left: 5px;
- padding-right: 5px;
- }
- }
+ .columns-area {
+ padding: 0;
+ }
+
+ .column,
+ .drawer {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-left: 5px;
+ padding-right: 5px;
+
+ &:first-child {
+ padding-left: 10px;
+ }
+
+ &:last-child {
+ padding-right: 10px;
+ }
+ }
+
+ .columns-area > div {
+ .column,
+ .drawer {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+ }
}
// TEMPORARY - need a default size for the avatars for now
// They are sized individually all over the application and need to change with breakpoints as well
// Might create a mixin to accept the size attribute and apply the various properties where necessary
.account__avatar {
- width: 56px;
- height: 56px;
- background-size: cover;
+ width: 56px;
+ height: 56px;
+ background-size: cover;
}
.columns-area--mobile {
- display: block;
- flex-direction: column;
- width: 100%;
- margin: 0 auto;
- padding: 15px 0;
- .column,
- .drawer {
- width: 100%;
- height: 100%;
- padding: 0;
- }
- .autosuggest-textarea__textarea {font-size: 16px;}
- .search__input {
- line-height: 18px;
- font-size: 16px;
- padding: 15px;
- padding-right: 30px;
- }
- .search__icon .fa {top: 15px;}
- @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 .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
- .status {
- padding: 15px 15px 15px (48px + 15px * 2);
- min-height: 48px + 2px;
-
- &__avatar {
- left: 15px;
- top: 17px;
- }
-
- &__content {
- padding-top: 5px;
- }
-
- &__prepend {
- margin-left: 48px + 15px * 2;
- padding-top: 15px;
- }
-
- &__prepend-icon-wrapper {
- left: -32px;
- }
-
- .media-gallery,
- .video-player {
- margin-top: 10px;
- }
- }
-
- .account {
- padding: 15px 10px;
- }
-
- .notification {
- &__message {
- margin-left: 48px + 15px * 2;
- padding-top: 15px;
- }
-
- &__favourite-icon-wrapper {
- left: -32px;
- }
-
- .status {
- padding-top: 8px;
- }
-
- .account {
- padding-top: 8px;
- }
-
- .account__avatar-wrapper {
- margin-left: 17px;
- margin-right: 15px;
- }
- }
- }
+ display: block;
+ flex-direction: column;
+ width: 100%;
+ margin: 0 auto;
+ padding: 15px 0;
+ .column,
+ .drawer {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ }
+ .autosuggest-textarea__textarea {font-size: 16px;}
+ .search__input {
+ line-height: 18px;
+ font-size: 16px;
+ padding: 15px;
+ padding-right: 30px;
+ }
+ .search__icon .fa {top: 15px;}
+ @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 .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
+ .status {
+ padding: 15px 15px 15px (48px + 15px * 2);
+ min-height: 48px + 2px;
+
+ &__avatar {
+ left: 15px;
+ top: 17px;
+ }
+
+ &__content {
+ padding-top: 5px;
+ }
+
+ &__prepend {
+ margin-left: 48px + 15px * 2;
+ padding-top: 15px;
+ }
+
+ &__prepend-icon-wrapper {
+ left: -32px;
+ }
+
+ .media-gallery,
+ .video-player {
+ margin-top: 10px;
+ }
+ }
+
+ .account {
+ padding: 15px 10px;
+ }
+
+ .notification {
+ &__message {
+ margin-left: 48px + 15px * 2;
+ padding-top: 15px;
+ }
+
+ &__favourite-icon-wrapper {
+ left: -32px;
+ }
+
+ .status {
+ padding-top: 8px;
+ }
+
+ .account {
+ padding-top: 8px;
+ }
+
+ .account__avatar-wrapper {
+ margin-left: 17px;
+ margin-right: 15px;
+ }
+ }
+ }
}
.floating-action-button {
- z-index: 1000;
- display: none;
- @media screen and (max-width: 895px) {display: flex;}
- position: fixed;
- bottom: 14px;
- right: 14px;
- width: 61px;
- height: 52px;
- background-image: url('../images/sprite-main-navigation.png');
- background-repeat: no-repeat;
- background-size: 161px 152px;
- background-position: -100px 0;
- background-color: transparent;
+ z-index: 1000;
+ display: none;
+ @media screen and (max-width: 895px) {display: flex;}
+ position: fixed;
+ bottom: 14px;
+ right: 14px;
+ width: 61px;
+ height: 52px;
+ background-image: url('../images/sprite-main-navigation.png');
+ background-repeat: no-repeat;
+ background-size: 161px 152px;
+ background-position: -100px 0;
+ background-color: transparent;
border: none;
- &:hover,
- &:focus,
- &:active {background-position: -100px -100px;}
+ &:hover,
+ &:focus,
+ &:active {background-position: -100px -100px;}
}
@media screen and (min-width: 360px) {
- .getting-started__wrapper,
- .getting-started__trends {
- margin-bottom: 10px;
- }
+ .getting-started__wrapper,
+ .getting-started__trends {
+ margin-bottom: 10px;
+ }
}
// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
// This controls where the left column breaks.
@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
- .columns-area__panels__pane--left {
- display: none;
- }
+ .columns-area__panels__pane--left {
+ display: none;
+ }
}
// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
- .search-page .search {
- display: none;
- }
+ .search-page .search {
+ display: none;
+ }
}
// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
- .columns-area__panels__pane--right {
- display: none;
- }
+ .columns-area__panels__pane--right {
+ display: none;
+ }
}
.icon-with-badge {
- position: relative;
- height: 100%;
-
- &__badge {
- 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;
- }
+ position: relative;
+ height: 100%;
+
+ &__badge {
+ 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;
+ }
}
.column-link--transparent .icon-with-badge__badge {
- border-color: darken($ui-base-color, 8%);
+ border-color: darken($ui-base-color, 8%);
}
.promo-panel {
- margin-top: 10px;
- background-color: transparent !important;
- overflow: hidden;
+ margin-top: 10px;
+ background-color: transparent !important;
+ overflow: hidden;
}
.promo-panel-item {
- display: block;
- height: 42px;
- line-height: 42px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- background: $gab-background-container;
-
- &--highlighted {
- background-color: #30CE7D;
+ display: block;
+ height: 42px;
+ line-height: 42px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: $gab-background-container;
+
+ &--highlighted {
+ background-color: #30CE7D;
border-radius: 10px;
font-weight: 600;
margin-bottom: 10px;
- }
-
- &--top-rounded {
- border-top-right-radius: 10px;
- border-top-left-radius: 10px;
- }
-
- &:last-of-type {
- border-bottom: none;
- }
+ }
- &__btn {
- display: block;
- text-align: left;
- color: $primary-text-color;
- text-decoration: none;
- font-size: 15px;
- padding: 0 20px;
+ &--top-rounded {
+ border-top-right-radius: 10px;
+ border-top-left-radius: 10px;
+ }
- &:hover {
- color: darken($primary-text-color, 14%);
+ &:last-of-type {
+ border-bottom: none;
+ }
- span {
- text-decoration: underline;
- }
- }
- }
+ &__btn {
+ display: block;
+ text-align: left;
+ color: $primary-text-color;
+ text-decoration: none;
+ font-size: 15px;
+ padding: 0 20px;
+
+ &:hover {
+ color: darken($primary-text-color, 14%);
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
- &__icon {
- margin-right: 12px;
- }
+ &__icon {
+ margin-right: 12px;
+ }
}
.drawer__pager {
- box-sizing: border-box;
- padding: 0;
- flex-grow: 1;
- position: relative;
- overflow: hidden;
- display: flex;
+ box-sizing: border-box;
+ padding: 0;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+ display: flex;
}
.drawer__inner {
- top: 0;
- left: 0;
- background: lighten($ui-base-color, 13%);
- box-sizing: border-box;
- padding: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- overflow-y: auto;
- width: 100%;
- height: 100%;
-
- &.darker {
- background: $ui-base-color;
- }
-}
+ top: 0;
+ left: 0;
+ background: lighten($ui-base-color, 13%);
+ box-sizing: border-box;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-y: auto;
+ width: 100%;
+ height: 100%;
-.drawer__inner__gabsocial {
- background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
- flex: 1;
- min-height: 47px;
- display: none;
-
- > img {
- display: block;
- object-fit: contain;
- object-position: bottom left;
- width: 100%;
- height: 100%;
- pointer-events: none;
- user-drag: none;
- user-select: none;
- }
-
- @media screen and (min-height: 640px) {
- display: block;
- }
+ &.darker {
+ background: $ui-base-color;
+ }
}
-.pseudo-drawer {
- background: lighten($ui-base-color, 13%);
- font-size: 13px;
- text-align: left;
+.drawer__inner__gabsocial {
+ background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
+ flex: 1;
+ min-height: 47px;
+ display: none;
+
+ > img {
+ display: block;
+ object-fit: contain;
+ object-position: bottom left;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ user-drag: none;
+ user-select: none;
+ }
+
+ @media screen and (min-height: 640px) {
+ display: block;
+ }
+}
+
+.pseudo-drawer {
+ background: lighten($ui-base-color, 13%);
+ font-size: 13px;
+ text-align: left;
}
.drawer__header {
- flex: 0 0 auto;
- font-size: 16px;
- background: lighten($ui-base-color, 8%);
- margin-bottom: 10px;
- display: flex;
- flex-direction: row;
+ flex: 0 0 auto;
+ font-size: 16px;
+ background: lighten($ui-base-color, 8%);
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: row;
- a {
- transition: background 100ms ease-in;
+ a {
+ transition: background 100ms ease-in;
- &:hover {
- background: lighten($ui-base-color, 3%);
- transition: background 200ms ease-out;
- }
- }
+ &:hover {
+ background: lighten($ui-base-color, 3%);
+ transition: background 200ms ease-out;
+ }
+ }
}
.slist {
- &--flex {
- display: flex;
- flex-direction: column;
- }
+ &--flex {
+ display: flex;
+ flex-direction: column;
+ }
- &__append {
- flex: 1 1 auto;
- position: relative;
- min-height: 120px;
- }
+ &__append {
+ flex: 1 1 auto;
+ position: relative;
+ min-height: 120px;
+ }
}
.column-back-button {
- background: lighten($ui-base-color, 4%);
- color: $highlight-text-color;
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- line-height: inherit;
- border: 0;
- text-align: unset;
- padding: 15px;
- margin: 0;
- z-index: 3;
- outline: 0;
-
- &:hover {
- text-decoration: underline;
- }
+ background: lighten($ui-base-color, 4%);
+ color: $highlight-text-color;
+ cursor: pointer;
+ flex: 0 0 auto;
+ font-size: 16px;
+ line-height: inherit;
+ border: 0;
+ text-align: unset;
+ padding: 15px;
+ margin: 0;
+ z-index: 3;
+ outline: 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
.column-header__back-button {
- background: lighten($ui-base-color, 4%);
- border: 0;
- font-family: inherit;
- color: $highlight-text-color;
- cursor: pointer;
- white-space: nowrap;
- font-size: 16px;
- padding: 0 5px 0 0;
- z-index: 3;
-
- &:hover {
- text-decoration: underline;
- }
+ background: lighten($ui-base-color, 4%);
+ border: 0;
+ font-family: inherit;
+ color: $highlight-text-color;
+ cursor: pointer;
+ white-space: nowrap;
+ font-size: 16px;
+ padding: 0 5px 0 0;
+ z-index: 3;
+
+ &:hover {
+ text-decoration: underline;
+ }
- &:last-child {
- padding: 0 15px 0 0;
- }
+ &:last-child {
+ padding: 0 15px 0 0;
+ }
}
.column-back-button__icon {
- display: inline-block;
- margin-right: 5px;
+ display: inline-block;
+ margin-right: 5px;
}
.column-back-button--slim {
- position: relative;
+ position: relative;
}
.column-back-button--slim-button {
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- padding: 15px;
- position: absolute;
- right: 0;
- top: -48px;
+ cursor: pointer;
+ flex: 0 0 auto;
+ font-size: 16px;
+ padding: 15px;
+ position: absolute;
+ right: 0;
+ top: -48px;
}
.react-toggle {
- display: inline-block;
- position: relative;
- cursor: pointer;
- background-color: transparent;
- border: 0;
- padding: 0;
- user-select: none;
- -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
- -webkit-tap-highlight-color: transparent;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+ user-select: none;
+ -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
+ -webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
}
.react-toggle--disabled {
- cursor: not-allowed;
- opacity: 0.5;
- transition: opacity 0.25s;
+ cursor: not-allowed;
+ opacity: 0.5;
+ transition: opacity 0.25s;
}
.react-toggle-track {
- width: 50px;
- height: 24px;
- padding: 0;
- border-radius: 30px;
- background-color: $ui-base-color;
- transition: background-color 0.2s ease;
+ width: 50px;
+ height: 24px;
+ padding: 0;
+ border-radius: 30px;
+ background-color: $ui-base-color;
+ transition: background-color 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: darken($ui-base-color, 10%);
+ background-color: darken($ui-base-color, 10%);
}
.react-toggle--checked .react-toggle-track {
- background-color: $gab-brand-default;
+ background-color: $gab-brand-default;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: lighten($gab-brand-default, 10%);
+ background-color: lighten($gab-brand-default, 10%);
}
.react-toggle-track-check {
- position: absolute;
- width: 14px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- left: 8px;
- opacity: 0;
- transition: opacity 0.25s ease;
+ position: absolute;
+ width: 14px;
+ height: 10px;
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ line-height: 0;
+ left: 8px;
+ opacity: 0;
+ transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
- opacity: 1;
- transition: opacity 0.25s ease;
+ opacity: 1;
+ transition: opacity 0.25s ease;
}
.react-toggle-track-x {
- position: absolute;
- width: 10px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- right: 10px;
- opacity: 1;
- transition: opacity 0.25s ease;
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ line-height: 0;
+ right: 10px;
+ opacity: 1;
+ transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
- opacity: 0;
+ opacity: 0;
}
.react-toggle-thumb {
- position: absolute;
- top: 1px;
- left: 1px;
- width: 22px;
- height: 22px;
- border: 1px solid $ui-base-color;
- border-radius: 50%;
- background-color: darken($simple-background-color, 2%);
- box-sizing: border-box;
- transition: all 0.25s ease;
- transition-property: border-color, left;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ width: 22px;
+ height: 22px;
+ border: 1px solid $ui-base-color;
+ border-radius: 50%;
+ background-color: darken($simple-background-color, 2%);
+ box-sizing: border-box;
+ transition: all 0.25s ease;
+ transition-property: border-color, left;
}
.react-toggle--checked .react-toggle-thumb {
- left: 27px;
- border-color: $gab-brand-default;
+ left: 27px;
+ border-color: $gab-brand-default;
}
.column-link {
- background: lighten($ui-base-color, 8%);
- color: $primary-text-color;
- display: block;
- font-size: 16px;
- padding: 15px;
- text-decoration: none;
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 11%);
- }
-
- &:focus {
- outline: 0;
- }
-
- &--transparent {
- background: transparent;
- color: $ui-secondary-color;
-
- &:hover,
- &:focus,
- &:active {
- background: transparent;
- color: $primary-text-color;
- }
-
- &.active {
- color: $ui-highlight-color;
- }
- }
+ background: lighten($ui-base-color, 8%);
+ color: $primary-text-color;
+ display: block;
+ font-size: 16px;
+ padding: 15px;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: lighten($ui-base-color, 11%);
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &--transparent {
+ background: transparent;
+ color: $ui-secondary-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: transparent;
+ color: $primary-text-color;
+ }
+
+ &.active {
+ color: $ui-highlight-color;
+ }
+ }
}
.column-link__icon {
- display: inline-block;
- margin-right: 5px;
+ display: inline-block;
+ margin-right: 5px;
}
.column-link__badge {
- display: inline-block;
- border-radius: 4px;
- font-size: 12px;
- line-height: 19px;
- font-weight: 500;
- background: $ui-base-color;
- padding: 4px 8px;
- margin: -6px 10px;
+ display: inline-block;
+ border-radius: 4px;
+ font-size: 12px;
+ line-height: 19px;
+ font-weight: 500;
+ background: $ui-base-color;
+ padding: 4px 8px;
+ margin: -6px 10px;
}
.column-subheading {
- background: $ui-base-color;
- color: $dark-text-color;
- padding: 8px 20px;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- cursor: default;
+ background: $ui-base-color;
+ color: $dark-text-color;
+ padding: 8px 20px;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ cursor: default;
}
.getting-started__wrapper,
.getting-started,
.flex-spacer {
- background: $ui-base-color;
+ background: $ui-base-color;
}
.getting-started__wrapper {
- flex: 0 0 auto;
+ flex: 0 0 auto;
}
.flex-spacer {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.getting-started {
- color: $dark-text-color;
- overflow: auto;
-
- &__footer {
- flex: 0 0 auto;
- padding: 10px;
- padding-top: 20px;
-
- ul {
- margin-bottom: 10px;
- }
-
- ul li {
- display: inline;
- }
-
- p {
- color: $dark-text-color;
- font-size: 13px;
- margin-bottom: 20px;
-
- a {
- color: $gab-secondary-text;
- text-decoration: underline;
- }
- }
-
- a {
- text-decoration: none;
- color: $gab-secondary-text;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- &__trends {
- background: $ui-base-color;
- flex: 0 1 auto;
-
- @media screen and (max-height: 810px) {
- .trends__item:nth-child(3) {
- display: none;
- }
- }
-
- @media screen and (max-height: 720px) {
- .trends__item:nth-child(2) {
- display: none;
- }
- }
-
- @media screen and (max-height: 670px) {
- display: none;
- }
- }
+ color: $dark-text-color;
+ overflow: auto;
+
+ &__footer {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-top: 20px;
+
+ ul {
+ margin-bottom: 10px;
+ }
+
+ ul li {
+ display: inline;
+ }
+
+ p {
+ color: $dark-text-color;
+ font-size: 13px;
+ margin-bottom: 20px;
+
+ a {
+ color: $gab-secondary-text;
+ text-decoration: underline;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ color: $gab-secondary-text;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__trends {
+ background: $ui-base-color;
+ flex: 0 1 auto;
+
+ @media screen and (max-height: 810px) {
+ .trends__item:nth-child(3) {
+ display: none;
+ }
+ }
+
+ @media screen and (max-height: 720px) {
+ .trends__item:nth-child(2) {
+ display: none;
+ }
+ }
+
+ @media screen and (max-height: 670px) {
+ display: none;
+ }
+ }
}
.setting-text {
- color: $darker-text-color;
- background: transparent;
- border: none;
- border-bottom: 2px solid $ui-primary-color;
- box-sizing: border-box;
- display: block;
- font-family: inherit;
- margin-bottom: 10px;
- padding: 7px 0;
- width: 100%;
-
- &:focus,
- &:active {
- color: $primary-text-color;
- border-bottom-color: $highlight-text-color;
- }
-
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
+ color: $darker-text-color;
+ background: transparent;
+ border: none;
+ border-bottom: 2px solid $ui-primary-color;
+ box-sizing: border-box;
+ display: block;
+ font-family: inherit;
+ margin-bottom: 10px;
+ padding: 7px 0;
+ width: 100%;
+
+ &:focus,
+ &:active {
+ color: $primary-text-color;
+ border-bottom-color: $highlight-text-color;
+ }
+
+ @media screen and (max-width: 600px) {
+ font-size: 16px;
+ }
}
.no-reduce-motion button.icon-button i.fa-retweet {
- background-position: 0 0;
- height: 19px;
- transition: background-position 0.9s steps(10);
- transition-duration: 0s;
- vertical-align: middle;
- width: 22px;
-
- &::before {
- display: none !important;
- }
+ background-position: 0 0;
+ height: 19px;
+ transition: background-position 0.9s steps(10);
+ transition-duration: 0s;
+ vertical-align: middle;
+ width: 22px;
+
+ &::before {
+ display: none !important;
+ }
}
.no-reduce-motion button.icon-button.active i.fa-retweet {
- transition-duration: 0.9s;
- background-position: 0 100%;
+ transition-duration: 0.9s;
+ background-position: 0 100%;
}
.reduce-motion button.icon-button i.fa-retweet {
- color: $action-button-color;
- transition: color 100ms ease-in;
+ color: $action-button-color;
+ transition: color 100ms ease-in;
}
.reduce-motion button.icon-button.active i.fa-retweet {
- color: $highlight-text-color;
+ color: $highlight-text-color;
}
.status-card {
- display: flex;
- font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px;
- color: $dark-text-color;
- margin-top: 14px;
- text-decoration: none;
- overflow: hidden;
-
- &__actions {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- display: flex;
- justify-content: center;
- align-items: center;
-
- & > div {
- background: rgba($base-shadow-color, 0.6);
- border-radius: 8px;
- padding: 12px 9px;
- flex: 0 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- button,
- a {
- display: inline;
- color: $secondary-text-color;
- background: transparent;
- border: 0;
- padding: 0 8px;
- text-decoration: none;
- font-size: 18px;
- line-height: 18px;
-
- &:hover,
- &:active,
- &:focus {
- color: $primary-text-color;
- }
- }
-
- a {
- font-size: 19px;
- position: relative;
- bottom: -1px;
- }
- }
+ display: flex;
+ font-size: 14px;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-radius: 4px;
+ color: $dark-text-color;
+ margin-top: 14px;
+ text-decoration: none;
+ overflow: hidden;
+
+ &__actions {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ & > div {
+ background: rgba($base-shadow-color, 0.6);
+ border-radius: 8px;
+ padding: 12px 9px;
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ button,
+ a {
+ display: inline;
+ color: $secondary-text-color;
+ background: transparent;
+ border: 0;
+ padding: 0 8px;
+ text-decoration: none;
+ font-size: 18px;
+ line-height: 18px;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $primary-text-color;
+ }
+ }
+
+ a {
+ font-size: 19px;
+ position: relative;
+ bottom: -1px;
+ }
+ }
}
a.status-card {
- cursor: pointer;
+ cursor: pointer;
- &:hover {
- background: lighten($ui-base-color, 8%);
- }
+ &:hover {
+ background: lighten($ui-base-color, 8%);
+ }
}
.status-card-photo {
- cursor: zoom-in;
- display: block;
- text-decoration: none;
- width: 100%;
- height: auto;
- margin: 0;
+ cursor: zoom-in;
+ display: block;
+ text-decoration: none;
+ width: 100%;
+ height: auto;
+ margin: 0;
}
.status-card-video {
- iframe {
- width: 100%;
- height: 100%;
- }
+ iframe {
+ width: 100%;
+ height: 100%;
+ }
}
.status-card__title {
- display: block;
- font-weight: 500;
- margin-bottom: 5px;
- color: $darker-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-decoration: none;
+ display: block;
+ font-weight: 500;
+ margin-bottom: 5px;
+ color: $darker-text-color;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-decoration: none;
}
.status-card__content {
- flex: 1 1 auto;
- overflow: hidden;
- padding: 14px 14px 14px 8px;
+ flex: 1 1 auto;
+ overflow: hidden;
+ padding: 14px 14px 14px 8px;
}
.status-card__description {
- color: $darker-text-color;
+ color: $darker-text-color;
}
.status-card__host {
- display: block;
- margin-top: 5px;
- font-size: 13px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ display: block;
+ margin-top: 5px;
+ font-size: 13px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.status-card__image {
- flex: 0 0 100px;
- background: lighten($ui-base-color, 8%);
- position: relative;
-
- & > .fa {
- font-size: 21px;
- position: absolute;
- transform-origin: 50% 50%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
+ flex: 0 0 100px;
+ background: lighten($ui-base-color, 8%);
+ position: relative;
+
+ & > .fa {
+ font-size: 21px;
+ position: absolute;
+ transform-origin: 50% 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
.status-card.horizontal {
- display: block;
+ display: block;
- .status-card__image {
- width: 100%;
- }
+ .status-card__image {
+ width: 100%;
+ }
- .status-card__image-image {
- border-radius: 4px 4px 0 0;
- }
+ .status-card__image-image {
+ border-radius: 4px 4px 0 0;
+ }
- .status-card__title {
- white-space: inherit;
- }
+ .status-card__title {
+ white-space: inherit;
+ }
}
.status-card.compact {
- border-color: lighten($ui-base-color, 4%);
+ border-color: lighten($ui-base-color, 4%);
- &.interactive {
- border: 0;
- }
+ &.interactive {
+ border: 0;
+ }
- .status-card__content {
- padding: 8px;
- padding-top: 10px;
- }
+ .status-card__content {
+ padding: 8px;
+ padding-top: 10px;
+ }
- .status-card__title {
- white-space: nowrap;
- }
+ .status-card__title {
+ white-space: nowrap;
+ }
- .status-card__image {
- flex: 0 0 60px;
- }
+ .status-card__image {
+ flex: 0 0 60px;
+ }
}
a.status-card.compact:hover {
- background-color: lighten($ui-base-color, 4%);
+ background-color: lighten($ui-base-color, 4%);
}
.status-card__image-image {
- border-radius: 4px 0 0 4px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- background-size: cover;
- background-position: center center;
+ border-radius: 4px 0 0 4px;
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ background-size: cover;
+ background-position: center center;
}
.load-more {
- display: block;
- color: $dark-text-color;
- background-color: transparent;
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
- text-decoration: none;
-
- &:hover {
- background: lighten($ui-base-color, 2%);
- }
+ display: block;
+ color: $dark-text-color;
+ background-color: transparent;
+ border: 0;
+ font-size: inherit;
+ text-align: center;
+ line-height: inherit;
+ margin: 0;
+ padding: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ clear: both;
+ text-decoration: none;
+
+ &:hover {
+ background: lighten($ui-base-color, 2%);
+ }
}
.load-gap {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.regeneration-indicator {
- text-align: center;
- font-size: 16px;
- font-weight: 500;
- color: $dark-text-color;
- background: $ui-base-color;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
- padding: 20px;
-
- & > div {
- width: 100%;
- background: transparent;
- padding-top: 0;
- }
-
- &__label {
- strong {
- display: block;
- margin-bottom: 10px;
- color: $dark-text-color;
- }
-
- span {
- font-size: 15px;
- font-weight: 400;
- }
- }
+ text-align: center;
+ font-size: 16px;
+ font-weight: 500;
+ color: $dark-text-color;
+ background: $ui-base-color;
+ cursor: default;
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+
+ & > div {
+ width: 100%;
+ background: transparent;
+ padding-top: 0;
+ }
+
+ &__label {
+ strong {
+ display: block;
+ margin-bottom: 10px;
+ color: $dark-text-color;
+ }
+
+ span {
+ font-size: 15px;
+ font-weight: 400;
+ }
+ }
}
.columns-area--mobile .column {@include gab-container-standards();}
.column-header__wrapper {
- position: relative;
- flex: 0 0 auto;
- overflow: hidden;
-
- &.active {
- &::before {
- display: block;
- content: "";
- position: absolute;
- top: 35px;
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 60%;
- pointer-events: none;
- height: 28px;
- z-index: 1;
- background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
- }
- }
+ position: relative;
+ flex: 0 0 auto;
+ overflow: hidden;
+
+ &.active {
+ &::before {
+ display: block;
+ content: "";
+ position: absolute;
+ top: 35px;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 60%;
+ pointer-events: none;
+ height: 28px;
+ z-index: 1;
+ background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
+ }
+ }
}
.column-header {
- display: flex;
- font-size: 16px;
- background: $gab-background-container;
- flex: 0 0 auto;
- cursor: pointer;
- position: relative;
- z-index: 2;
- outline: 0;
- overflow-x: auto;
-
- & > button,
- & > .btn {
- margin: 0;
- border: none;
- padding: 15px;
- color: inherit;
- background: transparent;
- font: inherit;
- text-align: left;
- text-decoration: none;
- white-space: nowrap;
-
- &--sub {
- font-size: 14px;
- padding: 6px 10px;
- }
-
- &.grouped {
- margin: 6px;
- }
-
- &.active {
- color: $primary-text-color;
- border-radius: 10px;
- background-color: rgba($highlight-text-color, .1);
- }
-
- @media screen and (max-width: $nav-breakpoint-2) {
- padding: 8px;
- font-size: 14px;
-
- &.grouped {
- margin: 6px 2px 6px 6px;
- }
-
- &.active {
- border-radius: 5px;
- }
- }
- }
-
- & > .column-header__back-button {
- color: $highlight-text-color;
- }
-
- &.active {
- box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
-
- .column-header__icon {
- color: $highlight-text-color;
- text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
- }
- }
-
- &:focus,
- &:active {
- outline: 0;
- }
+ display: flex;
+ font-size: 16px;
+ background: $gab-background-container;
+ flex: 0 0 auto;
+ cursor: pointer;
+ position: relative;
+ z-index: 2;
+ outline: 0;
+ overflow-x: auto;
+
+ & > button,
+ & > .btn {
+ margin: 0;
+ border: none;
+ padding: 15px;
+ color: inherit;
+ background: transparent;
+ font: inherit;
+ text-align: left;
+ text-decoration: none;
+ white-space: nowrap;
+
+ &--sub {
+ font-size: 14px;
+ padding: 6px 10px;
+ }
+
+ &.grouped {
+ margin: 6px;
+ }
+
+ &.active {
+ color: $primary-text-color;
+ border-radius: 10px;
+ background-color: rgba($highlight-text-color, .1);
+ }
+
+ @media screen and (max-width: $nav-breakpoint-2) {
+ padding: 8px;
+ font-size: 14px;
+
+ &.grouped {
+ margin: 6px 2px 6px 6px;
+ }
+
+ &.active {
+ border-radius: 5px;
+ }
+ }
+ }
+
+ & > .column-header__back-button {
+ color: $highlight-text-color;
+ }
+
+ &.active {
+ box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
+
+ .column-header__icon {
+ color: $highlight-text-color;
+ text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
+ }
+ }
+
+ &:focus,
+ &:active {
+ outline: 0;
+ }
}
.column-header__buttons {
- height: 48px;
- display: flex;
- margin-left: auto;
+ height: 48px;
+ display: flex;
+ margin-left: auto;
}
.column-header__links .text-btn {
- margin-right: 10px;
+ margin-right: 10px;
}
.column-header__button {
- cursor: pointer;
- border: 0;
- padding: 0 15px;
- font-size: 16px;
- color: #fff;
- background: $gab-background-container;
- &:hover {color: lighten($darker-text-color, 7%);}
-
- &.active {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
-
- &:hover {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
- }
- }
+ cursor: pointer;
+ border: 0;
+ padding: 0 15px;
+ font-size: 16px;
+ color: #fff;
+ background: $gab-background-container;
+ &:hover {color: lighten($darker-text-color, 7%);}
+
+ &.active {
+ color: $primary-text-color;
+ background: lighten($ui-base-color, 8%);
+
+ &:hover {
+ color: $primary-text-color;
+ background: lighten($ui-base-color, 8%);
+ }
+ }
}
.column-header__collapsible {
- max-height: 70vh;
- overflow: hidden;
- overflow-y: auto;
- color: $darker-text-color;
- transition: max-height 150ms ease-in-out, opacity 300ms linear;
- opacity: 1;
-
- &.collapsed {
- max-height: 0;
- opacity: 0.5;
- }
-
- &.animating {
- overflow-y: hidden;
- }
-
- hr {
- height: 0;
- background: transparent;
- border: 0;
- border-top: 1px solid lighten($ui-base-color, 12%);
- margin: 10px 0;
- }
+ max-height: 70vh;
+ overflow: hidden;
+ overflow-y: auto;
+ color: $darker-text-color;
+ transition: max-height 150ms ease-in-out, opacity 300ms linear;
+ opacity: 1;
+
+ &.collapsed {
+ max-height: 0;
+ opacity: 0.5;
+ }
+
+ &.animating {
+ overflow-y: hidden;
+ }
+
+ hr {
+ height: 0;
+ background: transparent;
+ border: 0;
+ border-top: 1px solid lighten($ui-base-color, 12%);
+ margin: 10px 0;
+ }
}
.column-header__collapsible-inner {
- background: #3f3f3f;
- padding: 15px;
+ background: #3f3f3f;
+ padding: 15px;
}
.column-header__setting-btn {
- &--link {
- text-decoration: none;
+ &--link {
+ text-decoration: none;
- .fa {
- margin-left: 10px;
- }
- }
- &:hover {
- color: $darker-text-color;
- text-decoration: underline;
- }
+ .fa {
+ margin-left: 10px;
+ }
+ }
+ &:hover {
+ color: $darker-text-color;
+ text-decoration: underline;
+ }
}
.column-header__setting-arrows {
- float: right;
+ float: right;
- .column-header__setting-btn {
- padding: 0 10px;
+ .column-header__setting-btn {
+ padding: 0 10px;
- &:last-child {
- padding-right: 0;
- }
- }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
}
.column-header__expansion {
- overflow-x: scroll;
- overflow-y: hidden;
- white-space: nowrap;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ white-space: nowrap;
}
.text-btn {
- display: inline-block;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
- border: 0;
- background: transparent;
- cursor: pointer;
+ display: inline-block;
+ padding: 0;
+ font-family: inherit;
+ font-size: inherit;
+ color: inherit;
+ border: 0;
+ background: transparent;
+ cursor: pointer;
}
.column-header__icon {
- display: inline-block;
- margin-right: 5px;
+ display: inline-block;
+ margin-right: 5px;
}
.loading-indicator {
- color: $dark-text-color;
- font-size: 12px;
- font-weight: 400;
- text-transform: uppercase;
- overflow: visible;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
- span {
- display: block;
- float: left;
- margin-left: 50%;
- transform: translateX(-50%);
- margin: 82px 0 0 50%;
- white-space: nowrap;
- }
+ color: $dark-text-color;
+ font-size: 12px;
+ font-weight: 400;
+ text-transform: uppercase;
+ overflow: visible;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ span {
+ display: block;
+ float: left;
+ margin-left: 50%;
+ transform: translateX(-50%);
+ margin: 82px 0 0 50%;
+ white-space: nowrap;
+ }
}
.loading-indicator__figure {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 42px;
- height: 42px;
- box-sizing: border-box;
- background-color: transparent;
- border: 0 solid lighten($ui-base-color, 26%);
- border-width: 6px;
- border-radius: 50%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 42px;
+ height: 42px;
+ box-sizing: border-box;
+ background-color: transparent;
+ border: 0 solid lighten($ui-base-color, 26%);
+ border-width: 6px;
+ border-radius: 50%;
}
.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.610, 0.355, 1.000);
}
.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.610, 0.355, 1.000);
}
@keyframes loader-figure {
- 0% {
- width: 0;
- height: 0;
- background-color: lighten($ui-base-color, 26%);
- }
-
- 29% {
- background-color: lighten($ui-base-color, 26%);
- }
-
- 30% {
- width: 42px;
- height: 42px;
- background-color: transparent;
- border-width: 21px;
- opacity: 1;
- }
-
- 100% {
- width: 42px;
- height: 42px;
- border-width: 0;
- opacity: 0;
- background-color: transparent;
- }
+ 0% {
+ width: 0;
+ height: 0;
+ background-color: lighten($ui-base-color, 26%);
+ }
+
+ 29% {
+ background-color: lighten($ui-base-color, 26%);
+ }
+
+ 30% {
+ width: 42px;
+ height: 42px;
+ background-color: transparent;
+ border-width: 21px;
+ opacity: 1;
+ }
+
+ 100% {
+ width: 42px;
+ height: 42px;
+ border-width: 0;
+ opacity: 0;
+ background-color: transparent;
+ }
}
@keyframes loader-label {
- 0% { opacity: 0.25; }
- 30% { opacity: 1; }
- 100% { opacity: 0.25; }
+ 0% { opacity: 0.25; }
+ 30% { opacity: 1; }
+ 100% { opacity: 0.25; }
}
.video-error-cover {
- align-items: center;
- background: $base-overlay-background;
- color: $primary-text-color;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- margin-top: 8px;
- position: relative;
- text-align: center;
- z-index: 100;
+ align-items: center;
+ background: $base-overlay-background;
+ color: $primary-text-color;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ margin-top: 8px;
+ position: relative;
+ text-align: center;
+ z-index: 100;
}
.media-spoiler {
- background: $base-overlay-background;
- color: $darker-text-color;
- border: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- border-radius: 4px;
- appearance: none;
-
- &:hover,
- &:active,
- &:focus {
- padding: 0;
- color: lighten($darker-text-color, 8%);
- }
+ background: $base-overlay-background;
+ color: $darker-text-color;
+ border: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 4px;
+ appearance: none;
+
+ &:hover,
+ &:active,
+ &:focus {
+ padding: 0;
+ color: lighten($darker-text-color, 8%);
+ }
}
.media-spoiler__warning {
- display: block;
- font-size: 14px;
+ display: block;
+ font-size: 14px;
}
.media-spoiler__trigger {
- display: block;
- font-size: 11px;
- font-weight: 700;
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
}
.spoiler-button {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 100;
-
- &--minified {
- display: block;
- left: 4px;
- top: 4px;
- width: auto;
- height: auto;
- }
-
- &--hidden {
- display: none;
- }
-
- &__overlay {
- display: block;
- background: transparent;
- width: 100%;
- height: 100%;
- border: 0;
-
- &__label {
- display: inline-block;
- background: rgba($base-overlay-background, 0.5);
- border-radius: 8px;
- padding: 8px 12px;
- color: $primary-text-color;
- font-weight: 500;
- font-size: 14px;
- }
-
- &:hover,
- &:focus,
- &:active {
- .spoiler-button__overlay__label {
- background: rgba($base-overlay-background, 0.8);
- }
- }
- }
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 100;
+
+ &--minified {
+ display: block;
+ left: 4px;
+ top: 4px;
+ width: auto;
+ height: auto;
+ }
+
+ &--hidden {
+ display: none;
+ }
+
+ &__overlay {
+ display: block;
+ background: transparent;
+ width: 100%;
+ height: 100%;
+ border: 0;
+
+ &__label {
+ display: inline-block;
+ background: rgba($base-overlay-background, 0.5);
+ border-radius: 8px;
+ padding: 8px 12px;
+ color: $primary-text-color;
+ font-weight: 500;
+ font-size: 14px;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ .spoiler-button__overlay__label {
+ background: rgba($base-overlay-background, 0.8);
+ }
+ }
+ }
}
.modal-container--preloader {
- background: lighten($ui-base-color, 8%);
+ background: lighten($ui-base-color, 8%);
}
.account--panel {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: row;
- padding: 10px 0;
+ background: lighten($ui-base-color, 4%);
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0;
}
.account--panel__button,
.detailed-status__button {
- flex: 1 1 auto;
- text-align: center;
+ flex: 1 1 auto;
+ text-align: center;
}
.column-settings__outer {
- background: lighten($ui-base-color, 8%);
- padding: 15px;
+ background: lighten($ui-base-color, 8%);
+ padding: 15px;
}
.column-settings__section {
- color: $darker-text-color;
- cursor: default;
- display: block;
- font-weight: 500;
- margin-bottom: 10px;
+ color: $darker-text-color;
+ cursor: default;
+ display: block;
+ font-weight: 500;
+ margin-bottom: 10px;
}
.column-settings__hashtags {
- .column-settings__row {
- margin-bottom: 15px;
- }
-
- .column-select {
- &__control {
- @include search-input();
- }
-
- &__placeholder {
- color: $dark-text-color;
- padding-left: 2px;
- font-size: 12px;
- }
-
- &__value-container {
- padding-left: 6px;
- }
-
- &__multi-value {
- background: lighten($ui-base-color, 8%);
-
- &__remove {
- cursor: pointer;
-
- &:hover,
- &:active,
- &:focus {
- background: lighten($ui-base-color, 12%);
- color: lighten($darker-text-color, 4%);
- }
- }
- }
-
- &__multi-value__label,
- &__input {
- color: $darker-text-color;
- }
-
- &__clear-indicator,
- &__dropdown-indicator {
- cursor: pointer;
- transition: none;
- color: $dark-text-color;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($dark-text-color, 4%);
- }
- }
-
- &__indicator-separator {
- background-color: lighten($ui-base-color, 8%);
- }
-
- &__menu {
- @include search-popout();
- padding: 0;
- background: $ui-secondary-color;
- }
-
- &__menu-list {
- padding: 6px;
- }
-
- &__option {
- color: $inverted-text-color;
- border-radius: 4px;
- font-size: 14px;
-
- &--is-focused,
- &--is-selected {
- background: darken($ui-secondary-color, 10%);
- }
- }
- }
+ .column-settings__row {
+ margin-bottom: 15px;
+ }
+
+ .column-select {
+ &__control {
+ @include search-input();
+ }
+
+ &__placeholder {
+ color: $dark-text-color;
+ padding-left: 2px;
+ font-size: 12px;
+ }
+
+ &__value-container {
+ padding-left: 6px;
+ }
+
+ &__multi-value {
+ background: lighten($ui-base-color, 8%);
+
+ &__remove {
+ cursor: pointer;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: lighten($ui-base-color, 12%);
+ color: lighten($darker-text-color, 4%);
+ }
+ }
+ }
+
+ &__multi-value__label,
+ &__input {
+ color: $darker-text-color;
+ }
+
+ &__clear-indicator,
+ &__dropdown-indicator {
+ cursor: pointer;
+ transition: none;
+ color: $dark-text-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: lighten($dark-text-color, 4%);
+ }
+ }
+
+ &__indicator-separator {
+ background-color: lighten($ui-base-color, 8%);
+ }
+
+ &__menu {
+ @include search-popout();
+ padding: 0;
+ background: $ui-secondary-color;
+ }
+
+ &__menu-list {
+ padding: 6px;
+ }
+
+ &__option {
+ color: $inverted-text-color;
+ border-radius: 4px;
+ font-size: 14px;
+
+ &--is-focused,
+ &--is-selected {
+ background: darken($ui-secondary-color, 10%);
+ }
+ }
+ }
}
.column-settings__row {
- .text-btn {
- margin-bottom: 15px;
- }
+ .text-btn {
+ margin-bottom: 15px;
+ }
}
.relationship-tag {
- color: $primary-text-color;
- margin-bottom: 4px;
- display: block;
- vertical-align: top;
- background-color: $base-overlay-background;
- text-transform: uppercase;
- font-size: 11px;
- font-weight: 500;
- padding: 4px;
- border-radius: 4px;
- opacity: 0.7;
-
- &:hover {
- opacity: 1;
- }
+ color: $primary-text-color;
+ margin-bottom: 4px;
+ display: block;
+ vertical-align: top;
+ background-color: $base-overlay-background;
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: 500;
+ padding: 4px;
+ border-radius: 4px;
+ opacity: 0.7;
+
+ &:hover {
+ opacity: 1;
+ }
}
.setting-toggle {
- display: block;
- line-height: 24px;
+ display: block;
+ line-height: 24px;
}
.setting-toggle__label {
- color: $darker-text-color;
- display: inline-block;
- margin-bottom: 14px;
- margin-left: 8px;
- vertical-align: middle;
+ color: $darker-text-color;
+ display: inline-block;
+ margin-bottom: 14px;
+ margin-left: 8px;
+ vertical-align: middle;
}
.empty-column-indicator,
.error-column {
- color: $dark-text-color;
- background: $ui-base-color;
- text-align: center;
- padding: 40px;
- font-size: 15px;
- font-weight: 400;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
+ color: $dark-text-color;
+ background: $ui-base-color;
+ text-align: center;
+ padding: 40px;
+ font-size: 15px;
+ font-weight: 400;
+ cursor: default;
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ justify-content: center;
min-height: 160px;
- @supports(display: grid) { // hack to fix Chrome <57
- contain: strict;
- }
+ @supports(display: grid) { // hack to fix Chrome <57
+ contain: strict;
+ }
- & > span {
- max-width: 400px;
- }
+ & > span {
+ max-width: 400px;
+ }
- a {
- color: $highlight-text-color;
- text-decoration: none;
+ a {
+ color: $highlight-text-color;
+ text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
.error-column {
- flex-direction: column;
+ flex-direction: column;
}
@keyframes heartbeat {
- from {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
+ from {
+ transform: scale(1);
+ animation-timing-function: ease-out;
+ }
- 10% {
- transform: scale(0.91);
- animation-timing-function: ease-in;
- }
+ 10% {
+ transform: scale(0.91);
+ animation-timing-function: ease-in;
+ }
- 17% {
- transform: scale(0.98);
- animation-timing-function: ease-out;
- }
+ 17% {
+ transform: scale(0.98);
+ animation-timing-function: ease-out;
+ }
- 33% {
- transform: scale(0.87);
- animation-timing-function: ease-in;
- }
+ 33% {
+ transform: scale(0.87);
+ animation-timing-function: ease-in;
+ }
- 45% {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
+ 45% {
+ transform: scale(1);
+ animation-timing-function: ease-out;
+ }
}
.no-reduce-motion .pulse-loading {
- transform-origin: center center;
- animation: heartbeat 1.5s ease-in-out infinite both;
+ transform-origin: center center;
+ animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes shake-bottom {
- 0%,
- 100% {
- transform: rotate(0deg);
- transform-origin: 50% 100%;
- }
+ 0%,
+ 100% {
+ transform: rotate(0deg);
+ transform-origin: 50% 100%;
+ }
- 10% {
- transform: rotate(2deg);
- }
+ 10% {
+ transform: rotate(2deg);
+ }
- 20%,
- 40%,
- 60% {
- transform: rotate(-4deg);
- }
+ 20%,
+ 40%,
+ 60% {
+ transform: rotate(-4deg);
+ }
- 30%,
- 50%,
- 70% {
- transform: rotate(4deg);
- }
+ 30%,
+ 50%,
+ 70% {
+ transform: rotate(4deg);
+ }
- 80% {
- transform: rotate(-2deg);
- }
+ 80% {
+ transform: rotate(-2deg);
+ }
- 90% {
- transform: rotate(2deg);
- }
+ 90% {
+ transform: rotate(2deg);
+ }
}
.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;
+ transform-origin: 50% 100%;
+ animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
}
.emoji-picker-dropdown__menu {
- background: $simple-background-color;
- position: absolute;
- box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- border-radius: 4px;
- margin-top: 5px;
- z-index: 20000;
-
- .emoji-mart-scroll {
- transition: opacity 200ms ease;
- }
+ background: $simple-background-color;
+ position: absolute;
+ box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+ border-radius: 4px;
+ margin-top: 5px;
+ z-index: 20000;
+
+ .emoji-mart-scroll {
+ transition: opacity 200ms ease;
+ }
- &.selecting .emoji-mart-scroll {
- opacity: 0.5;
- }
+ &.selecting .emoji-mart-scroll {
+ opacity: 0.5;
+ }
}
.emoji-picker-dropdown__modifiers {
- position: absolute;
- top: 60px;
- right: 11px;
- cursor: pointer;
+ position: absolute;
+ top: 60px;
+ right: 11px;
+ cursor: pointer;
}
.emoji-picker-dropdown__modifiers__menu {
- position: absolute;
- z-index: 4;
- top: -4px;
- left: -8px;
- background: $simple-background-color;
- border-radius: 4px;
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- overflow: hidden;
-
- button {
- display: block;
- cursor: pointer;
- border: 0;
- padding: 4px 8px;
- background: transparent;
-
- &:hover,
- &:focus,
- &:active {
- background: rgba($ui-secondary-color, 0.4);
- }
- }
-
- .emoji-mart-emoji {
- height: 22px;
- }
+ position: absolute;
+ z-index: 4;
+ top: -4px;
+ left: -8px;
+ background: $simple-background-color;
+ border-radius: 4px;
+ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+ overflow: hidden;
+
+ button {
+ display: block;
+ cursor: pointer;
+ border: 0;
+ padding: 4px 8px;
+ background: transparent;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: rgba($ui-secondary-color, 0.4);
+ }
+ }
+
+ .emoji-mart-emoji {
+ height: 22px;
+ }
}
.emoji-mart-emoji {
- span {
- background-repeat: no-repeat;
- }
+ span {
+ background-repeat: no-repeat;
+ }
}
.upload-area {
- align-items: center;
- background: rgba($base-overlay-background, 0.8);
- display: flex;
- height: 100%;
- justify-content: center;
- left: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- visibility: hidden;
- width: 100%;
- z-index: 2000;
-
- * {
- pointer-events: none;
- }
+ align-items: center;
+ background: rgba($base-overlay-background, 0.8);
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ visibility: hidden;
+ width: 100%;
+ z-index: 2000;
+
+ * {
+ pointer-events: none;
+ }
}
.upload-area__drop {
- width: 320px;
- height: 160px;
- display: flex;
- box-sizing: border-box;
- position: relative;
- padding: 8px;
+ width: 320px;
+ height: 160px;
+ display: flex;
+ box-sizing: border-box;
+ position: relative;
+ padding: 8px;
}
.upload-area__background {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: -1;
- border-radius: 4px;
- background: $ui-base-color;
- box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ border-radius: 4px;
+ background: $ui-base-color;
+ box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
}
.upload-area__content {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- color: $secondary-text-color;
- font-size: 18px;
- font-weight: 500;
- border: 2px dashed $ui-base-lighter-color;
- border-radius: 4px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $secondary-text-color;
+ font-size: 18px;
+ font-weight: 500;
+ border: 2px dashed $ui-base-lighter-color;
+ border-radius: 4px;
}
.upload-progress {
- padding: 10px;
- color: $lighter-text-color;
- overflow: hidden;
- display: flex;
+ padding: 10px;
+ color: $lighter-text-color;
+ overflow: hidden;
+ display: flex;
- .fa {
- font-size: 34px;
- margin-right: 10px;
- }
+ .fa {
+ font-size: 34px;
+ margin-right: 10px;
+ }
- span {
- font-size: 12px;
- text-transform: uppercase;
- font-weight: 500;
- display: block;
- }
+ span {
+ font-size: 12px;
+ text-transform: uppercase;
+ font-weight: 500;
+ display: block;
+ }
}
.upload-progess__message {
- flex: 1 1 auto;
+ flex: 1 1 auto;
}
.upload-progress__backdrop {
- width: 100%;
- height: 6px;
- border-radius: 6px;
- background: $ui-base-lighter-color;
- position: relative;
- margin-top: 5px;
+ width: 100%;
+ height: 6px;
+ border-radius: 6px;
+ background: $ui-base-lighter-color;
+ position: relative;
+ margin-top: 5px;
}
.upload-progress__tracker {
- position: absolute;
- left: 0;
- top: 0;
- height: 6px;
- background: $ui-highlight-color;
- border-radius: 6px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 6px;
+ background: $ui-highlight-color;
+ border-radius: 6px;
}
.emoji-button {
- display: block;
- font-size: 24px;
- line-height: 24px;
- margin-left: 2px;
- width: 24px;
- outline: 0;
- cursor: pointer;
-
- &:active,
- &:focus {
- outline: 0 !important;
- }
-
- img {
- filter: grayscale(100%);
- opacity: 0.8;
- display: block;
- margin: 0;
- width: 22px;
- height: 22px;
- margin-top: 2px;
- }
-
- &:hover,
- &:active,
- &:focus {
- img {
- opacity: 1;
- filter: none;
- }
- }
+ display: block;
+ font-size: 24px;
+ line-height: 24px;
+ margin-left: 2px;
+ width: 24px;
+ outline: 0;
+ cursor: pointer;
+
+ &:active,
+ &:focus {
+ outline: 0 !important;
+ }
+
+ img {
+ filter: grayscale(100%);
+ opacity: 0.8;
+ display: block;
+ margin: 0;
+ width: 22px;
+ height: 22px;
+ margin-top: 2px;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ img {
+ opacity: 1;
+ filter: none;
+ }
+ }
}
.dropdown--active .emoji-button img {
- opacity: 1;
- filter: none;
+ opacity: 1;
+ filter: none;
}
.privacy-dropdown__dropdown {
- position: absolute;
- background: $simple-background-color;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- border-radius: 4px;
- margin-left: 40px;
- overflow: hidden;
- z-index: 10000;
-
- &.top {
- transform-origin: 50% 100%;
- }
+ position: absolute;
+ background: $simple-background-color;
+ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ border-radius: 4px;
+ margin-left: 40px;
+ overflow: hidden;
+ z-index: 10000;
+
+ &.top {
+ transform-origin: 50% 100%;
+ }
- &.bottom {
- transform-origin: 50% 0;
- }
+ &.bottom {
+ transform-origin: 50% 0;
+ }
}
.privacy-dropdown__option {
- color: $inverted-text-color;
- padding: 10px;
- cursor: pointer;
- display: flex;
+ color: $inverted-text-color;
+ padding: 10px;
+ cursor: pointer;
+ display: flex;
- &:hover,
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- outline: 0;
+ &:hover,
+ &.active {
+ background: $ui-highlight-color;
+ color: $primary-text-color;
+ outline: 0;
- .privacy-dropdown__option__content {
- color: $primary-text-color;
+ .privacy-dropdown__option__content {
+ color: $primary-text-color;
- strong {
- color: $primary-text-color;
- }
- }
- }
+ strong {
+ color: $primary-text-color;
+ }
+ }
+ }
- &.active:hover {
- background: lighten($ui-highlight-color, 4%);
- }
+ &.active:hover {
+ background: lighten($ui-highlight-color, 4%);
+ }
}
.privacy-dropdown__option__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 10px;
}
.privacy-dropdown__option__content {
- flex: 1 1 auto;
- color: $lighter-text-color;
-
- strong {
- font-weight: 500;
- display: block;
- color: $inverted-text-color;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
+ flex: 1 1 auto;
+ color: $lighter-text-color;
+
+ strong {
+ font-weight: 500;
+ display: block;
+ color: $inverted-text-color;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
}
.privacy-dropdown.active {
- .privacy-dropdown__value {
- background: $simple-background-color;
- border-radius: 4px 4px 0 0;
- box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-
- .icon-button {
- transition: none;
- }
-
- &.active {
- background: $ui-highlight-color;
-
- .icon-button {
- color: $primary-text-color;
- }
- }
- }
+ .privacy-dropdown__value {
+ background: $simple-background-color;
+ border-radius: 4px 4px 0 0;
+ box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+
+ .icon-button {
+ transition: none;
+ }
+
+ &.active {
+ background: $ui-highlight-color;
+
+ .icon-button {
+ color: $primary-text-color;
+ }
+ }
+ }
- &.top .privacy-dropdown__value {
- border-radius: 0 0 4px 4px;
- }
+ &.top .privacy-dropdown__value {
+ border-radius: 0 0 4px 4px;
+ }
- .privacy-dropdown__dropdown {
- display: block;
- box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
- }
+ .privacy-dropdown__dropdown {
+ display: block;
+ box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+ }
}
.search {
- position: relative;
+ position: relative;
}
.search__input {
- display: block;
- padding: 7px 30px 6px 10px;
- @include search-input();
+ display: block;
+ padding: 7px 30px 6px 10px;
+ @include search-input();
}
.search__icon {
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus {
- outline: 0 !important;
- }
-
- .fa {
- cursor: default;
- display: inline-block;
- position: absolute;
- top: 8px;
- right: 6px;
- z-index: 2;
- width: 18px;
- height: 18px;
- @include font-size(16);
- color: $gab-placeholder-accent;
- opacity: 0;
- pointer-events: none;
-
- &.active {
- pointer-events: auto;
- opacity: 1;
- }
- }
- .fa-search.active {pointer-events: none;}
-
- .fa-times-circle {
- cursor: pointer;
- @include font-size(17);
- color: $nav-ui-highlight-color;
- &:hover {color: lighten($nav-ui-highlight-color, 7%);}
- }
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus {
+ outline: 0 !important;
+ }
+
+ .fa {
+ cursor: default;
+ display: inline-block;
+ position: absolute;
+ top: 8px;
+ right: 6px;
+ z-index: 2;
+ width: 18px;
+ height: 18px;
+ @include font-size(16);
+ color: $gab-placeholder-accent;
+ opacity: 0;
+ pointer-events: none;
+
+ &.active {
+ pointer-events: auto;
+ opacity: 1;
+ }
+ }
+ .fa-search.active {pointer-events: none;}
+
+ .fa-times-circle {
+ cursor: pointer;
+ @include font-size(17);
+ color: $nav-ui-highlight-color;
+ &:hover {color: lighten($nav-ui-highlight-color, 7%);}
+ }
}
.search-results__header {
- color: $dark-text-color;
- background: lighten($ui-base-color, 2%);
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- cursor: default;
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
+ color: $dark-text-color;
+ background: lighten($ui-base-color, 2%);
+ padding: 15px;
+ font-weight: 500;
+ font-size: 16px;
+ cursor: default;
+
+ .fa {
+ display: inline-block;
+ margin-right: 5px;
+ }
}
.search-results__section {
- margin-bottom: 5px;
-
- h5 {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
- display: flex;
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- color: $dark-text-color;
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
-
- .account:last-child,
- & > div:last-child .status {
- border-bottom: 0;
- }
+ margin-bottom: 5px;
+
+ h5 {
+ background: darken($ui-base-color, 4%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ cursor: default;
+ display: flex;
+ padding: 15px;
+ font-weight: 500;
+ font-size: 16px;
+ color: $dark-text-color;
+
+ .fa {
+ display: inline-block;
+ margin-right: 5px;
+ }
+ }
+
+ .account:last-child,
+ & > div:last-child .status {
+ border-bottom: 0;
+ }
}
.search-results__hashtag {
- display: block;
- padding: 10px;
- color: $secondary-text-color;
- text-decoration: none;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($secondary-text-color, 4%);
- text-decoration: underline;
- }
+ display: block;
+ padding: 10px;
+ color: $secondary-text-color;
+ text-decoration: none;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: lighten($secondary-text-color, 4%);
+ text-decoration: underline;
+ }
}
////////////////////////////////////////////////////////////////////////////////////////////////
@@ -3424,1227 +3424,1227 @@ a.status-card.compact:hover {
.loading-bar {
- background-color: $highlight-text-color;
- height: 3px;
- position: absolute;
- top: 0;
- left: 0;
+ background-color: $highlight-text-color;
+ height: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
}
.media-gallery__gifv__label {
- display: block;
- position: absolute;
- color: $primary-text-color;
- background: rgba($base-overlay-background, 0.5);
- bottom: 6px;
- left: 6px;
- padding: 2px 6px;
- border-radius: 2px;
- font-size: 11px;
- font-weight: 600;
- z-index: 1;
- pointer-events: none;
- opacity: 0.9;
- transition: opacity 0.1s ease;
- line-height: 18px;
+ display: block;
+ position: absolute;
+ color: $primary-text-color;
+ background: rgba($base-overlay-background, 0.5);
+ bottom: 6px;
+ left: 6px;
+ padding: 2px 6px;
+ border-radius: 2px;
+ font-size: 11px;
+ font-weight: 600;
+ z-index: 1;
+ pointer-events: none;
+ opacity: 0.9;
+ transition: opacity 0.1s ease;
+ line-height: 18px;
}
.media-gallery__gifv {
- &.autoplay {
- .media-gallery__gifv__label {
- display: none;
- }
- }
+ &.autoplay {
+ .media-gallery__gifv__label {
+ display: none;
+ }
+ }
- &:hover {
- .media-gallery__gifv__label {
- opacity: 1;
- }
- }
+ &:hover {
+ .media-gallery__gifv__label {
+ opacity: 1;
+ }
+ }
}
.attachment-list {
- display: flex;
- font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px;
- margin-top: 14px;
- overflow: hidden;
-
- &__icon {
- flex: 0 0 auto;
- color: $dark-text-color;
- padding: 8px 18px;
- cursor: default;
- border-right: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 26px;
-
- .fa {
- display: block;
- }
- }
-
- &__list {
- list-style: none;
- padding: 4px 0;
- padding-left: 8px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- li {
- display: block;
- padding: 4px 0;
- }
-
- a {
- text-decoration: none;
- color: $dark-text-color;
- font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- &.compact {
- border: 0;
- margin-top: 4px;
-
- .attachment-list__list {
- padding: 0;
- display: block;
- }
-
- .fa {
- color: $dark-text-color;
- }
- }
+ display: flex;
+ font-size: 14px;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-radius: 4px;
+ margin-top: 14px;
+ overflow: hidden;
+
+ &__icon {
+ flex: 0 0 auto;
+ color: $dark-text-color;
+ padding: 8px 18px;
+ cursor: default;
+ border-right: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
+
+ .fa {
+ display: block;
+ }
+ }
+
+ &__list {
+ list-style: none;
+ padding: 4px 0;
+ padding-left: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ li {
+ display: block;
+ padding: 4px 0;
+ }
+
+ a {
+ text-decoration: none;
+ color: $dark-text-color;
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &.compact {
+ border: 0;
+ margin-top: 4px;
+
+ .attachment-list__list {
+ padding: 0;
+ display: block;
+ }
+
+ .fa {
+ color: $dark-text-color;
+ }
+ }
}
/* Media Gallery */
.media-gallery {
- box-sizing: border-box;
- margin-top: 8px;
- overflow: hidden;
- border-radius: 4px;
- position: relative;
- width: 100%;
- background-color: lighten($ui-base-color, 8%);
+ box-sizing: border-box;
+ margin-top: 8px;
+ overflow: hidden;
+ border-radius: 4px;
+ position: relative;
+ width: 100%;
+ background-color: lighten($ui-base-color, 8%);
}
.media-gallery__item {
- border: none;
- box-sizing: border-box;
- display: block;
- float: left;
- position: relative;
- border-radius: 4px;
- overflow: hidden;
+ border: none;
+ box-sizing: border-box;
+ display: block;
+ float: left;
+ position: relative;
+ border-radius: 4px;
+ overflow: hidden;
}
.media-gallery__item-thumbnail {
- cursor: zoom-in;
- display: block;
- text-decoration: none;
- color: $secondary-text-color;
- line-height: 0;
- position: relative;
- z-index: 1;
-
- &,
- img {
- height: 100%;
- width: 100%;
- }
+ cursor: zoom-in;
+ display: block;
+ text-decoration: none;
+ color: $secondary-text-color;
+ line-height: 0;
+ position: relative;
+ z-index: 1;
+
+ &,
+ img {
+ height: 100%;
+ width: 100%;
+ }
- img {
- object-fit: cover;
- }
+ img {
+ object-fit: cover;
+ }
}
.media-gallery__preview {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- background: $base-overlay-background;
-
- &--hidden {
- display: none;
- }
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ background: $base-overlay-background;
+
+ &--hidden {
+ display: none;
+ }
}
.media-gallery__gifv {
- height: 100%;
- overflow: hidden;
- position: relative;
- width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
}
.media-gallery__item-gifv-thumbnail {
- cursor: zoom-in;
- height: 100%;
- object-fit: cover;
- position: relative;
- width: 100%;
- z-index: 1;
- transform: none;
- top: 0;
+ cursor: zoom-in;
+ height: 100%;
+ object-fit: cover;
+ position: relative;
+ width: 100%;
+ z-index: 1;
+ transform: none;
+ top: 0;
}
.media-gallery__item-thumbnail-label {
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
- clip: rect(1px, 1px, 1px, 1px);
- overflow: hidden;
- position: absolute;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ overflow: hidden;
+ position: absolute;
}
/* End Media Gallery */
/* Status Video Player */
.status__video-player {
- background: $base-overlay-background;
- box-sizing: border-box;
- cursor: default; /* May not be needed */
- margin-top: 8px;
- overflow: hidden;
- position: relative;
+ background: $base-overlay-background;
+ box-sizing: border-box;
+ cursor: default; /* May not be needed */
+ margin-top: 8px;
+ overflow: hidden;
+ position: relative;
}
.status__video-player-video {
- height: 100%;
- object-fit: cover;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- width: 100%;
- z-index: 1;
+ height: 100%;
+ object-fit: cover;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100%;
+ z-index: 1;
}
.status__video-player-expand,
.status__video-player-mute {
- color: $primary-text-color;
- opacity: 0.8;
- position: absolute;
- right: 4px;
- text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+ color: $primary-text-color;
+ opacity: 0.8;
+ position: absolute;
+ right: 4px;
+ text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
}
.status__video-player-spoiler {
- display: none;
- color: $primary-text-color;
- left: 4px;
- position: absolute;
- text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
- top: 4px;
- z-index: 100;
-
- &.status__video-player-spoiler--visible {
- display: block;
- }
+ display: none;
+ color: $primary-text-color;
+ left: 4px;
+ position: absolute;
+ text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+ top: 4px;
+ z-index: 100;
+
+ &.status__video-player-spoiler--visible {
+ display: block;
+ }
}
.status__video-player-expand {
- bottom: 4px;
- z-index: 100;
+ bottom: 4px;
+ z-index: 100;
}
.status__video-player-mute {
- top: 4px;
- z-index: 5;
+ top: 4px;
+ z-index: 5;
}
.detailed,
.fullscreen {
- .video-player__volume__current,
- .video-player__volume::before {
- bottom: 27px;
- }
+ .video-player__volume__current,
+ .video-player__volume::before {
+ bottom: 27px;
+ }
- .video-player__volume__handle {
- bottom: 23px;
- }
+ .video-player__volume__handle {
+ bottom: 23px;
+ }
}
.video-player {
- overflow: hidden;
- position: relative;
- background: $base-shadow-color;
- max-width: 100%;
- border-radius: 4px;
-
- &:focus {
- outline: 0;
- }
-
- video {
- max-width: 100vw;
- max-height: 80vh;
- z-index: 1;
- }
-
- &.fullscreen {
- width: 100% !important;
- height: 100% !important;
- margin: 0;
-
- video {
- max-width: 100% !important;
- max-height: 100% !important;
- width: 100% !important;
- height: 100% !important;
- }
- }
-
- &.inline {
- video {
- object-fit: contain;
- position: relative;
- }
- }
-
- &__controls {
- position: absolute;
- z-index: 2;
- bottom: 0;
- left: 0;
- right: 0;
- box-sizing: border-box;
- background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
- padding: 0 15px;
- opacity: 0;
- transition: opacity .1s ease;
-
- &.active {
- opacity: 1;
- }
- }
-
- &.inactive {
- video,
- .video-player__controls {
- visibility: hidden;
- }
- }
-
- &__spoiler {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 4;
- border: 0;
- background: $base-overlay-background;
- color: $darker-text-color;
- transition: none;
- pointer-events: none;
-
- &.active {
- display: block;
- pointer-events: auto;
-
- &:hover,
- &:active,
- &:focus {
- color: lighten($darker-text-color, 7%);
- }
- }
-
- &__title {
- display: block;
- font-size: 14px;
- }
-
- &__subtitle {
- display: block;
- font-size: 11px;
- font-weight: 500;
- }
- }
-
- &__buttons-bar {
- display: flex;
- justify-content: space-between;
- padding-bottom: 10px;
- }
-
- &__buttons {
- font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- &.left {
- button {
- padding-left: 0;
- }
- }
-
- &.right {
- button {
- padding-right: 0;
- }
- }
-
- button {
- background: transparent;
- padding: 2px 10px;
- font-size: 16px;
- border: 0;
- color: rgba($white, 0.75);
-
- &:active,
- &:hover,
- &:focus {
- color: $white;
- }
- }
- }
-
- &__time-sep,
- &__time-total,
- &__time-current {
- font-size: 14px;
- font-weight: 500;
- }
-
- &__time-current {
- color: $white;
- margin-left: 60px;
- }
-
- &__time-sep {
- display: inline-block;
- margin: 0 6px;
- }
-
- &__time-sep,
- &__time-total {
- color: $white;
- }
-
- &__volume {
- cursor: pointer;
- height: 24px;
- display: inline;
-
- &::before {
- content: "";
- width: 50px;
- background: rgba($white, 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- left: 70px;
- bottom: 20px;
- }
-
- &__current {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- left: 70px;
- bottom: 20px;
- background: lighten($ui-highlight-color, 8%);
- }
-
- &__handle {
- position: absolute;
- z-index: 3;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- bottom: 16px;
- left: 70px;
- transition: opacity .1s ease;
- background: lighten($ui-highlight-color, 8%);
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- pointer-events: none;
- }
- }
-
- &__link {
- padding: 2px 10px;
-
- a {
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- color: $white;
-
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
- }
- }
-
- &__seek {
- cursor: pointer;
- height: 24px;
- position: relative;
-
- &::before {
- content: "";
- width: 100%;
- background: rgba($white, 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- top: 10px;
- }
-
- &__progress,
- &__buffer {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- top: 10px;
- background: lighten($ui-highlight-color, 8%);
- }
-
- &__buffer {
- background: rgba($white, 0.2);
- }
-
- &__handle {
- position: absolute;
- z-index: 3;
- opacity: 0;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- top: 6px;
- margin-left: -6px;
- transition: opacity .1s ease;
- background: lighten($ui-highlight-color, 8%);
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- pointer-events: none;
-
- &.active {
- opacity: 1;
- }
- }
-
- &:hover {
- .video-player__seek__handle {
- opacity: 1;
- }
- }
- }
-
- &.detailed,
- &.fullscreen {
- .video-player__buttons {
- button {
- padding-top: 10px;
- padding-bottom: 10px;
- }
- }
- }
+ overflow: hidden;
+ position: relative;
+ background: $base-shadow-color;
+ max-width: 100%;
+ border-radius: 4px;
+
+ &:focus {
+ outline: 0;
+ }
+
+ video {
+ max-width: 100vw;
+ max-height: 80vh;
+ z-index: 1;
+ }
+
+ &.fullscreen {
+ width: 100% !important;
+ height: 100% !important;
+ margin: 0;
+
+ video {
+ max-width: 100% !important;
+ max-height: 100% !important;
+ width: 100% !important;
+ height: 100% !important;
+ }
+ }
+
+ &.inline {
+ video {
+ object-fit: contain;
+ position: relative;
+ }
+ }
+
+ &__controls {
+ position: absolute;
+ z-index: 2;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ box-sizing: border-box;
+ background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
+ padding: 0 15px;
+ opacity: 0;
+ transition: opacity .1s ease;
+
+ &.active {
+ opacity: 1;
+ }
+ }
+
+ &.inactive {
+ video,
+ .video-player__controls {
+ visibility: hidden;
+ }
+ }
+
+ &__spoiler {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 4;
+ border: 0;
+ background: $base-overlay-background;
+ color: $darker-text-color;
+ transition: none;
+ pointer-events: none;
+
+ &.active {
+ display: block;
+ pointer-events: auto;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: lighten($darker-text-color, 7%);
+ }
+ }
+
+ &__title {
+ display: block;
+ font-size: 14px;
+ }
+
+ &__subtitle {
+ display: block;
+ font-size: 11px;
+ font-weight: 500;
+ }
+ }
+
+ &__buttons-bar {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ }
+
+ &__buttons {
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &.left {
+ button {
+ padding-left: 0;
+ }
+ }
+
+ &.right {
+ button {
+ padding-right: 0;
+ }
+ }
+
+ button {
+ background: transparent;
+ padding: 2px 10px;
+ font-size: 16px;
+ border: 0;
+ color: rgba($white, 0.75);
+
+ &:active,
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+ }
+ }
+
+ &__time-sep,
+ &__time-total,
+ &__time-current {
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ &__time-current {
+ color: $white;
+ margin-left: 60px;
+ }
+
+ &__time-sep {
+ display: inline-block;
+ margin: 0 6px;
+ }
+
+ &__time-sep,
+ &__time-total {
+ color: $white;
+ }
+
+ &__volume {
+ cursor: pointer;
+ height: 24px;
+ display: inline;
+
+ &::before {
+ content: "";
+ width: 50px;
+ background: rgba($white, 0.35);
+ border-radius: 4px;
+ display: block;
+ position: absolute;
+ height: 4px;
+ left: 70px;
+ bottom: 20px;
+ }
+
+ &__current {
+ display: block;
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ left: 70px;
+ bottom: 20px;
+ background: lighten($ui-highlight-color, 8%);
+ }
+
+ &__handle {
+ position: absolute;
+ z-index: 3;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ bottom: 16px;
+ left: 70px;
+ transition: opacity .1s ease;
+ background: lighten($ui-highlight-color, 8%);
+ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+ pointer-events: none;
+ }
+ }
+
+ &__link {
+ padding: 2px 10px;
+
+ a {
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ color: $white;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__seek {
+ cursor: pointer;
+ height: 24px;
+ position: relative;
+
+ &::before {
+ content: "";
+ width: 100%;
+ background: rgba($white, 0.35);
+ border-radius: 4px;
+ display: block;
+ position: absolute;
+ height: 4px;
+ top: 10px;
+ }
+
+ &__progress,
+ &__buffer {
+ display: block;
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ top: 10px;
+ background: lighten($ui-highlight-color, 8%);
+ }
+
+ &__buffer {
+ background: rgba($white, 0.2);
+ }
+
+ &__handle {
+ position: absolute;
+ z-index: 3;
+ opacity: 0;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ top: 6px;
+ margin-left: -6px;
+ transition: opacity .1s ease;
+ background: lighten($ui-highlight-color, 8%);
+ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+ pointer-events: none;
+
+ &.active {
+ opacity: 1;
+ }
+ }
+
+ &:hover {
+ .video-player__seek__handle {
+ opacity: 1;
+ }
+ }
+ }
+
+ &.detailed,
+ &.fullscreen {
+ .video-player__buttons {
+ button {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+ }
+ }
}
.media-spoiler-video {
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- cursor: pointer;
- margin-top: 8px;
- position: relative;
- border: 0;
- display: block;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ border: 0;
+ display: block;
}
.media-spoiler-video-play-icon {
- border-radius: 100px;
- color: rgba($primary-text-color, 0.8);
- font-size: 36px;
- left: 50%;
- padding: 5px;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
+ border-radius: 100px;
+ color: rgba($primary-text-color, 0.8);
+ font-size: 36px;
+ left: 50%;
+ padding: 5px;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
}
/* End Video Player */
.account-gallery__container {
- display: flex;
- flex-wrap: wrap;
- padding: 4px 2px;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 4px 2px;
}
.account-gallery__item {
- border: none;
- box-sizing: border-box;
- display: block;
- position: relative;
- border-radius: 4px;
- overflow: hidden;
- margin: 2px;
-
- &__icons {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 24px;
- }
+ border: none;
+ box-sizing: border-box;
+ display: block;
+ position: relative;
+ border-radius: 4px;
+ overflow: hidden;
+ margin: 2px;
+
+ &__icons {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 24px;
+ }
}
.notification__filter-bar,
.account__section-headline {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
- display: flex;
- flex-shrink: 0;
-
- button {
- background: darken($ui-base-color, 4%);
- border: 0;
- margin: 0;
- }
-
- button,
- a {
- display: block;
- flex: 1 1 auto;
- color: $secondary-text-color;
- padding: 15px 0;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- text-decoration: none;
- position: relative;
-
- &.active {
- color: $primary-text-color;
-
- &::before,
- &::after {
- display: block;
- content: "";
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 0;
- transform: translateX(-50%);
- border-style: solid;
- border-width: 0 10px 10px;
- border-color: transparent transparent lighten($ui-base-color, 8%);
- }
-
- &::after {
- bottom: -1px;
- border-color: transparent transparent $ui-base-color;
- }
- }
- }
+ background: darken($ui-base-color, 4%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ cursor: default;
+ display: flex;
+ flex-shrink: 0;
+
+ button {
+ background: darken($ui-base-color, 4%);
+ border: 0;
+ margin: 0;
+ }
+
+ button,
+ a {
+ display: block;
+ flex: 1 1 auto;
+ color: $secondary-text-color;
+ padding: 15px 0;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ text-decoration: none;
+ position: relative;
+
+ &.active {
+ color: $primary-text-color;
+
+ &::before,
+ &::after {
+ display: block;
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 0;
+ height: 0;
+ transform: translateX(-50%);
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: transparent transparent lighten($ui-base-color, 8%);
+ }
+
+ &::after {
+ bottom: -1px;
+ border-color: transparent transparent $ui-base-color;
+ }
+ }
+ }
}
.account__section-headline {
- button,
- a {
- flex: none;
- padding: 18px 15px;
- font-size: 16px;
- font-weight: 600;
- }
+ button,
+ a {
+ flex: none;
+ padding: 18px 15px;
+ font-size: 16px;
+ font-weight: 600;
+ }
}
::-webkit-scrollbar-thumb {
- border-radius: 0;
+ border-radius: 0;
}
.search-popout-container{
- width: 251px;
- @media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
+ width: 251px;
+ @media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
}
.search-popout {
- @include search-popout();
+ @include search-popout();
}
noscript {
- text-align: center;
+ text-align: center;
- img {
- width: 200px;
- opacity: 0.5;
- animation: flicker 4s infinite;
- }
+ img {
+ width: 200px;
+ opacity: 0.5;
+ animation: flicker 4s infinite;
+ }
- div {
- font-size: 14px;
- margin: 30px auto;
- color: $secondary-text-color;
- max-width: 400px;
+ div {
+ font-size: 14px;
+ margin: 30px auto;
+ color: $secondary-text-color;
+ max-width: 400px;
- a {
- color: $highlight-text-color;
- text-decoration: underline;
+ a {
+ color: $highlight-text-color;
+ text-decoration: underline;
- &:hover {
- text-decoration: none;
- }
- }
- }
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
}
@keyframes flicker {
- 0% { opacity: 1; }
- 30% { opacity: 0.75; }
- 100% { opacity: 1; }
+ 0% { opacity: 1; }
+ 30% { opacity: 0.75; }
+ 100% { opacity: 1; }
}
@media screen and (max-width: 630px) and (max-height: 400px) {
- $duration: 400ms;
- $delay: 100ms;
-
- .tabs-bar,
- .search {
- will-change: margin-top;
- transition: margin-top $duration $delay;
- }
-
- .navigation-bar {
- will-change: padding-bottom;
- transition: padding-bottom $duration $delay;
- }
-
- .navigation-bar {
- & > a:first-child {
- will-change: margin-top, margin-left, margin-right, width;
- transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
- }
-
- & > .navigation-bar__profile-edit {
- will-change: margin-top;
- transition: margin-top $duration $delay;
- }
-
- .navigation-bar__actions {
- & > .icon-button.close {
- will-change: opacity transform;
- transition: opacity $duration * 0.5 $delay,
- transform $duration $delay;
- }
-
- & > .compose__action-bar .icon-button {
- will-change: opacity transform;
- transition: opacity $duration * 0.5 $delay + $duration * 0.5,
- transform $duration $delay;
- }
- }
- }
-
- .is-composing {
- .tabs-bar,
- .search {
- margin-top: -50px;
- }
-
- .navigation-bar {
- padding-bottom: 0;
-
- & > a:first-child {
- margin: -100px 10px 0 -50px;
- }
-
- .navigation-bar__profile {
- padding-top: 2px;
- }
-
- .navigation-bar__profile-edit {
- position: absolute;
- margin-top: -60px;
- }
-
- .navigation-bar__actions {
- .icon-button.close {
- pointer-events: auto;
- opacity: 1;
- transform: scale(1.0, 1.0) translate(0, 0);
- bottom: 5px;
- }
-
- .compose__action-bar .icon-button {
- pointer-events: none;
- opacity: 0;
- transform: scale(0.0, 1.0) translate(100%, 0);
- }
- }
- }
- }
+ $duration: 400ms;
+ $delay: 100ms;
+
+ .tabs-bar,
+ .search {
+ will-change: margin-top;
+ transition: margin-top $duration $delay;
+ }
+
+ .navigation-bar {
+ will-change: padding-bottom;
+ transition: padding-bottom $duration $delay;
+ }
+
+ .navigation-bar {
+ & > a:first-child {
+ will-change: margin-top, margin-left, margin-right, width;
+ transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
+ }
+
+ & > .navigation-bar__profile-edit {
+ will-change: margin-top;
+ transition: margin-top $duration $delay;
+ }
+
+ .navigation-bar__actions {
+ & > .icon-button.close {
+ will-change: opacity transform;
+ transition: opacity $duration * 0.5 $delay,
+ transform $duration $delay;
+ }
+
+ & > .compose__action-bar .icon-button {
+ will-change: opacity transform;
+ transition: opacity $duration * 0.5 $delay + $duration * 0.5,
+ transform $duration $delay;
+ }
+ }
+ }
+
+ .is-composing {
+ .tabs-bar,
+ .search {
+ margin-top: -50px;
+ }
+
+ .navigation-bar {
+ padding-bottom: 0;
+
+ & > a:first-child {
+ margin: -100px 10px 0 -50px;
+ }
+
+ .navigation-bar__profile {
+ padding-top: 2px;
+ }
+
+ .navigation-bar__profile-edit {
+ position: absolute;
+ margin-top: -60px;
+ }
+
+ .navigation-bar__actions {
+ .icon-button.close {
+ pointer-events: auto;
+ opacity: 1;
+ transform: scale(1.0, 1.0) translate(0, 0);
+ bottom: 5px;
+ }
+
+ .compose__action-bar .icon-button {
+ pointer-events: none;
+ opacity: 0;
+ transform: scale(0.0, 1.0) translate(100%, 0);
+ }
+ }
+ }
+ }
}
.embed-modal {
- max-width: 80vw;
- max-height: 80vh;
-
- h4 {
- padding: 30px;
- font-weight: 500;
- font-size: 16px;
- text-align: center;
- }
-
- .embed-modal__container {
- padding: 10px;
-
- .hint {
- margin-bottom: 15px;
- }
-
- .embed-modal__html {
- outline: 0;
- box-sizing: border-box;
- display: block;
- width: 100%;
- border: none;
- border-radius: 5px;
- padding: 10px;
- font-family: $font-monospace, monospace;
- background: $ui-base-color;
- color: $primary-text-color;
- font-size: 14px;
- margin: 0;
- margin-bottom: 15px;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
-
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
-
- .embed-modal__iframe {
- width: 100%;
- max-width: 100%;
- overflow: hidden;
- border: 0;
-
- iframe {
- width: 100%;
- }
- }
- }
+ max-width: 80vw;
+ max-height: 80vh;
+
+ h4 {
+ padding: 30px;
+ font-weight: 500;
+ font-size: 16px;
+ text-align: center;
+ }
+
+ .embed-modal__container {
+ padding: 10px;
+
+ .hint {
+ margin-bottom: 15px;
+ }
+
+ .embed-modal__html {
+ outline: 0;
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ border: none;
+ border-radius: 5px;
+ padding: 10px;
+ font-family: $font-monospace, monospace;
+ background: $ui-base-color;
+ color: $primary-text-color;
+ font-size: 14px;
+ margin: 0;
+ margin-bottom: 15px;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &:focus {
+ background: lighten($ui-base-color, 4%);
+ }
+
+ @media screen and (max-width: 600px) {
+ font-size: 16px;
+ }
+ }
+
+ .embed-modal__iframe {
+ width: 100%;
+ max-width: 100%;
+ overflow: hidden;
+ border: 0;
+
+ iframe {
+ width: 100%;
+ }
+ }
+ }
}
.account__moved-note {
- padding: 14px 10px;
- padding-bottom: 16px;
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
-
- &__message {
- position: relative;
- margin-left: 58px;
- color: $dark-text-color;
- padding: 8px 0;
- padding-top: 0;
- padding-bottom: 4px;
- font-size: 14px;
-
- > span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-
- &__icon-wrapper {
- left: -26px;
- position: absolute;
- }
-
- .detailed-status__display-avatar {
- position: relative;
- }
-
- .detailed-status__display-name {
- margin-bottom: 0;
- }
+ padding: 14px 10px;
+ padding-bottom: 16px;
+ background: lighten($ui-base-color, 4%);
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ &__message {
+ position: relative;
+ margin-left: 58px;
+ color: $dark-text-color;
+ padding: 8px 0;
+ padding-top: 0;
+ padding-bottom: 4px;
+ font-size: 14px;
+
+ > span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ &__icon-wrapper {
+ left: -26px;
+ position: absolute;
+ }
+
+ .detailed-status__display-avatar {
+ position: relative;
+ }
+
+ .detailed-status__display-name {
+ margin-bottom: 0;
+ }
}
.column-inline-form {
- padding: 7px 15px;
- padding-right: 5px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- background: lighten($ui-base-color, 4%);
+ padding: 7px 15px;
+ padding-right: 5px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ background: lighten($ui-base-color, 4%);
- label {
- flex: 1 1 auto;
+ label {
+ flex: 1 1 auto;
- input {
- width: 100%;
- margin-bottom: 6px;
+ input {
+ width: 100%;
+ margin-bottom: 6px;
- &:focus {
- outline: 0;
- }
- }
- }
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
- .icon-button {
- flex: 0 0 auto;
- margin: 0 5px;
- }
+ .icon-button {
+ flex: 0 0 auto;
+ margin: 0 5px;
+ }
}
.drawer__backdrop {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba($base-overlay-background, 0.5);
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba($base-overlay-background, 0.5);
}
.list-editor {
- flex-direction: column;
- width: 100%;
- overflow: hidden;
- height: 100%;
- overflow-y: scroll;
-
- @media screen and (max-width: 420px) {
- width: 90%;
- }
-
- h4 {
- padding: 15px 0;
- background: lighten($ui-base-color, 13%);
- font-weight: 500;
- font-size: 16px;
- text-align: center;
- border-radius: 8px 8px 0 0;
- }
-
- .drawer__inner {
- border-radius: 0 0 8px 8px;
-
- &.backdrop {
- width: calc(100% - 60px);
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- border-radius: 0 0 0 8px;
- }
- }
-
- &__accounts {
- background: lighten($ui-base-color, 13%);
- overflow-y: auto;
- max-height: 200px;
- }
-
- .account__display-name {
- &:hover strong {
- text-decoration: none;
- }
- }
-
- .account__avatar {
- cursor: default;
- }
-
- .search {
+ flex-direction: column;
+ width: 100%;
+ overflow: hidden;
+ height: 100%;
+ overflow-y: scroll;
+
+ @media screen and (max-width: 420px) {
+ width: 90%;
+ }
+
+ h4 {
+ padding: 15px 0;
+ background: lighten($ui-base-color, 13%);
+ font-weight: 500;
+ font-size: 16px;
+ text-align: center;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .drawer__inner {
+ border-radius: 0 0 8px 8px;
+
+ &.backdrop {
+ width: calc(100% - 60px);
+ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ border-radius: 0 0 0 8px;
+ }
+ }
+
+ &__accounts {
+ background: lighten($ui-base-color, 13%);
+ overflow-y: auto;
+ max-height: 200px;
+ }
+
+ .account__display-name {
+ &:hover strong {
+ text-decoration: none;
+ }
+ }
+
+ .account__avatar {
+ cursor: default;
+ }
+
+ .search {
display: flex;
- flex-direction: row;
- margin: 10px 0;
+ flex-direction: row;
+ margin: 10px 0;
- > label {
- flex: 1 1;
- }
+ > label {
+ flex: 1 1;
+ }
- > .search__icon .fa {
- right: 102px !important;
- }
+ > .search__icon .fa {
+ right: 102px !important;
+ }
- > .button {
- width: 80px;
- margin-left: 10px;
- }
- }
+ > .button {
+ width: 80px;
+ margin-left: 10px;
+ }
+ }
}
.list-adder {
- flex-direction: column;
- width: 100%;
- overflow: hidden;
- height: 100%;
- overflow-y: scroll;
-
- @media screen and (max-width: 420px) {
- width: 90%;
- }
-
- &__account {
- background: lighten($ui-base-color, 13%);
- border-radius: 4px;
- }
-
- &__lists {
- background: lighten($ui-base-color, 13%);
- }
-
- .list {
- padding: 4px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
-
- .list__wrapper {
- display: flex;
-
- .account__relationship {
- padding: 8px 5px 0 5px;
- }
- }
-
- .list__display-name {
- flex: 1 1 auto;
- overflow: hidden;
- text-decoration: none;
- font-size: 16px;
- padding: 10px;
- }
+ flex-direction: column;
+ width: 100%;
+ overflow: hidden;
+ height: 100%;
+ overflow-y: scroll;
+
+ @media screen and (max-width: 420px) {
+ width: 90%;
+ }
+
+ &__account {
+ background: lighten($ui-base-color, 13%);
+ border-radius: 4px;
+ }
+
+ &__lists {
+ background: lighten($ui-base-color, 13%);
+ }
+
+ .list {
+ padding: 4px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ }
+
+ .list__wrapper {
+ display: flex;
+
+ .account__relationship {
+ padding: 8px 5px 0 5px;
+ }
+ }
+
+ .list__display-name {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-decoration: none;
+ font-size: 16px;
+ padding: 10px;
+ }
}
.new-list-form,
.edit-list-form {
- &__btn {
- margin-left: 6px;
- width: 112px;
- }
+ &__btn {
+ margin-left: 6px;
+ width: 112px;
+ }
- &__input {
- height: 36px;
- }
+ &__input {
+ height: 36px;
+ }
}
.focal-point-modal {
- max-width: 80vw;
- max-height: 80vh;
- position: relative;
+ max-width: 80vw;
+ max-height: 80vh;
+ position: relative;
}
.focal-point {
- position: relative;
- cursor: pointer;
- overflow: hidden;
-
- &.dragging {
- cursor: move;
- }
-
- img {
- max-width: 80vw;
- max-height: 80vh;
- width: auto;
- height: auto;
- margin: auto;
- }
-
- &__reticle {
- position: absolute;
- width: 100px;
- height: 100px;
- transform: translate(-50%, -50%);
- background: url('../images/reticle.png') no-repeat 0 0;
- border-radius: 50%;
- box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
- }
-
- &__overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
-}
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
-.account__header__content {
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- word-break: normal;
- word-wrap: break-word;
+ &.dragging {
+ cursor: move;
+ }
+
+ img {
+ max-width: 80vw;
+ max-height: 80vh;
+ width: auto;
+ height: auto;
+ margin: auto;
+ }
- p {
- margin-bottom: 20px;
+ &__reticle {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ transform: translate(-50%, -50%);
+ background: url('../images/reticle.png') no-repeat 0 0;
+ border-radius: 50%;
+ box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
+ }
+
+ &__overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+}
- &:last-child {
- margin-bottom: 0;
- }
- }
+.account__header__content {
+ color: $darker-text-color;
+ font-size: 14px;
+ font-weight: 400;
+ overflow: hidden;
+ word-break: normal;
+ word-wrap: break-word;
+
+ p {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
- a {
- color: inherit;
- text-decoration: underline;
+ a {
+ color: inherit;
+ text-decoration: underline;
- &:hover {
- text-decoration: none;
- }
- }
+ &:hover {
+ text-decoration: none;
+ }
+ }
}
.trends {
- &__header {
- color: $dark-text-color;
- background: lighten($ui-base-color, 2%);
- border-bottom: 1px solid darken($ui-base-color, 4%);
- font-weight: 500;
- padding: 15px;
- font-size: 16px;
- cursor: default;
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
-
- &__item {
- display: flex;
- align-items: center;
- padding: 15px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
-
- &:last-child {
- border-bottom: 0;
- }
-
- &__name {
- flex: 1 1 auto;
- color: $dark-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 13px;
-
- strong {
- font-weight: bold;
- }
-
- a {
- color: $darker-text-color;
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- &:hover,
- &:focus,
- &:active {
- span {
- text-decoration: underline;
- }
- }
- }
- }
-
- &__current {
- flex: 0 0 auto;
- width: 100px;
- font-size: 24px;
- line-height: 36px;
- font-weight: 500;
- text-align: center;
- color: $secondary-text-color;
- }
-
- &__sparkline {
- flex: 0 0 auto;
- width: 50px;
-
- path {
- stroke: lighten($highlight-text-color, 6%) !important;
- }
- }
- }
+ &__header {
+ color: $dark-text-color;
+ background: lighten($ui-base-color, 2%);
+ border-bottom: 1px solid darken($ui-base-color, 4%);
+ font-weight: 500;
+ padding: 15px;
+ font-size: 16px;
+ cursor: default;
+
+ .fa {
+ display: inline-block;
+ margin-right: 5px;
+ }
+ }
+
+ &__item {
+ display: flex;
+ align-items: center;
+ padding: 15px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &__name {
+ flex: 1 1 auto;
+ color: $dark-text-color;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 13px;
+
+ strong {
+ font-weight: bold;
+ }
+
+ a {
+ color: $darker-text-color;
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:hover,
+ &:focus,
+ &:active {
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+
+ &__current {
+ flex: 0 0 auto;
+ width: 100px;
+ font-size: 24px;
+ line-height: 36px;
+ font-weight: 500;
+ text-align: center;
+ color: $secondary-text-color;
+ }
+
+ &__sparkline {
+ flex: 0 0 auto;
+ width: 50px;
+
+ path {
+ stroke: lighten($highlight-text-color, 6%) !important;
+ }
+ }
+ }
}
.layout-toggle {
- display: flex;
- padding: 5px;
-
- button {
- box-sizing: border-box;
- flex: 0 0 50%;
- background: transparent;
- padding: 5px;
- border: 0;
- position: relative;
-
- &:hover,
- &:focus,
- &:active {
- svg path:first-child {
- fill: lighten($ui-base-color, 16%);
- }
- }
- }
-
- svg {
- width: 100%;
- height: auto;
-
- path:first-child {
- fill: lighten($ui-base-color, 12%);
- }
-
- path:last-child {
- fill: darken($ui-base-color, 14%);
- }
- }
-
- &__active {
- color: $ui-highlight-color;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: lighten($ui-base-color, 12%);
- border-radius: 50%;
- padding: 0.35rem;
- }
+ display: flex;
+ padding: 5px;
+
+ button {
+ box-sizing: border-box;
+ flex: 0 0 50%;
+ background: transparent;
+ padding: 5px;
+ border: 0;
+ position: relative;
+
+ &:hover,
+ &:focus,
+ &:active {
+ svg path:first-child {
+ fill: lighten($ui-base-color, 16%);
+ }
+ }
+ }
+
+ svg {
+ width: 100%;
+ height: auto;
+
+ path:first-child {
+ fill: lighten($ui-base-color, 12%);
+ }
+
+ path:last-child {
+ fill: darken($ui-base-color, 14%);
+ }
+ }
+
+ &__active {
+ color: $ui-highlight-color;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: lighten($ui-base-color, 12%);
+ border-radius: 50%;
+ padding: 0.35rem;
+ }
}
.wtf-panel {
@@ -4654,563 +4654,563 @@ noscript {
flex-direction: column;
height: auto;
box-sizing: border-box;
- background: $gab-background-container;
+ background: $gab-background-container;
- &:not(:last-of-type) {
- margin-bottom: 10px;
- }
+ &:not(:last-of-type) {
+ margin-bottom: 10px;
+ }
.wtf-panel-header {
- display: flex;
- align-items: baseline;
- margin-bottom: 10px;
- padding: 15px 15px 0 15px;
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 10px;
+ padding: 15px 15px 0 15px;
- &__icon {
- margin-right: 10px;
- }
+ &__icon {
+ margin-right: 10px;
+ }
- &__label {
- flex: 1 1;
- color: $primary-text-color;
- font-size: 16px;
- font-weight: bold;
- line-height: 19px;
- }
+ &__label {
+ flex: 1 1;
+ color: $primary-text-color;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 19px;
+ }
}
&__content {
- width: 100%;
- padding-top: 8px;
+ width: 100%;
+ padding-top: 8px;
}
&__list {
- padding: 0 5px;
+ padding: 0 5px;
}
- &__subtitle {
- display: block;
- padding: 0 15px;
- color: $secondary-text-color;
- }
+ &__subtitle {
+ display: block;
+ padding: 0 15px;
+ color: $secondary-text-color;
+ }
- &__form {
- display: block;
- padding: 15px;
+ &__form {
+ display: block;
+ padding: 15px;
- &.button {
- width: 100%;
- }
- }
+ &.button {
+ width: 100%;
+ }
+ }
.wtf-panel-list-item {
- display: block;
- padding-bottom: 10px;
-
- &:not(:first-of-type) {
- margin-top: 12px;
- }
-
- &:not(:last-of-type) {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
-
- &__content {
- display: flex;
- flex-direction: row;
- min-height: 46px;
- margin-left: 58px;
- }
-
- &__account-block {
- display: flex;
- position: relative;
- align-items: baseline;
- padding-right: 10px;
-
- &__avatar {
- height: 46px;
- width: 46px;
- background-color: red;
- left: -58px;
- position: absolute;
- }
-
- &__name {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- margin-top: 6px;
-
- &__name {
- color: $primary-text-color;
- font-size: 14px;
- font-weight: bold;
- line-height: 16px;
- margin-bottom: 2px;
- max-height: 32px; //2 lines of text
- overflow: hidden;
- }
-
- &__username {
- color: $lighter-text-color;
- font-size: 12px;
- line-height: 14px;
- }
- }
- }
-
- &__follow-block {
- margin-left: auto;
- padding-top: 6px;
-
- &__button {
- display: flex;
- }
-
- &__icon {
- color: $primary-text-color;
- }
- }
+ display: block;
+ padding-bottom: 10px;
+
+ &:not(:first-of-type) {
+ margin-top: 12px;
+ }
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: row;
+ min-height: 46px;
+ margin-left: 58px;
+ }
+
+ &__account-block {
+ display: flex;
+ position: relative;
+ align-items: baseline;
+ padding-right: 10px;
+
+ &__avatar {
+ height: 46px;
+ width: 46px;
+ background-color: red;
+ left: -58px;
+ position: absolute;
+ }
+
+ &__name {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ margin-top: 6px;
+
+ &__name {
+ color: $primary-text-color;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 16px;
+ margin-bottom: 2px;
+ max-height: 32px; //2 lines of text
+ overflow: hidden;
+ }
+
+ &__username {
+ color: $lighter-text-color;
+ font-size: 12px;
+ line-height: 14px;
+ }
+ }
+ }
+
+ &__follow-block {
+ margin-left: auto;
+ padding-top: 6px;
+
+ &__button {
+ display: flex;
+ }
+
+ &__icon {
+ color: $primary-text-color;
+ }
+ }
}
}
.verified-icon {
- display: inline-block;
- margin: 0 4px 0 1px;
- vertical-align: top;
- position: relative;
- width: 15px;
- height: 15px;
-
- &:before {
- display: block;
- content: "";
- position: absolute;
- background-color: #00A3ED;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- border-radius: 50%;
- }
-
- &:after {
- display: block;
- position: absolute;
- content: '\f00c';
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- color: #fff;
- font-size: 0.6em;
- line-height: 15px;
- width: 15px;
- height: 15px;
- text-align: center;
- }
+ display: inline-block;
+ margin: 0 4px 0 1px;
+ vertical-align: top;
+ position: relative;
+ width: 15px;
+ height: 15px;
+
+ &:before {
+ display: block;
+ content: "";
+ position: absolute;
+ background-color: #00A3ED;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border-radius: 50%;
+ }
+
+ &:after {
+ display: block;
+ position: absolute;
+ content: '\f00c';
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ color: #fff;
+ font-size: 0.6em;
+ line-height: 15px;
+ width: 15px;
+ height: 15px;
+ text-align: center;
+ }
}
.compose-modal {
- padding: 8px 0 0;
- overflow: hidden;
- background-color: $classic-base-color;
- border-radius: 6px;
- flex-direction: column;
- width: 600px;
- margin: 10px 0;
-
- &__header {
- display: block;
- position: relative;
- border-bottom: 1px solid lighten($classic-base-color, 8%);
- border-radius: 6px 6px 0 0;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__title {
- display: block;
- width: 80%;
- margin: 0 auto;
- font-size: 18px;
- font-weight: bold;
- line-height: 24px;
- color: $gab-background-base-light;
- text-align: center;
- }
- }
-
- &__close {
- position: absolute;
- right: 10px;
- top: 10px;
- }
-
- &__content {
- display: flex;
- flex-direction: row;
- flex: 1;
- padding: 10px;
- overflow-y: hidden;
-
- &--scroll {
- display: block;
- overflow-y: auto;
- }
-
- .timeline-compose-block {
- background: transparent !important;
- width: 100%;
- padding: 10px 5px;
- margin-bottom: 0;
-
- .compose-form {
- max-height: 100%;
- max-width: 100%;
- display: flex;
- flex-direction: column;
- padding: 0 !important;
-
- .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
- max-height: 160px !important;
- }
-
- .compose-form__autosuggest-wrapper:before {
- content: none !important;
- }
- }
- }
- }
-
- @media screen and (max-width:895px) {
- margin: 0;
- border-radius: 0;
- height: 100vh;
- width: 100vw;
- }
+ padding: 8px 0 0;
+ overflow: hidden;
+ background-color: $classic-base-color;
+ border-radius: 6px;
+ flex-direction: column;
+ width: 600px;
+ margin: 10px 0;
+
+ &__header {
+ display: block;
+ position: relative;
+ border-bottom: 1px solid lighten($classic-base-color, 8%);
+ border-radius: 6px 6px 0 0;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__title {
+ display: block;
+ width: 80%;
+ margin: 0 auto;
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 24px;
+ color: $gab-background-base-light;
+ text-align: center;
+ }
+ }
+
+ &__close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ padding: 10px;
+ overflow-y: hidden;
+
+ &--scroll {
+ display: block;
+ overflow-y: auto;
+ }
+
+ .timeline-compose-block {
+ background: transparent !important;
+ width: 100%;
+ padding: 10px 5px;
+ margin-bottom: 0;
+
+ .compose-form {
+ max-height: 100%;
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 !important;
+
+ .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
+ max-height: 160px !important;
+ }
+
+ .compose-form__autosuggest-wrapper:before {
+ content: none !important;
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width:895px) {
+ margin: 0;
+ border-radius: 0;
+ height: 100vh;
+ width: 100vw;
+ }
}
.account-timeline {
- &__header {
- display: block;
- width: 100%;
- }
+ &__header {
+ display: block;
+ width: 100%;
+ }
}
.profile-info-panel {
- display: block;
- position: relative;
-
- &__content {
- display: flex;
- flex-direction: column;
- flex: 1 1;
-
- @media (min-width:895px) {
- padding-top: 60px;
- }
- }
-
- .profile-info-panel-content {
- display: flex;
-
- &__badges {
- display: flex;
- margin: 5px 0;
- flex-direction: row;
- flex-wrap: wrap;
-
- &__join-date {
- display: block;
- margin-top: 5px;
-
- .fa {
- margin-right: 8px;
- }
-
- span {
- color: $primary-text-color;
- font-size: 15px;
- line-height: 1.25;
- }
- }
- }
-
- &__name {
- display: block;
-
- .account-role {
- vertical-align: top;
- }
-
- .emojione {
- width: 22px;
- height: 22px;
- }
-
- // Hide "verified" emoji to avoid confusion
- .emojione[alt*="verified"] {
- display: none;
- }
-
- h1 {
- span:first-of-type {
- font-size: 20px !important;
- line-height: 1.25;
- color: #ffffff;
- font-weight: 600 !important;
- max-width: 260px;
- }
-
- small {
- display: block;
- font-size: 16px;
- line-height: 1.5;
- color: $secondary-text-color;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-
- &__bio {
- display: block;
- flex: 1 1;
- color: $primary-text-color;
- margin: 15px 0;
- font-size: 15px;
- line-height: 1.25;
-
- a {
- color: lighten($ui-highlight-color, 8%);
- }
- }
-
- &__fields {
- display: flex;
- flex-direction: column;
- border-top: 1px solid lighten($ui-base-color, 12%);
- padding: 10px 0;
- margin: 5px 0;
-
- @media screen and (max-width:895px) {
- border-bottom: 1px solid lighten($ui-base-color, 12%);
- }
-
- a {
- color: lighten($ui-highlight-color, 8%);
- }
-
- dl:first-child .verified {
- border-radius: 0 4px 0 0;
- }
-
- .verified a {
- color: $valid-value-color;
- }
-
- &__item {
- display: block;
- padding: 2px 0;
- margin: 2px 0;
- flex: 1 1;
-
- * {
- font-size: 15px;
- line-height: 24px;
- }
-
- dt {
- min-width: 26px;
- }
-
- dd {
- padding-left: 4px;
- }
- }
- }
- }
+ display: block;
+ position: relative;
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1;
+
+ @media (min-width:895px) {
+ padding-top: 60px;
+ }
+ }
+
+ .profile-info-panel-content {
+ display: flex;
+
+ &__badges {
+ display: flex;
+ margin: 5px 0;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ &__join-date {
+ display: block;
+ margin-top: 5px;
+
+ .fa {
+ margin-right: 8px;
+ }
+
+ span {
+ color: $primary-text-color;
+ font-size: 15px;
+ line-height: 1.25;
+ }
+ }
+ }
+
+ &__name {
+ display: block;
+
+ .account-role {
+ vertical-align: top;
+ }
+
+ .emojione {
+ width: 22px;
+ height: 22px;
+ }
+
+ // Hide "verified" emoji to avoid confusion
+ .emojione[alt*="verified"] {
+ display: none;
+ }
+
+ h1 {
+ span:first-of-type {
+ font-size: 20px !important;
+ line-height: 1.25;
+ color: #ffffff;
+ font-weight: 600 !important;
+ max-width: 260px;
+ }
+
+ small {
+ display: block;
+ font-size: 16px;
+ line-height: 1.5;
+ color: $secondary-text-color;
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ &__bio {
+ display: block;
+ flex: 1 1;
+ color: $primary-text-color;
+ margin: 15px 0;
+ font-size: 15px;
+ line-height: 1.25;
+
+ a {
+ color: lighten($ui-highlight-color, 8%);
+ }
+ }
+
+ &__fields {
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid lighten($ui-base-color, 12%);
+ padding: 10px 0;
+ margin: 5px 0;
+
+ @media screen and (max-width:895px) {
+ border-bottom: 1px solid lighten($ui-base-color, 12%);
+ }
+
+ a {
+ color: lighten($ui-highlight-color, 8%);
+ }
+
+ dl:first-child .verified {
+ border-radius: 0 4px 0 0;
+ }
+
+ .verified a {
+ color: $valid-value-color;
+ }
+
+ &__item {
+ display: block;
+ padding: 2px 0;
+ margin: 2px 0;
+ flex: 1 1;
+
+ * {
+ font-size: 15px;
+ line-height: 24px;
+ }
+
+ dt {
+ min-width: 26px;
+ }
+
+ dd {
+ padding-left: 4px;
+ }
+ }
+ }
+ }
}
.unauthorized-modal {
- width: 440px !important;
+ width: 440px !important;
- &__content {
- display: flex;
+ &__content {
+ display: flex;
width: 100%;
height: 150px;
justify-content: center;
align-items: center;
- flex-direction: column;
- }
-
- .unauthorized-modal-content {
- &__text {
- display: block;
- margin-bottom: 18px;
- color: #fff;
- font-size: 14px;
- }
-
- &__button {
- width: 200px;
- }
- }
-
- &__footer {
- display: flex;
- border-top: 1px solid #666;
- padding: 10px;
- justify-content: center;
- align-items: center;
-
- > span {
- font-size: 14px;
- color: $secondary-text-color;
-
- a {
- color: $gab-brand-default !important;
- }
- }
- }
-
- @media screen and (max-width:895px) {
- height: 270px !important;
+ flex-direction: column;
+ }
+
+ .unauthorized-modal-content {
+ &__text {
+ display: block;
+ margin-bottom: 18px;
+ color: #fff;
+ font-size: 14px;
+ }
+
+ &__button {
+ width: 200px;
+ }
+ }
+
+ &__footer {
+ display: flex;
+ border-top: 1px solid #666;
+ padding: 10px;
+ justify-content: center;
+ align-items: center;
+
+ > span {
+ font-size: 14px;
+ color: $secondary-text-color;
+
+ a {
+ color: $gab-brand-default !important;
+ }
+ }
+ }
+
+ @media screen and (max-width:895px) {
+ height: 270px !important;
width: 330px !important;
- }
+ }
}
.error-boundary {
- > div {
- margin: auto;
-
- span {
- display: block;
- text-align: center;
- color: $secondary-text-color;
- }
-
- a {
- display: block;
- margin: 15px auto;
- text-align: center;
- color: $gab-brand-default;
- }
- }
+ > div {
+ margin: auto;
+
+ span {
+ display: block;
+ text-align: center;
+ color: $secondary-text-color;
+ }
+
+ a {
+ display: block;
+ margin: 15px auto;
+ text-align: center;
+ color: $gab-brand-default;
+ }
+ }
}
.search-header {
- display: block;
- width: 100%;
-
- &__text-container {
- display: none;
- padding: 25px 0;
- background-color: lighten($ui-base-color, 6%);
-
- @media (min-width:895px) {
- display: block;
- }
- }
-
- &__title-text {
- color: $primary-text-color;
- font-size: 27px;
- font-weight: bold;
- line-height: 32px;
- overflow: hidden;
- padding-left: 20px;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 1200px;
- margin: 0 auto;
- }
-
- &__type-filters-tabs {
- display: flex;
- width: 100%;
- max-width: 1200px;
- margin: 0 auto;
-
- @media screen and (max-width:895px) {
- max-width: 580px;
- }
- }
-
- @media (min-width:895px) and (max-width:1190px) {
- &__title-text,
- &__type-filters-tabs {
- max-width: 900px;
- }
- }
+ display: block;
+ width: 100%;
+
+ &__text-container {
+ display: none;
+ padding: 25px 0;
+ background-color: lighten($ui-base-color, 6%);
+
+ @media (min-width:895px) {
+ display: block;
+ }
+ }
+
+ &__title-text {
+ color: $primary-text-color;
+ font-size: 27px;
+ font-weight: bold;
+ line-height: 32px;
+ overflow: hidden;
+ padding-left: 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ &__type-filters-tabs {
+ display: flex;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+
+ @media screen and (max-width:895px) {
+ max-width: 580px;
+ }
+ }
+
+ @media (min-width:895px) and (max-width:1190px) {
+ &__title-text,
+ &__type-filters-tabs {
+ max-width: 900px;
+ }
+ }
}
.timeline-queue-header {
- display: block;
- width: 100%;
- max-height: 46px;
- position: relative;
- background-color: darken($ui-base-color, 8%);
- border-bottom: 1px solid;
- border-top: 1px solid;
- border-color: darken($ui-base-color, 4%);
- transition: max-height 150ms ease;
- overflow: hidden;
-
- &.hidden {
- max-height: 0px;
- }
-
- &__btn {
- display: block;
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 46px;
- font-size: 14px;
- cursor: pointer;
- color: $secondary-text-color;
-
- span {
- height: 46px;
- }
- }
+ display: block;
+ width: 100%;
+ max-height: 46px;
+ position: relative;
+ background-color: darken($ui-base-color, 8%);
+ border-bottom: 1px solid;
+ border-top: 1px solid;
+ border-color: darken($ui-base-color, 4%);
+ transition: max-height 150ms ease;
+ overflow: hidden;
+
+ &.hidden {
+ max-height: 0px;
+ }
+
+ &__btn {
+ display: block;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ line-height: 46px;
+ font-size: 14px;
+ cursor: pointer;
+ color: $secondary-text-color;
+
+ span {
+ height: 46px;
+ }
+ }
}
.badge {
- background-color: $gab-brand-default;
- color: #fff;
- font-size: 12px;
- font-weight: normal;
- text-transform: uppercase;
- padding: 2px 6px;
- border-radius: 2px;
- margin: 0 5px 5px 0;
-
- &--pro {
- background-color: blueviolet;
- color: #fff;
- }
-
- &--investor {
- background-color: gold;
- color: #000;
- }
-
- &--donor {
- background-color: lightgreen;
+ background-color: $gab-brand-default;
+ color: #fff;
+ font-size: 12px;
+ font-weight: normal;
+ text-transform: uppercase;
+ padding: 2px 6px;
+ border-radius: 2px;
+ margin: 0 5px 5px 0;
+
+ &--pro {
+ background-color: blueviolet;
+ color: #fff;
+ }
+
+ &--investor {
+ background-color: gold;
color: #000;
- }
+ }
- &--admin {
- background-color: #000;
- color: #fff;
- }
+ &--donor {
+ background-color: lightgreen;
+ color: #000;
+ }
- &--moderator {
- background-color: #048ba8;
- color: #fff;
- }
+ &--admin {
+ background-color: #000;
+ color: #fff;
+ }
+
+ &--moderator {
+ background-color: #048ba8;
+ color: #fff;
+ }
}
diff --git a/app/styles/gabsocial/components/account-header.scss b/app/styles/gabsocial/components/account-header.scss
index 3d816b91a..96a2add0b 100644
--- a/app/styles/gabsocial/components/account-header.scss
+++ b/app/styles/gabsocial/components/account-header.scss
@@ -1,146 +1,146 @@
.account__header {
- &.inactive {
- opacity: 0.5;
- .account__header__image,
- .account__avatar {filter: grayscale(100%);}
- }
- &__info {
- position: absolute;
- top: 10px;
- left: 10px;
- }
- &__image {
- overflow: hidden;
- height: 350px;
- position: relative;
- background: darken($ui-base-color, 4%);
- @media screen and (max-width:895px) {height: 225px;}
- &--none {height: 125px;}
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- }
- }
- &__bar {
- display: block;
- min-height: 74px;
- width: 100%;
- position: relative;
- background: lighten($ui-base-color, 4%);
- @media (min-width:895px) {height: 74px;}
- }
- &__avatar {
- display: block;
- position: absolute;
- border: 5px solid lighten($ui-base-color, 4%);
- left: 0;
- top: -90px;
- border-radius: 50%;
- height: 200px;
- width: 200px;
- background-color: darken($ui-base-color, 8%);
+ &.inactive {
+ opacity: 0.5;
+ .account__header__image,
+ .account__avatar {filter: grayscale(100%);}
+ }
+ &__info {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ }
+ &__image {
+ overflow: hidden;
+ height: 350px;
+ position: relative;
+ background: darken($ui-base-color, 4%);
+ @media screen and (max-width:895px) {height: 225px;}
+ &--none {height: 125px;}
+ img {
+ object-fit: cover;
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ }
+ &__bar {
+ display: block;
+ min-height: 74px;
+ width: 100%;
+ position: relative;
+ background: lighten($ui-base-color, 4%);
+ @media (min-width:895px) {height: 74px;}
+ }
+ &__avatar {
+ display: block;
+ position: absolute;
+ border: 5px solid lighten($ui-base-color, 4%);
+ left: 0;
+ top: -90px;
+ border-radius: 50%;
+ height: 200px;
+ width: 200px;
+ background-color: darken($ui-base-color, 8%);
- // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
- .account__avatar {
- width: 200px;
- height: 200px;
- background-size: 200px 200px;
- }
- @media screen and (max-width:895px) {
- top: -45px;
- left: 10px;
- height: 90px;
- width: 90px;
- .account__avatar {
- width: 90px;
- height: 90px;
- background-size: 90px 90px;
- }
- }
+ // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
+ .account__avatar {
+ width: 200px;
+ height: 200px;
+ background-size: 200px 200px;
+ }
+ @media screen and (max-width:895px) {
+ top: -45px;
+ left: 10px;
+ height: 90px;
+ width: 90px;
+ .account__avatar {
+ width: 90px;
+ height: 90px;
+ background-size: 90px 90px;
+ }
+ }
- }
- &__extra {
- display: flex;
- flex-direction: row;
- height: 100%;
- margin: 0 auto;
- padding-left: 310px;
- width: 100%;
- max-width: 1200px;
- box-sizing: border-box;
- position: relative;
- @media (min-width:895px) and (max-width:1190px) {
- max-width: 900px;
- padding-left: 300px;
- }
- @media screen and (max-width:895px) {
- max-width: 900px;
- padding: 10px 10px 0 10px;
- flex-direction: column-reverse;
- min-height: 50px;
- }
- &__buttons {
- display: flex;
- align-items: center;
- margin-left: auto;
- .icon-button {
- border: 1px solid lighten($ui-base-color, 12%);
- border-radius: 4px;
- box-sizing: content-box;
- padding: 2px;
- }
- .button {margin-right: 10px;}
- }
- &__links {
- display: flex;
- font-size: 14px;
- color: $darker-text-color;
- @media screen and (max-width:895px) {
- justify-content: center;
- flex-wrap: wrap;
- }
- a {
- display: inline-block;
- text-decoration: none;
- padding: 16px 22px;
- text-align: center;
- @media screen and (max-width:1190px) {padding: 16px;}
- > span {
- display: block;
- &:first-of-type {
- color: $primary-text-color;
- font-size: 20px;
- font-weight: 800;
- line-height: 24px;
- @media screen and (max-width:895px) {
- font-size: 16px;
- line-height: 20px;
- }
- }
- &:last-of-type {
- color: $ui-secondary-color;
- font-size: 12px;
- line-height: 14px;
- padding-top: 2px;
- }
- }
- &:hover,
- &.active {border-bottom: 2px solid $primary-text-color;}
- &.score {border-bottom:none !important;}
- }
- }
- } // end .account__header__extra
- @media screen and (max-width:895px) {
- .account-mobile-container {
- display: block;
- background: lighten($ui-base-color, 4%);
- margin-top: 10px;
- position: relative;
- padding: 10px 10px 0px;
- &--nonuser {padding: 10px 10px 15px;}
- }
- }
+ }
+ &__extra {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ margin: 0 auto;
+ padding-left: 310px;
+ width: 100%;
+ max-width: 1200px;
+ box-sizing: border-box;
+ position: relative;
+ @media (min-width:895px) and (max-width:1190px) {
+ max-width: 900px;
+ padding-left: 300px;
+ }
+ @media screen and (max-width:895px) {
+ max-width: 900px;
+ padding: 10px 10px 0 10px;
+ flex-direction: column-reverse;
+ min-height: 50px;
+ }
+ &__buttons {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ .icon-button {
+ border: 1px solid lighten($ui-base-color, 12%);
+ border-radius: 4px;
+ box-sizing: content-box;
+ padding: 2px;
+ }
+ .button {margin-right: 10px;}
+ }
+ &__links {
+ display: flex;
+ font-size: 14px;
+ color: $darker-text-color;
+ @media screen and (max-width:895px) {
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+ a {
+ display: inline-block;
+ text-decoration: none;
+ padding: 16px 22px;
+ text-align: center;
+ @media screen and (max-width:1190px) {padding: 16px;}
+ > span {
+ display: block;
+ &:first-of-type {
+ color: $primary-text-color;
+ font-size: 20px;
+ font-weight: 800;
+ line-height: 24px;
+ @media screen and (max-width:895px) {
+ font-size: 16px;
+ line-height: 20px;
+ }
+ }
+ &:last-of-type {
+ color: $ui-secondary-color;
+ font-size: 12px;
+ line-height: 14px;
+ padding-top: 2px;
+ }
+ }
+ &:hover,
+ &.active {border-bottom: 2px solid $primary-text-color;}
+ &.score {border-bottom:none !important;}
+ }
+ }
+ } // end .account__header__extra
+ @media screen and (max-width:895px) {
+ .account-mobile-container {
+ display: block;
+ background: lighten($ui-base-color, 4%);
+ margin-top: 10px;
+ position: relative;
+ padding: 10px 10px 0px;
+ &--nonuser {padding: 10px 10px 15px;}
+ }
+ }
} // end .account__header
\ No newline at end of file
diff --git a/app/styles/gabsocial/components/compose-form.scss b/app/styles/gabsocial/components/compose-form.scss
index a3daa8738..ef6ac305d 100644
--- a/app/styles/gabsocial/components/compose-form.scss
+++ b/app/styles/gabsocial/components/compose-form.scss
@@ -1,289 +1,289 @@
.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: $primary-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;
- flex-wrap: wrap;
- &.contains-media {
- padding: 5px;
- border-top: 1px solid darken($simple-background-color, 8%);
- }
- }
- .compose-form__upload {
- flex: 1 1 0;
- min-width: 40%;
- margin: 5px;
+ 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: $primary-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;
+ flex-wrap: wrap;
+ &.contains-media {
+ padding: 5px;
+ border-top: 1px solid darken($simple-background-color, 8%);
+ }
+ }
+ .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;
- }
- }
+ &__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
diff --git a/app/styles/gabsocial/components/dropdown-menu.scss b/app/styles/gabsocial/components/dropdown-menu.scss
index c8e82f334..01a6340df 100644
--- a/app/styles/gabsocial/components/dropdown-menu.scss
+++ b/app/styles/gabsocial/components/dropdown-menu.scss
@@ -1,77 +1,77 @@
.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: white;
- background: $gab-brand-default !important;
- }
- }
- &__separator {
- display: block;
- margin: 10px !important;
- height: 1px;
- background: $gab-background-base;
- }
+ 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: white;
+ background: $gab-brand-default !important;
+ }
+ }
+ &__separator {
+ display: block;
+ margin: 10px !important;
+ height: 1px;
+ background: $gab-background-base;
+ }
}
// end .dropdown-menu
@@ -82,67 +82,67 @@
.dropdown {
- display: inline-block;
+ display: inline-block;
}
.dropdown__content {
- display: none;
- position: absolute;
+ 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;
- }
- }
+ 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;
+ vertical-align: middle;
}
diff --git a/app/styles/gabsocial/components/group-detail.scss b/app/styles/gabsocial/components/group-detail.scss
index 9a59e90f8..0732da007 100644
--- a/app/styles/gabsocial/components/group-detail.scss
+++ b/app/styles/gabsocial/components/group-detail.scss
@@ -23,8 +23,8 @@
.group__tabs {
.group__tabs__tab {
display: inline-block;
- text-decoration: none;
- padding: 16px 22px;
+ text-decoration: none;
+ padding: 16px 22px;
text-align: center;
color: $primary-text-color;
diff --git a/app/styles/gabsocial/components/group-form.scss b/app/styles/gabsocial/components/group-form.scss
index 2df5b1212..846c340a7 100644
--- a/app/styles/gabsocial/components/group-form.scss
+++ b/app/styles/gabsocial/components/group-form.scss
@@ -1,52 +1,52 @@
.group-form {
- padding: 20px;
- @include gab-container-standards();
- &,
- div {
- box-sizing: border-box;
- float: left;
- width: 100%;
- }
- input[type=text],
- textarea {
- &.standard {
- width: 100%;
- margin: 0 0 10px;
- }
- }
- textarea {
- float: left;
- height: 88px;
- }
- .group-form__file-label {
- 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);
- 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;;
- }
- }
- .group-form__file {
- width: 1px;
- height: 1px;
- overflow: hidden;
- opacity: 0;
- position: absolute;
- pointer-events: none;
- }
- button {float: right;}
+ padding: 20px;
+ @include gab-container-standards();
+ &,
+ div {
+ box-sizing: border-box;
+ float: left;
+ width: 100%;
+ }
+ input[type=text],
+ textarea {
+ &.standard {
+ width: 100%;
+ margin: 0 0 10px;
+ }
+ }
+ textarea {
+ float: left;
+ height: 88px;
+ }
+ .group-form__file-label {
+ 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);
+ 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;;
+ }
+ }
+ .group-form__file {
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ opacity: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+ button {float: right;}
}
\ No newline at end of file
diff --git a/app/styles/gabsocial/components/inputs.scss b/app/styles/gabsocial/components/inputs.scss
index 01ad84292..2713efb94 100644
--- a/app/styles/gabsocial/components/inputs.scss
+++ b/app/styles/gabsocial/components/inputs.scss
@@ -1,17 +1,17 @@
input[type='text'],
textarea {
- &.standard {
- box-sizing: border-box;
- padding: 7px 10px;
- border: 1px solid;
- border-radius: 4px;
- @include font-size(16);
- @include line-height(18);
- color: $gab-brand-default;
- border-color: $gab-placeholder-accent;
- background: $gab-background-container;
- @include input-placeholder($gab-placeholder-accent);
- &:focus {outline: none;}
- }
+ &.standard {
+ box-sizing: border-box;
+ padding: 7px 10px;
+ border: 1px solid;
+ border-radius: 4px;
+ @include font-size(16);
+ @include line-height(18);
+ color: $gab-brand-default;
+ border-color: $gab-placeholder-accent;
+ background: $gab-background-container;
+ @include input-placeholder($gab-placeholder-accent);
+ &:focus {outline: none;}
+ }
}
textarea.standard {resize: vertical;}
diff --git a/app/styles/gabsocial/components/modal.scss b/app/styles/gabsocial/components/modal.scss
index 50183c12d..e9370fb65 100644
--- a/app/styles/gabsocial/components/modal.scss
+++ b/app/styles/gabsocial/components/modal.scss
@@ -1,307 +1,307 @@
.modal-root {
- position: relative;
- transition: opacity 0.3s linear;
- will-change: opacity;
- z-index: 9999;
+ 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.9);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba($base-overlay-background, 0.9);
}
.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;
+ 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;
+ pointer-events: auto;
+ display: flex;
+ z-index: 9999;
+ max-height: 100%;
+ overflow-y: hidden;
}
.video-modal {
- max-width: 100vw;
- max-height: 100vh;
- position: relative;
+ 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;
- }
- }
+ 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;
+ 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;
- }
+ 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;
+ &.media-modal__navigation--hidden {
+ opacity: 0;
- * {
- pointer-events: none;
- }
- }
+ * {
+ 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;
+ 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;
+ left: 0;
}
.media-modal__nav--right {
- right: 0;
+ right: 0;
}
.media-modal__pagination {
- width: 100%;
- text-align: center;
- position: absolute;
- left: 0;
- bottom: 20px;
- pointer-events: none;
+ 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;
- }
- }
+ 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;
+ 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;
+ 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;
+ background-color: $highlight-text-color;
}
.media-modal__close {
- position: absolute;
- right: 8px;
- top: 8px;
- z-index: 100;
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ z-index: 100;
}
.onboarding-modal,
.error-modal,
.embed-modal {
- background: $ui-secondary-color;
- color: $inverted-text-color;
- border-radius: 8px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
+ background: $ui-secondary-color;
+ color: $inverted-text-color;
+ border-radius: 8px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
}
.embed-modal {
- max-width: 420px;
+ max-width: 420px;
}
.error-modal__body {
- height: 80vh;
- width: 80vw;
- max-width: 520px;
- max-height: 420px;
- position: relative;
-
- & > div {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding: 25px;
- display: none;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- display: flex;
- opacity: 0;
- user-select: text;
- }
+ height: 80vh;
+ width: 80vw;
+ max-width: 520px;
+ max-height: 420px;
+ position: relative;
+
+ & > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 25px;
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ opacity: 0;
+ user-select: text;
+ }
}
.error-modal__body {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
}
.onboarding-modal__paginator,
.error-modal__footer {
- flex: 0 0 auto;
- background: darken($ui-secondary-color, 8%);
- display: flex;
- padding: 25px;
-
- & > div {
- min-width: 33px;
- }
-
- .onboarding-modal__nav,
- .error-modal__nav {
- color: $lighter-text-color;
- border: 0;
- font-size: 14px;
- font-weight: 500;
- padding: 10px 25px;
- line-height: inherit;
- height: auto;
- margin: -10px;
- border-radius: 4px;
- background-color: transparent;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- background-color: darken($ui-secondary-color, 16%);
- }
-
- &.onboarding-modal__done,
- &.onboarding-modal__next {
- color: $inverted-text-color;
-
- &:hover,
- &:focus,
- &:active {
- color: lighten($inverted-text-color, 4%);
- }
- }
- }
+ flex: 0 0 auto;
+ background: darken($ui-secondary-color, 8%);
+ display: flex;
+ padding: 25px;
+
+ & > div {
+ min-width: 33px;
+ }
+
+ .onboarding-modal__nav,
+ .error-modal__nav {
+ color: $lighter-text-color;
+ border: 0;
+ font-size: 14px;
+ font-weight: 500;
+ padding: 10px 25px;
+ line-height: inherit;
+ height: auto;
+ margin: -10px;
+ border-radius: 4px;
+ background-color: transparent;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: darken($lighter-text-color, 4%);
+ background-color: darken($ui-secondary-color, 16%);
+ }
+
+ &.onboarding-modal__done,
+ &.onboarding-modal__next {
+ color: $inverted-text-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: lighten($inverted-text-color, 4%);
+ }
+ }
+ }
}
.error-modal__footer {
- justify-content: center;
+ justify-content: center;
}
.display-case {
- text-align: center;
- font-size: 15px;
- margin-bottom: 15px;
-
- &__label {
- font-weight: 500;
- color: $inverted-text-color;
- margin-bottom: 5px;
- text-transform: uppercase;
- font-size: 12px;
- }
-
- &__case {
- background: $ui-base-color;
- color: $secondary-text-color;
- font-weight: 500;
- padding: 10px;
- border-radius: 4px;
- }
+ text-align: center;
+ font-size: 15px;
+ margin-bottom: 15px;
+
+ &__label {
+ font-weight: 500;
+ color: $inverted-text-color;
+ margin-bottom: 5px;
+ text-transform: uppercase;
+ font-size: 12px;
+ }
+
+ &__case {
+ background: $ui-base-color;
+ color: $secondary-text-color;
+ font-weight: 500;
+ padding: 10px;
+ border-radius: 4px;
+ }
}
.onboard-sliders {
- display: inline-block;
- max-width: 30px;
- max-height: auto;
- margin-left: 10px;
+ display: inline-block;
+ max-width: 30px;
+ max-height: auto;
+ margin-left: 10px;
}
.boost-modal,
@@ -309,289 +309,289 @@
.report-modal,
.actions-modal,
.mute-modal {
- position: relative;
- flex-direction: column;
- overflow: hidden;
- width: 480px;
- max-width: 90vw;
- border-radius: 4px;
- border: 1px solid $gab-placeholder-accent;
- color: $gab-secondary-text;
- background: $gab-background-container;
- .status__display-name {
- display: block;
- max-width: 100%;
- padding-right: 25px;
- }
- .status__avatar {
- height: 28px;
- left: 10px;
- position: absolute;
- top: 10px;
- width: 48px;
- }
- .status__content__spoiler-link {
- color: lighten($secondary-text-color, 8%);
- }
+ position: relative;
+ flex-direction: column;
+ overflow: hidden;
+ width: 480px;
+ max-width: 90vw;
+ border-radius: 4px;
+ 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;
+ position: absolute;
+ top: 10px;
+ width: 48px;
+ }
+ .status__content__spoiler-link {
+ color: lighten($secondary-text-color, 8%);
+ }
}
.actions-modal {
- .status {
- background: $white;
- border-bottom-color: $ui-secondary-color;
- padding-top: 10px;
- padding-bottom: 10px;
- }
+ .status {
+ background: $white;
+ border-bottom-color: $ui-secondary-color;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
- .dropdown-menu__separator {
- display: block;
- margin: 10px;
- height: 1px;
- background: $gab-background-base;
- }
+ .dropdown-menu__separator {
+ display: block;
+ margin: 10px;
+ height: 1px;
+ background: $gab-background-base;
+ }
}
.boost-modal__container {
- overflow-x: scroll;
- padding: 10px;
+ overflow-x: scroll;
+ padding: 10px;
- .status {
- user-select: text;
- border-bottom: 0;
- }
+ .status {
+ user-select: text;
+ border-bottom: 0;
+ }
}
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
- display: flex;
- justify-content: space-between;
- background: $ui-secondary-color;
- padding: 10px;
- line-height: 36px;
-
- & > div {
- flex: 1 1 auto;
- text-align: right;
- color: $lighter-text-color;
- padding-right: 10px;
- }
+ display: flex;
+ justify-content: space-between;
+ background: $ui-secondary-color;
+ padding: 10px;
+ line-height: 36px;
+
+ & > div {
+ flex: 1 1 auto;
+ text-align: right;
+ color: $lighter-text-color;
+ padding-right: 10px;
+ }
- .button {
- flex: 0 0 auto;
- }
+ .button {
+ flex: 0 0 auto;
+ }
}
.boost-modal__status-header {
- font-size: 15px;
+ font-size: 15px;
}
.boost-modal__status-time {
- float: right;
- font-size: 14px;
+ float: right;
+ font-size: 14px;
}
.mute-modal {
- line-height: 24px;
+ line-height: 24px;
}
.mute-modal .react-toggle {
- vertical-align: middle;
+ vertical-align: middle;
}
.report-modal {
- width: 90vw;
- max-width: 700px;
+ width: 90vw;
+ max-width: 700px;
}
.report-modal__container {
- display: flex;
- border-top: 1px solid $ui-secondary-color;
+ display: flex;
+ border-top: 1px solid $ui-secondary-color;
- @media screen and (max-width: 480px) {
- flex-wrap: wrap;
- overflow-y: auto;
- }
+ @media screen and (max-width: 480px) {
+ flex-wrap: wrap;
+ overflow-y: auto;
+ }
}
.report-modal__statuses,
.report-modal__comment {
- box-sizing: border-box;
- width: 50%;
+ box-sizing: border-box;
+ width: 50%;
- @media screen and (max-width: 480px) {
- width: 100%;
- }
+ @media screen and (max-width: 480px) {
+ width: 100%;
+ }
}
.report-modal__statuses {
- flex: 1 1 auto;
- min-height: 20vh;
- max-height: 80vh;
- overflow-y: auto;
- overflow-x: hidden;
-
- .status__content a {
- color: $highlight-text-color;
- }
+ flex: 1 1 auto;
+ min-height: 20vh;
+ max-height: 80vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ .status__content a {
+ color: $highlight-text-color;
+ }
- .status__content,
- .status__content p {
- color: $gab-secondary-text;
- }
+ .status__content,
+ .status__content p {
+ color: $gab-secondary-text;
+ }
- @media screen and (max-width: 480px) {
- max-height: 10vh;
- }
+ @media screen and (max-width: 480px) {
+ max-height: 10vh;
+ }
}
.report-modal__comment {
- padding: 20px;
- border-right: 1px solid $ui-secondary-color;
- max-width: 320px;
-
- p {
- font-size: 14px;
- line-height: 20px;
- margin-bottom: 20px;
- }
-
- .setting-text {
- display: block;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- color: $inverted-text-color;
- background: $white;
- padding: 10px;
- font-family: inherit;
- font-size: 14px;
- resize: vertical;
- border: 0;
- outline: 0;
- border-radius: 4px;
- border: 1px solid $ui-secondary-color;
- margin-bottom: 20px;
-
- &:focus {
- border: 1px solid darken($ui-secondary-color, 8%);
- }
- }
-
- .setting-toggle {
- margin-top: 20px;
- margin-bottom: 24px;
-
- &__label {
- color: $inverted-text-color;
- font-size: 14px;
- }
- }
-
- @media screen and (max-width: 480px) {
- padding: 10px;
- max-width: 100%;
- order: 2;
-
- .setting-toggle {
- margin-bottom: 4px;
- }
- }
+ padding: 20px;
+ border-right: 1px solid $ui-secondary-color;
+ max-width: 320px;
+
+ p {
+ font-size: 14px;
+ line-height: 20px;
+ margin-bottom: 20px;
+ }
+
+ .setting-text {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ color: $inverted-text-color;
+ background: $white;
+ padding: 10px;
+ font-family: inherit;
+ font-size: 14px;
+ resize: vertical;
+ border: 0;
+ outline: 0;
+ border-radius: 4px;
+ border: 1px solid $ui-secondary-color;
+ margin-bottom: 20px;
+
+ &:focus {
+ border: 1px solid darken($ui-secondary-color, 8%);
+ }
+ }
+
+ .setting-toggle {
+ margin-top: 20px;
+ margin-bottom: 24px;
+
+ &__label {
+ color: $inverted-text-color;
+ font-size: 14px;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ padding: 10px;
+ max-width: 100%;
+ order: 2;
+
+ .setting-toggle {
+ margin-bottom: 4px;
+ }
+ }
}
.actions-modal {
- .status {
- overflow-y: auto;
- max-height: 300px;
- }
- width: calc(100% - 72px);
- margin: 35px;
- .actions-modal__item-label {font-weight: 500;}
- ul {
- overflow-y: auto;
- flex-shrink: 0;
- max-height: calc(100vh - 147px);
-
- // NOTE - not sure what this is yet, leaving alone for now until I find out.
- &.with-status {max-height: calc(80vh - 75px);}
-
- li:empty {margin: 0;}
- li:not(:empty) {
- &:first-of-type{margin: 10px 0 0;}
- &:last-of-type{margin: 0 0 10px;}
- a {
- display: flex;
- align-items: center;
- padding: 13px 10px 12px;
- @inclide font-size(14);
- color: $gab-secondary-text;
- text-decoration: none;
- &,
- button {transition: none;}
- &.active,
- &:hover,
- &:active,
- &:focus {
- &,
- button {
- background: $gab-background-base;
- color: $gab-text-highlight;
- box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
- }
- }
- button:first-child {margin-right: 10px;}
- }
- }
- }
+ .status {
+ overflow-y: auto;
+ max-height: 300px;
+ }
+ width: calc(100% - 72px);
+ margin: 35px;
+ .actions-modal__item-label {font-weight: 500;}
+ ul {
+ overflow-y: auto;
+ flex-shrink: 0;
+ max-height: calc(100vh - 147px);
+
+ // NOTE - not sure what this is yet, leaving alone for now until I find out.
+ &.with-status {max-height: calc(80vh - 75px);}
+
+ li:empty {margin: 0;}
+ li:not(:empty) {
+ &:first-of-type{margin: 10px 0 0;}
+ &:last-of-type{margin: 0 0 10px;}
+ a {
+ display: flex;
+ align-items: center;
+ padding: 13px 10px 12px;
+ @inclide font-size(14);
+ color: $gab-secondary-text;
+ text-decoration: none;
+ &,
+ button {transition: none;}
+ &.active,
+ &:hover,
+ &:active,
+ &:focus {
+ &,
+ button {
+ background: $gab-background-base;
+ color: $gab-text-highlight;
+ box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
+ }
+ }
+ button:first-child {margin-right: 10px;}
+ }
+ }
+ }
}
.confirmation-modal__action-bar,
.mute-modal__action-bar {
- .confirmation-modal__secondary-button,
- .confirmation-modal__cancel-button,
- .mute-modal__cancel-button {
- background-color: transparent;
- color: $lighter-text-color;
- font-size: 14px;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- }
- }
-
- .confirmation-modal__secondary-button {
- flex-shrink: 1;
- }
+ .confirmation-modal__secondary-button,
+ .confirmation-modal__cancel-button,
+ .mute-modal__cancel-button {
+ background-color: transparent;
+ color: $lighter-text-color;
+ font-size: 14px;
+ font-weight: 500;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: darken($lighter-text-color, 4%);
+ }
+ }
+
+ .confirmation-modal__secondary-button {
+ flex-shrink: 1;
+ }
}
.confirmation-modal__container,
.mute-modal__container,
.report-modal__target {
- padding: 30px;
- font-size: 16px;
- text-align: center;
-
- strong {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
+ padding: 30px;
+ font-size: 16px;
+ text-align: center;
+
+ strong {
+ font-weight: 500;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
}
.report-modal__target {
- padding: 20px;
+ padding: 20px;
- .media-modal__close {
- top: 19px;
- right: 15px;
- }
+ .media-modal__close {
+ top: 19px;
+ right: 15px;
+ }
}
.modal-layout {
diff --git a/app/styles/gabsocial/components/user-panel.scss b/app/styles/gabsocial/components/user-panel.scss
index 0875b97fe..0db01fe4b 100644
--- a/app/styles/gabsocial/components/user-panel.scss
+++ b/app/styles/gabsocial/components/user-panel.scss
@@ -1,111 +1,111 @@
.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%);
+ 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%);
- img {
- display: block;
- height: 100%;
- width: 100%;
- margin: 0;
- object-fit: cover;
- }
- }
+ 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;
+ &__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;
- background-size: cover;
- }
- }
+ .account__avatar {
+ display: block;
+ width: 82px;
+ height: 82px;
+ border: 6px solid $gab-background-base;
+ background-size: cover;
+ }
+ }
- &__meta {
- display: block;
- padding: 6px 20px 17px 20px;
- }
+ &__meta {
+ display: block;
+ padding: 6px 20px 17px 20px;
+ }
- &__account {
- a {
- text-decoration: none;
- color: $primary-text-color;
- }
+ &__account {
+ a {
+ text-decoration: none;
+ color: $primary-text-color;
+ }
- &__name {
- display: block;
- font-size: 20px;
- font-weight: bold;
- line-height: 24px;
- color: #fff;
- }
+ &__name {
+ display: block;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 24px;
+ color: #fff;
+ }
- &:hover & {
- &__name {
- text-decoration: underline;
- }
- }
+ &:hover & {
+ &__name {
+ text-decoration: underline;
+ }
+ }
- &__username {
- display: block;
- font-size: 14px;
- line-height: 16px;
- color: $gab-secondary-text;
- text-decoration: none !important;
- }
- }
+ &__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;
- }
+ &__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;
+ .user-panel-stats-item {
+ display: flex;
+ align-items: start;
+ justify-content: left;
+ flex-wrap: wrap;
+ flex-direction: column;
- a {
- text-decoration: none;
+ a {
+ text-decoration: none;
- color: $primary-text-color;
+ color: $primary-text-color;
- &:hover {
- opacity: 0.8;
- }
- }
+ &:hover {
+ opacity: 0.8;
+ }
+ }
- &__value {
- display: block;
- width: 100%;
- color: #fff;
- font-size: 20px;
- font-weight: 800;
- line-height: 24px;
- }
+ &__value {
+ display: block;
+ width: 100%;
+ color: #fff;
+ font-size: 20px;
+ font-weight: 800;
+ line-height: 24px;
+ }
- &__label {
- display: block;
- width: 100%;
- color: $gab-secondary-text;
- font-size: 12px;
- line-height: 14px;
- }
- }
+ &__label {
+ display: block;
+ width: 100%;
+ color: $gab-secondary-text;
+ font-size: 12px;
+ line-height: 14px;
+ }
+ }
}
diff --git a/app/styles/gabsocial/donations.scss b/app/styles/gabsocial/donations.scss
index 14401a2fc..39d8a560a 100644
--- a/app/styles/gabsocial/donations.scss
+++ b/app/styles/gabsocial/donations.scss
@@ -19,7 +19,7 @@
&--active {
background-color: $ui-highlight-color;
- color: $primary-text-color;
+ color: $primary-text-color;
}
}
}
diff --git a/app/styles/gabsocial/dyslexic.scss b/app/styles/gabsocial/dyslexic.scss
index e6954e665..08310d675 100644
--- a/app/styles/gabsocial/dyslexic.scss
+++ b/app/styles/gabsocial/dyslexic.scss
@@ -1,16 +1,16 @@
.dyslexic {
- font-family: 'OpenDyslexic' !important;
+ font-family: 'OpenDyslexic' !important;
}
body.dyslexic {
- @media screen and (max-width: $nav-breakpoint-2) {
- .column-header > button, .column-header > .btn {
- font-size: 11px;
- }
- }
+ @media screen and (max-width: $nav-breakpoint-2) {
+ .column-header > button, .column-header > .btn {
+ font-size: 11px;
+ }
+ }
- .detailed-status__meta {
- font-size: 12px;
- }
+ .detailed-status__meta {
+ font-size: 12px;
+ }
}
diff --git a/app/styles/gabsocial/scrollbars.scss b/app/styles/gabsocial/scrollbars.scss
index 9585da8ea..e07228c23 100644
--- a/app/styles/gabsocial/scrollbars.scss
+++ b/app/styles/gabsocial/scrollbars.scss
@@ -4,33 +4,33 @@
html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
::-webkit-scrollbar {
- width: 12px;
- height: 12px;
+ width: 12px;
+ height: 12px;
}
::-webkit-scrollbar-thumb {
- border: none;
- background: rgba($gab-placeholder-accent, .5);
- @if $light-theme {background: rgba($gab-background-container-light, .3);}
+ border: none;
+ 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);}
+ 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);}
+ background: $gab-placeholder-accent;
+ @if $light-theme {background: rgba($gab-background-container-light, .5);}
}
::-webkit-scrollbar-track {
- border: none;
- background: rgba($gab-background-container, .5);
- @if $light-theme {background: rgba($gab-background-base, .3);}
+ border: none;
+ 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);}
+ 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);}
+ background: $gab-background-container;
+ @if $light-theme {background: rgba($gab-background-base, .5);}
}
::-webkit-scrollbar-corner {background: transparent;}