|
|
|
|
@ -1,8 +1,11 @@
|
|
|
|
|
/* =======================================================================
|
|
|
|
|
File: static/css/bookcard.css
|
|
|
|
|
Purpose:
|
|
|
|
|
All styling for registered book cards (book-card) +
|
|
|
|
|
status colors + start/abort buttons + progress bars
|
|
|
|
|
Styling voor registered book cards:
|
|
|
|
|
- status kleuren
|
|
|
|
|
- badges
|
|
|
|
|
- start/abort/statuscheck
|
|
|
|
|
- progress bars
|
|
|
|
|
======================================================================= */
|
|
|
|
|
|
|
|
|
|
/* -----------------------------------------------------------------------
|
|
|
|
|
@ -17,7 +20,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -----------------------------------------------------------------------
|
|
|
|
|
BOOK CARD
|
|
|
|
|
BOOK CARD BASE
|
|
|
|
|
----------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.book-card {
|
|
|
|
|
@ -36,34 +39,28 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -----------------------------------------------------------------------
|
|
|
|
|
STATUS COLORS
|
|
|
|
|
STATUS COLORS (BOOK CARD BORDER)
|
|
|
|
|
----------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.book-card.processing {
|
|
|
|
|
border-color: #007aff;
|
|
|
|
|
box-shadow: 0 0 6px rgba(0, 122, 255, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Downloading / actief bezig */
|
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Audio fase */
|
|
|
|
|
.book-card.audio {
|
|
|
|
|
border-color: #34c759;
|
|
|
|
|
box-shadow: 0 0 6px rgba(52, 199, 89, 0.35);
|
|
|
|
|
border-color: #ffca28;
|
|
|
|
|
box-shadow: 0 0 6px rgba(255, 202, 40, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.book-card.completed {
|
|
|
|
|
border-color: #34c759;
|
|
|
|
|
box-shadow: 0 0 6px rgba(52, 199, 89, 0.35);
|
|
|
|
|
/* Volledig klaar */
|
|
|
|
|
.book-card.done {
|
|
|
|
|
border: 2px solid #4caf50;
|
|
|
|
|
box-shadow: 0 0 6px rgba(76, 175, 80, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Afgebroken */
|
|
|
|
|
.book-card.aborted {
|
|
|
|
|
border-color: #ff3b30;
|
|
|
|
|
box-shadow: 0 0 6px rgba(255, 59, 48, 0.35);
|
|
|
|
|
@ -188,6 +185,21 @@
|
|
|
|
|
background: #555;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Statuscheck */
|
|
|
|
|
.statuscheck-btn {
|
|
|
|
|
background-color: #444;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px solid #666;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.statuscheck-btn:hover {
|
|
|
|
|
background-color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -----------------------------------------------------------------------
|
|
|
|
|
PROGRESS (FULL WIDTH)
|
|
|
|
|
----------------------------------------------------------------------- */
|
|
|
|
|
@ -201,7 +213,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress-row {
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.progress-label {
|
|
|
|
|
@ -225,12 +237,12 @@
|
|
|
|
|
transition: width 0.4s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Download = blauw */
|
|
|
|
|
/* Download */
|
|
|
|
|
.progressbar-fill.download {
|
|
|
|
|
background: #2196f3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Audio = groen */
|
|
|
|
|
/* Audio */
|
|
|
|
|
.progressbar-fill.audio {
|
|
|
|
|
background: #4caf50;
|
|
|
|
|
}
|
|
|
|
|
@ -249,9 +261,50 @@
|
|
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.statuscheck-btn {
|
|
|
|
|
background-color: #444;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px solid #666;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
|
|
|
|
|
/* -----------------------------------------------------------------------
|
|
|
|
|
STATUS BADGE
|
|
|
|
|
----------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.status-badge {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* DONE */
|
|
|
|
|
.status-badge.status-done {
|
|
|
|
|
background-color: #e6f4ea;
|
|
|
|
|
color: #2e7d32;
|
|
|
|
|
border: 1px solid #4caf50;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* AUDIO */
|
|
|
|
|
.status-badge.status-audio {
|
|
|
|
|
background-color: #fff8e1;
|
|
|
|
|
color: #8d6e00;
|
|
|
|
|
border: 1px solid #ffca28;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* DOWNLOADING */
|
|
|
|
|
.status-badge.status-downloading {
|
|
|
|
|
background-color: #e3f2fd;
|
|
|
|
|
color: #1565c0;
|
|
|
|
|
border: 1px solid #42a5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Statuscheck */
|
|
|
|
|
.icon-statuscheck {
|
|
|
|
|
background: #444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-statuscheck:hover {
|
|
|
|
|
background: #333;
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|