css: add subheader and support for logos inside header

css/themes.css

@@ -1887,18 +1887,6 @@ html .ui-select .ui-btn.ui-corner-all {
 .ui-input-text .ui-input-clear:hover {
   background: transparent;
 }
-/* header logo, careful, no more buttons possible! */
-html .ui-header .ui-header-logo img {
-  max-height: 37px;
-  padding: 2px 0.5em;
-  vertical-align: middle;
-}
-@media (max-width: 40em) {
-  html .ui-header .ui-header-logo ~ h1 {
-    margin-right: 1em;
-    text-align: right;
-  }
-}
 
 /* breadcrumbs - need work!
 .ui-breadcrumbs {

ext/libs/jquery-mobile/extensions.css

@@ -5,8 +5,8 @@
 .ui-input-has-action {
   position: relative;
 }
-.ui-input-search .ui-input-action,
-.ui-input-text .ui-input-action {
+html body div.ui-input-search a.ui-input-action,
+html body div.ui-input-text a.ui-input-action {
   position: absolute;
   right: 0;
   top: 55%;
@@ -28,7 +28,12 @@ html body .ui-panel .ui-input-text .ui-btn-icon-notext.ui-input-action:after {
 html body .ui-input-search .ui-input-action:hover,
 html body .ui-input-text .ui-input-action:hover,
 html body .ui-input-search .ui-input-action:active,
-html body .ui-input-text .ui-input-action:active {
+html body .ui-input-text .ui-input-action:active,
+/* also add clear button */
+html body .ui-input-search .ui-input-clear:hover,
+html body .ui-input-text .ui-input-clear:hover,
+html body .ui-input-search .ui-input-clear:active,
+html body .ui-input-text .ui-input-clear:active{
   background: transparent;
   background-image: none;
   -webkit-box-shadow: none /* iOS3 */ !important;
@@ -570,7 +575,63 @@ html table tr td .ui-radio label.ui-btn {
     right: 0;
   }
 }
-
+/* ============================== header/subheader =========================*/
+.ui-header .ui-title-logo {
+  min-height: 2em; /* title uses 1.1 + padding .7 */
+  max-height: 2em;
+  padding: .2em;
+  max-width: auto;
+  margin-bottom: 1px;
+}
+.ui-header .ui-first-wrap ~ .ui-title-logo {
+  margin-left: 16%; /* TODO: no fan, this is terrible...*/
+}
+.ui-header .ui-subheader {
+  display: inline-block;
+  vertical-align: top;
+  border: 0 none;
+}
+.ui-header .ui-subheader.ui-controlbar {
+  margin-bottom: 0;
+}
+.ui-header .ui-subheader form .ui-controlgroup {
+  border-radius: 0;
+}
+.ui-header .ui-subheader form .ui-controlgroup,
+.ui-header .ui-subheader form .ui-input-text {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui-header .ui-subheader .ui-input-text {
+  margin: 0;
+}
+.ui-header .ui-subheader .ui-input-text {
+  width: auto;
+}
+/* no fan, but the input must be first in order to shrink buttons on focus */
+.ui-header .ui-subheader form .ui-input-text + * {
+  float: left;
+}
+@media (max-width: 30em) {
+  .ui-header .ui-subheader {
+    display: block;
+    border-top-width: 1px;
+    border-top-style: solid;
+  }
+  .ui-header .ui-subheader form .ui-input-text {
+    max-width: 20%;
+  }
+  .ui-header .ui-subheader form .ui-input-has-action.ui-input-has-clear input {
+    padding-right: .25em;
+  }
+  .ui-header .ui-subheader form .ui-input-text.ui-focus {
+    max-width: 50%;
+  }
+  .ui-header .ui-subheader .ui-input-text.ui-focus ~ .ui-controlgroup a {
+    padding-left: .25em;
+    padding-right: .25em;
+  }
+}
 /* ================================= contolbar ============================*/
 .ui-controlbar {
   position: static;
@@ -619,7 +680,7 @@ html body .ui-controlbar  > .ui-btn:not(.ui-input-clear, .ui-input-action) {
 }
 /* prevent controlgroup buttons from collapsing on small displays */
 @media (max-width: 18em) {
-  html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > * {
+  html body .ui-content .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > * {
     padding-left: .75em;
     padding-right: .75em;
   }
@@ -630,22 +691,22 @@ html body .ui-controlbar  > .ui-btn:not(.ui-input-clear, .ui-input-action) {
   }
 }
 @media (min-width: 30em) {
-  .ui-controlbar {
+  html body .ui-content .ui-controlbar {
     width: 80%;
     vertical-align: middle;
     padding: 0 1%;
   }
 }
 @media (min-width: 40em) {
-  .ui-controlbar {
+  html body .ui-content .ui-controlbar {
     width: 60%;
     vertical-align: middle;
     display: inline-block; /* if only-child... this should be block?*/
     padding: 0 3%;
   }
-  .ui-controlbar,
-  .ui-controlbar ~ a.ui-btn,
-  .ui-controlbar ~ .ui-controlgroup .ui-btn {
+  html body .ui-content .ui-controlbar,
+  html body .ui-content .ui-controlbar ~ a.ui-btn,
+  html body .ui-content .ui-controlbar ~ .ui-controlgroup .ui-btn {
     margin: 0 auto;
   }
 }