BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theming code buttons

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-16 12:17:06 +01:00
parent 175bd97c24
commit e288ecb316
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Documentation.ts
View File

@ -46,7 +46,7 @@ import { filters } from "./documentation/learning/audio_engine/filters";
showdown.setFlavor("github");
export const key_shortcut = (shortcut: string): string => {
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
};
export const makeExampleFactory = (application: Editor): Function => {
@ -62,9 +62,9 @@ export const makeExampleFactory = (application: Editor): Function => {
return `
<details ${open ? "open" : ""}>
<summary >${description}
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
<button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
<button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-brightwhite" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
<button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-brightwhite inline-block" onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
<button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-brightwhite inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
</summary>
<pre><code class="hljs language-javascript">${code.trim()}</code></pre>
</details>
@ -167,7 +167,7 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
* @param app - The editor application.
* @param bindings - Additional bindings for the showdown converter.
*/
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-white'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
const converter = new showdown.Converter({
emoji: true,
moreStyling: true,

40
src/style.css
View File

@ -1392,6 +1392,11 @@ video {
border-color: rgb(var(--white) / var(--tw-border-opacity));
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(var(--black) / var(--tw-border-opacity));
}
.bg-background {
--tw-bg-opacity: 1;
background-color: rgb(var(--background) / var(--tw-bg-opacity));
@ -1682,6 +1687,21 @@ video {
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
}
.bg-green {
--tw-bg-opacity: 1;
background-color: rgb(var(--green) / var(--tw-bg-opacity));
}
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(var(--yellow) / var(--tw-bg-opacity));
}
.bg-magenta {
--tw-bg-opacity: 1;
background-color: rgb(var(--magenta) / var(--tw-bg-opacity));
}
.p-1 {
padding: 0.25rem;
}
@ -2202,6 +2222,11 @@ video {
color: rgb(var(--brightred) / var(--tw-text-opacity));
}
.text-brightblack {
--tw-text-opacity: 1;
color: rgb(var(--brightblack) / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@ -2278,6 +2303,21 @@ video {
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
}
.hover\:bg-green:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--green) / var(--tw-bg-opacity));
}
.hover\:bg-brightgreen:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightgreen) / var(--tw-bg-opacity));
}
.hover\:bg-brightmagenta:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
}
.hover\:text-background:hover {
--tw-text-opacity: 1;
color: rgb(var(--background) / var(--tw-text-opacity));