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.
252 lines
4.8 KiB
252 lines
4.8 KiB
/* =======================================================================
|
|
File: static/css/bookcard.css
|
|
Purpose:
|
|
All styling for registered book cards (book-card) +
|
|
status colors + start/abort buttons + progress bars
|
|
======================================================================= */
|
|
|
|
/* -----------------------------------------------------------------------
|
|
GRID WRAPPER
|
|
----------------------------------------------------------------------- */
|
|
|
|
.registered-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
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;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
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: #34c759;
|
|
box-shadow: 0 0 6px rgba(52, 199, 89, 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
|
|
----------------------------------------------------------------------- */
|
|
|
|
.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
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.book-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.book-author {
|
|
font-size: 14px;
|
|
color: #444;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.book-created {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
ACTION BUTTONS
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.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 */
|
|
.icon-start {
|
|
background: #2d8a3d;
|
|
}
|
|
.icon-start:hover {
|
|
background: #226c30;
|
|
transform: scale(1.05);
|
|
}
|
|
.icon-start:disabled {
|
|
background: #9bbb9f;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Abort */
|
|
.icon-abort {
|
|
background: #c62828;
|
|
}
|
|
.icon-abort:hover {
|
|
background: #a31f1f;
|
|
transform: scale(1.05);
|
|
}
|
|
.icon-abort:disabled {
|
|
background: #d8a0a0;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Hide */
|
|
.hide-form {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
}
|
|
.icon-hide {
|
|
background: #777;
|
|
}
|
|
.icon-hide:hover {
|
|
background: #555;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
PROGRESS (FULL WIDTH)
|
|
----------------------------------------------------------------------- */
|
|
|
|
.book-progress {
|
|
grid-column: 1 / -1;
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
background: #f6f6f6;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.progress-row {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
color: #444;
|
|
}
|
|
|
|
/* BAR */
|
|
.progressbar {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 14px;
|
|
background: #ddd;
|
|
border-radius: 7px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progressbar-fill {
|
|
height: 100%;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
/* Download = blauw */
|
|
.progressbar-fill.download {
|
|
background: #2196f3;
|
|
}
|
|
|
|
/* Audio = groen */
|
|
.progressbar-fill.audio {
|
|
background: #4caf50;
|
|
}
|
|
|
|
/* TEXT IN BAR */
|
|
.progressbar-text {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
pointer-events: none;
|
|
}
|