diff options
author | Starfall <us@starfall.systems> | 2022-03-08 17:55:38 -0600 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2022-03-08 17:55:38 -0600 |
commit | 239d67fc2c0ec82617de50a9831bc1a9efc30ecc (patch) | |
tree | a6806025fe9e094994366434b08093cee5923557 /app/javascript/styles | |
parent | ad1733ea294c6049336a9aeeb7ff96c8fea22cfa (diff) | |
parent | 02133866e6915e37431298b396e1aded1e4c44c5 (diff) |
Merge remote-tracking branch 'glitch/main'
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/mastodon-light/diff.scss | 13 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/accounts.scss | 10 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 86 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 283 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 37 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 72 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/polls.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/rtl.scss | 5 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/tables.scss | 7 |
9 files changed, 310 insertions, 205 deletions
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 6a8a6f1de..0603703c3 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -40,19 +40,11 @@ html { background: lighten($ui-base-color, 12%); } -.filter-form, -.directory__card__bar { +.filter-form { background: $white; border-bottom: 1px solid lighten($ui-base-color, 8%); } -.scrollable .directory__list { - width: calc(100% + 2px); - margin-left: -1px; - margin-right: -1px; -} - -.directory__card, .table-of-contents { border: 1px solid lighten($ui-base-color, 8%); } @@ -75,8 +67,7 @@ html { .column-header__back-button, .column-header__button, .column-header__button.active, -.account__header__bar, -.directory__card__extra { +.account__header__bar { background: $white; } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 440e81de9..910d35ee0 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -330,7 +330,8 @@ } .batch-table__row--muted .pending-account__header, -.batch-table__row--muted .accounts-table { +.batch-table__row--muted .accounts-table, +.batch-table__row--muted .name-tag { &, a, strong { @@ -338,6 +339,10 @@ } } +.batch-table__row--muted .name-tag .avatar { + opacity: 0.5; +} + .batch-table__row--muted .accounts-table { tbody td.accounts-table__extra, &__count, @@ -351,7 +356,8 @@ } .batch-table__row--attention .pending-account__header, -.batch-table__row--attention .accounts-table { +.batch-table__row--attention .accounts-table, +.batch-table__row--attention .name-tag { &, a, strong { diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index a1b99636c..0873ac300 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -904,6 +904,14 @@ a.name-tag, text-align: center; } +.applications-list__item { + padding: 15px 0; + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 4%); + border-radius: 4px; + margin-top: 15px; +} + .announcements-list { border: 1px solid lighten($ui-base-color, 4%); border-radius: 4px; @@ -923,6 +931,12 @@ a.name-tag, text-decoration: none; margin-bottom: 10px; + .account-role { + vertical-align: middle; + } + } + + a.announcements-list__item__title { &:hover, &:focus, &:active { @@ -941,6 +955,10 @@ a.name-tag, align-items: center; } + &__permissions { + margin-top: 10px; + } + &:last-child { border-bottom: 0; } @@ -1218,6 +1236,11 @@ a.sparkline { background: $ui-base-color; border-radius: 4px; + &__permalink { + color: inherit; + text-decoration: none; + } + &__header { padding: 4px; border-radius: 4px; @@ -1234,20 +1257,22 @@ a.sparkline { } &__title { - margin-top: -25px; + margin-top: -(15px + 8px); display: flex; align-items: flex-end; &__avatar { - padding: 15px; + padding: 14px; - img { + img, + .account__avatar { display: block; margin: 0; width: 56px; height: 56px; - background: darken($ui-base-color, 8%); + background-color: darken($ui-base-color, 8%); border-radius: 8px; + border: 1px solid $ui-base-color; } } @@ -1255,30 +1280,34 @@ a.sparkline { color: $darker-text-color; padding-bottom: 15px; font-size: 15px; + line-height: 20px; bdi { display: block; color: $primary-text-color; - font-weight: 500; + font-weight: 700; } } } &__bio { padding: 0 15px; + margin: 8px 0; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; - max-height: 18px * 2; + max-height: 21px * 2; position: relative; + font-size: 15px; + line-height: 21px; &::after { display: block; content: ""; width: 50px; - height: 18px; + height: 21px; position: absolute; - bottom: 0; + bottom: 8px; right: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; @@ -1291,10 +1320,6 @@ a.sparkline { &:hover { text-decoration: underline; - - .fa { - color: lighten($dark-text-color, 7%); - } } &.mention { @@ -1311,12 +1336,21 @@ a.sparkline { &__actions { display: flex; + justify-content: space-between; align-items: center; - padding-top: 10px; &__button { - flex: 0 0 auto; + flex-shrink: 1; padding: 0 15px; + overflow: hidden; + + .button { + min-width: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; + } } } @@ -1325,19 +1359,23 @@ a.sparkline { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; + max-width: 340px; + min-width: 65px * 3; &__item { - padding: 15px; + padding: 15px 0; text-align: center; color: $primary-text-color; font-weight: 600; font-size: 15px; + line-height: 21px; small { display: block; color: $darker-text-color; font-weight: 400; font-size: 13px; + line-height: 18px; } } } @@ -1383,16 +1421,20 @@ a.sparkline { line-height: 20px; margin-bottom: 4px; - .username a { + .username { color: $primary-text-color; font-weight: 500; - text-decoration: none; margin-right: 5px; - &:hover, - &:focus, - &:active { - text-decoration: underline; + a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } } } @@ -1506,6 +1548,8 @@ a.sparkline { word-wrap: break-word; font-weight: 400; color: $primary-text-color; + box-sizing: border-box; + min-height: 100%; p { margin-bottom: 20px; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 108bf68a5..d1d679ac2 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -50,7 +50,7 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-size: 17px; + font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 22px; @@ -166,6 +166,11 @@ transition-property: background-color, color; text-decoration: none; + a { + color: inherit; + text-decoration: none; + } + &:hover, &:active, &:focus { @@ -2328,17 +2333,7 @@ a.account__display-name { padding: 0; } - .directory__list { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - } - } - - .directory__card { + .account-card { margin-bottom: 0; } @@ -2797,6 +2792,10 @@ a.account__display-name { position: relative; min-height: 120px; } + + .scrollable { + flex: 1 1 auto; + } } .scrollable.fullscreen { @@ -4306,7 +4305,7 @@ a.status-card.compact:hover { } } -.upload-progess__message { +.upload-progress__message { flex: 1 1 auto; } @@ -6210,136 +6209,20 @@ a.status-card.compact:hover { } } -.directory { - &__list { - width: 100%; - margin: 10px 0; - transition: opacity 100ms ease-in; - - &.loading { - opacity: 0.7; - } +.scrollable .account-card { + margin: 10px; + background: lighten($ui-base-color, 8%); +} - @media screen and (max-width: $no-gap-breakpoint) { - margin: 0; - } +.scrollable .account-card__title__avatar { + img, + .account__avatar { + border-color: lighten($ui-base-color, 8%); } +} - &__card { - box-sizing: border-box; - margin-bottom: 10px; - - &__img { - height: 125px; - position: relative; - background: darken($ui-base-color, 12%); - overflow: hidden; - - img { - display: block; - width: 100%; - height: 100%; - margin: 0; - object-fit: cover; - } - } - - &__bar { - display: flex; - align-items: center; - background: lighten($ui-base-color, 4%); - padding: 10px; - - &__name { - flex: 1 1 auto; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - } - - &__relationship { - width: 23px; - min-height: 1px; - flex: 0 0 auto; - } - - .avatar { - flex: 0 0 auto; - width: 48px; - height: 48px; - padding-top: 2px; - - img { - width: 100%; - height: 100%; - display: block; - margin: 0; - border-radius: 4px; - background: darken($ui-base-color, 8%); - object-fit: cover; - } - } - - .display-name { - margin-left: 15px; - text-align: left; - - strong { - font-size: 15px; - color: $primary-text-color; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - span { - display: block; - font-size: 14px; - color: $darker-text-color; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - &__extra { - background: $ui-base-color; - display: flex; - align-items: center; - justify-content: center; - - .accounts-table__count { - width: 33.33%; - flex: 0 0 auto; - padding: 15px 0; - } - - .account__header__content { - box-sizing: border-box; - padding: 15px 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - width: 100%; - min-height: 18px + 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - p { - display: none; - - &:first-child { - display: inline; - } - } - - br { - display: none; - } - } - } - } +.scrollable .account-card__bio::after { + background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); } .account-gallery__container { @@ -6443,6 +6326,7 @@ a.status-card.compact:hover { &__column { padding: 10px 15px; + padding-bottom: 0; } .radio-button { @@ -7724,3 +7608,122 @@ noscript { text-align: center; } } + +.explore__search-header { + background: $ui-base-color; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 15px; + + .search { + width: 100%; + margin-bottom: 0; + } + + .search__input { + border-radius: 4px; + color: $inverted-text-color; + background: $simple-background-color; + padding: 10px; + + &::placeholder { + color: $dark-text-color; + } + } + + .search .fa { + top: 10px; + right: 10px; + color: $dark-text-color; + } + + .search .fa-times-circle { + top: 12px; + } +} + +.explore__search-results { + flex: 1 1 auto; + display: flex; + flex-direction: column; +} + +.story { + display: flex; + align-items: center; + color: $primary-text-color; + text-decoration: none; + padding: 15px 0; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &:hover, + &:active, + &:focus { + background-color: lighten($ui-base-color, 4%); + } + + &__details { + padding: 0 15px; + flex: 1 1 auto; + + &__publisher { + color: $darker-text-color; + margin-bottom: 4px; + } + + &__title { + font-size: 19px; + line-height: 24px; + font-weight: 500; + margin-bottom: 4px; + } + + &__shared { + color: $darker-text-color; + } + } + + &__thumbnail { + flex: 0 0 auto; + margin: 0 15px; + position: relative; + width: 120px; + height: 120px; + + .skeleton { + width: 100%; + height: 100%; + } + + img { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__preview { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: fill; + position: absolute; + top: 0; + left: 0; + z-index: 0; + + &--hidden { + display: none; + } + } + } +} diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index e40ad18ff..81459f5ba 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -1,7 +1,6 @@ .container-alt { width: 700px; margin: 0 auto; - margin-top: 40px; @media screen and (max-width: 740px) { width: 100%; @@ -67,22 +66,20 @@ line-height: 18px; box-sizing: border-box; padding: 20px 0; - padding-bottom: 0; - margin-bottom: -30px; margin-top: 40px; + margin-bottom: 10px; + border-bottom: 1px solid $ui-base-color; @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; + margin-right: 10px; img { width: 100%; @@ -96,7 +93,7 @@ .name { flex: 1 1 auto; color: $secondary-text-color; - width: calc(100% - 88px); + width: calc(100% - 90px); .username { display: block; @@ -110,7 +107,7 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 8px; + margin-left: 10px; } } @@ -412,14 +409,6 @@ } } - .directory__card { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - .page-header { @media screen and (max-width: $no-gap-breakpoint) { border-bottom: 0; @@ -838,19 +827,21 @@ grid-gap: 10px; grid-template-columns: minmax(0, 50%) minmax(0, 50%); + .account-card { + display: flex; + flex-direction: column; + } + @media screen and (max-width: $no-gap-breakpoint) { display: block; - } - .icon-button { - font-size: 18px; + .account-card { + margin-bottom: 10px; + display: block; + } } } - .directory__card { - margin-bottom: 0; - } - .card-grid { display: flex; flex-wrap: wrap; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index b67565591..db5be1ea0 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -794,9 +794,41 @@ code { } } } +} - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; +.oauth-prompt { + h3 { + color: $ui-secondary-color; + font-size: 17px; + line-height: 22px; + font-weight: 500; + margin-bottom: 30px; + } + + p { + font-size: 14px; + line-height: 18px; + margin-bottom: 30px; + } + + .permissions-list { + border: 1px solid $ui-base-color; + border-radius: 4px; + background: darken($ui-base-color, 4%); + margin-bottom: 30px; + } + + .actions { + margin: 0 -10px; + display: flex; + + form { + box-sizing: border-box; + padding: 0 10px; + flex: 1 1 auto; + min-height: 1px; + width: 50%; + } } } @@ -999,3 +1031,39 @@ code { display: none; } } + +.permissions-list { + &__item { + padding: 15px; + color: $ui-secondary-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); + display: flex; + align-items: center; + + &__text { + flex: 1 1 auto; + + &__title { + font-weight: 500; + } + + &__type { + color: $darker-text-color; + } + } + + &__icon { + flex: 0 0 auto; + font-size: 18px; + width: 30px; + color: $valid-value-color; + display: flex; + align-items: center; + } + + &:last-child { + border-bottom: 0; + padding-bottom: 0; + } + } +} diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index e33fc7983..a719044ea 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -69,7 +69,7 @@ display: none; } - .autossugest-input { + .autosuggest-input { flex: 1 1 auto; } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index ea7bb5113..98eb1511c 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -12,11 +12,6 @@ body.rtl { margin-left: 10px; } - .directory__card__bar .display-name { - margin-left: 0; - margin-right: 15px; - } - .display-name, .announcements__item { text-align: right; diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 36bc07a72..1f7e71776 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -210,6 +210,7 @@ a.table-action-link { &__content { padding-top: 12px; padding-bottom: 16px; + overflow: hidden; &--unpadded { padding: 0; @@ -296,3 +297,9 @@ a.table-action-link { } } } + +.one-liner { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} |