html{ width: 100%; height: 100%; margin: 0px; background-color: #14181b; } body{ position: relative; width: 100%; padding-top: 20px; padding-bottom: 130px; min-height: calc(100% - 150px); max-width: 1000px; min-width: 500px; margin: auto; background-color: #1f262b; } #stream{ position: relative; top: 50px; left: 0px; margin: auto; width: calc(100% - 50px); height: auto; max-width: 700px; background-color: #ffffff; border-radius: 10px; } #left-control{ position: absolute; bottom: 70px; left: calc(25% - 75px); width: 150px; height: 150px; background-color: #ffffff; border-radius: 75px; box-shadow: 2px 2px 3px #14181b; } #right-control{ position: absolute; bottom: 70px; right: calc(25% - 75px); width: 150px; height: 150px; background-color: #ffffff; border-radius: 10px; box-shadow: 2px 2px 3px #14181b; } div.control-buttons{ position: absolute; width: 50px; height: 50px; background-color: #000000; border-radius: 25px; box-shadow: 1px 1px 3px #14181b; cursor: pointer; } #left-control-up{ top: 10px; left: 50px; } #left-control-down{ bottom: 10px; left: 50px; } #left-control-left{ top: 50px; left: 10px; } #left-control-right{ top: 50px; right: 10px; } #left-control-rotate-l{ top: -10px; left: -10px; } #left-control-rotate-r{ top: -10px; right: -10px; } #right-control-up{ top: 10px; left: 50px; } #right-control-down{ bottom: 10px; left: 50px; } #right-control-left{ top: 50px; left: 10px; } #right-control-right{ top: 50px; right: 10px; } #right-control-forward{ top: 10px; right: -60px; border: 2px solid #fff; } #right-control-backward{ bottom: 10px; right: -60px; border: 2px solid #fff; } div.login { position: absolute; left: calc(50% - 200px); top: calc(50% - 125px); margin-left: 0px; margin-top: 0px; width: 400px; height: 250px; background-color: #14181b00; border-radius: 8px; border: 0px solid #fff; } div.inputbox { position: relative; left: 0px; top: 0px; margin-left: 0px; margin-top: 20px; width: 100%; height: 40px; background-color: #14181b; border-radius: 8px; border: 1px solid #fff; } .input { position: absolute; left: 25px; top: 50%; margin-left: -0px; margin-top: -15px; width: calc(100% - 50px); height: 30px; text-align: center; color:#fff; font-size: 15pt; font-family:Arial, "lucida console", sans-serif; border: 0px solid #fff; background-color: transparent; outline: 0 none; } input[id="name-input"]::-webkit-input-placeholder { color: #ffffff; } #short-btn { position: absolute; width: 150px; margin-left: calc(50% - 75px); margin-top: 20px; } #copy-btn { position: absolute; width: 150px; margin-left: calc(50% - 75px); margin-top: 20px; } #bottom-link-btn { position: fixed; width: 150px; left: calc(50% - 75px); bottom: 20px; } #logout-link-btn { position: fixed; width: 100px; right: 10px; top: 10px; } .btn-blue{ cursor: pointer; height: 40px; background-color: #00BCD4; box-shadow: 3px 3px 10px #333; border-radius: 20px; } .btn-green{ cursor: pointer; height: 40px; background-color: #009688; box-shadow: 3px 3px 10px #333; border-radius: 20px; } .btn-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15pt; color:#fff; font-family:Arial, "lucida console", sans-serif; } .sym_btn-red{ cursor: pointer; height: 40px; width: 40px; background-color: #E53935; border-radius: 20px; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-blue{ cursor: pointer; height: 40px; width: 40px; background-color: #1E88E5; border-radius: 20px; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-invisible{ cursor: pointer; height: 40px; width: 40px; background-color: #fff0; border-radius: 20px; float: left; } img.icon { margin-top: 8px; margin-left: 8px; } .title { text-align: center; width: 100%; color:#fff; font-size: 30pt; font-family:"Roboto", bold, sans-serif; } .title2 { margin-top: 50px; text-align: center; width: 100%; color:#fff; font-size: 20pt; font-family:"Roboto", bold, sans-serif; } #login-title { position: absolute; top: 0px; margin-bottom: 30px; } .box-dark{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } #user-line{ position: relative; margin: auto; width: calc(100% - 0px); height: 50px; max-width: 600px; background-color: #1f262b; border: 1px solid #fff; border-radius: 10px; } #new_user-btn{ position: relative; margin-top: 30px; width: 250px; } #create_user-btn{ position: relative; top: 50px; width: 250px; } table{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-collapse: separate; border-spacing: 2px; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } tr{ margin: auto; border: 1px solid #fff; } th{ margin: auto; border: 0px solid #aaa; background-color: #546E7A; padding: 20px; border-radius: 8px; } td{ margin: auto; border: 0px solid #aaa; background-color: #37474F ; padding: 10px; border-radius: 8px; } td.left,th.left{ border-radius: 8px 0px 0px 8px; } td.right,th.right{ border-radius: 0px 8px 8px 0px; } td.mid,th.mid{ border-radius: 0px 0px 0px 0px; } #new-user-box{ position: fixed; width: 400px; height: 300px; left: calc(50% - 200px); top: calc(50% - 150px); display: none; } #change-user-box{ position: fixed; width: 400px; height: 300px; left: calc(50% - 200px); top: calc(50% - 150px); display: none; } .error{ position: absolute; bottom: 10px; left: 10px; height: 150px; width: 250px; background-color: #E53935; border-radius: 15px; } #error-box{ display: none; }