refactor viewer sections list, share, subscribe, subscription form

1 files changed, 49 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
new file mode 100644
index 0000000..5e9d698
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -0,0 +1,49 @@
+/* form in transcript */
+
+.player-transcript .subscription-form {
+  font-family: "Freight Text", serif;
+  font-size: 3.5rem;
+  line-height: 1;
+  width: 80%;
+  max-width: 70rem;
+  margin: 0 auto;
+  margin-top: 4rem;
+  margin-bottom: 13rem;
+  position: relative;
+}
+.player-transcript .subscription-form input {
+  font-family: "Freight Text", serif;
+  font-size: 3.5rem;
+  border-bottom: 1px solid #000;
+  color: black;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: 100%;
+}
+.player-transcript .subscription-form input::placeholder {
+  color: #bbb;
+  border-bottom: 1px solid #bbb;
+}
+.player-transcript .subscription-form input[type='email']:invalid {
+  border-bottom: 1px solid #bbb;
+}
+.player-transcript .subscription-form input:focus,
+.player-transcript .subscription-form input:focus:invalid {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: #000;
+  border-bottom: 1px solid #000;
+}
+.player-transcript .subscription-form svg {
+  position: absolute;
+  bottom: 0;
+  right: -1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.player-transcript .subscription-form svg polygon {
+  fill: #666;
+}