diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 1e052f782..7fd4a23ed 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/app/soapbox/components/autosuggest_input.js
@@ -296,7 +296,6 @@ export default class AutosuggestInput extends ImmutablePureComponent {
'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
hidden: !visible,
block: visible,
- 'autosuggest-textarea__suggestions--visible': visible,
})}
>
diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 33905de4a..2bf1d6430 100644
--- a/app/styles/_mixins.scss
+++ b/app/styles/_mixins.scss
@@ -63,31 +63,3 @@
outline: 0 !important;
}
}
-
-@mixin search-popout {
- @include font-size(12);
- @include line-height(14);
- @include font-weight(normal);
- background: var(--background-color);
- border-radius: 6px;
- padding: 8px 10px 17px;
- margin: 4px 0 0;
- color: var(--primary-text-color--faint);
- box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
-
- h4 {
- @include font-size(14);
- @include line-height(16);
- @include font-weight(bold);
- color: var(--primary-text-color);
- }
-
- ul {
- margin: 6px 0;
-
- li {
- margin: 0 0 2px;
- em { color: var(--brand-color); }
- }
- }
-}
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index b9392b2c9..365cbf80c 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -19,158 +19,6 @@
}
}
}
-
- &__img {
- height: 130px;
- position: relative;
- background: var(--background-color);
-
- .still-image {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- object-fit: cover;
- }
-
- @media screen and (max-width: 600px) {
- height: 200px;
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- display: none;
- }
- }
-
- &__bar {
- position: relative;
- padding: 15px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- background: var(--background-color);
- transition: 0.2s;
-
- .avatar {
- flex: 0 0 auto;
- width: 48px;
- height: 48px;
- padding-top: 2px;
-
- .still-image {
- width: 100%;
- height: 100%;
- display: block;
- margin: 0;
- border-radius: 4px;
- background: var(--background-color);
- object-fit: cover;
- }
- }
-
- .display-name {
- margin-left: 15px;
- text-align: left;
-
- strong {
- @apply text-black dark:text-white;
- font-size: 15px;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- span {
- display: block;
- font-size: 14px;
- color: var(--primary-text-color--faint);
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- bdi,
- span.verified-icon {
- display: inline-block;
- }
- }
- }
-}
-
-.pagination {
- padding: 30px 0;
- text-align: center;
- overflow: hidden;
-
- a,
- .current,
- .newer,
- .older,
- .page,
- .gap {
- font-size: 14px;
- color: var(--primary-text-color);
- font-weight: 500;
- display: inline-block;
- padding: 6px 10px;
- text-decoration: none;
- }
-
- .current {
- background: var(--foreground-color);
- border-radius: 100px;
- color: var(--primary-text-color);
- cursor: default;
- margin: 0 10px;
- }
-
- .gap {
- cursor: default;
- }
-
- .older,
- .newer {
- text-transform: uppercase;
- color: var(--primary-text-color--faint);
- }
-
- .older {
- float: left;
- padding-left: 0;
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
-
- .newer {
- float: right;
- padding-right: 0;
-
- .fa {
- display: inline-block;
- margin-left: 5px;
- }
- }
-
- .disabled {
- cursor: default;
- color: var(--primary-text-color);
- }
-
- @media screen and (max-width: 700px) {
- padding: 30px 20px;
-
- .page {
- display: none;
- }
-
- .newer,
- .older {
- display: inline-block;
- }
- }
}
.account {
@@ -295,111 +143,6 @@ a .account__avatar {
}
}
-.account__reciprocal_follow_message {
- padding: 0 5px;
- color: var(--primary-text-color--faint);
- text-align: center;
-}
-
-.account__disclaimer {
- padding: 10px;
- border-top: 1px solid var(--brand-color--med);
- color: var(--primary-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;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
-}
-
-.account__action-bar {
- border-top: 1px solid var(--brand-color--med);
- border-bottom: 1px solid var(--brand-color--med);
- line-height: 36px;
- overflow: hidden;
- flex: 0 0 auto;
- display: flex;
-}
-
-.account__action-bar-dropdown {
- padding: 10px;
-
- .icon-button {
- vertical-align: middle;
- }
-
- .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;
-}
-
-.account__action-bar__tab {
- text-decoration: none;
- overflow: hidden;
- flex: 0 1 100%;
- border-right: 1px solid var(--brand-color--med);
- padding: 10px 0;
- border-bottom: 4px solid transparent;
-
- &.active {
- border-bottom: 4px solid var(--brand-color);
- }
-
- & > span {
- display: block;
- text-transform: uppercase;
- font-size: 11px;
- color: var(--primary-text-color--faint);
- }
-
- strong {
- display: block;
- font-size: 15px;
- font-weight: 500;
- color: var(--primary-text-color);
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-}
-
.account-authorize {
padding: 14px 10px;
@@ -415,15 +158,6 @@ a .account__avatar {
margin-right: 10px;
}
-// 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;
-}
-
.account-gallery__container {
display: flex;
flex-wrap: wrap;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index c0033a050..74da239c8 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -13,7 +13,6 @@
@import 'fonts';
@import 'reset';
@import 'basics';
-@import 'containers';
@import 'footer';
@import 'accounts';
@import 'boost';
@@ -36,16 +35,13 @@
// COMPONENTS
@import 'components/buttons';
@import 'components/inputs';
-@import 'components/tabs-bar';
@import 'components/dropdown-menu';
@import 'components/modal';
@import 'components/account-header';
-@import 'components/user-panel';
@import 'components/compose-form';
@import 'components/sidebar-menu';
@import 'components/emoji-reacts';
@import 'components/status';
-@import 'components/reply-indicator';
@import 'components/reply-mentions';
@import 'components/detailed-status';
@import 'components/list-forms';
@@ -55,23 +51,17 @@
@import 'components/columns';
@import 'components/search';
@import 'components/react-toggle';
-@import 'components/getting-started';
-@import 'components/promo-panel';
@import 'components/still-image';
-@import 'components/theme-toggle';
@import 'components/trends';
@import 'components/wtf-panel';
@import 'components/profile-media-panel';
@import 'components/profile-info-panel';
@import 'components/setting-toggle';
@import 'components/spoiler-button';
-@import 'components/media-spoiler';
-@import 'components/error-boundary';
@import 'components/video-player';
@import 'components/audio-player';
@import 'components/profile_hover_card';
@import 'components/filters';
-@import 'components/mfa_form';
@import 'components/snackbar';
@import 'components/accordion';
@import 'components/server-info';
@@ -82,9 +72,6 @@
@import 'components/federation-restrictions';
@import 'components/aliases';
@import 'components/icon';
-@import 'components/profile-stats';
-@import 'components/progress-circle';
-@import 'components/register-invite';
@import 'components/radio-button';
@import 'components/directory';
diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss
index 4a8aa94fe..3e0f8451c 100644
--- a/app/styles/autosuggest.scss
+++ b/app/styles/autosuggest.scss
@@ -1,10 +1,7 @@
-.autosuggest-textarea,
-.autosuggest-input,
-.spoiler-input {
+.autosuggest-input {
position: relative;
}
-.autosuggest-textarea__textarea,
.autosuggest-input input,
.react-datepicker__input-container input {
// display: block;
@@ -29,59 +26,6 @@
// }
}
-.autosuggest-textarea__textarea {
- min-height: 100px;
- // border-radius: 5px 5px 0 0;
- // padding-bottom: 0;
- // padding-right: 10px + 22px;
- // resize: none;
- // scrollbar-color: initial;
- // transition: 0.2s;
-
- // &::-webkit-scrollbar {
- // all: unset;
- // }
-
- // @media screen and (max-width: 600px) {
- // max-height: 100px !important; // prevent auto-resize textarea
- // resize: vertical;
- // }
-}
-
-.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: 501; /* Above TimelineQueueHeader */
- box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- background: var(--background-color);
- border-radius: 0 0 4px 4px;
- 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: var(--brand-color--med);
- }
-}
-
-.autosuggest-account,
.autosuggest-emoji {
display: flex;
flex-direction: row;
@@ -91,34 +35,9 @@
font-size: 14px;
}
-.autosuggest-account-icon,
.autosuggest-emoji img {
display: block;
margin-right: 8px;
width: 16px;
height: 16px;
}
-
-.autosuggest-account .display-name__account {
- color: var(--primary-text-color--faint);
-}
-
-.autosuggest-input__action {
- display: flex;
- align-items: center;
- padding: 10px;
- border-radius: 4px;
- font-weight: bold;
- text-decoration: none;
- color: var(--primary-text-color--faint);
-
- &:hover,
- &.selected {
- background-color: var(--brand-color--med);
- }
-
- .svg-icon {
- margin-right: 8px;
- transform: translateY(-1px);
- }
-}
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 6cd9df90f..33257bf2a 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -54,16 +54,6 @@ body {
vertical-align: middle;
margin: 20px;
- &__illustration {
- img {
- display: block;
- max-width: 470px;
- width: 100%;
- height: auto;
- margin-top: -120px;
- }
- }
-
h1 {
font-size: 20px;
line-height: 28px;
@@ -79,17 +69,6 @@ div[tabindex="-1"]:focus {
outline: 0;
}
-.visuallyhidden {
- border: 0 !important;
- clip: rect(1px, 1px, 1px, 1px) !important;
- font-size: 1px !important;
- height: 1px !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- width: 1px !important;
-}
-
::selection {
@apply bg-primary-600 text-white;
}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index ba712010b..8d1568f18 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -19,11 +19,6 @@
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
padding: 5px;
- .autosuggest-textarea__suggestions {
- top: auto;
- bottom: 100%;
- }
-
input.search__input {
border-radius: 6px;
}
@@ -307,87 +302,12 @@
}
}
-.ui--chatroom {
- padding-bottom: 0;
-
- .columns-area__panels__main .columns-area .column {
- height: calc(100vh - 100px);
- box-sizing: border-box;
- overflow: hidden;
-
- @media (max-width: 630px) {
- height: calc(100vh - 50px);
- }
- }
-
- .page {
- .chat-box {
- display: flex;
- flex-direction: column;
- overflow: hidden;
- flex: 1;
- border-radius: 0 0 10px 10px;
-
- &__actions textarea {
- padding: 10px 40px 10px 10px;
- }
- }
- }
-
- @media (max-width: 630px) {
- .columns-area__panels__main .columns-area {
- padding: 0;
- }
-
- .columns-area__panels__main {
- padding: 0;
- max-width: none;
- }
-
- .columns-area .column {
- border-radius: 0;
- }
-
- .page {
- .chat-messages {
- margin-bottom: 60px;
- }
-
- .chat-box {
- border-radius: 0;
- border: 2px solid var(--foreground-color);
- margin-bottom: var(--thumb-navigation-height);
-
- &__actions {
- width: 100%;
- padding: 0;
- position: fixed;
- bottom: 60px;
- left: 0;
- z-index: 1;
-
- textarea {
- height: 4em;
- border-radius: 0;
- }
- }
- }
- }
- }
-}
-
@media (max-width: 630px) {
.chat-panes {
display: none;
}
}
-@media (min-width: 1190px) {
- .tabs-bar .tabs-bar__link--chats {
- display: none;
- }
-}
-
.chatroom__header {
display: flex;
margin-left: auto;
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index d3580232a..a9bdeea05 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -1,316 +1,41 @@
-.account__header {
- &.inactive {
- opacity: 0.5;
+.account__header__subscribe {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ right: max(10px, env(safe-area-inset-right));
+ z-index: 1;
- .account__header__image,
- .account__avatar {
- filter: grayscale(100%);
- }
- }
+ .subscription-button {
+ color: var(--primary-text-color);
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--background-color);
+ text-transform: uppercase;
+ font-size: 13px;
+ font-weight: 500;
+ padding: 4px;
+ border-radius: 4px;
+ opacity: 0.7;
- &__info {
- position: absolute;
- top: 10px;
- left: 10px;
- left: max(10px, env(safe-area-inset-left));
- z-index: 1;
- }
-
- &__subscribe {
- position: absolute;
- top: 10px;
- right: 10px;
- right: max(10px, env(safe-area-inset-right));
- z-index: 1;
-
- .subscription-button {
- color: var(--primary-text-color);
- margin-bottom: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--background-color);
- text-transform: uppercase;
- font-size: 13px;
- font-weight: 500;
- padding: 4px;
- border-radius: 4px;
- opacity: 0.7;
-
- &:active,
- &:focus,
- &:hover {
- opacity: 1;
- }
-
- &:not(.button-active) i.fa {
- margin: 0;
- }
-
- .svg-icon {
- width: 20px;
- height: 20px;
- }
- }
- }
-
- &__image {
- overflow: hidden;
- height: 350px;
- position: relative;
- background: var(--accent-color--faint);
-
- @media screen and (max-width: 895px) {
- height: 225px;
+ &:active,
+ &:focus,
+ &:hover {
+ opacity: 1;
}
- @media screen and (max-width: 560px) {
- height: 150px;
- }
-
- &--none {
- height: 125px;
- }
-
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
+ &:not(.button-active) i.fa {
margin: 0;
}
- .still-image {
- height: 100%;
- }
-
- .still-image--play-on-hover::before {
- content: 'GIF';
- position: absolute;
- color: var(--primary-text-color);
- background: var(--foreground-color);
- top: 6px;
- left: 6px;
- padding: 2px 6px;
- border-radius: 2px;
- font-size: 11px;
- font-weight: 600;
- pointer-events: none;
- opacity: 0.9;
- transition: opacity 0.1s ease;
- line-height: 18px;
- }
- }
-
- &__bar {
- display: block;
- min-height: 74px;
- width: 100%;
- position: relative;
- background: var(--foreground-color);
-
- @media (min-width: 896px) {
- height: 74px;
- }
- }
-
- &__avatar {
- display: block;
- position: absolute;
- left: 0;
- top: -90px;
- border-radius: 50%;
- height: 200px;
- width: 200px;
- background-color: var(--foreground-color);
-
- // 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;
- }
-
- .still-image--play-on-hover::before {
- content: 'GIF';
- position: absolute;
- color: var(--primary-text-color);
- background: var(--foreground-color);
- bottom: 15%;
- left: 15%;
- padding: 1px 4px;
- border-radius: 2px;
- font-size: 8px;
- font-weight: 600;
- pointer-events: none;
- opacity: 0.9;
- transition: opacity 0.1s ease;
- line-height: 13px;
- }
-
- @media screen and (max-width: 895px) {
- top: -45px;
- left: 20px;
- left: max(20px + env(safe-area-inset-left));
- 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: 896px) and (max-width: 1190px) {
- max-width: 900px;
- padding-left: 300px;
- }
-
- @media screen and (max-width: 895px) {
- max-width: 900px;
- padding-top: 10px;
- padding-left: 10px;
- padding-left: max(10px, env(safe-area-inset-left));
- padding-right: 10px;
- padding-right: max(10px, env(safe-area-inset-right));
- flex-direction: column-reverse;
- min-height: 50px;
- }
-
- &__buttons {
- display: flex;
- align-items: center;
- margin-left: auto;
-
- .icon-button {
- border: 1px solid var(--primary-text-color--faint);
- border-radius: 999px;
- box-sizing: content-box;
- padding: 7px;
- opacity: 0.6;
-
- &:hover,
- &:focus {
- opacity: 1;
- }
-
- .svg-icon {
- width: 20px;
- height: 20px;
-
- svg {
- &.feather {
- // Feather icons are a little larger
- transform: scale(0.9);
- }
- }
- }
- }
-
- .button,
- .icon-button {
- margin-left: 10px;
- }
-
- .button-active {
- border-color: #008000;
- background: #008000;
- color: #fff;
- }
- }
-
- &__links {
- display: flex;
- font-size: 14px;
- color: var(--primary-text-color--faint);
-
- @media screen and (max-width: 895px) {
- justify-content: center;
- flex-wrap: wrap;
- display: none;
- }
-
- 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: var(--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: var(--primary-text-color--faint);
- font-size: 12px;
- line-height: 14px;
- padding-top: 2px;
- }
- }
-
- &:hover,
- &:focus,
- &.active {
- border-bottom: 2px solid var(--primary-text-color);
- }
- &.score { border-bottom: 0 !important; }
- }
- }
- } // end .account__header__extra
-
- @media screen and (max-width: 895px) {
- .account-mobile-container {
- display: block;
- margin-top: 10px;
- position: relative;
- padding: 10px 10px 0;
- &--nonuser { padding: 10px 10px 15px; }
- }
-
- .account-mobile-container.deactivated {
- margin-top: 50px;
+ .svg-icon {
+ width: 20px;
+ height: 20px;
}
}
}
-.account__header.deactivated {
- .still-image img,
- .still-image canvas {
- display: none;
- }
-
- .account__header__extra__links,
- .account__header__extra__buttons {
- display: none;
- }
-}
-
-// end .account__header
-
.account__header__content {
color: var(--primary-text-color--faint);
font-size: 14px;
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 75ab36c38..5c4d4e2fe 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -56,40 +56,6 @@
}
}
-.page--admin .slist .item-list article:nth-child(2n-1) {
- .unapproved-account,
- .logentry {
- background-color: hsla(var(--accent-color_hsl), 0.07);
- }
-}
-
-.page--admin {
- @media screen and (max-width: 895px) {
- .columns-area__panels {
- flex-direction: column;
- align-items: center;
-
- &__pane--left {
- display: block;
- width: 100%;
- max-width: 600px;
- padding: 10px 0;
- box-sizing: border-box;
-
- .columns-area__panels__pane__inner {
- width: auto;
- }
- }
- }
- }
-
- blockquote.md {
- padding: 5px 0 5px 15px;
- border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
- color: var(--primary-text-color--faint);
- }
-}
-
.admin-report {
padding: 15px;
display: flex;
diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss
index fb160cb88..3106c902a 100644
--- a/app/styles/components/aliases.scss
+++ b/app/styles/components/aliases.scss
@@ -17,27 +17,6 @@
overflow-y: unset;
}
}
-
- &_search.search {
- display: flex;
- align-items: center;
- flex-direction: row;
- border-bottom: none;
-
- .search__input {
- padding: 7px 30px 6px 10px;
- background: none;
- }
-
- > label {
- flex: 1 1;
- }
-
- > .button {
- width: 80px;
- margin-left: 10px;
- }
- }
}
.aliases-settings-panel {
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 4ef057be3..a4b4fae34 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -1,68 +1,3 @@
-.audio-error-cover {
- align-items: center;
- background: var(--background-color);
- color: var(--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;
-}
-
-.status__audio-player {
- background: var(--background-color);
- box-sizing: border-box;
- cursor: default; /* May not be needed */
- margin-top: 8px;
- overflow: hidden;
- position: relative;
-}
-
-.status__audio-player-audio {
- height: 100%;
- object-fit: cover;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- width: 100%;
- z-index: 1;
-}
-
-.status__audio-player-expand,
-.status__audio-player-mute {
- color: var(--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__audio-player-expand {
- bottom: 4px;
- z-index: 100;
-}
-
-.status__audio-player-mute {
- top: 4px;
- z-index: 5;
-}
-
-.detailed,
-.fullscreen {
- .audio-player__volume__current,
- .audio-player__volume::before {
- bottom: 27px;
- }
-
- .audio-player__volume__handle {
- bottom: 23px;
- }
-}
-
.audio-player {
overflow: hidden;
box-sizing: border-box;
@@ -132,14 +67,3 @@
border: 0;
display: block;
}
-
-.media-spoiler-audio-play-icon {
- border-radius: 100px;
- color: var(--primary-text-color--faint);
- font-size: 36px;
- left: 50%;
- padding: 5px;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
-}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 5c2c4e1ff..4d540e42a 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -1,9 +1,3 @@
-.column__wrapper {
- display: flex;
- flex: 1 1 auto;
- position: relative;
-}
-
.columns-area {
display: flex;
flex: 1 1 auto;
@@ -108,10 +102,6 @@
padding: 0;
}
- .autosuggest-textarea__textarea {
- // font-size: 16px;
- }
-
.search__input {
line-height: 18px;
font-size: 16px;
@@ -141,7 +131,6 @@
margin-top: 15px;
}
}
- .account__header__bar { padding: 5px 10px; }
.compose-form {
padding: 15px;
@@ -238,51 +227,6 @@
}
}
-.column-header__back-button {
- background: var(--brand-color--faint);
- border: 0;
- font-family: inherit;
- color: var(--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;
- }
-}
-
-.column-back-button__icon {
- display: inline-block;
- margin-right: 5px;
-}
-
-.column-back-button--slim {
- position: relative;
-}
-
-.column-back-button--slim-button {
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- padding: 15px;
- position: absolute;
- right: 0;
- top: -49px;
-
- @media screen and (max-width: $nav-breakpoint-2) {
- top: -35px;
- font-size: 14px;
- padding: 8px 15px;
- }
-}
-
.column-link {
background: var(--brand-color--med);
color: var(--primary-text-color);
@@ -352,10 +296,6 @@
background: transparent;
border-radius: 0;
box-shadow: none;
-
- .sub-navigation {
- box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.1);
- }
}
@media screen and (max-width: 580px) {
@@ -478,10 +418,6 @@
}
}
- & > .column-header__back-button {
- color: var(--highlight-text-color);
- }
-
&.active {
box-shadow: 0 1px 0 hsla(var(--highlight-text-color_hsl), 0.3);
@@ -577,37 +513,12 @@
}
}
-.column-header__setting-arrows {
- float: right;
-
- .column-header__setting-btn {
- padding: 0 10px;
-
- &:last-child {
- padding-right: 0;
- }
- }
-}
-
-.column-header__expansion {
- overflow-x: auto;
- overflow-y: hidden;
- white-space: nowrap;
-}
-
.column-header__icon {
display: inline-block;
margin-right: 5px;
font-size: 20px;
}
-.component-modal {
- @include standard-panel;
- width: 400px;
- max-width: calc(100% - 20px);
- max-height: calc(100vh - 20px);
-}
-
.column-settings {
width: 100%;
display: flex;
@@ -650,11 +561,6 @@
}
}
-.column-settings__outer {
- background: var(--brand-color--med);
- padding: 15px;
-}
-
.column-settings__section {
color: var(--primary-text-color--faint);
cursor: default;
@@ -663,86 +569,6 @@
margin-bottom: 10px;
}
-.column-settings__hashtags {
- .column-settings__row {
- margin-bottom: 15px;
- }
-
- .column-select {
- &__control {
- @include search-input;
- }
-
- &__placeholder {
- color: var(--primary-text-color);
- padding-left: 2px;
- font-size: 12px;
- }
-
- &__value-container {
- padding-left: 6px;
- }
-
- &__multi-value {
- background: var(--brand-color--med);
-
- &__remove {
- cursor: pointer;
-
- &:hover,
- &:active,
- &:focus {
- background: var(--brand-color--med);
- color: var(--primary-text-color);
- }
- }
- }
-
- &__multi-value__label,
- &__input {
- color: var(--primary-text-color--faint);
- }
-
- &__clear-indicator,
- &__dropdown-indicator {
- cursor: pointer;
- transition: none;
- color: var(--primary-text-color);
-
- &:hover,
- &:active,
- &:focus {
- color: var(--primary-text-color);
- }
- }
-
- &__indicator-separator {
- background-color: var(--brand-color--med);
- }
-
- &__menu {
- @include search-popout;
- padding: 0;
- background: var(--background-color);
- }
-
- &__menu-list {
- padding: 6px;
- }
-
- &__option {
- color: var(--primary-text-color);
- border-radius: 4px;
- font-size: 14px;
-
- &--is-focused,
- &--is-selected {
- background: var(--background-color);
- }
- }
- }
-}
-
.column-settings__row {
.text-btn {
margin-bottom: 15px;
@@ -807,10 +633,6 @@
display: flex;
align-items: center;
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-
- .sub-navigation {
- border-bottom: 0;
- }
}
.column-header {
@@ -838,14 +660,6 @@
}
}
}
-
- .column-back-button--slim {
- &-button {
- position: relative;
- top: auto;
- right: auto;
- }
- }
}
.column-title {
@@ -898,58 +712,6 @@
}
}
-.column-loading {
- background-color: var(--foreground-color);
- display: flex;
- position: relative;
- align-items: center;
- justify-content: center;
- padding: 15px;
- border-radius: 0 0 10px 10px;
-
- @media screen and (max-width: 450px) {
- border-radius: 0;
- }
-}
-
-// Make MaterialStatus flush against SubNavigation
-.sub-navigation ~,
-.sub-navigation ~ .ptr > .ptr__children > {
- // ScrollableList
- .slist .item-list > article:first-child,
- // ScrollableList placeholders
- .slist .item-list .slist__placeholder:first-child > .material-status:first-child,
- .slist.slist--flex .item-list > .material-status:first-child,
- // Thread
- .material-status:not(.material-status + .material-status) {
- // MaterialStatus
- .material-status__status {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- }
-}
-
-// Display background for loading indicator
-.column--transparent {
- .slist__append {
- @include standard-panel;
-
- @media screen and (max-width: 580px) {
- border-radius: 0;
- }
- }
-
- .sub-navigation ~ .slist .slist__append {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-}
-
-.follow_heading {
- color: var(--accent-color);
-}
-
.follow_subhead {
margin: 50px 0;
font-size: 20px;
@@ -959,10 +721,6 @@
background: var(--foreground-color);
}
-.sub-navigation + .account__section-headline {
- background: var(--foreground-color);
-}
-
// Pull to refresh
.columns-area .column {
.ptr,
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 4682d5123..ca2979098 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -53,37 +53,6 @@
}
}
- &__autosuggest-wrapper {
- position: relative;
- }
-
- .spoiler-input {
- height: 0;
- transform-origin: bottom;
- opacity: 0;
-
- &.spoiler-input--visible {
- height: 36px;
- margin-bottom: 11px;
- opacity: 1;
- }
- }
-
- .spoiler-input__input { border-radius: 4px; }
-
- &.condensed {
- .autosuggest-textarea__textarea {
- min-height: 46px;
- border-radius: 5px;
- }
-
- .compose-form__buttons-wrapper {
- height: 0;
- padding: 0;
- overflow: hidden;
- }
- }
-
&__modifiers {
color: var(--primary-text-color);
font-family: inherit;
@@ -208,75 +177,6 @@
}
} // end .compose-form .compose-form__modifiers
- &__buttons-wrapper {
- padding: 10px;
- background: var(--background-color);
- display: flex;
- justify-content: space-between;
- flex: 0 0 auto;
- border-radius: 0 0 5px 5px;
-
- .compose-form__buttons {
- display: flex;
-
- > div {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .compose-form__sensitive-button {
- display: none;
-
- &.compose-form__sensitive-button--visible {
- display: block;
- }
- }
-
- .svg-icon {
- width: 24px;
- height: 24px;
-
- svg {
- stroke-width: 1.5px;
- }
- }
-
- .privacy-dropdown__value {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
-
- .icon-button {
- box-sizing: content-box;
- padding: 0 3px;
- opacity: 0.5;
- transition: 0.2s;
-
- &.active,
- &:hover {
- opacity: 1;
- }
- }
-
- .character-counter {
- display: block;
- cursor: default;
- font-family: var(--font-sans-serif), sans-serif;
- font-size: 14px;
- font-weight: 600;
- color: var(--primary-text-color--faint);
- &.character-counter--over { color: $warning-red; }
- }
-
- .character-counter,
- .visual-character-counter {
- margin-right: 10px;
- }
- }
-
&__publish {
display: flex;
justify-content: flex-end;
@@ -296,15 +196,6 @@
}
} // end .compose-form
-// Icon tweaks
-.compose-form__spoiler-button-icon {
- transform: translateY(2px);
-}
-
-.compose-form__markdown-button-icon {
- transform: translateY(1px);
-}
-
.privacy-dropdown__dropdown {
@apply absolute bg-white dark:bg-slate-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss
index 8b924e2f8..c90d279a3 100644
--- a/app/styles/components/crypto-donate.scss
+++ b/app/styles/components/crypto-donate.scss
@@ -1,7 +1,3 @@
-.crypto-donate {
- padding-bottom: 10px;
-}
-
.crypto-address {
padding: 20px;
display: flex;
@@ -61,11 +57,6 @@
}
}
-.site-wallet {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-
.crypto-donate-modal {
background: var(--foreground-color);
border-radius: 8px;
@@ -76,41 +67,3 @@
height: 22px;
}
}
-
-.profile-info-panel-content__fields {
- .crypto-address {
- padding: 10px 0;
- }
-}
-
-.crypto-donate-panel {
- &__message {
- margin: 20px 0;
- margin-top: -12px;
- font-size: 14px;
- }
-
- .site-wallet {
- display: block;
- padding-bottom: 10px;
- }
-
- .crypto-address {
- padding: 0;
- margin: 20px 0;
-
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- &--has-more {
- .site-wallet {
- padding-bottom: 0;
- }
- }
-}
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 171375743..8cd6fd711 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -1,11 +1,3 @@
-.detailed-status__action-bar-dropdown {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
-}
-
.detailed-status {
// padding: 14px 10px;
@@ -15,8 +7,7 @@
justify-content: space-between;
align-items: flex-start;
- .status__content,
- .detailed-status__meta {
+ .status__content {
flex: 100%;
}
}
@@ -31,11 +22,6 @@
margin: -1px 0 0;
}
- .status__content__spoiler-link {
- line-height: 24px;
- margin: -1px 0 0;
- }
-
&--big {
img.emojione {
width: 56px;
@@ -50,14 +36,6 @@
}
}
-.detailed-status__meta {
- margin-top: 15px;
- color: var(--primary-text-color--faint);
- font-size: 14px;
- line-height: 18px;
- display: flex;
-}
-
.detailed-status__timestamp {
display: flex;
align-items: center;
@@ -76,63 +54,10 @@
}
}
-.detailed-status__action-bar {
- border-top: 1px solid var(--brand-color--faint);
- border-bottom: 1px solid var(--brand-color--faint);
- display: flex;
- flex-direction: row;
-}
-
-.detailed-status__link {
- color: var(--primary-text-color--faint);
- text-decoration: none;
- font-size: 13px;
- cursor: pointer;
-}
-
-.detailed-status__button {
- padding: 10px 0;
-}
-
-.status__button,
-.detailed-status__button {
- .icon-button {
- display: inline-flex;
- align-items: center;
-
- &__text {
- font-size: 14px;
- padding-left: 5px;
- }
- }
-
- .emoji-picker-expand {
- display: none;
- }
-
- &:focus-within {
- .emoji-picker-expand {
- display: inline-flex;
- width: 0;
- height: 0;
- overflow: hidden;
-
- &:focus-within {
- width: unset;
- }
- }
- }
-}
-
.detailed-status__wrapper {
position: relative;
}
-.detailed-status__application,
-.detailed-status__datetime {
- color: inherit;
-}
-
.detailed-status__display-name {
color: var(--primary-text-color--faint);
display: flex;
@@ -175,11 +100,6 @@
.status__wrapper {
@apply shadow-none p-0;
}
-
- // // Only display line if posts are below
- // &:last-child .detailed-status__action-bar {
- // border-bottom: 0;
- // }
}
.status__content-wrapper {
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index 7ae87eff7..c7976a056 100644
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@@ -1,8 +1,5 @@
.status__display-name,
-.status__relative-time,
.detailed-status__display-name,
-.detailed-status__datetime,
-.detailed-status__application,
.account__display-name {
text-decoration: none;
}
@@ -21,7 +18,6 @@
}
.status__display-name,
-.reply-indicator__display-name,
.detailed-status__display-name,
a.account__display-name {
&:hover strong {
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index e3a717fbc..4d517a8d2 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -68,70 +68,3 @@
}
}
// end .dropdown-menu
-
-// NOTE - not sure what this relates to — but it doesn't involve the navbar dropdown
-
-.dropdown {
- display: inline-block;
-}
-
-.dropdown__content {
- display: none;
- position: absolute;
-}
-
-.dropdown--active .dropdown__content {
- display: block;
- line-height: 18px;
- max-width: 311px;
- right: 0;
- text-align: left;
- z-index: 9999;
-
- & > ul {
- list-style: none;
- background: var(--background-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: var(--background-color);
- color: var(--primary-text-color);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- &:focus {
- outline: 0;
- }
-
- &:hover {
- background: var(--brand-color);
- color: var(--primary-text-color--faint);
- }
- }
-}
-
-.dropdown__icon {
- vertical-align: middle;
-}
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index ea825a895..f21bf2fb1 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -22,47 +22,11 @@
}
}
-.emoji-react--reblogs,
-.emoji-react--favourites {
- vertical-align: middle;
- display: inline-flex;
- margin-right: 10px;
-
- .svg-icon {
- margin-right: 0.2em;
- }
-}
-
-.emoji-react--reblogs {
- .svg-icon {
- color: var(--highlight-text-color);
-
- svg {
- stroke-width: 3px;
- }
- }
-}
-
-.emoji-react--favourites {
- .svg-icon {
- color: var(--accent-color);
-
- svg path {
- fill: var(--accent-color);
- }
- }
-}
-
.emoji-reacts {
display: inline-flex;
flex-direction: row-reverse;
}
-.status-interaction-bar {
- margin-right: auto;
- min-height: 20px;
-}
-
.emoji-reacts-container {
display: inline-flex;
@@ -81,13 +45,6 @@
}
}
-.emoji-react-selector-container {
- &:hover,
- &:focus {
- outline: 0;
- }
-}
-
.emoji-react-selector {
position: absolute;
display: flex;
@@ -129,49 +86,6 @@
}
}
-.status__action-bar__counter--favourite {
- position: relative;
-
- @media (max-width: 455px) {
- position: static;
- }
-}
-
-.status__action-bar,
-.detailed-status__action-bar {
- .svg-icon {
- width: 20px;
- height: 20px;
- display: block;
- overflow: visible;
- }
-
- .icon-button__emoji .emojione {
- width: 20px;
- height: 20px;
- margin: 0;
- }
-
- svg {
- stroke-width: 2px;
- }
-
- svg.icon-tabler {
- // Tabler icons are a little thicker than Feather icons
- stroke-width: 1.6px !important;
- transform: scale(1.2);
- }
-}
-
-// This icon is a little different than the others...
-.status__action-bar__counter--favourite,
-.detailed-status__button--favourite {
- .svg-icon svg.icon-tabler {
- transform: translateY(-1px) scale(1.3);
- stroke-width: 1.4px !important;
- }
-}
-
.detailed-status__wrapper .emoji-react-selector {
bottom: 40px;
right: 10px;
diff --git a/app/styles/components/error-boundary.scss b/app/styles/components/error-boundary.scss
deleted file mode 100644
index b809a1efa..000000000
--- a/app/styles/components/error-boundary.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.error-boundary {
- box-sizing: border-box;
- min-height: 100vh;
- max-width: 375px;
- text-align: center;
- padding: 10px 10px 80px;
-
- * {
- box-sizing: border-box;
- }
-
- ::selection {
- background-color: #000;
- color: #fff;
- }
-
- .sad-face {
- width: 70px;
- height: 70px;
- margin: 20px auto;
- opacity: 0.5;
- transition: 0.8s;
-
- svg {
- stroke-width: 1.5px;
- }
-
- &:hover {
- transform: rotate(180deg);
- }
- }
-
- a {
- color: var(--brand-color);
- }
-
- > div {
- margin: auto;
-
- span {
- display: block;
- text-align: center;
- color: var(--primary-text-color--faint);
- }
-
- .return-home {
- display: flex;
- margin: 15px auto;
- justify-content: center;
- align-items: center;
-
- a {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .svg-icon {
- width: 18px;
- height: 18px;
- margin-right: 5px;
- }
- }
- }
-
- p.help-text {
- text-align: left;
- font-style: italic;
- font-size: 14px;
- padding: 20px 10px 0;
- margin-top: 20px;
- opacity: 0.7;
- border-top: 1px solid;
- }
-
- &__component-stack {
- width: 100%;
- height: 200px;
- text-align: left;
- margin: 20px 0;
- padding: 10px;
- }
-}
diff --git a/app/styles/components/federation-restrictions.scss b/app/styles/components/federation-restrictions.scss
index 1b60e01cb..4bc42ff94 100644
--- a/app/styles/components/federation-restrictions.scss
+++ b/app/styles/components/federation-restrictions.scss
@@ -67,21 +67,3 @@
}
}
}
-
-.edit-federation-modal {
- background: var(--foreground-color);
- border-radius: 8px;
- padding: 20px;
-
- &__title {
- font-size: 18px;
- margin-bottom: 15px;
- font-weight: bold;
- text-align: center;
- }
-
- &__submit {
- margin-bottom: 0 !important;
- margin-top: 20px;
- }
-}
diff --git a/app/styles/components/getting-started.scss b/app/styles/components/getting-started.scss
deleted file mode 100644
index 61566e2e1..000000000
--- a/app/styles/components/getting-started.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.getting-started__wrapper,
-.getting-started,
-.flex-spacer {
- background: var(--brand-color--med);
-}
-
-.getting-started__wrapper {
- flex: 0 0 auto;
-}
-
-.flex-spacer {
- flex: 1 1 auto;
-}
-
-.getting-started {
- overflow: auto;
-
- &__footer {
- flex: 0 0 auto;
-
- ul {
- margin-bottom: 10px;
- }
-
- ul li {
- display: inline;
- }
-
- ul li::after {
- content: ' · ';
- }
-
- ul li:last-child::after {
- content: '';
- }
-
- p {
- color: hsla(var(--primary-text-color_hsl), 0.8);
- font-size: 13px;
- margin-bottom: 20px;
-
- a {
- color: hsla(var(--primary-text-color_hsl), 0.4);
- text-decoration: underline;
- }
- }
-
- a {
- text-decoration: none;
- color: hsla(var(--primary-text-color_hsl), 0.4);
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- &__trends {
- background: var(--brand-color--med);
- 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;
- }
- }
-}
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index d6a32f8c2..ffa8e8854 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -152,13 +152,6 @@
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;
-}
-
.media-gallery__gifv__label,
.media-gallery__filename__label,
.media-gallery__file-extension__label {
diff --git a/app/styles/components/media-spoiler.scss b/app/styles/components/media-spoiler.scss
deleted file mode 100644
index 94401d5d8..000000000
--- a/app/styles/components/media-spoiler.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.media-spoiler {
- background: var(--background-color);
- color: var(--primary-text-color--faint);
- border: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- border-radius: 4px;
- appearance: none;
-
- &:hover,
- &:active,
- &:focus {
- padding: 0;
- color: var(--primary-text-color);
- }
-}
-
-.media-spoiler__warning {
- display: block;
- font-size: 14px;
-}
-
-.media-spoiler__trigger {
- display: block;
- font-size: 11px;
- font-weight: 700;
-}
diff --git a/app/styles/components/mfa_form.scss b/app/styles/components/mfa_form.scss
deleted file mode 100644
index ffd221c83..000000000
--- a/app/styles/components/mfa_form.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.security-settings-panel {
- .security-settings-panel__setup-otp {
- margin-bottom: 5px;
- }
-
- .backup_codes {
- display: inline-block;
- background-color: var(--brand-color--faint);
- padding: 10px;
- border-radius: var(--border-radius-lg);
-
- .backup_code:not(:last-child) {
- margin-bottom: 5px;
- }
- }
-}
-// margin: 20px;
-
-// h1.security-settings-panel__setup-otp {
-// font-size: 20px;
-// line-height: 1.25;
-// color: var(--primary-text-color);
-// font-weight: 600;
-// }
-
-// h2.security-settings-panel__setup-otp {
-// display: block;
-// font-size: 16px;
-// line-height: 1.5;
-// color: var(--primary-text-color--faint);
-// font-weight: 400;
-// }
-
-// .security-warning {
-// color: var(--primary-text-color);
-// padding: 15px 20px;
-// font-size: 14px;
-// background-color: var(--warning-color--faint);
-// margin: 20px auto;
-// border-radius: 8px;
-// }
-
-// .security-settings-panel__setup-otp__buttons {
-// margin: 20px;
-// display: flex;
-// justify-content: space-between;
-
-// .button {
-// min-width: 182px;
-// }
-// }
-
-// div.confirm-key {
-// display: block;
-// font-size: 16px;
-// line-height: 1.5;
-// color: var(--primary-text-color--faint);
-// font-weight: 400;
-// margin: 0 0 20px 20px;
-// }
-// }
-
-// form.otp-auth {
-// .error-box {
-// width: 100%;
-// text-align: center;
-// color: $error-red;
-// }
-// }
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 50e1a506f..47f0d9b30 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -6,8 +6,7 @@
overflow-y: hidden;
}
-.video-modal,
-.audio-modal {
+.video-modal {
max-width: 100vw;
max-height: 100vh;
position: relative;
@@ -178,9 +177,7 @@
}
.onboarding-modal,
-.error-modal,
-.embed-modal,
-.login-modal {
+.error-modal {
background: var(--background-color);
color: var(--primary-text-color);
border-radius: 8px;
@@ -189,10 +186,6 @@
flex-direction: column;
}
-.embed-modal {
- max-width: 420px;
-}
-
.error-modal__body {
height: 80vh;
width: 80vw;
@@ -225,11 +218,11 @@
text-align: center;
}
-.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: var(--background-color);
display: flex;
+ justify-content: center;
padding: 25px;
& > div {
@@ -269,47 +262,7 @@
}
}
-.error-modal__footer {
- justify-content: center;
-}
-
-.display-case {
- text-align: center;
- font-size: 15px;
- margin-bottom: 15px;
-
- &__label {
- font-weight: 500;
- color: var(--primary-text-color);
- margin-bottom: 5px;
- text-transform: uppercase;
- font-size: 12px;
- }
-
- &__case {
- background: var(--brand-color--med);
- color: var(--primary-text-color--faint);
- font-weight: 500;
- padding: 10px;
- border-radius: 4px;
- }
-}
-
-.onboard-sliders {
- display: inline-block;
- max-width: 30px;
- max-height: auto;
- margin-left: 10px;
-}
-
-.boost-modal,
-.confirmation-modal,
-.report-modal,
-.actions-modal,
-.mute-modal,
-.reactions-modal,
-.reblogs-modal,
-.mentions-modal {
+.actions-modal {
position: relative;
flex-direction: column;
overflow: hidden;
@@ -326,200 +279,11 @@
padding-right: 25px;
}
- .status__avatar {
- height: 28px;
- left: 10px;
- position: absolute;
- top: 10px;
- width: 48px;
- }
-
- .status__content__spoiler-link {
- color: var(--primary-text-color);
- }
-}
-
-.actions-modal {
.dropdown-menu__separator {
@apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
}
}
-.reactions-modal,
-.reblogs-modal,
-.mentions-modal {
- height: 80vh;
- max-height: 650px;
-
- .slist {
- overflow: auto;
- }
-}
-
-.boost-modal__container {
- overflow-x: scroll;
- padding: 10px;
-
- .status {
- user-select: text;
- border-bottom: 0;
- }
-}
-
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: var(--background-color);
- padding: 10px;
-
- & > div {
- flex: 1 1 auto;
- text-align: right;
- color: var(--highlight-text-color);
- padding-right: 10px;
- }
-
- .button {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .submit__favicon {
- width: 16px;
- height: 16px;
- margin-right: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- img {
- width: 100%;
- max-height: 100%;
- }
- }
- }
-}
-
-.boost-modal__status-header {
- font-size: 15px;
-}
-
-.boost-modal__status-time {
- float: right;
- font-size: 14px;
-}
-
-.mute-modal {
- line-height: 24px;
-}
-
-.mute-modal .react-toggle {
- vertical-align: middle;
-}
-
-.report-modal {
- width: 90vw;
- max-width: 700px;
-}
-
-.report-modal__container {
- display: flex;
- border-top: 1px solid var(--background-color);
-
- @media screen and (max-width: 480px) {
- flex-wrap: wrap;
- overflow-y: auto;
- }
-}
-
-.report-modal__statuses,
-.report-modal__comment {
- box-sizing: border-box;
- width: 50%;
-
- @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: var(--highlight-text-color);
- }
-
- .status__content,
- .status__content p {
- color: var(--primary-text-color--faint);
- }
-
- @media screen and (max-width: 480px) {
- max-height: 10vh;
- }
-}
-
-.report-modal__comment {
- padding: 20px;
- border-right: 1px solid var(--background-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: var(--primary-text-color);
- background: var(--background-color);
- padding: 10px;
- font-family: inherit;
- font-size: 14px;
- resize: vertical;
- outline: 0;
- border: 1px solid var(--background-color);
- border-radius: 4px;
- margin-bottom: 20px;
-
- &:focus {
- border: 1px solid var(--background-color);
- }
- }
-
- .setting-toggle {
- margin-top: 20px;
- margin-bottom: 24px;
-
- &__label {
- color: var(--primary-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 {
@apply w-full max-h-full max-w-lg mt-auto mb-2 bg-white dark:bg-slate-800;
@@ -565,67 +329,6 @@
}
}
}
-
- &__close-button {
- width: calc(100% - 16px);
- margin: 8px;
- background: var(--accent-color);
- font-size: 15px;
- font-weight: 600;
-
- &:active,
- &:focus,
- &:hover {
- background: var(--accent-color--bright);
- }
- }
-}
-
-.confirmation-modal__action-bar,
-.mute-modal__action-bar {
- .confirmation-modal__secondary-button,
- .confirmation-modal__cancel-button,
- .mute-modal__cancel-button {
- background-color: transparent;
- color: var(--highlight-text-color);
- font-size: 14px;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- color: var(--primary-text-color--faint);
- }
- }
-
- .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;
- }
- }
- }
-
- .account {
- text-align: left;
- background-color: var(--background-color);
- border-radius: 4px;
- margin-bottom: 16px;
- }
}
.confirmation-modal__checkbox {
@@ -636,178 +339,39 @@
}
}
-.report-modal__target {
- padding: 20px;
+.compose-modal__content {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ overflow-y: hidden;
- .media-modal__close {
- top: 19px;
- right: 15px;
- height: 20px;
- width: 20px;
-
- .svg-icon {
- color: var(--primary-text-color);
- height: 20px;
- width: 20px;
- }
- }
-}
-
-.compose-modal,
-.reply-mentions-modal {
- overflow: hidden;
- background-color: var(--background-color);
- border-radius: 6px;
- flex-direction: column;
- width: 600px;
- margin: 10px 0;
-
- &__header {
- display: flex;
- position: relative;
- padding: 10px 0;
- padding-left: env(safe-area-inset-left);
- padding-right: env(safe-area-inset-right);
- border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
- align-items: center;
- justify-content: center;
-
- &__title {
- display: block;
- width: 80%;
- margin: 0 auto;
- font-size: 18px;
- font-weight: bold;
- line-height: 24px;
- color: var(--primary-text-color);
- text-align: center;
- }
- }
-
- @media screen and (max-width: 895px) {
- margin: 0;
- border-radius: 0;
- height: 100vh;
- width: 100vw;
- }
-}
-
-.compose-modal {
- &__close {
- position: absolute;
- right: 10px;
- right: max(10px, env(safe-area-inset-right));
- color: var(--primary-text-color--faint);
-
- .svg-icon {
- width: 24px;
- height: 24px;
- }
- }
-
- &__content {
- display: flex;
- flex-direction: row;
- flex: 1;
- overflow-y: hidden;
-
- &--scroll {
- display: block;
- overflow-y: auto;
- }
-
- .timeline-compose-block {
- background: transparent !important;
- width: 100%;
- padding: 0;
- 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;
- }
- }
- }
-
- .compose-form .compose-form__buttons-wrapper {
- padding: 10px 0;
- }
- }
-}
-
-.reply-mentions-modal {
- &__back {
- position: absolute;
- left: 10px;
- left: max(10px, env(safe-area-inset-right));
- color: var(--primary-text-color--faint);
-
- .svg-icon {
- width: 24px;
- height: 24px;
- }
- }
-
- &__accounts {
+ &--scroll {
display: block;
- flex-direction: row;
- flex: 1;
overflow-y: auto;
- min-height: 300px;
+ }
+
+ .timeline-compose-block {
+ background: transparent !important;
+ width: 100%;
+ padding: 0;
+ margin-bottom: 0;
+
+ .compose-form {
+ max-height: 100%;
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 !important;
+ }
}
}
-.unauthorized-modal {
- width: 440px !important;
-
- &__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: var(--primary-text-color);
- font-size: 14px;
- }
-
- &__button {
- width: 200px;
- }
- }
-
- &__footer {
- border-top: 1px solid #666;
- padding: 10px;
- font-size: 14px;
- text-align: center;
- color: var(--primary-text-color--faint);
-
- a {
- color: var(--brand-color) !important;
- }
- }
-
- @media screen and (max-width: 895px) {
- height: 270px !important;
- width: 330px !important;
- }
+.reply-mentions-modal__accounts {
+ display: block;
+ flex-direction: row;
+ flex: 1;
+ overflow-y: auto;
+ min-height: 300px;
}
.remote-interaction-modal {
@@ -864,75 +428,6 @@
position: relative;
}
-.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: 0;
- border-radius: 5px;
- padding: 10px;
- font-family: var(--font-monospace), monospace;
- background: var(--brand-color--med);
- color: var(--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: var(--brand-color--faint);
- }
-
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
-
- .embed-modal__iframe {
- width: 100%;
- max-width: 100%;
- overflow: hidden;
- border: 0;
-
- iframe {
- width: 100%;
- }
- }
- }
-}
-
-.modal-container--preloader {
- background: var(--brand-color--med);
-}
-
.column-inline-form {
padding: 7px 15px;
padding-right: 5px;
@@ -959,40 +454,3 @@
margin: 0 5px;
}
}
-
-.confirmation-modal p {
- margin-bottom: 20px;
- text-align: left;
-
- strong {
- font-weight: bold;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.confirmation-modal,
-.mute-modal {
- &__header {
- display: flex;
- align-items: center;
- column-gap: 6px;
- padding: 20px;
- padding-bottom: 0;
- font-size: 22px;
-
- .svg-icon {
- height: 24px;
- width: 24px;
- color: var(--primary-text-color);
- opacity: 0.6;
- }
- }
-
- &__container {
- padding: 20px;
- text-align: left;
- }
-}
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 8fb977700..06f338804 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -1,198 +1,4 @@
-.profile-info-panel {
+.profile-info-panel-content__deactivated {
+ color: var(--primary-text-color--faint);
display: block;
- position: relative;
-
- &__content {
- display: flex;
- flex-direction: column;
- flex: 1 1;
-
- @media (min-width: 896px) {
- padding-top: 60px;
- }
- }
-
- .profile-info-panel-content {
- display: flex;
-
- &__badges {
- display: flex;
- margin: 5px 0;
- flex-direction: row;
- flex-wrap: wrap;
- }
-
- &__join-date {
- display: flex;
- font-size: 14px;
- color: var(--primary-text-color--faint);
- align-items: center;
- line-height: normal;
- margin-top: 15px;
-
- .svg-icon {
- width: 22px;
- height: 22px;
- margin-right: 5px;
- transform: translateY(-1px);
- }
- }
-
- &__stats {
- margin: 15px 0;
-
- .profile-stat {
- font-size: 16px;
- }
- }
-
- &__name {
- display: block;
- margin-bottom: 15px;
-
- .emojione {
- width: 22px;
- height: 22px;
- }
-
- .svg-icon {
- width: 20px;
- height: 20px;
- margin-left: 3px;
- }
-
- h1 {
- span:first-of-type {
- font-size: 20px !important;
- line-height: 1.25;
- color: var(--primary-text-color);
- font-weight: 600 !important;
- max-width: 260px;
- }
-
- small {
- display: flex;
- font-size: 15px;
- line-height: 1.5;
- color: var(--primary-text-color--faint);
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-
- &__bio {
- display: block;
- flex: 1 1;
- color: var(--primary-text-color);
- margin-bottom: 15px;
- font-size: 15px;
- line-height: 1.25;
- overflow: hidden;
- text-overflow: ellipsis;
-
- a {
- color: var(--highlight-text-color);
- }
- }
-
- &__fields {
- display: flex;
- flex-direction: column;
- border-top: 1px solid var(--brand-color--med);
- padding: 10px 0;
- margin: 5px 0;
-
- a {
- color: var(--highlight-text-color);
- }
-
- 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;
-
- * {
- line-height: 24px;
- }
-
- dt {
- min-width: 26px;
- font-weight: 900;
- font-size: 14px;
- }
-
- dd {
- padding-left: 8px;
- font-size: 15px;
- }
- }
- }
-
- &__deactivated {
- display: none;
- }
- }
-
- &__meta {
- display: flex;
- flex-wrap: wrap;
- margin-top: -10px;
-
- > div {
- display: flex;
- font-size: 14px;
- color: var(--primary-text-color--faint);
- align-items: center;
- line-height: normal;
- margin-top: 10px;
- margin-right: 20px;
-
- .svg-icon {
- width: 20px;
- height: 20px;
- margin-right: 8px;
-
- svg {
- stroke: currentColor;
- }
- }
- }
- }
-}
-
-.profile-info-panel.deactivated {
- .profile-info-panel-content__name h1 small,
- .profile-info-panel-content__badges__join-date,
- .profile-info-panel-content__bio,
- .profile-info-panel-content__fields {
- display: none;
- }
-
- .profile-info-panel__name-content {
- text-transform: uppercase;
- }
-
- .profile-info-panel-content__deactivated {
- color: var(--primary-text-color--faint);
- display: block;
- }
-
- .profile-info-panel__name-content::before {
- content: '[';
- }
-
- .profile-info-panel__name-content::after {
- content: ']';
- }
}
diff --git a/app/styles/components/profile-media-panel.scss b/app/styles/components/profile-media-panel.scss
index ca13ec4ba..e9169403c 100644
--- a/app/styles/components/profile-media-panel.scss
+++ b/app/styles/components/profile-media-panel.scss
@@ -1,46 +1,4 @@
.media-panel {
- @include standard-panel-shadow;
- display: flex;
- width: 100%;
- border-radius: 10px;
- flex-direction: column;
- height: auto;
- box-sizing: border-box;
- background: var(--foreground-color);
-
- &:first-child {
- margin-top: 0;
- }
-
- &:not(:last-of-type) {
- margin-bottom: 10px;
- }
-
- .media-panel-header {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- padding: 15px 15px 0;
-
- &__icon {
- margin-right: 10px;
- font-size: 20px;
-
- &.svg-icon {
- width: 20px;
- height: 20px;
- }
- }
-
- &__label {
- flex: 1 1;
- color: var(--primary-text-color);
- font-size: 16px;
- font-weight: bold;
- line-height: 19px;
- }
- }
-
&__content {
width: 100%;
padding: 8px 0;
@@ -55,8 +13,4 @@
font-size: 14px;
color: var(--primary-text-color--faint);
}
-
- .loading-indicator {
- margin: 0 auto;
- }
}
diff --git a/app/styles/components/profile-stats.scss b/app/styles/components/profile-stats.scss
deleted file mode 100644
index cafd9f8e9..000000000
--- a/app/styles/components/profile-stats.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.profile-stats {
- display: flex;
- margin-top: 12px;
-}
-
-.profile-stat {
- display: flex;
- font-size: 14px;
- text-decoration: none;
-
- &:not(:first-of-type) {
- margin-left: 18px;
- }
-
- &__value {
- display: flex;
- margin-right: 3px;
- font-weight: 700;
- color: var(--primary-text-color);
- }
-
- &__label {
- display: flex;
- color: var(--primary-text-color--faint);
- }
-}
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index 76bbb2b97..cc2dbbc9b 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -2,111 +2,3 @@
position: relative;
font-weight: 600;
}
-
-.display-name .profile-hover-card {
- white-space: normal;
-}
-
-.profile-hover-card {
- position: absolute;
- pointer-events: none;
- opacity: 0;
- transition-property: opacity;
- transition-duration: 0.2s;
- width: 320px;
- z-index: 200;
- top: 0;
- left: 0;
-
- &--visible {
- opacity: 1;
- pointer-events: all;
- }
-
- .profile-hover-card__container {
- @include standard-panel;
- position: relative;
- overflow: hidden;
- }
-
- .profile-hover-card__action-button {
- z-index: 999;
- position: absolute;
- right: 20px;
- top: 40px;
- }
-
- .user-panel {
- box-shadow: none;
- width: auto;
-
- .user-panel-stats-item a strong {
- text-decoration: none;
- }
-
- &__header {
- height: 96px;
- }
-
- .user-panel-stats-item {
- margin-right: 10px;
-
- &__label,
- &__value {
- display: inline;
- font-size: 15px;
- }
-
- &__value {
- margin-right: 5px;
- }
- }
- }
-
- .relationship-tag {
- position: absolute;
- top: 10px;
- left: 10px;
- z-index: 1;
- }
-
- .profile-hover-card__badges {
- display: flex;
- position: absolute;
- top: 110px;
- left: 120px;
-
- .badge {
- padding: 2px 4px;
- margin-right: 5px;
- border-radius: 3px;
- font-size: 11px;
- opacity: 1;
- }
- }
-
- .profile-hover-card__bio {
- margin: 0 20px 20px;
- max-height: 4em;
-
- a {
- color: var(--highlight-text-color);
- }
-
- &::after {
- content: '';
- display: block;
- position: absolute;
- width: 100%;
- height: 20px;
- bottom: 0;
- left: 0;
- background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
- }
- }
-
- &[data-popper-reference-hidden="true"] {
- visibility: hidden;
- pointer-events: none;
- }
-}
diff --git a/app/styles/components/progress-circle.scss b/app/styles/components/progress-circle.scss
deleted file mode 100644
index ee96af008..000000000
--- a/app/styles/components/progress-circle.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.progress-circle {
- display: flex;
-
- &__circle {
- stroke: hsla(var(--primary-text-color_hsl), 0.2);
- }
-
- &__progress {
- stroke: var(--brand-color);
- }
-
- &--over {
- .progress-circle__progress {
- stroke: $warning-red;
- }
- }
-}
diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss
deleted file mode 100644
index 808436b2e..000000000
--- a/app/styles/components/promo-panel.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.promo-panel {
- margin-top: 10px;
- background-color: transparent !important;
- overflow: hidden;
-}
-
-.promo-panel-item {
- @include standard-panel-shadow;
- display: flex;
- align-items: center;
- height: 42px;
- line-height: 42px;
- color: var(--primary-text-color);
- border-bottom: 1px solid var(--brand-color--med);
- background: var(--foreground-color);
- text-decoration: none;
- font-size: 15px;
- padding: 0 20px;
-
- &:last-of-type {
- border-bottom: 0;
- }
-
- &:hover,
- &:focus {
- color: var(--primary-text-color--faint);
-
- span {
- text-decoration: underline;
- }
- }
-
- i.fa {
- font-size: 22px;
- margin-right: 10px;
- }
-
- .svg-icon {
- width: 24px;
- height: 24px;
-
- svg {
- stroke-width: 1.3px;
- }
- }
-
- > .svg-icon,
- > .icon-with-counter {
- margin-right: 12px;
- }
-}
diff --git a/app/styles/components/register-invite.scss b/app/styles/components/register-invite.scss
deleted file mode 100644
index e82218bf4..000000000
--- a/app/styles/components/register-invite.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.register-invite {
- margin: 10px 0;
-
- &__header {
- padding: 15px;
- }
-
- &__title {
- font-weight: bold;
- font-size: 25px;
- line-height: normal;
- margin-bottom: 5px;
- }
-
- &__form {
- .simple_form {
- input[type=text],
- input[type=number],
- input[type=email],
- input[type=password],
- textarea {
- background-color: var(--foreground-color);
- }
- }
- }
-}
diff --git a/app/styles/components/remote-timeline.scss b/app/styles/components/remote-timeline.scss
index 803c315e8..c59427a3f 100644
--- a/app/styles/components/remote-timeline.scss
+++ b/app/styles/components/remote-timeline.scss
@@ -1,72 +1,4 @@
-.instance-federation-panel {
- .wtf-panel__content {
- box-sizing: border-box;
- padding: 15px;
- }
-
- .instance-restrictions {
- &__message {
- margin-bottom: 15px;
-
- i.fa {
- padding-right: 10px;
- }
- }
- }
-}
-
.federation-restriction {
display: flex;
padding: 15px 0;
-
- &__icon {
- width: 16px;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- padding-right: 10px;
- }
-}
-
-.pinned-hosts-picker {
- padding: 10px 0 0 10px;
- display: inline-flex;
- flex-wrap: wrap;
- background: var(--foreground-color);
- border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-
- .pinned-host {
- margin-right: 10px;
- margin-bottom: 10px;
- }
-
- &:hover {
- .pinned-host {
- background: var(--background-color);
-
- &:hover {
- background: var(--brand-color--faint);
- }
- }
- }
-}
-
-.pinned-host {
- background: var(--background-color);
- border-radius: 999px;
- transition: 0.2s;
-
- &.active {
- background: var(--brand-color--faint);
- }
-
- a {
- display: block;
- color: var(--primary-text-color);
- text-decoration: none;
- padding: 5px 11px;
- max-width: 115px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
}
diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss
deleted file mode 100644
index f200dca31..000000000
--- a/app/styles/components/reply-indicator.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.reply-indicator {
- border-radius: 4px;
- margin-bottom: 10px;
- background: var(--brand-color--faint);
- 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;
-}
-
-.reply-indicator__cancel {
- float: right;
-
- .svg-icon {
- height: 20px;
- width: 20px;
- }
-}
-
-.reply-indicator__display-name {
- color: var(--primary-text-color);
- display: block;
- max-width: 100%;
- line-height: 24px;
- overflow: hidden;
- padding-right: 25px;
- text-decoration: none;
-
- .display-name__account {
- color: var(--primary-text-color--faint);
- }
-}
-
-.reply-indicator__display-avatar {
- float: left;
- margin-right: 5px;
-}
-
-.reply-indicator__content {
- color: var(--primary-text-color);
- font-size: 14px;
- user-select: text;
-
- a {
- color: var(--highlight-text-color);
- }
-}
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index 28d15308c..9c2ee3de7 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -55,57 +55,6 @@ input.search__input {
}
}
-.search-results__header {
- color: var(--primary-text-color);
- background: var(--accent-color--med);
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- cursor: default;
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
-}
-
-.search-results__section {
- h5 {
- background: var(--accent-color--faint);
- border-bottom: 1px solid var(--brand-color--faint);
- cursor: default;
- display: flex;
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- color: var(--primary-text-color);
-
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
-
- &:not(.has-more) .account:last-child,
- &:not(.has-more) > div:last-child .status {
- border-bottom: 0;
- }
-}
-
-.search-results__hashtag {
- display: block;
- padding: 10px;
- color: var(--primary-text-color--faint);
- text-decoration: none;
-
- &:hover,
- &:active,
- &:focus {
- color: var(--primary-text-color);
- text-decoration: underline;
- }
-}
-
.search-header {
display: block;
width: 100%;
@@ -152,19 +101,6 @@ input.search__input {
}
}
-.search-popout-container {
- width: 351px;
- @media screen and (max-width: $nav-breakpoint-2) { width: 100%; }
-}
-
-.search-popout {
- @include search-popout;
-}
-
-.search__filter-bar:last-child {
- border-bottom: none;
-}
-
.column {
.search {
padding: 10px 15px;
@@ -183,11 +119,6 @@ input.search__input {
}
}
-.search-results {
- padding: 15px;
-}
-
-.aliases_search,
.list-editor__search {
.search__icon {
position: relative;
@@ -197,7 +128,3 @@ input.search__input {
}
}
}
-
-.search .autosuggest-textarea__suggestions {
- border-radius: 4px;
-}
diff --git a/app/styles/components/setting-toggle.scss b/app/styles/components/setting-toggle.scss
index b940eb013..1acbcfffe 100644
--- a/app/styles/components/setting-toggle.scss
+++ b/app/styles/components/setting-toggle.scss
@@ -1,13 +1,3 @@
-.setting-toggle__text {
- display: flex;
- flex-direction: column;
-}
-
.setting-toggle__label {
color: var(--gray-800);
}
-
-.setting-toggle__hint {
- color: var(--gray-500);
- font-size: 12px;
-}
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 523477b6f..e1f13694e 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -1,40 +1,6 @@
.sidebar-menu {
@apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-slate-800 transition-all ease-linear -translate-x-80 z-1000;
- &__wrapper {
- opacity: 0;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 10000;
- background-color: rgba(0, 0, 0, 0.3);
- transition: opacity 0.2s linear;
- transition-delay: 0.1s;
- pointer-events: none;
- }
-
- &__content {
- position: relative;
- overflow-y: scroll;
- overflow: auto;
- height: 100%;
- width: 100%;
- }
-
- &__section {
- display: flex;
- flex-direction: column;
- padding: 4px 0;
- border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
-
- &--borderless {
- margin: 0;
- border-top: 0;
- }
- }
-
@media (max-width: 400px) {
width: 90vw;
transform: translateX(-90vw);
@@ -49,127 +15,6 @@
.sidebar-menu {
transform: translateX(0);
}
-
- .sidebar-menu__wrapper {
- opacity: 1;
- pointer-events: all;
- }
-}
-
-.sidebar-menu-header {
- display: flex;
- height: 46px;
- padding: 12px 14px;
- border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
- box-sizing: border-box;
- align-items: center;
-
- &__title {
- display: block;
- font-size: 18px;
- font-weight: 600;
- color: var(--primary-text-color);
- }
-
- &__btn {
- margin-left: auto;
- }
-}
-
-.sidebar-menu__close {
- position: absolute;
- top: 16px;
- right: 18px;
-
- .svg-icon {
- width: 32px;
- height: 32px;
-
- svg {
- stroke-width: 1px;
- }
- }
-}
-
-.sidebar-menu-profile {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 14px 18px;
- box-sizing: border-box;
-
- &__avatar {
- display: block;
- width: 56px;
- height: 56px;
- }
-
- &__name {
- display: flex;
- margin-top: 10px;
- color: var(--primary-text-color);
- text-decoration: none;
- align-items: center;
-
- .display-name__account {
- display: block;
- margin-top: 2px;
- color: var(--primary-text-color--faint);
- }
- }
-
- &__caret {
- margin-left: auto;
- padding-left: 10px;
-
- svg {
- stroke-width: 1px;
- }
- }
-}
-
-.sidebar-account {
- text-decoration: none;
-}
-
-.sidebar-menu-item {
- display: flex;
- padding: 16px 0;
- cursor: pointer;
- text-decoration: none;
- color: var(--primary-text-color--faint);
- font-size: 15px;
- font-weight: 500;
- align-items: center;
-
- &:hover {
- background-color: hsla(var(--brand-color_hsl), 0.1);
- color: var(--primary-text-color);
- }
-
- > .fa {
- width: 24px;
- font-size: 28px;
- margin-right: 15px;
- text-align: center;
- }
-
- > .svg-icon {
- width: 28px;
- height: 28px;
- margin-right: 15px;
-
- svg.icon-tabler,
- svg.feather {
- stroke-width: 1px;
- }
- }
-
- &:hover {
- &__title {
- color: var(--primary-text-color);
- }
- }
}
.sidebar-menu .wtf-panel {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 5fa2afd8f..2b302de85 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -101,53 +101,6 @@
@apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
}
-.status__content__spoiler-link {
- display: inline-block;
- border-radius: 2px;
- background: transparent;
- border: 0;
- color: var(--primary-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: var(--primary-text-color--faint);
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
-}
-
-.status__prepend-icon-wrapper {
- left: -26px;
- position: absolute;
-
- svg.feather-repeat {
- color: var(--highlight-text-color);
- }
-}
-
-.status__prepend-icon--pinned.svg-icon {
- width: 18px;
- height: 18px;
- margin-top: -1px;
-
- svg {
- stroke-width: 1.5px;
- }
-}
-
.status-link {
@apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500;
}
@@ -174,14 +127,6 @@
}
&.light {
- .status__relative-time {
- color: var(--primary-text-color--faint);
- }
-
- .status__display-name {
- color: var(--primary-text-color--faint);
- }
-
.display-name {
strong {
color: var(--primary-text-color);
@@ -198,15 +143,6 @@
a {
color: var(--highlight-text-color);
}
-
- a.status__content__spoiler-link {
- color: var(--primary-text-color);
- background: var(--brand-color);
-
- &:hover {
- background: var(--brand-color);
- }
- }
}
}
@@ -235,30 +171,6 @@
@apply rounded-none shadow-none p-4;
}
-.status__display-name {
- color: var(--primary-text-color--faint);
-}
-
-.status__info .status__display-name {
- display: block;
- max-width: 100%;
-}
-
-.status__info {
- font-size: 15px;
- z-index: 4;
-}
-
-.status__profile,
-.detailed-status__profile {
- display: block;
- max-width: 100%;
-}
-
-.status__profile {
- padding-right: 25px;
-}
-
.status-check-box {
border-bottom: 1px solid var(--background-color);
display: flex;
@@ -296,78 +208,7 @@
padding: 10px;
}
-.status__prepend {
- margin-left: 68px;
- color: var(--primary-text-color);
- padding: 8px 0;
- padding-bottom: 2px;
- font-size: 14px;
- position: relative;
-
- .status__display-name strong {
- color: var(--primary-text-color);
- }
-
- > 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: 8px;
- }
-
- &__label {
- display: inline-block;
- width: 14px;
- font-size: 12px;
- font-weight: 500;
- color: var(--brand-color);
- }
- }
-}
-
-.status__action-bar-button {
- margin-right: 18px;
-}
-
-.status__action-bar-dropdown {
- height: 23.15px;
- width: 23.15px;
-}
-
-.status__avatar {
- height: 48px;
- left: 10px;
- position: absolute;
- top: 10px;
- width: 48px;
-}
-
-.status__expand {
- width: 68px;
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- cursor: pointer;
-}
-
-.status__content,
-.reply-indicator__content {
+.status__content {
@apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative;
&:focus {
@@ -406,21 +247,6 @@
}
}
- .status__content__spoiler-link {
- @apply bg-primary-100 dark:bg-primary-900 hover:bg-primary-300 dark:hover:bg-primary-600 focus:bg-primary-200 dark:focus:bg-primary-600 text-black dark:text-white hover:no-underline;
- transition: 0.2s;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- }
-
.status__content__text {
display: none;
@@ -547,52 +373,6 @@ a.status-card {
@apply w-full rounded-l md:w-auto h-[200px] md:h-auto flex-none md:flex-auto;
}
-.status__favicon {
- width: 16px;
- height: 16px;
- float: right;
- margin-right: 4px;
-
- img {
- width: 100%;
- max-height: 100%;
- }
-}
-
-.tombstone {
- padding: 10px;
- text-align: center;
- font-size: 14px;
- border-bottom: 1px solid var(--brand-color--faint);
- color: var(--primary-text-color--faint);
-
- p {
- padding: 10px;
- background: var(--background-color);
- border-radius: 4px;
- }
-}
-
-.status__action-bar,
-.detailed-status__action-bar {
- .emoji-picker-expand {
- display: none;
- }
-
- &:focus-within {
- .emoji-picker-expand {
- display: inline-flex;
- width: 0;
- height: 0;
- overflow: hidden;
-
- &:focus-within {
- width: unset;
- }
- }
- }
-}
-
.material-status {
padding-bottom: 10px;
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
deleted file mode 100644
index 2827206d5..000000000
--- a/app/styles/components/tabs-bar.scss
+++ /dev/null
@@ -1,356 +0,0 @@
-.tabs-bar {
- display: flex;
- box-sizing: border-box;
- background: var(--brand-color);
- flex: 0 0 auto;
- height: 50px;
- width: 100%;
- position: sticky;
- top: 0;
- z-index: 1100;
- transition: transform 0.2s ease;
-
- &--collapsed {
- @media screen and (max-width: 895px) {
- margin-top: -50px;
- transform: translateY(-50px);
- }
- }
-
- &__container {
- display: flex;
- box-sizing: border-box;
- width: 100%;
- max-width: 1200px;
- margin: 0 auto;
- padding-left: 15px;
- padding-left: max(15px, env(safe-area-inset-left));
- padding-right: 15px;
- padding-right: max(15px, env(safe-area-inset-right));
-
- // NOTE - might need to adjust this based on column sizing
- @media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; }
- }
-
- &__split {
- display: flex;
- width: auto;
-
- &--left {
- margin-right: auto;
- }
-
- &--right {
- margin-left: auto;
- align-items: center;
- }
- }
-
- @media screen and (max-width: 450px) {
- // Move Profile menu to the left on mobile
- &__split--right {
- margin: 0;
- order: -1;
- width: 100%;
- }
-
- &__profile {
- margin-left: 0 !important;
- }
-
- &__unauthenticated {
- display: flex;
- justify-content: space-between;
- width: 100%;
-
- .tabs-bar__button {
- margin: 0;
- }
- }
- }
-
- &__search-container {
- display: block;
- width: 351px;
- align-self: center;
-
- @media screen and (max-width: 895px) {
- display: none;
- }
- }
-
- &__profile {
- position: relative;
- overflow: hidden;
- margin: 0 0 0 10px;
- height: 34px;
- width: 34px;
-
- .account__avatar {
- width: 34px;
- height: 34px;
- background-size: cover;
- }
-
- .compose__action-bar {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- left: -5px;
- bottom: 0;
-
- i {
- display: none;
- }
-
- @media screen and (max-width: 1190px) {
- display: none;
- }
- }
- }
-
- &__sidebar-btn {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- width: 30px;
- opacity: 0;
-
- @media (min-width: 1191px) {
- display: none;
- }
- }
-
- &__page-name {
- display: block;
- margin-left: 18px;
- line-height: 30px;
- font-weight: 600;
- font-size: 18px;
- color: #fff;
-
- @media (min-width: 896px) {
- display: none;
- }
- }
-
- &__button-compose {
- display: block;
- @media screen and (max-width: $nav-breakpoint-3) { display: none; }
- height: 34px;
- margin-left: 20px;
- border-radius: 6px;
- background-color: var(--accent-color);
- font-weight: bold;
- font-size: 16px;
- transition: 0.2s;
-
- > span {
- text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
- }
-
- &:hover {
- background-color: var(--accent-color--bright);
- }
- }
-
- &__button {
- margin-left: 12px;
- height: 34px;
- }
-
- .theme-toggle {
- margin-left: 20px;
-
- @media screen and (max-width: $nav-breakpoint-3) {
- display: none;
- }
-
- .setting-toggle {
- .react-toggle-track {
- background-color: var(--foreground-color);
- }
-
- .react-toggle--checked {
- .react-toggle-track {
- background-color: var(--accent-color);
- }
-
- &:hover:not(.react-toggle--disabled) .react-toggle-track,
- &.react-toggle--focus .react-toggle-track {
- background-color: var(--accent-color--bright);
- }
- }
- }
- }
-}
-
-.tabs-bar__link {
- display: flex;
- flex: 1 1 auto;
- color: #fff;
- text-decoration: none;
- position: relative;
- align-items: center;
- font-weight: bold;
- transition: 0.1s;
- outline: none;
- text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
-
- @media screen and (max-width: 895px) {
- width: 36px;
- margin: 4px 4px 0 0;
- justify-content: center;
- display: none;
- }
-
- > span {
- font-size: 15px;
- line-height: 50px;
- margin-left: 4px;
- display: none;
- }
-
- & + & {
- margin-left: 20px;
- }
-
- &--search {
- @media (min-width: 896px) {
- display: none;
- }
- }
-
- .svg-icon {
- width: 22px;
- height: 22px;
-
- svg.icon-tabler {
- stroke-width: 1.5px;
- }
- }
-
- &.optional {
- display: none;
- @media screen and (max-width: $nav-breakpoint-2) {
- display: flex;
- background-position: -992px 11px;
- }
- }
-
- &::before {
- content: "";
- display: block;
- background: var(--accent-color);
- position: absolute;
- transition: 0.2s;
- left: 0;
- bottom: auto;
- opacity: 0;
- height: 15px;
- border-radius: 999px;
- z-index: -1;
- width: calc(100% + 12px);
- margin-left: -6px;
-
- @media screen and (max-width: 895px) {
- height: 0;
- border-radius: 3px 3px 0 0;
- bottom: 0;
- }
- }
-
- &.active::before,
- &:hover::before,
- &:focus::before {
- height: 30px;
- opacity: 1;
-
- @media screen and (max-width: 895px) {
- height: 7px;
- width: 36px;
- margin: 0;
- }
- }
-
- &--logo {
- display: block;
- margin-right: 30px;
- border: 0;
- height: 40px;
- width: max-content;
- overflow: hidden;
- padding: 13px 0 0;
- box-sizing: border-box;
- filter: brightness(0%) grayscale(100%) invert(100%);
-
- & span {
- display: none !important;
- }
-
- img {
- height: 100%;
- }
-
- .svg-icon {
- width: 26px;
- height: 26px;
- margin: 0 auto;
-
- svg {
- fill: currentColor;
- stroke-width: 1px;
- }
- }
-
- &:hover {
- border: 0 !important;
- }
-
- /* Move logo to center on mobile */
- @media screen and (max-width: 450px) {
- margin: 0 auto;
- position: absolute;
- left: 0;
- right: 0;
- text-align: center;
- }
- }
-
- &--no-highlight,
- &--no-highlight:hover,
- &--no-highlight.active,
- &--no-highlight:active,
- &--no-highlight:focus {
- background: transparent !important;
- border-bottom-color: transparent !important;
- }
-}
-
-.tabs-bar__split--left:hover .tabs-bar__link {
- &::before {
- height: 15px;
- opacity: 0;
-
- @media screen and (max-width: 895px) {
- height: 0;
- }
- }
-
- &:hover::before {
- height: 30px;
- opacity: 1;
-
- @media screen and (max-width: 895px) {
- height: 7px;
- }
- }
-}
-
-.tabs-bar__link + .tabs-bar__profile {
- margin-left: 20px;
-}
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
deleted file mode 100644
index 112c14972..000000000
--- a/app/styles/components/theme-toggle.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.theme-toggle {
- .setting-toggle {
- &__label {
- margin-bottom: 0;
- vertical-align: middle;
- }
-
- .react-toggle {
- vertical-align: middle;
-
- &-track-check,
- &-track-x {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- width: auto;
- }
-
- &-track-check {
- left: 6px;
- }
-
- &-track-x {
- right: 5px;
- }
- }
- }
-
- .react-toggle-track {
- @apply dark:bg-slate-600;
- }
-
- .react-toggle-thumb {
- @apply dark:bg-slate-900 dark:border-slate-800;
- }
-}
diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
deleted file mode 100644
index f150d3ad6..000000000
--- a/app/styles/components/user-panel.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-.user-panel {
- @include standard-panel;
- display: flex;
- width: 265px;
- flex-direction: column;
- overflow: hidden;
-
- .user-panel__account__name {
- display: inline;
- }
-
- .verified-icon {
- opacity: 1;
- }
-
- &,
- .user-panel__account__name,
- .user-panel__account__username {
- white-space: nowrap;
- color: var(--primary-text-color--faint);
- }
-
- &__header {
- display: block;
- height: 112px;
- width: 100%;
- background: var(--brand-color--faint);
-
- .still-image {
- height: 100%;
- }
-
- img {
- display: block;
- height: 100%;
- width: 100%;
- margin: 0;
- object-fit: cover;
- }
- }
-
- &__profile {
- display: flex;
- align-items: flex-start;
- padding: 0 10px;
- margin-top: -53px;
-
- .account__avatar {
- display: block;
- width: 82px;
- height: 82px;
- border: 6px solid var(--foreground-color);
- background-size: cover;
- }
- }
-
- &__meta {
- display: block;
- padding: 6px 20px 17px;
- // opacity: 0.6;
- }
-
- &__account {
- a {
- text-decoration: none;
- color: var(--primary-text-color--faint);
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- &__name {
- display: block;
- font-size: 20px;
- font-weight: bold;
- line-height: 24px;
- color: var(--primary-text-color--faint);
- }
-
- &:hover & {
- &__name {
- text-decoration: underline;
- }
- }
-
- &__username {
- display: block;
- font-size: 14px;
- line-height: 16px;
- color: var(--primary-text-color--faint);
- text-decoration: none !important;
- }
- }
-
- &__stats-block {
- display: flex;
- justify-content: space-between;
- padding-top: 12px;
- }
-
- .user-panel-stats-item {
- display: flex;
- align-items: flex-start;
- justify-content: left;
- flex-wrap: wrap;
- flex-direction: column;
-
- a {
- text-decoration: none;
- color: var(--primary-text-color--faint);
-
- &:hover {
- opacity: 0.8;
- }
- }
-
- &__value {
- display: block;
- width: 100%;
- color: var(--primary-text-color--faint);
- font-size: 20px;
- font-weight: 800;
- line-height: 24px;
- }
-
- &__label {
- display: block;
- width: 100%;
- color: var(--primary-text-color--faint);
- font-size: 12px;
- line-height: 14px;
- }
- }
-}
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index 113e33e1f..2d536e781 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -52,92 +52,6 @@
padding: 0 5px;
}
- &__subtitle {
- display: block;
- padding: 0 15px;
- color: var(--primary-text-color--faint);
- }
-
- &__form {
- display: block;
- padding: 15px;
-
- &.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 var(--brand-color--med);
- }
-
- &__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: #f00;
- left: -58px;
- position: absolute;
- }
-
- &__name {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- margin-top: 6px;
-
- &__name {
- color: var(--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: var(--highlight-text-color);
- font-size: 12px;
- line-height: 14px;
- }
- }
- }
-
- &__follow-block {
- margin-left: auto;
- padding-top: 6px;
-
- &__button {
- display: flex;
- }
-
- &__icon {
- color: var(--primary-text-color);
- }
- }
- }
-
&__expand-btn {
@apply border-gray-300 dark:border-gray-600;
display: block;
@@ -156,17 +70,4 @@
color: var(--primary-text-color);
text-decoration: none;
}
-
- &__menu {
- margin-left: auto;
-
- > div {
- height: 18px;
- }
- }
-}
-
-.column .sub-navigation ~ .wtf-panel {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
}
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
deleted file mode 100644
index 74eebe61e..000000000
--- a/app/styles/containers.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.logo-container {
- margin: 100px auto 50px;
-
- @media screen and (max-width: 500px) {
- margin: 40px auto 0;
- }
-
- h1 {
- display: flex;
- justify-content: center;
- align-items: center;
-
- img {
- height: 42px;
- margin-right: 10px;
- }
-
- a {
- display: flex;
- justify-content: center;
- align-items: center;
- color: var(--primary-text-color);
- text-decoration: none;
- outline: 0;
- padding: 12px 16px;
- line-height: 32px;
- font-weight: 500;
- font-size: 14px;
- }
- }
-}
-
-.compose-standalone {
- .compose-form {
- width: 400px;
- margin: 0 auto;
- padding: 20px 0;
- margin-top: 40px;
- box-sizing: border-box;
-
- @media screen and (max-width: 400px) {
- width: 100%;
- margin-top: 0;
- padding: 20px;
- }
- }
-}
-
-.account-header {
- width: 400px;
- margin: 0 auto;
- display: flex;
- font-size: 13px;
- line-height: 18px;
- box-sizing: border-box;
- padding: 20px 0;
- padding-bottom: 0;
- margin-bottom: -30px;
- margin-top: 40px;
-
- @media screen and (max-width: 440px) {
- width: 100%;
- margin: 0;
- margin-bottom: 10px;
- padding: 20px;
- padding-bottom: 0;
- }
-
- .avatar {
- width: 40px;
- height: 40px;
- margin-right: 8px;
-
- img {
- width: 100%;
- height: 100%;
- display: block;
- margin: 0;
- border-radius: 4px;
- }
- }
-
- .name {
- flex: 1 1 auto;
- color: var(--primary-text-color--faint);
- width: calc(100% - 88px);
-
- .username {
- display: block;
- font-weight: 500;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
-
- .logout-link {
- display: block;
- font-size: 32px;
- line-height: 40px;
- margin-left: 8px;
- }
-}
diff --git a/app/styles/demetricator.scss b/app/styles/demetricator.scss
index 441e68ea1..8af4e8ce7 100644
--- a/app/styles/demetricator.scss
+++ b/app/styles/demetricator.scss
@@ -1,21 +1,5 @@
body.demetricator {
- .user-panel .user-panel-stats-item__value,
- .account__header__extra__links a > span:first-of-type,
- .detailed-status__link,
- .icon-with-badge__badge,
- .icon-with-counter__counter,
- .trends__item__count,
- .sidebar-menu-profile__stats,
- .profile-stat__value {
+ .icon-with-badge__badge {
display: none;
}
-
- .account__header__bar {
- min-height: 50px;
- @media (min-width: 896px) { height: 50px; }
- }
-
- .svg-icon--unread svg {
- transform: rotate(0);
- }
}
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
index 6709189cc..121e6fbc3 100644
--- a/app/styles/donations.scss
+++ b/app/styles/donations.scss
@@ -1,30 +1,3 @@
-.btngroup {
- display: flex;
- margin: 10px 0 15px;
-
- &__btn {
- background-color: #fff;
- padding: 10px 24px;
- font-size: 14px;
- border-radius: 0;
- border: 1px solid #ccc;
- margin-left: -1px;
-
- &:first-of-type {
- border-radius: 4px 0 0 4px;
- }
-
- &:last-of-type {
- border-radius: 0 4px 4px 0;
- }
-
- &--active {
- background-color: var(--brand-color);
- color: var(--primary-text-color);
- }
- }
-}
-
.sub {
border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
padding: 20px;
@@ -107,62 +80,7 @@
}
}
-.dollarfield {
- display: flex;
- align-items: center;
- overflow: hidden;
- margin: 15px 0;
-
- &__symbol {
- font-size: 40px;
- display: block;
- line-height: normal;
- margin-right: 6px;
- transform: translateY(-4px);
- }
-
- &__price {
- font-size: 60px;
- background: transparent;
- border: 0;
- margin: 0;
- color: var(--primary-text-color);
- appearance: textfield;
-
- &::-webkit-inner-spin-button,
- &::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-
- &:invalid {
- border: 0;
- box-shadow: none;
- }
- }
-}
-
-.payform {
- &__btn {
- margin: 10px 0;
- }
-}
-
body.admin {
- p.whisper {
- max-width: 375px;
- margin: 30px 0;
- font-style: italic;
- font-size: 1.4rem;
- padding-left: 20px;
- }
-
- p.btnlabel {
- margin: 8px 0;
- font-weight: bold;
- font-size: 14px;
- }
-
.actions {
margin-top: 40px;
}
@@ -192,9 +110,4 @@ body.admin {
&__reached {
color: var(--brand-color);
}
-
- .wtf-panel__content {
- box-sizing: border-box;
- padding: 15px;
- }
}
diff --git a/app/styles/dyslexic.scss b/app/styles/dyslexic.scss
index 6db2cadc2..dce8b33c1 100644
--- a/app/styles/dyslexic.scss
+++ b/app/styles/dyslexic.scss
@@ -11,8 +11,4 @@ body.dyslexic {
font-size: 11px;
}
}
-
- .detailed-status__meta {
- font-size: 12px;
- }
}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index fe03ddf01..df6888ad5 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -291,29 +291,6 @@ code {
width: auto;
}
- .check_boxes {
- .checkbox {
- label {
- font-family: inherit;
- font-size: 14px;
- color: var(--primary-text-color);
- display: inline-block;
- width: auto;
- position: relative;
- padding-top: 5px;
- padding-left: 25px;
- flex: 1 1 auto;
- }
-
- input[type=checkbox] {
- position: absolute;
- left: 0;
- top: 5px;
- margin: 0;
- }
- }
- }
-
fieldset[disabled] {
input[type=text],
input[type=number],
diff --git a/app/styles/holiday/halloween.scss b/app/styles/holiday/halloween.scss
index ecf043f68..9fcf96ae5 100644
--- a/app/styles/holiday/halloween.scss
+++ b/app/styles/holiday/halloween.scss
@@ -90,34 +90,6 @@
display: none;
}
- // Witch emblem
- .getting-started__footer::before {
- content: '';
- display: block;
- background-image: url('../images/halloween/halloween-emblem.svg');
- background-size: contain;
- background-position: left;
- background-repeat: no-repeat;
- width: 100%;
- height: 100px;
- margin-bottom: 20px;
- }
-
- // Color fixes
- // Elements directly over the BG need static colors that don't change
- // regardless of the theme-mode
- .getting-started__footer {
- color: #fff;
-
- a {
- color: hsla(0, 0%, 100%, 0.4);
- }
-
- p {
- color: hsla(0, 0%, 100%, 0.8);
- }
- }
-
.profile-info-panel {
color: #fff;
@@ -158,10 +130,6 @@
background-color: var(--brand-color);
}
}
-
- .primary-navigation__wrapper .primary-navigation hr {
- background: rgba(255, 255, 255, 0.5);
- }
}
// Animations
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index ee0f7624b..ddf39aba2 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -1,90 +1,3 @@
-.primary-navigation__wrapper {
- .primary-navigation {
- flex-direction: column;
-
- &:hover .btn.grouped:hover::before {
- height: auto;
- opacity: 0 !important;
- }
-
- > button,
- > .btn.grouped {
- justify-content: flex-start;
- font-weight: 700;
- font-size: 15px;
- margin: 0;
- padding: 10px 0;
- color: var(--gray-400);
-
- .svg-icon {
- height: 22px;
- width: 22px;
- padding: 10px;
- margin-right: 15px;
- background-color: var(--electric-blue-contrast);
- border-radius: var(--border-radius-lg);
-
- svg {
- stroke: var(--electric-blue);
- fill: var(--electric-blue-contrast);
- }
-
- svg.icon-tabler {
- stroke-width: 1.5px;
- }
-
- &--active {
- svg.icon-tabler-search,
- svg.icon-tabler-code {
- stroke-width: 2.5px;
- }
- }
- }
-
- &.active {
- color: var(--black-800);
-
- &::before {
- height: auto;
- opacity: 0;
- }
-
- .svg-icon {
- background-color: var(--electric-blue);
- }
-
- .svg-icon svg {
- stroke: #fff;
- fill: var(--electric-blue);
- }
- }
-
- &::before {
- left: 0;
- border-radius: 999px;
- }
- }
-
- &__icon {
- margin-right: 5px;
- }
-
- .icon-with-counter__counter {
- right: 0;
- }
-
- hr {
- border: 0;
- height: 1px;
- width: 100%;
- background: hsla(var(--primary-text-color_hsl), 0.12);
- max-width: 230px;
- text-align: left;
- margin: 10px 0;
- }
- }
-}
-
.thumb-navigation {
@apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 left-0 right-0 shadow-2xl w-full flex z-50;
padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
@@ -122,93 +35,5 @@
// stroke-width: 1px;
// }
// }
-
- .icon-with-counter__counter {
- right: -7px;
- top: -5px;
- }
- }
-}
-
-.sub-navigation {
- position: sticky;
- top: 50px;
- left: 0;
- right: 0;
- width: 100%;
- height: 40px;
- display: flex;
- color: var(--primary-text-color--faint);
- background: var(--foreground-color);
- border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
- border-radius: 0;
- align-items: center;
- justify-content: center;
- z-index: 999;
-
- &--scrolled {
- border-radius: 0 !important;
- }
-
- &__content {
- width: 100%;
- height: 100%;
- max-width: 1200px;
- padding: 5px 15px;
- margin: 0 auto;
- display: flex;
- justify-content: space-around;
- box-sizing: border-box;
- }
-
- &__back {
- margin-right: auto;
- padding: 0;
- background: transparent;
- border: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-text-color);
- opacity: 0.6;
- font-size: 16px;
-
- &:hover,
- &:focus {
- color: var(--primary-text-color);
- }
-
- .svg-icon {
- margin-right: 7px;
- width: 26px;
- height: 26px;
- }
- }
-
- &__message {
- position: absolute;
- padding: 0 10px;
- align-self: center;
- justify-self: center;
- font-weight: bold;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: calc(100vw - 200px);
- }
-
- &__cog {
- display: flex;
- align-items: center;
- justify-content: center;
-
- .svg-icon {
- width: 20px;
- height: 20px;
- }
- }
-
- @media (min-width: 580px) {
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
}
}
diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index b9ae99295..72a69c155 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -1,6 +1,4 @@
.placeholder-hashtag,
-.notification--placeholder,
-.status-card--placeholder,
.media-gallery--placeholder {
position: relative;
@@ -47,64 +45,6 @@
.slist {
position: relative;
-
- &__placeholder {
- position: absolute;
- width: 100%;
- max-height: 300px;
- overflow-y: hidden;
- background: var(--foreground-color);
- box-shadow: 0 10px 6px 0 rgb(0 0 0 / 10%);
-
- &::after {
- content: '';
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- z-index: 1;
- // On mobile, extend the gradient up to the ThumbNavigation height
- background-image: linear-gradient(
- 0deg,
- var(--background-color) 0%,
- var(--background-color) var(--thumb-navigation-height),
- hsla(var(--foreground-color_hsl), 0) 50%,
- hsla(var(--foreground-color_hsl), 0) 100%
- );
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-
- @media (min-width: 895px) {
- // On desktop, fade into the bottom of the page
- background-image: linear-gradient(
- 0deg,
- var(--background-color) 0%,
- hsla(var(--foreground-color_hsl), 0) 50%,
- hsla(var(--foreground-color_hsl), 0) 100%
- );
- }
- }
- }
-}
-
-.column--transparent .slist__placeholder {
- background: transparent;
- box-shadow: none;
-}
-
-.status-card--placeholder {
- pointer-events: none;
-
- .status-card__title,
- .status-card__description,
- .status-card__host {
- letter-spacing: -1px;
- color: var(--brand-color) !important;
- word-break: break-all;
- opacity: 0.1;
- }
}
.media-gallery.media-gallery--placeholder {
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 13adcd8ff..231dbf195 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -7,17 +7,6 @@
position: relative;
}
- &__chart {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- display: inline-block;
- border-radius: 4px;
- background: hsla(var(--primary-text-color_hsl), 0.1);
- &.leading { background: hsla(var(--primary-text-color_hsl), 0.15); }
- }
-
&__text {
position: relative;
display: flex;
@@ -113,46 +102,6 @@
}
}
- &__number {
- display: inline-block;
- width: 36px;
- font-weight: 700;
- padding: 0 10px;
- text-align: right;
- }
-
- &.voted &__number {
- width: 52px;
- padding-left: 8px;
- flex: 0 0 52px;
- }
-
- &__vote__mark {
- float: left;
- color: var(--highlight-text-color);
- line-height: 18px;
- }
-
- &__link {
- display: inline;
- background: transparent;
- padding: 0;
- margin: 0;
- border: 0;
- color: var(--primary-text-color);
- text-decoration: underline;
- font-size: inherit;
-
- &:hover {
- text-decoration: none;
- }
-
- &:active,
- &:focus {
- background-color: hsla(var(--primary-text-color_hsl), 0.1);
- }
- }
-
.button {
height: 36px;
padding: 0 16px;
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 31694eac0..852cf3edd 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -13,11 +13,6 @@ body.rtl {
margin-left: 5px;
}
- .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
- margin-right: 0;
- margin-left: 4px;
- }
-
.search__input {
padding-right: 10px;
padding-left: 30px;
@@ -49,81 +44,21 @@ body.rtl {
float: right;
}
- .column-header__back-button {
- padding-left: 5px;
- padding-right: 0;
- }
-
- .column-header__setting-arrows {
- float: left;
- }
-
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
}
- .status__avatar {
- left: auto;
- right: 10px;
- }
-
.status {
padding-left: 10px;
padding-right: 68px;
}
- .status__info .status__display-name {
- padding-left: 25px;
- padding-right: 0;
- }
-
- .status__prepend {
- margin-left: 0;
- margin-right: 68px;
- }
-
- .status__prepend-icon-wrapper {
- left: auto;
- right: -26px;
- }
-
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
- .column-back-button--slim-button {
- right: auto;
- left: 0;
- }
-
- .status__relative-time {
- float: left;
- }
-
- .status__action-bar {
- &__counter {
- margin-right: 0;
- margin-left: 11px;
-
- .status__action-bar-button {
- margin-right: 0;
- margin-left: 4px;
- }
- }
- }
-
- .status__action-bar-button {
- float: right;
- margin-right: 0;
- margin-left: 18px;
- }
-
- .status__action-bar-dropdown {
- float: right;
- }
-
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
@@ -144,12 +79,6 @@ body.rtl {
float: right;
}
- .detailed-status__favorites,
- .detailed-status__reblogs {
- margin-left: 0;
- margin-right: 6px;
- }
-
.fa-ul {
margin-left: 0;
margin-left: 2.14285714em;
@@ -160,22 +89,11 @@ body.rtl {
right: -2.14285714em;
}
- .simple_form .check_boxes .checkbox label {
- padding-left: 0;
- padding-right: 25px;
- }
-
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
}
- .simple_form .check_boxes .checkbox input[type="checkbox"],
- .simple_form .input.boolean input[type="checkbox"] {
- left: auto;
- right: 0;
- }
-
.simple_form .input.radio_buttons .radio {
left: auto;
right: 0;
@@ -186,11 +104,6 @@ body.rtl {
padding-left: 0;
}
- .simple_form .input-with-append .input input {
- padding-left: 142px;
- padding-right: 0;
- }
-
.simple_form .input.boolean label.checkbox {
left: auto;
right: 0;
@@ -202,17 +115,6 @@ body.rtl {
padding-right: 28px;
}
- .simple_form .label_input__append {
- right: auto;
- left: 3px;
-
- &::after {
- right: auto;
- left: 0;
- background-image: linear-gradient(to left, hsla(var(--background-color_hsl), 0), var(--background-color));
- }
- }
-
// .simple_form select {
// background: var(--background-color) url("data:image/svg+xml;utf8,
") no-repeat left 8px center / auto 16px;
// }
@@ -222,11 +124,6 @@ body.rtl {
text-align: right;
}
- .filters .filter-subset {
- margin-right: 0;
- margin-left: 45px;
- }
-
@media screen and (min-width: 631px) {
.column {
padding-left: 5px;
@@ -253,11 +150,6 @@ body.rtl {
margin-right: 0;
}
}
-
- .public-account-header__tabs {
- margin-left: 0;
- margin-right: 20px;
- }
}
.card__bar .display-name {
@@ -274,16 +166,6 @@ body.rtl {
content: "\F053";
}
- .column-back-button__icon {
- margin-right: 0;
- margin-left: 5px;
- }
-
- .column-header__setting-arrows .column-header__setting-btn:last-child {
- padding-left: 0;
- padding-right: 10px;
- }
-
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 99d1972b6..cbef05a1f 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -166,35 +166,6 @@
@media (max-width: 405px) {
padding: 0 !important;
}
-
- .spoiler-input__input,
- .autosuggest-textarea__textarea {
- // background-color: var(--background-color);
- }
-
- .autosuggest-textarea__textarea {
- // padding: 14px 32px 13px 10px !important;
- }
-
- .compose-form__autosuggest-wrapper {
- &::before {
- content: "";
- display: block;
- position: absolute;
- height: 0;
- width: 0;
- border-top: 11px solid transparent;
- border-right: 12px solid var(--background-color);
- border-bottom: 11px solid transparent;
- border-left: 11px solid transparent;
- left: -22px;
- top: 13px;
-
- @media (max-width: 405px) {
- display: none;
- }
- }
- }
}
&__avatar {
@@ -222,12 +193,6 @@
}
}
-.status__relative-time {
- color: var(--primary-text-color--faint);
- float: right;
- font-size: 14px;
-}
-
.domain {
padding: 10px;
border-bottom: 1px solid var(--brand-color--med);
@@ -264,31 +229,6 @@ article:last-child > .domain {
.status__display-name strong {
color: var(--primary-text-color);
}
-
- .status__avatar {
- opacity: 0.5;
- }
-
- a.status__content__spoiler-link {
- background: var(--brand-color--med);
- color: var(--primary-text-color);
-
- &:hover {
- background: var(--brand-color--faint);
- text-decoration: none;
- }
- }
-}
-
-.star-icon.active {
- color: $gold-star;
-}
-
-.status__relative-time,
-.detailed-status__datetime {
- &:hover {
- text-decoration: underline;
- }
}
.image-loader {
@@ -391,35 +331,23 @@ article:last-child > .domain {
}
}
-@media screen and (min-width: 360px) {
- .getting-started__wrapper,
- .getting-started__trends {
- margin-bottom: 10px;
- }
-}
+.icon-with-badge__badge {
+ @include font-size(14);
+ @include line-height(14);
+ position: absolute;
+ box-sizing: border-box;
+ left: -10px;
+ top: 3px;
+ min-width: 16px;
+ height: 16px;
+ padding: 1px 3px 0;
+ border-radius: 8px;
+ text-align: center;
+ color: #fff;
+ background: var(--accent-color);
-.icon-with-badge {
- position: relative;
- height: 100%;
-
- &__badge {
- @include font-size(14);
- @include line-height(14);
- position: absolute;
- box-sizing: border-box;
- left: -10px;
- top: 3px;
- min-width: 16px;
- height: 16px;
- padding: 1px 3px 0;
- border-radius: 8px;
- text-align: center;
- color: #fff;
- background: var(--accent-color);
-
- @media screen and (max-width: 895px) {
- top: 0;
- }
+ @media screen and (max-width: 895px) {
+ top: 0;
}
}
@@ -498,8 +426,7 @@ article:last-child > .domain {
cursor: pointer;
}
-.account--panel__button,
-.detailed-status__button {
+.account--panel__button {
flex: 1 1 auto;
text-align: center;
}
@@ -538,11 +465,6 @@ article:last-child > .domain {
}
}
-.dropdown--active .emoji-button img {
- opacity: 1;
- filter: none;
-}
-
.attachment-list {
display: flex;
font-size: 14px;
@@ -679,27 +601,6 @@ article:last-child > .domain {
100% { opacity: 1; }
}
-.icon-with-counter {
- position: relative;
- display: inline;
-
- &__counter {
- @include font-size(14);
- @include line-height(14);
- position: absolute;
- box-sizing: border-box;
- right: -5px;
- top: -9px;
- min-width: 16px;
- height: 16px;
- padding: 1px 3px 0;
- border-radius: 8px;
- text-align: center;
- color: #fff;
- background: var(--accent-color);
- }
-}
-
.page__top + .page__columns .columns-area {
@media screen and (max-width: 580px) {
padding-top: 10px;