aboutsummaryrefslogtreecommitdiff
path: root/src/scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scss')
-rw-r--r--src/scss/gamepad.scss12
-rw-r--r--src/scss/landscape-warning.scss39
-rw-r--r--src/scss/main.scss97
-rw-r--r--src/scss/settings.scss136
-rw-r--r--src/scss/statusline.scss130
-rw-r--r--src/scss/styles.scss20
6 files changed, 434 insertions, 0 deletions
diff --git a/src/scss/gamepad.scss b/src/scss/gamepad.scss
new file mode 100644
index 0000000..997fee8
--- /dev/null
+++ b/src/scss/gamepad.scss
@@ -0,0 +1,12 @@
+#gamepad-wrapper {
+ width: 100%;
+ height: 100%;
+}
+
+canvas {
+ z-index: -999;
+ position:fixed;
+
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/scss/landscape-warning.scss b/src/scss/landscape-warning.scss
new file mode 100644
index 0000000..443102a
--- /dev/null
+++ b/src/scss/landscape-warning.scss
@@ -0,0 +1,39 @@
+.landscape-warning {
+ display: none;
+ position: absolute;
+ z-index: 9999999;
+ width: 100%;
+ height: 100%;
+ padding-top: 50%;
+ background-color: $background-base;
+ text-align: center;
+
+ &-content {
+ position: relative;
+ top: -50px;
+ }
+
+ i { font-size: 5em; }
+
+ h1 {
+ font-size: 1em;
+ margin: 10px;
+ }
+
+ button {
+ border: none;
+ background-color: $background-z1;
+ color: $foreground-z1;
+ padding: 10px;
+ width: 140px;
+ height: 40px;
+ }
+
+ .ignore-landscape-warning & { display: none !important; }
+}
+
+@media screen and (orientation:portrait) {
+ .landscape-warning {
+ display: block;
+ }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..08d7a44
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,97 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ /* width: 100%;
+ height: 100%; */
+ font-family: monospace;
+ overflow: hidden;
+ font-family: 'Kufam', 'Courier new', 'monospace';
+}
+
+body {
+ // margin: 10px;
+ background-color: $background-base;
+ color: $foreground-base;
+}
+
+.app-info {
+ position: absolute;
+ top: 15px;
+ left: 10px;
+ left: max(env(safe-area-inset-left, 10px), 10px);
+
+ h1 {
+ font-size: 14px;
+ margin: 0;
+ color: $foreground-base;
+ }
+
+ .version {
+ display: block;
+ font-size: 9px;
+ }
+}
+
+button:hover {
+ filter: brightness(80%);
+}
+button:active {
+ filter: brightness(70%);
+}
+
+.button-center {
+ position: absolute;
+ display: none;
+ margin-top: 5px;
+ border: none;
+ background-color: $background-z1;
+ color: $foreground-z1;
+ padding: 10px;
+ width: 140px;
+ height: 40px;
+ left: calc(50% - 70px);
+ font-weight: 400;
+ font-size: 15px;
+
+ .armed & { display: block; }
+ &-top { top: 10px; }
+ &-bottom { bottom: 50px; }
+}
+
+#btn_connect { display: block; }
+.connected #btn_connect { display: none; }
+.connected #btn_disconnect { display: block; }
+.connected #btn_arm { display: block; }
+#btn_connect, #btn_disconnect {
+ text-shadow: 0 0 5px #c3c3c3, 0 0 10px #636363;
+}
+
+.settings-button {
+ position: absolute;
+ background: $background-base;
+ color: $foreground-z1;
+ border: none;
+ top: 15px;
+ font-size: 1.3em;
+ right: max(env(safe-area-inset-left, 10px), 10px);
+}
+.settings-button:hover {
+ color: $foreground-base;
+ filter: brightness(100%);
+}
+
+.button-states {
+ display: none;
+ position: absolute;
+ top: 60px;
+ left: calc(50% - 80px - 10px);
+ width: 160px;
+ text-align: center;
+ background-color: #272727;
+ padding: 0 10px;
+ border-radius: 10px;
+ font-size: 9px;
+
+ .connected & { display: block; }
+ .debug & { display: block; }
+}
diff --git a/src/scss/settings.scss b/src/scss/settings.scss
new file mode 100644
index 0000000..0fa052d
--- /dev/null
+++ b/src/scss/settings.scss
@@ -0,0 +1,136 @@
+/* Only show animations when user has not set a preference not to show motion */
+@media (prefers-reduced-motion: no-preference) {
+ .settings-dialog {
+ transition: all 0.5s ease;
+
+ input[type="checkbox"]::before {
+ transition: 120ms transform ease-in-out;
+ }
+ }
+}
+
+.settings-dialog {
+ position: absolute;
+ background-color: $background-z2;
+ color: $foreground-z2;
+ top: 100%;
+ left: 0;
+ right: 0;
+ bottom: 40px;
+ z-index: 999;
+ box-sizing: border-box;
+ z-index: 1;
+ height: calc(100% - 40px);
+ flex-direction: column;
+
+ .header, .content { padding: 10px; }
+
+ &.shown {
+ display: flex;
+ top: 0;
+ }
+
+ button {
+ background-color: $background-z1;
+ color: $foreground-z1;
+ border: none;
+ width: fit-content;
+ height: fit-content;
+ font-size: 1.3em;
+ }
+
+ .header {
+ background-color: $background-z1;
+ display: flex;
+ box-sizing: border-box;
+ align-items: center;
+
+ button {
+ margin-left: auto;
+ }
+ }
+
+ select {
+ background: $background-z1;
+ color: $foreground-z1;
+ border: none;
+ padding: 5px;
+ display: block;
+
+ }
+
+ h1 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .content {
+ height: 100%;
+ overflow: auto;
+ }
+
+ form {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+
+ .form-control {
+ margin-bottom: 5px;
+ margin-top: 5px;
+ }
+
+ .form-cb {
+ line-height: 1.1;
+ display: grid;
+ grid-template-columns: 1em auto;
+ gap: 0.5em;
+ }
+
+ input[type="checkbox"] {
+ appearance: none;
+ background: $background-z1;
+ color: $foreground-z1;
+ margin: 0;
+
+ font: inherit;
+ color: currentColor;
+ width: 1.15em;
+ height: 1.15em;
+ border: none;
+ border-radius: 0.15em;
+ transform: translateY(-0.075em);
+
+ display: grid;
+ place-content: center;
+ }
+
+ input[type="checkbox"]::before {
+ content: "";
+ width: 0.65em;
+ height: 0.65em;
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+ transform: scale(0);
+ transform-origin: bottom left;
+ box-shadow: inset 1em 1em $foreground-z1;
+ /* Windows High Contrast Mode */
+ background-color: CanvasText;
+ }
+
+ input[type="checkbox"]:checked::before {
+ transform: scale(1);
+ }
+
+ input[type="checkbox"]:focus {
+ outline: max(2px, 0.15em) solid currentColor;
+ outline-offset: max(2px, 0.15em);
+ }
+
+ input[type="checkbox"]:disabled {
+ --form-control-color: var(--form-control-disabled);
+
+ color: var(--form-control-disabled);
+ cursor: not-allowed;
+ }
+}
diff --git a/src/scss/statusline.scss b/src/scss/statusline.scss
new file mode 100644
index 0000000..cf5f8f2
--- /dev/null
+++ b/src/scss/statusline.scss
@@ -0,0 +1,130 @@
+.statusline {
+ position: absolute;
+ display: flex;
+ bottom: 0;
+ left: 0;
+ height: 40px;
+ /* padding-left: 5px; */
+ width: calc(100%);
+ font-size: 12px;
+ margin: 0;
+ align-items: center;
+ z-index: 2;
+
+ background-color: $background-z1;
+ i {
+ font-size: 14px;
+ margin-right: 5px;
+ }
+
+ &-item {
+ display: none;
+ align-items: flex-start;
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 13px;
+
+ color: $foreground-z1;
+
+ .connected & { display: flex; }
+ }
+
+ &-item:first-child {
+ margin-left: 10px;
+ margin-left: calc(env(safe-area-inset-left) + 10px);
+ }
+
+ &-item:last-child {
+ margin-right: 10px;
+ margin-right: calc(env(safe-area-inset-right) + 10px);
+ }
+}
+
+.connection {
+ display: flex;
+ color: $color-danger;
+
+ &:after {
+ display: block;
+ content: "DISCONNECTED";
+ }
+
+ .connected & { color: $color-success; }
+ .connected &:after {
+ display: block;
+ content: "CONNECTED";
+ }
+}
+
+.ping {
+ margin-left: auto;
+
+ i {
+ -webkit-animation: ping-fade-out 2s forwards; /* Safari 4+ */
+ -moz-animation: ping-fade-out 2s forwards; /* Fx 2+ */
+ -o-animation: ping-fade-out 2s forwards; /* Opera 12+ */
+ animation: ping-fade-out 2s forwards; /* IE 10+, Fx 29+ */
+ }
+
+ @-webkit-keyframes ping-fade-out {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+}
+
+.notification {
+ background-color: $background-z2;
+ color: $foreground-z2;
+ overflow: hidden;
+ display: flex;
+ align-items: baseline;
+
+ &-area {
+ background-color: $background-z2;
+ height: 100%;
+ width: 0;
+ overflow: hidden;
+ margin-left: 5px;
+ margin-left: auto;
+ transition: all 1s ease;
+ }
+
+ &-area.show {
+ width: 100%;
+ }
+
+ &-content {
+ margin-left: 5px;
+ margin-right: 5px;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ i {
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+
+ i.alert { color: $color-danger; }
+ i.info { color: $color-info; }
+ i.success { color: $color-success; }
+ i.warning { color: $color-warning; }
+
+ p {
+ width: max-content;
+ -webkit-animation: scroll-text 10s linear forwards; /* Safari 4+ */
+ -moz-animation: scroll-text 10s linear forwards; /* Fx 2+ */
+ -o-animation: scroll-text 10s linear forwards; /* Opera 12+ */
+ animation: scroll-text 10s linear forwards; /* IE 10+, Fx 29+ */
+ }
+
+ @-webkit-keyframes scroll-text {
+ 0% { margin-left: 100%; }
+ 100% { margin-left: -100%; }
+ }
+
+ @-webkit-keyframes fade-in {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
new file mode 100644
index 0000000..60b46b2
--- /dev/null
+++ b/src/scss/styles.scss
@@ -0,0 +1,20 @@
+@import '@fortawesome/fontawesome-free/css/all.css';
+
+$background-base: #454545;
+$foreground-base: #9c9c9c;
+$background-z1: #333333;
+$foreground-z1: #b5b5b5;
+$background-z2: #252525;
+$foreground-z2: #b5b5b5;
+
+$color-danger: #c32222;
+$color-info: #0374a8;
+$color-success: #008000;
+$color-warning: #d99b0b;
+
+@import "main.scss";
+@import "statusline.scss";
+@import "settings.scss";
+@import "gamepad.scss";
+@import "landscape-warning.scss";
+
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-27 08:47:27 +0000