From 821413607a0718156f9d25d895e89b1c3d37aa8b Mon Sep 17 00:00:00 2001
From: Daniel Narvaez <dwnarvaez@gmail.com>
Date: Wed, 06 Feb 2013 13:49:14 +0000
Subject: Copy various bits from gaia

---
(limited to 'apps/system/style/lockscreen/lockscreen.css')

diff --git a/apps/system/style/lockscreen/lockscreen.css b/apps/system/style/lockscreen/lockscreen.css
new file mode 100644
index 0000000..aadd881
--- /dev/null
+++ b/apps/system/style/lockscreen/lockscreen.css
@@ -0,0 +1,623 @@
+#lockscreen {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #000;
+
+  -moz-user-select: none;
+
+  opacity: 1;
+
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease,
+    visibility 0.5s ease;
+}
+
+#screen.active-statusbar > #lockscreen {
+  top: 40px;
+  height: calc(100% - 40px);
+}
+
+#screen:not(.locked) > #lockscreen,
+#screen.lockscreen-camera > #lockscreen {
+  transform: scale(2);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+
+  transition-delay: 0.3s;
+}
+
+#screen.screenoff > #lockscreen,
+#screen.screenoff > #lockscreen * {
+  transition: none;
+}
+
+#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: 0.3s;
+}
+
+#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.uninit > * {
+  display: none;
+}
+
+#lockscreen.no-transition {
+  transition: none;
+}
+
+#lockscreen-container {
+  width: 100%;
+  height: 100%;
+
+  /**
+   * Workaround bug 823418 by trigger a repaint as soon as .screenoff class
+   * is removed, remove me when the bug is fixed.
+   */
+  transition: opacity 0.1s ease;
+}
+
+/**
+ * Workaround bug 823418 by trigger a repaint as soon as .screenoff class
+ * is removed, remove me when the bug is fixed.
+ */
+.screenoff #lockscreen-container {
+  opacity: 0.99;
+}
+
+.lockscreen-wallpaper {
+  position: absolute;
+}
+
+.lockscreen-panel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  visibility: hidden;
+  transition: visibility 0.5s ease, transform 0.5s ease;
+}
+
+[data-panel="main"] #lockscreen-panel-main,
+[data-panel="passcode"] #lockscreen-panel-passcode,
+[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
+  visibility: inherit;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-main {
+  transform: translateX(-100%);
+}
+
+#lockscreen h2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10rem;
+  margin: 0;
+  padding: 2.5rem 2.8rem;
+  -moz-box-sizing: border-box;
+  font-size: 3.2rem;
+  font-weight: normal;
+  line-height: 3.2rem;
+  text-shadow: 0 0 3px #333;
+
+  transform: translateY(-10rem);
+  transition: transform 0.3s ease;
+}
+
+#lockscreen-header {
+  z-index: 9999;
+  position: absolute;
+  top: 2rem;   /* 2rem = height of status bar */
+  left: 0;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  padding: 1.8rem 2.5rem 1.2rem 2.5rem;
+  color: #fff;
+  text-shadow: 0 0 3px #333;
+  transform: translateY(-10rem);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  opacity: 1;
+}
+
+[data-panel="passcode"] #lockscreen-header {
+  transform: translateY(0);
+  opacity: 0;
+}
+
+[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-connstate {
+  width: 100%;
+  display: inline-block;
+  font-family: 'MozTT', sans-serif;
+  font-weight: 400;
+  font-size: calc(6 * 0.226rem);
+  text-shadow: 1px 1px 3px #000000;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#lockscreen-connstate > span {
+  display: block;
+  padding-bottom: 1rem;
+  border-bottom: solid 1px rgba(256,256,256,.4);
+}
+
+#lockscreen-connstate > span:empty {
+  display: none;
+}
+
+#lockscreen-connstate.twolines > span:first-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+/* For some reason display: inline-block disregards hidden attribute */
+#lockscreen-connstate[hidden] {
+  display: none;
+}
+
+#lockscreen-mute {
+  float: right;
+  width: 4rem;
+  height: 4rem;
+  margin-top: 3.5rem;
+
+  background: transparent url('./images/mute.png') center center no-repeat;
+}
+
+#lockscreen-mute.vibration {
+  background: transparent url('./images/vibration.png') center center no-repeat;
+}
+
+.lockscreen-clock {
+  margin: -0.8rem 0 -1rem -0.4rem;
+  font-weight: 300;
+}
+
+#lockscreen-clock-numbers {
+  font-size: calc(28 * 0.226rem);
+}
+
+#lockscreen-clock-meridiem {
+  font-size: calc(17 * 0.226rem);
+}
+
+#lockscreen-date {
+  font-weight: 400;
+  font-size: calc(7 * 0.226rem);
+}
+
+.lockscreen-clock, #lockscreen-date {
+  font-family: 'MozTT', sans-serif;
+  text-shadow: 1px 1px 3px #000000;
+  color: #fff;
+}
+
+#lockscreen-area {
+  position: absolute;
+  height: 11.2rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.lockscreen-icon-area {
+  width: calc(50%);
+  height: 12rem;
+  position: absolute;
+  border-style: none;
+  opacity: 0.1;
+  transition: opacity 0.5s ease;
+}
+
+.lockscreen-icon {
+  margin-top: 2rem;
+  border-radius: 3rem;
+  width: 6rem;
+  height: 6rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  -moz-box-sizing: border-box;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  pointer-events: none;
+}
+
+.lockscreen-icon-area:active > .lockscreen-icon {
+  background-color: rgb(0, 138, 170);
+}
+
+.touched .lockscreen-icon {
+  transition: none;
+}
+
+.lockscreen-icon-a11y-button {
+  width: 100%;
+  height: 100%;
+  border-width: inherit;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.lockscreen-icon-a11y-button * {
+  display: none;
+}
+
+.lockscreen-icon.triggered {
+  background-color: #52b6cc !important;
+  border-color: #52b6cc;
+}
+
+.lockscreen-icon-right {
+  right: 0;
+}
+
+.lockscreen-icon-left {
+  left: 0;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+:-moz-any(.touched, .triggered, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
+:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
+  display: none;
+  animation: none;
+}
+
+.lockscreen-icon-right > .lockscreen-icon {
+  margin-right: 4rem;
+  margin-left: auto;
+}
+
+.lockscreen-icon-left > .lockscreen-icon {
+  margin-left: 4rem;
+  margin-right: auto;
+}
+
+#lockscreen-area-unlock > div {
+  background-image: url('./images/icon-unlock.png');
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#lockscreen-area-camera > div {
+  background-image: url('./images/icon-camera.png');
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-passcode {
+  transform: translateX(-100%);
+}
+
+[data-panel="passcode"] h2#lockscreen-passcode-status {
+  visibility: inherit;
+  transform: none;
+}
+
+[data-panel="emergency-call"] h2#lockscreen-passcode-status {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-code {
+  position: absolute;
+  bottom: 21.4rem;
+  height: 7rem;
+  width: 100%;
+  background-color: rgba(49, 60, 70, 0.9);
+  margin: 0;
+  padding: 0 1rem;
+  -moz-box-sizing: border-box;
+  border-top: 1px solid #525050;
+  visibility: hidden;
+  transform: translateY(calc(21.4rem + 7.2rem));
+  transition: visibility 0.3s ease, transform 0.3s ease;
+}
+
+[data-passcode-status="success"] #lockscreen-passcode-pad,
+[data-passcode-status="success"] #lockscreen-passcode-code {
+  transform: translateY(calc(21.4rem + 7.2rem)) !important;
+}
+
+[data-passcode-status="success"] #lockscreen-passcode-status {
+  transform: translateY(-10rem) !important;
+}
+
+[data-panel="passcode"] #lockscreen-passcode-code {
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+[data-panel="emergency-call"] #lockscreen-passcode-code {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-code > span {
+  -moz-box-sizing: border-box;
+  display: block;
+  float: left;
+  width: calc(25% - 1rem);
+  margin: 1.5rem 0.5rem;
+  height: calc(100% - 3rem);
+  text-align: center;
+  background-color: #fff;
+  border-radius: 0.5rem;
+
+  position: relative;
+}
+
+[data-passcode-status="error"] #lockscreen-passcode-code > span {
+  border: 0.1rem #B70404 solid;
+}
+
+[data-passcode-status="error"] #lockscreen-passcode-code > 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 {
+  -moz-box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  height: 21.4rem;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  visibility: hidden;
+  transform: translateY(calc(21.4rem + 7em));
+  transition: visibility 0.3s ease, transform 0.3s ease;
+}
+
+[data-panel="passcode"] #lockscreen-passcode-pad {
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+[data-panel="emergency-call"] #lockscreen-passcode-pad {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-pad > a {
+  -moz-box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 33.333%;
+  height: 5rem;
+  border-top: 1px solid #525050;
+  border-bottom: 1px solid #000000;
+  border-left: 1px solid #525050;
+  border-right: 1px solid #000000;
+  outline: none;
+  padding: 0 2rem;
+
+  font-size: 3.2rem;
+  font-weight: 500;
+  line-height: 5rem;
+
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 0 3px #000;
+}
+
+#lockscreen-passcode-pad > a:nth-child(3n+1):not([data-key="b"]) {
+  border-left: none;
+}
+
+#lockscreen-passcode-pad > a.last-row {
+  height: 6.4rem;
+}
+
+#lockscreen-passcode-pad > a > span {
+  pointer-events: none;
+  font-size: 1.2rem;
+  padding: 1.2rem;
+  color: #9aaabc;
+}
+
+.passcode-entered #lockscreen-passcode-pad > a[data-key="c"] {
+  display: none;
+}
+
+#lockscreen-passcode-pad > a[data-key="b"] {
+  display: none;
+  background: url(images/icon-clear.png) no-repeat center center;
+}
+
+.passcode-entered #lockscreen-passcode-pad > a[data-key="b"] {
+  display: block;
+  text-align: left;
+  text-indent: -9999px;
+}
+
+#lockscreen-passcode-pad > a:active {
+  background-color: #00aacd;
+  color: #fff;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad > a:active > span {
+  color: #fff;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func {
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.6rem;
+  padding: 1rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+#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;
+  border-top: 1px solid transparent;
+  top: -2rem;
+  height: 0.9rem;
+  width: 100%;
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
+}
+
+#lockscreen-icon-container {
+  position: absolute;
+  width: 100%;
+  bottom: -8rem;
+  height: 10rem;
+  pointer-events: none;
+  border-top: 1px solid #989898;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 20%);
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
+}
+
+.touched #lockscreen-icon-container {
+  transition: none;
+}
+
+.touched #lockscreen-area-handle {
+  transition: none;
+}
+
+.touched .lockscreen-icon-area {
+  transition: none;
+}
+
+.triggered #lockscreen-icon-container {
+  transform: translateY(-8rem);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.triggered #lockscreen-area-handle {
+  transform: translateY(-1rem);
+  opacity: 0;
+}
+
+.triggered .lockscreen-icon-area {
+  opacity: 1;
+}
+
+@keyframes lockscreen-elastic {
+  0%, 40%, 75%, 97% {
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+  20% {
+    transform: translateY(-5rem);
+    animation-timing-function: ease-in;
+  }
+  55% {
+    transform: translateY(-2.3rem);
+    animation-timing-function: ease-in;
+  }
+  85% {
+    transform: translateY(-0.5rem);
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes lockscreen-elastic-icon {
+  0%, 40%, 75%, 97% {
+    opacity: 0.1;
+    animation-timing-function: ease-out;
+  }
+  20% {
+    opacity: 0.5;
+    animation-timing-function: ease-in;
+  }
+  55% {
+    opacity: 0.4;
+    animation-timing-function: ease-in;
+  }
+  85% {
+    opacity: 0.3;
+    animation-timing-function: ease-in;
+  }
+}
+
+.elastic .lockscreen-icon-area {
+  animation: lockscreen-elastic-icon 2.5s 1;
+}
+
+.elastic #lockscreen-icon-container {
+  animation: lockscreen-elastic 2.5s 1;
+}
--
cgit v0.9.1