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