Download Style Update

2023-06-12 10:02:02 +02:00
parent a8aa121d6f
commit f6c68866bf
32 changed files with 1011 additions and 43 deletions
--- a/app/public/css/style-light.css
+++ b/app/public/css/style-light.css
@@ -0,0 +1,204 @@
+* {
+  font-family: OpenSans;
+}
+
+@font-face {
+  font-family: OpenSans;
+  src: url("/fonts/OpenSans-Medium.ttf");
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: #ffffff;
+}
+
+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 #091202;
+}
+
+.view-nav {
+  padding-top: 20px;
+  gap: 20px;
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  flex-basis: 50px;
+}
+.view-nav .button-primary {
+  flex-basis: 15%;
+}
+.view-nav .button-secondary {
+  flex-basis: 15%;
+}
+.view-nav .spacer {
+  flex-basis: 30%;
+}
+
+.file {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.file .icon {
+  width: 64px;
+  height: 64px;
+}
+.file .filename p {
+  font-size: 50px;
+  margin: 0;
+  flex-wrap: 80%;
+}
+
+.file-view {
+  flex-basis: 90%;
+  width: 98%;
+  border: 1px dotted #091202;
+}
+.file-view .file-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.file-view .file-container .file {
+  height: 40px;
+  flex: 0 0 200px;
+  row-gap: 2px;
+}
+.file-view .file-container .file .icon {
+  width: 45px;
+  height: 40px;
+}
+.file-view .file-container .file .filename p {
+  font-size: 20px;
+  margin: 0;
+  flex-wrap: 80%;
+}
+.file-view .file-container .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;
+}
+.button p {
+  margin: 0;
+}
+
+.button:hover {
+  transform: scale(1.05);
+}
+
+.primary {
+  background-color: #fd9700;
+}
+
+.secondary {
+  background-color: #114388;
+  color: #ffffff;
+}
+
+.link-box {
+  display: flex;
+  height: 40px;
+  flex-direction: row;
+  flex-basis: 40%;
+  align-items: center;
+  justify-content: center;
+}
+.link-box .button-copy {
+  display: flex;
+  background-color: #114388;
+  color: #ffffff;
+  height: 100%;
+  border: 3px solid #091202;
+  border-left: none;
+  align-items: center;
+  justify-content: center;
+}
+.link-box .text-link {
+  height: 100%;
+  width: 100%;
+  border: 3px solid #091202;
+}
+.link-box .text-link input[type=text] {
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: none;
+  background-color: #114388;
+  color: #ffffff;
+}
+
+.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;
+  }
+}/*# sourceMappingURL=style-light.css.map */