/* CAVELO-DASHBOARD-COLORS * Defines the generic color parameters of common classes * Nothing here should be specific to the dashboard frame * Nothing here should be specific to ui components * Nothing here should specify layout (unless necessary) */ .cv-bg { --font-color:var(--cavelo-black); --border-width:1px; --border-color:transparent; --background-color:transparent; --link-color:var(--font-color); position:relative; color:var(--font-color); border:var(--border-width) solid var(--border-color); background:var(--background-color); } /* .cv-bg * { --font-color:inherit; --border-color:inherit; --background-color:inherit; } */ /*colored containers*/ .cv-bg.green { --border-color:var(--cavelo-green); --background-color:var(--cavelo-green); --font-color:var(--cavelo-white); } .cv-bg.orange { --border-color:var(--cavelo-orange); --background-color:var(--cavelo-orange); --font-color:var(--cavelo-white); } .cv-bg.navy { --border-color:var(--cavelo-navy); --background-color:var(--cavelo-navy); --font-color:var(--cavelo-white); } .cv-bg.blue { --border-color:var(--cavelo-blue); --background-color:var(--cavelo-blue); --font-color:var(--cavelo-white); } .cv-bg.white { --border-color:var(--cavelo-white); --background-color:var(--cavelo-white); --font-color:var(--cavelo-black); } .cv-bg.black { --border-color:var(--cavelo-black); --background-color:var(--cavelo-black); --font-color:var(--cavelo-white); } .cv-bg.grey { --border-color:var(--cavelo-platinum); --background-color:var(--cavelo-platinum); --font-color:var(--cavelo-black); } .cv-bg.honeydew { --border-color:var(--cavelo-honeydew); --background-color:var(--cavelo-honeydew); --font-color:var(--cavelo-black); } .cv-bg.dark-grey { --border-color:var(--cavelo-grey); --background-color:var(--cavelo-grey); --font-color:var(--cavelo-white); } .cv-bg.gold { --border-color:var(--cv-gold-100); --background-color:var(--cv-gold-100); --font-color:var(--cavelo-white); } .cv-bg.red { --border-color:var(--cv-accent-red-dark); --background-color:var(--cv-accent-red-dark); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low { --border-color:var(--very-low-60); --background-color:var(--very-low-60); --font-color:var(--cavelo-white); } .cv-bg.risk-low { --border-color:var(--low-60); --background-color:var(--low-60); --font-color:var(--cavelo-white); } .cv-bg.risk-medium { --border-color:var(--medium-60); --background-color:var(--medium-60); --font-color:var(--cavelo-white); } .cv-bg.risk-high { --border-color:var(--high-60); --background-color:var(--high-60); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high { --border-color:var(--very-high-60); --background-color:var(--very-high-60); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-0 { --border-color:var(--very-low-0); --background-color:var(--very-low-0); --font-color:var(--cavelo-white); } .cv-bg.risk-low-0 { --border-color:var(--low-0); --background-color:var(--low-0); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-0 { --border-color:var(--medium-0); --background-color:var(--medium-0); --font-color:var(--cavelo-white); } .cv-bg.risk-high-0 { --border-color:var(--high-0); --background-color:var(--high-0); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-0 { --border-color:var(--very-high-0); --background-color:var(--very-high-0); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-20 { --border-color:var(--very-low-20); --background-color:var(--very-low-20); --font-color:var(--cavelo-white); } .cv-bg.risk-low-20 { --border-color:var(--low-20); --background-color:var(--low-20); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-20 { --border-color:var(--medium-20); --background-color:var(--medium-20); --font-color:var(--cavelo-white); } .cv-bg.risk-high-20 { --border-color:var(--high-20); --background-color:var(--high-20); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-20 { --border-color:var(--very-high-20); --background-color:var(--very-high-20); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-40 { --border-color:var(--very-low-40); --background-color:var(--very-low-40); --font-color:var(--cavelo-white); } .cv-bg.risk-low-40 { --border-color:var(--low-40); --background-color:var(--low-40); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-40 { --border-color:var(--medium-40); --background-color:var(--medium-40); --font-color:var(--cavelo-white); } .cv-bg.risk-high-40 { --border-color:var(--high-40); --background-color:var(--high-40); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-40 { --border-color:var(--very-high-40); --background-color:var(--very-high-40); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-60 { --border-color:var(--very-low-60); --background-color:var(--very-low-60); --font-color:var(--cavelo-white); } .cv-bg.risk-low-60 { --border-color:var(--low-60); --background-color:var(--low-60); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-60 { --border-color:var(--medium-60); --background-color:var(--medium-60); --font-color:var(--cavelo-white); } .cv-bg.risk-high-60 { --border-color:var(--high-60); --background-color:var(--high-60); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-60 { --border-color:var(--very-high-60); --background-color:var(--very-high-60); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-80 { --border-color:var(--very-low-80); --background-color:var(--very-low-80); --font-color:var(--cavelo-white); } .cv-bg.risk-low-80 { --border-color:var(--low-80); --background-color:var(--low-80); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-80 { --border-color:var(--medium-80); --background-color:var(--medium-80); --font-color:var(--cavelo-white); } .cv-bg.risk-high-80 { --border-color:var(--high-80); --background-color:var(--high-80); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-80 { --border-color:var(--very-high-80); --background-color:var(--very-high-80); --font-color:var(--cavelo-white); } .cv-bg.risk-very-low-100 { --border-color:var(--very-low-100); --background-color:var(--very-low-100); --font-color:var(--cavelo-white); } .cv-bg.risk-low-100 { --border-color:var(--low-100); --background-color:var(--low-100); --font-color:var(--cavelo-white); } .cv-bg.risk-medium-100 { --border-color:var(--medium-100); --background-color:var(--medium-100); --font-color:var(--cavelo-white); } .cv-bg.risk-high-100 { --border-color:var(--high-100); --background-color:var(--high-100); --font-color:var(--cavelo-white); } .cv-bg.risk-very-high-100 { --border-color:var(--very-high-100); --background-color:var(--very-high-100); --font-color:var(--cavelo-white); } /* .cv-bg.inverse.green { --border-color:var(--cavelo-green); --font-color:var(--cavelo-green); --background-color:var(--cavelo-white); } .cv-bg.inverse.orange { --border-color:var(--cavelo-orange); --font-color:var(--cavelo-orange); --background-color:var(--cavelo-white); } .cv-bg.inverse.navy { --border-color:var(--cavelo-navy); --font-color:var(--cavelo-navy); --background-color:var(--cavelo-white); } .cv-bg.inverse.blue { --border-color:var(--cavelo-blue); --font-color:var(--cavelo-blue); --background-color:var(--cavelo-white); } .cv-bg.inverse.white { --border-color:var(--cavelo-white); --font-color:var(--cavelo-white); --background-color:var(--cavelo-black); } .cv-bg.inverse.black { --border-color:var(--cavelo-black); --font-color:var(--cavelo-black); --background-color:var(--cavelo-white); } .cv-bg.inverse.grey { --border-color:var(--cavelo-platinum); --font-color:var(--cavelo-platinum); --background-color:var(--cavelo-black); } .cv-bg.inverse.dark-grey { --border-color:var(--cavelo-grey); --font-color:var(--cavelo-grey); --background-color:var(--cavelo-white); } .cv-bg.inverse.gold { --border-color:var(--cv-gold-100); --font-color:var(--cv-gold-100); --background-color:var(--cavelo-white); } .cv-bg.inverse.red { --border-color:var(--cv-accent-red-dark); --font-color:var(--cv-accent-red-dark); --background-color:var(--cavelo-white); } */ /*special*/ .cv-bg.transparent { --border-color:transparent; --background-color:transparent; --font-color:inherit; } .cv-bg.inverse { --background-color:var(--cavelo-white); --font-color:inherit; } .cv-bg.gradiant { --background-color: var(--cavelo-navy-green-corner); } .cv-bg.gradiant.navy { --background-color: var(--cavelo-navy-green); } .cv-bg.gradiant.green { --background-color: var(--cavelo-green-navy); } .cv-bg.gradiant.blue { --background-color: var(--cavelo-blue-green); } .cv-bg.gradiant.orange { --background-color: var(--cavelo-orange-blue); } /*links*/ a:link, a:-webkit-any-link, a:not([data-role]), a:not([data-role]):visited, a:not([data-role]):link, a:not([data-role]):active, .link:not([data-role]) { transition:color 0.3s; color:var(--font-color); } a:-webkit-any-link:not([disabled]):hover, a:not([data-role]):not([disabled]):hover, a:not([data-role]):not([disabled]):visited:hover, a:not([data-role]):not([disabled]):link:hover, a:not([data-role]):not([disabled]):active:hover, .link:not([data-role]):not([disabled]):hover { transition:color 0.3s; color:var(--font-color); } .link.green:not([disabled]):hover, a.green:not([disabled]):hover { --font-color:var(--cavelo-green); } .link.orange:not([disabled]):hover, a.orange:not([disabled]):hover { --font-color:var(--cavelo-orange); } .link.navy:not([disabled]):hover, a.navy:not([disabled]):hover { --font-color:var(--cavelo-navy); } .link.blue:not([disabled]):hover, a.blue:not([disabled]):hover { --font-color:var(--cavelo-blue); } .link.white:not([disabled]):hover, a.white:not([disabled]):hover { --font-color:var(--cavelo-white); } .link.black:not([disabled]):hover, a.black:not([disabled]):hover { --font-color:var(--cavelo-black); } .link.grey:not([disabled]):hover, a.grey:not([disabled]):hover { --font-color:var(--cavelo-platinum); } .link.dark-grey:not([disabled]):hover, a.dark-grey:not([disabled]):hover { --font-color:var(--cavelo-grey); } .link.gold:not([disabled]):hover, a.gold:not([disabled]):hover { --font-color:var(--cv-gold-100); } .link.red:not([disabled]):hover, a.red:not([disabled]):hover { --font-color:var(--cv-accent-red-dark); } /* .cv-text { color:var(--font-color); } .cv-text.green { --font-color:var(--cavelo-green); } .cv-text.orange { --font-color:var(--cavelo-orange); } .cv-text.navy { --font-color:var(--cavelo-navy); } .cv-text.blue { --font-color:var(--cavelo-blue); } .cv-text.white { --font-color:var(--cavelo-white); } .cv-text.black { --font-color:var(--cavelo-black); } .cv-text.grey { --font-color:var(--cavelo-platinum); } .cv-text.dark-grey { --font-color:var(--cavelo-grey); } .cv-text.gold { --font-color:var(--cv-gold-100); } .cv-text.red { --font-color:var(--cv-accent-red-dark); } */ /*** BACKGROUNDS */ /*necessary layout*/ /* .cv-bg { position:relative; border:1px solid transparent; background:transparent; } */ /*necessary layout*/ /* .cv-bg.green { border-color: var(--cavelo-green); background:var(--cavelo-green); color:var(--cavelo-white); } .cv-bg.orange { border-color: var(--cavelo-orange); background:var(--cavelo-orange); color:var(--cavelo-white); } .cv-bg.navy { border-color: var(--cavelo-navy); background:var(--cavelo-navy); color:var(--cavelo-white); } .cv-bg.blue { border-color: var(--cavelo-blue); background:var(--cavelo-blue); color:var(--cavelo-white); } .cv-bg.white { border-color: var(--cavelo-white); background:var(--cavelo-white); color:var(--cavelo-black); } .cv-bg.black { border-color: var(--cavelo-black); background:var(--cavelo-black); color:var(--cavelo-white); } .cv-bg.grey { border-color: var(--cavelo-platinum);background:var(--cavelo-platinum); color:var(--cavelo-black); } .cv-bg.dark-grey { border-color: var(--cavelo-grey); background:var(--cavelo-grey); color:var(--cavelo-white); } .cv-bg.transparent { border-color: var(--cavelo-platinum); color:var(--cavelo-black); background:transparent !important; } .cv-bg.inverse.green { border-color: var(--cavelo-green); color:var(--cavelo-green); background:var(--cavelo-white); } .cv-bg.inverse.orange { border-color: var(--cavelo-orange); color:var(--cavelo-orange); background:var(--cavelo-white); } .cv-bg.inverse.navy { border-color: var(--cavelo-navy); color:var(--cavelo-navy); background:var(--cavelo-white); } .cv-bg.inverse.blue { border-color: var(--cavelo-blue); color:var(--cavelo-blue); background:var(--cavelo-white); } .cv-bg.inverse.white { border-color: var(--cavelo-grey); color:var(--cavelo-black); background:var(--cavelo-white); } .cv-bg.inverse.black { border-color: var(--cavelo-black); color:var(--cavelo-black); background:var(--cavelo-white); } .cv-bg.inverse.grey { border-color: var(--cavelo-platinum); color:var(--cavelo-black); background:var(--cavelo-white);} .cv-bg.inverse.dark-grey { border-color: var(--cavelo-grey); color:var(--cavelo-black);background:var(--cavelo-white);} */ /* .cv-bg.gold { border-color: var(--cv-gold-100); background:var(--cv-gold-100); color:var(--cavelo-white); } .cv-bg.bright-blue { border-color: var(--cv-bright-blue); background:var(--cv-bright-blue); color:var(--cavelo-white); } .cv-bg.vivid-blue { border-color: var(--cv-vivid-blue); background:var(--cv-vivid-blue); color:var(--cavelo-white); } .cv-bg.vivid-cyan { border-color: var(--cv-vivid-cyan); background:var(--cv-vivid-cyan); color:var(--cavelo-white); } .cv-bg.red { border-color: var(--cv-accent-red-dark); background:var(--cv-accent-red-dark); color:var(--cavelo-white); } .cv-bg.inverse.gold { border-color:var(--cv-gold-100); color:var(--cv-gold-100); background:var(--cavelo-white); } .cv-bg.inverse.bright-blue { border-color: var(--cv-bright-blue); color:var(--cv-bright-blue); background:var(--cavelo-white); } .cv-bg.inverse.vivid-blue { border-color: var(--cv-vivid-blue); color:var(--cv-vivid-blue); background:var(--cavelo-white); } .cv-bg.inverse.vivid-cyan { border-color: var(--cv-vivid-cyan); color:var(--cv-vivid-cyan); background:var(--cavelo-white); } .cv-bg.inverse.red { border-color: var(--cv-accent-red-dark); color:var(--cv-accent-red-dark); background:var(--cavelo-white); } */ /* .cv-bg.gradiant.navy { background: var(--cavelo-navy-green); } .cv-bg.gradiant.green { background: var(--cavelo-green-navy); } .cv-bg.gradiant.blue { background: var(--cavelo-blue-green); } .cv-bg.gradiant.orange { background: var(--cavelo-orange-blue); } */ /* .cv-bg.nodes::before { position: fixed; box-sizing:border-box; top:0; right:calc(1em + 1px); bottom:0; left:0; background-color:var(--cavelo-white); background-size: cover; background-repeat: no-repeat; background-position: left top; background-clip: padding-box; background-attachment: fixed; opacity:0.5; content:''; } */ /* .cv-bg.nodes.grey { background-color:var(--cavelo-black) !important; } .cv-bg.nodes.grey::before { filter: invert(55%) sepia(0%) saturate(1096%) hue-rotate(199deg) brightness(88%) contrast(84%); } .cv-bg.nodes.orange { background-color:var(--cavelo-black) !important; } .cv-bg.nodes.orange::before { filter: invert(51%) sepia(90%) saturate(809%) hue-rotate(356deg) brightness(97%) contrast(91%); } .cv-bg.nodes.blue { background-color:var(--cavelo-black) !important; } .cv-bg.nodes.blue::before { filter: invert(21%) sepia(10%) saturate(1109%) hue-rotate(189deg) brightness(140%) contrast(101%); } */ /*** LINKS */ /* a:not([data-role]):visited, a:not([data-role]):link, a:not([data-role]):active, .link:not([data-role]), a:not([data-role]) { transition:color 0.3s; } .link:not([data-role]):hover ,a:not([data-role]):hover { transition:color 0.3s; } .link.dark-grey:not([data-role]):not([disabled]):hover, a.dark-grey:not([data-role]):not([disabled]):hover { color: var(--cavelo-black); } .link.orange:not([data-role]):not([disabled]):hover, a.orange:not([data-role]):not([disabled]):hover { color: var(--cavelo-orange); } .link.navy:not([data-role]):not([disabled]):hover, a.navy:not([data-role]):not([disabled]):hover { color:var(--cavelo-navy) } .link.blue:not([data-role]):not([disabled]):hover, a.blue:not([data-role]):not([disabled]):hover { color:var(--cavelo-blue) } .link.green:not([data-role]):not([disabled]):hover, a.green:not([data-role]):not([disabled]):hover { color:var(--cavelo-green) } a.white:not([data-role]):not([disabled]):hover { color:var(--cavelo-white) } a.black:not([data-role]):not([disabled]):hover { color:var(--cavelo-black) } a.grey:not([data-role]):not([disabled]):hover { color:var(--cavelo-grey) } .link.gold:not([data-role]):not([disabled]):hover, a.gold:not([data-role]):not([disabled]):hover { color:var(--cv-gold-100) } a.bright-blue:not([data-role]):not([disabled]):hover { color:var(--cv-bright-blue) } a.vivid-blue:not([data-role]):not([disabled]):hover { color:var(--cv-vivid-blue) } a.vivid-cyan:not([data-role]):not([disabled]):hover { color:var(--cv-vivid-cyan) } */ /* a:visited, a:link, a:active { color:inherit; } a.underline { text-decoration:underline !important; } .link:not([data-role]):not([disabled]):hover { text-decoration:underline; } */ /*** TEXTS */ /* .cv-text.orange { color:var(--cavelo-orange) } .cv-text.navy { color:var(--cavelo-navy) } .cv-text.blue { color:var(--cavelo-blue) } .cv-text.white { color:var(--cavelo-white) } .cv-text.black { color:var(--cavelo-black) } .cv-text.grey { color:var(--cavelo-grey) } .cv-text.platinum { color:var(--cavelo-platinum) } */ /* .cv-text.gold { color:var(--cv-gold-100) } .cv-text.bright-blue { color:var(--cv-bright-blue) } .cv-text.vivd-blue { color:var(--cv-vivid-blue) } .cv-text.vivd-cyan { color:var(--cv-vivid-cyan) } .cv-text.red { color:var(--cv-accent-red-medium) } .cv-text.green { color:var(--cavelo-green-60) } */ /* i.box-shadow::before { text-shadow:0px 0px 5px var(--cavelo-orange); } */ .box-shadow { box-shadow: var(--box-shadow) } .shadow { --shadow-color:transparent; margin-bottom:2em; box-shadow: var(--shadow-color) 8px 8px 0px 0px; } .shadow.orange { --shadow-color:var(--cavelo-orange-40); } .shadow.navy { --shadow-color:var(--cavelo-navy-40); } .shadow.blue { --shadow-color:var(--cavelo-blue-40); } .shadow.white { --shadow-color:var(--cavelo-white-40); } .shadow.black { --shadow-color:var(--cavelo-black-40); } .shadow.grey { --shadow-color:var(--cavelo-platinum-60); } .shadow.dark-grey { --shadow-color:var(--cavelo-grey); } .shadow.gold { --shadow-color:rgba(230,191,0, 0.5); } /*** SHADOWS */ /* .shadow { margin-bottom:2em; } .shadow.orange { box-shadow: var(--cavelo-orange-40) 8px 8px 0px 0px; } .shadow.navy { box-shadow: var(--cavelo-navy-40) 8px 8px 0px 0px; } .shadow.blue { box-shadow: var(--cavelo-blue-40) 8px 8px 0px 0px; } .shadow.white { box-shadow: var(--cavelo-white-40) 8px 8px 0px 0px; } .shadow.black { box-shadow: var(--cavelo-black-40) 8px 8px 0px 0px; } .shadow.grey { box-shadow: var(--cavelo-platinum) 8px 8px 0px 0px; } .shadow.dark-grey { box-shadow: var(--cavelo-grey) 8px 8px 0px 0px; } */ /* .shadow.gold { box-shadow: rgba(230,191,0, 0.5) 8px 8px 0px 0px; } .shadow.bright-blue { box-shadow: rgba(0,117,160, 0.5) 8px 8px 0px 0px; } .shadow.vivid-blue { box-shadow: rgba(0,179,219, 0.5) 8px 8px 0px 0px; } .shadow.vivid-cyan { box-shadow: rgba(0,214,243, 0.5) 8px 8px 0px 0px; } */ /*** FORMS AND INPUTS */ input:not([type="checkbox"]), select { border-bottom:1px solid var(--border-color); background-color:transparent; } select[multiple], textarea, [contenteditable="true"], .contenteditable { border:1px solid var(--border-color); background-color:var(--background-color); color:var(--font-color); } /* input, select, [contenteditable="true"], .contenteditable, textarea[readonly] { background-color:inherit; } .contenteditable { box-shadow:inset var(--cavelo-grey) 0px 0px 5px 0px; color:var(--cavelo-black) } */ .form-group:not(.cv-bg), .form-group > .form-group-wrapper:not(.cv-bg) { color:inherit; border-color:inherit; background-color:inherit; } .form-group > .form-group-wrapper > span.select-pure > .cover-disabled { background-color:transparent; } /* .form-group > .form-group-wrapper > select[multiple], .form-group > .form-group-wrapper > textarea { border-color:inherit; } */ input:focus, select:focus, textarea:focus { outline:1px auto rgba(102,102,102,0.5); /* border-color:var(--cavelo-grey); */ } select option { color:var(--cavelo-black); } select:invalid, select option:disabled, select option.placeholder { color:var(--cavelo-grey) } /*** SPECIAL COLORS */ i.fa-star { color:var(--cv-gold-100) !important; } i.fa-exclamation-triangle.error { color:var(--cv-accent-red-dark); } i.fa-thermometer-three-quarters { color:var(--cv-accent-red-medium); } i.fa-thermometer-half { color:var(--cv-gold-dark); } i.fa-thermometer-quarter { color:inherit; } i.fa-dev.dev { color:var(--cv-accent-red-dark); font-size:2em; vertical-align:middle; } /*necessary layout*/ *:not([disabled]):hover > i.fa-ban, *:not([disabled]):hover > i.fa-trash-alt, *:not([disabled]):hover > i.fa-exclamation-triangle, *:not([disabled]):hover > i.fa-exclamation-circle { color:var(--cv-accent-red-medium) !important; } section > article > h2 > .fa-check-circle { color:var(--cavelo-green) !important; } .vertical-spacer, .horizontal-spacer { background:var(--cavelo-green); } .color-inherited { color:inherit !important; background-color:inherit !important; border:inherit !important; } .flash { background-color:var(--cavelo-white) !important; box-shadow: var(--cavelo-green) inset 0px 0px 5px 0px !important; transition: background-color 0.2s, box-shadow 0.2s; transition-timing-function: ease-in-out; } @keyframes blink { 0% { background-color:var(--cavelo-green); box-shadow: 0 0 10px var(--cavelo-green); color:var(--cavelo-green); } 100% { background-color:inherit; box-shadow: 0 0 0px; color:inherit; } } @keyframes pulseIcon { 0% { transform: scale(1); text-shadow: 0 0 0px var(--cv-gold-100); } 50% { transform: scale(1.2); text-shadow: 0 0 10px var(--cv-gold-100); } 100% { transform: scale(1); text-shadow: 0 0 0px var(--cv-gold-100); } } @keyframes pulseDot { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes pulseEvent { 0% { background-color: var(--cavelo-grey); } 50% { background-color: var(--cavelo-white); } 100% { background-color: var(--cavelo-grey); } } @keyframes blinkText { 0% { text-shadow: 0 0 10px var(--cv-gold-100); color:var(--cavelo-green); } 100% { text-shadow: 0 0 10px var(--cv-gold-100); color:inherit; } } /* .blink-text { animation-name:blinkText; animation-duration: 1s; animation-iteration-count: infinite; animation-iteration-count: alternate; } */ details.normal:hover > summary, details.normal[open] > summary { font-weight:bold; } details.normal:hover > summary.grey, details.normal[open] > summary.grey { background-color:var(--cavelo-platinum); color:var(--cavelo-black); } details.normal:hover > summary.dark-grey, details.normal[open] > summary.dark-grey { background-color:var(--cavelo-grey); color:var(--cavelo-black); } details.normal:hover > summary.blue, details.normal[open] > summary.blue { background-color:var(--cavelo-blue); color:var(--cavelo-white); } details.normal:hover > summary.orange, details.normal[open] > summary.orange { background-color:var(--cavelo-orange); color:var(--cavelo-white); } details.normal:hover > summary.green, details.normal[open] > summary.green { background-color:var(--cavelo-green); color:var(--cavelo-white); } details.normal:hover > summary.red, details.normal[open] > summary.red { background-color:var(--cv-accent-red-dark); color:var(--cavelo-white); } details.normal:hover > summary.gold, details.normal[open] > summary.gold { background-color:var(--cv-gold); color:var(--cavelo-black); } details.normal:hover > summary.navy, details.normal[open] > summary.navy { background-color:var(--cavelo-navy); color:var(--cavelo-white); } details.normal:hover > summary.black, details.normal[open] > summary.black { background-color:var(--cavelo-black); color:var(--cavelo-white); } /* details.normal:hover > summary.risk-very-high, details.normal[open] > summary.risk-very-high { background-color:var(--very-high-60); color:var(--cavelo-white); } details.normal:hover > summary.risk-high, details.normal[open] > summary.risk-high { background-color:var(--high-60); color:var(--cavelo-white); } details.normal:hover > summary.risk-medium, details.normal[open] > summary.risk-medium { background-color:var(--medium-60); color:var(--cavelo-white); } details.normal:hover > summary.risk-low, details.normal[open] > summary.risk-low { background-color:var(--low-60); color:var(--cavelo-white); } details.normal:hover > summary.risk-very-low, details.normal[open] > summary.risk-very-low { background-color:var(--very-low-60); color:var(--cavelo-white); } */ [data-role="button"]:disabled { opacity:0.5 !important; } [data-role="button"].dark-grey:disabled, input:disabled, select:disabled, textarea:disabled { border-color:rgba(118,118,118,0.5) !important; color: rgba(118,118,118) !important; opacity:0.5 !important; } /*** NEW COLOR OPTIONS */ i[class*="cv-bg-"] { height:fit-content !important; width:fit-content !important; } .cv-bg-green { background-color:var(--cavelo-green) !important; } .cv-bg-orange { background-color:var(--cavelo-orange) !important; } .cv-bg-navy { background-color:var(--cavelo-navy) !important; } .cv-bg-blue { background-color:var(--cavelo-blue) !important; } .cv-bg-white { background-color:var(--cavelo-white) !important; } .cv-bg-black { background-color:var(--cavelo-black) !important; } .cv-bg-grey { background-color:var(--cavelo-platinum) !important; } .cv-bg-dark-grey { background-color:var(--cavelo-grey) !important; } .cv-bg-gold { background-color:var(--cv-gold) !important; } .cv-bg-bright-blue { background-color:var(--cv-bright-blue) !important; } .cv-bg-vivid-blue { background-color:var(--cv-vivid-blue) !important; } .cv-bg-vivid-cyan { background-color:var(--cv-vivid-cyan) !important; } .cv-bg-red { background-color:var(--cv-accent-red-dark) !important; } .cv-bg-honeydew { background-color:var(--cavelo-honeydew) !important; } .cv-bg-transparent { background-color:transparent !important; } [class*="cv-border-"] { border-color:transparent; border:1px solid var(--border-color); box-sizing:border-box !important; } .cv-border-green { border-color:var(--cavelo-green) !important; } .cv-border-orange { border-color:var(--cavelo-orange) !important; } .cv-border-navy { border-color:var(--cavelo-navy) !important; } .cv-border-blue { border-color:var(--cavelo-blue) !important; } .cv-border-white { border-color:var(--cavelo-white) !important; } .cv-border-black { border-color:var(--cavelo-black) !important; } .cv-border-grey { border-color:var(--cavelo-platinum) !important; } .cv-border-dark-grey { border-color:var(--cavelo-grey) !important; } .cv-border-gold { border-color:var(--cv-gold) !important; } .cv-border-bright-blue { border-color:var(--cv-bright-blue) !important; } .cv-border-vivid-blue { border-color:var(--cv-vivid-blue) !important; } .cv-border-vivid-cyan { border-color:var(--cv-vivid-cyan) !important; } .cv-border-red { border-color:var(--cv-accent-red-dark) !important; } .cv-border-honeydew { border-color:var(--cavelo-honeydew) !important; } .cv-border-transparent { border-color:transparent !important; } .cv-border-2 { border-width:2px !important; } .cv-border-3 { border-width:3px !important; } .cv-border-4 { border-width:4px !important; } section.risk-distribution { position:relative; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; column-gap:0.1em; padding:0.5em; } section.risk-distribution > article { position:relative; min-height:3em; display:flex; align-content:middle; align-items:middle; justify-content:middle; } section.risk-distribution > article.veryLow { background-color:var(--cavelo-blue); border-top-left-radius:1em; border-bottom-left-radius:1em; } section.risk-distribution > article.low { background-color:var(--cavelo-green); } section.risk-distribution > article.medium { background-color:var(--cv-gold-100); } section.risk-distribution > article.high { background-color:var(--cavelo-orange); } section.risk-distribution > article.veryHigh { background-color:var(--cv-accent-red-dark); border-top-right-radius:1em; border-bottom-right-radius:1em; } section.risk-distribution > article:before { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold;} section.risk-distribution > article.veryLow:before { content:'Very Low'; color:var(--cavelo-white); } section.risk-distribution > article.low:before { content:'Low'; color:var(--cavelo-white); } section.risk-distribution > article.medium:before { content:'Medium'; color:var(--cavelo-white); } section.risk-distribution > article.high:before { content:'High'; color:var(--cavelo-white); } section.risk-distribution > article.veryHigh:before { content:'Very High'; color:var(--cavelo-white); } section.risk-distribution > article > div { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:0.5em; min-width:2.5em; box-sizing:border-box; border:1px solid var(--cavelo-black); background-color:var(--cavelo-white); color:var(--cavelo-white); font-weight:bold; text-align:center; border-bottom-left-radius:0.5em; border-bottom-right-radius:0.5em; } section.risk-distribution > article > div:before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:2.5em; height:auto; box-sizing:border-box; border-top:0; border-left:1.25em solid transparent; border-right:1.25em solid transparent; border-bottom:1em solid var(--cavelo-black); } section.risk-distribution > article.veryLow > div { border:1px solid var(--cv-blue-50); background-color:var(--cv-blue-0); color:var(--cavelo-blue); } section.risk-distribution > article.low > div { border:1px solid var(--cavelo-green-60); background-color:var(--cavelo-green-20); color:var(--cavelo-green); } section.risk-distribution > article.medium > div { border:1px solid var(--cv-gold-50); background-color:var(--cv-gold-0); color:var(--cv-gold-100); } section.risk-distribution > article.high > div { border:1px solid var(--cv-orange-50); background-color:var(--cv-orange-0); color:var(--cavelo-orange); } section.risk-distribution > article.veryHigh > div { border:1px solid var(--cv-accent-red-medium); background-color:var(--cv-accent-red-light); color:var(--cv-accent-red-dark); } section.risk-distribution > article.veryLow > div:before { border-bottom:1em solid var(--cv-blue-0); } section.risk-distribution > article.low > div:before { border-bottom:1em solid var(--cavelo-green-20); } section.risk-distribution > article.medium > div:before { border-bottom:1em solid var(--cv-gold-0); } section.risk-distribution > article.high > div:before { border-bottom:1em solid var(--cv-orange-0); } section.risk-distribution > article.veryHigh > div:before { border-bottom:1em solid var(--cv-accent-red-light); }