1 files changed, 173 insertions, 0 deletions
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..f16b035
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,173 @@
+/* general */
+
+body, html, #container {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    font-family: -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
+    font-size: 20px;
+    text-align: center;
+}
+
+#container {
+    display: flex;
+    flex-direction: column;
+}
+
+#container h1 {
+    flex-grow: 0;
+}
+
+#setup-step {
+    flex-grow: 0;
+}
+
+#present-step {
+    flex-grow: 1;
+}
+
+/* setup */
+
+#url-input-container {
+    display: flex;
+    justify-content: center;
+}
+
+#url-input {
+    padding: 16px 24px;
+    background-color: hsl(212, 33%, 89%);
+    border-radius: 5px;
+    border: none;
+    flex-basis: 400px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.button {
+    padding: 10px 20px;
+    background-color: hsl(215, 100%, 65%);
+    color: white;
+    border: none;
+    border-radius: 200px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.2s;
+    margin-top: 20px;
+}
+
+.button:hover {
+    background-color: hsl(215, 100%, 60%);
+}
+
+.button:focus {
+    /* border: 4px solid hsl(215, 100%, 85%); */
+    box-shadow: inset 0 -3px 0 hsl(215, 100%, 85%);
+}
+
+#url-input:focus {
+    box-shadow: inset 0 -2px 0 hsl(215, 100%, 80%);
+}
+
+#file-input {
+    display: none;
+}
+
+#or {
+    margin: 0 10px;
+}
+
+.button.disabled {
+    background-color: hsl(0, 0%, 60%);
+}
+
+#error-element {
+    color: red;
+    white-space: pre-wrap;
+    margin-top: 20px;
+}
+
+#error-element:empty {
+    display: none;
+}
+
+#download-indicator {
+    width: 0;
+    height: 10px;
+    background-color: hsla(215, 100%, 65%, 0.5);
+    transition: width 0.1s, opacity 1s;
+}
+
+#setup-step {
+    margin-bottom: 20px;
+}
+
+/* present */
+
+#present-step {
+    position: relative;
+}
+
+#target-list {
+    flex-grow: 0;
+    width: 180px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-right: 1px solid #cccccc;
+}
+
+.target {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    align-items: center;
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.target img {
+    max-width: 80px;
+    max-height: 80px;
+    margin: 4px;
+}
+
+.target span {
+    font-weight: 800;
+    overflow-wrap: break-word;
+}
+
+.target.selected {
+    background-color: hsl(215, 100%, 65%);
+}
+
+#script-area {
+    position: relative;
+    overflow: scroll;
+    flex-grow: 1;
+    background-color: #eeeeee;
+    height: 100%;
+    width: 100%;
+}
+
+.scratchblocks {
+    position: relative;
+}
+
+.scratchblocks::before {
+    position: absolute;
+    content: ' ';
+    top: -40px;
+    left: -40px;
+    width: 100%;
+    height: 100%;
+    padding: 40px;
+    z-index: -1;
+}