87 lines
3.4 KiB
CSS
Executable File
87 lines
3.4 KiB
CSS
Executable File
: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)
|
|
*/
|
|
|