You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

136 lines
2.5 KiB

  1. .wp-color-picker {
  2. width: 80px;
  3. }
  4. .wp-picker-container .hidden {
  5. display: none;
  6. }
  7. .wp-color-result {
  8. background-color: #f7f7f7;
  9. border: 1px solid #ccc;
  10. -webkit-border-radius: 3px;
  11. border-radius: 3px;
  12. cursor: pointer;
  13. display: inline-block;
  14. height: 22px;
  15. margin: 0 0px 6px 6px;
  16. position: relative;
  17. top: 1px;
  18. -webkit-user-select: none;
  19. -moz-user-select: none;
  20. -ms-user-select: none;
  21. user-select: none;
  22. vertical-align: bottom;
  23. display: inline-block;
  24. padding-right: 30px;
  25. -webkit-box-shadow: 0 1px 0 #ccc;
  26. box-shadow: 0 1px 0 #ccc;
  27. }
  28. .wp-color-result:after {
  29. background: #f7f7f7;
  30. -webkit-border-radius: 2px 0 0 2px;
  31. border-radius: 2px 0 0 2px;
  32. border-right: 1px solid #ccc;
  33. color: #555;
  34. content: attr( title );
  35. display: block;
  36. font-size: 11px;
  37. line-height: 22px;
  38. padding: 0 6px;
  39. position: relative;
  40. left: 0;
  41. text-align: center;
  42. top: 0;
  43. }
  44. .wp-color-result:hover,
  45. .wp-color-result:focus {
  46. background: #fafafa;
  47. border-color: #999;
  48. color: #23282d;
  49. }
  50. .wp-color-result:hover:after,
  51. .wp-color-result:focus:after {
  52. color: #23282d;
  53. border-color: #a0a5aa;
  54. border-right: 1px solid #999;
  55. }
  56. .wp-color-result {
  57. top: 0;
  58. }
  59. .wp-color-result.wp-picker-open:after {
  60. content: attr( data-current );
  61. }
  62. .wp-picker-container, .wp-picker-container:active {
  63. display: inline-block;
  64. outline: 0;
  65. }
  66. .wp-color-result:focus {
  67. border-color: #5b9dd9;
  68. -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  69. box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  70. }
  71. .wp-picker-open + .wp-picker-input-wrap {
  72. display: inline-block;
  73. vertical-align: top;
  74. }
  75. .wp-picker-container .button {
  76. margin-right: 6px;
  77. }
  78. .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
  79. background-color: #555
  80. }
  81. .wp-picker-container .iris-picker {
  82. -webkit-border-radius: 0;
  83. border-radius: 0;
  84. border-color: #ddd;
  85. margin-top: 6px;
  86. }
  87. .wp-picker-container input[type="text"].wp-color-picker {
  88. width: 65px;
  89. font-size: 12px;
  90. font-family: monospace;
  91. line-height: 16px;
  92. margin: 0;
  93. }
  94. .wp-color-picker::-webkit-input-placeholder {
  95. color: #72777c;
  96. }
  97. .wp-color-picker::-moz-placeholder {
  98. color: #72777c;
  99. opacity: 1;
  100. }
  101. .wp-color-picker:-ms-input-placeholder {
  102. color: #72777c;
  103. }
  104. .wp-picker-container input[type="text"].iris-error {
  105. background-color: #ffebe8;
  106. border-color: #c00;
  107. color: #000;
  108. }
  109. .iris-picker .ui-square-handle:focus,
  110. .iris-picker .iris-strip .ui-slider-handle:focus {
  111. -webkit-box-shadow:
  112. 0 0 0 1px #5b9dd9,
  113. 0 0 2px 1px rgba(30, 140, 190, .8);
  114. box-shadow:
  115. 0 0 0 1px #5b9dd9,
  116. 0 0 2px 1px rgba(30, 140, 190, .8);
  117. }