sld-admin/sld-web-health-check
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added new css features

Browse Source
This commit is contained in:
Simone Cusano
2026-02-12 00:05:03 +00:00
parent bcd7cec6a2
commit 509cd9c332
6 changed files with 172 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/animations.css
View File

@@ -38,3 +38,13 @@
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;}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}

56
assets/css/style.css
View File

@@ -1,14 +1,38 @@
html { scroll-behavior: smooth; font-family: ubuntu; }
*{ box-sizing: border-box; margin:0; padding:0;}
body{overflow-y: hidden;}
header{
position:fixed;
display:flex;
justify-content: center;
align-items: center;
width:100vw;
padding:5px 10px;
background-color: var(--menu-color);
border-bottom: 2px solid var(--menu-border-col);
color:white;
}
.main-title{
-webkit-text-stroke: 1.2px var(--menu-border-col);
}
.main-container{
padding:20px;
background-color: rgb(186, 186, 186);
padding:50px 20px 20px 20px ;
background-color: #363636;
width:100vw;
height:100vh;
display:flex;
flex-direction: column;
align-items: center;
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;/* IE e Edge vecchio */
}
.main-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge Chromium */
}
.alert-container{
@@ -67,9 +91,12 @@ html { scroll-behavior: smooth; font-family: ubuntu; }
.alert_red{
background-color: #df1414;
color:#ff9175;
color:#ffe9e3;
box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;;
animation: bumping_red_bg 4s linear 2s infinite;
/* animation: bumping_red_bg 4s linear 2s infinite; */
background: linear-gradient(-45deg,#ff0000, #bb0000, #ff0000);
background-size: 200% 200%;
animation: gradient 3s linear infinite;
}
.alert_green{
@@ -77,4 +104,25 @@ html { scroll-behavior: smooth; font-family: ubuntu; }
color:#c3ffb4;
box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;;
animation: bumping_green_bg 4s linear 2s infinite;
}
footer{
position:fixed;
display:flex;
justify-content: space-around;
align-items: center;
bottom:0;
background-color: black !important;
width:100vw;
padding:14px;
border-top: 2px solid var(--menu-border-col);
color:white;
}
footer > div{
background-color: #cccccc;
color:black;
padding:5px 10px;
border-radius: 20px;
border: 2px solid var(--menu-border-col);
}

78
assets/css/variables.css
View File

@@ -1,83 +1,9 @@
: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*/
--menu-color: #000000;
--menu-border-col: #61f061;
}
/* ### Use Example ###