mirror of
https://github.com/JonasunderscoreJones/selfhosted-overleaf-project-share.git
synced 2025-10-26 02:19:18 +02:00
css refinement
This commit is contained in:
parent
783eed8fd5
commit
4667f9393d
1 changed files with 57 additions and 15 deletions
|
|
@ -6,6 +6,7 @@
|
|||
<title>Project Viewer</title>
|
||||
<link rel="stylesheet" href="/prism.css" />
|
||||
<style>
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
|
|
@ -32,6 +33,16 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #2f3a4c;
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
border-bottom: 3px solid #444;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -68,13 +79,16 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
.editor {
|
||||
.editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 2;
|
||||
background: #1e1e1e;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.editor pre {
|
||||
|
|
@ -111,14 +125,14 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #f33;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: #330000cc;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -143,41 +157,67 @@
|
|||
#dragbar:hover {
|
||||
background: #666;
|
||||
}
|
||||
#open-in-editor-button {
|
||||
.rounded-button {
|
||||
margin-left: auto;
|
||||
color: white;
|
||||
background-color: #098842;
|
||||
border-radius: 100px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.25rem 1rem;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#open-in-editor-button:hover {
|
||||
.rounded-button:hover {
|
||||
background-color: #1e6941;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.left-button {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
border-radius: 20px 100px 100px 20px;
|
||||
}
|
||||
.right-button {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
border-radius: 100px 20px 20px 100px;
|
||||
}
|
||||
.files-header {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header><a id="header-content"><a>LaTeX Project Viewer (Read-only) -</a><a id="project-id" style="margin-left: 3px;"></a><a id="open-in-editor-button">Open in Editor</a></a></header>
|
||||
<header><a id="header-content"><a>LaTeX Project Viewer (Read-only) -</a><a id="project-id" style="margin-left: 3px;"></a><a id="open-in-editor-button" class="rounded-button">Open in Editor <svg xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg></a></a></header>
|
||||
<main>
|
||||
<nav class="sidebar">
|
||||
<div class="subheader">
|
||||
<p class="files-header"><svg xmlns="http://www.w3.org/2000/svg" width="15px" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#bbbbbb" d="M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z"/></svg> Files:</p>
|
||||
</div>
|
||||
<ul id="file-list"></ul>
|
||||
</nav>
|
||||
<div class="editor">
|
||||
<pre class="line-numbers"><code id="code" class="language-latex">// Loading...</code></pre>
|
||||
<div class="editor-container">
|
||||
<div class="subheader">
|
||||
<a class="rounded-button left-button" href="zip">Download ZIP
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
|
||||
</a>
|
||||
<a class="rounded-button right-button" id="download-pdf-button">Download PDF
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></a>
|
||||
</div>
|
||||
<div class="editor">
|
||||
<pre class="line-numbers"><code id="code" class="language-latex">// Loading...</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dragbar"></div>
|
||||
<section class="preview-container">
|
||||
<div class="preview">
|
||||
<iframe id="pdf" title="PDF preview"></iframe>
|
||||
<div id="pdf-error" class="pdf-error">PDF failed to load or was not compiled.</div>
|
||||
<div id="pdf-error" class="pdf-error">PDF failed to load or was not compiled.<br><br>If You are the owner, please recompile the PDF in the editor.</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>Static viewer for LaTeX projects</footer>
|
||||
<footer>Static viewer for LaTeX projects - by Jonas_Jones</footer>
|
||||
|
||||
<script src="/prism.js"></script>
|
||||
<script>
|
||||
|
|
@ -252,8 +292,10 @@
|
|||
|
||||
if (pdfToLoad) {
|
||||
loadPDF(pdfToLoad);
|
||||
document.getElementById("download-pdf-button").href = pdfToLoad;
|
||||
} else {
|
||||
showPDFError(true);
|
||||
document.getElementById("download-pdf-button").style.display = "none";
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue