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
|
|
@ -0,0 +1,375 @@
|
|||
/**
|
||||
* BiDi note: because this stylesheet is 'scoped', instead of:
|
||||
* html[dir="rtl"] #volume { ... }
|
||||
* we must use:
|
||||
* #volume:-moz-dir(rtl) { ... }
|
||||
*/
|
||||
|
||||
/* Individual style; to avoid utility tray patches to break lockscreen notitifications. */
|
||||
#notifications-lockscreen-container .notification {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.9rem;
|
||||
border-top: 0.1rem solid transparent;
|
||||
border-bottom: 0.1rem solid transparent;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification:first-child {
|
||||
border-top-color: black;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification div {
|
||||
pointer-events: none;
|
||||
}
|
||||
:-moz-dir(ltr) #notifications-lockscreen-container .notification div {
|
||||
text-align: left;
|
||||
}
|
||||
:-moz-dir(rtl) #notifications-lockscreen-container .notification div {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > div.title-container {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > div {
|
||||
width: calc(100% - 6.5rem);
|
||||
margin-inline-start: 5rem;
|
||||
color: #bfbfbf;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.9rem;
|
||||
min-height: 1.9rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > img {
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 1.5rem 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
:-moz-dir(ltr) #notifications-lockscreen-container .notification > img { float: left; }
|
||||
:-moz-dir(rtl) #notifications-lockscreen-container .notification > img { float: right; }
|
||||
|
||||
#notifications-lockscreen-container .notification > div.title-container .title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification.actionable {
|
||||
/* Can't set border as none because it affects layout,
|
||||
* so we do this to hide them */
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification.actionable > div {
|
||||
/* 18rem is the magic number to make sure it get truncated before the actionable button */
|
||||
/* ideally it should be */
|
||||
/* width: calc(100% - var(--padleft-button) - var(--width-actionable-button)); */
|
||||
/* but it would fail and make the content too short. */
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification.actionable > div:first-of-type {
|
||||
width: 18.5rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification.actionable .timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -1.1rem;
|
||||
offset-inline-start: 0;
|
||||
height: 6rem;
|
||||
background-color: rgba(51, 51, 51, 0.3);
|
||||
z-index: -1; /* make this as 'background' */
|
||||
opacity: 0.0;
|
||||
transition: opacity .25s ease-out;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification.actionable::before {
|
||||
opacity: 1.0;
|
||||
transition: opacity .25s ease-out;
|
||||
}
|
||||
|
||||
/* for the border */
|
||||
#notifications-lockscreen-container .notification::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: calc(100% - 4.8rem);
|
||||
top: -1.1rem;
|
||||
offset-inline-start: 0;
|
||||
height: 6rem;
|
||||
z-index: -1; /* make this as 'background' */
|
||||
border-top: none;
|
||||
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
|
||||
margin-inline-start: 2.4rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container > div:last-child::after {
|
||||
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.0);
|
||||
}
|
||||
|
||||
/* since CSS don't have 'previous' selector */
|
||||
#notifications-lockscreen-container .notification.actionable::after,
|
||||
#notifications-lockscreen-container .notification.previous-actionable::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .button-actionable {
|
||||
border-inline-start: 0.1rem rgba(255, 255, 255, 0.15) solid;
|
||||
color: rgba(0, 202, 242, 1);
|
||||
display: inline-block;
|
||||
|
||||
|
||||
font-size: var(--button-label-size);
|
||||
font-family: "Fira Sans";
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
|
||||
/* from the border line to the text */
|
||||
padding-inline-start: var(--padleft-button);
|
||||
|
||||
/* 0.3rem is the magic number to make it (with the border) vertical-align: middle*/
|
||||
top: 0.3rem;
|
||||
|
||||
/* 100% - the actionable area + the margin of the actionable area */
|
||||
/* The 0.8rem is for alignment of the position of previous timestamp */
|
||||
/* The 0.3rem is for centering the vertical bar of the button */
|
||||
offset-inline-start: calc(100% - var(--width-actionable-button) + 1.4rem);
|
||||
height: 3.5rem;
|
||||
line-height: 3.3rem; /* to make the lable vertical-align: middle */
|
||||
transition-property: color, text;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: linear, ease-in;
|
||||
}
|
||||
|
||||
/* When the notification be touched and the button has been tapped */
|
||||
#notifications-lockscreen-container .notification.actionable.activated .button-actionable,
|
||||
#notifications-lockscreen-container .button-actionable.activated {
|
||||
color: rgba(0, 202, 242, 0.2);
|
||||
}
|
||||
|
||||
/* notifications */
|
||||
|
||||
/* in "normal" mode (there is no widget)
|
||||
* desired vertical position is centered in the space
|
||||
* between date and slider
|
||||
* for big screen, we allow four notifications,
|
||||
* for small screen, we allow three notification
|
||||
* that would be (for four notifications)
|
||||
* (100% - 16.3rem (header) - 3rem (statusbar)
|
||||
* - 10rem (slider) - 24.6rem (4xNotifications height)) / 2
|
||||
* + 16.3rem + 3rem
|
||||
*/
|
||||
|
||||
#notifications-lockscreen-container {
|
||||
--width-actionable-button: 8.3rem;
|
||||
--padleft-button: 1.1rem;
|
||||
--button-label-size: 1.4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: calc(50% - 7.65rem);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 24.6rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* in collapsed mode (there is a widget)
|
||||
* desired vertical position is manually adjusted for big screen,
|
||||
* and for big screen we allow three notifications
|
||||
* for small screen, we allow two notification; they are
|
||||
* vertically centered between date and music player widget
|
||||
*/
|
||||
#notifications-lockscreen-container.collapsed {
|
||||
top: calc(50% - 8.7rem);
|
||||
height: 17.7rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container.masked-both {
|
||||
mask: url('lockscreen_container_mask.svg#fade_mask_both');
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container.masked-top {
|
||||
mask: url('lockscreen_container_mask.svg#solid_mask_top');
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container.masked-top.top-actionable {
|
||||
mask: none;
|
||||
}
|
||||
|
||||
@media (max-height:480px) {
|
||||
/* small screen, normal mode: for three notifications...
|
||||
* (100% - 16.3rem (header) - 3rem (statusbar)
|
||||
* - 10rem (slider) - 18.8rem (3xNotifications height)) / 2
|
||||
* + 16.3rem + 3rem
|
||||
*/
|
||||
|
||||
#notifications-lockscreen-container {
|
||||
top: calc(50% - 4.7rem);
|
||||
height: 18.8rem;
|
||||
}
|
||||
|
||||
/* small screen, collapsed mode: for one notification...
|
||||
* manally adjusted according to UX; 1x Notification is 5.8rem
|
||||
* UX specifies in bug 1023500 that the container should not be scrollable
|
||||
* (so there is no mask either)
|
||||
*
|
||||
* Bug 1115921 specifies that in this condition, the notification should
|
||||
* be vertically centered, thus 2.5rem which puts it in the middle
|
||||
*/
|
||||
#notifications-lockscreen-container.collapsed {
|
||||
top: calc(50% - 2.5rem);
|
||||
height: 5.8rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container.collapsed.masked-top,
|
||||
#notifications-lockscreen-container.collapsed.masked-both {
|
||||
mask: none;
|
||||
}
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
/* delegate border to :after element while keeping layout correct */
|
||||
border-bottom: 0.1rem solid rgba(0, 0, 0, 0);
|
||||
height: 4.8rem;
|
||||
margin: 0;
|
||||
padding-inline-start: 2.4rem;
|
||||
padding-inline-end: 2.4rem;
|
||||
width: calc(100% - 4.8rem);
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container.collapsed .notification:last-child {
|
||||
margin-bottom: 0.05rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > div {
|
||||
width: calc(100% - 3.6rem);
|
||||
margin-inline-start: 3.6rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > .title-container div:first-of-type {
|
||||
width: calc(100% - 9.4rem);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > div.detail {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > div.detail .detail-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > .title-container .timestamp {
|
||||
margin-top: 0.1rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
flex: initial;
|
||||
top: -.2rem;
|
||||
offset-inline-end: 1.5rem;
|
||||
padding: 0;
|
||||
max-width: 6.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
line-height: 1.6rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notifications-lockscreen-container .notification > img {
|
||||
margin-top: 0.8rem;
|
||||
margin-inline-start: 0;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
#lockscreen-notification-arrow {
|
||||
width: calc(100% - 5.2rem);
|
||||
height: 1.6rem;
|
||||
background-image: image-set(url("./images/lockscreen_notification_arrow.png") 1x, url("images/lockscreen_notification_arrow@1.5x.png") 1.5x, url("images/lockscreen_notification_arrow@2x.png") 2x, url("images/lockscreen_notification_arrow@2.25x.png") 2.25x);
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(50% + 0.25rem) center;
|
||||
/* hide it while we adjust no layout */
|
||||
border-top: 0.1rem solid rgba(255, 255, 255, 0.0);
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-size: 1.6rem 1.6rem;
|
||||
margin: 0 2.4rem;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-duration) ease;
|
||||
}
|
||||
:-moz-dir(ltr) #lockscreen-notification-arrow { left: 0; }
|
||||
:-moz-dir(rtl) #lockscreen-notification-arrow { right: 0; }
|
||||
|
||||
#lockscreen-notification-arrow.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* please see how we calculate top and max-height of
|
||||
* #notifications-lockscreen-container to place the arrow's top.
|
||||
* the last offset in calc is to make sure hairlines align together,
|
||||
* and is empirical values.
|
||||
*/
|
||||
#lockscreen-notification-arrow {
|
||||
top: calc(50% - 7.65rem + 24.6rem - 1.2rem);
|
||||
}
|
||||
|
||||
#lockscreen-notification-arrow.collapsed {
|
||||
/* manually adjusted */
|
||||
top: calc(50% - 8.7rem + 17.7rem - 0.05rem);
|
||||
}
|
||||
|
||||
@media (max-height:480px) {
|
||||
#lockscreen-notification-arrow {
|
||||
top: calc(50% - 4.7rem + 18.8rem - 1.1rem);
|
||||
}
|
||||
|
||||
#lockscreen-notification-arrow.collapsed {
|
||||
/* UX specifies in bug 1023500 that the notifications
|
||||
container should not be scrollable with collapsed */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue