responsively change torrent/drop-target height
better large-screen experience
This commit is contained in:
parent
683d4c3a9d
commit
ec2ff2bb47
1 changed files with 19 additions and 3 deletions
|
|
@ -246,14 +246,15 @@ a:not(.disabled):hover, i:not(.disabled):hover {
|
|||
}
|
||||
|
||||
.drop-target {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border: 5px #444 dashed;
|
||||
border-radius: 5px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.drag .drop-target {
|
||||
|
|
@ -262,7 +263,6 @@ body.drag .drop-target {
|
|||
}
|
||||
|
||||
.torrent {
|
||||
height: 120px;
|
||||
background: linear-gradient(to bottom right, #4B79A1, #283E51);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -272,6 +272,22 @@ body.drag .drop-target {
|
|||
animation: fadein .4s;
|
||||
}
|
||||
|
||||
.torrent, .drop-target {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.torrent, .drop-target {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.torrent, .drop-target {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.torrent:not(:last-child) {
|
||||
border-bottom: 1px solid rgb(20, 20, 20);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue