diff options
Diffstat (limited to 'styles/client/card.css')
| -rw-r--r-- | styles/client/card.css | 164 |
1 files changed, 82 insertions, 82 deletions
diff --git a/styles/client/card.css b/styles/client/card.css index 0ee8f6a..b19b17a 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -1,192 +1,192 @@ 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; + 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); + box-shadow: 0 0 10px var(--card-hover); - z-index: 4; + z-index: 4; } card > * { - pointer-events: none; + pointer-events: none; } carea { - padding-left: 2px; - padding-right: 2px; - position: absolute; - display: flex; - vertical-align: middle; - width: 100%; - box-sizing: border-box; + 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; + top: 0; + height: 8%; + text-align: center; } carea.topl { - width: 50%; - text-align: left; + width: 50%; + text-align: left; } carea.topr { - right: 0; - width: 50%; - text-align: right; + right: 0; + width: 50%; + text-align: right; } carea.mid { - top: 8%; - height: 84%; + top: 8%; + height: 84%; } carea.midt { - top: 8%; - height: 42%; + top: 8%; + height: 42%; } carea.midb { - top: 50%; - height: 42%; + top: 50%; + height: 42%; } carea.bot, carea.botl, carea.botr { - bottom: 0; - height: 8%; - text-align: center; + bottom: 0; + height: 8%; + text-align: center; } carea.botl { - width: 50%; - text-align: left; + width: 50%; + text-align: left; } carea.botr { - right: 0; - width: 50%; - text-align: right; + right: 0; + width: 50%; + text-align: right; } carea.all { - top: 0; - height: 100%; + top: 0; + height: 100%; } ctext { - display: inline-block; - flex: 1; - font-size: small; - height: auto; + display: inline-block; + flex: 1; + font-size: small; + height: auto; } cimage { - background-position: center center; - background-repeat: no-repeat; - background-size: contain; - flex: 1; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + flex: 1; } card[drag=true] { - z-index: 3; + z-index: 3; } /* Deck */ deck { - --ccount: 0; + --ccount: 0; - position: absolute; - width: 166px; - height: 250px; + position: absolute; + width: 166px; + height: 250px; - top: calc(var(--y) * (100vh - 250px)); - left: calc(var(--x) * (100vw - 166px)); + top: calc(var(--y) * (100vh - 250px)); + left: calc(var(--x) * (100vw - 166px)); - overflow: visible; + overflow: visible; - border-radius: 10px; + border-radius: 10px; - transition-duration: 0.2s; + transition-duration: 0.2s; - border: 3px solid var(--deck-shadow); - box-sizing: border-box; + border: 3px solid var(--deck-shadow); + box-sizing: border-box; } deck:hover { - border: 3px solid var(--deck-hover); + border: 3px solid var(--deck-hover); } /* Deck modes */ deck[mode="stack"] > card { - transform: translate(5px, calc(var(--cpos) * 3px + 7px)); + 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))); + 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); + transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); } deck[mode="strip-hr"] > card { - transform: translate(calc(var(--cpos) * 75px + 5px), 7px); + transform: translate(calc(var(--cpos) * 75px + 5px), 7px); } deck[mode="strip-hl"], deck[mode="strip-hr"] { - width: calc(var(--ccount) * 75px + 160px); - left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px))); + width: calc(var(--ccount) * 75px + 160px); + left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px))); } deck[mode="strip-vu"] > card { - transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); + transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); } deck[mode="strip-vd"] > card { - transform: translate(5px, calc(var(--cpos) * 115px + 7px)); + transform: translate(5px, calc(var(--cpos) * 115px + 7px)); } deck[mode="strip-vu"], deck[mode="strip-vd"] { - height: calc(var(--ccount) * 115px + 240px); - top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px))); + height: calc(var(--ccount) * 115px + 240px); + top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px))); } |