diff --git a/index.html b/index.html index 43136d5..dbca5fc 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,19 @@ Topos + Clock @@ -244,7 +257,7 @@ - + diff --git a/src/API.ts b/src/API.ts index a6dc7a0..e45df86 100644 --- a/src/API.ts +++ b/src/API.ts @@ -10,8 +10,7 @@ import { ZZFX, zzfx } from "zzfx"; const sound = (value: any) => ({ - value, - context: {}, + value, context: {}, ensureObjectValue: () => { } }); @@ -42,6 +41,7 @@ export class UserAPI { } r = this.rate + script(...args: number[]): void { args.forEach(arg => { tryEvaluate(this.app, this.app.universes[ diff --git a/src/main.ts b/src/main.ts index c9b25e7..85ca87b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -207,9 +207,8 @@ export class Editor { if ((event.key === "Enter" || event.key === "Return") && event.ctrlKey) { event.preventDefault(); // const code = this.getCodeBlock(); - this.currentFile.candidate = this.view.state.doc.toString(); + this.currentFile().candidate = this.view.state.doc.toString(); this.flashBackground('#2d313d', 200) - // tryEvaluate(this, this.currentFile); } // Shift + Enter or Ctrl + E: evaluate the line @@ -218,7 +217,7 @@ export class Editor { (event.key === "e" && event.ctrlKey) ) { 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) // const code = this.getSelectedLines(); } @@ -237,15 +236,18 @@ export class Editor { if (event.ctrlKey && event.key === "l") { event.preventDefault(); this.changeModeFromInterface("local"); + this.view.focus(); } if (event.ctrlKey && event.key === "g") { event.preventDefault(); this.changeModeFromInterface("global"); + this.view.focus(); } if (event.ctrlKey && event.key === "i") { event.preventDefault(); this.changeModeFromInterface("init"); this.changeToLocalBuffer(0); + this.view.focus(); } [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach( (keycode, index) => { @@ -278,7 +280,7 @@ export class Editor { for (let j = 0; j < tabs.length; j++) { 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_id = tab.id.split("-")[1]; @@ -365,7 +367,7 @@ export class Editor { }) this.buffer_search.addEventListener("keydown", (event) => { - this.changeModeFromInterface("local"); + // this.changeModeFromInterface("local"); if (event.key === "Enter") { let query = this.buffer_search.value; if (query.length > 2 && query.length < 20) { @@ -373,12 +375,10 @@ export class Editor { this.settings.selected_universe = query; this.buffer_search.value = ""; this.closeBuffersModal(); - // Focus on the editor this.view.focus(); } } }); - tryEvaluate(this, this.universes[this.selected_universe.toString()].init) } @@ -390,6 +390,10 @@ export class Editor { 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) { // Updating the CSS accordingly const tabs = document.querySelectorAll('[id^="tab-"]'); @@ -399,7 +403,6 @@ export class Editor { if (j != i) tabs[j].classList.remove("bg-orange-300"); } this.currentFile.candidate = this.view.state.doc.toString(); - let tab_id = tab.id.split("-")[1]; this.local_index = parseInt(tab_id); this.updateEditorView(); @@ -407,7 +410,11 @@ export class Editor { 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) => { interface_buttons.forEach((button) => { @@ -423,12 +430,15 @@ export class Editor { }; switch (mode) { + case "local": if (this.local_script_tabs.classList.contains("hidden")) { this.local_script_tabs.classList.remove("hidden"); } 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); break; case "global": @@ -436,17 +446,14 @@ export class Editor { this.local_script_tabs.classList.add("hidden"); } this.currentFile.candidate = this.view.state.doc.toString(); - this.editor_mode = "global"; - changeColor(this.global_button); + this.editor_mode = "global"; changeColor(this.global_button); break; case "init": if (!this.local_script_tabs.classList.contains("hidden")) { this.local_script_tabs.classList.add("hidden"); } this.currentFile.candidate = this.view.state.doc.toString(); - this.editor_mode = "init"; - changeColor(this.init_button); - this.changeToLocalBuffer(0); + this.editor_mode = "init"; changeColor(this.init_button); break; } this.updateEditorView(); @@ -498,32 +505,36 @@ export class Editor { updateEditorView(): void { // Remove everything from the editor - this.view.dispatch({ - changes: { from: 0, to: this.view.state.doc.toString().length, insert: '', }, + this.view.dispatch({ + changes: { + from: 0, + to: this.view.state.doc.toString().length, + insert: '', + }, }); // Insert something this.view.dispatch({ changes: { - from: 0, - insert: this.currentFile.candidate, + from: 0, + insert: this.currentFile().candidate, }, }); } - get currentFile(): File { + currentFile(): File { switch (this.editor_mode) { - case "global": + case "global": return this.global_buffer; case "local": - return this.universes[this.selected_universe].locals[this.local_index]; + return this.local_buffer; case "init": return this.init_buffer; } } loadUniverse(universeName: string) { - this.currentFile.candidate = this.view.state.doc.toString(); + this.currentFile().candidate = this.view.state.doc.toString(); let selectedUniverse = universeName.trim(); if (this.universes[selectedUniverse] === undefined) { @@ -540,7 +551,7 @@ export class Editor { }, }); 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) } @@ -695,8 +706,8 @@ document.getElementById("start-button")!.addEventListener("click", startClock); window.addEventListener("beforeunload", () => { event.preventDefault(); // Iterate over all local files and set the candidate to the committed - app.currentFile.candidate = app.view.state.doc.toString(); - app.currentFile.committed = app.view.state.doc.toString(); + app.currentFile().candidate = app.view.state.doc.toString(); + app.currentFile().committed = app.view.state.doc.toString(); app.settings.saveApplicationToLocalStorage(app.universes, app.settings); app.clock.stop() return null; diff --git a/src/output.css b/src/output.css index 714c984..f43befd 100644 --- a/src/output.css +++ b/src/output.css @@ -554,10 +554,6 @@ video { visibility: hidden; } -.fixed { - position: fixed; -} - .absolute { position: absolute; } @@ -603,12 +599,19 @@ video { top: 0px; } -.z-50 { - z-index: 50; +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; } -.m-auto { - margin: auto; +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mx-48 { + margin-left: 12rem; + margin-right: 12rem; } .mx-auto { @@ -616,6 +619,11 @@ video { margin-right: auto; } +.my-48 { + margin-top: 12rem; + margin-bottom: 12rem; +} + .mb-0 { margin-bottom: 0px; } @@ -628,6 +636,10 @@ video { margin-bottom: 1rem; } +.ml-1 { + margin-left: 0.25rem; +} + .ml-2 { margin-left: 0.5rem; } @@ -640,32 +652,20 @@ video { 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 { margin-right: 1.5rem; } -.mr-4 { - margin-right: 1rem; +.mt-12 { + margin-top: 3rem; } -.ml-auto { - margin-left: auto; +.mt-4 { + margin-top: 1rem; +} + +.ml-8 { + margin-left: 2rem; } .block { @@ -680,10 +680,6 @@ video { display: flex; } -.inline-flex { - display: inline-flex; -} - .hidden { display: none; } @@ -692,6 +688,10 @@ video { height: 2.5rem; } +.h-2 { + height: 0.5rem; +} + .h-4 { height: 1rem; } @@ -700,24 +700,12 @@ video { height: 1.5rem; } -.h-screen { - height: 100vh; -} - -.h-3 { - height: 0.75rem; -} - .h-8 { height: 2rem; } -.h-\[calc\(100\%-1rem\)\] { - height: calc(100% - 1rem); -} - -.max-h-full { - max-height: 100%; +.h-screen { + height: 100vh; } .min-h-screen { @@ -732,6 +720,14 @@ video { width: 3.5rem; } +.w-2\/5 { + width: 40%; +} + +.w-3\/5 { + width: 60%; +} + .w-4 { width: 1rem; } @@ -740,24 +736,20 @@ video { width: 1.5rem; } -.w-full { - width: 100%; -} - -.w-2 { - width: 0.5rem; -} - -.w-3 { - width: 0.75rem; -} - .w-8 { width: 2rem; } -.max-w-2xl { - max-width: 42rem; +.w-auto { + width: auto; +} + +.w-full { + width: 100%; +} + +.max-w-sm { + max-width: 24rem; } .flex-grow { @@ -768,8 +760,19 @@ video { flex-grow: 1; } -.cursor-not-allowed { - cursor: not-allowed; +.border-spacing-y-4 { + --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 { @@ -784,10 +787,6 @@ video { flex-wrap: wrap; } -.items-start { - align-items: flex-start; -} - .items-center { align-items: center; } @@ -796,26 +795,10 @@ video { justify-content: center; } -.justify-between { - 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]) { +.space-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-right: calc(2rem * var(--tw-space-x-reverse)); - margin-left: calc(2rem * 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))); + margin-right: calc(0px * var(--tw-space-x-reverse)); + margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); } .space-x-2 > :not([hidden]) ~ :not([hidden]) { @@ -824,6 +807,36 @@ video { 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; } @@ -832,10 +845,6 @@ video { overflow-y: auto; } -.overflow-x-hidden { - overflow-x: hidden; -} - .overflow-y-hidden { overflow-y: hidden; } @@ -861,30 +870,20 @@ video { border-bottom-left-radius: 0.25rem; } -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; -} - .border { border-width: 1px; } -.border-r { - border-right-width: 1px; -} - .border-b { border-bottom-width: 1px; } -.border-t { - border-top-width: 1px; +.border-r { + border-right-width: 1px; } -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); +.border-t { + border-top-width: 1px; } .border-gray-200 { @@ -892,14 +891,19 @@ video { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.bg-blue-700 { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +.border-gray-700 { + --tw-border-opacity: 1; + 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 { @@ -907,19 +911,9 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.bg-white { +.bg-gray-200 { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / 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)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } .bg-gray-800 { @@ -927,13 +921,9 @@ video { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } -.bg-blue-500 { +.bg-neutral-900 { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - -.bg-transparent { - background-color: transparent; + background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } .bg-orange-300 { @@ -941,19 +931,9 @@ video { background-color: rgb(253 186 116 / var(--tw-bg-opacity)); } -.bg-green-300 { +.bg-white { --tw-bg-opacity: 1; - background-color: rgb(134 239 172 / 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)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-opacity-50 { @@ -999,9 +979,14 @@ video { padding-right: 1rem; } -.px-7 { - padding-left: 1.75rem; - padding-right: 1.75rem; +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; } .py-0 { @@ -1024,9 +1009,9 @@ video { padding-bottom: 0.5rem; } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; } .py-4 { @@ -1034,16 +1019,6 @@ video { 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 { padding-bottom: 1rem; } @@ -1056,34 +1031,55 @@ video { padding-left: 0.5rem; } -.pl-2\.5 { - padding-left: 0.625rem; -} - .pl-3 { padding-left: 0.75rem; } -.pr-8 { - padding-right: 2rem; -} - .pl-4 { padding-left: 1rem; } -.pl-6 { - padding-left: 1.5rem; -} - .pl-5 { 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-align: center; } +.align-middle { + vertical-align: middle; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-base { font-size: 1rem; line-height: 1.5rem; @@ -1104,6 +1100,11 @@ video { line-height: 1rem; } +.text-5xl { + font-size: 3rem; + line-height: 1; +} + .font-bold { font-weight: 700; } @@ -1112,6 +1113,10 @@ video { font-weight: 500; } +.font-normal { + font-weight: 400; +} + .font-semibold { font-weight: 600; } @@ -1120,8 +1125,8 @@ video { font-style: italic; } -.leading-relaxed { - line-height: 1.625; +.tracking-tight { + letter-spacing: -0.025em; } .text-black { @@ -1129,6 +1134,11 @@ video { 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 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -1149,49 +1159,24 @@ video { 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 { --tw-text-opacity: 1; color: rgb(253 186 116 / var(--tw-text-opacity)); } -.text-orange-500 { +.text-white { --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 { @@ -1230,29 +1215,14 @@ video { 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 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.hover\:bg-white:hover { +.hover\:bg-gray-700:hover { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / 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)); + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } .hover\:bg-gray-800:hover { @@ -1260,9 +1230,9 @@ video { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } -.hover\:bg-gray-200:hover { +.hover\:bg-white:hover { --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 { @@ -1270,24 +1240,26 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.focus\:z-10:focus { - z-index: 10; -} - .focus\:outline-none:focus { outline: 2px solid transparent; 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 { --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); 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-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) { @@ -1298,30 +1270,32 @@ video { 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) { - .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 { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - .dark\:bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + .dark\:border-gray-700 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); } - .dark\:bg-blue-600 { + .dark\:bg-gray-700 { --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 { @@ -1329,9 +1303,9 @@ video { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } - .dark\:bg-gray-700 { + .dark\:bg-neutral-900 { --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 { @@ -1349,19 +1323,8 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } - .dark\:text-gray-500 { - --tw-text-opacity: 1; - 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\:ring-offset-gray-800 { + --tw-ring-offset-color: #1f2937; } .dark\:hover\:bg-gray-800:hover { @@ -1369,37 +1332,54 @@ video { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } - .dark\:hover\:bg-gray-600:hover { - --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 { + .dark\:focus\:ring-blue-600:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(30 64 175 / 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; + --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity)); } } @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]) { --tw-space-x-reverse: 0; margin-right: calc(2rem * 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; + } }