Save cards and remove them later

static/styles.css

@@ -24,9 +24,14 @@
         font-size: 0.9em;
     }
 
+    .card-header > p {
+        right: 7px;
+        top: 19px;
+    }
+
     .card-image {
-        top: 21%;
-        left: 14%;
+        top: 25%;
+        left: 12%;;
     }
 
     .disclaimer, .custom-card h1 {
@@ -114,6 +119,11 @@
         margin: 0.5em 0;
     }
 
+    .card-header > p {
+        right: 17px;
+        top: 30px;
+    }
+
     .app-header-secondary {
         font-size: 70px;
         margin: 0.3em 0;
@@ -155,7 +165,7 @@
         width: 90%;
     }
 
-    #custom-card-modal .modal-content {
+    #custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
         width: 50%;
     }
 
@@ -218,7 +228,7 @@
 }
 
 @media(max-width: 1225px) and (min-width: 750.01px) {
-    #custom-card-modal .modal-content {
+    #custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
         width: 75%;
     }
 }
@@ -377,6 +387,9 @@ button {
 }
 
 .app-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: #992626;
     box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
     color: #bfb8b8;
@@ -387,6 +400,41 @@ button {
     margin-bottom: 1em;
 }
 
+.app-btn img, .app-btn-secondary img {
+    width: 15px;
+}
+
+#custom-roles img {
+    width: 20px;
+}
+
+#custom-roles .custom-role-edit {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    font-size: 19px;
+    align-items: center;
+    background-color: black;
+    border-radius: 5px;
+    margin: 0.3em;
+}
+
+.custom-role-edit p {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+    max-width: 7em;
+}
+
+#custom-roles .custom-role-edit div > img {
+    margin: 0 1em;
+    cursor: pointer;
+}
+
+#custom-roles .custom-role-edit div > img:hover {
+    filter: brightness(70%);
+}
+
 .card {
     text-align: center;
     cursor: pointer;
@@ -443,7 +491,13 @@ button {
 
 .card-top p.card-role {
     font-size: 1em;
+    height: 1.2em;
     pointer-events: none;
+    max-width: 7em;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    overflow-y: visible;
 }
 
 .card-header {
@@ -454,6 +508,10 @@ button {
     pointer-events: none;
 }
 
+.card-header > p {
+    position: absolute;
+}
+
 .card-bottom p {
     pointer-events: none;
     line-height: 1;
@@ -496,10 +554,13 @@ button {
 }
 
 .app-btn-secondary {
-    background-color: white;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: lightgray;
     border-radius: 3px;
-    color: #bd2a2a;
-    border: 1px solid #bd2a2a;
+    color: black;
+    border: none;
     width: 10em;
     padding: 0.5em;
     margin-right: 1em;
@@ -512,7 +573,7 @@ button {
 
 .app-btn:hover, .app-btn:focus {
     cursor: pointer;
-    background-color: #333243;
+    background-color: #333243 !important;
 }
 
 #main-buttons .app-btn:hover, #main-buttons .app-btn:focus {
@@ -526,7 +587,7 @@ button {
 
 .app-btn-secondary:hover, .app-btn-secondary:focus {
     cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.15);
+    filter: brightness(70%);
 }
 
 #main-buttons {
@@ -581,10 +642,13 @@ button {
 }
 
 #create-game-container button {
-    width: 50%;
     padding: 0.8em;
-    height: 4em;
-    width: 12em;
+    height: 3em;
+    width: fit-content;
+}
+
+#edit-role-btn > img {
+    margin-left: 0.5em;
 }
 
 #game-start a button {
@@ -600,7 +664,9 @@ button {
     margin-right: 0.3em;
 }
 
-#game-start button {
+#game-start > button {
+    background-color: #8EA604;
+    color: black;
     margin-left: 0.3em;
     width: 12em;
 }