]>
Commit | Line | Data |
---|---|---|
4635f59d C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
cf117aaa | 4 | .root-comment { |
4635f59d | 5 | font-size: 15px; |
cf117aaa | 6 | display: flex; |
4635f59d | 7 | |
fc641ded C |
8 | .left { |
9 | display: flex; | |
10 | flex-direction: column; | |
11 | align-items: center; | |
12 | margin-right: 10px; | |
13 | ||
14 | .vertical-border { | |
15 | width: 2px; | |
16 | height: 100%; | |
17 | background-color: rgba(0, 0, 0, 0.05); | |
18 | margin: 10px 0; | |
19 | } | |
20 | } | |
21 | ||
88adad2d RK |
22 | .right { |
23 | width: 100%; | |
24 | } | |
25 | ||
69222afa | 26 | .comment-avatar { |
cf117aaa | 27 | @include avatar(36px); |
4635f59d C |
28 | } |
29 | ||
cf117aaa C |
30 | .comment { |
31 | flex-grow: 1; | |
c9ffd532 C |
32 | // Fix word-wrap with flex |
33 | min-width: 1px; | |
cf117aaa | 34 | |
1263fc4e C |
35 | .highlighted-comment { |
36 | display: inline-block; | |
37 | background-color: #F5F5F5; | |
38 | color: #3d3d3d; | |
39 | padding: 0 5px; | |
40 | font-size: 13px; | |
41 | margin-bottom: 5px; | |
42 | font-weight: $font-semibold; | |
43 | border-radius: 3px; | |
44 | } | |
45 | ||
cf117aaa C |
46 | .comment-account-date { |
47 | display: flex; | |
48 | margin-bottom: 4px; | |
4635f59d | 49 | |
ae05c991 RK |
50 | .video-author { |
51 | height: 20px; | |
52 | background-color: #888888; | |
53 | border-radius: 12px; | |
54 | margin-bottom: 2px; | |
55 | max-width: 100%; | |
56 | box-sizing: border-box; | |
57 | flex-direction: row; | |
58 | align-items: center; | |
59 | display: inline-flex; | |
60 | padding-right: 6px; | |
61 | padding-left: 6px; | |
62 | color: white !important; | |
63 | } | |
64 | ||
cf117aaa | 65 | .comment-account { |
4cb6d457 C |
66 | @include disable-default-a-behaviour; |
67 | ||
93ea9c47 | 68 | word-break: break-all; |
9a0fc840 | 69 | color: var(--mainForegroundColor); |
cf117aaa | 70 | font-weight: $font-bold; |
ae05c991 | 71 | font-size: 90%; |
cf117aaa C |
72 | } |
73 | ||
74 | .comment-date { | |
ae05c991 | 75 | font-size: 90%; |
457bb213 | 76 | color: $grey-foreground-color; |
ae05c991 RK |
77 | margin-left: 5px; |
78 | text-decoration: none; | |
cf117aaa | 79 | } |
4635f59d | 80 | } |
4635f59d | 81 | |
2890b615 | 82 | .comment-html { |
7a14004b | 83 | @include peertube-word-wrap; |
69222afa | 84 | margin-bottom: 10px; |
54a932e8 | 85 | |
6304df89 | 86 | // Mentions |
03652b31 | 87 | ::ng-deep a { |
e8cb4409 | 88 | |
e8cb4409 | 89 | &:not(.linkified-url) { |
6304df89 C |
90 | @include disable-default-a-behaviour; |
91 | ||
66467298 | 92 | color: var(--mainForegroundColor); |
6304df89 | 93 | |
e8cb4409 C |
94 | font-weight: $font-semibold; |
95 | } | |
6304df89 | 96 | |
2890b615 | 97 | } |
69222afa JM |
98 | |
99 | &.comment-html-deleted { | |
100 | color: $grey-foreground-color; | |
101 | } | |
2890b615 C |
102 | } |
103 | ||
cf117aaa | 104 | .comment-actions { |
69222afa | 105 | margin-bottom: 10px; |
4cb6d457 | 106 | display: flex; |
4635f59d | 107 | |
6304df89 C |
108 | .comment-action-reply, |
109 | .comment-action-delete { | |
457bb213 | 110 | color: $grey-foreground-color; |
cf117aaa | 111 | cursor: pointer; |
4cb6d457 C |
112 | margin-right: 10px; |
113 | ||
114 | &:hover { | |
66467298 | 115 | color: var(--mainForegroundColor); |
4cb6d457 | 116 | } |
cf117aaa C |
117 | } |
118 | } | |
4635f59d | 119 | } |
c9ffd532 | 120 | |
c9ffd532 | 121 | .children { |
fc641ded C |
122 | // Reduce avatars size for replies |
123 | .comment-avatar { | |
124 | @include avatar(25px); | |
125 | } | |
126 | ||
127 | .left { | |
128 | margin-right: 6px; | |
129 | } | |
c9ffd532 C |
130 | } |
131 | } | |
132 | ||
133 | @media screen and (max-width: 1200px) { | |
134 | .children { | |
fc641ded | 135 | margin-left: -10px; |
c9ffd532 C |
136 | } |
137 | } | |
138 | ||
139 | @media screen and (max-width: 600px) { | |
c9ffd532 | 140 | .root-comment { |
fc641ded C |
141 | .children { |
142 | margin-left: -20px; | |
93ea9c47 | 143 | |
fc641ded C |
144 | .left { |
145 | align-items: flex-start; | |
146 | ||
147 | .vertical-border { | |
148 | margin-left: 2px; | |
149 | } | |
150 | } | |
151 | } | |
152 | ||
153 | .comment { | |
154 | .comment-account-date { | |
155 | flex-direction: column; | |
156 | ||
157 | .comment-date { | |
158 | margin-left: 0; | |
159 | } | |
160 | } | |
161 | } | |
93ea9c47 | 162 | } |
457bb213 | 163 | } |