Add User studo style and Add empty state icon

packages/ui-default/components/signin/signin_dialog.page.styl

@@ -26,6 +26,18 @@ $signin_dialog_expand_h = 30px
   border: 1px solid #DDD
   // box-shadow: 0 0 30px rgba(#000, 0.6)
 
+.user_sudo_main
+  background: #FFF
+  width: 25em
+  // padding: rem($signin_form_gap_v $signin_form_gap_h)
+  padding-bottom: 2em
+  // margin-right: rem($signin_form_width - $signin_dialog_expand_h)
+  position: relative
+  z-index: 2
+  border-radius: 22px
+  border: 1px solid #DDD
+  // box-shadow: 0 0 30px rgba(#000, 0.6)
+
 .dialog--signin__side
   position: absolute
   right: 0

packages/ui-default/locales/zh.yaml

@@ -102,6 +102,7 @@ Attend Contest: 参加比赛
 Attend contests: 参加比赛
 Attended: 已参加
 Attendee Manage: 参赛者管理
+After you've performed a sudo-protected action, you'll only be asked to re-authenticate again after a few hours of inactivity. : 在您执行了受sudo保护的操作后，只有在几个小时不活动后，才会要求您再次进行身份验证。
 Authenticator: 认证器
 Authenticators: 认证器
 author: 作者
@@ -167,6 +168,8 @@ Compilers' Version and Parameters: 编译器版本及参数
 Complete: 完成
 Completed: 已完成
 Config: 配置
+Confirm: 确认
+Confirm Access: 确认访问
 Confirm deleting the selected roles?: 您确定删除所选角色吗？
 Confirm deleting this comment? Its replies will be deleted as well.: 确认删除这个评论吗？回复会被同时删除。
 Confirm deleting this reply?: 确认删除这个回复吗？
@@ -845,6 +848,7 @@ SuperUser: 超级管理员
 SuperUser's Password: 超级管理员的密码
 Support: 支持
 Switch account: 切换账户
+sudo mode: sudo 模式
 Tags: 标签
 Task Settings: 任务设置
 tasks_list: 任务列表
@@ -888,6 +892,7 @@ Time Extension: 延期
 Time: 时间
 timeago_locale: zh_CN
 Timezone: 时区
+Tip: 提示
 title: 标题
 Title: 标题
 To get a better editing experience, with code highlighting and test runs, please go back to the problem detail page and use 'Open Scratchpad' button.: 为了获得更好的编辑体验，包括代码高亮和测试运行功能，请返回题目详情页面并点击“进入在线编程模式”按钮。
@@ -1010,6 +1015,7 @@ Write Your Solution: 发表您的题解
 Year: 年
 You are currently in legacy mode. Some additional features will be unavailable. We strongly recommend switching to standard mode on a modern browser.: 您当前处于兼容模式。某些功能在此模式下不可用。我们强烈建议在现代浏览器上切换为标准模式以获得更好的体验。
 You are not allowed to join the domain. The link is either invalid or expired.: 您无法加入该网站，链接无效或已过期。
+You are entering: 您正在进入
 You can also upload your avatar to Gravatar and it will be automatically updated here.: 你也可以将头像上传到 <a href="https://gravatar.com/">Gravatar</a>，本站的头像将自动更新。
 You can create your own training plans and share them with others.: 您可以创建您自己的训练计划并且与他人分享。
 You cannot submit for this problem because the contest is ended. You can click "Open in Problem Set" to view this problem in normal mode.: 该比赛已结束，您无法在比赛模式下递交该题目。您可以点击“在题库中打开”以普通模式查看和递交本题。

packages/ui-default/misc/nothing.styl

@@ -8,6 +8,7 @@
     padding: rem(20px 0)
 
 .nothing-icon
-  background: url(./puzzled_twd2.svg) no-repeat center center
-  height: 184px
+  height: 180px;
+  background: url('./empty_state.svg') no-repeat center center;
+  background-size: contain;
   margin-bottom: rem(20px)

packages/ui-default/pages/contest.page.styl

@@ -195,3 +195,6 @@ $highlight-button-color = #F6DF45
 .page--contest_user
   .col--uid
     width: rem(100px)
+
+.problem__tag-item a
+  color: white

packages/ui-default/templates/contest_detail.html

@@ -12,14 +12,14 @@
         <h1 class="section__title font-medium">{{ tdoc.title }}</h1>
       </div>
       <div class="section__body">
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _(model.contest.statusText(tdoc, tsdoc)) }}</span>
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-award">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _('Start at') }}: {{ contest.render_time(tsdoc.startAt or tdoc.beginAt) }}</span>
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-schedule">{{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}</span>
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _('Host') }}: {{ user.render_inline(udict[tdoc.owner], badge=false) }}</span>
-        <span class="bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-user--multiple">{{ tdoc['attend']|default(0) }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 mt-4 bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _(model.contest.statusText(tdoc, tsdoc)) }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-award">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _('Start at') }}: {{ contest.render_time(tsdoc.startAt or tdoc.beginAt) }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-schedule">{{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item">{{ _('Host') }}: {{ user.render_inline(udict[tdoc.owner], badge=false) }}</span>
+        <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-user--multiple">{{ tdoc['attend']|default(0) }}</span>
         {% if tsdoc.attend %}
-          <span class="bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-check">{{ _('Attended') }}</span>
+          <span class="text-white font-medium bg-purple rounded-2xl mr-2 bp4-tag bp4-large bp4-minimal problem__tag-item icon icon-check">{{ _('Attended') }}</span>
         {% endif %}
       </div>
     </div>

packages/ui-default/templates/user_sudo.html

@@ -1,8 +1,8 @@
 {% extends "layout/immersive.html" %}
 {% block content %}
-<div class="row"><div class="columns">
-  <div class="immersive--content immersive--center">
-    <h1>{{ _('Confirm Access') }}</h1>
+<div class="row user_sudo_main"><div class="columns">
+  <div class="immersive--center">
+    <h1 class="dialog--signin__title">{{ _('Confirm Access') }}</h1>
     <form method="POST">
       {% if UserContext.authn %}
       <div class="row sudo-div confirm-div nojs--hide" data-sudo="authn"><div class="columns">
@@ -19,27 +19,27 @@ <h1>{{ _('Confirm Access') }}</h1>
       </div></div>
       {% endif %}
       <div class="row sudo-div" data-sudo="password"><div class="columns">
-        <label class="inverse material textbox">
-          {{ _('Password') }}
-          <input name="password" type="password">
+        <label class="material textbox">
+          {# {{ _('Password') }} #}
+          <input name="password" type="password" placeholder="密码">
         </label>
       </div></div>
       <div class="row confirm-div"><div class="columns">
         <div class="text-center">
-          <input value="{{ _('Confirm') }}" class="inverse expanded rounded primary button" name="confirm">
+          <input value="{{ _('Confirm') }}" class="expanded rounded primary button button-submit" name="confirm">
         </div>
       </div></div>
     </form>
     <div class="row"><div class="columns">
-      <div class="text-center supplementary inverse">
-        <p><strong>Tip:</strong> You are entering <a href="https://docs.github.com/articles/sudo-mode">sudo mode</a>.</p>
-        <p>After you've performed a sudo-protected action, you'll only be asked to re-authenticate again after a few hours of inactivity.</p>
+      <div class="text-center">
+        <p class="text-gray"><strong>{{_('Tip')}}:</strong> {{_('You are entering')}} <a class="text-gray" href="https://docs.github.com/articles/sudo-mode">{{_('sudo mode')}}</a></p>
+        <p class="text-gray">{{_("After you've performed a sudo-protected action, you'll only be asked to re-authenticate again after a few hours of inactivity.")}}</p>
       </div>
     </div></div>
     {% if UserContext.authn or UserContext.tfa %}
     <br>
     <div class="row nojs--hide"><div class="columns">
-      <div class="supplementary inverse typo">
+      <div class="typo">
         <p><strong>{{ _('Or use other methods:') }}</strong></p>
         <ol>
           {% if UserContext.authn %}<li class="sudo-switch" data-sudo="authn"><a>{{ _('Use Authenticator') }}</a></li>{% endif %}