Download Style Update

app/public/css/style-light.scss

@@ -0,0 +1,215 @@
+
+$color-primary: #fd9700;
+$color-primary-text: #ffffff;
+$color-secondary: #114388;
+$color-secondary-text: #ffffff;
+$color-background: #ffffff;
+$color-text: #091202;
+
+
+* {
+    font-family: OpenSans;
+}
+
+@font-face {
+    font-family: OpenSans;
+    src: url("/fonts/OpenSans-Medium.ttf");
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+
+body {
+    background-color: $color-background;
+
+}
+
+a:link { text-decoration: none; }
+
+a:visited { text-decoration: none; }
+
+a:hover { text-decoration: none; }
+
+a:active { text-decoration: none; }
+
+.container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.view-container {
+    height: 95vh;
+    width: 95%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border: 1px solid $color-text;
+}
+
+
+.view-nav {
+    padding-top: 20px;
+    gap: 20px;
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    flex-basis: 50px;
+    .button-primary {
+        flex-basis: 15%;
+    }
+    .button-secondary {
+        flex-basis: 15%;
+    }
+    .spacer {
+        flex-basis: 30%
+    }
+}
+
+.file {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .icon {
+        width: 64px;
+        height: 64px;
+    }
+    .filename {
+        p {
+            font-size: 50px;
+            margin: 0;
+            flex-wrap: 80%;
+        }
+    }
+}
+
+.file-view {        
+    flex-basis: 90%;
+    width: 98%;
+    border: 1px dotted $color-text;
+    .file-container {
+        display: flex;
+        flex-wrap: wrap;
+        .file {
+            height: 40px;
+            flex: 0 0 200px;
+            row-gap: 2px;
+            .icon {
+                width: 45px;
+                height: 40px;
+            }
+            .filename {
+                p {
+                    font-size: 20px;
+                    margin: 0;
+                    flex-wrap: 80%;
+                }
+            }
+        }
+        .file:hover {
+            transform: scale(1.05);
+            transition: all 0.3s;
+        }
+    }
+}
+
+.button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    background-color: #e42200;
+    border: none;
+    color: #FFFFFF;
+    font-family: OpenSans;
+    font-size: 20px;
+    padding: 4px;
+    width: 200px;
+    transition: all 0.3s;
+    cursor: pointer;
+    p {
+        margin: 0;
+    }
+}
+
+.button:hover {
+    transform: scale(1.05);
+}
+
+.primary {
+    background-color: $color-primary;
+}
+
+.secondary {
+    background-color: $color-secondary;
+    color: $color-secondary-text;
+}
+
+.link-box {
+    display: flex;
+    height: 40px;
+    flex-direction: row;
+    flex-basis: 40%;
+    align-items: center;
+    justify-content: center;
+    .button-copy {
+        display: flex;
+        background-color: $color-secondary;
+        color: $color-secondary-text;
+        height: 100%;
+        border: 3px solid $color-text;
+        border-left: none;
+        align-items: center;
+        justify-content: center;
+    }
+    .text-link {
+        height: 100%;
+        width: 100%;
+        border: 3px solid $color-text;
+        input[type=text] {
+            width: 100%;
+            height: 100%;
+            font-size: 20px;
+            padding: 12px 20px;
+            box-sizing: border-box;
+            border: none;
+            background-color: $color-secondary;
+            color: $color-secondary-text;
+        }   
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+.copy {
+    height: 30px;
+}
+
+.checkmark {
+    height: 30px;
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation-iteration-count: 1;
+    stroke-dashoffset: 0;
+    animation: checkmark 0.3s linear;
+}
+
+@keyframes checkmark {
+    
+    from { 
+        stroke-dashoffset: -500;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}