input-pill: Add styling.

This adds some styling for the default case of the input pills and some
custom styling.

static/styles/input_pill.css

@@ -0,0 +1,112 @@
+.pill-container {
+    display: inline-block;
+
+    padding: 2px;
+    border: 1px solid hsl(0, 0%, 86%);
+    border-radius: 4px;
+
+    font-size: 0.9em;
+
+    cursor: text;
+}
+
+.pill-container .pill {
+    position: relative;
+    display: inline-block;
+
+    padding: 0px 18px 0px 2px;
+    margin: 1px 1px;
+
+    color: #5db7b3;
+    border: 1px solid #b2e4e2;
+
+    border-radius: 4px;
+
+    cursor: pointer;
+}
+
+.pill-container .pill:focus {
+    color: #b85e5e;
+    border: 1px solid #e4b2b2;
+
+    outline: none;
+}
+
+.pill-container .input {
+    display: inline-block;
+    padding: 2px 4px;
+
+    min-width: 2px;
+
+    outline: none;
+}
+
+.pill-container .pill .exit {
+    content: "\D7";
+    position: absolute;
+    top: 0px;
+    right: 3px;
+
+    opacity: 0.5;
+
+    font-size: 1.3em;
+}
+
+.pill-container .pill:hover .exit {
+    opacity: 1;
+}
+
+.pill-container .input.shake {
+    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+}
+
+.pm_recipient .pill-container {
+    position: absolute;
+    left: 56px;
+    width: 100%;
+    height: 24px;
+
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+.pm_recipient .pill-container .pill {
+    color: #fff;
+    border: 1px solid #36a29b;
+    background: #51c1af;
+    font-weight: 600;
+}
+
+.pm_recipient .pill-container .pill:focus {
+    border: 1px solid #108179;
+    background: #36a29b;
+}
+
+.pm_recipient .pill-container .input {
+    height: 12px;
+}
+
+@keyframes shake {
+    10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-3px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(3px, 0, 0);
+    }
+}

zproject/settings.py

@@ -808,6 +808,7 @@ PIPELINE = {
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/drafts.css',
+                'styles/input_pill.css',
                 'styles/informational-overlays.css',
                 'styles/compose.css',
                 'styles/reactions.css',
@@ -837,6 +838,7 @@ PIPELINE = {
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/drafts.css',
+                'styles/input_pill.css',
                 'styles/informational-overlays.css',
                 'styles/compose.css',
                 'styles/reactions.css',