| OLD | NEW |
| 1 /* https://github.com/bgrins/spectrum */ | 1 /* https://github.com/bgrins/spectrum */ |
| 2 :host { | 2 :host { |
| 3 width: 232px; | 3 width: 232px; |
| 4 height: 240px; | 4 height: 240px; |
| 5 -webkit-user-select: none; | 5 -webkit-user-select: none; |
| 6 } | 6 } |
| 7 | 7 |
| 8 :host(.palettes-enabled) { | 8 :host(.palettes-enabled) { |
| 9 height: 271px; | 9 height: 271px; |
| 10 } | 10 } |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 81 top: -1px; | 81 top: -1px; |
| 82 cursor: pointer; | 82 cursor: pointer; |
| 83 width: 13px; | 83 width: 13px; |
| 84 height: 13px; | 84 height: 13px; |
| 85 border-radius: 13px; | 85 border-radius: 13px; |
| 86 background-color: rgb(248, 248, 248); | 86 background-color: rgb(248, 248, 248); |
| 87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); | 87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); |
| 88 } | 88 } |
| 89 | 89 |
| 90 .swatch { | 90 .swatch { |
| 91 width: 16px; | 91 width: 24px; |
| 92 height: 16px; | 92 height: 24px; |
| 93 margin: 0; | 93 margin: 0; |
| 94 position: absolute; | 94 position: absolute; |
| 95 top: 148px; | 95 top: 144px; |
| 96 left: 48px; | 96 left: 47px; |
| 97 background-image: url(Images/checker.png); | 97 background-image: url(Images/checker.png); |
| 98 border-radius: 16px; | 98 border-radius: 16px; |
| 99 } | 99 } |
| 100 | 100 |
| 101 .swatch-inner { | 101 .swatch-inner { |
| 102 width: 100%; | 102 width: 100%; |
| 103 height: 100%; | 103 height: 100%; |
| 104 display: inline-block; | 104 display: inline-block; |
| 105 border-radius: 16px; | 105 border-radius: 16px; |
| 106 } | 106 } |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 183 left: 12px; | 183 left: 12px; |
| 184 top: 144px; | 184 top: 144px; |
| 185 cursor: pointer; | 185 cursor: pointer; |
| 186 } | 186 } |
| 187 | 187 |
| 188 .spectrum-palette { | 188 .spectrum-palette { |
| 189 border-top: 1px solid #dadada; | 189 border-top: 1px solid #dadada; |
| 190 position: absolute; | 190 position: absolute; |
| 191 top: 235px; | 191 top: 235px; |
| 192 width: 100%; | 192 width: 100%; |
| 193 padding-right: 24px; | 193 padding: 6px 24px 6px 6px; |
| 194 display: flex; | 194 display: flex; |
| 195 flex-wrap: wrap; | 195 flex-wrap: wrap; |
| 196 } | 196 } |
| 197 | 197 |
| 198 .spectrum-palette-color { | 198 .spectrum-palette-color { |
| 199 width: 12px; |
| 199 height: 12px; | 200 height: 12px; |
| 200 flex: 0 0 12px; | 201 flex: 0 0 12px; |
| 201 display: inline-block; | 202 display: inline-block; |
| 202 border-radius: 2px; | 203 border-radius: 2px; |
| 203 margin-left: 12px; | 204 margin: 6px; |
| 204 margin-top: 12px; | |
| 205 cursor: pointer; | 205 cursor: pointer; |
| 206 } | 206 } |
| 207 | 207 |
| 208 .spectrum-palette-color.empty-color { | |
| 209 border: 1px solid #dadada; | |
| 210 } | |
| 211 | |
| 212 .spectrum-palette > .spectrum-palette-color { | 208 .spectrum-palette > .spectrum-palette-color { |
| 213 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); | 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); |
| 210 border: 1px solid rgba(0, 0, 0, 0.1); |
| 211 } |
| 212 |
| 213 .spectrum-palette > .spectrum-palette-color.empty-color { |
| 214 border-color: transparent; |
| 214 } | 215 } |
| 215 | 216 |
| 216 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { | 217 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { |
| 217 transform: scale(1.15); | 218 transform: scale(1.15); |
| 218 } | 219 } |
| 219 | 220 |
| 220 .spectrum-palette > .toolbar { | 221 .add-color-toolbar { |
| 221 margin-left: 5px; | 222 position: absolute; |
| 222 margin-top: 5px; | 223 right: 29px; |
| 224 bottom: 5px; |
| 223 } | 225 } |
| 224 | 226 |
| 225 .spectrum-palette-switcher { | 227 .spectrum-palette-switcher { |
| 226 right: 10px; | 228 right: 10px; |
| 227 top: 235px; | 229 top: 235px; |
| 228 margin-top: 9px; | 230 margin-top: 9px; |
| 229 position: absolute; | 231 position: absolute; |
| 230 } | 232 } |
| 231 | 233 |
| 232 .palette-panel { | 234 .palette-panel { |
| (...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 302 width: 100%; | 304 width: 100%; |
| 303 height: 100%; | 305 height: 100%; |
| 304 } | 306 } |
| 305 | 307 |
| 306 .spectrum-contrast-line { | 308 .spectrum-contrast-line { |
| 307 fill: none; | 309 fill: none; |
| 308 stroke: white; | 310 stroke: white; |
| 309 opacity: 0.7; | 311 opacity: 0.7; |
| 310 stroke-width: 1.5px; | 312 stroke-width: 1.5px; |
| 311 } | 313 } |
| OLD | NEW |