3 * Stylesheet for the administration pages of the Color module.
11 .color-form .form-item {
17 clear: left; /* LTR */
19 [dir="rtl"] .color-form label {
22 .color-form .form-text {
23 float: left; /* LTR */
28 [dir="rtl"] .color-form .form-text {
31 .color-palette__hook {
32 float: left; /* LTR */
36 [dir="rtl"] .color-palette__hook {
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 */
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;
49 .color-palette__hook.is-up {
50 background-position: 100% -27px; /* LTR */
52 [dir="rtl"] .color-palette__hook.is-up {
53 background-position: 0 -27px;
55 .color-palette__hook.is-both {
56 background-position: 100% -54px; /* LTR */
58 [dir="rtl"] .color-palette__hook.is-both {
59 background-position: 0 -54px;
62 * The button also inherits from .link, which hides the background. Use a more
63 * specific selector to overwrite.
65 button.color-palette__lock,
66 .color-palette__lock {
67 float: left; /* LTR */
70 background: url(../images/lock.png) no-repeat 50% 0;
80 [dir="rtl"] button.color-palette__lock,
81 [dir="rtl"] .color-palette__lock {
84 /* Same as above .color-palette__lock rule. */
87 background-position: 50% -22px;
91 @media screen and (min-width: 37.5625em) { /* 601px */
93 float: right; /* LTR */
95 [dir="rtl"] .color-placeholder {
98 .color-form .form-item {
99 margin: 0.5em 195px 0.5em 0; /* LTR */
101 [dir="rtl"] .color-form .form-item {
102 margin: 0.5em 0 0.5em 195px;
105 float: left; /* LTR */
106 clear: left; /* LTR */
109 [dir="rtl"] .color-form label {
113 .color-form .form-text,
114 .color-form .form-select {
115 float: left; /* LTR */
118 [dir="rtl"] .color-form .form-text,
119 [dir="rtl"] .color-form .form-select {
122 .color-palette__hook {
123 float: left; /* LTR */
126 [dir="rtl"] .color-palette__hook {
141 float: left; /* LTR */
143 .js[dir="rtl"] .color-preview {
146 @media screen and (max-width: 30em) { /* 480px */
147 .color-form .color-preview-sidebar,
148 .color-form .color-preview-content {