タブレット用に『Cardy』を改造してみた

WorkFlowyをカード形式にするスタイル『Cardy』をタブレット用に改造しました。

元ネタ：WorkFlowyをカードスタイルで使うと別アプリみたい Cardy - W&R : Jazzと読書の日々

改造といっても少し変えたくらいで、タブレットならではのポイントは

• 横向きに持った時に画面一杯になると見にくいので最大幅を制限する
• パンくずリストが押しにくかったので分かりやすく
• トピックのフォントに合わせてbulletを大きく

くらいです。

▼実際のCSSがこちら

#header {
  background: black;
  position: absolute !important;
}
#documentView {
  background: gainsboro;
}
.page {
  max-width: 728px;
  background: none;
  margin: auto;
  padding: 4px 24px 0 8px;
  font-family: sans-serif;
}
.selected.project>.name {
  padding: 0;
  margin: 0 0 16px;
}
.project.selected>.name .content {
  font-weight: bold;
  font-size: 100%;
}
.project.selected>.children>.project {
  background: white;
  padding: 4px;
  margin: -10px;
  margin-bottom: 24px;
  border-radius: 4px;
  margin-left: 0px;
  border: 1px solid silver;
}
.project.selected>.children>div>.name .content {
  font-weight: bold;
  padding-bottom: 8px;
}
.selected>.children>.project>.children .project>.name>.content {
  padding-bottom: 4px;
}
.selected .project>.name>.content {
  font-size: 20px;
  line-height: 1.4em;
}
.contentUnderline {
  text-decoration: none;
  background: linear-gradient(transparent 60%, #ffff66 60%);
}
.contentTag,
.contentTagText {
  text-decoration: none !important;
}
.contentTag[title*=na] {
  color: salmon;
}
.contentTag[title*=bm] {
  color: goldenrod;
}
.contentTag[title*=id] {
  color: limegreen;
}
a[href*="workflowy.com/#"] {
  color: #3d9cd7 !important;
}
a[href*="evernote://"] {
  color: #2dbe60 !important;
}
span.contentUnderline.contentItalic {
  display: none !important;
}
.bullet {
  background-image: none;
}
.bullet,
#bulletBucket .bulletBucketBullet {
  background: silver;
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
.project.open>.name>.bullet {
  border: 2px silver solid;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}
.selected>.children>.project>.name>.bullet,
.selected>.children>.project .project>.name>.bullet {
  top: 4px;
}
.children {
  position: relative;
  margin: 0px;
  border: 0px;
}
.selected>.children>.project .project {
  margin: 0px;
  border-top: 1px solid gainsboro;
  padding-bottom: 4px;
}
.selected {
  border-top: none !important;
}
.selected.project {
  padding-top: 16px;
}
.parent>.name>.content {
  background: white;
  margin-right: 4px;
  padding: 6px 8px;
  font-size: 18px;
  border: 1px solid silver;
}
.parent>.name>.parentArrow:before {
  margin: 0 8px;
}
.selected .project>.name>.parentArrow {
  top: 6px;
}
.selected .project .childrenEnd {
  margin-bottom: 8px;
}
.project.highlighted::before,
.project.moving::before,
.project.tapped::before,
.draggableNameClone::before {
  background: none !important;
}
#moveDropLine {
  background: silver;
}

上記のCSSを「Stylenote」などを使って登録してください。文字サイズや色、幅なんかは自分仕様に変えて使ってくださいませ。

▼ 適用するとこんな感じになります

ハイパーリンク化やリンク先での色変更など細かい調整はしつつ、極力シンプルにしたつもりです。使い慣れたCardyならではの感触を、タブレットでも味わいましょう :)