gradienteditor.js/gradient-editor.css at main · lucky-yoolk/gradienteditor.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
/*
 * GradientEditor v1.0.0
 * https://github.com/lucky-yoolk/gradienteditor.js
 * Licensed under the MIT license
 */
.gradient-editor {padding:1em;background: rgba(0,0,0,0.2);border-radius:6px;outline:transparent;width: 100%}
.gradient-editor * {box-sizing: border-box;}

/* Toolbar - Colors Stop Slider */
.gradient-editor .gradient-input-wrapper {padding-bottom:1em;}
.gradient-editor .gradient-input {width:100%;}

/* Slider */
.gradient-editor .gradient-slider-wrapper {border-radius: 6px;outline:transparent;position: relative}
.gradient-editor .gradient-slider {height:32px;background: transparent;position: relative;margin:0 11px;}
.gradient-editor .gradient-slider:hover {cursor: crosshair}
.gradient-editor .color-stop {width: 16px;height: 16px;position: absolute;top: 50%;transform: translate(-50%, -50%);cursor: pointer;background: white;border:1px solid #fff;box-shadow: 0 0 6px rgba(0,0,0,0.1);border-radius:8px;}

/* Toolbar - Colors */
.gradient-editor .controls-container {display: flex;align-items:start;gap:1em;padding-top:1em;}
.gradient-editor .color-pickers-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));gap: 1em;flex-grow: 1;align-items: start}
.color-picker-wrapper {display: flex;align-items: center;gap: 6px;padding:6px;background: rgba(0,0,0,0.2);border-radius:6px;}
.color-picker-wrapper input[type="color"] {appearance: none;-moz-appearance: none;-webkit-appearance: none;background: none;border: 0;cursor: pointer;height: 20px;padding: 0;width: 20px;border-radius:4px;box-shadow: 0 0 6px rgba(0,0,0,0.1);}
.color-picker-wrapper input[type="color"]:focus{border-radius: 0;outline: none;}
.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;}
.color-picker-wrapper input[type="color"]::-webkit-color-swatch{border: 0;border-radius: 0;}
.color-picker-wrapper input[type="color"]::-moz-color-swatch,
.color-picker-wrapper input[type="color"]::-moz-focus-inner{border: 0;}
.color-picker-wrapper input[type="color"]::-moz-focus-inner{padding: 0;}

/* Toolbar - Colors - Delete Color Button */
.color-picker-remove {appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 20px;padding: 0;width: 20px;border-radius:4px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') center center no-repeat;transition: .2s;}
.color-picker-remove:hover {background-color: rgba(0,0,0,0.6)}

/* Toolbar - Radial Direction, Toggle Direction & Themes buttons */
.gradient-editor .gradient-utils {display: flex;align-items:start;gap:1em;}

/* Toolbar - Toggle Direction Button */
.toggle-direction-wrapper {border-radius:4px;flex-shrink: 0;}
.toggle-direction-button {display: block;appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 32px;padding: 0;width: 32px;border-radius:6px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/></svg>') center center no-repeat;transition: .2s;}
.toggle-direction-button:hover {background-color: rgba(0,0,0,0.4)}

/* Toolbar - Themes Button */
.gradient-picker-button {
	display: block;flex-shrink: 0;appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 32px;padding: 0;width: 32px;border-radius:6px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16px" width="16px"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>') center center no-repeat;transition: .2s;
}
.gradient-picker-button:hover {background-color: rgba(0,0,0,0.4)}

/* Toolbar - Radial Direction Control */
.direction-control-wrapper {
	position: relative;
	width: 32px;
	height: 32px;
	outline: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.2);
	flex-shrink: 0;
}
.direction-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: rgb(255, 255, 255);
	border-radius: 50%;
	cursor: grab;
}

/* Gradients Popup */
.gradient-picker-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	border-radius: 8px;
	width:420px;
	max-width:90%;
}
.gradient-picker-popup .gradients-templates {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	height: 320px;
	overflow: scroll;
	padding: 20px;
}
.gradient-picker-popup .gradient-preview {
	appearance: none;-moz-appearance: none;-webkit-appearance: none;
	width: 120px;
	height: 80px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
	font-weight: normal;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	border:none;
	transition: transform 0.2s, border 0.2s;
	text-align: center;
	outline:0;
	padding: 20px;
}
.gradient-picker-popup .gradient-preview:hover {
	transform: scale(1.05);
	border-color: #ddd;
}
.gradient-picker-popup .gradient-picker-close {
	position: absolute;
	top:0;
	right:0;
	border: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23666" height="10px" width="10px" version="1.1" id="Capa_1" viewBox="0 0 490 490" xml:space="preserve"><polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337 "/></svg>') center center no-repeat;
}
.gradient-picker-popup .gradient-picker-close:hover {oapcity:0.6}

/* Alpha Range */
.gradient-editor input[type=range] {
	flex-grow: 1;
	outline: 0;
	border: 0;
	border-radius:4px;
	width: 100px;
	max-width: 100%;
	margin:0;
	overflow: hidden;
	height: 20px;
	-webkit-appearance: none;
	background-color: rgba(0,0,0,0.2);
	transition: box-shadow 0.2s ease-in-out;
}
.gradient-editor input[type=range]::-webkit-slider-runnable-track {
	height: 20px;
	-webkit-appearance: none;
	color: #444;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}
.gradient-editor input[type=range]::-webkit-slider-thumb {
	width: 20px;
	-webkit-appearance: none;
	height: 20px;
	cursor: ew-resize;
	background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23999" height="10px" width="10px" viewBox="0 0 192 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 448c0 17.7 14.3 32 32 32s32-14.3 32-32L64 64zm128 0c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 384c0 17.7 14.3 32 32 32s32-14.3 32-32l0-384z"/></svg>') center center no-repeat;
	border-radius: 4px;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
	position: relative;
}
.gradient-editor input[type=range]:active::-webkit-slider-thumb {}
.gradient-editor input[type=range]::-moz-range-progress {background-color: transparent;}
.gradient-editor input[type=range]::-moz-range-track {background-color: transparent;}
.gradient-editor input[type=range]::-ms-fill-lower {background-color: transparent;}
.gradient-editor input[type=range]::-ms-fill-upper {background-color: transparent;}

/* Tooltip */
.gradient-tooltip {
	position:absolute;
	padding:5px 10px;
	background:rgba(0,0,0,0.8);
	color:#fff;
	border-radius:4px;
	visibility:hidden;
	font-size:12px;
	top:-20px;
	left:50%;
	transform:translate(-50%, -50%);
	transition: .2s;
}

/* Hide Elements */
.gradient-editor .oto-hidden {clip: rect(0 0 0 0); clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap; width: 1px;}