diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 5c84689f24..a81a8bc22e 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -3604,26 +3604,6 @@ $ui-header-logo-wordmark-width: 99px; height: calc(100% - 10px); overflow-y: hidden; - .hero-widget { - box-shadow: none; - - &__text, - &__img, - &__img img { - border-radius: 0; - } - - &__text { - padding: 15px; - color: $secondary-text-color; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - } - .compose-form { flex: 1 1 auto; min-height: 0; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 869253e5e5..73f3689066 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -414,9 +414,6 @@ border-color: transparent transparent $white; } -.hero-widget, -.moved-account-widget, -.memoriam-widget, .activity-stream, .nothing-here, .directory__tag > a, diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index 8225e23da4..6f5907f535 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -1,197 +1,5 @@ @use 'sass:math'; -.hero-widget { - margin-bottom: 10px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &__img { - width: 100%; - position: relative; - overflow: hidden; - border-radius: 4px 4px 0 0; - background: $base-shadow-color; - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 4px 4px 0 0; - } - } - - &__text { - background: $ui-base-color; - padding: 20px; - border-radius: 0 0 4px 4px; - font-size: 15px; - color: $darker-text-color; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 700; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: lighten($darker-text-color, 10%); - } - - a { - color: $secondary-text-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } -} - -.endorsements-widget { - margin-bottom: 10px; - padding-bottom: 10px; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - .account { - padding: 10px 0; - - &:last-child { - border-bottom: 0; - } - - .account__display-name { - display: flex; - align-items: center; - } - } - - .trends__item { - padding: 10px; - } -} - -.trends-widget { - h4 { - color: $darker-text-color; - } -} - -.placeholder-widget { - padding: 16px; - border-radius: 4px; - border: 2px dashed $dark-text-color; - text-align: center; - color: $darker-text-color; - margin-bottom: 10px; -} - -.moved-account-widget { - padding: 15px; - padding-bottom: 20px; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - color: $secondary-text-color; - font-weight: 400; - margin-bottom: 10px; - - strong, - a { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: inherit; - text-decoration: underline; - - &.mention { - text-decoration: none; - - span { - text-decoration: none; - } - - &:focus, - &:hover, - &:active { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - &__message { - margin-bottom: 15px; - } - - &__card { - .detailed-status__display-avatar { - position: relative; - cursor: pointer; - } - - .detailed-status__display-name { - margin-bottom: 0; - text-decoration: none; - - span { - font-weight: 400; - } - } - } -} - -.memoriam-widget { - padding: 20px; - border-radius: 4px; - background: $base-shadow-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - font-size: 14px; - color: $darker-text-color; - margin-bottom: 10px; -} - .directory { background: var(--background-color); border-radius: 4px; @@ -369,27 +177,3 @@ } } } - -.moved-account-widget, -.memoriam-widget, -.directory { - @media screen and (max-width: $no-gap-breakpoint) { - margin-bottom: 0; - box-shadow: none; - border-radius: 0; - } -} - -.placeholder-widget { - a { - text-decoration: none; - font-weight: 500; - color: $ui-highlight-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -} diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 8d801e4cd5..1df556b42a 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -414,9 +414,6 @@ border-color: transparent transparent $white; } -.hero-widget, -.moved-account-widget, -.memoriam-widget, .activity-stream, .nothing-here, .directory__tag > a, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 49fd963ef5..e9d1997b1a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3422,26 +3422,6 @@ $ui-header-logo-wordmark-width: 99px; height: calc(100% - 10px); overflow-y: hidden; - .hero-widget { - box-shadow: none; - - &__text, - &__img, - &__img img { - border-radius: 0; - } - - &__text { - padding: 15px; - color: $secondary-text-color; - - strong { - font-weight: 700; - color: $primary-text-color; - } - } - } - .compose-form { flex: 1 1 auto; min-height: 0; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index a8f678d482..b37d790ce3 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,289 +1,3 @@ -@use 'sass:math'; - -.hero-widget { - margin-bottom: 10px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &:last-child { - margin-bottom: 0; - } - - &__img { - width: 100%; - position: relative; - overflow: hidden; - border-radius: 4px 4px 0 0; - background: $base-shadow-color; - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - border-radius: 4px 4px 0 0; - } - } - - &__text { - background: $ui-base-color; - padding: 20px; - border-radius: 0 0 4px 4px; - font-size: 15px; - color: $darker-text-color; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - margin-inline-start: 0.075em; - margin-inline-end: 0.075em; - } - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 700; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: lighten($darker-text-color, 10%); - } - - a { - color: $secondary-text-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } -} - -.endorsements-widget { - margin-bottom: 10px; - padding-bottom: 10px; - - h4 { - padding: 10px; - text-transform: uppercase; - font-weight: 700; - font-size: 13px; - color: $darker-text-color; - } - - .account { - padding: 10px 0; - - &:last-child { - border-bottom: 0; - } - - .account__display-name { - display: flex; - align-items: center; - } - } - - .trends__item { - padding: 10px; - } -} - -.trends-widget { - h4 { - color: $darker-text-color; - } -} - -.placeholder-widget { - padding: 16px; - border-radius: 4px; - border: 2px dashed $dark-text-color; - text-align: center; - color: $darker-text-color; - margin-bottom: 10px; -} - -.moved-account-widget { - padding: 15px; - padding-bottom: 20px; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - color: $secondary-text-color; - font-weight: 400; - margin-bottom: 10px; - - strong, - a { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: inherit; - text-decoration: underline; - - &.mention { - text-decoration: none; - - span { - text-decoration: none; - } - - &:focus, - &:hover, - &:active { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - &__message { - margin-bottom: 15px; - } - - &__card { - .detailed-status__display-avatar { - position: relative; - cursor: pointer; - } - - .detailed-status__display-name { - margin-bottom: 0; - text-decoration: none; - - span { - font-weight: 400; - } - } - } -} - -.memoriam-widget { - padding: 20px; - border-radius: 4px; - background: $base-shadow-color; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - font-size: 14px; - color: $darker-text-color; - margin-bottom: 10px; -} - -.directory { - background: var(--background-color); - border-radius: 4px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - - &__tag { - box-sizing: border-box; - margin-bottom: 10px; - - & > a, - & > div { - display: flex; - align-items: center; - justify-content: space-between; - border: 1px solid var(--background-border-color); - border-radius: 4px; - padding: 15px; - text-decoration: none; - color: inherit; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - } - - & > a { - &:hover, - &:active, - &:focus { - background: $ui-base-color; - } - } - - &.active > a { - background: $ui-highlight-color; - cursor: default; - } - - &.disabled > div { - opacity: 0.5; - cursor: default; - } - - h4 { - flex: 1 1 auto; - font-size: 18px; - font-weight: 700; - color: $primary-text-color; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .fa { - color: $darker-text-color; - } - - small { - display: block; - font-weight: 400; - font-size: 15px; - margin-top: 8px; - color: $darker-text-color; - } - } - - &.active h4 { - &, - .fa, - small, - .trends__item__current { - color: $primary-text-color; - } - } - - .avatar-stack { - flex: 0 0 auto; - width: (36px + 4px) * 3; - } - - &.active .avatar-stack .account__avatar { - border-color: $ui-highlight-color; - } - - .trends__item__current { - padding-inline-end: 0; - } - } -} - .accounts-table { width: 100%; @@ -381,27 +95,3 @@ } } } - -.moved-account-widget, -.memoriam-widget, -.directory { - @media screen and (max-width: $no-gap-breakpoint) { - margin-bottom: 0; - box-shadow: none; - border-radius: 0; - } -} - -.placeholder-widget { - a { - text-decoration: none; - font-weight: 500; - color: $ui-highlight-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } -}