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 }