#18 adding css and id changes to minimize css overlaps

EEXCESS · Sep 15, 2015 · 7a47a3a · 7a47a3a
1 parent 6f8f33c
commit 7a47a3a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/css/searchBar.css b/css/searchBar.css
@@ -1,7 +1,14 @@
 
 .ui-tabs-vertical {
     width: 45em;
-    font-size: 0.7em;
+    font-size: 11px !important;
+    color: grey !important;
+
+}
+
+
+.ui-tabs-vertical a:link{
+    color: grey !important;
 }
 
 .ui-tabs-vertical .ui-tabs-nav {
@@ -34,7 +41,20 @@
     width: 30em;
 }
 
-#contentArea {
+.ui-widget-header {
+    border: 1px solid rgb(170, 170, 170) !important;
+    border-image-source: initial !important;
+    border-image-slice: initial !important;
+    border-image-width: initial !important;
+    border-image-outset: initial !important;
+    border-image-repeat: initial !important;
+    background: url(https://en.wikipedia.org/wiki/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x rgb(204, 204, 204) !important;
+    color: grey !important;
+    font-weight: bold !important;
+
+}
+
+#eexcess-tabBar-contentArea {
     position: fixed;
     width: 40%;
     height: 70%;
@@ -45,21 +65,21 @@
     background: none;
 }
 
-#jQueryTabsHeader {
+#eexcess-tabBar-jQueryTabsHeader {
     cursor: move;
     width: calc(100% - 117px - 8px);
     height: 99%;
     z-index: 9999;
     border: none;
 }
 
-#jQueryTabsContent{
+#eexcess-tabBar-jQueryTabsContent {
 
     border: 1px solid rgb(170, 170, 170);
     background-color: white;
 }
 
-#iframeCover {
+#eexcess-tabBar-iframeCover {
     position: absolute;
     opacity: 50;
     z-index: 999999;

diff --git a/js/searchBar.js b/js/searchBar.js
@@ -5,7 +5,7 @@
  */
 define(['jquery', 'jqueryui'], function ($) {
 
-    var contentArea = $("<div id = 'contentArea'><div id='iframeCover'></div><div id='jQueryTabsHeader'><ul></ul><div id = 'jQueryTabsContent' class='flex-container intrinsic-container intrinsic-container-ratio' ></div></div></div>").hide();
+    var contentArea = $("<div id = 'eexcess-tabBar-contentArea'><div id='iframeCover'></div><div id='eexcess-tabBar-jQueryTabsHeader'><ul></ul><div id = 'eexcess-tabBar-jQueryTabsContent' class='flex-container intrinsic-container intrinsic-container-ratio' ></div></div></div>").hide();
     $('body').append(contentArea);
     var bar = $('<div' +
         ' style="position:fixed;width:100%;height:20px;padding:5px;bottom:0;background-color:black;text-align:left;z-index:99999;"></div>');
@@ -14,9 +14,9 @@ define(['jquery', 'jqueryui'], function ($) {
     var resetToggle = $('<a href="#" style="float:right;color:white;margin-right:20px;font-size: 10px">reset</a>');
     var storage = chrome.storage.local;
 
-    var $jQueryTabsHeader = $("#jQueryTabsHeader");
-    var $iframeCover = $("#iframeCover");
-    var $contentArea = $("#contentArea");
+    var $jQueryTabsHeader = $("#eexcess-tabBar-jQueryTabsHeader");
+    var $iframeCover = $("#eexcess-tabBar-iframeCover");
+    var $contentArea = $("#eexcess-tabBar-contentArea");
 
     return {
         init: function (triggerFunction) {
@@ -84,12 +84,12 @@ define(['jquery', 'jqueryui'], function ($) {
 
                 $.each(tabModel.tabs, function (i, tab) {
                         tab.renderedHead = $("<li><a href='#tabs-" + tab.id + "'>" + tab.name + " </a></li>");
-                        $("#jQueryTabsHeader ul").append(
+                        $("#eexcess-tabBar-jQueryTabsHeader ul").append(
                             tab.renderedHead);
                         // add tab content corresponding to tab titles
                         tab.renderedContent = $("<div id='tabs-" + tab.id + "'>" + tab.content + "</div>"
                         );
-                        $("#jQueryTabsContent").append(
+                        $("#eexcess-tabBar-jQueryTabsContent").append(
                             tab.renderedContent
                         );
                         // following 3 functions derived from jQuery-UI Tabs
@@ -109,7 +109,7 @@ define(['jquery', 'jqueryui'], function ($) {
             $jQueryTabsHeader.tabs({
                 activate: function (event, ui) {
                     if (ui.newPanel.attr('id') == "tabs-3") {
-                        $jQueryTabsHeader.resizable("option", "minWidth", 800);
+                        //$jQueryTabsHeader.resizable("option", "minWidth", 800);
                         $jQueryTabsHeader.width(800);
                         $jQueryTabsHeader.resize();
                     }