Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2025-02-11 00:31:38 +00:00
Code Issues Projects Releases Wiki Activity

Adjusted border styling to be more responsive.

Browse Source
This commit is contained in:
Max Stevenson 2020-09-01 21:39:09 -05:00
parent 1d539ade78
commit bcbc9dc81c
6 changed files with 97 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -306,18 +306,18 @@
<p class="button-text__embossed small-button">VEHICLE</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<div class="outer-edge__light-buttons buttons">
<div class="inner-edge__light-buttons">
<p class="button-text__engraved small-button">TOUR</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<div class="outer-edge__light-buttons buttons">
<div class="inner-edge__light-buttons">
<p class="button-text__engraved small-button">POWER</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<div class="outer-edge__light-buttons buttons">
<div class="inner-edge__light-buttons">
<p class="button-text__engraved small-button">TIME</p>
</div>
</div>

20
public/scripts/app.js
View File

@ -211,8 +211,8 @@ enablePower();
let prevButton = document.querySelector("div.button__depressed");
prevButton.classList.remove("button__depressed");
prevButton.classList.add("outer-edge__light");
prevButton.firstElementChild.classList.add("inner-edge__light");
prevButton.classList.add("outer-edge__light-buttons");
prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
prevButton.firstElementChild
.querySelector("p")
.classList.remove("button-text__embossed");
@ -229,8 +229,8 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
button.addEventListener("click", event => {
let prevButton = document.querySelector("div.button__depressed");
prevButton.classList.remove("button__depressed");
prevButton.classList.add("outer-edge__light");
prevButton.firstElementChild.classList.add("inner-edge__light");
prevButton.classList.add("outer-edge__light-buttons");
prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
prevButton.firstElementChild
.querySelector("p")
.classList.remove("button-text__embossed");
@ -238,8 +238,8 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
.querySelector("p")
.classList.add("button-text__engraved");
button.classList.add("button__depressed");
button.classList.remove("outer-edge__light");
button.firstElementChild.classList.remove("inner-edge__light");
button.classList.remove("outer-edge__light-buttons");
button.firstElementChild.classList.remove("inner-edge__light-buttons");
button.firstElementChild
.querySelector("p")
.classList.add("button-text__embossed");
@ -262,8 +262,8 @@ for (let i = 0; i < bottomControlPanelButtons.length; i++) {
let prevButton = bottomControlPanelButtons[k];
if (prevButton.classList.contains("button__depressed")) {
prevButton.classList.remove("button__depressed");
prevButton.classList.add("outer-edge__light");
prevButton.firstElementChild.classList.add("inner-edge__light");
prevButton.classList.add("outer-edge__light-buttons");
prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
prevButton.firstElementChild
.querySelector("p")
.classList.remove("button-text__embossed");
@ -273,8 +273,8 @@ for (let i = 0; i < bottomControlPanelButtons.length; i++) {
}
}
button.classList.add("button__depressed");
button.classList.remove("outer-edge__light");
button.firstElementChild.classList.remove("inner-edge__light");
button.classList.remove("outer-edge__light-buttons");
button.firstElementChild.classList.remove("inner-edge__light-buttons");
button.firstElementChild
.querySelector("p")
.classList.add("button-text__embossed");

57
public/stylesheets/styles.css
View File

@ -5,6 +5,10 @@
box-sizing: border-box;
}
html {
font-size: 16px;
}
html,
body {
margin: 0;
@ -105,37 +109,56 @@ body {
}
.outer-edge__light, .outer-edge__light__no-right-edge {
border-left: solid 1px #585356;
border-top: solid 1px #585356;
border-right: solid 1px #c8c8c8;
border-bottom: solid 1px #c8c8c8;
border-left: solid 0.15vw #585356;
border-top: solid 0.15vw #585356;
border-right: solid 0.15vw #c8c8c8;
border-bottom: solid 0.15vw #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.outer-edge__light-buttons {
border-left: solid 0.1vw #585356;
border-top: solid 0.1vw #585356;
border-right: solid 0.1vw #c8c8c8;
border-bottom: solid 0.1vw #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.inner-edge__light-buttons {
border-bottom: solid 0.15vw #4a4546;
border-right: solid 0.15vw #4a4546;
border-left: solid 0.15vw #c8c8c8;
border-top: solid 0.15vw #c8c8c8;
padding: 0.25vw;
height: 100%;
}
.inner-edge__light, .inner-edge__light__no-padding {
border-bottom: solid 2px #4a4546;
border-right: solid 2px #4a4546;
border-left: solid 2px #c8c8c8;
border-top: solid 2px #c8c8c8;
padding: 5px;
border-bottom: solid 0.2vw #4a4546;
border-right: solid 0.2vw #4a4546;
border-left: solid 0.2vw #c8c8c8;
border-top: solid 0.2vw #c8c8c8;
padding: 0.5vw;
height: 100%;
}
.inner-edge__dark {
border-bottom: solid 2px #3F3D43;
border-right: solid 2px #3F3D43;
border-left: solid 2px #A7A8AE;
border-top: solid 2px #A7A8AE;
border-bottom: solid 0.2vw #3F3D43;
border-right: solid 0.2vw #3F3D43;
border-left: solid 0.2vw #A7A8AE;
border-top: solid 0.2vw #A7A8AE;
height: 100%;
}
.outer-edge__dark, .outer-edge__dark__no-right-edge {
border-left: solid 1px #302a2a;
border-top: solid 1px #302a2a;
border-right: solid 1px #c1c2c6;
border-bottom: solid 1px #c1c2c6;
border-left: solid 0.1vw #302a2a;
border-top: solid 0.1vw #302a2a;
border-right: solid 0.1vw #c1c2c6;
border-bottom: solid 0.1vw #c1c2c6;
border-radius: 1px;
height: 100%;
}

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;ACnEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3DF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC3KF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC7BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC/BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJxFF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;ACnEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3DF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC3KF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC7BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}

4
sass/base/_base.scss
View File

@ -4,6 +4,10 @@
box-sizing: border-box;
}
html {
font-size: 16px;
}
html,
body {
margin: 0;

53
sass/components/_borders.scss
View File

@ -1,35 +1,54 @@
.outer-edge__light {
border-left: solid 1px #585356;
border-top: solid 1px #585356;
border-right: solid 1px #c8c8c8;
border-bottom: solid 1px #c8c8c8;
border-left: solid .15vw #585356;
border-top: solid .15vw #585356;
border-right: solid .15vw #c8c8c8;
border-bottom: solid .15vw #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.outer-edge__light-buttons {
border-left: solid .1vw #585356;
border-top: solid .1vw #585356;
border-right: solid .1vw #c8c8c8;
border-bottom: solid .1vw #c8c8c8;
border-radius: 1px;
background-color: #797979;
height: 100%;
}
.inner-edge__light-buttons {
border-bottom: solid .15vw #4a4546;
border-right: solid .15vw #4a4546;
border-left: solid .15vw #c8c8c8;
border-top: solid .15vw #c8c8c8;
padding: .25vw;
height: 100%;
}
.inner-edge__light {
border-bottom: solid 2px #4a4546;
border-right: solid 2px #4a4546;
border-left: solid 2px #c8c8c8;
border-top: solid 2px #c8c8c8;
padding: 5px;
border-bottom: solid .2vw #4a4546;
border-right: solid .2vw #4a4546;
border-left: solid .2vw #c8c8c8;
border-top: solid .2vw #c8c8c8;
padding: .5vw;
height: 100%;
}
.inner-edge__dark {
border-bottom: solid 2px #3F3D43;
border-right: solid 2px #3F3D43;
border-left: solid 2px #A7A8AE;
border-top: solid 2px #A7A8AE;
border-bottom: solid .2vw #3F3D43;
border-right: solid .2vw #3F3D43;
border-left: solid .2vw #A7A8AE;
border-top: solid .2vw #A7A8AE;
height: 100%;
}
.outer-edge__dark {
border-left: solid 1px #302a2a;
border-top: solid 1px #302a2a;
border-right: solid 1px #c1c2c6;
border-bottom: solid 1px #c1c2c6;
border-left: solid .1vw #302a2a;
border-top: solid .1vw #302a2a;
border-right: solid .1vw #c1c2c6;
border-bottom: solid .1vw #c1c2c6;
border-radius: 1px;
height: 100%;
}