new form layout and other tpl fixes

accordion.scss

@@ -1,6 +1,6 @@
 
 
-.ac-container{
+.ac-container {
     margin: 1rem auto 1rem auto;
     text-align: left;
 
@@ -44,8 +44,59 @@
         height: auto;
         position: relative;
         z-index: 10;
-        border-left: 1rem solid var(--box-border);
-        border-right: 1rem solid var(--box-border);
+        border-left: 1px solid var(--box-border);
+        border-right: 1px solid var(--box-border);
         padding: 1rem;
     }
 }
+
+.more-container {
+    > label {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid var(--box-border);
+        cursor: pointer;
+        color: var(--link-color);
+        user-select: none;
+
+        .expand {
+            transition: all .3s ease;
+            transform: rotateZ(0deg);
+        }
+
+        span {
+            flex-grow: 1;
+        }
+
+        i {
+            flex-grow: 0;
+        }
+    }
+
+    > input {
+        display: none;
+    }
+
+    > input {
+        &:checked {
+            + label {
+                border-bottom: none;
+                margin-bottom: 1rem;
+
+                .expand {
+                    transition: all .3s ease;
+                    transform: rotateZ(90deg);
+                }
+            }
+
+            ~ div {
+                display: block;
+            }
+        }
+    }
+
+    > div {
+        display: none;
+    }
+}

breadcrumb.scss

@@ -2,6 +2,7 @@
     list-style: none;
     overflow: hidden;
     font-size: 1rem;
+    user-select: none;
 
     li {
         background: #fff;

button.scss

@@ -2,6 +2,7 @@
 
 .btn {
     cursor: pointer;
+    user-select: none;
 }
 
 button, input[type="submit"], input[type="button"], label.button, a.button {
@@ -21,6 +22,7 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
     outline: 0;
     font-family: inherit;
     font-size: .9rem;
+    user-select: none;
 
     &::-moz-focus-inner {
         border: 0;

canvas.scss

@@ -2,7 +2,6 @@
 
 canvas {
     background: #fff;
-    border: 1px solid var(--box-border);
     user-select: none;
 }
 

form.scss

@@ -1,6 +1,6 @@
 form {
     li {
-        margin: 5px 0 5px 0;
+       margin: 5px 0 5px 0;
     }
 
     td {
@@ -14,7 +14,7 @@ form {
 
     label {
         font-size: 1rem;
-        color: #878787;
+        color: rgba(0, 0, 0, 80);
     }
 
     i+i {
@@ -34,3 +34,38 @@ form {
         }
     }
 }
+
+.form-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & + * {
+        margin-top: .75rem;
+    }
+
+    label {
+        flex: 0 0 100%;
+    }
+
+    .input-control {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        & +.input-control {
+            margin-left: 1rem;
+        }
+    }
+}
+
+* + .form-group {
+    margin-top: .75rem;
+}
+
+@media (max-width: 768px) {
+    .form-group {
+        flex-direction: column;
+    }
+}

nav.scss

@@ -9,12 +9,13 @@ body > nav {
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
+    user-select: none;
 }
 
 #nav-side-outer {
     overflow-y: auto;
     height: 100%;
-
+    user-select: none;
     scrollbar-color: var(--button-colored-background) var(--nav-category-background);
     scrollbar-width: thin;
 

portlet.scss

@@ -21,6 +21,10 @@
         border-top: 1px solid #ebedf2;
         padding: 1rem;
     }
+
+    .portlet-body > h2 {
+        border-bottom: 1px solid #ebedf2;
+    }
 }
 
 .plain-portlet {

section.scss

@@ -31,7 +31,7 @@ section {
     }
 
     > h2 {
-       box-sizing: border-box;
+        box-sizing: border-box;
         font-size: 1.2em;
         margin-bottom: 5px;
     }

table.scss

@@ -39,6 +39,19 @@ table .sort-asc, table .sort-desc, table .filter {
     }
 }
 
+table.default.sticky {
+    position: relative;
+
+    thead {
+        th, td {
+            background: var(--table-head-background);
+            position: sticky;
+            top: 0;
+            z-index: 2;
+        }
+    }
+}
+
 table.default {
     border-radius: 4px;
     width: 100%;
@@ -101,8 +114,10 @@ table.default {
                 border: none;
             }
 
-            &:focus {
+            &:focus, &:hover {
                 outline: none;
+                transform: scale(1);
+                box-shadow: 0 0 5px rgba(90, 71, 114, 0.3);
             }
         }
 
@@ -112,9 +127,12 @@ table.default {
     }
 
     thead {
-        height: 3rem;
         background: var(--table-head-background);
 
+        tr {
+            height: 3rem;
+        }
+
         td {
             border-bottom: 1px solid var(--box-border);
         }

tag.scss

@@ -7,6 +7,7 @@ span {
 	    color: var(--text-on-background-color-2);
 	    background: var(--button-colored-background);
 	    display: inline-block;
+	    user-select: none;
 
 	    i {
 	    	color: var(--text-on-background-color-2);