spectrum.css (4484B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @import "chrome://global/skin/colorpicker-common.css"; 6 7 :root { 8 --accessibility-contrast-swatch-border-color: var(--grey-40); 9 --learn-more-underline: light-dark(var(--grey-30), var(--grey-50)); 10 11 :root[forced-colors-adjust] & { 12 --accessibility-contrast-swatch-border-color: GrayText; 13 --learn-more-underline: CanvasText; 14 } 15 } 16 17 #eyedropper-button { 18 margin-inline-end: 5px; 19 display: block; 20 21 :root[forced-colors-active] & { 22 border: 1px solid currentColor; 23 } 24 } 25 26 #eyedropper-button::before { 27 background-image: url(chrome://devtools/skin/images/command-eyedropper.svg); 28 } 29 30 /* Mix-in classes */ 31 32 #spectrum-tooltip { 33 padding: 5px; 34 } 35 36 .spectrum-controls { 37 width: 200px; 38 } 39 40 .spectrum-container { 41 display: flex; 42 flex-direction: column; 43 margin: -1px; 44 padding-block-end: 6px; 45 } 46 47 .spectrum-color-contrast { 48 padding-block-start: 8px; 49 padding-inline-start: 4px; 50 padding-inline-end: 4px; 51 line-height: 1.2em; 52 } 53 54 .contrast-ratio-header-and-single-ratio, 55 .contrast-ratio-range { 56 display: flex; 57 align-items: stretch; 58 } 59 60 .contrast-ratio-range { 61 margin-block-start: 4px; 62 margin-inline-start: 1px; 63 margin-block-end: 2px; 64 } 65 66 .spectrum-color-contrast.visible { 67 display: block; 68 color: var(--theme-text-color-strong); 69 } 70 71 .spectrum-color-contrast.visible:not(.range) .contrast-ratio-single, 72 .spectrum-color-contrast.visible.range .contrast-ratio-range { 73 display: flex; 74 } 75 76 .spectrum-color-contrast, 77 .spectrum-color-contrast .contrast-ratio-range, 78 .spectrum-color-contrast.range .contrast-ratio-single, 79 .spectrum-color-contrast.error .accessibility-color-contrast-separator, 80 .spectrum-color-contrast.error .contrast-ratio-max { 81 display: none; 82 } 83 84 .contrast-ratio-label { 85 font-size: 10px; 86 padding-inline-end: 4px; 87 } 88 89 .spectrum-color-contrast .accessibility-contrast-value { 90 font-size: 10px; 91 font-variant-numeric: tabular-nums; 92 border-bottom: 1px solid var(--learn-more-underline); 93 94 /* opt-out of forced colors to avoid the backplating that clips the border */ 95 forced-color-adjust: none; 96 } 97 98 .spectrum-color-contrast.visible:not(.error) .contrast-ratio-single .accessibility-contrast-value { 99 margin-inline-start: 10px; 100 } 101 102 .spectrum-color-contrast.visible:not(.error) .contrast-ratio-min .accessibility-contrast-value, 103 .spectrum-color-contrast.visible:not(.error) .contrast-ratio-max .accessibility-contrast-value { 104 margin-inline-start: 7px; 105 } 106 107 .spectrum-color-contrast .accessibility-contrast-value:not(:empty)::before { 108 width: auto; 109 content: none; 110 padding-inline-start: 2px; 111 } 112 113 .spectrum-color-contrast.visible:not(.error) .contrast-value-and-swatch:before { 114 display: inline-flex; 115 content: ""; 116 height: 9px; 117 width: 9px; 118 background-color: var(--accessibility-contrast-color); 119 /* opt-out of forced color so we can actually see the colors */ 120 forced-color-adjust: none; 121 } 122 123 .spectrum-color-contrast.visible:not(.error):-moz-locale-dir(ltr) .contrast-value-and-swatch:before { 124 box-shadow: 125 0 0 0 1px var(--accessibility-contrast-swatch-border-color), 126 6px 5px var(--accessibility-contrast-bg), 127 6px 5px 0 1px var(--accessibility-contrast-swatch-border-color); 128 } 129 130 .spectrum-color-contrast.visible:not(.error):-moz-locale-dir(rtl) .contrast-value-and-swatch:before { 131 box-shadow: 132 0 0 0 1px var(--accessibility-contrast-swatch-border-color), 133 -6px 5px var(--accessibility-contrast-bg), 134 -6px 5px 0 1px var(--accessibility-contrast-swatch-border-color); 135 } 136 137 .spectrum-color-contrast .accessibility-color-contrast-separator:before { 138 margin-inline-end: 4px; 139 color: var(--theme-body-color); 140 } 141 142 .spectrum-color-contrast .accessibility-color-contrast-large-text { 143 margin-inline: 1px; 144 unicode-bidi: isolate; 145 } 146 147 .learn-more { 148 background-repeat: no-repeat; 149 -moz-context-properties: fill; 150 background-image: url(resource://devtools-shared-images/info-small.svg); 151 background-color: transparent; 152 fill: var(--theme-icon-dimmed-color); 153 border: none; 154 margin-inline-start: auto; 155 margin-block-start: 1px; 156 aspect-ratio: 1 / 1; 157 width: 12px; 158 } 159 160 .learn-more:-moz-locale-dir(ltr) { 161 margin-inline-end: -5px; 162 } 163 164 .learn-more:-moz-locale-dir(rtl) { 165 margin-inline-end: -2px; 166 } 167 168 .learn-more:hover, 169 .learn-more:focus { 170 fill: var(--theme-icon-hover-color); 171 cursor: pointer; 172 outline: none; 173 }