diff --git a/popup.css b/popup.css index 9bfb378..65baa99 100644 --- a/popup.css +++ b/popup.css @@ -49,7 +49,7 @@ li.tab > span.tabName{ overflow-x: hidden; white-space: nowrap; padding-left:45px; - padding-right: 23px; + padding-right: 43px; max-width: 100%; box-sizing: border-box; position: relative; @@ -138,14 +138,24 @@ i.pin{ color:#3F3F3F; } i.pin.pinned{ - color:#1565C0; + color:#3484DD; } i.pin:hover,i.pin.fakeHover{ - color:#1565C0; + color:#3484DD; } i.pin.pinned:hover,i.pin.pinned.fakeHover{ color:#000; } +i.detach{ + position:absolute; + top:1px; + right: 27px; + font-size: 14px; + color:#3F3F3F; +} +i.detach:hover,i.detach.fakeHover{ + color:#3484DD; +} input#search{ font-family: FontAwesome; margin-top: 2px; diff --git a/popup.js b/popup.js index b1d794f..50a1d37 100644 --- a/popup.js +++ b/popup.js @@ -153,6 +153,7 @@ function setupTabs(tabs,callback){ var textSpan = document.createElement("span"); var closeButton = document.createElement("i"); var pinButton = document.createElement("i"); + var detachButton = document.createElement("i"); li.setAttribute('tabId', currentTab.id); closeButton.classList.add("fa"); closeButton.classList.add("fa-remove"); @@ -163,7 +164,13 @@ function setupTabs(tabs,callback){ pinButton.classList.add("fa-thumb-tack"); pinButton.classList.add("pin"); pinButton.classList.add("noselect"); - closeButton.classList.add("pointer"); + pinButton.classList.add("pointer"); + detachButton.classList.add("fa"); + detachButton.classList.add("fa-external-link-square"); + detachButton.classList.add("detach"); + detachButton.classList.add("noselect"); + detachButton.classList.add("pointer"); + if (currentTab.pinned){ pinButton.classList.add("pinned"); pinnedTabs.push(li); @@ -276,6 +283,7 @@ function setupTabs(tabs,callback){ }); li.appendChild(textSpan); textSpan.appendChild(pinButton); + textSpan.appendChild(detachButton); textSpan.appendChild(closeButton); tabElements.push(li); });