You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
722 lines
15 KiB
722 lines
15 KiB
.OwO { |
|
position: relative; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none |
|
} |
|
|
|
|
|
.OwO.OwO-open .OwO-logo { |
|
border-bottom: none; |
|
color: #6d757a |
|
} |
|
|
|
.OwO.OwO-open .OwO-body { |
|
display: block |
|
} |
|
|
|
.OwO.OwO-up .OwO-body { |
|
top: inherit; |
|
bottom: 21px; |
|
border-radius: 4px 4px 4px 0 |
|
} |
|
|
|
.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { |
|
border-radius: 0 |
|
} |
|
|
|
.OwO.OwO-up.OwO-open .OwO-logo { |
|
border: 1px solid #ddd; |
|
border-top: none |
|
} |
|
|
|
.OwO .OwO-logo { |
|
display: inline-block; |
|
padding: 0; |
|
width: 66px; |
|
height: 24px; |
|
color: #99a2aa; |
|
border: 1px solid #e5e9ef; |
|
border-radius: 4px; |
|
position: relative; |
|
z-index: 101; |
|
font-size: 12px; |
|
text-align: center; |
|
line-height: 23px; |
|
margin-top: 3px; |
|
cursor: pointer; |
|
background: #fff; |
|
} |
|
|
|
.OwO .OwO-logo:hover span { |
|
display: inline-block; |
|
} |
|
|
|
.OwO .OwO-body { |
|
display: none; |
|
font-size: 12px; |
|
font-family: Microsoft YaHei,Arial,Helvetica,sans-serif; |
|
color: #222; |
|
overflow: visible; |
|
background: #fff; |
|
border: 1px solid #ccd0d7; |
|
box-shadow: 0 1px 5px 0 rgba(0,0,0,.14); |
|
margin-top: 7px; |
|
margin-bottom: 10px; |
|
border-radius: 4px; |
|
width: 386px!important; |
|
position: relative; |
|
top: 3px; |
|
z-index: 999999; |
|
} |
|
@media (max-width: 450px) { |
|
.OwO .OwO-body{ |
|
width: 100%!important; |
|
position: absolute; |
|
top: 27px; |
|
} |
|
} |
|
@media (max-width: 991px){ |
|
.OwO .OwO-body{ |
|
position: absolute; |
|
top: 27px; |
|
} |
|
} |
|
|
|
.OwO .OwO-body .OwO-items { |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
display: none; |
|
padding: 10px; |
|
padding: 0px 10px 0px 10px; |
|
margin: 0; |
|
overflow: scroll; |
|
font-size: 0; |
|
overflow-x: hidden; |
|
} |
|
|
|
.OwO .OwO-body .OwO-items .OwO-item { |
|
list-style-type: none; |
|
display: inline-block; |
|
font-size: 12px; |
|
line-height: 14px; |
|
cursor: pointer; |
|
color: #111; |
|
border-radius: 4px; |
|
transition: background .2s; |
|
display: inline-block; |
|
padding: 5px 10px; |
|
margin: 2px 3px; |
|
outline: 0; |
|
text-decoration: none; |
|
cursor: pointer; |
|
background: #fff; |
|
} |
|
|
|
.OwO .OwO-body .OwO-items .OwO-item:hover { |
|
background: #eee; |
|
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); |
|
/*-webkit-animation: a 5s infinite ease-in-out; |
|
animation: a 5s infinite ease-in-out*/ |
|
} |
|
|
|
.OwO .OwO-body .OwO-items-emoji .OwO-item { |
|
font-size: 20px; |
|
line-height: 19px |
|
} |
|
|
|
.OwO .OwO-body .OwO-items-image .OwO-item { |
|
/*max-width: calc(25% - 10px);*/ |
|
max-width: 50px; |
|
box-sizing: border-box |
|
} |
|
|
|
.OwO .OwO-body .OwO-twemoji .OwO-item { |
|
/*max-width: calc(25% - 10px);*/ |
|
max-width: 39px; |
|
box-sizing: border-box |
|
} |
|
|
|
.emotion-paopao,.emotion-aru{ |
|
width: 30px; |
|
} |
|
.emotion-twemoji{ |
|
width: 18px; |
|
} |
|
.OwO .OwO-body .OwO-items-image .OwO-item img { |
|
max-width: 100% |
|
} |
|
|
|
.OwO .OwO-body .OwO-items-show { |
|
display: block |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar { |
|
color: #444; |
|
position: relative; |
|
height: 38px; |
|
overflow: hidden; |
|
background-color: #f4f5f7; |
|
border-radius: 0 0 4px 4px; |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar .OwO-packages { |
|
margin: 0; |
|
padding: 0; |
|
font-size: 0 |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar .OwO-packages li { |
|
list-style-type: none; |
|
display: inline-block; |
|
line-height: 38px; |
|
font-size: 14px; |
|
padding: 0 10px; |
|
cursor: pointer; |
|
/*margin-right: 3px*/ |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { |
|
border-radius: 0 0 0 3px |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar .OwO-packages li:hover { |
|
background: #fff |
|
} |
|
|
|
.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active { |
|
background: #fff; |
|
-webkit-transition: .3s; |
|
transition: .3s |
|
} |
|
|
|
.face { |
|
display: inline-block; |
|
vertical-align: middle; |
|
line-height: 1.4; |
|
width: 16px; |
|
height: 16px; |
|
margin-right: 5px; |
|
font-size: 12px; |
|
} |
|
|
|
.OwOlogotext { |
|
display: inline-block; |
|
vertical-align: middle; |
|
line-height: 1; |
|
font-size: 12px!important; |
|
} |
|
.OwO-title { |
|
margin: 8px 18px 0; |
|
color: #99a2aa; |
|
} |
|
|
|
.OwO-body:before { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
top: -5px; |
|
left: 30px; |
|
width: 8px; |
|
height: 5px; |
|
background: url("../img/arrow.png") 0 -49px no-repeat; |
|
} |
|
.OwO .OwO-logo:hover { |
|
color: rgb(109, 117, 122); |
|
} |
|
@-webkit-keyframes a { |
|
2% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
4% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
6% { |
|
-webkit-transform: translateY(1.5px) rotate(-1.5deg); |
|
transform: translateY(1.5px) rotate(-1.5deg) |
|
} |
|
|
|
8% { |
|
-webkit-transform: translateY(-1.5px) rotate(-1.5deg); |
|
transform: translateY(-1.5px) rotate(-1.5deg) |
|
} |
|
|
|
10% { |
|
-webkit-transform: translateY(2.5px) rotate(1.5deg); |
|
transform: translateY(2.5px) rotate(1.5deg) |
|
} |
|
|
|
12% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
14% { |
|
-webkit-transform: translateY(-1.5px) rotate(1.5deg); |
|
transform: translateY(-1.5px) rotate(1.5deg) |
|
} |
|
|
|
16% { |
|
-webkit-transform: translateY(-.5px) rotate(-1.5deg); |
|
transform: translateY(-.5px) rotate(-1.5deg) |
|
} |
|
|
|
18% { |
|
-webkit-transform: translateY(.5px) rotate(-1.5deg); |
|
transform: translateY(.5px) rotate(-1.5deg) |
|
} |
|
|
|
20% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
22% { |
|
-webkit-transform: translateY(.5px) rotate(-1.5deg); |
|
transform: translateY(.5px) rotate(-1.5deg) |
|
} |
|
|
|
24% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
26% { |
|
-webkit-transform: translateY(.5px) rotate(.5deg); |
|
transform: translateY(.5px) rotate(.5deg) |
|
} |
|
|
|
28% { |
|
-webkit-transform: translateY(.5px) rotate(1.5deg); |
|
transform: translateY(.5px) rotate(1.5deg) |
|
} |
|
|
|
30% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
32%,34% { |
|
-webkit-transform: translateY(1.5px) rotate(-.5deg); |
|
transform: translateY(1.5px) rotate(-.5deg) |
|
} |
|
|
|
36% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
38% { |
|
-webkit-transform: translateY(1.5px) rotate(-1.5deg); |
|
transform: translateY(1.5px) rotate(-1.5deg) |
|
} |
|
|
|
40% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
42% { |
|
-webkit-transform: translateY(2.5px) rotate(-1.5deg); |
|
transform: translateY(2.5px) rotate(-1.5deg) |
|
} |
|
|
|
44% { |
|
-webkit-transform: translateY(1.5px) rotate(.5deg); |
|
transform: translateY(1.5px) rotate(.5deg) |
|
} |
|
|
|
46% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
48% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
50% { |
|
-webkit-transform: translateY(.5px) rotate(.5deg); |
|
transform: translateY(.5px) rotate(.5deg) |
|
} |
|
|
|
52% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
54% { |
|
-webkit-transform: translateY(-1.5px) rotate(1.5deg); |
|
transform: translateY(-1.5px) rotate(1.5deg) |
|
} |
|
|
|
56% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
58% { |
|
-webkit-transform: translateY(.5px) rotate(2.5deg); |
|
transform: translateY(.5px) rotate(2.5deg) |
|
} |
|
|
|
60% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
62% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
64% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
66% { |
|
-webkit-transform: translateY(1.5px) rotate(-.5deg); |
|
transform: translateY(1.5px) rotate(-.5deg) |
|
} |
|
|
|
68% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
70% { |
|
-webkit-transform: translateY(1.5px) rotate(.5deg); |
|
transform: translateY(1.5px) rotate(.5deg) |
|
} |
|
|
|
72% { |
|
-webkit-transform: translateY(2.5px) rotate(1.5deg); |
|
transform: translateY(2.5px) rotate(1.5deg) |
|
} |
|
|
|
74% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
76% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
78% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
80% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
82% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
84% { |
|
-webkit-transform: translateY(1.5px) rotate(2.5deg); |
|
transform: translateY(1.5px) rotate(2.5deg) |
|
} |
|
|
|
86% { |
|
-webkit-transform: translateY(-1.5px) rotate(-1.5deg); |
|
transform: translateY(-1.5px) rotate(-1.5deg) |
|
} |
|
|
|
88% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
90% { |
|
-webkit-transform: translateY(2.5px) rotate(-.5deg); |
|
transform: translateY(2.5px) rotate(-.5deg) |
|
} |
|
|
|
92% { |
|
-webkit-transform: translateY(.5px) rotate(-.5deg); |
|
transform: translateY(.5px) rotate(-.5deg) |
|
} |
|
|
|
94% { |
|
-webkit-transform: translateY(2.5px) rotate(.5deg); |
|
transform: translateY(2.5px) rotate(.5deg) |
|
} |
|
|
|
96% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
98% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
0%,to { |
|
-webkit-transform: translate(0) rotate(0deg); |
|
transform: translate(0) rotate(0deg) |
|
} |
|
} |
|
|
|
@keyframes a { |
|
2% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
4% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
6% { |
|
-webkit-transform: translateY(1.5px) rotate(-1.5deg); |
|
transform: translateY(1.5px) rotate(-1.5deg) |
|
} |
|
|
|
8% { |
|
-webkit-transform: translateY(-1.5px) rotate(-1.5deg); |
|
transform: translateY(-1.5px) rotate(-1.5deg) |
|
} |
|
|
|
10% { |
|
-webkit-transform: translateY(2.5px) rotate(1.5deg); |
|
transform: translateY(2.5px) rotate(1.5deg) |
|
} |
|
|
|
12% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
14% { |
|
-webkit-transform: translateY(-1.5px) rotate(1.5deg); |
|
transform: translateY(-1.5px) rotate(1.5deg) |
|
} |
|
|
|
16% { |
|
-webkit-transform: translateY(-.5px) rotate(-1.5deg); |
|
transform: translateY(-.5px) rotate(-1.5deg) |
|
} |
|
|
|
18% { |
|
-webkit-transform: translateY(.5px) rotate(-1.5deg); |
|
transform: translateY(.5px) rotate(-1.5deg) |
|
} |
|
|
|
20% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
22% { |
|
-webkit-transform: translateY(.5px) rotate(-1.5deg); |
|
transform: translateY(.5px) rotate(-1.5deg) |
|
} |
|
|
|
24% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
26% { |
|
-webkit-transform: translateY(.5px) rotate(.5deg); |
|
transform: translateY(.5px) rotate(.5deg) |
|
} |
|
|
|
28% { |
|
-webkit-transform: translateY(.5px) rotate(1.5deg); |
|
transform: translateY(.5px) rotate(1.5deg) |
|
} |
|
|
|
30% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
32%,34% { |
|
-webkit-transform: translateY(1.5px) rotate(-.5deg); |
|
transform: translateY(1.5px) rotate(-.5deg) |
|
} |
|
|
|
36% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
38% { |
|
-webkit-transform: translateY(1.5px) rotate(-1.5deg); |
|
transform: translateY(1.5px) rotate(-1.5deg) |
|
} |
|
|
|
40% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
42% { |
|
-webkit-transform: translateY(2.5px) rotate(-1.5deg); |
|
transform: translateY(2.5px) rotate(-1.5deg) |
|
} |
|
|
|
44% { |
|
-webkit-transform: translateY(1.5px) rotate(.5deg); |
|
transform: translateY(1.5px) rotate(.5deg) |
|
} |
|
|
|
46% { |
|
-webkit-transform: translateY(-1.5px) rotate(2.5deg); |
|
transform: translateY(-1.5px) rotate(2.5deg) |
|
} |
|
|
|
48% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
50% { |
|
-webkit-transform: translateY(.5px) rotate(.5deg); |
|
transform: translateY(.5px) rotate(.5deg) |
|
} |
|
|
|
52% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
54% { |
|
-webkit-transform: translateY(-1.5px) rotate(1.5deg); |
|
transform: translateY(-1.5px) rotate(1.5deg) |
|
} |
|
|
|
56% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
58% { |
|
-webkit-transform: translateY(.5px) rotate(2.5deg); |
|
transform: translateY(.5px) rotate(2.5deg) |
|
} |
|
|
|
60% { |
|
-webkit-transform: translateY(2.5px) rotate(2.5deg); |
|
transform: translateY(2.5px) rotate(2.5deg) |
|
} |
|
|
|
62% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
64% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
66% { |
|
-webkit-transform: translateY(1.5px) rotate(-.5deg); |
|
transform: translateY(1.5px) rotate(-.5deg) |
|
} |
|
|
|
68% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
70% { |
|
-webkit-transform: translateY(1.5px) rotate(.5deg); |
|
transform: translateY(1.5px) rotate(.5deg) |
|
} |
|
|
|
72% { |
|
-webkit-transform: translateY(2.5px) rotate(1.5deg); |
|
transform: translateY(2.5px) rotate(1.5deg) |
|
} |
|
|
|
74% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
76% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
78% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
80% { |
|
-webkit-transform: translateY(1.5px) rotate(1.5deg); |
|
transform: translateY(1.5px) rotate(1.5deg) |
|
} |
|
|
|
82% { |
|
-webkit-transform: translateY(-.5px) rotate(.5deg); |
|
transform: translateY(-.5px) rotate(.5deg) |
|
} |
|
|
|
84% { |
|
-webkit-transform: translateY(1.5px) rotate(2.5deg); |
|
transform: translateY(1.5px) rotate(2.5deg) |
|
} |
|
|
|
86% { |
|
-webkit-transform: translateY(-1.5px) rotate(-1.5deg); |
|
transform: translateY(-1.5px) rotate(-1.5deg) |
|
} |
|
|
|
88% { |
|
-webkit-transform: translateY(-.5px) rotate(2.5deg); |
|
transform: translateY(-.5px) rotate(2.5deg) |
|
} |
|
|
|
90% { |
|
-webkit-transform: translateY(2.5px) rotate(-.5deg); |
|
transform: translateY(2.5px) rotate(-.5deg) |
|
} |
|
|
|
92% { |
|
-webkit-transform: translateY(.5px) rotate(-.5deg); |
|
transform: translateY(.5px) rotate(-.5deg) |
|
} |
|
|
|
94% { |
|
-webkit-transform: translateY(2.5px) rotate(.5deg); |
|
transform: translateY(2.5px) rotate(.5deg) |
|
} |
|
|
|
96% { |
|
-webkit-transform: translateY(-.5px) rotate(1.5deg); |
|
transform: translateY(-.5px) rotate(1.5deg) |
|
} |
|
|
|
98% { |
|
-webkit-transform: translateY(-1.5px) rotate(-.5deg); |
|
transform: translateY(-1.5px) rotate(-.5deg) |
|
} |
|
|
|
0%,to { |
|
-webkit-transform: translate(0) rotate(0deg); |
|
transform: translate(0) rotate(0deg) |
|
} |
|
} |