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;
}

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

#site-header .tagline {
  color: #5a5a5a;
  margin: 0;
  font-size: 14px;
}

#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: 28px;
  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, distinct from the settled look of .answered-summary. */
.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 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. Caveat: since a render rebuilds every
   step card, an already-open, unrelated step's content will also
   replay this on any interaction elsewhere on the page. Fine if only
   one step is open at a time; worth revisiting if "Expand all" makes
   it feel noisy. */
@-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); }
}

/* pale green marks a confirmed choice, distinct from the blue "you can
   pick this" tint on .opt-btn -- blue means pending, green means settled */
.answered-summary {
  padding: 10px 14px 10px 10px;
  background: #e9f5e9;
  border-left: 3px solid #6faa74;
  border-bottom: 1px solid #cfe4cf;
  margin-bottom: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-animation: wosaSettle 300ms ease-out;
  animation: wosaSettle 300ms ease-out;
}

/* text hint, not the expander icon -- reopening an answer to change it
   is a different action from collapsing/expanding a step */
.change-hint {
  float: right;
  color: #4a76a8;
  font-size: 12px;
  text-decoration: underline;
  margin-left: 8px;
}

.leaf-content {
  padding: 2px 4px 10px 4px;
  margin: 0 0 8px 0;
  -webkit-animation: wosaReveal 200ms ease-out both;
  animation: wosaReveal 200ms ease-out both;
}

.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,
   and reveal slightly after the leaf-content above them (a small
   cascade: answer settles, then the next question appears) */
.node-block .node-block {
  margin-left: 4px;
  -webkit-animation: wosaReveal 200ms ease-out 100ms both;
  animation: wosaReveal 200ms ease-out 100ms both;
}

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