wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

touch action

Browse Source
This commit is contained in:
wolegca 2019-09-12 23:48:49 +08:00
parent 20f1289563
commit 9101ae4607
1 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
myui.css
View File

@ -1,35 +1,35 @@
*{
touch-action: none
* {
touch-action: pan-y;
}
.msg-container{
.msg-container {
display: block;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
min-height:220px;
min-width:250px;
max-width:460px;
color:white;
padding-bottom:40px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 220px;
min-width: 250px;
max-width: 460px;
color: white;
padding-bottom: 40px;
cursor: default;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 3px 2px 8px rgb(40,40,40);
box-shadow: 3px 2px 8px rgb(40, 40, 40);
opacity: 0;
animation: fadeIn .5s forwards;
z-index:999;
z-index: 999;
text-overflow: ellipsis;
word-break: break-word
}
.msg-header{
display:block;
.msg-header {
display: block;
position: relative;
width:100%;
min-height:20px;
background-color:rgb(40,40,40);
width: 100%;
min-height: 20px;
background-color: rgb(40, 40, 40);
cursor: move;
border-radius: 10px 10px 0px 0px;
padding: 10px;
@ -39,26 +39,26 @@
word-break: break-word
}
.msg-content{
.msg-content {
display: block;
position: relative;
width:100%;
width: 100%;
min-height: 150px;
background-color:rgb(50, 50, 50);
background-color: rgb(50, 50, 50);
cursor: default;
padding:10px;
padding: 10px;
box-sizing: border-box;
text-overflow: ellipsis;
word-break: break-word
}
.msg-footer{
.msg-footer {
display: block;
position: fixed;
bottom:0px;
width:100%;
bottom: 0px;
width: 100%;
height: 40px;
background-color:rgb(30,30,30);
background-color: rgb(30, 30, 30);
cursor: default;
border-radius: 0px 0px 10px 10px;
padding: 10px;
@ -68,33 +68,43 @@
word-break: break-word
}
.msg-footer span{
.msg-footer span {
cursor: pointer;
transition:all .1s ease;
transition: all .1s ease;
font-size: 16px;
padding:3px 8px;
padding: 3px 8px;
}
.msg-footer span:hover{
color:#ccc
.msg-footer span:hover {
color: #ccc
}
.msg-footer span:active{
color:rgb(50, 50, 50)
.msg-footer span:active {
color: rgb(50, 50, 50)
}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeOut {
from{opacity:1}
to{opacity:0}
from {
opacity: 1
}
to {
opacity: 0
}
}
@media screen and (max-width:480px){
.msg-container{
@media screen and (max-width:480px) {
.msg-container {
max-width: 250px;
}
}