diff options
Diffstat (limited to 'app/javascript/styles/mastodon/components.scss')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 96 |
1 files changed, 82 insertions, 14 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 66e4adc2b..0b5a721a7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -40,14 +40,20 @@ cursor: default; } - &.button-alternative { + &.button-primary, + &.button-alternative, + &.button-secondary, + &.button-alternative-2 { font-size: 16px; line-height: 36px; height: auto; - color: $ui-base-color; - background: $ui-primary-color; text-transform: none; padding: 4px 16px; + } + + &.button-alternative { + color: $ui-base-color; + background: $ui-primary-color; &:active, &:focus, @@ -56,15 +62,20 @@ } } + &.button-alternative-2 { + background: $ui-base-lighter-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-base-lighter-color, 4%); + } + } + &.button-secondary { - font-size: 16px; - line-height: 36px; - height: auto; color: $ui-primary-color; - text-transform: none; background: transparent; padding: 3px 15px; - border-radius: 4px; border: 1px solid $ui-primary-color; &:active, @@ -433,6 +444,34 @@ min-width: 40%; margin: 5px; + &__actions { + background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + display: flex; + align-items: flex-start; + justify-content: space-between; + opacity: 0; + transition: opacity .1s ease; + + .icon-button { + flex: 0 1 auto; + color: $ui-secondary-color; + font-size: 14px; + font-weight: 500; + padding: 10px; + font-family: inherit; + + &:hover, + &:focus, + &:active { + color: lighten($ui-secondary-color, 4%); + } + } + + &.active { + opacity: 1; + } + } + &-description { position: absolute; z-index: 2; @@ -470,10 +509,6 @@ opacity: 1; } } - - .icon-button { - mix-blend-mode: difference; - } } .compose-form__upload-thumbnail { @@ -481,8 +516,9 @@ background-position: center; background-size: cover; background-repeat: no-repeat; - height: 100px; + height: 140px; width: 100%; + overflow: hidden; } } @@ -4133,8 +4169,12 @@ a.status-card { &, img { width: 100%; - height: 100%; + } + + img { + position: relative; object-fit: cover; + height: auto; } } @@ -4842,3 +4882,31 @@ noscript { margin-bottom: 0; } } + +.focal-point { + position: relative; + cursor: pointer; + overflow: hidden; + + &.dragging { + cursor: move; + } + + &__reticle { + position: absolute; + width: 100px; + height: 100px; + transform: translate(-50%, -50%); + background: url('~/images/reticle.png') no-repeat 0 0; + border-radius: 50%; + box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); + } + + &__overlay { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + } +} |