Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
FED
/
dwweb-pc
2
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Puu: 7f57740374
Branchit Tagit
dwweb-pc
/
旧版多玩公共资源
/
移动版通用评论
/
css
/
main.css

main.css 6.7 KB
Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 
  1. @charset "UTF-8";
    2. 

  2. /*通用模块*/
    3. 

  3. /*通用组件*/
    4. 

  4. .u-comment-arrow { position: absolute; right: 10px; top: 7px; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: #666 transparent transparent; font-size: 0; line-height: 0; }
    5. 

  5. 

  6. /* 通用评论弹出层 */
    7. 

  7. .u-comment-popupnote { display: none; background-color: rgba(36, 36, 36, 0.95); max-width: 80%; padding: 1em 5%; position: absolute; top: 50%; left: 50%; }
    8. 

  8. .u-comment-popupnote p { color: #fff; text-align: center; }
    9. 

  9. 

  10. body { background-color: #F5F5F5; }
    11. 

  11. 

  12. ul { padding: 0px; margin: 0px; }
    13. 

  13. 

  14. /*评论样式*/
    15. 

  15. .comment-wrapper { padding: 0 1em; height: 100%; }
    16. 

  16. .comment-wrapper .comment-hd { position: absolute; top: 10px; left: 0px; height: 2em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }
    17. 

  17. .comment-wrapper .comment-hd .tab { display: -webkit-box; -webkit-box-orient: horizontal; border: 1px solid #3263A0; border-radius: 3px; }
    18. 

  18. .comment-wrapper .comment-hd .tab > span { -webkit-box-flex: 1; display: block; text-align: center; height: 2em; line-height: 2em; color: #3264a0; font-size: .875em; }
    19. 

  19. .comment-wrapper .comment-hd .tab > span:active { background-color: #D9E9FC; }
    20. 

  20. .comment-wrapper .comment-hd .tab > span[class="selected"]:hover { background-color: #3263A0; }
    21. 

  21. .comment-wrapper .comment-hd .tab :first-child { border-radius: 3px 0px 0px 3px; }
    22. 

  22. .comment-wrapper .comment-hd .tab :last-child { border-radius: 0px 3px 3px 0px; }
    23. 

  23. .comment-wrapper .comment-hd .tab > .selected { color: #fff; background-color: #3263A0; }
    24. 

  24. .comment-wrapper .comment-bd { position: absolute; top: 2.5em; bottom: 44px; left: 0px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }
    25. 

  25. 

  26. .commentList { overflow: hidden; min-height: 300px; }
    27. 

  27. .commentList > li { padding: .5em 0 .7em; border-bottom: 1px solid #CCCCCC; position: relative; }
    28. 

  28. .commentList > li:last-child { border-bottom: 0px solid #fff; }
    29. 

  29. .commentList .hd { overflow: hidden; padding-bottom: .3em; position: relative; }
    30. 

  30. .commentList .hd > .info { float: left; }
    31. 

  31. .commentList .hd > .info .name { color: #666666; font-size: .875em; }
    32. 

  32. .commentList .hd > .info .time { color: #C2C2C2; margin-left: 5px; font-size: .75em; }
    33. 

  33. .commentList .hd > .action { position: absolute; top: 0px; right: 0px; }
    34. 

  34. .commentList .hd > .action .zan { color: #C2C2C2; font-size: .75em; height: 20px; line-height: 20px; display: block; }
    35. 

  35. .commentList .hd > .action .zan em { margin-right: 3px; }
    36. 

  36. .commentList .hd > .action .zan-normal > .icon { background-position: 0 -65px; }
    37. 

  37. .commentList .hd > .action .zan-active > .icon { background-position: 0 -20px; }
    38. 

  38. .commentList .bd .cont > p { color: #333333; line-height: 1.4em; }
    39. 

  39. .commentList .tooltip-layer { display: none; position: absolute; top: 0px; left: 50%; background-color: rgba(36, 36, 36, 0.95); z-index: 80; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
    40. 

  40. .commentList .tooltip-layer .comment-action-bar { display: -webkit-box; -webkit-box-orient: horizontal; padding: 5px; }
    41. 

  41. .commentList .tooltip-layer li { padding-top: 4px; height: 50px; width: 60px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; -webkit-box-flex: 1; }
    42. 

  42. .commentList .tooltip-layer li .text { display: block; text-align: center; font-size: .875em; }
    43. 

  43. .commentList .tooltip-layer li:active { background-color: #242424; }
    44. 

  44. .commentList .tooltip-layer .icon { width: 24px; height: 24px; background-image: url(../img/map-icon.png); background-repeat: none; -webkit-background-size: 50px 250px; background-size: 50px 250px; display: block; margin: 0 auto .4em; }
    45. 

  45. .commentList .tooltip-layer .zan > .icon { background-position: 0 -85px; }
    46. 

  46. .commentList .tooltip-layer .reply > .icon { background-position: 0 -40px; }
    47. 

  47. .commentList .tooltip-layer .u-comment-arrow { border-width: 10px; position: absolute; top: auto; bottom: -20px; left: 50%; margin-left: -10px; border-color: rgba(36, 36, 36, 0.95) transparent transparent; }
    48. 

  48. .commentList .tooltip-layer-bottom .u-comment-arrow { bottom: auto; top: -20px; border-color: transparent transparent rgba(36, 36, 36, 0.95) transparent; }
    49. 

  49. 

  50. .comment-replyList-ctn { margin: 10px 5px 0px; }
    51. 

  51. .comment-replyList-ctn .comment-replyList { padding: 0 10px; border: 1px solid #C2C2C2; background-color: #FFFFFF; margin-bottom: .7em; }
    52. 

  52. .comment-replyList-ctn .comment-replyList > li { padding: .5em 0; border-bottom: 1px solid #CCCCCC; position: relative; }
    53. 

  53. .comment-replyList-ctn .comment-replyList > :last-child { border-bottom: 0px solid #ccc; }
    54. 

  54. .comment-replyList-ctn .replyList-hd { overflow: hidden; padding-bottom: .3em; }
    55. 

  55. .comment-replyList-ctn .replyList-hd > .info { float: left; }
    56. 

  56. .comment-replyList-ctn .replyList-hd > .info .name { color: #666666; font-size: .875em; }
    57. 

  57. .comment-replyList-ctn .replyList-hd > .info .time { color: #C2C2C2; margin-left: 5px; font-size: .75em; }
    58. 

  58. .comment-replyList-ctn .replyList-hd > .action { float: right; }
    59. 

  59. .comment-replyList-ctn .replyList-hd > .action .zan { color: #C2C2C2; font-size: .75em; }
    60. 

  60. .comment-replyList-ctn .replyList-bd .cont > p { color: #333333; line-height: 1.4em; }
    61. 

  61. .comment-replyList-ctn .comment-replyList-more { font-size: .812em; color: #666666; }
    62. 

  62. .comment-replyList-ctn .comment-replyList-more > a { color: #3264a0; }
    63. 

  63. 

  64. .comment-post-ctn { position: absolute; bottom: 0px; left: 0px; background-color: #FFFFFF; width: 100%; padding: 0 1em; height: 43px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    65. 

  65. .comment-post-ctn > input { border: 1px solid #CCCCCC; padding: 0px; margin: 0px; box-sizing: border-box; height: 28px; margin-top: 7px; font-size: .875em; background-color: #F5F5F5; padding-left: 30px; }
    66. 

  66. .comment-post-ctn > .icon { position: absolute; top: 10px; left: 1.4em; height: 20px; width: 20px; background-image: url(../img/map-icon.png); background-repeat: no-repeat; background-position: 0 3px; -webkit-background-size: 50px 250px; background-size: 50px 250px; }
    67. 

  67. 

  68. /* 评论发表页面样式 */
    69. 

  69. .comment-post { padding: 1em 0; }
    70. 

  70. .comment-post textarea { border: 1px #D0D0D0 solid; height: 10em; widows: 100%; }
    71. 

  71. .comment-post .post-button { display: block; background-color: #3D669B; text-align: center; border-radius: 3px; }
    72. 

  72. .comment-post .post-button input { display: block; background: none; border: none; color: #fff; width: 100%; height: 44px; line-height: 44px; padding: 0px; border-radius: 3px; }
    73. 

  73. .comment-post .post-button:active { background-color: #3488E7; }
    74. 

  74. 

  75. .comment-wrapper--duowanapp .comment-hd .tab { border-color: #E5004D; }
    76. 

  76. .comment-wrapper--duowanapp .comment-hd .tab span { color: #e40450; }
    77. 

  77. .comment-wrapper--duowanapp .comment-hd .tab > .selected { background-color: #E5004D; }
    78. 

  78. .comment-wrapper--duowanapp .comment-post .post-button { background-color: #E5004D; }
    79.