mirror of
https://github.com/devgg/fonticon.git
synced 2026-08-24 10:13:28 -05:00
Uniformly format code closes #13
Using the default settings of https://github.com/google/vim-codefmt.
This commit is contained in:
Florian Gauger
@@ -2,9 +2,11 @@ input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
@@ -13,6 +15,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
border: 1px solid #FF3860;
|
||||
background-color: #FF3860;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
background-color: white;
|
||||
border: 1px solid #FF3860;
|
||||
@@ -32,6 +35,7 @@ input[type=range]::-moz-range-track {
|
||||
border: 1px solid #FF3860;
|
||||
background-color: #FF3860;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
background-color: white;
|
||||
border: 1px solid #FF3860;
|
||||
@@ -40,6 +44,7 @@ input[type=range]::-moz-range-thumb {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
@@ -50,15 +55,18 @@ input[type=range]::-ms-track {
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #FF3860;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: white;
|
||||
border: 1px solid #FF3860;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-thumb {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@@ -67,9 +75,11 @@ input[type=range]::-ms-thumb {
|
||||
border: 1px solid #FF3860;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: #FF3860;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #FF3860;
|
||||
}
|
||||
|
||||
+56
-46
@@ -83,8 +83,9 @@ body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.icon:hover, .icon:focus, .icon:active {
|
||||
}
|
||||
.icon:hover,
|
||||
.icon:focus,
|
||||
.icon:active {}
|
||||
|
||||
.icon_text {
|
||||
font-size: 12px;
|
||||
@@ -103,7 +104,8 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#download, #file_format {
|
||||
#download,
|
||||
#file_format {
|
||||
background-color: #FF3860;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
@@ -136,20 +138,20 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#download > i {
|
||||
#download>i {
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#download.loading > i {
|
||||
#download.loading>i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#download > div {
|
||||
#download>div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#download.loading > div {
|
||||
#download.loading>div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -165,11 +167,11 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#file_format > div {
|
||||
#file_format>div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#file_format > i {
|
||||
#file_format>i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -195,20 +197,20 @@ input:focus {
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
visibility: hidden;
|
||||
font-size: 1.3em;
|
||||
padding: 0;
|
||||
margin-right: 10px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
visibility: hidden;
|
||||
font-size: 1.3em;
|
||||
padding: 0;
|
||||
margin-right: 10px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox]:before {
|
||||
@@ -216,17 +218,19 @@ input[type=checkbox]:before {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked:before{
|
||||
input[type=checkbox]:checked:before {
|
||||
content: '\f14a';
|
||||
}
|
||||
|
||||
#size, #stacked_size {
|
||||
#size,
|
||||
#stacked_size {
|
||||
padding-left: 0;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#size:focus, #stacked_size:focus {
|
||||
#size:focus,
|
||||
#stacked_size:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -266,7 +270,7 @@ input[type=checkbox]:checked:before{
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.color_button_container,
|
||||
.color_button_container,
|
||||
.color_button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -311,7 +315,7 @@ input[type=checkbox]:checked:before{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#footer > i {
|
||||
#footer>i {
|
||||
font-size: 17px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
@@ -322,33 +326,33 @@ input[type=checkbox]:checked:before{
|
||||
}
|
||||
|
||||
.stack_container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.stack_input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stack_input label {
|
||||
color: #FF3860;
|
||||
padding-right: 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #FF3860;
|
||||
padding-right: 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#stacked {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#stacked_size {
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.underline {
|
||||
@@ -372,8 +376,12 @@ input[type=checkbox]:checked:before{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.underline:hover:before, .underline:focus:before, .underline:active:before,
|
||||
.icon:hover > .underline:before, .icon:focus > .underline:before, .icon:active > .underline:before {
|
||||
.underline:hover:before,
|
||||
.underline:focus:before,
|
||||
.underline:active:before,
|
||||
.icon:hover>.underline:before,
|
||||
.icon:focus>.underline:before,
|
||||
.icon:active>.underline:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
@@ -390,7 +398,9 @@ input[type=checkbox]:checked:before{
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon:hover > i, .icon:focus > i, .icon:active > i {
|
||||
.icon:hover>i,
|
||||
.icon:focus>i,
|
||||
.icon:active>i {
|
||||
-webkit-animation-duration: .3s, 1.5s;
|
||||
animation-duration: .3s, 1.5s;
|
||||
-webkit-animation-delay: 0s, .3s;
|
||||
|
||||
+39
-36
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -10,7 +11,7 @@
|
||||
<link rel="stylesheet" href="css/rangeslider.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<link rel='stylesheet' href='lib/spectrum.css'/>
|
||||
<link rel='stylesheet' href='lib/spectrum.css' />
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.js"></script>
|
||||
@@ -23,51 +24,53 @@
|
||||
<script src="js/icons.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="left">
|
||||
<div id="controls_container">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="colors">
|
||||
<div class="color_input">
|
||||
<div class="color_button_container">
|
||||
<div id="color" class="color_button"></div>
|
||||
<div id="left">
|
||||
<div id="controls_container">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="colors">
|
||||
<div class="color_input">
|
||||
<div class="color_button_container">
|
||||
<div id="color" class="color_button"></div>
|
||||
</div>
|
||||
<input id="color_text" class="color_text" type="text" value="#ff3860">
|
||||
</div>
|
||||
<input id="color_text" class="color_text" type="text" value="#ff3860">
|
||||
</div>
|
||||
<div class="color_input">
|
||||
<div class="color_button_container">
|
||||
<div id="background_color" class="color_button"></div>
|
||||
<div class="color_input">
|
||||
<div class="color_button_container">
|
||||
<div id="background_color" class="color_button"></div>
|
||||
</div>
|
||||
<input id="background_color_text" class="color_text" type="text" value="rgba(255,255,255,0)">
|
||||
</div>
|
||||
<input id="background_color_text" class="color_text" type="text" value="rgba(255,255,255,0)">
|
||||
</div>
|
||||
</div>
|
||||
<input id="size" type="range" min="10" max="100" step="1" value="85" data-orientation="horizontal">
|
||||
<div class="stack_container">
|
||||
<div class="stack_input">
|
||||
<input id="stacked" type="checkbox" name="stacked">
|
||||
<label for="stacked">Stacked</label>
|
||||
</div>
|
||||
<input id="size" type="range" min="10" max="100" step="1" value="85" data-orientation="horizontal">
|
||||
<div class="stack_container">
|
||||
<div class="stack_input">
|
||||
<input id="stacked" type="checkbox" name="stacked">
|
||||
<label for="stacked">Stacked</label>
|
||||
</div>
|
||||
<input id="stacked_size" type="range" min="10" max="100" step="1" value="60" data-orientation="horizontal">
|
||||
</div>
|
||||
<input id="search" type="text" name="search" autocomplete="off" placeholder="Search...">
|
||||
<div id="download_container">
|
||||
<div id="download">
|
||||
<div>download</div>
|
||||
<i class="fas fa-circle-notch fa-spin"></i>
|
||||
</div>
|
||||
<div id="file_format">
|
||||
<div id="file_format_text">.ico</div>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
<input id="search" type="text" name="search" autocomplete="off" placeholder="Search...">
|
||||
<div id="download_container">
|
||||
<div id="download">
|
||||
<div>download</div>
|
||||
<i class="fas fa-circle-notch fa-spin"></i>
|
||||
</div>
|
||||
<div id="file_format">
|
||||
<div id="file_format_text">.ico</div>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a id="footer" href="https://github.com/devgg/FontIcon">
|
||||
<a id="footer" href="https://github.com/devgg/FontIcon">
|
||||
<i class="fab fa-github"></i>
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div id="right">
|
||||
</div>
|
||||
<iframe id="download_iframe" style="display:none;"></iframe>
|
||||
</div>
|
||||
<div id="right">
|
||||
</div>
|
||||
<iframe id="download_iframe" style="display:none;"></iframe>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+1
-4964
File diff suppressed because one or more lines are too long
+238
-235
@@ -1,256 +1,259 @@
|
||||
$(window).on('load', function () {
|
||||
$(window).on('load', function() {
|
||||
var $color = $("#color");
|
||||
var $color_text = $("#color_text");
|
||||
var $background_color = $("#background_color");
|
||||
var $background_color_text = $("#background_color_text");
|
||||
var $search = $("#search");
|
||||
var $right = $('#right');
|
||||
var $size = $("#size");
|
||||
var $download = $("#download");
|
||||
var $stackedLabel = $("#stacked_label");
|
||||
var $stackedSize = $("#stacked_size");
|
||||
var $downloadIframe = $("#download_iframe");
|
||||
var $fileFormatText = $("#file_format_text");
|
||||
|
||||
var $color = $("#color");
|
||||
var $color_text = $("#color_text");
|
||||
var $background_color = $("#background_color");
|
||||
var $background_color_text = $("#background_color_text");
|
||||
var $search = $("#search");
|
||||
var $right = $('#right');
|
||||
var $size = $("#size");
|
||||
var $download = $("#download");
|
||||
var $stackedLabel = $("#stacked_label");
|
||||
var $stackedSize = $("#stacked_size");
|
||||
var $downloadIframe = $("#download_iframe");
|
||||
var $fileFormatText = $("#file_format_text");
|
||||
var createFaviconUrl = "https://fonticon-207412.appspot.com/";
|
||||
var loading = false;
|
||||
var symbol = "\uf004";
|
||||
var symbolStyle = "s";
|
||||
var stackedSelected = false;
|
||||
var stackedSymbol = "\uf004";
|
||||
var stackedSymbolStyle = "s";
|
||||
var canvas = document.getElementById('canvas');
|
||||
var sideLength = 1024;
|
||||
canvas.width = sideLength;
|
||||
canvas.height = sideLength;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
initialize();
|
||||
|
||||
var createFaviconUrl = "https://fonticon-207412.appspot.com/";
|
||||
var loading = false;
|
||||
var symbol = "\uf004";
|
||||
var symbolStyle = "s";
|
||||
var stackedSelected = false;
|
||||
var stackedSymbol = "\uf004";
|
||||
var stackedSymbolStyle = "s";
|
||||
var canvas = document.getElementById('canvas');
|
||||
var sideLength = 1024;
|
||||
canvas.width = sideLength;
|
||||
canvas.height = sideLength;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
initialize();
|
||||
function initialize() {
|
||||
$size.on("input", draw);
|
||||
$stackedSize.on("input", draw);
|
||||
$color_text.on("input", updateColor.bind(updateColor, $color, $color_text,
|
||||
false, true));
|
||||
$background_color_text.on(
|
||||
"input", updateColor.bind(updateColor, $background_color,
|
||||
$background_color_text, false, true));
|
||||
$color.spectrum({
|
||||
color : "#ff3860",
|
||||
showButtons : false,
|
||||
showAlpha : true,
|
||||
move : updateColor.bind(updateColor, $color, $color_text, true, true)
|
||||
});
|
||||
|
||||
function initialize() {
|
||||
$size.on("input", draw);
|
||||
$stackedSize.on("input", draw);
|
||||
$color_text.on("input", updateColor.bind(updateColor, $color, $color_text, false, true));
|
||||
$background_color_text.on("input", updateColor.bind(updateColor, $background_color, $background_color_text, false, true));
|
||||
$color.spectrum({
|
||||
color: "#ff3860",
|
||||
showButtons: false,
|
||||
showAlpha: true,
|
||||
move: updateColor.bind(updateColor, $color, $color_text, true, true)
|
||||
});
|
||||
$background_color.spectrum({
|
||||
color : "rgba(255,255,255,0)",
|
||||
showButtons : false,
|
||||
showAlpha : true,
|
||||
move : updateColor.bind(updateColor, $background_color,
|
||||
$background_color_text, true, true)
|
||||
});
|
||||
updateColor($color, $color_text, false, false);
|
||||
updateColor($background_color, $background_color_text, false, false);
|
||||
|
||||
$background_color.spectrum({
|
||||
color: "rgba(255,255,255,0)",
|
||||
showButtons: false,
|
||||
showAlpha: true,
|
||||
move: updateColor.bind(updateColor, $background_color, $background_color_text, true, true)
|
||||
});
|
||||
updateColor($color, $color_text, false, false);
|
||||
updateColor($background_color, $background_color_text, false, false);
|
||||
initSearch($search, $right);
|
||||
|
||||
initSearch($search, $right);
|
||||
|
||||
function loadingFinished() {
|
||||
loading = false;
|
||||
$download.removeClass("loading");
|
||||
}
|
||||
|
||||
function iconCreationError(errorMessage) {
|
||||
console.error(errorMessage);
|
||||
}
|
||||
|
||||
$download.on("click", function () {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
$download.addClass("loading");
|
||||
if ($fileFormatText.text() == ".ico") {
|
||||
var iconData = canvas.toDataURL().split(',')[1];
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: createFaviconUrl,
|
||||
data: iconData,
|
||||
success: function(response) {
|
||||
if (response.status == "error") {
|
||||
iconCreationError(response.error_message);
|
||||
} else {
|
||||
$downloadIframe.attr('src', response.url);
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorMessage) {
|
||||
iconCreationError(errorMessage);
|
||||
},
|
||||
complete: loadingFinished
|
||||
})
|
||||
} else {
|
||||
canvas.toBlob(function (blob) {
|
||||
saveAs(blob, "favicon.png");
|
||||
loadingFinished();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#stacked").click(function() {
|
||||
stackedSelected = this.checked;
|
||||
this.checked ? $stackedSize.show() : $stackedSize.hide();
|
||||
draw();
|
||||
});
|
||||
|
||||
$.each(icons, function (index, icon) {
|
||||
var $iconOuter = $("<div>").addClass("icon_outer").data("id", icon.id);
|
||||
|
||||
var iconStyle;
|
||||
switch (icon.style) {
|
||||
case 'solid': iconStyle = 's'; break;
|
||||
case 'regular': iconStyle = 'r'; break;
|
||||
default: console.error('Unkown icon style.');
|
||||
}
|
||||
var styleClass = "fa" + iconStyle + " fa-" + icon.id;
|
||||
var $icon = $("<div>")
|
||||
.addClass("icon hover")
|
||||
.data('style', iconStyle)
|
||||
.data('unicode', icon.unicode)
|
||||
.append($('<i>')
|
||||
.addClass(styleClass));
|
||||
$icon.append($("<div>").addClass("icon_text underline").text(icon.id));
|
||||
$iconOuter.append($icon);
|
||||
$right.append($iconOuter);
|
||||
});
|
||||
|
||||
|
||||
$(".icon").on("click touchstart", function () {
|
||||
var selectedSymbol = $(this).data('unicode');
|
||||
var selectedSymbolStyle = $(this).data('style');
|
||||
if (stackedSelected) {
|
||||
stackedSymbol = selectedSymbol;
|
||||
stackedSymbolStyle = selectedSymbolStyle;
|
||||
} else {
|
||||
symbol = selectedSymbol;
|
||||
symbolStyle = selectedSymbolStyle;
|
||||
}
|
||||
draw();
|
||||
});
|
||||
|
||||
$("#file_format").on("click", function () {
|
||||
new_format = ".ico";
|
||||
if ($fileFormatText.text() == ".ico") {
|
||||
new_format = ".png";
|
||||
}
|
||||
$fileFormatText.text(new_format);
|
||||
});
|
||||
|
||||
|
||||
setTimeout(draw, 1000);
|
||||
function loadingFinished() {
|
||||
loading = false;
|
||||
$download.removeClass("loading");
|
||||
}
|
||||
|
||||
function initSearch($search, $right) {
|
||||
var options = {
|
||||
id: "id",
|
||||
shouldSort: true,
|
||||
threshold: 0.3,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
"id",
|
||||
"name",
|
||||
"search"
|
||||
]
|
||||
};
|
||||
var fuse = new Fuse(icons, options);
|
||||
$search.on("input", function () {
|
||||
var query = $search.get(0).value;
|
||||
var result = fuse.search(query);
|
||||
$right.children().hide();
|
||||
$right.children().filter(function(index, element) {
|
||||
return query == "" || result.indexOf($(element).data("id")) != -1;
|
||||
}).show();
|
||||
if (result.length == 0 && query != "") {
|
||||
tinysort($right.children());
|
||||
} else if (result.length > 0) {
|
||||
tinysort($right.children(), {
|
||||
sortFunction: function(a, b) {
|
||||
return result.indexOf($(a.elm).data("id")) - result.indexOf($(b.elm).data("id"));
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
function iconCreationError(errorMessage) { console.error(errorMessage); }
|
||||
|
||||
function updateColor($color, $color_text, fromPicker, doDraw) {
|
||||
if (!fromPicker) {
|
||||
$color.spectrum("set", $color_text.val());
|
||||
$download.on("click", function() {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
$download.addClass("loading");
|
||||
if ($fileFormatText.text() == ".ico") {
|
||||
var iconData = canvas.toDataURL().split(',')[1];
|
||||
$.ajax({
|
||||
type : "POST",
|
||||
url : createFaviconUrl,
|
||||
data : iconData,
|
||||
success : function(response) {
|
||||
if (response.status == "error") {
|
||||
iconCreationError(response.error_message);
|
||||
} else {
|
||||
$downloadIframe.attr('src', response.url);
|
||||
}
|
||||
},
|
||||
error : function(jqXHR, textStatus,
|
||||
errorMessage) { iconCreationError(errorMessage); },
|
||||
complete : loadingFinished
|
||||
})
|
||||
} else {
|
||||
canvas.toBlob(function(blob) {
|
||||
saveAs(blob, "favicon.png");
|
||||
loadingFinished();
|
||||
});
|
||||
}
|
||||
var rgba = colorToRgba($color.spectrum("get"));
|
||||
$color.css("background-color", rgba);
|
||||
if (fromPicker) {
|
||||
$color_text.val(rgba);
|
||||
}
|
||||
if (doDraw) {
|
||||
draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function colorToRgba(color) {
|
||||
return "rgba("
|
||||
+ color.toRgb().r + ", "
|
||||
+ color.toRgb().g + ", "
|
||||
+ color.toRgb().b + ", "
|
||||
+ color.toRgb().a + ")";
|
||||
}
|
||||
$("#stacked").click(function() {
|
||||
stackedSelected = this.checked;
|
||||
this.checked ? $stackedSize.show() : $stackedSize.hide();
|
||||
draw();
|
||||
});
|
||||
|
||||
function draw() {
|
||||
if (sideLength > 0) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = $background_color_text.val();
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
$.each(icons, function(index, icon) {
|
||||
var $iconOuter = $("<div>").addClass("icon_outer").data("id", icon.id);
|
||||
|
||||
setFontSize(symbol, symbolStyle, $size);
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 1)";
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
ctx.fillText(symbol, sideLength / 2, sideLength / 2);
|
||||
ctx.fillStyle = $color_text.val();
|
||||
ctx.globalCompositeOperation = "source-over";
|
||||
ctx.fillText(symbol, sideLength / 2, sideLength / 2);
|
||||
if (stackedSelected && stackedSymbol) {
|
||||
ctx.save();
|
||||
setFontSize(stackedSymbol, stackedSymbolStyle, $stackedSize);
|
||||
ctx.globalCompositeOperation = "xor";
|
||||
ctx.fillText(stackedSymbol, sideLength / 2, sideLength / 2);
|
||||
ctx.restore();
|
||||
}
|
||||
canvasToFavicon(canvas);
|
||||
}
|
||||
}
|
||||
var iconStyle;
|
||||
switch (icon.style) {
|
||||
case 'solid':
|
||||
iconStyle = 's';
|
||||
break;
|
||||
case 'regular':
|
||||
iconStyle = 'r';
|
||||
break;
|
||||
default:
|
||||
console.error('Unkown icon style.');
|
||||
}
|
||||
var styleClass = "fa" + iconStyle + " fa-" + icon.id;
|
||||
var $icon = $("<div>")
|
||||
.addClass("icon hover")
|
||||
.data('style', iconStyle)
|
||||
.data('unicode', icon.unicode)
|
||||
.append($('<i>').addClass(styleClass));
|
||||
$icon.append($("<div>").addClass("icon_text underline").text(icon.id));
|
||||
$iconOuter.append($icon);
|
||||
$right.append($iconOuter);
|
||||
});
|
||||
|
||||
function getFont(symbolStyle, pixelSize) {
|
||||
var font = pixelSize + 'px "Font Awesome 5 Free"';
|
||||
var fontWeight = 0;
|
||||
switch (symbolStyle) {
|
||||
case 's': fontWeight = 900; break;
|
||||
case 'r': fontWeight = 400; break;
|
||||
default: console.error('Unkown icon style.');
|
||||
}
|
||||
return fontWeight + ' ' + font;
|
||||
}
|
||||
$(".icon").on("click touchstart", function() {
|
||||
var selectedSymbol = $(this).data('unicode');
|
||||
var selectedSymbolStyle = $(this).data('style');
|
||||
if (stackedSelected) {
|
||||
stackedSymbol = selectedSymbol;
|
||||
stackedSymbolStyle = selectedSymbolStyle;
|
||||
} else {
|
||||
symbol = selectedSymbol;
|
||||
symbolStyle = selectedSymbolStyle;
|
||||
}
|
||||
draw();
|
||||
});
|
||||
|
||||
function setFontSize(symbol, symbolStyle, $size) {
|
||||
var i = sideLength;
|
||||
do {
|
||||
ctx.font = getFont(symbolStyle, i);
|
||||
i--;
|
||||
} while (ctx.measureText(symbol).width > sideLength);
|
||||
ctx.font = getFont(symbolStyle, i * $size.val() / 100);
|
||||
$("#file_format").on("click", function() {
|
||||
new_format = ".ico";
|
||||
if ($fileFormatText.text() == ".ico") {
|
||||
new_format = ".png";
|
||||
}
|
||||
$fileFormatText.text(new_format);
|
||||
});
|
||||
|
||||
setTimeout(draw, 1000);
|
||||
}
|
||||
|
||||
function initSearch($search, $right) {
|
||||
var options = {
|
||||
id : "id",
|
||||
shouldSort : true,
|
||||
threshold : 0.3,
|
||||
location : 0,
|
||||
distance : 100,
|
||||
maxPatternLength : 32,
|
||||
minMatchCharLength : 1,
|
||||
keys : [ "id", "name", "search" ]
|
||||
};
|
||||
var fuse = new Fuse(icons, options);
|
||||
$search.on("input", function() {
|
||||
var query = $search.get(0).value;
|
||||
var result = fuse.search(query);
|
||||
$right.children().hide();
|
||||
$right.children()
|
||||
.filter(function(index, element) {
|
||||
return query == "" || result.indexOf($(element).data("id")) != -1;
|
||||
})
|
||||
.show();
|
||||
if (result.length == 0 && query != "") {
|
||||
tinysort($right.children());
|
||||
} else if (result.length > 0) {
|
||||
tinysort($right.children(), {
|
||||
sortFunction : function(a, b) {
|
||||
return result.indexOf($(a.elm).data("id")) -
|
||||
result.indexOf($(b.elm).data("id"));
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function updateColor($color, $color_text, fromPicker, doDraw) {
|
||||
if (!fromPicker) {
|
||||
$color.spectrum("set", $color_text.val());
|
||||
}
|
||||
var rgba = colorToRgba($color.spectrum("get"));
|
||||
$color.css("background-color", rgba);
|
||||
if (fromPicker) {
|
||||
$color_text.val(rgba);
|
||||
}
|
||||
if (doDraw) {
|
||||
draw();
|
||||
}
|
||||
}
|
||||
|
||||
function colorToRgba(color) {
|
||||
return "rgba(" + color.toRgb().r + ", " + color.toRgb().g + ", " +
|
||||
color.toRgb().b + ", " + color.toRgb().a + ")";
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (sideLength > 0) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = $background_color_text.val();
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
setFontSize(symbol, symbolStyle, $size);
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 1)";
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
ctx.fillText(symbol, sideLength / 2, sideLength / 2);
|
||||
ctx.fillStyle = $color_text.val();
|
||||
ctx.globalCompositeOperation = "source-over";
|
||||
ctx.fillText(symbol, sideLength / 2, sideLength / 2);
|
||||
if (stackedSelected && stackedSymbol) {
|
||||
ctx.save();
|
||||
setFontSize(stackedSymbol, stackedSymbolStyle, $stackedSize);
|
||||
ctx.globalCompositeOperation = "xor";
|
||||
ctx.fillText(stackedSymbol, sideLength / 2, sideLength / 2);
|
||||
ctx.restore();
|
||||
}
|
||||
canvasToFavicon(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
function getFont(symbolStyle, pixelSize) {
|
||||
var font = pixelSize + 'px "Font Awesome 5 Free"';
|
||||
var fontWeight = 0;
|
||||
switch (symbolStyle) {
|
||||
case 's':
|
||||
fontWeight = 900;
|
||||
break;
|
||||
case 'r':
|
||||
fontWeight = 400;
|
||||
break;
|
||||
default:
|
||||
console.error('Unkown icon style.');
|
||||
}
|
||||
return fontWeight + ' ' + font;
|
||||
}
|
||||
|
||||
function setFontSize(symbol, symbolStyle, $size) {
|
||||
var i = sideLength;
|
||||
do {
|
||||
ctx.font = getFont(symbolStyle, i);
|
||||
i--;
|
||||
} while (ctx.measureText(symbol).width > sideLength);
|
||||
ctx.font = getFont(symbolStyle, i * $size.val() / 100);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// used to update the icons
|
||||
//function updateIcons() {
|
||||
// $.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/icons.yml', function (data) {
|
||||
// function updateIcons() {
|
||||
// $.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/icons.yml',
|
||||
// function (data) {
|
||||
// var parsedYaml = jsyaml.load(data);
|
||||
// console.log(JSON.stringify(parsedYaml));
|
||||
// });
|
||||
|
||||
Vendored
+131
-2
@@ -1,2 +1,131 @@
|
||||
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
||||
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,i=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},a=/constructor/i.test(e.HTMLElement),f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},d="application/octet-stream",s=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,s)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(i){u(i)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,s){if(!s){t=p(t)}var v=this,w=t.type,m=w===d,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&a)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;i(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define([],function(){return saveAs})}
|
||||
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js
|
||||
*/
|
||||
var saveAs =
|
||||
saveAs ||
|
||||
function(e) {
|
||||
"use strict";
|
||||
if (typeof e === "undefined" ||
|
||||
typeof navigator !== "undefined" &&
|
||||
/MSIE [1-9]\./.test(navigator.userAgent)) {
|
||||
return
|
||||
}
|
||||
var t = e.document, n = function() { return e.URL || e.webkitURL || e },
|
||||
r = t.createElementNS("http://www.w3.org/1999/xhtml", "a"),
|
||||
o = "download" in r,
|
||||
i =
|
||||
function(e) {
|
||||
var t = new MouseEvent("click");
|
||||
e.dispatchEvent(t)
|
||||
},
|
||||
a = /constructor/i.test(e.HTMLElement),
|
||||
f = /CriOS\/[\d]+/.test(navigator.userAgent), u = function(t) {
|
||||
(e.setImmediate || e.setTimeout)(function() { throw t }, 0)
|
||||
}, d = "application/octet-stream", s = 1e3 * 40, c = function(e) {
|
||||
var t = function() {
|
||||
if (typeof e === "string") {
|
||||
n().revokeObjectURL(e)
|
||||
} else {
|
||||
e.remove()
|
||||
}
|
||||
};
|
||||
setTimeout(t, s)
|
||||
}, l = function(e, t, n) {
|
||||
t = [].concat(t);
|
||||
var r = t.length;
|
||||
while (r--) {
|
||||
var o = e["on" + t[r]];
|
||||
if (typeof o === "function") {
|
||||
try {
|
||||
o.call(e, n || e)
|
||||
} catch (i) {
|
||||
u(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, p = function(e) {
|
||||
if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i
|
||||
.test(e.type)) {
|
||||
return new Blob([ String.fromCharCode(65279), e ],
|
||||
{type : e.type})
|
||||
}
|
||||
return e
|
||||
}, v = function(t, u, s) {
|
||||
if (!s) {
|
||||
t = p(t)
|
||||
}
|
||||
var v = this, w = t.type, m = w === d, y, h = function() {
|
||||
l(v, "writestart progress write writeend".split(" "))
|
||||
}, S = function() {
|
||||
if ((f || m && a) && e.FileReader) {
|
||||
var r = new FileReader;
|
||||
r.onloadend = function() {
|
||||
var t = f ? r.result
|
||||
: r.result.replace(/^data:[^;]*;/,
|
||||
"data:attachment/file;");
|
||||
var n = e.open(t, "_blank");
|
||||
if (!n)
|
||||
e.location.href = t;
|
||||
t = undefined;
|
||||
v.readyState = v.DONE;
|
||||
h()
|
||||
};
|
||||
r.readAsDataURL(t);
|
||||
v.readyState = v.INIT;
|
||||
return
|
||||
}
|
||||
if (!y) {
|
||||
y = n().createObjectURL(t)
|
||||
}
|
||||
if (m) {
|
||||
e.location.href = y
|
||||
} else {
|
||||
var o = e.open(y, "_blank");
|
||||
if (!o) {
|
||||
e.location.href = y
|
||||
}
|
||||
}
|
||||
v.readyState = v.DONE;
|
||||
h();
|
||||
c(y)
|
||||
};
|
||||
v.readyState = v.INIT;
|
||||
if (o) {
|
||||
y = n().createObjectURL(t);
|
||||
setTimeout(function() {
|
||||
r.href = y;
|
||||
r.download = u;
|
||||
i(r);
|
||||
h();
|
||||
c(y);
|
||||
v.readyState = v.DONE
|
||||
});
|
||||
return
|
||||
}
|
||||
S()
|
||||
}, w = v.prototype, m = function(e, t, n) {
|
||||
return new v(e, t || e.name || "download", n)
|
||||
};
|
||||
if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
|
||||
return function(e, t, n) {
|
||||
t = t || e.name || "download";
|
||||
if (!n) {
|
||||
e = p(e)
|
||||
}
|
||||
return navigator.msSaveOrOpenBlob(e, t)
|
||||
}
|
||||
}
|
||||
w.abort = function() {};
|
||||
w.readyState = w.INIT = 0;
|
||||
w.WRITING = 1;
|
||||
w.DONE = 2;
|
||||
w.error = w.onwritestart = w.onprogress = w.onwrite = w.onabort =
|
||||
w.onerror = w.onwriteend = null;
|
||||
return m
|
||||
}(typeof self !== "undefined" && self ||
|
||||
typeof window !== "undefined" && window || this.content);
|
||||
if (typeof module !== "undefined" && module.exports) {
|
||||
module.exports.saveAs = saveAs
|
||||
} else if (typeof define !== "undefined" && define !== null &&
|
||||
define.amd !== null) {
|
||||
define([], function() { return saveAs })
|
||||
}
|
||||
|
||||
Vendored
+50
-2
@@ -1,2 +1,50 @@
|
||||
!function(t){"use strict";var e=t.HTMLCanvasElement&&t.HTMLCanvasElement.prototype,o=t.Blob&&function(){try{return Boolean(new Blob)}catch(t){return!1}}(),n=o&&t.Uint8Array&&function(){try{return 100===new Blob([new Uint8Array(100)]).size}catch(t){return!1}}(),r=t.BlobBuilder||t.WebKitBlobBuilder||t.MozBlobBuilder||t.MSBlobBuilder,a=/^data:((.*?)(;charset=.*?)?)(;base64)?,/,i=(o||r)&&t.atob&&t.ArrayBuffer&&t.Uint8Array&&function(t){var e,i,l,u,b,c,d,B,f;if(e=t.match(a),!e)throw new Error("invalid data URI");for(i=e[2]?e[1]:"text/plain"+(e[3]||";charset=US-ASCII"),l=!!e[4],u=t.slice(e[0].length),b=l?atob(u):decodeURIComponent(u),c=new ArrayBuffer(b.length),d=new Uint8Array(c),B=0;B<b.length;B+=1)d[B]=b.charCodeAt(B);return o?new Blob([n?d:c],{type:i}):(f=new r,f.append(c),f.getBlob(i))};t.HTMLCanvasElement&&!e.toBlob&&(e.mozGetAsFile?e.toBlob=function(t,o,n){t(n&&e.toDataURL&&i?i(this.toDataURL(o,n)):this.mozGetAsFile("blob",o))}:e.toDataURL&&i&&(e.toBlob=function(t,e,o){t(i(this.toDataURL(e,o)))})),"function"==typeof define&&define.amd?define(function(){return i}):"object"==typeof module&&module.exports?module.exports=i:t.dataURLtoBlob=i}(window);
|
||||
//# sourceMappingURL=canvas-to-blob.min.js.map
|
||||
!function(t) {
|
||||
"use strict";
|
||||
var e = t.HTMLCanvasElement && t.HTMLCanvasElement.prototype,
|
||||
o = t.Blob &&
|
||||
function() {
|
||||
try {
|
||||
return Boolean(new Blob)
|
||||
} catch (t) {
|
||||
return !1
|
||||
}
|
||||
}(),
|
||||
n = o && t.Uint8Array &&
|
||||
function() {
|
||||
try {
|
||||
return 100 === new Blob([ new Uint8Array(100) ]).size
|
||||
} catch (t) {
|
||||
return !1
|
||||
}
|
||||
}(),
|
||||
r = t.BlobBuilder || t.WebKitBlobBuilder || t.MozBlobBuilder ||
|
||||
t.MSBlobBuilder,
|
||||
a = /^data:((.*?)(;charset=.*?)?)(;base64)?,/,
|
||||
i = (o || r) && t.atob && t.ArrayBuffer && t.Uint8Array && function(t) {
|
||||
var e, i, l, u, b, c, d, B, f;
|
||||
if (e = t.match(a), !e)
|
||||
throw new Error("invalid data URI");
|
||||
for (i = e[2] ? e[1] : "text/plain" + (e[3] || ";charset=US-ASCII"),
|
||||
l = !!e[4], u = t.slice(e[0].length),
|
||||
b = l ? atob(u) : decodeURIComponent(u),
|
||||
c = new ArrayBuffer(b.length), d = new Uint8Array(c), B = 0;
|
||||
B < b.length; B += 1)
|
||||
d[B] = b.charCodeAt(B);
|
||||
return o ? new Blob([ n ? d : c ], {type : i})
|
||||
: (f = new r, f.append(c), f.getBlob(i))
|
||||
};
|
||||
t.HTMLCanvasElement && !e.toBlob &&
|
||||
(e.mozGetAsFile
|
||||
? e.toBlob =
|
||||
function(t, o, n) {
|
||||
t(n && e.toDataURL && i ? i(this.toDataURL(o, n))
|
||||
: this.mozGetAsFile("blob", o))
|
||||
}
|
||||
: e.toDataURL && i &&
|
||||
(e.toBlob = function(t, e, o) { t(i(this.toDataURL(e, o))) })),
|
||||
"function" == typeof define && define.amd
|
||||
? define(function() { return i })
|
||||
: "object" == typeof module &&module.exports ? module.exports = i
|
||||
: t.dataURLtoBlob = i
|
||||
}(window);
|
||||
//# sourceMappingURL=canvas-to-blob.min.js.map
|
||||
|
||||
+36
-41
@@ -2,59 +2,54 @@
|
||||
|
||||
(function() {
|
||||
|
||||
var canvasToFavicon;
|
||||
var supportsCanvas = !!document.createElement('canvas').getContext;
|
||||
var canvasToFavicon;
|
||||
var supportsCanvas = !!document.createElement('canvas').getContext;
|
||||
|
||||
if (supportsCanvas) {
|
||||
if (supportsCanvas) {
|
||||
|
||||
var head = document.head;
|
||||
var head = document.head;
|
||||
|
||||
var createIconElement = function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'icon';
|
||||
link.type = 'image/png';
|
||||
return link;
|
||||
};
|
||||
var createIconElement = function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'icon';
|
||||
link.type = 'image/png';
|
||||
return link;
|
||||
};
|
||||
|
||||
var isFirefox = !!navigator.userAgent.match(/firefox/i);
|
||||
var isFirefox = !!navigator.userAgent.match(/firefox/i);
|
||||
|
||||
var iconElement;
|
||||
var iconElement;
|
||||
|
||||
canvasToFavicon = function(canvas) {
|
||||
|
||||
if (!iconElement) {
|
||||
|
||||
var existingIcons = document.querySelectorAll('link[rel="icon"]');
|
||||
for (var i = 0, len = existingIcons.length; i < len; i ++) {
|
||||
head.removeChild(existingIcons[i]);
|
||||
}
|
||||
|
||||
iconElement = createIconElement();
|
||||
head.appendChild(iconElement);
|
||||
canvasToFavicon = function(canvas) {
|
||||
if (!iconElement) {
|
||||
|
||||
var existingIcons = document.querySelectorAll('link[rel="icon"]');
|
||||
for (var i = 0, len = existingIcons.length; i < len; i++) {
|
||||
head.removeChild(existingIcons[i]);
|
||||
}
|
||||
|
||||
// firefox needs to swap out the old element
|
||||
if (isFirefox) {
|
||||
var newEl = createIconElement();
|
||||
head.replaceChild(newEl, iconElement);
|
||||
iconElement = newEl;
|
||||
}
|
||||
iconElement = createIconElement();
|
||||
head.appendChild(iconElement);
|
||||
}
|
||||
|
||||
iconElement.href = canvas.toDataURL('image/png');
|
||||
// firefox needs to swap out the old element
|
||||
if (isFirefox) {
|
||||
var newEl = createIconElement();
|
||||
head.replaceChild(newEl, iconElement);
|
||||
iconElement = newEl;
|
||||
}
|
||||
|
||||
};
|
||||
iconElement.href = canvas.toDataURL('image/png');
|
||||
};
|
||||
|
||||
} else {
|
||||
} else {
|
||||
|
||||
// noop without support
|
||||
canvasToFavicon = function() {};
|
||||
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined')
|
||||
module.exports = canvasToFavicon;
|
||||
else
|
||||
this.canvasToFavicon = canvasToFavicon;
|
||||
// noop without support
|
||||
canvasToFavicon = function() {};
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined')
|
||||
module.exports = canvasToFavicon;
|
||||
else
|
||||
this.canvasToFavicon = canvasToFavicon;
|
||||
})();
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) },
|
||||
i[r].l = 1 * new Date();
|
||||
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js',
|
||||
'ga');
|
||||
ga('create', 'UA-83349671-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
+229
-129
@@ -6,82 +6,92 @@ License: MIT
|
||||
***/
|
||||
|
||||
.sp-container {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||
z-index: 9999994;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix for * { box-sizing: border-box; } */
|
||||
|
||||
.sp-container,
|
||||
.sp-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||
|
||||
.sp-top {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sp-top-inner {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sp-color {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:20%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 84%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top:33px;
|
||||
top: 33px;
|
||||
height: 77.5%;
|
||||
}
|
||||
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
.sp-sat, .sp-val {
|
||||
|
||||
.sp-sat,
|
||||
.sp-val {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-top {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sp-alpha-handle {
|
||||
position:absolute;
|
||||
top:-4px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
left: 50%;
|
||||
@@ -90,6 +100,7 @@ License: MIT
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -98,6 +109,7 @@ License: MIT
|
||||
left: 0;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.sp-alpha-inner {
|
||||
border: solid 1px #333;
|
||||
}
|
||||
@@ -112,34 +124,48 @@ License: MIT
|
||||
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 84%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-webkit-user-select:none;
|
||||
|
||||
.sp-container,
|
||||
.sp-replacer,
|
||||
.sp-preview,
|
||||
.sp-dragger,
|
||||
.sp-slider,
|
||||
.sp-alpha,
|
||||
.sp-clear,
|
||||
.sp-alpha-handle,
|
||||
.sp-container.sp-dragging .sp-input,
|
||||
.sp-container button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: -moz-none;
|
||||
-o-user-select:none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-palette-only .sp-picker-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-palette-disabled .sp-palette-container {
|
||||
display: none;
|
||||
}
|
||||
@@ -150,16 +176,18 @@ License: MIT
|
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
}
|
||||
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
@@ -168,7 +196,7 @@ License: MIT
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
@@ -184,28 +212,34 @@ License: MIT
|
||||
Generate 6 divs, line them up, and do two color gradients for each.
|
||||
Yes, really.
|
||||
*/
|
||||
|
||||
.sp-1 {
|
||||
height:17%;
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
|
||||
.sp-2 {
|
||||
height:16%;
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
|
||||
.sp-3 {
|
||||
height:17%;
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
|
||||
.sp-4 {
|
||||
height:17%;
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
|
||||
.sp-5 {
|
||||
height:16%;
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
|
||||
.sp-6 {
|
||||
height:17%;
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
@@ -214,31 +248,51 @@ License: MIT
|
||||
}
|
||||
|
||||
/* Clearfix hack */
|
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||
.sp-cf:after { clear: both; }
|
||||
.sp-cf { *zoom: 1; }
|
||||
|
||||
.sp-cf:before,
|
||||
.sp-cf:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.sp-cf:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.sp-cf {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/* Mobile devices, make hue slider bigger so it is easier to slide */
|
||||
|
||||
@media (max-device-width: 480px) {
|
||||
.sp-color { right: 40%; }
|
||||
.sp-hue { left: 63%; }
|
||||
.sp-fill { padding-top: 60%; }
|
||||
.sp-color {
|
||||
right: 40%;
|
||||
}
|
||||
.sp-hue {
|
||||
left: 63%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-dragger {
|
||||
border-radius: 5px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
border-radius: 5px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top:0;
|
||||
cursor:pointer;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
height: 3px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
@@ -260,59 +314,78 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
|
||||
|
||||
.sp-container,
|
||||
.sp-container button,
|
||||
.sp-container input,
|
||||
.sp-color,
|
||||
.sp-hue,
|
||||
.sp-clear {
|
||||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sp-top {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sp-color, .sp-hue, .sp-clear {
|
||||
|
||||
.sp-color,
|
||||
.sp-hue,
|
||||
.sp-clear {
|
||||
border: solid 1px #666;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
|
||||
.sp-input-container {
|
||||
float:right;
|
||||
float: right;
|
||||
width: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sp-initial-disabled .sp-input-container {
|
||||
|
||||
.sp-initial-disabled .sp-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sp-input {
|
||||
font-size: 12px !important;
|
||||
border: 1px inset;
|
||||
padding: 4px 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background:transparent;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
font-size: 12px !important;
|
||||
border: 1px inset;
|
||||
padding: 4px 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
}
|
||||
.sp-input:focus {
|
||||
|
||||
.sp-input:focus {
|
||||
border: 1px solid orange;
|
||||
}
|
||||
|
||||
.sp-input.sp-validation-error {
|
||||
border: 1px solid red;
|
||||
background: #fdd;
|
||||
}
|
||||
.sp-picker-container , .sp-palette-container {
|
||||
float:left;
|
||||
|
||||
.sp-picker-container,
|
||||
.sp-palette-container {
|
||||
float: left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
}
|
||||
|
||||
.sp-picker-container {
|
||||
width: 172px;
|
||||
/*border-left: solid 1px #fff;*/
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
|
||||
.sp-palette-container {
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
@@ -323,33 +396,38 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
display: block;
|
||||
position:relative;
|
||||
float:left;
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 24px;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
border:solid 2px transparent;
|
||||
border: solid 2px transparent;
|
||||
}
|
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
|
||||
.sp-palette .sp-thumb-el:hover,
|
||||
.sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.sp-thumb-el {
|
||||
position:relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
|
||||
.sp-initial {
|
||||
float: left;
|
||||
border: solid 1px #333;
|
||||
}
|
||||
|
||||
.sp-initial span {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border:none;
|
||||
display:block;
|
||||
float:left;
|
||||
margin:0;
|
||||
border: none;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sp-initial .sp-clear-display {
|
||||
@@ -357,18 +435,20 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
|
||||
.sp-replacer {
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display:inline-block;
|
||||
display: inline-block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
border: solid 1px #91765d;
|
||||
@@ -376,29 +456,34 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
|
||||
.sp-replacer:hover,
|
||||
.sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.sp-replacer.sp-disabled {
|
||||
cursor:default;
|
||||
cursor: default;
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.sp-dd {
|
||||
padding: 2px 0;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
float:left;
|
||||
font-size:10px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.sp-preview {
|
||||
position:relative;
|
||||
width:25px;
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
border: solid 1px #222;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -406,37 +491,40 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
*width: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
width:16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin:2px 1px;
|
||||
margin: 2px 1px;
|
||||
border: solid 1px #d0d0d0;
|
||||
}
|
||||
|
||||
.sp-container {
|
||||
padding-bottom:0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Buttons: http://hellohappy.org/css3-buttons/ */
|
||||
|
||||
.sp-container button {
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 4px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
vertical-align: middle;
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 4px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sp-container button:hover {
|
||||
background-color: #dddddd;
|
||||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
@@ -449,6 +537,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #ddd;
|
||||
}
|
||||
|
||||
.sp-container button:active {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
@@ -458,34 +547,45 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
}
|
||||
|
||||
.sp-cancel {
|
||||
font-size: 11px;
|
||||
color: #d93f3f !important;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.sp-cancel:hover {
|
||||
color: #d93f3f !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
|
||||
.sp-palette span:hover,
|
||||
.sp-palette span.sp-thumb-active {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el {
|
||||
position:relative;
|
||||
.sp-preview,
|
||||
.sp-alpha,
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-inner {
|
||||
@@ -502,7 +602,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
}
|
||||
|
||||
.sp-clear-display {
|
||||
background-repeat:no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
|
||||
}
|
||||
|
||||
+1204
-1
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
|
||||
import urllib.request, json
|
||||
import urllib.request, json
|
||||
|
||||
icons_json_url = 'https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/advanced-options/metadata/icons.json'
|
||||
|
||||
@@ -20,7 +20,8 @@ for icon_name, icon in icons_json.items():
|
||||
result_icon['search_terms'] = search_terms
|
||||
result.append(result_icon)
|
||||
|
||||
js_icons = 'var icons = ' + json.dumps(result, separators=(',', ':')).replace('\\\\', '\\')
|
||||
js_icons = 'var icons = ' + json.dumps(
|
||||
result, separators=(',', ':')).replace('\\\\', '\\')
|
||||
|
||||
with open('js/icons.js', 'w') as f:
|
||||
f.write(js_icons)
|
||||
|
||||
Reference in New Issue
Block a user