simplify css, add more control elements to control bar

coinmanager/coinc/static/coinc/styles.css

@@ -17,6 +17,7 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 */
+
 html, table, tr, td, div {
   margin: 0;
   padding: 0;
@@ -53,56 +54,62 @@ table {
   margin-bottom: 30px !important;
 }
 
-table tr {
+th {
+  position: sticky;
+}
+
+tr {
   height: 30px;
 }
 
-table td {
+td {
   overflow: hidden;
   vertical-align: middle;
   white-space: nowrap;
 }
 
-table > thead > tr > th {
+thead > tr:first-child > th {
-  position: sticky;
-}
-
-table > thead > tr:first-child > th {
-  border-bottom: 1.7px solid black;
   background-image: linear-gradient(0, #9fc5e8, white);
   background-position: 100% 100%;
   padding: 5px;
   text-align: left;
   top: 0;
 }
-table > thead > tr:nth-child(2) > th {
-  background-color: white;
-}
-table > thead > tr:nth-child(2) > th:after {
-  content: '';
-  position: absolute;
-  left: -0.7px;
-  top: -1.4px;
-  width: 30px;
-  height: 30px;
-  border-top: 1px solid gray;
-  border-left: 1px solid gray;
-  border-bottom: 1px solid gray;
-}
 
-table > thead > tr:nth-child(2) > th, table > tbody > tr > td {
+thead > tr:nth-child(2) > th {
-  text-align: center;
+  background-color: white;
-  font-size: 0.8rem;
-  font-weight: normal;
   top: 36px;
 }
 
-table > tbody > tr > td {
+thead > tr:nth-child(2) > th:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -1px;
+  width: 30px;
+  height: 32px;
+  border-top: 1px solid gray;
+  border-left: 1px solid gray;
+  border-bottom: 2px solid black;
+}
+
+thead > tr:nth-child(2) > th:last-child:after {
+  border-right: 1px solid gray;
+}
+
+
+thead > tr:nth-child(2) > th, table > tbody > tr > td {
+  text-align: center;
+  font-size: 0.8rem;
+  font-weight: normal;
+}
+
+tbody > tr > td {
   background-color: #b7b7b7;
   border: 1px solid gray;
 }
 
-table > tbody > tr > td > div.coin {
+tbody > tr > td > div.coin {
   position: relative;
   height: 30px;
   width: 30px;
@@ -163,10 +170,6 @@ div.found {
   clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
 }
 
-div.Moritz {
-  background-color: red;
-}
-
 div.username {
   position: fixed;
   left: 0;
@@ -200,5 +203,3 @@ div#username {
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
 }
-
-.hide { display: none; }

coinmanager/coinc/templates/coinc/username.html

@@ -1,11 +1,26 @@
 <div class="username">
-  <label for="select_usernames" id="for_select_usernames">Name</label>
+  <label for="found" id="found_label">
+    <input id="found" type="checkbox" checked="checked">
+    gefunden von
+  </label>
+  <label for="select_usernames" id="for_select_usernames">
     <select id="select_usernames" name="username" form="username_form" class="form-control">
     {% for user in users %}
       <option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>
     {% endfor %}
     </select>
-  <span id="user_message"><button id="show_add_user" class="btn btn-info">+ Namen hinzufügen</button></span>
+  </label>
+
+  <label for="datetime_now">
+    <input type="radio" name="datetime" id="datetime_now" checked="checked">
+    jetzt
+  </label>
+  <label for="datetime_custom">
+    <input type="radio" name="datetime" id="datetime_custom">
+    Datum
+  </label>
+
+  <button id="show_add_user" class="btn btn-info">+ Namen hinzufügen</button>
 </div>
 
 <div id="modal_add_user" class="modal-container">
@@ -20,11 +35,11 @@
     <div class="modal-body">
       <div class="form-group">
         <label for="text_user">Name</label>
-        <input type="text" name="user" id="text_user" class="form-control" />
+        <input type="text" name="user" id="text_user" class="form-control">
       </div>
       <div class="form-group">
         <label for="text_color">Farbe</label>
-        <input type="text" name="color" id="text_color" class="form-control" />
+        <input type="text" name="color" id="text_color" class="form-control">
       </div>
     </div>
     <div class="modal-footer">