diff options
| author | kimsible <kimsible@users.noreply.github.com> | 2020-08-08 00:51:27 +0200 |
|---|---|---|
| committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-14 15:03:38 +0200 |
| commit | 438c256b2672fa9539b703e6f28d4b70ef3dccfb (patch) | |
| tree | 811b00ac992453aed602081ea9ee2ad5ff8f6a70 | |
| parent | ddb0303f4da8777b0c1254eada8b2cd12774b716 (diff) | |
| download | PeerTube-438c256b2672fa9539b703e6f28d4b70ef3dccfb.tar.gz PeerTube-438c256b2672fa9539b703e6f28d4b70ef3dccfb.tar.zst PeerTube-438c256b2672fa9539b703e6f28d4b70ef3dccfb.zip | |
Move markdown icon on right and correct colors
| -rw-r--r-- | client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss | 19 | ||||
| -rw-r--r-- | client/src/assets/images/misc/markdown.svg | 2 |
2 files changed, 11 insertions, 10 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index 814417f04..daaf337c8 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss | |||
| @@ -28,11 +28,7 @@ form { | |||
| 28 | .markdown-guide { | 28 | .markdown-guide { |
| 29 | position: absolute; | 29 | position: absolute; |
| 30 | top: 5px; | 30 | top: 5px; |
| 31 | left: 4px; | 31 | right: 9px; |
| 32 | |||
| 33 | @media screen and (max-width: 600px) { | ||
| 34 | left: 0; | ||
| 35 | } | ||
| 36 | 32 | ||
| 37 | ::ng-deep .help-tooltip-button { | 33 | ::ng-deep .help-tooltip-button { |
| 38 | my-global-icon { | 34 | my-global-icon { |
| @@ -40,13 +36,17 @@ form { | |||
| 40 | width: $markdown-icon-width; | 36 | width: $markdown-icon-width; |
| 41 | 37 | ||
| 42 | svg { | 38 | svg { |
| 43 | opacity: 0.5; | 39 | color: #C6C6C6; |
| 40 | fill: #C6C6C6; | ||
| 41 | border-radius: 3px; | ||
| 44 | } | 42 | } |
| 45 | } | 43 | } |
| 46 | 44 | ||
| 47 | &:focus, &:active, &:hover { | 45 | &:focus, &:active, &:hover { |
| 48 | my-global-icon svg { | 46 | my-global-icon svg { |
| 49 | opacity: 1; | 47 | background-color: #C6C6C6; |
| 48 | color: pvar(--mainBackgroundColor); | ||
| 49 | fill: pvar(--mainBackgroundColor); | ||
| 50 | } | 50 | } |
| 51 | } | 51 | } |
| 52 | } | 52 | } |
| @@ -56,10 +56,11 @@ form { | |||
| 56 | @include peertube-textarea(100%, $peertube-textarea-height); | 56 | @include peertube-textarea(100%, $peertube-textarea-height); |
| 57 | @include button-focus(pvar(--mainColorLightest)); | 57 | @include button-focus(pvar(--mainColorLightest)); |
| 58 | 58 | ||
| 59 | text-indent: $markdown-icon-width; | 59 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); |
| 60 | padding-right: $markdown-icon-width + 15px !important; | ||
| 60 | 61 | ||
| 61 | @media screen and (max-width: 600px) { | 62 | @media screen and (max-width: 600px) { |
| 62 | text-indent: $markdown-icon-width + 5px; | 63 | padding-right: $markdown-icon-width + 19px !important; |
| 63 | } | 64 | } |
| 64 | 65 | ||
| 65 | &:focus::placeholder { | 66 | &:focus::placeholder { |
diff --git a/client/src/assets/images/misc/markdown.svg b/client/src/assets/images/misc/markdown.svg index ee0f15303..0e2831320 100644 --- a/client/src/assets/images/misc/markdown.svg +++ b/client/src/assets/images/misc/markdown.svg | |||
| @@ -1 +1 @@ | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#C6C6C6" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg> | ||
