/ css / catalog_mobile.css
catalog_mobile.css
  1  @media only screen and (max-width: 480px) {
  2    body {
  3      padding: 0 !important;
  4    }
  5    
  6    .party-hat { display: none; }
  7    
  8    div.mobile {
  9      display: block !important;
 10    }
 11    
 12  	.ad-plea,
 13    embed {
 14      display: none !important;
 15    }
 16    
 17    .small .thread,
 18    .extended-small .thread {
 19      width: 155px !important;
 20    }
 21    
 22    div.boardBanner > img {
 23      height: 50px !important;
 24      margin: 5px 0 !important;
 25      max-width: 100% !important;
 26      width: 150px !important;
 27    }
 28    
 29    .boardBanner {
 30      margin-top: 40px;
 31    }
 32    
 33    form[name="post"] {
 34      margin: auto;
 35      max-width: 100%;
 36    }
 37    
 38    #threadWatcher {
 39      max-width: none;
 40      padding: 3px 0;
 41      top: 30px;
 42      left: 0;
 43      width: 100%;
 44      border-left: none;
 45      border-right: none;
 46    }
 47    
 48    #twClose {
 49      position: relative;
 50      top: 0;
 51      margin-top: -1px;
 52      float: left;
 53      right: 0;
 54    }
 55    
 56    #watchList {
 57      padding: 0 10px;
 58    }
 59    
 60    #postForm {
 61      width: auto;
 62    }
 63    
 64    #postForm .mobile {
 65      display: table-row !important;
 66    }
 67    
 68    #postForm textarea,
 69    #postForm input[type="text"] {
 70      margin-right: 0;
 71      width: 220px;
 72    }
 73    
 74    #postForm input[name="sub"] {
 75      width: 160px;
 76    }
 77    
 78    #postForm input[type="password"] {
 79      margin-right: 0;
 80      width: 70px;
 81    }
 82    
 83    #postForm input[type="submit"] {
 84      margin: 0;
 85      padding: 2px 4px 3px;
 86      width: 60px;
 87    }
 88    
 89    .rules {
 90      display: none;
 91    }
 92    
 93    .recaptcha_image_cell {
 94      width: auto !important;
 95      padding: 0 !important;
 96    }
 97  
 98    #captchaFormPart > td > div {
 99      margin-left: 8px;
100    }
101  
102    #recaptcha_table tr > td:last-child {
103      display: none;
104    }
105  
106    #recaptcha_table tr[height="73"] {
107      height: auto !important;
108    }
109  
110    #recaptcha_table tr > td {
111      padding: 0 !important;
112    }
113  
114    #recaptcha_image {
115      width: 280px !important;
116    }
117  
118    #recaptcha_response_field {
119      width: 272px !important;
120      margin: -1px 2px 0 3px !important;
121      font-size: 10pt !important;
122    }
123  
124    #recaptcha_image > img {
125      width: 280px !important;
126    }
127  
128    table#recaptcha_table > tbody > tr:first-child > td:nth-child(2) {
129      display: none;
130    }
131    
132    table#recaptcha_table > tbody > tr:first-child > td:nth-child(2),
133    #recaptcha_table tr > td:last-child {
134      display: none;
135    }
136    
137    #toggleMsgBtn .mobile,
138    #boardNavMobile {
139      display: block !important;
140    }
141    
142    div#boardNavMobile,
143    div#boardNavMobile select,
144    div#boardNavMobile option {
145      font-size: x-small;
146    }
147  
148    .absbot .mobile,
149    .desktop {
150      display: none !important;
151    }
152    
153    #boardNavMobile {
154      font: 10px arial,helvetica,sans-serif;
155      overflow: hidden;
156      padding: 2px 4px;
157      position: fixed;
158      top: 0;
159      left: 0;
160      width: 100%;
161      z-index: 2;
162    }
163    
164    .burichan_new #boardNavMobile,
165    .yotsuba_b_new #boardNavMobile {
166      background-color: #D6DAF0;
167      border-bottom: 2px solid #B7C5D9;
168    }
169    
170    .futaba_new #boardNavMobile,
171    .yotsuba_new #boardNavMobile {
172      background-color: #F0E0D6;
173      border-bottom: 2px solid #D9BFB7;
174    }
175    
176    .tomorrow #boardNavMobile {
177      background-color: #1D1F21;
178      border-bottom: 2px solid #282a2e;
179    }
180    
181    .photon #boardNavMobile {
182      background-color: #ddd;
183      border-bottom: 2px solid #ccc;
184    }
185    
186    .boardSelect {
187      float: left;
188    }
189    
190    .boardSelect strong {
191      padding-right: 5px;
192    }
193    
194    .pageJump {
195      float: right;
196      font-size: 7.5pt;
197      padding-right: 5px;
198      padding-top: 3px;
199    }
200    
201    .boardnav .pageJump a {
202      padding: 0 5px 0 0;
203      text-decoration: none;
204    }
205    
206    #filters {
207      width: 310px !important;
208      margin-left: -160px !important;
209    }
210    
211    #filters-search { display: none; }
212    
213    .filter-boards {
214      width: 30px !important;
215    }
216    
217    .filter-pattern {
218      width: 90px !important;
219    }
220    
221    #theme {
222      width: 310px !important;
223      margin-left: -160px !important;
224    }
225    
226    #theme-css {
227      width: 300px !important;
228      min-width: 300px !important;
229    }
230    
231    #globalToggle {
232      background-color: #FFADAD;
233      background-image: url('/image/buttonfade-red.png');
234      border: 1px solid #C45858;
235      border-radius: 3px 3px 3px 3px;
236      color: #880000;
237      font-weight: bold;
238      padding: 6px 10px 5px;
239      text-align: center;
240      font-size: 10pt;
241      margin: 0 auto 10px;
242      width: 200px;
243      display: block !important;
244      text-decoration: none;
245    }
246    
247    #absbot,
248    #styleSwitcher {
249      display: none;
250    }
251    
252    #bottomnav {
253      padding-bottom: 40px;
254    }
255    
256    #toggleMsgBtn {
257      display: none !important;
258    }
259    
260    #togglePostForm {
261      margin: 11px 0;
262      font-size: inherit;
263      display: block;
264    }
265    
266    #ctrl {
267      text-align: center;
268    }
269    
270    #info {
271      float: none !important;
272      line-height: 30px;
273    }
274    
275    #settings {
276      line-height: 40px;
277      text-align: center !important;
278    }
279    
280    #ctrl hr.mobile {
281      display: block !important;
282      margin-top: 10px;
283    }
284    
285    .ctrl-wrap {
286      white-space: nowrap;
287    }
288    
289    .navLinks {
290      display: block;
291      margin-top: 25px;
292      text-align: center;
293    }
294    
295    .navLinksBottom {
296      margin-bottom: 25px;
297    }
298    
299    .bottomad {
300      margin-bottom: 10px;
301    }
302    
303    .hideMobile {
304      display: none;
305    }
306    
307    #info .navLinks {
308      margin-top: 10px;
309    }
310    
311    #search-label-bottom { display: none !important; }
312    
313    input[type="text"], input[type="password"], textarea {
314      font-size: 16px !important;
315    }
316  
317    img.topad, .topad > div, .topad a img {
318      width: 300px !important;
319      height: 250px !important;
320    }
321  
322    img.middlead, .middlead > div, .middlead a img {
323      width: 234px !important;
324      height: 30px !important;
325      max-width: 100%;
326      overflow: hidden;
327      margin: auto;
328    }
329  
330    img.bottomad, .bottomad > div, .bottomad a img {
331      width: 320px !important;
332      height: 40px !important;
333      max-width: 100%;
334      overflow: hidden;
335      margin: auto;
336    }
337    
338    .mobilebtn .btn-wrap {
339      border-radius: 3px 3px 3px 3px;
340      font-weight: bold;
341      padding: 6px 10px 5px;
342      background-repeat: repeat-x;
343      cursor: pointer;
344    }
345    
346    .mobilebtn .btn-wrap .button {
347      text-decoration: none;
348      color: inherit;
349    }
350    
351    .mobilebtn .btn-wrap:before,
352    .mobilebtn .btn-wrap:after {
353      content: '';
354    }
355    
356    .yotsuba_b_new .mobilebtn .btn-wrap,
357    .burichan_new .mobilebtn .btn-wrap {
358      background-color: #D6DAF0;
359      background-image: url("/image/buttonfade-blue.png");
360      border: 1px solid #B7C5D9;
361      color: #34345C;
362    }
363    
364    .yotsuba_new .mobilebtn .btn-wrap,
365    .futaba_new .mobilebtn .btn-wrap {
366      background-color: #F0E0D6;
367      background-image: url("/image/buttonfade.png");
368      border: 1px solid #C0A69D;
369      color: #880000;
370    }
371    
372    .burichan_new .boardSelect strong,
373    .yotsuba_b_new .boardSelect strong {
374      color: #000;
375    }
376    
377    .tomorrow .mobilebtn .btn-wrap {
378      background-color: rgb(27,28,30);
379      background-image: url("/image/buttonfade-dark.png");
380      background-repeat: repeat-x;
381      border: 1px solid #282A2E;
382      color: #707070;
383    }
384  
385    .photon .mobilebtn .btn-wrap {
386      background: rgb(238,238,238);
387      background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(224,224,224,1) 100%);
388      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(224,224,224,1)));
389      background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
390      background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
391      background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
392      background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
393      border: 1px solid #CCCCCC;
394      color: #333;
395    }
396  }