diff options
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 97 |
1 files changed, 91 insertions, 6 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 0d086ed45..2f2d6e1f0 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -238,6 +238,8 @@ line-height: 0; display: inline-block; width: 0; + height: 0; + position: absolute; } .ellipsis { @@ -395,6 +397,11 @@ bottom: -1px; right: 8px; } + + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } } } @@ -1288,6 +1295,8 @@ strong, span { display: block; + text-overflow: ellipsis; + overflow: hidden; } strong { @@ -2130,7 +2139,7 @@ .character-counter__wrapper { line-height: 36px; - margin-right: 16px; + margin: 0 16px 0 8px; padding-top: 10px; } @@ -2313,6 +2322,18 @@ button.icon-button.active i.fa-retweet { background: lighten($ui-base-color, 8%); } +.status-card.horizontal { + display: block; + + .status-card__image { + width: 100%; + } + + .status-card__image-image { + border-radius: 4px 4px 0 0; + } +} + .status-card__image-image { border-radius: 4px 0 0 4px; display: block; @@ -2671,12 +2692,8 @@ button.icon-button.active i.fa-retweet { } .media-spoiler { - align-items: center; background: $base-overlay-background; color: $primary-text-color; - cursor: pointer; - display: flex; - flex-direction: column; border: 0; width: 100%; height: 100%; @@ -3533,7 +3550,8 @@ button.icon-button.active i.fa-retweet { } .onboarding-modal, -.error-modal { +.error-modal, +.embed-modal { background: $ui-secondary-color; color: $ui-base-color; border-radius: 8px; @@ -4348,6 +4366,15 @@ noscript { margin: 30px auto; color: $ui-secondary-color; max-width: 400px; + + a { + color: $ui-highlight-color; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } } } @@ -4455,3 +4482,61 @@ noscript { height: 100% !important; } } + +.embed-modal__html { + color: $ui-secondary-color; + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + font-family: 'mastodon-font-monospace', monospace; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + margin-bottom: 15px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } +} + +.embed-modal { + h4 { + padding: 30px; + font-weight: 500; + font-size: 16px; + text-align: center; + } + + .hint { + margin-bottom: 15px; + } +} + +.embed-modal__container { + padding: 10px; +} + +.embed-modal__iframe { + width: 100%; + min-width: 400px; + overflow: hidden; + border: 0; +} |