| :root {
|
| --guiScaleFactor: 3;
|
| --guiScale: 3;
|
| --chatWidth: 320px;
|
| --chatHeight: 180px;
|
| --chatScale: 1;
|
| }
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| html {
|
| height: 100vh;
|
| overflow: hidden;
|
| }
|
|
|
| .dirt-bg {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| background: url('textures/1.17.1/gui/options_background.png'), rgba(0, 0, 0, 0.7);
|
| background-size: 16px;
|
| background-repeat: repeat;
|
| width: 100%;
|
| height: 100%;
|
| transform-origin: top left;
|
| transform: scale(2);
|
| background-blend-mode: overlay;
|
| }
|
|
|
| @font-face {
|
| font-family: minecraft;
|
| src: url(minecraftia.woff);
|
| }
|
|
|
| @font-face {
|
| font-family: mojangles;
|
| src: url(mojangles.ttf);
|
| }
|
|
|
| body {
|
| overflow: hidden;
|
| position: relative;
|
| margin:0;
|
| padding:0;
|
| height: 100vh;
|
| font-family: sans-serif;
|
| background: #333;
|
|
|
| -webkit-touch-callout: none;
|
| -webkit-user-select: none;
|
| -khtml-user-select: none;
|
| -moz-user-select: none;
|
| -ms-user-select: none;
|
| user-select: none;
|
| }
|
|
|
| canvas {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| height: 100%;
|
| width: 100%;
|
| font-size: 0;
|
| margin: 0;
|
| padding: 0;
|
| }
|
|
|
| #ui-root {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| transform-origin: top left;
|
| transform: scale(var(--guiScale));
|
| width: calc(100% / var(--guiScale));
|
| height: calc(100% / var(--guiScale));
|
| z-index: 10;
|
| image-rendering: optimizeSpeed;
|
| image-rendering: -moz-crisp-edges;
|
| image-rendering: -webkit-optimize-contrast;
|
| image-rendering: -o-crisp-edges;
|
| image-rendering: pixelated;
|
| -ms-interpolation-mode: nearest-neighbor;
|
| font-family: minecraft, mojangles, monospace;
|
| }
|
|
|
| @media only screen and (max-width: 971px) {
|
| #ui-root {
|
| transform: scale(2);
|
| width: calc(100% / 2);
|
| height: calc(100% / 2);
|
| }
|
| }
|
|
|
| @media only screen and (max-height: 670px) {
|
| #ui-root {
|
| transform: scale(2);
|
| width: calc(100% / 2);
|
| height: calc(100% / 2);
|
| }
|
| }
|
|
|
| @media only screen and (max-width: 561px) {
|
| #ui-root {
|
| transform: scale(1);
|
| width: calc(100% / 1);
|
| height: calc(100% / 1);
|
| }
|
| }
|
|
|
| @media only screen and (max-height: 430px) {
|
| #ui-root {
|
| transform: scale(1);
|
| width: calc(100% / 1);
|
| height: calc(100% / 1);
|
| }
|
| } |
