imported styles from wiki
This commit is contained in:
parent
f5bc546a70
commit
c8d6a8f21f
|
|
@ -0,0 +1,124 @@
|
||||||
|
function extractSchemaDetails(str) {
|
||||||
|
// Regular expression with named capture groups for name and optional placeholder
|
||||||
|
const regex = /{{(?<name>[^:}]+)(?::(?<placeholder>[^:}]+))?}}/g
|
||||||
|
const results = []
|
||||||
|
let match
|
||||||
|
|
||||||
|
while ((match = regex.exec(str)) !== null) {
|
||||||
|
|
||||||
|
// check if the match is already in the results array
|
||||||
|
if (results.some((result) => result.name === match.groups.name)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
name: match.groups.name,
|
||||||
|
placeholder: match.groups.placeholder || null, // If placeholder is undefined, null
|
||||||
|
input: null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceDivTextExceptSpan(div, newTextBefore) {
|
||||||
|
|
||||||
|
// Iterate over child nodes of the div
|
||||||
|
for (const node of div.childNodes) {
|
||||||
|
// Check if the node is a text node
|
||||||
|
if (node.nodeType === Node.TEXT_NODE) {
|
||||||
|
// Check the position of the text node to determine if it's before or after the span
|
||||||
|
if (node.nextSibling && node.nextSibling.tagName === 'SPAN') {
|
||||||
|
// Text node before the span
|
||||||
|
node.nodeValue = newTextBefore;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const main = () => {
|
||||||
|
// select every code block with class language-template
|
||||||
|
document.querySelectorAll('code.language-template').forEach((codeElement) => {
|
||||||
|
// get the code inside the block
|
||||||
|
const codeInnerText = codeElement.innerText
|
||||||
|
const id = Math.random().toString(36).substring(7)
|
||||||
|
|
||||||
|
const templateContainer = document.createElement('div')
|
||||||
|
templateContainer.id = id;
|
||||||
|
templateContainer.className = "template-container"
|
||||||
|
|
||||||
|
const title = document.createElement('div')
|
||||||
|
title.className = "template-title"
|
||||||
|
title.innerText = "Template"
|
||||||
|
templateContainer.appendChild(title)
|
||||||
|
|
||||||
|
const templateVars = extractSchemaDetails(codeInnerText)
|
||||||
|
|
||||||
|
const renderInputs = () => {
|
||||||
|
let newCode = codeInnerText
|
||||||
|
|
||||||
|
templateVars.forEach((variable) => {
|
||||||
|
const escapedPlaceholder = variable.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||||
|
const regexPattern = `{{${escapedPlaceholder}(?::[^}]+)?}}`; // Matches {{name}} or {{name:anything}}
|
||||||
|
const regex = new RegExp(regexPattern, 'g');
|
||||||
|
|
||||||
|
if (variable.input !== null && variable.input !== "") {
|
||||||
|
newCode = newCode.replace(regex, variable.input)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
replaceDivTextExceptSpan(codeElement, newCode)
|
||||||
|
console.log(newCode)
|
||||||
|
}
|
||||||
|
|
||||||
|
// create input elements
|
||||||
|
templateVars.forEach((variable) => {
|
||||||
|
const inputDiv = document.createElement('div')
|
||||||
|
inputDiv.className = "template-input-div"
|
||||||
|
|
||||||
|
const label = document.createElement('label')
|
||||||
|
label.for = `${id}-${variable.name}`
|
||||||
|
label.innerText = variable.name
|
||||||
|
|
||||||
|
const input = document.createElement('input')
|
||||||
|
input.id = `${id}-${variable.name}`
|
||||||
|
input.placeholder = variable.placeholder || variable.name
|
||||||
|
input.value = null
|
||||||
|
input.className = "template-input"
|
||||||
|
|
||||||
|
input.addEventListener('input', e => {
|
||||||
|
variable.input = e.target.value
|
||||||
|
renderInputs()
|
||||||
|
})
|
||||||
|
|
||||||
|
inputDiv.appendChild(label)
|
||||||
|
inputDiv.appendChild(input)
|
||||||
|
templateContainer.appendChild(inputDiv)
|
||||||
|
console.log(variable.name, variable.placeholder)
|
||||||
|
})
|
||||||
|
|
||||||
|
const copyButton = document.createElement('button')
|
||||||
|
copyButton.className = "template-copy-button"
|
||||||
|
copyButton.innerText = "Copy"
|
||||||
|
copyButton.addEventListener('click', () => {
|
||||||
|
navigator.clipboard.writeText(codeElement.innerText.trim())
|
||||||
|
})
|
||||||
|
templateContainer.appendChild(copyButton)
|
||||||
|
|
||||||
|
// get parent element
|
||||||
|
const outerDiv = codeElement.parentElement.parentElement.parentElement
|
||||||
|
const codeBlock = codeElement.parentElement.parentElement
|
||||||
|
|
||||||
|
|
||||||
|
// insert the template container before the code block
|
||||||
|
outerDiv.insertBefore(templateContainer, codeElement.parentElement.parentElement)
|
||||||
|
|
||||||
|
|
||||||
|
templateContainer.appendChild(codeBlock)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
window.boot.register("page-ready", () => {
|
||||||
|
main()
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
.box-grau {
|
||||||
|
background-color: #697f85!important;
|
||||||
|
padding: 1rem!important;
|
||||||
|
border-radius: .6rem;
|
||||||
|
color: #fff!important;
|
||||||
|
margin: 1rem 0!important;
|
||||||
|
text-align: center!important
|
||||||
|
}
|
||||||
|
.box-blau {
|
||||||
|
background-color: #137da9!important;
|
||||||
|
padding: 1rem!important;
|
||||||
|
border-radius: .6rem;
|
||||||
|
color: #fff!important;
|
||||||
|
margin: 1rem 0!important;
|
||||||
|
text-align: center!important
|
||||||
|
}
|
||||||
|
.box-gruen {
|
||||||
|
background-color: #a4ba2e!important;
|
||||||
|
padding: 1rem!important;
|
||||||
|
border-radius: .6rem;
|
||||||
|
color: #fff!important;
|
||||||
|
margin: 1rem 0!important;
|
||||||
|
text-align: center!important
|
||||||
|
}
|
||||||
|
.is-info {
|
||||||
|
background-color: #49bbeb!important;
|
||||||
|
border-color: #137da9!important
|
||||||
|
}
|
||||||
|
.is-success {
|
||||||
|
background-color: #a4ba2e!important;
|
||||||
|
border-color: #6b7b1d!important
|
||||||
|
}
|
||||||
|
.is-warning {
|
||||||
|
background-color: #ffb74d!important;
|
||||||
|
border-color: #b33f00!important
|
||||||
|
}
|
||||||
|
.is-danger {
|
||||||
|
background-color: #e57373!important;
|
||||||
|
border-color: #b71c1c!important
|
||||||
|
}
|
||||||
|
.box > p,
|
||||||
|
.is-danger > p,
|
||||||
|
.is-info > p,
|
||||||
|
.is-success > p,
|
||||||
|
.is-warning > p {
|
||||||
|
color: #fff!important
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
:root {
|
:root {
|
||||||
color: red;
|
--override_blue: rgb(74,187,235);
|
||||||
|
--override_green: rgb(164, 186, 46);
|
||||||
|
--override_gray: rgb(105, 127, 133);
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
table {
|
||||||
|
display: block;
|
||||||
|
border-collapse: collapse;
|
||||||
|
color: #697f85!important;
|
||||||
|
margin-left: 0!important;
|
||||||
|
margin-right: 0!important;
|
||||||
|
overflow-x: auto
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
border: none
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
border: solid .5px #697f85!important;
|
||||||
|
border-bottom: solid 2px #697f85!important
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: solid .5px #697f85!important
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg-white {
|
||||||
|
color: #575756!important;
|
||||||
|
background-color: #fff!important
|
||||||
|
}
|
||||||
|
#stuve-gruen-text {
|
||||||
|
color: #6b7b1d!important
|
||||||
|
}
|
||||||
|
#stuve-grau-text {
|
||||||
|
color: #697f85!important
|
||||||
|
}
|
||||||
|
#stuve-blau-text {
|
||||||
|
color: #4abbeb!important
|
||||||
|
}
|
||||||
|
#stuve-gruen {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: #a4ba2e!important
|
||||||
|
}
|
||||||
|
#stuve-grau {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: #697f85!important
|
||||||
|
}
|
||||||
|
#stuve-blau {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: #4abbeb!important
|
||||||
|
}
|
||||||
|
#danger {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: red!important
|
||||||
|
}
|
||||||
|
#warning {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: orange!important
|
||||||
|
}
|
||||||
|
#success {
|
||||||
|
color: #fff!important;
|
||||||
|
background-color: green!important
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
.template-container {
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px
|
||||||
|
}
|
||||||
|
.template-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500
|
||||||
|
}
|
||||||
|
.template-input-div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px
|
||||||
|
}
|
||||||
|
.template-input {
|
||||||
|
border: 1px solid #999;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
.template-copy-button:hover {
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
|
||||||
|
}
|
||||||
|
.template-copy-button:active {
|
||||||
|
background-color: #388e3c
|
||||||
|
}
|
||||||
|
.template-copy-button {
|
||||||
|
background-color: var(--override_green);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color .3s
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #137da9!important
|
||||||
|
}
|
||||||
|
.is-active,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: 600!important;
|
||||||
|
color: #6b7b1d!important
|
||||||
|
}
|
||||||
|
h1::after,
|
||||||
|
h2::after,
|
||||||
|
h3::after,
|
||||||
|
h4::after,
|
||||||
|
h5::after,
|
||||||
|
h6::after {
|
||||||
|
background: linear-gradient(90deg,#6b7b1d,rgba(255,255,255,0))!important
|
||||||
|
}
|
||||||
|
.v-list-item--active {
|
||||||
|
color: #fff!important
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
|
||||||
|
color: #697f85!important
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.caption.grey--text.text--darken-1 {
|
||||||
|
color: #697f85!important
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap header.v-sheet.theme--light.v-toolbar.v-toolbar--dense.v-toolbar--flat.grey.lighten-3 div.v-toolbar__content ul.v-breadcrumbs.breadcrumbs-nav.pl-0.theme--light button.v-icon.notranslate.v-icon--link.mdi.mdi-home.theme--light {
|
||||||
|
color: #137da9!important
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
|
||||||
|
font-weight: 600!important;
|
||||||
|
color: #137da9!important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .05rem!important
|
||||||
|
}
|
||||||
|
div.page-col-content:first-child > div:nth-child(2) {
|
||||||
|
font-weight: 600!important;
|
||||||
|
color: #137da9!important;
|
||||||
|
letter-spacing: .05rem!important
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-application{
|
||||||
|
font-family: 'Overpass', sans-serif !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #575756 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* dragons be here */
|
||||||
|
.v-application .primary {
|
||||||
|
background-color: var(--override_green) !important;
|
||||||
|
border-color: var(--override_green) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-header {
|
||||||
|
background-color: var(--override_green) !important;
|
||||||
|
}
|
||||||
|
.__bar-is-vertical {
|
||||||
|
background: rgba(255, 255, 255, 0) !important;
|
||||||
|
}
|
||||||
|
.nav-header {
|
||||||
|
background-color: var(--override_gray) !important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black {
|
||||||
|
background-color: var(--override_gray) !important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
.nav-header-inner {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs5.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black.pl-3 {
|
||||||
|
background-color: var(--override_gray)!important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content button.v-btn.v-btn--flat.v-btn--icon.v-btn--round.v-btn--tile.theme--dark.v-size--default span.v-btn__content i.v-icon.notranslate.mdi.mdi-file-document-edit-outline.theme--dark.grey--text {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.v-application .grey--text {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content div.v-input.v-input--hide-details.theme--dark.v-text-field.v-text-field--single-line.v-text-field--solo.v-text-field--solo-flat.v-text-field--is-booted.v-text-field--enclosed.v-text-field--rounded div.v-input__control div.v-input__slot {
|
||||||
|
background: var(--override_blue) !important;
|
||||||
|
}
|
||||||
|
.v-application .black {
|
||||||
|
background-color: var(--override_gray) !important;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue