1 files changed, 68 insertions, 0 deletions
diff --git a/apps/Youtube/styles/_results.scss b/apps/Youtube/styles/_results.scss
new file mode 100644
index 0000000..854d1e5
--- /dev/null
+++ b/apps/Youtube/styles/_results.scss
@@ -0,0 +1,68 @@
+.results {
+  height: 100%;
+
+  form {
+    padding: .5em;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    input[type=text] {
+      background-color: var(--color-window-content);
+      color: var(--color-text-alt);
+      margin: 1em .5em 0;
+      height: 2.5rem;
+      border: none;
+      border-radius: .5em;
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px dashed var(--color-window-buttons);
+      flex-shrink: 1;
+      flex-grow: 1;
+
+      &:placeholder {
+        font: inherit;
+      }
+    }
+  }
+
+  ul {
+    display: block;
+
+    & > li {
+      padding: .5em;
+      display: flex;
+      position: relative;
+
+      @media(hover: hover) {
+        &:hover {
+          background-color:  var(--color-button-alt);
+        }
+      }
+
+      & > p {
+        position: absolute;
+        font-size: .8em;
+        background-color: #000;
+        color: #fff;
+        border-radius: .5em;
+        padding: .25em;
+        bottom: 0.25em;
+        left: 2em;
+      }
+
+      & > div {
+        margin-left: 1em;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+
+        & > p:nth-of-type(2) {
+          margin: .25em 0 .5em;
+          font-size: .8em;
+          color: var(--color-decor);
+        }
+      }
+    }
+  }
+}