[Common mobile] Custom Color
This commit is contained in:
Julia Svinareva
parent
282449adcb
commit
defd8e7edb
|
|
@ -97,6 +97,20 @@ define([
|
||||||
'</div>',
|
'</div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'</li>',
|
'</li>',
|
||||||
|
'<li class="custom-colors">',
|
||||||
|
'<div style="padding: 15px 0 0 15px;"><%= me.textCustomColors %></div>',
|
||||||
|
'<div class="item-content">',
|
||||||
|
'<div class="item-inner">',
|
||||||
|
'<div class="color-picker-wheel">',
|
||||||
|
'<svg id="id-wheel" viewBox="0 0 300 300" width="300" height="300"><%=circlesColors%></svg>',
|
||||||
|
'<div class="color-picker-wheel-handle"></div>',
|
||||||
|
'<div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">',
|
||||||
|
'<div class="color-picker-sb-spectrum-handle"></div>',
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
'</li>',
|
||||||
'</ul>',
|
'</ul>',
|
||||||
'</div>'
|
'</div>'
|
||||||
].join('')),
|
].join('')),
|
||||||
|
|
@ -133,14 +147,41 @@ define([
|
||||||
themeColors[row].push(effect);
|
themeColors[row].push(effect);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// custom color
|
||||||
|
if (!this.currentHsl)
|
||||||
|
this.currentHsl = [];
|
||||||
|
if (!this.currentHsb)
|
||||||
|
this.currentHsb = [];
|
||||||
|
if (!this.currentHue)
|
||||||
|
this.currentHue = [];
|
||||||
|
var total = 256,
|
||||||
|
circles = '';
|
||||||
|
for (var i = total; i > 0; i -= 1) {
|
||||||
|
var angle = i * Math.PI / (total / 2);
|
||||||
|
var hue = 360 / total * i;
|
||||||
|
circles += '<circle cx="' + (150 - Math.sin(angle) * 125) + '" cy="' + (150 - Math.cos(angle) * 125) + '" r="25" fill="hsl( ' + hue + ', 100%, 50%)"></circle>';
|
||||||
|
}
|
||||||
|
|
||||||
$(me.el).append(me.template({
|
$(me.el).append(me.template({
|
||||||
themeColors: themeColors,
|
themeColors: themeColors,
|
||||||
standartColors: standartColors
|
standartColors: standartColors,
|
||||||
|
circlesColors: circles
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
this.afterRender();
|
||||||
|
|
||||||
return me;
|
return me;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
afterRender: function () {
|
||||||
|
this.$colorPicker = $('.color-picker-wheel');
|
||||||
|
this.$colorPicker.on({
|
||||||
|
'touchstart': this.handleTouchStart.bind(this),
|
||||||
|
'touchmove': this.handleTouchMove.bind(this),
|
||||||
|
'touchend': this.handleTouchEnd.bind(this)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
isColor: function(val) {
|
isColor: function(val) {
|
||||||
return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val);
|
return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val);
|
||||||
},
|
},
|
||||||
|
|
@ -190,6 +231,7 @@ define([
|
||||||
} else if (! _.isUndefined(color.effectValue)) {
|
} else if (! _.isUndefined(color.effectValue)) {
|
||||||
el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active');
|
el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active');
|
||||||
}
|
}
|
||||||
|
this.currentHsl = this.colorHexToRgb(color.color);
|
||||||
} else {
|
} else {
|
||||||
if (/#?[a-fA-F0-9]{6}/.test(color)) {
|
if (/#?[a-fA-F0-9]{6}/.test(color)) {
|
||||||
color = /#?([a-fA-F0-9]{6})/.exec(color)[1];
|
color = /#?([a-fA-F0-9]{6})/.exec(color)[1];
|
||||||
|
|
@ -200,7 +242,14 @@ define([
|
||||||
} else {
|
} else {
|
||||||
el.find('.custom-colors a[data-color=' + color + ']').addClass('active');
|
el.find('.custom-colors a[data-color=' + color + ']').addClass('active');
|
||||||
}
|
}
|
||||||
|
this.currentHsl = this.colorHexToRgb(color);
|
||||||
}
|
}
|
||||||
|
if (!this.currentHsl) {
|
||||||
|
this.currentHsl = this.colorHexToRgb('000000');
|
||||||
|
}
|
||||||
|
this.currentHsl = this.colorRgbToHsl(...this.currentHsl);
|
||||||
|
this.currentHsb = this.colorHslToHsb(...this.currentHsl);
|
||||||
|
this.updateCustomColor(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -208,7 +257,200 @@ define([
|
||||||
$(this.el).find('.color-palette a').removeClass('active');
|
$(this.el).find('.color-palette a').removeClass('active');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
colorHexToRgb(hex) {
|
||||||
|
var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) { return (r + r + g + g + b + b)});
|
||||||
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
|
||||||
|
return result
|
||||||
|
? result.slice(1).map(function (n) { return parseInt(n, 16)})
|
||||||
|
: null;
|
||||||
|
},
|
||||||
|
|
||||||
|
colorRgbToHsl(r, g, b) {
|
||||||
|
r /= 255; // eslint-disable-line
|
||||||
|
g /= 255; // eslint-disable-line
|
||||||
|
b /= 255; // eslint-disable-line
|
||||||
|
var max = Math.max(r, g, b);
|
||||||
|
var min = Math.min(r, g, b);
|
||||||
|
var d = max - min;
|
||||||
|
var h;
|
||||||
|
if (d === 0) h = 0;
|
||||||
|
else if (max === r) h = ((g - b) / d) % 6;
|
||||||
|
else if (max === g) h = (b - r) / d + 2;
|
||||||
|
else if (max === b) h = (r - g) / d + 4;
|
||||||
|
var l = (min + max) / 2;
|
||||||
|
var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
|
||||||
|
if (h < 0) h = 360 / 60 + h;
|
||||||
|
return [h * 60, s, l];
|
||||||
|
},
|
||||||
|
|
||||||
|
colorHslToHsb(h, s, l) {
|
||||||
|
var HSB = {
|
||||||
|
h,
|
||||||
|
s: 0,
|
||||||
|
b: 0,
|
||||||
|
};
|
||||||
|
var HSL = {h, s, l};
|
||||||
|
var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l);
|
||||||
|
HSB.b = HSL.l + t;
|
||||||
|
HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s;
|
||||||
|
return [HSB.h, HSB.s, HSB.b];
|
||||||
|
},
|
||||||
|
|
||||||
|
colorHsbToHsl(h, s, b) {
|
||||||
|
var HSL = {
|
||||||
|
h,
|
||||||
|
s: 0,
|
||||||
|
l: 0,
|
||||||
|
};
|
||||||
|
var HSB = { h, s, b };
|
||||||
|
HSL.l = (2 - HSB.s) * HSB.b / 2;
|
||||||
|
HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
|
||||||
|
return [HSL.h, HSL.s, HSL.l];
|
||||||
|
},
|
||||||
|
|
||||||
|
colorHslToRgb(h, s, l) {
|
||||||
|
var c = (1 - Math.abs(2 * l - 1)) * s;
|
||||||
|
var hp = h / 60;
|
||||||
|
var x = c * (1 - Math.abs((hp % 2) - 1));
|
||||||
|
var rgb1;
|
||||||
|
if (Number.isNaN(h) || typeof h === 'undefined') {
|
||||||
|
rgb1 = [0, 0, 0];
|
||||||
|
} else if (hp <= 1) rgb1 = [c, x, 0];
|
||||||
|
else if (hp <= 2) rgb1 = [x, c, 0];
|
||||||
|
else if (hp <= 3) rgb1 = [0, c, x];
|
||||||
|
else if (hp <= 4) rgb1 = [0, x, c];
|
||||||
|
else if (hp <= 5) rgb1 = [x, 0, c];
|
||||||
|
else if (hp <= 6) rgb1 = [c, 0, x];
|
||||||
|
var m = l - (c / 2);
|
||||||
|
var result = rgb1.map(function (n) {
|
||||||
|
return Math.max(0, Math.min(255, Math.round(255 * (n + m))));
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
colorRgbToHex(r, g, b) {
|
||||||
|
var result = [r, g, b].map( function (n) {
|
||||||
|
var hex = n.toString(16);
|
||||||
|
return hex.length === 1 ? ('0' + hex) : hex;
|
||||||
|
}).join('');
|
||||||
|
return ('#' + result);
|
||||||
|
},
|
||||||
|
|
||||||
|
setHueFromWheelCoords: function (x, y) {
|
||||||
|
var wheelCenterX = this.wheelRect.left + this.wheelRect.width / 2;
|
||||||
|
var wheelCenterY = this.wheelRect.top + this.wheelRect.height / 2;
|
||||||
|
var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
|
||||||
|
var angleDeg = angleRad * 180 / Math.PI + 90;
|
||||||
|
if (angleDeg < 0) angleDeg += 360;
|
||||||
|
angleDeg = 360 - angleDeg;
|
||||||
|
this.currentHsl[0] = angleDeg;
|
||||||
|
this.updateCustomColor();
|
||||||
|
},
|
||||||
|
|
||||||
|
setSBFromSpecterCoords: function (x, y) {
|
||||||
|
var s = (x - this.specterRect.left) / this.specterRect.width;
|
||||||
|
var b = (y - this.specterRect.top) / this.specterRect.height;
|
||||||
|
s = Math.max(0, Math.min(1, s));
|
||||||
|
b = 1 - Math.max(0, Math.min(1, b));
|
||||||
|
|
||||||
|
this.currentHsb = [this.currentHsl[0], s, b];
|
||||||
|
this.currentHsl = this.colorHsbToHsl(...this.currentHsb);
|
||||||
|
this.updateCustomColor();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTouchStart: function (e) {
|
||||||
|
this.clearSelection();
|
||||||
|
if (this.isMoved || this.isTouched) return;
|
||||||
|
this.touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
|
||||||
|
this.touchCurrentX = this.touchStartX;
|
||||||
|
this.touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
|
||||||
|
this.touchCurrentY = this.touchStartY;
|
||||||
|
var $targetEl = $(e.target);
|
||||||
|
this.wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0;
|
||||||
|
this.wheelIsTouched = $targetEl.closest('circle').length > 0;
|
||||||
|
this.specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
|
||||||
|
if (!this.specterHandleIsTouched) {
|
||||||
|
this.specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
|
||||||
|
}
|
||||||
|
if (this.wheelIsTouched) {
|
||||||
|
this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
|
||||||
|
this.setHueFromWheelCoords(this.touchStartX, this.touchStartY);
|
||||||
|
}
|
||||||
|
if (this.specterIsTouched) {
|
||||||
|
this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
|
||||||
|
this.setSBFromSpecterCoords(this.touchStartX, this.touchStartY);
|
||||||
|
}
|
||||||
|
if (this.specterHandleIsTouched || this.specterIsTouched) {
|
||||||
|
this.$el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTouchMove: function (e) {
|
||||||
|
if (!(this.wheelIsTouched || this.wheelHandleIsTouched) && !(this.specterIsTouched || this.specterHandleIsTouched)) return;
|
||||||
|
this.touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
|
||||||
|
this.touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isMoved) {
|
||||||
|
// First move
|
||||||
|
this.isMoved = true;
|
||||||
|
if (this.wheelHandleIsTouched) {
|
||||||
|
this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
|
||||||
|
}
|
||||||
|
if (this.specterHandleIsTouched) {
|
||||||
|
this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.wheelIsTouched || this.wheelHandleIsTouched) {
|
||||||
|
this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY);
|
||||||
|
}
|
||||||
|
if (this.specterIsTouched || this.specterHandleIsTouched) {
|
||||||
|
this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTouchEnd: function () {
|
||||||
|
this.isMoved = false;
|
||||||
|
if (this.specterIsTouched || this.specterHandleIsTouched) {
|
||||||
|
this.$el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
|
||||||
|
}
|
||||||
|
this.wheelIsTouched = false;
|
||||||
|
this.wheelHandleIsTouched = false;
|
||||||
|
this.specterIsTouched = false;
|
||||||
|
this.specterHandleIsTouched = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCustomColor: function (firstSelect) {
|
||||||
|
var specterWidth = this.$el.find('.color-picker-sb-spectrum')[0].offsetWidth,
|
||||||
|
specterHeight = this.$el.find('.color-picker-sb-spectrum')[0].offsetHeight,
|
||||||
|
wheelSize = this.$el.find('.color-picker-wheel')[0].offsetWidth,
|
||||||
|
wheelHalfSize = wheelSize / 2,
|
||||||
|
angleRad = this.currentHsl[0] * Math.PI / 180,
|
||||||
|
handleSize = wheelSize / 6,
|
||||||
|
handleHalfSize = handleSize / 2,
|
||||||
|
tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize,
|
||||||
|
tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
|
||||||
|
this.$el.find('.color-picker-wheel-handle')
|
||||||
|
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'})
|
||||||
|
.css({transform: 'translate(' + tX + 'px,' + tY + 'px)'});
|
||||||
|
|
||||||
|
this.$el.find('.color-picker-sb-spectrum')
|
||||||
|
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'});
|
||||||
|
|
||||||
|
if (this.currentHsb && this.currentHsl) {
|
||||||
|
this.$el.find('.color-picker-sb-spectrum-handle')
|
||||||
|
.css({'background-color': 'hsl(' + this.currentHsl[0] + ', ' + (this.currentHsl[1] * 100) + '%,' + (this.currentHsl[2] * 100) + '%)'})
|
||||||
|
.css({transform: 'translate(' + specterWidth * this.currentHsb[1] + 'px, ' + specterHeight * (1 - this.currentHsb[2]) + 'px)'});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!firstSelect) {
|
||||||
|
var color = this.colorHslToRgb(...this.currentHsl);
|
||||||
|
this.currentColor = this.colorRgbToHex(...color);
|
||||||
|
this.trigger('select', this, this.currentColor);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
textThemeColors: 'Theme Colors',
|
textThemeColors: 'Theme Colors',
|
||||||
textStandartColors: 'Standard Colors'
|
textStandartColors: 'Standard Colors',
|
||||||
|
textCustomColors: 'Custom Colors'
|
||||||
}, Common.UI.ThemeColorPalette || {}));
|
}, Common.UI.ThemeColorPalette || {}));
|
||||||
});
|
});
|
||||||
|
|
@ -40,4 +40,71 @@
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-colors {
|
||||||
|
.color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-picker-wheel-handle {
|
||||||
|
width: calc(100% / 6);
|
||||||
|
height: calc(100% / 6);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
&:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
&.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -44,4 +44,71 @@
|
||||||
&.list-block:last-child li:last-child a {
|
&.list-block:last-child li:last-child a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-colors {
|
||||||
|
.color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-picker-wheel-handle {
|
||||||
|
width: calc(100% / 6);
|
||||||
|
height: calc(100% / 6);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
&:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
&.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
||||||
.color-palette .standart-colors .item-inner {
|
.color-palette .standart-colors .item-inner {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -7081,7 +7145,6 @@ html.pixel-ratio-3 .numbers li {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-placeholder {
|
.doc-placeholder {
|
||||||
background: #fbfbfb;
|
background: #fbfbfb;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -7097,7 +7160,6 @@ html.pixel-ratio-3 .numbers li {
|
||||||
background: #e2e2e2;
|
background: #e2e2e2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
|
|
|
||||||
|
|
@ -5815,6 +5815,70 @@ html.phone .document-menu .list-block .item-link {
|
||||||
.color-palette.list-block:last-child li:last-child a {
|
.color-palette.list-block:last-child li:last-child a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -6867,7 +6931,6 @@ html.pixel-ratio-3 .numbers li {
|
||||||
background: #e2e2e2;
|
background: #e2e2e2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
||||||
|
|
|
||||||
|
|
@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
||||||
.color-palette .standart-colors .item-inner {
|
.color-palette .standart-colors .item-inner {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5815,6 +5815,70 @@ html.phone .document-menu .list-block .item-link {
|
||||||
.color-palette.list-block:last-child li:last-child a {
|
.color-palette.list-block:last-child li:last-child a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6221,6 +6221,70 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
|
||||||
.color-palette .standart-colors .item-inner {
|
.color-palette .standart-colors .item-inner {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5825,6 +5825,70 @@ html.phone .document-menu .list-block .item-link {
|
||||||
.color-palette.list-block:last-child li:last-child a {
|
.color-palette.list-block:last-child li:last-child a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel {
|
||||||
|
position: relative;
|
||||||
|
width: 330px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle {
|
||||||
|
width: calc(16.66666667%);
|
||||||
|
height: calc(16.66666667%);
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum {
|
||||||
|
background-color: #000;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
|
||||||
|
position: relative;
|
||||||
|
width: 45%;
|
||||||
|
height: 45%;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
|
||||||
|
background-color: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: 150ms;
|
||||||
|
transition-property: transform;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
|
||||||
|
transform: scale(1.5) translate(-33.333%, -33.333%);
|
||||||
|
}
|
||||||
.about .page-content {
|
.about .page-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue