4c195480227705aae2bf03b297371fe25837e24f661e25526701c3a20d3f8160b8c82b86122d86180fea917f81e19cc286ec3ac4c37e6ac54619bf8953f122 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. .colorpicker-widget {
  6. height: 190px;
  7. user-select: none;
  8. -webkit-user-select: none;
  9. -ms-user-select: none;
  10. }
  11. /* Decoration */
  12. .colorpicker-color-decoration,
  13. .hc-light .colorpicker-color-decoration {
  14. border: solid 0.1em #000;
  15. box-sizing: border-box;
  16. margin: 0.1em 0.2em 0 0.2em;
  17. width: 0.8em;
  18. height: 0.8em;
  19. line-height: 0.8em;
  20. display: inline-block;
  21. cursor: pointer;
  22. }
  23. .hc-black .colorpicker-color-decoration,
  24. .vs-dark .colorpicker-color-decoration {
  25. border: solid 0.1em #eee;
  26. }
  27. /* Header */
  28. .colorpicker-header {
  29. display: flex;
  30. height: 24px;
  31. position: relative;
  32. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
  33. background-size: 9px 9px;
  34. image-rendering: pixelated;
  35. }
  36. .colorpicker-header .picked-color {
  37. width: 216px;
  38. display: flex;
  39. align-items: center;
  40. justify-content: center;
  41. line-height: 24px;
  42. cursor: pointer;
  43. color: white;
  44. flex: 1;
  45. }
  46. .colorpicker-header .picked-color .codicon {
  47. color: inherit;
  48. font-size: 14px;
  49. position: absolute;
  50. left: 8px;
  51. }
  52. .colorpicker-header .picked-color.light {
  53. color: black;
  54. }
  55. .colorpicker-header .original-color {
  56. width: 74px;
  57. z-index: inherit;
  58. cursor: pointer;
  59. }
  60. /* Body */
  61. .colorpicker-body {
  62. display: flex;
  63. padding: 8px;
  64. position: relative;
  65. }
  66. .colorpicker-body .saturation-wrap {
  67. overflow: hidden;
  68. height: 150px;
  69. position: relative;
  70. min-width: 220px;
  71. flex: 1;
  72. }
  73. .colorpicker-body .saturation-box {
  74. height: 150px;
  75. position: absolute;
  76. }
  77. .colorpicker-body .saturation-selection {
  78. width: 9px;
  79. height: 9px;
  80. margin: -5px 0 0 -5px;
  81. border: 1px solid rgb(255, 255, 255);
  82. border-radius: 100%;
  83. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  84. position: absolute;
  85. }
  86. .colorpicker-body .strip {
  87. width: 25px;
  88. height: 150px;
  89. }
  90. .colorpicker-body .hue-strip {
  91. position: relative;
  92. margin-left: 8px;
  93. cursor: grab;
  94. background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  95. }
  96. .colorpicker-body .opacity-strip {
  97. position: relative;
  98. margin-left: 8px;
  99. cursor: grab;
  100. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
  101. background-size: 9px 9px;
  102. image-rendering: pixelated;
  103. }
  104. .colorpicker-body .strip.grabbing {
  105. cursor: grabbing;
  106. }
  107. .colorpicker-body .slider {
  108. position: absolute;
  109. top: 0;
  110. left: -2px;
  111. width: calc(100% + 4px);
  112. height: 4px;
  113. box-sizing: border-box;
  114. border: 1px solid rgba(255, 255, 255, 0.71);
  115. box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
  116. }
  117. .colorpicker-body .strip .overlay {
  118. height: 150px;
  119. pointer-events: none;
  120. }