├── LICENSE
├── assets
    ├── add.png
    ├── back.png
    ├── close.png
    ├── forward.png
    ├── internet.png
    ├── loading.gif
    ├── no_sound.png
    ├── reload.png
    └── sound.png
├── back.js
├── icons
    ├── 128.png
    ├── 16.png
    └── 48.png
├── jquery-3.0.0.js
├── jquery-ui.js
├── main.js
├── manifest.json
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/assets/add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/add.png


--------------------------------------------------------------------------------
/assets/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/back.png


--------------------------------------------------------------------------------
/assets/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/close.png


--------------------------------------------------------------------------------
/assets/forward.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/forward.png


--------------------------------------------------------------------------------
/assets/internet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/internet.png


--------------------------------------------------------------------------------
/assets/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/loading.gif


--------------------------------------------------------------------------------
/assets/no_sound.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/no_sound.png


--------------------------------------------------------------------------------
/assets/reload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/reload.png


--------------------------------------------------------------------------------
/assets/sound.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/assets/sound.png


--------------------------------------------------------------------------------
/back.js:
--------------------------------------------------------------------------------
  1 | var stack;
  2 | 
  3 | function init(){
  4 |     // Start here
  5 |     chrome.tabs.query({},function(tab){
  6 |         stack = tab;
  7 |     });
  8 | 
  9 |     chrome.contextMenus.create({"contexts":["all"],"id": "pinTab","title": "Pin/Unpin Tab"});
 10 |     chrome.contextMenus.create({"contexts":["all"],"id": "subMute","title": "Mute/Unmute"});
 11 |         chrome.contextMenus.create({"contexts":["all"],"id": "muteTab","parentId": "subMute","title": "Mute/Unmute Tab"});
 12 |         chrome.contextMenus.create({"contexts":["all"],"id": "muteAllOthers","parentId": "subMute","title": "Mute all other Tabs"});
 13 |         chrome.contextMenus.create({"contexts":["all"],"id": "unmuteAllOthers","parentId": "subMute","title": "Unmute all other Tabs"});
 14 |     chrome.contextMenus.create({"contexts":["all"],"id": "duplicateTab","title": "Duplicate Tab"});
 15 |     chrome.contextMenus.create({"contexts":["all"],"id": "closeAllOthers","title": "Close all other Tabs"});
 16 |     chrome.contextMenus.create({"contexts":["all"],"id": "closeTab","title": "Close Tab"});
 17 | }
 18 | 
 19 | function broadcast(data,sender){
 20 |     chrome.tabs.query({},function(tab){
 21 |         stack = tab;
 22 |         if(data==null) data = tab;
 23 |         $.each(tab,function(i,x){
 24 |             if(x.id!=sender){
 25 |                 chrome.tabs.sendMessage(x.id,data);
 26 |             }
 27 |         });
 28 |         console.log(tab);
 29 |     });
 30 | }
 31 | 
 32 | chrome.contextMenus.onClicked.addListener(
 33 |     function(response,tab){
 34 |         if(response.menuItemId == "pinTab"){
 35 |             chrome.tabs.update(tab.id,{pinned: !tab.pinned});
 36 | 
 37 |         }else if(response.menuItemId == "muteTab"){
 38 |             chrome.tabs.update(tab.id,{muted: !tab.mutedInfo.muted});
 39 | 
 40 |         }else if(response.menuItemId == "muteAllOthers"){
 41 |             $.each(stack,function(i,x){
 42 |                 if(x.id != tab.id && x.audible) chrome.tabs.update(x.id,{muted: true});
 43 |             });
 44 | 
 45 |         }else if(response.menuItemId == "unmuteAllOthers"){
 46 |             $.each(stack,function(i,x){
 47 |                 if(x.id != tab.id && x.audible) chrome.tabs.update(x.id,{muted: false});
 48 |             });
 49 | 
 50 |         }else if(response.menuItemId == "duplicateTab"){
 51 |             chrome.tabs.create({url:tab.url});
 52 | 
 53 |         }else if(response.menuItemId == "closeTab"){
 54 |             chrome.tabs.remove(tab.id);
 55 | 
 56 |         }else if(response.menuItemId == "closeAllOthers"){
 57 |             $.each(stack,function(i,x){
 58 |                 if(x.id != tab.id) chrome.tabs.remove(x.id);
 59 |             });
 60 | 
 61 |         }
 62 | });
 63 | 
 64 | chrome.runtime.onMessage.addListener(
 65 |     function(response, tab, callback){
 66 | 
 67 |         if(response.code == "getData"){
 68 |             callback({stack: stack,
 69 |                       myId: tab.tab.id,
 70 |                       windowId: tab.tab.windowId});
 71 | 
 72 |         }else if(response.code == "checkIfFullscreen"){
 73 |             chrome.windows.get(tab.tab.windowId, function(chromeWindow) {
 74 |                 // "normal", "minimized", "maximized" or "fullscreen"
 75 |                 callback({"isFullscreen":(chromeWindow.state == "fullscreen")});
 76 |             });
 77 |             return true;
 78 | 
 79 |         }else if(response.code == "setActive"){
 80 |             chrome.tabs.update(response.tabId,{active: true});
 81 | 
 82 |         }else if(response.code == "createTab"){
 83 |             chrome.tabs.create({});
 84 | 
 85 |         }else if(response.code == "muteTab"){
 86 |             $.each(stack,function(i,x){
 87 |                 if(x.id == response.tabId){
 88 |                     chrome.tabs.update(response.tabId,{muted: !x.mutedInfo.muted});
 89 |                     return;
 90 |                 }
 91 |             });
 92 | 
 93 |         }else if(response.code == "closeTab"){
 94 |             chrome.tabs.remove(response.tabId);
 95 |             if(response.tabId != tab.tab.id)
 96 |                 chrome.tabs.update(tab.tab.id, {active: true});
 97 | 
 98 |         }else if(response.code == "moveTab"){
 99 |             chrome.tabs.move(response.id,{'index':response.index});
100 | 
101 |         }else{
102 |             //broadcast(response,tab.id);
103 |         }
104 | });
105 | 
106 | chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
107 |     console.log("onUpdated activated");
108 |     broadcast(null,null);
109 | });
110 | 
111 | chrome.tabs.onCreated.addListener(function(tab){
112 |     console.log("onCreated activated");
113 |     broadcast(null,null);
114 | });
115 | 
116 | chrome.tabs.onMoved.addListener(function(tabId,moveInfo){
117 |     console.log("onMoved activated");
118 |     broadcast(null,null);
119 | });
120 | 
121 | chrome.tabs.onActivated.addListener(function(activeInfo){
122 |     console.log("onActivated activated");
123 |     broadcast(null,null);
124 | });
125 | 
126 | chrome.tabs.onDetached.addListener(function(tabId,detachInfo){
127 |     console.log("onDetached activated");
128 |     broadcast(null,null);
129 | });
130 | 
131 | chrome.tabs.onAttached.addListener(function(tabId,attachInfo){
132 |     console.log("onAttached activated");
133 |     broadcast(null,null);
134 | });
135 | 
136 | chrome.tabs.onRemoved.addListener(function(tabId,removeInfo){
137 |     console.log("onRemoved activated");
138 |     broadcast(null,null);
139 | });
140 | 
141 | chrome.tabs.onReplaced.addListener(function(addedTabId,removedTabId){
142 |     console.log("onReplaced activated");
143 |     //broadcast(null,null);
144 | });
145 | 
146 | init();
147 | 


--------------------------------------------------------------------------------
/icons/128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/icons/128.png


--------------------------------------------------------------------------------
/icons/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/icons/16.png


--------------------------------------------------------------------------------
/icons/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/samuthekid/tabrevolution/b3b4342785ff5abf609755355133c23ec216c4c4/icons/48.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | var stack;
  2 | var order;
  3 | var myId;
  4 | var windowId;
  5 | var isFullscreen;
  6 | 
  7 | function init(){
  8 |     // Start here
  9 | 
 10 |     // Append styles
 11 |     $("head").append("<style id='tr_style'></style>");
 12 |     $("#tr_style").load(chrome.extension.getURL("/style.css"));
 13 | 
 14 |     // Append div
 15 |     boss = $("<div>");
 16 |     boss.attr("id","tr");
 17 |     boss.addClass("tr_reset tr_disabled");
 18 |     $("body").append(boss);
 19 | 
 20 |     $(window).resize(checkIfFullscreen);
 21 | 
 22 |     $(window).keydown(function(e){
 23 |         var key = e.which;
 24 |         if(key == 13 && $(".tr_input").is(":focus")){
 25 |             //submit form
 26 |             var query = $(".tr_input").val();
 27 |             url_reg = /^((http|https|ftp|chrome):\/\/)?([a-zA-Z0-9\_\-]+)((\.|\:)[a-zA-Z0-9\_\-]+)+(\/.*)?$/;
 28 |             if(url_reg.test(query)){
 29 |                 // URL
 30 |                 if(query.includes("http://") || query.includes("https://"))
 31 |                     location.href = query;
 32 |                 else
 33 |                     location.href = "http://"+query;
 34 |             }else{
 35 |                 // NOT URL
 36 |                 location.href = "https://www.google.pt/search?q="+query;
 37 |             }
 38 |             return false;  
 39 |         }else if((e.ctrlKey && key==76) || (e.altKey && key==68)){
 40 |             $("#tr").addClass("tr_hover");
 41 |             $("input.tr_input").select();
 42 |         }
 43 |     });
 44 | 
 45 |     chrome.runtime.sendMessage({"code":"getData"},
 46 |         function(response){
 47 |             stack = response.stack;
 48 |             myId = response.myId;
 49 |             windowId = response.windowId;
 50 |             //console.log(myId+" "+windowId);
 51 |             checkIfFullscreen();
 52 |             redraw();
 53 |     });
 54 | }
 55 | 
 56 | function checkIfFullscreen(){
 57 |     chrome.runtime.sendMessage({"code":"checkIfFullscreen"},
 58 |         function(response){
 59 |             isFullscreen = response.isFullscreen;
 60 |             if(isFullscreen){
 61 |                 $("#tr").removeClass("tr_disabled");
 62 |             }else{
 63 |                 $("#tr").addClass("tr_disabled");
 64 |             }
 65 |     });
 66 | }
 67 | 
 68 | function checkForMoves(){
 69 |     $.each($(".tr_sortable").children(),function(i,x){
 70 |         x = parseInt(x.dataset["tabid"]);
 71 |         chrome.runtime.sendMessage({"code":"moveTab","id":x,"index":i});
 72 |     });
 73 | }
 74 | 
 75 | function makeSortable(){
 76 |     var tabs = $(".tr_tops").tabs();
 77 |     tabs.find(".tr_sortable").sortable({
 78 |         axis: "x",
 79 |         stop: function(e) {
 80 |             tabs.tabs("refresh");
 81 |             checkForMoves();
 82 |         }
 83 |     });
 84 | }
 85 | 
 86 | function addEvents(){
 87 | 
 88 |     $(".tr_tab").mousedown(function(e){
 89 |         switch(e.which){
 90 |             case 2:
 91 |             // MIDDLE CLICK
 92 |             chrome.runtime.sendMessage({"code":"closeTab","tabId":parseInt(e.target.closest("li").dataset["tabid"])});
 93 |             e.preventDefault();
 94 |             e.stopPropagation();
 95 |             break;
 96 |         }
 97 |         return true;// to allow the browser to know that we handled it.
 98 |     });
 99 | 
100 |     $(".tr_tab").click(function(e) {
101 |         if(e.target.className.includes("tr_tab_close")){
102 |             chrome.runtime.sendMessage({"code":"closeTab","tabId":parseInt(e.target.closest("li").dataset["tabid"])});
103 |         }else if(e.target.className.includes("tr_tab_sound")){
104 |             chrome.runtime.sendMessage({"code":"muteTab","tabId":parseInt(e.target.closest("li").dataset["tabid"])});
105 |         }else{
106 |             chrome.runtime.sendMessage({"code":"setActive","tabId":parseInt(e.target.closest("li").dataset["tabid"])});
107 |         }
108 |     });
109 | 
110 |     $(".tr_new_tab").click(function(e){
111 |         chrome.runtime.sendMessage({"code":"createTab"});
112 |     });
113 | 
114 |     $("#tr_prev").click(function(e){
115 |         window.history.back();
116 |     });
117 | 
118 |     $("#tr_next").click(function(e){
119 |         window.history.forward();
120 |     });
121 | 
122 |     $("#tr_rel").click(function(e){
123 |         location.reload();
124 |     });
125 | 
126 |     $("input.tr_input").on("focus",function(e){
127 |         $(e.target).select();
128 |         $("#tr").addClass("tr_hover");
129 |     });
130 | 
131 |     $("input.tr_input").on("focusout",function(e){
132 |         if(e.target.value == ""){
133 |             e.target.value = location.href;
134 |         }
135 |         $("#tr").removeClass("tr_hover");
136 |     });
137 | }
138 | 
139 | function redraw(){
140 |     var isLoading = false;
141 | 
142 |     $("#tr").html("");
143 | 
144 |     tops = $("<div>");
145 |     tops.addClass("tr_reset tr_tops");
146 | 
147 |     pins = $("<ul>");
148 |     pins.attr("id","tr_pins");
149 |     pins.addClass("tr_reset tr_sortable tr_sortable_pinned");
150 | 
151 |     tabs = $("<ul>");
152 |     tabs.attr("id","tr_tabs");
153 |     tabs.addClass("tr_reset tr_sortable");
154 | 
155 |     $.each(stack,function(i,x){
156 |         if(x.windowId == windowId){
157 | 
158 |             // LI CANT HAVE TR_RESET
159 |             li = $("<li>");
160 |             li.addClass("tr_tab");
161 |             li.attr("data-tabId",x.id);
162 |             li.attr("data-tabIndex",x.index);
163 | 
164 |             if(x.id == myId){
165 |                 li.addClass("tr_this");
166 |             }
167 | 
168 |             if(x.pinned){
169 | 
170 |                 // PINNED
171 |                 li.addClass("tr_pinned");
172 |                 fav = $("<img>");
173 | 
174 |                 fav.addClass("tr_reset tr_favicon");
175 |                 if(x.status == "loading"){
176 |                     // LOADING
177 |                     isLoading = true;
178 |                     fav.attr("src",chrome.extension.getURL("assets/loading.gif"));
179 |                 }else{
180 |                     // COMPLETE
181 |                     if(!x.favIconUrl || x.favIconUrl.includes("chrome://"))
182 |                         fav.attr("src",chrome.extension.getURL("assets/internet.png"));
183 |                     else
184 |                         fav.attr("src",x.favIconUrl);
185 |                 }
186 |                 li.append(fav);
187 | 
188 |                 if(x.audible){
189 |                     // AUDIBLE
190 |                     snd = $("<img>");
191 |                     snd.addClass("tr_reset tr_tab_sound");
192 |                     if(x.mutedInfo.muted)
193 |                         snd.attr("src",chrome.extension.getURL("assets/no_sound.png"));
194 |                     else
195 |                         snd.attr("src",chrome.extension.getURL("assets/sound.png"));
196 |                     li.append(snd);
197 |                 }
198 | 
199 |                 pins.append(li);
200 | 
201 |             }else{
202 | 
203 |                 // NOT PINNED
204 |                 fav = $("<img>");
205 |                 fav.addClass("tr_reset tr_favicon");
206 |                 if(x.status == "loading"){
207 |                     // LOADING
208 |                     isLoading = true;
209 |                     fav.attr("src",chrome.extension.getURL("assets/loading.gif"));
210 |                 }else{
211 |                     // COMPLETE
212 |                     if(!x.favIconUrl || x.favIconUrl.includes("chrome://"))
213 |                         fav.attr("src",chrome.extension.getURL("assets/internet.png"));
214 |                     else
215 |                         fav.attr("src",x.favIconUrl);
216 |                 }
217 |                 li.append(fav);
218 | 
219 |                 title = $("<span>");
220 |                 title.addClass("tr_reset tr_tab_title");
221 |                 title.text(x.title);
222 |                 li.append(title);
223 | 
224 |                 if(x.audible){
225 |                     // AUDIBLE
226 |                     snd = $("<img>");
227 |                     snd.addClass("tr_reset tr_tab_sound");
228 |                     if(x.mutedInfo.muted)
229 |                         snd.attr("src",chrome.extension.getURL("assets/no_sound.png"));
230 |                     else
231 |                         snd.attr("src",chrome.extension.getURL("assets/sound.png"));
232 |                     li.append(snd);
233 |                 }
234 | 
235 |                 close = $("<img>");
236 |                 close.addClass("tr_reset tr_tab_close");
237 |                 close.attr("src",chrome.extension.getURL("assets/close.png"));
238 |                 li.append(close);
239 | 
240 |                 tabs.append(li);
241 |             }
242 |         }
243 |     });
244 | 
245 |     tops.append(pins);
246 |     tops.append(tabs);
247 | 
248 |     newtab = $("<div>");
249 |     newtab.addClass("tr_reset tr_new_tab");
250 |     newtab.append($("<img>").addClass("tr_reset tr_new_tab_icon").attr("src",chrome.extension.getURL("assets/add.png")));
251 |     tops.append(newtab);
252 | 
253 |     $("#tr").append(tops);
254 | 
255 |     url = $("<div>");
256 |     url.addClass("tr_reset tr_url");
257 |     
258 |     prev = $("<div>");
259 |     prev.attr("id","tr_prev");
260 |     prev.addClass("tr_reset tr_button");
261 |     prev.append($("<img>").addClass("tr_reset tr_button_img").attr("src",chrome.extension.getURL("assets/back.png")));
262 |     url.append(prev);
263 | 
264 |     next = $("<div>");
265 |     next.attr("id","tr_next");
266 |     next.addClass("tr_reset tr_button");
267 |     next.append($("<img>").addClass("tr_reset tr_button_img").attr("src",chrome.extension.getURL("assets/forward.png")));
268 |     url.append(next);
269 | 
270 |     rel = $("<div>");
271 |     rel.attr("id","tr_rel");
272 |     rel.addClass("tr_reset tr_button");
273 |     rel.append($("<img>").addClass("tr_reset tr_button_img").attr("src",chrome.extension.getURL("assets/reload.png")));
274 |     url.append(rel);
275 | 
276 |     inp = $("<input>");
277 |     inp.addClass("tr_reset tr_input");
278 |     inp.attr("type","text");
279 |     inp.attr("value",location.href);
280 |     url.append(inp);
281 | 
282 |     $("#tr").append(url);
283 | 
284 |     if(isFullscreen && isLoading) $("#tr").addClass("tr_hover");
285 |     else $("#tr").removeClass("tr_hover");
286 | 
287 |     makeSortable();
288 |     addEvents();
289 | }
290 | 
291 | chrome.runtime.onMessage.addListener(
292 |     function(response, tab, callback){
293 |         stack = response;
294 |         redraw();
295 |     }
296 | );
297 | 
298 | // DOCUMENT_END
299 | init();
300 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "Tab Revolution",
 3 | 	"short_name": "TR",
 4 | 	"description": "Tab Revolution allows you to have WORKING tabs in Chrome fullscreen mode!",
 5 | 	"version": "1.1.5",
 6 | 	"author": "Los Admins",
 7 | 	"icons": {
 8 | 		"16": "icons/16.png",
 9 | 		"48": "icons/48.png",
10 | 		"128": "icons/128.png"
11 | 	},
12 | 	
13 | 	"background": {
14 | 		"persistent": true,
15 | 		"scripts": ["jquery-3.0.0.js", "back.js"]
16 | 	},
17 | 
18 | 	"content_scripts": [
19 | 		{
20 | 			"persistent": true,
21 | 			"js": ["jquery-3.0.0.js", "jquery-ui.js", "main.js", "style.css"],
22 | 			"matches": ["<all_urls>"],
23 | 			"run_at": "document_end"
24 | 		}
25 | 	],
26 | 	"web_accessible_resources":[
27 | 		"style.css",
28 | 		"assets/internet.png",
29 | 		"assets/back.png",
30 | 		"assets/forward.png",
31 | 		"assets/reload.png",
32 | 		"assets/close.png",
33 | 		"assets/sound.png",
34 | 		"assets/no_sound.png",
35 | 		"assets/loading.gif",
36 | 		"assets/add.png"
37 | 	],
38 | 
39 | 	"permissions": [
40 | 		"http://*/*",
41 | 		"https://*/*",
42 | 		"tabs",
43 | 		"activeTab",
44 | 		"background",
45 | 		"contextMenus"
46 | 	],
47 | 	"content_security_policy": "script-src 'self'; object-src 'self'",
48 | 	"minimum_chrome_version": "38",
49 | 	"manifest_version": 2
50 | }
51 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | .tr_reset{
  2 |     all: initial !important;
  3 |     * {
  4 |         all: unset !important;
  5 |     }
  6 | }
  7 | 
  8 | div#tr{
  9 |     position: fixed !important;
 10 |     top: -58px !important;/*-58*/
 11 |     left: 0px !important;
 12 |     min-width: 100vw !important;
 13 |     width: 100vw !important;
 14 |     max-width: 100vw !important;
 15 |     z-index: 100000000000 !important;
 16 |     box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.5) !important;
 17 |     -webkit-transition: all 0.2s ease !important;
 18 | }
 19 | 
 20 | div#tr:hover{
 21 |     top: 0px !important;
 22 | }
 23 | 
 24 | div#tr.tr_hover{
 25 |     top: 0px !important;
 26 | }
 27 | 
 28 | div#tr.tr_disabled{
 29 |     top: -500px !important;/*-500*/
 30 | }
 31 | 
 32 | div.tr_tops{
 33 |     display: flex !important;
 34 |     flex-direction: row !important;
 35 |     flex-wrap: nowrap !important;
 36 |     min-width: 100% !important;
 37 |     width: 100% !important;
 38 |     max-width: 100% !important;
 39 |     background-color: #31363b !important;
 40 |     border-radius: 0px !important;
 41 |     box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.45) inset !important;
 42 | }
 43 | 
 44 | ul.tr_sortable{
 45 |     display: flex !important;
 46 |     flex-direction: row !important;
 47 |     flex-wrap: nowrap !important;
 48 |     overflow: hidden !important;
 49 | }
 50 | 
 51 | ul.tr_sortable_pinned{
 52 |     flex-shrink: 0 !important;
 53 | }
 54 | 
 55 | li.tr_tab{
 56 |     background-color: #989a9d !important;
 57 |     min-width: 36px !important;
 58 |     width: 200px !important;
 59 |     max-width: 200px !important;
 60 |     display: flex !important;
 61 |     flex-direction: row !important;
 62 |     justify-content: flex-start !important;
 63 |     align-items: center !important;
 64 |     padding: 4px 6px !important;
 65 |     margin: 0px 1px !important;
 66 |     cursor: default !important;
 67 |     border-radius: 3px 3px 0px 0px !important;
 68 |     box-sizing: content-box !important;
 69 | }
 70 | 
 71 | li.tr_tab:hover:not(.tr_this){
 72 |     background-color: #cccdd0 !important;
 73 | }
 74 | 
 75 | li.tr_this{
 76 |     background-color: #eff0f1 !important;
 77 | }
 78 | 
 79 | li.tr_pinned{
 80 |     width: auto !important;
 81 |     min-width: auto !important;
 82 | }
 83 | 
 84 | img.tr_favicon{
 85 |     height: 17px !important;
 86 |     width: 17px !important;
 87 | }
 88 | 
 89 | span.tr_tab_title{
 90 |     flex: 1 !important;
 91 |     margin-left: 6px !important;
 92 |     text-overflow: ellipsis !important;
 93 |     overflow: hidden !important;
 94 |     white-space: nowrap !important;
 95 |     font-family: verdana !important;
 96 |     font-size: 12px !important;
 97 |     font-weight: 100 !important;
 98 |     cursor: default !important;
 99 | }
100 | 
101 | img.tr_tab_sound{
102 |     height: 12px !important;
103 |     width: 12px !important;
104 |     margin-left: 6px !important;
105 |     cursor: pointer !important;
106 |     opacity: 0.4 !important;
107 | }
108 | 
109 | img.tr_tab_sound:hover{
110 |     opacity: 0.8 !important;
111 | }
112 | 
113 | img.tr_tab_close{
114 |     height: 10px !important;
115 |     width: 10px !important;
116 |     margin-left: 6px !important;
117 |     cursor: pointer !important;
118 |     opacity: 0.4 !important;
119 | }
120 | 
121 | img.tr_tab_close:hover{
122 |     opacity: 0.8 !important;
123 | }
124 | 
125 | div.tr_new_tab{
126 |     display: flex !important;
127 |     align-items: center !important;
128 |     padding: 0px 1.5% 0px 5px!important;
129 |     cursor: pointer !important;
130 | }
131 | 
132 | img.tr_new_tab_icon{
133 |     width: 12px !important;
134 |     height: 12px !important;
135 |     cursor: pointer !important;
136 | }
137 | 
138 | div.tr_url{
139 |     width: 100% !important;
140 |     display: flex !important;
141 |     flex-direction: row !important;
142 |     justify-content: space-around !important;
143 |     background-color: #eff0f1 !important;
144 | }
145 | 
146 | div.tr_button{
147 |     width: 18px !important;
148 |     height: 18px !important;
149 |     font-family: verdana !important;
150 |     text-align: center !important;
151 |     margin: 4px 3px !important;
152 |     padding: 3px !important;
153 |     border: solid 1px #eaeaea !important;
154 |     border-radius: 4px !important;
155 |     cursor: default !important;
156 | }
157 | 
158 | div.tr_button:hover{
159 |     border: solid 1px #d3d4d4 !important;
160 |     background: #f4f5f5 !important;
161 | }
162 | 
163 | img.tr_button_img{
164 |     min-width: 18px !important;
165 |     width: 18px !important;
166 |     max-width: 18px !important;
167 |     min-height: 18px !important;
168 |     height: 18px !important;
169 |     max-height: 18px !important;
170 |     opacity: 0.4 !important;
171 | }
172 | 
173 | img.tr_button_img:hover{
174 |     opacity: 0.8 !important;
175 | }
176 | 
177 | input.tr_input{
178 |     flex: 1 !important;
179 |     width: 100% !important;
180 |     font-family: verdana !important;
181 |     font-size: 13px !important;
182 |     font-weight: 100 !important;
183 |     padding: 3px 8px !important;
184 |     margin: 0px !important;
185 | }


--------------------------------------------------------------------------------