mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework library buttons
This commit is contained in:
parent
173773d5bc
commit
eac4ec9324
6 changed files with 109 additions and 184 deletions
|
@ -39,10 +39,8 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.smallBackdropPosterItem .cardOverlayInner > div {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
.buttonCard:hover .cardBox {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.cardBox {
|
||||
|
@ -233,10 +231,10 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.cardImage canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cardImage canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coveredCardImage {
|
||||
background-size: cover;
|
||||
|
|
|
@ -42,6 +42,12 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.smallBackdropPosterItem .cardOverlayInner > div {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chapterPosterItem {
|
||||
width: 240px!important;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -405,145 +405,4 @@
|
|||
padding: 5px 4px 4px;
|
||||
text-shadow: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.posterItemImage {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 42%;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.myLibraryPosterItem .posterItemImage {
|
||||
height: 34px;
|
||||
background-position: 9px center;
|
||||
background-size: 14px 14px;
|
||||
background-color: rgba(51, 136, 204, 0.7);
|
||||
background-color: rgba(82, 181, 75, 0.7);
|
||||
}
|
||||
|
||||
.myLibraryPosterItem .posterItemText {
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 34px;
|
||||
text-align: left;
|
||||
padding: 0 0 0 12px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.myLibraryPosterItem i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
|
||||
background-color: rgba(176, 94, 81, 0.7);
|
||||
}
|
||||
|
||||
.musicPosterItem .posterItemImage {
|
||||
background-color: rgba(217, 145, 67, 0.7);
|
||||
}
|
||||
|
||||
.tvshowsPosterItem .posterItemImage {
|
||||
background-color: rgba(77, 88, 164, 0.7);
|
||||
}
|
||||
|
||||
.gamesPosterItem .posterItemImage {
|
||||
background-color: rgba(183, 202, 72, 0.7);
|
||||
}
|
||||
|
||||
.channelsPosterItem .posterItemImage {
|
||||
background-color: rgba(51, 136, 204, 0.7);
|
||||
}
|
||||
|
||||
.livetvPosterItem .posterItemImage {
|
||||
background-color: rgba(255, 233, 127, 0.7);
|
||||
}
|
||||
|
||||
.homevideosPosterItem .posterItemImage {
|
||||
background-color: rgba(110, 52, 32, 0.7);
|
||||
}
|
||||
|
||||
.photosPosterItem .posterItemImage {
|
||||
background-color: rgba(127, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.musicvideosPosterItem .posterItemImage {
|
||||
background-color: rgba(143, 54, 168, 0.7);
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 31%;
|
||||
/* Specify a min width just in case the container doesn't have a width */
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 32%;
|
||||
/* Specify a min width just in case the container doesn't have a width */
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 23.5%;
|
||||
/* Specify a min width just in case the container doesn't have a width */
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 24.0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 19.0%;
|
||||
/* Specify a min width just in case the container doesn't have a width */
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1600px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 15.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2000px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 13.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2300px) {
|
||||
|
||||
.myLibraryPosterItem {
|
||||
width: 13.8%;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue