|
@@ -0,0 +1,99 @@
|
|
|
|
+.home {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ &__back {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 30px;
|
|
|
|
+ left: 30px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ z-index: var(--z-index-top);
|
|
|
|
+ }
|
|
|
|
+ &_logo {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ bottom: 20px;
|
|
|
|
+ width: 300px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ width: 50%;
|
|
|
|
+ }
|
|
|
|
+ span {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+#player {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ canvas {
|
|
|
|
+ position: relative;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+#hot {
|
|
|
|
+ position: absolute;
|
|
|
|
+ padding: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+
|
|
|
|
+ > div[pos='right'] {
|
|
|
|
+ transform: translate(20px, -50%);
|
|
|
|
+ }
|
|
|
|
+ > div[pos='top'] {
|
|
|
|
+ transform: translate(-50%, calc(-100% - 20px));
|
|
|
|
+ }
|
|
|
|
+ > div[pos='middle'] {
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ }
|
|
|
|
+ > div[pos='bottom'] {
|
|
|
|
+ transform: translate(-50%, 20px);
|
|
|
|
+ }
|
|
|
|
+ > div[pos='left'] {
|
|
|
|
+ transform: translate(calc(-100% - 20px), -50%);
|
|
|
|
+ }
|
|
|
|
+ > div {
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #fff;
|
|
|
|
+ user-select: none;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ background-color: rgba(34, 34, 34, 0.3);
|
|
|
|
+ padding: 10px;
|
|
|
|
+ max-width: 400px;
|
|
|
|
+ letter-spacing: 1px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ z-index: var(--z-index-top);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@media only screen and (max-width: 600px) {
|
|
|
|
+ .home {
|
|
|
|
+ &_logo {
|
|
|
|
+ width: 200px;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|