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.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
458
overrides/system.gaiamobile.org/lockscreen/style/lockscreen.css
Normal file
458
overrides/system.gaiamobile.org/lockscreen/style/lockscreen.css
Normal file
|
|
@ -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: image-set(url("./images/lockscreen_unlock.png") 1x, url("images/lockscreen_unlock@1.5x.png") 1.5x, url("images/lockscreen_unlock@2x.png") 2x, url("images/lockscreen_unlock@2.25x.png") 2.25x);
|
||||
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: image-set(url("./images/lockscreen_camera.png") 1x, url("images/lockscreen_camera@1.5x.png") 1.5x, url("images/lockscreen_camera@2x.png") 2x, url("images/lockscreen_camera@2.25x.png") 2.25x);
|
||||
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: image-set(url("./images/pin_camera.png") 1x, url("images/pin_camera@1.5x.png") 1.5x, url("images/pin_camera@2x.png") 2x, url("images/pin_camera@2.25x.png") 2.25x);
|
||||
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: image-set(url("./images/handle.png") 1x, url("images/handle@1.5x.png") 1.5x, url("images/handle@2x.png") 2x);
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue