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/system/lockscreen/style/lockscreen.css

@@ -0,0 +1,458 @@
+/**
+ * NOTICE: This file should be kept in sync with
+ * callscreen/style/lockscreen.css
+ **/
+
+/**
+ * BiDi note: because this stylesheet is 'scoped', instead of:
+ *     html[dir="rtl"] #volume { ... }
+ * we must use:
+ *     #volume:-moz-dir(rtl) { ... }
+ */
+
+#lockscreen {
+  --panel-transition-secs: var(--transition-duration);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  visibility: visible;
+  -moz-user-select: none;
+}
+
+#screen.active-statusbar > #lockscreen {
+  top: 4rem;
+  height: calc(100% - 4rem);
+}
+
+#lockscreen.unlocked {
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/**
+ * Because of performance issue, we need to use an individual
+ * background element instead of setting the background inside the container.
+ *
+ * This would be a step toward removing the overhead while a large container
+ * contains children and do the opacity animation, which would cost lot on
+ * temporary surfaces.
+ **/
+#lockscreen-background, #lockscreen-masked-background {
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+
+  /* Must match the CSS background rule of #screen in system.css */
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+
+  -moz-user-select: none;
+  opacity: 1;
+  z-index: 1;
+}
+
+#lockscreen-background {
+  background-color: #000;
+  background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
+  background-position: 50% 50%;
+}
+
+#lockscreen-masked-background {
+  background-size: 100% 100%;
+  transition: background-image var(--transition-duration) ease,
+              background-color var(--transition-duration) ease;
+}
+
+#lockscreen-masked-background.blank {
+  background: rgba(0,0,0,0.1);
+}
+
+#screen.lockscreen-camera > #lockscreen-camera {
+  visibility: visible;
+}
+
+/* When switching lock-camera off,
+ * transition time should be delayed to prevent homescreen appears.
+ * (Let lockscreen appears first)
+ */
+#screen:not(.lockscreen-camera) > #lockscreen-camera {
+  transition-delay: var(--transition-duration);
+}
+
+#lockscreen-camera {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  visibility: hidden;
+}
+
+#lockscreen-camera > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#lockscreen.no-transition {
+  transition: none;
+}
+
+#lockscreen-container {
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+#lockscreen .lockscreen-panel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  visibility: hidden;
+  transition: visibility var(--panel-transition-secs) ease, transform var(--panel-transition-secs) ease;
+}
+
+.lockscreen-background::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/**
+ * Because of the individual background element, the slide would appear
+ * after the passcode pad got invoked, so we need to hide it here.
+ */
+[data-panel="passcode"] #notifications-lockscreen-container,
+[data-panel="passcode"] #lockscreen-notification-arrow,
+[data-panel="passcode"] #lockscreen-media-container,
+[data-panel="passcode"] #lockscreen-icon-container {
+  visibility: hidden;
+}
+
+[data-panel="main"] #lockscreen-panel-main,
+[data-panel="passcode"] #lockscreen-panel-main,
+[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
+  visibility: inherit;
+}
+
+[data-panel="main"] #lockscreen-alt-camera {
+  visibility: hidden;
+  position: absolute;
+}
+
+[data-panel="passcode"] #lockscreen-alt-camera.lockscreen-icon {
+  opacity: 1.0;
+}
+
+#lockscreen-header {
+  z-index: 9999;
+  position: absolute;
+  top: 3rem;   /* 3rem = height of status bar */
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1.5rem 2.4rem 0;
+  color: #fff;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  opacity: 1;
+}
+
+[data-panel="main"] #lockscreen-header {
+  transform: translateY(0);
+}
+
+[data-panel="camera"] #lockscreen-header,
+[data-panel="emergency-call"] #lockscreen-header {
+  transform: translateY(0);
+  transition: none;
+}
+
+#lockscreen-conn-states {
+  width: 100%;
+  display: inline-block;
+  font-weight: 300;
+  font-size: 1.4rem;
+  padding-bottom: 1.4rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#lockscreen-conn-states span:empty {
+  display: none;
+}
+
+#lockscreen-conn-states span:first-child {
+  display: inline-block;
+  margin-inline-end: 0.8rem;
+}
+
+#lockscreen-conn-states span:last-child {
+  display: block;
+}
+
+/* For some reason display: inline-block disregards hidden attribute */
+#lockscreen-conn-states span[hidden],
+#lockscreen-conn-states[hidden] {
+  display: none;
+}
+
+#lockscreen-clock-time {
+  line-height: 0.9;
+  margin: -1.4rem 0 0;
+  margin-inline-start: -0.4rem;
+  font-weight: 200;
+  font-size: 8.5rem;
+}
+
+#lockscreen-date {
+  display: inline-block;
+}
+#lockscreen-date, #lockscreen-alarm {
+  font-weight: 300;
+  font-size: 1.4rem;
+}
+
+#lockscreen-alarm::after {
+  content: ' ';
+  top: 3px;
+  background-image: url('./images/alarm_icon.png');
+  background-repeat: no-repeat;
+  background-size: 1.5rem;
+  width: 15px;
+  display: inline-block;
+  height: 15px;
+  position: relative;
+}
+
+.has-alarm {
+  display: inline-block;
+}
+.no-alarms {
+  display: none;
+}
+
+#lockscreen-clock-time, #lockscreen-date, #lockscreen-alarm {
+  color: #fff;
+}
+
+#lockscreen-charging {
+  font-weight: 300;
+  font-size: 1.2rem;
+  color: white;
+}
+
+#lockscreen-area {
+  position: absolute;
+  height: 8.6rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+}
+
+#lockscreen .lockscreen-icon-area {
+  height: 10rem;
+  position: absolute;
+  border-style: none;
+  transition: opacity var(--panel-transition-secs) ease;
+}
+
+#lockscreen .lockscreen-icon {
+  width: 6rem;
+  height: 6rem;
+  pointer-events: none;
+}
+
+#lockscreen-area-slide {
+  text-align: center;
+  width: 100%;
+}
+
+#lockscreen .touched .lockscreen-icon {
+  transition: none;
+}
+
+#lockscreen .lockscreen-icon-right {
+  right: calc(50% - 14rem);
+}
+
+#lockscreen .lockscreen-icon-left {
+  left: calc(50% - 14rem);
+}
+
+@media (min-width:768px) {
+  #lockscreen .lockscreen-icon-right {
+    right: calc(50% - 20.5rem);
+  }
+
+  #lockscreen .lockscreen-icon-left {
+    left: calc(50% - 20.5rem);
+  }
+
+  #lockscreen-header {
+    padding-inline-start: 6rem;
+    font-weight: 300;
+  }
+
+  #lockscreen-date {
+    padding-top: 0.5rem;
+    font-size: 2.4rem;
+  }
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+:-moz-any(.touched, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
+:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
+  display: none;
+  animation: none;
+}
+
+#lockscreen-area-unlock > div {
+  background-image: url('./images/lockscreen_unlock.png');
+  background-position: 1.1rem center;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+  margin-top: 1.9rem;
+}
+
+#lockscreen .lockscreen-icon-left, .lockscreen-icon-right {
+  z-index: 16;
+  pointer-events: auto;
+}
+
+/* Compensation for the effects after enabling the pointer-event attribute. */
+#lockscreen .lockscreen-icon-left:active, .lockscreen-icon-right:active {
+  background: none;
+}
+
+#lockscreen-area-camera > div {
+  background-image: url('./images/lockscreen_camera.png');
+  background-position: 1.85rem center;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+  margin-top: 2rem;
+}
+
+#lockscreen-alt-camera.lockscreen-icon {
+  border-radius: 2.5rem;
+  background-color: rgba(255, 255, 255, 0.25);
+  box-sizing: border-box;
+  pointer-events: auto;
+  opacity: 0.1;
+  transition: opacity var(--panel-transition-secs) ease;
+  width: 5rem;
+  height: 5rem;
+  margin-top: 5rem;
+}
+#lockscreen-alt-camera.lockscreen-icon:-moz-dir(ltr) { float: right; }
+#lockscreen-alt-camera.lockscreen-icon:-moz-dir(rtl) { float: left; }
+
+#lockscreen-alt-camera-button {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  pointer-events: auto;
+  background-image: url('./images/pin_camera.png');
+  background-position: 1rem center;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+
+#lockscreen-panel-emergency-call {
+  /* > camera, unlock icons > canvas */
+  z-index: 32;
+}
+
+#lockscreen-panel-emergency-call {
+  transform: translateX(100%);
+}
+
+#lockscreen-panel-emergency-call::before {
+  content: none;
+}
+
+#lockscreen-panel-emergency-call > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
+  transform: translateX(0);
+}
+
+#lockscreen-area-handle {
+  position: absolute;
+  background-image: url('./images/handle.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 2rem;
+  border-top: 0.1rem solid transparent;
+  top: -2rem;
+  height: 0.9rem;
+  width: 100%;
+  transition:
+    transform var(--panel-transition-secs) ease,
+    opacity var(--panel-transition-secs) ease;
+}
+
+#lockscreen-icon-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 10rem;
+  pointer-events: none;
+  z-index: 5;
+}
+
+#lockscreen .touched #lockscreen-icon-container {
+  transition: none;
+}
+
+#lockscreen .touched .lockscreen-icon-area {
+  transition: none;
+}
+
+#lockscreen-canvas-wrapper {
+  position: absolute;
+  bottom: 0.75rem;
+  z-index: 8;
+  width: 100%;
+}
+
+#lockscreen-message {
+  position: relative;
+  top: 18rem;
+  offset-inline-start: 0;
+  word-wrap: break-word;
+  text-align: center;
+  overflow-y: auto;
+  line-height: 1.4rem;
+  z-index: 16;
+  margin: auto;
+  border-radius: 1rem;
+  border: 1px solid #e6e6e6;
+  padding: 5px;
+  width: 27rem;
+  min-height: 5rem;
+  max-height: 10rem;
+  background-color: #fafafa;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: black;
+}

gaia/apps/system/lockscreen/style/lockscreen_container_mask.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <mask id="solid_mask_top" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+    <rect x="0" y="0.04" width="1" height="0.96" fill="white" />
+  </mask>
+  <mask id="fade_mask_both" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+    <linearGradient id="fade_gradient_both" gradientUnits="objectBoundingBox" x2="0" y2="1">
+      <stop stop-color="white" stop-opacity="0" offset="0"></stop>
+      <stop stop-color="white" stop-opacity="1" offset="0.2"></stop>
+      <stop stop-color="white" stop-opacity="1" offset="0.8"></stop>
+      <stop stop-color="white" stop-opacity="0" offset="1"></stop>
+    </linearGradient>
+    <rect x="0" y="0" width="1" height="1" fill="url(#fade_gradient_both)"></rect>
+  </mask>
+</svg>

gaia/apps/system/lockscreen/style/lockscreen_fake_notification.css

@@ -0,0 +1,57 @@
+/**
+ * BiDi note: because this stylesheet is 'scoped', instead of:
+ *     html[dir="rtl"] #volume { ... }
+ * we must use:
+ *     #volume:-moz-dir(rtl) { ... }
+ */
+
+#lockscreen .fake-notification {
+  height: 6rem;
+  padding: 0 1.5rem;
+  font: 1.8rem/1.8rem auto;
+  color: #e7e7e7;
+  overflow: hidden;
+
+  border-bottom: .1rem solid rgba(255, 255, 255, .05);
+}
+
+#lockscreen .fake-notification [data-icon] {
+  width: 3rem;
+  height: 3rem;
+  margin: 1.5rem 0;
+}
+#lockscreen:-moz-dir(ltr) .fake-notification [data-icon] { float: left; }
+#lockscreen:-moz-dir(rtl) .fake-notification [data-icon] { float: right; }
+
+/* alert icon: white on red background */
+#lockscreen [data-icon].alert {
+  color: #fff;
+  background-color: #b90000;
+  border-radius: 50%;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 1.8rem 0;
+}
+
+#lockscreen [data-icon].alert:before {
+  overflow: hidden;
+  display: block;
+  border-radius: 50%;
+  font-size: 2rem; /* Slightly decreasing font-size to get the icon to fit in the circle */
+  margin-top: -0.2rem;
+  text-align: center;
+}
+
+#lockscreen .fake-notification .title-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#lockscreen .fake-notification .detail {
+  color: #858585;
+  font-size: 1.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

gaia/apps/system/lockscreen/style/lockscreen_frame.css

@@ -0,0 +1,15 @@
+html {
+  font-size: 10px;
+}
+
+body {
+  margin: 0;
+}
+
+#lockscreen-frame.hidden {
+  visibility: hidden;
+}
+
+#lockscreen-inputpad-frame.hidden {
+  visibility: hidden;
+}

gaia/apps/system/lockscreen/style/lockscreen_inputpad.css

@@ -0,0 +1,254 @@
+/**
+ * BiDi note: numeric passcodes are always displayed in LTR.
+ * This stylesheet must *NOT* be mirrored for RTL.
+ */
+
+#lockscreen-panel-passcode {
+  /* > camera, unlock icons > canvas */
+  z-index: 32;
+}
+
+#lockscreen-passcode-code {
+  position: absolute;
+  bottom: 20.4rem;
+  height: 7rem;
+  width: 100%;
+  background-color: rgba(51, 51, 51, 0.3);
+  margin: 0;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+#lockscreen-passcode-code > span {
+  box-sizing: border-box;
+  display: block;
+  float: left; /* BiDi-proof: passcodes are always LTR like all numbers */
+  width: calc(25% - 1rem);
+  margin: 1.5rem 0.5rem;
+  height: calc(100% - 3rem);
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0.5rem;
+  position: relative;
+}
+
+#lockscreen-passcode-code.error > span {
+  border: 0.1rem #B70404 solid;
+}
+
+#lockscreen-passcode-code.error > span[data-dot]::before {
+  background-color: #B70404;
+}
+
+#lockscreen-passcode-code > span[data-dot]::before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #3e3b39;
+  border-radius: 0.75rem;
+  top: 50%;
+  left: 50%;
+  margin-left: -0.75rem;
+  margin-top: -0.75rem;
+}
+
+#lockscreen-passcode-pad {
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  height: 20.4rem;
+  width: 100%;
+  background-color: #606b6e;
+}
+
+#lockscreen-passcode-pad > a {
+  box-sizing: border-box;
+  display: block;
+  float: left; /* BiDi-proof: passcodes are always LTR like all numbers */
+  width: 33.333%;
+  height: 5.1rem;
+  outline: none;
+  padding: 0; /* 2rem; */
+  font-size: 3.2rem;
+  font-weight: 400;
+  line-height: 4rem;
+  color: #fff;
+  text-decoration: none;
+}
+
+#lockscreen-passcode-pad > a > div {
+  height: calc(100% - 0.8rem);
+  margin-top: 0.4rem;
+  border-right-width: 0.1rem;
+  border-right-style: solid;
+}
+
+#lockscreen-passcode-pad > a:not(.lockscreen-passcode-pad-func) > div{
+  text-align: center;
+}
+
+#lockscreen-passcode-pad > a[data-key="3"] > div,
+#lockscreen-passcode-pad > a[data-key="6"] > div,
+#lockscreen-passcode-pad > a[data-key="9"] > div,
+#lockscreen-passcode-pad > a[data-key="c"] > div,
+#lockscreen-passcode-pad > a[data-key="b"] > div{
+  border-right: none;
+}
+
+#lockscreen-passcode-pad > a[data-key="b"] > div {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #abb0b1;
+  font-family: 'Keyboard Symbols', sans-serif;
+}
+
+#lockscreen-passcode-pad > a.last-row > div {
+  padding-top: 0.4rem;
+  height: calc(100% - 1.2rem);
+}
+
+#lockscreen-passcode-pad > a.last-row[data-key="e"] > div {
+  height: calc(100% - 1rem);
+}
+
+#lockscreen-passcode-pad > a.last-row:not([data-key="0"]) > div {
+  padding-top: 0.2rem;
+}
+
+#lockscreen-passcode-pad > a > div > span {
+  pointer-events: none;
+  font-size: 1.2rem;
+  padding: 0.4rem;
+  font-weight: 400;
+  color: #a6a6a6;
+}
+
+#lockscreen-passcode-pad.passcode-entered > a[data-key="c"] {
+  display: none;
+}
+
+#lockscreen-passcode-pad.passcode-entered > a[data-key="b"] {
+  display: block;
+}
+
+/* if not fufilled, show it is pressed */
+#lockscreen-passcode-pad:not(.passcode-fulfilled) > a.active-key {
+  background-color: #4a5255;
+  color: #00caf2;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad:not(.passcode-fulfilled) > a.lockscreen-passcode-pad-func.active-key > div > span{
+  color: #00caf2;
+}
+
+/* if it's fulfilled, don't change the background */
+#lockscreen-passcode-pad.passcode-fulfilled .row0 {
+  background-color: transparent;
+}
+
+#lockscreen-passcode-pad.passcode-fulfilled .row1,
+#lockscreen-passcode-pad .row1 {
+  background-color: #5b6668;
+}
+
+#lockscreen-passcode-pad.passcode-fulfilled .row2,
+#lockscreen-passcode-pad .row2 {
+  background-color: #566061;
+}
+
+#lockscreen-passcode-pad.passcode-fulfilled .row3,
+#lockscreen-passcode-pad .row3 {
+  background-color: #525c5e;
+}
+
+#lockscreen-passcode-pad .row0 > div{
+  border-right-color: #525b5e;
+}
+
+#lockscreen-passcode-pad .row1 > div {
+  border-right-color: #4c5657;
+}
+
+#lockscreen-passcode-pad .row2 > div {
+  border-right-color: #475052;
+}
+
+#lockscreen-passcode-pad .row3 > div {
+  border-right-color: #434b4d;
+}
+
+#lockscreen-passcode-pad > a.row0 > div,
+#lockscreen-passcode-pad > a.row1 > div,
+#lockscreen-passcode-pad > a.row2 > div {
+  margin-top: 0.4rem;
+}
+
+#lockscreen-passcode-pad > a.row0 > div > span,
+#lockscreen-passcode-pad > a.row1 > div > span,
+#lockscreen-passcode-pad > a.row2 > div > span {
+  display: block;
+  margin-top: -2.6rem;
+}
+
+#lockscreen-passcode-pad:not(.passcode-fulfilled) > a.active-key > div > span {
+  color: transparent;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func > div{
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func:after {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  overflow: hidden;
+  content: '';
+  vertical-align: middle;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func > div > span {
+  display: inline-block;
+  padding: 0;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.6rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func[data-key="e"] > div > span,
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func[data-key="c"] > div > span {
+  font-size: 1.3rem;
+  line-height: 1.4rem;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+#lockscreen-passcode-pad > a.disabled {
+  pointer-events: none;
+}
+
+#lockscreen-passcode-pad > a.disabled > div > span {
+  color: #4d4d4d;
+}
+
+
+#lockscreen-inputpad-frame .lockscreen-panel {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  /* while other components on LockScreen should be touchable,
+   * this one would capture the event. */
+  pointer-events: auto;
+}

gaia/apps/system/lockscreen/style/lockscreen_media_playback.css

@@ -0,0 +1,95 @@
+/**
+ * BiDi note: media controls are always displayed in LTR (hardware legacy).
+ * This stylesheet must *NOT* be mirrored for RTL.
+ */
+
+#lockscreen .media-playback-container {
+  height: auto;
+  padding: 0 1.8rem;
+}
+
+#lockscreen .media-playback-container.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+#lockscreen .media-playback-nowplaying {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  height: 2.4rem;
+}
+
+#lockscreen .media-playback-nowplaying > .track {
+  display: table-cell;
+  vertical-align: bottom;
+  padding: 0 1.5rem;
+  font: italic 1.4rem auto;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#lockscreen .media-playback-controls {
+  height: 5.6rem;
+  width: 100%;
+  overflow: hidden;
+  text-align: center;
+  font-size: 0; /* ensure there's no space between the buttons */
+}
+
+#lockscreen .media-playback-controls > [data-icon] {
+  width: calc(100% / 3);
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: #e7e7e7;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+#lockscreen .media-playback-controls > [data-icon]:before {
+  font-size: 4rem;
+  line-height: 5.6rem;
+}
+
+#lockscreen .media-playback-controls > .previous {
+  text-align: left;
+}
+
+#lockscreen .media-playback-controls > .next {
+  text-align: right;
+}
+
+#lockscreen .media-playback-controls > div {
+  /* Delay transition post tap by some milliseconds. */
+  transition: 0s var(--transition-duration);
+}
+
+[role="dialog"] #lockscreen .media-playback-controls > div:active,
+#lockscreen .media-playback-controls > div:active {
+  background-color: transparent;
+  color: #0ac;
+  transition: 0s;
+}
+
+/* Lock screen music player */
+#lockscreen-media-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 5rem;
+  background: rgba(51, 51, 51, 0.3);
+  z-index: 1;
+}
+
+/**
+ * BiDi note: player controls do not change in RTL, for hardware legacy reason:
+ * Forcing float: left
+ */
+#lockscreen #lockscreen-media-container .fake-notification [data-icon] {
+  float: left;
+}

gaia/apps/system/lockscreen/style/notifications.css

@@ -0,0 +1,375 @@
+/**
+ * BiDi note: because this stylesheet is 'scoped', instead of:
+ *     html[dir="rtl"] #volume { ... }
+ * we must use:
+ *     #volume:-moz-dir(rtl) { ... }
+ */
+
+ /* Individual style; to avoid utility tray patches to break lockscreen notitifications. */
+#notifications-lockscreen-container .notification {
+  position: relative;
+  height: 6rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.9rem;
+  border-top: 0.1rem solid transparent;
+  border-bottom: 0.1rem solid transparent;
+  outline: 0;
+}
+
+#notifications-lockscreen-container .notification:first-child {
+  border-top-color: black;
+}
+
+#notifications-lockscreen-container .notification div {
+  pointer-events: none;
+}
+:-moz-dir(ltr) #notifications-lockscreen-container .notification div {
+  text-align: left;
+}
+:-moz-dir(rtl) #notifications-lockscreen-container .notification div {
+  text-align: right;
+}
+
+#notifications-lockscreen-container .notification > div.title-container {
+  margin-top: 1rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  display: flex;
+}
+
+#notifications-lockscreen-container .notification > div {
+  width: calc(100% - 6.5rem);
+  margin-inline-start: 5rem;
+  color: #bfbfbf;
+  font-size: 1.4rem;
+  line-height: 1.9rem;
+  min-height: 1.9rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notifications-lockscreen-container .notification > img {
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: 1.5rem 1rem;
+  pointer-events: none;
+}
+:-moz-dir(ltr) #notifications-lockscreen-container .notification > img { float: left; }
+:-moz-dir(rtl) #notifications-lockscreen-container .notification > img { float: right; }
+
+#notifications-lockscreen-container .notification > div.title-container .title {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-inline-end: .5rem;
+}
+
+#notifications-lockscreen-container .notification.actionable {
+  /* Can't set border as none because it affects layout,
+   * so we do this to hide them */
+  border-color: rgba(0, 0, 0, 0);
+}
+
+#notifications-lockscreen-container .notification.actionable > div {
+  /* 18rem is the magic number to make sure it get truncated before the actionable button */
+  /* ideally it should be */
+  /*    width: calc(100% - var(--padleft-button) - var(--width-actionable-button)); */
+  /* but it would fail and make the content too short. */
+  width: 18rem;
+}
+
+#notifications-lockscreen-container .notification.actionable > div:first-of-type {
+  width: 18.5rem;
+}
+
+#notifications-lockscreen-container .notification.actionable .timestamp {
+  display: none;
+}
+
+#notifications-lockscreen-container .notification::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  top: -1.1rem;
+  offset-inline-start: 0;
+  height: 6rem;
+  background-color: rgba(51, 51, 51, 0.3);
+  z-index: -1;  /* make this as 'background' */
+  opacity: 0.0;
+  transition: opacity .25s ease-out;
+}
+
+#notifications-lockscreen-container .notification.actionable::before {
+  opacity: 1.0;
+  transition: opacity .25s ease-out;
+}
+
+/* for the border */
+#notifications-lockscreen-container .notification::after {
+  content: "";
+  position: absolute;
+  width: calc(100% - 4.8rem);
+  top: -1.1rem;
+  offset-inline-start: 0;
+  height: 6rem;
+  z-index: -1;  /* make this as 'background' */
+  border-top: none;
+  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
+  margin-inline-start: 2.4rem;
+}
+
+#notifications-lockscreen-container > div:last-child::after {
+  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.0);
+}
+
+/* since CSS don't have 'previous' selector */
+#notifications-lockscreen-container .notification.actionable::after,
+#notifications-lockscreen-container .notification.previous-actionable::after {
+  display: none;
+}
+
+#notifications-lockscreen-container .button-actionable {
+  border-inline-start: 0.1rem rgba(255, 255, 255, 0.15) solid;
+  color: rgba(0, 202, 242, 1);
+  display: inline-block;
+
+
+  font-size: var(--button-label-size);
+  font-family: "Fira Sans";
+  font-weight: normal;
+  font-style: italic;
+  position: absolute;
+
+  /* from the border line to the text */
+  padding-inline-start: var(--padleft-button);
+
+  /* 0.3rem is the magic number to make it (with the border) vertical-align: middle*/
+  top: 0.3rem;
+
+  /* 100% - the actionable area + the margin of the actionable area */
+  /* The 0.8rem is for alignment of the position of previous timestamp */
+  /* The 0.3rem is for centering the vertical bar of the button */
+  offset-inline-start: calc(100% - var(--width-actionable-button) + 1.4rem);
+  height: 3.5rem;
+  line-height: 3.3rem;  /* to make the lable vertical-align: middle */
+  transition-property: color, text;
+  transition-duration: 0.25s;
+  transition-timing-function: linear, ease-in;
+}
+
+/* When the notification be touched and the button has been tapped */
+#notifications-lockscreen-container .notification.actionable.activated  .button-actionable,
+#notifications-lockscreen-container .button-actionable.activated {
+  color: rgba(0, 202, 242, 0.2);
+}
+
+/* notifications */
+
+/* in "normal" mode (there is no widget)
+ * desired vertical position is centered in the space
+ * between date and slider
+ * for big screen, we allow four notifications,
+ * for small screen, we allow three notification
+ * that would be (for four notifications)
+ * (100% - 16.3rem (header) - 3rem (statusbar)
+ *  - 10rem (slider) - 24.6rem (4xNotifications height)) / 2
+ *  + 16.3rem + 3rem
+ */
+
+#notifications-lockscreen-container {
+  --width-actionable-button: 8.3rem;
+  --padleft-button: 1.1rem;
+  --button-label-size: 1.4rem;
+  z-index: 1;
+  position: absolute;
+  top: calc(50% - 7.65rem);
+  left: 0;
+  width: 100%;
+  height: 24.6rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  background-color: transparent;
+}
+
+/* in collapsed mode (there is a widget)
+ * desired vertical position is manually adjusted for big screen,
+ *  and for big screen we allow three notifications
+ * for small screen, we allow two notification; they are
+ * vertically centered between date and music player widget
+ */
+#notifications-lockscreen-container.collapsed {
+  top: calc(50% - 8.7rem);
+  height: 17.7rem;
+}
+
+#notifications-lockscreen-container.masked-both {
+  mask: url('lockscreen_container_mask.svg#fade_mask_both');
+}
+
+#notifications-lockscreen-container.masked-top {
+  mask: url('lockscreen_container_mask.svg#solid_mask_top');
+}
+
+#notifications-lockscreen-container.masked-top.top-actionable {
+  mask: none;
+}
+
+@media (max-height:480px) {
+ /* small screen, normal mode: for three notifications...
+  * (100% - 16.3rem (header) - 3rem (statusbar)
+  *  - 10rem (slider) - 18.8rem (3xNotifications height)) / 2
+  *  + 16.3rem + 3rem
+  */
+
+  #notifications-lockscreen-container {
+    top: calc(50% - 4.7rem);
+    height: 18.8rem;
+  }
+
+ /* small screen, collapsed mode: for one notification...
+  * manally adjusted according to UX; 1x Notification is 5.8rem
+  * UX specifies in bug 1023500 that the container should not be scrollable
+  * (so there is no mask either)
+  *
+  * Bug 1115921 specifies that in this condition, the notification should
+  * be vertically centered, thus 2.5rem which puts it in the middle
+  */
+  #notifications-lockscreen-container.collapsed {
+    top: calc(50% - 2.5rem);
+    height: 5.8rem;
+    overflow-y: hidden;
+  }
+
+  #notifications-lockscreen-container.collapsed.masked-top,
+  #notifications-lockscreen-container.collapsed.masked-both {
+    mask: none;
+  }
+}
+
+#notifications-lockscreen-container .notification {
+  position: relative;
+  background-color: transparent;
+  border-top: none;
+  /* delegate border to :after element while keeping layout correct */
+  border-bottom: 0.1rem solid rgba(0, 0, 0, 0);
+  height: 4.8rem;
+  margin: 0;
+  padding-inline-start: 2.4rem;
+  padding-inline-end: 2.4rem;
+  width: calc(100% - 4.8rem);
+}
+
+#notifications-lockscreen-container .notification:first-child {
+  border-top: none;
+}
+
+#notifications-lockscreen-container .notification:last-child {
+  border-bottom: none;
+  margin-bottom: 1.2rem;
+}
+
+#notifications-lockscreen-container.collapsed .notification:last-child {
+  margin-bottom: 0.05rem;
+}
+
+#notifications-lockscreen-container .notification > div {
+  width: calc(100% - 3.6rem);
+  margin-inline-start: 3.6rem;
+  color: #ffffff;
+}
+
+#notifications-lockscreen-container .notification > .title-container div:first-of-type {
+  width: calc(100% - 9.4rem);
+  font-size: 1.4rem;
+}
+
+#notifications-lockscreen-container .notification > div.detail {
+  margin-top: 0.2rem;
+}
+
+#notifications-lockscreen-container .notification > div.detail .detail-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notifications-lockscreen-container .notification > .title-container .timestamp {
+  margin-top: 0.1rem;
+  color: rgba(255, 255, 255, 0.6);
+
+  flex: initial;
+  top: -.2rem;
+  offset-inline-end: 1.5rem;
+  padding: 0;
+  max-width: 6.5rem;
+  font-size: 1.2rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notifications-lockscreen-container .notification > img {
+  margin-top: 0.8rem;
+  margin-inline-start: 0;
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+#lockscreen-notification-arrow {
+  width: calc(100% - 5.2rem);
+  height: 1.6rem;
+  background-image: url('./images/lockscreen_notification_arrow.png');
+  background-repeat: no-repeat;
+  background-position: calc(50% + 0.25rem) center;
+  /* hide it while we adjust no layout */
+  border-top: 0.1rem solid rgba(255, 255, 255, 0.0);
+
+  position: absolute;
+  z-index: 1;
+  background-size: 1.6rem 1.6rem;
+  margin: 0 2.4rem;
+
+  opacity: 0;
+  transition: opacity var(--transition-duration) ease;
+}
+:-moz-dir(ltr) #lockscreen-notification-arrow { left: 0; }
+:-moz-dir(rtl) #lockscreen-notification-arrow { right: 0; }
+
+#lockscreen-notification-arrow.visible {
+  opacity: 1;
+}
+
+/* please see how we calculate top and max-height of
+ * #notifications-lockscreen-container to place the arrow's top.
+ * the last offset in calc is to make sure hairlines align together,
+ * and is empirical values.
+ */
+#lockscreen-notification-arrow {
+  top: calc(50% - 7.65rem + 24.6rem - 1.2rem);
+}
+
+#lockscreen-notification-arrow.collapsed {
+  /* manually adjusted */
+  top: calc(50% - 8.7rem + 17.7rem - 0.05rem);
+}
+
+@media (max-height:480px) {
+  #lockscreen-notification-arrow {
+    top: calc(50% - 4.7rem + 18.8rem - 1.1rem);
+  }
+
+  #lockscreen-notification-arrow.collapsed {
+    /* UX specifies in bug 1023500 that the notifications
+       container should not be scrollable with collapsed */
+    display: none;
+  }
+}