Verzeichnisstruktur phpBB-3.2.0
- Veröffentlicht
- 06.01.2017
So funktioniert es
|
|
Auf das letzte Element klicken. Dies geht jeweils ein Schritt zurück |
Auf das Icon klicken, dies öffnet das Verzeichnis. Nochmal klicken schließt das Verzeichnis. |
|
|
(Beispiel Datei-Icons)
|
Auf das Icon klicken um den Quellcode anzuzeigen |
responsive.css
001 /* Responsive Design
002 ---------------------------------------- */
003
004 @media (max-width: 320px) {
005 select, .inputbox {
006 max-width: 240px;
007 }
008 }
009
010 /* Notifications list
011 ----------------------------------------*/
012 @media (max-width: 350px) {
013 .dropdown-extended .dropdown-contents {
014 width: auto;
015 }
016 }
017
018 @media (max-width: 430px) {
019 .action-bar .search-box .inputbox {
020 width: 120px;
021 }
022
023 .section-viewtopic .search-box .inputbox {
024 width: 57px;
025 }
026
027 .action-bar .search-box .inputbox ::-moz-placeholder {
028 content: "Search...";
029 }
030
031 .action-bar .search-box .inputbox :-ms-input-placeholder {
032 content: "Search...";
033 }
034
035 .action-bar .search-box .inputbox ::-webkit-input-placeholder {
036 content: "Search...";
037 }
038 }
039
040 @media (max-width: 500px) {
041 dd label {
042 white-space: normal;
043 }
044
045 select, .inputbox {
046 max-width: 260px;
047 }
048
049 .captcha-panel dd.captcha {
050 margin-left: 0;
051 }
052
053 .captcha-panel dd.captcha-image img {
054 width: 100%;
055 }
056
057 dl.details dt, dl.details dd {
058 width: auto;
059 float: none;
060 text-align: left;
061 }
062
063 dl.details dd {
064 margin-left: 20px;
065 }
066
067 p.responsive-center {
068 float: none;
069 text-align: center;
070 margin-bottom: 5px;
071 }
072
073 .action-bar > div {
074 margin-bottom: 5px;
075 }
076
077 .action-bar > .pagination {
078 float: none;
079 clear: both;
080 padding-bottom: 1px;
081 text-align: center;
082 }
083
084 .action-bar > .pagination li.page-jump {
085 margin: 0 2px;
086 }
087
088 p.jumpbox-return {
089 display: none;
090 }
091
092 .display-options > label:nth-child(1) {
093 display: block;
094 margin-bottom: 5px;
095 }
096
097 .attach-controls {
098 margin-top: 5px;
099 width: 100%;
100 }
101
102 .quick-links .dropdown-trigger span {
103 display: none;
104 }
105 }
106
107 @media (max-width: 550px) {
108 ul.topiclist.forums dt {
109 margin-right: 0;
110 }
111
112 ul.topiclist.forums dt .list-inner {
113 margin-right: 0;
114 }
115
116 ul.topiclist.forums dd.lastpost {
117 display: none;
118 }
119 }
120
121 @media (max-width: 700px) {
122 .responsive-hide { display: none !important; }
123 .responsive-show { display: block !important; }
124 .responsive-show-inline { display: inline !important; }
125 .responsive-show-inline-block { display: inline-block !important; }
126
127 /* Content wrappers
128 ----------------------------------------*/
129 html {
130 height: auto;
131 }
132
133 body {
134 padding: 0;
135 }
136
137 .wrap {
138 border: none;
139 border-radius: 0;
140 margin: 0;
141 min-width: 290px;
142 padding: 0 5px;
143 }
144
145 /* Common block wrappers
146 ----------------------------------------*/
147 .headerbar, .navbar, .forabg, .forumbg, .post, .panel {
148 border-radius: 0;
149 margin-left: -5px;
150 margin-right: -5px;
151 }
152
153 .cp-main .forabg, .cp-main .forumdb, .cp-main .post, .cp-main .panel {
154 border-radius: 7px;
155 }
156
157 /* Logo block
158 ----------------------------------------*/
159 .site-description {
160 float: none;
161 width: auto;
162 text-align: center;
163 }
164
165 .logo {
166 /* change display value to inline-block to show logo */
167 display: none;
168 float: none;
169 padding: 10px;
170 }
171
172 .site-description h1, .site-description p {
173 text-align: inherit;
174 float: none;
175 margin: 5px;
176 line-height: 1.2em;
177 overflow: hidden;
178 text-overflow: ellipsis;
179 }
180
181 .site-description p, .search-header {
182 display: none;
183 }
184
185 /* Navigation
186 ----------------------------------------*/
187 .headerbar + .navbar {
188 margin-top: -5px;
189 }
190
191 /* Search
192 ----------------------------------------*/
193 .responsive-search { display: block !important; }
194
195 /* .topiclist lists
196 ----------------------------------------*/
197 li.header dt {
198 text-align: center;
199 text-transform: none;
200 line-height: 1em;
201 font-size: 1.2em;
202 padding-bottom: 4px;
203 }
204
205 ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner {
206 margin-right: 0 !important;
207 padding-right: 0;
208 }
209
210 ul.topiclist li.header dd {
211 display: none !important;
212 }
213
214 ul.topiclist dt, ul.topiclist dt .list-inner,
215 ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner,
216 ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner,
217 ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner {
218 margin-right: 0;
219 }
220
221 ul.topiclist dt .list-inner.with-mark {
222 padding-right: 34px;
223 }
224
225 ul.topiclist dt .list-inner {
226 min-height: 28px;
227 }
228
229 ul.topiclist li.header dt .list-inner {
230 min-height: 0;
231 }
232
233 ul.topiclist dd {
234 display: none;
235 }
236 ul.topiclist dd.mark {
237 display: block;
238 }
239
240 /* Forums and topics lists
241 ----------------------------------------*/
242 ul.topiclist.forums dt {
243 margin-right: -250px;
244 }
245
246 ul.topiclist dd.mark {
247 display: block;
248 position: absolute;
249 right: 5px;
250 top: 0;
251 margin: 0;
252 width: auto;
253 min-width: 0;
254 text-align: left;
255 }
256
257 ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
258 position: relative;
259 left: 0;
260 width: auto;
261 display: inline;
262 font-weight: normal;
263 }
264
265 li.row .responsive-show strong {
266 font-weight: bold;
267 color: inherit;
268 }
269
270 ul.topiclist li.row dt a.subforum {
271 vertical-align: bottom;
272 overflow: hidden;
273 text-overflow: ellipsis;
274 max-width: 100px;
275 }
276
277 /* Pagination
278 ----------------------------------------*/
279 .pagination > ul {
280 margin: 5px 0 0;
281 }
282
283 .row .pagination {
284 margin-top: 2px;
285 margin-bottom: 2px;
286 }
287
288 .row .pagination .ellipsis + li {
289 display: none !important;
290 }
291
292 /* Responsive tables
293 ----------------------------------------*/
294 table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
295 display: block;
296 }
297
298 table.responsive thead, table.responsive th {
299 display: none;
300 }
301
302 table.responsive.show-header thead, table.responsive.show-header th:first-child {
303 display: block;
304 width: auto !important;
305 text-align: left !important;
306 }
307
308 table.responsive.show-header th:first-child span.rank-img {
309 display: none;
310 }
311
312 table.responsive tr {
313 margin: 2px 0;
314 }
315
316 table.responsive td {
317 width: auto !important;
318 text-align: left !important;
319 padding: 4px;
320 }
321
322 table.responsive td.empty {
323 display: none !important;
324 }
325
326 table.responsive td > dfn {
327 display: inline-block !important;
328 }
329
330 table.responsive td > dfn:after {
331 content: ':';
332 padding-right: 5px;
333 }
334
335 table.responsive span.rank-img {
336 float: none;
337 padding-right: 5px;
338 }
339
340 table.responsive.memberlist td:first-child input[type="checkbox"] {
341 float: right;
342 }
343
344 /* Forms
345 ----------------------------------------*/
346 fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt {
347 width: auto;
348 float: none;
349 }
350
351 fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd {
352 margin-left: 20px;
353 }
354
355 textarea, dd textarea, .message-box textarea {
356 width: 100%;
357 -moz-box-sizing: border-box;
358 box-sizing: border-box;
359 }
360
361 dl.pmlist dt {
362 width: auto !important;
363 margin-bottom: 5px;
364 }
365
366 dl.pmlist dd {
367 display: inline-block;
368 margin-left: 0 !important;
369 }
370
371 dl.pmlist dd:first-of-type {
372 padding-left: 20px;
373 }
374
375 .smiley-box, .message-box {
376 float: none;
377 width: auto;
378 }
379
380 .smiley-box {
381 margin-top: 5px;
382 }
383
384 .bbcode-status {
385 display: none;
386 }
387
388 .colour-palette, .colour-palette tbody, .colour-palette tr {
389 display: block;
390 }
391
392 .colour-palette td {
393 display: inline-block;
394 margin-right: 2px;
395 }
396
397 .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) {
398 display: none;
399 }
400
401 fieldset.quick-login label {
402 display: block;
403 margin-bottom: 5px;
404 white-space: normal;
405 }
406
407 fieldset.quick-login label > span {
408 display: inline-block;
409 min-width: 100px;
410 }
411
412 fieldset.quick-login input.inputbox {
413 width: 85%;
414 max-width: 300px;
415 margin-left: 20px;
416 }
417
418 fieldset.quick-login label[for="autologin"] {
419 display: inline-block;
420 text-align: right;
421 min-width: 50%;
422 }
423
424 /* User profile
425 ----------------------------------------*/
426 .column1, .column2, .left-box.profile-details {
427 float: none;
428 width: auto;
429 }
430
431 /* Polls
432 ----------------------------------------*/
433 fieldset.polls dt {
434 width: 90%;
435 }
436
437 fieldset.polls dd.resultbar {
438 padding-left: 20px;
439 }
440
441 fieldset.polls dd.poll_option_percent {
442 width: 20%;
443 }
444
445 fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent {
446 margin-top: 5px;
447 }
448
449 /* Post
450 ----------------------------------------*/
451 .postbody {
452 position: inherit;
453 }
454
455 .postprofile, .postbody, .search .postbody {
456 display: block;
457 width: auto;
458 float: none;
459 padding: 0;
460 min-height: 0;
461 }
462
463 .post .postprofile {
464 width: auto;
465 border-width: 0 0 1px 0;
466 padding-bottom: 5px;
467 margin: 0;
468 margin-bottom: 5px;
469 min-height: 40px;
470 overflow: hidden;
471 }
472
473 .postprofile dd {
474 display: none;
475 }
476
477 .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
478 display: block;
479 margin: 0;
480 }
481
482 .postprofile .has-avatar .avatar-container {
483 margin: 0;
484 overflow: inherit;
485 }
486
487 .postprofile .avatar-container:after {
488 clear: none;
489 }
490
491 .postprofile .avatar {
492 margin-right: 5px;
493 }
494
495 .postprofile .avatar img {
496 width: auto !important;
497 height: auto !important;
498 max-height: 32px;
499 }
500
501 .has-profile .postbody h3 {
502 margin-left: 0 !important;
503 margin-right: 0 !important;
504 }
505
506 .has-profile .post-buttons {
507 right: 30px;
508 top: 15px;
509 }
510
511 .online {
512 background-size: 40px;
513 }
514
515 /* Misc stuff
516 ----------------------------------------*/
517 h2 {
518 margin-top: .5em;
519 }
520
521 p {
522 margin-bottom: .5em;
523 overflow: hidden;
524 }
525
526 p.rightside {
527 margin-bottom: 0;
528 }
529
530 fieldset.display-options label {
531 display: block;
532 clear: both;
533 margin-bottom: 5px;
534 }
535
536 dl.mini dd.pm-legend {
537 float: left;
538 min-width: 200px;
539 }
540
541 .topicreview {
542 margin: 0 -5px;
543 padding: 0 5px;
544 }
545
546 fieldset.display-actions {
547 white-space: normal;
548 }
549
550 .phpbb_alert {
551 width: auto;
552 margin: 0 5px;
553 }
554
555 .attach-comment dfn {
556 width: 100%;
557 }
558 }
559
560 @media (min-width: 700px) {
561 .postbody { width: 70%; }
562 }
563
564 @media (min-width: 850px) {
565 .postbody { width: 76%; }
566 }
567
568 @media (max-width: 850px) {
569 .postprofile { width: 28%; }
570 }
571
572 @media (min-width: 701px) and (max-width: 950px) {
573 .row .pagination {
574 margin-top: 2px;
575 margin-bottom: 2px;
576 }
577
578 ul.topiclist dt {
579 margin-right: -410px;
580 }
581
582 ul.topiclist dt .list-inner {
583 margin-right: 410px;
584 }
585
586 dd.posts, dd.topics, dd.views {
587 width: 80px;
588 }
589 }
590
591