.codemirror-colorview { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; border: 1px solid #cecece; box-sizing: border-box; cursor: pointer; display: inline-block; height: 10px; margin: 0 2px; position: relative; vertical-align: middle; width: 10px; } .codemirror-colorview .codemirror-colorview-background { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .codemirror-colorview:hover { border-color: #494949; } .codemirror-colorpicker { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.12); display: inline-block; position: relative; width: 224px; z-index: 1000; } .codemirror-colorpicker > .arrow { border-bottom: 10px solid rgba(0, 0, 0, 0.2); border-left: 10px solid transparent; border-right: 10px solid transparent; display: none; height: 0; left: 7px; pointer-events: none; position: absolute; top: -10px; width: 0; } .codemirror-colorpicker > .arrow:after { border-bottom: 9px solid #fff; border-left: 9px solid transparent; border-right: 9px solid transparent; content: ""; height: 0; left: -9px; position: absolute; top: 1px; width: 0; } .codemirror-colorpicker .colorpicker-body .arrow-button { background-color: transparent; height: 12px; padding: 0; position: relative; width: 10px; } .codemirror-colorpicker .colorpicker-body .arrow-button:before { border-bottom: 3px solid #000; height: 50%; top: 0; } .codemirror-colorpicker .colorpicker-body .arrow-button:after, .codemirror-colorpicker .colorpicker-body .arrow-button:before { border-left: 3px solid transparent; border-right: 3px solid transparent; box-sizing: border-box; content: ""; display: inline-block; height: 0; left: 0; margin: 2px; pointer-events: none; position: absolute; right: 0; width: 0; } .codemirror-colorpicker .colorpicker-body .arrow-button:after { border-top: 3px solid #000; bottom: 0; top: 50%; } .codemirror-colorpicker .colorpicker-body .color { cursor: pointer; height: 120px; overflow: hidden; position: relative; } .codemirror-colorpicker .colorpicker-body .color > .saturation, .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { height: 100%; position: relative; width: 100%; } .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { border-radius: 50%; height: 10px; position: absolute; transform: translateX(-50%) translateY(-50%); width: 10px; } .codemirror-colorpicker .colorpicker-body .color > .saturation { background-color: hsla(20, 42%, 65%, 0); background-image: linear-gradient(90deg, #fff, hsla(20, 42%, 65%, 0)); background-repeat: repeat-x; } .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { background-image: linear-gradient(0deg, #000, hsla(20, 42%, 65%, 0)); } .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { border: 1px solid #fff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); } .codemirror-colorpicker .colorpicker-body .control { padding: 10px 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .codemirror-colorpicker .colorpicker-body .control > .color, .codemirror-colorpicker .colorpicker-body .control > .empty { border-radius: 50%; box-sizing: border-box; height: 30px; left: 12px; position: absolute; top: 14px; width: 30px; } .codemirror-colorpicker .colorpicker-body .control > .color { border: 1px solid rgba(0, 0, 0, 0.1); } .codemirror-colorpicker .colorpicker-body .control > .hue { box-sizing: border-box; cursor: pointer; margin: 0 0 0 42px; padding: 6px 16px; position: relative; } .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { border-radius: 3px; height: 10px; position: relative; width: 100%; } .codemirror-colorpicker .colorpicker-body .control > .opacity { box-sizing: border-box; cursor: pointer; margin: 0 0 0 42px; padding: 3px 16px; position: relative; } .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { border-radius: 3px; height: 10px; position: relative; width: 100%; } .codemirror-colorpicker .colorpicker-body .control .drag-bar, .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { border-radius: 50%; cursor: pointer; height: 12px; left: 0; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 12px; } .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { background: linear-gradient( 90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red ); } .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container > .color-bar { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } .codemirror-colorpicker .colorpicker-body .control > .empty { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } .codemirror-colorpicker .colorpicker-body .control .drag-bar, .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { background-color: #fefefe; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2); } .codemirror-colorpicker .colorpicker-body .information { box-sizing: padding-box; position: relative; } .codemirror-colorpicker .colorpicker-body .information > input { bottom: 20px; box-sizing: border-box; font-size: 10px; height: 20px; padding: 0 0 0 2px; position: absolute; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .codemirror-colorpicker .colorpicker-body .information > input[type="number"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .codemirror-colorpicker .colorpicker-body .information > input[type="number"]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .codemirror-colorpicker .colorpicker-body .information.hex > .information-item.hex, .codemirror-colorpicker .colorpicker-body .information.hsl > .information-item.hsl, .codemirror-colorpicker .colorpicker-body .information.rgb > .information-item.rgb { display: flex; } .codemirror-colorpicker .colorpicker-body .information > .information-item { box-sizing: border-box; display: none; margin-right: 40px; padding: 0 5px 0 9px; position: relative; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field { box-sizing: border-box; display: block; flex: 1; padding: 3px; position: relative; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field > .title { color: #a9a9a9; cursor: pointer; font-size: 12px; padding-top: 2px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input { border: 1px solid #cbcbcb; border-radius: 2px; box-sizing: border-box; color: #333; font-size: 11px; height: 21px; padding: 3px; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; width: 100%; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type="number"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type="number"]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-l input[type="number"], .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-s input[type="number"] { padding-left: 1px; padding-right: 10px; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field .postfix { box-sizing: border-box; display: inline-block; font-size: 11px; height: 21px; line-height: 2; padding: 2px; position: absolute; right: 3px; text-align: center; top: 2px; } .codemirror-colorpicker .colorpicker-body .information > .information-change { bottom: 0; box-sizing: border-box; display: block; padding-top: 5px; position: absolute; right: 0; text-align: center; top: 0; width: 40px; } .codemirror-colorpicker .colorpicker-body .information > .information-change > .format-change-button { background: transparent; border: 0; box-sizing: border-box; cursor: pointer; outline: none; } .codemirror-colorpicker .colorpicker-body .information > .title { color: #a3a3a3; } .codemirror-colorpicker .colorpicker-body .information > .input { color: #333; } .codemirror-colorpicker .colorpicker-body .colorsets { border-top: 1px solid #e2e2e2; } .codemirror-colorpicker .colorpicker-body .colorsets > .menu { float: right; padding: 10px 15px 10px 5px; } .codemirror-colorpicker .colorpicker-body .colorsets > .menu button { border: 0; cursor: pointer; font-family: serif, sans-serif; font-size: 14px; font-weight: 300; outline: none; } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list { box-sizing: border-box; display: block; line-height: 0; margin-right: 30px; padding: 12px 0 0 12px; } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item { background-size: contain; border-radius: 2px; box-sizing: border-box; cursor: pointer; display: inline-block; height: 13px; margin-bottom: 12px; margin-right: 12px; overflow: hidden; position: relative; vertical-align: middle; width: 13px; } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item:hover { transform: scale(1.2); } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .empty { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; height: 100%; left: 0; margin: 0; padding: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .color-view { border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; height: 100%; left: 0; margin: 0; padding: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .add-color-item { color: #8e8e8e; cursor: pointer; display: inline-block; font-family: serif, sans-serif; font-size: 16px; font-weight: 400; height: 13px; line-height: 1; margin-bottom: 12px; margin-right: 12px; text-align: center; vertical-align: middle; width: 13px; } .codemirror-colorpicker .colorpicker-body .color-chooser { background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity 0.05s ease-out; } .codemirror-colorpicker .colorpicker-body .color-chooser.open { opacity: 1; pointer-events: all; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container { background-color: #fff; bottom: 0; left: 0; position: absolute; right: 0; top: 120px; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header { border-bottom: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; display: flex; height: 34px; left: 0; padding: 3px 0; position: absolute; right: 0; top: 0; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title { box-sizing: border-box; color: #000; flex: 2; font-size: 15px; font-weight: 700; margin: 0; overflow: hidden; padding: 5px 5px 5px 14px; text-align: left; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items { cursor: pointer; display: block; flex: 1; height: 100%; line-height: 2; padding-right: 10px; text-align: right; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list { bottom: 0; left: 0; overflow: auto; position: absolute; right: 0; top: 34px; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; display: flex; padding: 3px 0; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover { background-color: rgba(0, 0, 0, 0.05); } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title { box-sizing: border-box; color: #000; flex: 2; font-size: 14px; font-size: 13px; font-weight: 400; margin: 0; overflow: hidden; padding: 5px 5px 5px 14px; pointer-events: none; text-align: left; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { cursor: pointer; display: block; flex: 3; height: 100%; line-height: 1.6; pointer-events: none; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; background-size: contain; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; cursor: pointer; display: inline-block; height: 13px; margin-right: 10px; overflow: hidden; vertical-align: middle; width: 13px; } .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view { height: 100%; margin: 0; padding: 0; pointer-events: none; width: 100%; } .codemirror-colorpicker.sketch { border-radius: 5px; } .codemirror-colorpicker.sketch > .colorpicker-body > .color { box-sizing: border-box; height: 150px; margin: 10px 10px 2px; } .codemirror-colorpicker.sketch > .colorpicker-body > .control { padding: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .color, .codemirror-colorpicker.sketch > .colorpicker-body > .control > .empty { border-radius: 2px; box-sizing: border-box; height: 26px; left: auto; position: absolute; right: 10px; top: 1px; width: 26px; } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .color { box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.5); } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .hue { margin: 0 38px 0 0; padding: 2px 2px 2px 10px; position: relative; } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .hue > .hue-container { border-radius: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .opacity { margin: 0 38px 0 0; padding: 2px 2px 2px 10px; position: relative; } .codemirror-colorpicker.sketch > .colorpicker-body > .control > .opacity > .opacity-container { border-radius: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar, .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2 { border-radius: 0; border-radius: 1px; bottom: 1px !important; height: 50%; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%); width: 2px; } .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.first, .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar.first { left: 0; transform: translateX(50%) translateY(-50%) !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.last, .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar.last { transform: translateX(-150%) translateY(-50%) !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-change { display: none; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.rgb { display: inherit; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.hsl { display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hex { display: inherit; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hsl, .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.rgb { display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.hsl { display: inherit; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item { display: inline-flex !important; margin-right: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field { padding-left: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child { padding-right: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title { color: #000; cursor: pointer; font-size: 11px; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child:not(:first-child) { padding-right: 0; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hex { padding-left: 5px; padding-right: 0; width: 74px; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.rgb { padding-left: 0; padding-right: 0; width: 140px; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl { display: none; padding-left: 0; padding-right: 0; width: 140px; } .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list { margin-right: 0; padding-right: 12px; } .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list .color-item { border-radius: 3px; height: 16px; margin-bottom: 10px; margin-right: 9px; width: 16px; } .codemirror-colorpicker.palette { border-radius: 3px; box-shadow: none; } .codemirror-colorpicker.palette > .colorpicker-body > .color, .codemirror-colorpicker.palette > .colorpicker-body > .control, .codemirror-colorpicker.palette > .colorpicker-body > .information { display: none; } .codemirror-colorpicker.palette > .colorpicker-body > .colorsets { border-top: 0; box-sizing: border-box; } .codemirror-colorpicker.palette > .colorpicker-body > .colorsets > .color-list .color-item { height: 15px; margin-bottom: 10px; margin-right: 10px; width: 15px; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser { box-sizing: border-box; display: none; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open { border: 1px solid #d8d8d8; border-radius: 3px; bottom: auto; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.12); display: block; left: -1px; right: -1px; top: -1px; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container { background-color: #fff; border-radius: 2px; bottom: auto; box-sizing: border-box; left: auto; position: relative; right: auto; top: auto; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-item-header { border-top-left-radius: 3px; border-top-right-radius: 3px; bottom: auto; left: auto; position: relative; right: auto; top: auto; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list { bottom: auto; left: auto; overflow: auto; position: relative; right: auto; top: auto; } .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open .color-chooser-container .colorsets-list .colorsets-item:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .codemirror-colorpicker.macos .colorpicker-body .wheel { box-sizing: border-box; height: 224px; position: relative; width: 224px; } .codemirror-colorpicker.macos .colorpicker-body .wheel .wheel-canvas { border-radius: 50%; height: 214px; left: 5px; position: absolute; top: 5px; width: 214px; } .codemirror-colorpicker.macos .colorpicker-body .wheel .drag-pointer { border: 1px solid #fff; border-radius: 50%; display: inline-block; height: 10px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 10px; z-index: 2; } .codemirror-colorpicker.macos .control { padding-top: 0; } .codemirror-colorpicker.macos .control > .color, .codemirror-colorpicker.macos .control > .empty { top: 4px; } .codemirror-colorpicker.macos .value { box-sizing: border-box; cursor: pointer; margin: 0 0 0 42px; padding: 6px 16px; position: relative; } .codemirror-colorpicker.macos .value > .value-container { background-image: linear-gradient(90deg, #000 0, hsla(0, 0%, 100%, 0)); border-radius: 3px; box-sizing: border-box; height: 10px; position: relative; width: 100%; } .codemirror-colorpicker.macos .value > .value-container .drag-bar { border-radius: 50%; cursor: pointer; height: 12px; left: 0; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 12px; } .codemirror-colorpicker.mini { display: inline-block; width: 180px; } .codemirror-colorpicker.mini .control { padding: 0; } .codemirror-colorpicker.mini .control .hue, .codemirror-colorpicker.mini .control .opacity { margin: 0; padding: 0; } .codemirror-colorpicker.mini .control .hue > .hue-container, .codemirror-colorpicker.mini .control .opacity > .opacity-container { border-radius: 0; height: 20px; overflow: hidden; } .codemirror-colorpicker.mini .control .drag-bar, .codemirror-colorpicker.mini .control .drag-bar2 { background-color: transparent; border: 0; box-shadow: none; box-sizing: border-box; height: 100%; width: 5px; } .codemirror-colorpicker.mini .control .drag-bar2.last:before, .codemirror-colorpicker.mini .control .drag-bar2.lastafter, .codemirror-colorpicker.mini .control .drag-bar.last:before, .codemirror-colorpicker.mini .control .drag-bar.lastafter { left: 1px; } .codemirror-colorpicker.mini .control .drag-bar2.first:after, .codemirror-colorpicker.mini .control .drag-bar2.first:before, .codemirror-colorpicker.mini .control .drag-bar.first:after, .codemirror-colorpicker.mini .control .drag-bar.first:before { left: 3px; } .codemirror-colorpicker.mini .control .drag-bar2:before, .codemirror-colorpicker.mini .control .drag-bar:before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; content: ""; height: 0; left: 2px; position: absolute; top: 0; transform: translateX(-50%); width: 0; } .codemirror-colorpicker.mini .control .drag-bar2:after, .codemirror-colorpicker.mini .control .drag-bar:after { border-bottom: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; bottom: 0; content: ""; height: 0; left: 2px; position: absolute; transform: translateX(-50%); width: 0; } .codemirror-colorpicker.mini-vertical { display: inline-block; width: 180px; } .codemirror-colorpicker.mini-vertical .color { display: inline-block; height: 160px; vertical-align: middle; width: 140px; } .codemirror-colorpicker.mini-vertical .control { display: inline-block; height: 160px; padding: 0; vertical-align: middle; } .codemirror-colorpicker.mini-vertical .control .hue, .codemirror-colorpicker.mini-vertical .control .opacity { display: inline-block; height: 100%; margin: 0; padding: 0; position: relative; vertical-align: middle; width: 20px; } .codemirror-colorpicker.mini-vertical .control .hue > .hue-container { background: linear-gradient( 0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red ); border-radius: 0; height: 100%; overflow: hidden; } .codemirror-colorpicker.mini-vertical .control .opacity > .opacity-container { border-radius: 0; height: 100%; overflow: hidden; width: 20px; } .codemirror-colorpicker.mini-vertical .control .drag-bar, .codemirror-colorpicker.mini-vertical .control .drag-bar2 { background-color: transparent; border: 0; box-shadow: none; box-sizing: border-box; height: 2px; transform: none; width: 100%; } .codemirror-colorpicker.mini-vertical .control .drag-bar2.last:after, .codemirror-colorpicker.mini-vertical .control .drag-bar2.last:before, .codemirror-colorpicker.mini-vertical .control .drag-bar.last:after, .codemirror-colorpicker.mini-vertical .control .drag-bar.last:before { top: 2px; } .codemirror-colorpicker.mini-vertical .control .drag-bar2.first:after, .codemirror-colorpicker.mini-vertical .control .drag-bar2.first:before, .codemirror-colorpicker.mini-vertical .control .drag-bar.first:after, .codemirror-colorpicker.mini-vertical .control .drag-bar.first:before { top: -1px; } .codemirror-colorpicker.mini-vertical .control .drag-bar2:before, .codemirror-colorpicker.mini-vertical .control .drag-bar:before { border-bottom: 4px solid transparent; border-left: 4px solid #000; border-top: 4px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: 2px; transform: translateY(-50%); width: 0; } .codemirror-colorpicker.mini-vertical .control .drag-bar2:after, .codemirror-colorpicker.mini-vertical .control .drag-bar:after { border-bottom: 4px solid transparent; border-right: 4px solid #000; border-top: 4px solid transparent; content: ""; height: 0; position: absolute; right: 0; top: 2px; transform: translateY(-50%); width: 0; } .codemirror-colorpicker.ring .colorpicker-body > .color { height: 120px; left: 52px; position: absolute; top: 52px; width: 120px; } .codemirror-colorpicker.ring .colorpicker-body .wheel { box-sizing: border-box; height: 224px; position: relative; width: 224px; } .codemirror-colorpicker.ring .colorpicker-body .wheel .wheel-canvas { border-radius: 50%; height: 214px; left: 5px; position: absolute; top: 5px; width: 214px; } .codemirror-colorpicker.ring .colorpicker-body .wheel .drag-pointer { border: 1px solid #fff; border-radius: 50%; display: inline-block; height: 10px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 10px; z-index: 2; } .codemirror-colorpicker.ring .control { padding-top: 0; } .codemirror-colorpicker.ring .control .value { display: none; } .codemirror-colorpicker.ring .control > .color, .codemirror-colorpicker.ring .control > .empty { border-radius: 2px; height: 30px; top: -17px; width: 30px; } .codemirror-colorpicker.xd { display: inline-block; padding-top: 12px; width: 245px; } .codemirror-colorpicker.xd .color { border: 1px solid #cecece; border-radius: 3px; box-sizing: border-box; display: inline-block; height: 170px; margin-bottom: 12px; margin-left: 12px; overflow: hidden; vertical-align: middle; width: 170px; } .codemirror-colorpicker.xd .color > .saturation > .value > .drag-pointer { border: 2px solid #fff; box-shadow: 0 0 1px 0 #000, inset 0 0 1px 0 #000; height: 7px; width: 7px; } .codemirror-colorpicker.xd .control { display: inline-block; height: 170px; margin-bottom: 12px; margin-right: 12px; padding: 0; vertical-align: middle; } .codemirror-colorpicker.xd .control .hue, .codemirror-colorpicker.xd .control .opacity { border-radius: 3px; display: inline-block; height: 100%; margin: 0 0 0 8px; overflow: hidden; padding: 0; position: relative; vertical-align: middle; width: 13px; } .codemirror-colorpicker.xd .control .hue > .hue-container { background: linear-gradient( 0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red ); border-radius: 0; height: 100%; overflow: hidden; } .codemirror-colorpicker.xd .control .opacity > .opacity-container { border-radius: 0; height: 100%; overflow: hidden; } .codemirror-colorpicker.xd .control .drag-bar, .codemirror-colorpicker.xd .control .drag-bar2 { background-color: transparent; border: 2px solid #fff; box-shadow: 0 0 1px 0 #000, inset 0 0 1px 0 #000; box-sizing: border-box; height: 10px; left: 50%; overflow: hidden; transform: none; transform: translateX(-50%) translateY(-50%); width: 10px; } .codemirror-colorpicker.xd .information { margin-top: 5px; } .codemirror-colorpicker.vscode { background-color: #333; border: 1px solid #ececec; box-sizing: border-box; width: 336px; } .codemirror-colorpicker.vscode, .codemirror-colorpicker.vscode .colorpicker-body { border-radius: 0; display: inline-block; } .codemirror-colorpicker.vscode .colorpicker-body .color-view { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; height: 34px; } .codemirror-colorpicker.vscode .colorpicker-body .color-view .color-view-container { cursor: pointer; font-size: 14px; height: 100%; line-height: 34px; text-align: center; text-shadow: 0 0 3px #535353; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .codemirror-colorpicker.vscode .colorpicker-body .color-tool { padding: 8px; } .codemirror-colorpicker.vscode .color { display: inline-block; height: 160px; vertical-align: middle; width: 240px; } .codemirror-colorpicker.vscode .control { display: inline-block; height: 160px; padding: 0 0 0 4px; vertical-align: middle; } .codemirror-colorpicker.vscode .control .hue, .codemirror-colorpicker.vscode .control .opacity { display: inline-block; height: 100%; margin: 0; padding: 0; position: relative; vertical-align: middle; width: 30px; } .codemirror-colorpicker.vscode .control .hue { padding-left: 5px; width: 35px; } .codemirror-colorpicker.vscode .control .hue > .hue-container { background: linear-gradient( 0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red ); border-radius: 0; height: 100%; } .codemirror-colorpicker.vscode .control .opacity > .opacity-container { border-radius: 0; height: 100%; width: 30px; } .codemirror-colorpicker.vscode .control .drag-bar, .codemirror-colorpicker.vscode .control .drag-bar2 { background-color: transparent; border: 1px solid #fff; border-radius: 0; box-shadow: none; box-shadow: 0 0 2px 0 #000, inset 0 0 0 0 #000; box-sizing: border-box; height: 5px; transform: translateY(-50%) translateX(-2px); width: 33px; } .colorsets-contextmenu { background-color: #ececec; border: 1px solid #ccc; border-radius: 6px; display: none; font-size: 13px; list-style: none; padding: 4px 0; position: fixed; } .colorsets-contextmenu.show { display: inline-block; } .colorsets-contextmenu .menu-item { cursor: default; padding: 2px 20px; } .colorsets-contextmenu .menu-item:hover { background-color: #5ea3fb; color: #fff; } .colorsets-contextmenu.small .menu-item.small-hide { display: none; } .CodeMirror { color: #000; direction: ltr; font-family: monospace; height: 300px; } .CodeMirror-lines { padding: 4px 0; } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 4px; } .CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: #fff; } .CodeMirror-gutters { background-color: #f7f7f7; border-right: 1px solid #ddd; white-space: nowrap; } .CodeMirror-linenumber { color: #999; min-width: 20px; padding: 0 3px 0 5px; text-align: right; white-space: nowrap; } .CodeMirror-guttermarker { color: #000; } .CodeMirror-guttermarker-subtle { color: #999; } .CodeMirror-cursor { border-left: 1px solid #000; border-right: none; width: 0; } .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .cm-fat-cursor .CodeMirror-cursor { background: #7e7; border: 0 !important; width: auto; } .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); } .cm-animate-fat-cursor, .cm-fat-cursor-mark { -webkit-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; } .cm-animate-fat-cursor { background-color: #7e7; width: auto; } @-webkit-keyframes blink { 50% { background-color: transparent; } } @keyframes blink { 50% { background-color: transparent; } } .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-rulers { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: -50px; } .CodeMirror-ruler { border-left: 1px solid #ccc; bottom: 0; position: absolute; top: 0; } .cm-s-default .cm-header { color: blue; } .cm-s-default .cm-quote { color: #090; } .cm-negative { color: #d44; } .cm-positive { color: #292; } .cm-header, .cm-strong { font-weight: 700; } .cm-em { font-style: italic; } .cm-link { text-decoration: underline; } .cm-strikethrough { text-decoration: line-through; } .cm-s-default .cm-keyword { color: #708; } .cm-s-default .cm-atom { color: #219; } .cm-s-default .cm-number { color: #164; } .cm-s-default .cm-def { color: #00f; } .cm-s-default .cm-variable-2 { color: #05a; } .cm-s-default .cm-type, .cm-s-default .cm-variable-3 { color: #085; } .cm-s-default .cm-comment { color: #a50; } .cm-s-default .cm-string { color: #a11; } .cm-s-default .cm-string-2 { color: #f50; } .cm-s-default .cm-meta, .cm-s-default .cm-qualifier { color: #555; } .cm-s-default .cm-builtin { color: #30a; } .cm-s-default .cm-bracket { color: #997; } .cm-s-default .cm-tag { color: #170; } .cm-s-default .cm-attribute { color: #00c; } .cm-s-default .cm-hr { color: #999; } .cm-s-default .cm-link { color: #00c; } .cm-invalidchar, .cm-s-default .cm-error { color: red; } .CodeMirror-composing { border-bottom: 2px solid; } div.CodeMirror span.CodeMirror-matchingbracket { color: #0b0; } div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #a22; } .CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); } .CodeMirror-activeline-background { background: #e8f2ff; } .CodeMirror { background: #fff; overflow: hidden; position: relative; } .CodeMirror-scroll { height: 100%; margin-bottom: -50px; margin-right: -50px; outline: none; overflow: scroll !important; padding-bottom: 50px; position: relative; } .CodeMirror-sizer { border-right: 50px solid transparent; position: relative; } .CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { display: none; outline: none; position: absolute; z-index: 6; } .CodeMirror-vscrollbar { overflow-x: hidden; overflow-y: scroll; right: 0; top: 0; } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-x: scroll; overflow-y: hidden; } .CodeMirror-scrollbar-filler { bottom: 0; right: 0; } .CodeMirror-gutter-filler { bottom: 0; left: 0; } .CodeMirror-gutters { left: 0; min-height: 100%; position: absolute; top: 0; z-index: 3; } .CodeMirror-gutter { display: inline-block; height: 100%; margin-bottom: -50px; vertical-align: top; white-space: normal; } .CodeMirror-gutter-wrapper { background: none !important; border: none !important; position: absolute; z-index: 4; } .CodeMirror-gutter-background { bottom: 0; position: absolute; top: 0; z-index: 4; } .CodeMirror-gutter-elt { cursor: default; position: absolute; z-index: 4; } .CodeMirror-gutter-wrapper ::selection { background-color: transparent; } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; } .CodeMirror-lines { cursor: text; min-height: 1px; } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { word-wrap: normal; -webkit-tap-highlight-color: transparent; font-feature-settings: "calt"; background: transparent; border-radius: 0; border-width: 0; color: inherit; font-family: inherit; font-size: inherit; -webkit-font-variant-ligatures: contextual; font-variant-ligatures: contextual; line-height: inherit; margin: 0; overflow: visible; position: relative; white-space: pre; z-index: 2; } .CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 0; } .CodeMirror-linewidget { padding: 0.1px; position: relative; z-index: 2; } .CodeMirror-rtl pre { direction: rtl; } .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer { box-sizing: content-box; } .CodeMirror-measure { height: 0; overflow: hidden; position: absolute; visibility: hidden; width: 100%; } .CodeMirror-cursor { pointer-events: none; position: absolute; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { position: relative; visibility: hidden; z-index: 3; } .CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, 0.4); } .cm-force-border { padding-right: 0.1px; } @media print { .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } .cm-tab-wrap-hack:after { content: ""; } span.CodeMirror-selectedtext { background: none; } .CodeMirror-dialog { background: inherit; color: inherit; left: 0; overflow: hidden; padding: 0.1em 0.8em; position: absolute; right: 0; z-index: 15; } .CodeMirror-dialog-top { border-bottom: 1px solid #eee; top: 0; } .CodeMirror-dialog-bottom { border-top: 1px solid #eee; bottom: 0; } .CodeMirror-dialog input { background: transparent; border: none; color: inherit; font-family: monospace; outline: none; width: 20em; } .CodeMirror-dialog button { font-size: 70%; } .CodeMirror-lint-markers { width: 16px; } .CodeMirror-lint-tooltip { background-color: #ffd; border: 1px solid #000; border-radius: 4px 4px 4px 4px; color: #000; font-family: monospace; font-size: 10pt; max-width: 600px; opacity: 0; overflow: hidden; padding: 2px 5px; position: fixed; transition: opacity 0.4s; -moz-transition: opacity 0.4s; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -ms-transition: opacity 0.4s; white-space: pre; white-space: pre-wrap; z-index: 100; } .CodeMirror-lint-mark { background-position: 0 100%; background-repeat: repeat-x; } .CodeMirror-lint-mark-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); } .CodeMirror-lint-mark-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg=="); } .CodeMirror-lint-marker { background-position: 50%; background-repeat: no-repeat; cursor: pointer; display: inline-block; height: 16px; position: relative; vertical-align: middle; width: 16px; } .CodeMirror-lint-message { background-position: 0 0; background-repeat: no-repeat; padding-left: 18px; } .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); } .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); } .CodeMirror-lint-marker-multiple { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); background-position: 100% 100%; background-repeat: no-repeat; height: 100%; width: 100%; } .CodeMirror-lint-line-error { background-color: rgba(183, 76, 81, 0.08); } .CodeMirror-lint-line-warning { background-color: rgba(255, 211, 0, 0.1); } .CodeMirror { background-color: #fff; border: 1px solid #dfdfdf; border-radius: 3px; height: auto !important; } .CodeMirror-code { outline: none; } .CodeMirror-focused .cm-matchhighlight { color: #fff !important; outline: 1px solid green; } .cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid #fff !important; } .CodeMirror-lint-marker-multiple, [class*="CodeMirror-lint-marker"], [class*="CodeMirror-lint-message"] { background-image: none; } .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { cursor: help; } .CodeMirror-lint-marker-multiple { position: absolute; top: 0; } [class*="CodeMirror-lint-marker"]:before { font: normal 18px/1 dashicons; position: relative; top: -2px; } [class*="CodeMirror-lint-message"]:before { font: normal 16px/1 dashicons; left: 16px; position: absolute; } .CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); margin: 5px 0 2px; padding: 3px 12px 3px 28px; } .CodeMirror-lint-message-warning { background-color: #fff8e5; border-left: 4px solid #ffb900; } .CodeMirror-lint-marker-warning:before, .CodeMirror-lint-message-warning:before { color: #f6a306; content: "\f534"; } .CodeMirror-lint-message-error { background-color: #fbeaea; border-left: 4px solid #dc3232; } .CodeMirror-lint-marker-error:before, .CodeMirror-lint-message-error:before { color: #dc3232; content: "\f153"; } .CodeMirror-lint-tooltip { background: none; border: none; border-radius: 0; direction: ltr; } .CodeMirror .CodeMirror-matchingbracket { background: rgba(255, 150, 0, 0.3); color: inherit; } .CodeMirror .CodeMirror-linenumber { color: #666; }