studio style

lemonadejs · Apr 5, 2024 · 8f6b573 · 8f6b573
1 parent 4de429f
commit 8f6b573
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/src/style.css b/src/style.css
@@ -1,8 +1,17 @@
 .lm-data-grid {
     display: inline-block;
     border-radius: 5px;
-    background-color: white;
+    background-color: var(--lm-background-color-input);
     font-family: sans-serif;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 800px) {
+    .lm-data-grid {
+        overflow-x: auto;
+        max-width: 100%;
+    }
 }
 
 .lm-data-grid-search-section {
@@ -11,6 +20,10 @@
     justify-content: flex-end;
 }
 
+.lm-data-grid-search-section div {
+    padding: 10px;
+}
+
 .lm-data-grid-search-section[search='false'] {
     display: none;
 }
@@ -30,20 +43,19 @@
 
 .lm-data-grid-pagination-section ul li {
     margin-left: 2px;
-    padding: 0.3em 0.8em;
+    padding: 8px 12px 8px 12px;
     border: 1px solid transparent;
     cursor: pointer;
 }
 
+.lm-data-grid-pagination-section ul li[selected='true'],
 .lm-data-grid-pagination-section ul li[selected='false']:hover {
-    color: #fff;
-    border: 1px solid #111;
-    background: linear-gradient(to bottom, #111122 0%, #000 100%);
+    border: 1px solid var(--lm-border-color, #ccc);
+    background: linear-gradient(to bottom, var(--lm-background-color-hover, #ececec) 0%, var(--lm-background-color-active, #dcdcdc) 100%);
 }
 
-.lm-data-grid-pagination-section ul li[selected='true'] {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    background: linear-gradient(to bottom, rgba(100, 100, 100, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
+.lm-data-grid-pagination-section ul li[selected='false']:hover {
+    font-weight: bold;
 }
 
 .lm-data-grid table {
@@ -73,7 +85,7 @@
 }
 
 .lm-data-grid table th {
-    border-bottom-color: #757575;
+    border-bottom-color: var(--lm-border-color);
     user-select: none;
 }
 
@@ -84,9 +96,23 @@
     text-overflow: clip;
 }
 
+.lm-data-grid table tbody td.lm-data-grid-wrap {
+    white-space: pre-wrap;
+}
+
 .lm-data-grid table td[contenteditable] {
     text-overflow: inherit;
     outline: 1px solid black;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+}
+
+.lm-data-grid table td[contenteditable]::-webkit-scrollbar {
+    height: 12px;
+}
+
+.lm-data-grid table td[contenteditable]::-webkit-scrollbar {
+    width: 12px;
 }
 
 .lm-data-grid table th[data-sorted]::after {
@@ -101,5 +127,4 @@
 
 .lm-data-grid table th[data-sorted='asc']::after {
     content: '\2193';
-
 }