mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-10-16 05:23:50 +00:00
Started work on video screen buttons.
- Fixed spelling typo.
This commit is contained in:
parent
e1fad0cce9
commit
449c8f7076
45
index.html
45
index.html
@ -88,27 +88,27 @@
|
||||
</div>
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light">
|
||||
<div class="control-pannel__button-display">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed">VEHICLE</p>
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved">TOUR</p>
|
||||
<p class="button-text__engraved small-button">TOUR</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved">POWER</p>
|
||||
<p class="button-text__engraved small-button">POWER</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved">TIME</p>
|
||||
<p class="button-text__engraved small-button">TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-pannel__video-screen">
|
||||
<div class="control-panel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen">
|
||||
@ -116,16 +116,39 @@
|
||||
<div class="video-screen__loading-spinner"></div>
|
||||
</div>
|
||||
<div class="video-screen__text-wrapper">
|
||||
<h3 class="video-screen__header">rebooting system...</h3>
|
||||
<p class="video-screen__info-text">volume --- nedryland jp</p>
|
||||
<h3 class="video-screen__header">
|
||||
rebooting system...
|
||||
</h3>
|
||||
<p class="video-screen__info-text">
|
||||
volume --- nedryland jp
|
||||
</p>
|
||||
</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>
|
||||
<div class="control-panel__button-control">
|
||||
<div class="button-control__top">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved large-button">hold</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved large-button">quit</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved large-button">new</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__bottom"></div>
|
||||
</div>
|
||||
<div class="control-panel__button-display"></div>
|
||||
<div class="control-panel__output-display"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light" id="system-icons">
|
||||
|
@ -53,7 +53,7 @@ body {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.control-pannel__button-display {
|
||||
.control-panel__button-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -62,18 +62,30 @@ body {
|
||||
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
|
||||
color: transparent;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-text__embossed {
|
||||
color: #bfbfbf;
|
||||
text-shadow: 1px 1px 1px #565656;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button__depressed {
|
||||
width: fit-content;
|
||||
box-shadow: inset 0 0 8px #4C4C4C;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.small-button {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.large-button {
|
||||
padding: 2px 20px;
|
||||
}
|
||||
|
||||
.map-display__system-wrapper {
|
||||
@ -315,11 +327,16 @@ body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.control-panel__video-screen {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.video-screen {
|
||||
background-color: #606971;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.video-screen__loading-spinner {
|
||||
@ -376,6 +393,22 @@ body {
|
||||
.video-screen__info-text {
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.control-panel__button-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button-control__top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.button-control__top > div {
|
||||
flex: 1;
|
||||
background-color: #9CA193;
|
||||
}
|
||||
|
||||
/*# 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","../../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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;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"],"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;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChCF;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;;;AAGF;EACE;EACA;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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC/DF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"styles.css"}
|
@ -1,4 +1,4 @@
|
||||
.control-pannel__button-display {
|
||||
.control-panel__button-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -7,17 +7,29 @@
|
||||
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
|
||||
color: transparent;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-text__embossed {
|
||||
color: #bfbfbf;
|
||||
text-shadow: 1px 1px 1px #565656;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button__depressed {
|
||||
width: fit-content;
|
||||
box-shadow: inset 0 0 8px #4C4C4C;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.small-button {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.large-button {
|
||||
padding: 2px 20px;
|
||||
}
|
||||
|
||||
|
14
sass/components/_control-panel.scss
Normal file
14
sass/components/_control-panel.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.control-panel__button-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button-control__top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.button-control__top > div {
|
||||
flex: 1;
|
||||
background-color: #9CA193;
|
||||
}
|
@ -1,3 +1,7 @@
|
||||
.control-panel__video-screen {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.video-screen {
|
||||
background-color: #606971;
|
||||
display: flex;
|
||||
|
@ -6,4 +6,5 @@
|
||||
@import "./components/layout";
|
||||
@import "./components/level-info";
|
||||
@import "./components/screen-display";
|
||||
@import "./components/video-screen";
|
||||
@import "./components/video-screen";
|
||||
@import "./components/control-panel";
|
Loading…
Reference in New Issue
Block a user