Some visual styling on the modal and its tab buttons

goodpals · May 11, 2024 · 6c5da58 · 6c5da58
1 parent 96497b5
commit 6c5da58
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/img/modal_background.jpg b/img/modal_background.jpg
diff --git a/manifest.json b/manifest.json
@@ -25,7 +25,8 @@
   ],
   "web_accessible_resources": [
     "data/*.json",
-    "marginalia/*.png"
+    "marginalia/*.png",
+    "img/modal_background.jpg"
   ],
   "icons": {
     "48": "img/icon.png",

diff --git a/src/style.css b/src/style.css
@@ -16,7 +16,9 @@ Its class is wordInfoModalPopup.
   └─────────────────────────────*/
 
 .wordInfoModalPopup {
-  background-color: #dddddd;
+  /* background-color: #dddddd; */
+  background: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),
+  url(../img/modal_background.jpg);
   color: black;
   border: 1px solid #ccc;
   padding: 10px;
@@ -53,11 +55,12 @@ Its class is wordInfoModalPopup.
 
 .wordInfoTabButtonContainer {
   overflow-x: auto; /* Enable horizontal scrolling */
+  overflow-y: hidden;
   white-space: nowrap; 
   display: block;
-  height: 25px;
+  height: 22px;
   z-index: 5;
-  background-color:lightgray;
+  border-bottom: 1px solid #777575;
   flex-shrink: 0;
   -ms-overflow-style: none; /* For Internet Explorer and Edge */
   scrollbar-width: none; /* For Firefox */
@@ -72,6 +75,7 @@ Its class is wordInfoModalPopup.
   border: 1px solid gray;
   border-radius: 5px;
   white-space: nowrap;
+  background: linear-gradient(rgb(210, 189, 164), rgb(189, 157, 114));
   flex-grow: 1;
   color: black; /* font colour */
   background-color: #ccc;