refactoring
This commit is contained in:
387
app/styles.css
387
app/styles.css
@@ -1084,6 +1084,132 @@
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.kab-rose-layout {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(520px, 1.2fr) minmax(320px, 1fr);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.kab-rose-panel {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
border-right: 1px solid #27272a;
|
||||
background:
|
||||
radial-gradient(circle at 52% 40%, rgba(255, 255, 255, 0.06), transparent 36%),
|
||||
linear-gradient(180deg, #020617 0%, #02030a 100%);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.kab-rose-intro {
|
||||
padding: 8px 14px 0;
|
||||
color: #a1a1aa;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.kab-rose-cross-container {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px 8px 14px;
|
||||
}
|
||||
|
||||
.kab-rose-cross-container > .kab-rose-svg {
|
||||
width: min(100%, 980px);
|
||||
max-height: min(100%, 1160px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.kab-rose-petal {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.kab-rose-petal-shape {
|
||||
transition: transform 120ms ease, filter 120ms ease, stroke 120ms ease;
|
||||
}
|
||||
|
||||
.kab-rose-petal:hover .kab-rose-petal-shape,
|
||||
.kab-rose-petal:focus-visible .kab-rose-petal-shape {
|
||||
transform: scale(1.07);
|
||||
filter: brightness(1.14);
|
||||
stroke: rgba(255, 255, 255, 0.75);
|
||||
stroke-width: 2.4;
|
||||
}
|
||||
|
||||
.kab-rose-petal.kab-path-active .kab-rose-petal-shape {
|
||||
filter: brightness(1.2);
|
||||
stroke: #f8fafc;
|
||||
stroke-width: 2.6;
|
||||
}
|
||||
|
||||
.kab-rose-petal-letter {
|
||||
font-family: "Noto Sans Hebrew", var(--font-script-main), serif;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
fill: #f8fafc;
|
||||
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.66);
|
||||
}
|
||||
|
||||
.kab-rose-petal-number {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
pointer-events: none;
|
||||
fill: rgba(241, 245, 249, 0.95);
|
||||
}
|
||||
|
||||
.kab-rose-arm-glyph {
|
||||
pointer-events: none;
|
||||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
|
||||
}
|
||||
|
||||
.kab-rose-petal--mother .kab-rose-petal-letter,
|
||||
.kab-rose-petal--double .kab-rose-petal-letter {
|
||||
fill: #111827;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.kab-rose-petal--mother .kab-rose-petal-number,
|
||||
.kab-rose-petal--double .kab-rose-petal-number {
|
||||
fill: rgba(17, 24, 39, 0.92);
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
.kab-rose-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: minmax(360px, auto) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.kab-rose-panel {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
|
||||
.kab-rose-cross-container > .kab-rose-svg {
|
||||
width: min(100%, 860px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.kab-rose-cross-container {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.kab-rose-cross-container > .kab-rose-svg {
|
||||
width: min(100%, 700px);
|
||||
}
|
||||
|
||||
.kab-rose-petal-letter {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.natal-chart-summary {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
@@ -1322,6 +1448,16 @@
|
||||
transition: filter 120ms ease, opacity 120ms ease;
|
||||
}
|
||||
|
||||
.cube-tarot-image {
|
||||
cursor: zoom-in;
|
||||
transition: filter 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
.cube-tarot-image:hover {
|
||||
filter: drop-shadow(0 0 4px rgba(224, 231, 255, 0.92));
|
||||
transform: translateY(-0.6px);
|
||||
}
|
||||
|
||||
.cube-direction:hover .cube-direction-card,
|
||||
.cube-direction-card.is-active {
|
||||
filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
|
||||
@@ -1598,6 +1734,15 @@
|
||||
filter: drop-shadow(0 0 5px rgba(112, 96, 176, 0.78));
|
||||
}
|
||||
|
||||
.kab-path-tarot {
|
||||
cursor: zoom-in;
|
||||
transition: filter 120ms ease;
|
||||
}
|
||||
|
||||
.kab-path-tarot:hover {
|
||||
filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.85));
|
||||
}
|
||||
|
||||
.kab-path-lbl.kab-path-active {
|
||||
fill: #c8b8f8 !important;
|
||||
}
|
||||
@@ -1933,6 +2078,14 @@
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
#tarot-spread-board {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#tarot-spread-meanings {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#tarot-spread-view[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1998,6 +2151,13 @@
|
||||
margin-left: auto;
|
||||
transition: background 120ms, border-color 120ms;
|
||||
}
|
||||
|
||||
#tarot-spread-reveal-all:disabled,
|
||||
.tarot-spread-redraw-btn:disabled {
|
||||
opacity: 0.56;
|
||||
cursor: default;
|
||||
filter: saturate(0.72);
|
||||
}
|
||||
.tarot-spread-redraw-btn:hover {
|
||||
background: #312e81;
|
||||
border-color: #6366f1;
|
||||
@@ -2054,97 +2214,236 @@
|
||||
|
||||
/* ── Spread Board ──────────────────────────────────── */
|
||||
.tarot-spread-board {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0 1.5rem;
|
||||
--spread-card-width: 116px;
|
||||
--spread-card-height: 184px;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
padding: 1.1rem 1rem 1.5rem;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
radial-gradient(circle at 20% 12%, rgba(236, 72, 153, 0.14), transparent 40%),
|
||||
radial-gradient(circle at 84% 86%, rgba(59, 130, 246, 0.14), transparent 44%),
|
||||
linear-gradient(180deg, #0f0f1d 0%, #13131f 38%, #10101a 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 30px rgba(2, 6, 23, 0.44);
|
||||
}
|
||||
|
||||
.tarot-spread-board--three {
|
||||
flex-wrap: nowrap;
|
||||
grid-template-columns: repeat(3, var(--spread-card-width));
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
column-gap: 1.25rem;
|
||||
row-gap: 1rem;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.tarot-spread-board--celtic {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
". crown . out"
|
||||
"past present near-fut hope"
|
||||
". chall . env"
|
||||
". found . self";
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 0.8rem 1rem;
|
||||
justify-items: center;
|
||||
". crown . out ."
|
||||
"past present near-fut hope ."
|
||||
". chall . env ."
|
||||
". found . self .";
|
||||
grid-template-columns: repeat(5, var(--spread-card-width));
|
||||
justify-content: center;
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.9rem;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.spread-position { grid-area: unset; }
|
||||
.spread-position[data-pos="crown"] { grid-area: crown; }
|
||||
.spread-position[data-pos="out"] { grid-area: out; }
|
||||
.spread-position[data-pos="past"] { grid-area: past; }
|
||||
.spread-position[data-pos="present"] { grid-area: present; }
|
||||
.spread-position[data-pos="near-fut"] { grid-area: near-fut; }
|
||||
.spread-position[data-pos="hope"] { grid-area: hope; }
|
||||
.spread-position[data-pos="chall"] { grid-area: chall; }
|
||||
.spread-position[data-pos="env"] { grid-area: env; }
|
||||
.spread-position[data-pos="found"] { grid-area: found; }
|
||||
.spread-position[data-pos="self"] { grid-area: self; }
|
||||
.tarot-spread-board--three .spread-position {
|
||||
grid-area: auto;
|
||||
}
|
||||
|
||||
.tarot-spread-board--celtic .spread-position {
|
||||
grid-area: unset;
|
||||
}
|
||||
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="crown"] { grid-area: crown; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="out"] { grid-area: out; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="past"] { grid-area: past; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="present"] { grid-area: present; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="near-fut"] { grid-area: near-fut; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="hope"] { grid-area: hope; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="chall"] { grid-area: chall; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="env"] { grid-area: env; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="found"] { grid-area: found; }
|
||||
.tarot-spread-board--celtic .spread-position[data-pos="self"] { grid-area: self; }
|
||||
|
||||
.spread-position {
|
||||
width: var(--spread-card-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
max-width: 130px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.spread-pos-label {
|
||||
font-size: 0.68rem;
|
||||
color: #a5b4fc;
|
||||
font-size: 0.66rem;
|
||||
color: #c4b5fd;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
letter-spacing: 0.09em;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
border: 1px solid rgba(167, 139, 250, 0.45);
|
||||
border-radius: 999px;
|
||||
padding: 0.17rem 0.55rem;
|
||||
background: rgba(76, 29, 149, 0.2);
|
||||
}
|
||||
|
||||
.spread-card-wrap {
|
||||
border-radius: 8px;
|
||||
appearance: none;
|
||||
border: 1px solid rgba(168, 162, 158, 0.34);
|
||||
border-radius: 13px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 18px rgba(0,0,0,0.55);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
background: #18181b;
|
||||
background: #09090f;
|
||||
width: 100%;
|
||||
height: var(--spread-card-height);
|
||||
display: block;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.spread-card-wrap.is-reversed .spread-card-img {
|
||||
.spread-card-wrap:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(196, 181, 253, 0.75);
|
||||
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.65), 0 0 0 1px rgba(196, 181, 253, 0.26);
|
||||
}
|
||||
|
||||
.spread-card-wrap:focus-visible {
|
||||
outline: none;
|
||||
border-color: #c4b5fd;
|
||||
box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.36), 0 10px 24px rgba(2, 6, 23, 0.56);
|
||||
}
|
||||
|
||||
.spread-card-wrap.is-facedown {
|
||||
background:
|
||||
linear-gradient(150deg, rgba(190, 24, 93, 0.45), rgba(49, 46, 129, 0.55)),
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.08) 0,
|
||||
rgba(255, 255, 255, 0.08) 6px,
|
||||
rgba(0, 0, 0, 0.08) 6px,
|
||||
rgba(0, 0, 0, 0.08) 12px
|
||||
);
|
||||
}
|
||||
|
||||
.spread-card-wrap.is-revealed.is-reversed .spread-card-img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.spread-card-img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
.spread-card-img,
|
||||
.spread-card-back-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.spread-card-back-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.16em;
|
||||
color: #e9d5ff;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.spread-card-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0.6rem;
|
||||
font-size: 0.72rem;
|
||||
color: #e4e4e7;
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.spread-card-name {
|
||||
font-size: 0.74rem;
|
||||
color: #d4d4d8;
|
||||
font-size: 0.66rem;
|
||||
color: #fda4af;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
min-height: 1.2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spread-reveal-hint {
|
||||
display: block;
|
||||
font-size: 0.62rem;
|
||||
color: #a1a1aa;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.spread-reversed-tag {
|
||||
display: block;
|
||||
font-size: 0.66rem;
|
||||
color: #fb7185;
|
||||
margin-top: 0.1rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.tarot-spread-meanings-empty {
|
||||
border: 1px dashed #3f3f46;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
color: #a1a1aa;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
background: rgba(9, 9, 11, 0.72);
|
||||
}
|
||||
|
||||
.spread-empty {
|
||||
color: #52525b;
|
||||
color: #71717a;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.tarot-spread-board--celtic {
|
||||
grid-template-areas:
|
||||
"crown out"
|
||||
"past present"
|
||||
"near-fut hope"
|
||||
"chall env"
|
||||
"found self";
|
||||
grid-template-columns: repeat(2, var(--spread-card-width));
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.tarot-spread-board {
|
||||
--spread-card-width: 106px;
|
||||
--spread-card-height: 170px;
|
||||
padding: 0.8rem 0.65rem 1rem;
|
||||
}
|
||||
|
||||
.tarot-spread-board--three {
|
||||
grid-template-columns: 1fr;
|
||||
width: var(--spread-card-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.spread-position {
|
||||
width: var(--spread-card-width);
|
||||
}
|
||||
}
|
||||
.alpha-dl dd { margin: 0; }
|
||||
.alpha-badge {
|
||||
|
||||
Reference in New Issue
Block a user