card { position: absolute; display: block; width: 150px; height: 230px; background-color: var(--card-bg); color: var(--card-color); border: 2px solid var(--card-border); border-radius: 10px; transition-duration: 0.2s; cursor: pointer; flex-direction: column; overflow: hidden; user-select: none; box-sizing: border-box; z-index: 3; } card:hover { box-shadow: 0 0 10px var(--card-hover); } card > * { pointer-events: none; } carea { padding-left: 2px; padding-right: 2px; position: absolute; display: flex; vertical-align: middle; width: 100%; box-sizing: border-box; } carea.top, carea.topl, carea.topr { top: 0; height: 8%; text-align: center; } carea.topl { width: 50%; text-align: left; } carea.topr { right: 0; width: 50%; text-align: right; } carea.mid { top: 8%; height: 84%; } carea.midt { top: 8%; height: 42%; } carea.midb { top: 50%; height: 42%; } carea.bot, carea.botl, carea.botr { bottom: 0; height: 8%; text-align: center; } carea.botl { width: 50%; text-align: left; } carea.botr { right: 0; width: 50%; text-align: right; } carea.all { top: 0; height: 100%; } ctext { display: inline-block; flex: 1; font-size: small; height: auto; } cimage { background-position: center center; background-repeat: no-repeat; background-size: contain; flex: 1; } card[drag=true] { z-index: 3; } /* Deck */ deck { --ccount: 0; position: absolute; width: 166px; height: 250px; top: calc(var(--y) * (100vh - 250px)); left: calc(var(--x) * (100vw - 166px)); transform: scale(var(--size)) rotate(var(--rot)); overflow: visible; border-radius: 10px; transition-duration: 0.2s; border: 3px solid var(--deck-shadow); box-sizing: border-box; } deck:hover { border: 3px solid var(--deck-hover); } deck:hover > card { opacity: 0.5; } deck:hover > card:hover { opacity: 1; } /* Deck modes */ deck[mode="stack"] > card { transform: translate(5px, calc(var(--cpos) * 3px + 7px)); } deck[mode="stack"] { height: calc(var(--ccount) * 3px + 250px); top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px))); } deck[mode="strip-hl"] > card { transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); } deck[mode="strip-hr"] > card { transform: translate(calc(var(--cpos) * 75px + 5px), 7px); } deck[mode="strip-hl"], deck[mode="strip-hr"] { width: calc(var(--ccount) * 75px + 166px); left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 166px))); } deck[mode="strip-vu"] > card { transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); } deck[mode="strip-vd"] > card { transform: translate(5px, calc(var(--cpos) * 115px + 7px)); } deck[mode="strip-vu"], deck[mode="strip-vd"] { height: calc(var(--ccount) * 115px + 250px); top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 250px))); }