Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/clock/style/alarm.css

@@ -0,0 +1,339 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+#alarm-name {
+  margin-bottom: 1rem;
+}
+
+ul.compact {
+  padding: 1rem 1.5rem;
+  font-size: 1.5rem;
+}
+
+ul.compact li {
+  position: relative;
+  min-height: 5rem;
+  padding-top: 1rem;
+  border-top: 0.1rem solid #232626;
+}
+
+ul.compact li:first-child {
+  border: none;
+}
+
+ul.compact li:last-child {
+  margin-bottom: 1rem;
+}
+
+ul.compact li label {
+  padding: 0 1.5rem 0.5rem;
+  color: #9a9898;
+  font-size: 1.6rem;
+  display: block;
+}
+
+ul.compact li label:active {
+  background-color: transparent;
+}
+
+#alarm-new {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  margin-top: 2.1rem;
+  margin-right: 1.5rem;
+
+  background: url(images/add_alarm.png) no-repeat center / 3rem;
+  background-size: 100% auto;
+}
+
+#edit-alarm {
+  overflow-x: hidden;
+  height: calc(100% - 7rem);
+
+  pointer-events: auto;
+}
+
+#alarm-volume-input {
+  width: 100%;
+  margin: 1rem 0 1.5rem;
+}
+
+.new #delete-menu {
+  display: none;
+}
+
+#time-select {
+  /* Bug 1117652: copypaste bubble would be triggered if tapping or longpressing
+                  on the input field, so we let the cursor out of the screen to
+                  prevent it. */
+  text-indent: 110%;
+}
+
+/**
+ * 1. COMPLEX: Scoped style-sheets within <gaia-header>
+ * trump all other rules. !important is required
+ * for an app to over-ride the default appearance
+ * of content within the custom-element. This may
+ * change when we get `:host` and `:content` selectors
+ * in shadow-dom.
+ */
+
+section[role="region"] > gaia-header h1.edit-alarm-title {
+  display: block !important; /* 1 */
+}
+section[role="region"] > gaia-header h1.new-alarm-title {
+  display: none !important; /* 1 */
+}
+section[role="region"].new > gaia-header h1.edit-alarm-title {
+  display: none !important; /* 1 */
+}
+section[role="region"].new > gaia-header h1.new-alarm-title {
+  display: block !important; /* 1 */
+}
+
+/* ----------- Alarm List ---------- */
+#alarms {
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: auto;
+  max-height: calc(100% - 22rem);
+
+  background-color: transparent;
+  background-image: none;
+  overflow-y: auto;
+}
+
+ul#alarms li.alarm-cell:before {
+  content: "";
+  position: absolute;
+  left: 1.5rem;
+  width: calc(100% - 3rem);
+  height: .1rem;
+  background-color: rgba(115, 125, 128, 0.2);
+}
+
+ul#alarms li.alarm-cell { /* 6rem, including a 0.13rem border */
+  position: relative;
+  height: 6rem;
+}
+
+ul#alarms li.alarm-cell > a:active {
+  background-color: rgba(52,140,158, .6);
+}
+
+ul#alarms li.alarm-cell > a:active {
+  color: #cfe2e5;
+}
+
+ul#alarms li.alarm-cell label:active {
+  background-color: transparent;
+}
+
+#alarms .alarmEnable {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+
+  width: calc(8.13rem);
+  height: 100%;
+}
+
+#alarms .alarmEnable input[type="checkbox"] + span {
+  position: absolute;
+  top: calc(50% - 1.7rem);
+  right: 1.5rem;
+
+  width: 3.4rem;
+  height: 3.4rem;
+  margin: 0;
+
+  background: url(images/alarm_off.png) no-repeat center top / 3.4rem;
+}
+#alarms .alarmEnable input[type="checkbox"]:checked + span {
+  border-color: #00acce;
+  background: url(images/alarm_on.png) no-repeat center top / 3.4rem;
+}
+
+#alarms .alarmEnable > input {
+  display: none;
+}
+
+#alarms a.alarm-item {
+  position: relative;
+  padding: 0;
+  height: 100%;
+  display: block;
+  text-decoration: none;
+  font: lighter 1.4rem sans-serif;
+  color: #737D80;
+}
+
+#alarms a.alarm-item:active {
+  background-color: transparent;
+}
+
+a.alarm-item > span {
+  pointer-events: none;
+}
+
+a.alarm-item > .time {
+  position: absolute;
+  top: 1.0rem;
+  left: 1.7rem;
+  font-size: 2.8rem;
+  font-family: sans-serif;
+  font-weight: 300;
+  color: #cfe2e5;
+}
+
+a.alarm-item small {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #5C6466;
+}
+
+a.alarm-item > .label {
+  position: absolute;
+  left: 12.5rem;
+  right: 4.5rem;
+  top: 2.35rem;
+  font-family: sans-serif;
+  font-weight: normal;
+  color: #737D80;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+a.alarm-item > .repeat {
+  position: absolute;
+  top: 4.2rem;
+  left: 1.7rem;
+  font-family: sans-serif;
+  font-weight: normal;
+  text-overflow: ellipsis;
+  color: #A1B0B2;
+}
+
+a.alarm-item.with-repeat > .time {
+  top: 0.3rem;
+}
+
+a.alarm-item.with-repeat > .label {
+  top: 1.65rem;
+}
+
+a.alarm-item.with-repeat > .repeat {
+  top: 3.6rem;
+}
+
+#digital-clock.visible ~ #alarms.count4 li:first-child {
+  background: none;
+}
+
+
+/**
+ * These range input values were taken from the System App and
+ * retooled for the dark theme currently used by Clock. When
+ * changing to a light theme in the UI overhaul, it may make
+ * sense to pull this directly from System again.
+ */
+
+input[type=range] {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+}
+
+input[type=range]:-moz-focusring {
+  outline: none;
+}
+
+ul li > label input[type="range"] {
+  position: relative;
+  top: calc(50% - 1.5rem);
+  left: 5rem;
+  right: 7rem;
+  height: 3rem;
+  width: calc(100% - 15rem);
+}
+
+input[type=range]::-moz-range-track {
+  height: 0.1rem;
+  background-color: #7e7e7e;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 0.3rem;
+  background-color: #01c5ed;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 2.8rem;
+  height: 2.8rem;
+  border: solid 0.1rem transparent;
+  border-radius: 3rem;
+  transition: border 0.15s ease;
+  -moz-box-sizing: border-box;
+  background: #fff no-repeat 50% 50%;
+  background-size: 2.8rem 2.8rem;
+}
+
+input[type=range]:active::-moz-range-thumb {
+  border: solid 0.4rem #01c5ed;
+}
+
+#alarm-delete {
+  border-radius: 2rem;
+  background-color: #e51e1e;
+  text-align: center;
+}
+
+/* RTL View */
+html[dir=rtl] #alarm-new {
+  margin-left: 1.5rem;
+  left: 0;
+  right: auto;
+}
+html[dir=rtl] #alarms .alarmEnable {
+  left: 0;
+  right: auto;
+}
+
+html[dir=rtl] a.alarm-item > .time {
+  left: auto;
+  right: 1.7rem;
+
+}
+html[dir=rtl] a.alarm-item > .label {
+  left: 4.5rem;
+  right: 12.5rem;
+}
+html[dir=rtl] a.alarm-item > .repeat {
+  left: auto;
+  right: 1.7rem;
+}
+html[dir=rtl] a.alarm-item > .repeat {
+  left: auto;
+  right: 1.7rem;
+}
+html[dir=rtl] #alarms .alarmEnable input[type="checkbox"] + span {
+  left: 1.5rem;
+  right: auto;
+}

gaia/apps/clock/style/clock.css

@@ -0,0 +1,189 @@
+@import url('../shared/style/input_areas.css');
+@import url('../shared/style/buttons.css');
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  color: white;
+  font-size: 10px;
+  background-color: #000;
+  -moz-user-select: none;
+}
+
+/* Absolutely-positioned elements don't inherit -moz-user-select. */
+#clock-tabs {
+  -moz-user-select: none;
+}
+
+#clock-view {
+  width: 100%;
+  height: calc(100% - 0.13rem);
+
+  color: black;
+}
+
+.visible {
+  display: block;
+}
+
+#clock-time {
+  letter-spacing: -0.5rem;
+  font-weight: 300;
+  font-size: 11rem;
+  color: #CFE2E6;
+  pointer-events: none;
+}
+
+#clock-time small {
+  font-weight: 300;
+  font-size: 3.7rem;
+  color: #5C6466;
+  text-transform: uppercase;
+  pointer-events: none;
+  position: relative;
+}
+
+#clock-day-date {
+  font-weight: 300;
+  font-size: 2.1rem;
+  margin: 2.6rem 0 0 1.5rem;
+  line-height: 1.7rem;
+  position: absolute;
+  color: #737D80;
+  width: 100%;
+  top: 0;
+}
+
+#clock-day-date b {
+  font-weight: normal;
+  color: #A1B0B2;
+}
+
+/* digital clock */
+#digital-clock {
+  display: none;
+  margin-top: 6.50rem;
+  height: 100%;
+}
+
+#digital-clock.visible {
+  display: block;
+}
+
+#digital-clock-face {
+  font-weight: 300;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  margin: auto;
+}
+
+/* analog clock */
+#analog-clock {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+#analog-clock.visible {
+  display: block;
+}
+
+/* Make sure the rotating hand elements are never clickable outside of our box */
+#analog-clock-container {
+  pointer-events: none;
+  overflow: hidden;
+}
+
+#analog-clock-container.large {
+  width: 27rem;
+  height: 27rem;
+  margin: 6.9rem auto 0;
+}
+
+#analog-clock-container.medium {
+  width: 21.8rem;
+  height: 21.8rem;
+  margin: 6.8rem auto 0;
+}
+
+#analog-clock-container.small {
+  width: 14.8rem;
+  height: 14.8rem;
+  margin: 5.8rem auto 0;
+}
+
+#analog-clock-face {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  background-image: url('images/analog_clock_face.svg');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+#analog-clock-hands {
+  position: absolute;
+  z-index: 2;
+
+  width: 100%;
+  height: 100%;
+  margin-top: 1.5%; /* to correctly snap the hands to the face */
+}
+
+.analog-clock-hand {
+  position: absolute;
+  z-index: 2;
+
+  width: 100%;
+  height: 100%;
+
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+#secondhand {
+  background-image: url('images/analog_clock_second_hand.svg');
+}
+
+#minutehand {
+  background-image: url('images/analog_clock_minute_hand.svg');
+}
+
+#hourhand {
+  background-image: url('images/analog_clock_hour_hand.svg');
+}
+
+/* banner*/
+#banner-countdown {
+  z-index: -1;
+  opacity: 0;
+  -moz-transition: opacity 600ms ease;
+}
+#banner-countdown.visible {
+  z-index: 1;
+  opacity: 1;
+}
+
+#banner-countdown strong {
+  white-space: nowrap;
+}
+
+/* localization */
+body.hidden *[data-l10n-id] {
+  visibility: hidden;
+}
+
+.hide {
+  display: none;
+}
+
+/* RTL View */
+html[dir=rtl] #clock-day-date {
+  margin-left: 0;
+  margin-right: 1.5rem;
+}

gaia/apps/clock/style/form_button.css

@@ -0,0 +1,4 @@
+.form-button-hide {
+  position: absolute;
+  opacity: 0;
+}

gaia/apps/clock/style/hacks.css

@@ -0,0 +1,17 @@
+/**
+ * Clock Hacks: Place any temporary, horrible, or otherwise sad
+ * but depressingly needed CSS hacks in this file. Review this
+ * file regularly to see if any of these temporary fixes can later
+ * be removed.
+ *
+ * NOTE: This file is included after all other styles, so that
+ * you can override other styles without using !important.
+ */
+
+
+/* This tab override CSS should be removed when you change the app
+   layout to correctly use the BB tabs CSS. See bug 1017398. */
+.bb-tablist > li > a[aria-selected="true"] {
+  color: #0AC;
+  font-weight: 500;
+}

gaia/apps/clock/style/images/analog_clock_hour_hand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="236.713" height="245.966" viewBox="0 0 236.713 245.966"><path d="m 159.5,216.193 c 1.61,0 3.029,-0.813 3.873,-2.05 -0.028,-25.928 -0.304,-49.834 -0.755,-69.356 -1.028,-0.099 -2.064,-0.169 -3.118,-0.169 -1.054,0 -2.09,0.07 -3.118,0.169 -0.451,19.522 -0.727,43.428 -0.755,69.356 0.844,1.237 2.263,2.05 3.873,2.05 z" fill="#b7c4c6" fill-rule="evenodd" transform="translate(-41.209 -84.004)"/></svg>

gaia/apps/clock/style/images/analog_clock_minute_hand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="236.713" height="245.966" viewBox="0 0 236.713 245.966"><path d="m 162.453,226.531 c -0.123,-40.105 -0.493,-75.388 -1.017,-100.614 -0.643,-0.024 -1.286,-0.049 -1.936,-0.049 -0.649,0 -1.292,0.025 -1.935,0.049 -0.524,25.221 -0.894,60.493 -1.017,100.586 -0.032,0.096 -0.054,0.193 -0.054,0.294 0,0.911 1.345,1.649 3.004,1.649 1.659,0 3.004,-0.738 3.004,-1.649 0,-0.091 -0.023,-0.179 -0.049,-0.266 z" fill="#b6c4c6" fill-rule="evenodd" transform="translate(-41.209 -84.004)"/></svg>

gaia/apps/clock/style/images/analog_clock_second_hand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="236.713" height="245.966" viewBox="0 0 236.713 245.966"><path d="m 158.93,122.507 -0.359,107.722 c 0.31,0.005 0.617,0.023 0.929,0.023 0.312,0 0.619,-0.018 0.93,-0.023 l -0.359,-107.722 c -0.191,-0.002 -0.379,-0.014 -0.57,-0.014 -0.192,-10e-4 -0.38,0.012 -0.571,0.014 z" fill="#53929e" fill-rule="evenodd" transform="translate(-41.209 -84.004)"/></svg>

gaia/apps/clock/style/onring.css

@@ -0,0 +1,159 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden !important;
+  background-image: url(images/attention_background.png);
+  background-size: 100% 100%;
+  -moz-user-select: none;
+}
+
+html {
+  visibility: hidden;
+}
+
+html.ready {
+  visibility: visible;
+}
+
+.ring-display {
+  position: fixed;
+
+  width: calc(100% - 1.50rem);
+  height: calc(100% - 1.38rem);
+  padding: 0.75rem 0.75rem 0.63rem;
+}
+
+#ring-icon {
+  width: 48%;
+  height: 34%;
+  left: 26%;
+  top: 8%;
+  background-image: url(images/onring.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+}
+
+#ring-clock {
+  width: 100%;
+  height: 100%;
+  color: #fbfbfb;
+  text-align: center;
+}
+
+#ring-clock-display {
+  width: 95%;
+  margin-top: 44%;
+  border-bottom: 0.13rem solid rgba(122, 122, 122, 0.65);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#ring-clock-time {
+  font-weight: 300;
+  font-size: 3.13rem;
+  line-height: 5.63rem;
+  width: 100%;
+}
+
+#ring-label {
+  font-weight: 300;
+  font-size: 2.50rem;
+  line-height: 3.25rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 6.5rem; /* span 2 lines, twice the line-height */
+  margin-top: 1.2rem;
+  margin-left: 0.7rem;
+  margin-right: 0.7rem;
+}
+
+#footer-button-container {
+  display: flex;
+  padding: 0.5rem;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: url(images/attention_button_container.png);
+  background-size: 100% 100%;
+  border-top: 0.1rem solid rgba(255, 255, 255, 0.1);
+  position: absolute;
+}
+
+#footer-button-container button {
+  flex: 1;
+  margin: 0.5rem;
+}
+
+.ring-display[data-ring-type="timer"] #ring-button-snooze {
+  display: none;
+}
+
+/* 320x480 phones */
+@media (orientation: portrait) and (width: 320px),
+       (orientation: landscape) and (width: 480px) {
+  html {
+    font-size: 10px;
+  }
+}
+
+/* 480x800 phones */
+@media (orientation: portrait) and (width: 480px),
+       (orientation: landscape) and (width: 800px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+/* Handling the status bar mode */
+@media screen and (max-height: 4em) {
+  #ring-icon {
+    width: 4rem;
+    height: 4rem;
+    left: 0.4rem;
+    top: 0;
+    background-image: url('images/attention_overlay_icon.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+  }
+
+  #ring-clock {
+    text-align: left;
+  }
+
+  #ring-clock-display {
+    position: absolute;
+    bottom: 0.3rem;
+    left: 5rem;
+    border-bottom: none;
+  }
+
+  #ring-clock-time {
+    font-weight: bolder;
+    font-size: 1.38rem;
+    line-height: 1.38rem;
+  }
+
+  #ring-clock-time small {
+    display: none;
+  }
+
+  #ring-label {
+    position: absolute;
+    top: 0.5rem;
+    left: 5rem;
+    font-weight: bolder;
+    font-size: 1.31rem;
+    line-height: 1.44rem;
+    color: #00aac8;
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    height: 1.5rem;
+  }
+
+  #footer-button-container {
+    display: none;
+  }
+}

gaia/apps/clock/style/picker/picker.css

@@ -0,0 +1,237 @@
+/* ----------------------------------
+ * Picker
+ * ---------------------------------- */
+
+/* Main dialog setup */
+[data-type="picker"] {
+  overflow: hidden;
+  padding: 0 0 0 0;
+}
+
+[data-type="picker"] h1 {
+  font-weight: 400;
+  font-size: 1.9rem;
+  line-height: 4.8rem;
+  color: #fff;
+  border-bottom: 0.1rem solid #616262;
+  background: rgba(0 ,0, 0, .2);
+  margin: 0;
+  padding: 0 3rem 1rem;
+  height: 4.8rem;
+  -moz-box-sizing: border-box;
+}
+
+/* Time Selector */
+[data-type="picker"] .picker-container {
+  -moz-box-sizing: border-box;
+  position: relative;
+  width: calc(100% - 5.5rem);
+  height: 22.5rem;
+  margin: 1.8rem auto;
+  padding-top: 8.8rem;
+  border-left:  0.1rem solid #111;
+  border-right: 0.1rem solid #111;
+  overflow: hidden;
+  border: 1px solid black;
+}
+
+[data-type="picker"] .picker-labels {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  z-index: 2;
+}
+
+[data-type="picker"] .picker-label {
+  background: #333;
+  height: 3rem;
+  font-size: 1.4rem;
+  line-height: 3rem;
+  text-align: center;
+  width: 50%;
+}
+
+[data-type="picker"] #hours {
+  float: left;
+}
+
+[data-type="picker"] #minutes {
+  float: right;
+}
+
+[data-type="picker"] .picker-bar-background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(100% / 2);
+  height: 100%;
+}
+
+#time-picker.picker-bar-background {
+  display: none;
+}
+
+[data-type="picker"] .picker-hours-wrapper,
+[data-type="picker"] .picker-minutes-wrapper {
+  -moz-box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% / 2);
+  height: 100%;
+  padding-top: 8.3rem;
+}
+
+[data-type="picker"] .picker-hours-wrapper {
+  border-right: solid 0.2rem;
+  -moz-border-right-colors: #1d1d1d #4a4a4a;
+}
+
+[data-type="picker"] .picker-minutes-wrapper {
+  left: calc(100% / 2);
+}
+
+[data-type="picker"] .picker-hours-wrapper,
+[data-type="picker"] .picker-minutes-wrapper,
+[data-type="picker"] .picker-bar-background {
+  width: 50%;
+}
+
+/*[data-type="picker"] .picker-minutes-wrapper {
+  left: auto;
+  right: 0;
+  border: none;
+}*/
+
+
+[data-type="picker"] .picker-hours,
+[data-type="picker"] .picker-minutes {
+  -moz-user-select: none;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+[data-type="picker"] .value-indicator {
+  position: absolute;
+  width: 100%;
+  height: 4.6rem;
+  background-color: #00A5C5;
+  box-shadow: 0 0 0.7rem rgba(0,0,0, .4);
+  opacity: .99;
+  pointer-events: none;
+}
+
+[data-type="picker"] .value-indicator-colon {
+  float: left;
+  position: relative;
+  width: calc(100% / 2);
+  height: 100%;
+  font: 2.2rem/4.4rem Sans-serif;
+  text-align: right;
+  background-color: #00A5C5;
+  pointer-events: none;
+}
+
+
+[data-type="picker"] .value-indicator-period {
+  float: left;
+  position: relative;
+  width: calc(100% / 2);
+  height: 100%;
+  font: 2.2rem/4.4rem Sans-serif;
+  text-align: right;
+  background-color: #00A5C5;
+  pointer-events: none;
+}
+
+
+
+
+[data-type="picker"] .animation-on {
+  transition-duration: var(--transition-duration);
+  transition-property: transform;
+}
+
+[data-type="picker"]  .picker-unit {
+  position: relative;
+  font: 2.2rem/5.6rem Sans-serif;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  width: 100%;
+  height: 5.6rem;
+  pointer-events: none;
+}
+
+
+/* Menu & buttons setup */
+[data-type="picker"] menu {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(/style/picker/images/ui/pattern.png) repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+[data-type="picker"] menu button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+[data-type="picker"] menu button {
+  width: calc((100% - 1rem) / 2);
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(/style/picker/images/ui/default.png) repeat-x left bottom/ auto 100%;
+  border: 0.1rem solid #a6a6a6;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  font-size: 1.6rem;
+  line-height: 3.8rem;
+  color: #333;
+  text-align: center;
+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Press (default & affirmative) */
+[data-type="picker"] menu button:active,
+[data-type="picker"] menu button.affirmative:active {
+  border-color: #008aaa;
+  color: #333;
+}
+
+/* affirmative */
+[data-type="picker"] menu button.affirmative {
+  background-image: url(/style/picker/images/ui/affirmative.png);
+  background-color: #00caf2;
+  border-color: #008eab;
+}
+
+[data-type="picker"] menu button:last-child {
+  margin-left: 1rem;
+}
+
+[data-type="picker"] menu button,
+[data-type="picker"] menu button:first-child {
+  margin: 0;
+}
+
+[data-type="picker"] menu button.full {
+  width: 100%;
+}

gaia/apps/clock/style/picker/value_selector.css

@@ -0,0 +1,32 @@
+#value-selector {
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  display: block;
+}
+
+#value-selector[hidden] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#screen.active-statusbar #value-selector {
+  height: calc(100% - 4rem);
+  top: 4rem;
+}
+
+#screen:-moz-full-screen-ancestor #value-seletcor,
+#screen.fullscreen-app #value-selector {
+  height: 100%;
+  top: 0;
+}
+
+#value-selector-container li > label {
+  pointer-events: none;
+}
+
+.value-picker > *[data-disabled="true"] {
+  visibility: hidden;
+}

gaia/apps/clock/style/stopwatch.css

@@ -0,0 +1,83 @@
+[data-panel-id="stopwatch"] {
+  text-align: center;
+}
+
+.stopwatch-time {
+  margin: 4rem 0 1rem 0;
+
+  color: #CFE2E6;
+  font-weight: 300;
+  font-variant-numeric: tabular-nums;
+  font-size: 8.6rem;
+  letter-spacing: -0.5rem;
+  pointer-events: none;
+}
+
+/**
+ * When the stopwatch shows over 100 minutes, it becomes extra wide.
+ * Tweak the font size to compensate.
+ */
+.stopwatch-time.over-100-minutes {
+  font-size: 8rem;
+}
+
+#stopwatch-controls {
+  display: flex;
+  padding: 0;
+  margin: 2rem 1rem 0;
+}
+
+#stopwatch-controls button {
+  flex: auto;
+  height: 3.8rem;
+  line-height: 3.6rem;
+  margin: 0 0.5rem;
+}
+
+.stopwatch-laps {
+  position: absolute;
+  bottom: 0;
+
+  width: 90%;
+  height: calc(100% - 23rem);
+  padding: 0 1.5rem 0 1.5rem;
+
+  background-color: transparent;
+  background-image: none;
+  overflow-y: auto;
+}
+
+.stopwatch-laps li.lap-cell {
+  position: relative;
+
+  display: block;
+  height: 4.5rem;
+  padding: 1.5rem 0 0 0;
+  border-top: 1px solid rgba(115, 125, 128, 0.2);
+
+  color: #CFE2E6;
+  font: 2.5rem sans-serif;
+  font-weight: 300;
+  text-decoration: none;
+}
+
+.lap-name {
+  float: left;
+}
+
+.lap-duration {
+  float: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 300;
+}
+
+@media (min-width: 768px) {
+  #stopwatch-controls {
+    width: auto;
+  }
+
+  #stopwatch-controls button {
+    float: none;
+    width: 40%;
+  }
+}

gaia/apps/clock/style/timer.css

@@ -0,0 +1,85 @@
+#timer-view {
+  width: 100%;
+  height: calc(100% - 4rem);
+}
+
+#timer-time {
+  letter-spacing: -0.5rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 300;
+  font-size: 8.6rem;
+  color: #CFE2E6;
+  pointer-events: none;
+  margin-top: 14rem;
+}
+
+#timer-time-display {
+  text-align: center;
+  position: absolute;
+  height: 11rem;
+  width: 100%;
+  margin: auto;
+}
+
+#timer-dialog {
+  position: absolute;
+  width: 100%;
+  overflow-y: auto;
+}
+
+#timer-active {
+  z-index: 1;
+  background-size: 100% 100%;
+  visibility: hidden;
+}
+
+#timer-dialog.hidden + #timer-active {
+  visibility: visible;
+}
+
+#timer-controls {
+  display: flex;
+  margin: 2rem 1rem 0;
+  padding: 0;
+}
+
+#timer-controls button {
+  height: 3.8rem;
+  margin: 0 0.5rem;
+  flex: auto;
+}
+
+#timer-create {
+  text-align: center;
+  background-color: #00caf2;
+  color: #fff;
+  border-radius: 2rem;
+}
+
+#timer-plus-time {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  margin-right: 3rem;
+  margin-bottom: 3rem;
+}
+
+#timer-plus-time button {
+  background: #101111;
+  border: none;
+  color: #CFE2E6;
+  font: 2.5rem sans-serif;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+@media (min-width: 768px) {
+  #timer-controls {
+    width: auto;
+  }
+
+  #timer-controls button {
+    float: none;
+  }
+}

gaia/apps/clock/style/views.css

@@ -0,0 +1,106 @@
+/* View */
+#views {
+  background-color: #101111;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#main-panel-wrapper {
+  position: relative;
+  height: calc(100% - 4.6rem);
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.panel {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+
+  background-color: #101111;
+  color: #fff;
+}
+
+.panel.active {
+  z-index: 1;
+}
+
+.hidden {
+  display: none;
+}
+
+.slide-in-left {
+  animation-duration: var(--transition-duration);
+  animation-name: slide-in-left;
+}
+.slide-in-right {
+  animation-duration: var(--transition-duration);
+  animation-name: slide-in-right;
+}
+.slide-out-left {
+  animation-duration: var(--transition-duration);
+  animation-name: slide-out-left;
+}
+.slide-out-right {
+  animation-duration: var(--transition-duration);
+  animation-name: slide-out-right;
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* RTL View */
+html[dir=rtl] .slide-in-left {
+  animation-name: slide-in-right;
+}
+html[dir=rtl] .slide-in-right {
+  animation-name: slide-in-left;
+}
+html[dir=rtl] .slide-out-left {
+  animation-name: slide-out-right;
+}
+html[dir=rtl] .slide-out-right {
+  animation-name: slide-out-left;
+}