$primary: red !default; $primary-alt: white !default; $switch-padding: 6px !default; ColorEditor { flex-direction: column; min-width: 300px; max-width: 300px; min-height: 300px; > .canvas { border-top: 1px solid rgba( white, 0.5 ); flex-grow: 1; flex-direction: column; padding: 10px 15px; > textentry.textentry { flex-grow: 0; flex-shrink: 0; width: auto; } } .slider { padding: 6.5px; } .slider .track { height: 14px; border-radius: 14px; left: 0px; right: 0px; transition: all 0.1s ease-out; .inner { display: none; } } .slider:hover, .slider:active { padding: 7px; .track { height: 20px; border-radius: 6px; } .thumb { width: 10px; height: 16px; margin-left: 2px; } } .slider .thumb { width: 10px; height: 10px; box-shadow: 0px 0px 0px transparent; background-color: white; backdrop-filter: invert( 1 ); margin-left: 1px; pointer-events: none; } .alpha_slider .track { background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) ); } .hue .track { background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); .inner { display: none; } } .satval { background: linear-gradient(to right, white, transparent); height: 200px; &:active { z-index: 10; cursor: none; } .value_gradient { background: linear-gradient(to bottom, black, white); position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; mix-blend-mode: multiply; } .thumb { z-index: 10; } } .presets { flex-wrap: wrap; align-content: center; justify-content: center; padding: 15px; border-top: 1px solid rgba( white, 0.5 ); .preset { background-color: white; width: 16px; height: 16px; margin: 2px; border-radius: 20px; cursor: pointer; &:hover { box-shadow: 0px 0px 1px 2px white; } } } } .coloreditorrgba { flex-direction: column; .slider { padding-right: 16px; } .slider .track { background-color: transparent; height: 14px; border-radius: 14px; left: 0px; right: 0px; .inner { display: none; } } .slider .thumb { width: 12px; height: 12px; box-shadow: 0px 0px 0px transparent; background-color: white; margin-left: 2px; backdrop-filter: invert( 1 ); } .red_slider .track { background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) ); } .green_slider .track { background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) ); } .blue_slider .track { background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) ); } .alpha_slider .track { background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) ); } } .coloreditorhsva { flex-direction: column; .slider { padding-right: 16px; } .slider .track { background-color: transparent; height: 14px; border-radius: 14px; left: 0px; right: 0px; .inner { display: none; } } .slider .thumb { width: 12px; height: 12px; box-shadow: 0px 0px 0px transparent; background-color: white; margin-left: 2px; backdrop-filter: invert( 1 ); } .hue_slider .track { background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 ); } .alpha_slider .track { background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) ); } }