Skip to content

satisfactory-calculator.com production planner: full-width visualization w/ floating control-panel by ELLIOTTCABLE

Screenshot of satisfactory-calculator.com production planner: full-width visualization w/ floating control-panel

Details

AuthorELLIOTTCABLE

LicenseNo License

Categorysatisfactory-calculator.com > production planner

Created

Updated

Size617 B

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This makes the actual production-planner full-page-width, by floating the control-panel and inputs/outputs pane on top of the visualization.

Notes

I'm pretty bad at CSS, sorry if this breaks things.

Source code

/* ==UserStyle==
@name         satisfactory-calculator.com
@version      20230508.20.17
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://satisfactory-calculator.com/en/planners/production") {
main > .container-fluid > .row {
   position: relative;
}

main > .container-fluid > .row > .col-sm-4 {
   flex: 0 0 20%;
   max-width: 20%;
   position: absolute;
   top: 5rem;
   right: 1rem;
}

main > .container-fluid > .row > .col-sm-8 {
   flex: 0 0 100%;
   max-width: 100%;
}

#serializeNewValues > .card {
   border-color: rgba(0, 0, 0, 0.5);
   border-width: 3px;
}
}

Reviews

No reviews yet.