mirror of
https://github.com/Krafpy/KSP-MGA-Planner.git
synced 2025-12-12 07:40:41 -08:00
b95a4da37d
- Added velocity vector calculation in `Orbit` class - Added item for ejection maneuver to display ejection angle
573 lines
7.3 KiB
CSS
573 lines
7.3 KiB
CSS
/* Global styles */
|
|
|
|
body
|
|
{
|
|
font-family: "Helvetica Neue", Helvetica;
|
|
/*background-color: #222425;*/
|
|
background: #1c1e1f;
|
|
color: rgb(200, 195, 188);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
h1, .calculation-panel-title
|
|
{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#github-link
|
|
{
|
|
float: right;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.calculation-subtitle
|
|
{
|
|
margin-top: 5px;
|
|
color: #b3afaa;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px solid #414242;
|
|
}
|
|
|
|
h6
|
|
{
|
|
margin-top: 0px;
|
|
color: #999692;
|
|
}
|
|
|
|
.error-msg
|
|
{
|
|
color: rgb(214, 52, 52);
|
|
}
|
|
|
|
.progress-msg
|
|
{
|
|
color: yellow;
|
|
}
|
|
|
|
strong
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
#container
|
|
{
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 1175px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
#canvas-top-bar
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#canvas-top-bar .time-selector
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Editor forms styles */
|
|
|
|
#main-content
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#calculator-panel, #result-panel
|
|
{
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#calculator-panel
|
|
{
|
|
margin-right: 30px;
|
|
min-width: 395px;
|
|
}
|
|
|
|
#calculator-panel h2
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
select
|
|
{
|
|
width: 15em;
|
|
font-size: inherit;
|
|
border: 1px solid black;
|
|
background-color: #222425;
|
|
scrollbar-color: #3b4042 #222425;
|
|
color: inherit;
|
|
border-color: rgb(67, 73, 76);
|
|
height: 2em;
|
|
}
|
|
|
|
select option
|
|
{
|
|
color: inherit;
|
|
}
|
|
|
|
select optgroup
|
|
{
|
|
color: inherit;
|
|
}
|
|
|
|
/* Time selector */
|
|
|
|
.time-selector
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.control-group .time-selector
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.time-input
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
width: 70px;
|
|
font-size: 0.9em;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.last-time-input
|
|
{
|
|
margin-right: 0;
|
|
}
|
|
|
|
.time-input label
|
|
{
|
|
color: #b3afaa;
|
|
margin-bottom: 5px;
|
|
font-size: 0.83em;
|
|
}
|
|
|
|
/* Editor's inputs */
|
|
|
|
input[type=number]
|
|
{
|
|
background-color: rgb(49, 51, 54);
|
|
color: white;
|
|
border: 1px solid #3c3d3d;
|
|
width: 5em;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
input[type="text"]
|
|
{
|
|
box-sizing: border-box;
|
|
width: 15em;
|
|
font-size: inherit;
|
|
border: 1px solid black;
|
|
background-color: #222425;
|
|
scrollbar-color: #3b4042 #222425;
|
|
color: inherit;
|
|
border-color: rgb(67, 73, 76);
|
|
height: 2em;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
input[type="text"]::placeholder
|
|
{
|
|
font-style: italic;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.control-group
|
|
{
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-selector-group
|
|
{
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.control-group .control-label
|
|
{
|
|
width: 140px;
|
|
text-align: right;
|
|
padding-right: 17px;
|
|
}
|
|
|
|
.time-selector-group .control-label
|
|
{
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.control-group .number-input
|
|
{
|
|
width: 5em;
|
|
}
|
|
|
|
.controls
|
|
{
|
|
width: auto;
|
|
}
|
|
|
|
.error-msg, .progress-msg
|
|
{
|
|
max-width: 356px;
|
|
}
|
|
|
|
#dep-params-subtitle
|
|
{
|
|
margin-top: 25px;
|
|
}
|
|
|
|
|
|
/* Editor forms' action buttons */
|
|
|
|
.form-actions
|
|
{
|
|
margin-bottom: 18px;
|
|
margin-top: 20px;
|
|
background-color: #2c2e2e;
|
|
border-top: 1px solid #414242;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#sequence-generator
|
|
{
|
|
border: none;
|
|
background-color: #2c2e2e7e;
|
|
}
|
|
|
|
.submit-btn, .stop-btn
|
|
{
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
height: 28px;
|
|
font-size: inherit;
|
|
border: 1px solid rgb(54, 54, 54);
|
|
}
|
|
|
|
.submit-btn:hover, .stop-btn:hover
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.submit-btn:active, .stop-btn:active
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.submit-btn:disabled, .stop-btn:disabled
|
|
{
|
|
cursor: default;
|
|
}
|
|
|
|
.stop-btn
|
|
{
|
|
background-image: linear-gradient(rgb(68, 0, 0), rgb(122, 0, 0));
|
|
}
|
|
|
|
.stop-btn:hover
|
|
{
|
|
background-image: linear-gradient(rgb(68, 0, 0), rgb(102, 0, 0));
|
|
}
|
|
|
|
.stop-btn:active
|
|
{
|
|
background-image: none;
|
|
background-color: rgb(68, 0, 0);
|
|
}
|
|
|
|
/* Sequence generation button */
|
|
|
|
#sequence-btn
|
|
{
|
|
margin-right: 5px;
|
|
background-image: linear-gradient(rgb(82, 86, 88), rgb(59, 63, 66));
|
|
}
|
|
|
|
#sequence-btn:hover
|
|
{
|
|
background-image: linear-gradient(rgb(70, 73, 75), rgb(59, 63, 66));
|
|
}
|
|
|
|
#sequence-btn:active, #sequence-btn:disabled
|
|
{
|
|
background-image: none;
|
|
background-color: rgb(59, 63, 66);
|
|
}
|
|
|
|
/* Trajectory search button */
|
|
|
|
#search-btn
|
|
{
|
|
margin-right: 5px;
|
|
background-image: linear-gradient(rgb(0, 93, 163), rgb(0, 60, 105));
|
|
}
|
|
|
|
#search-btn:hover
|
|
{
|
|
background-image: linear-gradient(rgb(0, 78, 138), rgb(0, 60, 105));
|
|
}
|
|
|
|
#search-btn:active, #search-btn:disabled
|
|
{
|
|
background-image: none;
|
|
background-color: rgb(0, 60, 105);
|
|
}
|
|
|
|
/* Chart */
|
|
|
|
#evolution-plot
|
|
{
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
/* Result panel */
|
|
|
|
#system-control-infos
|
|
{
|
|
font-size: 0.75em;
|
|
color: rgba(255, 255, 255, 0.459);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.control-group p
|
|
{
|
|
margin: 0;
|
|
}
|
|
|
|
#result-panel
|
|
{
|
|
border-top: 1px solid #414242;
|
|
}
|
|
|
|
#result-panel h2
|
|
{
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
#result-controls .control-label
|
|
{
|
|
width: 105px;
|
|
}
|
|
|
|
input[type="range"]
|
|
{
|
|
width: 15.8em;
|
|
}
|
|
|
|
#result-sub-panels
|
|
{
|
|
height: 127px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.result-details
|
|
{
|
|
margin-left: 0;
|
|
}
|
|
|
|
.result-details ul
|
|
{
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.result-details h3
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
.result-details li strong
|
|
{
|
|
display: inline-block;
|
|
width: 127px;
|
|
}
|
|
|
|
.clickable-date
|
|
{
|
|
color: rgb(86, 169, 224);
|
|
}
|
|
|
|
.clickable-date:hover
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
#result-panel-header
|
|
{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#steps-slider-control-group
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#steps-slider-controls
|
|
{
|
|
width: auto;
|
|
}
|
|
|
|
#displayed-steps-slider
|
|
{
|
|
margin-bottom: 0;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#result-controls .controls
|
|
{
|
|
width: auto;
|
|
}
|
|
|
|
#result-controls
|
|
{
|
|
width: 413px;
|
|
}
|
|
|
|
#insertion-checkbox-container
|
|
{
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#insertion-checkbox-container .controls
|
|
{
|
|
margin-left: 157px;
|
|
}
|
|
|
|
#insertion-checkbox
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
|
|
p
|
|
{
|
|
font-size: 13px;
|
|
margin-top: 7px;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
em
|
|
{
|
|
font-style: italic;
|
|
}
|
|
|
|
article h2
|
|
{
|
|
font-size: 1.9em;
|
|
}
|
|
|
|
article h3
|
|
{
|
|
font-size: 1.3em;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
a:link
|
|
{
|
|
color: rgb(86, 169, 224);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover
|
|
{
|
|
color: rgb(116, 190, 240);
|
|
}
|
|
|
|
a:visited
|
|
{
|
|
color: rgb(161, 70, 221);
|
|
}
|
|
|
|
.ref-to-paragraph
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
|
|
article
|
|
{
|
|
font-size: 13px;
|
|
}
|
|
|
|
article ul, article ol
|
|
{
|
|
padding-left: 17px;
|
|
}
|
|
|
|
article li
|
|
{
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#example-image-container
|
|
{
|
|
border-style: solid;
|
|
border-color: #414242;
|
|
border-width: 1px;
|
|
width: 100%;
|
|
margin: 0;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
#example-image-container img
|
|
{
|
|
max-width: 95%;
|
|
height: auto;
|
|
display:block;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#example-image-container figcaption
|
|
{
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
footer
|
|
{
|
|
margin-top: 50px;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
border-top: 1px solid #414242;
|
|
}
|
|
|
|
footer p
|
|
{
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
} |