Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/apps/system/style/lockscreen/lockscreen.css
diff options
context:
space:
mode:
Diffstat (limited to 'apps/system/style/lockscreen/lockscreen.css')
-rw-r--r--apps/system/style/lockscreen/lockscreen.css623
1 files changed, 623 insertions, 0 deletions
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;
+}