diff options
Diffstat (limited to 'styles.css')
-rw-r--r-- | styles.css | 179 |
1 files changed, 0 insertions, 179 deletions
diff --git a/styles.css b/styles.css deleted file mode 100644 index 9fb26ae..0000000 --- a/styles.css +++ /dev/null @@ -1,179 +0,0 @@ -html, body { - margin: 0; - padding: 0; - /* width: 100%; - height: 100%; */ - font-family: monospace; - overflow: hidden; - font-family: 'Kufam', cursive; -} - -body { - margin: 10px; - background-color: #454545; - color: white; -} - -h1 { - font-size: 10px; - margin: 0; - color: #9c9c9c; -} - -.statusline-bottom { - position: absolute; - display: flex; - bottom: 0; - left: 0; - height: 30px; - /* padding-left: 5px; */ - width: calc(100%); - font-size: 12px; - margin: 0; - align-items: center; - - background-color: #333333; -} - -.statusline-bottom i { - font-size: 12px; -} - -.statusline-item { - display: none; - align-items: flex-start; - margin-left: 5px; - margin-right: 5px; - - color: #b5b5b5; -} - -.connected .statusline-item { - display: flex; -} - -.connection { - display: flex; - color: #c32222; -} - -.connection:after { - display: block; - content: "DISCONNECTED"; -} - -.connected .connection:after { - display: block; - content: "CONNECTED"; -} - -.connected .connection { - color: #008000; -} - -.connection-status { - text-transform: uppercase; -} - -.arm { - margin-left: 5px; - color: #c32222; -} - -.arm:after { - content: 'DISARMED'; - display: block; -} - -.armed .arm:after { - content: 'ARMED'; - display: block; -} - -.armed .arm { - color: #008000; -} - -.ping { - margin-left: auto; -} - -.ping 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 .acc-string { - display: block; -} - - -button { - position: absolute; - display: none; - margin-top: 5px; - border: none; - background-color: #333333; - color: #c3c3c3; - padding: 10px; - width: 120px; -} - -.armed button { - display: block; -} - -.button-center { - left: calc(50% - 60px); -} - -.button-center-bottom { - bottom: 40px; -} - -.button-center-top { - top: 10px; -} - -#btn_connect { display: block; } -.connected #btn_connect { display: none; } -.connected #btn_disconnect { display: block; } -.connected #btn_arm { display: block; } -.armed #btn_arm { display: none; } - - -.joystick { - position: absolute; - width: 200px; - height: 200px; - top: calc(50% - 100px - 10px); /* 50% - half height - statusline height */ - /* border: 1px solid pink; */ -} - -.joystick-left { - left: calc(25% - 100px); -} - -.joystick-right { - left: calc(75% - 100px); -} |