First Commit
This commit is contained in:
40
assets/css/animations.css
Executable file
40
assets/css/animations.css
Executable file
@@ -0,0 +1,40 @@
|
||||
@keyframes example {
|
||||
0% {background-color: red;}
|
||||
25% {background-color: yellow;}
|
||||
50% {background-color: blue;}
|
||||
100% {background-color: green;}
|
||||
}
|
||||
|
||||
/* ### EXAMPLE SETTING CODE ###
|
||||
animation-name: example;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: 2;
|
||||
animation-direction: alternate-reverse;
|
||||
animation-delay: -2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in-out;}
|
||||
|
||||
### SAME ABOVE ANIMATION IN ONE LINE CODE ###
|
||||
animation: example 5s linear 2s infinite alternate;
|
||||
*/
|
||||
|
||||
@keyframes bumping {
|
||||
0% {text-shadow: 0 0 0 yellow;}
|
||||
50% {text-shadow: 0 0 5px yellow;}
|
||||
100% {text-shadow: 0 0 0 yellow;}
|
||||
}
|
||||
|
||||
@keyframes bumping_red_bg {
|
||||
0% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
|
||||
30% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
|
||||
70% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
|
||||
90% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
|
||||
}
|
||||
|
||||
@keyframes bumping_green_bg {
|
||||
0% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
||||
30% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
|
||||
70% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
||||
90% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
|
||||
100% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
||||
}
|
||||
1005
assets/css/fonts.css
Executable file
1005
assets/css/fonts.css
Executable file
File diff suppressed because it is too large
Load Diff
80
assets/css/style.css
Executable file
80
assets/css/style.css
Executable file
@@ -0,0 +1,80 @@
|
||||
html { scroll-behavior: smooth; font-family: ubuntu; }
|
||||
*{ box-sizing: border-box; margin:0; padding:0;}
|
||||
|
||||
.main-container{
|
||||
padding:20px;
|
||||
background-color: rgb(186, 186, 186);
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert-container{
|
||||
margin-bottom:10px;
|
||||
border: 2px solid black;
|
||||
width:fit-content;
|
||||
padding:8px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #3380c8;
|
||||
}
|
||||
|
||||
.alert-container:first-of-type{ margin-top:15px;}
|
||||
.alert-container:last-of-type{ margin-bottom: 15px;}
|
||||
|
||||
.alert-info{
|
||||
display:grid;
|
||||
grid-template-columns: 200px 400px auto auto;
|
||||
}
|
||||
|
||||
.alert-info > div {
|
||||
margin: 5px auto 3px auto;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.alert-container div{
|
||||
text-align: left;
|
||||
min-width: 200px;
|
||||
|
||||
}
|
||||
|
||||
.alert-details{
|
||||
display:none;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
border-radius: 10px;
|
||||
margin:5px;
|
||||
background-color: rgba(255, 255, 255, 0.774);
|
||||
color:black;
|
||||
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
.alert-details > div{
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.details-show{
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.alert_red{
|
||||
background-color: #df1414;
|
||||
color:#ff9175;
|
||||
box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
|
||||
animation: bumping_red_bg 4s linear 2s infinite;
|
||||
}
|
||||
|
||||
.alert_green{
|
||||
background-color: #1f991b;
|
||||
color:#c3ffb4;
|
||||
box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;;
|
||||
animation: bumping_green_bg 4s linear 2s infinite;
|
||||
}
|
||||
86
assets/css/variables.css
Executable file
86
assets/css/variables.css
Executable file
@@ -0,0 +1,86 @@
|
||||
:root {
|
||||
/*### PrimaryColor ###*/
|
||||
--demo1:hsl(98, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
|
||||
--pri:98; /*Change only this from the color that you need! Don't Touch the code below!*/
|
||||
/*The color below is automaticaly created 20 levels of lightness*/
|
||||
--priCol20:hsl(var(--pri), 100%, 100%);
|
||||
--priCol19:hsl(var(--pri), 100%, 95%);
|
||||
--priCol18:hsl(var(--pri), 100%, 90%);
|
||||
--priCol17:hsl(var(--pri), 100%, 85%);
|
||||
--priCol16:hsl(var(--pri), 100%, 80%);
|
||||
--priCol15:hsl(var(--pri), 100%, 75%);
|
||||
--priCol14:hsl(var(--pri), 100%, 70%);
|
||||
--priCol13:hsl(var(--pri), 100%, 65%);
|
||||
--priCol12:hsl(var(--pri), 100%, 60%);
|
||||
--priCol11:hsl(var(--pri), 100%, 55%);
|
||||
--priCol10:hsl(var(--pri), 100%, 50%);
|
||||
--priCol9:hsl(var(--pri), 100%, 45%);
|
||||
--priCol8:hsl(var(--pri), 100%, 40%);
|
||||
--priCol7:hsl(var(--pri), 100%, 35%);
|
||||
--priCol6:hsl(var(--pri), 100%, 30%);
|
||||
--priCol5:hsl(var(--pri), 100%, 25%);
|
||||
--priCol4:hsl(var(--pri), 100%, 20%);
|
||||
--priCol3:hsl(var(--pri), 100%, 15%);
|
||||
--priCol2:hsl(var(--pri), 100%, 10%);
|
||||
--priCol1:hsl(var(--pri), 100%, 5%);
|
||||
|
||||
/*### SecondColor ###*/
|
||||
--demo2:hsl(207, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
|
||||
--sec:207; /*Change only this from the color that you need! Don't Touch the code below!*/
|
||||
/*The color below is automaticaly created 20 levels of lightness*/
|
||||
--secCol20:hsl(var(--sec), 100%, 100%);
|
||||
--secCol19:hsl(var(--sec), 100%, 95%);
|
||||
--secCol18:hsl(var(--sec), 100%, 90%);
|
||||
--secCol17:hsl(var(--sec), 100%, 85%);
|
||||
--secCol16:hsl(var(--sec), 100%, 80%);
|
||||
--secCol15:hsl(var(--sec), 100%, 75%);
|
||||
--secCol14:hsl(var(--sec), 100%, 70%);
|
||||
--secCol13:hsl(var(--sec), 100%, 65%);
|
||||
--secCol12:hsl(var(--sec), 100%, 60%);
|
||||
--secCol11:hsl(var(--sec), 100%, 55%);
|
||||
--secCol10:hsl(var(--sec), 100%, 50%);
|
||||
--secCol9:hsl(var(--sec), 100%, 45%);
|
||||
--secCol8:hsl(var(--sec), 100%, 40%);
|
||||
--secCol7:hsl(var(--sec), 100%, 35%);
|
||||
--secCol6:hsl(var(--sec), 100%, 30%);
|
||||
--secCol5:hsl(var(--sec), 100%, 25%);
|
||||
--secCol4:hsl(var(--sec), 100%, 20%);
|
||||
--secCol3:hsl(var(--sec), 100%, 15%);
|
||||
--secCol2:hsl(var(--sec), 100%, 10%);
|
||||
--secCol1:hsl(var(--sec), 100%, 5%);
|
||||
|
||||
/*### ThirdColor ###*/
|
||||
--demo3:hsl(280, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
|
||||
--thi:280; /*Change only this from the color that you need! Don't Touch the code below!*/
|
||||
/*The color below is automaticaly created 20 levels of lightness*/
|
||||
--thiCol20:hsl(var(--thi), 100%, 100%);
|
||||
--thiCol19:hsl(var(--thi), 100%, 95%);
|
||||
--thiCol18:hsl(var(--thi), 100%, 90%);
|
||||
--thiCol17:hsl(var(--thi), 100%, 85%);
|
||||
--thiCol16:hsl(var(--thi), 100%, 80%);
|
||||
--thiCol15:hsl(var(--thi), 100%, 75%);
|
||||
--thiCol14:hsl(var(--thi), 100%, 70%);
|
||||
--thiCol13:hsl(var(--thi), 100%, 65%);
|
||||
--thiCol12:hsl(var(--thi), 100%, 60%);
|
||||
--thiCol11:hsl(var(--thi), 100%, 55%);
|
||||
--thiCol10:hsl(var(--thi), 100%, 50%);
|
||||
--thiCol9:hsl(var(--thi), 100%, 45%);
|
||||
--thiCol8:hsl(var(--thi), 100%, 40%);
|
||||
--thiCol7:hsl(var(--thi), 100%, 35%);
|
||||
--thiCol6:hsl(var(--thi), 100%, 30%);
|
||||
--thiCol5:hsl(var(--thi), 100%, 25%);
|
||||
--thiCol4:hsl(var(--thi), 100%, 20%);
|
||||
--thiCol3:hsl(var(--thi), 100%, 15%);
|
||||
--thiCol2:hsl(var(--thi), 100%, 10%);
|
||||
--thiCol1:hsl(var(--thi), 100%, 5%);
|
||||
|
||||
/*######################################*/
|
||||
|
||||
/*##### Default Variable #####*/
|
||||
--padsidepage:0 25px; /*Padding side for page*/
|
||||
}
|
||||
|
||||
/* ### Use Example ###
|
||||
background-color:var(--main-bg-color)
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user