Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/sass/frontend/5-modules/comments.scss
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
@use '../1-helpers/functions';
2
+
3
+
.ct-comments {
4
+
color: var(--theme-text-color);
5
+
}
6
+
7
+
.ct-has-avatar {
8
+
.ct-comment-content {
9
+
@include functions.media-breakpoint-up(md) {
10
+
padding-inline-start: 70px;
11
+
}
12
+
}
13
+
}
14
+
15
+
.ct-comments-title {
16
+
margin-bottom: 50px;
17
+
}
18
+
19
+
.ct-comment-list {
20
+
21
+
.children {
22
+
@include functions.media-breakpoint-down(sm) {
23
+
padding-inline-start: 35px;
24
+
}
25
+
26
+
@include functions.media-breakpoint-up(md) {
27
+
padding-inline-start: 70px;
28
+
}
29
+
}
30
+
31
+
.comment-respond {
32
+
padding-bottom: 50px;
33
+
34
+
@include functions.media-breakpoint-up(md) {
35
+
padding-inline-start: 70px;
36
+
}
37
+
}
38
+
}
39
+
40
+
// comment
41
+
.ct-comment-inner {
42
+
padding-block: 50px;
43
+
border-top: 1px solid var(--theme-border-color);
44
+
45
+
&:not(.ct-has-reply-form) {
46
+
&:hover .comment-reply-link {
47
+
color: #fff;
48
+
background: var(--theme-button-background-initial-color);
49
+
}
50
+
51
+
.comment-reply-link {
52
+
&:hover {
53
+
background: var(--theme-button-background-hover-color);
54
+
}
55
+
}
56
+
}
57
+
}
58
+
59
+
.ct-comment-meta {
60
+
position: relative;
61
+
margin-bottom: 20px;
62
+
--theme-link-initial-color: var(--theme-text-color);
63
+
64
+
@include functions.media-breakpoint-up(md) {
65
+
display: flex;
66
+
align-items: center;
67
+
}
68
+
69
+
figure {
70
+
position: absolute;
71
+
inset-inline-start: 0;
72
+
border-radius: 100%;
73
+
max-width: var(--max-size, 50px);
74
+
max-height: var(--max-size, 50px);
75
+
76
+
@include functions.media-breakpoint-down(sm) {
77
+
--max-size: 40px;
78
+
}
79
+
80
+
@include functions.media-breakpoint-up(md) {
81
+
top: 0;
82
+
}
83
+
}
84
+
}
85
+
86
+
.ct-has-avatar .ct-comment-meta {
87
+
@include functions.media-breakpoint-down(sm) {
88
+
padding-inline-start: 50px;
89
+
}
90
+
91
+
@include functions.media-breakpoint-up(md) {
92
+
padding-inline-start: 70px;
93
+
}
94
+
}
95
+
96
+
.ct-comment-author {
97
+
--theme-font-size: 16px;
98
+
--theme-link-initial-color: currentColor;
99
+
100
+
margin-bottom: 0;
101
+
}
102
+
103
+
.ct-comment-meta-data {
104
+
display: flex;
105
+
flex-wrap: wrap;
106
+
align-items: center;
107
+
font-size: 11px;
108
+
font-weight: 500;
109
+
text-transform: uppercase;
110
+
111
+
@include functions.media-breakpoint-up(md) {
112
+
margin-inline-start: auto;
113
+
}
114
+
115
+
.comment-edit-link,
116
+
.comment-reply-login {
117
+
&:before {
118
+
content: '/';
119
+
margin-inline: 3px;
120
+
}
121
+
}
122
+
123
+
.comment-edit-link {
124
+
@include functions.media-breakpoint-down(sm) {
125
+
display: none;
126
+
}
127
+
}
128
+
129
+
.comment-reply-link {
130
+
display: flex;
131
+
align-items: center;
132
+
height: 25px;
133
+
padding: 0 10px;
134
+
border-radius: 3px;
135
+
margin-inline-start: var(--margin-inline-start, 20px);
136
+
transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
137
+
background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
138
+
139
+
@include functions.media-breakpoint-down(sm) {
140
+
--margin-inline-start: auto;
141
+
}
142
+
}
143
+
}
144
+
145
+
// reply title
146
+
#reply-title {
147
+
display: flex;
148
+
align-items: center;
149
+
justify-content: space-between;
150
+
margin-bottom: 10px;
151
+
font-size: 16px;
152
+
}
153
+
154
+
#cancel-comment-reply-link {
155
+
padding: 0.5em 0.9em;
156
+
font-size: 11px;
157
+
font-weight: 500;
158
+
text-transform: uppercase;
159
+
border-radius: 3px;
160
+
color: var(--theme-button-text-initial-color, #fff);
161
+
background: var(--theme-button-background-initial-color);
162
+
163
+
&:hover {
164
+
color: var(--theme-button-text-hover-color, #fff);
165
+
background: var(--theme-button-background-hover-color);
166
+
}
167
+
}
168
+
169
+
// respond form
170
+
.comment-respond {
171
+
&:not(:only-child) {
172
+
.comment-reply-title {
173
+
padding-top: 40px;
174
+
border-top: 1px solid var(--theme-border-color);
175
+
}
176
+
}
177
+
178
+
+ .ct-comment-list {
179
+
margin-top: 50px;
180
+
}
181
+
}
182
+
183
+
.comment-form {
184
+
display: grid;
185
+
grid-column-gap: 20px;
186
+
grid-row-gap: 1.5em;
187
+
--theme-content-spacing: 0;
188
+
--theme-link-initial-color: var(--theme-text-color);
189
+
190
+
@include functions.media-breakpoint-up(md) {
191
+
grid-template-columns: repeat(2, 1fr);
192
+
193
+
&.has-website-field {
194
+
grid-template-columns: repeat(3, 1fr);
195
+
}
196
+
197
+
> * {
198
+
grid-column: var(--grid-column, 1/-1);
199
+
}
200
+
201
+
[class*='comment-form-field-input'] {
202
+
--grid-column: span 1;
203
+
}
204
+
}
205
+
206
+
.logged-in-as,
207
+
.comment-notes {
208
+
font-size: 13px;
209
+
}
210
+
211
+
.required {
212
+
color: #cc0000;
213
+
}
214
+
}
215
+
216
+
217
+
// form labels
218
+
[class*='comment-form-field'] label {
219
+
display: flex;
220
+
color: var(--theme-form-text-initial-color);
221
+
margin-bottom: var(--has-classic-forms, 0.5em);
222
+
}
223
+
224
+
.has-labels-inside {
225
+
226
+
[class*='comment-form-field'] {
227
+
position: relative;
228
+
229
+
label {
230
+
position: absolute;
231
+
align-items: center;
232
+
cursor: text;
233
+
margin-bottom: 0;
234
+
inset-inline-start: 0;
235
+
height: var(--has-classic-forms, var(--theme-form-field-height, 40px));
236
+
padding: var(--has-classic-forms, var(--theme-form-field-padding, 0 15px));
237
+
transition: opacity 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955),
238
+
visibility 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955),
239
+
inset-inline-start 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
240
+
}
241
+
242
+
&[class*='textarea'] label {
243
+
height: 40px;
244
+
top: var(--has-classic-forms, 5px);
245
+
}
246
+
247
+
&:focus-within,
248
+
&.ct-not-empty {
249
+
250
+
label {
251
+
opacity: 0;
252
+
visibility: hidden;
253
+
inset-inline-start: 20px;
254
+
}
255
+
}
256
+
}
257
+
}
258
+
259
+
260
+
.comment-form-cookies-consent {
261
+
+ .gdpr-confirm-policy {
262
+
margin-top: -1em;
263
+
}
264
+
}
265
+
266
+
// no comments
267
+
.no-comments {
268
+
padding: 15px 20px;
269
+
text-align: center;
270
+
background: rgba(233, 235, 239, 0.5);
271
+
border-radius: 2px;
272
+
}
273
+
274
+
// comments pagination
275
+
.ct-comments-navigation {
276
+
display: flex;
277
+
justify-content: space-between;
278
+
padding-top: 15px;
279
+
margin-bottom: 15px;
280
+
border-top: 1px solid var(--theme-border-color);
281
+
}