601
src/index.css
Normal file
601
src/index.css
Normal file
@@ -0,0 +1,601 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
@font-face {
|
||||
font-family: "Fusion Pixel";
|
||||
src: url("/fusion-pixel.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: "Noto Serif SC", "Georgia", serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ui-scale: clamp(0.78, 0.72 + 0.45vw, 1.06);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0a0a0a;
|
||||
color: #f4f4f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.fusion-pixel-app,
|
||||
.fusion-pixel-app * {
|
||||
font-family: "Fusion Pixel", "Inter", ui-sans-serif, system-ui, sans-serif !important;
|
||||
}
|
||||
|
||||
.fusion-pixel-app .story-top-tabs {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pixel-root-shell {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.pixel-app-shell {
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.pixel-nine-slice {
|
||||
box-sizing: border-box;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-width: calc(var(--slice-top, 16) * var(--frame-scale, var(--ui-scale)) * 1px);
|
||||
border-right-width: calc(var(--slice-right, 16) * var(--frame-scale, var(--ui-scale)) * 1px);
|
||||
border-bottom-width: calc(var(--slice-bottom, 16) * var(--frame-scale, var(--ui-scale)) * 1px);
|
||||
border-left-width: calc(var(--slice-left, 16) * var(--frame-scale, var(--ui-scale)) * 1px);
|
||||
border-image-source: var(--frame-src);
|
||||
border-image-slice: var(--slice-top, 16) var(--slice-right, 16) var(--slice-bottom, 16) var(--slice-left, 16) fill;
|
||||
border-image-repeat: var(--frame-repeat, round);
|
||||
padding: calc(var(--frame-pad-y, 12) * var(--frame-scale, var(--ui-scale)) * 1px)
|
||||
calc(var(--frame-pad-x, 14) * var(--frame-scale, var(--ui-scale)) * 1px);
|
||||
background-color: var(--frame-base, transparent);
|
||||
}
|
||||
|
||||
.pixel-pressable {
|
||||
transition: transform 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.pixel-pressable:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.04);
|
||||
}
|
||||
|
||||
.pixel-pressable:active {
|
||||
transform: translateY(0);
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
.pixel-section-title {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.pixel-world-button {
|
||||
min-height: clamp(7.5rem, 26vw, 10.5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(0.35rem, 1.5vw, 0.7rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pixel-world-button__icon {
|
||||
width: clamp(2rem, 9vw, 3.2rem);
|
||||
height: clamp(2rem, 9vw, 3.2rem);
|
||||
}
|
||||
|
||||
.pixel-world-button__label {
|
||||
font-size: clamp(0.9rem, 2.8vw, 1.05rem);
|
||||
font-weight: 700;
|
||||
color: #fff7ed;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.pixel-character-card {
|
||||
min-height: clamp(7rem, 24vw, 9rem);
|
||||
}
|
||||
|
||||
.pixel-tab-button {
|
||||
display: flex;
|
||||
min-height: 1.65rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pixel-tab-button__inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.pixel-tab-button__icon {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
|
||||
.pixel-tab-button__label {
|
||||
font-size: clamp(0.66rem, 1.9vw, 0.78rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.pixel-tab-button--active .pixel-tab-button__label {
|
||||
color: #fff7ed;
|
||||
}
|
||||
|
||||
.pixel-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pixel-choice-button {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pixel-modal-shell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.world-carousel {
|
||||
--world-card-height: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
padding: max(0.75rem, calc(50% - var(--world-card-height) / 2)) 0.15rem;
|
||||
scroll-snap-type: y mandatory;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.world-carousel__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-height: var(--world-card-height);
|
||||
transform-origin: center center;
|
||||
transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
|
||||
scroll-snap-align: center;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
|
||||
.world-carousel__card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.world-carousel__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-width: 1px;
|
||||
border-radius: 9999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
}
|
||||
|
||||
.world-carousel__title {
|
||||
display: block;
|
||||
font-size: clamp(1.55rem, 5vw, 2rem);
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.world-carousel__bottom {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.world-carousel__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.world-carousel__tag {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 9999px;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 11px;
|
||||
color: rgb(244 244 245);
|
||||
}
|
||||
|
||||
.character-carousel {
|
||||
--character-card-width: clamp(12rem, 52vw, 15rem);
|
||||
display: flex;
|
||||
gap: 0.9rem;
|
||||
min-height: 0;
|
||||
overflow-x: auto;
|
||||
padding: 0.8rem max(1rem, calc(50% - var(--character-card-width) / 2));
|
||||
scroll-snap-type: x mandatory;
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
|
||||
.character-carousel__card {
|
||||
flex: 0 0 var(--character-card-width);
|
||||
height: clamp(16.25rem, 38vh, 18.5rem);
|
||||
scroll-snap-align: center;
|
||||
transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
|
||||
transform-origin: center bottom;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
|
||||
.character-carousel__surface {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(18, 22, 30, 0.92), rgba(6, 8, 12, 0.98));
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.character-carousel__surface--active {
|
||||
border-color: rgba(251, 191, 36, 0.4);
|
||||
box-shadow: 0 20px 50px rgba(251, 191, 36, 0.12);
|
||||
}
|
||||
|
||||
.character-carousel__cover {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.14), transparent 42%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%);
|
||||
}
|
||||
|
||||
.character-carousel__portrait {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
transform: scale(1.32) translateY(6px);
|
||||
}
|
||||
|
||||
.character-carousel__portrait--animated {
|
||||
height: 86%;
|
||||
transform: scale(1.22) translateY(10px);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.character-carousel__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
padding: 0.75rem 0.85rem 0.85rem;
|
||||
}
|
||||
|
||||
.character-carousel__meta--selected {
|
||||
gap: 0.2rem;
|
||||
padding-top: 0.05rem;
|
||||
}
|
||||
|
||||
.character-carousel__role {
|
||||
align-self: flex-start;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 9999px;
|
||||
padding: 0.25rem 0.7rem;
|
||||
font-size: 10px;
|
||||
color: rgb(228 228 231);
|
||||
}
|
||||
|
||||
.character-carousel__name {
|
||||
display: block;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.character-carousel__selected-name {
|
||||
display: block;
|
||||
padding: 0.35rem 0.85rem 0;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.character-carousel__title {
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgb(161 161 170);
|
||||
}
|
||||
|
||||
.character-carousel__title--selected {
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.character-carousel__stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.character-carousel__stat {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 9999px;
|
||||
padding: 0.28rem 0.65rem;
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.character-backstory-title {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.character-backstory-title::after {
|
||||
content: '角色背景';
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.selection-strip {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
min-height: 0;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
|
||||
.flip-card {
|
||||
flex: 0 0 clamp(17rem, 28vw, 20rem);
|
||||
height: clamp(18rem, 44vh, 21rem);
|
||||
perspective: 1600px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.flip-card__inner {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 360ms ease;
|
||||
}
|
||||
|
||||
.flip-card:hover .flip-card__inner,
|
||||
.flip-card--flipped .flip-card__inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-card__face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card__face--back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.world-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.15rem;
|
||||
scroll-snap-type: y proximity;
|
||||
}
|
||||
|
||||
.world-stack-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.15rem;
|
||||
min-height: 9rem;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.world-stack-card__top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.world-stack-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-width: 1px;
|
||||
border-radius: 9999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
}
|
||||
|
||||
.world-stack-card__title {
|
||||
display: block;
|
||||
font-size: clamp(1.55rem, 5vw, 2rem);
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.world-stack-card__bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.world-stack-card__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.world-stack-card__tag {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 9999px;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 11px;
|
||||
color: rgb(244 244 245);
|
||||
}
|
||||
|
||||
.world-stack-card__enter {
|
||||
flex: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 9999px;
|
||||
padding: 0.42rem 0.95rem;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:root {
|
||||
--ui-scale: 0.8;
|
||||
}
|
||||
|
||||
.world-carousel {
|
||||
--world-card-height: 8.75rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.character-carousel {
|
||||
--character-card-width: 10.75rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.character-carousel__card {
|
||||
height: 15.5rem;
|
||||
}
|
||||
|
||||
.character-carousel__cover {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.character-carousel__meta {
|
||||
padding: 0.6rem 0.7rem 0.7rem;
|
||||
}
|
||||
|
||||
.character-carousel__selected-name {
|
||||
padding-inline: 0.65rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.character-carousel__name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.character-carousel__title {
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.selection-strip {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.flip-card {
|
||||
flex-basis: 15rem;
|
||||
height: 18rem;
|
||||
}
|
||||
|
||||
.world-stack {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.world-stack-card {
|
||||
min-height: 8.75rem;
|
||||
}
|
||||
|
||||
.world-stack-card__title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.world-stack-card__bottom {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pixel-character-card {
|
||||
min-height: 6.6rem;
|
||||
}
|
||||
|
||||
.pixel-modal-shell {
|
||||
max-height: min(90vh, 46rem);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.world-carousel {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.world-stack {
|
||||
max-width: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar for the story area */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3f3f46;
|
||||
}
|
||||
Reference in New Issue
Block a user