Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-09 00:29:31 +00:00
Code Issues Projects Releases Wiki Activity

Added video control buttons.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-03 13:42:17 +01:00
parent 449c8f7076
commit 827d004313
5 changed files with 75 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -131,21 +131,63 @@
<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>
<p class="button-text__engraved__light 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>
<p class="button-text__engraved__light 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>
<p class="button-text__engraved__light large-button">
new
</p>
</div>
</div>
</div>
<div class="button-control__bottom">
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button">
Next
</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="rewind-button">
&#9664 &#9664
</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="forward-button">
&#9658 &#9658
</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="play-button">
&#9658
</p>
</div>
</div>
<div class="outer-edge__light">
<div class="inner-edge__light">
<p class="button-text__engraved__light large-button" id="stop-button">
&#9632
</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>

15
public/stylesheets/styles.css
View File

@ -58,7 +58,7 @@ body {
align-items: center;
}
.button-text__engraved {
.button-text__engraved, .button-text__engraved__light {
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
color: transparent;
margin: 0;
@ -66,6 +66,10 @@ body {
text-align: center;
}
.button-text__engraved__light {
text-shadow: 3px 2px 1px #B0B4A9, 1px 1px 0.5px #666C57;
}
.button-text__embossed {
color: #bfbfbf;
text-shadow: 1px 1px 1px #565656;
@ -406,9 +410,18 @@ body {
flex-direction: row;
}
.button-control__bottom {
display: flex;
flex-direction: row;
}
.button-control__top > div {
flex: 1;
background-color: #9CA193;
}
.button-control__bottom > div {
flex: 1;
}
/*# sourceMappingURL=styles.css.map */

2
public/stylesheets/styles.css.map
View File

@ -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"],"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"}
{"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;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACrCF;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;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"styles.css"}

5
sass/components/_buttons.scss
View File

@ -11,6 +11,11 @@
text-align: center;
}
.button-text__engraved__light {
@extend .button-text__engraved;
text-shadow: 3px 2px 1px #B0B4A9, 1px 1px 0.5px #666C57;
}
.button-text__embossed {
color: #bfbfbf;
text-shadow: 1px 1px 1px #565656;

9
sass/components/_control-panel.scss
View File

@ -8,7 +8,16 @@
flex-direction: row;
}
.button-control__bottom {
display: flex;
flex-direction: row;
}
.button-control__top > div {
flex: 1;
background-color: #9CA193;
}
.button-control__bottom > div {
flex: 1;
}