better subnav resp, team wip

app/views/base/layout.scala

@@ -271,7 +271,7 @@ object layout {
   object siteHeader {
 
     private val topnavToggle = spaceless("""
-<input type="checkbox" id="topnav-toggle" class="topnav-toggle">
+<input type="checkbox" id="topnav-toggle" class="topnav-toggle" aria-label="Navigation">
 <label for="topnav-toggle" class="topnav-mask"></label>
 <label for="topnav-toggle" class="topnav-toggle-label hamburger"><span></span></label>""")
 
@@ -279,7 +279,7 @@ object layout {
       a(id := "reconnecting", cls := "link text", dataIcon := "B")(trans.reconnecting.frag())
 
     private def reports(implicit ctx: Context) = isGranted(_.SeeReport) option
-      a(cls := "link text data-count", href := routes.Report.list, dataCount := reportNbOpen, dataIcon := "")
+      a(cls := "link text data-count", title := "Moderation", href := routes.Report.list, dataCount := reportNbOpen, dataIcon := "")
 
     private def teamRequests(implicit ctx: Context) = ctx.teamNbRequests > 0 option
       a(cls := "link data-count", href := routes.Team.requests, dataCount := ctx.teamNbRequests)(

app/views/dev/cli.scala.html

@@ -8,7 +8,7 @@ title = title,
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("cli").toHtml
+  @mod.menu("cli").toHtml
   <div id="dev-cli" class="page-menu__content box box-pad">
     <h1>@title</h1>
     <p>

app/views/dev/settings.scala.html

@@ -7,7 +7,7 @@ title = title,
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("setting").toHtml
+  @mod.menu("setting").toHtml
   <div id="settings" class="page-menu__content box box-pad">
     <h1>@title</h1>
     <p>Tread lightly.</p>

app/views/event/layout.scala.html

@@ -11,7 +11,7 @@ moreCss = responsiveCssTag("mod.misc"),
 responsive = true,
 moreJs = moreJs) {
 <main class="page-menu">
-  @mod.menu.nav("event").toHtml
+  @mod.menu("event").toHtml
   @body
 </main>
 }.toHtml

app/views/irwin/dashboard.scala.html

@@ -12,7 +12,7 @@ title = "Irwin dashboard",
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("irwin").toHtml
+  @mod.menu("irwin").toHtml
   <div class="irwin page-menu__content box">
     <div class="box__top">
       <h1 class="box__top__title">

app/views/mod/chatPanic.scala.html

@@ -7,7 +7,7 @@ title = title,
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("panic").toHtml
+  @mod.menu("panic").toHtml
   <div id="chat-panic" class="page-menu__content box box-pad">
     <h1>@title</h1>
     <p>

app/views/mod/emailConfirm.scala.html

@@ -16,7 +16,7 @@ moreCss = responsiveCssTag("mod.misc"),
 responsive = true,
 moreJs = js) {
 <main class="page-menu">
-  @mod.menu.nav("email").toHtml
+  @mod.menu("email").toHtml
   <div id="mod-confirm" class="page-menu__content box box-pad">
     <h1>Confirm a user email</h1>
     <p>

app/views/mod/gamify/index.scala.html

@@ -19,7 +19,7 @@ title = title,
 moreCss = responsiveCssTag("mod.gamify"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("gamify").toHtml
+  @mod.menu("gamify").toHtml
   <div id="mod-gamify" class="page-menu__content index box">
     <h1>@title</h1>
     <div class="champs">

app/views/mod/gamify/period.scala.html

@@ -7,7 +7,7 @@ title = title,
 moreCss = responsiveCssTag("mod.gamify"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("gamify").toHtml
+  @mod.menu("gamify").toHtml
   <div id="mod-gamify" class="page-menu__content box">
     <h1>
       <a href="@routes.Mod.gamify" data-icon="I"></a>

app/views/mod/layout.scala.html

@@ -1,9 +0,0 @@
-@(title: String, active: String, moreCss: Html = emptyHtml, moreJs: Html = emptyHtml)(body: Html)(implicit ctx: Context)
-
-@base.layout(
-title = title,
-moreJs = moreJs,
-moreCss = moreCss,
-menu = Some(mod.menu.content(active))) {
-@body
-}.toHtml

app/views/mod/log.scala.html

@@ -7,7 +7,7 @@ title = title,
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("log").toHtml
+  @mod.menu("log").toHtml
   <div id="modlog_table" class="page-menu__content box">
     <h1>@title</h1>
     <table class="slist slist-pad">

app/views/mod/menu.scala

@@ -8,7 +8,7 @@ import controllers.routes
 
 object menu {
 
-  def content(active: String)(implicit ctx: Context) = frag(
+  def apply(active: String)(implicit ctx: Context) = st2.nav(cls := "page-menu__menu subnav")(
     isGranted(_.SeeReport) option
       a(cls := active.active("report"), href := routes.Report.list)("Reports"),
     isGranted(_.ChatTimeout) option
@@ -31,7 +31,7 @@ object menu {
       a(cls := active.active("irwin"), href := routes.Irwin.dashboard)("Irwin dashboard"),
     isGranted(_.Shadowban) option
       a(cls := active.active("panic"), href := routes.Mod.chatPanic)(
-        "Chat Panic ",
+        "Chat Panic: ",
         strong(if (isChatPanicEnabled) "ON" else "OFF")
       ),
     isGranted(_.Settings) option
@@ -39,7 +39,4 @@ object menu {
     isGranted(_.Cli) option
       a(cls := active.active("cli"), href := routes.Dev.cli)("CLI")
   )
-
-  def nav(active: String)(implicit ctx: Context) =
-    st2.nav(cls := "page-menu__menu subnav")(content(active))
 }

app/views/mod/publicChat.scala.html

@@ -7,7 +7,7 @@ moreCss = responsiveCssTag("mod.public-chats"),
 moreJs = jsTag("public-chat.js"),
 responsive = true)  {
 <main class="page-menu">
-  @mod.menu.nav("public-chat").toHtml
+  @mod.menu("public-chat").toHtml
   <div id="communication" class="page-menu__content public_chat box box-pad">
     <h2>Tournament Chats</h2>
     <div class="player_chats">

app/views/mod/search.scala.html

@@ -5,7 +5,7 @@ title = "Search users",
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("search").toHtml
+  @mod.menu("search").toHtml
   <div id="mod-search" class="page-menu__content box box-pad">
     <h1>Search users</h1>
     <form class="search" action="@routes.Mod.search" method="GET">

app/views/practice/config.scala.html

@@ -5,7 +5,7 @@ title = "Practice structure",
 moreCss = responsiveCssTag("mod.misc"),
 responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("practice").toHtml
+  @mod.menu("practice").toHtml
   <div class="practice_config page-menu__content box box-pad">
     <h1>Practice config</h1>
     <div class="both">

app/views/report/list.scala.html

@@ -12,7 +12,7 @@
 
 @base.layout(title = title, moreCss = responsiveCssTag("mod.report"), responsive = true) {
 <main class="page-menu">
-  @mod.menu.nav("report").toHtml
+  @mod.menu("report").toHtml
   <div id="report_list" class="page-menu__content box">
     <div class="header">
       <i class="icon"></i>

app/views/team/bits.scala

@@ -0,0 +1,69 @@
+package views.html
+
+import play.twirl.api.Html
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.paginator.Paginator
+
+import controllers.routes
+
+object bits {
+
+  def menu(currentTab: Option[String])(implicit ctx: Context) = ~currentTab |> { tab =>
+    st2.nav(cls := "page-menu__menu subnav")(
+      (ctx.teamNbRequests > 0) option
+        a(cls := tab.active("requests"), href := routes.Team.requests())(
+          ctx.teamNbRequests, " join requests"
+        ),
+      ctx.me.??(_.canTeam) option
+        a(cls := tab.active("mine"), href := routes.Team.mine())(
+          trans.myTeams.frag()
+        ),
+      a(cls := tab.active("all"), href := routes.Team.all())(
+        trans.allTeams.frag()
+      ),
+      ctx.me.??(_.canTeam) option
+        a(cls := tab.active("form"), href := routes.Team.form())(
+          trans.newTeam.frag()
+        )
+    )
+  }
+
+  def teamTr(t: lila.team.Team)(implicit ctx: Context) =
+    tr(cls := "paginated")(
+      td(cls := "subject")(
+        a(cls := "team-name", href := routes.Team.show(t.id))(
+          iconTag("f")(cls := List(
+            "is-green" -> myTeam(t.id),
+            "text" -> true
+          )),
+          t.name
+        ),
+        shorten(t.description, 200)
+      ),
+      td(cls := "info")(
+        p(trans.nbMembers.pluralFrag(t.nbMembers, t.nbMembers.localize))
+      )
+    )
+
+  def all(teams: Paginator[lila.team.Team])(implicit ctx: Context) = team.list(
+    name = trans.teams.txt(),
+    teams = teams,
+    next = teams.nextPage map { n => routes.Team.all(n) },
+    tab = "all"
+  )
+
+  def layout(
+    title: String,
+    openGraph: Option[lila.app.ui.OpenGraph] = None
+  )(body: Html)(implicit ctx: Context) =
+    base.layout(
+      title = title,
+      moreCss = responsiveCssTag("team"),
+      moreJs = infiniteScrollTag,
+      openGraph = openGraph,
+      responsive = true
+    )(body)
+}

app/views/team/form.scala.html

@@ -1,12 +1,10 @@
 @(form: Form[_], captcha: lila.common.Captcha)(implicit ctx: Context)
 @import lila.app.ui.ScalatagsTwirlForm._
 
-@team.layout(
-title = trans.newTeam.txt(),
-currentTab = "form".some,
-formCss = true) {
-<div id="team">
-  <div class="content_box small_box team_box">
+@bits.layout(title = trans.newTeam.txt()) {
+<main class="page-menu page-small">
+  @bits.menu("form".some).toHtml
+  <div id="team" class="page-menu__content box box-pad">
     <h1>@trans.newTeam()</h1>
     <form class="form3" action="@routes.Team.create()" method="POST">
       @form3.group(form("name"), trans.name.frag())(form3.input(_))
@@ -22,5 +20,5 @@ formCss = true) {
       }
     </form>
   </div>
-</div>
-}
+</main>
+}.toHtml

app/views/team/list.scala.html

@@ -1,29 +1,32 @@
 @(name: String, teams: Paginator[lila.team.Team], next: Option[Call], tab: String, search: String = "")(implicit ctx: Context)
 
-@title = @{ "%s - page %d".format(name, teams.currentPage) }
-
-@team.layout(
-title = title,
-currentTab = tab.some) {
-<div id="team" class="content_box team_box no_padding">
-  <form class="search" action="@routes.Team.search()">
-    <input name="text" value="@search" placeholder="@trans.search()" />
-  </form>
-  <h1>@name</h1>
-  <table class="slist">
-    @if(teams.nbResults > 0) {
-    <tbody class="infinitescroll">
-      @next.map { n =>
-      <tr><th class="pager none">
-          <a rel="next" href="@n">Next</a>
-      </th></tr>
-      <tr></tr>
+@bits.layout(title = "%s - page %d".format(name, teams.currentPage)) {
+<main class="page-menu">
+  @bits.menu("all".some).toHtml
+  <div id="team" class="page-menu__content box">
+    <div class="box__top">
+      <h1 class="box__top__title">@name</h1>
+      <div class="box__top__actions">
+        <form class="search" action="@routes.Team.search()">
+          <input name="text" value="@search" placeholder="@trans.search()" />
+        </form>
+      </div>
+    </div>
+    <table class="slist slist-pad">
+      @if(teams.nbResults > 0) {
+      <tbody class="infinitescroll">
+        @next.map { n =>
+        <tr><th class="pager none">
+            <a rel="next" href="@n">Next</a>
+        </th></tr>
+        <tr></tr>
+        }
+        @teams.currentPageResults.map(x => team.teamTr(x))
+      </tbody>
+      } else {
+      @team.noTeam()
       }
-      @teams.currentPageResults.map(x => team.teamTr(x))
-    </tbody>
-    } else {
-    @team.noTeam()
-    }
-  </table>
-</div>
-}
+    </table>
+  </div>
+</main>
+}.toHtml

app/views/team/mine.scala.html

@@ -1,16 +1,17 @@
 @(teams: List[lila.team.Team])(implicit ctx: Context)
 
-@team.layout(
-title = trans.myTeams.txt(),
-currentTab = "mine".some) {
-<div id="team" class="content_box team_box no_padding">
-  <h1>@trans.myTeams()</h1>
-  <table class="slist">
-  @if(teams.size > 0) {
-  <tbody>@teams.map(x => team.teamTr(x))</tbody>
-    } else {
-    @team.noTeam()
-    }
-  </table>
-</div>
-}
+@bits.layout(title = trans.myTeams.txt()) {
+<main class="page-menu">
+  @bits.menu("mine".some).toHtml
+  <div id="team" class="page-menu__content box">
+    <h1>@trans.myTeams()</h1>
+    <table class="slist slist-pad">
+      @if(teams.size > 0) {
+      <tbody>@teams.map(x => team.teamTr(x))</tbody>
+      } else {
+      @team.noTeam()
+      }
+    </table>
+  </div>
+</main>
+}.toHtml

app/views/tournament/crud/layout.scala.html

@@ -12,7 +12,7 @@ moreCss = responsiveCssTag("mod.misc"),
 responsive = true,
 moreJs = moreJs) {
 <main class="page-menu">
-  @mod.menu.nav("tour").toHtml
+  @mod.menu("tour").toHtml
   @body
 </main>
 }.toHtml

public/stylesheets/team.css

@@ -1,154 +0,0 @@
-#team .form3 {
-  margin-top: 2em;
-}
-#team form.search {
-  float: right;
-  margin: 20px;
-}
-#team table.slist td {
-  padding-top: 1em;
-  padding-bottom: 1em;
-  overflow-wrap: break-word;
-  max-width: 674px;
-}
-#team table.slist a.team-name {
-  font-size: 1.3em;
-  display: block;
-  margin-bottom: 4px;
-  padding-bottom: 5px;
-}
-#team table.slist a.team-name span.team-icon {
-  float: left;
-  margin-top: 4px;
-}
-#team table.slist .info {
-  font-size: 0.9em;
-  white-space: nowrap;
-}
-#team .team-content {
-  overflow: hidden;
-}
-#team.team_show .lichess_title {
-  font-size: 1.8em;
-}
-#team.team_show .lichess_title span {
-  color: #909090;
-  font-size: 0.8em;
-}
-#team.team_show .content_box_top {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
-}
-#team.team_show .content_box_top .righty {
-  float: right;
-  margin-right: 20px;
-  line-height: 30px;
-}
-#team .team-left {
-  float: left;
-  width: 280px;
-  font-size: 1.2em;
-  border-right: 1px solid #ccc;
-}
-#team .team-left h2 {
-  font-size: 1.0em;
-  font-weight: bold;
-  padding: 0 0 5px 25px;
-  border-bottom: 1px solid #ccc;
-}
-#team .team-left .infos {
-  margin: 20px 0 20px 25px;
-}
-#team .team-right {
-  margin-left: 280px;
-  border-left: 1px solid #ccc;
-}
-#team .description {
-  font-size: 1.2em;
-  margin: 20px 0 20px 20px;
-}
-#team .best_players {
-  margin-bottom: 20px;
-}
-#team .userlist > li,
-#team .userlist > div.paginated {
-  padding: 5px 0 5px 25px;
-}
-#team .actions {
-  margin-left: 20px;
-}
-#team .forum {
-  margin-top: 30px;
-  width: 100%;
-}
-#team .forum h2 {
-  font-size: 1.2em;
-  font-weight: bold;
-  border-bottom: 1px solid #ccc;
-  padding: 0 0 5px 20px;
-}
-#team .forum li {
-  padding: 20px 10px 20px 20px;
-}
-#team .forum li:nth-child(odd) {
-  background: none repeat scroll 0 0 #F4F4F4;
-}
-#team .forum a.user_link {
-  font-weight: bold;
-  margin-right: 6px;
-  color: #aaa;
-}
-#team .forum time {
-  font-size: 0.8em;
-}
-#team .forum .meta > * {
-  display: block;
-  float: left;
-  margin-right: 1em;
-}
-#team .forum a.more {
-  display: block;
-  text-align: right;
-  margin: 10px 10px 0 0;
-}
-#team table.requests form {
-  margin: 0;
-}
-#team table.requests {
-  margin: 0;
-}
-#team table.requests.all {
-  margin-bottom: 20px;
-}
-#team table.requests.for-team {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-}
-#team table.requests th {
-  padding: 0.5em;
-  text-align: center;
-  font-size: 1.4em;
-}
-#team table.requests.all td {
-  padding: 2.3em 1em;
-}
-#team table.requests .user_link {
-  margin-bottom: 0.7em;
-}
-#team table.requests .process {
-  white-space: nowrap;
-}
-#team table.requests button {
-  font-size: 0.8em;
-  display: inline;
-  margin-left: 5px;
-}
-#team .button.small {
-  font-size: 12px;
-}
-#team .undertitle {
-  margin-top: 1.5em;
-}
-#team .kick .button {
-  margin-bottom: 5px;
-}

ui/build

@@ -14,7 +14,7 @@ mkdir -p public/compiled
 ts_apps1="common chess"
 ts_apps2="ceval game tree chat nvui"
 apps="site chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul perfStat dasher"
-css_apps="site dasher tournament"
+css_apps="site dasher challenge notify tournament team"
 
 if [ $mode == "upgrade" ]; then
   yarn upgrade --non-interactive

ui/challenge/css/challenge.scss

@@ -5,7 +5,7 @@
 
   & .empty {
     @extend %dropdown-shadow;
-    background: $c-header-dropdown-bg;
+    background: $c-bg-header-dropdown;
     padding: 2rem 0;
   }
 
@@ -16,7 +16,7 @@
   }
   & .challenge {
     @extend %box-neat;
-    background: $c-header-dropdown-bg;
+    background: $c-bg-header-dropdown;
     margin-bottom: 5px;
     transition: height 130ms;
     transition-delay: 100ms;

ui/common/css/_lichess.scss

@@ -11,6 +11,7 @@
 @import 'base/util';
 
 @import 'layout/base';
+@import 'layout/page-menu';
 
 @import 'vendor/chessground';
 
@@ -21,3 +22,4 @@
 @import 'component/user-link';
 @import 'component/blind-mode';
 @import 'component/friends';
+@import 'component/power-tip';

ui/common/css/component/_captcha.scss

@@ -0,0 +1,40 @@
+.form3 .captcha {
+  display: flex;
+  margin-top: 2em;
+  &.is-invalid:not(.success) {
+    border: 1px solid $c-error;
+  }
+  & .mini_board {
+    width: 250px;
+    cursor: pointer;
+  }
+  & .captcha-explanation {
+    font-size: 90%;
+    margin-left: 1rem;
+    overflow: hidden;
+  }
+  &.is-invalid .captcha-explanation {
+    padding: 1em;
+  }
+  & .captcha-explanation .form-label {
+    display: block;
+    width: 310px;
+  }
+  & .captcha-explanation .result {
+    display: none;
+    height: 48px;
+    line-height: 48px;
+    vertical-align: middle;
+    font-weight: bold;
+  }
+  & .success {
+    color: $c-good;
+  }
+  & .failure {
+    color: $c-error;
+  }
+  &.success .success,
+  &.failure .failure {
+    display: block;
+  }
+}

ui/common/css/component/_form3.scss

@@ -87,48 +87,6 @@
     border-top: $border;
   }
 
-  /* CAPTCHA */
-  & .captcha {
-    display: flex;
-    margin-top: 2em;
-    &.is-invalid:not(.success) {
-      border: 1px solid $c-error;
-    }
-    & .mini_board {
-      width: 250px;
-      cursor: pointer;
-    }
-    & .captcha-explanation {
-      font-size: 90%;
-      margin-left: 1rem;
-      overflow: hidden;
-    }
-    &.is-invalid .captcha-explanation {
-      padding: 1em;
-    }
-    & .captcha-explanation .form-label {
-      display: block;
-      width: 310px;
-    }
-    & .captcha-explanation .result {
-      display: none;
-      height: 48px;
-      line-height: 48px;
-      vertical-align: middle;
-      font-weight: bold;
-    }
-    & .success {
-      color: $c-good;
-    }
-    & .failure {
-      color: $c-error;
-    }
-    &.success .success,
-    &.failure .failure {
-      display: block;
-    }
-  }
-
   /* VENDORS */
   & .twitter-typeahead {
     width: 100%;

ui/common/css/component/_power-tip.scss

@@ -0,0 +1,124 @@
+#powerTip,
+#miniGame {
+  width: 256px;
+  min-height: 3em;
+  cursor: default;
+  background-color: $c-bg-power-tip;
+  border: $border;
+  display: none;
+  position: absolute;
+  z-index: 900000;
+  box-shadow: 0 0.5px 5px rgba(0, 0, 0, 0.25), 0 0.5px 8px rgba(0, 0, 0, 0.15);
+}
+#miniGame {
+  min-height: 262px;
+}
+#powerTip signal {
+  float: right;
+  margin-right: 2px;
+}
+#powerTip > .title {
+  height: 62px;
+  padding: 5px 3px;
+  border-bottom: $border;
+}
+#powerTip > .title a.user_link {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#powerTip a.mini_board {
+  border-width: 0 0 1px 0;
+}
+#powerTip .mod_info_box {
+  position: relative;
+  padding: 5px;
+  background: #888;
+  color: #eee;
+  white-space: nowrap;
+}
+#powerTip .mod_marks {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 3px 5px;
+  background: $c-bad;
+}
+#powerTip .mod_marks i {
+  padding: 0px;
+}
+#powerTip .country {
+  float: right;
+  font-size: 0.9em;
+  padding-right: 3px;
+}
+#powerTip .ratings {
+  text-align: center;
+  margin-top: 3px;
+}
+#powerTip .ratings > span {
+  padding: 2px 3px;
+  width: 20%;
+  text-align: left;
+}
+#powerTip > .actions {
+  width: 100%;
+  display: flex;
+}
+#powerTip > .actions a {
+  flex: 0 0 auto;
+  margin: 0;
+  border-radius: 0;
+  font-size: 0.9em;
+  letter-spacing: -1px;
+  text-align: center;
+  padding: 0 12px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  border-width: 0 1px 0 0;
+}
+#powerTip > .actions a.relation {
+  flex: 1 1 100%;
+  border-right: 0;
+}
+#powerTip > .actions i {
+  font-style: normal;
+}
+#powerTip > .actions i::before {
+  font-size: 1.5em;
+}
+#powerTip .confirm {
+  margin-top: 10px;
+  width: 100%;
+  text-align: center;
+}
+#powerTip > .game_legend {
+  text-align: center;
+  border-bottom: $border;
+  padding: 3px 0;
+}
+#powerTip > .score {
+  display: block;
+  font-size: 1.1em;
+  text-align: center;
+  border-top: $border;
+  padding: 3px 0;
+}
+#powerTip > .info .title {
+  display: block;
+  padding: 10px 15px;
+  border-bottom: $border;
+  text-align: center;
+  text-transform: uppercase;
+}
+#powerTip > .info .content {
+  display: block;
+  padding: 15px 15px;
+}
+#powerTip .spinner {
+  margin: 20px auto;
+}
+#miniGame .spinner {
+  margin: 82px auto 0 auto;
+}

ui/common/css/component/_subnav.scss

@@ -2,19 +2,20 @@
 
   @include breakpoint($mq-subnav-top) {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
-    grid-gap: 1px;
+    grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
+    grid-gap: 3px;
 
     background: $c-bg-page;
-    @include box-neat;
 
     & a {
+      @include box-neat;
       color: $c-font;
+      white-space: nowrap;
+      overflow: hidden;
       padding: 0.6rem 0.4rem 0.6rem 0.8rem;
       display: flex;
       align-items: center;
       background: $c-bg-high;
-      @include box-radius;
       &:hover {
         color: $c-link;
       }

ui/common/css/component/header/_buttons.scss

@@ -30,20 +30,20 @@
     position: absolute;
     right: 0;
     top: var(--dropdown-top);
-    background: $c-header-dropdown-bg;
+    background: $c-bg-header-dropdown;
     z-index: 3;
     & .initiating .spinner {
       padding: 10px 30px;
     }
     & a,
     & button {
-      color: $c-header-dropdown-color;
+      color: $c-header-dropdown;
     }
   }
   & .shown {
     & .toggle {
-      color: $c-header-dropdown-color;
-      background: $c-header-dropdown-bg;
+      background: $c-bg-header-dropdown;
+      color: $c-header-dropdown;
     }
     & .dropdown {
       display: block;

ui/common/css/component/header/_topnav-visible.scss

@@ -34,8 +34,8 @@
       &:active {
         & > a {
           height: var(--nav-section-hover);
-          background: $c-header-dropdown-bg;
-          color: $c-font-clear;
+          background: $c-bg-header-dropdown;
+          color: $c-header-dropdown;
           border-color: $c-primary;
         }
         & div {
@@ -47,7 +47,7 @@
       display: none;
       position: absolute;
       left: 0;
-      background: $c-header-dropdown-bg;
+      background: $c-bg-header-dropdown;
       width: 10rem;
       box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
       border-radius: 0 3px 3px 3px;
@@ -58,7 +58,7 @@
         @media (hover: none) {
           padding: .5rem .7rem;
         }
-        color: $c-header-dropdown-color;
+        color: $c-header-dropdown;
         &:hover {
           background: $c-primary;
           color: $c-primary-over;

ui/common/css/layout/_base.scss

@@ -25,3 +25,7 @@ main {
   display: grid;
   grid-gap: $block-gap $block-gap;
 }
+
+.page-small {
+  max-width: 900px;
+}

ui/common/css/theme/_dark.scss

@@ -48,8 +48,11 @@ $c-link-hover: c-clearer(saturate($c-primary, 100%), 25%);
 
 $c-bg-input: lighten($c-bg-page, 4%);
 
-$c-header-dropdown-bg: $c-bg-low;
-$c-header-dropdown-color: $c-font-clear;
+$c-bg-header-dropdown: $c-bg-low;
+$c-header-dropdown: $c-font-clear;
+
+$c-bg-power-tip: $c-bg-low;
+$c-power-tip: $c-font-clear;
 
 $c-border: hsl(0, 0%, 25%);
 $border: $border-width $border-style $c-border;

ui/common/css/theme/_default.scss

@@ -66,8 +66,11 @@ $c-border: hsl(0, 0%, 85%);
 
 $c-page-mask: hsla(0, 0, 0%, 0.5);
 
-$c-header-dropdown-bg: $c-bg-high;
-$c-header-dropdown-color: $c-font;
+$c-bg-header-dropdown: $c-bg-high;
+$c-header-dropdown: $c-font;
+
+$c-bg-power-tip: $c-bg-high;
+$c-power-tip: $c-font;
 
 $c-font-shadow: white;
 

ui/notify/css/_notify.scss

@@ -1,5 +1,6 @@
 #notify_app {
   width: 25rem;
+  max-width: 100vw;
   right: 0;
   border-radius: $box-radius-size 0 0 $box-radius-size;
 
@@ -22,7 +23,7 @@
   & .site_notification {
     display: flex;
     padding: .6rem 1rem;
-    background: $c-header-dropdown-bg;
+    background: $c-bg-header-dropdown;
     border-bottom: $border;
     position: relative;
     &:first-child {
@@ -39,13 +40,13 @@
       }
     }
     &.new {
-      background: mix($c-new, $c-header-dropdown-bg, 27%);
+      background: mix($c-new, $c-bg-header-dropdown, 27%);
       & i {
         color: $c-new;
         opacity: 0.7;
       }
       &:hover {
-        background: mix($c-new, $c-header-dropdown-bg, 36%);
+        background: mix($c-new, $c-bg-header-dropdown, 36%);
         & i {
           opacity: 1;
         }

ui/site/css/build/_mod.gamify.scss

@@ -1,4 +1,3 @@
 @import '../../../common/css/plugin';
-@import '../../../common/css/layout/page-menu';
 @import '../../../common/css/component/table-slist';
 @import '../mod/gamify';

ui/site/css/build/_mod.misc.scss

@@ -1,4 +1,3 @@
 @import '../../../common/css/plugin';
-@import '../../../common/css/layout/page-menu';
 @import '../../../common/css/component/table-slist';
 @import '../mod/misc';

ui/site/css/build/_mod.public-chats.scss

@@ -1,3 +1,2 @@
 @import '../../../common/css/plugin';
-@import '../../../common/css/layout/page-menu';
 @import '../mod/public-chats';

ui/site/css/build/_mod.report.scss

@@ -1,4 +1,3 @@
 @import '../../../common/css/plugin';
 @import '../../../common/css/component/table-slist';
-@import '../../../common/css/layout/page-menu';
 @import '../mod/report';

ui/site/css/build/_site.menu.scss

@@ -1,2 +0,0 @@
-@import '../../../common/css/lichess';
-@import '../../../common/css/layout/page-menu';

ui/site/src/main.js

@@ -315,7 +315,6 @@ lichess.topMenuIntent = function() {
         $toggle.one('mouseover click', function() {
           load();
         });
-        setTimeout(() => $toggle.trigger('click'), 10);
         var load = function(data) {
           if (booted) return;
           booted = true;

ui/team/css/_list.scss

@@ -0,0 +1,22 @@
+#team {
+  .slist {
+    & td {
+      padding-top: 1.2rem;
+      padding-bottom: 1.2rem;
+      overflow-wrap: break-word;
+    }
+    & .team-name {
+      font-size: 1.5em;
+      display: block;
+      margin-bottom: .3em;
+    }
+    & .team-name span.team-icon {
+      float: left;
+      margin-top: 4px;
+    }
+    & .info {
+      font-size: 0.9em;
+      white-space: nowrap;
+    }
+  }
+}

ui/team/css/_team.scss

@@ -0,0 +1,134 @@
+@import 'list';
+
+#team {
+  & .form3 {
+    margin-top: 2em;
+  }
+  & .team-content {
+    overflow: hidden;
+  }
+  &.team_show .lichess_title {
+    font-size: 1.8em;
+  }
+  &.team_show .lichess_title span {
+    color: #909090;
+    font-size: 0.8em;
+  }
+  &.team_show .content_box_top {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ccc;
+  }
+  &.team_show .content_box_top .righty {
+    float: right;
+    margin-right: 20px;
+    line-height: 30px;
+  }
+  & .team-left {
+    float: left;
+    width: 280px;
+    font-size: 1.2em;
+    border-right: 1px solid #ccc;
+  }
+  & .team-left h2 {
+    font-size: 1.0em;
+    font-weight: bold;
+    padding: 0 0 5px 25px;
+    border-bottom: 1px solid #ccc;
+  }
+  & .team-left .infos {
+    margin: 20px 0 20px 25px;
+  }
+  & .team-right {
+    margin-left: 280px;
+    border-left: 1px solid #ccc;
+  }
+  & .description {
+    font-size: 1.2em;
+    margin: 20px 0 20px 20px;
+  }
+  & .best_players {
+    margin-bottom: 20px;
+  }
+  & .userlist > li,
+  & .userlist > div.paginated {
+    padding: 5px 0 5px 25px;
+  }
+  & .actions {
+    margin-left: 20px;
+  }
+  & .forum {
+    margin-top: 30px;
+    width: 100%;
+  }
+  & .forum h2 {
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 1px solid #ccc;
+    padding: 0 0 5px 20px;
+  }
+  & .forum li {
+    padding: 20px 10px 20px 20px;
+  }
+  & .forum li:nth-child(odd) {
+    background: none repeat scroll 0 0 #F4F4F4;
+  }
+  & .forum a.user_link {
+    font-weight: bold;
+    margin-right: 6px;
+    color: #aaa;
+  }
+  & .forum time {
+    font-size: 0.8em;
+  }
+  & .forum .meta > * {
+    display: block;
+    float: left;
+    margin-right: 1em;
+  }
+  & .forum a.more {
+    display: block;
+    text-align: right;
+    margin: 10px 10px 0 0;
+  }
+  & table.requests form {
+    margin: 0;
+  }
+  & table.requests {
+    margin: 0;
+  }
+  & table.requests.all {
+    margin-bottom: 20px;
+  }
+  & table.requests.for-team {
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+  }
+  & table.requests th {
+    padding: 0.5em;
+    text-align: center;
+    font-size: 1.4em;
+  }
+  & table.requests.all td {
+    padding: 2.3em 1em;
+  }
+  & table.requests .user_link {
+    margin-bottom: 0.7em;
+  }
+  & table.requests .process {
+    white-space: nowrap;
+  }
+  & table.requests button {
+    font-size: 0.8em;
+    display: inline;
+    margin-left: 5px;
+  }
+  & .button.small {
+    font-size: 12px;
+  }
+  & .undertitle {
+    margin-top: 1.5em;
+  }
+  & .kick .button {
+    margin-bottom: 5px;
+  }
+}

ui/team/css/build/_team.scss

@@ -0,0 +1,6 @@
+@import '../../../common/css/plugin';
+@import '../../../common/css/component/table-slist';
+@import '../../../common/css/component/form3';
+@import '../../../common/css/component/captcha';
+
+@import '../team';

ui/team/css/build/team.dark.scss

@@ -1,2 +1,2 @@
 @import '../../../common/css/theme/dark';
-@import 'site.menu';
+@import 'team';

ui/team/css/build/team.light.scss

@@ -1,2 +1,2 @@
 @import '../../../common/css/theme/light';
-@import 'site.menu';
+@import 'team';

ui/team/css/build/team.transp.scss

@@ -1,2 +1,2 @@
 @import '../../../common/css/theme/transp';
-@import 'site.menu';
+@import 'team';

ui/team/gulpfile.js

@@ -0,0 +1 @@
+require('../gulp/cssProject.js')(__dirname);