wip:

* Dark theme by default
* Re-arranged vue files structure
* Re-arranged the layout file to make it easier to extend

3 files changed, 110 insertions, 9 deletions

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index f90ecce..6e40102 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -22,4 +22,4 @@ $baseBlueHover: rgb(21, 135, 201);
 $uploaderDropdownColor: #797979;
 
 $boxShadow: 0 10px 15px rgba(4,39,107,0.2);
-$boxShadowLight: 5px 5px 15px rgba(4, 39, 107, 0.2);
+$boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
diff --git a/src/site/assets/styles/dropzone.scss b/src/site/assets/styles/dropzone.scss
index 2d68659..91e0fc1 100644
--- a/src/site/assets/styles/dropzone.scss
+++ b/src/site/assets/styles/dropzone.scss
@@ -347,6 +347,16 @@
 	border-radius: 3px;
 	*/
 }
+.dropzone .dz-preview .result a {
+	cursor: pointer;
+	color: white;
+	text-transform: uppercase;
+	line-height: 30px;
+	&:hover {
+		color: white;
+		text-decoration: underline;;
+	}
+}
 .dropzone .dz-preview:hover .dz-image img {
 	-webkit-transform: scale(1.05, 1.05);
 	-moz-transform: scale(1.05, 1.05);
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index d595a10..c067ef4 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -17,13 +17,23 @@ html {
 	background-color: $base-1;
 }
 
+a {
+	color: #5E81AC;
+	&:hover {
+		color: #81A1C1;
+		text-decoration: underline;
+	}
+}
 body,
+p,
+h1,
+h1.title,
 h2.subtitle,
 label.label {
-	color: $defaultTextColor;
+	color: $textColor;
 }
 label.label {
-	font-weight: 300;
+	font-weight: 400;
 }
 
 h4 {
@@ -33,10 +43,10 @@ h4 {
 }
 
 @for $i from 1 through 10 {
-	.mt#{$i} { margin-top: $i + em; }
-	.mb#{$i} { margin-bottom: $i + em; }
-	.ml#{$i} { margin-left: $i + em; }
-	.mr#{$i} { margin-right: $i + em; }
+	.mt#{$i} { margin-top: $i + em !important; }
+	.mb#{$i} { margin-bottom: $i + em !important; }
+	.ml#{$i} { margin-left: $i + em !important; }
+	.mr#{$i} { margin-right: $i + em !important; }
 }
 
 .text-center {
@@ -44,7 +54,7 @@ h4 {
 }
 
 hr {
-	background-color: #c7c7c7;
+	background-color: #c7c7c757;
 	height: 1px;
 }
 // Bulma color changes.
@@ -118,6 +128,21 @@ section p.control button {
 	Register and Login forms
 */
 
+section.hero.is-login, section.hero.is-register {
+	a {
+		font-size: 1.25em;
+		line-height: 2.5em;
+
+		&.button {
+			font-size: 14px !important;
+		}
+	}
+	input {
+		background: #323846;
+		border-radius: 0 !important;
+	}
+}
+/*
 section#login,
 section#register { background-color: $backgroundLight1 !important; }
 section#login input,
@@ -149,7 +174,7 @@ section#register a.is-text {
 	font-size: 1.25em;
 	line-height: 2.5em;
 }
-
+*/
 .modal-card-head, .modal-card-foot {
 	background: $backgroundLight1;
 }
@@ -157,3 +182,69 @@ section#register a.is-text {
 .switch {
 	margin-top: 5px;
 }
+
+.input, .taginput .taginput-container.is-focusable, .textarea, .select select {
+	border: 2px solid #21252d;
+	border-radius: .3em !important;
+	background: rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	color: $textColor;
+	height: 3rem;
+	&:focus,
+	&:hover {
+		border: 2px solid #21252d;
+	}
+	&::placeholder {
+		color: $textColor;
+	}
+}
+button.button.is-primary {
+	background-color: #323846;
+	border: 2px solid #21252d;
+	color: $textColor;
+	font-size: 1rem;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+	&:hover {
+		background-color: $base-2;
+	}
+	&.big {
+		font-size: 1.25rem;
+	}
+}
+svg.waves {
+	display: block;
+	bottom: -1px;
+	left: 0px;
+	right: 0px;
+	width: 100%;
+	background-color: transparent;
+	pointer-events: none;
+	user-select: none;
+	overflow: hidden;
+}
+div.field-body > div.field { text-align: left; }
+table.table {
+	background: $base-2;
+	color: $textColor;
+	border: 0;
+	thead {
+		th, td {
+			color: $textColor;
+		}
+	}
+	tfoot {
+		background: $base-1;
+		tr.table-footer {
+			.wrapper {
+				display: flex;
+				color: $textColor;
+				justify-content: space-evenly;
+			}
+		}
+	}
+	th, td {
+		border-color: #ffffff1c;
+	}
+}