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

fixing file selection

Browse Source
This commit is contained in:
Raphaël Forment
2023-08-02 23:26:44 +02:00
parent 187bf1fbac
commit 57f5e27a83
4 changed files with 317 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -41,6 +41,19 @@
<span id="universe-viewer" class="ml-4 text-2xl text-white">Topos</span> <span id="universe-viewer" class="ml-4 text-2xl text-white">Topos</span>
</a> </a>
<nav class="py-0 flex flex-wrap items-center text-base absolute right-0"> <nav class="py-0 flex flex-wrap items-center text-base absolute right-0">
<!--
<div id="blinkers" class="flex flex-row space-x-2 pr-4 pb-1.5 justify-center items-center">
<p id="blinker-1" class="text-white text-5xl">•</p>
<p id="blinker-2" class="text-white text-5xl">•</p>
<p id="blinker-3" class="text-white text-5xl">•</p>
<p id="blinker-4" class="text-white text-5xl">•</p>
<p id="blinker-5" class="text-white text-5xl">•</p>
<p id="blinker-6" class="text-white text-5xl">•</p>
<p id="blinker-7" class="text-white text-5xl">•</p>
<p id="blinker-8" class="text-white text-5xl">•</p>
<p id="blinker-9" class="text-white text-5xl">•</p>
</div>
-->
<span id="clockviewer" class="font-semibold mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">Clock</span> <span id="clockviewer" class="font-semibold mr-6 py-1 bg-white text-black rounded align-center text-normal px-2">Clock</span>
<a id="play-button-1" class="mr-5"> <a id="play-button-1" class="mr-5">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 14 16">
@ -244,7 +257,7 @@
</ul> </ul>
<!-- Here comes the editor itself --> <!-- Here comes the editor itself -->
<div id="editor" class="invisible relative flex flex-row flex-grow w-100 overflow-hidden overflow-y-hidden"> <div id="editor" class="invisible relative flex flex-row flex-grow overflow-hidden overflow-y-hidden">
</div> </div>
</div> </div>
</div> </div>

4
src/API.ts
View File

@ -10,8 +10,7 @@ import { ZZFX, zzfx } from "zzfx";
const sound = (value: any) => ({ const sound = (value: any) => ({
value, value, context: {},
context: {},
ensureObjectValue: () => { } ensureObjectValue: () => { }
}); });
@ -42,6 +41,7 @@ export class UserAPI {
} }
r = this.rate r = this.rate
script(...args: number[]): void { script(...args: number[]): void {
args.forEach(arg => { args.forEach(arg => {
tryEvaluate(this.app, this.app.universes[ tryEvaluate(this.app, this.app.universes[

57
src/main.ts
View File

@ -207,9 +207,8 @@ export class Editor {
if ((event.key === "Enter" || event.key === "Return") && event.ctrlKey) { if ((event.key === "Enter" || event.key === "Return") && event.ctrlKey) {
event.preventDefault(); event.preventDefault();
// const code = this.getCodeBlock(); // const code = this.getCodeBlock();
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile().candidate = this.view.state.doc.toString();
this.flashBackground('#2d313d', 200) this.flashBackground('#2d313d', 200)
// tryEvaluate(this, this.currentFile);
} }
// Shift + Enter or Ctrl + E: evaluate the line // Shift + Enter or Ctrl + E: evaluate the line
@ -218,7 +217,7 @@ export class Editor {
(event.key === "e" && event.ctrlKey) (event.key === "e" && event.ctrlKey)
) { ) {
event.preventDefault(); // Prevents the addition of a new line event.preventDefault(); // Prevents the addition of a new line
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile().candidate = this.view.state.doc.toString();
this.flashBackground('#2d313d', 200) this.flashBackground('#2d313d', 200)
// const code = this.getSelectedLines(); // const code = this.getSelectedLines();
} }
@ -237,15 +236,18 @@ export class Editor {
if (event.ctrlKey && event.key === "l") { if (event.ctrlKey && event.key === "l") {
event.preventDefault(); event.preventDefault();
this.changeModeFromInterface("local"); this.changeModeFromInterface("local");
this.view.focus();
} }
if (event.ctrlKey && event.key === "g") { if (event.ctrlKey && event.key === "g") {
event.preventDefault(); event.preventDefault();
this.changeModeFromInterface("global"); this.changeModeFromInterface("global");
this.view.focus();
} }
if (event.ctrlKey && event.key === "i") { if (event.ctrlKey && event.key === "i") {
event.preventDefault(); event.preventDefault();
this.changeModeFromInterface("init"); this.changeModeFromInterface("init");
this.changeToLocalBuffer(0); this.changeToLocalBuffer(0);
this.view.focus();
} }
[112, 113, 114, 115, 116, 117, 118, 119, 120].forEach( [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach(
(keycode, index) => { (keycode, index) => {
@ -278,7 +280,7 @@ export class Editor {
for (let j = 0; j < tabs.length; j++) { for (let j = 0; j < tabs.length; j++) {
if (j != i) tabs[j].classList.remove("bg-orange-300"); if (j != i) tabs[j].classList.remove("bg-orange-300");
} }
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile().candidate = this.view.state.doc.toString();
let tab = event.target as HTMLElement; let tab = event.target as HTMLElement;
let tab_id = tab.id.split("-")[1]; let tab_id = tab.id.split("-")[1];
@ -365,7 +367,7 @@ export class Editor {
}) })
this.buffer_search.addEventListener("keydown", (event) => { this.buffer_search.addEventListener("keydown", (event) => {
this.changeModeFromInterface("local"); // this.changeModeFromInterface("local");
if (event.key === "Enter") { if (event.key === "Enter") {
let query = this.buffer_search.value; let query = this.buffer_search.value;
if (query.length > 2 && query.length < 20) { if (query.length > 2 && query.length < 20) {
@ -373,12 +375,10 @@ export class Editor {
this.settings.selected_universe = query; this.settings.selected_universe = query;
this.buffer_search.value = ""; this.buffer_search.value = "";
this.closeBuffersModal(); this.closeBuffersModal();
// Focus on the editor
this.view.focus(); this.view.focus();
} }
} }
}); });
tryEvaluate(this, this.universes[this.selected_universe.toString()].init) tryEvaluate(this, this.universes[this.selected_universe.toString()].init)
} }
@ -390,6 +390,10 @@ export class Editor {
return this.universes[this.selected_universe.toString()].init; return this.universes[this.selected_universe.toString()].init;
} }
get local_buffer() {
return this.universes[this.selected_universe.toString()].locals[this.local_index];
}
changeToLocalBuffer(i: number) { changeToLocalBuffer(i: number) {
// Updating the CSS accordingly // Updating the CSS accordingly
const tabs = document.querySelectorAll('[id^="tab-"]'); const tabs = document.querySelectorAll('[id^="tab-"]');
@ -399,7 +403,6 @@ export class Editor {
if (j != i) tabs[j].classList.remove("bg-orange-300"); if (j != i) tabs[j].classList.remove("bg-orange-300");
} }
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile.candidate = this.view.state.doc.toString();
let tab_id = tab.id.split("-")[1]; let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id); this.local_index = parseInt(tab_id);
this.updateEditorView(); this.updateEditorView();
@ -407,7 +410,11 @@ export class Editor {
changeModeFromInterface(mode: "global" | "local" | "init") { changeModeFromInterface(mode: "global" | "local" | "init") {
const interface_buttons: HTMLElement[] = [ this.local_button, this.global_button, this.init_button ]; const interface_buttons: HTMLElement[] = [
this.local_button,
this.global_button,
this.init_button
];
let changeColor = (button: HTMLElement) => { let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => { interface_buttons.forEach((button) => {
@ -423,12 +430,15 @@ export class Editor {
}; };
switch (mode) { switch (mode) {
case "local": case "local":
if (this.local_script_tabs.classList.contains("hidden")) { if (this.local_script_tabs.classList.contains("hidden")) {
this.local_script_tabs.classList.remove("hidden"); this.local_script_tabs.classList.remove("hidden");
} }
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile.candidate = this.view.state.doc.toString();
this.editor_mode = "local"; this.editor_mode = 'local';
this.local_index = 0;
this.changeToLocalBuffer(this.local_index);
changeColor(this.local_button); changeColor(this.local_button);
break; break;
case "global": case "global":
@ -436,17 +446,14 @@ export class Editor {
this.local_script_tabs.classList.add("hidden"); this.local_script_tabs.classList.add("hidden");
} }
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile.candidate = this.view.state.doc.toString();
this.editor_mode = "global"; this.editor_mode = "global"; changeColor(this.global_button);
changeColor(this.global_button);
break; break;
case "init": case "init":
if (!this.local_script_tabs.classList.contains("hidden")) { if (!this.local_script_tabs.classList.contains("hidden")) {
this.local_script_tabs.classList.add("hidden"); this.local_script_tabs.classList.add("hidden");
} }
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile.candidate = this.view.state.doc.toString();
this.editor_mode = "init"; this.editor_mode = "init"; changeColor(this.init_button);
changeColor(this.init_button);
this.changeToLocalBuffer(0);
break; break;
} }
this.updateEditorView(); this.updateEditorView();
@ -499,31 +506,35 @@ export class Editor {
updateEditorView(): void { updateEditorView(): void {
// Remove everything from the editor // Remove everything from the editor
this.view.dispatch({ this.view.dispatch({
changes: { from: 0, to: this.view.state.doc.toString().length, insert: '', }, changes: {
from: 0,
to: this.view.state.doc.toString().length,
insert: '',
},
}); });
// Insert something // Insert something
this.view.dispatch({ this.view.dispatch({
changes: { changes: {
from: 0, from: 0,
insert: this.currentFile.candidate, insert: this.currentFile().candidate,
}, },
}); });
} }
get currentFile(): File { currentFile(): File {
switch (this.editor_mode) { switch (this.editor_mode) {
case "global": case "global":
return this.global_buffer; return this.global_buffer;
case "local": case "local":
return this.universes[this.selected_universe].locals[this.local_index]; return this.local_buffer;
case "init": case "init":
return this.init_buffer; return this.init_buffer;
} }
} }
loadUniverse(universeName: string) { loadUniverse(universeName: string) {
this.currentFile.candidate = this.view.state.doc.toString(); this.currentFile().candidate = this.view.state.doc.toString();
let selectedUniverse = universeName.trim(); let selectedUniverse = universeName.trim();
if (this.universes[selectedUniverse] === undefined) { if (this.universes[selectedUniverse] === undefined) {
@ -540,7 +551,7 @@ export class Editor {
}, },
}); });
this.view.dispatch({ this.view.dispatch({
changes: { from: 0, insert: this.currentFile.candidate }, changes: { from: 0, insert: this.currentFile().candidate },
}); });
tryEvaluate(this, this.universes[this.selected_universe.toString()].init) tryEvaluate(this, this.universes[this.selected_universe.toString()].init)
} }
@ -695,8 +706,8 @@ document.getElementById("start-button")!.addEventListener("click", startClock);
window.addEventListener("beforeunload", () => { window.addEventListener("beforeunload", () => {
event.preventDefault(); event.preventDefault();
// Iterate over all local files and set the candidate to the committed // Iterate over all local files and set the candidate to the committed
app.currentFile.candidate = app.view.state.doc.toString(); app.currentFile().candidate = app.view.state.doc.toString();
app.currentFile.committed = app.view.state.doc.toString(); app.currentFile().committed = app.view.state.doc.toString();
app.settings.saveApplicationToLocalStorage(app.universes, app.settings); app.settings.saveApplicationToLocalStorage(app.universes, app.settings);
app.clock.stop() app.clock.stop()
return null; return null;

548
src/output.css
View File

@ -554,10 +554,6 @@ video {
visibility: hidden; visibility: hidden;
} }
.fixed {
position: fixed;
}
.absolute { .absolute {
position: absolute; position: absolute;
} }
@ -603,12 +599,19 @@ video {
top: 0px; top: 0px;
} }
.z-50 { .mx-2 {
z-index: 50; margin-left: 0.5rem;
margin-right: 0.5rem;
} }
.m-auto { .mx-4 {
margin: auto; margin-left: 1rem;
margin-right: 1rem;
}
.mx-48 {
margin-left: 12rem;
margin-right: 12rem;
} }
.mx-auto { .mx-auto {
@ -616,6 +619,11 @@ video {
margin-right: auto; margin-right: auto;
} }
.my-48 {
margin-top: 12rem;
margin-bottom: 12rem;
}
.mb-0 { .mb-0 {
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -628,6 +636,10 @@ video {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 { .ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -640,32 +652,20 @@ video {
margin-right: 1.25rem; margin-right: 1.25rem;
} }
.mt-1 {
margin-top: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-8 {
margin-right: 2rem;
}
.mr-20 {
margin-right: 5rem;
}
.mr-6 { .mr-6 {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
.mr-4 { .mt-12 {
margin-right: 1rem; margin-top: 3rem;
} }
.ml-auto { .mt-4 {
margin-left: auto; margin-top: 1rem;
}
.ml-8 {
margin-left: 2rem;
} }
.block { .block {
@ -680,10 +680,6 @@ video {
display: flex; display: flex;
} }
.inline-flex {
display: inline-flex;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -692,6 +688,10 @@ video {
height: 2.5rem; height: 2.5rem;
} }
.h-2 {
height: 0.5rem;
}
.h-4 { .h-4 {
height: 1rem; height: 1rem;
} }
@ -700,24 +700,12 @@ video {
height: 1.5rem; height: 1.5rem;
} }
.h-screen {
height: 100vh;
}
.h-3 {
height: 0.75rem;
}
.h-8 { .h-8 {
height: 2rem; height: 2rem;
} }
.h-\[calc\(100\%-1rem\)\] { .h-screen {
height: calc(100% - 1rem); height: 100vh;
}
.max-h-full {
max-height: 100%;
} }
.min-h-screen { .min-h-screen {
@ -732,6 +720,14 @@ video {
width: 3.5rem; width: 3.5rem;
} }
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.w-4 { .w-4 {
width: 1rem; width: 1rem;
} }
@ -740,24 +736,20 @@ video {
width: 1.5rem; width: 1.5rem;
} }
.w-full {
width: 100%;
}
.w-2 {
width: 0.5rem;
}
.w-3 {
width: 0.75rem;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
.max-w-2xl { .w-auto {
max-width: 42rem; width: auto;
}
.w-full {
width: 100%;
}
.max-w-sm {
max-width: 24rem;
} }
.flex-grow { .flex-grow {
@ -768,8 +760,19 @@ video {
flex-grow: 1; flex-grow: 1;
} }
.cursor-not-allowed { .border-spacing-y-4 {
cursor: not-allowed; --tw-border-spacing-y: 1rem;
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.cursor-pointer {
cursor: pointer;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} }
.flex-row { .flex-row {
@ -784,10 +787,6 @@ video {
flex-wrap: wrap; flex-wrap: wrap;
} }
.items-start {
align-items: flex-start;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -796,26 +795,10 @@ video {
justify-content: center; justify-content: center;
} }
.justify-between { .space-x-0 > :not([hidden]) ~ :not([hidden]) {
justify-content: space-between;
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@ -824,6 +807,36 @@ video {
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@ -832,10 +845,6 @@ video {
overflow-y: auto; overflow-y: auto;
} }
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden { .overflow-y-hidden {
overflow-y: hidden; overflow-y: hidden;
} }
@ -861,30 +870,20 @@ video {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
} }
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
.border-r {
border-right-width: 1px;
}
.border-b { .border-b {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.border-t { .border-r {
border-top-width: 1px; border-right-width: 1px;
} }
.border-gray-300 { .border-t {
--tw-border-opacity: 1; border-top-width: 1px;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
} }
.border-gray-200 { .border-gray-200 {
@ -892,14 +891,19 @@ video {
border-color: rgb(229 231 235 / var(--tw-border-opacity)); border-color: rgb(229 231 235 / var(--tw-border-opacity));
} }
.bg-black { .border-gray-300 {
--tw-bg-opacity: 1; --tw-border-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity)); border-color: rgb(209 213 219 / var(--tw-border-opacity));
} }
.bg-blue-700 { .border-gray-700 {
--tw-bg-opacity: 1; --tw-border-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity)); border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity));
} }
.bg-gray-100 { .bg-gray-100 {
@ -907,19 +911,9 @@ video {
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); background-color: rgb(243 244 246 / var(--tw-bg-opacity));
} }
.bg-white { .bg-gray-200 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-blue-800 {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
} }
.bg-gray-800 { .bg-gray-800 {
@ -927,13 +921,9 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity)); background-color: rgb(31 41 55 / var(--tw-bg-opacity));
} }
.bg-blue-500 { .bg-neutral-900 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity)); background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
} }
.bg-orange-300 { .bg-orange-300 {
@ -941,19 +931,9 @@ video {
background-color: rgb(253 186 116 / var(--tw-bg-opacity)); background-color: rgb(253 186 116 / var(--tw-bg-opacity));
} }
.bg-green-300 { .bg-white {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(134 239 172 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
} }
.bg-opacity-50 { .bg-opacity-50 {
@ -999,9 +979,14 @@ video {
padding-right: 1rem; padding-right: 1rem;
} }
.px-7 { .px-5 {
padding-left: 1.75rem; padding-left: 1.25rem;
padding-right: 1.75rem; padding-right: 1.25rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
} }
.py-0 { .py-0 {
@ -1024,9 +1009,9 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.py-3 { .py-2\.5 {
padding-top: 0.75rem; padding-top: 0.625rem;
padding-bottom: 0.75rem; padding-bottom: 0.625rem;
} }
.py-4 { .py-4 {
@ -1034,16 +1019,6 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.pb-4 { .pb-4 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1056,34 +1031,55 @@ video {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.pl-2\.5 {
padding-left: 0.625rem;
}
.pl-3 { .pl-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
} }
.pr-8 {
padding-right: 2rem;
}
.pl-4 { .pl-4 {
padding-left: 1rem; padding-left: 1rem;
} }
.pl-6 {
padding-left: 1.5rem;
}
.pl-5 { .pl-5 {
padding-left: 1.25rem; padding-left: 1.25rem;
} }
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-1\.5 {
padding-bottom: 0.375rem;
}
.pl-12 {
padding-left: 3rem;
}
.pl-24 {
padding-left: 6rem;
}
.pr-4 {
padding-right: 1rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
.align-middle {
vertical-align: middle;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-base { .text-base {
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
@ -1104,6 +1100,11 @@ video {
line-height: 1rem; line-height: 1rem;
} }
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
@ -1112,6 +1113,10 @@ video {
font-weight: 500; font-weight: 500;
} }
.font-normal {
font-weight: 400;
}
.font-semibold { .font-semibold {
font-weight: 600; font-weight: 600;
} }
@ -1120,8 +1125,8 @@ video {
font-style: italic; font-style: italic;
} }
.leading-relaxed { .tracking-tight {
line-height: 1.625; letter-spacing: -0.025em;
} }
.text-black { .text-black {
@ -1129,6 +1134,11 @@ video {
color: rgb(0 0 0 / var(--tw-text-opacity)); color: rgb(0 0 0 / var(--tw-text-opacity));
} }
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-gray-500 { .text-gray-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity)); color: rgb(107 114 128 / var(--tw-text-opacity));
@ -1149,49 +1159,24 @@ video {
color: rgb(17 24 39 / var(--tw-text-opacity)); color: rgb(17 24 39 / var(--tw-text-opacity));
} }
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-blue-200 {
--tw-text-opacity: 1;
color: rgb(191 219 254 / var(--tw-text-opacity));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-rose-800 {
--tw-text-opacity: 1;
color: rgb(159 18 57 / var(--tw-text-opacity));
}
.text-sky-700 {
--tw-text-opacity: 1;
color: rgb(3 105 161 / var(--tw-text-opacity));
}
.text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity));
}
.text-orange-300 { .text-orange-300 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity)); color: rgb(253 186 116 / var(--tw-text-opacity));
} }
.text-orange-500 { .text-white {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-900 {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
} }
.underline { .underline {
@ -1230,29 +1215,14 @@ video {
transition-duration: 200ms; transition-duration: 200ms;
} }
.hover\:bg-blue-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover { .hover\:bg-gray-100:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); background-color: rgb(243 244 246 / var(--tw-bg-opacity));
} }
.hover\:bg-white:hover { .hover\:bg-gray-700:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.hover\:bg-gray-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
} }
.hover\:bg-gray-800:hover { .hover\:bg-gray-800:hover {
@ -1260,9 +1230,9 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity)); background-color: rgb(31 41 55 / var(--tw-bg-opacity));
} }
.hover\:bg-gray-200:hover { .hover\:bg-white:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.hover\:text-gray-900:hover { .hover\:text-gray-900:hover {
@ -1270,24 +1240,26 @@ video {
color: rgb(17 24 39 / var(--tw-text-opacity)); color: rgb(17 24 39 / var(--tw-text-opacity));
} }
.focus\:z-10:focus {
z-index: 10;
}
.focus\:outline-none:focus { .focus\:outline-none:focus {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;
} }
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus { .focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} }
.focus\:ring-blue-300:focus { .focus\:ring-blue-500:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
} }
:is([dir="rtl"] .rtl\:border-l) { :is([dir="rtl"] .rtl\:border-l) {
@ -1298,30 +1270,32 @@ video {
border-right-width: 0px; border-right-width: 0px;
} }
@media (prefers-reduced-motion: no-preference) {
@keyframes pulse {
50% {
opacity: .5;
}
}
.motion-safe\:animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.dark\:border-gray-600 { .dark\:border-gray-600 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity)); border-color: rgb(75 85 99 / var(--tw-border-opacity));
} }
.dark\:bg-black { .dark\:border-gray-700 {
--tw-bg-opacity: 1; --tw-border-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity)); border-color: rgb(55 65 81 / var(--tw-border-opacity));
} }
.dark\:bg-blue-600 { .dark\:bg-gray-700 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.dark\:bg-gray-800 { .dark\:bg-gray-800 {
@ -1329,9 +1303,9 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity)); background-color: rgb(31 41 55 / var(--tw-bg-opacity));
} }
.dark\:bg-gray-700 { .dark\:bg-neutral-900 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(23 23 23 / var(--tw-bg-opacity));
} }
.dark\:text-gray-200 { .dark\:text-gray-200 {
@ -1349,19 +1323,8 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.dark\:text-gray-500 { .dark\:ring-offset-gray-800 {
--tw-text-opacity: 1; --tw-ring-offset-color: #1f2937;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark\:hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
} }
.dark\:hover\:bg-gray-800:hover { .dark\:hover\:bg-gray-800:hover {
@ -1369,37 +1332,54 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity)); background-color: rgb(31 41 55 / var(--tw-bg-opacity));
} }
.dark\:hover\:bg-gray-600:hover { .dark\:focus\:ring-blue-600:focus {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:focus\:ring-blue-800:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-gray-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
}
}
@media (min-width: 768px) {
.md\:inset-0 {
inset: 0px;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.lg\:w-1\/5 {
width: 20%;
}
.lg\:w-4\/5 {
width: 80%;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) { .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
} }
.lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
@media (min-width: 1280px) {
.xl\:block {
display: block;
}
.xl\:hidden {
display: none;
}
} }