body { padding: 1ex; }
-#clipboard { margin: 2px; }
+#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%);
}
.hidden { display: none; }
a, a:visited { color: blue; }
+#error {
+ display: block;
+ background: hsl(48.2,100%,90%);
+ visibility: visible;
+ opacity: 1;
+ transition: visibility 250ms, opacity 250ms;
+}
+#error.hidden {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ transition: none;
+}