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