goyimnose/TaroTime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated tarot frame for mobile and desktop usability

Browse Source
This commit is contained in:
Nose
2026-04-13 14:28:03 -07:00
parent 7149bbfa7f
commit 4872e814c9
6 changed files with 1217 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles.css
+140 -11
View File
@@ -907,6 +907,30 @@
flex-wrap: wrap;
}
.tarot-frame-selection-chip {
padding: 10px 14px;
border: 1px solid rgba(56, 189, 248, 0.55);
border-radius: 999px;
background: linear-gradient(180deg, rgba(8, 47, 73, 0.96), rgba(12, 74, 110, 0.98));
color: #e0f2fe;
cursor: pointer;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 10px 24px rgba(2, 132, 199, 0.18);
}
.tarot-frame-selection-chip:hover,
.tarot-frame-selection-chip:focus-visible {
border-color: rgba(125, 211, 252, 0.92);
background: linear-gradient(180deg, rgba(12, 74, 110, 0.98), rgba(14, 116, 144, 1));
color: #f0f9ff;
}
.tarot-frame-selection-chip[hidden] {
display: none !important;
}
.tarot-frame-layout-panel {
position: absolute;
top: calc(100% + 10px);
@@ -1681,7 +1705,8 @@
gap: 12px;
}
.tarot-frame-card-insert-menu {
.tarot-frame-card-insert-menu,
.tarot-frame-card-action-menu {
position: fixed;
z-index: 41;
width: min(240px, calc(100vw - 24px));
@@ -1696,11 +1721,13 @@
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
.tarot-frame-card-insert-menu[hidden] {
.tarot-frame-card-insert-menu[hidden],
.tarot-frame-card-action-menu[hidden] {
display: none !important;
}
.tarot-frame-card-insert-menu-item {
.tarot-frame-card-insert-menu-item,
.tarot-frame-card-action-menu-item {
padding: 11px 12px;
border: 1px solid rgba(99, 102, 241, 0.22);
border-radius: 12px;
@@ -1713,7 +1740,9 @@
}
.tarot-frame-card-insert-menu-item:hover,
.tarot-frame-card-insert-menu-item:focus-visible {
.tarot-frame-card-insert-menu-item:focus-visible,
.tarot-frame-card-action-menu-item:hover,
.tarot-frame-card-action-menu-item:focus-visible {
border-color: rgba(165, 180, 252, 0.9);
background: rgba(49, 46, 129, 0.34);
color: #f8fafc;
@@ -2052,6 +2081,11 @@
border-radius: 8px;
}
.tarot-frame-slot.is-selected {
box-shadow: 0 0 0 2px #38bdf8, 0 0 0 6px rgba(56, 189, 248, 0.2);
border-radius: 8px;
}
.tarot-frame-slot.is-drag-source {
opacity: 0.42;
}
@@ -2072,6 +2106,8 @@
}
.tarot-frame-card {
--frame-card-rotation: 0deg;
--frame-card-hover-lift: 0px;
position: absolute;
inset: 0;
padding: 0;
@@ -2086,6 +2122,12 @@
user-select: none;
touch-action: none;
-webkit-touch-callout: none;
transform: translateY(var(--frame-card-hover-lift)) rotate(var(--frame-card-rotation));
transform-origin: center center;
}
.tarot-frame-card.is-flipped {
--frame-card-rotation: 180deg;
}
.tarot-frame-card.is-empty {
@@ -2096,13 +2138,18 @@
}
.tarot-frame-card:hover {
transform: translateY(-2px);
--frame-card-hover-lift: -2px;
filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.38));
}
.tarot-frame-card.is-selected {
filter: drop-shadow(0 12px 20px rgba(14, 165, 233, 0.34));
}
.tarot-frame-card.is-empty:hover {
border-color: transparent;
box-shadow: none;
--frame-card-hover-lift: 0px;
transform: none;
}
@@ -2112,6 +2159,7 @@
}
.tarot-frame-card:hover {
--frame-card-hover-lift: 0px;
transform: none;
filter: none;
}
@@ -2288,6 +2336,28 @@
transform: translate(-50%, -50%);
}
.tarot-frame-drag-ghost.is-flipped {
transform: translate(-50%, -50%) rotate(180deg);
}
.tarot-frame-drag-ghost-count {
position: absolute;
top: 8px;
right: 8px;
min-width: 26px;
height: 26px;
padding: 0 8px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(56, 189, 248, 0.94);
color: #082f49;
font-size: 12px;
font-weight: 800;
line-height: 1;
box-shadow: 0 8px 20px rgba(2, 132, 199, 0.34);
}
.tarot-frame-drag-ghost img {
width: 100%;
height: 100%;
@@ -2410,6 +2480,13 @@
width: 100%;
}
.tarot-frame-selection-chip {
order: -1;
width: 100%;
justify-content: center;
text-align: center;
}
.tarot-frame-settings-panel {
left: 0;
right: auto;
@@ -2430,8 +2507,8 @@
}
.tarot-frame-card-badge {
font-size: 7px;
padding: 3px 4px;
font-size: 11px;
padding: 4px 5px;
}
.tarot-frame-card-text-face {
@@ -4227,6 +4304,56 @@
font-size: 13px;
}
.alpha-gematria-cipher[hidden] {
display: none;
}
.alpha-gematria-reverse-ciphers {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.alpha-gematria-reverse-ciphers[hidden] {
display: none;
}
.alpha-gematria-reverse-cipher-option {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid #3f3f46;
border-radius: 999px;
background: #101018;
color: #d4d4d8;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.alpha-gematria-reverse-cipher-option:has(input:checked) {
border-color: #6366f1;
background: #1c1b35;
color: #eef2ff;
}
.alpha-gematria-reverse-cipher-option input {
margin: 0;
accent-color: #818cf8;
}
.alpha-gematria-reverse-cipher-name {
font-size: 12px;
line-height: 1.2;
}
.alpha-gematria-reverse-cipher-hint {
color: #a1a1aa;
font-size: 11px;
line-height: 1.4;
}
.alpha-gematria-input {
min-height: 54px;
resize: vertical;
@@ -4330,15 +4457,17 @@
}
@media (max-width: 900px) {
.alpha-gematria-controls.is-input-priority-mode,
.alpha-gematria-controls:has(.alpha-gematria-cipher:disabled) {
.alpha-gematria-controls.is-input-priority-mode {
grid-template-columns: minmax(0, 1fr);
}
.alpha-gematria-controls.is-input-priority-mode .alpha-gematria-field-cipher,
.alpha-gematria-controls:has(.alpha-gematria-cipher:disabled) .alpha-gematria-field-cipher {
.alpha-gematria-controls.is-input-priority-mode .alpha-gematria-field-cipher {
display: none;
}
.alpha-gematria-controls.is-reverse-cipher-mode {
grid-template-columns: minmax(0, 1fr);
}
}
.alpha-tabs {