DAISY UI

style.css

@@ -1,141 +1,13 @@
-/* 
-=================================================
-https://www.joshwcomeau.com/css/custom-css-reset/
-================================================= 
-*/
-
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-/*
-    2. Remove default margin
-  */
-* {
-  margin: 0;
-}
-/*
-    3. Allow percentage-based heights in the application
-  */
-html,
-body {
-  height: 100%;
-}
-/*
-    Typographic tweaks!
-    4. Add accessible line-height
-    5. Improve text rendering
-  */
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-/*
-    6. Improve media defaults
-  */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-/*
-    7. Remove built-in form typography styles
-  */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-/*
-    8. Avoid text overflows
-  */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-/*
-    9. Create a root stacking context
-  */
-#root,
-#__next {
-  isolation: isolate;
-}
-
-/* 
-=================================================
-CUSTOM STYLE
-================================================= 
-*/
-
-#app {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: stretch;
-  background-color: #eceff1;
-  color: #263238;
-  font-family: sans-serif;
-}
-
-.panel {
-  flex-grow: 2;
-  position: relative;
-}
-
-.panel.right,
-.panel.left {
-  background-color: #cfd8dc;
-  margin: 1em;
-  border-radius: 2em;
-  padding: 1em;
-}
-
-.panel.middle {
-  height: 100%;
-  flex-grow: 1;
-}
-
-.panel.middle h1 {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.panel.middle h2 {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.wheel {
-  position: relative;
-  height: 80%;
-  width: fit-content;
-  margin: 10% auto;
+:root {
+  --wheel: color-mix(
+    in oklch,
+    var(--color-base-content) 30%,
+    var(--color-base-100)
+  );
 }
 
 .wheel svg {
   transition: transform 5s ease-out;
-  height: 100%;
 }
 
 svg text {
@@ -153,20 +25,10 @@ svg text {
   top: 50%;
   width: 0;
   height: 0;
-  border-right: 6vh solid #263238;
+  border-right: 6vh solid
+    color-mix(in oklch, var(--color-base-content) 40%, var(--color-base-100));
   border-bottom: 2vh solid transparent;
   border-top: 2vh solid transparent;
   transform: translateY(-50%);
   clear: both;
 }
-
-.panel.right textarea {
-  background-color: #cfd8dc;
-  color: #263238;
-  font-family: sans-serif;
-  padding: 0.5em;
-  border: 1px solid #263238;
-  height: 100%;
-  width: 100%;
-  border-radius: 1em;
-}