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 @@ + -