]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
Remove avatarUrl from models
[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / comment / video-comment-add.component.scss
CommitLineData
4635f59d
C
1@import '_variables';
2@import '_mixins';
3
fe88ca69
C
4$markdown-icon-height: 18px;
5$markdown-icon-width: 30px;
6$peertube-textarea-height: 60px;
7
93ef8a9d
C
8form {
9 margin-bottom: 30px;
10}
11
cf117aaa
C
12.avatar-and-textarea {
13 display: flex;
4635f59d 14 margin-bottom: 10px;
4635f59d 15
746018f6 16 my-actor-avatar {
fc641ded 17 margin-right: 10px;
cf117aaa
C
18 }
19
20 .form-group {
21 flex-grow: 1;
22 margin: 0;
3c176894 23 position: relative;
fe88ca69 24 }
3c176894 25
fe88ca69
C
26 textarea {
27 @include peertube-textarea(100%, $peertube-textarea-height);
28 @include button-focus(pvar(--mainColorLightest));
2d9fea16 29
fe88ca69
C
30 min-height: calc(#{$peertube-textarea-height} - 15px * 2);
31 padding-right: $markdown-icon-width + 15px !important;
3c176894 32
fe88ca69
C
33 @media screen and (max-width: 600px) {
34 padding-right: $markdown-icon-width + 19px !important;
35 }
3c176894 36
fe88ca69
C
37 &:focus::placeholder {
38 opacity: 0;
cf117aaa
C
39 }
40 }
4635f59d
C
41}
42
fe88ca69
C
43.markdown-guide {
44 position: absolute;
45 top: 5px;
46 right: 9px;
4635f59d 47
fe88ca69
C
48 ::ng-deep .help-tooltip-button {
49 my-global-icon {
50 height: $markdown-icon-height;
51 width: $markdown-icon-width;
b7e21681 52
fe88ca69
C
53 svg {
54 color: #C6C6C6;
55 fill: #C6C6C6;
56 border-radius: 3px;
57 }
b7e21681 58 }
88adad2d 59
fe88ca69
C
60 &:focus, &:active, &:hover {
61 my-global-icon svg {
62 background-color: #C6C6C6;
63 color: pvar(--mainBackgroundColor);
64 fill: pvar(--mainBackgroundColor);
65 }
88adad2d 66 }
4635f59d 67 }
fe88ca69 68}
79671021 69
fe88ca69
C
70.comment-buttons {
71 display: flex;
72 justify-content: flex-end;
4635f59d 73}
93ea9c47 74
f34cc2a4
K
75.emoji-flex {
76 display: flex;
77 flex-flow: row wrap;
78 align-items: center;
79
80 .emoji-flex-item {
81 text-align: left;
82 margin: auto;
83 min-width: 227px;
84 flex: 1;
85
86 code {
87 display: inline-block;
88 vertical-align: middle;
89 margin-left: 5px;
ee3bd9db 90 }
ee3bd9db 91 }
92}
93
fc641ded 94@media screen and (max-width: 600px) {
fe88ca69
C
95 textarea,
96 .comment-buttons button {
93ea9c47
C
97 font-size: 14px !important;
98 }
fc641ded
C
99
100 textarea {
101 padding: 5px !important;
102 }
660d11e9
RK
103}
104
105.modal-body {
fe88ca69 106 > span {
660d11e9
RK
107 float: left;
108 margin-bottom: 20px;
109 }
fc641ded 110}