mirror of
https://github.com/Krafpy/KSP-MGA-Planner.git
synced 2025-12-12 07:40:41 -08:00
Modified file structure.
Modified the file structure to have the `index.html` at the root of the repository. Needed for Github Pages.
This commit is contained in:
Krafpy
488
style.css
Normal file
488
style.css
Normal file
@@ -0,0 +1,488 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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: 1155px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#data-update
|
||||
{
|
||||
font-weight: bold;
|
||||
color: rgba(255, 255, 255, 0.459);
|
||||
}
|
||||
|
||||
#canvas-top-bar
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* 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: 375px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.control-group
|
||||
{
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time-selector-group
|
||||
{
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.control-group .control-label
|
||||
{
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
.time-selector-group .control-label
|
||||
{
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.control-group .number-input
|
||||
{
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#maneuvre-details
|
||||
{
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
#maneuvre-details ul
|
||||
{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#maneuvre-details h3
|
||||
{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#maneuvre-details li strong
|
||||
{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#result-departure-date, #maneuvre-date
|
||||
{
|
||||
color: rgb(86, 169, 224);
|
||||
}
|
||||
|
||||
#result-departure-date:hover, #maneuvre-date:hover
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
|
||||
p
|
||||
{
|
||||
font-size: 13px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
em
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
article h1
|
||||
{
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
article h2
|
||||
{
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user