Refine Princess Lima for v2 presentation
All checks were successful
Build Org Website / build (push) Successful in 1m2s
All checks were successful
Build Org Website / build (push) Successful in 1m2s
This commit is contained in:
gitea-actions
@@ -105,6 +105,7 @@ button:disabled {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
image-rendering: pixelated;
|
||||
transition: filter 320ms ease, transform 320ms ease;
|
||||
}
|
||||
|
||||
.lima-rpg__loading,
|
||||
@@ -231,7 +232,9 @@ button:disabled {
|
||||
height: 64px;
|
||||
border: 2px solid #d8b66d;
|
||||
border-radius: 4px;
|
||||
background-size: 256px 256px;
|
||||
background-image: url("/assets/images/play/princess-lima/portrait-atlas-v2.png");
|
||||
background-position: 100% 100%;
|
||||
background-size: 400% 400%;
|
||||
}
|
||||
|
||||
.lima-hud__equipment {
|
||||
@@ -423,10 +426,16 @@ button:disabled {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.lima-list li.is-complete strong::before {
|
||||
.lima-list li.is-complete strong::before,
|
||||
.lima-list li.complete strong::before {
|
||||
content: "✓ ";
|
||||
}
|
||||
|
||||
.lima-list small {
|
||||
grid-column: 1 / -1;
|
||||
color: var(--lima-muted);
|
||||
}
|
||||
|
||||
.lima-list p {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
@@ -652,6 +661,200 @@ button:disabled {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.lima-screenreader {
|
||||
position: fixed;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lima-rpg.is-dialogue-blur .lima-rpg__game canvas {
|
||||
filter: blur(4px) saturate(0.58) brightness(0.62);
|
||||
transform: scale(1.015);
|
||||
}
|
||||
|
||||
.lima-rpg.is-dialogue-depth .lima-rpg__game canvas {
|
||||
filter: saturate(0.68) brightness(0.55);
|
||||
}
|
||||
|
||||
.lima-panel[data-kind="dialogue"] {
|
||||
position: absolute;
|
||||
right: clamp(1rem, 4vw, 4rem);
|
||||
bottom: clamp(1rem, 4vh, 3rem);
|
||||
left: max(288px, clamp(1rem, 4vw, 4rem));
|
||||
width: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
border-color: #e4c477;
|
||||
background:
|
||||
linear-gradient(135deg, rgb(23 25 39 / 0.98), rgb(8 12 23 / 0.98)),
|
||||
url("/assets/images/play/princess-lima/world-tiles.png");
|
||||
box-shadow: 0 18px 70px rgb(0 0 0 / 0.82), inset 0 0 0 1px rgb(255 239 190 / 0.16);
|
||||
}
|
||||
|
||||
.lima-panel[data-kind="dialogue"] > header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lima-panel[data-kind="dialogue"] .lima-panel__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(170px, 26%) 1fr;
|
||||
min-height: 236px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__portrait {
|
||||
min-height: 236px;
|
||||
border-right: 2px solid #a8844d;
|
||||
background-image:
|
||||
linear-gradient(0deg, rgb(7 10 18 / 0.3), transparent 45%),
|
||||
url("/assets/images/play/princess-lima/portrait-atlas-v2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 400% 400%;
|
||||
image-rendering: auto;
|
||||
animation: lima-portrait-arrive 320ms ease-out both;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.1rem 1.25rem;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__speaker {
|
||||
margin: 0 0 0.6rem;
|
||||
color: #f6d785;
|
||||
font-family: Georgia, serif;
|
||||
font-size: clamp(1.25rem, 2.2vw, 1.8rem);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__speaker span {
|
||||
margin-left: 0.5rem;
|
||||
color: #b8c1ce;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__text {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
color: #fff8e7;
|
||||
font-family: Georgia, serif;
|
||||
font-size: clamp(1rem, 1.7vw, 1.28rem);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__choices {
|
||||
display: grid;
|
||||
gap: 0.48rem;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__choices button {
|
||||
display: grid;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
align-items: center;
|
||||
border-color: #7d94aa;
|
||||
background: rgb(24 41 59 / 0.82);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__choices button span {
|
||||
display: grid;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
place-items: center;
|
||||
border: 1px solid #e3bf6d;
|
||||
border-radius: 50%;
|
||||
color: #f4d27e;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue__controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.lima-history {
|
||||
width: min(44rem, calc(100% - 2rem));
|
||||
max-height: 78dvh;
|
||||
overflow: auto;
|
||||
border: 3px solid var(--lima-border);
|
||||
background: #0b111e;
|
||||
color: var(--lima-text);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lima-history::backdrop {
|
||||
background: rgb(2 4 8 / 0.8);
|
||||
}
|
||||
|
||||
.lima-history li {
|
||||
margin-bottom: 0.75rem;
|
||||
border-left: 3px solid #9e7c46;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.lima-history p {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.lima-settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.lima-settings-grid label {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
border: 1px solid #46546a;
|
||||
background: #0b1220;
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
.lima-settings-grid input[type="checkbox"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.lima-ending-mark {
|
||||
color: #f4d37e;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lima-rpg[data-saved="true"]::after {
|
||||
content: "Journey saved";
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
border: 1px solid #d6b466;
|
||||
background: rgb(6 10 18 / 0.9);
|
||||
color: #fff2cd;
|
||||
padding: 0.48rem 0.7rem;
|
||||
}
|
||||
|
||||
@keyframes lima-portrait-arrive {
|
||||
from { opacity: 0; transform: translateX(-14px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.lima-hud {
|
||||
width: 220px;
|
||||
@@ -677,6 +880,18 @@ button:disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lima-panel[data-kind="dialogue"] {
|
||||
left: 232px;
|
||||
}
|
||||
|
||||
.lima-cinematic-dialogue {
|
||||
grid-template-columns: 130px 1fr;
|
||||
}
|
||||
|
||||
.lima-settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-height: 560px) and (orientation: landscape) {
|
||||
|
||||
Reference in New Issue
Block a user