1 files changed, 250 insertions, 0 deletions
diff --git a/apps/system/emergency-call/style/dialer.css b/apps/system/emergency-call/style/dialer.css
new file mode 100644
index 0000000..7a3519a
--- /dev/null
+++ b/apps/system/emergency-call/style/dialer.css
@@ -0,0 +1,250 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  color: white;
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+  background: black;
+}
+
+a {
+  outline: 0;
+}
+
+a:hover, a:active, a:focus {
+  outline: 0;
+}
+
+html * {
+  overflow: hidden;
+}
+
+.font-regular {
+  font-family: 'MozTT';
+}
+
+.font-semibold {
+  font-family: 'MozTT';
+  font-weight: 600;
+}
+
+.font-light {
+  font-family: 'MozTT';
+}
+
+.contact-primary-info {
+  font-size: -moz-calc(15*0.226rem);
+  color: black;
+}
+
+.contact-secondary-info {
+  font-size: -moz-calc(6*0.226rem);
+  color: white;
+}
+
+.grid-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-v-align {
+  vertical-align: middle;
+}
+
+.grid-row {
+  display: table-row;
+}
+
+.grid-cell {
+  display: table-cell;
+}
+
+.grid {
+  display: table;
+  table-layout: fixed;
+}
+
+.center {
+  text-align: center;
+}
+
+#views {
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#views > *[role=tabpanel] {
+  height: 100%;
+  width: 100%;
+}
+
+body.hidden *[data-l10n-id] {
+  visibility: hidden;
+}
+
+/* Call screen */
+#call-screen {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 10px;
+  background: black;
+  -moz-transform: translateY(-100%);
+  z-index: 100;
+
+  -moz-transition: -moz-transform 0.5s ease;
+}
+
+#call-screen.displayed {
+  -moz-transform: translateY(0);
+}
+
+#main-container {
+  position: relative;
+  height: 100%;
+  background: transparent;
+}
+
+#actions-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 15.5rem;
+}
+
+#call-options {
+  height:9.5rem;
+}
+
+#co-advanced {
+  opacity: 1.0;
+  height: 9.5rem;
+}
+
+.co-advanced-option {
+  background: rgba(0,0,0,.8);
+  height: 9.5rem;
+  width: 100%;
+  border: 0;
+  border-top: 1px solid #3A3A3A;
+  border-bottom: 1px solid #3A3A3A;
+  border-right: 1px solid #3A3A3A;
+}
+
+#co-advanced span.grid-cell:last-child .co-advanced-option {
+  border-right: 0px;
+}
+
+#speaker span {
+  display:inline-block;
+  background-color: #DDD;
+  background:url('images/ActionIcon_40x40_bluetooth.png') ;
+  background-size: 4rem 4rem;
+  width:4rem;
+  height:4rem;
+  opacity: 1.0;
+}
+
+#speaker.speak  > span {
+  background:url('images/ActionIcon_40x40_bluetooth_active.png');
+}
+
+#callbar {
+  background:rgba(0,0,0,.8);
+  opacity: 1.0;
+}
+
+#callbar-hang-up {
+  float: left;
+  height: 6.5rem;
+  width: 100%;
+}
+
+.callbar-button {
+  height: 4rem;
+  border:0;
+  border-radius:.3rem;
+  display: block;
+}
+
+#callbar-hang-up-action {
+  background: -moz-linear-gradient(top, #ff0000 1%, #ce0000 100%);
+  opacity: 1.0;
+  margin: 1rem .5rem 1.5rem 1.5rem;
+}
+
+#callbar-hang-up.full-space > #callbar-hang-up-action {
+  margin: 1rem 1.5rem 1.5rem 1.5rem;
+}
+
+#callbar-hang-up-action > div {
+  margin: 0 auto;
+  background-image: url('images/ActionIcon_40x40_hangup.png');
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+  width: 4rem;
+  height: 4rem;
+}
+
+#calls {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 22rem;
+
+  z-index: 500;
+}
+
+#calls > section {
+  position: relative;
+  height: 9rem;
+
+  font-size: 1.8em;
+  line-height: 7rem;
+  background-color: #01c5ed;
+
+  transition: opacity 0.3s linear;
+  opacity: 1;
+}
+
+#calls > section div {
+  padding-left: 2rem;
+  padding-right: 1.5rem;
+}
+
+#calls > section .number {
+  height: 4rem;
+  padding: 2rem 2rem 0 2rem;
+  background: #01c5ed;
+  font-size: 1.6em;
+  line-height: 4rem;
+  color: black;
+}
+
+#calls > section .additionalContactInfo {
+  height: 2rem;
+  padding: 0 2rem 2rem 2rem;
+  background: #01c5ed;
+  font-size: 1.4rem;
+  line-height: 2rem;
+  color: white;
+}
+
+#calls > section .duration {
+  position: absolute;
+  top: 12rem;
+  left: 0;
+  height: 8rem;
+  padding: 2rem;
+  font-size: 2.6em;
+  font-weight: 300;
+  line-height: 8rem;
+}