Support for multiple themes
parent
d4536f8d84
commit
7785c1b57e
41
dark.css
41
dark.css
|
@ -1,48 +1,11 @@
|
||||||
/* Dark Style */
|
/* Dark Style */
|
||||||
.lichess_widget {
|
.lichess_theme_dark.lichess_widget {
|
||||||
font-family: "Open Sans","Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 2px;
|
|
||||||
background: #333;
|
background: #333;
|
||||||
border: 1px solid #444;
|
border: 1px solid #444;
|
||||||
padding: 5px 10px 7px 10px;
|
|
||||||
color: #acacac;
|
color: #acacac;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lichess_widget:hover {
|
.lichess_theme_dark.lichess_widget:hover {
|
||||||
background: #4A4A4A;
|
background: #4A4A4A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lichess_widget b {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.lichess_widget img {
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.lichess_widget span {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lichess_long {
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lichess_long hr {
|
|
||||||
margin: 6px 0 2px 0;
|
|
||||||
background: #666;
|
|
||||||
border: none;
|
|
||||||
height: 1px
|
|
||||||
}
|
|
||||||
|
|
||||||
.lichess_online img {
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
|
|
28
index.html
28
index.html
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Lichess Widgets</title>
|
<title>Lichess Widgets</title>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||||
|
<link rel="stylesheet" href="lichess_widgets.css" />
|
||||||
<link rel="stylesheet" href="dark.css" />
|
<link rel="stylesheet" href="dark.css" />
|
||||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||||
<script src="lichess_widgets.js"></script>
|
<script src="lichess_widgets.js"></script>
|
||||||
|
@ -14,7 +15,7 @@
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 900px;
|
max-width: 950px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -42,6 +43,7 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<blockcode>
|
<blockcode>
|
||||||
|
<link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.css" /><br />
|
||||||
<link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/dark.css" /><br />
|
<link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/dark.css" /><br />
|
||||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><br />
|
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><br />
|
||||||
<script src="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.js"></script>
|
<script src="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.js"></script>
|
||||||
|
@ -50,62 +52,62 @@
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile("rubenwardy", "Lichess");</script>
|
<script>lichess.profile("dark", "rubenwardy", "Lichess");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile("rubenwardy", "Lichess");</script>
|
<script>lichess.profile("dark", "rubenwardy", "Lichess");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile("rubenwardy");</script>
|
<script>lichess.profile("dark", "rubenwardy");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile("rubenwardy");</script>
|
<script>lichess.profile("dark", "rubenwardy");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile_scores("rubenwardy");</script>
|
<script>lichess.profile_scores("dark", "rubenwardy");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile_scores("rubenwardy");</script>
|
<script>lichess.profile_scores("dark", "rubenwardy");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile_scores("rubenwardy", "");</script>
|
<script>lichess.profile_scores("dark", "rubenwardy", "");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile_scores("rubenwardy", "");</script>
|
<script>lichess.profile_scores("dark", "rubenwardy", "");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile_big("rubenwardy");</script>
|
<script>lichess.profile_big("dark", "rubenwardy");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile_big("rubenwardy");</script>
|
<script>lichess.profile_big("dark", "rubenwardy");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<script>lichess.profile_big("rubenwardy", "My Lichess");</script>
|
<script>lichess.profile_big("dark", "rubenwardy", "My Lichess");</script>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<blockcode>
|
<blockcode>
|
||||||
<script>lichess.profile_big("rubenwardy", "My Lichess");</script>
|
<script>lichess.profile_big("dark", "rubenwardy", "My Lichess");</script>
|
||||||
</blockcode>
|
</blockcode>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
/* Dark Style */
|
||||||
|
.lichess_widget {
|
||||||
|
font-family: "Open Sans","Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 5px 10px 7px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lichess_widget b {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lichess_widget img {
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
display: inline-block;
|
||||||
|
height: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.lichess_widget span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lichess_long {
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lichess_long hr {
|
||||||
|
margin: 6px 0 2px 0;
|
||||||
|
background: #666;
|
||||||
|
border: none;
|
||||||
|
height: 1px
|
||||||
|
}
|
|
@ -10,12 +10,12 @@ lichess.__make_online = function(id) {
|
||||||
$(id + " > img").attr("src", "http://rubenwardy.github.io/lichess_widgets/lichess_online.png");
|
$(id + " > img").attr("src", "http://rubenwardy.github.io/lichess_widgets/lichess_online.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
lichess.profile = function(author, text) {
|
lichess.profile = function(theme, author, text) {
|
||||||
serial++;
|
serial++;
|
||||||
var id = serial;
|
var id = serial;
|
||||||
if (text == null)
|
if (text == null)
|
||||||
text = author;
|
text = author;
|
||||||
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget\" href=\"http://lichess.org/@/" + author + "\">";
|
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget lichess_theme_" + theme + "\" href=\"http://lichess.org/@/" + author + "\">";
|
||||||
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />"
|
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />"
|
||||||
tmp += "<span>" + text + "</span></a>";
|
tmp += "<span>" + text + "</span></a>";
|
||||||
document.write(tmp);
|
document.write(tmp);
|
||||||
|
@ -29,12 +29,12 @@ lichess.profile = function(author, text) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
lichess.profile_scores = function(author, text) {
|
lichess.profile_scores = function(theme, author, text) {
|
||||||
serial++;
|
serial++;
|
||||||
var id = serial;
|
var id = serial;
|
||||||
if (text == undefined)
|
if (text == undefined)
|
||||||
text = author;
|
text = author;
|
||||||
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget\" href=\"http://lichess.org/@/" + author + "\">";
|
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget lichess_theme_" + theme + "\" href=\"http://lichess.org/@/" + author + "\">";
|
||||||
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />"
|
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />"
|
||||||
tmp += "<span>Loading...</span></a>";
|
tmp += "<span>Loading...</span></a>";
|
||||||
document.write(tmp);
|
document.write(tmp);
|
||||||
|
@ -52,12 +52,12 @@ lichess.profile_scores = function(author, text) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
lichess.profile_big = function(author, text) {
|
lichess.profile_big = function(theme, author, text) {
|
||||||
serial++;
|
serial++;
|
||||||
var id = serial;
|
var id = serial;
|
||||||
if (text == undefined)
|
if (text == undefined)
|
||||||
text = author + " on Lichess";
|
text = author + " on Lichess";
|
||||||
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget lichess_long\" href=\"http://lichess.org/@/" + author + "\">";
|
var tmp = "<a id=\"lichess_widget_" + id + "\" class=\"lichess_widget lichess_theme_" + theme + " lichess_long\" href=\"http://lichess.org/@/" + author + "\">";
|
||||||
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />" + text + "<hr />"
|
tmp += "<img src=\"http://en.lichess.org/assets/images/favicon-32-white.png\" alt=\"lichess\" />" + text + "<hr />"
|
||||||
tmp += "<span>One: two<br />Three: four</span></a>";
|
tmp += "<span>One: two<br />Three: four</span></a>";
|
||||||
document.write(tmp);
|
document.write(tmp);
|
||||||
|
|
Loading…
Reference in New Issue