xref: /template/writr/css/plugins/discussion.less (revision d59ee214e107adb1a211615283ac9974872d2eab) 
1/* =Discussion & Avatar Plugin
2----------------------------------------------- */
3
4.comment_subscribe {
5	display: flex;
6	padding-top: 10px;
7}
8
9.comment_subscribe label {
10	padding-left: 10px;
11}
12
13.dokuwiki div.toolbar {
14    display: block;
15}
16
17.dokuwiki .vcard img.photo {
18    border-radius: 50%;
19    border: solid 3px @ini_background;
20}
21
22.dokuwiki div.comment_wrapper::before {
23    content: "top";
24    position: absolute;
25    text-align: center;
26    font-size: 16px;
27    line-height: 16px;
28    height: 16px;
29    width: @ini_content_width;
30    border-bottom-left-radius: 16px;
31    border-bottom-right-radius: 16px;
32    background-color: @ini_background;
33    color: @ini_background;
34}
35
36.dokuwiki div.comment_wrapper::after {
37    content: "bottom";
38    position: absolute;
39    bottom: 0px;
40    text-align: center;
41    font-size: 16px;
42    line-height: 16px;
43    height: 16px;
44    width: @ini_content_width;
45    border-top-left-radius: 16px;
46    border-top-right-radius: 16px;
47    background-color: @ini_background;
48    color: @ini_background;
49}
50
51.makeFullWidth div.comment_wrapper::before,
52.makeFullWidth div.comment_wrapper::after {
53	width: ~"calc(100vw - 400px - @{ini_content_border})";
54}
55
56@media only screen and (max-width: 959px) {
57    .dokuwiki div.comment_wrapper::before,
58    .dokuwiki div.comment_wrapper::after {
59        width: 100vw;
60    }
61}
62
63.dokuwiki div.comment_wrapper {
64    position: relative;
65    margin: 0px -40px;
66    padding: 0px;
67    background-color: @ini_background;
68
69    .hfeed{
70        background-color: @ini_text_alt;
71        padding: 40px 40px;
72        padding-bottom: 16px;
73    }
74
75    h2 {
76        background-color: @ini_text_alt;
77        color: @ini_background;
78        margin: 0px;
79        padding-top: 56px;
80        font-size: 32px;
81
82        a {
83            color: @ini_background;
84            padding: 0px 40px;
85            display: block;
86            line-height: 24px;
87        }
88    }
89
90    div.hentry {
91        padding-bottom: 10px;
92        margin-bottom: 20px;
93        margin-right: -40px;
94
95        div.comment_head {
96            color: @ini_text_alt;
97            background-color: @ini_background;
98            margin-left: 54px;
99            border-top-left-radius: 16px;
100            border-top-right-radius: 16px;
101            padding-top: 16px;
102            padding-left: 16px;
103
104            span.vcard {
105                position: relative;
106
107                img {
108                    position: absolute;
109                    left: -92px;
110                    width: 60px;
111                    height: 60px;
112                    min-width: 60px;
113                    min-height: 60px;
114                    max-width: 60px;
115                    max-height: 60px;
116                }
117            }
118        }
119
120        div.comment_buttons {
121            text-align: right;
122            background-color: @ini_background;
123            margin-left: 54px;
124            padding-bottom: 8px;
125            padding-left: 16px;
126            padding-right: 16px;
127            border-bottom-left-radius: 16px;
128            border-bottom-right-radius: 16px;
129
130            div.no {
131                font-size: 0px;
132            }
133
134            input[type=submit] {
135                border-radius: 0px;
136            }
137            .button:first-child [type=submit] {
138                border-top-left-radius: 20px;
139                border-bottom-left-radius: 20px;
140            }
141            .button:last-child [type=submit] {
142                border-top-right-radius: 20px;
143                border-bottom-right-radius: 20px;
144            }
145        }
146        input.button {
147            font-size: 12px;
148            padding: 5px 10px;
149        }
150
151        /* dead code for now due to bug in discussion plugin */
152        div.comment_head span.author {
153            background-position: -2px 3px;
154        }
155        div.comment_head abbr.published {
156            background-position: -1px 4px;
157        }
158        div.comment_body {
159            border-bottom-width: 0;
160            background-color: @ini_background;
161            margin-left: 54px !important;
162            padding-left: 16px;
163            padding-right: 16px;
164
165            p {
166                margin-bottom: 0px;
167                padding-bottom: 20px;
168            }
169        }
170    }
171
172    div.comment_form {
173        padding: 8px 16px;
174        background-color: @ini_background;
175        margin: 0px -40px;
176        margin-bottom: 32px;
177        border-radius: 16px;
178
179        textarea {
180            border-color: @ini_theme_color;
181            background-color: @ini_background;
182            padding: 16px;
183            margin-top: 8px;
184        }
185
186        .no {
187            font-size: 0px;
188
189            div{
190                font-size: 16px;
191            }
192
193            #discussion__comment_preview {
194                font-size: 16px;
195            }
196
197            [type=submit],[type=button] {
198                border-radius: 0px;
199            }
200
201            .comment_submit {
202                border-top-left-radius: 20px;
203                border-bottom-left-radius: 20px;
204            }
205
206            .comment_preview_button {
207                border-top-right-radius: 20px;
208                border-bottom-right-radius: 20px;
209            }
210
211            .comment_cancel {
212                font-size: 16px;
213                margin-left: 16px;
214            }
215        }
216    }
217
218    div.comment_preview {
219        padding: 0;
220        border-width: 0;
221        background: @ini_background_alt;
222    }
223}
224