1
0
Fork 0
A320-family/WebPanel/WebPanel2/css/mcdu.css

281 lines
3.4 KiB
CSS

* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-user-select: none;
user-select: none;
}
html, body {
overscroll-behavior-y: none;
position: fixed;
overflow: hidden;
}
body {
width: calc(100vw - 2px);
height: calc(100vh - 2px);
margin-left: 1px;
overflow: hidden;
background-color: #000;
}
.mcdu {
width: 100vw;
height: calc(100vw / .6);
max-height: 100vh;
max-width: calc(100vh * .6);
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
}
.mcdu_case {
display: block;
width: 100%;
height: auto;
}
.mcdu-glass {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.mcdu-glass--dust {
display: none;
position: absolute;
top: 6%;
left: 13%;
width: 73.5%;
opacity: 0.5;
transform: scale(1, -1);
filter: blur(0.1vh);
}
[data-used-universe="1"] .mcdu-glass--dust {
display: inline-block;
}
.screen-img,
.screen-glow {
position: absolute;
top: 7.5%;
left: 13.4%;
width: 72.8%;
}
.screen-glow {
display: none;
}
[data-used-universe="1"] .screen-glow {
display: inline-block;
filter: brightness(50) blur(0.2vh);
opacity: 0.15;
}
.mcdu-fg {
position: absolute;
top: 0.3%;
left: 0;
width: 100%;
height: 100%;
}
[data-button] {
position: absolute;
cursor: pointer;
}
[data-showbuttons="1"] [data-button] {
background-color: red;
opacity: 0.5;
}
.glassbutton {
top: 6%;
left: 13%;
width: 73.5%;
height: 40%
}
.skbutton {
width: 7.7%;
height: 3.3%;
border-radius: 0.2vh;
}
.menubutton {
width: 9.8%;
height: 4%;
border-radius: 0.2vh;
}
.numberbutton {
width: 7.5%;
padding-bottom: 7.5%;
border-radius: 50%;
}
.alphabutton {
width: 7.4%;
padding-bottom: 7.4%;
border-radius: 0.2vh;
}
.skbuttons-left .skbutton {
left: 1.6%;
}
.skbuttons-right .skbutton {
right: 2.1%;
}
.sk-1 {
top: 12.3%;
}
.sk-2 {
top: 17.34%;
}
.sk-3 {
top: 22.4%;
}
.sk-4 {
top: 27.4%;
}
.sk-5 {
top: 32.5%;
}
.sk-6 {
top: 37.6%;
}
.menu-row1 .menubutton {
top: 48.2%;
}
.menu-row2 .menubutton {
top: 53.04%;
}
.menu-row3 .menubutton {
top: 57.9%;
}
.menu-row4 .menubutton {
top: 62.8%;
}
.menu-row5 .menubutton {
top: 67.6%;
}
.menu-col1 {
left: 11.3%;
}
.menu-col2 {
left: 23.2%;
}
.menu-col3 {
left: 35.1%;
}
.menu-col4 {
left: 47%;
}
.menu-col5 {
left: 59%;
}
.menu-col6 {
left: 70.95%;
}
.number-row1 .numberbutton {
top: 73.9%;
}
.number-row2 .numberbutton {
top: 79.6%;
}
.number-row3 .numberbutton {
top: 85.3%;
}
.number-row4 .numberbutton {
top: 91%;
}
.number-col1 {
left: 11.5%;
}
.number-col2 {
left: 21.1%;
}
.number-col3 {
left: 30.6%;
}
.alphabutton-row1 .alphabutton {
top: 59.5%;
}
.alphabutton-row2 .alphabutton {
top: 65.8%;
}
.alphabutton-row3 .alphabutton {
top: 72.1%;
}
.alphabutton-row4 .alphabutton {
top: 78.4%;
}
.alphabutton-row5 .alphabutton {
top: 84.8%;
}
.alphabutton-row6 .alphabutton {
top: 91.1%;
}
.alphabutton-col1 {
left: 40.6%;
}
.alphabutton-col2 {
left: 50.7%;
}
.alphabutton-col3 {
left: 60.7%;
}
.alphabutton-col4 {
left: 70.7%;
}
.alphabutton-col5 {
left: 80.7%;
}