html, body {
height: 100%;
margin: 0;
}
#book_shelf {
margin: 0;
padding: 20px 30px 0;
background-size: cover;
}
.shelf {
border-bottom: 30px solid #584940;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -15px;
margin-bottom:25px;
z-index: -10;
}
.shelf:after {
content: '';
height: 20px;
width: calc(100% + 40px);
position: absolute;
top: 30px;
left: 0;
right: 0;
z-index: 1;
margin: 0 -20px
}
.book_shelf_container {
min-height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #fff;
}
.book, .book img, .book::after,
.book::before {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul {
display: table-cell;
vertical-align: middle;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline > li {
display: inline-block;
margin-left: 2em;
}
.list-inline > li:first-child {
margin-left: 0;
}
.book a {
padding:0;
margin:0;
display:block;
width: 213px;
height: 271px
}
.book {
cursor: pointer;
display: block;
width: 100%;
max-width: 250px;
height: auto;
position: relative;
background: white;
z-index: 1;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 9px 20px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
-webkit-transition: box-shadow .3s linear;
transition: box-shadow .3s linear;
}
.book img {
width: 100%;
height: auto;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transition: all .45s ease;
transition: all .45s ease;
}
.book:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 9px 20px 0 rgba(0, 0, 0, 0.45);
}
.book:hover img {
-webkit-transform: rotateY(-18deg);
transform: rotateY(-18deg);
box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.2);
}
.book::after,
.book::before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
z-index: -1;
top: 0;
background: white;
border: 1px solid #d9d9d9;
}
.book::before {
left: -3px;
}
.book::after {
left: -6px;
}
.library-shelf {
width: 100%;
}.library-row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin-left: 0;
margin-right: 0;
--books-per-row: 1;
--book-gap: 12px;
gap: var(--book-gap);
}.library-row > [class*="col-"] {
float: none;
display: flex;
justify-content: center;
align-items: flex-end;
flex: 0 1 140px;
min-width: 0;
max-width: calc((100% - (var(--books-per-row) - 1) * var(--book-gap)) / var(--books-per-row));
box-sizing: border-box;
padding-left: 4px;
padding-right: 4px;
}.library-row .book {
display: inline-block;
width: auto;
height: auto;
background: transparent;
}
.library-row .book .book-play-icon {
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.35);
border-radius: 50%;
pointer-events: none;
}
.library-row .book .book-play-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffffff;
}.library-row .book::before,
.library-row .book::after {
width: 100%;
height: 100%;
}.library-row .book img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}.library-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.library-modal.show {
display: flex;
}
.library-modal-content {
margin: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98vw;
height: 98vh;
background: #fff;
border-radius: 6px;
overflow: hidden;
box-sizing: border-box;
}
.library-modal-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
background: #fff;
position: absolute;
inset: 0;
z-index: 1;
box-sizing: border-box;
}
.library-modal-back {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: 12px;
background: rgba(255, 255, 255, 0.85);
color: #1f2937;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 6px 10px;
font-size: 14px;
line-height: 1;
cursor: pointer;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
@media (max-width: 576px) {
.library-modal-back {
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 768px), (max-height: 700px) {
.library-modal {
height: 100vh;
height: 100dvh;
}
.library-modal-content {
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: none;
width: 100%;
height: 100%;
height: 100dvh;
border-radius: 0;
}
.library-modal-frame {
top: 0;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
}
.library-modal-back {
top: calc(env(safe-area-inset-top, 0px) + 8px);
}
}.library-access-overlay {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 10050;
}.library-access-overlay.show {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.library-access-card {
background: #fff;
padding: 24px 26px 22px;
border-radius: 6px;
width: min(460px, 92vw);
font-family: Arial, sans-serif;
text-align: center;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.library-access-title {
font-size: 1.25rem;
font-weight: normal;
margin: 0 0 14px;
}.library-access-input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}.library-access-btn {
margin-top: 12px;
padding: 8px 12px;
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
cursor: pointer;
}.library-access-error {
color: #b00020;
margin-top: 8px;
font-size: 0.9rem;
}