BODY { --feed_ratio: 2.5; --display_bar_height: 20px; --border-color: #ccc; padding-bottom: var(--display_bar_height); } H1 { background-color:blue; color:white; height:calc(108px * (var(--feed_ratio) - 1)); margin-top:0; padding:5px; margin-bottom:108px; width:calc(100% - (192px * var(--feed_ratio))); } .ii_block { border:3px solid var(--border-color); margin-bottom:5px; padding:2px; border-radius:3px; } .ii_block_name { background-color:var(--border-color); text-align:center; font-weight:bold; color:#fff; margin:-2px; margin-bottom:3px; } .ii_info { color:#333; } .ii { width:100%; position:relative; display:flex; } .ii_key_DIV { flex:0 0 40vw; font-weight:bold; } .ii_value_DIV { flex: 0 0 40vw; text-align:right; } .ii_value { width:75%; } .feed { position:absolute; top:10px; right:0px; width:calc(192px * var(--feed_ratio)); height:calc(108px * var(--feed_ratio)); z-index:10; } .ii_explain { height:25px; overflow:hidden; width:25px; position:relative; } .ii_explain:hover { height: auto; position: absolute; left: 10%; width: 80%; border-radius: 3px; padding: 5px; background-color: #ccc; z-index: 10; border: 3px solid blue; font-family: monospace; white-space:pre-wrap; } .ii_explain:hover PRE { white-space:pre-wrap; } .ii_explain:hover:after { content:""; border:none; margin:0; padding:0; width:0; height:0; } .ii_explain:after { color:white; content:"?"; text-align:center; background-color:blue; border:2px solid #ccc; border-radius:3px; padding-left:2px; padding-right:2px; position:absolute; left:0; top:0; width:100%; height:100%; } .revert_DIV { display:flex; width:100%; } .revert_DIV DIV:nth-child(1) { width:30px; } .current_revert { background-color:#edf054; } #display_BAR { position:fixed; bottom:0; background-color:blue; border-top:1px solid lightblue; color:#fff; display:flex; width:100%; height:var(--display_bar_height); } #display_BAR DIV { padding-right:15px; } .ver_DIV { padding-left:60px; min-width:120px; font-family:monospace; flex: 1 0 120px; } .ver_DIV:before { content:attr(vertype); font-weight:bold; padding-right:10px; } .ver_DIV[vertype="wz_mini"] { flex:1 0 400px; } .fail_val { background-color:#fcc; }