diff options
Diffstat (limited to 'apps/system/style/lockscreen/lockscreen.css')
| -rw-r--r-- | apps/system/style/lockscreen/lockscreen.css | 623 |
1 files changed, 0 insertions, 623 deletions
diff --git a/apps/system/style/lockscreen/lockscreen.css b/apps/system/style/lockscreen/lockscreen.css deleted file mode 100644 index aadd881..0000000 --- a/apps/system/style/lockscreen/lockscreen.css +++ /dev/null @@ -1,623 +0,0 @@ -#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; -} |