10.1.001.dev Theme admin - test darkmode
This commit is contained in:
parent
bbc2303fbd
commit
2209b65940
@ -52,7 +52,8 @@ core.colorVariants = function(rgba) {
|
|||||||
"normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")",
|
"normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")",
|
||||||
"darken": "rgba(" + Math.max(0, rgba[0] - 15) + "," + Math.max(0, rgba[1] - 15) + "," + Math.max(0, rgba[2] - 15) + "," + rgba[3] + ")",
|
"darken": "rgba(" + Math.max(0, rgba[0] - 15) + "," + Math.max(0, rgba[1] - 15) + "," + Math.max(0, rgba[2] - 15) + "," + rgba[3] + ")",
|
||||||
"veryDarken": "rgba(" + Math.max(0, rgba[0] - 20) + "," + Math.max(0, rgba[1] - 20) + "," + Math.max(0, rgba[2] - 20) + "," + rgba[3] + ")",
|
"veryDarken": "rgba(" + Math.max(0, rgba[0] - 20) + "," + Math.max(0, rgba[1] - 20) + "," + Math.max(0, rgba[2] - 20) + "," + rgba[3] + ")",
|
||||||
"text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white"
|
//"text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white"
|
||||||
|
"text": core.relativeLuminanceW3C(rgba) > .22 ? "#222" : "#DDD"
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1529,22 +1529,24 @@ class core extends common {
|
|||||||
if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['admin'])))) {
|
if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['admin'])))) {
|
||||||
// Version
|
// Version
|
||||||
$css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/';
|
$css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/';
|
||||||
$css .= '#site{background-color:' . $this->getData(['admin','backgroundColor']) . ';}';
|
$colors = helper::colorVariants($this->getData(['admin','backgroundColor']));
|
||||||
|
$css .= '#site{background-color:' . $colors['normal']. ';}';
|
||||||
$css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','fontText']) . '", sans-serif;}';
|
$css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','fontText']) . '", sans-serif;}';
|
||||||
$css .= 'body h1, h2, h3, h4, h5, h6 {font-family:' . $this->getData(['admin','fontTitle' ]) . ', sans-serif;color:' . $this->getData(['admin','colorTitle' ]) . ';}';
|
$css .= 'body h1, h2, h3, h4, h5, h6 {font-family:' . $this->getData(['admin','fontTitle' ]) . ', sans-serif;color:' . $this->getData(['admin','colorTitle' ]) . ';}';
|
||||||
$css .= 'body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:' . $this->getData(['admin','colorText']) . ';}';
|
$css .= 'body:not(.editorWysiwyg),span .zwiico-help {color:' . $colors['text'] . ';}';
|
||||||
|
$css .= 'table tr,input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}';
|
||||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButton']));
|
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButton']));
|
||||||
$css .= '.button,input[type="checkbox"]:checked + label::before,.speechBubble{ background-color:' . $colors['normal'] . ';color:' . $this->getData(['admin','colorButtonText']) . ';}';
|
$css .= '.button,input[type="checkbox"]:checked + label::before,.speechBubble{ background-color:' . $colors['normal'] . ';color:' . $this->getData(['admin','colorButtonText']) . ';}';
|
||||||
$css .= '.speechBubble::before {border-color:' . $colors['normal'] . ' transparent transparent transparent;}';
|
$css .= '.speechBubble::before {border-color:' . $colors['normal'] . ' transparent transparent transparent;}';
|
||||||
$css .= '.button:hover, button[type=submit]:hover { background-color:' . $colors['darken'] . ';}';
|
$css .= '.button:hover, button[type=submit]:hover { background-color:' . $colors['darken'] . ';}';
|
||||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGrey']));
|
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGrey']));
|
||||||
$css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';}.button.buttonGrey:hover {background:' . $colors['darken'] . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . '}';
|
$css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonGrey:hover {background:' . $colors['darken'] .';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}';
|
||||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
|
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed']));
|
||||||
$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';}.button.buttonRed:hover {background:' . $colors['darken'] . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . '}';
|
$css .= '.button.buttonRed {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonRed:hover {background:' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}';
|
||||||
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGreen']));
|
$colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGreen']));
|
||||||
$css .= 'button[type=submit] {background-color: ' . $colors['normal']. ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';}';
|
$css .= 'button[type=submit] {background-color: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}button[type=submit]:active {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}';
|
||||||
$colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor']));
|
$colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor']));
|
||||||
$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background: ' . $colors['normal'] . ';color:' . $colors['text']. ';}';
|
$css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background-color: ' . $colors['normal'] . ';color:' . $colors['text'] . ';}';
|
||||||
// Enregistre la personnalisation
|
// Enregistre la personnalisation
|
||||||
file_put_contents(self::DATA_DIR.'admin.css', $css);
|
file_put_contents(self::DATA_DIR.'admin.css', $css);
|
||||||
}
|
}
|
||||||
|
@ -18,23 +18,24 @@ $("input, select").on("change", function() {
|
|||||||
var titleFont = $("#adminFontTitle").val();
|
var titleFont = $("#adminFontTitle").val();
|
||||||
var textFont = $("#adminFontText").val();
|
var textFont = $("#adminFontText").val();
|
||||||
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
|
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
|
||||||
|
var colors = core.colorVariants($("#adminBackgroundColor").val());
|
||||||
var css = "#site{background-color:" + $("#adminBackgroundColor").val() + ";}";
|
var css = "#site{background-color:" + colors.normal + ";}";
|
||||||
css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + textFont + "', sans-serif;}";
|
css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + $("#adminColorTitle").val() + "', sans-serif;}";
|
||||||
css += "body h1, h2, h3, h4, h5, h6 {font-family:'" + titleFont + "', sans-serif; color:" + $("#adminColorTitle").val() + ";}";
|
css += "body h1, h2, h3, h4, h5, h6 {font-family:'" + titleFont + "', sans-serif; color:" + $("#adminColorTitle").val() + ";}";
|
||||||
css += "body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:" + $("#adminColorText").val() + ";}";
|
css += "body:not(.editorWysiwyg),span .zwiico-help {color:" + colors.text + ";}";
|
||||||
|
css += "input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}";
|
||||||
var colors = core.colorVariants($("#adminColorButton").val());
|
var colors = core.colorVariants($("#adminColorButton").val());
|
||||||
css += ".button,input[type='checkbox']:checked + label::before,.speechBubble{ background-color:" + colors.normal + "; color:" + $("#adminColorButtonText").val() + ";}";
|
css += ".button,input[type='checkbox']:checked + label::before,.speechBubble{ background-color:" + colors.normal + "; color:" + $("#adminColorButtonText").val() + ";}";
|
||||||
css += ".speechBubble::before {border-color:" + colors.normal + " transparent transparent transparent;}";
|
css += ".speechBubble::before {border-color:" + colors.normal + " transparent transparent transparent;}";
|
||||||
css += ".button:hover, button[type=submit]:hover { background-color:" + colors.darken + ";}";
|
css += ".button:hover, button[type=submit]:hover { background-color:" + colors.darken + ";}";
|
||||||
var colors = core.colorVariants($("#adminColorGrey").val());
|
var colors = core.colorVariants($("#adminColorGrey").val());
|
||||||
css += ".button.buttonGrey {background: " + colors.normal + ";}.button.buttonGrey:hover {background:" + colors.darken + "}.button.buttonGrey:active {background:" + colors.veryDarken + "}";
|
css += ".button.buttonGrey {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonGrey:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonGrey:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + ";}";
|
||||||
var colors = core.colorVariants($("#adminColorRed").val());
|
var colors = core.colorVariants($("#adminColorRed").val());
|
||||||
css += ".button.buttonRed {background: " + colors.normal + ";}.button.buttonRed:hover {background:" + colors.darken + "}.button.buttonRed:active {background:" + colors.veryDarken + "}";
|
css += ".button.buttonRed {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonRed:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonRed:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}";
|
||||||
var colors = core.colorVariants($("#adminColorGreen").val());
|
var colors = core.colorVariants($("#adminColorGreen").val());
|
||||||
css += "button[type=submit] {background-color: " + colors.normal + ";color: " + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";}";
|
css += "button[type=submit] {background-color: " + colors.normal + ";color: " + ";color:" + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";color:" + $("#adminColorButtonText").val() + ";}button[type=submit]:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}";
|
||||||
var colors = core.colorVariants($("#adminBackGroundBlockColor").val());
|
var colors = core.colorVariants($("#adminBackGroundBlockColor").val());
|
||||||
css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background: " + colors.normal + ";color:" + colors.text + ";}";
|
css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background-color: " + colors.normal + ";color:" + colors.text + ";}";
|
||||||
|
|
||||||
// Ajout du css au DOM
|
// Ajout du css au DOM
|
||||||
$("#themePreview").remove();
|
$("#themePreview").remove();
|
||||||
|
4
core/vendor/tinycolorpicker/init.js
vendored
4
core/vendor/tinycolorpicker/init.js
vendored
@ -19,8 +19,8 @@ $(function() {
|
|||||||
$(element).trigger("change");
|
$(element).trigger("change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: "inherit",
|
dark: "#222",
|
||||||
light: "white",
|
light: "#DDD",
|
||||||
forceAlpha: true
|
forceAlpha: true
|
||||||
})
|
})
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user