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