client/assets/css/main.css
@font-face {
font-family: laks;
src: url(../laksaman.ttf);
}
body {
background: aliceblue;
font-size: 18px;
font-family: laks,
"Times New Roman", "Oxygen", "Laksaman",
"Ubuntu", "Roboto", sans-serif;
margin: 0;
}
h1 {
color: #e7e7e9;
}
h2, h3 {
color: #4F4D53;
}
ul li, li {
list-style-type: none;
}
a {
color: rgb(0, 124, 195);
text-decoration: none !important;
}
a svg, svg {
color: #4F4D53;
}
hr {
border: 1px solid #e9e9e9;
}
select {
width: 100px;
height: 30px;
}
.container {
width: 80%;
}
.center {
text-align: center;
}
.right {
float: right;
}
.back {
color: #4F4D53;
cursor: pointer;
}
.show {
display: block;
}
.toast {
background-color: #fff;
border: none;
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.18);
color: green;
display: none;
max-width: 20%;;
padding: 10px;
position: absolute;
text-align: center;
top: 10px;
right: 10px;
z-index: 9999;
}
.toast.error {
color: red;
}
.toast img {
width: 20%;
}
.header:first-letter {
border-top: 8px solid #4F4D53;
padding-top: 15px;
}
.grid {
display: grid;
justify-content: space-between;
gap: 1em;
}
/*Grid Layout*/
.one-column {
grid-template-columns: 1fr;
}
.justify-center {
display: flex;
justify-content: center;
}
.two-equal-sized-columns {
grid-template-columns: 1fr 1fr;
}
.three-equal-sized-columns {
grid-template-columns: repeat(3, 1fr);
}
.four-equal-sized-columns {
grid-template-columns: repeat(4, 1fr);
}
/*Buttons*/
.button {
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
}
.button:hover {
color: #e9e9e9;
background: #212121;
}
.button-blue {
background: rgb(0, 147, 221);
color: #fff;
}
.button-blue:hover {
background: rgb(0, 124, 195) !important;
color: #fff;
}
.button-brown {
color: #fff;
background: chocolate;
}
.button-brown:hover {
color: #fff;
}
.button-red {
color: #fff;
border: 0 none;
background: rgb(214, 25, 0);
}
.button-red:hover {
color: white;
background: rgb(200, 40, 25);
}
.button-green {
border: 0;
background: teal;
color: #fff;
}
.button-green:hover {
background: #006262;
}
.btn-transparent {
border: 1px solid teal;
background: transparent;
color: teal;
}
.btn-transparent:hover {
background: teal;
color: #fff;
}
.btn-wide {
padding: 0.3em 6em;
}
.button:disabled {
cursor: not-allowed;
}
/*Colors*/
.green {
color: #00a677;
}
.red {
color: red;
}
.blue {
color: rgb(0, 124, 195);
}
.gold {
color: #ffaa03;
}
/*Card*/
.card {
background: #fff;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
cursor: pointer;
}
.card .card-media {
background-repeat: no-repeat;
background-size: cover;
height: 250px;
}
.card .card-media:hover {
opacity: 0.9;
}
.card .card-content {
color: #fff;
font-size: 20px;
}
.card .actions {
margin: 15px;
}
.card .actions button {
font-size: 12px !important;
}
/*home*/
#logo {
display: inline-flex;
cursor: pointer;
}
#logo a {
display: inline-flex;
}
#logo img {
height: 60px;
width: 60px;
}
.hero {
width: 100%;
}
.hero-landing {
background-image: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.main .account, .main .contact-us, .main .about-us {
margin: 0 auto;
width: 50%;
}
.hero-copy {
background: #ffffffb0;
border-radius: 40px;
display: inline-block;
padding: 5em;
margin-top: 50px;
margin-left: 50px;
}
.hero-copy h1 {
color: teal;
font-size: 68px;
font-weight: 900;
letter-spacing: -4px;
line-height: 1.5em;
margin: 0;
}
.hero-copy p {
font-size: 18px;
font-style: italic;
margin-top: 2.5px;
}
.no-hero {
background: none;
}
nav {
padding: 14px 40px;
display: flex;
justify-content: space-between;
}
nav .nav-links ul {
margin: 0;
}
nav #account-link, nav #logout-link {
display: none;
}
#logout {
position: relative;
}
nav ul li {
color: #e7e7e9;
cursor: pointer;
display: inline-flex;
font-weight: 600;
padding: 10px;
margin-right: 20px;
text-transform: uppercase;
}
nav ul li a {
color: #e7e7e9;
}
nav ul li.active a {
color: teal;
}
nav ul .button {
color: #e7e7e9;
padding: 2px 20px;
}
nav ul .button {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18);
}
nav ul li a:hover {
color: teal !important;
}
.main section header {
font-size: 58px;
}
.main section header h2 {
letter-spacing: -6px;
margin: 0;
}
.main .header {
background: #ffffffb0;
border-radius: 40px;
display: inline-flex;
margin-top: 5em;
margin-bottom: -3em;
padding: 4em;
}
.main .landing {
background-image: url(../img/about.jpg);
background-position: right;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 800px;
}
.main .landing article {
font-size: 20px;
padding-top: 100px;
line-height: 1.6em;
max-width: 450px;
margin-left: 100px;
font-weight: 100;
}
.main .main-content img {
width: 100%;
/*height: 100%;*/
}
.main .main-content article button, .main .final-cta button {
border: none;
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: bold;
margin-top: 30px;
padding: 15px 25px;
}
.main .main-content article button:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18);
}
.main-showcase {
margin: 120px auto;
}
.main-showcase .why-us {
background-color: #ffffffb0;
border-radius: 28px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
font-size: 24px;
margin: 2em 1em;
padding: 1em;
max-width: 480px;
}
.main-showcase .why-us p {
font-size: 18px;
font-weight: 200;
}
/*Help*/
.main .help {
margin: 0 auto 100px;
width: 80%;
}
.main .help ul li {
line-height: 1.6em;
list-style-type: disc;
}
/*Login*/
.auth-page {
display: grid;
grid-template-columns: 1fr 1fr;
}
.auth-page .nav {
display: none;
}
.auth-page .banner {
background-image: url('../img/undraw_access_account_99n5.svg');
background-repeat: no-repeat;
background-size: 50%;
background-position: center;
padding: 1em;
}
.auth-page .banner #logo {
display: inline-block;
}
.auth-page .banner h1 {
font-size: 42px;
color: teal;
margin: 0;
letter-spacing: -3px;
font-style: italic;
}
.auth-page .banner p {
color: #4F4D53;
margin: 0;
letter-spacing: -2px;
font-style: italic;
}
.form {
margin: auto;
width: 60%;
}
.form h3 {
font-size: 30px;
text-align: center;
}
.form-row {
max-width: 100%;
}
input {
font-size: 18px;
border: none;
border-radius: 6px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
padding-left: 10px;
padding-top: 14px;
padding-bottom: 14px;
margin: 5px auto 15px;
width: 100%;
}
select {
border: none;
outline: none;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
input:not([type=submit]):focus {
outline: none;
border: 1px solid rgb(0, 124, 195);
}
input[type="submit"] {
border: 0 none;
cursor: pointer;
font-size: 20px;
margin-top: 30px;
padding: 0.2em;
text-transform: uppercase;
}
input[type="submit"]:focus {
outline-color: #fff;
}
input::placeholder {
font-size: 18px;
}
.navigate {
display: flex;
justify-content: space-between;
line-height: .8em;
}
.navigate a:hover {
text-decoration: underline !important;
}
.navigate a:visited {
color: rgb(0, 124, 195);
}
/*Admin*/
.ad-modal {
background-color: rgb(250, 250, 250);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18);
border-radius: 5px;
display: none;
position: fixed;
top: 10px;
right: 25%;
bottom: 50%;
left: 25%;
padding: 20px;
z-index: 999;
}
.ad-modal .modal-content {
height: 100%;
max-width: 60vh;
padding-top: 12vh;
margin: 0 auto;
position: relative;
}
.ad-modal .actions {
display: flex;
justify-content: space-around;
padding-top: 8vh;
}
.ad-modal button {
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
padding: 10px 40px;
}
.ad-modal .modal-close {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
padding: 10px 28px;
z-index: 999;
line-height: 1;
}
#ad-nav {
background: teal;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
padding: 10px 40px 0;
position: sticky;
top: 0;
}
#ad-nav #logo {
padding: 0;
}
#avatar {
border-radius: 50%;
cursor: pointer;
width: 30px;
height: 30px;
}
.dropdown-content {
display: none;
padding: 10px 0;
background-color: #f9f9f9;
font-size: 14px;
min-width: 120px;
box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 5px;
position: absolute;
right: 30px;
top: 10px;
z-index: 1;
}
.dropdown-content a {
color: #4F4D53;
display: block;
line-height: 3em;
padding: 0 20px;
}
.dropdown-content a:hover {
background-color: #e9e9e9;
}
.accordion {
transition: 0.4s;
}
.panel {
font-size: 16px;
padding: 0 40px;
background-color: rgb(6, 60, 90);
display: none;
transition: max-height 0.2s ease-out;
}
.panel a {
color: #e5e5e5 !important;
display: block;
line-height: 3em;
}
.panel a:hover {
text-decoration: underline !important;
}
.ellipsis .more-options {
background: #fff;
border-radius: 8px;
box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2);
display: none;
padding: 20px;
position: absolute;
top: 0;
right: 0;
}
.ellipsis .more-options button {
margin-top: 10px;
}
.ad-nav-right {
padding-top: 10px;
}
.ad-main {
display: grid;
grid-template-columns: 1fr 4fr;
}
.ad-main .card-content img {
width: 50%;
}
.ad-main .card button {
font-size: 16px;
width: 50%;
}
.ad-main aside {
background: linear-gradient(45deg, #00a2a2 0, teal 100%);
padding: 20px 0;
position: fixed;
width: 20%;
}
.ad-main aside ul {
margin: 0;
padding: 0;
}
.ad-main aside ul li {
color: #f5f5f5;
cursor: pointer;
padding: 15px;
}
.ad-main aside ul svg {
color: #f5f5f5;
}
.ad-main aside ul li a {
color: #f5f5f5;
}
.ad-main aside ul li:hover {
color: #f5f5f5;
background: #076969;
}
.ad-main-showcase {
padding: 1em 1em 4em;
}
/*All accounts*/
.ad-main-content hr {
clear: both;
}
.ad-main-content table {
border-collapse: collapse;
width: 100%;
}
.ad-main-content table .ellipsis {
display: none;
}
.ad-main-content table tr:nth-child(2n) {
background: #0062620a;
}
.ad-main-content table th, .ad-main-content table td {
padding: 15px 20px;
text-align: left;
}
.ad-main-content table button {
background: #f3f3f3;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
padding: 5px 20px;
}
.ad-main-content section button {
background: #f3f3f3;
border: none;
border-radius: 3px;
color: red;
cursor: pointer;
font-size: 14px;
padding: 5px 20px;
}
.ad-main-content table button:hover, .ad-main-content section button {
background: #e9e9e9;
}
.ad-main-content table button:focus {
outline: 1px dashed #087308;
}
.ad-main-content table th:last-child, .ad-main-content table td:last-child {
/*padding-left: 50px;*/
}
.ad-main-content .transaction-form {
margin-top: 40px;
width: 50%;
}
.ad-main-content .new-user-form .form-row {
display: inline-block;
}
.footer {
color: #fff;
background: #000;
padding: 10px 0;
text-align: center;
margin-top: 250px;
}
footer {
margin: 20px auto;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #000;
overflow-x: hidden;
padding-top: 60px;
transition: width 0.03s ease;
}
.side-nav a {
padding: 20px;
text-decoration: none;
color: #ccc;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav li {
border-bottom: 1px solid #ffffff21;
font-size: 20px;
margin: 0 30px;
text-transform: uppercase;
}
.side-nav li:hover {
background: #000;
}
.side-nav .btn-close {
font-size: 2.5em;
position: absolute;
top: 0;
right: 10px;
}
.open-slide {
position: absolute;
right: 20px;
top: 20px;
visibility: hidden;
z-index: 999;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
z-index: 999;
}