diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-08-14 04:07:32 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2019-08-19 21:56:25 +0200 |
commit | ab019800f8862a84eab679ea5848c3df0531ddc9 (patch) | |
tree | 85334d309f0353649614b0da9b7fb167b0427a15 /app/javascript/flavours/glitch/styles/components | |
parent | f8e7c69861e0ec3fac8d7f416c8bff7148824dc0 (diff) |
[Glitch] Add media editing modal
Port 23f7afa562c49b24e979505680463bc712b11d94 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/media.scss | 5 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/modal.scss | 46 |
2 files changed, 42 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 8b5d0486d..39ffcae9d 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -338,6 +338,11 @@ position: relative; background: $base-shadow-color; max-width: 100%; + border-radius: 4px; + + &.editable { + border-radius: 0; + } &:focus { outline: 0; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index a98efee9f..df4a22329 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -577,6 +577,14 @@ } } + .setting-text-label { + display: block; + color: $inverted-text-color; + font-size: 14px; + font-weight: 500; + margin-bottom: 10px; + } + .setting-toggle { margin-top: 20px; margin-bottom: 24px; @@ -787,19 +795,18 @@ .focal-point { position: relative; - cursor: pointer; + cursor: move; overflow: hidden; - &.dragging { - cursor: move; - } - - img { - max-width: 80vw; + img, + video { + display: block; max-height: 80vh; - width: auto; + width: 100%; height: auto; - margin: auto; + margin: 0; + object-fit: contain; + background: $base-shadow-color; } &__reticle { @@ -819,6 +826,27 @@ top: 0; left: 0; } + + &__preview { + position: absolute; + bottom: 10px; + right: 10px; + z-index: 2; + cursor: default; + + strong { + color: $primary-text-color; + font-size: 14px; + font-weight: 500; + display: block; + margin-bottom: 5px; + } + + div { + border-radius: 4px; + box-shadow: 0 0 14px rgba($base-shadow-color, 0.2); + } + } } .filtered-status-info { |