Refactor and cleanup some CSS, fix form inputs "shaking" on Webkit

themes/material/css/color.css

@@ -56,10 +56,12 @@ ul li.action > form > div.action,
 .icon.gray  , p.user.gray     { color: #9E9E9E; }
 .icon.black , p.user.black    { color: #000; }
 
-form input:focus:invalid,
-form textarea:focus:invalid {
-    border-bottom-color: #F44336;
+form > div > input:focus:invalid,
+form > div > input:focus:required {
+    box-shadow: 0px 2px 0px #F44336;
 }
+
+form > div > input:invalid,
 form input:focus:invalid + label,
 form textarea:focus:invalid + label {
     color: #F44336;
@@ -127,5 +129,6 @@ form textarea:focus:not(:invalid) + label {
 
 form input:focus:not(:invalid),
 form textarea:focus:not(:invalid) {
-    border-bottom-color: #FF5722;
+    box-shadow:0px 2px 0px #FF5722;
 }
+

themes/material/css/form.css

@@ -1,7 +1,7 @@
 /* Form */
 
 form > div:not(.clear):not(.control) {
-    min-height: 9.5rem;
+    min-height: 9rem;
     position: relative;
     box-sizing: border-box;
 }
@@ -30,12 +30,7 @@ form > div > label {
 form > div.icon {
     padding-left: 9rem;
 }
-/*
-form > div > input:focus + label,
-form > div > textarea:focus + label {
-    display: block;
-}
-*/
+
 form > div > textarea,
 #hiddendiv {
     border: none;
@@ -96,26 +91,33 @@ main > header form > div:not(.clear):not(.control) > .select select {
 }
 
 /* Placeholders to mimic FF */
+
 ::-webkit-input-placeholder, /* WebKit browsers */
 :-ms-input-placeholder { /* Internet Explorer 10+ */
-    color:    #fff;
+    color: #fff;
     opacity: 0.5;
 }
 
+/* Webkit weird CSS, sic */
+
+form > div > .select select,
+form > div > input:not([type=submit]),
+form > div > textarea {
+    outline-width: 0;
+}
+
 form > div > .select,
 form > div > input:not([type=submit]),
 form > div > textarea {
     display: block;
     padding: 1rem 0;
-    padding-top: 5rem;
+    padding-top: 4.5rem;
     width: 100%;
     background-color: transparent;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     margin-bottom: 1rem;
 
     overflow: hidden; /* Fixme */
-
-    box-shadow: none; /* Firefox weird CSS */
+    box-shadow:0px 1px 0px rgba(0, 0, 0, 0.12);
 }
 
 form > div > .select {
@@ -135,21 +137,10 @@ form > div > input:not([type=submit]):-webkit-autofill {
     -webkit-box-shadow: 0 0 0 50px white inset;
 }
 form > div > input:not([type=submit]):-webkit-autofill:focus {
-    -webkit-box-shadow: 0;
+    box-shadow: 0;
     -webkit-text-fill-color: #333;
 }
 
-form > div > input:focus,
-form > div > textarea:focus {
-    border-bottom-width: 2px;
-    margin-bottom: calc(1rem - 1px);
-}
-
-form > div > input:invalid,
-form > div > input:required {
-    box-shadow: none;
-}
-
 /* Checkbox element */
 
 form > div .checkbox > input[type="checkbox"],
@@ -423,3 +414,4 @@ header.big ~ .button.action {
     word-wrap: break-word;
     overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
 }
+

themes/material/css/listn.css

@@ -3,6 +3,10 @@ ul.list {
     padding: 0;
 }
 
+ul.list li:not(.subheader) {
+    padding: 0.25rem 0;
+}
+
 ul.list.middle li:not(.subheader) {
     padding: 0.75rem 0;
 }
@@ -32,47 +36,38 @@ ul.list.active li.active:not(.subheader) {
 
 /* Main elements */
 
-ul.list li > .control,
-ul.list li > .primary {
-    width: 5rem;
-    height: 5rem;
+ul.list li .control,
+ul.list li .primary {
+    width: 5.5rem;
+    height: 5.5rem;
     top: 50%;
-    margin-top: -2.5rem;
+    margin-top: -2.75rem;
     position: absolute;
+    line-height: 5.5rem;
+    /*padding: 0.25rem 0;*/
 }
 
-ul.list li > .control.active,
-ul.list li > .primary.active {
-    width: 5rem;
-    height: 5rem;
-    margin-top: -2.5rem;
-    line-height: 5rem;
-}
-
-ul.list.middle li > .control.active,
-ul.list.middle li > .primary.active {
-    width: 6.5rem;
-    height: 6.5rem;
-    margin-top: -3.25rem;
-    line-height: 6.5rem;
-}
-
-ul.list.thick li > .control.active,
-ul.list.thick li > .primary.active {
-    width: 7rem;
-    height: 7rem;
+ul.list.middle li .control:not(.bubble),
+ul.list.middle li .primary:not(.bubble) {
     margin-top: -3.5rem;
-    line-height: 7rem;
+    padding: 0.75rem 0;
 }
 
-ul.list li > .primary.active {
-    left: 0;
+ul.list.thick li .control:not(.bubble),
+ul.list.thick li .primary:not(.bubble) {
+    padding: 1.5rem 0;
+    margin-top: -4.25rem;
 }
 
 ul.list li > .control.small,
 ul.list li > .primary.small {
     width: 3rem;
     height: 3rem;
+    line-height: 3rem;
+}
+
+ul.list li > .control.small.bubble,
+ul.list li > .primary.small.bubble {
     margin-top: -1.5rem;
 }
 
@@ -167,7 +162,6 @@ ul.list li.subheader > p {
 
 /* If we have a primary control */
 
-
 ul.list li > .primary {
     left: 2rem;
 }
@@ -183,27 +177,11 @@ ul.list li > .control {
 }
 
 ul.list li > .control ~ .control {
-    right: 5rem;
+    right: 5.5rem;
 }
 
 ul.list li > .control ~ .control ~ .control {
-    right: 10rem;
-}
-
-ul.list.middle li > .control ~ .control {
-    right: 6rem;
-}
-
-ul.list.middle li > .control ~ .control ~ .control {
-    right: 12rem;
-}
-
-ul.list.thick li > .control ~ .control {
-    right: 7rem;
-}
-
-ul.list.thick li > .control ~ .control ~ .control {
-    right: 14rem;
+    right: 11rem;
 }
 
 /* Limit the size of the main content */
@@ -427,3 +405,4 @@ ul.context_menu.shown {
     display: block;
     width: calc(100% - 9rem);
 }
+

themes/material/css/menu.css

@@ -1,15 +1,15 @@
 /* Menu */
 
-body > nav > ul.list li > .primary {
-    left: 1rem;
-}
-
 body > nav > ul:nth-child(2) li p.normal,
 body > nav > ul:nth-child(3) li p.normal {
     height: 6rem;
     line-height: 6rem;
 }
 
+body > nav > ul.list li span.primary {
+    left: 0.75rem;
+}
+
 body > nav > ul a {
     color: white;
 }

themes/material/css/table.css

@@ -1,6 +1,7 @@
 table.table {
     width: 100%;
     border-collapse: collapse;
+    margin-bottom: 1rem;
 }
 
 table.table tbody tr:hover {
@@ -12,6 +13,11 @@ table.table td {
     text-align: right;
 }
 
+table.table th li,
+table.table td li {
+    text-align: left;
+}
+
 table.table thead tr th,
 table.table tr:not(:last-child) td {
     border-bottom: 1px solid #CCC;
@@ -35,3 +41,12 @@ table.table td:last-child {
     padding-right: 2rem;
 }
 
+table.table td li i {
+    line-height: 7rem;
+}
+
+table.table th[colspan],
+table.table td[colspan] {
+    padding: 0;
+}
+

themes/material/css/title.css

@@ -0,0 +1,55 @@
+/* Titles */
+
+h1 { /* Display 1 */
+    font-size: 4.25rem;
+    line-height: 7rem;
+}
+
+h2 { /* Headline */
+    font-size: 3rem;
+    line-height: 4rem;
+    padding: 2rem 0;
+}
+
+h2.thin {
+    line-height: 5rem;
+}
+
+h3 { /* Title */
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+h4, input, textarea, select { /* Headline */
+    font-size: 2rem;
+    line-height: 2.5rem;
+}
+
+h4 {
+    font-weight: 400;
+}
+
+h4.gray {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+article section content ul li, /* Body 1 */
+article section content p {
+    font-size: 2rem;
+    font-weight: 300;
+}
+
+.snackbar, /* Body 2 */
+.toast {
+    font-size: 1.75rem;
+    font-weight: 500;
+}
+
+label, span.info { /* Caption */
+    font-size: 1.5rem;
+    color: rgba(0, 0, 0, 0.54);
+}
+label, span.info b { /* Caption */
+    font-weight: 600;
+}
+