- Timestamp:
- 2011/03/09 14:55:25 (13 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/version-2_5-dev/html/user_data/packages/sphone/css/table.css
r20116 r20566 4 4 ----------------------------------------------- */ 5 5 ul { 6 background: #fff;7 border: 1px solid #B4B4B4;8 font: bold small 'Helvetica-Bold';9 padding: 0;10 margin: 10px 0;11 text-align: left;12 -webkit-border-radius: 8px;6 background: #fff; 7 border: 1px solid #B4B4B4; 8 font: bold small 'Helvetica-Bold'; 9 padding: 0; 10 margin: 10px 0; 11 text-align: left; 12 -webkit-border-radius: 8px; 13 13 } 14 14 ul li { 15 color: #999999;16 border-top: 1px solid #B4B4B4;17 list-style-type: none;18 padding: 4px 6px;15 color: #999999; 16 border-top: 1px solid #B4B4B4; 17 list-style-type: none; 18 padding: 4px 6px; 19 19 } 20 20 li:first-child { 21 border-top: 0;22 -webkit-border-top-left-radius: 8px;23 -webkit-border-top-right-radius: 8px;21 border-top: 0; 22 -webkit-border-top-left-radius: 8px; 23 -webkit-border-top-right-radius: 8px; 24 24 } 25 25 li:last-child { 26 -webkit-border-bottom-left-radius: 8px;27 -webkit-border-bottom-right-radius: 8px;26 -webkit-border-bottom-left-radius: 8px; 27 -webkit-border-bottom-right-radius: 8px; 28 28 } 29 29 … … 31 31 ----------------------------------------------- */ 32 32 ul li a, li.img a + a { 33 color: #000;34 text-decoration: none;35 text-overflow: ellipsis;36 white-space: nowrap;37 overflow: hidden;38 display: block;39 padding: 12px 10px 12px 10px;40 margin: -10px;33 color: #000; 34 text-decoration: none; 35 text-overflow: ellipsis; 36 white-space: nowrap; 37 overflow: hidden; 38 display: block; 39 padding: 12px 10px 12px 10px; 40 margin: -10px; 41 41 } 42 42 ul li.img a + a { 43 margin: -10px 10px -20px -5px;44 font-size: 17px;45 font-weight: bold;43 margin: -10px 10px -20px -5px; 44 font-size: 17px; 45 font-weight: bold; 46 46 } 47 47 ul li.img a + a + a { 48 font-size: 14px;49 font-weight: normal;50 margin-left: -10px;51 margin-bottom: -10px;52 margin-top: 0;48 font-size: 14px; 49 font-weight: normal; 50 margin-left: -10px; 51 margin-bottom: -10px; 52 margin-top: 0; 53 53 } 54 54 ul li.img a + small + a { 55 margin-left: -5px;55 margin-left: -5px; 56 56 } 57 57 ul li.img a + small + a + a { 58 margin-left: -10px;59 margin-top: -20px;60 margin-bottom: -10px;61 font-size: 14px;62 font-weight: normal;58 margin-left: -10px; 59 margin-top: -20px; 60 margin-bottom: -10px; 61 font-size: 14px; 62 font-weight: normal; 63 63 } 64 64 ul li.img a + small + a + a + a { 65 margin-left: 0px !important;66 margin-bottom: 0;65 margin-left: 0px !important; 66 margin-bottom: 0; 67 67 } 68 68 ul li a + a { 69 color: #000;70 font: 14px 'Helvetica';71 text-overflow: ellipsis;72 white-space: nowrap;73 overflow: hidden;74 display: block;75 margin: 0;76 padding: 0;69 color: #000; 70 font: 14px 'Helvetica'; 71 text-overflow: ellipsis; 72 white-space: nowrap; 73 overflow: hidden; 74 display: block; 75 margin: 0; 76 padding: 0; 77 77 } 78 78 ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a { 79 color: #666;80 font: 13px 'Helvetica';81 margin: 0;82 text-overflow: ellipsis;83 white-space: nowrap;84 overflow: hidden;85 display: block;86 padding: 0;79 color: #666; 80 font: 13px 'Helvetica'; 81 margin: 0; 82 text-overflow: ellipsis; 83 white-space: nowrap; 84 overflow: hidden; 85 display: block; 86 padding: 0; 87 87 } 88 88 … … 90 90 ----------------------------------------------- */ 91 91 table { 92 width: 100%;93 max-width: 280px;94 margin: 10px 0;95 text-align: center;96 vertical-align: middle;97 border-collapse: collapse;98 border-spacing: 0;99 -webkit-border-radius: 8px;100 -webkit-box-shadow: 0 0 4px #000000;92 width: 100%; 93 max-width: 280px; 94 margin: 10px 0; 95 text-align: center; 96 vertical-align: middle; 97 border-collapse: collapse; 98 border-spacing: 0; 99 -webkit-border-radius: 8px; 100 -webkit-box-shadow: 0 0 4px #000000; 101 101 } 102 102 table tr { 103 border-bottom: solid 1px #cccccc;104 -webkit-border-radius: 8px;103 border-bottom: solid 1px #cccccc; 104 -webkit-border-radius: 8px; 105 105 } 106 106 table > tr:last-child, 107 107 table > tbody > tr:last-child { 108 border-bottom: none;108 border-bottom: none; 109 109 } 110 110 table th, 111 111 table td { 112 margin: 0;113 max-width: 250px;114 height: 2em;115 background-color: #ffffff;116 border: none;117 -webkit-border-radius: 0;112 margin: 0; 113 max-width: 250px; 114 height: 2em; 115 background-color: #ffffff; 116 border: none; 117 -webkit-border-radius: 0; 118 118 } 119 119 table th { 120 background-color: #f0f0f0;120 background-color: #f0f0f0; 121 121 } 122 122 table td { 123 background-color: #ffffff;123 background-color: #ffffff; 124 124 } 125 125 table tr:first-of-type th:first-child, 126 126 table tr:first-of-type td:first-child { 127 -webkit-border-top-left-radius: inherit;127 -webkit-border-top-left-radius: inherit; 128 128 } 129 129 table tr:first-of-type th:last-child, 130 130 table tr:first-of-type td:last-child { 131 -webkit-border-top-right-radius: inherit;131 -webkit-border-top-right-radius: inherit; 132 132 } 133 133 table tr:last-of-type th:first-child, 134 134 table tr:last-of-type td:first-child { 135 -webkit-border-bottom-left-radius: inherit;135 -webkit-border-bottom-left-radius: inherit; 136 136 } 137 137 table tr:last-of-type th:last-child, 138 138 table tr:last-of-type td:last-child { 139 -webkit-border-bottom-right-radius: inherit;139 -webkit-border-bottom-right-radius: inherit; 140 140 } 141 141 table > thead tr:last-of-type th:first-child, … … 143 143 table > thead tr:last-of-type th:last-child, 144 144 table > thead tr:last-of-type td:last-child { 145 -webkit-border-bottom-left-radius: 0;146 -webkit-border-bottom-right-radius: 0;145 -webkit-border-bottom-left-radius: 0; 146 -webkit-border-bottom-right-radius: 0; 147 147 } 148 148 table > thead + tbody > tr:first-of-type th:first-child, … … 150 150 table > thead + tbody > tr:first-of-type th:last-child, 151 151 table > thead + tbody > tr:first-of-type td:last-child { 152 -webkit-border-top-left-radius: 0;153 -webkit-border-top-right-radius: 0;152 -webkit-border-top-left-radius: 0; 153 -webkit-border-top-right-radius: 0; 154 154 } 155 155 … … 157 157 ----------------------------------------------- */ 158 158 #block { 159 width: 100%;160 background-color: #ffffff;161 -webkit-border-radius: 8px;162 -webkit-box-shadow: 0px 0px 4px #000000;163 margin: 10px 0;159 width: 100%; 160 background-color: #ffffff; 161 -webkit-border-radius: 8px; 162 -webkit-box-shadow: 0px 0px 4px #000000; 163 margin: 10px 0; 164 164 } 165 165 .box-wrap { 166 display:inline-block;167 width: 100%;168 border-top: 1px solid #cccccc;166 display:inline-block; 167 width: 100%; 168 border-top: 1px solid #cccccc; 169 169 } 170 170 .box-wrap:first-child { 171 border-top: none;172 -webkit-border-top-left-radius: 8px;173 -webkit-border-top-right-radius: 8px;171 border-top: none; 172 -webkit-border-top-left-radius: 8px; 173 -webkit-border-top-right-radius: 8px; 174 174 } 175 175 .box-wrap:last-child { 176 -webkit-border-bottom-left-radius: 8px;177 -webkit-border-bottom-right-radius: 8px;176 -webkit-border-bottom-left-radius: 8px; 177 -webkit-border-bottom-right-radius: 8px; 178 178 } 179 179 .box-photo { 180 float:left;181 display:block;182 margin-left: 10px;183 margin-right: 10px;184 position: relative;180 float:left; 181 display:block; 182 margin-left: 10px; 183 margin-right: 10px; 184 position: relative; 185 185 } 186 186 .box-data { 187 display:block;188 margin: 0px 8px;189 text-align: left;187 display:block; 188 margin: 0px 8px; 189 text-align: left; 190 190 } 191 191 .box-data h3 { 192 margin: 0px;193 white-space: nowrap;194 overflow: hidden;195 text-overflow: ellipsis;196 -webkit-text-overflow: ellipsis;192 margin: 0px; 193 white-space: nowrap; 194 overflow: hidden; 195 text-overflow: ellipsis; 196 -webkit-text-overflow: ellipsis; 197 197 } 198 198 .box-data h3 a { 199 font-size: 18px;200 text-decoration: none;199 font-size: 18px; 200 text-decoration: none; 201 201 } 202 202 .description, .box-comment { 203 font: bold 14px Osaka;204 line-height: 1.5em;205 white-space: nowrap;206 overflow: hidden;207 text-overflow: ellipsis;208 -webkit-text-overflow: ellipsis;203 font: bold 14px Osaka; 204 line-height: 1.5em; 205 white-space: nowrap; 206 overflow: hidden; 207 text-overflow: ellipsis; 208 -webkit-text-overflow: ellipsis; 209 209 } 210 210 .price, .box-price { 211 color: #993333;212 font: bold 14px Osaka;213 line-height: 1.5em;211 color: #993333; 212 font: bold 14px Osaka; 213 line-height: 1.5em; 214 214 } 215 215 … … 218 218 .recomendblock, 219 219 .whoboughtblock{ 220 margin-top: 0;221 margin-bottom: 0;220 margin-top: 0; 221 margin-bottom: 0; 222 222 } 223 223 .recomendblock > div , 224 224 .whoboughtblock > div { 225 margin-top: 0;226 margin-bottom: 0;227 -webkit-border-radius: 0;225 margin-top: 0; 226 margin-bottom: 0; 227 -webkit-border-radius: 0; 228 228 } 229 229 .recomendblock > div, 230 230 .whoboughtblock > div { 231 width: 100%;232 display:inline-block;233 background-color: #ffffff;234 border-bottom: 1px solid #cccccc;235 padding: 0.1em 0;231 width: 100%; 232 display:inline-block; 233 background-color: #ffffff; 234 border-bottom: 1px solid #cccccc; 235 padding: 0.1em 0; 236 236 } 237 237 .recomendblock > div > a, … … 239 239 .whoboughtblock > div > a, 240 240 .whoboughtblock > div > div{ 241 float: left;241 float: left; 242 242 } 243 243 .recomendblock:first-of-type > div:first-of-type , 244 244 .whoboughtblock:first-of-type > div:first-of-type { 245 -webkit-border-top-left-radius: 8px;246 -webkit-border-top-right-radius: 8px;245 -webkit-border-top-left-radius: 8px; 246 -webkit-border-top-right-radius: 8px; 247 247 } 248 248 .recomendblock:last-of-type > div:last-of-type , 249 249 .whoboughtblock:last-of-type > div:last-of-type { 250 border-bottom: none;251 -webkit-border-bottom-left-radius: 8px;252 -webkit-border-bottom-right-radius: 8px;250 border-bottom: none; 251 -webkit-border-bottom-left-radius: 8px; 252 -webkit-border-bottom-right-radius: 8px; 253 253 } 254 254 .recomendrightblock, 255 255 .whoboughtrightblock{ 256 width: 63%;256 width: 63%; 257 257 } 258 258 .recomendrightblock > h3, … … 266 266 .whoboughtblock img, 267 267 .listphoto { 268 float:left;269 display:block;270 margin: 3px 10px;271 position: relative;268 float:left; 269 display:block; 270 margin: 3px 10px; 271 position: relative; 272 272 } 273 273 .recommend-photo img, 274 274 .listphoto img { 275 width: 80px;275 width: 80px; 276 276 } 277 277 .recommend-box h3 { 278 font-weight: bold;279 font-size: 15px;280 font-family: helvetica;281 margin: 0.4em 0 0;282 white-space: nowrap;283 overflow: hidden;284 text-overflow: ellipsis;285 -webkit-text-overflow: ellipsis;278 font-weight: bold; 279 font-size: 15px; 280 font-family: helvetica; 281 margin: 0.4em 0 0; 282 white-space: nowrap; 283 overflow: hidden; 284 text-overflow: ellipsis; 285 -webkit-text-overflow: ellipsis; 286 286 } 287 287 .recommend-box h3 a { 288 font-size: 18px;289 text-decoration: none;288 font-size: 18px; 289 text-decoration: none; 290 290 } 291 291 .description, 292 292 .recommend-comment { 293 font-weight: normal;294 font-size: 14px;295 font-family: Osaka;296 line-height: 1.5em;297 white-space: nowrap;298 overflow: hidden;299 text-overflow: ellipsis;300 -webkit-text-overflow: ellipsis;301 margin: 0;293 font-weight: normal; 294 font-size: 14px; 295 font-family: Osaka; 296 line-height: 1.5em; 297 white-space: nowrap; 298 overflow: hidden; 299 text-overflow: ellipsis; 300 -webkit-text-overflow: ellipsis; 301 margin: 0; 302 302 } 303 303 .price, 304 304 .recommend-price { 305 color: #993333;306 font-weight: bold;307 font-size: 17px;308 font-family: Osaka;309 line-height: 1.5em;310 margin-bottom: 0.3em;305 color: #993333; 306 font-weight: bold; 307 font-size: 17px; 308 font-family: Osaka; 309 line-height: 1.5em; 310 margin-bottom: 0.3em; 311 311 } 312 312 … … 314 314 ----------------------------------------------- */ 315 315 .listarea { 316 width: 100%;317 background-color: #ffffff;318 border-bottom: solid 1px #CCC;319 margin: 0;320 margin-top: 0;321 margin-bottom: 0;322 -webkit-border-radius: 0;323 -webkit-box-shadow: none;316 width: 100%; 317 background-color: #ffffff; 318 border-bottom: solid 1px #CCC; 319 margin: 0; 320 margin-top: 0; 321 margin-bottom: 0; 322 -webkit-border-radius: 0; 323 -webkit-box-shadow: none; 324 324 } 325 325 #page_navi_top + .listarea{ 326 margin-bottom: 0;327 -webkit-border-top-left-radius: 8px;328 -webkit-border-top-right-radius: 8px;326 margin-bottom: 0; 327 -webkit-border-top-left-radius: 8px; 328 -webkit-border-top-right-radius: 8px; 329 329 } 330 330 .listarea:last-of-type{ 331 border: none;332 -webkit-border-bottom-left-radius: 8px;333 -webkit-border-bottom-right-radius: 8px;331 border: none; 332 -webkit-border-bottom-left-radius: 8px; 333 -webkit-border-bottom-right-radius: 8px; 334 334 } 335 335 .listrightblock > ul { … … 345 345 .listrightblock > h3:first-child, 346 346 .listrightblock > p:first-child, 347 .listrightblock > ul:first-child ,348 margin-top: 0;347 .listrightblock > ul:first-child { 348 margin-top: 0; 349 349 } 350 350 .listrightblock > ul > li { 351 margin: 0;352 padding: 0 3px 0 0;351 margin: 0; 352 padding: 0 3px 0 0; 353 353 } 354 354 .listrightblock > h3:last-child, 355 355 .listrightblock > p:last-child { 356 margin-bottom: 0;356 margin-bottom: 0; 357 357 } 358 358 359 359 .newitem-line-list .newitem-box-wrap-end { 360 border-bottom: 1px solid #cccccc;360 border-bottom: 1px solid #cccccc; 361 361 } 362 362 … … 365 365 #page_navi_top, 366 366 #page_navi_bottom { 367 border: none;368 -webkit-box-shadow: none;369 clear: both;370 width: 100%;371 border-spacing: 0 0;372 border-collapse: collapse;367 border: none; 368 -webkit-box-shadow: none; 369 clear: both; 370 width: 100%; 371 border-spacing: 0 0; 372 border-collapse: collapse; 373 373 } 374 374 #page_navi_top tr, 375 375 #page_navi_bottom tr { 376 width: 100%;376 width: 100%; 377 377 } 378 378 #page_navi_top td, 379 379 #page_navi_bottom td { 380 text-align: left;381 background-color: transparent;380 text-align: left; 381 background-color: transparent; 382 382 } 383 383 384 384 .change a, 385 385 .change strong { 386 display: block;387 float: left;388 margin: 5px 0px;389 padding: 0.3em 0;390 color: #ffffff;391 width: 49.6%;392 text-shadow: 0px -1px 1px rgba(0,0,0,0.5);393 background-color: #666666;394 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));395 text-align:center;396 vertical-align: middle;397 text-decoration: none;398 border-left: solid 1px #666666;386 display: block; 387 float: left; 388 margin: 5px 0px; 389 padding: 0.3em 0; 390 color: #ffffff; 391 width: 49.6%; 392 text-shadow: 0px -1px 1px rgba(0,0,0,0.5); 393 background-color: #666666; 394 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05))); 395 text-align:center; 396 vertical-align: middle; 397 text-decoration: none; 398 border-left: solid 1px #666666; 399 399 } 400 400 .change > a:first-child, 401 401 .change > strong:first-child { 402 border-left: none;403 -webkit-border-top-left-radius: 4px;404 -webkit-border-bottom-left-radius: 4px;402 border-left: none; 403 -webkit-border-top-left-radius: 4px; 404 -webkit-border-bottom-left-radius: 4px; 405 405 } 406 406 .change > a:last-child, 407 407 .change > strong:last-child{ 408 margin-left: 1px;409 -webkit-border-top-right-radius: 4px;410 -webkit-border-bottom-right-radius: 4px;408 margin-left: 1px; 409 -webkit-border-top-right-radius: 4px; 410 -webkit-border-bottom-right-radius: 4px; 411 411 } 412 412 .change select { 413 margin-right: 0;413 margin-right: 0; 414 414 } 415 415 … … 418 418 419 419 table[summary="商品情報"]{ 420 420 font-size:60%; 421 421 } 422 422 423 423 table[summary="商品情報"] tr:nth-child(even) td{ 424 background-color: #ffffff;424 background-color: #ffffff; 425 425 } 426 426 table[summary="商品情報"] tr:nth-child(odd) td{ 427 background-color: #f0f0f0;428 text-align: left;427 background-color: #f0f0f0; 428 text-align: left; 429 429 } 430 430 431 431 table[summary="商品情報"] td{ 432 433 text-align: center; 434 vertical-align: middle; 435 max-width: 200px; 432 text-align: center; 433 vertical-align: middle; 434 max-width: 200px; 436 435 } 437 436 table[summary="商品情報"] tr:nth-child(even) td:last-child{ 438 width: 15%;439 overflow: visible;437 width: 15%; 438 overflow: visible; 440 439 } 441 440 table[summary="商品情報"] ul, 442 441 table[summary="商品情報"] ul li, 443 442 table[summary="商品情報"] ul li a { 444 display: inline;445 margin: 0;446 padding: 0;447 border: none;443 display: inline; 444 margin: 0; 445 padding: 0; 446 border: none; 448 447 } 449 448 table[summary="商品情報"] ul li a{ 450 display: inline-block;451 margin: 1px;452 padding:0;449 display: inline-block; 450 margin: 1px; 451 padding:0; 453 452 } 454 453 table[summary="商品情報"] tr:nth-last-of-type(1) td, 455 454 table[summary="商品情報"] tr:nth-last-of-type(2) td, 456 455 table[summary="商品情報"] tr:nth-last-of-type(3) td { 457 background-color: #ffffff;458 text-align: center;456 background-color: #ffffff; 457 text-align: center; 459 458 } 460 459 … … 462 461 ----------------------------------------------- */ 463 462 #detailrightblock table th { 464 font-size: 15px;465 font-weight: normal;463 font-size: 15px; 464 font-weight: normal; 466 465 } 467 466 … … 469 468 ----------------------------------------------- */ 470 469 #detailrightblock table th { 471 font-size: 15px;472 font-weight: normal;470 font-size: 15px; 471 font-weight: normal; 473 472 } 474 473 … … 476 475 ----------------------------------------------- */ 477 476 table[summary="お客様情報入力"] td{ 478 padding-left:5px;479 text-align: left;480 vertical-align: middle;477 padding-left:5px; 478 text-align: left; 479 vertical-align: middle; 481 480 } 482 481 … … 484 483 ----------------------------------------------- */ 485 484 table[summary="会員登録内容変更"] td{ 486 padding-left:5px;487 text-align: left;488 vertical-align: middle;485 padding-left:5px; 486 text-align: left; 487 vertical-align: middle; 489 488 } 490 489 … … 492 491 ----------------------------------------------- */ 493 492 table[summary="お届け先登録"] td{ 494 padding-left:5px;495 text-align: left;496 vertical-align: middle;493 padding-left:5px; 494 text-align: left; 495 vertical-align: middle; 497 496 } 498 497 … … 500 499 ----------------------------------------------- */ 501 500 #undercolumn_contact table td { 502 text-align: left;503 } 501 text-align: left; 502 }
Note: See TracChangeset
for help on using the changeset viewer.