webos-docs/style.css

/* Styled after the Enyo 1 "Style Matters" sampler (sdk.webosarchive.org/enyo1sampler) --
   gradient toolbar/header chrome, bold-caps blue divider labels with a hairline
   rule, circular disclosure toggles, and flat edge-to-edge list rows instead of
   boxed cards/buttons.

   Still written to work on ancient WebKit (TouchPad 3.0.5, Pre3 2.1) as well as
   modern browsers: no flexbox, no grid, no CSS variables, no rem units. */

/* keep any content image (Step 7/8 in particular) from overflowing a
   narrow screen, whatever inline size it declares */
#app img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
  background: #d7d7d5;
  color: #333333;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* Mobile-first: fluid, no cap, so Pre3 (480 wide) and anything narrower
   fills its whole screen. Wider viewports get progressively more room,
   breaking right at the Pre3 and TouchPad widths, capped before lines
   get uncomfortably long on a desktop monitor.

   .content-inner carries the width cap + centering and is reused inside
   #site-header and #site-footer, so their text keeps the same margins
   even though the header/footer bands themselves go full page width. */
.content-inner {
  margin: 0 auto;
}

@media (min-width: 481px) {
  .content-inner {
    max-width: 760px;
  }
}

@media (min-width: 1024px) {
  .content-inner {
    max-width: 1000px;
  }
  body {
    font-size: 17px;
  }
}

/* -- site header: mimics the Enyo gradient "Page Header" chrome -- */

#site-header {
  padding: 14px 0 12px 0;
  background-color: #d8d8d6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#c6c6c4));
  background-image: -webkit-linear-gradient(top, #eeeeee, #c6c6c4);
  background-image: linear-gradient(to bottom, #eeeeee, #c6c6c4);
  border-bottom: 1px solid #a8a8a6;
}

#site-header .content-inner,
#controls .content-inner,
#site-footer .content-inner {
  padding: 0 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* clearfix so the header's height includes the floated icon */
#site-header .content-inner {
  overflow: hidden;
}

#site-icon {
  float: left;
  width: 44px;
  height: 44px;
  margin: 0 12px 0 0;
}

/* overflow:hidden here (rather than a fixed margin-left) makes this
   box shrink to sit beside the floated icon without wrapping under
   it -- an old, widely-supported alternative to flexbox. Both floats
   above it in source order, so it correctly shrinks around both. */
.site-header-text {
  overflow: hidden;
}

/* Two copies of the same buttons (rendered once each by index.php):
   .header-actions-inline sits beside the title on wider screens, where
   there's room, via the same float-right-then-shrink-wrap trick as the
   icon above. .header-actions-stacked is a full-width row that drops
   below the title on narrow screens, so buttons never get squeezed
   into (or overlap) the title. Only one of the two is ever visible. */
.header-actions-inline {
  display: none;
}

.header-actions-stacked {
  clear: both;
  margin-top: 12px;
  text-align: right;
}

@media (min-width: 600px) {
  .header-actions-inline {
    display: block;
    float: right;
  }
  .header-actions-stacked {
    display: none;
  }
}

.header-btn {
  display: inline-block;
  vertical-align: middle;
  padding: 7px 14px 7px 8px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dcdcda));
  background-image: -webkit-linear-gradient(top, #f8f8f8, #dcdcda);
  background-image: linear-gradient(to bottom, #f8f8f8, #dcdcda);
  border: 1px solid #b3b3b1;
  border-radius: 5px;
  color: #333333;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

.header-actions-stacked .header-btn,
.header-actions-inline .header-btn {
  margin: 0 0 8px 10px;
}

.header-btn:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcda), to(#f8f8f8));
  background-image: -webkit-linear-gradient(top, #dcdcda, #f8f8f8);
  background-image: linear-gradient(to bottom, #dcdcda, #f8f8f8);
}

.header-btn img {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-right: 7px;
}

#site-header h1 {
  font-size: 23px;
  font-weight: normal;
  color: #333333;
  margin: 0 0 3px 0;
}

/* hidden by default so the header/icon row doesn't get cramped or wrap
   awkwardly beside the icon -- shown again once the header-actions
   buttons have already dropped to their own row (the same 600px
   breakpoint as .header-actions-inline), which leaves the title row
   enough width for the tagline too. A phone or a narrowed desktop
   window below that just get the title alone. */
#site-header .tagline {
  display: none;
  color: #5a5a5a;
  margin: 0;
  font-size: 14px;
}

@media (min-width: 700px) {
  #site-header .tagline {
    display: block;
  }
}

#controls {
  overflow: hidden;
  padding: 10px 0;
  background: #e3e3e1;
  border-bottom: 1px solid #bbbbb9;
}

#controls .content-inner {
  overflow: hidden;
}

.link-group {
  float: left;
  font-size: 13px;
}

.link-group a,
#resetLink {
  color: #4a76a8;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.link-group a {
  margin-right: 16px;
}

#resetLink {
  float: right;
  font-size: 13px;
}

/* device filter chip: sits below the toggle/reset row, holds the
   remembered device answer with its icon, and a link to remove it */
#deviceFilterBar {
  clear: both;
}

.filter-chip {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  background: #e3ebf3;
  border: 1px solid #b7c7d9;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  font-size: 13px;
  color: #333333;
}

.filter-chip-icon {
  max-height: 20px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}

.filter-chip .filter-clear {
  color: #4a76a8;
  text-decoration: underline;
  margin-left: 4px;
}

/* device icons on the Step 3 / Step 6 option rows */
.device-icon {
  float: left;
  max-height: 34px;
  width: auto;
  margin: 0 10px 4px 0;
}

#app {
  padding: 10px 16px 16px 16px;
}

/* -- step cards: flat panels, gradient header bands like a toolbar -- */

.step-card {
  background: #eeeeec;
  border: 1px solid #b9b9b7;
  margin-bottom: 14px;
}

.step-header {
  padding: 12px 14px;
  background-color: #d8d8d6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e9e9e7), to(#cccccb));
  background-image: -webkit-linear-gradient(top, #e9e9e7, #cccccb);
  background-image: linear-gradient(to bottom, #e9e9e7, #cccccb);
  border-bottom: 1px solid #b9b9b7;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
}

/* every step header is clickable to collapse/expand its body --
   right padding matches the base .step-header rule (14px), so the
   disclosure icon sits a reasonable distance from the edge instead
   of floating way inside it */
.step-header.clickable-header {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.step-header .summary-text {
  font-weight: normal;
  color: #555555;
}

/* disclosure toggle -- the actual Enyo "collapsible divider" arrow
   icon (cropped from the Onyx theme's divider-arrow.png sprite in the
   webOS SDK), not a Unicode glyph webOS's own browser may not have.
   Height comes from the #app img rule above (auto, aspect-preserving). */
.disclosure {
  float: right;
  width: 36px;
  margin-left: 8px;
  margin-top: 3px;
}

.step-body {
  padding: 14px;
}

/* -- question / option nodes -- */

.node-block {
  margin-bottom: 4px;
}

/* question text styled like the sampler's bold-caps blue divider labels
   with a hairline rule underneath */
.node-question {
  font-weight: bold;
  font-size: 15px;
  color: #3a6288;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #b7c7d9;
}

.node-info {
  margin: 0 0 10px 0;
}

.node-info p {
  margin: 0 0 8px 0;
}

.node-info .note,
.leaf-content .note {
  color: #7a5a20;
  font-style: italic;
  margin: 0 0 8px 0;
}

/* noticeable callout box -- for a warning/tip that needs to stand out
   without reading as a section header (see .node-question for that) */
.callout {
  background: #fbf1dc;
  border: 1px solid #d9b96c;
  border-left: 4px solid #b8860b;
  color: #5c4813;
  padding: 10px 12px;
  margin: 0 0 12px 0;
}

.callout a {
  color: #4a76a8;
  text-decoration: underline;
}

.opt-list {
  margin: 0 0 4px 0;
  border-top: 1px solid #c9d9ea;
}

/* option rows look like flat webOS list rows, not boxed buttons --
   full width, disclosure chevron on the right. A light blue tint and
   left accent bar mark them as tappable against the monotone gray
   chrome; picking one switches it to the pale-green "chosen" look
   below instead of collapsing the row away. */
.opt-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 30px 12px 10px;
  margin: 0;
  background: #eaf3fb;
  border: none;
  border-left: 3px solid #7aa8d8;
  border-bottom: 1px solid #c9d9ea;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 15px;
  color: #333333;
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.opt-btn:active {
  background: #cfe1f2;
}

/* the chosen option stays in the list (never collapses away) --
   pale green marks it as settled, distinct from the blue "you can
   pick this" tint on the rest. Picking a different option just moves
   this class to that row instead. The pulse (.settle, added by
   app.js) plays only on the row that was *just* chosen -- an
   already-chosen row re-rendered because something deeper changed
   shouldn't replay it. */
.opt-btn.chosen {
  background: #e9f5e9;
  border-left: 3px solid #6faa74;
  border-bottom-color: #cfe4cf;
}

.opt-btn.chosen.settle {
  -webkit-animation: wosaSettle 300ms ease-out;
  animation: wosaSettle 300ms ease-out;
}

.opt-btn.chosen:active {
  background: #cfe9cf;
}

/* once this question has an answer, its other options recede to a
   neutral gray -- still fully readable and clickable (pick one to
   switch), just no longer competing with the green "chosen" row for
   attention the way the blue "you can pick this" tint would */
.opt-btn.dimmed {
  background: #e4e4e2;
  border-left: 3px solid #b5b5b3;
  border-bottom-color: #d3d3d1;
  color: #666666;
}

.opt-btn.dimmed:active {
  background: #d3d3d1;
}

/* the actual Enyo menu-item arrow icon, cropped from menuitem-arrow.png
   in the webOS SDK, in place of a Unicode chevron. Height comes from
   the #app img rule above (auto, aspect-preserving). */
.opt-btn .chevron {
  float: right;
  width: 10px;
  margin-left: 8px;
  margin-top: 4px;
}

/* primary "continue" action -- a rounded gradient button, like the
   sampler's toolbar Back button, tinted with the accent blue */
.continue-btn {
  display: inline-block;
  padding: 9px 16px;
  margin: 4px 0;
  background-color: #5b90c4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7aa8d8), to(#4a7fb8));
  background-image: -webkit-linear-gradient(top, #7aa8d8, #4a7fb8);
  background-image: linear-gradient(to bottom, #7aa8d8, #4a7fb8);
  color: #ffffff;
  border: 1px solid #3a6699;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
}

.continue-btn:active {
  background-color: #3a6699;
  background-image: none;
}

/* EXPERIMENTAL: entrance animation for content that appears after
   answering a question, so it settles/reveals instead of snapping
   into place. Plain CSS `animation` (not `transition`) so it plays on
   insertion even though we render by replacing innerHTML wholesale --
   no "before" DOM state needed.

   .reveal / .reveal-next are applied by app.js only to the elements
   that are genuinely new as of the choice that was just made (see
   wosaAnimateFrom) -- everything at a shallower level re-renders
   without them, so already-visible content doesn't replay the
   entrance animation every time something deeper changes. */
@-webkit-keyframes wosaSettle {
  from { background-color: #cfe9cf; }
  to { background-color: #e9f5e9; }
}
@keyframes wosaSettle {
  from { background-color: #cfe9cf; }
  to { background-color: #e9f5e9; }
}

@-webkit-keyframes wosaReveal {
  from { opacity: 0; -webkit-transform: translateY(6px); }
  to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes wosaReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  -webkit-animation: wosaReveal 200ms ease-out both;
  animation: wosaReveal 200ms ease-out both;
}

.reveal-next {
  -webkit-animation: wosaReveal 200ms ease-out 100ms both;
  animation: wosaReveal 200ms ease-out 100ms both;
}

.leaf-content {
  padding: 2px 4px 10px 4px;
  margin: 0 0 8px 0;
}

.leaf-content p {
  margin: 0 0 8px 0;
}

.leaf-content ul,
.leaf-content ol,
.node-info ul,
.node-info ol {
  margin: 0 0 10px 0;
  padding-left: 22px;
}

.leaf-content li,
.node-info li {
  margin-bottom: 6px;
}

.leaf-content a,
.node-info a,
#site-footer a {
  color: #4a76a8;
  text-decoration: underline;
}

code {
  font-family: monospace;
  font-size: 13px;
  background: #dde3e8;
  padding: 1px 4px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

pre {
  background: #dde3e8;
  padding: 8px;
  margin: 0 0 10px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

pre code {
  background: none;
  padding: 0;
}

/* nested sub-questions get a light indent so the hierarchy is visible.
   Entrance animation (.reveal-next) is added by app.js only when this
   particular nested block is new as of the choice just made. */
.node-block .node-block {
  margin-left: 4px;
}

#site-footer {
  margin-top: 4px;
  padding: 14px 0;
  background: #e3e3e1;
  border-top: 1px solid #bbbbb9;
  font-size: 12px;
  color: #666666;
  text-align: center;
}