init
This commit is contained in:
@@ -0,0 +1,309 @@
|
||||
body {
|
||||
background-color: black;
|
||||
transition: background-color 0.3s ease;
|
||||
background-image: url("./images/fullyblackfire.svg");
|
||||
background-size: auto 113%; /* Zooms the image in by 50% relative to the container */
|
||||
background-position: center 2px; /* Centers the zoomed image */
|
||||
background-repeat: no-repeat; /* Prevents the image from repeating */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 1140px) {
|
||||
body {
|
||||
background-position: center 6px;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* @media (min-width: 1140px) {
|
||||
body {
|
||||
flex-basis: 30%;
|
||||
}
|
||||
} */
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 12px 46px;
|
||||
}
|
||||
|
||||
@media (min-width: 1140px) {
|
||||
.dashboard {
|
||||
height: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
/* @media (min-width: 1140px) {
|
||||
.dashboard {
|
||||
background-image: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.dashboard-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
-webkit-text-stroke: 1px black;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
color: #32CD32;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.header-purple {
|
||||
color: #967bb6;
|
||||
}
|
||||
|
||||
.current-dashboard {
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
/* text-shadow: 4px 4px 10px #32CD32; */
|
||||
/* text-shadow: 3px 3px 0 #32CD32;
|
||||
text-shadow: -3px 3px 0 #32CD32;
|
||||
text-shadow: -3px -3px 0 #32CD32;
|
||||
text-shadow: 3px -3px 0 #32CD32; */
|
||||
}
|
||||
|
||||
.neonText {
|
||||
animation: flicker 1.5s infinite alternate;
|
||||
color: #fff;
|
||||
font-family: "Tilt Neon"
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 18%, 22%, 25%, 53%, 57%, 100% {
|
||||
text-shadow:
|
||||
0 0 4px #fff,
|
||||
0 0 11px #fff,
|
||||
0 0 19px #fff,
|
||||
0 0 40px #0fa,
|
||||
0 0 80px #0fa,
|
||||
0 0 90px #0fa,
|
||||
0 0 100px #0fa,
|
||||
0 0 150px #0fa;
|
||||
}
|
||||
20%, 24%, 55% {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-field {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
/* min-height: 62vh; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
border-style: double;
|
||||
border-width: thick;
|
||||
border-color: #32CD32;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.dashboard-row {
|
||||
flex-direction: row;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item {
|
||||
display: flex;
|
||||
flex: 1 1 90%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* width: 90%; */
|
||||
/* max-width: 364px; */
|
||||
padding: 5px 0px;
|
||||
/* padding: 0px 40px; */
|
||||
}
|
||||
|
||||
/* .dashboard-item:only-child {
|
||||
margin: 0 auto;
|
||||
} */
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.dashboard-item {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1140px) {
|
||||
.dashboard-item {
|
||||
flex-basis: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* @media (min-width: 1000px) {
|
||||
.dashboard-item:only-child {
|
||||
padding: 60px 0px 10px;
|
||||
}
|
||||
} */
|
||||
|
||||
.single-item-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 60px 0px 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #32CD32;
|
||||
color: black;
|
||||
width: 100%;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
text-decoration: none;
|
||||
border-style: solid;
|
||||
border-width: medium;
|
||||
border-color: black;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: black;
|
||||
color: #967bb6;
|
||||
border-color: #967bb6;
|
||||
}
|
||||
|
||||
.button-disabled {
|
||||
background-color: dimgrey;
|
||||
color: black;
|
||||
border-color: black;
|
||||
width: 100%;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
text-decoration: none;
|
||||
border-style: solid;
|
||||
border-width: medium;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
position: absolute; /* Positions the button relative to the viewport */
|
||||
top: 40px;
|
||||
right: 0;
|
||||
z-index: 1000; /* Ensures the button appears above other content */
|
||||
/* Add other styling for your button (e.g., background-color, padding, font-size) */
|
||||
color: #967bb6;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.switch-button {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#logoOff{
|
||||
display:none
|
||||
}
|
||||
#logoOn{
|
||||
display:block
|
||||
}
|
||||
|
||||
img {
|
||||
height: 8vh; /* Set your desired fixed height */
|
||||
width: auto; /* Allow the width to adjust automatically */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
height: 120px; /* Set your desired fixed height */
|
||||
width: 350px; /* Allow the width to adjust automatically */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-image: url("./images/greenfirewithpurple.svg");
|
||||
height: 120px; /* Set your desired fixed height */
|
||||
width: auto; /* Allow the width to adjust automatically */
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
background-image: url("./images/fullyblackfire.svg");
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
height: 100%; /* Image fills 100% of the container's height */
|
||||
width: 100%; /* Allow width to adjust proportionally */
|
||||
object-fit: contain; /* Crop and zoom to fill the container while maintaining aspect ratio */
|
||||
/* display: block; Remove extra space below the image */
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.image-container img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: absolute; /* Position relative to the parent */
|
||||
top: 0; /* Align to the top edge */
|
||||
right: 0; /* Align to the right edge */
|
||||
/* Other styles for your toggle switch */
|
||||
}
|
||||
|
||||
.green-flame {
|
||||
background-color: #000000; /* Light background color */
|
||||
}
|
||||
|
||||
.black-flame{
|
||||
background-color: #32CD32; /* Dark background color */
|
||||
}
|
||||
Reference in New Issue
Block a user