jurassic-park-interface/sass/components/_screen-display.scss
2020-06-01 15:33:53 +01:00

114 lines
2.0 KiB
SCSS

#console-display > .outer-container__two {
padding: 5px 10px;
}
.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: 13px solid transparent;
border-left: 13px solid black;
border-bottom: 13px solid transparent;
position: absolute;
}
.inner-triangle__right {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-left: 12px solid white;
border-bottom: 12px solid transparent;
position: absolute;
top: 1px;
left: 0;
}
.buffer {
margin: 6px;
}
.outer-triangle__left {
width: 0;
height: 0;
border-top: 18px solid transparent;
border-right: 18px solid black;
border-bottom: 18px solid transparent;
position: absolute;
}
.inner-triangle__left {
width: 0;
height: 0;
border-top: 17px solid transparent;
border-right: 17px solid white;
border-bottom: 17px solid transparent;
position: absolute;
left: 1px;
}
.island-container__wrapper {
display: flex;
align-items: center;
}
.screen-container__text {
color: #ffffff;
width: fit-content;
background-color: black;
padding: 1px 8px 1px 8px;
font-style: italic;
margin: 0px;
border-radius: 1px;
}
#island-triangle {
margin-right: 18px;
display: flex;
align-items: center;
}
.console-display__wrapper {
display: flex;
align-items: center;
}
.island-container__outer {
width: fit-content;
border-radius: 1px;
border-top: 1px solid black;
border-left: none;
border-bottom: 0.5px solid #4b4b4b;
border-right: 0.5px solid #4b4b4b;
margin: 0px;
}
.island-container__text {
color: black;
width: fit-content;
background-color: white;
padding: 8px 48px 8px 48px;
font-style: italic;
margin: 0px;
}