added new css features
This commit is contained in:
@@ -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 ###
|
||||
|
||||
Reference in New Issue
Block a user