added overlay function for tarot cards
This commit is contained in:
325
app/styles.css
325
app/styles.css
@@ -557,14 +557,170 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tarot-house-layout {
|
||||
display: grid;
|
||||
.tarot-house-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tarot-house-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tarot-house-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3f3f46;
|
||||
background: #18181b;
|
||||
color: #f4f4f5;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tarot-house-toggle:hover {
|
||||
background: #27272a;
|
||||
border-color: #52525b;
|
||||
}
|
||||
|
||||
.tarot-house-toggle input {
|
||||
margin: 0;
|
||||
accent-color: #6366f1;
|
||||
}
|
||||
|
||||
.tarot-house-toggle input:disabled {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.tarot-house-toggle:has(input:disabled) {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.tarot-house-filter {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
color: #d4d4d8;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tarot-house-filter-select {
|
||||
min-width: 132px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3f3f46;
|
||||
background: #18181b;
|
||||
color: #f4f4f5;
|
||||
font-size: 13px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.tarot-house-filter-select:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.tarot-house-filter-group {
|
||||
margin: 0;
|
||||
padding: 6px 8px;
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #3f3f46;
|
||||
border-radius: 8px;
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.tarot-house-filter-group legend {
|
||||
padding: 0 4px;
|
||||
color: #d4d4d8;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tarot-house-mini-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 24px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: #111118;
|
||||
color: #f4f4f5;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tarot-house-mini-toggle input {
|
||||
margin: 0;
|
||||
accent-color: #6366f1;
|
||||
}
|
||||
|
||||
.tarot-house-mini-toggle:has(input:disabled) {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.tarot-house-action-btn {
|
||||
padding: 7px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3f3f46;
|
||||
background: #18181b;
|
||||
color: #f4f4f5;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tarot-house-action-btn:hover:not(:disabled) {
|
||||
background: #27272a;
|
||||
border-color: #52525b;
|
||||
}
|
||||
|
||||
.tarot-house-action-btn[aria-pressed="true"] {
|
||||
background: #312e81;
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.tarot-house-action-btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.tarot-house-layout {
|
||||
--tarot-house-card-width: 76.8px;
|
||||
--tarot-house-card-height: 115.2px;
|
||||
--tarot-house-card-gap: 6px;
|
||||
--tarot-house-row-gap: 8px;
|
||||
--tarot-house-section-gap: 12px;
|
||||
--tarot-house-major-row-width: calc((var(--tarot-house-card-width) * 11) + (var(--tarot-house-card-gap) * 10));
|
||||
display: grid;
|
||||
gap: var(--tarot-house-section-gap);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tarot-house-trumps {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: var(--tarot-house-row-gap);
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
@@ -572,29 +728,34 @@
|
||||
.tarot-house-trump-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 6px;
|
||||
width: max-content;
|
||||
gap: var(--tarot-house-card-gap);
|
||||
width: min(100%, var(--tarot-house-major-row-width));
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tarot-house-bottom-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
column-gap: 6px;
|
||||
width: min(100%, var(--tarot-house-major-row-width));
|
||||
max-width: 100%;
|
||||
column-gap: 0;
|
||||
row-gap: 0;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tarot-house-column {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: var(--tarot-house-row-gap);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.tarot-house-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 6px;
|
||||
gap: var(--tarot-house-card-gap);
|
||||
}
|
||||
|
||||
.tarot-house-card-btn {
|
||||
@@ -610,11 +771,24 @@
|
||||
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.tarot-house-card-btn.is-text-only {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 48%),
|
||||
linear-gradient(180deg, #1b1b27 0%, #111118 100%);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tarot-house-card-btn:hover {
|
||||
border-color: #7060b0;
|
||||
background: #27272a;
|
||||
}
|
||||
|
||||
.tarot-house-card-btn.is-text-only:hover {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0) 50%),
|
||||
linear-gradient(180deg, #212132 0%, #171723 100%);
|
||||
}
|
||||
|
||||
.tarot-house-card-btn.is-selected {
|
||||
border-color: #7060b0;
|
||||
background: #27272a;
|
||||
@@ -625,15 +799,98 @@
|
||||
|
||||
.tarot-house-card-image {
|
||||
display: block;
|
||||
width: 76.8px;
|
||||
height: 115.2px;
|
||||
width: var(--tarot-house-card-width);
|
||||
height: var(--tarot-house-card-height);
|
||||
object-fit: cover;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.tarot-house-card-text-face {
|
||||
width: var(--tarot-house-card-width);
|
||||
height: var(--tarot-house-card-height);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 8px;
|
||||
box-sizing: border-box;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tarot-house-card-text-face.is-dense {
|
||||
gap: 4px;
|
||||
padding: 8px 7px;
|
||||
}
|
||||
|
||||
.tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
font-family: "Noto Sans Hebrew", "Segoe UI Symbol", sans-serif;
|
||||
}
|
||||
|
||||
.tarot-house-card-text-primary {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.tarot-house-card-text-secondary {
|
||||
display: block;
|
||||
color: rgba(250, 250, 250, 0.76);
|
||||
font-size: 9px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.02em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.tarot-house-card-label {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
padding: 4px 5px;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(180deg, rgba(9, 9, 11, 0.2) 0%, rgba(9, 9, 11, 0.9) 100%);
|
||||
color: #fafafa;
|
||||
font-size: 9px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tarot-house-card-label.is-top-hebrew {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.tarot-house-card-label.is-dense {
|
||||
font-size: 8px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.tarot-house-card-label-primary {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tarot-house-card-label-secondary {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: rgba(250, 250, 250, 0.84);
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tarot-house-card-fallback {
|
||||
width: 76.8px;
|
||||
height: 115.2px;
|
||||
width: var(--tarot-house-card-width);
|
||||
height: var(--tarot-house-card-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -647,6 +904,35 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#tarot-browse-view.is-house-focus {
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#tarot-browse-view.is-house-focus .tarot-section-house-top {
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#tarot-browse-view.is-house-focus .tarot-layout {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tarot-browse-view.is-house-focus .tarot-house-layout {
|
||||
--tarot-house-card-gap: clamp(4px, 0.6vw, 8px);
|
||||
--tarot-house-row-gap: clamp(6px, 0.9vw, 10px);
|
||||
--tarot-house-section-gap: clamp(12px, 1.4vw, 16px);
|
||||
--tarot-house-card-width: clamp(48px, calc((100vw - 240px) / 11), 112px);
|
||||
--tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
|
||||
min-height: 100%;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
#tarot-browse-view.is-house-focus .tarot-house-trumps {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.planet-layout {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
@@ -2024,6 +2310,7 @@
|
||||
.alpha-enochian-glyph-img--detail {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
filter:
|
||||
drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.82))
|
||||
drop-shadow(0 0 1.6px rgba(255, 255, 255, 0.56));
|
||||
flex: 1;
|
||||
@@ -3269,13 +3556,15 @@
|
||||
#now-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 16px 24px;
|
||||
padding: 38px 24px 76px;
|
||||
min-height: clamp(740px, 90vh, 1140px);
|
||||
background: #1e1e24;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
align-items: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
#now-panel[hidden] {
|
||||
@@ -3295,6 +3584,13 @@
|
||||
filter: none;
|
||||
background-color: #000;
|
||||
}
|
||||
#now-panel::before {
|
||||
content: "";
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
height: clamp(250px, 31vh, 430px);
|
||||
pointer-events: none;
|
||||
}
|
||||
#now-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -3437,6 +3733,7 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin-top: 10px;
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
|
||||
Reference in New Issue
Block a user