mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-07-05 22:28:57 +00:00
Created grid and loading spinner elements.
This commit is contained in:
parent
033f3537b4
commit
8025330f37
21
index.html
21
index.html
@ -11,8 +11,8 @@
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<div id="grid-container">
|
||||
<div class="outer-edge__dark-no-right-edge" id="map-display">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__dark__no-right-edge" id="map-display">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="map-display__container">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-one" class="map-display__system-status">
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light-no-right-edge" id="console-display">
|
||||
<div class="outer-edge__light__no-right-edge" id="console-display">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__dark">
|
||||
<div class="inner-edge__light">
|
||||
@ -108,7 +108,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-pannel__video-screen"></div>
|
||||
<div class="control-pannel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen">
|
||||
<div class="video-screen_loading-spinner__wrapper">
|
||||
<div class="video-screen__loading-spinner"></div>
|
||||
</div>
|
||||
<div class="video-screen__info-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-pannel__button-control"></div>
|
||||
<div class="control-pannel__button-display"></div>
|
||||
<div class="control-pannel__output-display"></div>
|
||||
@ -120,5 +131,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,4 +1,6 @@
|
||||
* {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -7,7 +9,7 @@ body {
|
||||
margin: 0 100px;
|
||||
}
|
||||
|
||||
.outer-edge__light, .outer-edge__light-no-right-edge {
|
||||
.outer-edge__light, .outer-edge__light__no-right-edge {
|
||||
border-left: solid 1px #585356;
|
||||
border-top: solid 1px #585356;
|
||||
border-right: solid 1px #c8c8c8;
|
||||
@ -16,7 +18,7 @@ body {
|
||||
background-color: #797979;
|
||||
}
|
||||
|
||||
.inner-edge__light {
|
||||
.inner-edge__light, .inner-edge__light__no-padding {
|
||||
border-bottom: solid 2px #4a4546;
|
||||
border-right: solid 2px #4a4546;
|
||||
border-left: solid 2px #c8c8c8;
|
||||
@ -31,7 +33,7 @@ body {
|
||||
border-top: solid 2px #A7A8AE;
|
||||
}
|
||||
|
||||
.outer-edge__dark, .outer-edge__dark-no-right-edge {
|
||||
.outer-edge__dark, .outer-edge__dark__no-right-edge {
|
||||
border-left: solid 1px #302a2a;
|
||||
border-top: solid 1px #302a2a;
|
||||
border-right: solid 1px #c1c2c6;
|
||||
@ -39,11 +41,15 @@ body {
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.outer-edge__dark-no-right-edge {
|
||||
.inner-edge__light__no-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.outer-edge__dark__no-right-edge {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.outer-edge__light-no-right-edge {
|
||||
.outer-edge__light__no-right-edge {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@ -67,7 +73,7 @@ body {
|
||||
|
||||
.button__depressed {
|
||||
width: fit-content;
|
||||
box-shadow: inset 0 0 2px #4C4C4C;
|
||||
box-shadow: inset 0 0 8px #4C4C4C;
|
||||
}
|
||||
|
||||
.map-display__system-wrapper {
|
||||
@ -83,15 +89,17 @@ body {
|
||||
}
|
||||
|
||||
.map-display__container {
|
||||
width: 500px;
|
||||
border-bottom: 8px solid #438149;
|
||||
border-top: 8px solid #438149;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: space-between;
|
||||
background-color: black;
|
||||
background-size: 40px 40px;
|
||||
background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.system-text {
|
||||
.map-display__system-status {
|
||||
max-width: fit-content;
|
||||
background: #438149;
|
||||
color: #ededed;
|
||||
@ -307,4 +315,50 @@ body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.video-screen {
|
||||
background-color: #606971;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid black;
|
||||
/* borders on it too */
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner::before,
|
||||
.video-screen__loading-spinner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner::before {
|
||||
left: 0;
|
||||
background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%);
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner::after {
|
||||
left: 50%;
|
||||
background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%);
|
||||
}
|
||||
|
||||
.video-screen_loading-spinner__wrapper {
|
||||
background-color: #40c14c;
|
||||
border: 2px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
@ -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"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;ACNF;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;;;ACvCF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACrBF;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;;;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","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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;ACRF;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;;;AC5CF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACrBF;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;;;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;;;AChHF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;AAAyB;;;AAG3B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
|
@ -1,8 +1,10 @@
|
||||
* {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
margin: 0 100px;
|
||||
}
|
||||
}
|
||||
|
@ -30,12 +30,17 @@
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.outer-edge__dark-no-right-edge {
|
||||
.inner-edge__light__no-padding {
|
||||
@extend .inner-edge__light;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.outer-edge__dark__no-right-edge {
|
||||
@extend .outer-edge__dark;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.outer-edge__light-no-right-edge {
|
||||
.outer-edge__light__no-right-edge {
|
||||
@extend .outer-edge__light;
|
||||
border-right: none;
|
||||
}
|
||||
|
@ -18,6 +18,6 @@
|
||||
|
||||
.button__depressed {
|
||||
width: fit-content;
|
||||
box-shadow: inset 0 0 2px #4C4C4C;
|
||||
box-shadow: inset 0 0 8px #4C4C4C;
|
||||
}
|
||||
|
||||
|
@ -11,15 +11,18 @@
|
||||
}
|
||||
|
||||
.map-display__container {
|
||||
width: 500px;
|
||||
border-bottom: 8px solid #438149;
|
||||
border-top: 8px solid #438149;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: space-between;
|
||||
background-color: black;
|
||||
background-size: 40px 40px;
|
||||
background-image: linear-gradient(to right, white 1px, transparent 1px),
|
||||
linear-gradient(to bottom, white 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.system-text {
|
||||
.map-display__system-status {
|
||||
max-width: fit-content;
|
||||
background: #438149;
|
||||
color: #ededed;
|
||||
|
45
sass/components/_video-screen.scss
Normal file
45
sass/components/_video-screen.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.video-screen {
|
||||
background-color: #606971;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid black; /* borders on it too */
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner::before,
|
||||
.video-screen__loading-spinner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
}
|
||||
.video-screen__loading-spinner::before {
|
||||
left: 0;
|
||||
background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%);
|
||||
}
|
||||
.video-screen__loading-spinner::after {
|
||||
left: 50%;
|
||||
background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%);
|
||||
}
|
||||
|
||||
.video-screen_loading-spinner__wrapper {
|
||||
background-color: #40c14c;
|
||||
border: 2px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.video-screen__info-text {
|
||||
}
|
@ -5,4 +5,5 @@
|
||||
@import "./components/display-text";
|
||||
@import "./components/layout";
|
||||
@import "./components/level-info";
|
||||
@import "./components/screen-display";
|
||||
@import "./components/screen-display";
|
||||
@import "./components/video-screen";
|
Loading…
Reference in New Issue
Block a user