mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-25 01:41:46 +00:00
Style changes
This commit is contained in:
parent
13f73014b8
commit
b3bdad5521
4 changed files with 49 additions and 15 deletions
|
|
@ -120,17 +120,18 @@ function openDiscord() {
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 46px;
|
||||
height: 4vmin;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid var(--outline);
|
||||
}
|
||||
|
||||
.nav > * {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
height: 4vmin;
|
||||
width: 4vmin;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
|
||||
.nav > .banner {
|
||||
|
|
@ -148,8 +149,8 @@ function openDiscord() {
|
|||
}
|
||||
|
||||
.overlay-nav > * {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 4vmin;
|
||||
width: 4vmin;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
|
@ -158,7 +159,6 @@ function openDiscord() {
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
text-align: left;
|
||||
margin-left: 12px;
|
||||
cursor: unset;
|
||||
|
|
@ -217,8 +217,8 @@ function openDiscord() {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.discord-links li:first-child {
|
||||
font-size: 1.2em;
|
||||
.discord-links li {
|
||||
font-size: 2vmin;
|
||||
}
|
||||
|
||||
*:not(.overlay-nav) .discord:hover .discord-links {
|
||||
|
|
@ -226,7 +226,7 @@ function openDiscord() {
|
|||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 36px;
|
||||
font-size: 4vmin;
|
||||
}
|
||||
|
||||
.material-icons:hover {
|
||||
|
|
@ -238,6 +238,7 @@ function openDiscord() {
|
|||
height: 25px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 10px;
|
||||
font-size: 2vmin;
|
||||
}
|
||||
|
||||
.overlay-nav .version-container {
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@ watchEffect(() => {
|
|||
|
||||
.character.shake {
|
||||
animation: shake 0.5s infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.character * {
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@
|
|||
padding: 1vmin 0 0.5vmin 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-size: 2vmin;
|
||||
}
|
||||
|
||||
.stream-type.active {
|
||||
|
|
@ -176,6 +177,7 @@
|
|||
.no-margin .row {
|
||||
margin: 0;
|
||||
flex-flow: row;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.shop .row::after {
|
||||
|
|
@ -229,6 +231,8 @@
|
|||
.battle-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: -25px 0;
|
||||
height: calc(100% + 50px);
|
||||
}
|
||||
|
||||
.battle-container:not(.fast) * {
|
||||
|
|
@ -237,7 +241,7 @@
|
|||
|
||||
.teams-container {
|
||||
display: flex;
|
||||
height: calc(93vh - 154px);
|
||||
height: calc(93vh - 104px);
|
||||
width: 93%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -261,6 +265,7 @@
|
|||
filter: drop-shadow(2px 4px 6px black);
|
||||
text-shadow: -1px 1px 0 var(--raised-background), 1px 1px 0 var(--raised-background), 1px -1px 0 var(--raised-background), -1px -1px 0 var(--raised-background);
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stream-details {
|
||||
|
|
@ -292,7 +297,7 @@
|
|||
}
|
||||
|
||||
.members-container {
|
||||
width: 18vmin;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.members-container .col {
|
||||
|
|
@ -314,7 +319,6 @@
|
|||
|
||||
.battle-controls {
|
||||
display: flex;
|
||||
margin-top: -2vmin;
|
||||
}
|
||||
|
||||
.battle-controls .button {
|
||||
|
|
@ -336,13 +340,18 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.character-transition-enter-from {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
.character-transition-leave-to {
|
||||
transform: translateX(100%);
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
.team-container:first-child
|
||||
.character-transition-leave-to {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
.streamer-transition-enter-from {
|
||||
transform: translateY(100%);
|
||||
|
|
@ -385,3 +394,18 @@
|
|||
50% { transform: rotate(30deg); }
|
||||
80% {transform:scale(.95);}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.members-container .col {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.team-container:first-child .members-container .col {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -910,6 +910,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
return {
|
||||
name: "Game",
|
||||
minimizable: false,
|
||||
minWidth: 100,
|
||||
display: jsx(() => {
|
||||
if (wins.value >= 5) {
|
||||
return (
|
||||
|
|
@ -920,7 +921,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
<CharacterSlot character={team.value[i]} />
|
||||
))}
|
||||
</Row>
|
||||
<img src={playAgain} class="button" onClick={() => location.reload()} />
|
||||
<img
|
||||
src={playAgain}
|
||||
class="button"
|
||||
style="height: 20vmin; image-rendering: pixelated;"
|
||||
onClick={() => location.reload()}
|
||||
/>
|
||||
{render(particles)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1029,6 +1035,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
/>
|
||||
))}
|
||||
</TransitionGroup>
|
||||
<div style="font-size: 5vmin; margin: 5vmin;">→</div>
|
||||
</Column>
|
||||
</div>
|
||||
<div class="team-container">
|
||||
|
|
@ -1088,6 +1095,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
/>
|
||||
))}
|
||||
</TransitionGroup>
|
||||
<div style="font-size: 5vmin; margin: 5vmin;">←</div>
|
||||
</Column>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue