reprogl

1
@import "settings";
2

3
@mixin note-font {
4
    color: lighten($color-main-dark, 35%);
5
    font-size: 75%;
6
}
7

8
section.comments {
9
    background: darken($color-main-light, 3%);
10
    padding: 0;
11
    margin: 0 rem-calc(15) 0;
12
    border-radius: rem-calc(5);
13

14
    &.statistic {
15
        margin: 0 0 rem-calc(20);
16
        padding-top: rem-calc(20);
17
    }
18

19
    h3 {
20
        text-transform: uppercase;
21
        font-size: rem-calc(30);
22
    }
23

24
    .comment-item {
25
        .comment-body {
26
            background: $color-main-light;
27
            margin-bottom: 1em;
28
            padding: 9px 0.6em 0.6em 9px;
29
            border-radius: 0 0 rem-calc(5) rem-calc(5);
30

31
            .avatar {
32
                @include avatar-style;
33
                margin-top: -58px;
34

35
                @media only screen and (min-width: 48em) {
36
                    margin-top: -34px;
37
                    margin-right: 0;
38
                }
39

40
                @media only screen and (max-width: 40.0625em) {
41
                    display: none;
42
                }
43
            }
44

45
            .comment-text {
46
                margin-left: 0.6em;
47
                a {
48
                    &:hover, &:focus, &:active {
49
                        color: darken($color-main-contrast, 10%);
50
                    }
51
                }
52

53
                @media only screen and (min-width: 48em) {
54
                    margin-left: 99px;
55
                }
56

57
                .ua-note {
58
                    color: lighten($color-main-dark, 35%);
59
                    font-size: 75%;
60
                }
61
                hr {
62
                    margin: 0.5em 0 0.25em;
63
                    border: solid #DDD;
64
                    border-width: 1px 0 0;
65
                }
66
            }
67

68
            .comment-reply {
69
                margin: 0.5em 0 0;
70
                padding: 0.3em 0 0;
71
                text-align: right;
72

73
                span {
74
                    @include green-button;
75
                }
76
            }
77

78
            &:after {
79
                clear: both;
80
                display: block;
81
                content: '';
82
            }
83
        }
84

85
        .comment-header {
86
            background: $color-main-contrast;
87
            padding: 4px 1em 4px 108px;
88
            color: $color-main-light;
89
            border-radius: rem-calc(5) rem-calc(5) 0 0;
90
            font-weight: 400;
91

92
            time {
93
                float: right;
94
                display: inline;
95
                color: $color-main-light;
96
                max-width: 8em;
97

98
                @media only screen and (min-width: 48em) {
99
                    max-width: 100%;
100
                }
101
            }
102

103
            a {
104
                color: $color-comment-header-link;
105
                text-decoration: none;
106

107
                &:after {
108
                    content: '\21B5';
109
                }
110
                &:hover, &:focus, &:active {
111
                    color: darken($color-comment-header-link, 5%);
112
                }
113
            }
114

115
            &:after {
116
                visibility: hidden;
117
                display: block;
118
                content: '';
119
                clear: both;
120
            }
121

122
            .avatar {
123
                @include avatar-style;
124
                display: none;
125
            }
126

127
            @media only screen and (max-width: 40.0625em) {
128
                padding-left: 9px;
129
                padding-bottom: 8px;
130
                .avatar {
131
                    display: block;
132
                    margin-top: 3px;
133
                    margin-right: 13px;
134
                }
135
            }
136
        }
137

138
        @for $idx from 1 through 20 {
139
            &.depth-#{$idx} {
140
                margin-left: ($idx - 1) * 1.5rem;
141
            }
142
        }
143
    }
144

145
    #topic-reply {
146
        background: $color-main-light;
147
        margin-bottom: 1em;
148
        padding: 9px 0.6em 0.6em 9px;
149
        border-radius: 0 0 rem-calc(5) rem-calc(5);
150
        text-align: center;
151

152
        span {
153
            margin-left: rem-calc(16);
154
            @include green-button;
155
        }
156
    }
157

158
    #comment_add {
159
        position: relative;
160
        border: 2px $color-main-light solid;
161
        border-radius: rem-calc(5);
162
        background: darken($color-main-light, 8%);
163
        padding: 1em 0 0.5em;
164
        margin-bottom: 1em;
165

166
        form {
167
            button {
168
                background: $color-main-contrast;
169
                font-weight: 400;
170
                border-radius: rem-calc(3);
171

172
                &:hover {
173
                    color: $color-main-light;
174
                    background: lighten($color-main-contrast, 5%);
175
                }
176
            }
177

178
            label.required-field:after {
179
                content: '*';
180
                color: $color-error;
181
                padding-left: 0.2em;
182
            }
183

184
            @media only screen and (min-width: 64em) {
185
                .columns:has(label) {
186
                    padding-right: 0;
187
                }
188

189
                label {
190
                    text-align: right;
191
                }
192
            }
193

194
            @media only screen and (max-width: 64em) {
195
                label.inline {
196
                    margin: 0;
197
                }
198
            }
199
        }
200

201
        .auth_note {
202
            @include note-font;
203
            float: left;
204
        }
205

206
        .columns:has(.auth_note) {
207
            padding-bottom: rem-calc(7);
208
        }
209

210
        .form_note {
211
            @include note-font;
212
            text-align: center;
213
            padding-top: 0.5em;
214
            border-top: 2px $color-main-light dashed;
215
        }
216

217
        .auth-icon {
218
            display: inline-block;
219
            margin-top: -4px;
220
            svg {
221
                border-radius: rem-calc(5);
222
            }
223
        }
224

225
        small.error {
226
            font-style: normal;
227
        }
228
    }
229

230
    @media only screen and (max-width: 48em) {
231
        #comments-wrapper {
232
            padding-left: 0;
233
            padding-right: 0;
234
        }
235

236
        .comment-text {
237
            overflow-wrap: break-word;
238
        }
239
    }
240
}
241

242
section.comments.statistic .comment-item {
243
    .comment-body .avatar {
244
        margin-top: -34px;
245
        display: block;
246
    }
247
    .comment-body .comment-text {
248
        margin-left: 99px;
249
    }
250
    .comment-header {
251
        padding-left: 108px;
252
    }
253
}
254

255
@media only screen and (min-width: 40.0625em) {
256
    section.comments.statistic .comment-item {
257
        min-height: 128px;
258
    }
259
}
260

261
.ajax-loader {
262
    position: absolute;
263
    background-color: #FFF;
264
    top: 0;
265
    bottom: 0;
266
    left: 0;
267
    right: 0;
268
    opacity: 0.5;
269
    display: none;
270
    // display: flex;
271
    justify-content: center;
272
    align-items: center;
273
}
274

275
/*
276
 * Based on https://loading.io/css/
277
 * https://github.com/loadingio/css-spinner/
278
 */
279
.ajax-loader:after {
280
    content: " ";
281
    display: block;
282
    border-radius: 50%;
283
    width: 0;
284
    height: 0;
285
    box-sizing: border-box;
286
    border: 128px solid $color-main-contrast;
287
    border-color: $color-main-contrast transparent $color-main-contrast transparent;
288
    animation: lds-hourglass 1.2s infinite;
289
}
290

291
@keyframes lds-hourglass {
292
    0% {
293
        transform: rotate(0);
294
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
295
    }
296
    50% {
297
        transform: rotate(900deg);
298
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
299
    }
300
    100% {
301
        transform: rotate(1800deg);
302
    }
303
}
304