154 lines
2.7 KiB
CSS
154 lines
2.7 KiB
CSS
@media (orientation: landscape) {
|
|
.button-start {
|
|
margin-bottom: 10px;
|
|
grid-column: 9;
|
|
grid-row: 7;
|
|
}
|
|
.button-select {
|
|
grid-column: 7;
|
|
grid-row: 7;
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
.button-start {
|
|
margin-bottom: 10px;
|
|
justify-self: end;
|
|
grid-column: 13;
|
|
grid-row: 7;
|
|
}
|
|
.button-select {
|
|
grid-column: 2;
|
|
grid-row: 7;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--button-color: lightgrey;
|
|
}
|
|
|
|
|
|
.button {
|
|
line-height: var(--button-height);
|
|
height: var(--button-height);
|
|
width: var(--button-width);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
}
|
|
|
|
.button.pressed {
|
|
filter: drop-shadow(2px 2px 6px black);
|
|
}
|
|
.button-a, .button-b {
|
|
--button-height: 50px;
|
|
--button-width: 50px;
|
|
border-radius: 50%;
|
|
background-color: var(--button-color);
|
|
}
|
|
.button-l, .button-r {
|
|
--button-height: 50px;
|
|
--button-width: 50px;
|
|
background-color: var(--button-color);
|
|
}
|
|
.button-up, .button-down, .button-right, .button-left, .button-dummy {
|
|
--button-height: 50px;
|
|
--button-width: 50px;
|
|
background-color: var(--button-color);
|
|
}
|
|
.button-start, .button-select {
|
|
--button-height: 40px;
|
|
--button-width: 80px;
|
|
background-color: var(--button-color);
|
|
border-radius: calc( var(--button-height) * .5 );
|
|
}
|
|
|
|
|
|
.button-up {
|
|
border-radius: 15% 15% 0% 0%;
|
|
}
|
|
.button-down {
|
|
border-radius: 0% 0% 15% 15%;
|
|
}
|
|
.button-left {
|
|
border-radius: 15% 0% 0% 15%;
|
|
}
|
|
.button-right {
|
|
border-radius: 0% 15% 15% 0%;
|
|
}
|
|
.button-l {
|
|
border-radius: 35% 5% 35% 5%;
|
|
}
|
|
.button-r {
|
|
border-radius: 5% 35% 5% 35%;
|
|
}
|
|
|
|
|
|
.buttonwrap {
|
|
position: absolute;
|
|
height: calc(100% - 20px);
|
|
width: calc(100% - 20px);
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.buttons {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 10px 10px auto auto auto 1fr auto 10px auto 1fr auto auto 10px 10px;
|
|
grid-template-rows: auto 1fr auto auto auto 1fr auto auto;
|
|
}
|
|
.button-up {
|
|
grid-column: 4;
|
|
grid-row: 3;
|
|
}
|
|
.button-left {
|
|
grid-column: 3;
|
|
grid-row: 4;
|
|
}
|
|
.button-right {
|
|
grid-column: 5;
|
|
grid-row: 4;
|
|
}
|
|
.button-down {
|
|
grid-column: 4;
|
|
grid-row: 5;
|
|
}
|
|
.button-dummy {
|
|
pointer-events: none;
|
|
grid-column: 4;
|
|
grid-row: 4;
|
|
}
|
|
.button-a {
|
|
grid-column: 12;
|
|
grid-row: 4;
|
|
transform: scale(1.5);
|
|
}
|
|
.button-b {
|
|
grid-column: 11;
|
|
grid-row: 4;
|
|
transform: scale(1.5) translate(-45%, 45%);
|
|
}
|
|
.button-l {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
.button-r {
|
|
justify-self: end;
|
|
grid-row: 1;
|
|
grid-column: 14;
|
|
}
|
|
|
|
/*
|
|
.button-start {
|
|
margin-bottom: 10px;
|
|
grid-column: 9;
|
|
grid-row: 7;
|
|
}
|
|
.button-select {
|
|
grid-column: 7;
|
|
grid-row: 7;
|
|
}
|
|
*/ |