зеркало из https://github.com/mozilla/email-tabs.git
Merge pull request #95 from meandavejustice/14-loading-message
14 loading message
This commit is contained in:
Ian Bicking
GitHub
Коммит
5817aec421
|
|
@ -57,15 +57,7 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading-container {
|
.card-container {
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 40px;
|
|
||||||
vertical-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#done-container {
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 175px;
|
height: 175px;
|
||||||
|
|
@ -77,10 +69,28 @@
|
||||||
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
|
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#done-container:hover {
|
.card-container:hover {
|
||||||
box-shadow: 0 2px 8px rgba(12, 12, 13, 0.1);
|
box-shadow: 0 2px 8px rgba(12, 12, 13, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#loading-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-container .card-container {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
height: 250px;
|
||||||
|
vertical-align: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-container p {
|
||||||
|
color: #0A84FF;
|
||||||
|
}
|
||||||
|
|
||||||
#done-container p {
|
#done-container p {
|
||||||
color: black;
|
color: black;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|
@ -100,15 +110,100 @@
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-loading-indicator {
|
||||||
|
align-items:center;
|
||||||
|
background:var(--white);
|
||||||
|
display:flex;
|
||||||
|
height:55%;
|
||||||
|
justify-content:center;
|
||||||
|
left:0;
|
||||||
|
position:relative;
|
||||||
|
top:0;
|
||||||
|
width:100%;
|
||||||
|
z-index:20000;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
.app-loading-indicator .app-loading-indicator__spinner {
|
||||||
|
align-items:center;
|
||||||
|
border-radius:50%;
|
||||||
|
color:#fff;
|
||||||
|
display:flex;
|
||||||
|
height:74px;
|
||||||
|
width:74px;
|
||||||
|
position:relative;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.app-loading-indicator .app-loading-indicator__spinner:before {
|
||||||
|
content:"";
|
||||||
|
animation-duration:8s;
|
||||||
|
animation-iteration-count:infinite;
|
||||||
|
animation-name:rainbow;
|
||||||
|
animation-timing-function:ease-in-out;
|
||||||
|
box-shadow:inset 0 0 0 6px #bf4040;
|
||||||
|
width:72px;
|
||||||
|
height:72px;
|
||||||
|
border-radius:50%;
|
||||||
|
margin:1px;
|
||||||
|
}
|
||||||
|
.app-loading-indicator .app-loading-indicator__spinner:after {
|
||||||
|
content:"";
|
||||||
|
box-sizing:border-box;
|
||||||
|
width:72px;
|
||||||
|
height:72px;
|
||||||
|
animation:rotate linear 1.88s infinite;
|
||||||
|
transform-origin:left top;
|
||||||
|
background:hsla(0,0%,100%,.7);
|
||||||
|
position:absolute;
|
||||||
|
top:37px;
|
||||||
|
left:37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform:rotate(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform:rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
box-shadow:inset 0 0 0 6px #bf4040;
|
||||||
|
}
|
||||||
|
16% {
|
||||||
|
box-shadow:inset 0 0 0 6px #bfbf40;
|
||||||
|
}
|
||||||
|
32% {
|
||||||
|
box-shadow:inset 0 0 0 6px #40bf40;
|
||||||
|
}
|
||||||
|
48% {
|
||||||
|
box-shadow:inset 0 0 0 6px #40bfbf;
|
||||||
|
}
|
||||||
|
64% {
|
||||||
|
box-shadow:inset 0 0 0 6px #4040bf; }
|
||||||
|
80% {
|
||||||
|
box-shadow:inset 0 0 0 6px #bf40bf;
|
||||||
|
}
|
||||||
|
96% {
|
||||||
|
box-shadow:inset 0 0 0 6px #bf4040;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="loading-container" class="container">
|
<div id="loading-container">
|
||||||
L O A D I N G . . .
|
<div class="container card-container">
|
||||||
|
<div class="app-loading-indicator">
|
||||||
|
<div class="app-loading-indicator__spinner"></div>
|
||||||
|
</div>
|
||||||
|
<p>Preparing your email...</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="done-container" class="container" style="display: none">
|
<div id="done-container" class="container card-container" style="display: none">
|
||||||
<div class="message-wrap">
|
<div class="message-wrap">
|
||||||
<h4>Thanks for using Firefox Email Tabs</h4>
|
<h4>Thanks for using Firefox Email Tabs</h4>
|
||||||
<p id="done-message" data-many-tabs="__NUMBER__ tabs were sent." data-one-tab="Tab was sent.">Tabs were sent.</p>
|
<p id="done-message" data-many-tabs="__NUMBER__ tabs were sent." data-one-tab="Tab was sent.">Tabs were sent.</p>
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче