diff --git a/server/src/main/resources/html/static/custom.css b/server/src/main/resources/html/static/custom.css
index 8cc7ead7..ace1d7e4 100644
--- a/server/src/main/resources/html/static/custom.css
+++ b/server/src/main/resources/html/static/custom.css
@@ -66,4 +66,8 @@ th a:hover {
.red {
color: #dc4444;
-}
\ No newline at end of file
+}
+
+#dark-mode-toggle {
+ text-decoration: none;
+}
diff --git a/server/src/main/resources/html/static/freelancer-dark.css b/server/src/main/resources/html/static/freelancer-dark.css
new file mode 100644
index 00000000..88c18dfd
--- /dev/null
+++ b/server/src/main/resources/html/static/freelancer-dark.css
@@ -0,0 +1,419 @@
+html {
+ height: 100%;
+}
+
+body {
+ min-height: 100%;
+ color: #fff;
+ background-color: #2C3E50;
+ font-family: 'Lato';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: #fff;
+ font-weight: 700;
+ font-family: 'Montserrat';
+}
+
+hr.star-light,
+hr.star-dark {
+ max-width: 15rem;
+ padding: 0;
+ text-align: center;
+ border: none;
+ border-top: solid 0.25rem;
+ margin-top: 2.5rem;
+ margin-bottom: 2.5rem;
+}
+
+hr.star-light:after,
+hr.star-dark:after {
+ position: relative;
+ top: -.8em;
+ display: inline-block;
+ padding: 0 0.25em;
+ content: '\f005';
+ font-family: FontAwesome;
+ font-size: 2em;
+}
+
+hr.star-light {
+ border-color: #2C3E50;
+}
+
+hr.star-light:after {
+ color: #2C3E50;
+ background-color: #dc4444;
+}
+
+hr.star-dark {
+ border-color: #fff;
+}
+
+hr.star-dark:after {
+ color: #fff;
+ background-color: white;
+}
+
+section {
+ padding: 6rem 1rem 0 1rem;
+}
+
+section h2 {
+ font-size: 2.25rem;
+ line-height: 2rem;
+}
+
+button, input, optgroup, select, textarea {
+ color: #fff;
+ background-color: #2C3E50;
+}
+
+.table-bordered td, .table-bordered th {
+ border: 1px solid #1a252f;
+}
+
+.table thead th {
+ border-bottom: 2px solid #1a252f;
+}
+
+@media (min-width: 992px) {
+ section {
+ padding: 9rem 3rem 0 3rem;
+ }
+ section h2 {
+ font-size: 3rem;
+ line-height: 2.5rem;
+ }
+}
+
+.form-control {
+ color: #fff;
+ background-color: #2C3E50;
+ border-color: #1a252f;
+}
+
+.btn-xl {
+ padding: 1rem 1.75rem;
+ font-size: 1.25rem;
+}
+
+.btn-social {
+ width: 3.25rem;
+ height: 3.25rem;
+ font-size: 1.25rem;
+ line-height: 2rem;
+}
+
+.scroll-to-top {
+ z-index: 1042;
+ right: 1rem;
+ bottom: 1rem;
+ display: none;
+}
+
+.scroll-to-top a {
+ width: 3.5rem;
+ height: 3.5rem;
+ background-color: rgba(33, 37, 41, 0.5);
+ line-height: 3.1rem;
+}
+
+#mainNav {
+ /*padding-top: 1rem;*/
+ /*padding-bottom: 1rem;*/
+ font-weight: 700;
+ font-family: 'Montserrat';
+ background-color: #1a252f;
+}
+
+#mainNav .navbar-brand {
+ color: #fff;
+}
+
+#mainNav .navbar-nav {
+ margin-top: 1rem;
+ letter-spacing: 0.0625rem;
+}
+
+#mainNav .navbar-nav li.nav-item a.nav-link {
+ color: #2C3E50;
+}
+
+#mainNav .navbar-nav li.nav-item a.nav-link:hover {
+ color: #dc4444;
+ background-color: #fff;
+}
+
+#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
+ color: #2C3E50;
+}
+
+#mainNav .navbar-nav li.nav-item a.nav-link.active {
+ color: #dc4444;
+}
+
+#mainNav .navbar-toggler {
+ font-size: 80%;
+ padding: 0.8rem;
+}
+
+@media (min-width: 992px) {
+ #mainNav {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
+ -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
+ transition: padding-top 0.3s, padding-bottom 0.3s;
+ }
+ #mainNav .navbar-brand {
+ font-size: 2em;
+ -webkit-transition: font-size 0.3s;
+ -moz-transition: font-size 0.3s;
+ transition: font-size 0.3s;
+ }
+ #mainNav .navbar-nav {
+ margin-top: 0;
+ }
+ #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
+ color: #fff;
+ background: #dc4444;
+ }
+ #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
+ color: #fff;
+ background: #dc4444;
+ }
+ #mainNav.navbar-shrink {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ }
+ #mainNav.navbar-shrink .navbar-brand {
+ font-size: 1.5em;
+ }
+}
+
+header.masthead {
+ padding-top: calc(6rem + 72px);
+ padding-bottom: 6rem;
+}
+
+header.masthead h1 {
+ font-size: 3rem;
+ line-height: 3rem;
+}
+
+header.masthead h2 {
+ font-size: 1.3rem;
+ font-family: 'Lato';
+}
+
+@media (min-width: 992px) {
+ header.masthead {
+ padding-top: calc(6rem + 106px);
+ padding-bottom: 6rem;
+ }
+ header.masthead h1 {
+ font-size: 4.75em;
+ line-height: 4rem;
+ }
+ header.masthead h2 {
+ font-size: 1.75em;
+ }
+}
+
+.portfolio {
+ margin-bottom: -15px;
+}
+
+.portfolio .portfolio-item {
+ position: relative;
+ display: block;
+ max-width: 25rem;
+ margin-bottom: 15px;
+}
+
+.portfolio .portfolio-item .portfolio-item-caption {
+ -webkit-transition: all ease 0.5s;
+ -moz-transition: all ease 0.5s;
+ transition: all ease 0.5s;
+ opacity: 0;
+ background-color: rgba(220, 68, 68, 0.9);
+}
+
+.portfolio .portfolio-item .portfolio-item-caption:hover {
+ opacity: 1;
+}
+
+.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
+ font-size: 1.5rem;
+}
+
+@media (min-width: 576px) {
+ .portfolio {
+ margin-bottom: -30px;
+ }
+ .portfolio .portfolio-item {
+ margin-bottom: 30px;
+ }
+}
+
+.portfolio-modal .portfolio-modal-dialog {
+ padding: 3rem 1rem;
+ min-height: calc(100vh - 2rem);
+ margin: 1rem calc(1rem - 8px);
+ position: relative;
+ z-index: 2;
+ -moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
+ box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
+}
+
+.portfolio-modal .portfolio-modal-dialog .close-button {
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
+}
+
+.portfolio-modal .portfolio-modal-dialog .close-button i {
+ line-height: 38px;
+}
+
+.portfolio-modal .portfolio-modal-dialog h2 {
+ font-size: 2rem;
+}
+
+@media (min-width: 768px) {
+ .portfolio-modal .portfolio-modal-dialog {
+ min-height: 100vh;
+ padding: 5rem;
+ margin: 3rem calc(3rem - 8px);
+ }
+ .portfolio-modal .portfolio-modal-dialog h2 {
+ font-size: 3rem;
+ }
+}
+
+.floating-label-form-group {
+ position: relative;
+ border-bottom: 1px solid #1a252f;
+}
+
+.floating-label-form-group input,
+.floating-label-form-group textarea {
+ font-size: 1.5em;
+ position: relative;
+ z-index: 1;
+ padding-right: 0;
+ padding-left: 0;
+ resize: none;
+ border: none;
+ border-radius: 0;
+ background: none;
+ box-shadow: none !important;
+}
+
+.floating-label-form-group label {
+ font-size: 0.85em;
+ line-height: 1.764705882em;
+ position: relative;
+ z-index: 0;
+ top: 2em;
+ /*display: block;*/
+ margin: 0;
+ -webkit-transition: top 0.3s ease, opacity 0.3s ease;
+ -moz-transition: top 0.3s ease, opacity 0.3s ease;
+ -ms-transition: top 0.3s ease, opacity 0.3s ease;
+ transition: top 0.3s ease, opacity 0.3s ease;
+ vertical-align: baseline;
+ opacity: 0;
+}
+
+.floating-label-form-group:not(:first-child) {
+ padding-left: 14px;
+ border-left: 1px solid #1a252f;
+}
+
+.floating-label-form-group-with-value label {
+ top: 0;
+ opacity: 1;
+}
+
+.floating-label-form-group-with-focus label {
+ color: #dc4444;
+}
+
+form .row:first-child .floating-label-form-group {
+ border-top: 1px solid #1a252f;
+}
+
+.footer {
+ padding-top: 5rem;
+ padding-bottom: 5rem;
+ background-color: #fff;
+ color: #2C3E50;
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+}
+
+.copyright {
+ background-color: #1a252f;
+}
+
+a {
+ color: #dc4444;
+}
+
+a:focus, a:hover, a:active {
+ color: #c82525;
+}
+
+.btn {
+ border-width: 2px;
+}
+
+.bg-primary {
+ background-color: #dc4444 !important;
+}
+
+.bg-secondary {
+ background-color: #1a252f !important;
+}
+
+.text-primary {
+ color: #dc4444 !important;
+}
+
+.text-secondary {
+ color: #fff !important;
+}
+
+.btn-primary {
+ background-color: #dc4444;
+ border-color: #dc4444;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+ background-color: #c82525;
+ border-color: #c82525;
+}
+
+.btn-secondary {
+ background-color: #1a252f;
+ border-color: #1a252f;
+}
+
+.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
+ background-color: #fff;
+ border-color: #fff;
+ color: #1a252f;
+}
+
+.table td, .table th {
+ vertical-align: middle;
+}
diff --git a/server/src/main/resources/html/static/freelancer.css b/server/src/main/resources/html/static/freelancer.css
index 0652220d..84b456cc 100644
--- a/server/src/main/resources/html/static/freelancer.css
+++ b/server/src/main/resources/html/static/freelancer.css
@@ -5,6 +5,7 @@ html {
body {
min-height: 100%;
color: #2C3E50;
+ background-color: #fff;
font-family: 'Lato';
}
@@ -68,6 +69,20 @@ section h2 {
line-height: 2rem;
}
+/*
+button, input, optgroup, select, textarea {
+ color: #fff;
+ background-color: #2C3E50;
+}
+*/
+.table-bordered td, .table-bordered th {
+ border: 1px solid #dee2e6;
+}
+
+.table thead th {
+ border-bottom: 2px solid #dee2e6;
+}
+
@media (min-width: 992px) {
section {
padding: 9rem 3rem 0 3rem;
@@ -78,6 +93,12 @@ section h2 {
}
}
+.form-control {
+ color: #495057;
+ background-color: #fff;
+ border: 1px solid #ced4da;
+}
+
.btn-xl {
padding: 1rem 1.75rem;
font-size: 1.25rem;
@@ -109,6 +130,7 @@ section h2 {
/*padding-bottom: 1rem;*/
font-weight: 700;
font-family: 'Montserrat';
+ background-color: #fff;
}
#mainNav .navbar-brand {
@@ -126,6 +148,7 @@ section h2 {
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
color: #dc4444;
+ background-color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
@@ -301,14 +324,12 @@ header.masthead h2 {
position: relative;
z-index: 0;
top: 2em;
- display: block;
margin: 0;
-webkit-transition: top 0.3s ease, opacity 0.3s ease;
-moz-transition: top 0.3s ease, opacity 0.3s ease;
-ms-transition: top 0.3s ease, opacity 0.3s ease;
transition: top 0.3s ease, opacity 0.3s ease;
vertical-align: middle;
- vertical-align: baseline;
opacity: 0;
}
@@ -390,4 +411,9 @@ a:focus, a:hover, a:active {
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #1a252f;
border-color: #1a252f;
+ color: #fff
+}
+
+.table td, .table th {
+ vertical-align: middle;
}
diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html
index c94a29f9..a4c18513 100644
--- a/server/src/main/resources/html/static/index.html
+++ b/server/src/main/resources/html/static/index.html
@@ -15,7 +15,7 @@
-
+
@@ -23,8 +23,7 @@
-
-
+
@@ -43,8 +42,9 @@
+
-