752 lines
13 KiB
CSS
752 lines
13 KiB
CSS
/* Copyright 2013 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file. */
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
background-color: #171717;
|
|
}
|
|
|
|
p, h2 {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
h3 {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
hr {
|
|
margin: 10px 0;
|
|
border: 1px solid #fce9a7;
|
|
}
|
|
|
|
.icon {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icon-offline {
|
|
position: relative;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background-color: #fce9a7;
|
|
color: #000;
|
|
padding: 2px 10px;
|
|
border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
}
|
|
|
|
a {
|
|
color: #fce9a7;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #ffe668;
|
|
}
|
|
|
|
select {
|
|
background-color: #fce9a7;
|
|
border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
}
|
|
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
-webkit-appearance: none;
|
|
border: 1px solid #fce9a7;
|
|
border-radius: 2px;
|
|
outline: none;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background: #fce9a7;
|
|
}
|
|
|
|
/* Offline page */
|
|
|
|
.offline .interstitial-wrapper {
|
|
color: #2b2b2b;
|
|
font-size: 1em;
|
|
line-height: 1.55;
|
|
margin: 0 auto;
|
|
max-width: 600px;
|
|
padding-top: 200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.offline .runner-container {
|
|
height: 150px;
|
|
max-width: 600px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 180px;
|
|
width: 44px;
|
|
transition: top 0.1s ease-in-out;
|
|
-webkit-transition: top 0.1s ease-in-out;
|
|
-moz-transition: top 0.1s ease-in-out;
|
|
-ms-transition: top 0.1s ease-in-out;
|
|
-o-transition: top 0.1s ease-in-out;
|
|
}
|
|
|
|
.offline .runner-canvas {
|
|
height: 150px;
|
|
max-width: 600px;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.offline .controller {
|
|
background: rgba(247, 247, 247, .1);
|
|
height: 100vh;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100vw;
|
|
z-index: 1;
|
|
}
|
|
|
|
#offline-resources {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
|
|
.suggested-left>#control-buttons,
|
|
.suggested-right>#control-buttons {
|
|
float: none;
|
|
}
|
|
|
|
.snackbar {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 350px) {
|
|
h1 {
|
|
margin: 0 0 15px;
|
|
}
|
|
|
|
.icon-offline {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.interstitial-wrapper {
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.nav-wrapper {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
|
|
.offline .interstitial-wrapper {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
|
|
.interstitial-wrapper {
|
|
margin-bottom: 100px;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 240px) and (orientation: landscape) {
|
|
.offline .interstitial-wrapper {
|
|
margin-bottom: 90px;
|
|
}
|
|
|
|
.icon-offline {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 320px) and (orientation: landscape) {
|
|
.icon-offline {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.offline .runner-container {
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 240px) {
|
|
.interstitial-wrapper {
|
|
overflow: inherit;
|
|
padding: 0 8px;
|
|
}
|
|
}
|
|
|
|
.arcade-mode,
|
|
.arcade-mode .runner-container,
|
|
.arcade-mode .runner-canvas {
|
|
image-rendering: pixelated;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.arcade-mode #buttons,
|
|
.arcade-mode #main-content {
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.arcade-mode .interstitial-wrapper {
|
|
height: 100vh;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.arcade-mode .runner-container {
|
|
left: 0;
|
|
margin: auto;
|
|
right: 0;
|
|
transform-origin: top center;
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
|
|
z-index: 2;
|
|
}
|
|
|
|
#qrcode-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1002;
|
|
}
|
|
|
|
#qrcode-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1002;
|
|
}
|
|
|
|
#qrcode {
|
|
position: relative;
|
|
z-index: 1002;
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
#qrcode-text {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#qrcode-text p {
|
|
white-space: pre-wrap;
|
|
/* 自动换行 */
|
|
}
|
|
|
|
.close-qrcode {
|
|
color: #000000;
|
|
cursor: pointer;
|
|
background-color: #ffe99d;
|
|
padding: 5px 30px;
|
|
border-radius: 3px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.header-container {
|
|
position: fixed;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 18%;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
min-height: 140px;
|
|
min-width: 500px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.btn {
|
|
width: 145px;
|
|
padding: 10px;
|
|
background-color: #ffe99d;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-ms-border-radius: 5px;
|
|
-o-border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.status-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 20px;
|
|
padding: 12px 20px;
|
|
width: 15%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #ffe99d;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-ms-border-radius: 5px;
|
|
-o-border-radius: 5px;
|
|
right: 0;
|
|
color: #ffe99d;
|
|
}
|
|
|
|
.red {
|
|
color: rgb(255, 67, 67);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.red-background {
|
|
background-color: rgb(255, 70, 70);
|
|
}
|
|
|
|
.connect-btn {
|
|
width: 100%;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.connect-btn button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.connect-btn button {
|
|
padding: 5px 10px;
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
}
|
|
|
|
.dg-controller {
|
|
width: 85%;
|
|
z-index: 1000;
|
|
color: #ffe99d;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border: 1px solid #ffe99d;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-ms-border-radius: 5px;
|
|
-o-border-radius: 5px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 1020px */
|
|
@media screen and (max-width: 1020px) {
|
|
.dg-controller {
|
|
width: 80%;
|
|
}
|
|
|
|
.status-container {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 792px) {
|
|
.dg-controller {
|
|
width: 72%;
|
|
}
|
|
|
|
.status-container {
|
|
width: 28%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.dg-controller {
|
|
width: 65%;
|
|
}
|
|
|
|
.status-container {
|
|
width: 35%;
|
|
}
|
|
}
|
|
|
|
.dg-controller {
|
|
scrollbar-width: thin;
|
|
/* Firefox */
|
|
scrollbar-color: #ffe99d transparent;
|
|
/* Firefox */
|
|
}
|
|
|
|
.dg-controller::-webkit-scrollbar {
|
|
width: 8px;
|
|
/* Chrome, Safari */
|
|
}
|
|
|
|
.dg-controller::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
/* Chrome, Safari */
|
|
}
|
|
|
|
.dg-controller::-webkit-scrollbar-thumb {
|
|
background-color: #ffe99d;
|
|
/* Chrome, Safari */
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Firefox */
|
|
.dg-controller {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #ffe99d transparent;
|
|
}
|
|
|
|
.btn-container {
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 85%;
|
|
}
|
|
|
|
.inputTime {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.inputTime input,
|
|
.btn-container input {
|
|
width: 50px;
|
|
}
|
|
|
|
.btn-container>* {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#custom-msg {
|
|
margin-top: 10px;
|
|
min-width: 200px;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.intro-game {
|
|
color: #ffe99d;
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 20px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.channel-circle {
|
|
width: 80px;
|
|
text-align: center;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
border: #fce9a7 2px solid;
|
|
margin: 8px;
|
|
}
|
|
.channel-tag {
|
|
line-height: 20px;
|
|
font-size: 18px;
|
|
color: #fce9a7;
|
|
background: #171717;
|
|
transform: translateY(-10px);
|
|
}
|
|
.channel-strength {
|
|
line-height: 40px;
|
|
font-size: 32px;
|
|
color: #fce9a7;
|
|
|
|
}
|
|
.soft-strength {
|
|
line-height: 20px;
|
|
font-size: 18px;
|
|
color: #fce9a7;
|
|
background: #171717;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.game-title {
|
|
display: flex;
|
|
}
|
|
|
|
.game-tips {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #ffe99d;
|
|
top: 16px;
|
|
right: 25px;
|
|
position: fixed;
|
|
}
|
|
|
|
.game-info {
|
|
position: fixed;
|
|
top: 64px;
|
|
right: 60px;
|
|
padding: 0 10px 10px 10px;
|
|
color: #ffe99d;
|
|
background: #171717;
|
|
border-radius: 10px;
|
|
border: 1px solid #ffe99d;
|
|
width: 200px;
|
|
}
|
|
|
|
.tips-hide {
|
|
font-weight: bold;
|
|
margin-left: 15px;
|
|
border-radius: 3px;
|
|
padding: 2px 12px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-ms-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
}
|
|
|
|
.toggle-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 46px;
|
|
height: 22px;
|
|
background-color: #3b3b3b;
|
|
border-radius: 13px;
|
|
cursor: pointer;
|
|
-webkit-flex-shrink: 0;
|
|
/* Safari 和 Chrome */
|
|
-ms-flex-negative: 0;
|
|
/* IE 10+ */
|
|
flex-shrink: 0;
|
|
-moz-box-flex: 0;
|
|
/* Firefox */
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
width: 16px;
|
|
height: 16px;
|
|
left: 5px;
|
|
bottom: 3px;
|
|
background-color: #ddd;
|
|
border-radius: 50%;
|
|
transition: .4s;
|
|
-webkit-transition: .4s;
|
|
-moz-transition: .4s;
|
|
-ms-transition: .4s;
|
|
-o-transition: .4s;
|
|
}
|
|
|
|
.toggle-container.on {
|
|
background-color: #fce9a7;
|
|
}
|
|
|
|
.toggle-container.on .toggle-switch {
|
|
transform: translateX(20px);
|
|
-webkit-transform: translateX(20px);
|
|
-moz-transform: translateX(20px);
|
|
-ms-transform: translateX(20px);
|
|
-o-transform: translateX(20px);
|
|
background-color: #000;
|
|
}
|
|
|
|
.question-img {
|
|
height: 20px;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
background-color: #333;
|
|
color: #ffe99d;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
display: none;
|
|
/* 默认隐藏 */
|
|
z-index: 1000;
|
|
}
|
|
|
|
select {
|
|
height: 22px;
|
|
}
|
|
|
|
.information {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
padding: 10px 30px 30px 30px;
|
|
color: #ffe99d;
|
|
background-color: rgba(0, 0, 0);
|
|
border: 1px solid #ffe99d;
|
|
border-radius: 10px;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
-ms-border-radius: 10px;
|
|
-o-border-radius: 10px;
|
|
z-index: 1003;
|
|
}
|
|
|
|
.information a {
|
|
color: inherit;
|
|
}
|
|
|
|
.information a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.information-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
z-index: 100;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
visibility: hidden;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.information {
|
|
color: #dddddd;
|
|
}
|
|
|
|
.information h2 {
|
|
color: #ffe99d;
|
|
}
|
|
|
|
.information .notify{
|
|
color: #ffe99d;
|
|
}
|
|
|
|
.info-close {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.info-close-btn {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
background-color: #000;
|
|
border: 1px solid #ffe99d;
|
|
color: #ffe99d;
|
|
cursor: pointer;
|
|
padding: 10px 30px;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-ms-border-radius: 5px;
|
|
-o-border-radius: 5px;
|
|
}
|
|
|
|
.info-close-btn:hover {
|
|
background-color: #ffe99d;
|
|
color: #000;
|
|
}
|
|
|
|
.settings-window {
|
|
position: fixed;
|
|
top: 10%;
|
|
bottom: 10%;
|
|
height: 500px;
|
|
left: 10%;
|
|
right: 10%;
|
|
background-color: #171717;
|
|
border-radius: 20px;
|
|
border: #ffe99d 2px solid;
|
|
z-index: 100;
|
|
padding: 20px;
|
|
}
|
|
.settings-window-body {
|
|
overflow-y: auto;
|
|
height: 500px;
|
|
}
|
|
.settings-window-body::-webkit-scrollbar {
|
|
width: 10px; /* 宽度 */
|
|
}
|
|
|
|
.settings-window-body::-webkit-scrollbar-track {
|
|
background: transparent; /* 轨道颜色 */
|
|
}
|
|
|
|
.settings-window-body::-webkit-scrollbar-thumb {
|
|
background: #ffe99d; /* 滚动条颜色 */
|
|
}
|
|
|
|
.settings-window-body::-webkit-scrollbar-thumb:hover {
|
|
background: #ffe99d; /* 滚动条鼠标悬停颜色 */
|
|
}
|
|
|
|
.tag {
|
|
background: #fce9a7;
|
|
color: #000;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.settings-window-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99;
|
|
}
|
|
|
|
.animated-notice {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease-in-out forwards;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
b {
|
|
color: #fce9a7;
|
|
}
|