Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-10-16 20:24:15 +00:00
Code Issues Projects Releases Wiki Activity

More button detailing.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-01 01:25:53 +01:00
parent f153766c0e
commit 3ebe2b15c4
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app.css
View File

@ -277,6 +277,11 @@ body {
flex-direction: column; flex-direction: column;
} }
.control-pannel__button-display {
display: flex;
align-items: center;
}
h1 { h1 {
max-width: fit-content; max-width: fit-content;
background: #438149; background: #438149;
@ -285,14 +290,26 @@ h1 {
} }
.button-display__button { .button-display__button {
-moz-box-shadow: inset 0 0 5px #515151; -moz-box-shadow: inset 0 0 5px #515151;
-webkit-box-shadow: inset 0 0 5px #515151; -webkit-box-shadow: inset 0 0 5px #515151;
box-shadow: inset 0 0 5px #515151; box-shadow: inset 0 0 5px #515151;
width: fit-content; width: fit-content;
} }
.button-display__button__depressed { .button-text__embossed {
color: #BFBFBF; color: #bfbfbf;
text-shadow: 1px 1px 1px #565656; text-shadow: 1px 1px 1px #565656;
padding: 5px; padding: 5px;
margin: 0;
}
.button-text__engraved {
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
color: transparent;
margin: 0;
}
.buttons {
width: fit-content;
box-shadow: inset 0 0 2px #515151;
} }

7
index.html
View File

@ -87,7 +87,12 @@
<div class="outer-container__two"> <div class="outer-container__two">
<div class="control-pannel__button-display"> <div class="control-pannel__button-display">
<div class="button-display__button"> <div class="button-display__button">
<p class="button-display__button__depressed">VEHICLE</p> <p class="button-text__embossed">VEHICLE</p>
</div>
<div class="outer-container__one buttons">
<div class="outer-container__two">
<p class="button-text__engraved">TOUR</p>
</div>
</div> </div>
</div> </div>
<div class="control-pannel__video-screen"></div> <div class="control-pannel__video-screen"></div>