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

mysterious commit

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-16 14:13:41 +01:00
parent cb882bdbaf
commit 4156c0d399
2 changed files with 90 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -89,6 +89,7 @@
</style>
<body id="all" class="z-0 overflow-y-hidden bg-black">
<!-- The header is hidden on smaller devices -->
<header class="py-0 block">
@ -548,8 +549,8 @@
</ul>
<!-- Here comes the editor itself -->
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
<canvas id="hydra-" class="fullscreencanvas"></canvas>
<canvas id="scope" class="fullscreencanvas"></canvas>
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
<canvas id="feedback" class="fullscreencanvas"></canvas>
</div>
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>

163
src/style.css
View File

@ -790,6 +790,10 @@ video {
margin-top: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.box-border {
box-sizing: border-box;
}
@ -1187,6 +1191,11 @@ video {
border-color: rgb(var(--background) / 0.95);
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(var(--black) / var(--tw-border-opacity));
}
.border-cursor {
--tw-border-opacity: 1;
border-color: rgb(var(--cursor) / var(--tw-border-opacity));
@ -1382,21 +1391,11 @@ video {
border-color: rgb(var(--selection_background) / 0.95);
}
.border-brightwhite {
--tw-border-opacity: 1;
border-color: rgb(var(--brightwhite) / var(--tw-border-opacity));
}
.border-white {
--tw-border-opacity: 1;
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));
@ -1467,9 +1466,14 @@ video {
background-color: rgb(var(--black) / var(--tw-bg-opacity));
}
.bg-blue {
.bg-brightblack {
--tw-bg-opacity: 1;
background-color: rgb(var(--blue) / var(--tw-bg-opacity));
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
}
.bg-brightwhite {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
}
.bg-cursor {
@ -1602,6 +1606,21 @@ video {
background-color: rgb(var(--foreground) / 0.95);
}
.bg-green {
--tw-bg-opacity: 1;
background-color: rgb(var(--green) / var(--tw-bg-opacity));
}
.bg-magenta {
--tw-bg-opacity: 1;
background-color: rgb(var(--magenta) / var(--tw-bg-opacity));
}
.bg-red {
--tw-bg-opacity: 1;
background-color: rgb(var(--red) / var(--tw-bg-opacity));
}
.bg-selection_background {
--tw-bg-opacity: 1;
background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
@ -1672,34 +1691,22 @@ video {
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
}
.bg-brightwhite {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
}
.bg-red {
--tw-bg-opacity: 1;
background-color: rgb(var(--red) / var(--tw-bg-opacity));
}
.bg-brightblack {
--tw-bg-opacity: 1;
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 {
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(var(--magenta) / var(--tw-bg-opacity));
background-color: rgb(var(--white) / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-0 {
--tw-bg-opacity: 0;
}
.p-1 {
@ -1718,6 +1725,10 @@ video {
padding: 1rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
@ -1992,9 +2003,9 @@ video {
color: rgb(var(--black) / var(--tw-text-opacity));
}
.text-blue {
.text-brightred {
--tw-text-opacity: 1;
color: rgb(var(--blue) / var(--tw-text-opacity));
color: rgb(var(--brightred) / var(--tw-text-opacity));
}
.text-brightwhite {
@ -2067,11 +2078,6 @@ video {
color: rgb(var(--cursor) / 0.95);
}
.text-cyan {
--tw-text-opacity: 1;
color: rgb(var(--cyan) / var(--tw-text-opacity));
}
.text-foreground {
--tw-text-opacity: 1;
color: rgb(var(--foreground) / var(--tw-text-opacity));
@ -2217,16 +2223,6 @@ video {
color: rgb(var(--white) / var(--tw-text-opacity));
}
.text-brightred {
--tw-text-opacity: 1;
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;
}
@ -2239,16 +2235,6 @@ video {
text-underline-offset: 4px;
}
.placeholder-blue::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(var(--blue) / var(--tw-placeholder-opacity));
}
.placeholder-blue::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(var(--blue) / var(--tw-placeholder-opacity));
}
.placeholder-brightwhite::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
@ -2259,8 +2245,14 @@ video {
color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
}
.opacity-50 {
opacity: 0.5;
.placeholder-white::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(var(--white) / var(--tw-placeholder-opacity));
}
.placeholder-white::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(var(--white) / var(--tw-placeholder-opacity));
}
.outline {
@ -2288,6 +2280,16 @@ video {
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:bg-background:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--background) / var(--tw-bg-opacity));
@ -2298,16 +2300,6 @@ video {
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
}
.hover\:bg-foreground:hover {
--tw-bg-opacity: 1;
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));
@ -2318,9 +2310,9 @@ video {
background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
}
.hover\:bg-selection_foreground:hover {
.hover\:bg-foreground:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
}
.hover\:bg-selection_background:hover {
@ -2328,6 +2320,15 @@ video {
background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--white) / var(--tw-bg-opacity));
}
.hover\:fill-black:hover {
fill: rgb(var(--black) / 1);
}
.hover\:text-background:hover {
--tw-text-opacity: 1;
color: rgb(var(--background) / var(--tw-text-opacity));
@ -2343,6 +2344,11 @@ video {
color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(var(--black) / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
@ -2368,6 +2374,13 @@ video {
border-right-width: 0px;
}
@media (prefers-color-scheme: dark) {
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(var(--white) / var(--tw-text-opacity));
}
}
@media (min-width: 640px) {
.sm\:my-1 {
margin-top: 0.25rem;