Support for multiple themes

master
rubenwardy 2014-11-07 16:33:38 +00:00
parent d4536f8d84
commit 7785c1b57e
4 changed files with 59 additions and 58 deletions

View File

@ -1,48 +1,11 @@
/* Dark Style */
.lichess_widget {
font-family: "Open Sans","Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
display: inline-block;
margin: 2px;
.lichess_theme_dark.lichess_widget {
background: #333;
border: 1px solid #444;
padding: 5px 10px 7px 10px;
color: #acacac;
border-radius: 4px;
text-decoration: none;
}
.lichess_widget:hover {
.lichess_theme_dark.lichess_widget:hover {
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;
}

View File

@ -3,6 +3,7 @@
<head>
<title>Lichess Widgets</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="lichess_widgets.css" />
<link rel="stylesheet" href="dark.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="lichess_widgets.js"></script>
@ -14,7 +15,7 @@
}
body {
width: 90%;
max-width: 900px;
max-width: 950px;
margin: auto;
padding: 0;
}
@ -42,6 +43,7 @@
</p>
<blockcode>
&lt;link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.css" /&gt;<br />
&lt;link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/dark.css" /&gt;<br />
&lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;<br />
&lt;script src="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.js"&gt;&lt;/script&gt;
@ -50,62 +52,62 @@
<table>
<tr>
<td>
<script>lichess.profile("rubenwardy", "Lichess");</script>
<script>lichess.profile("dark", "rubenwardy", "Lichess");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile("rubenwardy", "Lichess");&lt;/script&gt;
&lt;script&gt;lichess.profile("dark", "rubenwardy", "Lichess");&lt;/script&gt;
</blockcode>
</td>
</tr>
<tr>
<td>
<script>lichess.profile("rubenwardy");</script>
<script>lichess.profile("dark", "rubenwardy");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile("rubenwardy");&lt;/script&gt;
&lt;script&gt;lichess.profile("dark", "rubenwardy");&lt;/script&gt;
</blockcode>
</td>
</tr>
<tr>
<td>
<script>lichess.profile_scores("rubenwardy");</script>
<script>lichess.profile_scores("dark", "rubenwardy");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile_scores("rubenwardy");&lt;/script&gt;
&lt;script&gt;lichess.profile_scores("dark", "rubenwardy");&lt;/script&gt;
</blockcode>
</td>
</tr>
<tr>
<td>
<script>lichess.profile_scores("rubenwardy", "");</script>
<script>lichess.profile_scores("dark", "rubenwardy", "");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile_scores("rubenwardy", "");&lt;/script&gt;
&lt;script&gt;lichess.profile_scores("dark", "rubenwardy", "");&lt;/script&gt;
</blockcode>
</td>
</tr>
<tr>
<td>
<script>lichess.profile_big("rubenwardy");</script>
<script>lichess.profile_big("dark", "rubenwardy");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile_big("rubenwardy");&lt;/script&gt;
&lt;script&gt;lichess.profile_big("dark", "rubenwardy");&lt;/script&gt;
</blockcode>
</td>
</tr>
<tr>
<td>
<script>lichess.profile_big("rubenwardy", "My Lichess");</script>
<script>lichess.profile_big("dark", "rubenwardy", "My Lichess");</script>
</td>
<td>
<blockcode>
&lt;script&gt;lichess.profile_big("rubenwardy", "My Lichess");&lt;/script&gt;
&lt;script&gt;lichess.profile_big("dark", "rubenwardy", "My Lichess");&lt;/script&gt;
</blockcode>
</td>
</tr>

36
lichess_widgets.css Normal file
View File

@ -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
}

View File

@ -10,12 +10,12 @@ lichess.__make_online = function(id) {
$(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++;
var id = serial;
if (text == null)
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 += "<span>" + text + "</span></a>";
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++;
var id = serial;
if (text == undefined)
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 += "<span>Loading...</span></a>";
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++;
var id = serial;
if (text == undefined)
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 += "<span>One: two<br />Three: four</span></a>";
document.write(tmp);