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