copy_tuner_client 1.5.0 → 2.1.0

data/src/copytuner-bar.ts

@@ -0,0 +1,153 @@
+import { BAR_STYLES } from './styles'
+import { debounce } from './util'
+
+type OpenCallback = (key: string) => void
+
+type InitOptions = {
+  url: string
+  data: Record<string, string>
+  keysSkipped: boolean
+  onOpen: OpenCallback
+}
+
+// 画面下部のツールバー。CopyTuner / Sync ボタン、ページ内翻訳の検索・ログメニューを Shadow DOM 内に描画する。
+export class CopytunerBar extends HTMLElement {
+  #onOpen: OpenCallback = () => {}
+  #searchBox!: HTMLInputElement
+  #logMenu!: HTMLDivElement
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  // custom element の constructor 内では属性・プロパティを変更できない（createElement が弾く）ため、
+  // hidden の初期化は DOM 挿入後に呼ばれる connectedCallback で行う。
+  connectedCallback() {
+    this.hidden = true
+  }
+
+  // url/data/keysSkipped/onOpen はオブジェクトや関数を含むため属性ではなくメソッドで受け渡す。
+  init({ url, data, keysSkipped, onOpen }: InitOptions) {
+    this.#onOpen = onOpen
+    const shadow = this.shadowRoot as ShadowRoot
+
+    const style = document.createElement('style')
+    style.textContent = BAR_STYLES
+    shadow.append(style)
+
+    // 元々 Rails から出力されていたマークアップに合わせたボタン群。
+    // url は設定値だが innerHTML に直接埋めず setAttribute で渡す（XSS 面で安全側に倒す）。
+    const copyTunerButton = this.makeButton('CopyTuner', url, '_blank')
+    const syncButton = this.makeButton('Sync', '/copytuner', '_blank')
+    const openLogButton = this.makeButton('Translations in this page', 'javascript:void(0)')
+
+    this.#searchBox = document.createElement('input')
+    this.#searchBox.type = 'text'
+    this.#searchBox.classList.add('search')
+    this.#searchBox.placeholder = 'search'
+
+    shadow.append(copyTunerButton, syncButton, openLogButton, this.#searchBox)
+
+    this.#logMenu = this.makeLogMenu(data)
+    shadow.append(this.#logMenu)
+
+    // 巨大DOM/Nokogiri例外でキー付与がスキップされた場合は、オーバーレイが使えないので
+    // ツールバー（Translations in this page）から編集する旨を案内する。
+    if (keysSkipped) {
+      this.appendSkippedNotice()
+    }
+
+    openLogButton.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.toggleLogMenu()
+    })
+    this.#searchBox.addEventListener('input', debounce(this.onSearch.bind(this), 250))
+  }
+
+  show() {
+    this.hidden = false
+    this.#searchBox.focus()
+  }
+
+  hide() {
+    this.hidden = true
+  }
+
+  private makeButton(label: string, href: string, target?: string): HTMLAnchorElement {
+    const button = document.createElement('a')
+    button.classList.add('button')
+    button.textContent = label
+    button.href = href
+    if (target) {
+      button.target = target
+    }
+    return button
+  }
+
+  private appendSkippedNotice() {
+    const notice = document.createElement('span')
+    notice.classList.add('notice')
+    notice.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.'
+    ;(this.shadowRoot as ShadowRoot).append(notice)
+  }
+
+  private showLogMenu() {
+    this.#logMenu.hidden = false
+  }
+
+  private toggleLogMenu() {
+    this.#logMenu.hidden = !this.#logMenu.hidden
+  }
+
+  private makeLogMenu(data: Record<string, string>): HTMLDivElement {
+    const div = document.createElement('div')
+    div.classList.add('log-menu')
+    div.hidden = true
+
+    const table = document.createElement('table')
+    const tbody = document.createElement('tbody')
+
+    for (const key of Object.keys(data).sort()) {
+      const value = data[key]
+      if (value === '') {
+        continue
+      }
+
+      const td1 = document.createElement('td')
+      td1.textContent = key
+      const td2 = document.createElement('td')
+      td2.textContent = value
+      const tr = document.createElement('tr')
+      tr.dataset.key = key
+
+      tr.addEventListener('click', ({ currentTarget }) => {
+        const row = currentTarget as HTMLTableRowElement
+        if (row.dataset.key) {
+          this.#onOpen(row.dataset.key)
+        }
+      })
+
+      tr.append(td1, td2)
+      tbody.append(tr)
+    }
+
+    table.append(tbody)
+    div.append(table)
+
+    return div
+  }
+
+  private onSearch() {
+    // debounce 経由で遅延実行されると Event.target は null 化されるため、検索ボックスを直接参照する
+    const keyword = this.#searchBox.value.trim()
+    this.showLogMenu()
+
+    const rows = [...this.#logMenu.querySelectorAll('tr')]
+    for (const row of rows) {
+      const isShow =
+        keyword === '' || [...row.querySelectorAll('td')].some((td) => (td.textContent ?? '').includes(keyword))
+      row.hidden = !isShow
+    }
+  }
+}

data/src/main.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import Copyray from './copyray'
+import { CopyrayOverlay } from './copyray-overlay'
+import { CopytunerBar } from './copytuner-bar'
 import { isMac } from './util'
 
 declare global {
@@ -7,44 +8,50 @@ declare global {
     CopyTuner: {
       url: string
       toggle?: () => void
-      // TODO: type
-      data: object
+      data: Record<string, string>
+      // 巨大DOM/Nokogiri例外で data-copyray-key 付与をスキップしたか。
+      // true のときオーバーレイは使えないのでツールバーから編集する旨を案内する。
+      keysSkipped?: boolean
     }
   }
 }
 
-import './copyray.css'
-
-// NOTE: 元々railsから出力されいてたマークアップに合わせてひとまず、、
-const appendCopyTunerBar = (url: string) => {
-  const bar = document.createElement('div')
-  bar.id = 'copy-tuner-bar'
-  bar.classList.add('copy-tuner-hidden')
-  bar.innerHTML = `
-    <a class="copy-tuner-bar-button" target="_blank" href="${url}">CopyTuner</a>
-    <a href="/copytuner" target="_blank" class="copy-tuner-bar-button">Sync</a>
-    <a href="javascript:void(0)" class="copy-tuner-bar-open-log copy-tuner-bar-button js-copy-tuner-bar-open-log">Translations in this page</a>
-    <input type="text" class="copy-tuner-bar__search js-copy-tuner-bar-search" placeholder="search">
-  `
-  document.body.append(bar)
-}
+customElements.define('copytuner-bar', CopytunerBar)
+customElements.define('copyray-overlay', CopyrayOverlay)
 
 const start = () => {
-  const { url, data } = window.CopyTuner
+  const { url, data, keysSkipped } = window.CopyTuner
+  const onOpen = (key: string) => window.open(`${url}/blurbs/${key}/edit`)
+
+  const bar = document.createElement('copytuner-bar') as CopytunerBar
+  document.body.append(bar)
+  bar.init({ url, data, keysSkipped: Boolean(keysSkipped), onOpen })
+
+  const overlay = document.createElement('copyray-overlay') as CopyrayOverlay
+  overlay.onOpen = onOpen
+  document.body.append(overlay)
+
+  const show = () => {
+    overlay.show()
+    bar.show()
+  }
+  const hide = () => {
+    overlay.hide()
+    bar.hide()
+  }
+  const toggle = () => (overlay.isShowing ? hide() : show())
 
-  appendCopyTunerBar(url)
-  const copyray = new Copyray(url, data)
-  window.CopyTuner.toggle = () => copyray.toggle()
+  overlay.onToggle = toggle
+  window.CopyTuner.toggle = toggle
 
   document.addEventListener('keydown', (event) => {
-    // @ts-expect-error TS2339
-    if (copyray.isShowing && ['Escape', 'Esc'].includes(event.key)) {
-      copyray.hide()
+    if (overlay.isShowing && ['Escape', 'Esc'].includes(event.key)) {
+      hide()
       return
     }
 
     if (((isMac && event.metaKey) || (!isMac && event.ctrlKey)) && event.shiftKey && event.key.toLowerCase() === 'k') {
-      copyray.toggle()
+      toggle()
     }
   })
 

data/src/{copyray.css → styles.ts}

@@ -1,116 +1,9 @@
-@charset "UTF-8";
-
-/* selector for element and children */
-#copyray-overlay,
-#copyray-overlay *,
-#copyray-overlay a:hover,
-#copyray-overlay a:visited,
-#copyray-overlay a:active {
-  background: none;
-  border: none;
-  bottom: auto;
-  clear: none;
-  cursor: default;
-  float: none;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: medium;
-  font-style: normal;
-  font-weight: normal;
-  height: auto;
-  left: auto;
-  letter-spacing: normal;
-  line-height: normal;
-  max-height: none;
-  max-width: none;
-  min-height: 0;
-  min-width: 0;
-  overflow: visible;
-  position: static;
-  right: auto;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  top: auto;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  z-index: auto;
-}
-
-#copyray-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background-image: radial-gradient(
-    ellipse farthest-corner at center,
-    rgba(0, 0, 0, 0.4) 10%,
-    rgba(0, 0, 0, 0.8) 100%
-  );
-  z-index: 9000;
-}
-
-.copyray-specimen {
-  position: absolute;
-  background: rgba(255, 255, 255, 0.15);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
-  outline-offset: -1px;
-  color: #666;
-  font-family: 'Helvetica Neue', sans-serif;
-  font-size: 13px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-}
-
-.copyray-specimen:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.copyray-specimen.Specimen {
-  outline: 1px solid rgba(255, 50, 50, 0.8);
-  background: rgba(255, 50, 50, 0.1);
-}
-
-.copyray-specimen.Specimen:hover {
-  background: rgba(255, 50, 50, 0.4);
-}
-
-.copyray-specimen-handle {
-  float: left;
-  background: #fff;
-  padding: 0 3px;
-  color: #333;
-  font-size: 10px;
-}
-
-.copyray-specimen-handle.Specimen {
-  background: rgba(255, 50, 50, 0.8);
-  color: #fff;
-}
-
-a.copyray-toggle-button {
-  display: block;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  color: white;
-  background: black;
-  padding: 12px 16px;
-  border-radius: 0 10px 0 0;
-  opacity: 0;
-  transition: opacity 0.6s ease-in-out;
-  z-index: 10000;
-  font-size: 12px;
-  cursor: pointer;
-}
+// 各 custom element の Shadow root に <style> として注入する CSS。
+// Shadow DOM のスタイル隔離が効くため、旧 copyray.css にあった #copyray-overlay * のグローバルリセットは不要。
 
-a.copyray-toggle-button:hover {
-  opacity: 1;
-}
-
-#copy-tuner-bar {
+// ツールバー（<copytuner-bar>）のスタイル。:host にバー本体のレイアウトを定義する。
+export const BAR_STYLES = `
+:host {
   position: fixed;
   left: 0;
   right: 0;
@@ -124,44 +17,45 @@ a.copyray-toggle-button:hover {
   z-index: 2147483647;
   box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.8);
   background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
 }
 
-#copy-tuner-bar-log-menu {
+.log-menu {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 40px;
   max-height: calc(100vh - 40px);
   background: #222;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
-  z-index: 2147483647;
   overflow-y: auto;
 }
 
-#copy-tuner-bar-log-menu tbody td {
+.log-menu[hidden] {
+  display: none;
+}
+
+.log-menu tbody td {
   padding: 2px 8px;
 }
 
-#copy-tuner-bar-log-menu tbody tr {
+.log-menu tbody tr {
   cursor: pointer;
 }
 
-#copy-tuner-bar-log-menu tbody tr:hover {
+.log-menu tbody tr:hover {
   background: #444;
 }
 
-#copy-tuner-bar-log-menu tbody a {
-  color: #fff;
-}
-
-#copy-tuner-bar-log-menu tbody a:hover,
-#copy-tuner-bar-log-menu tbody a:focus {
-  color: #fff;
-  text-decoration: underline;
+.log-menu tbody tr[hidden] {
+  display: none;
 }
 
-.copy-tuner-bar-button {
+.button {
   position: relative;
   display: inline-block;
   color: #fff;
@@ -178,18 +72,26 @@ a.copyray-toggle-button:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2),
     inset 0 0 2px rgba(255, 255, 255, 0.2);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+  text-decoration: none;
 }
 
-.copy-tuner-bar-button:hover,
-.copy-tuner-bar-button:focus {
+.button:hover,
+.button:focus {
   color: #fff;
   text-decoration: none;
   background-color: #555;
 }
 
-input[type='text'].copy-tuner-bar__search {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+.notice {
+  display: inline-block;
+  margin: 8px;
+  font-size: 13px;
+  line-height: 24px;
+  vertical-align: middle;
+  color: #ffd24d;
+}
+
+.search {
   appearance: none;
   border: none;
   border-radius: 2px;
@@ -204,13 +106,87 @@ input[type='text'].copy-tuner-bar__search {
   height: auto;
   font-size: 14px;
 }
+`
+
+// オーバーレイ（<copyray-overlay>）のスタイル。
+// :host はドキュメント原点基準（position: absolute; top/left: 0）にして、
+// 子の specimen を computeBoundingBox のページ座標で absolute 配置できるようにする。
+// 背景の暗転（.backdrop）だけは viewport 固定（fixed）にする。
+export const OVERLAY_STYLES = `
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
 
-.copy-tuner-hidden {
-  display: none !important;
+:host([hidden]) {
+  display: none;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(
+    ellipse farthest-corner at center,
+    rgba(0, 0, 0, 0.4) 10%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  z-index: 9000;
+}
+
+.specimen {
+  position: absolute;
+  background: rgba(255, 50, 50, 0.1);
+  outline: 1px solid rgba(255, 50, 50, 0.8);
+  outline-offset: -1px;
+  color: #666;
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+  z-index: 2000000000;
+}
+
+.specimen:hover {
+  cursor: pointer;
+  background: rgba(255, 50, 50, 0.4);
+}
+
+.specimen-handle {
+  float: left;
+  margin: 0 2px 2px 0;
+  background: rgba(255, 50, 50, 0.8);
+  padding: 0 3px;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.toggle-button {
+  display: block;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  color: white;
+  background: black;
+  padding: 12px 16px;
+  border-radius: 0 10px 0 0;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out;
+  z-index: 10000;
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.toggle-button:hover {
+  opacity: 1;
 }
 
 @media screen and (max-width: 480px) {
-  .hidden-on-mobile {
-    display: none !important;
+  .toggle-button {
+    display: none;
   }
 }
+`

data/src/util.ts

@@ -35,4 +35,12 @@ const computeBoundingBox = (element) => {
   }
 }
 
-export { isMac, isVisible, getOffset, computeBoundingBox }
+const debounce = <A extends unknown[]>(fn: (...args: A) => void, wait: number) => {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return (...args: A) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), wait)
+  }
+}
+
+export { computeBoundingBox, debounce, getOffset, isMac, isVisible }

data/tsconfig.json

@@ -3,11 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "moduleResolution": "Node",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
     "strict": true,
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -17,10 +15,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "client",
-    "src",
-  ]
+  "include": ["src"]
 }

data/vite.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
     rollupOptions: {
       output: {
         entryFileNames: `javascripts/copytuner.js`,
-        assetFileNames: `stylesheets/copytuner.[ext]`,
       },
     },
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: copy_tuner_client
 version: !ruby/object:Gem::Version
-  version: 1.5.0
+  version: 2.1.0
 platform: ruby
 authors:
 - SonicGarden
@@ -183,7 +183,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".babelrc"
-- ".eslintrc.js"
 - ".gitattributes"
 - ".github/dependabot.yml"
 - ".github/workflows/rspec.yml"
@@ -198,8 +197,9 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- UPGRADING.md
 - app/assets/javascripts/copytuner.js
-- app/assets/stylesheets/copytuner.css
+- biome.json
 - copy_tuner_client.gemspec
 - gemfiles/8.0.gemfile
 - gemfiles/8.1.gemfile
@@ -210,6 +210,8 @@ files:
 - lib/copy_tuner_client/client.rb
 - lib/copy_tuner_client/configuration.rb
 - lib/copy_tuner_client/copyray.rb
+- lib/copy_tuner_client/copyray/marker.rb
+- lib/copy_tuner_client/copyray/rewriter.rb
 - lib/copy_tuner_client/copyray_middleware.rb
 - lib/copy_tuner_client/dotted_hash.rb
 - lib/copy_tuner_client/engine.rb
@@ -227,7 +229,9 @@ files:
 - lib/copy_tuner_client/translation_log.rb
 - lib/copy_tuner_client/version.rb
 - lib/tasks/copy_tuner_client_tasks.rake
+- mise.toml
 - package.json
+- pnpm-lock.yaml
 - skills/copy-tuner-to-locales-cleanup/SKILL.md
 - skills/copy-tuner-to-locales-cleanup/references/example-touchpoints.md
 - skills/copy-tuner-to-locales-cleanup/references/verification-final.md
@@ -237,10 +241,15 @@ files:
 - skills/copy-tuner-to-locales-migrate-prefix/references/local-first-regexp.md
 - skills/copy-tuner-to-locales-migrate-prefix/references/verification-per-prefix.md
 - skills/copy-tuner-to-locales-migrate-prefix/scripts/migrate_prefix.rb
+- skills/copy-tuner-to-t-migrate/SKILL.md
+- skills/copy-tuner-to-t-migrate/scripts/migrate_tt.rb
 - skills/copy-tuner/SKILL.md
 - spec/copy_tuner_client/cache_spec.rb
 - spec/copy_tuner_client/client_spec.rb
 - spec/copy_tuner_client/configuration_spec.rb
+- spec/copy_tuner_client/copyray/marker_spec.rb
+- spec/copy_tuner_client/copyray/rewriter_spec.rb
+- spec/copy_tuner_client/copyray_middleware_spec.rb
 - spec/copy_tuner_client/copyray_spec.rb
 - spec/copy_tuner_client/dotted_hash_spec.rb
 - spec/copy_tuner_client/helper_extension_spec.rb
@@ -262,18 +271,16 @@ files:
 - spec/support/fake_unicorn.rb
 - spec/support/middleware_stack.rb
 - spec/support/writing_cache.rb
-- src/copyray.css
-- src/copyray.ts
-- src/copytuner_bar.ts
+- src/copyray-overlay.ts
+- src/copytuner-bar.ts
 - src/main.ts
-- src/specimen.ts
+- src/styles.ts
 - src/util.ts
 - src/vite-env.d.ts
 - tsconfig.json
 - ui/views/copytuner/index.html.erb
 - ui/views/layouts/copytuner_default.html.erb
 - vite.config.ts
-- yarn.lock
 homepage: https://github.com/SonicGarden/copy-tuner-ruby-client
 licenses: []
 metadata:

data/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  plugins: ['@sonicgarden'],
-  extends: [
-    'plugin:@sonicgarden/browser',
-    'plugin:@sonicgarden/recommended',
-    'plugin:@sonicgarden/typescript',
-    'plugin:@sonicgarden/prettier',
-  ],
-  settings: {
-    'import/internal-regex': '^@/',
-  },
-}

data/app/assets/stylesheets/copytuner.css

@@ -1 +0,0 @@
-@charset "UTF-8";#copyray-overlay,#copyray-overlay *,#copyray-overlay a:hover,#copyray-overlay a:visited,#copyray-overlay a:active{background:none;border:none;bottom:auto;clear:none;cursor:default;float:none;font-family:Arial,Helvetica,sans-serif;font-size:medium;font-style:normal;font-weight:400;height:auto;left:auto;letter-spacing:normal;line-height:normal;max-height:none;max-width:none;min-height:0;min-width:0;overflow:visible;position:static;right:auto;text-align:left;text-decoration:none;text-indent:0;text-transform:none;top:auto;visibility:visible;white-space:normal;width:auto;z-index:auto}#copyray-overlay{position:fixed;left:0;top:0;bottom:0;right:0;background-image:radial-gradient(ellipse farthest-corner at center,rgba(0,0,0,.4) 10%,rgba(0,0,0,.8) 100%);z-index:9000}.copyray-specimen{position:absolute;background:rgba(255,255,255,.15);outline:1px solid rgba(255,255,255,.8);outline-offset:-1px;color:#666;font-family:Helvetica Neue,sans-serif;font-size:13px;box-shadow:0 1px 3px #000000b3}.copyray-specimen:hover{cursor:pointer;background:rgba(255,255,255,.4)}.copyray-specimen.Specimen{outline:1px solid rgba(255,50,50,.8);background:rgba(255,50,50,.1)}.copyray-specimen.Specimen:hover{background:rgba(255,50,50,.4)}.copyray-specimen-handle{float:left;background:#fff;padding:0 3px;color:#333;font-size:10px}.copyray-specimen-handle.Specimen{background:rgba(255,50,50,.8);color:#fff}a.copyray-toggle-button{display:block;position:fixed;left:0;bottom:0;color:#fff;background:black;padding:12px 16px;border-radius:0 10px 0 0;opacity:0;transition:opacity .6s ease-in-out;z-index:10000;font-size:12px;cursor:pointer}a.copyray-toggle-button:hover{opacity:1}#copy-tuner-bar{position:fixed;left:0;right:0;bottom:0;height:40px;padding:0 8px;background:#222;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;color:#fff;z-index:2147483647;box-shadow:0 -1px #ffffff1a,inset 0 2px 6px #000c;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3))}#copy-tuner-bar-log-menu{position:fixed;left:0;right:0;bottom:40px;max-height:calc(100vh - 40px);background:#222;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;z-index:2147483647;overflow-y:auto}#copy-tuner-bar-log-menu tbody td{padding:2px 8px}#copy-tuner-bar-log-menu tbody tr{cursor:pointer}#copy-tuner-bar-log-menu tbody tr:hover{background:#444}#copy-tuner-bar-log-menu tbody a{color:#fff}#copy-tuner-bar-log-menu tbody a:hover,#copy-tuner-bar-log-menu tbody a:focus{color:#fff;text-decoration:underline}.copy-tuner-bar-button{position:relative;display:inline-block;color:#fff;margin:8px 1px;height:24px;line-height:24px;padding:0 8px;font-size:14px;cursor:pointer;vertical-align:middle;background-color:#444;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));border-radius:2px;box-shadow:1px 1px 1px #00000080,inset 0 1px #fff3,inset 0 0 2px #fff3;text-shadow:0 -1px 0 rgba(0,0,0,.4)}.copy-tuner-bar-button:hover,.copy-tuner-bar-button:focus{color:#fff;text-decoration:none;background-color:#555}input[type=text].copy-tuner-bar__search{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:2px;background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));box-shadow:inset 0 1px #0003,inset 0 0 2px #0003;padding:2px 8px;margin:0;line-height:20px;vertical-align:middle;color:#000;width:auto;height:auto;font-size:14px}.copy-tuner-hidden{display:none!important}@media screen and (max-width: 480px){.hidden-on-mobile{display:none!important}}