- 
-
+
+
@@ -126,18 +125,18 @@
-
+
+
@@ -126,18 +125,18 @@
-
-
-
+
-
-
+
+
@@ -272,23 +271,23 @@
md:top-0 md:bottom-0 h-screen w-full"
>
Known universes
-
+
-
+
Topos Application Settings
-
+
-
Font Settings
-
+
-
+
-
Editor options
-
+
-
+
-
+
-
+
-
+
-
+
+
+
-
- )",
+ color1: "rgb(var(--color1) / )",
+ color2: "rgb(var(--color2) / )",
+ color3: "rgb(var(--color3) / )",
+ color4: "rgb(var(--color4) / )",
+ color5: "rgb(var(--color5) / )",
+ color6: "rgb(var(--color6) / )",
+ color7: "rgb(var(--color7) / )",
+ color8: "rgb(var(--color8) / )",
+ color9: "rgb(var(--color9) / )",
+ color10: "rgb(var(--color10) / )",
+ color11: "rgb(var(--color11) / )",
+ color12: "rgb(var(--color12) / )",
+ color13: "rgb(var(--color13) / )",
+ color14: "rgb(var(--color14) / )",
+ color15: "rgb(var(--color15) / )",
+ background: "rgb(var(--background) / )",
+ selection_foreground: "rgb(var(--selection_foreground) / )",
+ cursor: "rgb(var(--cursor) / )",
+ foreground: "rgb(var(--foreground) / )",
+ selection_background: "rgb(var(--selection_background) / )",
},
extend: {},
hljs: {
@@ -43,4 +41,7 @@ export default {
},
},
plugins: [require("tailwind-highlightjs")],
+ safelist: {
+ pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
+ }
};
File Management
-
-
+
-
- MIDI I/O Settings
-
-
-
+
-
-
+
+
@@ -426,7 +425,7 @@
name="doughnumber"
id="doughnumber"
for="doughrangeInput"
- class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
+ class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 "
>0
@@ -434,7 +433,7 @@
@@ -448,38 +447,38 @@
flex flex-col items-center w-14
h-screen py-2 border-r
rtl:border-l max-h-fit
- rtl:border-r-0 bg-neutral-900
+ rtl:border-r-0 neutral-900
dark:border-neutral-700 border-none"
>
Audio/Event Nudging
Clock:
@@ -407,7 +406,7 @@ name="nudgenumber" id="nudgenumber" for="audiorangeInput" - class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white" + class="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 " >0/////// Fill ///////
+ +/////// Fill ///////
diff --git a/src/style.css b/src/style.css index dcdacf4..862233c 100644 --- a/src/style.css +++ b/src/style.css @@ -16,7 +16,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; + border-color: currentColor; /* 2 */ } @@ -435,28 +435,27 @@ video { } :root { - --color0: "#252525", - --color1: "#832e31", - --color2: "#a63c40", - --color3: "#d3494e", - --color4: "#fc595f", - --color5: "#df9395", - --color6: "#ba8586", - --color7: "#f5f5f5", - --color8: "#5d6f71", - --color9: "#832e31", - --color10: "#a63c40", - --color11: "#d2494e", - --color12: "#fc595f", - --color13: "#df9395", - --color14: "#ba8586", - --color15: "#f5f5f5", - --background: "#252525", - --selection_foreground: "#f5f5f5", - --cursor: "#ac4142", - --foreground: "#d0d0d0", - --selection_background: "#832e31", - + --color0: "#252525"; + --color1: "#832e31"; + --color2: "#a63c40"; + --color3: "#d3494e"; + --color4: "#fc595f"; + --color5: "#df9395"; + --color6: "#ba8586"; + --color7: "#f5f5f5"; + --color8: "#5d6f71"; + --color9: "#832e31"; + --color10: "#a63c40"; + --color11: "#d2494e"; + --color12: "#fc595f"; + --color13: "#df9395"; + --color14: "#ba8586"; + --color15: "#f5f5f5"; + --background: "#252525"; + --selection_foreground: "#f5f5f5"; + --cursor: "#ac4142"; + --foreground: "#d0d0d0"; + --selection_background: "#832e31"; } *, ::before, ::after { @@ -559,217 +558,8 @@ video { --tw-backdrop-sepia: ; } -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: #2E3440; -} - -.hljs, -.hljs-subst { - color: #D8DEE9; -} - -.hljs-selector-tag { - color: #81A1C1; -} - -.hljs-selector-id { - color: #8FBCBB; - font-weight: bold; -} - -.hljs-selector-class { - color: #8FBCBB; -} - -.hljs-selector-attr { - color: #8FBCBB; -} - -.hljs-selector-pseudo { - color: #88C0D0; -} - -.hljs-addition { - background-color: rgba(163, 190, 140, 0.5); -} - -.hljs-deletion { - background-color: rgba(191, 97, 106, 0.5); -} - -.hljs-built_in, -.hljs-type { - color: #8FBCBB; -} - -.hljs-class { - color: #8FBCBB; -} - -.hljs-function { - color: #88C0D0; -} - -.hljs-function > .hljs-title { - color: #88C0D0; -} - -.hljs-keyword, -.hljs-literal, -.hljs-symbol { - color: #81A1C1; -} - -.hljs-number { - color: #B48EAD; -} - -.hljs-regexp { - color: #EBCB8B; -} - -.hljs-string { - color: #A3BE8C; -} - -.hljs-title { - color: #8FBCBB; -} - -.hljs-params { - color: #D8DEE9; -} - -.hljs-bullet { - color: #81A1C1; -} - -.hljs-code { - color: #8FBCBB; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-formula { - color: #8FBCBB; -} - -.hljs-strong { - font-weight: bold; -} - -.hljs-link:hover { - text-decoration: underline; -} - -.hljs-quote { - color: #4C566A; -} - .hljs-comment: #FEFEFE; -.hljs-doctag { - color: #8FBCBB; -} - -.hljs-meta, -.hljs-meta-keyword { - color: #5E81AC; -} - -.hljs-meta-string { - color: #A3BE8C; -} - -.hljs-attr { - color: #8FBCBB; -} - -.hljs-attribute { - color: #D8DEE9; -} - -.hljs-builtin-name { - color: #81A1C1; -} - -.hljs-name { - color: #81A1C1; -} - -.hljs-section { - color: #88C0D0; -} - -.hljs-tag { - color: #81A1C1; -} - -.hljs-variable { - color: #D8DEE9; -} - -.hljs-template-variable { - color: #D8DEE9; -} - -.hljs-template-tag { - color: #5E81AC; -} - -.abnf .hljs-attribute { - color: #88C0D0; -} - -.abnf .hljs-symbol { - color: #EBCB8B; -} - -.apache .hljs-attribute { - color: #88C0D0; -} - -.apache .hljs-section { - color: #81A1C1; -} - -.arduino .hljs-built_in { - color: #88C0D0; -} - -.aspectj .hljs-meta { - color: #D08770; -} - -.aspectj > .hljs-title { - color: #88C0D0; -} - -.bnf .hljs-attribute { - color: #8FBCBB; -} - -.clojure .hljs-name { - color: #88C0D0; -} - -.clojure .hljs-symbol { - color: #EBCB8B; -} - -.coq .hljs-built_in { - color: #88C0D0; -} - -.cpp .hljs-meta-string { - color: #8FBCBB; -} - .css .hljs-built_in { color: #88C0D0; } @@ -778,83 +568,11 @@ video { color: #D08770; } -.diff .hljs-meta { - color: #8FBCBB; -} - -.ebnf .hljs-attribute { - color: #8FBCBB; -} - -.glsl .hljs-built_in { - color: #88C0D0; -} - -.groovy .hljs-meta:not(:first-child) { - color: #D08770; -} - -.haxe .hljs-meta { - color: #D08770; -} - -.java .hljs-meta { - color: #D08770; -} - -.ldif .hljs-attribute { - color: #8FBCBB; -} - -.lisp .hljs-name { - color: #88C0D0; -} - -.lua .hljs-built_in { - color: #88C0D0; -} - -.moonscript .hljs-built_in { - color: #88C0D0; -} - -.nginx .hljs-attribute { - color: #88C0D0; -} - -.nginx .hljs-section { - color: #5E81AC; -} - -.pf .hljs-built_in { - color: #88C0D0; -} - -.processing .hljs-built_in { - color: #88C0D0; -} - -.scss .hljs-keyword { - color: #81A1C1; -} - -.stylus .hljs-keyword { - color: #81A1C1; -} - -.swift .hljs-meta { - color: #D08770; -} - .vim .hljs-built_in { color: #88C0D0; font-style: italic; } -.yaml .hljs-meta { - color: #D08770; -} - .sr-only { position: absolute; width: 1px; @@ -1423,122 +1141,25 @@ video { border-style: none; } -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.border-neutral-500 { - --tw-border-opacity: 1; - border-color: rgb(115 115 115 / var(--tw-border-opacity)); -} - -.border-neutral-800 { - --tw-border-opacity: 1; - border-color: rgb(38 38 38 / var(--tw-border-opacity)); -} - -.bg-emerald-600 { +.bg-color10 { --tw-bg-opacity: 1; - background-color: rgb(5 150 105 / var(--tw-bg-opacity)); + background-color: rgb(var(--color10) / var(--tw-bg-opacity)); } -.bg-gray-100 { +.bg-color14 { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(var(--color14) / var(--tw-bg-opacity)); } -.bg-gray-200 { +.bg-color12 { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - -.bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-neutral-500 { - --tw-bg-opacity: 1; - background-color: rgb(115 115 115 / var(--tw-bg-opacity)); -} - -.bg-neutral-600 { - --tw-bg-opacity: 1; - background-color: rgb(82 82 82 / var(--tw-bg-opacity)); -} - -.bg-neutral-700 { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity)); -} - -.bg-neutral-800 { - --tw-bg-opacity: 1; - background-color: rgb(38 38 38 / var(--tw-bg-opacity)); -} - -.bg-neutral-900 { - --tw-bg-opacity: 1; - background-color: rgb(23 23 23 / var(--tw-bg-opacity)); -} - -.bg-orange-300 { - --tw-bg-opacity: 1; - background-color: rgb(253 186 116 / var(--tw-bg-opacity)); -} - -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); -} - -.bg-red-800 { - --tw-bg-opacity: 1; - background-color: rgb(153 27 27 / var(--tw-bg-opacity)); -} - -.bg-transparent { - background-color: transparent; -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(var(--color12) / var(--tw-bg-opacity)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; } -.fill-current { - fill: currentColor; -} - -.fill-orange-300 { - fill: #fdba74; -} - .p-1 { padding: 0.25rem; } @@ -1758,64 +1379,9 @@ video { line-height: 1.5; } -.text-black { +.text-color12 { --tw-text-opacity: 1; - 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-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.text-gray-800 { - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); -} - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-neutral-200 { - --tw-text-opacity: 1; - color: rgb(229 229 229 / var(--tw-text-opacity)); -} - -.text-orange-300 { - --tw-text-opacity: 1; - color: rgb(253 186 116 / var(--tw-text-opacity)); -} - -.text-red-400 { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); -} - -.text-rose-600 { - --tw-text-opacity: 1; - color: rgb(225 29 72 / var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(var(--color12) / var(--tw-text-opacity)); } .underline { @@ -1830,14 +1396,8 @@ video { text-underline-offset: 4px; } -.placeholder-white::-moz-placeholder { - --tw-placeholder-opacity: 1; - color: rgb(255 255 255 / var(--tw-placeholder-opacity)); -} - -.placeholder-white::placeholder { - --tw-placeholder-opacity: 1; - color: rgb(255 255 255 / var(--tw-placeholder-opacity)); +.opacity-50 { + opacity: 0.5; } .outline { @@ -1875,80 +1435,6 @@ video { transition-duration: 200ms; } -.hover\:bg-gray-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-800:hover { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / 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-green-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); -} - -.hover\:bg-neutral-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(115 115 115 / var(--tw-bg-opacity)); -} - -.hover\:bg-neutral-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(82 82 82 / var(--tw-bg-opacity)); -} - -.hover\:bg-neutral-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity)); -} - -.hover\:bg-neutral-800:hover { - --tw-bg-opacity: 1; - background-color: rgb(38 38 38 / var(--tw-bg-opacity)); -} - -.hover\:bg-neutral-900:hover { - --tw-bg-opacity: 1; - background-color: rgb(23 23 23 / var(--tw-bg-opacity)); -} - -.hover\:bg-red-900:hover { - --tw-bg-opacity: 1; - background-color: rgb(127 29 29 / var(--tw-bg-opacity)); -} - -.hover\:bg-white:hover { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.hover\:fill-black:hover { - fill: #000; -} - -.hover\:text-black:hover { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1966,11 +1452,6 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} - :is([dir="rtl"] .rtl\:border-l) { border-left-width: 1px; } @@ -1979,77 +1460,6 @@ video { border-right-width: 0px; } -@media (prefers-color-scheme: dark) { - .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\:border-neutral-700 { - --tw-border-opacity: 1; - border-color: rgb(64 64 64 / var(--tw-border-opacity)); - } - - .dark\:bg-gray-600 { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); - } - - .dark\:bg-gray-700 { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); - } - - .dark\:text-gray-100 { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); - } - - .dark\:text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); - } - - .dark\:text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - - .dark\:placeholder-gray-400::-moz-placeholder { - --tw-placeholder-opacity: 1; - color: rgb(156 163 175 / var(--tw-placeholder-opacity)); - } - - .dark\:placeholder-gray-400::placeholder { - --tw-placeholder-opacity: 1; - color: rgb(156 163 175 / var(--tw-placeholder-opacity)); - } - - .dark\:ring-offset-gray-800 { - --tw-ring-offset-color: #1f2937; - } - - .dark\:focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); - } - - .dark\:focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); - } - - .dark\:focus\:ring-blue-600:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity)); - } -} - @media (min-width: 640px) { .sm\:my-1 { margin-top: 0.25rem; diff --git a/src/tailwind.css b/src/tailwind.css index 1504381..410bd90 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -4,26 +4,26 @@ @layer base { :root { - --color0: "#252525", - --color1: "#832e31", - --color2: "#a63c40", - --color3: "#d3494e", - --color4: "#fc595f", - --color5: "#df9395", - --color6: "#ba8586", - --color7: "#f5f5f5", - --color8: "#5d6f71", - --color9: "#832e31", - --color10: "#a63c40", - --color11: "#d2494e", - --color12: "#fc595f", - --color13: "#df9395", - --color14: "#ba8586", - --color15: "#f5f5f5", - --background: "#252525", - --selection_foreground: "#f5f5f5", - --cursor: "#ac4142", - --foreground: "#d0d0d0", - --selection_background: "#832e31", + --color0: "#252525"; + --color1: "#832e31"; + --color2: "#a63c40"; + --color3: "#d3494e"; + --color4: "#fc595f"; + --color5: "#df9395"; + --color6: "#ba8586"; + --color7: "#f5f5f5"; + --color8: "#5d6f71"; + --color9: "#832e31"; + --color10: "#a63c40"; + --color11: "#d2494e"; + --color12: "#fc595f"; + --color13: "#df9395"; + --color14: "#ba8586"; + --color15: "#f5f5f5"; + --background: "#252525"; + --selection_foreground: "#f5f5f5"; + --cursor: "#ac4142"; + --foreground: "#d0d0d0"; + --selection_background: "#832e31"; } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 24756f0..c05041e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,36 +1,34 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"], safelist: [ { pattern: /hljs+/, }, ], theme: { - extend: { colors: { - color0: "var(--color0)", - color1: "var(--color1)", - color2: "var(--color2)", - color3: "var(--color3)", - color4: "var(--color4)", - color5: "var(--color5)", - color6: "var(--color6)", - color7: "var(--color7)", - color8: "var(--color8)", - color9: "var(--color9)", - color10: "var(--color10)", - color11: "var(--color11)", - color12: "var(--color12)", - color13: "var(--color13)", - color14: "var(--color14)", - color15: "var(--color15)", - background: "var(--background)", - selection_foreground: "var(--selection_foreground)", - cursor: "var(--cursor)", - foreground: "var(--foreground)", - selection_background: "var(--selection_background)", - }, + color0: "rgb(var(--color0) /