- Timestamp:
- 2011/08/01 19:03:34 (13 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/version-2_11-dev/html/user_data/packages/sphone/css/products.css
r21081 r21093 2 2 /* =================================================================== 3 3 CSS information 4 5 file name :contents.css 4 6 style info :コンテンツ用(商品一覧/検索結果/商品詳細) 7 5 8 =================================================================== */ 6 9 /* ----------------------------------------------- … … 8 11 ----------------------------------------------- */ 9 12 .pagenumberarea{ 10 11 12 13 14 15 16 17 18 13 margin-top:10px; 14 padding:10px 0; 15 box-shadow:0 1px 1px 1px rgba(255,255,255,1) inset; 16 -webkit-box-shadow:0 1px 1px 0 rgba(255,255,255,1) inset; 17 -moz-box-shadow: 0 1px 1px rgba(255,255,255,1) inset; 18 border-top: 1px solid #CCC; 19 border-bottom: 1px solid #CCC; 20 background:#EEE; 21 display:block; 19 22 } 20 23 .pagenumberarea ul{ 21 22 23 24 25 26 27 24 width:95%; 25 margin:0 auto; 26 border:#A9ABAD solid 1px; 27 border-radius: 5px; 28 -webkit-border-radius: 5px; 29 -moz-border-radius: 5px; 30 display:block; 28 31 } 29 32 .pagenumberarea li { 30 color: #000; 31 font-size:16px; 32 font-weight:bold; 33 margin:0; 34 padding:0; 35 display:inline; 36 float: left; 37 width: 50%; 38 text-align:center; 39 color:#FFF; 40 background:#5393c5; 41 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 42 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 43 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 33 color: #000; 34 font-size:16px; 35 font-weight:bold; 36 margin:0; 37 padding:0; 38 display:inline; 39 float: left; 40 width: 50%; 41 text-align:center; 42 color:#FFF; 43 background:#5393c5; 44 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 45 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 46 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 47 } 48 .pagenumberarea li a:link,.pagenumberarea li a:visited{ 49 color:#000; 44 50 } 45 51 .pagenumberarea li a { 46 47 48 49 50 52 color: #FFF; 53 display: block; 54 padding:5px 0; 55 text-decoration: none; 56 text-shadow: 1px 1px 1px rgba(255,255,255,1); 51 57 } 52 58 .pagenumberarea li.on_number{ 53 54 55 56 59 color: #FFF; 60 display: block; 61 padding:5px 0; 62 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 57 63 } 58 64 .pagenumberarea li:first-child{ 59 60 61 65 border-radius: 5px 0 0 5px; 66 -moz-border-radius: 5px 0 0 5px; 67 -webkit-border-radius: 5px 0 0 5px; 62 68 } 63 69 .pagenumberarea li:last-child{ 64 65 66 70 border-radius: 0 5px 5px 0; 71 -moz-border-radius: 0 5px 5px 0; 72 -webkit-border-radius: 0 5px 5px 0; 67 73 } 68 74 .pagenumberarea li:first-child a{ 69 70 71 72 73 74 75 76 75 border-radius: 5px 0 0 5px; 76 -moz-border-radius: 5px 0 0 5px; 77 -webkit-border-radius: 5px 0 0 5px; 78 border-right:#A9ABAD solid 1px; 79 text-shadow: 1px 1px 1px rgba(255,255,255,1); 80 background:#FDFDfD; 81 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 82 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 77 83 } 78 84 .pagenumberarea li:last-child a{ 79 80 81 82 83 84 85 86 87 88 89 90 } 91 .pagenumberarea li :first-child a:hover,.pagenumberarea li:last-child a:hover{92 93 94 95 96 85 border-radius: 0 5px 5px 0; 86 -moz-border-radius: 0 5px 5px 0; 87 -webkit-border-radius: 0 5px 5px 0; 88 border-left:#FFF solid 1px; 89 text-shadow: 1px 1px 1px rgba(255,255,255,1); 90 background:#FDFDfD; 91 background: -moz-linear-gradient(center top, #FDFDFD 0%,#D7DDE3 100%); 92 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD),color-stop(1, #D7DDE3)); 93 box-shadow: 1px 0px 1px 1px rgba(255,255,255,1) inset; 94 -webkit-box-shadow: 1px 0px 1px 0px rgba(255,255,255,1) inset; 95 -moz-box-shadow: 1px 1px 1px 0px rgba(255,255,255,1) inset; 96 } 97 .pagenumberarea li.on_number{ 98 color:#FFF; 99 text-shadow: 0px 1px 1px rgba(0,0,0,0.5); 100 background:#5393c5; 101 background: -moz-linear-gradient(center top, #5393c5 10%,#80b6e2 100%); 102 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5393c5),color-stop(1, #80b6e2)); 97 103 } 98 104 ul.status_icon { 99 105 clear:both; 100 106 } 101 107 ul.status_icon li{ 102 103 104 105 106 107 108 109 110 108 color:#FFF; 109 background:#9AAABD; 110 display:inline; 111 float:left; 112 margin-right :5px; 113 margin-bottom:2px; 114 padding:2px 5px; 115 font-size:11px; 116 text-shadow:none; 111 117 } 112 118 /* ----------------------------------------------- … … 114 120 ----------------------------------------------- */ 115 121 #product_list{ 116 122 padding-bottom:35px; 117 123 } 118 124 … … 120 126 ----------------------------------------------- */ 121 127 .list_area { 122 123 124 125 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee));126 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #eeeeee));127 128 129 130 131 132 128 margin: 0; 129 padding:10px 5px 15px 10px; 130 background-color:#FEFEFE; 131 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE)); 132 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE),color-stop(1, #EEEEEE)); 133 border-top:#FFF solid 1px; 134 border-bottom:#CCC solid 1px; 135 display:block; 136 clear:both; 137 position:relative; 138 cursor:pointer; 133 139 } 134 140 .list_area ul.status_icon{ 135 141 margin-bottom:5px; 136 142 } 137 143 .listphoto{ 138 139 140 144 margin:0 10px 10px 0; 145 float:left; 146 clear:left; 141 147 } 142 148 .listrightblock { 143 width:67%; 144 float:right; 145 padding-right:10px; 146 background:url(../img/common/ico_arrowR.png) right center no-repeat; 147 } 148 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 149 .listrightblock { 150 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 151 -webkit-background-size: 10px 15px; 152 background-size: 10px 15px; 153 } 149 width:67%; 150 float:right; 151 padding-right:10px; 154 152 } 155 153 .listrightblock h3{ 156 157 154 font-size:15px; 155 clear:both; 158 156 } 159 157 .listrightblock .listcomment{ 160 158 line-height:1.4; 161 159 } 162 160 … … 165 163 ----------------------------------------------- */ 166 164 #product_detail{ 167 165 padding-bottom:35px; 168 166 } 169 167 /*商品情報*/ 170 168 #detailarea { 171 172 169 background:#F0F0F1; 170 padding:20px 10px 35px 10px; 173 171 } 174 172 #detailrightblock{ 175 176 177 178 179 180 181 173 margin-top:25px; 174 padding:0; 175 background:#FFF; 176 border:#CCC solid 1px; 177 border-radius:7px; 178 -moz-border-radius:7px; 179 -webkit-border-radius:7px; 182 180 } 183 181 #detailrightblock div:after { 184 185 186 187 188 182 content: "."; 183 display: block; 184 clear: both; 185 height: 0; 186 visibility: hidden; 189 187 } 190 188 #detailrightblock div{ 191 189 border-bottom:#CCC solid 1px; 192 190 } 193 191 #detailrightblock div:last-child{ 194 195 196 197 192 border-bottom:none; 193 border-radius:0 0 7px 7px; 194 -moz-border-radius: 0 0 7px 7px; 195 -webkit-border-radius: 0 0 7px 7px; 198 196 } 199 197 /*ステータスアイコン*/ 200 198 #detailrightblock .status_icon{ 201 202 199 padding:10px 12px; 200 border-bottom:#CCC solid 1px; 203 201 } 204 202 /*商品情報(テキストなど)*/ 205 203 #detailrightblock .product_detail{ 206 207 204 padding:12px; 205 border-bottom:#CCC solid 1px; 208 206 } 209 207 #detailrightblock h3{ 210 211 208 font-size:14px; 209 clear:both; 212 210 } 213 211 #detailrightblock .price{ 214 font-size:14px; 212 font-size:14px; 213 } 214 #detailrightblock .normal_price{ 215 font-size:11px; 215 216 } 216 217 .relative_cat{ 217 218 218 font-size:12px; 219 margin-bottom:10px; 219 220 } 220 221 221 222 /*商品情報(規格部分)*/ 222 223 .cart_area{ 223 224 padding:12px; 224 225 } 225 226 .cart_area dl { 226 227 227 margin: 0; 228 padding:0; 228 229 } 229 230 .cart_area dt { 230 231 232 231 margin: 0; 232 font-weight: bold; 233 line-height: 1.3; 233 234 } 234 235 .cart_area dd { 235 236 237 236 padding:0; 237 clear:both; 238 padding-bottom:5px; 238 239 } 239 240 .cart_area dd:last-child { 240 241 padding-bottom:0; 241 242 } 242 243 243 244 /*商品情報(数量)*/ 244 245 .cartin_btn{ 245 246 247 246 padding:15px; 247 background:#F1F0E7; 248 border-top:#FFF solid 1px; 248 249 } 249 250 .cartin_btn dl{ 250 251 252 251 width:40%; 252 float:left; 253 clear:left; 253 254 } 254 255 .cartin_btn dt{ 255 width:2em; 256 float:left; 257 padding:5px; 258 vertical-align:bottom; 259 line-height:1.1; 256 width:2em; 257 float:left; 258 padding:15px 5px 5px; 259 vertical-align:bottom; 260 line-height:1.1; 261 font-weight:bold; 260 262 } 261 263 .cartin_btn dd{ 262 263 264 264 width:3.2em; 265 display:inline; 266 float:left; 265 267 } 266 268 .detail_quantity dd .quantitybox{ 267 269 width:3em; 268 270 } 269 271 .cartbtn_default{ 270 271 272 272 width:54%; 273 float:right; 274 clear:right; 273 275 } 274 276 275 277 /*お気に入り*/ 276 278 .btn_favorite{ 277 padding:10px 30px;278 279 padding:10px 15px; 280 background:#F1F0E7; 279 281 } 280 282 /*サブエリア*/ 281 283 .subarea{ 282 283 284 284 padding:10px; 285 border-bottom:#CCC solid 1px; 286 clear:both; 285 287 } 286 288 .subarea h3{ 287 288 289 290 289 margin-bottom:10px; 290 padding:5px 0; 291 border-bottom:#CCC solid 1px; 292 clear:both; 291 293 } 292 294 .subphotoimg{ 293 294 295 295 margin-left:10px; 296 float:right; 297 clear:right; 296 298 } 297 299 #sub_area div:last-child{ 298 300 border-bottom:none; 299 301 } 300 302 /*商品詳細メイン画像スライド*/ 301 303 #detailphotoblock { 302 303 304 305 306 307 304 width: 100%; 305 background-color: #ffffff; 306 text-align:center; 307 -webkit-box-shadow: 1px 5px 5px #ccc; 308 -moz-box-shadow: 1px 5px 5px #ccc; 309 position:relative; 308 310 } 309 311 #detailphotoblock div.moveWrap { 310 311 312 313 314 315 312 width:200px; 313 height:auto; 314 margin:0 auto; 315 position:relative; 316 overflow:hidden; 317 -webkit-box-sizing:border-box; 316 318 } 317 319 #detailphotoblock ul.moveWrapBG { 318 width:200px; 319 height:auto; 320 visibility:hidden; 321 display:inline-block; 322 position:relative; 323 -webkit-box-sizing:border-box; 324 margin:0 auto; 325 padding:0; 320 width:200px; 321 height:auto; 322 visibility:hidden; 323 display:inline-block; 324 position:relative; 325 -webkit-box-sizing:border-box; 326 margin:0 auto; 327 padding:0; 328 } 329 #detailphotoblock li{ 330 width:200px; 326 331 } 327 332 #detailphotoblock div.slideMask { 328 329 330 331 332 333 333 position:absolute; 334 top:0; 335 left:0; 336 /*border:4px #FFF solid;*/ 337 -webkit-box-sizing:border-box; 338 margin-right:0!important; 334 339 } 335 340 #detailphotoblock div.moveWrap>ul.move { 336 337 338 339 340 341 342 343 344 345 346 347 348 349 341 margin:0; 342 padding:0; 343 position:relative; 344 left:0; 345 top:0; 346 list-style:none; 347 width:2000px; 348 -webkit-transition:all 0.6s ease-in-out; 349 -webkit-transform:translate3d(0,0,0); 350 -webkit-transition-duration: 400ms; 351 -webkit-transition-property: -webkit-transform; 352 margin:0; 353 padding:0; 354 display:none; 350 355 } 351 356 #detailphotoblock div.moveWrap>ul.move li.slideUnit { 352 353 354 355 356 357 357 margin:0px; 358 padding:0; 359 float:left; 360 list-style:none; 361 text-align:center; 362 -webkit-box-sizing:border-box; 358 363 } 359 364 #detailphotoblock li.slideUnit>div { 360 361 362 363 364 365 padding:0px; 366 display:inline-block; 367 vertical-align:middle; 368 text-align:center; 369 -webkit-box-sizing:border-box; 365 370 } 366 371 #detailphotoblock div.flickSlideBottom { 367 368 372 width:100%; 373 margin-top:5px; 369 374 } 370 375 #detailphotoblock div.flickSlideBottom div.bottomLeft,#detailphotoblock div.flickSlideBottom div.bottomRight { 371 372 373 376 padding:0 10px; 377 display:table-cell; 378 vertical-align:middle; 374 379 } 375 380 #detailphotoblock div.flickSlideBottom div.bottomRight { 376 377 378 379 380 381 382 381 font-size:24px; 382 font-weight: bold; 383 color:#7F7F7F; 384 background-color:transparent; 385 right:5px; 386 top:100px; 387 position:absolute; 383 388 } 384 389 #detailphotoblock div.flickSlideBottom div.bottomLeft { 385 386 387 388 389 390 391 390 font-size:24px; 391 font-weight: bold; 392 color:#7F7F7F; 393 background-color:transparent; 394 left:5px; 395 top:100px; 396 position:absolute; 392 397 } 393 398 #detailphotoblock div.flickSlideBottom div.bottomLeft:after { 394 395 396 397 399 font-size:12px; 400 padding:5px; 401 text-align:left; 402 display:table-cell; 398 403 } 399 404 #detailphotoblock div.flickSlideBottom div.bottomLeft:before { 400 401 402 405 padding:5px; 406 text-align:left; 407 display:table-cell; 403 408 } 404 409 #detailphotoblock div.flickSlideBottom div.bottomRight:before { 405 406 407 408 410 font-size:12px; 411 padding:5px; 412 text-align:right; 413 display:table-cell; 409 414 } 410 415 #detailphotoblock div.flickSlideBottom div.bottomRight:after { 411 412 413 416 padding:5px; 417 text-align:right; 418 display:table-cell; 414 419 } 415 420 #detailphotoblock div.flickSlideBottom ul.slidePager { 416 417 418 419 420 421 display:block; 422 width:auto; 423 text-align:center; 424 margin:0 auto;; 425 padding:0; 421 426 } 422 427 #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer { 423 424 425 426 427 428 429 430 431 428 font-size:11px; 429 width:6px; 430 height:6px; 431 margin:12px 6px 6px 6px; 432 display:inline-block; 433 background-color:#CCC; 434 border-radius: 6px; 435 -webkit-border-radius: 6px; 436 -moz-border-radius: 6px; 432 437 } 433 438 #detailphotoblock div.flickSlideBottom ul.slidePager li.slidePagerPointer.active { 434 439 background-color:#333; 435 440 } 436 441 437 442 /*その他オススメ商品スライド*/ 438 443 #product_detail .title_box_sub:last-child{ 439 444 margin-top:20px; 440 445 } 441 446 #whobought_area{ 442 443 444 445 446 447 width:100%; 448 margin-top:30px; 449 margin-bottom:15px; 450 clear:both; 451 position:relative; 447 452 } 448 453 #whobought_area h3{ 449 clear:both; 454 clear:both; 455 line-height:1.2; 456 } 457 /*liの長さ追加*/ 458 #whobought_area li{ 459 width:80px; 450 460 } 451 461 #whobought_area li img{ 452 clear:both; 462 margin-bottom:5px; 463 clear:both; 453 464 } 454 465 #whobought_area .sale_price{ 455 456 457 466 clear:both; 467 float:right; 468 text-align:right; 458 469 } 459 470 #whobought_area div.moveWrap { 460 461 462 463 464 465 471 width:80%; 472 height:auto; 473 position:relative; 474 margin:0 auto; 475 overflow:hidden; 476 -webkit-box-sizing:border-box; 466 477 } 467 478 #whobought_area ul.moveWrapBG { 468 469 470 471 472 473 474 475 479 width:auto; 480 height:auto; 481 display:inline-block; 482 position:relative; 483 visibility:hidden; 484 -webkit-box-sizing:border-box; 485 margin:0; 486 padding:0; 476 487 } 477 488 #whobought_area div.slideMask { 478 479 480 481 482 483 489 position:absolute; 490 top:0; 491 left:0; 492 border:4px #FFF solid; 493 -webkit-box-sizing:border-box; 494 margin-right:1px; 484 495 } 485 496 #whobought_area div.moveWrap>ul.move { 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 497 width:600px; 498 margin:0; 499 padding:0; 500 position:relative; 501 left:0; 502 top:0; 503 list-style:none; 504 -webkit-transition:all 0.6s ease-in-out; 505 -webkit-transform:translate3d(0,0,0); 506 /*-webkit-transition-duration: 400ms; 507 -webkit-transition-property: -webkit-transform; 508 */ 509 margin:0; 510 padding:0; 511 display:none; 501 512 } 502 513 #whobought_area div.moveWrap>ul.move li.slideUnit { 503 504 505 506 507 508 509 514 width:85px!important; 515 float:left; 516 display:inline; 517 list-style:none; 518 padding:4px 8px 4px 0; 519 margin-right:0px; 520 -webkit-box-sizing:border-box; 510 521 } 511 522 #whobought_area li.slideUnit>div { 512 513 514 515 523 padding:4px; 524 display:inline; 525 vertical-align:middle; 526 -webkit-box-sizing:border-box; 516 527 } 517 528 #whobought_area div.flickSlideBottom { 518 519 529 width:100%; 530 margin-top:5px; 520 531 } 521 532 #whobought_area div.flickSlideBottom div.bottomLeft,#whobought_area div.flickSlideBottom div.bottomRight { 522 523 524 533 padding:0 10px; 534 display:table-cell; 535 vertical-align:middle; 525 536 } 526 537 #whobought_area div.flickSlideBottom div.bottomRight { 527 528 529 530 531 532 533 538 font-size:16px; 539 font-weight: bold; 540 color:#7F7F7F; 541 background-color:transparent; 542 right:0; 543 top:80px; 544 position:absolute; 534 545 } 535 546 #whobought_area div.flickSlideBottom div.bottomLeft { 536 537 538 539 540 541 542 547 font-size:16px; 548 font-weight: bold; 549 color:#7F7F7F; 550 background-color:transparent; 551 left:0; 552 top:80px; 553 position:absolute; 543 554 } 544 555 #whobought_area div.flickSlideBottom div.bottomLeft:after { 545 546 547 548 556 font-size:10px; 557 padding:0; 558 text-align:left; 559 display:table-cell; 549 560 } 550 561 #whobought_area div.flickSlideBottom div.bottomLeft:before { 551 552 553 562 padding:0; 563 text-align:left; 564 display:table-cell; 554 565 } 555 566 #whobought_area div.flickSlideBottom div.bottomRight:before { 556 557 558 559 567 font-size:10px; 568 padding:0; 569 text-align:right; 570 display:table-cell; 560 571 } 561 572 #whobought_area div.flickSlideBottom div.bottomRight:after { 562 563 564 573 padding:0; 574 text-align:right; 575 display:table-cell; 565 576 } 566 577 #whobought_area div.flickSlideBottom ul.slidePager { 567 568 569 570 571 578 display:block; 579 width:auto; 580 text-align:center; 581 margin:0 auto; 582 padding:0; 572 583 } 573 584 #whobought_area div.flickSlideBottom ul.slidePager li.slidePagerPointer { 574 display:none; 575 } 585 display:none; 586 } 587
Note: See TracChangeset
for help on using the changeset viewer.