color.admin.css

Same filename in this branch
  1. 8.9.x core/themes/stable/css/color/color.admin.css
Same filename in other branches
  1. 9 core/themes/stable9/css/color/color.admin.css
  2. 9 core/themes/stable/css/color/color.admin.css
  3. 9 core/modules/color/css/color.admin.css

Stylesheet for the administration pages of the Color module.

File

core/modules/color/css/color.admin.css

View source
  1. /**
  2. * @file
  3. * Stylesheet for the administration pages of the Color module.
  4. */
  5. .color-form {
  6. max-width: 50em;
  7. }
  8. .farbtastic {
  9. margin: 0 auto;
  10. }
  11. .color-form .form-item {
  12. height: 2em;
  13. margin: 0.5em 0;
  14. padding: 0.5em;
  15. }
  16. .color-form label {
  17. clear: left; /* LTR */
  18. }
  19. [dir="rtl"] .color-form label {
  20. clear: right;
  21. }
  22. .color-form .form-text {
  23. float: left; /* LTR */
  24. width: 86%;
  25. cursor: pointer;
  26. text-align: center;
  27. }
  28. [dir="rtl"] .color-form .form-text {
  29. float: right;
  30. }
  31. .color-palette__hook {
  32. float: left; /* LTR */
  33. width: 16px;
  34. height: 16px;
  35. }
  36. [dir="rtl"] .color-palette__hook {
  37. float: right;
  38. }
  39. .color-palette__hook.is-down,
  40. .color-palette__hook.is-up,
  41. .color-palette__hook.is-both {
  42. background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
  43. }
  44. [dir="rtl"] .color-palette__hook.is-down,
  45. [dir="rtl"] .color-palette__hook.is-up,
  46. [dir="rtl"] .color-palette__hook.is-both {
  47. background: url(../images/hook-rtl.png) no-repeat 0 0;
  48. }
  49. .color-palette__hook.is-up {
  50. background-position: 100% -27px; /* LTR */
  51. }
  52. [dir="rtl"] .color-palette__hook.is-up {
  53. background-position: 0 -27px;
  54. }
  55. .color-palette__hook.is-both {
  56. background-position: 100% -54px; /* LTR */
  57. }
  58. [dir="rtl"] .color-palette__hook.is-both {
  59. background-position: 0 -54px;
  60. }
  61. /**
  62. * The button also inherits from .link, which hides the background. Use a more
  63. * specific selector to overwrite.
  64. */
  65. button.color-palette__lock,
  66. .color-palette__lock {
  67. position: relative;
  68. top: -1.7em;
  69. left: -10px;
  70. float: left; /* LTR */
  71. width: 20px;
  72. height: 19px;
  73. cursor: pointer;
  74. text-indent: -9999px;
  75. direction: ltr;
  76. border: 0;
  77. outline: 0;
  78. background: url(../images/lock.png) no-repeat 50% 0;
  79. }
  80. [dir="rtl"] button.color-palette__lock,
  81. [dir="rtl"] .color-palette__lock {
  82. float: right;
  83. }
  84. /* Same as above .color-palette__lock rule. */
  85. button.is-unlocked,
  86. .is-unlocked {
  87. background-position: 50% -22px;
  88. }
  89. /* wide viewport. */
  90. @media screen and (min-width: 37.5625em) { /* 601px */
  91. .color-placeholder {
  92. float: right; /* LTR */
  93. }
  94. [dir="rtl"] .color-placeholder {
  95. float: left;
  96. }
  97. .color-form .form-item {
  98. margin: 0.5em 195px 0.5em 0; /* LTR */
  99. }
  100. [dir="rtl"] .color-form .form-item {
  101. margin: 0.5em 0 0.5em 195px;
  102. }
  103. .color-form label {
  104. float: left; /* LTR */
  105. clear: left; /* LTR */
  106. width: 15em;
  107. }
  108. [dir="rtl"] .color-form label {
  109. float: right;
  110. clear: right;
  111. }
  112. .color-form .form-text,
  113. .color-form .form-select {
  114. float: left; /* LTR */
  115. width: auto;
  116. }
  117. [dir="rtl"] .color-form .form-text,
  118. [dir="rtl"] .color-form .form-select {
  119. float: right;
  120. }
  121. .color-palette__hook {
  122. float: left; /* LTR */
  123. margin-top: 3px;
  124. }
  125. [dir="rtl"] .color-palette__hook {
  126. float: right;
  127. }
  128. }
  129. .item-selected {
  130. background: #eee;
  131. }
  132. /* Preview */
  133. .color-preview {
  134. display: none;
  135. }
  136. .js .color-preview {
  137. position: relative;
  138. display: block;
  139. float: left; /* LTR */
  140. }
  141. .js[dir="rtl"] .color-preview {
  142. float: right;
  143. }
  144. @media screen and (max-width: 30em) { /* 480px */
  145. .color-form .color-preview-sidebar,
  146. .color-form .color-preview-content {
  147. width: auto;
  148. margin: 0;
  149. }
  150. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.