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
312
gaia/apps/system/style/notifications/notifications.css
Executable file
312
gaia/apps/system/style/notifications/notifications.css
Executable file
|
|
@ -0,0 +1,312 @@
|
|||
@keyframes toaster {
|
||||
0% {
|
||||
opacity: 0.15;
|
||||
width: 8.6rem;
|
||||
background-color: transparent;
|
||||
border-inline-start: 0.2rem solid transparent;
|
||||
border-inline-end: 0.2rem solid transparent;
|
||||
border-top: 0.2rem solid white;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
width: 8.6rem;
|
||||
background-color: transparent;
|
||||
border-inline-start: 0.2rem solid transparent;
|
||||
border-inline-end: 0.2rem solid transparent;
|
||||
border-top: 0.2rem solid #B3F3FF;
|
||||
}
|
||||
100% {
|
||||
background-color: #00BCE2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#notification-toaster {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
top: -.2rem;
|
||||
width: 100%;
|
||||
height: 5.2rem;
|
||||
background-color: transparent;
|
||||
visibility: hidden;
|
||||
transform: translateY(-5rem);
|
||||
|
||||
/* This transition is used when hiding the toaster. */
|
||||
transition: transform ease .3s, background-color 0s ease .3s, visibility 0s ease .3s;
|
||||
}
|
||||
|
||||
/*
|
||||
* For attention window.
|
||||
*/
|
||||
.fake-notification-toaster {
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#toaster-icon {
|
||||
position: absolute;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
offset-inline-start: 1.5rem;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#notification-container > div {
|
||||
width: calc(100% - 7.1rem);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
}
|
||||
html[dir="ltr"] #notification-container > div {
|
||||
left: 5.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
html[dir="rtl"] #notification-container > div {
|
||||
right: 5.6rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toaster-title {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 2.3rem;
|
||||
color: white;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.toaster-detail {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 2.8rem;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notification-toaster.displayed {
|
||||
transform: translateY(0);
|
||||
/* We keep the visibility transition to make Marionette tests easier to write. */
|
||||
transition: transform .2s ease .4s, visibility 0s ease .4s;
|
||||
background-color: #00BCE2;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#notification-toaster.displayed:after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
border-left: 0.2rem solid transparent;
|
||||
border-right: 0.2rem solid transparent;
|
||||
border-top: 0.2rem solid #00d3ff;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
#notification-toaster:after {
|
||||
border-color: white;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#notification-toaster.displayed:after {
|
||||
animation-name: toaster;
|
||||
animation-duration: .4s;
|
||||
border-color: #00BCE2;
|
||||
transform: translateY(.2rem);
|
||||
transition: border-color 0s ease .4s;
|
||||
}
|
||||
|
||||
#notification-bar {
|
||||
height: 4.5rem;
|
||||
padding: 0;
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
#notification-bar [data-icon] {
|
||||
margin: 1.1rem 0;
|
||||
}
|
||||
|
||||
#notification-bar .title-container {
|
||||
display: flex;
|
||||
width: calc(100% - 4rem);
|
||||
font: italic 300 1.8rem/4.2rem auto;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
html[dir="ltr"] #notification-bar .title-container {
|
||||
float: left;
|
||||
}
|
||||
html[dir="rtl"] #notification-bar .title-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#notification-bar .title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-inline-start: .5rem;
|
||||
}
|
||||
|
||||
#notification-bar button {
|
||||
flex: initial;
|
||||
width: auto;
|
||||
height: 4.5rem;
|
||||
padding: 0 1.5rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #008eab;
|
||||
background: none;
|
||||
font: italic normal 1.3rem/1.3rem auto;
|
||||
}
|
||||
|
||||
#notification-bar button:active {
|
||||
background-color: #00caf2;
|
||||
color: #000000;
|
||||
}
|
||||
#notification-bar button[disabled] {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* remove ugly dotted outline when focus */
|
||||
#notification-bar button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#notifications-container {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html[dir="ltr"] #notifications-container { text-align: left; }
|
||||
html[dir="rtl"] #notifications-container { text-align: right; }
|
||||
|
||||
#notifications-container .notification {
|
||||
height: 6rem;
|
||||
padding: 0 1.5rem;
|
||||
font: 1.53rem/1.8rem auto;
|
||||
color: #e7e7e7;
|
||||
overflow: hidden;
|
||||
|
||||
border-bottom: .1rem solid rgba(255, 255, 255, .05);
|
||||
}
|
||||
|
||||
#notifications-container .notification:active {
|
||||
background-color: rgba(52, 140, 158, .6);
|
||||
}
|
||||
|
||||
#notifications-container .notification:first-child {
|
||||
border-top-color: black;
|
||||
}
|
||||
|
||||
#notifications-container .notification div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#notifications-container .notification > img {
|
||||
display: block;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin: 1.8rem 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
html[dir="ltr"] #notifications-container .notification > img { float: left; }
|
||||
html[dir="rtl"] #notifications-container .notification > img { float: right; }
|
||||
|
||||
#notifications-container .notification > div {
|
||||
width: calc(100% - 3.7rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-inline-start: 3.7rem;
|
||||
}
|
||||
|
||||
#notifications-container .notification > div.title-container {
|
||||
padding-top: 1.4rem;
|
||||
font-size: 1.53rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#notifications-container .notification > div.title-container .title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
html[dir="ltr"] #notifications-container .notification > div.title-container .title {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
html[dir="rtl"] #notifications-container .notification > div.title-container .title {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
|
||||
#notifications-container .notification > div.title-container .timestamp {
|
||||
flex: initial;
|
||||
padding: 0;
|
||||
max-width: 7.5rem;
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
color: #858585;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notifications-container .notification > div.detail {
|
||||
font-size: 1.4rem;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
#notifications-container .notification > div.detail .detail-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#notifications-container .notification.snapback,
|
||||
.notification-toaster.snapback {
|
||||
transition: transform var(--transition-duration) ease-out;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#notifications-container .notification.disappearing,
|
||||
#notifications-container .notification.disappearing-via-clear-all,
|
||||
.notification-toaster.disappearing {
|
||||
transition: transform var(--transition-duration) linear, opacity var(--transition-duration);
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#notifications-container .notification.disappearing.left,
|
||||
#notifications-container .notification.disappearing-via-clear-all-left,
|
||||
.notification-toaster.disappearing.left {
|
||||
transition: transform var(--transition-duration) linear, opacity var(--transition-duration);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#notifications-container .notification.disappearing ~ .notification {
|
||||
transition: transform var(--transition-duration) linear;
|
||||
transform: translateY(-6.2rem);
|
||||
}
|
||||
|
||||
@keyframes fn-rotate {
|
||||
from {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue