mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-04-10 19:57:28 +08:00
change hint, summary, data
This commit is contained in:
Vick Scarlet
222
view/style.css
222
view/style.css
@@ -101,20 +101,6 @@ html {
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
padding: 0.3rem 2rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:gray;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
font-size: 1.4rem;
|
||||
@@ -255,4 +241,210 @@ html {
|
||||
height: calc(100% - 1rem);
|
||||
padding: 0.5rem 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
|
||||
:root {
|
||||
font-family: "Montserrat";
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.banners-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.banner .banner-message {
|
||||
flex: 1;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.banner .banner-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.banner .banner-close:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.banner.success {
|
||||
background: lightgreen;
|
||||
}
|
||||
.banner.success::after {
|
||||
background: lightgreen;
|
||||
}
|
||||
.banner.error {
|
||||
background: #ed1c24;
|
||||
}
|
||||
.banner.error::after {
|
||||
background: #ed1c24;
|
||||
}
|
||||
.banner.info {
|
||||
background: skyblue;
|
||||
}
|
||||
.banner.info::after {
|
||||
background: skyblue;
|
||||
}
|
||||
|
||||
.banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.banner:not(.visible) {
|
||||
display: none;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.banner.visible {
|
||||
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
|
||||
animation-name: banner-in;
|
||||
animation-direction: forwards;
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes banner-in {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.show-banner {
|
||||
appearance: none;
|
||||
background: #ededed;
|
||||
border: 0;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite; }
|
||||
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake; }
|
||||
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
|
||||
.eva-hover {
|
||||
display: inline-block; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0; }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in; }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
|
||||
to {
|
||||
transform: perspective(400px); } }
|
||||
|
||||
@keyframes eva-shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0); }
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0); }
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0); } }
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1); }
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2); }
|
||||
to {
|
||||
transform: scale3d(1, 1, 1); } }
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5); }
|
||||
50% {
|
||||
opacity: 1; } }
|
||||
Reference in New Issue
Block a user