summaryrefslogtreecommitdiff
path: root/styles/client/card.css
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-09-18 12:19:44 -0400
committerKyle Gunger <corechg@gmail.com>2020-09-18 12:19:44 -0400
commitdbaf69557c0d6e648120b068fec1920b9391a24a (patch)
treef31f7b956455b1243d344d0c54d5b04e9e80fb3f /styles/client/card.css
parente5515d3e1603339b4957421c9494ca619490a03d (diff)
Update from local repo
Diffstat (limited to 'styles/client/card.css')
-rw-r--r--styles/client/card.css191
1 files changed, 191 insertions, 0 deletions
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