mirror of
https://github.com/thomiceli/opengist.git
synced 2025-06-23 18:27:57 +02:00
Initial commit
This commit is contained in:
Thomas Miceli
75
public/editor.js
vendored
Normal file
75
public/editor.js
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
import {EditorView, keymap, gutter, lineNumbers} from "@codemirror/view"
|
||||
import {indentWithTab} from "@codemirror/commands"
|
||||
|
||||
EditorView.theme({}, {dark: true})
|
||||
|
||||
let editorsjs = []
|
||||
let editorsParentdom = document.getElementById('editors')
|
||||
let allEditorsdom = document.querySelectorAll('#editors > .editor')
|
||||
let firstEditordom = allEditorsdom[0]
|
||||
|
||||
const newEditor = (dom, value = '') => {
|
||||
return new EditorView({
|
||||
doc: value,
|
||||
extensions: [
|
||||
lineNumbers(), gutter({class: "cm-mygutter"}),
|
||||
keymap.of([indentWithTab]),
|
||||
],
|
||||
parent: dom
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
document.onsubmit = () => {
|
||||
console.log('onsubmit');
|
||||
window.onbeforeunload = null;
|
||||
}
|
||||
|
||||
let arr = [...allEditorsdom]
|
||||
arr.forEach(el => {
|
||||
// in case we edit the gist contents
|
||||
let currEditor = newEditor(el, el.querySelector('.form-filecontent').value)
|
||||
editorsjs.push(currEditor)
|
||||
|
||||
currEditor.dom.addEventListener("input", function inputConfirmLeave() {
|
||||
if (!currEditor.inView) return; // skip events outside the viewport
|
||||
|
||||
currEditor.dom.removeEventListener("input", inputConfirmLeave);
|
||||
window.onbeforeunload = () => {
|
||||
return 'Are you sure you want to quit?';
|
||||
}
|
||||
});
|
||||
|
||||
// remove editor on delete
|
||||
let deleteBtns = el.querySelector('button.delete-file')
|
||||
if (deleteBtns !== null) {
|
||||
|
||||
deleteBtns.onclick = () => {
|
||||
|
||||
editorsjs.splice(editorsjs.indexOf(currEditor), 1);
|
||||
el.remove()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('add-file').onclick = () => {
|
||||
let newEditorDom = firstEditordom.cloneNode(true)
|
||||
|
||||
// reset the filename of the new cloned element
|
||||
newEditorDom.querySelector('input[name="name"]').value = ""
|
||||
|
||||
// removing the previous codemirror editor
|
||||
let newEditorDomCM = newEditorDom.querySelector('.cm-editor')
|
||||
newEditorDomCM.remove()
|
||||
|
||||
// creating the new codemirror editor and append it in the editor div
|
||||
editorsjs.push(newEditor(newEditorDom))
|
||||
editorsParentdom.append(newEditorDom)
|
||||
}
|
||||
|
||||
document.querySelector('form#create').onsubmit = () => {
|
||||
let j = 0
|
||||
document.querySelectorAll('.form-filecontent').forEach((e) => {
|
||||
e.value = encodeURIComponent(editorsjs[j++].state.doc.toString())
|
||||
})
|
||||
}
|
||||
3
public/favicon.svg
vendored
Normal file
3
public/favicon.svg
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 294 B |
132
public/main.js
vendored
Normal file
132
public/main.js
vendored
Normal file
@ -0,0 +1,132 @@
|
||||
import './style.css'
|
||||
import './markdown.css'
|
||||
import 'highlight.js/styles/tokyo-night-dark.css'
|
||||
import moment from 'moment'
|
||||
import md from 'markdown-it'
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.moment-timestamp').forEach((e) => {
|
||||
e.title = moment.unix(e.innerHTML).format('LLLL')
|
||||
e.innerHTML = moment.unix(e.innerHTML).fromNow()
|
||||
})
|
||||
|
||||
document.querySelectorAll('.moment-timestamp-date').forEach((e) => {
|
||||
e.innerHTML = moment.unix(e.innerHTML).format('DD/MM/YYYY HH:mm')
|
||||
})
|
||||
|
||||
let rev = document.querySelector('.revision-text')
|
||||
if (rev) {
|
||||
let fullRev = rev.innerHTML
|
||||
let smallRev = fullRev.substring(0, 8)
|
||||
rev.innerHTML = smallRev
|
||||
|
||||
rev.onmouseover = () => {
|
||||
rev.innerHTML = fullRev
|
||||
}
|
||||
rev.onmouseout = () => {
|
||||
rev.innerHTML = smallRev
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.markdown').forEach((e) => {
|
||||
e.innerHTML = md().render(e.innerHTML);
|
||||
})
|
||||
|
||||
document.querySelectorAll('.table-code').forEach((el) => {
|
||||
let ext = el.dataset.filename.split('.').pop()
|
||||
if (ext!== 'txt') {
|
||||
|
||||
el.querySelectorAll('td.line-code').forEach((ell) => {
|
||||
ell.classList.add('language-'+ext)
|
||||
hljs.highlightElement(ell);
|
||||
});
|
||||
}
|
||||
|
||||
// more efficient
|
||||
el.addEventListener('click', event => {
|
||||
if (event.target.matches('.line-num')) {
|
||||
Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
|
||||
|
||||
event.target.nextSibling.classList.add('selected')
|
||||
|
||||
let filename = el.dataset.filenameSlug
|
||||
let line = event.target.textContent
|
||||
let url = location.protocol + '//' + location.host + location.pathname
|
||||
let hash = '#file-'+ filename + '-' +line
|
||||
window.history.pushState(null, null, url+hash);
|
||||
location.hash = hash;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
let colorhash = () => {
|
||||
Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
|
||||
let lineEl = document.querySelector(location.hash)
|
||||
if (lineEl) {
|
||||
lineEl.nextSibling.classList.add('selected')
|
||||
}
|
||||
}
|
||||
|
||||
if (location.hash) {
|
||||
colorhash()
|
||||
}
|
||||
window.onhashchange = colorhash
|
||||
|
||||
document.getElementById('main-menu-button').onclick = () => {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden')
|
||||
}
|
||||
|
||||
let tabs = document.getElementById('gist-tabs')
|
||||
if (tabs) {
|
||||
tabs.onchange = (e) => {
|
||||
// navigate to the url in data-url
|
||||
window.location.href = e.target.selectedOptions[0].dataset.url
|
||||
}
|
||||
}
|
||||
|
||||
let gistmenutoggle = document.getElementById('gist-menu-toggle');
|
||||
if (gistmenutoggle) {
|
||||
let gistmenucopy = document.getElementById('gist-menu-copy')
|
||||
let gistmenubuttoncopy = document.getElementById('gist-menu-button-copy')
|
||||
let gistmenuinput = document.getElementById('gist-menu-input')
|
||||
let gistmenutitle = document.getElementById('gist-menu-title')
|
||||
gistmenutoggle.onclick = () => {
|
||||
gistmenucopy.classList.toggle('hidden')
|
||||
}
|
||||
|
||||
for (let item of gistmenucopy.children) {
|
||||
item.onclick = () => {
|
||||
gistmenutitle.textContent = item.firstChild.textContent
|
||||
gistmenuinput.value = item.dataset.link
|
||||
gistmenucopy.classList.toggle('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
gistmenubuttoncopy.onclick = () => {
|
||||
let text = gistmenuinput.value
|
||||
navigator.clipboard.writeText(text).then(null, function(err) {
|
||||
console.error('Could not copy text: ', err);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let sortgist = document.getElementById('sort-gists-button')
|
||||
if (sortgist) {
|
||||
sortgist.onclick = () => {
|
||||
document.getElementById('sort-gists-dropdown').classList.toggle('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.copy-gist-btn').forEach((e) => {
|
||||
e.onclick = () => {
|
||||
navigator.clipboard.writeText(e.parentNode.querySelector('.gist-content').textContent).then(null, function (err) {
|
||||
console.error('Could not copy text: ', err);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
});
|
||||
942
public/markdown.css
vendored
Normal file
942
public/markdown.css
vendored
Normal file
@ -0,0 +1,942 @@
|
||||
/* https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown-dark.css */
|
||||
|
||||
.markdown-body {
|
||||
color-scheme: dark;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
margin: 0;
|
||||
color: #c9d1d9;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor .octicon-link:before,
|
||||
.markdown-body h2:hover .anchor .octicon-link:before,
|
||||
.markdown-body h3:hover .anchor .octicon-link:before,
|
||||
.markdown-body h4:hover .anchor .octicon-link:before,
|
||||
.markdown-body h5:hover .anchor .octicon-link:before,
|
||||
.markdown-body h6:hover .anchor .octicon-link:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
|
||||
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
|
||||
}
|
||||
|
||||
.markdown-body details,
|
||||
.markdown-body figcaption,
|
||||
.markdown-body figure {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.markdown-body summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.markdown-body [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
background-color: transparent;
|
||||
color: #58a6ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:active,
|
||||
.markdown-body a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.markdown-body abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
.markdown-body b,
|
||||
.markdown-body strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
margin: .67em 0;
|
||||
font-weight: 600;
|
||||
padding-bottom: .3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #21262d;
|
||||
}
|
||||
|
||||
.markdown-body mark {
|
||||
background-color: rgba(187,128,9,0.15);
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body small {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.markdown-body sub,
|
||||
.markdown-body sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.markdown-body sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
.markdown-body sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: #0d1117;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre,
|
||||
.markdown-body samp {
|
||||
font-family: monospace,monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #21262d;
|
||||
height: .25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #30363d;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.markdown-body [type=button],
|
||||
.markdown-body [type=reset],
|
||||
.markdown-body [type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
.markdown-body [type=button]::-moz-focus-inner,
|
||||
.markdown-body [type=reset]::-moz-focus-inner,
|
||||
.markdown-body [type=submit]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body [type=button]:-moz-focusring,
|
||||
.markdown-body [type=reset]:-moz-focusring,
|
||||
.markdown-body [type=submit]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
.markdown-body [type=checkbox],
|
||||
.markdown-body [type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body [type=number]::-webkit-inner-spin-button,
|
||||
.markdown-body [type=number]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.markdown-body [type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.markdown-body [type=search]::-webkit-search-cancel-button,
|
||||
.markdown-body [type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.markdown-body ::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
.markdown-body ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-body hr::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown-body td,
|
||||
.markdown-body th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-body details:not([open])>*:not(summary) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
line-height: 10px;
|
||||
color: #c9d1d9;
|
||||
vertical-align: middle;
|
||||
background-color: #161b22;
|
||||
border: solid 1px rgba(110,118,129,0.4);
|
||||
border-bottom-color: rgba(110,118,129,0.4);
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 -1px 0 rgba(110,118,129,0.4);
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-weight: 600;
|
||||
padding-bottom: .3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #21262d;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-weight: 600;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
font-weight: 600;
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
font-weight: 600;
|
||||
font-size: .85em;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
color: #8b949e;
|
||||
border-left: .25em solid #30363d;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markdown-body ul ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-body tt,
|
||||
.markdown-body code {
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
font-size: 12px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
overflow: visible !important;
|
||||
vertical-align: text-bottom;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.markdown-body ::placeholder {
|
||||
color: #484f58;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.markdown-body input::-webkit-outer-spin-button,
|
||||
.markdown-body input::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c1,
|
||||
.markdown-body .pl-s .pl-v {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.markdown-body .pl-e,
|
||||
.markdown-body .pl-en {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.markdown-body .pl-smi,
|
||||
.markdown-body .pl-s .pl-s1 {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ent {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.markdown-body .pl-k {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.markdown-body .pl-s,
|
||||
.markdown-body .pl-pds,
|
||||
.markdown-body .pl-s .pl-pse .pl-s1,
|
||||
.markdown-body .pl-sr,
|
||||
.markdown-body .pl-sr .pl-cce,
|
||||
.markdown-body .pl-sr .pl-sre,
|
||||
.markdown-body .pl-sr .pl-sra {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.markdown-body .pl-v,
|
||||
.markdown-body .pl-smw {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.markdown-body .pl-bu {
|
||||
color: #f85149;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ii {
|
||||
color: #f0f6fc;
|
||||
background-color: #8e1519;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c2 {
|
||||
color: #f0f6fc;
|
||||
background-color: #b62324;
|
||||
}
|
||||
|
||||
.markdown-body .pl-sr .pl-cce {
|
||||
font-weight: bold;
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ml {
|
||||
color: #f2cc60;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mh,
|
||||
.markdown-body .pl-mh .pl-en,
|
||||
.markdown-body .pl-ms {
|
||||
font-weight: bold;
|
||||
color: #1f6feb;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi {
|
||||
font-style: italic;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mb {
|
||||
font-weight: bold;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body .pl-md {
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi1 {
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mc {
|
||||
color: #ffdfb6;
|
||||
background-color: #5a1e02;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi2 {
|
||||
color: #c9d1d9;
|
||||
background-color: #1158c7;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mdr {
|
||||
font-weight: bold;
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ba {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.markdown-body .pl-sg {
|
||||
color: #484f58;
|
||||
}
|
||||
|
||||
.markdown-body .pl-corl {
|
||||
text-decoration: underline;
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.markdown-body [data-catalyst] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.markdown-body g-emoji {
|
||||
font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
font-size: 1em;
|
||||
font-style: normal !important;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
vertical-align: -0.075em;
|
||||
}
|
||||
|
||||
.markdown-body g-emoji img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.markdown-body::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body .absent {
|
||||
color: #f85149;
|
||||
}
|
||||
|
||||
.markdown-body .anchor {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre,
|
||||
.markdown-body details {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body sup>a::before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.markdown-body sup>a::after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
.markdown-body h1 .octicon-link,
|
||||
.markdown-body h2 .octicon-link,
|
||||
.markdown-body h3 .octicon-link,
|
||||
.markdown-body h4 .octicon-link,
|
||||
.markdown-body h5 .octicon-link,
|
||||
.markdown-body h6 .octicon-link {
|
||||
color: #c9d1d9;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor,
|
||||
.markdown-body h2:hover .anchor,
|
||||
.markdown-body h3:hover .anchor,
|
||||
.markdown-body h4:hover .anchor,
|
||||
.markdown-body h5:hover .anchor,
|
||||
.markdown-body h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor .octicon-link,
|
||||
.markdown-body h2:hover .anchor .octicon-link,
|
||||
.markdown-body h3:hover .anchor .octicon-link,
|
||||
.markdown-body h4:hover .anchor .octicon-link,
|
||||
.markdown-body h5:hover .anchor .octicon-link,
|
||||
.markdown-body h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markdown-body h1 tt,
|
||||
.markdown-body h1 code,
|
||||
.markdown-body h2 tt,
|
||||
.markdown-body h2 code,
|
||||
.markdown-body h3 tt,
|
||||
.markdown-body h3 code,
|
||||
.markdown-body h4 tt,
|
||||
.markdown-body h4 code,
|
||||
.markdown-body h5 tt,
|
||||
.markdown-body h5 code,
|
||||
.markdown-body h6 tt,
|
||||
.markdown-body h6 code {
|
||||
padding: 0 .2em;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markdown-body ul.no-list,
|
||||
.markdown-body ol.no-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markdown-body ol[type="1"] {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.markdown-body ol[type=a] {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body ol[type=i] {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markdown-body div>ol:not([type]) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body li>p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markdown-body li+li {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body table th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #30363d;
|
||||
}
|
||||
|
||||
.markdown-body table tr {
|
||||
background-color: #0d1117;
|
||||
border-top: 1px solid #21262d;
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #161b22;
|
||||
}
|
||||
|
||||
.markdown-body table img {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body img[align=right] {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-body img[align=left] {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.markdown-body .emoji {
|
||||
max-width: none;
|
||||
vertical-align: text-top;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body span.frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body span.frame>span {
|
||||
display: block;
|
||||
float: left;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #30363d;
|
||||
}
|
||||
|
||||
.markdown-body span.frame span img {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.markdown-body span.frame span span {
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
clear: both;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown-body span.align-center>span {
|
||||
display: block;
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown-body span.align-center span img {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown-body span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown-body span.align-right>span {
|
||||
display: block;
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.markdown-body span.align-right span img {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.markdown-body span.float-left {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body span.float-left span {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
|
||||
.markdown-body span.float-right {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body span.float-right>span {
|
||||
display: block;
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body tt {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(110,118,129,0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.markdown-body code br,
|
||||
.markdown-body tt br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markdown-body del code {
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.markdown-body pre>code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #161b22;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.markdown-body pre code,
|
||||
.markdown-body pre tt {
|
||||
display: inline;
|
||||
max-width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body .csv-data td,
|
||||
.markdown-body .csv-data th {
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.markdown-body .csv-data .blob-num {
|
||||
padding: 10px 8px 9px;
|
||||
text-align: right;
|
||||
background: #0d1117;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body .csv-data tr {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body .csv-data th {
|
||||
font-weight: 600;
|
||||
background: #161b22;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes {
|
||||
font-size: 12px;
|
||||
color: #8b949e;
|
||||
border-top: 1px solid #30363d;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes ol {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes li:target::before {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -24px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 2px solid #1f6feb;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes li:target {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes .data-footnote-backref g-emoji {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item.enabled label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item+.task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item .handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item-checkbox {
|
||||
margin: 0 .2em .25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
|
||||
margin: 0 -1.6em .25em .2em;
|
||||
}
|
||||
|
||||
.markdown-body ::-webkit-calendar-picker-indicator {
|
||||
filter: invert(50%);
|
||||
}
|
||||
109
public/style.css
vendored
Normal file
109
public/style.css
vendored
Normal file
@ -0,0 +1,109 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
ul, ol {
|
||||
list-style: revert;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-primary-400;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply placeholder-gray-400;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
@apply bg-gray-900 mt-1 pt-1 !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.8em !important;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: Menlo,Consolas,Liberation Mono,monospace;
|
||||
}
|
||||
|
||||
.code .line-num {
|
||||
width: 4%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.red-diff {
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.green-diff {
|
||||
background-color: rgba(0, 255, 128, .1);
|
||||
}
|
||||
|
||||
.gray-diff {
|
||||
background-color: rgba(143, 143, 143, 0.38);
|
||||
@apply py-4 !important
|
||||
}
|
||||
|
||||
#logged-button:hover .username {
|
||||
@apply hidden !important
|
||||
}
|
||||
|
||||
#logged-button:hover .logout {
|
||||
@apply block !important
|
||||
}
|
||||
|
||||
.cm-line, .cm-gutter {
|
||||
@apply bg-gray-900 !important;
|
||||
caret-color: white !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.cm-activeLine, .cm-activeLineGutter {
|
||||
@apply bg-gray-800 !important;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.cm-gutterElement {
|
||||
@apply text-gray-300 px-4 !important
|
||||
}
|
||||
|
||||
.code td {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.code tbody {
|
||||
line-height: 18.2px;
|
||||
}
|
||||
|
||||
#editor {
|
||||
height: 337px;
|
||||
max-height: 337px;
|
||||
}
|
||||
|
||||
.cm-editor {
|
||||
height: 337px;
|
||||
max-height: 337px;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.line-code.selected {
|
||||
background-color: rgba(65, 25, 63, 0.46) !important;
|
||||
box-shadow: inset 4px 0 0 rgb(107, 38, 102) !important;
|
||||
}
|
||||
|
||||
.line-code {
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
.line-num {
|
||||
@apply cursor-pointer text-slate-400 hover:text-white;
|
||||
}
|
||||
Reference in New Issue
Block a user