body { font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif; max-width: 600px; margin: 0; -webkit-font-smoothing: antialiased; font-size: 1.125em; color: #333; line-height: 1.5em; } h1, h2, h3 { color: #000; } h1 { font-size: 2.5em } h2 { font-size: 2em } h3 { font-size: 1.5em } a { text-decoration: none; color: #09f; } a:hover { text-decoration: underline; } #main-table { /*position: fixed; top: 0; left: 0;*/ } table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 0; } th { text-align: center; min-width: 40px; } td { text-align: right; position: relative; } td input { border: none; padding: 5px; width: 80px; } td input:hover { background-color: #ccc; } td input:focus { background-color: #ccf; } td input:not(:focus) { text-align: right; } #controls { --controls-width: 75px; --controls-padding: 5px; --controls-opener-width: 15px; } #controls > div, #controls > button { position: fixed; overflow: hidden; } /* TODO: design square logo for microtables */ #main-logo { background-color: lightblue; z-index: 999; left: 0; bottom: 0; padding: var(--controls-padding); height: var(--controls-width); width: var(--controls-width); font-size: xxx-large; font-weight: bold; text-align: center; border: 1px solid black; } #main-logo > img { width: 100%; height:100%; } #left-controls-button, #bottom-controls-button { border: 1px solid black; border-radius: 2px; text-align: center; font-weight: bold; font-size: xx-large; background-color: white; cursor: pointer; user-select: none; } #left-controls-button { left: 0; width: calc(var(--controls-width) + 2 * var(--controls-padding) - 2px); height: var(--controls-opener-width); z-index: 999; bottom: calc(var(--controls-width) + 2 * var(--controls-padding)); line-height: 3px; text-align: right; } #bottom-controls-button { bottom: 0; height: calc(var(--controls-width) + 2 * var(--controls-padding) - 2px); width: var(--controls-opener-width); z-index: 999; left: calc(var(--controls-width) + 2 * var(--controls-padding)); } #controls-left { background-color: pink; z-index: 998; top: 0; left: calc(-1 * var(--controls-width) - 2 * var(--controls-padding)); padding: 5px; height: calc(100vh - var(--controls-padding)); width: var(--controls-width); border-right: 1px solid black; } /*TODO: link left controls with position of the whole table*/ #controls-left.open { left: 0; } #controls-bottom { background-color: lightblue; z-index: 998; left: 0; bottom: calc(-1 * var(--controls-width) - 2 * var(--controls-padding)); height: var(--controls-width); padding: var(--controls-padding); padding-left: calc(var(--controls-width) + 3 * var(--controls-padding) + var(--controls-opener-width)); width: calc(100vw - var(--controls-width) - 4 * var(--controls-padding) - var(--controls-opener-width)); border-top: 1px solid black; } #controls-bottom.open { bottom: 0; } .control-group { float: left; margin: 5px; background-color: lightgreen; } .control-label { font-size: x-small; } .smartborder { width: calc(100% + 2px); height: calc(100% + 2px); border: 3px solid blue; position: absolute; left: -4px; top: -4px; background: none; z-index: 999; /*pointer-events: none;*/ } td input:not(:focus) + .smartborder { visibility: hidden; } .smartborder .button { --button-size: 20px; --half-button-size: 10px; /*pointer-events: all;/* TODO check this (what is "initial"?) */ width: var(--button-size); height: var(--button-size); background-color: blue; color: white; border-radius: var(--half-button-size); position: absolute; } .extendrange.button { left: 100%; top: 100%; } .fillrange.button { top: 100%; left: calc(50% - var(--half-button-size)); } .moverange.button { top: calc(50% - var(--half-button-size)); left: calc(0px - var(--button-size)); } .emptyrange.button { top: calc(0px - var(--button-size)); left: calc(100% - var(--button-size) - 5px); } .deleterange.button { top: calc(0px - var(--button-size)); left: 100%; } .copyrange.button { top: calc(0px - var(--button-size)); left: 0; }