diff --git a/src/assets/scss/emote-upload/emote-upload.scss b/src/assets/scss/emote-upload/emote-upload.scss index 5f2e07e4..4b1ba92f 100644 --- a/src/assets/scss/emote-upload/emote-upload.scss +++ b/src/assets/scss/emote-upload/emote-upload.scss @@ -30,13 +30,13 @@ flex-direction: row; height: 100%; margin: 1em; - justify-content: space-between; + // justify-content: space-between; @include themify() { - > .image-upload > span > .parent-emote { + > .inputs > span > .parent-emote { background-color: darken(themed("backgroundColor"), 2); } - > .image-upload > div { + > .image-upload > .image-box { background-color: darken(themed("backgroundColor"), 2); > .formats-viewer { background-color: transparentize(lighten(themed("backgroundColor"), 4), 0.25); @@ -47,11 +47,8 @@ } } - > .form-grid-item { - width: calc(100% / 3); - } - > .image-upload { + width: calc(100% / 3); display: flex; flex-direction: column; justify-content: center; @@ -59,16 +56,9 @@ padding: 0.5em 1em; margin-right: 1em; border-radius: 0.4em; + min-width: 26em; - > span { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - flex-grow: 1; - } - - > div { + > .image-box { display: flex; flex-direction: column; align-items: center; @@ -100,7 +90,7 @@ > .formats-viewer { position: absolute; - width: 16em; + width: 20em; display: flex; flex-direction: column; border-radius: 0.4em; @@ -121,15 +111,15 @@ margin-bottom: 0.25em; } [part="label"] { - width: 33.3333%; + width: 20%; } [part="animation"] { text-align: center; - width: 33.3333%; + width: 40%; } [part="transparency"] { text-align: center; - width: 33.3333%; + width: 40%; } [part="close-btn"] { cursor: pointer; @@ -139,17 +129,21 @@ } } - .parent-emote { - padding: 1em; - border-radius: 0.3em; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: 0 0 0.25em rgb(100, 70, 180); + > .requirements { + font-size: 0.725rem; + // margin-left: 4rem; + // margin-right: auto; + padding-bottom: 0.5rem; + width: 18rem; - > .as-child-notice { - text-align: center; - margin-left: 1em; + > h3 { + padding-top: 1rem; + font-size: 1rem; + padding-bottom: 0.25rem; + } + + > p { + font-size: 0.9rem; } } } @@ -169,16 +163,37 @@ height: 8rem; border: 4px dashed currentColor; border-radius: 0.25em; + object-fit: contain; } } > .inputs { + width: calc(100% / 3); display: flex; flex-direction: column; margin-top: 1em; padding: 0.5em 1em; border-radius: 0.4em; + > span { + display: flex; + align-items: center; + width: 100%; + } + .parent-emote { + padding: 1em; + border-radius: 0.3em; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 0 0.25em rgb(100, 70, 180); + margin-bottom: 2.5em; + > .as-child-notice { + text-align: center; + margin-left: 1em; + } + } + .text-input { display: flex; flex-direction: column; @@ -205,7 +220,14 @@ align-items: center; } > .inputs { - align-items: center; + align-items: flex-start; + width: inherit; + .text-input { + max-width: 100%; + } + form { + width: 100%; + } } } } diff --git a/src/views/emote-upload/EmoteUpload.vue b/src/views/emote-upload/EmoteUpload.vue index 1da060bd..e7fee1b7 100644 --- a/src/views/emote-upload/EmoteUpload.vue +++ b/src/views/emote-upload/EmoteUpload.vue @@ -10,6 +10,17 @@
+ +
+ +
+ + {{ parentEmote.name }} + +
+
+
+

{{ t(txt.emoteDetails) }}

@@ -32,6 +43,7 @@
+
@@ -78,17 +91,17 @@
- - -
- -
- - {{ parentEmote.name }} - -
-
-
+
+

Up to:

+

- 7 MB large

+

- 1000 x 1000 pixels big

+

- 1000 frames

+

- 50 fps

+
+
+ * Emote will be scaled to a max height of 128 px and/or a max width of 384 px, preserving the + aspect ratio. +