| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- /*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
- .colorpicker-widget {
- height: 190px;
- user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- /* Decoration */
- .colorpicker-color-decoration,
- .hc-light .colorpicker-color-decoration {
- border: solid 0.1em #000;
- box-sizing: border-box;
- margin: 0.1em 0.2em 0 0.2em;
- width: 0.8em;
- height: 0.8em;
- line-height: 0.8em;
- display: inline-block;
- cursor: pointer;
- }
- .hc-black .colorpicker-color-decoration,
- .vs-dark .colorpicker-color-decoration {
- border: solid 0.1em #eee;
- }
- /* Header */
- .colorpicker-header {
- display: flex;
- height: 24px;
- position: relative;
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
- background-size: 9px 9px;
- image-rendering: pixelated;
- }
- .colorpicker-header .picked-color {
- width: 216px;
- display: flex;
- align-items: center;
- justify-content: center;
- line-height: 24px;
- cursor: pointer;
- color: white;
- flex: 1;
- }
- .colorpicker-header .picked-color .codicon {
- color: inherit;
- font-size: 14px;
- position: absolute;
- left: 8px;
- }
- .colorpicker-header .picked-color.light {
- color: black;
- }
- .colorpicker-header .original-color {
- width: 74px;
- z-index: inherit;
- cursor: pointer;
- }
- /* Body */
- .colorpicker-body {
- display: flex;
- padding: 8px;
- position: relative;
- }
- .colorpicker-body .saturation-wrap {
- overflow: hidden;
- height: 150px;
- position: relative;
- min-width: 220px;
- flex: 1;
- }
- .colorpicker-body .saturation-box {
- height: 150px;
- position: absolute;
- }
- .colorpicker-body .saturation-selection {
- width: 9px;
- height: 9px;
- margin: -5px 0 0 -5px;
- border: 1px solid rgb(255, 255, 255);
- border-radius: 100%;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
- position: absolute;
- }
- .colorpicker-body .strip {
- width: 25px;
- height: 150px;
- }
- .colorpicker-body .hue-strip {
- position: relative;
- margin-left: 8px;
- cursor: grab;
- background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
- }
- .colorpicker-body .opacity-strip {
- position: relative;
- margin-left: 8px;
- cursor: grab;
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
- background-size: 9px 9px;
- image-rendering: pixelated;
- }
- .colorpicker-body .strip.grabbing {
- cursor: grabbing;
- }
- .colorpicker-body .slider {
- position: absolute;
- top: 0;
- left: -2px;
- width: calc(100% + 4px);
- height: 4px;
- box-sizing: border-box;
- border: 1px solid rgba(255, 255, 255, 0.71);
- box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
- }
- .colorpicker-body .strip .overlay {
- height: 150px;
- pointer-events: none;
- }
|