/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: May 03 2025 | 18:16:37 */ /* ///// Alpha Colors //////////// ////////////////////////////// *//*** Color Profiles ***/ /* Override: alpha.reset.css */ :root { /* note: - used for rgb and rgba (separated alpha profiles) */ /*/// Base ///*/ /*/// Hover / Focus ///*/ /*/// Active ///*/ /*** Defaults ***/ --a-primary: 86,144,255; --a-primary-hover: 128,172,255; --a-primary-active: 92,149,255; --a-secondary: 72,105,102; --a-secondary-hover: 136,156,155; --a-secondary-active: 178,190,191; --a-red: 230, 30, 53; --a-red-hover: 231, 64, 51; --a-red-active: 230, 92,106; --a-green: 46,139, 87; --a-green-hover: 60,179,113; --a-green-active: 83,198,135; --a-blue: 37, 99,235; --a-blue-hover: 59,130,246; --a-blue-active: 102,161,255; --a-yellow: 255,180, 0; --a-yellow-hover: 255,215, 0; --a-yellow-active: 255,232,102; --a-purple: 121,37,199; --a-purple-hover: 155, 31,232; --a-purple-active: 188,128,247; --a-orange: 242, 68, 5; --a-orange-hover: 242,104, 0; --a-orange-active: 255,153, 51; --a-teal: 30, 89, 89; --a-teal-hover: 59,140,110; --a-teal-active: 45,134,134; --a-indigo: 72,61,139; --a-indigo-hover: 79, 70,229; --a-indigo-active: 99,102,241; --a-aqua: 0,206,209; --a-aqua-hover: 64,224,208; --a-aqua-active: 0,255,255; --a-brown: 84, 58, 27; --a-brown-hover: 108, 75, 35; --a-brown-active: 173,101, 0; /*** Grayscale ***/ --a-white: 255,255,255; --a-white-hover: 243,245,247; --a-white-active: 237,240,243; --a-gray1: 237,240,243; --a-gray1-hover: 227,228,230; --a-gray1-active: 255,255,255; --a-gray2: 218,223,227; --a-gray2-hover: 241,242,243; --a-gray2-active: 255,255,255; --a-gray3: 170,174,178; --a-gray3-hover: 228,228,228; --a-gray3-active: 241,242,243; --a-gray4: 108,117,125; --a-gray4-hover: 129,141,150; --a-gray4-active: 151,164,176; --a-gray5: 52, 58, 64; --a-gray5-hover: 83, 92,102; --a-gray5-active: 103,115,128; --a-black: 22, 22, 29; --a-black-hover: 39, 39, 51; --a-black-active: 58, 58, 76; /*** User-Defined Palette ***/ /*** Font Color ***/ --a-palette1: 189, 42, 46; --a-palette1-hover: 230, 30, 53; --a-palette1-active: 255, 56, 63; --a-palette1-color: var(--a-font5-color); --a-palette2: 86,134,159; --a-palette2-hover: 107,148,168; --a-palette2-active: 124,160,179; --a-palette2-color: var(--a-font5-color); --a-palette3: 67,114,177; --a-palette3-hover: 70,138,227; --a-palette3-active: 102,156,255; --a-palette3-color: var(--a-font5-color); --a-palette4: 254,223, 0; --a-palette4-hover: 255,231, 88; --a-palette4-active: 255,255,129; --a-palette4-color: var(--a-font1-color); --a-palette5: 104, 92,121; --a-palette5-hover: 169,106,127; --a-palette5-active: 218,114,126; --a-palette5-color: var(--a-font5-color); /*** Font Colors - Black to White Contrast ***/ --a-font1-color: 15, 23, 42; /* Base Color */ --a-font2-color: 100,116,139; /* Caption Color */ --a-font3-color: 148,163,184; /* Middle Color */ --a-font4-color: 227,223,218; /* Reversed Caption */ --a-font5-color: 255,255,255; /* Reversed Base */ /*** Styled Backgrounds ***/ /* convert gradients to 10 background --a-theme# */ --a-gradient1: linear-gradient(135deg,#0ea5e980 10%,transparent 0,transparent 50%,#0ea5e980 0,#0ea5e980 60%,transparent 0,transparent); --a-gradient1-size: 7.07px 7.07px; --a-gradient1-color: var(--a-font1-color); --a-gradient2: linear-gradient(135deg, #00615F 0%, 23%, #008F8D 45%, #00C9C6 80%, #C6FFEC 100%); --a-gradient2-size: 100% 100%; --a-gradient2-color: var(--a-font1-color); --a-gradient3: linear-gradient(315deg, #FFFFFF 0%, 19%, #A1B8C6 38%, 69%, #9AC7C4 100%); --a-gradient3-size: 100% 100%; --a-gradient3-color: var(--a-font1-color); --a-gradient4: linear-gradient(to right, #000000 0%, 8%, #002428 17%, 24%, #206187 31%, 35%, #4CA7BC 40%, 43%, #5EB4CB 45%, 50%, #74B8CF 54%, 58%, #648EB6 63%, 68%, #3C467B 73%, 79%, #040015 84%, 92%, #000000 100%); --a-gradient4-size: 100% 100%; --a-gradient4-color: var(--a-font5-color); --a-gradient5: linear-gradient(135deg,#685C79 0%,#A96A7F 50%,#DA727E 100%); --a-gradient5-size: 100% 100%; --a-gradient5-color: var(--a-font5-color); --a-wallpaper1:; --a-wallpaper1-size:; --a-wallpaper1-color:; --a-wallpaper1-pos:; --a-wallpaper2:; --a-wallpaper2-size:; --a-wallpaper2-color:; --a-wallpaper2-pos:; --a-wallpaper3:; --a-wallpaper3-size:; --a-wallpaper3-color:; --a-wallpaper3-pos:; /*/// Saved Gradients ///*/ /* *** olive *** linear-gradient(0deg, #486966 0%, 21.576763689517975%, #4A6570 43.15352737903595%, 71.57676368951797%, #B6BD91 100%); *** mint *** linear-gradient(to right, #008F8D 0%, 13.449691991786446%, #C6FFEC 48.76796714579055%, 87.06365503080082%, #008F8D 100%); *** navy *** linear-gradient(90deg,#035777 20%,#076484 40%,#0E7998 60%,#1387A6 80%,#1793B2 100%); *** lavender *** linear-gradient(90deg,#E7CEF2 20%,#B8A0D9 40%,#7F75BF 60%,#5654A8 80%,#C1A5D7 100%); *** platinum *** linear-gradient(to right, #B5DEF0 0%, 35.624998807907104%, #403847 71.24999761581421%, 85.6249988079071%, #2D2E30 100%); linear-gradient(to right, #000000 0%, 8.799999952316284%, #002428 17.59999990463257%, 24.400000274181366%, #206187 31.200000643730164%, 35.999999940395355%, #4CA7BC 40.79999923706055%, 43.1999996304512%, #5EB4CB 45.60000002384186%, 50.00000149011612%, #74B8CF 54.40000295639038%, 58.80000293254852%, #648EB6 63.200002908706665%, 68.4000015258789%, #3C467B 73.60000014305115%, 79.19999957084656%, #040015 84.79999899864197%, 92.39999949932098%, #000000 100%); *** red *** linear-gradient(135deg,#BD2A2E 0%,#DC3545 50%,#F24405 100%); *** purple x indigo x blue *** linear-gradient(to right, #982362 0%, 26.815643906593323%, #362B7A 53.631287813186646%, 76.81564390659332%, #1BA0E4 100%); *** sephia x platinum *** linear-gradient(to right, #CAB1B5 0%, 5.967741832137108%, #D5BCC5 11.935483664274216%, 40.80645106732845%, #92ADBE 69.67741847038269%, 81.61290287971497%, #98B2C1 93.54838728904724%, 96.77419364452362%, #AAB3BE 100%); *** cotton candy *** linear-gradient(to right, #EF91B9 0%, 12.74193525314331%, #ECA3D1 25.48387050628662%, 30.80645203590393%, #F5C5DC 36.12903356552124%, 54.35484051704407%, #C6F2F4 72.5806474685669%, 79.19355034828186%, #93ECEB 85.80645322799683%, 92.90322661399841%, #BABFF1 100%); linear-gradient(to right, #FFFFFF 0%, 3.159557661927429%, #FFBEE9 18.95734597156398%, 32.70142180094787%, #B58CD2 46.44549763033176%, 59.95260663507109%, #65BBF8 73.45971563981043%, 86.72985781990522%, #9BE3D8 100%); */ /*** Opacity ***/ --a-opacity-low: 0.09; --a-opacity-mid: 0.50; --a-opacity-high: 0.75; /* ########## dark theme has same variable but from different selector added to body tag */ } /*///// Input /////*/ /*** Defaults ***/ input,textarea,select { --a-input-bg: var(--a-bg , var(--a-white )); --a-input-bg-hover: var(--a-bg-hover , var(--a-white-hover)); --a-input-bg-focus: var(--a-bg-active , var(--a-white )); --a-input-font: var(--a-font-color , var(--a-font1-color)); --a-bs-a: 0.45; background-color: rgba(var(--a-input-bg ), var(--a-bg-a, 0.2)); color: rgba(var(--a-input-font ), 1.0); } input:hover,textarea:hover,select:hover { background-color: rgba(var(--a-input-bg-hover), var(--a-bg-a, 0.5)); } input:focus,textarea:focus,select:focus { background-color: rgba(var(--a-input-bg-focus), var(--a-bg-a, 1.0)); } input::placeholder,textarea::placeholder { color: rgba(var(--a-input-font ), 0.4); } /*** Styled - Light ***/ .light input,.light textarea,.light select { --a-input-bg: var(--a-white-active); --a-input-bg-hover: var(--a-bg-active , var(--a-white-active)); --a-input-bg-focus: var(--a-white ); } .light input:focus, .light textarea:focus,.light select:focus { --a-input-font: var(--a-font1-color ); } /*** Styled - Dark ***/ .dark input,.dark textarea,.dark select { --a-input-bg: var(--a-black ); --a-input-bg-hover: var(--a-bg-active , var(--a-white-active)); --a-input-bg-focus: var(--a-black-hover ); } .dark input:focus, .dark textarea:focus,.dark select:focus { --a-input-font: var(--a-font5-color ); } /*/// Button Default ///*/ button, [type=button],[type=reset],[type=submit] { --a-button-bg: var(--a-bg , var(--a-white )); --a-button-bg-hover: var(--a-bg-hover , var(--a-white-hover )); --a-button-bg-active: var(--a-bg-active , var(--a-white-active)); --a-button-bg-outline: var(--a-bg-outline, var(--a-white-active)); --a-bs-a: 0.65; background-color: rgba(var(--a-button-bg) , var(--a-bg-a,0)); position:relative; min-height:32px; cursor:pointer; line-height: 1; padding: 0 var(--a-button-padding); border: var(--a-button-border); box-sizing:border-box; border-radius: var(--a-button-radius); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: button; } button:not(:where([bg],:hover,:active,:focus)) { color: rgba(var(--a-font-color),1); } button:focus, input[type="button"]:focus, input[type="reset" ]:focus, input[type="submit"]:focus { box-shadow: 0 0 1px 3px rgba(var(--a-button-bg-outline), var(--a-bs-a,1)); text-shadow: 0 -1px 5px #fff !important; outline:none; } button:not([disabled]):hover, input[type="button"]:not([disabled]):hover, input[type="reset" ]:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { color: rgba(var(--a-font-hover, var(--a-font-color)),1); background-color: rgba(var(--a-button-bg-hover ), var(--a-bg-a,1)); } button:not([disabled]):active, input[type="button"]:not([disabled]):active, input[type="reset" ]:not([disabled]):active, input[type="submit"]:not([disabled]):active { color: rgba(var(--a-font-active, var(--a-font-color)),1); background-color: rgba(var(--a-button-bg-active), var(--a-bg-a,1)); text-shadow:0 -2px 1px var(--a-button-shadow-color); padding-top:2px !important; } button[disabled] { opacity:0.4; } /*** Slim ***/ button[slim] { font-size:.675rem; line-height:1.25rem; min-height:25px; min-width:60px; padding:0px; border-radius:999px; } button[slim]:active { padding-top:1px !important; } /*** Outline ***/ button[outline] { border-color: rgba(var(--a-button-bg ),1); } button[outline]:not(:where([bg],:hover,:active,:focus)) { color: rgba(var(--a-font-color),1); } button[outline][bg]:not(:where( :hover,:active,:focus)) { color: rgba(var(--a-button-bg ),1); background-color:transparent; border:1px solid rgba(var(--a-bg),1); } button[outline]:where(:hover,:active,:focus) { --a-bg-a:0.3; } /*** Styled ***/ /* default=red. use background to add color */ button.close { min-width:26px; min-height:26px; align-items:center; margin:0; padding:0; border:0; border-radius:999px !important; background-color: rgba(var(--a-button-bg),1); } button.close > * { font-weight:bold; font-size:10px !important; top:0px; color: rgba(var(--a-font-color),1); } /*/// Highlights ///*/ small { font-weight:300; } /*///// Color Management /////*/ /*** Defaults ***/ [bg] { background-color: rgba(var(--a-bg ), var(--a-bg-a,1)); color: rgba(var(--a-font-color, var(--a-font1-color)), var(--a-fc-a,1)); } [bg=none] { background-color: rgba(var(--a-bg ), var(--a-bg-a,0)) !important; } [hover] tbody > tr:not(:hover):not([selected]), [hover] > tr:not(:hover):not([selected]), [hover] .block:not(:hover):not([selected]):not([nohover]) { background-color: none; color: rgba(var(--a-font-color, var(--a-font1-color)), var(--a-fc-a,1)); } [hover] tbody > tr:hover:not([nohover]):not(.splash), [hover] > tr:hover:not([nohover]):not(.splash), [hover] .block:hover:not([nohover]) { background-color: rgba(var(--a-bg-hover ), var(--a-bg-a,1)); color: rgba(var(--a-font-hover, var(--a-font1-color)), var(--a-fc-a,1)); } [select] *:where(tbody > tr[selected], .block[selected]), [select] > tr[selected] { background-color: rgba(var(--a-bg-active ), var(--a-bg-a,1)); color: rgba(var(--a-font-active,var(--a-font1-color)), var(--a-fc-a,1)); } @media print { [hover] tbody > tr:not(:hover):not([selected]) > td, [hover] .block:not(:hover):not([selected]), [hover] tbody > tr:hover:not(.splash) > td, [hover] > tr:hover:not(.splash) > td, [hover] .block:hover { background-color: transparent !important; color: #111; } } /*** Background ***/ button.close:not([bg]), [bg=red] { --a-bg: var(--a-red ); --a-bg-hover: var(--a-red-hover ); --a-bg-active: var(--a-red-active ); --a-bg-outline: var(--a-red-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=green] { --a-bg: var(--a-green ); --a-bg-hover: var(--a-green-hover ); --a-bg-active: var(--a-green-active ); --a-bg-outline: var(--a-green-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=blue] { --a-bg: var(--a-blue ); --a-bg-hover: var(--a-blue-hover ); --a-bg-active: var(--a-blue-active ); --a-bg-outline: var(--a-blue-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=yellow] { --a-bg: var(--a-yellow ); --a-bg-hover: var(--a-yellow-hover ); --a-bg-active: var(--a-yellow-active ); --a-bg-outline: var(--a-yellow-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=aqua] { --a-bg: var(--a-aqua ); --a-bg-hover: var(--a-aqua-hover ); --a-bg-active: var(--a-aqua-active ); --a-bg-outline: var(--a-aqua-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=orange] { --a-bg: var(--a-orange ); --a-bg-hover: var(--a-orange-hover ); --a-bg-active: var(--a-orange-active ); --a-bg-outline: var(--a-orange-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=teal] { --a-bg: var(--a-teal ); --a-bg-hover: var(--a-teal-hover ); --a-bg-active: var(--a-teal-active ); --a-bg-outline: var(--a-teal-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=indigo] { --a-bg: var(--a-indigo ); --a-bg-hover: var(--a-indigo-hover ); --a-bg-active: var(--a-indigo-active ); --a-bg-outline: var(--a-indigo-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=brown] { --a-bg: var(--a-brown ); --a-bg-hover: var(--a-brown-hover ); --a-bg-active: var(--a-brown-active ); --a-bg-outline: var(--a-brown-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=purple] { --a-bg: var(--a-purple ); --a-bg-hover: var(--a-purple-hover ); --a-bg-active: var(--a-purple-active ); --a-bg-outline: var(--a-purple-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=white] { --a-bg: var(--a-white ); --a-bg-hover: var(--a-white-hover ); --a-bg-active: var(--a-white-active ); --a-bg-outline: var(--a-white-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=gray] { --a-bg: var(--a-gray1 ); --a-bg-hover: var(--a-gray1-hover ); --a-bg-active: var(--a-gray1-active ); --a-bg-outline: var(--a-gray1-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=gray2] { --a-bg: var(--a-gray2 ); --a-bg-hover: var(--a-gray2-hover ); --a-bg-active: var(--a-gray2-active ); --a-bg-outline: var(--a-gray2-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=gray3] { --a-bg: var(--a-gray3 ); --a-bg-hover: var(--a-gray3-hover ); --a-bg-active: var(--a-gray3-active ); --a-bg-outline: var(--a-gray3-active ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=gray4] { --a-bg: var(--a-gray4 ); --a-bg-hover: var(--a-gray4-hover ); --a-bg-active: var(--a-gray4-active ); --a-bg-outline: var(--a-gray4-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=gray5] { --a-bg: var(--a-gray5 ); --a-bg-hover: var(--a-gray5-hover ); --a-bg-active: var(--a-gray5-active ); --a-bg-outline: var(--a-gray5-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=black] { --a-bg: var(--a-black ); --a-bg-hover: var(--a-black-hover ); --a-bg-active: var(--a-black-active ); --a-bg-outline: var(--a-black-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=none] { --a-bg: none ; --a-bg-hover: var(--a-gray1 ); --a-bg-active: var(--a-white ); --a-bg-outline: var(--a-gray1 ); --a-font-color: var(--a-font1-color); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [bg=primary] { --a-bg: var(--a-primary ); --a-bg-hover: var(--a-primary-hover ); --a-bg-active: var(--a-primary-active ); --a-bg-outline: var(--a-primary-active ); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=secondary] { --a-bg: var(--a-secondary); --a-bg-hover: var(--a-secondary-hover); --a-bg-active: var(--a-secondary-active); --a-bg-outline: var(--a-secondary-active); --a-font-color: var(--a-font5-color); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [bg=palette1] { --a-bg: var(--a-palette1 ); --a-bg-hover: var(--a-palette1-hover ); --a-bg-active: var(--a-palette1-active ); --a-bg-outline: var(--a-palette1-active ); --a-font-color: var(--a-palette1-color); --a-font-hover: var(--a-palette1-color); --a-font-active: var(--a-palette1-color); } [bg=palette2] { --a-bg: var(--a-palette2 ); --a-bg-hover: var(--a-palette2-hover ); --a-bg-active: var(--a-palette2-active ); --a-bg-outline: var(--a-palette2-active ); --a-font-color: var(--a-palette2-color); --a-font-hover: var(--a-palette2-color); --a-font-active: var(--a-palette2-color); } [bg=palette3] { --a-bg: var(--a-palette3 ); --a-bg-hover: var(--a-palette3-hover ); --a-bg-active: var(--a-palette3-active ); --a-bg-outline: var(--a-palette3-active ); --a-font-color: var(--a-palette3-color); --a-font-hover: var(--a-palette3-color); --a-font-active: var(--a-palette3-color); } [bg=palette4] { --a-bg: var(--a-palette4 ); --a-bg-hover: var(--a-palette4-hover ); --a-bg-active: var(--a-palette4-active ); --a-bg-outline: var(--a-palette4-active ); --a-font-color: var(--a-palette4-color); --a-font-hover: var(--a-palette4-color); --a-font-active: var(--a-palette4-color); } [bg=palette5] { --a-bg: var(--a-palette5 ); --a-bg-hover: var(--a-palette5-hover ); --a-bg-active: var(--a-palette5-active ); --a-bg-outline: var(--a-palette5-active ); --a-font-color: var(--a-palette5-color); --a-font-hover: var(--a-palette5-color); --a-font-active: var(--a-palette5-color); } [bg=gradient1] { background-image: var(--a-gradient1 ); background-size: var(--a-gradient1-size); --a-font-color: var(--a-gradient1-color) } [bg=gradient2] { background-image: var(--a-gradient2 ); background-size: var(--a-gradient2-size); --a-font-color: var(--a-gradient2-color) } [bg=gradient3] { background-image: var(--a-gradient3 ); background-size: var(--a-gradient3-size); --a-font-color: var(--a-gradient3-color) } [bg=gradient4] { background-image: var(--a-gradient4 ); background-size: var(--a-gradient4-size); --a-font-color: var(--a-gradient4-color) } [bg=gradient5] { background-image: var(--a-gradient5 ); background-size: var(--a-gradient5-size); --a-font-color: var(--a-gradient5-color) } [bg=wallpaper1] { background-image: var(--a-wallpaper1); background-size: var(--a-gradient1-size); --a-font-color: var(--a-gradient1-color) } [bg=wallpaper2] { background-image: var(--a-wallpaper2); background-size: var(--a-gradient2-size); --a-font-color: var(--a-gradient2-color) } [bg=wallpaper3] { background-image: var(--a-wallpaper3); background-size: var(--a-gradient3-size); --a-font-color: var(--a-gradient3-color) } /*///// Color Overrides /////*/ /* Override settings by hierarchy: bg < hover < select */ /*** Hover ***/ [hover=red] > * { --a-bg-hover: var(--a-red-hover ); --a-bg-active: var(--a-red-active ); --a-bg-outline: var(--a-red-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=green] > * { --a-bg-hover: var(--a-green-hover ); --a-bg-active: var(--a-green-active ); --a-bg-outline: var(--a-green-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=blue] > * { --a-bg-hover: var(--a-blue-hover ); --a-bg-active: var(--a-blue-active ); --a-bg-outline: var(--a-blue-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=yellow] > * { --a-bg-hover: var(--a-yellow-hover ); --a-bg-active: var(--a-yellow-active ); --a-bg-outline: var(--a-yellow-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=aqua] > * { --a-bg-hover: var(--a-aqua-hover ); --a-bg-active: var(--a-aqua-active ); --a-bg-outline: var(--a-aqua-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=orange] > * { --a-bg-hover: var(--a-orange-hover ); --a-bg-active: var(--a-orange-active ); --a-bg-outline: var(--a-orange-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=teal] > * { --a-bg-hover: var(--a-teal-hover ); --a-bg-active: var(--a-teal-active ); --a-bg-outline: var(--a-teal-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=indigo] > * { --a-bg-hover: var(--a-indigo-hover ); --a-bg-active: var(--a-indigo-active ); --a-bg-outline: var(--a-indigo-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=brown] > * { --a-bg-hover: var(--a-brown-hover ); --a-bg-active: var(--a-brown-active ); --a-bg-outline: var(--a-brown-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=purple] > * { --a-bg-hover: var(--a-purple-hover ); --a-bg-active: var(--a-purple-active ); --a-bg-outline: var(--a-purple-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=white] > * { --a-bg-hover: var(--a-white-hover ); --a-bg-active: var(--a-white-active ); --a-bg-outline: var(--a-white-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=gray] > * { --a-bg-hover: var(--a-gray1-hover ); --a-bg-active: var(--a-gray1-active ); --a-bg-outline: var(--a-gray1-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=gray2] > * { --a-bg-hover: var(--a-gray2-hover ); --a-bg-active: var(--a-gray2-active ); --a-bg-outline: var(--a-gray2-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=gray3] > * { --a-bg-hover: var(--a-gray3-hover ); --a-bg-active: var(--a-gray3-active ); --a-bg-outline: var(--a-gray3-active ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=gray4] > * { --a-bg-hover: var(--a-gray4-hover ); --a-bg-active: var(--a-gray4-active ); --a-bg-outline: var(--a-gray4-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=gray5] > * { --a-bg-hover: var(--a-gray5-hover ); --a-bg-active: var(--a-gray5-active ); --a-bg-outline: var(--a-gray5-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=black] > * { --a-bg-hover: var(--a-black-hover ); --a-bg-active: var(--a-black-active ); --a-bg-outline: var(--a-black-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=none] > * { --a-bg-hover: var(--a-gray1 ); --a-bg-active: var(--a-gray1 ); --a-bg-outline: var(--a-gray1 ); --a-font-hover: var(--a-font1-color); --a-font-active: var(--a-font1-color); } [hover=primary] > * { --a-bg-hover: var(--a-primary-hover ); --a-bg-active: var(--a-primary-active ); --a-bg-outline: var(--a-primary-active ); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=secondary] > * { --a-bg-hover: var(--a-secondary-hover); --a-bg-active: var(--a-secondary-active); --a-bg-outline: var(--a-secondary-active); --a-font-hover: var(--a-font5-color); --a-font-active: var(--a-font5-color); } [hover=palette1] > * { --a-bg-hover: var(--a-palette1-hover ); --a-bg-active: var(--a-palette1-active ); --a-bg-outline: var(--a-palette1-active ); --a-font-hover: var(--a-palette1-color); --a-font-active: var(--a-palette1-color); } [hover=palette2] > * { --a-bg-hover: var(--a-palette2-hover ); --a-bg-active: var(--a-palette2-active ); --a-bg-outline: var(--a-palette2-active ); --a-font-hover: var(--a-palette2-color); --a-font-active: var(--a-palette2-color); } [hover=palette3] > * { --a-bg-hover: var(--a-palette3-hover ); --a-bg-active: var(--a-palette3-active ); --a-bg-outline: var(--a-palette3-active ); --a-font-hover: var(--a-palette3-color); --a-font-active: var(--a-palette3-color); } [hover=palette4] > * { --a-bg-hover: var(--a-palette4-hover ); --a-bg-active: var(--a-palette4-active ); --a-bg-outline: var(--a-palette4-active ); --a-font-hover: var(--a-palette4-color); --a-font-active: var(--a-palette4-color); } [hover=palette5] > * { --a-bg-hover: var(--a-palette5-hover ); --a-bg-active: var(--a-palette5-active ); --a-bg-outline: var(--a-palette5-active ); --a-font-hover: var(--a-palette5-color); --a-font-active: var(--a-palette5-color); } /*** Selected ***/ [select=red] > * { --a-bg-active: var(--a-red ); --a-bg-outline: var(--a-red-active ); --a-font-active: var(--a-font5-color); } [select=green] > * { --a-bg-active: var(--a-green ); --a-bg-outline: var(--a-green-active ); --a-font-active: var(--a-font5-color); } [select=blue] > * { --a-bg-active: var(--a-blue ); --a-bg-outline: var(--a-blue-active ); --a-font-active: var(--a-font5-color); } [select=yellow] > * { --a-bg-active: var(--a-yellow ); --a-bg-outline: var(--a-yellow-active ); --a-font-active: var(--a-font1-color); } [select=aqua] > * { --a-bg-active: var(--a-aqua ); --a-bg-outline: var(--a-aqua-active ); --a-font-active: var(--a-font1-color); } [select=orange] > * { --a-bg-active: var(--a-orange ); --a-bg-outline: var(--a-orange-active ); --a-font-active: var(--a-font5-color); } [select=teal] > * { --a-bg-active: var(--a-teal ); --a-bg-outline: var(--a-teal-active ); --a-font-active: var(--a-font5-color); } [select=indigo] > * { --a-bg-active: var(--a-indigo ); --a-bg-outline: var(--a-indigo-active ); --a-font-active: var(--a-font5-color); } [select=brown] > * { --a-bg-active: var(--a-brown ); --a-bg-outline: var(--a-brown-active ); --a-font-active: var(--a-font5-color); } [select=purple] > * { --a-bg-active: var(--a-purple ); --a-bg-outline: var(--a-purple-active ); --a-font-active: var(--a-font5-color); } [select=white] > * { --a-bg-active: var(--a-white ); --a-bg-outline: var(--a-white-active ); --a-font-active: var(--a-font1-color); } [select=gray] > * { --a-bg-active: var(--a-gray1 ); --a-bg-outline: var(--a-gray1-active ); --a-font-active: var(--a-font1-color); } [select=gray2] > * { --a-bg-active: var(--a-gray2 ); --a-bg-outline: var(--a-gray2-active ); --a-font-active: var(--a-font1-color); } [select=gray3] > * { --a-bg-active: var(--a-gray3 ); --a-bg-outline: var(--a-gray3-active ); --a-font-active: var(--a-font1-color); } [select=gray4] > * { --a-bg-active: var(--a-gray4 ); --a-bg-outline: var(--a-gray4-active ); --a-font-active: var(--a-font5-color); } [select=gray5] > * { --a-bg-active: var(--a-gray5 ); --a-bg-outline: var(--a-gray5-active ); --a-font-active: var(--a-font5-color); } [select=black] > * { --a-bg-active: var(--a-black ); --a-bg-outline: var(--a-black-active ); --a-font-active: var(--a-font5-color); } [select=none] > * { --a-bg-active: var(--a-white ); --a-bg-outline: var(--a-gray1 ); --a-font-active: var(--a-font1-color); } [select=primary] > * { --a-bg-active: var(--a-primary ); --a-bg-outline: var(--a-primary-active ); --a-font-active: var(--a-font5-color); } [select=secondary] > * { --a-bg-active: var(--a-secondary ); --a-bg-outline: var(--a-secondary-active); --a-font-active: var(--a-font5-color); } [select=palette1] > * { --a-bg-active: var(--a-palette1 ); --a-bg-outline: var(--a-palette1-active ); --a-font-active: var(--a-palette1-color); } [select=palette2] > * { --a-bg-active: var(--a-palette2 ); --a-bg-outline: var(--a-palette2-active ); --a-font-active: var(--a-palette2-color); } [select=palette3] > * { --a-bg-active: var(--a-palette3 ); --a-bg-outline: var(--a-palette3-active ); --a-font-active: var(--a-palette3-color); } [select=palette4] > * { --a-bg-active: var(--a-palette4 ); --a-bg-outline: var(--a-palette4-active ); --a-font-active: var(--a-palette4-color); } [select=palette5] > * { --a-bg-active: var(--a-palette5 ); --a-bg-outline: var(--a-palette5-active ); --a-font-active: var(--a-palette5-color); } /*** Border ***/ /* use-case dependent to classes that uses --a-bg-outline variable */ [ln=red] { --a-bg-outline: var(--a-red ); } [ln=green] { --a-bg-outline: var(--a-green ); } [ln=blue] { --a-bg-outline: var(--a-blue ); } [ln=yellow] { --a-bg-outline: var(--a-yellow ); } [ln=aqua] { --a-bg-outline: var(--a-aqua ); } [ln=orange] { --a-bg-outline: var(--a-orange ); } [ln=teal] { --a-bg-outline: var(--a-teal ); } [ln=indigo] { --a-bg-outline: var(--a-indigo ); } [ln=brown] { --a-bg-outline: var(--a-brown ); } [ln=purple] { --a-bg-outline: var(--a-purple ); } [ln=white] { --a-bg-outline: var(--a-white ); } [ln=gray] { --a-bg-outline: var(--a-gray1 ); } [ln=gray2] { --a-bg-outline: var(--a-gray2 ); } [ln=gray3] { --a-bg-outline: var(--a-gray3 ); } [ln=gray4] { --a-bg-outline: var(--a-gray4 ); } [ln=gray5] { --a-bg-outline: var(--a-gray5 ); } [ln=black] { --a-bg-outline: var(--a-black ); } [ln=none] { --a-bg-outline: var(--a-white ); } [ln=primary] { --a-bg-outline: var(--a-primary ); } [ln=secondary] { --a-bg-outline: var(--a-secondary ); } [ln=palette1] { --a-bg-outline: var(--a-palette1 ); } [ln=palette2] { --a-bg-outline: var(--a-palette2 ); } [ln=palette3] { --a-bg-outline: var(--a-palette3 ); } [ln=palette4] { --a-bg-outline: var(--a-palette4 ); } [ln=palette5] { --a-bg-outline: var(--a-palette5 ); } /*** Background Alpha ***/ [bga="10"] { --a-bg-a: 0.10 } [bga= "5"] { --a-bg-a: 0.05 } [bga="0"] { --a-bg-a: 0.00 } [bga="20"] { --a-bg-a: 0.20 } [bga="15"] { --a-bg-a: 0.15 } [bga="1"] { --a-bg-a: 0.01 } [bga="30"] { --a-bg-a: 0.30 } [bga="25"] { --a-bg-a: 0.25 } [bga="2"] { --a-bg-a: 0.02 } [bga="40"] { --a-bg-a: 0.40 } [bga="35"] { --a-bg-a: 0.35 } [bga="3"] { --a-bg-a: 0.03 } [bga="50"] { --a-bg-a: 0.50 } [bga="45"] { --a-bg-a: 0.45 } [bga="4"] { --a-bg-a: 0.04 } [bga="60"] { --a-bg-a: 0.60 } [bga="55"] { --a-bg-a: 0.55 } [bga="70"] { --a-bg-a: 0.70 } [bga="65"] { --a-bg-a: 0.65 } [bga="6"] { --a-bg-a: 0.06 } [bga="80"] { --a-bg-a: 0.80 } [bga="75"] { --a-bg-a: 0.75 } [bga="7"] { --a-bg-a: 0.07 } [bga="90"] { --a-bg-a: 0.90 } [bga="85"] { --a-bg-a: 0.85 } [bga="8"] { --a-bg-a: 0.08 } [bga="100"] { --a-bg-a: 1.00 } [bga="95"] { --a-bg-a: 0.95 } [bga="9"] { --a-bg-a: 0.09 } /*///// Font Color /////*/ [fc] > *, [fc] ,[ico] > :where(.glyphicons,.mdl2) { color: rgba(var(--a-font-color , var(--a-font1-color)), var(--a-fc-a,1)) !important; } [fc]:hover ,[ico]:hover > :where(.glyphicons,.mdl2) { color: rgba(var(--a-font-hover , var(--a-font1-color)), var(--a-fc-a,1)) !important; } [fc]:active,[ico]:active > :where(.glyphicons,.mdl2) { color: rgba(var(--a-font-active, var(--a-font1-color)), var(--a-fc-a,1)) !important; } [fc][nohover] { --a-font-hover: var(--a-font-color); --a-font-active: var(--a-font-color); } [fc="1"] { --a-font-color: var(--a-font1-color); } [fc="2"] { --a-font-color: var(--a-font2-color); } [fc="3"] { --a-font-color: var(--a-font3-color); } [fc="4"] { --a-font-color: var(--a-font4-color); } [fc="5"] { --a-font-color: var(--a-font5-color); } [fc=red] ,[ico=red] > * { --a-font-color: var(--a-red ); --a-font-hover: var(--a-red-hover ); --a-font-active: var(--a-red-active ); } [fc=green] ,[ico=green] > * { --a-font-color: var(--a-green ); --a-font-hover: var(--a-green-hover ); --a-font-active: var(--a-green-active ); } [fc=blue] ,[ico=blue] > * { --a-font-color: var(--a-blue ); --a-font-hover: var(--a-blue-hover ); --a-font-active: var(--a-blue-active ); } [fc=yellow] ,[ico=yellow] > * { --a-font-color: var(--a-yellow ); --a-font-hover: var(--a-yellow-hover ); --a-font-active: var(--a-yellow-active ); } [fc=aqua] ,[ico=aqua] > * { --a-font-color: var(--a-aqua ); --a-font-hover: var(--a-aqua-hover ); --a-font-active: var(--a-aqua-active ); } [fc=orange] ,[ico=orange] > * { --a-font-color: var(--a-orange ); --a-font-hover: var(--a-orange-hover ); --a-font-active: var(--a-orange-active ); } [fc=teal] ,[ico=teal] > * { --a-font-color: var(--a-teal ); --a-font-hover: var(--a-teal-hover ); --a-font-active: var(--a-teal-active ); } [fc=indigo] ,[ico=indigo] > * { --a-font-color: var(--a-indigo ); --a-font-hover: var(--a-indigo-hover ); --a-font-active: var(--a-indigo-active ); } [fc=brown] ,[ico=brown] > * { --a-font-color: var(--a-brown ); --a-font-hover: var(--a-brown-hover ); --a-font-active: var(--a-brown-active ); } [fc=purple] ,[ico=purple] > * { --a-font-color: var(--a-purple ); --a-font-hover: var(--a-purple-hover ); --a-font-active: var(--a-purple-active ); } [fc=white] ,[ico=white] > * { --a-font-color: var(--a-white ); --a-font-hover: var(--a-white-hover ); --a-font-active: var(--a-white-active ); } [fc=gray] ,[ico=gray] > * { --a-font-color: var(--a-gray1 ); --a-font-hover: var(--a-gray1-hover ); --a-font-active: var(--a-gray1-active ); } [fc=gray2] ,[ico=gray2] > * { --a-font-color: var(--a-gray2 ); --a-font-hover: var(--a-gray2-hover ); --a-font-active: var(--a-gray2-active ); } [fc=gray3] ,[ico=gray3] > * { --a-font-color: var(--a-gray3 ); --a-font-hover: var(--a-gray3-hover ); --a-font-active: var(--a-gray3-active ); } [fc=gray4] ,[ico=gray4] > * { --a-font-color: var(--a-gray4 ); --a-font-hover: var(--a-gray4-hover ); --a-font-active: var(--a-gray4-active ); } [fc=gray5] ,[ico=gray5] > * { --a-font-color: var(--a-gray5 ); --a-font-hover: var(--a-gray5-hover ); --a-font-active: var(--a-gray5-active ); } [fc=black] ,[ico=black] > * { --a-font-color: var(--a-black ); --a-font-hover: var(--a-black-hover ); --a-font-active: var(--a-black-active ); } [fc=none] ,[ico=none] > * { color:transparent !important; } [fc=primary] ,[ico=primary] > * { --a-font-color: var(--a-primary ); --a-font-hover: var(--a-primary-hover ); --a-font-active: var(--a-primary-active ); } [fc=secondary],[ico=secondary] > * { --a-font-color: var(--a-secondary ); --a-font-hover: var(--a-secondary-hover); --a-font-active: var(--a-secondary-active); } [fc=palette1] ,[ico=palette1] > * { --a-font-color: var(--a-palette1 ); --a-font-hover: var(--a-palette1-hover ); --a-font-active: var(--a-palette1-active ); } [fc=palette2] ,[ico=palette2] > * { --a-font-color: var(--a-palette2 ); --a-font-hover: var(--a-palette2-hover ); --a-font-active: var(--a-palette2-active ); } [fc=palette3] ,[ico=palette3] > * { --a-font-color: var(--a-palette3 ); --a-font-hover: var(--a-palette3-hover ); --a-font-active: var(--a-palette3-active ); } [fc=palette4] ,[ico=palette4] > * { --a-font-color: var(--a-palette4 ); --a-font-hover: var(--a-palette4-hover ); --a-font-active: var(--a-palette4-active ); } [fc=palette5] ,[ico=palette5] > * { --a-font-color: var(--a-palette5 ); --a-font-hover: var(--a-palette5-hover ); --a-font-active: var(--a-palette5-active ); } [fch="1"] { --a-font-hover: var(--a-font1-color ); } [fch="2"] { --a-font-hover: var(--a-font2-color ); } [fch="3"] { --a-font-hover: var(--a-font3-color ); } [fch="4"] { --a-font-hover: var(--a-font4-color ); } [fch="5"] { --a-font-hover: var(--a-font5-color ); } [fch=red] { --a-font-hover: var(--a-red-hover ); --a-font-active: var(--a-red-active ); } [fch=green] { --a-font-hover: var(--a-green-hover ); --a-font-active: var(--a-green-active ); } [fch=blue] { --a-font-hover: var(--a-blue-hover ); --a-font-active: var(--a-blue-active ); } [fch=yellow] { --a-font-hover: var(--a-yellow-hover ); --a-font-active: var(--a-yellow-active ); } [fch=aqua] { --a-font-hover: var(--a-aqua-hover ); --a-font-active: var(--a-aqua-active ); } [fch=orange] { --a-font-hover: var(--a-orange-hover ); --a-font-active: var(--a-orange-active ); } [fch=teal] { --a-font-hover: var(--a-teal-hover ); --a-font-active: var(--a-teal-active ); } [fch=indigo] { --a-font-hover: var(--a-indigo-hover ); --a-font-active: var(--a-indigo-active ); } [fch=brown] { --a-font-hover: var(--a-brown-hover ); --a-font-active: var(--a-brown-active ); } [fch=purple] { --a-font-hover: var(--a-purple-hover ); --a-font-active: var(--a-purple-active ); } [fch=white] { --a-font-hover: var(--a-white-hover ); --a-font-active: var(--a-white-active ); } [fch=gray] { --a-font-hover: var(--a-gray1-hover ); --a-font-active: var(--a-gray1-active ); } [fch=gray2] { --a-font-hover: var(--a-gray2-hover ); --a-font-active: var(--a-gray2-active ); } [fch=gray3] { --a-font-hover: var(--a-gray3-hover ); --a-font-active: var(--a-gray3-active ); } [fch=gray4] { --a-font-hover: var(--a-gray4-hover ); --a-font-active: var(--a-gray4-active ); } [fch=gray5] { --a-font-hover: var(--a-gray5-hover ); --a-font-active: var(--a-gray5-active ); } [fch=black] { --a-font-hover: var(--a-black-hover ); --a-font-active: var(--a-black-active ); } [fch=none] { color:transparent !important; } [fch=primary] { --a-font-hover: var(--a-primary-hover ); --a-font-active: var(--a-primary-active ); } [fch=secondary] { --a-font-hover: var(--a-secondary-hover); --a-font-active: var(--a-secondary-active); } [fch=palette1] { --a-font-hover: var(--a-palette1-hover ); --a-font-active: var(--a-palette1-active ); } [fch=palette2] { --a-font-hover: var(--a-palette2-hover ); --a-font-active: var(--a-palette2-active ); } [fch=palette3] { --a-font-hover: var(--a-palette3-hover ); --a-font-active: var(--a-palette3-active ); } [fch=palette4] { --a-font-hover: var(--a-palette4-hover ); --a-font-active: var(--a-palette4-active ); } [fch=palette5] { --a-font-hover: var(--a-palette5-hover ); --a-font-active: var(--a-palette5-active ); } /*** Font Color Alpha ***/ [fca="10"] { --a-fc-a: 0.10 } [fca= "5"] { --a-fc-a: 0.05 } [fca="0"] { --a-fc-a: 0.00 } [fca="20"] { --a-fc-a: 0.20 } [fca="15"] { --a-fc-a: 0.15 } [fca="1"] { --a-fc-a: 0.01 } [fca="30"] { --a-fc-a: 0.30 } [fca="25"] { --a-fc-a: 0.25 } [fca="2"] { --a-fc-a: 0.02 } [fca="40"] { --a-fc-a: 0.40 } [fca="35"] { --a-fc-a: 0.35 } [fca="3"] { --a-fc-a: 0.03 } [fca="50"] { --a-fc-a: 0.50 } [fca="45"] { --a-fc-a: 0.45 } [fca="4"] { --a-fc-a: 0.04 } [fca="60"] { --a-fc-a: 0.60 } [fca="55"] { --a-fc-a: 0.55 } [fca="70"] { --a-fc-a: 0.70 } [fca="65"] { --a-fc-a: 0.65 } [fca="6"] { --a-fc-a: 0.06 } [fca="80"] { --a-fc-a: 0.80 } [fca="75"] { --a-fc-a: 0.75 } [fca="7"] { --a-fc-a: 0.07 } [fca="90"] { --a-fc-a: 0.90 } [fca="85"] { --a-fc-a: 0.85 } [fca="8"] { --a-fc-a: 0.08 } [fca="100"] { --a-fc-a: 1.00 } [fca="95"] { --a-fc-a: 0.95 } [fca="9"] { --a-fc-a: 0.09 }