Add dark theme.

static/custom.css

@@ -1,3 +1,41 @@
+/* Some Colors */
+a {
+    color: #b52828
+}
+a:visited {
+  text-decoration: none;
+}
+a:hover {
+  color: #fd5454;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background-color: #b52828;
+  border-color: #b52828;
+}
+.btn-primary:hover {
+  background-color: #fd5454;
+  border-color: #fd5454;
+}
+
+.btn-default {
+  background-color: #3b3b3b;
+  border-color: #3b3b3b;
+}
+.btn-default:hover {
+  background-color: #3b3b3b;
+  border-color: #fd5454;
+}
+
+.icon-primary{
+  color: #b52828
+}
+
+.brand-icon{
+  height: 40px;
+}
+
 .vertical-center {
   min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
   min-height: 100vh; /* These two lines are counted as one :-)       */

templates/base.html

@@ -5,6 +5,8 @@
 {% block styles %}
   {{ super() }}
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+  <link rel="stylesheet" href="/static/dark_theme.css">
+  <link rel="stylesheet" href="/static/custom.css">
 {% endblock %}
 
 {% block navbar %}
@@ -15,12 +17,22 @@
     ('/drinks', 'drinks', 'Drinks', 'fas fa-beer')
   ]-%}
   <div class="container">
-    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
+    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
-      <ul class="nav navbar-nav mr-auto">
+
+      <a class="navbar-brand">
+        <img class="brand-icon" alt="" src="/static/img/brand.png">
+        Estus Shots
+      </a>
+
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
         {% for href, id, caption, icon in nav_bar %}
           <li class="nav-item{% if id == active_page %} active{% endif %}">
             <a class="nav-link" href="{{ href|e }}">
-            <i class="{{ icon|e }}"></i> {{ caption|e }}
+              <i class="{{ icon|e }} icon-primary"></i> {{ caption|e }}
             </a>
           </li>
         {% endfor %}
@@ -30,6 +42,7 @@
             <a class="nav-link" href="/logout">Logout</a>
           </li>
         </ul>
+      </div>
     </nav>
   </div>
 {% endblock %}

templates/drinks.html

@@ -32,7 +32,7 @@
 
             {% if g.is_editor %}
               <td class="col-sm-auto text-center">
-                <a class="btn btn-dark" href="{{ url_for('drink_edit', drink_id = drink.id) }}">
+                <a class="btn btn-default" href="{{ url_for('drink_edit', drink_id = drink.id) }}">
                   <span class="fas fa-pencil-alt"></span>
                 </a>
               </td>

templates/enemies.html

@@ -38,7 +38,7 @@
 
             {% if g.is_editor %}
               <td class="col-sm-auto text-center">
-                <a class="btn btn-dark" href="{{ url_for('enemy_edit', enemy_id = item.id) }}">
+                <a class="btn btn-default" href="{{ url_for('enemy_edit', enemy_id = item.id) }}">
                   <span class="fas fa-pencil-alt"></span>
                 </a>
               </td>

templates/episodelist.html

@@ -31,10 +31,10 @@
               <td class="col-sm-auto text-center">{{ ep[prop] }}</td>
             {% endfor %}
 
-            <a class="btn btn-dark" href="/episodes/{{ ep['id'] }}">Show</a>
+            <a class="btn btn-default" href="/episodes/{{ ep['id'] }}">Show</a>
             {% if g.is_editor %}
                 <td class="col-sm-auto text-center">
-                  <a class="btn btn-dark" href="/editepisode/{{ ep['id'] }}">Edit</a>
+                  <a class="btn btn-default" href="/editepisode/{{ ep['id'] }}">Edit</a>
                 </td>
             {% endif %}
           </tr>

templates/login.html

@@ -4,14 +4,24 @@
 
 {% block styles %}
   {{ super() }}
+  <link rel="stylesheet" href="/static/dark_theme.css">
   <link rel="stylesheet" href="/static/custom.css">
 {% endblock %}
 
+{% block body_attribs %}
+  style="background-image: url(/static/img/elite.png);
+    background-repeat: no-repeat;
+    background-position-x: left;
+    background-position-y: bottom;"
+{% endblock %}
+
 {% block content %}
 
   <div class="container vertical-center">
     <div class="card text-center mx-auto" style="width: 15rem">
-      <div class="card-header">Login</div>
+
+      <img src="/static/img/solaire.png" alt="Login" style="height: 15rem">
+
       <div class="card-body">
         <form method="post">
           <div class="form-group">

templates/players.html

@@ -32,7 +32,7 @@
 
             {% if g.is_editor %}
               <td class="col-sm-auto text-center">
-                <a class="btn btn-dark" href="{{ url_for('player_edit', player_id = player.id) }}">
+                <a class="btn btn-default" href="{{ url_for('player_edit', player_id = player.id) }}">
                   <span class="fas fa-pencil-alt"></span>
                 </a>
               </td>

templates/season_list.html

@@ -35,16 +35,16 @@
             {% endfor %}
 
               <td class="col-sm-auto text-center">
-                <a class="btn btn-dark" href="/seasons/{{ item.id }}"><span class="fas fa-eye"></span></a>
+                <a class="btn btn-default" href="/seasons/{{ item.id }}"><span class="fas fa-eye"></span></a>
               </td>
 
             {% if g.is_editor %}
               <td class="col-sm-auto text-center">
-                <a class="btn btn-dark" href="{{ url_for('season_edit', season_id = item.id) }}">
+                <a class="btn btn-default" href="{{ url_for('season_edit', season_id = item.id) }}">
                   <span class="fas fa-pencil-alt"></span>
                 </a>
 
-                <a class="btn btn-dark" href="#">
+                <a class="btn btn-default" href="#">
                   <span class="fas fa-plus"></span> Episode
                 </a>
               </td>