added new css features

This commit is contained in:
2026-02-12 00:05:03 +00:00
parent bcd7cec6a2
commit 509cd9c332
6 changed files with 172 additions and 81 deletions

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 ###