Torrent list redesign
This commit is contained in:
@@ -309,15 +309,6 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
|
||||
-webkit-filter: brightness(1.3);
|
||||
}
|
||||
|
||||
.button-round { /* Circular icon buttons, used on <i> tags */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
font-size: 22px;
|
||||
transition: all 0.1s ease-out;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* INPUTS
|
||||
*/
|
||||
@@ -370,15 +361,19 @@ textarea,
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.torrent .buttons {
|
||||
.torrent .torrent-controls {
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
right: 10px;
|
||||
align-items: center;
|
||||
display: none;
|
||||
display: block /* TODO: none */;
|
||||
}
|
||||
|
||||
.torrent:hover .buttons {
|
||||
.torrent:hover .torrent-controls {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.torrent .buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -386,63 +381,8 @@ textarea,
|
||||
margin-left: 6px; /* space buttons apart */
|
||||
}
|
||||
|
||||
.torrent .buttons .download {
|
||||
background-color: #2233BB;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
font-size: 18px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.torrent .buttons .download.downloading {
|
||||
color: #44dd44;
|
||||
}
|
||||
|
||||
.torrent .buttons .download.seeding {
|
||||
color: #44dd44;
|
||||
}
|
||||
|
||||
.torrent .buttons .play {
|
||||
padding-top: 10px;
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
.torrent.timeout .play {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.torrent.requested .play,
|
||||
.loading-spinner {
|
||||
border-top: 6px solid rgba(255, 255, 255, 0.2);
|
||||
border-right: 6px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 6px solid rgba(255, 255, 255, 0.2);
|
||||
border-left: 6px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
color: transparent;
|
||||
animation: load8 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.torrent .buttons .play.resume-position {
|
||||
position: relative;
|
||||
-webkit-clip-path: circle(18px at center);
|
||||
}
|
||||
|
||||
.torrent .buttons .delete {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.torrent .buttons .delete:hover {
|
||||
opacity: 0.7;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.torrent .buttons .radial-progress {
|
||||
@@ -450,7 +390,7 @@ textarea,
|
||||
}
|
||||
|
||||
.torrent .name {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user