From 9f43d8ad45b6467bc4e0a608f9b36144540ae5a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Sun, 9 Oct 2016 14:33:12 +0200
Subject: [PATCH 1/5] reducing duplication

---
 src/mods/ui.js | 39 +++++++++++++++------------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/mods/ui.js b/src/mods/ui.js
index 6173217..3b5cc1a 100644
--- a/src/mods/ui.js
+++ b/src/mods/ui.js
@@ -236,32 +236,23 @@ idrinth.ui = {
         mod.children.push ( {
             css: 'buttons'
         } );
-        var closeFunc = 'this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);';
+        var makeButton = function ( text, func ) {
+            return {
+                type: 'button',
+                content: idrinth.text.get ( "ui.button." + text ),
+                attributes: [ {
+                        name: 'onclick',
+                        value: 'this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);' + func
+                    } ]
+            };
+        };
         if ( typeof altFunc === 'string' ) {
-            mod.children[mod.children.length - 1].children = [ {
-                    type: 'button',
-                    content: idrinth.text.get ( "ui.button.ok" ),
-                    attributes: [ {
-                            name: 'onclick',
-                            value: closeFunc + altFunc
-                        } ]
-                }, {
-                    type: 'button',
-                    content: idrinth.text.get ( "ui.button.cancel" ),
-                    attributes: [ {
-                            name: 'onclick',
-                            value: closeFunc
-                        } ]
-                } ];
+            mod.children[mod.children.length - 1].children = [
+                makeButton ( 'ok', altFunc ),
+                makeButton ( 'cancel', '' )
+            ];
         } else {
-            mod.children[mod.children.length - 1].children = [ {
-                    type: 'button',
-                    content: idrinth.text.get ( "ui.button.ok" ),
-                    attributes: [ {
-                            name: 'onclick',
-                            value: closeFunc
-                        } ]
-                } ];
+            mod.children[mod.children.length - 1].children = [ makeButton ( 'ok', '' ) ];
         }
         idrinth.ui.body.appendChild ( idrinth.ui.buildElement ( mod ) );
     },

From bdbe0ca6775ef6b2bd54ed7112ee926f24ca9dab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Sun, 9 Oct 2016 15:12:15 +0200
Subject: [PATCH 2/5] moving from css to scss and the related url for loading

---
 src/mods/ui.js                       | 2 +-
 src/{script-styles.css => root.scss} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{script-styles.css => root.scss} (100%)

diff --git a/src/mods/ui.js b/src/mods/ui.js
index 3b5cc1a..fd764e2 100644
--- a/src/mods/ui.js
+++ b/src/mods/ui.js
@@ -795,7 +795,7 @@ idrinth.ui = {
                     value: 'stylesheet'
                 }, {
                     name: 'href',
-                    value: 'https://dotd.idrinth.de###PATH###/script-styles.css?###VERSION###'
+                    value: 'https://dotd.idrinth.de/static/userscript-styles/###RELOAD-VERSION###/'
                 } ]
         } ) );
         build ();
diff --git a/src/script-styles.css b/src/root.scss
similarity index 100%
rename from src/script-styles.css
rename to src/root.scss

From 97666393de89937131f814c72c8dbb7270b9b811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Sun, 9 Oct 2016 15:30:58 +0200
Subject: [PATCH 3/5] adding some really basic mixins

---
 src/root.scss | 102 +++++++++++++++++++++-----------------------------
 1 file changed, 42 insertions(+), 60 deletions(-)

diff --git a/src/root.scss b/src/root.scss
index f9a39a6..0315379 100644
--- a/src/root.scss
+++ b/src/root.scss
@@ -1,13 +1,26 @@
+@mixin basic-box() {
+    box-sizing: border-box;
+    display:block;
+    width:100%;
+    height:auto;
+    overflow:hidden;
+    margin:0;
+    padding:0;
+}
+@mixin simple-square($size) {
+    width:$size;
+    height:$size;
+}
 /**
     * These styles modify pages changed by the script of IDotD
 **/
 .idrinth-hovering-box {
+    @include basic-box();
     background: #cccccc;
     background: rgba(204, 204, 204, 0.9);
     border-radius: 2px;
     width: 200px;
     z-index: 100000;
-    display: block;
     box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.65);
 }
 
@@ -26,23 +39,21 @@
 
 .idrinth-emoticon {
     display: inline-block;
-    width: 16px;
-    height: 16px;
+    @include simple-square(16px);
 }
 
 .idrinth-emoticon > span {
     display: none;
-    width: 64px;
-    height: 64px;
+    @include simple-square(64px);
     position: absolute;
 }
 
 .idrinth-emoticon:hover > span {
-    display: block;
+    @include basic-box();
 }
 
 #idrinth-raid-link-list span {
-    display: block;
+    @include basic-box();
     cursor: pointer;
 }
 
@@ -94,24 +105,21 @@
 }
 
 #idrinth-tierlist .tier-wrapper table {
-    width: 100%;
-    box-sizing: border-box;
+    @include basic-box();
+    display: table;
 }
 
 #idrinth-tierlist .tier-wrapper strong,
 #idrinth-tierlist .tier-wrapper span {
-    display: block;
+    @include basic-box();
 }
 
 .idrinth-hovering-box .tab-activator {
+    @include basic-box();
     float: left;
     border-top-left-radius: 5px;
-    box-sizing: border-box;
     border-top-right-radius: 5px;
     border: 1px solid #000;
-    display: block;
-    padding: 0;
-    margin: 0;
     text-align: center;
     cursor: pointer;
 }
@@ -121,9 +129,7 @@
 }
 
 .idrinth-hovering-box .tab-element {
-    padding: 0;
-    display:block;
-    margin: 0;
+    @include basic-box();
 }
 
 #idrinth-controls {
@@ -145,21 +151,15 @@
 
 .idrinth-line,
 #idrinth-tierlist .tier-wrapper {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    height: auto;
-    overflow: hidden;
+    @include basic-box();
     padding: 2px;
 }
 
 .idrinth-float-half {
-    display: block;
+    @include basic-box();
     width: 50%;
-    box-sizing: border-box;
     float: left;
     padding: 2px;
-    margin: 0;
 }
 
 #idrinth-tooltip .idrinth-tooltip-header {
@@ -201,10 +201,8 @@
 
 #idrinth-chat ul,
 #idrinth-chat li {
-    display: block;
-    margin: 0;
+    @include basic-box();
     padding: 1px;
-    box-sizing: border-box;
 }
 
 #idrinth-chat .chat-labels,
@@ -213,13 +211,13 @@
 }
 
 #idrinth-chat.active .chat-labels {
+    @include basic-box();
     width: 3em;
-    display: block;
     float: left;
 }
 
 #idrinth-chat.active .chat-tabs {
-    display: block;
+    @include basic-box();
 }
 
 #idrinth-chat .chat-labels li {
@@ -241,9 +239,7 @@
 }
 
 #idrinth-chat .chat-tabs > li.active {
-    display: block;
-    height: 100%;
-    overflow: hidden;
+    @include basic-box();
 }
 
 #idrinth-chat .chat-tabs, #idrinth-chat .chat-labels {
@@ -329,10 +325,7 @@
     height: auto;
 }
 .idrinth-ui-menu {
-    margin:0;
-    padding:0;
-    overflow:hidden;
-    width:100%;
+    @include basic-box();
 }
 
 #idrinth-chat .styled-scrollbar::-webkit-scrollbar,
@@ -361,12 +354,9 @@
 }
 
 #idrinth-chat .add-chat-box {
+    @include basic-box();
     height: 5%;
-    display: block;
     float: left;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
 }
 
 #idrinth-chat > .chat-labels > li {
@@ -440,23 +430,20 @@
 
 .idrinth-userinfo-box {
     position: fixed;
-    display: block;
+    @include basic-box();
     background: #333;
     color: #fff;
     padding: 2px;
     border-radius: 2px;
     box-shadow: 3px 3px 5px rgba(255, 255, 255, 0.9);
-    margin: 0;
     max-width: 150px;
     z-index: 120000;
 }
 
 .idrinth-userinfo-box > li {
-    display: block;
+    @include basic-box();
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
-    padding: 0;
-    margin: 0;
     cursor: pointer;
 }
 
@@ -480,8 +467,8 @@
 #idrinth-chat > .chat-tabs li > button {
     min-width: 50%;
     max-width: 100%;
+    @include basic-box();
     width: auto !important;
-    display: block;
 }
 
 #idrinth-chat .chat > li {
@@ -516,16 +503,14 @@
 }
 
 .idrinth-central-box td.traffic > span {
-    width: 2em;
-    height: 2em;
-    display: block;
+    @include basic-box();
+    @include simple-square(2em);
 }
 
 .idrinth-central-box td.traffic > span {
-    width: 2em;
-    height: 2em;
+    @include basic-box();
+    @include simple-square(2em);
     border-radius: 1em;
-    display: block;
     overflow: hidden;
 }
 
@@ -625,14 +610,12 @@ td.is-os {
 .idrinth-join-frame {
     position:absolute;
     left:0;
-    width:1px;
-    height:1px;
+    @include simple-square(1px);
     z-index:-100;
 }
 .idrinth-circle {
     padding:0.2em;
-    width:1em;
-    height:1em;
+    @include simple-square(1em);
     float:right;
     cursor:pointer;
     background:#000;
@@ -662,14 +645,13 @@ td.is-os {
     background:rgba(255,255,255,0.45);
 }
 .idrinth-tier-box > div > div {
+    @include basic-box();
     width: 50%;
     float: left;
     padding:2px;
-    box-sizing: border-box;
 }
 .idrinth-tier-box > div > strong {
-    width: 100%;
-    display:block;
+    @include basic-box();
     padding-bottom:2px;
     text-align:center;
     background:rgba(255,255,255,0.25);

From 54650d70fc17ea8812ee49f7c3784cbbc9379d49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Sun, 9 Oct 2016 15:50:43 +0200
Subject: [PATCH 4/5] restoring some previous values

---
 src/root.scss | 80 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/root.scss b/src/root.scss
index 0315379..ca5dda4 100644
--- a/src/root.scss
+++ b/src/root.scss
@@ -1,12 +1,3 @@
-@mixin basic-box() {
-    box-sizing: border-box;
-    display:block;
-    width:100%;
-    height:auto;
-    overflow:hidden;
-    margin:0;
-    padding:0;
-}
 @mixin simple-square($size) {
     width:$size;
     height:$size;
@@ -15,12 +6,12 @@
     * These styles modify pages changed by the script of IDotD
 **/
 .idrinth-hovering-box {
-    @include basic-box();
     background: #cccccc;
     background: rgba(204, 204, 204, 0.9);
     border-radius: 2px;
     width: 200px;
     z-index: 100000;
+    display: block;
     box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.65);
 }
 
@@ -49,11 +40,11 @@
 }
 
 .idrinth-emoticon:hover > span {
-    @include basic-box();
+    display: block;
 }
 
 #idrinth-raid-link-list span {
-    @include basic-box();
+    display: block;
     cursor: pointer;
 }
 
@@ -105,21 +96,24 @@
 }
 
 #idrinth-tierlist .tier-wrapper table {
-    @include basic-box();
-    display: table;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 #idrinth-tierlist .tier-wrapper strong,
 #idrinth-tierlist .tier-wrapper span {
-    @include basic-box();
+    display: block;
 }
 
 .idrinth-hovering-box .tab-activator {
-    @include basic-box();
     float: left;
     border-top-left-radius: 5px;
+    box-sizing: border-box;
     border-top-right-radius: 5px;
     border: 1px solid #000;
+    display: block;
+    padding: 0;
+    margin: 0;
     text-align: center;
     cursor: pointer;
 }
@@ -129,7 +123,9 @@
 }
 
 .idrinth-hovering-box .tab-element {
-    @include basic-box();
+    padding: 0;
+    display:block;
+    margin: 0;
 }
 
 #idrinth-controls {
@@ -151,15 +147,21 @@
 
 .idrinth-line,
 #idrinth-tierlist .tier-wrapper {
-    @include basic-box();
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    height: auto;
+    overflow: hidden;
     padding: 2px;
 }
 
 .idrinth-float-half {
-    @include basic-box();
+    display: block;
     width: 50%;
+    box-sizing: border-box;
     float: left;
     padding: 2px;
+    margin: 0;
 }
 
 #idrinth-tooltip .idrinth-tooltip-header {
@@ -201,8 +203,10 @@
 
 #idrinth-chat ul,
 #idrinth-chat li {
-    @include basic-box();
+    display: block;
+    margin: 0;
     padding: 1px;
+    box-sizing: border-box;
 }
 
 #idrinth-chat .chat-labels,
@@ -211,13 +215,13 @@
 }
 
 #idrinth-chat.active .chat-labels {
-    @include basic-box();
     width: 3em;
+    display: block;
     float: left;
 }
 
 #idrinth-chat.active .chat-tabs {
-    @include basic-box();
+    display: block;
 }
 
 #idrinth-chat .chat-labels li {
@@ -239,7 +243,9 @@
 }
 
 #idrinth-chat .chat-tabs > li.active {
-    @include basic-box();
+    display: block;
+    height: 100%;
+    overflow: hidden;
 }
 
 #idrinth-chat .chat-tabs, #idrinth-chat .chat-labels {
@@ -325,7 +331,10 @@
     height: auto;
 }
 .idrinth-ui-menu {
-    @include basic-box();
+    margin:0;
+    padding:0;
+    overflow:hidden;
+    width:100%;
 }
 
 #idrinth-chat .styled-scrollbar::-webkit-scrollbar,
@@ -354,9 +363,12 @@
 }
 
 #idrinth-chat .add-chat-box {
-    @include basic-box();
     height: 5%;
+    display: block;
     float: left;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 #idrinth-chat > .chat-labels > li {
@@ -430,20 +442,23 @@
 
 .idrinth-userinfo-box {
     position: fixed;
-    @include basic-box();
+    display: block;
     background: #333;
     color: #fff;
     padding: 2px;
     border-radius: 2px;
     box-shadow: 3px 3px 5px rgba(255, 255, 255, 0.9);
+    margin: 0;
     max-width: 150px;
     z-index: 120000;
 }
 
 .idrinth-userinfo-box > li {
-    @include basic-box();
+    display: block;
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
+    padding: 0;
+    margin: 0;
     cursor: pointer;
 }
 
@@ -467,8 +482,8 @@
 #idrinth-chat > .chat-tabs li > button {
     min-width: 50%;
     max-width: 100%;
-    @include basic-box();
     width: auto !important;
+    display: block;
 }
 
 #idrinth-chat .chat > li {
@@ -503,14 +518,14 @@
 }
 
 .idrinth-central-box td.traffic > span {
-    @include basic-box();
     @include simple-square(2em);
+    display: block;
 }
 
 .idrinth-central-box td.traffic > span {
-    @include basic-box();
     @include simple-square(2em);
     border-radius: 1em;
+    display: block;
     overflow: hidden;
 }
 
@@ -645,13 +660,14 @@ td.is-os {
     background:rgba(255,255,255,0.45);
 }
 .idrinth-tier-box > div > div {
-    @include basic-box();
     width: 50%;
     float: left;
     padding:2px;
+    box-sizing: border-box;
 }
 .idrinth-tier-box > div > strong {
-    @include basic-box();
+    width: 100%;
+    display:block;
     padding-bottom:2px;
     text-align:center;
     background:rgba(255,255,255,0.25);

From 2c507bb23f5024da71d86ce15fa74ee40a35e75d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20B=C3=BCttner?=
 <Idrinth@users.noreply.github.com>
Date: Sun, 9 Oct 2016 16:09:26 +0200
Subject: [PATCH 5/5] refs #142 fixes #192

---
 src/root.scss         | 18 +-----------------
 src/styles/mutik.scss | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 src/styles/mutik.scss

diff --git a/src/root.scss b/src/root.scss
index ca5dda4..c07136b 100644
--- a/src/root.scss
+++ b/src/root.scss
@@ -2,6 +2,7 @@
     width:$size;
     height:$size;
 }
+@import "styles/mutik.scss";
 /**
     * These styles modify pages changed by the script of IDotD
 **/
@@ -563,23 +564,6 @@
     width: auto;
 }
 
-#DRMng_main {
-    margin-right: 5em;
-    display: block;
-    border-right: solid 1px #444;
-}
-
-#DRMng_status {
-    float: right;
-    text-align: right;
-}
-
-#DRMng_onoff {
-    float: left;
-    border-left-width: 0;
-    border-right: solid 1px #444;
-}
-
 td.is-os {
     background: #f000;
     background: rgba(255, 0, 0, 0.5);
diff --git a/src/styles/mutik.scss b/src/styles/mutik.scss
new file mode 100644
index 0000000..a1671ed
--- /dev/null
+++ b/src/styles/mutik.scss
@@ -0,0 +1,19 @@
+/**
+ * Adjustments to make sure mutik's new script is not broken by us
+**/
+#DRMng_main {
+    margin-right: 5em;
+    display: block;
+    border-right: solid 1px #444;
+}
+
+#DRMng_status {
+    float: right;
+    text-align: right;
+}
+
+#DRMng_onoff {
+    float: left;
+    border-left-width: 0;
+    border-right: solid 1px #444;
+}
\ No newline at end of file