jurassic-park-interface/sass/components/_screen-display.scss
2020-09-02 22:06:01 -05:00

125 lines
2.2 KiB
SCSS

#console-display > .outer-container__two {
padding: 5px 10px;
}
#console-display__container {
display: flex;
}
#console-display__container {
padding: .25vw;
}
.screen-container__wrapper {
display: flex;
}
.screen-container__outer {
width: fit-content;
background: white;
padding-top: 2.5px;
padding-bottom: 2px;
padding-left: 1px;
padding-right: 1px;
border-radius: 1px;
border-left-color: black;
border-style: solid;
border-width: 0.5px;
border-bottom: none;
border-right: none;
margin: 0px;
}
.triangle-wrapper {
position: relative;
}
.outer-triangle__right {
width: 0;
height: 0;
border-top: 1vw solid transparent;
border-left: 1vw solid black;
border-bottom: 1vw solid transparent;
position: absolute;
}
.inner-triangle__right {
width: 0;
height: 0;
border-top: .9vw solid transparent;
border-left: .9vw solid white;
border-bottom: .9vw solid transparent;
position: absolute;
top: .175vw;
left: 0;
}
.buffer {
margin: .5vw;
}
.outer-triangle__left {
width: 0;
height: 0;
border-top: 1.6vw solid transparent;
border-right: 1.6vw solid black;
border-bottom: 1.6vw solid transparent;
position: absolute;
}
.inner-triangle__left {
width: 0;
height: 0;
border-top: 1.5vw solid transparent;
border-right: 1.5vw solid white;
border-bottom: 1.5vw solid transparent;
position: absolute;
left: .15vw;
}
.island-container__wrapper {
flex: 1;
display: flex;
align-items: center;
}
.screen-container__text {
color: #ffffff;
width: fit-content;
background-color: black;
padding: .25vw .5vw;
font-style: italic;
margin: 0px;
border-radius: 1px;
font-size: 1vw;
}
#island-triangle {
margin-right: 1.5vw;
display: flex;
align-items: center;
}
.console-display__wrapper {
display: flex;
align-items: center;
flex: 1;
}
.island-container__outer {
flex: 1;
border-radius: 1px;
border-top: .1vw solid black;
border-left: none;
border-bottom: .05vw solid #4b4b4b;
border-right: .05vw solid #4b4b4b;
margin: 0px;
}
.island-container__text {
color: black;
background-color: white;
padding: .75vw;
font-style: italic;
margin: 0px;
text-align: center;
font-size: 1.25vw;
}