release: v2.3.0

CHANGELOG.md

@@ -1,3 +1,14 @@
+## v2.3.0 (28 Apr 2020)
+
+* feat: refresh notification
+* fix(console): safari bounce effect
+* fix(elements): highlight
+
+## v2.2.2 (17 Apr 2020)
+
+* fix(console): extra info from
+* chore: update icons
+
 ## v2.2.1 (20 Mar 2020)
 
 * fix: redundant evaluated style

build/webpack.base.js

@@ -17,7 +17,7 @@ const postcssLoader = {
     plugins: [
       prefixer({
         prefix: '_',
-        ignore: [/luna-object-viewer/]
+        ignore: [/luna-object-viewer/, /luna-notification/]
       }),
       autoprefixer,
       clean()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "scripts": {
@@ -61,6 +61,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "licia": "^1.19.0",
+    "luna-notification": "^0.1.2",
     "luna-object-viewer": "^0.1.1",
     "node-sass": "^4.13.1",
     "postcss-clean": "^1.1.0",

src/Console/Console.js

@@ -263,7 +263,7 @@ export default class Console extends Tool {
       overrideConsole: true,
       displayExtraInfo: false,
       displayUnenumerable: true,
-      displayGetterVal: false,
+      displayGetterVal: true,
       lazyEvaluation: true,
       displayIfErr: false,
       maxLogNum: 'infinite'

src/Console/Log.hbs

@@ -1,10 +1,10 @@
-{{#if displayHeader}}
+{{#if headers}}
   <div {{{class 'header'}}}>
     {{#repeat group.indentLevel}}
       <div {{{class 'nesting-level'}}}></div>
     {{/repeat}}
     <div {{{class 'time-container'}}}>
-      <span>{{time}}</span> <span>{{from}}</span>
+      <span>{{headers.time}}</span> <span>{{headers.from}}</span>
     </div>
   </div>
 {{/if}}

src/Console/Log.js

@@ -8,7 +8,6 @@ import {
   isPrimitive,
   wrap,
   defaults,
-  dateFormat,
   getObjType,
   isEl,
   toStr,
@@ -48,7 +47,7 @@ export default class Log extends Emitter {
     id,
     group = {},
     targetGroup = {},
-    displayHeader = false,
+    headers,
     ignoreFilter = false
   }) {
     super()
@@ -59,7 +58,7 @@ export default class Log extends Emitter {
     this.args = args
     this.count = 1
     this.id = id
-    this.displayHeader = displayHeader
+    this.headers = headers
     this.ignoreFilter = ignoreFilter
     this.collapsed = false
     this.el = document.createElement('li')
@@ -68,11 +67,6 @@ export default class Log extends Emitter {
     this.width = 0
     this._$el = $(this.el)
 
-    if (displayHeader) {
-      this.time = getCurTime()
-      this.from = getFrom()
-    }
-
     this._formatMsg()
 
     if (this.group) {
@@ -242,7 +236,7 @@ export default class Log extends Emitter {
   }
   _formatMsg() {
     let { args } = this
-    const { type, id, displayHeader, time, from, group } = this
+    const { type, id, headers, group } = this
 
     // Don't change original args for lazy evaluation.
     args = clone(args)
@@ -320,7 +314,7 @@ export default class Log extends Emitter {
         return `<a href="${url}" target="_blank">${url}</a>`
       })
     }
-    msg = render({ msg, type, icon, id, displayHeader, time, from, group })
+    msg = render({ msg, type, icon, id, headers, group })
 
     this._$el.addClass('eruda-log-container').html(msg)
     this._$content = this._$el.find('.eruda-log-content')
@@ -562,24 +556,6 @@ function formatEl(val) {
   )}</pre>`
 }
 
-function getFrom() {
-  const e = new Error()
-  let ret = ''
-  const lines = e.stack ? e.stack.split('\n') : ''
-
-  for (let i = 0, len = lines.length; i < len; i++) {
-    ret = lines[i]
-    if (ret.indexOf('winConsole') > -1 && i < len - 1) {
-      ret = lines[i + 1]
-      break
-    }
-  }
-
-  return ret
-}
-
-const getCurTime = () => dateFormat('HH:MM:ss')
-
 const tpl = require('./Log.hbs')
 const render = data => tpl(data)
 

src/Console/Logger.js

@@ -22,7 +22,8 @@ import {
   raf,
   xpath,
   isHidden,
-  lowerCase
+  lowerCase,
+  dateFormat
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
@@ -300,16 +301,24 @@ export default class Logger extends Emitter {
     return this
   }
   insert(type, args) {
+    let headers
+    if (this._displayHeader) {
+      headers = {
+        time: getCurTime(),
+        from: getFrom()
+      }
+    }
+
     this._asyncRender
-      ? this.insertAsync(type, args)
-      : this.insertSync(type, args)
+      ? this.insertAsync(type, args, headers)
+      : this.insertSync(type, args, headers)
   }
-  insertAsync(type, args) {
-    this._asyncList.push([type, args])
+  insertAsync(type, args, headers) {
+    this._asyncList.push([type, args, headers])
 
     this._handleAsyncList()
   }
-  insertSync(type, args) {
+  insertSync(type, args, headers) {
     const logs = this._logs
     const groupStack = this._groupStack
 
@@ -327,7 +336,7 @@ export default class Logger extends Emitter {
     }
     extend(options, {
       id: ++id,
-      displayHeader: this._displayHeader
+      headers
     })
 
     if (options.type === 'group' || options.type === 'groupCollapsed') {
@@ -494,8 +503,8 @@ export default class Logger extends Emitter {
         done = true
       }
       for (let i = 0; i < num; i++) {
-        const [type, args] = asyncList.shift()
-        this.insertSync(type, args)
+        const [type, args, headers] = asyncList.shift()
+        this.insertSync(type, args, headers)
       }
       if (!done) raf(() => this._handleAsyncList(timeout))
     }, timeout)
@@ -613,6 +622,10 @@ export default class Logger extends Emitter {
       }
 
       const { scrollHeight, offsetHeight, scrollTop } = this._container
+      // safari bounce effect
+      if (scrollTop < 0) return
+      if (offsetHeight + scrollTop > scrollHeight) return
+
       let isAtBottom = false
       if (scrollHeight === offsetHeight) {
         isAtBottom = true
@@ -700,3 +713,21 @@ export default class Logger extends Emitter {
     this._ignoreScroll = true
   }
 }
+
+const getCurTime = () => dateFormat('HH:MM:ss ')
+
+function getFrom() {
+  const e = new Error()
+  let ret = ''
+  const lines = e.stack ? e.stack.split('\n') : ''
+
+  for (let i = 0, len = lines.length; i < len; i++) {
+    ret = lines[i]
+    if (ret.indexOf('winConsole') > -1 && i < len - 1) {
+      ret = lines[i + 1]
+      break
+    }
+  }
+
+  return ret
+}

src/DevTools/DevTools.js

@@ -15,6 +15,7 @@ import {
   isDarkMode
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
+import LunaNotification from 'luna-notification'
 
 export default class DevTools extends Emitter {
   constructor($container) {
@@ -33,6 +34,7 @@ export default class DevTools extends Emitter {
 
     this._appendTpl()
     this._initNavBar()
+    this._initNotification()
     this._bindEvent()
   }
   show() {
@@ -176,7 +178,9 @@ export default class DevTools extends Emitter {
       })
       .separator()
   }
-
+  notify(content, options) {
+    this._notification.notify(content, options)
+  }
   destroy() {
     evalCss.remove(this._style)
     this.removeAll()
@@ -206,6 +210,14 @@ export default class DevTools extends Emitter {
     this._navBar = new NavBar(this._$el.find('.eruda-nav-bar-container'))
     this._navBar.on('showTool', name => this.showTool(name))
   }
+  _initNotification() {
+    this._notification = new LunaNotification(this._$el.get(0), {
+      position: {
+        x: 'center',
+        y: 'top'
+      }
+    })
+  }
   _bindEvent() {
     const $navBar = this._$el.find('.eruda-nav-bar')
     const startListener = e => {

src/Elements/Elements.js

@@ -216,7 +216,10 @@ export default class Elements extends Tool {
     const $bottomBar = this._$el.find('.eruda-bottom-bar')
 
     $bottomBar
-      .on('click', '.eruda-refresh', () => this._render())
+      .on('click', '.eruda-refresh', () => {
+        this._render()
+        container.notify('Refreshed')
+      })
       .on('click', '.eruda-highlight', () => this._toggleHighlight())
       .on('click', '.eruda-select', () => this._toggleSelect())
       .on('click', '.eruda-reset', () => this.set(this._htmlEl))

src/Elements/Highlight.js

@@ -46,38 +46,63 @@ export default class Highlight {
     const mt = getNumStyle('margin-top')
     const mb = getNumStyle('margin-bottom')
 
-    this._$margin.css({
-      left: -ml,
-      top: -mt,
-      width: width + ml + mr,
-      height: height + mt + mb
-    })
-
     const bl = getNumStyle('border-left-width')
     const br = getNumStyle('border-right-width')
     const bt = getNumStyle('border-top-width')
     const bb = getNumStyle('border-bottom-width')
 
-    const bw = width - bl - br
-    const bh = height - bt - bb
-
-    this._$padding.css({
-      left: bl,
-      top: bt,
-      width: bw,
-      height: bh
-    })
-
     const pl = getNumStyle('padding-left')
     const pr = getNumStyle('padding-right')
     const pt = getNumStyle('padding-top')
     const pb = getNumStyle('padding-bottom')
 
+    const pw = width - bl - br
+    const ph = height - bt - bb
+
+    const marginColor = 'rgba(246, 178, 107, 0.66)'
+    const borderColor = 'rgba(255, 229, 153, 0.66)'
+    const paddingColor = 'rgba(147, 196, 125, 0.55)'
+    const contentColor = 'rgba(111, 168, 220, 0.66)'
+
+    this._$margin.css({
+      left: -ml,
+      top: -mt,
+      width: width + ml + mr,
+      height: height + mt + mb,
+      borderTop: `${mt}px solid ${marginColor}`,
+      borderLeft: `${ml}px solid ${marginColor}`,
+      borderRight: `${mr}px solid ${marginColor}`,
+      borderBottom: `${mb}px solid ${marginColor}`
+    })
+
+    this._$border.css({
+      left: 0,
+      top: 0,
+      width,
+      height,
+      borderTop: `${bt}px solid ${borderColor}`,
+      borderLeft: `${bl}px solid ${borderColor}`,
+      borderRight: `${br}px solid ${borderColor}`,
+      borderBottom: `${bb}px solid ${borderColor}`
+    })
+
+    this._$padding.css({
+      left: bl,
+      top: bt,
+      width: pw,
+      height: ph,
+      borderTop: `${pt}px solid ${paddingColor}`,
+      borderLeft: `${pl}px solid ${paddingColor}`,
+      borderRight: `${pr}px solid ${paddingColor}`,
+      borderBottom: `${pb}px solid ${paddingColor}`
+    })
+
     this._$content.css({
       left: bl + pl,
       top: bl + pt,
-      width: bw - pl - pr,
-      height: bh - pt - pb
+      width: pw - pl - pr,
+      height: ph - pt - pb,
+      background: contentColor
     })
 
     this._$size
@@ -104,6 +129,7 @@ export default class Highlight {
     this._$margin = $el.find('.eruda-margin')
     this._$padding = $el.find('.eruda-padding')
     this._$content = $el.find('.eruda-content')
+    this._$border = $el.find('.eruda-border')
     this._$size = $el.find('.eruda-size')
   }
 }

src/Elements/Highlight.scss

@@ -11,7 +11,6 @@
     pointer-events: none !important;
   }
   .indicator {
-    opacity: 0.5;
     position: absolute;
     left: 0;
     right: 0;
@@ -20,7 +19,6 @@
   }
   .margin {
     position: absolute;
-    background: #e8925b;
     z-index: 100;
   }
   .border {
@@ -29,17 +27,14 @@
     right: 0;
     width: 100%;
     height: 100%;
-    background: #ffcd7c;
     z-index: 200;
   }
   .padding {
     position: absolute;
-    background: #86af76;
     z-index: 300;
   }
   .content {
     position: absolute;
-    background: #5e88c1;
     z-index: 400;
   }
   .size {

src/Resources/Resources.js

@@ -220,25 +220,34 @@ export default class Resources extends Tool {
     const container = this._container
 
     $el
-      .on('click', '.eruda-refresh-local-storage', () =>
+      .on('click', '.eruda-refresh-local-storage', () => {
+        container.notify('Refreshed')
         this.refreshLocalStorage()._render()
-      )
-      .on('click', '.eruda-refresh-session-storage', () =>
+      })
+      .on('click', '.eruda-refresh-session-storage', () => {
+        container.notify('Refreshed')
         this.refreshSessionStorage()._render()
-      )
-      .on('click', '.eruda-refresh-cookie', () =>
+      })
+      .on('click', '.eruda-refresh-cookie', () => {
+        container.notify('Refreshed')
         this.refreshCookie()._render()
-      )
-      .on('click', '.eruda-refresh-script', () =>
+      })
+      .on('click', '.eruda-refresh-script', () => {
+        container.notify('Refreshed')
         this.refreshScript()._render()
-      )
-      .on('click', '.eruda-refresh-stylesheet', () =>
+      })
+      .on('click', '.eruda-refresh-stylesheet', () => {
+        container.notify('Refreshed')
         this.refreshStylesheet()._render()
-      )
-      .on('click', '.eruda-refresh-iframe', () =>
+      })
+      .on('click', '.eruda-refresh-iframe', () => {
+        container.notify('Refreshed')
         this.refreshIframe()._render()
-      )
-      .on('click', '.eruda-refresh-image', () => this.refreshImage()._render())
+      })
+      .on('click', '.eruda-refresh-image', () => {
+        container.notify('Refreshed')
+        this.refreshImage()._render()
+      })
       .on('click', '.eruda-search', function() {
         const $this = $(this)
         const type = $this.data('type')

src/eruda.js

@@ -199,6 +199,7 @@ export default {
 
     evalCss(
       require('luna-object-viewer/luna-object-viewer.css') +
+      require('luna-notification/luna-notification.css') + 
       require('./style/style.scss') +
         require('./style/reset.scss') +
         require('./style/icon.css')

src/style/icon.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'eruda-icon';
-  src: url('data:application/x-font-woff;charset=utf-8;base64,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')
+  src: url('data:application/x-font-woff;charset=utf-8;base64,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')
     format('woff');
 }
 

src/style/icon/clear.svg

@@ -1,4 +1,3 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M512 160c192 0 352 160 352 352S704 864 512 864 160 704 160 512 320 160 512 160M512 64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z" fill="#545D6B"></path>
-  <path d="M195.2 285.76L285.696 195.2l543.104 543.04-90.56 90.56z" fill="#545D6B"></path>
+<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path xmlns="http://www.w3.org/2000/svg" d="M15.375383528127117,23.72153857439756 c-5.150769256353378,0 -9.346153892576694,-4.1953846362233165 -9.346153892576694,-9.346153892576694 c0,-1.8276923167705545 0.5400000026822095,-3.5307692483067514 1.433076930195094,-4.9638461785018455 l12.876923140883447,12.876923140883447 c-1.433076930195094,0.9138461583852775 -3.136153861731291,1.433076930195094 -4.9638461785018455,1.433076930195094 m9.346153892576694,-9.346153892576694 c0,1.8276923167705545 -0.5400000026822095,3.5307692483067514 -1.433076930195094,4.9638461785018455 l-12.876923140883447,-12.876923140883447 c1.433076930195094,-0.9138461583852775 3.136153861731291,-1.433076930195094 4.9638461785018455,-1.433076930195094 c5.150769256353378,0 9.346153892576694,4.1953846362233165 9.346153892576694,9.346153892576694 M15.499998913361473,1 a13.500000067055225,13.500000067055225 0 1 0 0,27.00000013411045 a13.500000067055225,13.500000067055225 0 0 0 0,-27.00000013411045"/>
 </svg>

src/style/icon/delete.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M64 168V112c0-26.6 21.4-48 48-48h224l18.8-37.4c8-16.4 24.6-26.6 42.8-26.6h228.6c18.2 0 34.8 10.2 43 26.6L688 64h224c26.6 0 48 21.4 48 48v56c0 13.2-10.8 24-24 24H88C74.8 192 64 181.2 64 168z m832 112v648c0 53-43 96-96 96H224c-53 0-96-43-96-96V280c0-13.2 10.8-24 24-24h720c13.2 0 24 10.8 24 24z m-544 136c0-17.6-14.4-32-32-32s-32 14.4-32 32v448c0 17.6 14.4 32 32 32s32-14.4 32-32V416z m192 0c0-17.6-14.4-32-32-32s-32 14.4-32 32v448c0 17.6 14.4 32 32 32s32-14.4 32-32V416z m192 0c0-17.6-14.4-32-32-32s-32 14.4-32 32v448c0 17.6 14.4 32 32 32s32-14.4 32-32V416z" fill=""></path>
+<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path xmlns="http://www.w3.org/2000/svg" d="M28.306125909090042,5.426530727744103 L24.77755457758904,1.8979593962430972 L15.040820151567459,11.634693822264673 L5.304085725545878,1.8979593962430972 L1.775514394044876,5.426530727744103 L11.512248820066457,15.163265153765678 L1.775514394044876,24.899999579787256 L5.304085725545878,28.42857091128826 L15.040820151567459,18.691836485266684 l9.736734426021576,9.736734426021576 l3.5285713315010074,-3.5285713315010074 L18.56939148306846,15.163265153765678 z"/>
 </svg>

src/style/icon/eye.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 1414 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M754.688 460.8q16.384 31.744 16.384 70.656 0 33.792-12.8 62.976t-34.304 51.2-50.688 34.816-62.976 12.8-63.488-12.8-51.2-34.816-34.304-51.2-12.8-62.976 12.8-62.976 34.304-51.2 51.2-34.816 63.488-12.8q35.84 0 66.048 14.336t52.736 37.888q-14.336-9.216-31.744-9.216-24.576 0-41.984 17.408t-17.408 41.984q0 23.552 17.408 40.96t41.984 17.408 41.472-17.408 16.896-40.96q0-8.192-1.024-11.264zM608.256 179.2q83.968 0 154.624 26.112t130.048 65.024 108.032 83.968 88.064 83.968 70.656 65.024 56.832 26.112q-25.6 0-56.832 26.112t-71.168 66.048-88.064 85.504-107.52 85.504-130.048 66.048-154.624 26.112-155.648-26.112-132.608-66.048-110.592-85.504-89.088-85.504-69.632-66.048-50.688-26.112q20.48 0 50.688-26.112t69.632-65.024 89.088-83.968 110.592-83.968 132.608-65.024 155.648-26.112zM608.256 756.736q47.104 0 88.064-17.408t71.68-48.128 48.128-71.68 17.408-88.064q0-46.08-17.408-87.04t-48.128-71.68-71.68-48.64-88.064-17.92q-46.08 0-87.04 17.92t-71.68 48.64-48.64 71.68-17.92 87.04q0 47.104 17.92 88.064t48.64 71.68 71.68 48.128 87.04 17.408z"></path>
+<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path xmlns="http://www.w3.org/2000/svg" d="M14.866177558898926,4.999999999999998 c-6.302177700519562,0 -11.68572113776207,3.9223949769735333 -13.866177558898926,9.454999822974205 c2.180456421136856,5.534338118195534 7.563999858379364,9.454999822974205 13.866177558898926,9.454999822974205 s11.68572113776207,-3.9206617047786714 13.866177558898926,-9.454999822974205 c-2.180456421136856,-5.532604846000671 -7.563999858379364,-9.453266550779341 -13.866177558898926,-9.453266550779341 zm0,15.75891079568863 a6.305644244909287,6.305644244909287 0 0 1 -6.302177700519562,-6.303910972714424 A6.305644244909287,6.305644244909287 0 0 1 14.866177558898926,8.154555394649503 a6.305644244909287,6.305644244909287 0 0 1 6.302177700519562,6.302177700519562 A6.305644244909287,6.305644244909287 0 0 1 14.866177558898926,20.758910795688628 zm0,-10.084177629709243 a3.7768001126050947,3.7768001126050947 0 0 0 -3.781999929189682,3.7802666569948196 c0,2.0937928113937376 1.6899403899908068,3.781999929189682 3.781999929189682,3.781999929189682 a3.7768001126050947,3.7768001126050947 0 0 0 3.781999929189682,-3.781999929189682 A3.7768001126050947,3.7768001126050947 0 0 0 14.866177558898926,10.674733165979383 z"/>
 </svg>

src/style/icon/search.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M992.256992 871.396769l-242.55242-206.297553c-25.087216-22.559295-51.902378-32.926971-73.565701-31.935002 57.246211-67.069904 91.83713-154.075185 91.83713-249.176213 0-212.057373-171.930627-383.988-383.988-383.988s-383.988 171.930627-383.988 383.988 171.930627 383.988 383.988 383.988c95.101028 0 182.106309-34.590919 249.176213-91.83713-0.991969 21.663323 9.375707 48.478485 31.935002 73.565701l206.297553 242.55242c35.326896 39.230774 93.021093 42.55867 128.219993 7.35977s31.903003-92.893097-7.35977-128.219993zM384.019999 640.012c-141.371582 0-255.992-114.620418-255.992-255.992s114.620418-255.992 255.992-255.992 255.992 114.620418 255.992 255.992-114.620418 255.992-255.992 255.992z"></path>
+<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.29800502950607,18.45285973825574 h-1.2817622857724371 l-0.4548188755966737,-0.4382800073931615 a10.508383384808539,10.508383384808539 0 0 0 2.5490530618667977,-6.867765021509734 a10.555932630893647,10.555932630893647 0 1 0 -10.555932630893647,10.553865272368208 a10.508383384808539,10.508383384808539 0 0 0 6.869832380035174,-2.5490530618667977 l0.4382800073931615,0.4548188755966737 v1.2817622857724371 l8.11851692940058,8.104045419722503 l2.4188094747641142,-2.4188094747641142 zm-9.743460730395958,0 a7.2977755948011325,7.2977755948011325 0 0 1 -7.306045028902888,-7.306045028902888 a7.2977755948011325,7.2977755948011325 0 0 1 7.306045028902888,-7.308112387428329 a7.2977755948011325,7.2977755948011325 0 0 1 7.308112387428329,7.308112387428329 a7.2977755948011325,7.2977755948011325 0 0 1 -7.308112387428329,7.306045028902888 z"/>
 </svg>

src/style/icon/select.svg

@@ -1,4 +1,3 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M888 64H136c-39.8 0-72 32.2-72 72v752c0 39.8 32.2 72 72 72h504c19.9 0 36-16.1 36-36s-16.1-36-36-36H136V136h752v504c0 19.9 16.1 36 36 36s36-16.1 36-36V136c0-39.8-32.2-72-72-72z" fill=""></path>
-  <path d="M633.5 582.5l103.8-103.8c11.3-11.3 3.3-30.7-12.7-30.7H484c-19.9 0-36 16.1-36 36v240.5c0 16 19.4 24.1 30.7 12.7l103.8-103.8 188 188c7 7 16.2 10.5 25.5 10.5s18.4-3.5 25.5-10.5c14.1-14.1 14.1-36.9 0-50.9l-188-188z" fill=""></path>
+<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path xmlns="http://www.w3.org/2000/svg" d="M9.999999719899847,24.999998986304263 h-4.9999998249374045 c-1.9999999299749618,0 -2.9999998949624427,-0.9999999649874811 -2.9999998949624427,-2.9999998949624427 v-17.999999369774656 c0,-1.9999999299749618 0.9999999649874811,-2.9999998949624427 2.9999998949624427,-2.9999998949624427 h17.999999369774656 c2.9999998949624427,0 2.9999998949624427,2.935999897203244 2.9999998949624427,2.9999998949624427 v4.9999998249374045 h-1.9999999299749618 v-5.999999789924885 h-19.999999299749618 v19.999999299749618 h5.999999789924885 zm17.999999369774656,-9.999999649874809 l-5.999999789924885,3.9999998599499236 l5.999999789924885,5.999999789924885 l-1.9999999299749618,1.9999999299749618 l-5.999999789924885,-5.999999789924885 l-3.9999998599499236,5.999999789924885 l-3.9999998599499236,-15.999999439799694 z"/>
 </svg>

src/style/luna.scss

@@ -35,3 +35,26 @@
   border-top-color: transparent;
   border-left-color: var(--foreground);
 }
+
+.luna-notification {
+  pointer-events: none !important;
+  padding: $padding;
+  z-index: 1000;
+}
+
+.luna-notification-item {
+  z-index: 500;
+  color: var(--foreground);
+  background: var(--background);
+  box-shadow: none;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+}
+
+.luna-notification-upper {
+  margin-bottom: 10px;
+}
+
+.luna-notification-lower {
+  margin-top: 10px;
+}

src/style/reset.scss

@@ -1,7 +1,4 @@
 .container {
-  html,
-  body,
-  div,
   span,
   applet,
   object,