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