From 07ace0ddea9ac2f02831fa2c85eaededf15258a0 Mon Sep 17 00:00:00 2001
From: wanhose <wanhose.development@gmail.com>
Date: Sun, 4 Apr 2021 14:16:07 +0200
Subject: [PATCH] feat(styles): create new popup styles

---
 src/styles/index.css | 79 ++++++++++++++++++++++++++++++++++++++++++++
 src/styles/reset.css | 37 +++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/styles/index.css
 create mode 100644 src/styles/reset.css

diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..b2c84d5
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,79 @@
+:root {
+  --color-chocolate: #47321e;
+  --color-cookie: #f2e9df;
+  --color-star: #e0a261;
+}
+
+a {
+  color: var(--color-star);
+  display: inline-block;
+}
+
+body {
+  align-items: center;
+  background-color: var(--color-cookie);
+  color: var(--color-chocolate);
+  display: flex;
+  flex-direction: column;
+  height: 5rem;
+  justify-content: center;
+  margin: 1rem;
+  width: 20rem;
+}
+
+h1 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 1rem;
+  margin-top: 0;
+  text-align: center;
+}
+
+span {
+  display: inline-block;
+}
+
+#negative,
+#positive {
+  font-size: 1rem;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+}
+
+.star {
+  fill: none;
+  height: 1.5rem;
+  outline: none;
+  stroke: var(--color-star);
+  width: 1.5rem;
+}
+
+.star:hover {
+  cursor: pointer;
+}
+
+.star:not(:last-child) {
+  padding-right: 0.75rem;
+}
+
+#stars {
+  display: inline-flex;
+}
+
+#stars:hover .star {
+  fill: var(--color-star);
+}
+
+#stars:hover .star:hover ~ .star {
+  fill: none;
+}
+
+#stars .star {
+  fill: none;
+}
+
+#stars[hidden="true"] {
+  display: none;
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..58c9a57
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,37 @@
+html,
+body,
+div,
+form,
+fieldset,
+legend,
+label {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td {
+  text-align: left;
+  vertical-align: top;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+th,
+td,
+caption {
+  font-weight: normal;
+}
+
+img {
+  border: 0;
+}