From dbaf69557c0d6e648120b068fec1920b9391a24a Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 18 Sep 2020 12:19:44 -0400 Subject: Update from local repo --- styles/client/card.css | 191 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 styles/client/card.css (limited to 'styles/client/card.css') diff --git a/styles/client/card.css b/styles/client/card.css new file mode 100644 index 0000000..de49175 --- /dev/null +++ b/styles/client/card.css @@ -0,0 +1,191 @@ +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; +} + +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: 0; + left: 0; + + 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 modes */ + +deck[mode="stack"] > card { + transform: translate(5px, calc(var(--cpos) * 3px + 7px)); +} + +deck[mode="stack"] { + height: calc(var(--ccount) * 3px + 250px); +} + +deck[mode="strip-hl"] > card { + transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); +} + +deck[mode="strip-hl"] { + width: calc(var(--ccount) * 75px + 160px); +} + +deck[mode="strip-hr"] > card { + transform: translate(calc(var(--cpos) * 75px + 5px), 7px); +} + +deck[mode="strip-hr"] { + width: calc(var(--ccount) * 75px + 160px); +} + +deck[mode="strip-vu"] > card { + transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); +} + +deck[mode="strip-vu"] { + height: calc(var(--ccount) * 115px + 240px); +} + +deck[mode="strip-vd"] > card { + transform: translate(5px, calc(var(--cpos) * 115px + 7px)); +} + +deck[mode="strip-vd"] { + height: calc(var(--ccount) * 115px + 240px); +} \ No newline at end of file -- cgit v1.2.3