mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-14 03:29:31 +00:00
Fixed the CSS hellscape created this morning.
This commit is contained in:
parent
6f9ff21a63
commit
8f6dad1634
|
@ -4,7 +4,7 @@
|
|||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="public/stylesheets/styles.css"
|
||||
href="./public/stylesheets/styles.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -89,7 +89,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light">
|
||||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
|
|
|
@ -22,6 +22,7 @@ body {
|
|||
border-bottom: solid 1px #c8c8c8;
|
||||
border-radius: 1px;
|
||||
background-color: #797979;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__light, .inner-edge__light__no-padding {
|
||||
|
@ -30,6 +31,7 @@ body {
|
|||
border-left: solid 2px #c8c8c8;
|
||||
border-top: solid 2px #c8c8c8;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__dark {
|
||||
|
@ -37,6 +39,7 @@ body {
|
|||
border-right: solid 2px #3F3D43;
|
||||
border-left: solid 2px #A7A8AE;
|
||||
border-top: solid 2px #A7A8AE;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__dark, .outer-edge__dark__no-right-edge {
|
||||
|
@ -45,18 +48,22 @@ body {
|
|||
border-right: solid 1px #c1c2c6;
|
||||
border-bottom: solid 1px #c1c2c6;
|
||||
border-radius: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__light__no-padding {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__dark__no-right-edge {
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__light__no-right-edge {
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__console {
|
||||
|
@ -65,6 +72,7 @@ body {
|
|||
border-bottom: solid 1px #B1ABAB;
|
||||
border-left: solid 1px #6A6767;
|
||||
border-radius: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__console {
|
||||
|
@ -73,6 +81,7 @@ body {
|
|||
border-bottom: solid 1px #A59B9A;
|
||||
border-left: solid 1px #EAE9E9;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.control-panel__button-display {
|
||||
|
@ -112,6 +121,9 @@ body {
|
|||
|
||||
.map-display__system-wrapper {
|
||||
background-color: #448149;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-display__center-section {
|
||||
|
@ -132,14 +144,15 @@ body {
|
|||
.map-display__system-status {
|
||||
background: #438149;
|
||||
color: #ededed;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.map-display__system-status__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
border: 10px solid #438149;
|
||||
border-top: 10px solid #438149;
|
||||
border-bottom: 10px solid #438149;
|
||||
}
|
||||
|
||||
#sys-one {
|
||||
|
@ -147,7 +160,8 @@ body {
|
|||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
#sys-one, #sys-four {
|
||||
#sys-one,
|
||||
#sys-four {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
|
@ -159,7 +173,8 @@ body {
|
|||
padding: 8px 8px 4px 8px;
|
||||
}
|
||||
|
||||
#sys-three, #sys-two {
|
||||
#sys-three,
|
||||
#sys-two {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
|
@ -173,6 +188,7 @@ body {
|
|||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
justify-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__outer {
|
||||
|
@ -184,18 +200,12 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#system-icons {
|
||||
grid-area: 4/2/5/3;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4/1/5/2;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: 1/2/2/3;
|
||||
grid-area: 1/2/4/3;
|
||||
}
|
||||
|
||||
#map-display__outer {
|
||||
|
@ -210,7 +220,13 @@ body {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
#control-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.room-info__container {
|
||||
grid-area: 3/1/4/4;
|
||||
background-color: #e2eb57;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
|
@ -469,6 +485,7 @@ body {
|
|||
.button-control__bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-control__top > div {
|
||||
|
@ -480,6 +497,10 @@ body {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.control-panel__output-display {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.output-display__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC5DF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACxDF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACvCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC9DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;ACvCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
|
|
@ -5,6 +5,7 @@
|
|||
border-bottom: solid 1px #c8c8c8;
|
||||
border-radius: 1px;
|
||||
background-color: #797979;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__light {
|
||||
|
@ -13,6 +14,7 @@
|
|||
border-left: solid 2px #c8c8c8;
|
||||
border-top: solid 2px #c8c8c8;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__dark {
|
||||
|
@ -20,6 +22,7 @@
|
|||
border-right: solid 2px #3F3D43;
|
||||
border-left: solid 2px #A7A8AE;
|
||||
border-top: solid 2px #A7A8AE;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__dark {
|
||||
|
@ -28,21 +31,25 @@
|
|||
border-right: solid 1px #c1c2c6;
|
||||
border-bottom: solid 1px #c1c2c6;
|
||||
border-radius: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__light__no-padding {
|
||||
@extend .inner-edge__light;
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__dark__no-right-edge {
|
||||
@extend .outer-edge__dark;
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__light__no-right-edge {
|
||||
@extend .outer-edge__light;
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-edge__console {
|
||||
|
@ -51,6 +58,7 @@
|
|||
border-bottom: solid 1px #B1ABAB;
|
||||
border-left: solid 1px #6A6767;
|
||||
border-radius: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-edge__console {
|
||||
|
@ -59,4 +67,5 @@
|
|||
border-bottom: solid 1px #A59B9A;
|
||||
border-left: solid 1px #EAE9E9;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
.button-control__bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-control__top > div {
|
||||
|
@ -21,4 +22,8 @@
|
|||
|
||||
.button-control__bottom > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.control-panel__output-display {
|
||||
flex: 1;
|
||||
}
|
|
@ -1,5 +1,8 @@
|
|||
.map-display__system-wrapper {
|
||||
background-color: #448149;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-display__center-section {
|
||||
|
@ -21,14 +24,15 @@
|
|||
.map-display__system-status {
|
||||
background: #438149;
|
||||
color: #ededed;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.map-display__system-status__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
border: 10px solid #438149;
|
||||
border-top: 10px solid #438149;
|
||||
border-bottom: 10px solid #438149;
|
||||
}
|
||||
|
||||
#sys-one {
|
||||
|
@ -36,7 +40,8 @@
|
|||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
#sys-one, #sys-four {
|
||||
#sys-one,
|
||||
#sys-four {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
|
@ -48,7 +53,8 @@
|
|||
padding: 8px 8px 4px 8px;
|
||||
}
|
||||
|
||||
#sys-three, #sys-two {
|
||||
#sys-three,
|
||||
#sys-two {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
|
@ -56,5 +62,3 @@
|
|||
writing-mode: tb-rl;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -8,29 +8,23 @@
|
|||
|
||||
#outer-container__outer {
|
||||
max-width: 85%;
|
||||
height: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#system-icons {
|
||||
grid-area: 4 / 2 / 5 / 3;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4 / 1 / 5 / 2;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
grid-area: 1 / 2 / 4 / 3;
|
||||
}
|
||||
|
||||
#map-display__outer {
|
||||
grid-area: 1 / 1 / 3 / 2;
|
||||
grid-area: 1 / 1 / 4 / 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
@ -40,3 +34,8 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#control-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user