diff --git a/4chan_x.user.js b/4chan_x.user.js
index 19e138f72..18c997b6b 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -2475,24 +2475,19 @@
};
firstRun = {
init: function() {
- var a, aa, css, dialog, style, _i, _len, _results;
- css = " #navtopr, #navbotr { font-size: 3em; position: relative; z-index: 99999; } ";
+ var css, dialog, style;
+ css = " #navtopr, #navbotr { position: relative; } #navtopr::before { content: ''; height: 50px; width: 100px; background: red; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; position: absolute; top: 100%; right: 100%; z-index: 999; } #navtopr::after { content: ''; border-top: 100px solid red; border-left: 100px solid transparent; position: absolute; top: 100%; right: 100%; z-index: 999; } #navbotr::before { content: ''; height: 50px; width: 100px; background: red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform-origin: 100% -100%; -moz-transform-origin: 100% -100%; -o-transform-origin: 100% -100%; position: absolute; bottom: 100%; right: 100%; z-index: 999; } #navbotr::after { content: ''; border-bottom: 100px solid red; border-left: 100px solid transparent; position: absolute; bottom: 100%; right: 100%; z-index: 999; } ";
style = $.addStyle(css);
style.className = 'firstrun';
dialog = $.el('div', {
id: 'overlay',
- innerHTML: "
Click the 4chan X link for options.
There is another link at the bottom of the page.
"
+ className: 'firstrun',
+ innerHTML: "Click the 4chan X links for options.
There is one on top of and the other at the bottom of the page.
"
});
$.append(d.body, dialog);
- aa = $$('#navtopr a, navbotr a');
- _results = [];
- for (_i = 0, _len = aa.length; _i < _len; _i++) {
- a = aa[_i];
- _results.push($.bind(a, 'click', firstRun.click));
- }
- return _results;
+ return $.bind(dialog, 'click', firstRun.close);
},
- click: function() {
+ close: function() {
$.setValue('firstrun', true);
$.rm($('style.firstrun', d.head));
return $.rm($('#overlay'));
diff --git a/script.coffee b/script.coffee
index 00bc4346a..3985dc00d 100644
--- a/script.coffee
+++ b/script.coffee
@@ -1853,9 +1853,57 @@ firstRun =
init: ->
css = "
#navtopr, #navbotr {
- font-size: 3em;
position: relative;
- z-index: 99999;
+ }
+ #navtopr::before {
+ content: '';
+ height: 50px;
+ width: 100px;
+ background: red;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ -webkit-transform-origin: 100% 200%;
+ -moz-transform-origin: 100% 200%;
+ -o-transform-origin: 100% 200%;
+ position: absolute;
+ top: 100%;
+ right: 100%;
+ z-index: 999;
+ }
+ #navtopr::after {
+ content: '';
+ border-top: 100px solid red;
+ border-left: 100px solid transparent;
+ position: absolute;
+ top: 100%;
+ right: 100%;
+ z-index: 999;
+ }
+ #navbotr::before {
+ content: '';
+ height: 50px;
+ width: 100px;
+ background: red;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -webkit-transform-origin: 100% -100%;
+ -moz-transform-origin: 100% -100%;
+ -o-transform-origin: 100% -100%;
+ position: absolute;
+ bottom: 100%;
+ right: 100%;
+ z-index: 999;
+ }
+ #navbotr::after {
+ content: '';
+ border-bottom: 100px solid red;
+ border-left: 100px solid transparent;
+ position: absolute;
+ bottom: 100%;
+ right: 100%;
+ z-index: 999;
}
"
style = $.addStyle css
@@ -1863,14 +1911,13 @@ firstRun =
dialog = $.el 'div',
id: 'overlay'
- innerHTML: "Click the 4chan X link for options.
There is another link at the bottom of the page.
"
+ className: 'firstrun'
+ innerHTML: "Click the 4chan X links for options.
There is one on top of and the other at the bottom of the page.
"
$.append d.body, dialog
- aa = $$ '#navtopr a, navbotr a'
- for a in aa
- $.bind a, 'click', firstRun.click
+ $.bind dialog, 'click', firstRun.close
- click: ->
+ close: ->
$.setValue 'firstrun', true
$.rm $ 'style.firstrun', d.head
$.rm $ '#overlay'