add hints to each button

[icedeb.git] / icedeb.css

diff --git a/icedeb.css b/icedeb.css
index c12c541b5054873936ff504e2853fb2ae20e0364..80be164c4b70267662bad1b5bdceeb40b9f26c34 100644 (file)
--- a/icedeb.css
+++ b/icedeb.css
@@ -1,8 +1,21 @@
 body { padding: 1ex; }
-#clipboard { margin: 2px; }
+#clip-pot { position: absolute; left: -1000px; }
+#clipboard {
+  margin: 2px;
+  min-height: 1.5em;
+  max-height: 2.5em;
+  border: 1px solid hsl(0,0%,69.4%);
+  box-shadow: 0 0 0 0 hsla(208.1, 100%, 69%, 0);
+  transition: 250ms box-shadow;
+}
+#clipboard:focus {
+    border-color: hsl(204.6, 94.5%, 50.4%);
+    box-shadow: 0 0 0 2px hsla(208.1, 100%, 69%, 0.8);
+    outline: none;
+}
 
 #button-list-container {
-  background: linear-gradient(to bottom, hsl(222,4%,89%) 0%, hsl(0,0%,100%) 100%);
+  background: hsl(222,4%,92%);
   display: flex;
   flex-direction: column;
   padding: 0.1ex;
@@ -10,15 +23,22 @@ body { padding: 1ex; }
 #button-list-container > * {
   margin: 0.5ex;
   padding 0.1ex;
+  display: flex;
 }
 
 .icedeb-button {
   border-radius: 5px;
   cursor: pointer;
   color: blue;
+  margin-right: 1em;
 }
 .icedeb-button:hover {
     text-decoration: underline;
 }
-.hidden { display: none; }
 a, a:visited { color: blue; }
+.hints { margin-left: auto; margin-right: 0; }
+.hints .hint { display: inline-block; width: 1.8ex; text-align: center; margin: 0 0.2ex; cursor: default; }
+.hints .hint.b { background-color: hsl(312,100%,96%) }
+.hints .hint.p { background-color: hsl(120,100%,96%) }
+.hints .hint.m { background-color: hsl(240,100%,96%) }
+.hints .hint.i { background-color: hsl( 40,100%,96%) }