fix controls at top of screen

laneysmith · Jul 13, 2023 · 885f42a · 885f42a
1 parent 09feb69
commit 885f42a
Showing 1 changed file with 3 additions and 10 deletions.
diff --git a/src/index.css b/src/index.css
@@ -10,7 +10,7 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 
-  --accent-color: #00a7f7;
+  --accent-color: #005fcc;
   --border-color: grey;
   --border-radius: 8px;
   --inner-border-radius: 4px;
@@ -25,7 +25,7 @@
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: start center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -66,10 +66,6 @@ button {
 button:hover {
   border-color: var(--accent-color);
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 button:disabled {
   cursor: not-allowed;
   opacity: 0.7;
@@ -94,6 +90,7 @@ input[type="number"] {
 
 input[type="color"] {
   height: var(--control-height);
+  width: 3rem;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   transition: border-color 0.25s;
@@ -104,10 +101,6 @@ input[type="color"] {
 input[type="color"]:hover {
   border-color: var(--accent-color);
 }
-input[type="color"]:focus,
-input[type="color"]:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 input[type="color"]::-webkit-color-swatch {
   border-radius: var(--inner-border-radius);
   border: none;