create Single source for css
This commit is contained in:
+316
-2
@@ -1,7 +1,7 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
:root {
|
||||
--Mistox-Dark: #2C0703;
|
||||
--Mistox-Dark: #5e0c0c;
|
||||
--Mistox-Medium: #890620;
|
||||
--Mistox-Light: #B6465F;
|
||||
--Mistox-Bright: #FC440F;
|
||||
@@ -10,6 +10,7 @@
|
||||
--Mistox-Button-Hover: #ff999977;
|
||||
--Mistox-White: #FFF;
|
||||
--Mistox-Black: #000;
|
||||
--Mistox-Background: #ebebeb;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -19,5 +20,318 @@ html {
|
||||
|
||||
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='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");
|
||||
background-color: #fff;
|
||||
background-color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
/* Header / Footer */
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
/*background-color: var(--Mistox-Dark);*/
|
||||
background: linear-gradient(to bottom, var(--Mistox-Dark) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.top-bar-logo {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: 10px
|
||||
}
|
||||
|
||||
.top-bar-buttons {
|
||||
display: flex;
|
||||
width: calc(50% - 110px);
|
||||
height: 180px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
width: 150px;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
background-color: var(--Mistox-Dark);
|
||||
color: var(--Mistox-White);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.5s ease;
|
||||
letter-spacing: 4px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: var(--Mistox-Medium);
|
||||
box-shadow: 4px 3px 6px var(--Mistox-Black);
|
||||
}
|
||||
|
||||
.nav-button:active {
|
||||
transform: translate( 4px, 2px );
|
||||
background-color: var(--Mistox-Dark);
|
||||
border: none;
|
||||
color: var(--Mistox-White);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--Mistox-Light);
|
||||
color: var(--Mistox-Frame);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 300px);
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: linear-gradient(to top, var(--Mistox-Dark) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.bottom-bar-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 10px 50px;
|
||||
}
|
||||
|
||||
.bottom-bar-logo img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.bottom-bar-buttons {
|
||||
display: flex;
|
||||
width: calc(50% - 110px);
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.bottom-bar-float {
|
||||
align-items: end;
|
||||
color: var(--Mistox-White);
|
||||
}
|
||||
|
||||
.bottom-bar-padding {
|
||||
color: var(--Mistox-White);
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/* Auth Forms */
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 300px);
|
||||
}
|
||||
|
||||
.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-Background);
|
||||
padding: 4px;
|
||||
width: 400px;
|
||||
color: var(--Mistox-Black);
|
||||
border: 1px solid var(--Mistox-Black);
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.big-frame h3{
|
||||
margin: 15px 0 30px 0;
|
||||
color: var(--Mistox-Black);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-frame h2{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
top: -20px;
|
||||
font-size: 15px;
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
.frame-button {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.big-frame .frame-item label{
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: var(--Mistox-Black);
|
||||
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-Black);
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--Mistox-Black);
|
||||
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-Black);
|
||||
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: #00F;
|
||||
}
|
||||
|
||||
.sub-frame a :hover {
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
.img-frame {
|
||||
width: 610px;
|
||||
}
|
||||
|
||||
.image-holder{
|
||||
float: left;
|
||||
border: 1px solid var(--Mistox-Black);
|
||||
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-Background);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.5s ease;
|
||||
letter-spacing: 4px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: solid 1px var(--Mistox-Black);
|
||||
}
|
||||
|
||||
.submit:hover {
|
||||
box-shadow: 4px 3px 6px var(--Mistox-Dark);
|
||||
}
|
||||
|
||||
.submit:active {
|
||||
transform: translate( 4px, 2px );
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
Reference in New Issue
Block a user