diff options
Diffstat (limited to 'client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss')
-rw-r--r-- | client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss new file mode 100644 index 000000000..4dd025fc4 --- /dev/null +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss | |||
@@ -0,0 +1,72 @@ | |||
1 | @import 'variables'; | ||
2 | @import 'mixins'; | ||
3 | |||
4 | form { | ||
5 | margin: 20px 20px 0 0; | ||
6 | |||
7 | .form-group:first-child { | ||
8 | // Keep place to display error message without modifying the height | ||
9 | min-height: 125px; | ||
10 | } | ||
11 | } | ||
12 | |||
13 | textarea { | ||
14 | @include peertube-textarea(100%, 70px); | ||
15 | |||
16 | margin-top: 20px; | ||
17 | } | ||
18 | |||
19 | .messages { | ||
20 | display: flex; | ||
21 | flex-direction: column; | ||
22 | overflow-y: scroll; | ||
23 | } | ||
24 | |||
25 | .no-messages { | ||
26 | display: flex; | ||
27 | font-size: 15px; | ||
28 | justify-content: center; | ||
29 | } | ||
30 | |||
31 | .message-block { | ||
32 | margin: 0 5px 10px 0; | ||
33 | max-width: 60%; | ||
34 | |||
35 | .author { | ||
36 | color: var(--greyForegroundColor); | ||
37 | font-size: 14px; | ||
38 | padding: 0 0 3px 10px; | ||
39 | } | ||
40 | |||
41 | .bubble { | ||
42 | border-radius: 10px; | ||
43 | padding: 5px 10px; | ||
44 | color: var(--mainForegroundColor); | ||
45 | background-color: var(--greyBackgroundColor); | ||
46 | |||
47 | .content { | ||
48 | font-size: 15px; | ||
49 | } | ||
50 | |||
51 | .date { | ||
52 | font-size: 13px; | ||
53 | color: var(--greyForegroundColor); | ||
54 | } | ||
55 | } | ||
56 | |||
57 | &.by-me { | ||
58 | |||
59 | .bubble { | ||
60 | color: var(--mainBackgroundColor); | ||
61 | background-color: var(--mainColorLighter); | ||
62 | |||
63 | .date { | ||
64 | color: var(--mainBackgroundColor); | ||
65 | } | ||
66 | } | ||
67 | } | ||
68 | |||
69 | &.by-moderator { | ||
70 | align-self: flex-end; | ||
71 | } | ||
72 | } | ||