Better Cards

static/css/layout.css

@@ -119,6 +119,10 @@
     transition: transform 170ms ease;
 }
 
+.preview-card .card-center-icon {
+    font-size: 1.18rem;
+}
+
 .preview-card.dragging {
     opacity: 0.65;
 }
@@ -286,10 +290,18 @@
     width: 4.3rem;
     height: 6rem;
     border-radius: 0.4rem;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     transition: transform 120ms ease;
 }
 
+.vote-card .card-center-icon {
+    font-size: 1.65rem;
+}
+
 .vote-card:hover {
     transform: translateY(-0.2rem);
 }

static/css/main.css

@@ -165,6 +165,34 @@ input[type="number"]::-webkit-inner-spin-button {
     color: var(--card-text);
 }
 
+.card-corner {
+    position: absolute;
+    z-index: 1;
+    font-weight: 700;
+    font-size: 0.82rem;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+}
+
+.card-corner.top-left {
+    top: 0.34rem;
+    left: 0.34rem;
+}
+
+.card-corner.bottom-right {
+    right: 0.34rem;
+    bottom: 0.34rem;
+    transform: rotate(180deg);
+}
+
+.card-center-icon {
+    z-index: 1;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+}
+
 .vote-card.is-selected {
     outline: var(--selected-outline);
     outline-offset: -0.35rem;