Home Explore Help
Register Sign In
Apq
/
markdown-viewer
mirror of https://github.com/simov/markdown-viewer.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Migrate to mdc

simov 8 years ago
parent
27ef88d15b
commit
0691a45600
6 changed files with 479 additions and 238 deletions
Split View Show Diff Stats
  1. 22 25
      content/options.html
  2. 102 71
      content/options.js
  3. 3 3
      content/popup.html
  4. 107 63
      content/popup.js
  5. 160 51
      css/options.css
  6. 85 25
      css/popup.css

+ 22 - 25
content/options.html
View File 

@@ -2,39 +2,36 @@
 
 <html>
 
 <head>
 
   <meta charset="utf-8" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Markdown Viewer</title>
 
-  <link href="/vendor/mdl.min.css" rel="stylesheet" type="text/css" media="all" />
 
+  <link href="/vendor/mdc.min.css" rel="stylesheet" type="text/css" media="all" />
 
   <link href="/css/icons.css" rel="stylesheet" type="text/css" media="all" />
 
   <link href="/css/options.css" rel="stylesheet" type="text/css" media="all" />
 
-  <script src="/vendor/mdl.min.js" type="text/javascript" charset="utf-8"></script>
 
+  <script src="/vendor/mdc.min.js" type="text/javascript" charset="utf-8"></script>
 
   <script src="/vendor/mithril.min.js" type="text/javascript" charset="utf-8"></script>
 
 </head>
 
-<body>
 
+<body class="mdc-typography">
 
   <div id="wrapper">
 
-    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 
-      <header class="mdl-layout__header">
 
-        <div>
 
-          <div class="mdl-layout__header-row">
 
-            <span class="mdl-layout-title">Markdown Viewer</span>
 
-            <div class="mdl-layout-spacer"></div>
 
-            <nav class="mdl-navigation">
 
-              <a href="https://github.com/simov/markdown-viewer#advanced-options" class="mdl-navigation__link">Help</a>
 
-            </nav>
 
-          </div>
 
-        </div>
 
-      </header>
 
-    </div>
 
-    <main class="mdl-layout__content"></main>
 
+    <header class="mdc-toolbar mdc-toolbar--fixed mdc-elevation--z2">
 
+      <div class="mdc-toolbar__row">
 
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
 
+          <span class="mdc-toolbar__title">Markdown Viewer</span>
 
+        </section>
 
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
 
+          <nav class="mdc-tab-bar">
 
+            <a class="mdc-tab" href="https://github.com/simov/markdown-viewer#advanced-options">Help</a>
 
+          </nav>
 
+        </section>
 
+      </div>
 
+    </header>
 
+    <main></main>
 
     <div id="footer-push">&nbsp;</div>
 
   </div>
 
-  <footer class="mdl-mega-footer">
 
-    <div class="mdl-mega-footer__bottom-section">
 
-      <ul class="mdl-mega-footer__link-list">
 
-        <li><a href="https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk" class="icon-chrome">Chrome Store</a></li>
 
-        <li><a href="https://github.com/simov/markdown-viewer" class="icon-github">GitHub</a></li>
 
-      </ul>
 
-    </div>
 
+  <footer>
 
+    <nav>
 
+      <a href="https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk" class="icon-chrome">Chrome Store</a>
 
+      <a href="https://github.com/simov/markdown-viewer" class="icon-github">GitHub</a>
 
+    </nav>
 
   </footer>
 
 </body>
 
 <script src="/content/options.js" type="text/javascript" charset="utf-8"></script>

+ 102 - 71
content/options.js
View File 

@@ -89,7 +89,7 @@ chrome.extension.isAllowedFileSchemeAccess((isAllowedAccess) => {
 
   m.redraw()
 
 })
 
 
-function get () {
 
+var get = () => {
 
   chrome.runtime.sendMessage({message: 'origins'}, (res) => {
 
     state.origins = res.origins
 
     state.header = res.header
 
@@ -99,96 +99,127 @@ function get () {
 
 
 get()
 
 
-function oncreate (vnode) {
 
-  componentHandler.upgradeElements(vnode.dom)
 
+var oncreate = {
 
+  ripple: (vnode) => {
 
+    mdc.ripple.MDCRipple.attachTo(vnode.dom)
 
+  }
 
 }
 
-function onupdate (vnode) {
 
-  if (vnode.dom.classList.contains('is-checked') !== state.header) {
 
-    vnode.dom.classList.toggle('is-checked')
 
+
 
+var onupdate = {
 
+  switch: (vnode) => {
 
+    if (vnode.dom.classList.contains('is-checked') !== state.header) {
 
+      vnode.dom.classList.toggle('is-checked')
 
+    }
 
   }
 
 }
 
 
 m.mount(document.querySelector('main'), {
 
   view: () =>
 
-    m('.mdl-grid',
 
+    m('#options',
 
+
 
+      // file access is disabled
 
       (!state.file || null) &&
 
-      m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
 
-        m('.bs-callout',
 
-          m('h4', 'Access to file:// URLs is Disabled'),
 
-          m('img.mdl-shadow--2dp', {src: '/images/file-urls.png'}),
 
-          m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-            {oncreate, onclick: events.file},
 
-            'Enable Access to file:// URLs'
 
-          )
 
+      m('.bs-callout m-file-access',
 
+        m('h4.mdc-typography--headline', 'Access to file:// URLs is Disabled'),
 
+        m('img.mdc-elevation--z2', {src: '/images/file-urls.png'}),
 
+        m('button.mdc-button mdc-button--raised m-button', {
 
+          oncreate: oncreate.ripple,
 
+          onclick: events.file
 
+          },
 
+          'Enable Access to file:// URLs'
 
         )
 
       ),
 
 
-      m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
 
-        m('.bs-callout',
 
-          m('h4', 'Add New Origin'),
 
-          m('select.mdl-shadow--2dp', {onchange: events.protocol},
 
-            state.protocols.map((protocol) =>
 
-            m('option', {value: protocol}, protocol + '://')
 
-          )),
 
-          m('.mdl-textfield mdl-js-textfield', {oncreate},
 
-            m('input.mdl-textfield__input', {
 
-              value: state.origin,
 
-              onchange: events.origin,
 
-              placeholder: 'raw.githubusercontent.com'
 
-            }),
 
-            m('label.mdl-textfield__label')
 
-          ),
 
-          m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-            {oncreate, onclick: events.add},
 
-            'Add'),
 
-          m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-            {oncreate, onclick: events.all},
 
-            'Allow All')
 
+      // add new origin
 
+      m('.bs-callout m-add-new-origin',
 
+        m('h4.mdc-typography--headline', 'Add New Origin'),
 
+        m('select.mdc-elevation--z2 m-select', {
 
+          onchange: events.protocol
 
+          },
 
+          state.protocols.map((protocol) =>
 
+          m('option', {
 
+            value: protocol
 
+            },
 
+            protocol + '://'
 
+          )
 
+        )),
 
+        m('.mdc-textfield m-textfield',
 
+          m('input.mdc-textfield__input', {
 
+            type: 'text',
 
+            value: state.origin,
 
+            onchange: events.origin,
 
+            placeholder: 'raw.githubusercontent.com'
 
+          })
 
+        ),
 
+        m('button.mdc-button mdc-button--raised m-button', {
 
+          oncreate: oncreate.ripple,
 
+          onclick: events.add
 
+          },
 
+          'Add'
 
+        ),
 
+        m('button.mdc-button mdc-button--raised m-button', {
 
+          oncreate: oncreate.ripple,
 
+          onclick: events.all
 
+          },
 
+          'Allow All'
 
         )
 
       ),
 
 
-      m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
 
-        m('.bs-callout',
 
-          m('h4', 'Allowed Origins'),
 
-          m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
 
-            {oncreate, onupdate,
 
-            title: 'Toggle header detection'},
 
-            m('input[type="checkbox"].mdl-switch__input', {
 
-              checked: state.header,
 
-              onchange: events.header
 
-            }),
 
-            m('span.mdl-switch__label', 'Detect ',
 
-              m('code', 'text/markdown'), ' and ', m('code', 'text/x-markdown'),
 
-              ' content type')
 
-          ),
 
-          m('table.mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp',
 
-            Object.keys(state.origins).sort().map((origin) =>
 
-            m('tr',
 
-              m('td.mdl-data-table__cell--non-numeric',
 
-                origin.replace(/^(\*|file|http(s)?).*/, '$1')),
 
-              m('td.mdl-data-table__cell--non-numeric',
 
-                origin.replace(/^(\*|file|http(s)?):\/\//, '')),
 
-              m('td.mdl-data-table__cell--non-numeric',
 
-                m('.mdl-textfield mdl-js-textfield', {oncreate},
 
-                  m('input.mdl-textfield__input',
 
-                    {onkeyup: events.update(origin), value: state.origins[origin]}),
 
-                  m('label.mdl-textfield__label')
 
-                )
 
+      // allowed origins
 
+      m('.bs-callout m-allowed-origins',
 
+        m('h4.mdc-typography--headline', 'Allowed Origins'),
 
+        m('label.mdc-switch m-switch', {
 
+          onupdate: onupdate.switch,
 
+          title: 'Toggle header detection'
 
+          },
 
+          m('input.mdc-switch__native-control', {
 
+            type: 'checkbox',
 
+            checked: state.header,
 
+            onchange: events.header
 
+          }),
 
+          m('.mdc-switch__background', m('.mdc-switch__knob')),
 
+          m('span.mdc-switch-label',
 
+            'Detect ',
 
+            m('code', 'text/markdown'),
 
+            ' and ',
 
+            m('code', 'text/x-markdown'),
 
+            ' content type'
 
+          )
 
+        ),
 
+
 
+        m('ul.mdc-elevation--z2 m-list',
 
+          Object.keys(state.origins).sort().map((origin) =>
 
+            m('li',
 
+              m('span', origin.replace(/^(\*|file|http(s)?).*/, '$1')),
 
+              m('span', origin.replace(/^(\*|file|http(s)?):\/\//, '')),
 
+              m('.mdc-textfield m-textfield', {
 
+                oncreate: oncreate.textfield
 
+                },
 
+                m('input.mdc-textfield__input', {
 
+                  type: 'text',
 
+                  onkeyup: events.update(origin),
 
+                  value: state.origins[origin],
 
+                })
 
               ),
 
-              m('td',
 
-                (origin !== 'file://' || null) &&
 
-                m('button.mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon',
 
-                  {oncreate, onclick: events.refresh(origin), title: 'Refresh'},
 
+              (origin !== 'file://' || null) &&
 
+              m('span',
 
+                m('button.mdc-button', {
 
+                  oncreate: oncreate.ripple,
 
+                  onclick: events.refresh(origin),
 
+                  title: 'Refresh'
 
+                  },
 
                   m('i.material-icons icon-refresh')
 
                 ),
 
-                (origin !== 'file://' || null) &&
 
-                m('button.mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon',
 
-                  {oncreate, onclick: events.remove(origin), title: 'Remove'},
 
+                m('button.mdc-button', {
 
+                  oncreate: oncreate.ripple,
 
+                  onclick: events.remove(origin),
 
+                  title: 'Remove'
 
+                  },
 
                   m('i.material-icons icon-remove')
 
                 )
 
               )
 
             )
 
-          ))
 
+          )
 
         )
 
       )
 
     )

+ 3 - 3
content/popup.html
View File 

@@ -2,11 +2,11 @@
 
 <html>
 
 <head>
 
   <meta charset="utf-8" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Markdown Viewer</title>
 
-  <link href="/vendor/mdl.min.css" rel="stylesheet" type="text/css" media="all" />
 
+  <link href="/vendor/mdc.min.css" rel="stylesheet" type="text/css" media="all" />
 
   <link href="/css/popup.css" rel="stylesheet" type="text/css" media="all" />
 
-  <script src="/vendor/mdl.min.js" type="text/javascript" charset="utf-8"></script>
 
+  <script src="/vendor/mdc.min.js" type="text/javascript" charset="utf-8"></script>
 
   <script src="/vendor/mithril.min.js" type="text/javascript" charset="utf-8"></script>
 
 </head>
 
 <body></body>

+ 107 - 63
content/popup.js
View File 

@@ -14,15 +14,17 @@ var state = {
 
     content: {
 
       emoji: 'Convert emoji :shortnames: into EmojiOne images',
 
       scroll: 'Remember scroll position',
 
-      toc: 'Generate Table of Contents'
 
+      toc: 'Generate Table of Contents',
 
+      mathjax: 'Render MathJax formulas',
 
     }
 
   }
 
 }
 
 
 var events = {
 
   tab: (e) => {
 
-    state.tab = e.target.parentNode.hash.replace('#tab-', '')
 
+    state.tab = e.target.hash.replace('#tab-', '')
 
     localStorage.setItem('tab', state.tab)
 
+    return false
 
   },
 
 
   compiler: {
 
@@ -75,6 +77,7 @@ var events = {
 
     }, () => {
 
       chrome.runtime.sendMessage({message: 'settings'}, init)
 
       localStorage.removeItem('tab')
 
+      state._tabs.activeTabIndex = 0
 
     })
 
   },
 
 
@@ -90,8 +93,8 @@ var init = (res) => {
 
   state.theme = res.theme
 
 
   state.themes = chrome.runtime.getManifest().web_accessible_resources
 
-    .filter((file) => (file.indexOf('/themes/') === 0))
 
-    .map((file) => (file.replace(/\/themes\/(.*)\.css/, '$1')))
 
+    .filter((file) => file.indexOf('/themes/') === 0)
 
+    .map((file) => file.replace(/\/themes\/(.*)\.css/, '$1'))
 
 
   state.raw = res.raw
 
   state.tab = localStorage.getItem('tab') || 'theme'
 
@@ -103,9 +106,18 @@ var init = (res) => {
 
 
 chrome.runtime.sendMessage({message: 'settings'}, init)
 
 
-var oncreate = (vnode) => {
 
-  componentHandler.upgradeElements(vnode.dom)
 
+var oncreate = {
 
+  ripple: (vnode) => {
 
+    mdc.ripple.MDCRipple.attachTo(vnode.dom)
 
+  },
 
+  tabs: (vnode) => {
 
+    state._tabs = mdc.tabs.MDCTabBar.attachTo(vnode.dom)
 
+    setTimeout(() => {
 
+      state._tabs.activeTabIndex = state.tabs.indexOf(state.tab)
 
+    }, 100)
 
+  }
 
 }
 
+
 
 var onupdate = (tab, key) => (vnode) => {
 
   var value = tab === 'compiler' ? state.options[key]
 
     : tab === 'content' ? state.content[key]
 
@@ -119,79 +131,111 @@ var onupdate = (tab, key) => (vnode) => {
 
 m.mount(document.querySelector('body'), {
 
   view: (vnode) =>
 
     m('#popup',
 
+      // raw
 
+      m('button.mdc-button mdc-button--raised m-button', {
 
+        oncreate: oncreate.ripple,
 
+        onclick: events.raw
 
+        },
 
+        (state.raw ? 'Html' : 'Markdown')
 
+      ),
 
       // defaults
 
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-        {oncreate, onclick: events.raw},
 
-        (state.raw ? 'Html' : 'Markdown')),
 
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-        {oncreate, onclick: events.defaults},
 
-        'Defaults'),
 
+      m('button.mdc-button mdc-button--raised m-button', {
 
+        oncreate: oncreate.ripple,
 
+        onclick: events.defaults
 
+        },
 
+        'Defaults'
 
+      ),
 
 
       // tabs
 
-      m('.mdl-tabs mdl-js-tabs mdl-js-ripple-effect', {oncreate},
 
-        m('.mdl-tabs__tab-bar', {onclick: events.tab}, state.tabs.map((tab) =>
 
-          m('a.mdl-tabs__tab', {
 
-            href: '#tab-' + tab,
 
-            class: state.tab === tab ? 'is-active' : ''
 
-          }, tab))
 
-        ),
 
-
 
+      m('nav.mdc-tab-bar m-tabs', {
 
+        oncreate: oncreate.tabs,
 
+        onclick: events.tab
 
+        },
 
+        state.tabs.map((tab) =>
 
+        m('a.mdc-tab', {
 
+          href: '#tab-' + tab,
 
+          },
 
+          tab
 
+        )),
 
+        m('span.mdc-tab-bar__indicator')
 
+      ),
 
+      m('.m-panels',
 
         // theme
 
-        m('.mdl-tabs__panel #tab-theme', {class: state.tab === 'theme' ? 'is-active' : ''},
 
-          m('select.mdl-shadow--2dp', {onchange: events.theme}, state.themes.map((theme) =>
 
-            m('option', {selected: state.theme === theme}, theme)
 
-          ))
 
+        m('.m-panel', {
 
+          class: state.tab === 'theme' ? 'is-active' : ''
 
+          },
 
+          m('select.mdc-elevation--z2 m-select', {
 
+            onchange: events.theme
 
+            },
 
+            state.themes.map((theme) =>
 
+              m('option', {selected: state.theme === theme}, theme)
 
+            )
 
+          )
 
         ),
 
-
 
         // compiler
 
-        m('.mdl-tabs__panel #tab-compiler', {class: state.tab === 'compiler' ? 'is-active' : ''},
 
-          m('select.mdl-shadow--2dp', {onchange: events.compiler.name}, state.compilers.map((name) =>
 
-            m('option', {selected: state.compiler === name}, name)
 
-          )),
 
-          m('.scroll', {class: Object.keys(state.options).length > 8 ? 'max' : ''},
 
-            m('.mdl-grid', Object.keys(state.options || [])
 
+        m('.m-panel', {
 
+          class: state.tab === 'compiler' ? 'is-active' : ''
 
+          },
 
+          m('select.mdc-elevation--z2 m-select', {
 
+            onchange: events.compiler.name
 
+            },
 
+            state.compilers.map((name) =>
 
+              m('option', {selected: state.compiler === name}, name)
 
+            )
 
+          ),
 
+          m('.scroll', {
 
+            class: Object.keys(state.options)
 
               .filter((key) => typeof state.options[key] === 'boolean')
 
-              .map((key) =>
 
-              m('.mdl-cell',
 
-                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
 
-                  {oncreate, onupdate: onupdate('compiler', key),
 
-                  title: state.description.compiler[key]},
 
-                  m('input[type="checkbox"].mdl-switch__input', {
 
-                    name: key,
 
-                    checked: state.options[key],
 
-                    onchange: events.compiler.options
 
-                  }),
 
-                  m('span.mdl-switch__label', key)
 
-                )
 
-              ))
 
+              .length > 8
 
+              ? 'max' : ''
 
+            },
 
+            Object.keys(state.options)
 
+            .filter((key) => typeof state.options[key] === 'boolean')
 
+            .map((key) =>
 
+              m('label.mdc-switch m-switch', {
 
+                onupdate: onupdate('compiler', key),
 
+                title: state.description.compiler[key]
 
+                },
 
+                m('input.mdc-switch__native-control', {
 
+                  type: 'checkbox',
 
+                  name: key,
 
+                  checked: state.options[key],
 
+                  onchange: events.compiler.options
 
+                }),
 
+                m('.mdc-switch__background', m('.mdc-switch__knob')),
 
+                m('span.mdc-switch-label', key)
 
+              )
 
             )
 
           )
 
         ),
 
-
 
         // content
 
-        m('.mdl-tabs__panel #tab-content',
 
-          {class: state.tab === 'content' ? 'is-active' : ''},
 
-          m('.scroll',
 
-            m('.mdl-grid', Object.keys(state.content).map((key) =>
 
-              m('.mdl-cell',
 
-                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
 
-                  {oncreate, onupdate: onupdate('content', key), title: state.description.content[key]},
 
-                  m('input[type="checkbox"].mdl-switch__input', {
 
-                    name: key,
 
-                    checked: state.content[key],
 
-                    onchange: events.content
 
-                  }),
 
-                  m('span.mdl-switch__label', key)
 
-                )
 
-              )
 
+        m('.m-panel', {
 
+          class: state.tab === 'content' ? 'is-active' : ''
 
+          },
 
+          m('.scroll', Object.keys(state.content).map((key) =>
 
+            m('label.mdc-switch m-switch', {
 
+              onupdate: onupdate('content', key),
 
+              title: state.description.content[key]
 
+              },
 
+              m('input.mdc-switch__native-control', {
 
+                type: 'checkbox',
 
+                name: key,
 
+                checked: state.content[key],
 
+                onchange: events.content
 
+              }),
 
+              m('.mdc-switch__background', m('.mdc-switch__knob')),
 
+              m('span.mdc-switch-label', key)
 
             ))
 
           )
 
         )
 
       ),
 
 
       // advanced options
 
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
 
-        {oncreate, onclick: events.advanced},
 
-        'Advanced Options')
 
+      m('button.mdc-button mdc-button--raised m-button', {
 
+        oncreate: oncreate.ripple,
 
+        onclick: events.advanced
 
+        },
 
+        'Advanced Options'
 
+      )
 
     )
 
 })

+ 160 - 51
css/options.css
View File 

@@ -2,6 +2,8 @@
 
 /*sticky footer*/
 
 html, body {
 
   height: 100%;
 
+  padding: 0;
 
+  margin: 0;
 
 }
 
 #wrapper {
 
   min-height: 100%;
 
@@ -14,96 +16,203 @@ footer, #footer-push {
 
   text-align: center;
 
 }
 
 
+
 
 /*center content on large screens*/
 
-.mdl-layout__header-row,
 
-.mdl-layout__content,
 
-.mdl-mega-footer__bottom-section {
 
+.mdc-toolbar__row,
 
+main {
 
   max-width: 1200px;
 
   margin: 0 auto;
 
 }
 
-.mdl-layout__content {
 
-  display: block;
 
-}
 
 
-/*header*/
 
-.mdl-layout__header-row { padding: 0 20px; }
 
 
 /*content*/
 
-.mdl-layout__content { padding-bottom: 60px; }
 
+main { padding: 90px 0 30px 0; }
 
+#options { letter-spacing: 0.2px; }
 
+
 
+
 
+/*header*/
 
+header .mdc-toolbar__title { margin: 0; }
 
+header nav { float: right; margin: 0 !important; }
 
+header nav a { min-width: auto !important; }
 
+
 
 
 /*footer*/
 
-.mdl-mega-footer__bottom-section { padding: 0; }
 
-.mdl-mega-footer__link-list { display: flex; justify-content: center; margin: 0 auto; }
 
-.mdl-mega-footer__link-list li:last-child { margin: 0; }
 
-.mdl-mega-footer__link-list li:nth-of-type(1) a:before { font-size: 17px; }
 
-.mdl-mega-footer__link-list li:nth-of-type(2) a { position: relative; top: -2px; }
 
-.mdl-mega-footer__link-list li:nth-of-type(2) a:before {
 
+footer {
 
+  font-size: 14px;
 
+  line-height: 20px;
 
+  color: #9e9e9e;
 
+  text-align: center;
 
+  background: #424242;
 
+  padding: 16px 40px;
 
+}
 
+footer a {
 
+  color: #9e9e9e;
 
+  text-decoration: none;
 
+}
 
+footer a:nth-of-type(1) { margin-right: 10px; }
 
+footer a:nth-of-type(1):before { font-size: 17px; }
 
+footer a:nth-of-type(2):before {
 
   font-size: 20px; position: relative; top: 1px;
 
 }
 
 
 
-/*markdown-viewer*/
 
+/*button*/
 
+.m-button {
 
+  background-color: #ececec !important;
 
+  color: #000 !important;
 
+}
 
+.m-button:before {
 
+  background-color: rgba(96, 125, 139, 0.16) !important;
 
+}
 
+.m-button:after {
 
+  background-color: rgba(96, 125, 139, 0.16) !important;
 
+}
 
+
 
+
 
+/*switch*/
 
+.m-switch {
 
+  cursor: pointer;
 
+  margin: 7px 0;
 
+}
 
+.m-switch:last-child {
 
+  margin-bottom: 16px;
 
+}
 
+.m-switch .mdc-switch__background {
 
+  display: inline-block;
 
+  bottom: 5px;
 
+  left: 15px;
 
+}
 
+.m-switch .mdc-switch-label {
 
+  font-size: 1rem;
 
+  line-height: 1.5rem;
 
+  white-space: nowrap;
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  display: inline-block;
 
+  padding: 0 0 0 30px;
 
+}
 
+.m-switch .mdc-switch-label code {
 
+  font-size: 16px;
 
+}
 
 
 
-/*form*/
 
-select {
 
+/*select*/
 
+.m-select {
 
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 
-  font-size: 14px; line-height: 17px;
 
+  font-size: 14px;
 
+  line-height: 17px;
 
   text-transform: uppercase;
 
+  letter-spacing: 0.2px;
 
   background-color: #ececec;
 
-  border: none; border-radius: 2px;
 
+  border: none;
 
+  border-radius: 2px;
 
   cursor: pointer;
 
-  width: 110px; padding: 9px 12px;
 
+  padding: 9px 12px;
 
+}
 
+
 
+#options .m-textfield {
 
+  font-size: 1rem;
 
+  line-height: 1.5rem;
 
+  height: auto;
 
+  margin: 0;
 
 }
 
-.mdl-js-textfield:nth-of-type(1) {
 
+
 
+
 
+/*add new origin*/
 
+.m-add-new-origin .m-textfield {
 
   width: 400px;
 
-  position: relative; top: 5px;
 
-  padding: 0;
 
-  margin: 0 10px;
 
+  margin: 0 10px !important;
 
 }
 
-.mdl-textfield:nth-of-type(1) .mdl-textfield__label:after { bottom: 0; }
 
-.mdl-textfield + button + button { float: right; }
 
+.m-add-new-origin button:nth-of-type(2) { float: right; }
 
+.m-add-new-origin .m-select { width: 110px; }
 
+
 
 
-/*table*/
 
-.mdl-data-table {
 
-  width: 100%;
 
+/*allowed-origins*/
 
+.m-list {
 
+  list-style: none;
 
+  background: #fff;
 
+  padding: 0;
 
+  margin: 0;
 
 }
 
-.mdl-data-table tr {
 
+.m-list li {
 
   transition-duration: .28s;
 
   transition-timing-function: cubic-bezier(.4,0,.2,1);
 
-  transition-property: background-color;
 
+  transition-property: background-color box-shadow;
 
+  height: auto;
 
+  min-height: 36px;
 
+  border-bottom: 1px solid #ececec;
 
+  padding: 10px 20px;
 
 }
 
-.mdl-data-table tr:hover { background: #eee; }
 
-.mdl-data-table td { font-size: 16px; line-height: 17px; }
 
-.mdl-data-table td:nth-of-type(1) { width: 5%; }
 
-.mdl-data-table td:nth-of-type(2) { width: 20%; }
 
-.mdl-data-table td:nth-of-type(3) { width: 70%; }
 
-.mdl-data-table td:nth-of-type(4) { width: 5%; }
 
-.mdl-data-table i { font-size: 10px; }
 
-.mdl-data-table .mdl-textfield {
 
-  width: 100%; color: #a9a9a9;
 
-  position: relative; top: -1px;
 
-  padding: 0;
 
+.m-list li:last-child {
 
+  border: 0;
 
+}
 
+.m-list li:hover {
 
+  background: #eee;
 
+}
 
+.m-list li:after { content: ''; display: block; clear: both; }
 
+.m-list li > * { display: inline-block; }
 
+.m-list li > *:nth-child(1) { width: 5%; }
 
+.m-list li > *:nth-child(2) { width: 30%; }
 
+.m-list li > *:nth-child(3) { width: 55%; }
 
+.m-list li > *:nth-child(4) { width: 10%; text-align: right; }
 
+.m-list li span {
 
+  font-size: 1rem;
 
+  line-height: 36px;
 
+}
 
+.m-list .m-textfield input { color: #a9a9a9; }
 
+.m-list .m-textfield input:focus { color: #1b1b1b; }
 
+.m-list button {
 
+  transition-duration: .28s;
 
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
 
+  transition-property: background-color;
 
+  min-width: auto;
 
+  padding: 0 9px;
 
+  border-radius: 50%;
 
 }
 
-.mdl-data-table .mdl-textfield.is-focused { color: #272727; }
 
-.mdl-data-table .mdl-textfield__label:after { bottom: 0; }
 
+.m-list button:hover { background: #cacaca; }
 
+
 
 
 /*bootstrap callout*/
 
 .bs-callout {
 
-  padding: 20px;
 
-  margin: 20px 0 0;
 
   border: 1px solid #eee;
 
   border-left-width: 5px;
 
   border-left-color: #607d8b;
 
   border-radius: 3px;
 
   background: #fcfcfc;
 
+  padding: 20px;
 
+  margin: 0 0 30px 0;
 
 }
 
 .bs-callout h4 {
 
-  margin-top: 0;
 
+  margin: 0 0 16px 0;
 
 }
 
 .bs-callout img {
 
-  display: block; margin-bottom: 20px;
 
-}
 
-.bs-callout .mdl-switch {
 
+  display: block;
 
   margin-bottom: 20px;
 
 }
 
+.bs-callout .m-switch {
 
+  margin: 0 0 20px 0;
 
+}
 
+
 
+
 
+/*custom scrollbars in WebKit*/
 
+::-webkit-scrollbar {
 
+  width: 13px;
 
+  height: 13px;
 
+}
 
+::-webkit-scrollbar-track-piece {
 
+  background: #ececec;
 
+  -webkit-border-radius: 2px;
 
+}
 
+::-webkit-scrollbar-thumb {
 
+  height: 50px;
 
+  background: #afbdc3;
 
+  -webkit-border-radius: 8px;
 
+  outline: 2px solid #333;
 
+  outline-offset: -2px;
 
+  border: 2px solid #ececec;
 
+}
 
+::-webkit-scrollbar-thumb:hover {
 
+  height: 50px;
 
+  background-color: #607d8b;
 
+  -webkit-border-radius: 8px;
 
+}

+ 85 - 25
css/popup.css
View File 

@@ -1,63 +1,123 @@
 
 
-html, body { height: auto; min-height: auto; }
 
+html, body {
 
+  font-family: 'Helvetica', 'Arial', sans-serif;
 
+  height: auto;
 
+  min-height: auto;
 
+  padding: 0;
 
+  margin: 0;
 
+}
 
 
-#popup { width: 350px; padding: 20px; -webkit-user-select: none; }
 
+#popup {
 
+  letter-spacing: 0.2px;
 
+  width: 350px;
 
+  padding: 20px;
 
+  -webkit-user-select: none;
 
+}
 
 #popup:after { content: ''; display: block; clear: both; }
 
 
-#popup,
 
-#popup .mdl-button,
 
-select { letter-spacing: 0.2px; }
 
 
-select {
 
+/*button*/
 
+.m-button {
 
+  background-color: #ececec !important;
 
+  color: #000 !important;
 
+}
 
+.m-button:before {
 
+  background-color: rgba(96, 125, 139, 0.16) !important;
 
+}
 
+.m-button:after {
 
+  background-color: rgba(96, 125, 139, 0.16) !important;
 
+}
 
+
 
+
 
+/*select*/
 
+.m-select {
 
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 
-  font-size: 14px; line-height: 17px;
 
+  font-size: 14px;
 
+  line-height: 17px;
 
   text-transform: uppercase;
 
+  letter-spacing: 0.2px;
 
   background-color: #ececec;
 
-  border: none; border-radius: 2px;
 
+  border: none;
 
+  border-radius: 2px;
 
   cursor: pointer;
 
-  width: 350px; padding: 9px 12px;
 
+  padding: 9px 12px;
 
+}
 
+
 
+#popup .m-select {
 
+  width: 350px;
 
   margin: 20px 0 0 0;
 
 }
 
 
+
 
+/*switch*/
 
+.m-switch {
 
+  cursor: pointer;
 
+  margin: 7px 0;
 
+}
 
+.m-switch:first-child {
 
+  margin-top: 12px;
 
+}
 
+.m-switch:last-child {
 
+  margin-bottom: 10px;
 
+}
 
+.m-switch .mdc-switch__background {
 
+  display: inline-block;
 
+  bottom: 5px;
 
+  left: 15px;
 
+}
 
+.m-switch .mdc-switch-label {
 
+  font-size: 1rem;
 
+  line-height: 1.5rem;
 
+  white-space: nowrap;
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  display: inline-block;
 
+  padding: 0 0 0 30px;
 
+}
 
+
 
+#popup .m-switch .mdc-switch-label { width: 276px; }
 
+
 
+
 
 /*defaults button*/
 
-button:nth-child(2) { float: right; }
 
+#popup button:nth-child(2) { float: right; }
 
 /*advanced options button*/
 
-button:nth-child(2n+4) { float: right; margin-top: 20px; }
 
+#popup button:nth-child(2n+3) { float: right; margin-top: 20px; }
 
+
 
 
 /*tabs*/
 
-.mdl-tabs__tab-bar {
 
+.m-tabs {
 
   border: 0;
 
   height: 36px;
 
   margin: 20px 0 0 0;
 
 }
 
-/*tab buttons*/
 
-.mdl-tabs__tab {
 
+.m-tabs a {
 
   line-height: 36px;
 
   border-bottom: 1px solid #e0e0e0;
 
   height: 36px;
 
+  padding: 0 24px;
 
 }
 
-/*switch label*/
 
-.mdl-switch__label {
 
-  white-space: nowrap;
 
-  overflow: hidden;
 
-  text-overflow: ellipsis;
 
-  display: inline-block;
 
-  width: 261px;
 
-}
 
+.m-tabs .mdc-tab-bar__indicator { background: #607d8b; }
 
+
 
+.m-panels {}
 
+.m-panel { display: none; }
 
+.m-panel.is-active { display: block; }
 
+
 
+
 
 /*options scroll*/
 
 .scroll {
 
-  margin-top: 15px;
 
+  margin-top: 10px;
 
   overflow-y: auto;
 
   overflow-x: hidden;
 
 }
 
 .scroll.max {
 
   height: 324px;
 
 }
 
-.scroll .mdl-grid { padding: 0 0 8px 0; }
 
+
 
 
 /*custom scrollbars in WebKit*/
 
 ::-webkit-scrollbar {
 
   width: 10px;
 
+  height: 10px;
 
 }
 
 ::-webkit-scrollbar-track-piece {
 
   background: #ececec;
 
@@ -65,7 +125,7 @@ button:nth-child(2n+4) { float: right; margin-top: 20px; }
 
 }
 
 ::-webkit-scrollbar-thumb {
 
   height: 50px;
 
-  background: rgba(96,125,139,.5);
 
+  background: #afbdc3;
 
   -webkit-border-radius: 8px;
 
   outline: 2px solid #333;
 
   outline-offset: -2px;