amass/live2d-widget
1
0
Fork 0
mirror of https://github.com/stevenjoezhang/live2d-widget.git synced 2024-11-22 12:39:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

CSS lint

Browse Source
This commit is contained in:
Mimi 2019-12-04 23:29:51 +08:00
parent e35894c60d
commit 359d4c9942
1 changed files with 131 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
waifu.css
View File

@ -1,235 +1,295 @@
#waifu-toggle { #waifu-toggle {
position: fixed;
writing-mode: vertical-rl;
bottom: 66px;
left: 0px;
background-color: #fa0; background-color: #fa0;
color: #fff;
border-radius: 5px; border-radius: 5px;
padding: 5px 2px 5px 5px; bottom: 66px;
font-size: 12px; color: #fff;
width: 60px;
cursor: pointer; cursor: pointer;
} font-size: 12px;
#waifu { left: 0;
padding: 5px 2px 5px 5px;
position: fixed; position: fixed;
width: 60px;
writing-mode: vertical-rl;
}
#waifu {
bottom: -1000px; bottom: -1000px;
left: 0; left: 0;
z-index: 1;
line-height: 0; line-height: 0;
transition: transform .3s ease-in-out; position: fixed;
transform: translateY(3px); transform: translateY(3px);
transition: transform .3s ease-in-out;
z-index: 1;
} }
#waifu:hover { #waifu:hover {
transform: translateY(0); transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#waifu { #waifu {
display: none; display: none;
} }
} }
#waifu-tips { #waifu-tips {
opacity: 0; animation: shake 50s ease-in-out 5s infinite;
width: 250px; background-color: rgba(236, 217, 188, .5);
min-height: 70px; border: 1px solid rgba(224, 186, 140, .62);
margin: -30px 20px;
padding: 5px 10px;
border: 1px solid rgba(224, 186, 140, 0.62);
border-radius: 12px; border-radius: 12px;
background-color: rgba(236, 217, 188, 0.5); box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2);
box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
word-break: break-all; margin: -30px 20px;
text-overflow: ellipsis; min-height: 70px;
opacity: 0;
overflow: hidden; overflow: hidden;
padding: 5px 10px;
position: absolute; position: absolute;
animation: shake 50s ease-in-out 5s infinite; text-overflow: ellipsis;
width: 250px;
word-break: break-all;
} }
#waifu #live2d { #waifu #live2d {
position: relative;
cursor: grab; cursor: grab;
cursor: -webkit-grab; cursor: -webkit-grab;
cursor: -o-grab; cursor: -o-grab;
cursor: -ms-grab; cursor: -ms-grab;
position: relative;
} }
#waifu #live2d:active { #waifu #live2d:active {
cursor: grabbing; cursor: grabbing;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: -o-grabbing; cursor: -o-grabbing;
cursor: -ms-grabbing; cursor: -ms-grabbing;
} }
#waifu-tool { #waifu-tool {
color: #aaa; color: #aaa;
top: 70px;
right: -10px;
position: absolute;
opacity: 0; opacity: 0;
position: absolute;
right: -10px;
top: 70px;
transition: opacity 1s; transition: opacity 1s;
} }
#waifu:hover #waifu-tool { #waifu:hover #waifu-tool {
opacity: 1; opacity: 1;
} }
#waifu-tool span { #waifu-tool span {
display: block; color: #5b6c7d;
cursor: pointer; cursor: pointer;
display: block;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
color: #5b6c7d;
transition: color .3s; transition: color .3s;
} }
#waifu-tool span:hover { #waifu-tool span:hover {
color: #0684bd; /* #34495e */ color: #0684bd; /* #34495e */
} }
@keyframes shake { @keyframes shake {
2% { 2% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg); transform: translate(.5px, -1.5px) rotate(-.5deg);
} }
4% { 4% {
transform: translate(0.5px, 1.5px) rotate(1.5deg); transform: translate(.5px, 1.5px) rotate(1.5deg);
} }
6% { 6% {
transform: translate(1.5px, 1.5px) rotate(1.5deg); transform: translate(1.5px, 1.5px) rotate(1.5deg);
} }
8% { 8% {
transform: translate(2.5px, 1.5px) rotate(0.5deg); transform: translate(2.5px, 1.5px) rotate(.5deg);
} }
10% { 10% {
transform: translate(0.5px, 2.5px) rotate(0.5deg); transform: translate(.5px, 2.5px) rotate(.5deg);
} }
12% { 12% {
transform: translate(1.5px, 1.5px) rotate(0.5deg); transform: translate(1.5px, 1.5px) rotate(.5deg);
} }
14% { 14% {
transform: translate(0.5px, 0.5px) rotate(0.5deg); transform: translate(.5px, .5px) rotate(.5deg);
} }
16% { 16% {
transform: translate(-1.5px, -0.5px) rotate(1.5deg); transform: translate(-1.5px, -.5px) rotate(1.5deg);
} }
18% { 18% {
transform: translate(0.5px, 0.5px) rotate(1.5deg); transform: translate(.5px, .5px) rotate(1.5deg);
} }
20% { 20% {
transform: translate(2.5px, 2.5px) rotate(1.5deg); transform: translate(2.5px, 2.5px) rotate(1.5deg);
} }
22% { 22% {
transform: translate(0.5px, -1.5px) rotate(1.5deg); transform: translate(.5px, -1.5px) rotate(1.5deg);
} }
24% { 24% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg); transform: translate(-1.5px, 1.5px) rotate(-.5deg);
} }
26% { 26% {
transform: translate(1.5px, 0.5px) rotate(1.5deg); transform: translate(1.5px, .5px) rotate(1.5deg);
} }
28% { 28% {
transform: translate(-0.5px, -0.5px) rotate(-0.5deg); transform: translate(-.5px, -.5px) rotate(-.5deg);
} }
30% { 30% {
transform: translate(1.5px, -0.5px) rotate(-0.5deg); transform: translate(1.5px, -.5px) rotate(-.5deg);
} }
32% { 32% {
transform: translate(2.5px, -1.5px) rotate(1.5deg); transform: translate(2.5px, -1.5px) rotate(1.5deg);
} }
34% { 34% {
transform: translate(2.5px, 2.5px) rotate(-0.5deg); transform: translate(2.5px, 2.5px) rotate(-.5deg);
} }
36% { 36% {
transform: translate(0.5px, -1.5px) rotate(0.5deg); transform: translate(.5px, -1.5px) rotate(.5deg);
} }
38% { 38% {
transform: translate(2.5px, -0.5px) rotate(-0.5deg); transform: translate(2.5px, -.5px) rotate(-.5deg);
} }
40% { 40% {
transform: translate(-0.5px, 2.5px) rotate(0.5deg); transform: translate(-.5px, 2.5px) rotate(.5deg);
} }
42% { 42% {
transform: translate(-1.5px, 2.5px) rotate(0.5deg); transform: translate(-1.5px, 2.5px) rotate(.5deg);
} }
44% { 44% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg); transform: translate(-1.5px, 1.5px) rotate(.5deg);
} }
46% { 46% {
transform: translate(1.5px, -0.5px) rotate(-0.5deg); transform: translate(1.5px, -.5px) rotate(-.5deg);
} }
48% { 48% {
transform: translate(2.5px, -0.5px) rotate(0.5deg); transform: translate(2.5px, -.5px) rotate(.5deg);
} }
50% { 50% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg); transform: translate(-1.5px, 1.5px) rotate(.5deg);
} }
52% { 52% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg); transform: translate(-.5px, 1.5px) rotate(.5deg);
} }
54% { 54% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg); transform: translate(-1.5px, 1.5px) rotate(.5deg);
} }
56% { 56% {
transform: translate(0.5px, 2.5px) rotate(1.5deg); transform: translate(.5px, 2.5px) rotate(1.5deg);
} }
58% { 58% {
transform: translate(2.5px, 2.5px) rotate(0.5deg); transform: translate(2.5px, 2.5px) rotate(.5deg);
} }
60% { 60% {
transform: translate(2.5px, -1.5px) rotate(1.5deg); transform: translate(2.5px, -1.5px) rotate(1.5deg);
} }
62% { 62% {
transform: translate(-1.5px, 0.5px) rotate(1.5deg); transform: translate(-1.5px, .5px) rotate(1.5deg);
} }
64% { 64% {
transform: translate(-1.5px, 1.5px) rotate(1.5deg); transform: translate(-1.5px, 1.5px) rotate(1.5deg);
} }
66% { 66% {
transform: translate(0.5px, 2.5px) rotate(1.5deg); transform: translate(.5px, 2.5px) rotate(1.5deg);
} }
68% { 68% {
transform: translate(2.5px, -1.5px) rotate(1.5deg); transform: translate(2.5px, -1.5px) rotate(1.5deg);
} }
70% { 70% {
transform: translate(2.5px, 2.5px) rotate(0.5deg); transform: translate(2.5px, 2.5px) rotate(.5deg);
} }
72% { 72% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); transform: translate(-.5px, -1.5px) rotate(1.5deg);
} }
74% { 74% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg); transform: translate(-1.5px, 2.5px) rotate(1.5deg);
} }
76% { 76% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg); transform: translate(-1.5px, 2.5px) rotate(1.5deg);
} }
78% { 78% {
transform: translate(-1.5px, 2.5px) rotate(0.5deg); transform: translate(-1.5px, 2.5px) rotate(.5deg);
} }
80% { 80% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); transform: translate(-1.5px, .5px) rotate(-.5deg);
} }
82% { 82% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); transform: translate(-1.5px, .5px) rotate(-.5deg);
} }
84% { 84% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-.5px, .5px) rotate(1.5deg);
} }
86% { 86% {
transform: translate(2.5px, 1.5px) rotate(0.5deg); transform: translate(2.5px, 1.5px) rotate(.5deg);
} }
88% { 88% {
transform: translate(-1.5px, 0.5px) rotate(1.5deg); transform: translate(-1.5px, .5px) rotate(1.5deg);
} }
90% { 90% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg); transform: translate(-1.5px, -.5px) rotate(-.5deg);
} }
92% { 92% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg); transform: translate(-1.5px, -1.5px) rotate(1.5deg);
} }
94% { 94% {
transform: translate(0.5px, 0.5px) rotate(-0.5deg); transform: translate(.5px, .5px) rotate(-.5deg);
} }
96% { 96% {
transform: translate(2.5px, -0.5px) rotate(-0.5deg); transform: translate(2.5px, -.5px) rotate(-.5deg);
} }
98% { 98% {
transform: translate(-1.5px, -1.5px) rotate(-0.5deg); transform: translate(-1.5px, -1.5px) rotate(-.5deg);
} }
0%, 100% { 0%, 100% {
transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0);
} }
} }