mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-08 08:33:39 +00:00
Added instructions panel.
- Moved entire contents into top level container for display.
This commit is contained in:
Max Stevenson
parent
1599c81c92
commit
23adcbd2c0
515
index.html
515
index.html
|
|
@ -8,262 +8,282 @@
|
|||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer-edge__light" id="outer-container__outer">
|
||||
<div class="inner-edge__light" id="outer-container__inner">
|
||||
<div id="grid-container">
|
||||
<div class="outer-edge__dark__no-right-edge" id="map-display__outer">
|
||||
<div class="inner-edge__light__no-padding" id="map-display__inner">
|
||||
<div class="map-display__container">
|
||||
<div class="map-display__system-status__container">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-one" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="map-display__center-section">
|
||||
<div id="top-level">
|
||||
<div class="outer-edge__light" id="outer-container__outer">
|
||||
<div class="inner-edge__light" id="outer-container__inner">
|
||||
<div id="grid-container">
|
||||
<div
|
||||
class="outer-edge__dark__no-right-edge"
|
||||
id="map-display__outer"
|
||||
>
|
||||
<div
|
||||
class="inner-edge__light__no-padding"
|
||||
id="map-display__inner"
|
||||
>
|
||||
<div class="map-display__container">
|
||||
<div class="map-display__system-status__container">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-two" class="map-display__system-status">
|
||||
<h1 id="sys-one" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="map-display__center-section">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-two" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-three" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-three" class="map-display__system-status">
|
||||
<h1 id="sys-four" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-four" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="room-info__container">
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
<p class="room-info__level-number">2</p>
|
||||
</div>
|
||||
<div class="room-info__title-container">
|
||||
<h3 class="room-info__title">Control Room / Plan View</h3>
|
||||
<p class="room-info__subtitle">
|
||||
drawing number - 305pcoffintunaphooter
|
||||
</p>
|
||||
</div>
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
<p class="room-info__level-number">2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-info__container">
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
<p class="room-info__level-number">2</p>
|
||||
</div>
|
||||
<div class="room-info__title-container">
|
||||
<h3 class="room-info__title">Control Room / Plan View</h3>
|
||||
<p class="room-info__subtitle">
|
||||
drawing number - 305pcoffintunaphooter
|
||||
</p>
|
||||
</div>
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
<p class="room-info__level-number">2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge" id="console-display">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__dark">
|
||||
<div class="inner-edge__light">
|
||||
<div class="console-display__wrapper">
|
||||
<div class="screen-container__wrapper">
|
||||
<div class="screen-container__outer">
|
||||
<p class="screen-container__text">SCREEN</p>
|
||||
<div class="outer-edge__light__no-right-edge" id="console-display">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__dark">
|
||||
<div class="inner-edge__light">
|
||||
<div class="console-display__wrapper">
|
||||
<div class="screen-container__wrapper">
|
||||
<div class="screen-container__outer">
|
||||
<p class="screen-container__text">SCREEN</p>
|
||||
</div>
|
||||
<div class="triangle-wrapper">
|
||||
<div class="outer-triangle__right"></div>
|
||||
<div class="inner-triangle__right"></div>
|
||||
</div>
|
||||
<div class="buffer"></div>
|
||||
</div>
|
||||
<div class="triangle-wrapper">
|
||||
<div class="outer-triangle__right"></div>
|
||||
<div class="inner-triangle__right"></div>
|
||||
</div>
|
||||
<div class="buffer"></div>
|
||||
</div>
|
||||
<div class="island-container__wrapper">
|
||||
<div class="triangle-wrapper" id="island-triangle">
|
||||
<div class="outer-triangle__left"></div>
|
||||
<div class="inner-triangle__left"></div>
|
||||
</div>
|
||||
<div class="island-container__outer">
|
||||
<p class="island-container__text">
|
||||
Isla Nubar, Costa Rica
|
||||
</p>
|
||||
<div class="island-container__wrapper">
|
||||
<div class="triangle-wrapper" id="island-triangle">
|
||||
<div class="outer-triangle__left"></div>
|
||||
<div class="inner-triangle__left"></div>
|
||||
</div>
|
||||
<div class="island-container__outer">
|
||||
<p class="island-container__text">
|
||||
Isla Nubar, Costa Rica
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TOUR</p>
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TOUR</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">POWER</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">POWER</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen">
|
||||
<div class="video-screen_loading-spinner__wrapper">
|
||||
<div class="video-screen__loading-spinner"></div>
|
||||
<div class="control-panel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen">
|
||||
<div class="video-screen_loading-spinner__wrapper">
|
||||
<div class="video-screen__loading-spinner"></div>
|
||||
</div>
|
||||
<div class="video-screen__text-wrapper">
|
||||
<h3 class="video-screen__header">
|
||||
rebooting system...
|
||||
</h3>
|
||||
<p class="video-screen__info-text">
|
||||
volume --- nedryland jp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-screen__text-wrapper">
|
||||
<h3 class="video-screen__header">
|
||||
rebooting system...
|
||||
</h3>
|
||||
<p class="video-screen__info-text">
|
||||
volume --- nedryland jp
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__button-control">
|
||||
<div class="button-control__top">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<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__light large-button">
|
||||
quit
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<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>
|
||||
</div>
|
||||
<div class="control-panel__button-control">
|
||||
<div class="button-control__top">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">glitches</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
hold
|
||||
</p>
|
||||
<p class="button-text__engraved small-button">maps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
quit
|
||||
</p>
|
||||
<p class="button-text__engraved small-button">system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">emerg.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__output-display">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<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>
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">glitches</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">maps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">emerg.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__output-display">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__console">
|
||||
<div class="inner-edge__console">
|
||||
<div class="output-display__wrapper">
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Ldg - Volume - JP
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Boot Successful - CLEAR
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Format Gabber - Chaires
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Operator - Andres Ramierez dkhd
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Vidnet - Camerea VC net01
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">clear</p>
|
||||
<p class="output-display-content__content">
|
||||
- Communications = Active
|
||||
</p>
|
||||
<div class="outer-edge__console">
|
||||
<div class="inner-edge__console">
|
||||
<div class="output-display__wrapper">
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Ldg - Volume - JP
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Boot Successful - CLEAR
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Format Gabber - Chaires
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Operator - Andres Ramierez dkhd
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Vidnet - Camerea VC net01
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Communications = Active
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -272,38 +292,41 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light" id="system-icons__container">
|
||||
<div id="system-icons__wrapper">
|
||||
<p class="white-font-black-background">sys icons</p>
|
||||
<div class="system-icons__icon-wrapper">
|
||||
<img
|
||||
src="./public/icons/hard-drive.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-one.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-two.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/trash.png"
|
||||
width="25px"
|
||||
height="45px"
|
||||
/>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light" id="system-icons__container">
|
||||
<div id="system-icons__wrapper">
|
||||
<p class="white-font-black-background">sys icons</p>
|
||||
<div class="system-icons__icon-wrapper">
|
||||
<img
|
||||
src="./public/icons/hard-drive.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-one.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-two.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/trash.png"
|
||||
width="25px"
|
||||
height="45px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light" id="instructions-panel__outer">
|
||||
<div class="outer-edge__light" id="instructions-panel__inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,62 @@ body {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
#grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
justify-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__outer {
|
||||
max-width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4/1/5/2;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
grid-area: 1/2/4/3;
|
||||
}
|
||||
|
||||
#map-display__outer {
|
||||
grid-area: 1/1/4/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#map-display__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#control-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#top-level {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#instructions-panel__outer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#instructions-panel__inner {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.outer-edge__light, .outer-edge__light__no-right-edge {
|
||||
border-left: solid 1px #585356;
|
||||
border-top: solid 1px #585356;
|
||||
|
|
@ -183,48 +239,6 @@ body {
|
|||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
#grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
justify-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__outer {
|
||||
max-width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4/1/5/2;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
grid-area: 1/2/4/3;
|
||||
}
|
||||
|
||||
#map-display__outer {
|
||||
grid-area: 1/1/4/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#map-display__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#control-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.room-info__container {
|
||||
grid-area: 3/1/4/2;
|
||||
background-color: #e2eb57;
|
||||
|
|
|
|||
|
|
@ -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","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;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;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;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;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC9DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;ACvCF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;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;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;;;ACLF;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;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;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;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC9DF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;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;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"styles.css"}
|
||||
7
sass/components/_instructions-panel.scss
Normal file
7
sass/components/_instructions-panel.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
#instructions-panel__outer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#instructions-panel__inner {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -39,3 +39,9 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#top-level {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
@import "./base/base";
|
||||
@import "./components/layout";
|
||||
@import "./components/instructions-panel";
|
||||
@import "./base/settings";
|
||||
@import "./components/borders";
|
||||
@import "./components/buttons";
|
||||
@import "./components/display-text";
|
||||
@import "./components/layout";
|
||||
@import "./components/level-info";
|
||||
@import "./components/screen-display";
|
||||
@import "./components/video-screen";
|
||||
@import "./components/control-panel";
|
||||
@import "./components/output-display";
|
||||
@import "./components/system-icons";
|
||||
@import "./components/system-icons";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user