Primary Monitor
+
+
-
diff --git a/test.css b/test.css
index a925462..6e1074f 100644
--- a/test.css
+++ b/test.css
@@ -1,134 +1,139 @@
* {
- margin: 0px;
padding: 0px;
+ margin: 0px;
}
html, body {
width: 100%;
height: 100%;
-
- background-color: #1a2b40;
- color: #ffffff;
}
-main {
-
- width: 100%;
- height: 100%;
+
+
+.horizontal-aligner {
display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-header {
-
- position: fixed;
- right: 0px;
- top: 0px;
- z-index: 10;
-
- width: 48px;
- height: 48px;
- border-bottom-left-radius: 12px;
-
- background-color: #0f141b;
- color: #ffffff;
-}
-
-.hamburger {
-
- margin-bottom: 2px;
+ flex-direction: row;
width: 100%;
height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.hamburger-slice {
-
- margin: 3px;
-
- width: 75%;
- height: 6px;
-
- background-color: #ffffff;
- border-radius: 2.5px;
-}
-
-.pixel-output {
-
- width: 100%;
- height: 100%;
-}
-
-#config-button {
-
- cursor: pointer;
-
-}
-
-.pixel-output {
-
- z-index: 2;
- width: 60vw;
- max-height: 90vh;
-
- /*So it's always a 16/9 aspect ratio */
- height: calc(60vw*0.5625);
background-color: #000000;
- box-shadow: 0px 0px 8px 8px #0f141b55;
}
-#output-title {
+
+
+.generic-panel {
- padding-bottom: 20px;
+ min-width: 150px;
+ height: 100%;
- font-size: 32px;
- font-weight: 1000;
+ background-color: #2c3046;
+ border-right: solid 1px #1c1e24;
+ border-left: solid 1px #1c1e24;
}
-#configurator-modal {
+.generic-panel > .header {
- position: fixed;
- right: 0px;
- top: 0px;
- display: none;
- z-index: 4;
-
- width: 100%;
- height: 100%;
-}
-
-#configurator-modal-background {
-
- position: fixed;
- right: 0px;
- top: 0px;
- z-index: 5;
-
- width: 100%;
- height: 100%;
-
- background-color: #0f141bb0;
-}
-
-#configurator-modal-foreground {
-
- position: fixed;
- right: 0px;
- top: 0px;
- z-index: 6;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+
+ width: 100%;
+ height: 24px;
+
+ font-size: 16px;
+ font-weight: 750;
+
+ background-color: #1c1e24;
+ color: #ffffff;
+}
+
+
+
+.info-view {
+
+ min-width: 100px;
+ width: 50%;
+ height: 100%;
+
+
+}
+
+.control-view {
+
+ min-width: 100px;
+ width: 25%;
+ height: 100%;
+
+
+}
+
+
+
+.monitor-view {
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+
+ width: 100%;
+ min-width: 400px;
+ height: 100%;
+
+ background-color: #080808;
+}
+
+.monitor {
+
+ width: 50vw;
+ height: auto;
+ padding-left: 3px;
+ padding-right: 3px;
+
+ background-color: #1c1e24;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.monitor > .info-header {
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+
+ height: 24px;
+
+ font-size: 16px;
+ font-weight: 750;
+
+ background-color: #1c1e24;
+ color: #ffffff;
+}
+
+.monitor > .output {
+
+ width: 100%;
+ height: calc(50vw * 0.5625);
+
+ background-color: #000000;
+}
+
+
+
+
+
+noscript {
width: 100%;
height: 100%;
+ background-color: #000000;
+ color: #ffffff;
}
The NerdEMU Emulator
- - +