picker.css 4.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @charset"UTF-8";
  2. @import url('./skin.min.css');
  3. * {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  4. html,body {width: 100%;min-width: 100%;height:100%;border:0;}
  5. body {margin:0;padding:0;font-size:14px;line-height:1.42857143;color:#333333;background-color:#FFFFFF !important;}
  6. .picker-toolbar {position:fixed;left:0;right:0;top:0;height:31px;overflow:hidden;background-color:#F0F0F0;border-bottom:1px solid #DDDDDD;}
  7. .picker-container {position:fixed;left:0;right:0;top:31px;bottom:0;overflow:auto;margin:0;}
  8. .picker-content {margin:0;padding:10px;left:0;top:0;min-width:240px;height:100%;position:relative;}
  9. .picker-list-box {float: left;width: 20%;margin: 0;padding: 0 0 20%;position: relative}
  10. .picker-list-item {clear: both;position: absolute;left: 5px;right: 5px;top: 5px;bottom: 5px;padding: 1px;margin: 0;border: 1px solid #d4d4d4;cursor: default;box-shadow: 0 0 5px transparent;background-color: #fff}
  11. .picker-list-item-in {position:relative;left:0;top:0;min-height:100%;height:100%;margin:0;padding:0;text-align:center;overflow:hidden;}
  12. .picker-image-box {position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 10px}
  13. .picker-image {position:relative;left:0;top:0;height:100%;display:block;margin:0;padding:0;text-decoration:none;color:#000000;}
  14. .picker-image img {max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border:none;}
  15. .picker-list-item a,.picker-list-item a:hover,.picker-list-item a:active,.picker-list-item a:focus {text-decoration:none;color:#000000;}
  16. .picker-image-remove {position:absolute;right:0;bottom:5px;width:18px;height:18px;text-align:center;cursor:pointer;font-size:16px;line-height:16px;vertical-align:top;box-sizing:content-box;background-color:transparent!important;border:none;color:#000000;filter:alpha(opacity=20);opacity:.2;}
  17. .picker-image-remove.mce-ico {color:#000000;}
  18. .picker-image-title {position:absolute;left:2px;right:2px;bottom:2px;border:1px solid #CCCCCC;background-color:#F2F2F2;color:#000000;text-align:left;padding:2px 20px 2px 4px;filter:alpha(opacity=50);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  19. .picker-image-draggable {cursor:move;}
  20. .picker-list-box.active .picker-image-title {filter: alpha(opacity=40);opacity: .4;background-color: #fff}
  21. .picker-list-box.active .picker-list-item:hover, .picker-list-box.active .picker-list-item:active {box-shadow: 0 0 5px rgba(0, 0, 0, .2);border-color: #a0a0a0;background-color: #f6f6f6}
  22. .picker-list-box.active .picker-list-item:hover .picker-image-title, .picker-list-box.active .picker-list-item:active .picker-image-title {filter: alpha(opacity=75);opacity: .75}
  23. .picker-image-remove:active, .picker-image-remove:hover {filter: alpha(opacity=1);opacity: 1}
  24. .picker-list-box.draggable {padding-bottom:0;}
  25. .picker-list-box.draggable .picker-list-item {border-color:#AAAAAA;float:none;}
  26. .picker-list-box.draggable .picker-image-title {filter:alpha(opacity=0.8);opacity:8;}
  27. .picker-list-box.disable .picker-list-item {border-color:#74B9EF;}
  28. .picker-list-box.disable .picker-list-item-in {filter:alpha(opacity=20);opacity:0.2;}
  29. .picker-list-box.disable .picker-image-title {filter:alpha(opacity=100);opacity:1;}
  30. .mce-container .mce-flow-layout{padding-bottom:2px;}
  31. .mce-btn button {padding:2px 8px;}
  32. .mce-btn button .mce-ico{vertical-align: middle;line-height: 15px;}
  33. .mce-btn button .mce-i-text{display:inline-block;zoom:1;margin-left: 3px;}
  34. .clearfix {clear:both;display:block;width:100%;height:1px;margin-top:-1px;text-indent:-100%;}
  35. .wrap-loading {display:none;position:fixed;top:44%;left:47%;margin-left:-21px;margin-top:-21px;z-index:65535;}
  36. .wrap-loading img {width:110px;}
  37. .wrap-loading-mask {display:none;position:absolute;z-index:9999;background-color:#000;left:0;top:0;}
  38. @media all and (max-width: 321px) {
  39. .picker-toolbar {
  40. height: 63px;
  41. }
  42. .picker-container {
  43. top: 63px;
  44. }
  45. }
  46. @media all and (max-width: 240px) {
  47. .picker-list-box {
  48. width: 100%;
  49. padding-bottom: 100%
  50. }
  51. }
  52. @media all and (min-width: 241px) and (max-width: 480px) {
  53. .picker-list-box {
  54. width: 50%;
  55. padding-bottom: 50%
  56. }
  57. }
  58. @media all and (min-width: 481px) and (max-width: 640px) {
  59. .picker-list-box {
  60. width: 33.33333%;
  61. padding-bottom: 33.33333%
  62. }
  63. }
  64. @media all and (min-width: 641px) and (max-width: 1024px) {
  65. .picker-list-box {
  66. width: 25%;
  67. padding-bottom: 25%;
  68. }
  69. }