diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-15 11:38:24 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-15 11:41:57 +0200 |
commit | fe88ca697d4c43b24cdc2462f5e4e83548776a51 (patch) | |
tree | 5117904a1bc328d3ba1dcd12785508af2825fb3b /client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss | |
parent | 2df6f943b81e04f2f77c4f6e9d25b581647f64ae (diff) | |
download | PeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.tar.gz PeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.tar.zst PeerTube-fe88ca697d4c43b24cdc2462f5e4e83548776a51.zip |
Refactor comment add css
Diffstat (limited to 'client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss | 110 |
1 files changed, 41 insertions, 69 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 e11b9be5a..1aa9255c2 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 | |||
@@ -1,6 +1,10 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | $markdown-icon-height: 18px; | ||
5 | $markdown-icon-width: 30px; | ||
6 | $peertube-textarea-height: 60px; | ||
7 | |||
4 | form { | 8 | form { |
5 | margin-bottom: 30px; | 9 | margin-bottom: 30px; |
6 | } | 10 | } |
@@ -18,83 +22,55 @@ form { | |||
18 | flex-grow: 1; | 22 | flex-grow: 1; |
19 | margin: 0; | 23 | margin: 0; |
20 | position: relative; | 24 | position: relative; |
25 | } | ||
21 | 26 | ||
22 | $peertube-textarea-height: 60px; | 27 | textarea { |
23 | $markdown-icon-height: 18px; | 28 | @include peertube-textarea(100%, $peertube-textarea-height); |
24 | $markdown-icon-width: 30px; | 29 | @include button-focus(pvar(--mainColorLightest)); |
25 | |||
26 | .markdown-guide { | ||
27 | position: absolute; | ||
28 | top: 5px; | ||
29 | right: 9px; | ||
30 | |||
31 | ::ng-deep .help-tooltip-button { | ||
32 | my-global-icon { | ||
33 | height: $markdown-icon-height; | ||
34 | width: $markdown-icon-width; | ||
35 | |||
36 | svg { | ||
37 | color: #C6C6C6; | ||
38 | fill: #C6C6C6; | ||
39 | border-radius: 3px; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | &:focus, &:active, &:hover { | ||
44 | my-global-icon svg { | ||
45 | background-color: #C6C6C6; | ||
46 | color: pvar(--mainBackgroundColor); | ||
47 | fill: pvar(--mainBackgroundColor); | ||
48 | } | ||
49 | } | ||
50 | } | ||
51 | } | ||
52 | |||
53 | textarea { | ||
54 | @include peertube-textarea(100%, $peertube-textarea-height); | ||
55 | @include button-focus(pvar(--mainColorLightest)); | ||
56 | 30 | ||
57 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); | 31 | min-height: calc(#{$peertube-textarea-height} - 15px * 2); |
58 | padding-right: $markdown-icon-width + 15px !important; | 32 | padding-right: $markdown-icon-width + 15px !important; |
59 | 33 | ||
60 | @media screen and (max-width: 600px) { | 34 | @media screen and (max-width: 600px) { |
61 | padding-right: $markdown-icon-width + 19px !important; | 35 | padding-right: $markdown-icon-width + 19px !important; |
62 | } | 36 | } |
63 | 37 | ||
64 | &:focus::placeholder { | 38 | &:focus::placeholder { |
65 | opacity: 0; | 39 | opacity: 0; |
66 | } | ||
67 | } | 40 | } |
68 | } | 41 | } |
69 | } | 42 | } |
70 | 43 | ||
71 | .comment-buttons { | 44 | .markdown-guide { |
72 | display: flex; | 45 | position: absolute; |
73 | justify-content: flex-end; | 46 | top: 5px; |
47 | right: 9px; | ||
74 | 48 | ||
75 | button { | 49 | ::ng-deep .help-tooltip-button { |
76 | @include peertube-button; | 50 | my-global-icon { |
77 | @include disable-outline; | 51 | height: $markdown-icon-height; |
78 | @include disable-default-a-behaviour; | 52 | width: $markdown-icon-width; |
79 | 53 | ||
80 | &:not(:last-child) { | 54 | svg { |
81 | margin-right: .5rem; | 55 | color: #C6C6C6; |
56 | fill: #C6C6C6; | ||
57 | border-radius: 3px; | ||
58 | } | ||
82 | } | 59 | } |
83 | 60 | ||
84 | &:last-child { | 61 | &:focus, &:active, &:hover { |
85 | @include orange-button; | 62 | my-global-icon svg { |
63 | background-color: #C6C6C6; | ||
64 | color: pvar(--mainBackgroundColor); | ||
65 | fill: pvar(--mainBackgroundColor); | ||
66 | } | ||
86 | } | 67 | } |
87 | } | 68 | } |
69 | } | ||
88 | 70 | ||
89 | .cancel-button { | 71 | .comment-buttons { |
90 | @include tertiary-button; | 72 | display: flex; |
91 | 73 | justify-content: flex-end; | |
92 | font-weight: $font-semibold; | ||
93 | display: inline-block; | ||
94 | padding: 0 10px 0 10px; | ||
95 | white-space: nowrap; | ||
96 | background: transparent; | ||
97 | } | ||
98 | } | 74 | } |
99 | 75 | ||
100 | .emoji-flex { | 76 | .emoji-flex { |
@@ -117,7 +93,8 @@ form { | |||
117 | } | 93 | } |
118 | 94 | ||
119 | @media screen and (max-width: 600px) { | 95 | @media screen and (max-width: 600px) { |
120 | textarea, .comment-buttons button { | 96 | textarea, |
97 | .comment-buttons button { | ||
121 | font-size: 14px !important; | 98 | font-size: 14px !important; |
122 | } | 99 | } |
123 | 100 | ||
@@ -127,12 +104,7 @@ form { | |||
127 | } | 104 | } |
128 | 105 | ||
129 | .modal-body { | 106 | .modal-body { |
130 | .btn { | 107 | > span { |
131 | @include peertube-button; | ||
132 | @include orange-button; | ||
133 | } | ||
134 | |||
135 | span { | ||
136 | float: left; | 108 | float: left; |
137 | margin-bottom: 20px; | 109 | margin-bottom: 20px; |
138 | } | 110 | } |