mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-09-07 03:54:27 +00:00
Added video control buttons.
This commit is contained in:
parent
449c8f7076
commit
827d004313
50
index.html
50
index.html
@ -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">
|
||||
◀ ◀
|
||||
</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">
|
||||
► ►
|
||||
</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">
|
||||
►
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button" id="stop-button">
|
||||
■
|
||||
</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>
|
||||
|
@ -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 */
|
||||
|
@ -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"}
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user