You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
4.2 KiB
202 lines
4.2 KiB
/* =======================================================================
|
|
File: static/css/bookcard.css
|
|
Purpose:
|
|
All styling for registered book cards (book-card) +
|
|
status colors + start/abort buttons.
|
|
======================================================================= */
|
|
|
|
/* -----------------------------------------------------------------------
|
|
GRID WRAPPER FOR REGISTERED BOOKS
|
|
----------------------------------------------------------------------- */
|
|
|
|
.registered-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
MAIN BOOK CARD
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 90px auto;
|
|
gap: 15px;
|
|
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
border: 1px solid #e5e5e5;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
|
|
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
BOOK STATUS COLORS
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-card.processing {
|
|
border-color: #007aff;
|
|
box-shadow: 0 0 6px rgba(0, 122, 255, 0.35);
|
|
}
|
|
|
|
.book-card.downloading {
|
|
border-color: #ff9500;
|
|
box-shadow: 0 0 6px rgba(255, 149, 0, 0.35);
|
|
}
|
|
|
|
.book-card.parsing {
|
|
border-color: #ffcc00;
|
|
box-shadow: 0 0 6px rgba(255, 204, 0, 0.35);
|
|
}
|
|
|
|
.book-card.audio {
|
|
border-color: #e65100;
|
|
box-shadow: 0 0 6px rgba(230, 81, 0, 0.35);
|
|
}
|
|
|
|
.book-card.completed {
|
|
border-color: #34c759;
|
|
box-shadow: 0 0 6px rgba(52, 199, 89, 0.35);
|
|
}
|
|
|
|
.book-card.aborted {
|
|
border-color: #ff3b30;
|
|
box-shadow: 0 0 6px rgba(255, 59, 48, 0.35);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
COVER IMAGE
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-cover {
|
|
width: 90px;
|
|
}
|
|
|
|
.book-img {
|
|
width: 90px;
|
|
height: 130px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
background: #f4f4f4;
|
|
}
|
|
|
|
.placeholder {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #777;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
META INFORMATION
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.book-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.book-author {
|
|
font-size: 14px;
|
|
color: #444;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.book-created {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
ICON BUTTONS
|
|
----------------------------------------------------------------------- */
|
|
|
|
.icon-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 16px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
|
|
transition: background 0.15s ease, transform 0.1s ease;
|
|
}
|
|
|
|
/* Start (green) */
|
|
.icon-start {
|
|
background: #2d8a3d;
|
|
}
|
|
.icon-start:hover {
|
|
background: #226c30;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.icon-start:disabled {
|
|
background: #9bbb9f !important;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Abort (red) */
|
|
.icon-abort {
|
|
background: #c62828;
|
|
}
|
|
.icon-abort:hover {
|
|
background: #a31f1f;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.icon-abort:disabled {
|
|
background: #d8a0a0 !important;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Hide button (gray) */
|
|
.hide-form {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
.icon-hide {
|
|
background: #777;
|
|
}
|
|
.icon-hide:hover {
|
|
background: #555;
|
|
transform: scale(1.05);
|
|
}
|
|
/* -----------------------------------------------------------------------
|
|
BOOK ACTIONS (right aligned button row)
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-actions {
|
|
display: flex;
|
|
justify-content: flex-end; /* rechts uitlijnen */
|
|
gap: 10px; /* ruimte tussen knoppen */
|
|
margin-top: 12px;
|
|
}
|