diff options
Diffstat (limited to 'app/javascript/styles/mastodon/components.scss')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 271 |
1 files changed, 132 insertions, 139 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b57f6802d..c50b74d23 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -742,6 +742,20 @@ p { color: $darker-text-color; margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } } .button { @@ -3120,43 +3134,6 @@ $ui-header-height: 55px; color: $dark-text-color; overflow: auto; - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; @@ -3223,23 +3200,49 @@ $ui-header-height: 55px; .setting-text { display: block; box-sizing: border-box; - width: 100%; margin: 0; - color: $darker-text-color; - background: transparent; - padding: 7px 0; + color: $inverted-text-color; + background: $white; + padding: 7px 10px; font-family: inherit; font-size: 14px; - resize: vertical; - border: 0; - border-bottom: 2px solid $ui-primary-color; - outline: 0; + line-height: 22px; + border-radius: 4px; + border: 1px solid $white; - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; + &:focus { outline: 0; + border-color: lighten($ui-highlight-color, 12%); + } + + &__wrapper { + background: $white; + border: 1px solid $ui-secondary-color; + margin-bottom: 10px; + border-radius: 4px; + + .setting-text { + border: 0; + margin-bottom: 0; + border-radius: 0; + + &:focus { + border: 0; + } + } + + &__modifiers { + color: $inverted-text-color; + font-family: inherit; + font-size: 14px; + background: $white; + } + } + + &__toolbar { + display: flex; + justify-content: space-between; + margin-bottom: 20px; } @media screen and (max-width: 600px) { @@ -5526,59 +5529,6 @@ a.status-card.compact:hover { margin-bottom: 20px; } - .setting-text { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $inverted-text-color; - background: $white; - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: none; - outline: 0; - border-radius: 4px; - border: 1px solid $ui-secondary-color; - min-height: 100px; - max-height: 50vh; - margin-bottom: 10px; - - &:focus { - border: 1px solid darken($ui-secondary-color, 8%); - } - - &__wrapper { - background: $white; - border: 1px solid $ui-secondary-color; - margin-bottom: 10px; - border-radius: 4px; - - .setting-text { - border: 0; - margin-bottom: 0; - border-radius: 0; - - &:focus { - border: 0; - } - } - - &__modifiers { - color: $inverted-text-color; - font-family: inherit; - font-size: 14px; - background: $white; - } - } - - &__toolbar { - display: flex; - justify-content: space-between; - margin-bottom: 20px; - } - } - .setting-text-label { display: block; color: $inverted-text-color; @@ -5587,6 +5537,14 @@ a.status-card.compact:hover { margin-bottom: 10px; } + .setting-text { + width: 100%; + resize: none; + min-height: 100px; + max-height: 50vh; + border: 0; + } + .setting-toggle { margin-top: 20px; margin-bottom: 24px; @@ -6756,36 +6714,29 @@ noscript { } } -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; +.moved-account-banner { + padding: 20px; background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + align-items: center; + flex-direction: column; &__message { - position: relative; - margin-left: 58px; - color: $dark-text-color; + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; font-size: 14px; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__icon-wrapper { - left: -26px; - position: absolute; + font-weight: 500; + text-align: center; + margin-bottom: 16px; } - .detailed-status__display-avatar { - position: relative; + &__action { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; } .detailed-status__display-name { @@ -6795,9 +6746,9 @@ noscript { .column-inline-form { padding: 15px; - padding-right: 0; display: flex; justify-content: flex-start; + gap: 15px; align-items: center; background: lighten($ui-base-color, 4%); @@ -6806,17 +6757,8 @@ noscript { input { width: 100%; - - &:focus { - outline: 0; - } } } - - .icon-button { - flex: 0 0 auto; - margin: 0 10px; - } } .drawer__backdrop { @@ -7180,12 +7122,27 @@ noscript { color: lighten($ui-highlight-color, 8%); } - dl:first-child .verified { - border-radius: 0 4px 0 0; - } + .verified { + border: 1px solid rgba($valid-value-color, 0.5); + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + + dt, + dd { + color: $valid-value-color; + } - .verified a { - color: $valid-value-color; + a { + color: $valid-value-color; + } } } } @@ -8382,6 +8339,34 @@ noscript { } } +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + .about { padding: 20px; @@ -8389,6 +8374,14 @@ noscript { border-radius: 4px; } + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + &__header { margin-bottom: 30px; @@ -8509,7 +8502,7 @@ noscript { } } - .getting-started__footer { + .link-footer { padding: 0; margin-top: 60px; text-align: center; |