Book Style Images css for BookStack
Code needs cleanup
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.466/pdf.min.js"></script>
<style>
/* Adjusted .grid-card styles */
.newbookcover{
font-weight: bold;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.7); /* Black background with 50% opacity */
color: #ffffff; /* White text */
padding:10px;
top:60px;}
.grid-card {
position: relative;
width: 140px;
height: 200px;
background-size: cover; /* Ensure the background image covers the container */
background-position: 50% 50%; /* Center the background image */
}
.grid-card:hover {
color: #444;
text-decoration: none;
box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .1);
}
.grid-card:hover {
box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .1);
}
.featured-image-container {
width: 140px;
height: 200px;
/* Center the background image */
}
.featured-image-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 200px;
/* Center the background image */
background: linear-gradient(90deg,
rgba(2, 0, 36, 0.3) 0%,
rgba(0, 0, 0, 0.3) 2%,
rgba(255, 255, 255, 0.3) 3%,
rgba(247, 254, 255, 0.3) 5%,
rgba(0, 0, 0, 0.3) 7%,
rgba(255, 255, 255, 0.3) 13%,
rgba(255, 255, 255, 0.1) 100%);
}
.featured-image-container img {
width: 140px !important;
height: 200px !important;
border-bottom: 1px solid #000;
margin-bottom: 3px;
border-radius: 5px;
/* Ensure the background image covers the container */
/* Center the background image */
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
.featured-image-container a {
display: block;
}
.featured-image-container-wrap {
position: relative;
/* Ensure container height matches card height */
/* Ensure the background image covers the container */
/* Center the background image */
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
.featured-image-container-wrap a {
position: relative;
/* Ensure container height matches card height */
}
.featured-image-container-wrap .svg-icon {
color: #fff;
font-size: 2rem;
margin-inline-end: 0;
position: absolute;
bottom: 10px;
left: 6px;
}
.grid-card-content,
.grid-card-footer {
padding: 12px;
}
.grid-card h2 {
font-size: 1.2em;
margin: 0 0 10px;
}
.grid-card p {
font-size: 0.6rem;
margin: 0;
line-height: 1.4em;
}
.grid-card .grid-card-footer p.small {
font-size: 0.7em;
margin: 0;
}
html.dark-mode .grid-card {
border-color: #000;
}
html.dark-mode .grid-card:hover {
box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .5);
}
.grid-card h2 {
width: 100%;
font-size: 1.2em; /* Adjusted for smaller card */
margin: 0 0 10px;
}
.grid-card p {
font-size: 0.6rem; /* Adjusted for smaller card */
margin: 0;
line-height: 1.4em; /* Adjusted for smaller card */
}
.grid-card .grid-card-content {
flex: 1;
border-top: 0;
border-bottom-width: 2px;
}
.grid-card .grid-card-content,
.grid-card .grid-card-footer {
padding: 12px; /* Adjusted for smaller card */
}
.grid-card .grid-card-content+.grid-card-footer {
padding-top: 0;
}
.book-grid-item .grid-card-footer p.small {
font-size: .7em; /* Adjusted for smaller card */
margin: 0;
}
/* Adjusted .grid-card styles */
.content-wrap.card {
padding: 16px 48px;
margin-inline-start: auto;
margin-inline-end: auto;
margin-bottom: 24px;
overflow: initial;
min-height: 60vh;
border-radius: 8px;
}
.content-wrap.card.auto-height {
min-height: 0;
}
.content-wrap.card.fill-width {
width: 100%; /* Ensure consistent width */
}
@media screen and (max-width: 1400px) {
.content-wrap.card {
padding: 16px 32px;
}
}
@media screen and (max-width: 880px) {
.content-wrap.card {
padding: 16px 24px;
}
}
@media screen and (max-width: 600px) {
.content-wrap.card {
padding: 16px 16px;
}
}
@media screen and (max-width: 320px) {
.content-wrap.card {
padding: 16px 13px;
}
}
.sub-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
border: 1.5px solid;
border-color: #e2e2e2;
border-radius: 4px;
}
html.dark-mode .featured-image-container-wrap .svg-icon {
color: rgba(255, 255, 255, .6);
}
.grid-card:hover .featured-image-container {
opacity: .5;
}
.action-link {
background: rgba(0, 0, 0, 0);
border: none;
color: currentColor;
padding: 16px 0;
}
.active-link-list a {
display: inline-block;
padding: 12px;
}
.active-link-list a:not(.active) {
color: #444;
}
html.dark-mode .active-link-list a:not(.active) {
color: #888;
}
.active-link-list a:hover {
background-color: rgba(0, 0, 0, .05);
border-radius: 4px;
text-decoration: none;
}
html.dark-mode .active-link-list a:hover {
background-color: rgba(255, 255, 255, .05);
}
.active-link-list.in-sidebar a {
display: block;
margin-bottom: 6px;
}
.active-link-list.in-sidebar a.active {
border-radius: 4px;
background-color: rgba(0, 0, 0, .05);
}
html.dark-mode .active-link-list.in-sidebar a.active {
background-color: rgba(255, 255, 255, .05);
}
.entity-meta-item {
display: flex;
line-height: 1.2;
margin: .6em 0;
align-content: start;
gap: 12px;
}
.entity-meta-item a {
line-height: 1.2;
}
.entity-meta-item svg {
flex-shrink: 0;
width: 1em;
margin: 0;
}
.page-editor {
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
}
.page-editor .edit-area {
flex: 1;
flex-direction: column;
z-index: 10;
overflow: hidden;
border-radius: 0 0 8px 8px;
}
.page-editor .mce-tinymce {
box-shadow: none;
}
.page-editor .mce-top-part::before {
box-shadow: none;
}
.page-editor-page-area {
width: 100%;
border-radius: 8px;
box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .1);
background-color: #fff;
}
.grid{display:grid;grid-column-gap:20px;grid-row-gap:20px;}
.grid>*{min-width:0}
.grid.half
{grid-template-columns:2fr 1fr;}
/* Grid container and responsive adjustments */
.grid.third {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 5 columns */
gap: 8px; /* Adjust the gap between items */
width: 100%; /* Consistent width */
}
@media screen and (max-width: 1400px) {
.grid.third {
grid-template-columns: repeat(4, 1fr); /* 4 columns for smaller screens */
}
}
@media screen and (max-width: 880px) {
.grid.third {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
@media screen and (max-width: 600px) {
.grid.third {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
@media screen and (max-width: 600px) {
.grid.third:not(.no-break) {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
@media screen and (max-width: 400px) {
.grid.half.collapse-xs {
grid-template-columns: repeat(1, 1fr); /* 3 columns for smaller screens */
}
}
.grid.left-focus{grid-template-columns:1fr
.grid.right-focus{grid-template-columns:1fr 3fr}
.grid.gap-y-xs{grid-row-gap:6px}
.grid.gap-xl{grid-column-gap:32px;grid-row-gap:32px}
.grid.gap-xxl{grid-column-gap:48px;grid-row-gap:48px}
.grid.v-center{align-items:center}
.grid.v-end{align-items:end}
.grid.no-gap{grid-row-gap:0;grid-column-gap:0}
.grid.no-row-gap{grid-row-gap:0}@media screen and (max-width: 880px){.grid.third:not(.no-break){grid-template-columns:1fr 1fr}
.grid.half:not(.no-break),.grid.left-focus:not(.no-break),.grid.right-focus:not(.no-break){grid-template-columns:1fr}
.grid.half.collapse-xs{grid-template-columns:1fr 1fr}
.grid.gap-xl{grid-column-gap:16px;grid-row-gap:16px}
.grid.right-focus.reverse-collapse>*:nth-child(2){order:0}
.grid.right-focus.reverse-collapse>*:nth-child(1){order:1}}@media screen and (max-width: 600px){
.grid.third:not(.no-break){grid-template-columns:2fr}}@media screen and (max-width: 400px){
.grid.half.collapse-xs{grid-template-columns:2fr}}#content{flex:1 0 auto}body.flexbox{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:100%;max-height:100%;overflow:hidden}
@media screen and (max-width: 880px) {
.grid.third:not(.no-break) {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
@media screen and (max-width: 600px) {
.grid.third:not(.no-break) {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
@media screen and (max-width: 320px) {
.grid.third:not(.no-break) {
grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
}
}
.social-icons a {
color: #fff;
text-decoration: none;
font-size: 18px;
margin-left: 10px;
}
.social-icons a:hover {
opacity: 0.8;
}
canvas[data-pdfurl] {
background-color: lightgrey;
width: 100%;
}
.page-content a {
color: #39f;
text-decoration: underline;
}
.pdf-wrapper {
position: relative;
height: 80vh;
width: 100%;
}
.pdf-wrapper .download-link {
position: absolute;
top: -2em;
right: 0;
z-index: 50;
}
.pdf-wrapper .pdf-scroller {
height: 100%;
overflow: auto;
}
/* Adjusted .featured-image-container styles */
</style>
<script type="text/javascript">
var createButton = function(text,details,id,callback) {
var btnWrapper = document.createElement('div');
btnWrapper.id = id;
btnWrapper.className='mce-widget mce-btn';
btnWrapper.tabindex=-1;
btnWrapper.role='button';
btnWrapper.ariaLabel=details;
var btn = document.createElement('button');
btn.id=id+'-button';
btn.innerText = text;
btn.role='presentation';
btn.type='button';
btn.tabindex='-1';
btn.style.border = 'solid 1px';
btn.style.padding = ' 3px 7px';
btnWrapper.append(btn);
btnWrapper.onclick = callback;
var ar =document.querySelectorAll('.mce-btn.mce-last');
var lastBtn = ar[ar.length-2];
lastBtn.parentNode.append(btnWrapper);
};
window.addEventListener('load', function () {
// ------------------- THIS SECTION ADDS A PDF BUTTON TO THE EDITOR TOOLBAR THAT ALLOWS YOU TO EMBED PDFS
var btn = document.querySelectorAll('#mceu_20')[0];
if (btn) {
createButton('pdf', 'Insert a PDF', 'mceu_pdf', function(e) {
// show dialog
var editor = tinyMCE.editors[0];
editor.windowManager.open({
title: 'Insert PDF',
body: [
{type: 'textbox', name: 'pdfurl', label: 'PDF URL'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<p> <canvas data-pdfurl="' + e.data.pdfurl + '"></canvas> </p>');
}
});
});
}
//-------------------- THE CODE BELOW SHALL BE ACTIVE IN VIEWING MODE TO EMBED PDFS
var renderPdf=function(canvas) {
var url = canvas.dataset.pdfurl;
var pdf = null;
// wrap canvas in div
var wrapper = document.createElement('div');
wrapper.className='pdf-wrapper';
var scroller = document.createElement('div');
scroller.className='pdf-scroller';
wrapper.appendChild(scroller);
canvas.parentNode.insertBefore(wrapper, canvas.nextSibling);
scroller.insertBefore(canvas, null);
var downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.className="download-link";
downloadLink.innerText = 'Download PDF now ↓';
wrapper.appendChild(downloadLink);
var renderPage = function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
canvas.style.maxWidth='100%';
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
if (currentPage < pdf.numPages) {
currentPage++;
var newCanvas = document.createElement('canvas');
scroller.insertBefore(newCanvas, canvas.nextSibling);
scroller.insertBefore(document.createElement('hr'), canvas.nextSibling);
canvas=newCanvas;
pdf.getPage(currentPage).then(renderPage);
}
};
var currentPage = 1;
pdfjsLib.getDocument(url)
.then(function(pdfLocal) {
pdf = pdfLocal;
return pdf.getPage(1);
})
.then(renderPage);
}
Array.prototype.forEach.call(
document.querySelectorAll('canvas[data-pdfurl]'),
renderPdf);
});
</script>