Move keys css to separate file

app/public/css/panel.css

@@ -6,6 +6,7 @@
 
 /* Subpanels */
 @import "subpanel/dash.css";
+@import "subpanel/keys.css";
 
 *, *:before, *:after {
     margin: 0;
@@ -42,64 +43,6 @@ body {
     flex-direction: column;
 }
 
-.keys {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.key {
-    background: #555;
-    border: 3px solid #2a9fd6;
-    border-radius: 5px;
-    box-shadow: 5px 5px 10px #000;
-    margin: 20px;
-    width: 300px;
-    height: 100px;
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    transition: box-shadow 0.2s;
-    overflow: hidden;
-}
-
-.key:hover {
-    box-shadow: 0 0 10px #eee;
-}
-
-.key i {
-    font-size: 48px;
-    margin: auto 0 auto 20px;
-}
-
-.key span {
-    font-size: 16px;
-    vertical-align: center;
-    margin: auto;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-.key-name {
-    color: #2a9fd6;
-    font-family: 'Roboto Mono', monospace;
-}
-
-pre {
-    overflow: auto;
-    line-height: 1.7em;
-    font-family: 'Roboto Mono', monospace;
-    border: 1px solid #666;
-    border-radius: 4px;
-    display: block;
-    padding: 10px;
-    font-size: 14px;
-    margin: 10px 0;
-    background: #222;
-    color: #2a9fd6;
-}
-
 .modal,
 .modal-box {
     z-index: 900;
@@ -136,10 +79,6 @@ pre {
     animation-timing-function: ease;
 }
 
-#createKey {
-    max-width: 920px;
-}
-
 .modal-header {
     border: 2px solid #2a9fd6;
     border-radius: 8px 8px 0 0;
@@ -207,48 +146,3 @@ button:hover {
 ::-moz-focus-inner {
     outline: none;
 }
-
-.btn-del {
-    text-transform: uppercase;
-    border: 2px solid #ff6666;
-    color: #ccc;
-}
-
-.btn-del:hover {
-    background-color: #ff6666;
-}
-
-em {
-    text-transform: uppercase;
-    font-weight: bold;
-}
-
-#identifier {
-    font-size: 14px;
-    background: #222;
-    color: #d3d3d3;
-    border: 1px solid #666;
-    border-radius: 4px;
-    padding: 10px;
-    margin: 10px 0;
-}
-
-th {
-    text-transform: uppercase;
-    font-weight: bold;
-    padding: 10px;
-}
-
-td {
-    padding: 10px;
-}
-
-td input {
-    vertical-align: middle;
-}
-
-td label {
-    margin-bottom: 2px;
-    padding-left: 3px;
-}
-

app/public/css/subpanel/dash.css

@@ -1,8 +1,3 @@
-#dash-container {
-    display: flex;
-    flex-direction: column;
-}
-
 .dash-row {
     display: flex;
     flex-wrap: nowrap;

app/public/css/subpanel/keys.css

@@ -0,0 +1,105 @@
+.keys {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.key {
+    background: #000;
+    border: 3px solid #2a9fd6;
+    border-radius: 5px;
+    box-shadow: 5px 5px 10px #000;
+    margin: 20px;
+    width: 300px;
+    height: 100px;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    transition: box-shadow 0.2s;
+    overflow: hidden;
+}
+
+.key:hover {
+    box-shadow: 0 0 10px #eee;
+}
+
+.key i {
+    font-size: 48px;
+    margin: auto 0 auto 20px;
+}
+
+.key span {
+    font-size: 16px;
+    vertical-align: center;
+    margin: auto;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.key-name {
+    color: #2a9fd6;
+    font-family: 'Roboto Mono', monospace;
+}
+
+pre {
+    overflow: auto;
+    line-height: 1.7em;
+    font-family: 'Roboto Mono', monospace;
+    border: 1px solid #666;
+    border-radius: 4px;
+    display: block;
+    padding: 10px;
+    font-size: 14px;
+    margin: 10px 0;
+    background: #222;
+    color: #2a9fd6;
+}
+
+#createKey {
+    max-width: 920px;
+}
+
+.btn-del {
+    text-transform: uppercase;
+    border: 2px solid #ff6666;
+    color: #ccc;
+}
+
+.btn-del:hover {
+    background-color: #ff6666;
+}
+
+#identifier {
+    font-size: 14px;
+    background: #222;
+    color: #d3d3d3;
+    border: 1px solid #666;
+    border-radius: 4px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+th {
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 10px;
+}
+
+td {
+    padding: 10px;
+}
+
+td input {
+    vertical-align: middle;
+}
+
+td label {
+    margin-bottom: 2px;
+    padding-left: 3px;
+}
+
+em {
+    text-transform: uppercase;
+    font-weight: bold;
+}

public/views/panel/dash.html

@@ -1,4 +1,4 @@
-<div id="dash-container" ng-controller="DashController">
+<div class="inner" ng-controller="DashController">
     <div id="dash-historical" class="dash-row">
         <div class="dash-card dash-card-graph">
             <canvas id="dash-upload-historical" class="chart chart-line"