diff options
Diffstat (limited to 'src/scss')
| -rw-r--r-- | src/scss/styles.scss | 280 |
1 files changed, 280 insertions, 0 deletions
diff --git a/src/scss/styles.scss b/src/scss/styles.scss new file mode 100644 index 0000000..b72acef --- /dev/null +++ b/src/scss/styles.scss @@ -0,0 +1,280 @@ +@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; + +html, body { + margin: 0; + padding: 0; + /* width: 100%; + height: 100%; */ + font-family: monospace; + overflow: hidden; + font-family: 'Kufam', cursive; +} + +body { + // margin: 10px; + background-color: $background-base; + color: $foreground-base; +} + +h1 { + font-size: 10px; + margin: 0; + color: $foreground-base; +} + +.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; + + 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"; + } +} + +.arm { + color: $color-danger; + + &:after { + content: 'DISARMED'; + display: block; + } + + .armed & {color: $color-success; } + .armed &:after { + content: 'ARMED'; + display: block; + } +} + +.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; } + } +} + +.acc-string { + display: none; + position: absolute; + top: 60px; + left: calc(50% - 50px - 10px); + width: 100px; + text-align: center; + background-color: #272727; + padding: 0 10px; + border-radius: 10px; + font-size: 9px; + + .connected & { display: block; } +} + +.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; } +.armed #btn_arm { display: none; } + +#btn_connect, #btn_disconnect { + text-shadow: 0 0 5px #c3c3c3, 0 0 10px #636363; +} +#btn_arm, #btn_disarm { + color: red; + text-shadow: 0 0 5px #c53f3f, 0 0 10px #c53f3f; +} +#btn_disarm{ + color: #00ff15; + text-shadow: 0 0 5px #11b91f, 0 0 10px #297b30; +} + +.joystick { + position: absolute; + width: 200px; + height: 200px; + top: calc(50% - 100px - 10px); /* 50% - half height - statusline height */ + /* border: 1px solid pink; */ + + &-left { left: calc(25% - 100px); } + &-right { left: calc(75% - 100px); } +} + + +.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; + } +} + +.notification { + background-color: $background-z2; + color: $foreground-z2; + overflow: hidden; + display: flex; + align-items: baseline; + + &-area { + height: 100%; + width: 100%; + overflow: hidden; + margin-left: 5px; + margin-right: 5px; + + -webkit-animation: fade-in 0.5s linear; /* Safari 4+ */ + -moz-animation: fade-in 0.5s linear; /* Fx 2+ */ + -o-animation: fade-in 0.5s linear; /* Opera 12+ */ + animation: fade-in 0.5s linear; /* IE 10+, Fx 29+ */ + } + + &-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 5s linear; /* Safari 4+ */ + -moz-animation: scroll-text 5s linear; /* Fx 2+ */ + -o-animation: scroll-text 5s linear; /* Opera 12+ */ + animation: scroll-text 5s linear; /* 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; } + } +} |