/* skin colour background so white input fields stand out
Rounded borders as a small inside joke, body ROUNDNESS index.
*/
table {
background-color: #EDE4DD;
border-radius: 10px;
color: #784B46;
font-family: 'OpenDyslexic', sans-serif;
overflow: hidden;
}
/* for debugging
p {background-color: yellow;}
*/
#calculator-field-height {width: 3em; transition: width 2s ease 0.3s, max-width 2s;}
#calculator-field-height:focus {width: 8em; transition: width 0.2s ease}
div.conversions {
max-height: 0px;
max-width: 0px;
overflow: hidden;
transition: max-height 2s ease 0.3s, max-width 2s ease 1s}
#calculator-field-height:focus ~ div.conversions,
#calculator-field-waist:focus ~ div.conversions
{ max-height: 100em;
max-width: 100em;
transition: max-height 0.6s, max-width 0.2s;
}
div.whtrDetails {max-height: 0px; overflow: hidden; transition: max-height 2s ease 0.3s}
#calculator-field-whtr:focus ~ div.whtrDetails
{ max-height: 100em;
transition: max-height 0.6s ease;
}
/* Right-align field prompts, so they are close to input fields,
Minimum eye movement required.
Small contrast for field prompts and headers, so focus goes to input fields.
Center-align all input and variable output fields.
*/
td.prompt {background-color: #E5C8B3; text-align: right; padding: 0 0.5ex;}
td {text-align: center;vertical-align: top;}
/* left align text in Template:Collapse where standard Wikipedia text aligns center
*/
td.dimensionInput {text-align: left;} /* input of height and waist above units cm, in, ft */
/* cm to feet and inches */
td.conversions {text-align: left; font-size: small; white-space: nowrap;}
td.comversions p { margin-bottom: 0;}
.mw-parser-output td.conversions { text-align: left;}
td.conversions div.otherValue {background-color: #F9FAF5; color: #65302A;}
td.conversions div.selectedValue {background-color: #AADAFE; color: #002F53;}
th {background-color: #E5C8B3; color: #EDE4DD; font-weight: normal}
/* Yellow color for input values out of min max range.
Why is the following rejected with error mesage:
Invalid selector list at line xx character 1.
.calculator-field-live:invalid {background-color: #FEFFC6;}
*/
/* hide row with intermediate variables
Todo: rename to protected,
analogous to a protected variable in the programming language Java.
A protected row has intermediate Calculator fields
that should not be publicly visible,
but fellow developers can see protected row during development.
- To make one specific protected row temporary visible:
change class="public" to "public".
(todo make that class and let it be semi transparent)
- To make all protected rows temporary visible,
change the
display: none;
below to
tr.protected {opacity: 0.5;}
To make all rows invisible, change to
tr.protected {display: none;}
todo:
obscured -> private, always hidden
protected visible during debug, developer changes class in html
public: alwas visible, default, no class
*/
.obscured {display: none;}
.debug {display: table-row; opacity: 0.5;} /* different from public, always visible fields */
/* Hide checkboxes which are checked only if the silhouette should be shown for that WHtR.
Hidden checkbox and silhouette divs must be siblings, share the same direct parent.
Avoid line breaks between checkbox and divs, as that generates paragraphs,
seperating the siblings to different parents.
*/
tr.silhouetteRow td input {display: none;}
/*
Current silhouets are outdated, BRI based, from verson 2,
with a range of 1 - 20.
Any BRI value < 1 will be rounded bounded to 1.
Any BRI value > 20 will be rounded bounded to 20.
New silhouettes that are WHtR based are still in development.
So for the moment, silhouette index number equals rounded BRI,
see WHtR -> BRI mapping below,
for temporary workaround till new WHtR based silhouettes are ready.
dark red to black gradient, lowest WHtR of living person, not natural, corset, cathie Jung
All sil 1, black
WHtR < 0. (BRI <= -1.3) special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.00 (BRI -1.300000000000000), special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.05 (BRI -1.253705952432938), special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.10 (BRI -1.114788610410983), special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.15 (BRI -0.8831422420183799), special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.20 (BRI -0.5585901796926009), special div with tailored picture: #000000, black not realistic, no living human with this WHTR value, user is playing with unrealistic values
WHtR 0.217(BRI -0.4270365628760260), rounded to 0.20, #000000, black lowest WHtR ever [[Ethel Granger]], not natural, not alive anymore, user is playing with unrealistic values
WHtR 0.22 (BRI -0.4027025721986206), rounded to 0.20, #000000, sil 1 , black lowest WHtR of living person, [[Cathy Jung]] with WhtR 0.22, not natural, using corset for years, green, amber, red, dark red, to black gradient
WHtR 0.25 (BRI -0.14088414448190179), sil 1 dark red
WHtR 0.30 (BRI 0.37029670844191287), sil 1 gradient darker shade of red to dark red
WHtR 0.35 (BRI 0.9753470316225616), sil 1, rapid gradient green to amber and red, just below 0.40 and going down rapidly.
WHtR 0.36 (BRI 1.1076614468416324), sil 1, rapid gradient green to amber and red. Marilyn Monroe had a WHtR of 0.369, no corset, natural body shape, but rare long tail, exceptional
WHtR 0.40 (BRI 1.674736825820787), sil 2, green, lower bound of NICE no increased health risk, no action needed, see [[WHtR#Recommended boundary values]] for NICE category boundaries 0.4, 0.5, 0.6
WHtR 0.45 (BRI 2.469013293369983), sil 2, green
WHtR 0.50 (BRI 3.3588030217017035), sil 3 gradient, green yellow, amber. lower bound of NICE increased health risk,
WHtR 0.55 (BRI 4.344814517777763, sil 4, gradient, amber to red)
WHtR 0.60 (BRI 5.427841117941966, sil 5, light red, same as in cmglee's chart, lower bound of NICE futher increased health risk
WHtR ??? (BRI ??????????????????) sil 6
WHtR 0.65 (BRI 6.608764301926044) sil 7
WHtR 0.70 (BRI 7.888557444483865) sil 8
WHtR 0.75 (BRI 9.268290043500258) sil 9
WHtR ??? (BRI???????????????????) sil 10
WHtR 0.80 (BRI 10.74913246954469) sil 11
WHtR 0.85 (BRI 12.332361288860852) sil 12
WHtR ??? (BRI???????????????????) sil 13
WHtR 0.90 (BRI 14.019365219878864) sil 14
WHtR ??? (BRI???????????????????) sil 15
WHtR 0.95 (BRI 15.811651792716987) sil 16
WHtR ??? (BRI???????????????????) sil 17
WhtR 1.00 (BRI 17.71085479206681) sil 18
todo check, Zang figure 5, no living subjects found above BRI 18?
Should that be dark red to red gradient?
WHtR ??? (BRI???????????????????) sil 19
All sil 20, for any WHTR value that rounds to BRI 20 or higher
WHtR 1.05 (BRI 19.71874257663319), sil 20, current max silhouette, dark red to black gradient
WHtR 1.10 21.837227383323295
WhtR 1.15 24.06837574211471
WHtR 1.20 26.414420148564034
WHtR 1.25 28.877772165982037
WHtR 1.30 31.461037159304283
WHtR 1.35 34.167030898776204
WHtR 1.40 36.998798315208774
WhtR 1.45 39.9596347415885
WHtR 1.50 43.053110040624176
WHtR 1.55 46.28309609744662
WHtR 1.60 49.65379825512764
WHtR 1.65 53.169791393181356
WHtR 1.70 56.83606150263671 Walter Hudson, (WHtR 1.69 largest living perso)
WHtR 1.75 60.65805380482368
WHtR 1.80 64.64172870702708 Jon_Brower_Minnoch (WHtR 1.78, not living anymore)
WHtR 1.85 68.79362720339287
WHtR ???? darkest red to black gradient, highest WHtR value ever, no living human
WHtR ???? black, not realistic value, dead person
*/
.unrealistic { background-color: #000000; display: none}
.silhouette1 { background-color: #AA202F; display: none}
#calculator-field-showSilhouette1:checked ~ .silhouette1 { display: block; }
.WHtR0d25 { background-image: linear-gradient(to right, #8E000E, #FFE97F, #FFE97F, #CCFA7F);}
.silhouette2 { display: none;}
#calculator-field-showSilhouette2:checked ~ .silhouette2 { display: block; }
.WHtR0d30 { background-image: linear-gradient(to right, #CCFA7F, #BFFF7F);}
.silhouette3 { display: none; }
#calculator-field-showSilhouette3:checked ~ .silhouette3 { display: block; }
.silhouette4 { background-color: #BFFF7F; display: none; }
#calculator-field-showSilhouette4:checked ~ .silhouette4 { display: block; }
.WHtR0d40 { background-color: #80FF7F;}
.silhouette5 { display: none;}
#calculator-field-showSilhouette5:checked ~ .silhouette5 { display: block; }
.silhouette6 { background-color: #BFFF7F; display: none; }
#calculator-field-showSilhouette6:checked ~ .silhouette6 { display: block; }
.silhouette7 { background-color: #EBFF7F; display: none; }
#calculator-field-showSilhouette7:checked ~ .silhouette7 { display: block; }
.silhouette8 { background-color: #EBFF7F; display: none; }
#calculator-field-showSilhouette8:checked ~ .silhouette8 { display: block; }
.silhouette9 { background-color: #FFE97F; display: none; }
#calculator-field-showSilhouette9:checked ~ .silhouette9 { display: block; }
.silhouette10 { background-color: #ffCC00; display: none; }
#calculator-field-showSilhouette10:checked ~ .silhouette10 { display: block; }
.silhouette11 { background-color: #E9A503; display: none; }
#calculator-field-showSilhouette11:checked ~ .silhouette11 { display: block; }
.silhouette12 { background-color: #DA8A05; display: none; }
#calculator-field-showSilhouette12:checked ~ .silhouette12 { display: block; }
.silhouette13 { background-color: #CB6D06; display: none; }
#calculator-field-showSilhouette13:checked ~ .silhouette13 { display: block; }
.silhouette14 { background-color: #BB5108; display: none; }
#calculator-field-showSilhouette14:checked ~ .silhouette14 { display: block; }
.silhouette15 { background-color: #BB5108; display: none; }
#calculator-field-showSilhouette15:checked ~ .silhouette15 { display: block; }
.silhouette16 { background-color: #9F1F0C; display: none; }
#calculator-field-showSilhouette16:checked ~ .silhouette16 { display: block; }
.silhouette17 { background-color: #8E000E; display: none; }
#calculator-field-showSilhouette17:checked ~ .silhouette17 { display: block; }
.silhouette18 { background-color: #8E000E; display: none; }
#calculator-field-showSilhouette18:checked ~ .silhouette18 { display: block; }
.silhouette19 { background-image: linear-gradient(to right, #8E000E, #000000); display: none; }
#calculator-field-showSilhouette19:checked ~ .silhouette19 { display: block; }
.silhouette20 { background-color: #000000; display: none; }
#calculator-field-showSilhouette20:checked ~ .silhouette20 { display: block; }
/* Hide radio buttons for health risk categories.
Show only one risk level text, based on radio buttons per risk category.
todo: change to class protected, combine with tr.protected
.tr.protected td input {display: none;}
*/
tr.healthRisk td input {display: none;}
.riskCategory0 { display: none; }
#calculator-field-showRiskCategory_0:checked ~ .riskCategory0 { display: block; }
.riskCategory4 { display: none; }
#calculator-field-showRiskCategory_4:checked ~ .riskCategory4 { display: block; }
.riskCategory5 { display: none; }
#calculator-field-showRiskCategory_5:checked ~ .riskCategory5 { display: block; }
.riskCategory6 { display: none; }
#calculator-field-showRiskCategory_6:checked ~ .riskCategory6 { display: block; }
/* loosing waistSize, flips silhouettes horizontally, from wide to lean */
.loosingWaistSize{ transform: scale(-1,1); display: inline-block; }
/* one Calculator block of the informaton hierarchy */
/*
Inspired by suggestions from Aria, an assistant by Opera based on OpenAI GPT models.
#2a2a2a - Dark gray
#4a4e69 - Steel-like dark blue
#3a3a3a - Slightly lighter gray
#5a5a5a - Gray
*/
.gradient-dark-metallic-blue {
background: linear-gradient(135deg, #2a2a2a, #4a4e69, #3a3a3a, #5a5a5a);
}
.informationHierarchyComputerBlock {background-image: linear-gradient(135deg, #2a2a2a, #4a4e69, #3a3a3a, #5a5a5a); color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: left;}
.informationHierarchyComputerBlock a {color: #C2F8FF;}
/* one Human block of the informaton hierarchy
CSS Gradient for All Skin Tones
Inspired by suggestions from Aria, an assistant by Opera based on OpenAI GPT models.
#fddbb0, Light Skin
#f4c2b0, Light Skin
#f2c6a3, Medium Light Skin
#d6a76b, Medium Light Skin
#d9a88a, Medium Skin
#c68a3c, Medium Skin
#c68a3c, Medium Dark Skin
#8d5f3e, Medium Dark Skin
#7d4b3a, Dark Skin
#4e2b20, Dark Skin
#3e272b, Very Dark Skin
*/
.informationHierarchyHumanBlock {background-image: linear-gradient(to bottom left, #fddbb0, #f4c2b0, #f2c6a3, #d6a76b, #d9a88a, #c68a3c, #c68a3c, #8d5f3e, #7d4b3a, #4e2b20, #3e272b); color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: left;}
.informationHierarchyHumanBlock a {color: #C2F8FF;}
.informationHierarchyInputGUI {background-image: linear-gradient(to top, #c68a3c, #4a4e69); color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: left;}
.informationHierarchyOutputGUI {background-image: linear-gradient(to bottom, #c68a3c, #4a4e69); color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: left;}
