とりあえず書きなぐる

とりあえず、マイノリティーなプログラムを極力説明せずに書きなぐります

jQuery MobileのCSSを弄くり倒す

プログラム jQuery jQuery Mobile

jQuery MobileのクソなところをCSSで修正しちゃいます。ソースフォルダは/Srcとします。

  • app.css　アプリケーション固有のCSS
  • cm.css　共通CSS

としておきます

可能な限りimportantは使わないようにしましょう
適用順を上位にしたい場合は.ui-pageとかbodyとか頭につけて調整します
scssとかlessとかは使いません
現物合わせが基本なのでデバッグできません

１．角丸とボックスシャドウ
ボックスシャドウはカッコ悪いので排除
角丸は面倒なので排除
cm.css

.ui-corner-all {
  border-radius: 0 !important;
}
.ui-panel,
.ui-header,
.ui-footer,
.ui-btn:active,
.ui-overlay-shadow,
.ui-shadow,
.ui-shadow-inset,
input:focus {
  box-shadow: none !important;
}
.ui-focus {
  box-shadow: none !important;
  /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) !important;*/
}
.ui-btn:focus:not(.ui-flipswitch-on) {
  box-shadow: none !important;
  /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) inset !important;*/
}
.ui-flipswitch-on.ui-btn:focus {
  box-shadow: none !important;
  /*box-shadow: 0 0 0  3px rgba(0,0,0,0.50) inset !important;*/
}

ボックスシャドウなしだとフォーカスがわからないので必要であればコメントアウトを解除します
基本、外側でボタンは内側に設定してあります

２．背景色
簡単なので白
cm.css

/*
  ThemeA BaseColor White
*/
.ui-page-theme-a .ui-btn:not(.ui-btn-active),
.ui-page-theme-a .ui-bar-inherit:not(.ui-flipswitch-active):not(.ui-li-divider),
.ui-page-theme-a {
  background-color: #fff;
}
  .ui-page-theme-a .ui-btn:not(.ui-btn-active):hover {
    background-color: #f6f6f6;
  }

ついでにボタンのホバー色も設定

３．アイコン
iphone風を是としているため、標準のアイコンは丸の中に収めるように小さくなっています
丸背景は排除してしまうのでちょっと大きくします
svgに対応しないものは無視します
app.css

.ui-icon-alert:after,
.ui-icon-action:after,
.ui-icon-audio:after,
.ui-icon-back:after,
.ui-icon-bars:after,
.ui-icon-bullets:after,
.ui-icon-calendar:after,
.ui-icon-camera:after,
.ui-icon-edit:after,
.ui-icon-search:after,
.ui-icon-gear:after,
.ui-icon-star:after {
  background-size: 18px;
  border-radius: 0;
}
.ui-icon-action:after {
  background-position-y: 0;
}
.ui-icon-alert:after {
  background-size: 20px;
  background-position-y: 3px;
}

必要なのもは大きくして角丸は排除します
オフセットがかかっていたりする場合は位置調整します
必要なもののみ逐次設定で

標準以外のアイコンはhttp://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/から持ってきます
app.css

/* 
  Icon 
  From: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/
*/
.ui-icon-home-w:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E');
  background-size: 20px;
  border-radius: 0;
}
.ui-icon-home-b:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E');
  background-size: 20px;
  border-radius: 0;
}

基本白抜きアイコンのCSSが用意されているので、-w、-bを付加して白黒としまう
background-imageの最後のほうにある000000、FFFFFFが色です

ついでにブランクアイコンとボックスアイコンを作成しておきます
cm.css

/* 
  blank icon 
*/
.ui-icon-none:after {
  background-image: none;
  background-color: transparent;
  border-radius: 0;
  padding: 1px;
}

/* Box Icon */
.ui-icon {
  position: relative;
  padding-left: 2em !important;
}

  .ui-icon:after {
    background-color: transparent;
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    width: 2em;
    height: 2em;
    left: 0;
    top: 50%;
    margin-top: -1em;
}

スペースを取るための空アイコンとDIV等のボックス要素に付加するアイコンです
ボックスアイコンは左に付加のみ用意しました（逐次投入を基本とします）

４．タイトル
デスクトップ用に左寄せを用意
cm.css

/*
  Title
*/
.ui-header .ui-title {
  margin: 0;
  padding-left: 2.5em;
  padding-right: 2.5em;
  text-shadow: none;
}

  .ui-header .ui-title.ui-title-left {
      padding-left: 0.3em;
      text-align:left;
  }

５．ボタン
フォント太さやサイズはお好みで
文字ありと文字なして高さが違うアホ仕様なので揃えてやります
クリックしたときのアクションがないと愛想がないので、左と下に1pxずらすようにしました
cm.css

.ui-page .ui-btn {
  font-weight: 400;
}
  .ui-page .ui-btn.ui-btn-icon-notext:not(.ui-input-clear) {
    font-size: 12.5px;
    padding: 0.48em;
  }
  .ui-page .ui-btn.ui-btn-icon-notext.min:not(.ui-input-clear) {
    padding: 0;
  }
  .ui-page .ui-btn:not(.ui-flipswitch-on):not(.ui-checkbox-on):not(.ui-checkbox-off):active {  
    -o-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
.ui-page .ui-flipswitch-active.ui-flipswitch,
.ui-page .ui-btn-active {
  text-shadow: none !important;
}
.ui-btn.ui-btn-underline{
  background: linear-gradient(transparent 90%, rgb(0,0,0) 10% );
}
/* ChekcBox */
.ui-checkbox > label {
  border-width: 0;
}

リストなどでクリック時にスクロールバーが出てしまう間抜けなことも起こるので注意が必要です

６．ヘッダー、フッターとボタン
適当に位置調整
cm.css

/* Herder/Footer Button*/
.ui-header .ui-btn,
.ui-footer .ui-btn {
  margin: 0;
  border-width: 0;
}
  .ui-header .ui-btn:not(.ui-btn-icon-notext),
  .ui-footer .ui-btn:not(.ui-btn-icon-notext) {
    min-width: 5em;
  }
  .ui-header .ui-btn.ui-btn-icon-left,
  .ui-header .ui-btn.ui-btn-icon-right,
  .ui-footer .ui-btn.ui-btn-icon-left,
  .ui-footer .ui-btn.ui-btn-icon-right {
    min-width: 3em;
  }
/* Header Button */
.ui-header > .ui-btn.ui-btn-left,
.ui-header > .ui-btn.ui-btn-right,
.ui-header > .ui-left-panel,
.ui-header > .ui-right-panel {
  position: absolute;
  top: 0.4em;
}
.ui-header > .ui-left-panel,
.ui-header > .ui-right-panel {
  white-space: nowrap;
  font-size: 12.5px;
}
.ui-header > .ui-btn.ui-btn-left,
.ui-header > .ui-left-panel {
  left: 0.4em;
}
.ui-header > .ui-btn.ui-btn-right,
.ui-header > .ui-right-panel {
  right: 0.4em;
}

７．ツールバー
デスクトップ用を名乗るのでツールバーを
子要素として左寄せ、右寄せ、ディバイターグループを用意します
cm.css

/*
  Toolbar
*/
.ui-toolbar{
  clear: both;
}
  /* Toolbar Divider*/
  .ui-toolbar .ui-toolbar-divider {
    display: inline-block;
    height: 100%;
    border-left: 1px solid #ccc;
    padding-left: 1px;
  }
  /* Toolbar LeftPanel/RightPanel */
  .ui-toolbar > .ui-left-panel,
  .ui-toolbar > .ui-right-panel {
    margin: 0.3em;
  }
  .ui-toolbar > .ui-left-panel {
    float: left;
  }
  .ui-toolbar > .ui-right-panel {
    float: right;
  }

８．コンテンツとフォーム
フォームは全幅にするとみっともないので最大幅800pxに制限
cm.css

/* 
  content
*/
.ui-content.ui-nopadding {
  padding: 0;
}
.ui-content .ui-listview-inset {
  margin: 0;
}
/* 
  Form 
*/
.ui-toolbar.ui-form,
.ui-content.ui-form {
  max-width: 800px;
  margin: 0 auto;
}
.ui-content.ui-form > ul.ui-listview{
  margin: 0;
}

９．フィールド
タイトルと入力が横に並び、幅が狭くなると縦並びになるやつです
要素幅がパーセント指定になっているので、結構無様です
一ひねりしてタイトル側を幅固定となるようにします
cm.css

/*
  Field Contain Fix
*/
.ui-field-contain-fix > label {
  float: left;
  margin-top: 0.5em;
}
.ui-field-contain-fix.em3 > label {
  width: 3em;
}
.ui-field-contain-fix.em5 > label {
  width: 5em;
}
.ui-field-contain-fix.em7 > label {
  width: 7em;
}
.ui-field-contain-fix.em9 > label {
  width: 9em;
}
.ui-field-contain-fix > label + div {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}
.ui-field-contain-fix.em3 > label + div {
  padding-left: 3em;
}
.ui-field-contain-fix.em5 > label + div {
  padding-left: 5em;
}
.ui-field-contain-fix.em7 > label + div {
  padding-left: 7em;
}
.ui-field-contain-fix.em9 > label + div {
  padding-left: 9em;
}
/*
  Field Contain
*/
.ui-field-contain {
  border-bottom-width: 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  margin: 0;
}
.ui-field-contain .ui-flipswitch{
  margin-top: 0.2em;
}
/* Field Contain 28em Over */
@media (min-width: 28em) {
  .ui-field-contain.em3 > label,
  .ui-field-contain.em5 > label,
  .ui-field-contain.em7 > label,
  .ui-field-contain.em9 > label {
    float: left !important;
    margin-right: 0 !important;
    margin-top: 0.5em !important;
  }
  .ui-field-contain.em3 > label {
    width: 3em !important;
  }
  .ui-field-contain.em5 > label {
    width: 5em !important;
  }
  .ui-field-contain.em7 > label {
    width: 7em !important;
  }
  .ui-field-contain.em9 > label {
    width: 9em !important;
  }
    .ui-field-contain.em3 > label + div,
    .ui-field-contain.em5 > label + div,
    .ui-field-contain.em7 > label + div,
    .ui-field-contain.em9 > label + div {
      width: 100% !important;
      margin-top: -0.5em !important;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  .ui-field-contain.em3 > label + div {
    padding-left: 3em !important;
  }
  .ui-field-contain.em5 > label + div {
    padding-left: 5em !important;
  }
  .ui-field-contain.em7 > label + div {
    padding-left: 7em !important;
  }
  .ui-field-contain.em9 > label + div {
    margin-left: 9em !important;
    padding-right: 9em !important;
  }
}

固定幅はem指定で用意しましたがなんでもよいです

１０．ナビバー
とりあえず４個基本で幅がせまくなると２×２になります
これも必要とあらば逐次投入で
cm.css

/*
  Navbar
*/
.ui-navbar {
  clear: both;
  padding: 1px;
}
  .ui-navbar > .ui-btn {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: -0.35em;
    width: 25%;
  }
@media (max-width: 28em) {
  .ui-navbar > .ui-btn {
    width: 50%;
  }
}
.ui-page .ui-header > .ui-navbar > .ui-btn,
.ui-page .ui-footer > .ui-navbar > .ui-btn {
  border-width: 0;
}

１１．リストビュー
ボタンクリック対応やサムネイル画像中央化等々
cm.css

/*
  Listview
*/
ul.ui-listview{
  padding-right: 1px;
  padding-bottom: 1px;
}
  /* Listvew Split Button */
  ul.ui-listview.split > li > a,
  ul.ui-listview.split > li.ui-li-static {
    padding-right: 3em;  
  }
 ul.ui-listview.split .ui-btn.ui-btn-split {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 3em;
    height: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 1px;
    border-radius: 0;
    border-width: 0 0 0 1px;
    padding: 0.3em;
  }


/* Listview Thumb */
.ui-content ul.ui-listview:not(.ui-listview-inset) > li:first-child > a {
  border-top-width : 0;
}

ul.ui-listview > .ui-li-has-thumb > .ui-btn,
ul.ui-listview > .ui-li-has-thumb.ui-li-static {
  padding-left: 10em;
  min-height: 8em;
}

  ul.ui-listview > .ui-li-has-thumb > .ui-btn > img:first-child,
  ul.ui-listview > .ui-li-has-thumb.ui-li-static > img:first-child {
    max-width: 8em;
    max-height: 8em;
    left: 5em;        /* parent padding-left/2 */
    top: 4.7em;       /* (max-widht + parent padding-top&bottom)/2 */
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%,-50%);
  }
ul.ui-listview > li.ui-li-divider{
  text-shadow: none;
}

１２．その他
cm.css

/*
  Flipswitch
*/
.ui-page div.ui-flipswitch{
  font-weight: 400;
}
/*
  Input
*/
.ui-input-has-clear > input {
  border-right: 1px solid #ddd;
}

フリップスイッチと入力欄のクリアボタンの体裁を整えます