From 3e36f139f708bbd170389c22328fd5a9cd44e333 Mon Sep 17 00:00:00 2001 From: rubenwardy Date: Fri, 7 Nov 2014 16:51:17 +0000 Subject: [PATCH] Add light theme --- dark.css | 9 ++ index.html | 235 ++++++++++++++++++++++++++++++-------------- lichess_widgets.css | 6 -- light.css | 19 ++++ readme.md | 2 +- 5 files changed, 188 insertions(+), 83 deletions(-) create mode 100644 light.css diff --git a/dark.css b/dark.css index bb2ecff..2ab547e 100644 --- a/dark.css +++ b/dark.css @@ -9,3 +9,12 @@ .lichess_theme_dark.lichess_widget:hover { background: #4A4A4A; } + +.lichess_theme_dark.lichess_long hr { + background: #444; +} + +.lichess_theme_dark.lichess_widget b { + font-weight: 700; + font-size: 100%; +} diff --git a/index.html b/index.html index b35637c..80d6ded 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,25 @@ + -

Widgets for Lichess (Work in progress)

+
+

Widgets for Lichess (Work in progress)

-

- Add the following to the <head> of your webpage, - and then add one of the widgets to the <body> of your webpage. -

+

+ Add the following to the <head> of your webpage, + and then add one of the widgets to the <body> of your webpage. +

- - <link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.css" />
- <link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/dark.css" />
- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
- <script src="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.js"></script> - + + <link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.css" />
+ <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+ <script src="http://rubenwardy.github.io/lichess_widgets/lichess_widgets.js"></script>
+ <!-- For the light theme --> <link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/light.css" />
+ <!-- For the dark theme --> <link rel="stylesheet" href="http://rubenwardy.github.io/lichess_widgets/dark.css" /> + - - - - - - - - - - - - - - - - - - - - - +
- - - - <script>lichess.profile("dark", "rubenwardy", "Lichess");</script> - -
- - - - <script>lichess.profile("dark", "rubenwardy");</script> - -
- - - - <script>lichess.profile_scores("dark", "rubenwardy");</script> - -
- - - - <script>lichess.profile_scores("dark", "rubenwardy", "");</script> - -
- - - - <script>lichess.profile_big("dark", "rubenwardy");</script> - -
+ + + + + + + + + + + + + + + + + + + + - - - - -
+ + + + <script>lichess.profile("light", "rubenwardy", "Lichess");</script> + +
+ + + + <script>lichess.profile("light", "rubenwardy");</script> + +
+ + + + <script>lichess.profile_scores("light", "rubenwardy");</script> + +
+ + + + <script>lichess.profile_scores("light", "rubenwardy", "");</script> + +
+ + + + <script>lichess.profile_big("light", "rubenwardy");</script> + +
- - - - <script>lichess.profile_big("dark", "rubenwardy", "My Lichess");</script> - -
+ + + + + + + <script>lichess.profile_big("light", "rubenwardy", "My Lichess");</script> + + + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + <script>lichess.profile("dark", "rubenwardy", "Lichess");</script> + +
+ + + + <script>lichess.profile("dark", "rubenwardy");</script> + +
+ + + + <script>lichess.profile_scores("dark", "rubenwardy");</script> + +
+ + + + <script>lichess.profile_scores("dark", "rubenwardy", "");</script> + +
+ + + + <script>lichess.profile_big("dark", "rubenwardy");</script> + +
+ + + + <script>lichess.profile_big("dark", "rubenwardy", "My Lichess");</script> + +
+
+
+ diff --git a/lichess_widgets.css b/lichess_widgets.css index 1737b47..bf6e6af 100644 --- a/lichess_widgets.css +++ b/lichess_widgets.css @@ -8,11 +8,6 @@ text-decoration: none; } -.lichess_widget b { - font-weight: 700; - font-size: 100%; -} - .lichess_widget img { margin: 0 10px 0 0; display: inline-block; @@ -30,7 +25,6 @@ .lichess_long hr { margin: 6px 0 2px 0; - background: #666; border: none; height: 1px } diff --git a/light.css b/light.css new file mode 100644 index 0000000..dd86a92 --- /dev/null +++ b/light.css @@ -0,0 +1,19 @@ +/* Light Style */ +.lichess_theme_light.lichess_widget { + background: #EEE; + border: 1px solid #E0E0E0; + color: black; +} + +.lichess_theme_light.lichess_widget:hover { + background: #e0e0e0; +} + +.lichess_theme_light..lichess_long hr { + background: #e0e0e0; +} + +.lichess_theme_light.lichess_widget b { + font-weight: 800; + font-size: 100%; +} diff --git a/readme.md b/readme.md index e5ddbc6..885d0e3 100644 --- a/readme.md +++ b/readme.md @@ -3,4 +3,4 @@ Widgets for Lichess Create by rubenwardy -License: WTFPL +License: CC-BY-SA 3.0