Merge branch 'dark'

* dark: implement background toggle
2012-06-19 14:34:39 +02:00 · 2012-06-19 14:34:39 +02:00 · a65b8ac29e
parent f7e88dd95f b101dbed04
commit a65b8ac29e
15 changed files with 323 additions and 99 deletions
--- a/app/controllers/Setting.scala
+++ b/app/controllers/Setting.scala
@ -19,6 +19,7 @@ object Setting extends LilaController {
      case "theme" ⇒ setTheme.some
      case "sound" ⇒ setSound.some
      case "chat" ⇒ setChat.some
+      case "bg" ⇒ setBg.some
      case _       ⇒ none
    }
    setter.fold({
@ -44,4 +45,8 @@ object Setting extends LilaController {
  val setChat: Setter = forms.chat -> {
    (setting, v) ⇒ setting.chat(v)(userRepo)
  }
+
+  val setBg: Setter = forms.bg -> {
+    (setting, v) ⇒ setting.bg(v)(userRepo)
+  }
 }
--- a/app/http/Setting.scala
+++ b/app/http/Setting.scala
@ -18,6 +18,9 @@ final class Setting(ctx: Context) {
  def chat = get("chat", "true").parseBoolean | true
  def chat(value: String) = set("chat", value) _

+  def bg = get("bg", "light")
+  def bg(value: String) = set("bg", value) _
+
  private def get(name: String, default: String = ""): String =
    ctx.req.session.get(name) orElse {
      ctx.me flatMap (_ setting name) map (_.toString)
--- a/app/i18n/I18nKeys.scala
+++ b/app/i18n/I18nKeys.scala
@ -159,7 +159,8 @@ final class I18nKeys(translator: Translator) {
  val takebackPropositionCanceled = new Key("takebackPropositionCanceled")
  val yourOpponentProposesATakeback = new Key("yourOpponentProposesATakeback")
  val bookmarkThisGame = new Key("bookmarkThisGame")
+  val toggleBackground = new Key("toggleBackground")
  val freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents = new Key("freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents")

-  def keys = List(playWithAFriend, inviteAFriendToPlayWithYou, playWithTheMachine, challengeTheArtificialIntelligence, toInviteSomeoneToPlayGiveThisUrl, gameOver, waitingForOpponent, waiting, yourTurn, aiNameLevelAiLevel, level, toggleTheChat, toggleSound, chat, resign, checkmate, stalemate, white, black, createAGame, noGameAvailableRightNowCreateOne, whiteIsVictorious, blackIsVictorious, playWithTheSameOpponentAgain, newOpponent, playWithAnotherOpponent, yourOpponentWantsToPlayANewGameWithYou, joinTheGame, whitePlays, blackPlays, theOtherPlayerHasLeftTheGameYouCanForceResignationOrWaitForHim, makeYourOpponentResign, forceResignation, talkInChat, theFirstPersonToComeOnThisUrlWillPlayWithYou, whiteCreatesTheGame, blackCreatesTheGame, whiteJoinsTheGame, blackJoinsTheGame, whiteResigned, blackResigned, whiteLeftTheGame, blackLeftTheGame, shareThisUrlToLetSpectatorsSeeTheGame, youAreViewingThisGameAsASpectator, replayAndAnalyse, viewGameStats, flipBoard, threefoldRepetition, claimADraw, offerDraw, draw, nbConnectedPlayers, talkAboutChessAndDiscussLichessFeaturesInTheForum, seeTheGamesBeingPlayedInRealTime, gamesBeingPlayedRightNow, viewAllNbGames, viewNbCheckmates, nbBookmarks, nbPopularGames, bookmarkedByNbPlayers, viewInFullSize, logOut, signIn, signUp, people, games, forum, chessPlayers, minutesPerSide, variant, timeControl, start, username, password, haveAnAccount, allYouNeedIsAUsernameAndAPassword, learnMoreAboutLichess, rank, gamesPlayed, declineInvitation, cancel, timeOut, drawOfferSent, drawOfferDeclined, drawOfferAccepted, drawOfferCanceled, yourOpponentOffersADraw, accept, decline, playingRightNow, abortGame, gameAborted, standard, unlimited, mode, casual, rated, thisGameIsRated, rematch, rematchOfferSent, rematchOfferAccepted, rematchOfferCanceled, rematchOfferDeclined, cancelRematchOffer, viewRematch, play, inbox, chatRoom, spectatorRoom, composeMessage, sentMessages, incrementInSeconds, freeOnlineChess, spectators, nbWins, nbLosses, nbDraws, exportGames, color, eloRange, giveNbSeconds, searchAPlayer, whoIsOnline, allPlayers, namedPlayers, premoveEnabledClickAnywhereToCancel, thisPlayerUsesChessComputerAssistance, opening, takeback, proposeATakeback, takebackPropositionSent, takebackPropositionDeclined, takebackPropositionAccepted, takebackPropositionCanceled, yourOpponentProposesATakeback, bookmarkThisGame, freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents)
+  def keys = List(playWithAFriend, inviteAFriendToPlayWithYou, playWithTheMachine, challengeTheArtificialIntelligence, toInviteSomeoneToPlayGiveThisUrl, gameOver, waitingForOpponent, waiting, yourTurn, aiNameLevelAiLevel, level, toggleTheChat, toggleSound, chat, resign, checkmate, stalemate, white, black, createAGame, noGameAvailableRightNowCreateOne, whiteIsVictorious, blackIsVictorious, playWithTheSameOpponentAgain, newOpponent, playWithAnotherOpponent, yourOpponentWantsToPlayANewGameWithYou, joinTheGame, whitePlays, blackPlays, theOtherPlayerHasLeftTheGameYouCanForceResignationOrWaitForHim, makeYourOpponentResign, forceResignation, talkInChat, theFirstPersonToComeOnThisUrlWillPlayWithYou, whiteCreatesTheGame, blackCreatesTheGame, whiteJoinsTheGame, blackJoinsTheGame, whiteResigned, blackResigned, whiteLeftTheGame, blackLeftTheGame, shareThisUrlToLetSpectatorsSeeTheGame, youAreViewingThisGameAsASpectator, replayAndAnalyse, viewGameStats, flipBoard, threefoldRepetition, claimADraw, offerDraw, draw, nbConnectedPlayers, talkAboutChessAndDiscussLichessFeaturesInTheForum, seeTheGamesBeingPlayedInRealTime, gamesBeingPlayedRightNow, viewAllNbGames, viewNbCheckmates, nbBookmarks, nbPopularGames, bookmarkedByNbPlayers, viewInFullSize, logOut, signIn, signUp, people, games, forum, chessPlayers, minutesPerSide, variant, timeControl, start, username, password, haveAnAccount, allYouNeedIsAUsernameAndAPassword, learnMoreAboutLichess, rank, gamesPlayed, declineInvitation, cancel, timeOut, drawOfferSent, drawOfferDeclined, drawOfferAccepted, drawOfferCanceled, yourOpponentOffersADraw, accept, decline, playingRightNow, abortGame, gameAborted, standard, unlimited, mode, casual, rated, thisGameIsRated, rematch, rematchOfferSent, rematchOfferAccepted, rematchOfferCanceled, rematchOfferDeclined, cancelRematchOffer, viewRematch, play, inbox, chatRoom, spectatorRoom, composeMessage, sentMessages, incrementInSeconds, freeOnlineChess, spectators, nbWins, nbLosses, nbDraws, exportGames, color, eloRange, giveNbSeconds, searchAPlayer, whoIsOnline, allPlayers, namedPlayers, premoveEnabledClickAnywhereToCancel, thisPlayerUsesChessComputerAssistance, opening, takeback, proposeATakeback, takebackPropositionSent, takebackPropositionDeclined, takebackPropositionAccepted, takebackPropositionCanceled, yourOpponentProposesATakeback, bookmarkThisGame, toggleBackground, freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents)
 }
--- a/app/user/DataForm.scala
+++ b/app/user/DataForm.scala
@ -24,5 +24,9 @@ object DataForm {
    "theme" -> nonEmptyText.verifying(Theme contains _)
  ))

+  val bg = Form(single(
+    "bg" -> text.verifying(Set("light", "dark") contains _)
+  ))
+
  private def jsBoolean = nonEmptyText.verifying(Set("true", "false") contains _)
 }
--- a/app/views/base/layout.scala.html
+++ b/app/views/base/layout.scala.html
@ -9,6 +9,7 @@
    @cssTag("board.css")
    @cssTag("gamelist.css")
    @cssTag("opening.css")
+    @cssTag("dark.css")
    @moreCss
    <meta content="@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()" name="description">
    <meta name="google-site-verification" content="fZ08Imok7kcLaGcJg7BKQExO6vXGgSgsJUsW6JalUCo" />
@ -17,7 +18,7 @@
    <meta content="noindex, nofollow" name="robots">
    }
  </head>
-  <body class="@setting.theme.name" data-sound-file="@routes.Assets.at("sound/alert.ogg")">
+  <body class="@setting.theme.name @setting.bg" data-sound-file="@routes.Assets.at("sound/alert.ogg")">
    <div id="site_description">@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()</div>
    <div id="top" class="clearfix">
      <a href="@routes.Setting.set("sound")" title="@trans.toggleSound()" id="sound_state" class="available @soundString">
@ -57,6 +58,9 @@
          }
        </div>
      </div>
+      <a href="@routes.Setting.set("bg")" title="@trans.toggleBackground()" class="bgpicker">
+        <span></span>
+      </a>
    </div>
    <div class="content">
      <div class="header">
--- a/conf/messages
+++ b/conf/messages
@ -135,4 +135,5 @@ takebackPropositionAccepted=Takeback proposition accepted
 takebackPropositionCanceled=Takeback proposition canceled
 yourOpponentProposesATakeback=Your opponent proposes a takeback
 bookmarkThisGame=Bookmark this game
+toggleBackground=Toggle background color
 freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents=Free online Chess game. Play Chess now in a clean interface. No registration, no ads, no plugin required. Play Chess with computer, friends or random opponents.
--- a/public/images/head_bg_dark.png
+++ b/public/images/head_bg_dark.png
--- a/public/images/s24.png
+++ b/public/images/s24.png
--- a/public/javascripts/ctrl.js
+++ b/public/javascripts/ctrl.js
@ -63,17 +63,31 @@ $(function() {
  }

  // themepicker
-  var theme = document.body.className;
-  $('#top div.themepicker div.theme').hover(function() {
-    document.body.className = $(this).data("theme");
+  var $body = $('body');
+  var $themes = $('#top div.themepicker div.theme');
+  var themes = $.makeArray($themes.map(function() { return $(this).data("theme"); }));
+  var theme = $.map(document.body.className.split(/\s+/), function(a){return $.inArray(a, themes) < 0 ? null : a;})[0];
+  $themes.hover(function() {
+    $body.removeClass(themes.join(' ')).addClass($(this).data("theme"));
  }, function() {
-    document.body.className = theme;
+    $body.removeClass(themes.join(' ')).addClass(theme);
  }).click(function() {
    theme = $(this).data("theme");
    $.post($(this).parent().data("href"), {"theme": theme});
    $('#top .themepicker').removeClass("shown");
  });

+  // bgpicker
+  var bgs = ["light", "dark"];
+  var bg = $body.hasClass("dark") ? "dark" : "light";
+  function invertBg(bg) { return bg == "dark" ? "light" : "dark"; }
+  $('#top a.bgpicker').click(function() {
+    bg = invertBg(bg);
+    $body.removeClass(bgs.join(' ')).addClass(bg);
+    $.post($(this).attr('href'), {bg: bg});
+    return false;
+  });
+
  $.centerOverboard = function() {
    if ($overboard = $('div.lichess_overboard.auto_center').orNot()) {
      $overboard.css('top', (238 - $overboard.height() / 2) + 'px').show();
--- a/public/stylesheets/analyse.css
+++ b/public/stylesheets/analyse.css
@ -67,9 +67,9 @@ span.board_mark.horz {
  height: 2em;
 }
 #GameText {
-  font-size: 1.3em;
+  font-size: 1.4em;
  width: 220px;
-  height: 400px;
+  height: 512px;
  margin-bottom: 1em;
  background: #f7f7f7;
  border: 1px solid #C0C0C0;
--- a/public/stylesheets/board.css
+++ b/public/stylesheets/board.css
@ -300,7 +300,6 @@ div.lichess_promotion_choice div.lichess_piece:hover {
 }

 div.lichess_board_wrap {
-  box-shadow: 0 0 7px #bbb;
  border: 1px solid #ccc;
  border-radius: 5px;
 }
@ -584,7 +583,6 @@ div.lichess_chat {
  position: absolute;
  top: 207px;
  left: 0;
-  box-shadow: 0 0 7px #d0d0d0;
  border-radius: 4px;
 }
 div.lichess_chat.lobby_chat {
@ -636,7 +634,6 @@ div.lichess_chat form input {
  padding: 2px 20px 2px 4px;
  border-radius: 0 0 4px 4px;
  width: 172px;
-  background: white;
 }
 div.lichess_chat input.lichess_hint {
  color: #888;
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@ -117,9 +117,6 @@ div.footer div.right {
  cursor: pointer;
  font-size: 1.1em;
 }
-.button:hover {
-  color: #fff;
-}

 a.easy_button {
  font-weight: normal;
@ -227,7 +224,7 @@ div.side_menu a.active {
  box-shadow: -3px 0 6px #d0d0d0;
 }

-#nb_connected_players, a.goto_nav, #top a.toggle, a#sound_state {
+#nb_connected_players, a.goto_nav, #top a.toggle, #top a.bgpicker, a#sound_state {
  text-decoration: none;
  font-size: 13px;
  height: 24px;
@ -244,7 +241,7 @@ div.side_menu a.active {
 a.goto_nav {
  float: left;
 }
-a.goto_nav:hover, #top a.toggle:hover, a#sound_state:hover {
+a.goto_nav:hover, #top a.toggle:hover, #top a.bgpicker:hover, a#sound_state:hover {
  background: #fff;
 }
 #top .s16 {
@ -253,15 +250,15 @@ a.goto_nav:hover, #top a.toggle:hover, a#sound_state:hover {
  margin-top: 4px;
  line-height: 16px;
 }
-a.goto_nav span.new_messages {
-  padding: 1px 4px;
+#top span.new_messages {
+  padding: 1px 5px 1px 4px;
  background: #bbb;
  color: white;
  font-weight: bold;
  border-radius:4px;
  font-size: 0.9em;
 }
-a.goto_nav span.new_messages.unread {
+#top span.new_messages.unread {
  font-size: 1em;
 }
 #top .shown a.toggle {
@ -413,6 +410,18 @@ ul.lichess_language_links li:last-child {
  left: 64px;
 }

+#top a.bgpicker {
+  float: right;
+}
+#top a.bgpicker span {
+  width: 24px;
+  height: 24px;
+  opacity: 0.7;
+  background: url(../images/s24.png) no-repeat;
+  background-position: 0 -48px;
+  display: block;
+}
+
 a#sound_state {
  float: right;
 }
@ -582,6 +591,14 @@ div.hooks td.action {
  background: linear-gradient(top , #aaa, #999) repeat scroll 0 0 #999;
 }

+/* standard shadow */
+div.lichess_chat,
+div.undertable,
+div.lichess_board_wrap
+{
+  box-shadow: 0 0 7px #d0d0d0;
+}
+
 div.checkmateFen {
  float: left;
  width: 220px;
--- a/public/stylesheets/dark.css
+++ b/public/stylesheets/dark.css
@ -0,0 +1,190 @@
+body.dark {
+  background: #1a1a1a url(../images/head_bg_dark.png) top left repeat-x;
+  color: #a0a0a0;
+}
+
+body.dark a, a:visited {
+  color: #a0a0a0;
+}
+
+body.dark input,
+body.dark textarea {
+  background: #000;
+  color: #d0d0d0;
+}
+
+/* standard shadow */
+body.dark div.lichess_chat,
+body.dark div.undertable,
+body.dark div.lichess_board_wrap,
+body.dark div.lichess_table .lichess_button,
+body.dark div.lichess_goodies div.box,
+body.dark div.lichess_table,
+body.dark div.game_more,
+body.dark div.clock,
+body.dark #GameText,
+body.dark #GameBoard table.boardTable
+{
+  box-shadow: 0 0 5px #505050;
+}
+
+body.dark #top,
+body.dark #nb_connected_players,
+body.dark div.lichess_chat_top,
+body.dark div.lichess_chat ol,
+body.dark div.undertable_top,
+body.dark div.undertable_inner,
+body.dark div.lichess_table .lichess_button,
+body.dark div.lichess_chat form input,
+body.dark div.lichess_board_wrap,
+body.dark a.translation_call,
+body.dark div.hooks,
+body.dark div.hooks table,
+body.dark div.hooks td.action,
+body.dark div.lichess_bot td,
+body.dark div.footer_wrap,
+body.dark div.game_config .optional_config,
+body.dark .ui-state-default,
+body.dark .ui-widget-content,
+body.dark div.lichess_goodies div.box,
+body.dark div.lichess_table,
+body.dark div.lichess_separator,
+body.dark div.game_more,
+body.dark div.game_extra,
+body.dark div.clock,
+body.dark .button,
+body.dark #GameText,
+body.dark #GameBoard table.boardTable
+{
+  border-color: #4a4a4a;
+}
+
+body.dark .ui-slider {
+  background-color: #505050;
+}
+
+body.dark #site_title, 
+body.dark #site_baseline {
+  color: #808080;
+}
+body.dark #site_title span.extension {
+  color: #707070;
+}
+
+body.dark #top span.new_messages {
+  background: #707070;
+}
+
+body.dark div.anon_chat a.user_link {
+  color: #707070;
+}
+
+body.dark div.hooks_wrap {
+  box-shadow: 0 0 20px #444;
+  background: rgba(10,10,10,0.8);
+  background: -moz-linear-gradient(top, rgba(33,33,33,0.9) 0%, rgba(15,15,15,0.5) 100%);
+  background: -webkit-linear-gradient(top, rgba(33,33,33,0.9) 0%,rgba(15,15,15,0.5) 100%);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(33,33,33,0.9)), to(rgba(15,15,15,0.5)));
+  background: -ms-linear-gradient(top, rgba(33,33,33,0.9) 0%,rgba(15,15,15,0.5) 100%);
+  background: -o-linear-gradient(top, rgba(33,33,33,0.9) 0%,rgba(15,15,15,0.5) 100%);
+}
+
+body.dark div.lichess_bot td {
+  background: #000;
+}
+body.dark div.lichess_bot tr:nth-child(even) td {
+  background: #202020;
+}
+body.dark div.lichess_bot tr:hover td {
+  background: #303030;
+}
+body.dark div.new_posts li span {
+  color: #808080;
+}
+
+body.dark div.lichess_overboard {
+  background: #000;
+  box-shadow: 0 0 20px #d0d0d0;
+}
+body.dark div.game_config .optional_config {
+  background: #303030;
+}
+
+body.dark span.board_mark {
+  color: #808080;
+}
+
+body.dark #GameText {
+  background: #202020;
+}
+body.dark #GameText tr:nth-child(even) {
+  background: #000;
+}
+body.dark #GameText a.move {
+  color: #d0d0d0;
+}
+
+body.dark div.footer_wrap {
+  background: #303030;
+}
+
+/* soft inactive gradient */
+body.dark #top, 
+body.dark div.lichess_chat_top, 
+body.dark div.undertable_top, 
+body.dark .button, 
+body.dark .button:visited, 
+body.dark .ui-state-default, 
+body.dark div.content_box_top, 
+body.dark div.hooks tr, 
+body.dark a.translation_call {
+  background: #404040;
+  color: #b0b0b0;
+  background: -moz-linear-gradient(center top , #404040, #202020) repeat scroll 0 0 #404040;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#404040), to(#202020));
+  background: -webkit-linear-gradient(top , #404040, #202020) repeat scroll 0 0 #404040;
+  background: -ms-linear-gradient(top , #404040, #202020) repeat scroll 0 0 #404040;
+  background: -o-linear-gradient(top , #404040, #202020) repeat scroll 0 0 #404040;
+  background: linear-gradient(top , #404040, #202020) repeat scroll 0 0 #404040;
+}
+/* strong inactive gradient */
+body.dark div.hooks td.action {
+  background: #606060;
+  background: -moz-linear-gradient(center top , #606060, #000) repeat scroll 0 0 #606060;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#606060), to(#000));
+  background: -webkit-linear-gradient(top , #606060, #000) repeat scroll 0 0 #606060;
+  background: -ms-linear-gradient(top , #606060, #000) repeat scroll 0 0 #606060;
+  background: -o-linear-gradient(top , #606060, #000) repeat scroll 0 0 #606060;
+  background: linear-gradient(top , #606060, #000) repeat scroll 0 0 #606060;
+}
+/* active gradient */
+body.dark #top a.goto_nav.active, 
+body.dark .button.active, 
+body.dark .button:hover, 
+body.dark .ui-state-active, 
+body.dark .ui-widget-header, 
+body.dark div.pagination span.current, 
+body.dark a.goto_nav span.new_messages.unread, 
+body.dark div.hooks td.action:hover, 
+body.dark div.hooks table.empty_table tr:hover, 
+body.dark div.progressbar.flashy div {
+  color: #fff;
+  background: #d85000;
+  background: -moz-linear-gradient(center top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f49c00), to(#d85000));
+  background: -webkit-linear-gradient(top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
+  background: -ms-linear-gradient(top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
+  background: -o-linear-gradient(top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
+  background: linear-gradient(top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
+}
+/* current gradient */
+body.dark #top a.goto_nav.current {
+  color: #fff;
+  background: #808080;
+  background: -moz-linear-gradient(center top , #808080, #606060) repeat scroll 0 0 #808080;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#606060));
+  background: -webkit-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
+  background: -ms-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
+  background: -o-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
+  background: linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
+}
--- a/public/stylesheets/opening.css
+++ b/public/stylesheets/opening.css
@ -70,20 +70,20 @@ div.game_config div.color_submits button.random span {
  background-position: 0 -102px;
 }
 div.hooks_wrap {
-    position: absolute;
-    width: 384px;
-    height: 384px;
-    top: 51px;
-    left: 52px;
-    padding: 12px;
-    border-radius: 3px;
-    box-shadow: 0 0 20px #444;
-    background: rgba(245,245,245,0.8);
-    background: -moz-linear-gradient(top, rgba(212,212,212,0.9) 0%, rgba(240,240,240,0.5) 100%);
-    background: -webkit-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(212,212,212,0.9)), to(rgba(240,240,240,0.5)));
-    background: -ms-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
-    background: -o-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
+  position: absolute;
+  width: 384px;
+  height: 384px;
+  top: 51px;
+  left: 52px;
+  padding: 12px;
+  border-radius: 3px;
+  box-shadow: 0 0 20px #444;
+  background: rgba(245,245,245,0.8);
+  background: -moz-linear-gradient(top, rgba(212,212,212,0.9) 0%, rgba(240,240,240,0.5) 100%);
+  background: -webkit-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(212,212,212,0.9)), to(rgba(240,240,240,0.5)));
+  background: -ms-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
+  background: -o-linear-gradient(top, rgba(212,212,212,0.9) 0%,rgba(240,240,240,0.5) 100%);
 }
 div.hooks_wrap.large {
  height: 512px;
@ -91,59 +91,55 @@ div.hooks_wrap.large {
 }

 div.hooks_wrap.hidden {
-    display: none;
+  display: none;
 }
 div.hooks {
-    border: 1px solid #bababa;
-    border-top: 0
+  border: 1px solid #bababa;
+  border-top: 0
 }
 div.hooks table {
-    width: 100%;
-    max-height: 424px;
-    overflow: hidden;
-    text-align: left;
-    border-collapse: collapse;
-    background: none;
-    color: #666;
-    border-top: 1px solid #bababa;
-}
-div.hooks table a {
-    color: #666;
+  width: 100%;
+  max-height: 424px;
+  overflow: hidden;
+  text-align: left;
+  border-collapse: collapse;
+  background: none;
+  border-top: 1px solid #bababa;
 }
 div.hooks table.empty_table {
-    margin-top: 152px;
+  margin-top: 152px;
 }
 div.hooks td {
-    padding: 0 8px 0 12px;
-    height: 64px;
-    margin: 0;
+  padding: 0 8px 0 12px;
+  height: 64px;
+  margin: 0;
 }
 div.hooks tr:last-child td {
-    border-bottom: none;
+  border-bottom: none;
 }
 div.hooks table.empty_table tr {
-    text-align: center;
-    cursor: pointer;
+  text-align: center;
+  cursor: pointer;
 }
 div.hooks table.empty_table td {
-    padding: 0;
-    height: 80px;
+  padding: 0;
+  height: 80px;
 }
 div.hooks td.color {
-    width: 24px;
-    padding-right: 0;
+  width: 24px;
+  padding-right: 0;
 }
 div.hooks td.color span {
-    height: 24px;
-    width: 24px;
-    display: block;
-    background: url(../images/sprite_color_24.png) no-repeat;
+  height: 24px;
+  width: 24px;
+  display: block;
+  background: url(../images/sprite_color_24.png) no-repeat;
 }
 div.hooks td.color span.black {
-    background-position: 0 -24px;
+  background-position: 0 -24px;
 }
 div.hooks td.color span.random {
-    background-position: 0 -49px;
+  background-position: 0 -49px;
 }
 div.hooks span.elorange {
  display: block;
@ -157,10 +153,10 @@ div.hooks a.user_link.engine {
  color: #cc7070;
 }
 div.hooks td.action {
-    cursor: pointer;
-    border-left: 1px solid #cacaca;
-    width: 63px;
-    padding: 0;
+  cursor: pointer;
+  border-left: 1px solid #cacaca;
+  width: 63px;
+  padding: 0;
 }
 div.hooks td.action.empty {
  cursor: default;
@ -168,31 +164,30 @@ div.hooks td.action.empty {
 }
 div.hooks a.cancel,
 div.hooks a.join {
-    height: 32px;
-    width: 31px;
-    display: block;
-    padding: 12px 14px;
+  height: 32px;
+  width: 31px;
+  display: block;
+  padding: 12px 14px;
 }
 div.hooks a.cancel {
-    background: url(../images/close24.png) +16px no-repeat;
+  background: url(../images/close24.png) +16px no-repeat;
 }
 div.hooks a.join {
-    background: url(../images/play32.png) +16px no-repeat;
+  background: url(../images/play32.png) +16px no-repeat;
 }
 div.hooks tr.my_hook {
-    color: #405090;
-    background: #c9dbee;
+  color: #405090;
+  background: #c9dbee;
 }

 div.hooks a.user_link {
-    background: transparent;
-    padding-left: 0;
+  background: transparent;
+  padding-left: 0;
 }

 div.undertable {
  width: 514px;
  font-size: 11px;
-  box-shadow: 0 0 7px #d0d0d0;
  margin-top: 15px;
 }
 div.undertable_top {
@ -217,6 +212,14 @@ div.undertable_inner {
  height: 163px;
  overflow:hidden;
 }
+div.undertable a.user_link {
+  text-decoration: none;
+  font-weight: bold;
+  color: #999;
+}
+div.undertable a.user_link:hover {
+  text-decoration: underline;
+}

 div.lichess_bot table {
  width: 100%;
@ -233,16 +236,6 @@ div.lichess_bot td {
 div.lichess_bot tr:nth-child(even) td {
  background: #f0f0f0;
 }
-div.lichess_bot a.user_link {
-  text-decoration: none;
-  font-weight: bold;
-  color: #999;
-  background: transparent;
-  padding-left: 0;
-}
-div.lichess_bot a.user_link:hover {
-  text-decoration: underline;
-}
 div.lichess_bot a.watch {
  display: block;
  width: 24px;
@ -270,13 +263,3 @@ div.new_posts li span {
  margin-right: 6px;
  color: #aaa;
 }
-div.new_posts a.user_link {
-  padding: 0;
-  background: transparent;
-  color: #aaa;
-  text-decoration: none;
-  font-weight: bold;
-}
-div.new_posts a.user_link:hover {
-  text-decoration: underline;
-}
--- a/5
+++ b/5
@ -15,4 +15,9 @@ cheater slash timeline
 best game(s) to watch
 use twitter tooltip instead of tipsy http://twitter.github.com/bootstrap/javascript.html#tooltip
 make some elo inflation
+optional darker background http://en.lichess.org/forum/lichess-feedback/new-options#2 
+volume control
+board on side
+check(mate) sound
+mute player = no game room either