style:update.

LEODPEN · May 19, 2021 · 31a45d5 · 31a45d5
1 parent 7a705fb
commit 31a45d5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/assets/popup.js b/assets/popup.js
@@ -68,10 +68,14 @@ function goSearching(word) {
         tabs.push(tab);
       }
     }, function () {
-      $(".container").append('<div class="tab-result"></div>');
+      $(".container").append('<div class="tab-result"> \n </div>');
       for (let j in tabs) {
         let tab = tabs[j];
-        $('.tab-result').append('<p id = "' + tab.id + '"' + '>' + tab.title + '</p>');
+        $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '></div>');
+        $("#" + tab.id).append('<div class = "t" >' + tab.title + '</div>');
+        $("#" + tab.id).append('<div class = "url" >' + tab.url + '</div>');
+        // $('.tab-result').append('<div class = "res-card" id = "' + tab.id + '"' + '>' + tab.title + '</div>');
+
         jump2Tab(tab.id);
       }
     });

diff --git a/assets/srch-res.css b/assets/srch-res.css
@@ -1,10 +1,22 @@
+body{
+	background-color:#D3D3D3;
+  background-image:url('../where.png');
+  background-repeat:no-repeat;
+  background-size: 1024px 1024
+}
+.head {
+  font-size: 26px;
+  font-weight: 777;
+  font-family: "Times New Roman";
+}
+
 input{
-  outline-style: none ;
+  outline-style: none;
   border: 1px solid #ccc; 
   border-radius: 3px;
   padding: 13px 14px;
-  width: 180px;
-  font-size: 10px;
+  width: 200px;
+  font-size: 16px;
   font-weight: 666;
   font-family: "Microsoft soft";
 }
@@ -14,4 +26,36 @@ input:focus{
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+}
+
+.res-card {
+  position: center;
+  overflow: hidden;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  width: auto;
+  max-width: 288px;
+  height: auto;
+  max-height: 80px;
+  background-color: 	#FFA07A;
+  content-visibility: auto;
+}
+
+.t {
+  width: 202px;
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 12px;
+  font-weight: 555;
+  font-family: "Microsoft soft";
+  margin-bottom: 5px;
+}
+
+.url {
+  width: 202px;
+  word-break:break-all;
+  word-wrap:break-word;
+  font-size: 4px;
+  font-weight: 22;
+  font-family: "Times New Roman";
 }
diff --git a/srch-res.html b/srch-res.html
@@ -6,12 +6,12 @@
   <script src="assets/jquery-1.12.4.js"></script>
 </head>
 <body>
-  <h1 align="center">Where is my tab ?</h1>
-  <div align="center"> 
+  <div class = "head" align="center">Where is my tab ?</div>
+  <div align="center">
     <input type="text" id = "keyword"/>
     <!-- <input type="button" id="seach-tabs" value="GO!"/> -->
   </div> 
- <div class="container">
+ <div class="container" align="center">
      <!-- <div class="tab-result">Results in tabs:</div>
      <div class="bookmarks-result"></div>
      <div class="history-result"></div> -->