isso.css (7431B)
1 #isso-thread * {
2 -webkit-box-sizing: border-box;
3 -moz-box-sizing: border-box;
4 box-sizing: border-box;
5 }
6 #isso-thread .isso-comment-header a {
7 text-decoration: none;
8 }
9
10 #isso-thread {
11 padding: 0;
12 margin: 0;
13 }
14 #isso-thread > h4 {
15 font-weight: bold;
16 }
17 #isso-thread > .isso-feedlink {
18 float: right;
19 padding-left: 1em;
20 }
21 #isso-thread > .isso-feedlink > a {
22 font-size: 0.8em;
23 vertical-align: bottom;
24 }
25 #isso-thread .textarea {
26 background: var(--background-color);
27 min-height: 58px;
28 outline: 0;
29 }
30 #isso-thread .textarea.placeholder {
31 color: var(--text-color)
32 }
33
34 #isso-root .isso-comment {
35 max-width: 68em;
36 padding-top: 0.95em;
37 margin: 0.95em auto;
38 }
39 #isso-root .preview .isso-comment {
40 padding-top: 0;
41 margin: 0;
42 }
43 #isso-root .isso-comment:not(:first-of-type),
44 .isso-follow-up .isso-comment {
45 border-top: 1px dashed var(--border-2-color);
46 }
47 .isso-comment > div.avatar {
48 display: block;
49 float: left;
50 width: 3em;
51 margin: 3px 15px 0 0;
52 }
53 .isso-comment > div.avatar > svg {
54 max-width: 48px;
55 max-height: 48px;
56 border: 2px solid var(--border-2-color);
57 border-radius: 5px;
58 }
59 .isso-comment > div.text-wrapper {
60 display: block;
61 }
62 .isso-comment .isso-follow-up {
63 padding-left: calc(7% + 20px);
64 }
65 .isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer {
66 font-size: 0.95em;
67 }
68 .isso-comment > div.text-wrapper > .isso-comment-header {
69 font-size: 0.85em;
70 }
71 .isso-comment > div.text-wrapper > .isso-comment-header .spacer {
72 padding: 0 6px;
73 }
74 .isso-comment > div.text-wrapper > .isso-comment-header .spacer,
75 .isso-comment > div.text-wrapper > .isso-comment-header a.permalink,
76 .isso-comment > div.text-wrapper > .isso-comment-header .note,
77 .isso-comment > div.text-wrapper > .isso-comment-header a.parent {
78 color: var(--text-color) !important;
79 font-weight: normal;
80 }
81 .isso-comment > div.text-wrapper > .isso-comment-header .spacer:hover,
82 .isso-comment > div.text-wrapper > .isso-comment-header a.permalink:hover,
83 .isso-comment > div.text-wrapper > .isso-comment-header .note:hover,
84 .isso-comment > div.text-wrapper > .isso-comment-header a.parent:hover {
85 color: var(--accent-color) !important;
86 }
87 .isso-comment > div.text-wrapper > .isso-comment-header .note {
88 float: right;
89 }
90 .isso-comment > div.text-wrapper > .isso-comment-header .author {
91 font-weight: bold;
92 color: var(--text-color);
93 }
94 .isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
95 .isso-comment > div.text-wrapper > .textarea-wrapper .preview {
96 margin-top: 0.2em;
97 }
98 .isso-comment > div.text-wrapper > div.text p {
99 margin-top: 0.2em;
100 }
101 .isso-comment > div.text-wrapper > div.text p:last-child {
102 margin-bottom: 0.2em;
103 }
104 .isso-comment > div.text-wrapper > div.text h1,
105 .isso-comment > div.text-wrapper > div.text h2,
106 .isso-comment > div.text-wrapper > div.text h3,
107 .isso-comment > div.text-wrapper > div.text h4,
108 .isso-comment > div.text-wrapper > div.text h5,
109 .isso-comment > div.text-wrapper > div.text h6 {
110 font-size: 130%;
111 font-weight: bold;
112 }
113 .isso-comment > div.text-wrapper > div.textarea-wrapper .textarea,
114 .isso-comment > div.text-wrapper > div.textarea-wrapper .preview {
115 width: 100%;
116 border: 2px solid var(--border-2-color);
117 border-radius: 5px;
118 }
119 .isso-comment > div.text-wrapper > .isso-comment-footer {
120 font-size: 0.80em;
121 color: var(--text-color);
122 clear: left;
123 line-height: 0;
124 text-align: right;
125 padding-right: 1em;
126 }
127 .isso-feedlink,
128 .isso-comment > div.text-wrapper > .isso-comment-footer a {
129 text-decoration: none;
130 }
131 .isso-feedlink:hover,
132 .isso-comment > div.text-wrapper > .isso-comment-footer a:hover {
133 text-decoration: none;
134 }
135 .isso-comment > div.text-wrapper > .isso-comment-footer .reply:hover {
136 text-decoration: underline;
137 }
138 .isso-comment > div.text-wrapper > .isso-comment-footer > a {
139 position: relative;
140 top: .2em;
141 }
142 .isso-comment > div.text-wrapper > .isso-comment-footer > a + a {
143 padding-left: 1em;
144 }
145 .isso-comment > div.text-wrapper > .isso-comment-footer .votes {
146 color: var(--text-color);
147 }
148 .isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg,
149 .isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg {
150 position: relative;
151 top: .2em;
152 }
153 .isso-comment .isso-postbox {
154 margin-top: 0.8em;
155 }
156 .isso-comment.isso-no-votes span.votes {
157 display: none;
158 }
159
160 .isso-postbox {
161 max-width: 68em;
162 margin: 0 auto 2em;
163 clear: right;
164 }
165 .isso-postbox > .form-wrapper {
166 display: block;
167 padding: 0;
168 }
169 .isso-postbox > .form-wrapper > .auth-section,
170 .isso-postbox > .form-wrapper > .auth-section .post-action {
171 display: flow-root;
172 }
173 .isso-postbox > .form-wrapper .textarea,
174 .isso-postbox > .form-wrapper .preview {
175 margin: 0 0 .3em;
176 padding: .4em .8em;
177 border-radius: 5px;
178 background: var(--background-color);
179 border: 2px solid var(--border-2-color);
180 }
181 .isso-postbox > .form-wrapper input[type=checkbox] {
182 vertical-align: middle;
183 position: relative;
184 bottom: 1px;
185 margin-left: 0;
186 }
187 .isso-postbox > .form-wrapper .notification-section {
188 font-size: 0.90em;
189 padding-top: .3em;
190 }
191 #isso-thread .textarea:focus,
192 #isso-thread input:focus {
193 border-color: var(--accent-color);
194 }
195 .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
196 display: inline-block;
197 position: relative;
198 max-width: 25%;
199 margin: 0;
200 }
201 .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
202 -webkit-appearance: none;
203 -moz-appearance: none;
204 appearance: none;
205 padding: .3em 10px;
206 max-width: 100%;
207 border-radius: 5px;
208 background: var(--background-color);
209 color: var(--text-color);
210 line-height: 1.4em;
211 border: 2px solid var(--border-2-color);
212 }
213 .isso-postbox > .form-wrapper > .auth-section .post-action {
214 display: inline-block;
215 float: right;
216 margin: 0 0 0 5px;
217 }
218 .isso-postbox > .form-wrapper > .auth-section .post-action > input {
219 -webkit-appearance: none;
220 -moz-appearance: none;
221 appearance: none;
222 padding: .3em;
223 border-radius: 5px;
224 border: 2px solid var(--border-1-color);
225 background-color: var(--border-1-color);
226 color: var(--accent-color);
227 cursor: pointer;
228 outline: 0;
229 line-height: 1.4em;
230 }
231 .isso-postbox > .form-wrapper > .auth-section .post-action > input:hover {
232 text-decoration: underline;
233 }
234 .isso-postbox > .form-wrapper > .auth-section .post-action > input:active {
235 color: var(--text-color);
236 }
237 .isso-postbox > .form-wrapper .preview,
238 .isso-postbox > .form-wrapper input[name="edit"],
239 .isso-postbox.preview-mode > .form-wrapper input[name="preview"],
240 .isso-postbox.preview-mode > .form-wrapper .textarea {
241 display: none;
242 }
243 .isso-postbox.preview-mode > .form-wrapper .preview {
244 border: 0;
245 display: block;
246 }
247 .isso-postbox.preview-mode > .form-wrapper input[name="edit"] {
248 display: inline;
249 }
250 .isso-postbox > .form-wrapper .preview {
251 background: var(--background-color);
252 }
253 .isso-postbox > .form-wrapper > .notification-section {
254 display: none;
255 padding-bottom: 10px;
256 }
257 @media screen and (max-width:600px) {
258 .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
259 display: block;
260 max-width: 100%;
261 }
262 .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
263 width: 100%;
264 }
265 }