diff options
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/fonts/montserrat.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/fonts/roboto.scss | 6 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 204 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 11 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/widgets.scss | 1 |
6 files changed, 150 insertions, 76 deletions
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss index 3d2b5a93f..80c2329b0 100644 --- a/app/javascript/styles/fonts/montserrat.scss +++ b/app/javascript/styles/fonts/montserrat.scss @@ -10,7 +10,7 @@ @font-face { font-family: 'mastodon-font-display'; - src: local('Montserrat'), + src: local('Montserrat Medium'), url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss index 79034c018..b75fdb927 100644 --- a/app/javascript/styles/fonts/roboto.scss +++ b/app/javascript/styles/fonts/roboto.scss @@ -1,6 +1,6 @@ @font-face { font-family: 'mastodon-font-sans-serif'; - src: local('Roboto'), + src: local('Roboto Italic'), url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'), url('~fonts/roboto/roboto-italic-webfont.ttf') format('truetype'), @@ -11,7 +11,7 @@ @font-face { font-family: 'mastodon-font-sans-serif'; - src: local('Roboto'), + src: local('Roboto Bold'), url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'), url('~fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), @@ -22,7 +22,7 @@ @font-face { font-family: 'mastodon-font-sans-serif'; - src: local('Roboto'), + src: local('Roboto Medium'), url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'), url('~fonts/roboto/roboto-medium-webfont.ttf') format('truetype'), diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 05c7821e4..74f91599a 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -50,6 +50,7 @@ $content-width: 840px; color: $darker-text-color; text-decoration: none; transition: all 200ms linear; + transition-property: color, background-color; border-radius: 4px 0 0 4px; i.fa { @@ -60,6 +61,7 @@ $content-width: 840px; color: $primary-text-color; background-color: darken($ui-base-color, 5%); transition: all 100ms linear; + transition-property: color, background-color; } &.selected { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9fcaeb8dd..1ba6fa5b1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -264,6 +264,16 @@ .compose-form { padding: 10px; + &__sensitive-button { + padding: 10px; + padding-top: 0; + + .icon-button { + font-size: 14px; + font-weight: 500; + } + } + .compose-form__warning { color: $inverted-text-color; margin-bottom: 10px; @@ -1962,6 +1972,7 @@ a.account__display-name { font-weight: 500; border-bottom: 2px solid lighten($ui-base-color, 8%); transition: all 50ms linear; + transition-property: border-bottom, background, color; .fa { font-weight: 400; @@ -2127,7 +2138,7 @@ a.account__display-name { padding: 0; border-radius: 30px; background-color: $ui-base-color; - transition: all 0.2s ease; + transition: background-color 0.2s ease; } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { @@ -2180,7 +2191,6 @@ a.account__display-name { } .react-toggle-thumb { - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: absolute; top: 1px; left: 1px; @@ -2191,6 +2201,7 @@ a.account__display-name { background-color: darken($simple-background-color, 2%); box-sizing: border-box; transition: all 0.25s ease; + transition-property: border-color, left; } .react-toggle--checked .react-toggle-thumb { @@ -2412,7 +2423,7 @@ a.account__display-name { & > div { background: rgba($base-shadow-color, 0.6); - border-radius: 4px; + border-radius: 8px; padding: 12px 9px; flex: 0 0 auto; display: flex; @@ -2423,19 +2434,18 @@ a.account__display-name { button, a { display: inline; - color: $primary-text-color; + color: $secondary-text-color; background: transparent; border: 0; - padding: 0 5px; + padding: 0 8px; text-decoration: none; - opacity: 0.6; font-size: 18px; line-height: 18px; &:hover, &:active, &:focus { - opacity: 1; + color: $primary-text-color; } } @@ -2932,15 +2942,49 @@ a.status-card.compact:hover { } .spoiler-button { - display: none; - left: 4px; + top: 0; + left: 0; + width: 100%; + height: 100%; position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; z-index: 100; - &.spoiler-button--visible { + &--minified { + display: block; + left: 4px; + top: 4px; + width: auto; + height: auto; + } + + &--hidden { + display: none; + } + + &__overlay { display: block; + background: transparent; + width: 100%; + height: 100%; + border: 0; + + &__label { + display: inline-block; + background: rgba($base-overlay-background, 0.5); + border-radius: 8px; + padding: 8px 12px; + color: $primary-text-color; + font-weight: 500; + font-size: 14px; + } + + &:hover, + &:focus, + &:active { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.8); + } + } } } @@ -3509,6 +3553,7 @@ a.status-card.compact:hover { display: inline-block; opacity: 0; transition: all 100ms linear; + transition-property: transform, opacity; font-size: 18px; width: 18px; height: 18px; @@ -3728,6 +3773,31 @@ a.status-card.compact:hover { pointer-events: none; } +.media-modal__meta { + text-align: center; + position: absolute; + left: 0; + bottom: 20px; + width: 100%; + pointer-events: none; + + &--shifted { + bottom: 62px; + } + + a { + text-decoration: none; + font-weight: 500; + color: $ui-secondary-color; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } +} + .media-modal__page-dot { display: inline-block; } @@ -3961,14 +4031,6 @@ a.status-card.compact:hover { font-size: 14px; } -.confirmation-modal { - max-width: 85vw; - - @media screen and (min-width: 480px) { - max-width: 380px; - } -} - .mute-modal { line-height: 24px; } @@ -4093,6 +4155,11 @@ a.status-card.compact:hover { ul { overflow-y: auto; flex-shrink: 0; + max-height: 80vh; + + &.with-status { + max-height: calc(80vh - 75px); + } li:empty { margin: 0; @@ -4147,6 +4214,10 @@ a.status-card.compact:hover { color: darken($lighter-text-color, 4%); } } + + .confirmation-modal__secondary-button { + flex-shrink: 1; + } } .confirmation-modal__container, @@ -4199,6 +4270,7 @@ a.status-card.compact:hover { pointer-events: none; opacity: 0.9; transition: opacity 0.1s ease; + line-height: 18px; } .media-gallery__gifv { @@ -4312,6 +4384,8 @@ a.status-card.compact:hover { text-decoration: none; color: $secondary-text-color; line-height: 0; + position: relative; + z-index: 1; &, img { @@ -4324,6 +4398,21 @@ a.status-card.compact:hover { } } +.media-gallery__preview { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + z-index: 0; + background: $base-overlay-background; + + &--hidden { + display: none; + } +} + .media-gallery__gifv { height: 100%; overflow: hidden; @@ -4619,6 +4708,23 @@ a.status-card.compact:hover { } } + &__link { + padding: 2px 10px; + + a { + text-decoration: none; + font-size: 14px; + font-weight: 500; + color: $white; + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + } + &__seek { cursor: pointer; height: 24px; @@ -4711,62 +4817,18 @@ a.status-card.compact:hover { .account-gallery__container { display: flex; - justify-content: center; flex-wrap: wrap; - padding: 2px; + padding: 4px 2px; } .account-gallery__item { - flex-grow: 1; - width: 50%; - overflow: hidden; + border: none; + box-sizing: border-box; + display: block; position: relative; - - &::before { - content: ""; - display: block; - padding-top: 100%; - } - - a { - display: block; - width: calc(100% - 4px); - height: calc(100% - 4px); - margin: 2px; - top: 0; - left: 0; - background-color: $base-overlay-background; - background-size: cover; - background-position: center; - position: absolute; - color: $darker-text-color; - text-decoration: none; - border-radius: 4px; - - &:hover, - &:active, - &:focus { - outline: 0; - color: $secondary-text-color; - - &::before { - content: ""; - display: block; - width: 100%; - height: 100%; - background: rgba($base-overlay-background, 0.3); - border-radius: 4px; - } - } - } - - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - } + border-radius: 4px; + overflow: hidden; + margin: 2px; } .notification__filter-bar, diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 91888d305..2b8d7a682 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -533,6 +533,17 @@ code { color: $error-value-color; } + a { + display: inline-block; + color: $darker-text-color; + text-decoration: none; + + &:hover { + color: $primary-text-color; + text-decoration: underline; + } + } + p { margin-bottom: 15px; } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index e736d7a7e..acaf5b024 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -4,7 +4,6 @@ &__img { width: 100%; - height: 167px; position: relative; overflow: hidden; border-radius: 4px 4px 0 0; |