color-picker-rtl.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. .wp-color-picker {
  2. width: 80px;
  3. }
  4. .wp-picker-container .hidden {
  5. display: none;
  6. }
  7. /* Needs higher specificiity. */
  8. .wp-picker-container .wp-color-result.button {
  9. height: 24px;
  10. margin: 0 0px 6px 6px;
  11. padding: 0 30px 0 0;
  12. font-size: 11px;
  13. }
  14. .wp-color-result-text {
  15. background: #f7f7f7;
  16. border-radius: 2px 0 0 2px;
  17. border-right: 1px solid #ccc;
  18. color: #555;
  19. display: block;
  20. line-height: 22px;
  21. padding: 0 6px;
  22. text-align: center;
  23. }
  24. .wp-color-result:hover,
  25. .wp-color-result:focus {
  26. background: #fafafa;
  27. border-color: #999;
  28. color: #23282d;
  29. }
  30. .wp-color-result:hover:after,
  31. .wp-color-result:focus:after {
  32. color: #23282d;
  33. border-color: #a0a5aa;
  34. border-right: 1px solid #999;
  35. }
  36. .wp-picker-containers {
  37. display: inline-block;
  38. }
  39. .wp-color-result:focus {
  40. border-color: #5b9dd9;
  41. box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  42. }
  43. .wp-color-result:active {
  44. /* See Trac ticket #39662 */
  45. -webkit-transform: none !important;
  46. transform: none !important;
  47. }
  48. .wp-picker-open + .wp-picker-input-wrap {
  49. display: inline-block;
  50. vertical-align: top;
  51. }
  52. .wp-picker-input-wrap label {
  53. display: inline-block;
  54. vertical-align: top;
  55. }
  56. /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
  57. .form-table .wp-picker-input-wrap label {
  58. margin: 0 !important;
  59. }
  60. .wp-picker-input-wrap .button,
  61. .wp-customizer .wp-picker-input-wrap .button {
  62. margin-right: 6px;
  63. }
  64. .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
  65. background-color: #555
  66. }
  67. .wp-picker-container .iris-picker {
  68. border-radius: 0;
  69. border-color: #ddd;
  70. margin-top: 6px;
  71. }
  72. .wp-picker-container input[type="text"].wp-color-picker {
  73. width: 65px;
  74. font-size: 12px;
  75. font-family: monospace;
  76. line-height: 16px;
  77. margin: 0;
  78. vertical-align: top;
  79. }
  80. .wp-color-picker::-webkit-input-placeholder {
  81. color: #72777c;
  82. }
  83. .wp-color-picker::-moz-placeholder {
  84. color: #72777c;
  85. opacity: 1;
  86. }
  87. .wp-color-picker:-ms-input-placeholder {
  88. color: #72777c;
  89. }
  90. .wp-picker-container input[type="text"].iris-error {
  91. background-color: #ffebe8;
  92. border-color: #c00;
  93. color: #000;
  94. }
  95. .iris-picker .ui-square-handle:focus,
  96. .iris-picker .iris-strip .ui-slider-handle:focus {
  97. box-shadow:
  98. 0 0 0 1px #5b9dd9,
  99. 0 0 2px 1px rgba(30, 140, 190, .8);
  100. }
  101. .iris-picker .iris-palette:focus {
  102. box-shadow:
  103. inset 0 0 5px rgba(0,0,0,.4),
  104. 0 0 0 1px #5b9dd9,
  105. 0 0 2px 1px rgba(30, 140, 190, .8);
  106. }
  107. @media screen and ( max-width: 782px ) {
  108. .wp-picker-container input[type="text"].wp-color-picker {
  109. width: 80px;
  110. padding: 6px 5px 5px;
  111. font-size: 16px;
  112. line-height: 18px;
  113. }
  114. .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
  115. padding: 5px 5px 4px;
  116. }
  117. .wp-picker-container .wp-color-result.button {
  118. height: auto;
  119. padding: 0 40px 0 0;
  120. font-size: 14px;
  121. line-height: 29px;
  122. }
  123. .wp-customizer .wp-picker-container .wp-color-result.button {
  124. font-size: 13px;
  125. line-height: 26px;
  126. }
  127. .wp-picker-container .wp-color-result-text {
  128. padding: 0 14px;
  129. font-size: inherit;
  130. line-height: inherit;
  131. }
  132. .wp-customizer .wp-picker-container .wp-color-result-text {
  133. padding: 0 10px;
  134. }
  135. }
  136. @media screen and ( max-width: 640px ) {
  137. .wp-customizer .wp-picker-container .wp-color-result.button {
  138. font-size: 14px;
  139. line-height: 29px;
  140. }
  141. .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
  142. padding: 6px 5px;
  143. }
  144. }