This commit is contained in:
+78
-191
@@ -1,200 +1,87 @@
|
||||
.navbar-toggler {
|
||||
background-color: var(--Mistox-Dark);
|
||||
color: var(--Mistox-White);
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover {
|
||||
background-color: #410a04;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: var(--Mistox-Offset);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
height: calc(100% - 200px);
|
||||
background: linear-gradient(0deg, var(--Mistox-Dark), var(--Mistox-Offset) );
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
color: var(--Mistox-White);
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
transition-duration: 0.5s;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.nav-item a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
.nav-item a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
.nav-login {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-login-button {
|
||||
display: inline-block;
|
||||
width: calc(50% - 2.5px);
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
color: var(--Mistox-White);
|
||||
transition-duration: 0.5s;
|
||||
padding: 5px 0;
|
||||
padding-top: 9px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 15;
|
||||
}
|
||||
|
||||
.nav-login-button:hover {
|
||||
background-color: #FFFFFF50;
|
||||
}
|
||||
|
||||
article{
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
.top-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--Mistox-Black);
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: linear-gradient(0deg,#99999988, #000000FF);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: var(--Mistox-Black);
|
||||
.top-bar-logo {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: 10px
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
background-color: var(--Mistox-Black);
|
||||
.top-bar-buttons {
|
||||
display: flex;
|
||||
width: calc(50% - 110px);
|
||||
height: 180px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
height: 15px;
|
||||
width: 150px;
|
||||
border-radius: 5px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
transition: 0.5s;
|
||||
background-color: #00000000;
|
||||
border: 1px solid var(--Mistox-White);
|
||||
color: var(--Mistox-White);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: var(--Mistox-Black);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 400px);
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: linear-gradient(180deg,#99999988, #000000FF);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.nav-button-bottom {
|
||||
height: 15px;
|
||||
width: 150px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
transition: 0.5s;
|
||||
background-color: #00000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
.bottom-bar-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 0 50px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.bottom-bar-float {
|
||||
align-items: end;
|
||||
color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: var(--Mistox-Background) 2px solid;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row:not(.auth) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.nav-login {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
|
||||
.navbar-brand img {
|
||||
position: relative !important;
|
||||
padding-left: calc(50% - 80px) !important;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.top-gradient {
|
||||
background: linear-gradient(0deg, var(--Mistox-Dark), var(--Mistox-Offset) );
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
background: var(--Mistox-Medium);
|
||||
}
|
||||
|
||||
.bottom-bar-padding {
|
||||
color: var(--Mistox-White);
|
||||
margin: 20px;
|
||||
}
|
||||
+32
-60
@@ -1,63 +1,35 @@
|
||||
|
||||
<div class="page">
|
||||
<!-- Sidebar Start -->
|
||||
<div class="sidebar">
|
||||
<div class="top-row">
|
||||
<div class="top-gradient">
|
||||
<a class="navbar-brand" href="">
|
||||
<img src="img/logo.png" />
|
||||
</a>
|
||||
</div>
|
||||
<button title="DropDownButtonMobile" class="navbar-toggler">
|
||||
<span class="navbar-toggler-icon">MENU</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bottom-row">
|
||||
<div class="@NavMenuCssClass">
|
||||
<nav class="flex-column">
|
||||
<!-- Home -->
|
||||
<div class="nav-item">
|
||||
<a #homeLink class="nav-link" href="">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Project Mist -->
|
||||
<div class="nav-item">
|
||||
<a #mistLink class="nav-link" href="/project/mist">
|
||||
<span>Project-Mist</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Store -->
|
||||
<div class="nav-item">
|
||||
<a #storeLink class="nav-link" href="/store/catalog">
|
||||
<span>Store</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- About -->
|
||||
<div class="nav-item">
|
||||
<a #aboutLink class="nav-link" href="/about">
|
||||
<span>About</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Login Stuff -->
|
||||
<div class="nav-login">
|
||||
<div *ngIf="auth.isLoggedIn">
|
||||
<a class="nav-login-button" href="/account/settings"><span>{{ auth.loggedInUser.userName }}</span></a>
|
||||
<a class="nav-login-button" href="/account/logout"><span>Logout</span></a>
|
||||
</div>
|
||||
<div *ngIf="!auth.isLoggedIn">
|
||||
<a class="nav-login-button" href="/account/login"><span>Login</span></a>
|
||||
<a class="nav-login-button" href="/account/register"><span>Register</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-buttons">
|
||||
<a #mistLink class="nav-button" href="/">HOME</a>
|
||||
<a #mistLink class="nav-button" href="/companies">COMPANIES</a>
|
||||
<a #mistLink class="nav-button" href="/jobs">JOB BOARD</a>
|
||||
</div>
|
||||
<a class="top-bar-logo" href="">
|
||||
<img class="top-bar-logo" style="margin: 0;" src="img/logo.png" />
|
||||
</a>
|
||||
<div *ngIf="auth.isLoggedIn" class="top-bar-buttons flex-right">
|
||||
<a class="nav-button" href="/account/settings"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
|
||||
<a class="nav-button" href="/account/logout"><span>LOGOUT</span></a>
|
||||
</div>
|
||||
<div *ngIf="!auth.isLoggedIn" class="top-bar-buttons flex-right">
|
||||
<a class="nav-button" href="/account/login"><span>LOGIN</span></a>
|
||||
<a class="nav-button" href="/account/register"><span>REGISTER</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<div class="bottom-bar">
|
||||
<div class="top-bar-buttons bottom-bar-float">
|
||||
<a class="nav-button-bottom bottom-bar-padding" href="/contact">CONTACT</a>
|
||||
<a class="nav-button-bottom bottom-bar-padding" href="/privacy">PRIVACY</a>
|
||||
</div>
|
||||
<a class="top-bar-logo" href="https://mistox.com">
|
||||
<img class="bottom-bar-logo" src="img/mistox-logo.png" />
|
||||
</a>
|
||||
<div class="top-bar-buttons flex-right bottom-bar-float">
|
||||
<div class="bottom-bar-padding">
|
||||
<span>Mistox LLC</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar End -->
|
||||
<main>
|
||||
<article class="content px-4">
|
||||
<router-outlet />
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
+11
-11
@@ -1,13 +1,13 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mistox</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body style="border: 0; padding: 0; margin: 0;">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BoredCareers</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body style="border: 0; margin: 0; padding: 0;">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
+7
-207
@@ -5,215 +5,15 @@
|
||||
--Mistox-Medium: #890620;
|
||||
--Mistox-Light: #B6465F;
|
||||
--Mistox-Bright: #FC440F;
|
||||
--Mistox-Offset: #443B75;
|
||||
--Mistox-Background: #320000;
|
||||
--Mistox-Frame: #ff000078;
|
||||
--Mistox-Button: #ff9999;
|
||||
--Mistox-Button-Hover: #ff999977;
|
||||
--Mistox-White: #FFF;
|
||||
--Mistox-Black: #000;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #000000;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ff0000' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* CSS used for the Account Activity Pages */
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.column-content {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 1620px) {
|
||||
.column-content {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.text-frame {
|
||||
margin: 50px !important;
|
||||
max-width: 2200px !important;
|
||||
padding: 10px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.background-border {
|
||||
border: var(--Mistox-Background) 2px solid;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.big-frame {
|
||||
background-color: var(--Mistox-Black);
|
||||
padding: 4px;
|
||||
width: 400px;
|
||||
color: var(--Mistox-White);
|
||||
margin: 40px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.big-frame h3{
|
||||
margin: 15px 0 30px 0;
|
||||
color: var(--Mistox-White);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-frame h2{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
top: -20px;
|
||||
font-size: 15px;
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
.big-frame .frame-item label{
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: var(--Mistox-White);
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
top: -70px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.big-frame .frame-item input:autofill,
|
||||
.big-frame .frame-item input:-webkit-autofill,
|
||||
.big-frame .frame-item input {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
color: var(--Mistox-White);
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--Mistox-White);
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.big-frame .frame-item input:focus ~ label,
|
||||
.big-frame .frame-item input:not(:placeholder-shown) ~ label {
|
||||
top: -95px;
|
||||
left: 10px;
|
||||
color: var(--Mistox-Light);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.big-frame .frame-item textarea:autofill,
|
||||
.big-frame .frame-item textarea:-webkit-autofill,
|
||||
.big-frame .frame-item textarea {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
color: var(--Mistox-White);
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--Mistox-White);
|
||||
outline: none;
|
||||
background: transparent;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.big-frame .frame-item textarea:focus ~ label,
|
||||
.big-frame .frame-item textarea:not(:placeholder-shown) ~ label {
|
||||
top: -150px;
|
||||
left: 10px;
|
||||
color: var(--Mistox-Light);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.flex-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.sub-frame {
|
||||
text-align: center;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.sub-frame a {
|
||||
text-decoration: none;
|
||||
color: var(--Mistox-Light);
|
||||
}
|
||||
|
||||
.sub-frame a :hover {
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
.img-frame {
|
||||
width: 610px;
|
||||
}
|
||||
|
||||
.image-holder{
|
||||
float: left;
|
||||
border: 1px solid white;
|
||||
width: fit-content;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
background-color: red;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transform: translate(180px, 0);
|
||||
}
|
||||
|
||||
.delete-button:hover{
|
||||
background-color: #890620;
|
||||
}
|
||||
|
||||
.submit{
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
color: var(--Mistox-Black);
|
||||
background-color: var(--Mistox-Light);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.5s ease;
|
||||
letter-spacing: 4px;
|
||||
border: 1px solid var(--Mistox-Light);
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.submit:hover {
|
||||
background-color: var(--Mistox-Light);
|
||||
color: var(--Mistox-White);
|
||||
box-shadow: 4px 3px 6px var(--Mistox-Dark);
|
||||
}
|
||||
|
||||
.submit:active {
|
||||
transform: translate( 4px, 2px );
|
||||
background-color: var(--Mistox-Dark);
|
||||
border: none;
|
||||
color: var(--Mistox-White);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
color: var(--Mistox-Bright);
|
||||
body {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
background-color: #fff;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Reference in New Issue
Block a user