calc.css

:root {
    /* main background, dropdown backgrounds */
    --dark: #171717;
    /* tooltip background; should be same as dark, but with alpha channel */
    --dark-overlay: rgba(23, 23, 23, 0.8);
    /* visualization node backgrounds, button backgrounds */
    --medium: #212427;
    /* background of main visual area */
    --main: #272b30;
    /* input field backgrounds, collapsed dropdown borders */
    --light: #3a3f44;

    /* main foreground text color */
    --foreground: #c8c8c8;
    /* makes things stand out */
    --accent: #ff7200;
    /* slightly brighter than main foreground color */
    --bright: #f1fff2;
}
/* top-level/shared elements */
body {
    font-family: sans-serif;
    color: var(--foreground);
    background-color: var(--dark);
}
a {
    text-decoration: none;
    color: var(--accent);
}
a:active, a:hover {
    color: var(--bright);
}
input, select {
    color: var(--foreground);
    background-color: var(--light);
    padding: 0.25em;
    border: 1px solid var(--light);
    border-radius: 0.4em;
}
input:focus, select:focus {
    border-color: var(--accent);
    outline: none;
}
.right-align {
    text-align: right;
}
button.ui {
    color: var(--accent);
    background: linear-gradient(to bottom, var(--light), var(--medium));
    border: 2px outset var(--light);
    border-radius: 0.4em;
    cursor: pointer;
}
button.ui:active {
    border-style: inset;
}
button.ui:focus {
    border-color: var(--accent);
    outline: none;
}
button#debug_button {
    float: right;
}
img.icon {
    background-repeat: no-repeat;
    display: inline-block;
    height: 32px;
    width: 32px;
    vertical-align: middle;
}
/* "recent changes" box */
.changecell {
    vertical-align: top;
}
.changebox {
    margin-left: 3em;
    padding: 1em;
    border: 2px solid var(--bright);
    font-family: monospace;
}
/* tooltips */
div.tooltip {
    opacity: 1;
    z-index: 20;
}
div.tooltip .frame {
    border: 2px solid var(--bright);
    border-radius: 5px;
    background-color: var(--dark-overlay);
    padding: 0.4em;
    text-align: left;
    opacity: 1;
    z-index: 20;
}
div.tooltip h3 {
    margin: 0;
}
div.tooltip h3:not(:last-child) {
    margin-bottom: 0.5em;
}
div.tooltip div.product {
    position: relative;
    display: inline-block;
    background-color: var(--light);
    margin-top: 5px;
}
div.tooltip div.product span.count {
    position: absolute;
    right: 1px;
    bottom: 1px;
    font-size: 12px;
    font-family: monospace;
    color: var(--bright);
    text-shadow: -1px -1px 0px var(--dark), -1px 1px 0px var(--dark), 1px -1px 0px var(--dark), 1px 1px 0px var(--dark);
}
div.tooltip img.ingredient {
    background-color: var(--light);
}
/* build targets */
.targetButton {
    height: 2em;
    width: 2em;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    margin-right: 0.5em;
}
ul.targets {
    list-style-type: none;
    margin-top: 0;
}
ul.targets li {
    margin: 0.25em;
    border-radius: 0.5em;
}
ul.targets a {
    font-size: large;
    font-weight: bold;
    cursor: pointer;
}
label.selected {
    font-weight: bold;
    color: var(--bright);
}
/* settings */
.setting-label {
    text-align: right;
    vertical-align: middle;
}
.middle {
    align-self: center;
}
.top {
    vertical-align: top;
}
input.prec, input.length {
    width: 4em;
}
input.mprod {
    width: 4em;
}
/* factories tab */
input.beacon {
    width: 4em;
}
#totals {
    border-collapse: collapse;
}
tr.display-row td.pad, th.pad {
    padding-left: 1em;
}
tr.display-row img.recipe-icon {
    cursor: pointer;
}
tr.display-row td.pad-right {
    padding-right: 1em;
}
tr.display-row .dropdown, tr.display-row .dropdown + .spacer {
    margin-left: 5px;
    margin-right: 5px;
}
tr.display-row .dropdown + .spacer {
    padding-left: 2px;
    padding-right: 2px;
}
tr.display-row td, tr.factory-header th {
    padding-top: 8px;
    padding-bottom: 8px;
}
tr.recipe-row td, tr.group-top-row td, tr.power-row td {
    border-top: 1px solid var(--light);
}
tr.group-row td.leftmost {
    border-left: 1px solid var(--light);
}
tr.ignore img.display {
    opacity: 0.2;
}
tr.no-mods td.module * {
    display: none;
}
td.waste-hide, th.waste-hide {
    display: none;
}
span.displaylink {
    font-size: x-small;
}
tr.display-row button.copy {
    padding: 0px;
    height: 32px;
}
/* items tab */
input.pipe {
    width: 4em;
}
input.pipeLength {
    width: 5em;
}
svg.popout {
    color: var(--accent);
    width: 16;
    height: 16;
}
/* breakdown */
.breakdown-open .breakdown-arrow {
    transform: rotate(90deg);
}
.breakdown-arrow {
    color: var(--foreground);
    cursor: pointer;
    transition: transform 0.25s;
}
.breakdown-arrow:hover {
    color: var(--accent);
}
.breakdown {
    display: none;
    height: 0;
}
.breakdown.breakdown-open {
    display: table-row;
    height: auto;
    transition: height 0.25s;
}
.breakdown table {
    border-collapse: collapse;
    border-left: solid 0.5em var(--medium);
    border-right: solid 0.5em var(--medium);
    background: var(--medium);
    border-radius: 0.25em;
}
.usage-arrow {
    vertical-align: middle;
}
.breakdown-last-input td {
    border-bottom: 1px solid var(--light);
}
/* tabs */
div.tabs {
    overflow: hidden;
}

div.tabs button.tab_button {
    color: var(--accent);
    background-color: inherit;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.5em;
}

div.tabs button.tab_button:hover {
    background-color: var(--medium)
}

div.tabs button.active, div.tabs button.active:hover {
    color: var(--bright);
    background-color: var(--main);
}

div.tab {
    display: none;
    padding: 1em;
    background-color: var(--main);
}
/* visualizer settings */
#graph-wrapper {
    display: grid;
    grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
    gap: 1em 0.5em;
}
#graph-wrapper .graph-button {
    grid-row: 1 / 2;
    color: var(--accent);
    cursor: pointer;
}
#graph-wrapper .graph-button-span:hover {
    color: var(--bright);
}
#graph-wrapper .graph-button .gear {
    vertical-align: middle;
}
#graph-wrapper .graph-button-span::after {
    content: "\300B";
    font-size: 20px;
    vertical-align: middle;
}
#graph-wrapper.open .graph-button-span::after {
    content: "\300A";
}
#graph-wrapper .graph-setting-box {
    display: none;
    padding: 0.5em;
    border: 2px solid var(--accent);
    border-radius: 5px;
}
#graph-wrapper.open .graph-setting-box {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    display: block;
}
#graph-wrapper.open .graph-settings {
    display: grid;
    grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
    grid-template-rows: minmax(auto, max-content) minmax(auto, max-content);
    gap: 1em 0.5em;
}
#graph-wrapper .graph-content {
    grid-row: 2 / 3;
}
/* visualizer */
g.node rect {
    stroke-width: 1px;
}
g.overlay rect {
    cursor: pointer;
}
g.node .colon {
    stroke: none;
    fill: var(--foreground);
}
rect.nodeHighlight {
    stroke: var(--accent);
}
g.edgePathHighlight .highlighter {
    stroke: var(--accent);
}
svg.sankey g.edgePathHighlight .highlighter {
    stroke-opacity: 0.7;
}
g.edgePathHighlight rect.highlighter {
    fill-opacity: 1;
}
g.edgePathFuel path {
    stroke-dasharray: 10,5;
}
text {
    stroke: none;
    fill: var(--foreground);
}
svg.sankey text {
    font: 12px sans-serif;
}
div.graph {
    min-width: max-content;
    min-width: -moz-max-content;
}
/* about */
.about-content {
    max-width: 40em;
}
.about-content h3 {
    color: var(--bright);
}
/* dropdowns */
.dropdownWrapper .dropdown .search {
    display: none;
    width: 100%;
    padding-left: 0.4em;
    margin-bottom: 0.4em;
}
.dropdownWrapper.open .dropdown .search {
    display: block;
}
.dropdownWrapper.open div.itemDropdown {
    height: 400px;
    width: 380px;
    overflow-y: scroll;
    transition: height 0.3s;
}
/* debug */
#debug_tab table td.zero-out {
    background-color: var(--dark);
}
#debug_tab table td.ignore {
    color: var(--accent);
}
/* footer */
#footer {
    border-top: 3px solid var(--accent);
    padding-top: 2px;
    background-color: var(--medium);
}