Styling

RpgRoller/wwwroot/styles.css

@@ -269,7 +269,6 @@ select:focus-visible {
     display: flex;
     flex-wrap: nowrap;
     gap: 0.3rem;
-    overflow-x: auto;
     padding-bottom: 0.15rem;
 }
 
@@ -338,7 +337,7 @@ select:focus-visible {
 
 .skill-list {
     display: grid;
-    gap: 0.35rem;
+    gap: 0.1rem;
 }
 
 .skill-group-block {
@@ -350,6 +349,8 @@ select:focus-visible {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background-color: #f8f0de;
+    padding-left: 0.1rem;
     gap: 0.5rem;
 }
 
@@ -357,17 +358,16 @@ select:focus-visible {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 0.6rem;
-    background: #f6ebd3;
     color: var(--text);
-    border: 1px solid #b39f79;
-    border-radius: 0.5rem;
-    padding: 0.45rem 0.55rem;
+    padding-left: 1rem;
 }
 
 .skill-details {
-    gap: 0.1rem;
+    gap: 0.8rem;
     min-width: 0;
     align-content: center;
+    align-items: center;
+    display: inline-flex;
 }
 
 .skill-details span {
@@ -403,7 +403,7 @@ select:focus-visible {
     grid-template-columns: auto 1fr;
     align-items: center;
     justify-items: start;
-    background: #f9f2e2;
+    background: #00000000;
 }
 
 .skill-create-icon {
@@ -427,7 +427,7 @@ select:focus-visible {
 }
 
 .skill-filter-input {
-    width: min(15rem, 46vw);
+    width: 10rem;
     padding: 0.2rem 0.35rem;
 }