\n \n {{ exportLabel }}\n \n \n {{ importLabel }}\n \n \n {{ importFailedText }}\n \n
\n\n\n\n\n\n","function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./export_import.vue\")\n}\n/* script */\nexport * from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./export_import.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./export_import.vue\"\n/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-3d9b5a74\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./export_import.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"import-export-container\"},[_vm._t(\"before\"),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.exportData}},[_vm._v(\"\\n \"+_vm._s(_vm.exportLabel)+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.importData}},[_vm._v(\"\\n \"+_vm._s(_vm.importLabel)+\"\\n \")]),_vm._v(\" \"),_vm._t(\"afterButtons\"),_vm._v(\" \"),(_vm.importFailed)?_c('p',{staticClass:\"alert error\"},[_vm._v(\"\\n \"+_vm._s(_vm.importFailedText)+\"\\n \")]):_vm._e(),_vm._v(\" \"),_vm._t(\"afterError\")],2)}\nvar staticRenderFns = []\nexport { render, staticRenderFns }","function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!../../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./preview.vue\")\n}\n/* script */\nvar __vue_script__ = null\n/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1a88be74\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../../../node_modules/vue-loader/lib/selector?type=template&index=0!./preview.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"preview-container\"},[_c('div',{staticClass:\"underlay underlay-preview\"}),_vm._v(\" \"),_c('div',{staticClass:\"panel dummy\"},[_c('div',{staticClass:\"panel-heading\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.header'))+\"\\n \"),_c('span',{staticClass:\"badge badge-notification\"},[_vm._v(\"\\n 99\\n \")])]),_vm._v(\" \"),_c('span',{staticClass:\"faint\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.header_faint'))+\"\\n \")]),_vm._v(\" \"),_c('span',{staticClass:\"alert error\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.error'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.button'))+\"\\n \")])]),_vm._v(\" \"),_c('div',{staticClass:\"panel-body theme-preview-content\"},[_c('div',{staticClass:\"post\"},[_c('div',{staticClass:\"avatar still-image\"},[_vm._v(\"\\n ( ͡° ͜ʖ ͡°)\\n \")]),_vm._v(\" \"),_c('div',{staticClass:\"content\"},[_c('h4',[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.content'))+\"\\n \")]),_vm._v(\" \"),_c('i18n',{attrs:{\"path\":\"settings.style.preview.text\"}},[_c('code',{staticStyle:{\"font-family\":\"var(--postCodeFont)\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.mono'))+\"\\n \")]),_vm._v(\" \"),_c('a',{staticStyle:{\"color\":\"var(--link)\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.link'))+\"\\n \")])]),_vm._v(\" \"),_vm._m(0)],1)]),_vm._v(\" \"),_c('div',{staticClass:\"after-post\"},[_c('div',{staticClass:\"avatar-alt\"},[_vm._v(\"\\n :^)\\n \")]),_vm._v(\" \"),_c('div',{staticClass:\"content\"},[_c('i18n',{staticClass:\"faint\",attrs:{\"path\":\"settings.style.preview.fine_print\",\"tag\":\"span\"}},[_c('a',{staticStyle:{\"color\":\"var(--faintLink)\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.faint_link'))+\"\\n \")])])],1)]),_vm._v(\" \"),_c('div',{staticClass:\"separator\"}),_vm._v(\" \"),_c('span',{staticClass:\"alert error\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.error'))+\"\\n \")]),_vm._v(\" \"),_c('input',{attrs:{\"type\":\"text\"},domProps:{\"value\":_vm.$t('settings.style.preview.input')}}),_vm._v(\" \"),_c('div',{staticClass:\"actions\"},[_c('span',{staticClass:\"checkbox\"},[_c('input',{attrs:{\"id\":\"preview_checkbox\",\"checked\":\"very yes\",\"type\":\"checkbox\"}}),_vm._v(\" \"),_c('label',{attrs:{\"for\":\"preview_checkbox\"}},[_vm._v(_vm._s(_vm.$t('settings.style.preview.checkbox')))])]),_vm._v(\" \"),_c('button',{staticClass:\"btn\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.preview.button'))+\"\\n \")])])])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"icons\"},[_c('i',{staticClass:\"button-icon icon-reply\",staticStyle:{\"color\":\"var(--cBlue)\"}}),_vm._v(\" \"),_c('i',{staticClass:\"button-icon icon-retweet\",staticStyle:{\"color\":\"var(--cGreen)\"}}),_vm._v(\" \"),_c('i',{staticClass:\"button-icon icon-star\",staticStyle:{\"color\":\"var(--cOrange)\"}}),_vm._v(\" \"),_c('i',{staticClass:\"button-icon icon-cancel\",staticStyle:{\"color\":\"var(--cRed)\"}})])}]\nexport { render, staticRenderFns }","import { set, delete as del } from 'vue'\nimport {\n rgb2hex,\n hex2rgb,\n getContrastRatioLayers\n} from 'src/services/color_convert/color_convert.js'\nimport {\n DEFAULT_SHADOWS,\n generateColors,\n generateShadows,\n generateRadii,\n generateFonts,\n composePreset,\n getThemes,\n shadows2to3,\n colors2to3\n} from 'src/services/style_setter/style_setter.js'\nimport {\n SLOT_INHERITANCE\n} from 'src/services/theme_data/pleromafe.js'\nimport {\n CURRENT_VERSION,\n OPACITIES,\n getLayers,\n getOpacitySlot\n} from 'src/services/theme_data/theme_data.service.js'\nimport ColorInput from 'src/components/color_input/color_input.vue'\nimport RangeInput from 'src/components/range_input/range_input.vue'\nimport OpacityInput from 'src/components/opacity_input/opacity_input.vue'\nimport ShadowControl from 'src/components/shadow_control/shadow_control.vue'\nimport FontControl from 'src/components/font_control/font_control.vue'\nimport ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'\nimport TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'\nimport ExportImport from 'src/components/export_import/export_import.vue'\nimport Checkbox from 'src/components/checkbox/checkbox.vue'\n\nimport Preview from './preview.vue'\n\n// List of color values used in v1\nconst v1OnlyNames = [\n 'bg',\n 'fg',\n 'text',\n 'link',\n 'cRed',\n 'cGreen',\n 'cBlue',\n 'cOrange'\n].map(_ => _ + 'ColorLocal')\n\nconst colorConvert = (color) => {\n if (color.startsWith('--') || color === 'transparent') {\n return color\n } else {\n return hex2rgb(color)\n }\n}\n\nexport default {\n data () {\n return {\n availableStyles: [],\n selected: this.$store.getters.mergedConfig.theme,\n themeWarning: undefined,\n tempImportFile: undefined,\n engineVersion: 0,\n\n previewShadows: {},\n previewColors: {},\n previewRadii: {},\n previewFonts: {},\n\n shadowsInvalid: true,\n colorsInvalid: true,\n radiiInvalid: true,\n\n keepColor: false,\n keepShadows: false,\n keepOpacity: false,\n keepRoundness: false,\n keepFonts: false,\n\n ...Object.keys(SLOT_INHERITANCE)\n .map(key => [key, ''])\n .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),\n\n ...Object.keys(OPACITIES)\n .map(key => [key, ''])\n .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),\n\n shadowSelected: undefined,\n shadowsLocal: {},\n fontsLocal: {},\n\n btnRadiusLocal: '',\n inputRadiusLocal: '',\n checkboxRadiusLocal: '',\n panelRadiusLocal: '',\n avatarRadiusLocal: '',\n avatarAltRadiusLocal: '',\n attachmentRadiusLocal: '',\n tooltipRadiusLocal: '',\n chatMessageRadiusLocal: ''\n }\n },\n created () {\n const self = this\n\n getThemes()\n .then((promises) => {\n return Promise.all(\n Object.entries(promises)\n .map(([k, v]) => v.then(res => [k, res]))\n )\n })\n .then(themes => themes.reduce((acc, [k, v]) => {\n if (v) {\n return {\n ...acc,\n [k]: v\n }\n } else {\n return acc\n }\n }, {}))\n .then((themesComplete) => {\n self.availableStyles = themesComplete\n })\n },\n mounted () {\n this.loadThemeFromLocalStorage()\n if (typeof this.shadowSelected === 'undefined') {\n this.shadowSelected = this.shadowsAvailable[0]\n }\n },\n computed: {\n themeWarningHelp () {\n if (!this.themeWarning) return\n const t = this.$t\n const pre = 'settings.style.switcher.help.'\n const {\n origin,\n themeEngineVersion,\n type,\n noActionsPossible\n } = this.themeWarning\n if (origin === 'file') {\n // Loaded v2 theme from file\n if (themeEngineVersion === 2 && type === 'wrong_version') {\n return t(pre + 'v2_imported')\n }\n if (themeEngineVersion > CURRENT_VERSION) {\n return t(pre + 'future_version_imported') + ' ' +\n (\n noActionsPossible\n ? t(pre + 'snapshot_missing')\n : t(pre + 'snapshot_present')\n )\n }\n if (themeEngineVersion < CURRENT_VERSION) {\n return t(pre + 'future_version_imported') + ' ' +\n (\n noActionsPossible\n ? t(pre + 'snapshot_missing')\n : t(pre + 'snapshot_present')\n )\n }\n } else if (origin === 'localStorage') {\n if (type === 'snapshot_source_mismatch') {\n return t(pre + 'snapshot_source_mismatch')\n }\n // FE upgraded from v2\n if (themeEngineVersion === 2) {\n return t(pre + 'upgraded_from_v2')\n }\n // Admin downgraded FE\n if (themeEngineVersion > CURRENT_VERSION) {\n return t(pre + 'fe_downgraded') + ' ' +\n (\n noActionsPossible\n ? t(pre + 'migration_snapshot_ok')\n : t(pre + 'migration_snapshot_gone')\n )\n }\n // Admin upgraded FE\n if (themeEngineVersion < CURRENT_VERSION) {\n return t(pre + 'fe_upgraded') + ' ' +\n (\n noActionsPossible\n ? t(pre + 'migration_snapshot_ok')\n : t(pre + 'migration_snapshot_gone')\n )\n }\n }\n },\n selectedVersion () {\n return Array.isArray(this.selected) ? 1 : 2\n },\n currentColors () {\n return Object.keys(SLOT_INHERITANCE)\n .map(key => [key, this[key + 'ColorLocal']])\n .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})\n },\n currentOpacity () {\n return Object.keys(OPACITIES)\n .map(key => [key, this[key + 'OpacityLocal']])\n .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})\n },\n currentRadii () {\n return {\n btn: this.btnRadiusLocal,\n input: this.inputRadiusLocal,\n checkbox: this.checkboxRadiusLocal,\n panel: this.panelRadiusLocal,\n avatar: this.avatarRadiusLocal,\n avatarAlt: this.avatarAltRadiusLocal,\n tooltip: this.tooltipRadiusLocal,\n attachment: this.attachmentRadiusLocal,\n chatMessage: this.chatMessageRadiusLocal\n }\n },\n preview () {\n return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)\n },\n previewTheme () {\n if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }\n return this.preview.theme\n },\n // This needs optimization maybe\n previewContrast () {\n try {\n if (!this.previewTheme.colors.bg) return {}\n const colors = this.previewTheme.colors\n const opacity = this.previewTheme.opacity\n if (!colors.bg) return {}\n const hints = (ratio) => ({\n text: ratio.toPrecision(3) + ':1',\n // AA level, AAA level\n aa: ratio >= 4.5,\n aaa: ratio >= 7,\n // same but for 18pt+ texts\n laa: ratio >= 3,\n laaa: ratio >= 4.5\n })\n const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})\n\n const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {\n const slotIsBaseText = key === 'text' || key === 'link'\n const slotIsText = slotIsBaseText || (\n typeof value === 'object' && value !== null && value.textColor\n )\n if (!slotIsText) return acc\n const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value\n const background = variant || layer\n const opacitySlot = getOpacitySlot(background)\n const textColors = [\n key,\n ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])\n ]\n\n const layers = getLayers(\n layer,\n variant || layer,\n opacitySlot,\n colorsConverted,\n opacity\n )\n\n return {\n ...acc,\n ...textColors.reduce((acc, textColorKey) => {\n const newKey = slotIsBaseText\n ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)\n : textColorKey\n return {\n ...acc,\n [newKey]: getContrastRatioLayers(\n colorsConverted[textColorKey],\n layers,\n colorsConverted[textColorKey]\n )\n }\n }, {})\n }\n }, {})\n\n return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})\n } catch (e) {\n console.warn('Failure computing contrasts', e)\n }\n },\n previewRules () {\n if (!this.preview.rules) return ''\n return [\n ...Object.values(this.preview.rules),\n 'color: var(--text)',\n 'font-family: var(--interfaceFont, sans-serif)'\n ].join(';')\n },\n shadowsAvailable () {\n return Object.keys(DEFAULT_SHADOWS).sort()\n },\n currentShadowOverriden: {\n get () {\n return !!this.currentShadow\n },\n set (val) {\n if (val) {\n set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))\n } else {\n del(this.shadowsLocal, this.shadowSelected)\n }\n }\n },\n currentShadowFallback () {\n return (this.previewTheme.shadows || {})[this.shadowSelected]\n },\n currentShadow: {\n get () {\n return this.shadowsLocal[this.shadowSelected]\n },\n set (v) {\n set(this.shadowsLocal, this.shadowSelected, v)\n }\n },\n themeValid () {\n return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid\n },\n exportedTheme () {\n const saveEverything = (\n !this.keepFonts &&\n !this.keepShadows &&\n !this.keepOpacity &&\n !this.keepRoundness &&\n !this.keepColor\n )\n\n const source = {\n themeEngineVersion: CURRENT_VERSION\n }\n\n if (this.keepFonts || saveEverything) {\n source.fonts = this.fontsLocal\n }\n if (this.keepShadows || saveEverything) {\n source.shadows = this.shadowsLocal\n }\n if (this.keepOpacity || saveEverything) {\n source.opacity = this.currentOpacity\n }\n if (this.keepColor || saveEverything) {\n source.colors = this.currentColors\n }\n if (this.keepRoundness || saveEverything) {\n source.radii = this.currentRadii\n }\n\n const theme = {\n themeEngineVersion: CURRENT_VERSION,\n ...this.previewTheme\n }\n\n return {\n // To separate from other random JSON files and possible future source formats\n _pleroma_theme_version: 2, theme, source\n }\n }\n },\n components: {\n ColorInput,\n OpacityInput,\n RangeInput,\n ContrastRatio,\n ShadowControl,\n FontControl,\n TabSwitcher,\n Preview,\n ExportImport,\n Checkbox\n },\n methods: {\n loadTheme (\n {\n theme,\n source,\n _pleroma_theme_version: fileVersion\n },\n origin,\n forceUseSource = false\n ) {\n this.dismissWarning()\n if (!source && !theme) {\n throw new Error('Can\\'t load theme: empty')\n }\n const version = (origin === 'localStorage' && !theme.colors)\n ? 'l1'\n : fileVersion\n const snapshotEngineVersion = (theme || {}).themeEngineVersion\n const themeEngineVersion = (source || {}).themeEngineVersion || 2\n const versionsMatch = themeEngineVersion === CURRENT_VERSION\n const sourceSnapshotMismatch = (\n theme !== undefined &&\n source !== undefined &&\n themeEngineVersion !== snapshotEngineVersion\n )\n // Force loading of source if user requested it or if snapshot\n // is unavailable\n const forcedSourceLoad = (source && forceUseSource) || !theme\n if (!(versionsMatch && !sourceSnapshotMismatch) &&\n !forcedSourceLoad &&\n version !== 'l1' &&\n origin !== 'defaults'\n ) {\n if (sourceSnapshotMismatch && origin === 'localStorage') {\n this.themeWarning = {\n origin,\n themeEngineVersion,\n type: 'snapshot_source_mismatch'\n }\n } else if (!theme) {\n this.themeWarning = {\n origin,\n noActionsPossible: true,\n themeEngineVersion,\n type: 'no_snapshot_old_version'\n }\n } else if (!versionsMatch) {\n this.themeWarning = {\n origin,\n noActionsPossible: !source,\n themeEngineVersion,\n type: 'wrong_version'\n }\n }\n }\n this.normalizeLocalState(theme, version, source, forcedSourceLoad)\n },\n forceLoadLocalStorage () {\n this.loadThemeFromLocalStorage(true)\n },\n dismissWarning () {\n this.themeWarning = undefined\n this.tempImportFile = undefined\n },\n forceLoad () {\n const { origin } = this.themeWarning\n switch (origin) {\n case 'localStorage':\n this.loadThemeFromLocalStorage(true)\n break\n case 'file':\n this.onImport(this.tempImportFile, true)\n break\n }\n this.dismissWarning()\n },\n forceSnapshot () {\n const { origin } = this.themeWarning\n switch (origin) {\n case 'localStorage':\n this.loadThemeFromLocalStorage(false, true)\n break\n case 'file':\n console.err('Forcing snapshout from file is not supported yet')\n break\n }\n this.dismissWarning()\n },\n loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {\n const {\n customTheme: theme,\n customThemeSource: source\n } = this.$store.getters.mergedConfig\n if (!theme && !source) {\n // Anon user or never touched themes\n this.loadTheme(\n this.$store.state.instance.themeData,\n 'defaults',\n confirmLoadSource\n )\n } else {\n this.loadTheme(\n {\n theme,\n source: forceSnapshot ? theme : source\n },\n 'localStorage',\n confirmLoadSource\n )\n }\n },\n setCustomTheme () {\n this.$store.dispatch('setOption', {\n name: 'customTheme',\n value: {\n themeEngineVersion: CURRENT_VERSION,\n ...this.previewTheme\n }\n })\n this.$store.dispatch('setOption', {\n name: 'customThemeSource',\n value: {\n themeEngineVersion: CURRENT_VERSION,\n shadows: this.shadowsLocal,\n fonts: this.fontsLocal,\n opacity: this.currentOpacity,\n colors: this.currentColors,\n radii: this.currentRadii\n }\n })\n },\n updatePreviewColorsAndShadows () {\n this.previewColors = generateColors({\n opacity: this.currentOpacity,\n colors: this.currentColors\n })\n this.previewShadows = generateShadows(\n { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },\n this.previewColors.theme.colors,\n this.previewColors.mod\n )\n },\n onImport (parsed, forceSource = false) {\n this.tempImportFile = parsed\n this.loadTheme(parsed, 'file', forceSource)\n },\n importValidator (parsed) {\n const version = parsed._pleroma_theme_version\n return version >= 1 || version <= 2\n },\n clearAll () {\n this.loadThemeFromLocalStorage()\n },\n\n // Clears all the extra stuff when loading V1 theme\n clearV1 () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))\n .filter(_ => !v1OnlyNames.includes(_))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearRoundness () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('RadiusLocal'))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearOpacity () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('OpacityLocal'))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearShadows () {\n this.shadowsLocal = {}\n },\n\n clearFonts () {\n this.fontsLocal = {}\n },\n\n /**\n * This applies stored theme data onto form. Supports three versions of data:\n * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity\n * v2 (version = 2) - newer version of themes.\n * v1 (version = 1) - older version of themes (import from file)\n * v1l (version = l1) - older version of theme (load from local storage)\n * v1 and v1l differ because of way themes were stored/exported.\n * @param {Object} theme - theme data (snapshot)\n * @param {Number} version - version of data. 0 means try to guess based on data. \"l1\" means v1, locastorage type\n * @param {Object} source - theme source - this will be used if compatible\n * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently\n * this allows importing source anyway\n */\n normalizeLocalState (theme, version = 0, source, forceSource = false) {\n let input\n if (typeof source !== 'undefined') {\n if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {\n input = source\n version = source.themeEngineVersion\n } else {\n input = theme\n }\n } else {\n input = theme\n }\n\n const radii = input.radii || input\n const opacity = input.opacity\n const shadows = input.shadows || {}\n const fonts = input.fonts || {}\n const colors = !input.themeEngineVersion\n ? colors2to3(input.colors || input)\n : input.colors || input\n\n if (version === 0) {\n if (input.version) version = input.version\n // Old v1 naming: fg is text, btn is foreground\n if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {\n version = 1\n }\n // New v2 naming: text is text, fg is foreground\n if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {\n version = 2\n }\n }\n\n this.engineVersion = version\n\n // Stuff that differs between V1 and V2\n if (version === 1) {\n this.fgColorLocal = rgb2hex(colors.btn)\n this.textColorLocal = rgb2hex(colors.fg)\n }\n\n if (!this.keepColor) {\n this.clearV1()\n const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])\n if (version === 1 || version === 'l1') {\n keys\n .add('bg')\n .add('link')\n .add('cRed')\n .add('cBlue')\n .add('cGreen')\n .add('cOrange')\n }\n\n keys.forEach(key => {\n const color = colors[key]\n const hex = rgb2hex(colors[key])\n this[key + 'ColorLocal'] = hex === '#aN' ? color : hex\n })\n }\n\n if (opacity && !this.keepOpacity) {\n this.clearOpacity()\n Object.entries(opacity).forEach(([k, v]) => {\n if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return\n this[k + 'OpacityLocal'] = v\n })\n }\n\n if (!this.keepRoundness) {\n this.clearRoundness()\n Object.entries(radii).forEach(([k, v]) => {\n // 'Radius' is kept mostly for v1->v2 localstorage transition\n const key = k.endsWith('Radius') ? k.split('Radius')[0] : k\n this[key + 'RadiusLocal'] = v\n })\n }\n\n if (!this.keepShadows) {\n this.clearShadows()\n if (version === 2) {\n this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)\n } else {\n this.shadowsLocal = shadows\n }\n this.shadowSelected = this.shadowsAvailable[0]\n }\n\n if (!this.keepFonts) {\n this.clearFonts()\n this.fontsLocal = fonts\n }\n }\n },\n watch: {\n currentRadii () {\n try {\n this.previewRadii = generateRadii({ radii: this.currentRadii })\n this.radiiInvalid = false\n } catch (e) {\n this.radiiInvalid = true\n console.warn(e)\n }\n },\n shadowsLocal: {\n handler () {\n if (Object.getOwnPropertyNames(this.previewColors).length === 1) return\n try {\n this.updatePreviewColorsAndShadows()\n this.shadowsInvalid = false\n } catch (e) {\n this.shadowsInvalid = true\n console.warn(e)\n }\n },\n deep: true\n },\n fontsLocal: {\n handler () {\n try {\n this.previewFonts = generateFonts({ fonts: this.fontsLocal })\n this.fontsInvalid = false\n } catch (e) {\n this.fontsInvalid = true\n console.warn(e)\n }\n },\n deep: true\n },\n currentColors () {\n try {\n this.updatePreviewColorsAndShadows()\n this.colorsInvalid = false\n this.shadowsInvalid = false\n } catch (e) {\n this.colorsInvalid = true\n this.shadowsInvalid = true\n console.warn(e)\n }\n },\n currentOpacity () {\n try {\n this.updatePreviewColorsAndShadows()\n } catch (e) {\n console.warn(e)\n }\n },\n selected () {\n this.dismissWarning()\n if (this.selectedVersion === 1) {\n if (!this.keepRoundness) {\n this.clearRoundness()\n }\n\n if (!this.keepShadows) {\n this.clearShadows()\n }\n\n if (!this.keepOpacity) {\n this.clearOpacity()\n }\n\n if (!this.keepColor) {\n this.clearV1()\n\n this.bgColorLocal = this.selected[1]\n this.fgColorLocal = this.selected[2]\n this.textColorLocal = this.selected[3]\n this.linkColorLocal = this.selected[4]\n this.cRedColorLocal = this.selected[5]\n this.cGreenColorLocal = this.selected[6]\n this.cBlueColorLocal = this.selected[7]\n this.cOrangeColorLocal = this.selected[8]\n }\n } else if (this.selectedVersion >= 2) {\n this.normalizeLocalState(this.selected.theme, 2, this.selected.source)\n }\n }\n }\n}\n","function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!./theme_tab.scss\")\n}\n/* script */\nexport * from \"!!babel-loader!./theme_tab.js\"\nimport __vue_script__ from \"!!babel-loader!./theme_tab.js\"/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-03c6cfba\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../../../node_modules/vue-loader/lib/selector?type=template&index=0!./theme_tab.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"theme-tab\"},[_c('div',{staticClass:\"presets-container\"},[_c('div',{staticClass:\"save-load\"},[(_vm.themeWarning)?_c('div',{staticClass:\"theme-warning\"},[_c('div',{staticClass:\"alert warning\"},[_vm._v(\"\\n \"+_vm._s(_vm.themeWarningHelp)+\"\\n \")]),_vm._v(\" \"),_c('div',{staticClass:\"buttons\"},[(_vm.themeWarning.type === 'snapshot_source_mismatch')?[_c('button',{staticClass:\"btn\",on:{\"click\":_vm.forceLoad}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.use_source'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.forceSnapshot}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.use_snapshot'))+\"\\n \")])]:(_vm.themeWarning.noActionsPossible)?[_c('button',{staticClass:\"btn\",on:{\"click\":_vm.dismissWarning}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('general.dismiss'))+\"\\n \")])]:[_c('button',{staticClass:\"btn\",on:{\"click\":_vm.forceLoad}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.load_theme'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.dismissWarning}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_as_is'))+\"\\n \")])]],2)]):_vm._e(),_vm._v(\" \"),_c('ExportImport',{attrs:{\"export-object\":_vm.exportedTheme,\"export-label\":_vm.$t(\"settings.export_theme\"),\"import-label\":_vm.$t(\"settings.import_theme\"),\"import-failed-text\":_vm.$t(\"settings.invalid_theme_imported\"),\"on-import\":_vm.onImport,\"validator\":_vm.importValidator}},[_c('template',{slot:\"before\"},[_c('div',{staticClass:\"presets\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.presets'))+\"\\n \"),_c('label',{staticClass:\"select\",attrs:{\"for\":\"preset-switcher\"}},[_c('select',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.selected),expression:\"selected\"}],staticClass:\"preset-switcher\",attrs:{\"id\":\"preset-switcher\"},on:{\"change\":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = \"_value\" in o ? o._value : o.value;return val}); _vm.selected=$event.target.multiple ? $$selectedVal : $$selectedVal[0]}}},_vm._l((_vm.availableStyles),function(style){return _c('option',{key:style.name,style:({\n backgroundColor: style[1] || (style.theme || style.source).colors.bg,\n color: style[3] || (style.theme || style.source).colors.text\n }),domProps:{\"value\":style}},[_vm._v(\"\\n \"+_vm._s(style[0] || style.name)+\"\\n \")])}),0),_vm._v(\" \"),_c('i',{staticClass:\"icon-down-open\"})])])])],2)],1),_vm._v(\" \"),_c('div',{staticClass:\"save-load-options\"},[_c('span',{staticClass:\"keep-option\"},[_c('Checkbox',{model:{value:(_vm.keepColor),callback:function ($$v) {_vm.keepColor=$$v},expression:\"keepColor\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_color'))+\"\\n \")])],1),_vm._v(\" \"),_c('span',{staticClass:\"keep-option\"},[_c('Checkbox',{model:{value:(_vm.keepShadows),callback:function ($$v) {_vm.keepShadows=$$v},expression:\"keepShadows\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_shadows'))+\"\\n \")])],1),_vm._v(\" \"),_c('span',{staticClass:\"keep-option\"},[_c('Checkbox',{model:{value:(_vm.keepOpacity),callback:function ($$v) {_vm.keepOpacity=$$v},expression:\"keepOpacity\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_opacity'))+\"\\n \")])],1),_vm._v(\" \"),_c('span',{staticClass:\"keep-option\"},[_c('Checkbox',{model:{value:(_vm.keepRoundness),callback:function ($$v) {_vm.keepRoundness=$$v},expression:\"keepRoundness\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_roundness'))+\"\\n \")])],1),_vm._v(\" \"),_c('span',{staticClass:\"keep-option\"},[_c('Checkbox',{model:{value:(_vm.keepFonts),callback:function ($$v) {_vm.keepFonts=$$v},expression:\"keepFonts\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.keep_fonts'))+\"\\n \")])],1),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.style.switcher.save_load_hint')))])])]),_vm._v(\" \"),_c('preview',{style:(_vm.previewRules)}),_vm._v(\" \"),_c('keep-alive',[_c('tab-switcher',{key:\"style-tweak\"},[_c('div',{staticClass:\"color-container\",attrs:{\"label\":_vm.$t('settings.style.common_colors._tab_label')}},[_c('div',{staticClass:\"tab-header\"},[_c('p',[_vm._v(_vm._s(_vm.$t('settings.theme_help')))]),_vm._v(\" \"),_c('div',{staticClass:\"tab-header-buttons\"},[_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearOpacity}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_opacity'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearV1}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_all'))+\"\\n \")])])]),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.theme_help_v2_1')))]),_vm._v(\" \"),_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.common_colors.main')))]),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('ColorInput',{attrs:{\"name\":\"bgColor\",\"label\":_vm.$t('settings.background')},model:{value:(_vm.bgColorLocal),callback:function ($$v) {_vm.bgColorLocal=$$v},expression:\"bgColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"bgOpacity\",\"fallback\":_vm.previewTheme.opacity.bg},model:{value:(_vm.bgOpacityLocal),callback:function ($$v) {_vm.bgOpacityLocal=$$v},expression:\"bgOpacityLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"textColor\",\"label\":_vm.$t('settings.text')},model:{value:(_vm.textColorLocal),callback:function ($$v) {_vm.textColorLocal=$$v},expression:\"textColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"accentColor\",\"fallback\":_vm.previewTheme.colors.link,\"label\":_vm.$t('settings.accent'),\"show-optional-tickbox\":typeof _vm.linkColorLocal !== 'undefined'},model:{value:(_vm.accentColorLocal),callback:function ($$v) {_vm.accentColorLocal=$$v},expression:\"accentColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"linkColor\",\"fallback\":_vm.previewTheme.colors.accent,\"label\":_vm.$t('settings.links'),\"show-optional-tickbox\":typeof _vm.accentColorLocal !== 'undefined'},model:{value:(_vm.linkColorLocal),callback:function ($$v) {_vm.linkColorLocal=$$v},expression:\"linkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('ColorInput',{attrs:{\"name\":\"fgColor\",\"label\":_vm.$t('settings.foreground')},model:{value:(_vm.fgColorLocal),callback:function ($$v) {_vm.fgColorLocal=$$v},expression:\"fgColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"fgTextColor\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.fgText},model:{value:(_vm.fgTextColorLocal),callback:function ($$v) {_vm.fgTextColorLocal=$$v},expression:\"fgTextColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"fgLinkColor\",\"label\":_vm.$t('settings.links'),\"fallback\":_vm.previewTheme.colors.fgLink},model:{value:(_vm.fgLinkColorLocal),callback:function ($$v) {_vm.fgLinkColorLocal=$$v},expression:\"fgLinkColorLocal\"}}),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.style.common_colors.foreground_hint')))])],1),_vm._v(\" \"),_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.common_colors.rgbo')))]),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('ColorInput',{attrs:{\"name\":\"cRedColor\",\"label\":_vm.$t('settings.cRed')},model:{value:(_vm.cRedColorLocal),callback:function ($$v) {_vm.cRedColorLocal=$$v},expression:\"cRedColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgCRed}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"cBlueColor\",\"label\":_vm.$t('settings.cBlue')},model:{value:(_vm.cBlueColorLocal),callback:function ($$v) {_vm.cBlueColorLocal=$$v},expression:\"cBlueColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgCBlue}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('ColorInput',{attrs:{\"name\":\"cGreenColor\",\"label\":_vm.$t('settings.cGreen')},model:{value:(_vm.cGreenColorLocal),callback:function ($$v) {_vm.cGreenColorLocal=$$v},expression:\"cGreenColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgCGreen}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"cOrangeColor\",\"label\":_vm.$t('settings.cOrange')},model:{value:(_vm.cOrangeColorLocal),callback:function ($$v) {_vm.cOrangeColorLocal=$$v},expression:\"cOrangeColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.bgCOrange}})],1),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.theme_help_v2_2')))])]),_vm._v(\" \"),_c('div',{staticClass:\"color-container\",attrs:{\"label\":_vm.$t('settings.style.advanced_colors._tab_label')}},[_c('div',{staticClass:\"tab-header\"},[_c('p',[_vm._v(_vm._s(_vm.$t('settings.theme_help')))]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearOpacity}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_opacity'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearV1}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_all'))+\"\\n \")])]),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.post')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"postLinkColor\",\"fallback\":_vm.previewTheme.colors.accent,\"label\":_vm.$t('settings.links')},model:{value:(_vm.postLinkColorLocal),callback:function ($$v) {_vm.postLinkColorLocal=$$v},expression:\"postLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.postLink}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"postGreentextColor\",\"fallback\":_vm.previewTheme.colors.cGreen,\"label\":_vm.$t('settings.greentext')},model:{value:(_vm.postGreentextColorLocal),callback:function ($$v) {_vm.postGreentextColorLocal=$$v},expression:\"postGreentextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.postGreentext}}),_vm._v(\" \"),_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.alert')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertError\",\"label\":_vm.$t('settings.style.advanced_colors.alert_error'),\"fallback\":_vm.previewTheme.colors.alertError},model:{value:(_vm.alertErrorColorLocal),callback:function ($$v) {_vm.alertErrorColorLocal=$$v},expression:\"alertErrorColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertErrorText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.alertErrorText},model:{value:(_vm.alertErrorTextColorLocal),callback:function ($$v) {_vm.alertErrorTextColorLocal=$$v},expression:\"alertErrorTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.alertErrorText,\"large\":\"\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertWarning\",\"label\":_vm.$t('settings.style.advanced_colors.alert_warning'),\"fallback\":_vm.previewTheme.colors.alertWarning},model:{value:(_vm.alertWarningColorLocal),callback:function ($$v) {_vm.alertWarningColorLocal=$$v},expression:\"alertWarningColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertWarningText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.alertWarningText},model:{value:(_vm.alertWarningTextColorLocal),callback:function ($$v) {_vm.alertWarningTextColorLocal=$$v},expression:\"alertWarningTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.alertWarningText,\"large\":\"\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertNeutral\",\"label\":_vm.$t('settings.style.advanced_colors.alert_neutral'),\"fallback\":_vm.previewTheme.colors.alertNeutral},model:{value:(_vm.alertNeutralColorLocal),callback:function ($$v) {_vm.alertNeutralColorLocal=$$v},expression:\"alertNeutralColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"alertNeutralText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.alertNeutralText},model:{value:(_vm.alertNeutralTextColorLocal),callback:function ($$v) {_vm.alertNeutralTextColorLocal=$$v},expression:\"alertNeutralTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.alertNeutralText,\"large\":\"\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"alertOpacity\",\"fallback\":_vm.previewTheme.opacity.alert},model:{value:(_vm.alertOpacityLocal),callback:function ($$v) {_vm.alertOpacityLocal=$$v},expression:\"alertOpacityLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.badge')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"badgeNotification\",\"label\":_vm.$t('settings.style.advanced_colors.badge_notification'),\"fallback\":_vm.previewTheme.colors.badgeNotification},model:{value:(_vm.badgeNotificationColorLocal),callback:function ($$v) {_vm.badgeNotificationColorLocal=$$v},expression:\"badgeNotificationColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"badgeNotificationText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.badgeNotificationText},model:{value:(_vm.badgeNotificationTextColorLocal),callback:function ($$v) {_vm.badgeNotificationTextColorLocal=$$v},expression:\"badgeNotificationTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.badgeNotificationText,\"large\":\"\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.panel_header')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"panelColor\",\"fallback\":_vm.previewTheme.colors.panel,\"label\":_vm.$t('settings.background')},model:{value:(_vm.panelColorLocal),callback:function ($$v) {_vm.panelColorLocal=$$v},expression:\"panelColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"panelOpacity\",\"fallback\":_vm.previewTheme.opacity.panel,\"disabled\":_vm.panelColorLocal === 'transparent'},model:{value:(_vm.panelOpacityLocal),callback:function ($$v) {_vm.panelOpacityLocal=$$v},expression:\"panelOpacityLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"panelTextColor\",\"fallback\":_vm.previewTheme.colors.panelText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.panelTextColorLocal),callback:function ($$v) {_vm.panelTextColorLocal=$$v},expression:\"panelTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.panelText,\"large\":\"\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"panelLinkColor\",\"fallback\":_vm.previewTheme.colors.panelLink,\"label\":_vm.$t('settings.links')},model:{value:(_vm.panelLinkColorLocal),callback:function ($$v) {_vm.panelLinkColorLocal=$$v},expression:\"panelLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.panelLink,\"large\":\"\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.top_bar')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"topBarColor\",\"fallback\":_vm.previewTheme.colors.topBar,\"label\":_vm.$t('settings.background')},model:{value:(_vm.topBarColorLocal),callback:function ($$v) {_vm.topBarColorLocal=$$v},expression:\"topBarColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"topBarTextColor\",\"fallback\":_vm.previewTheme.colors.topBarText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.topBarTextColorLocal),callback:function ($$v) {_vm.topBarTextColorLocal=$$v},expression:\"topBarTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.topBarText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"topBarLinkColor\",\"fallback\":_vm.previewTheme.colors.topBarLink,\"label\":_vm.$t('settings.links')},model:{value:(_vm.topBarLinkColorLocal),callback:function ($$v) {_vm.topBarLinkColorLocal=$$v},expression:\"topBarLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.topBarLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.inputs')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"inputColor\",\"fallback\":_vm.previewTheme.colors.input,\"label\":_vm.$t('settings.background')},model:{value:(_vm.inputColorLocal),callback:function ($$v) {_vm.inputColorLocal=$$v},expression:\"inputColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"inputOpacity\",\"fallback\":_vm.previewTheme.opacity.input,\"disabled\":_vm.inputColorLocal === 'transparent'},model:{value:(_vm.inputOpacityLocal),callback:function ($$v) {_vm.inputOpacityLocal=$$v},expression:\"inputOpacityLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"inputTextColor\",\"fallback\":_vm.previewTheme.colors.inputText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.inputTextColorLocal),callback:function ($$v) {_vm.inputTextColorLocal=$$v},expression:\"inputTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.inputText}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.buttons')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnColor\",\"fallback\":_vm.previewTheme.colors.btn,\"label\":_vm.$t('settings.background')},model:{value:(_vm.btnColorLocal),callback:function ($$v) {_vm.btnColorLocal=$$v},expression:\"btnColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"btnOpacity\",\"fallback\":_vm.previewTheme.opacity.btn,\"disabled\":_vm.btnColorLocal === 'transparent'},model:{value:(_vm.btnOpacityLocal),callback:function ($$v) {_vm.btnOpacityLocal=$$v},expression:\"btnOpacityLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnTextColor\",\"fallback\":_vm.previewTheme.colors.btnText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.btnTextColorLocal),callback:function ($$v) {_vm.btnTextColorLocal=$$v},expression:\"btnTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnPanelTextColor\",\"fallback\":_vm.previewTheme.colors.btnPanelText,\"label\":_vm.$t('settings.style.advanced_colors.panel_header')},model:{value:(_vm.btnPanelTextColorLocal),callback:function ($$v) {_vm.btnPanelTextColorLocal=$$v},expression:\"btnPanelTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnPanelText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnTopBarTextColor\",\"fallback\":_vm.previewTheme.colors.btnTopBarText,\"label\":_vm.$t('settings.style.advanced_colors.top_bar')},model:{value:(_vm.btnTopBarTextColorLocal),callback:function ($$v) {_vm.btnTopBarTextColorLocal=$$v},expression:\"btnTopBarTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnTopBarText}}),_vm._v(\" \"),_c('h5',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.pressed')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnPressedColor\",\"fallback\":_vm.previewTheme.colors.btnPressed,\"label\":_vm.$t('settings.background')},model:{value:(_vm.btnPressedColorLocal),callback:function ($$v) {_vm.btnPressedColorLocal=$$v},expression:\"btnPressedColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnPressedTextColor\",\"fallback\":_vm.previewTheme.colors.btnPressedText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.btnPressedTextColorLocal),callback:function ($$v) {_vm.btnPressedTextColorLocal=$$v},expression:\"btnPressedTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnPressedText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnPressedPanelTextColor\",\"fallback\":_vm.previewTheme.colors.btnPressedPanelText,\"label\":_vm.$t('settings.style.advanced_colors.panel_header')},model:{value:(_vm.btnPressedPanelTextColorLocal),callback:function ($$v) {_vm.btnPressedPanelTextColorLocal=$$v},expression:\"btnPressedPanelTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnPressedPanelText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnPressedTopBarTextColor\",\"fallback\":_vm.previewTheme.colors.btnPressedTopBarText,\"label\":_vm.$t('settings.style.advanced_colors.top_bar')},model:{value:(_vm.btnPressedTopBarTextColorLocal),callback:function ($$v) {_vm.btnPressedTopBarTextColorLocal=$$v},expression:\"btnPressedTopBarTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnPressedTopBarText}}),_vm._v(\" \"),_c('h5',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.disabled')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnDisabledColor\",\"fallback\":_vm.previewTheme.colors.btnDisabled,\"label\":_vm.$t('settings.background')},model:{value:(_vm.btnDisabledColorLocal),callback:function ($$v) {_vm.btnDisabledColorLocal=$$v},expression:\"btnDisabledColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnDisabledTextColor\",\"fallback\":_vm.previewTheme.colors.btnDisabledText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.btnDisabledTextColorLocal),callback:function ($$v) {_vm.btnDisabledTextColorLocal=$$v},expression:\"btnDisabledTextColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnDisabledPanelTextColor\",\"fallback\":_vm.previewTheme.colors.btnDisabledPanelText,\"label\":_vm.$t('settings.style.advanced_colors.panel_header')},model:{value:(_vm.btnDisabledPanelTextColorLocal),callback:function ($$v) {_vm.btnDisabledPanelTextColorLocal=$$v},expression:\"btnDisabledPanelTextColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnDisabledTopBarTextColor\",\"fallback\":_vm.previewTheme.colors.btnDisabledTopBarText,\"label\":_vm.$t('settings.style.advanced_colors.top_bar')},model:{value:(_vm.btnDisabledTopBarTextColorLocal),callback:function ($$v) {_vm.btnDisabledTopBarTextColorLocal=$$v},expression:\"btnDisabledTopBarTextColorLocal\"}}),_vm._v(\" \"),_c('h5',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.toggled')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnToggledColor\",\"fallback\":_vm.previewTheme.colors.btnToggled,\"label\":_vm.$t('settings.background')},model:{value:(_vm.btnToggledColorLocal),callback:function ($$v) {_vm.btnToggledColorLocal=$$v},expression:\"btnToggledColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnToggledTextColor\",\"fallback\":_vm.previewTheme.colors.btnToggledText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.btnToggledTextColorLocal),callback:function ($$v) {_vm.btnToggledTextColorLocal=$$v},expression:\"btnToggledTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnToggledText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnToggledPanelTextColor\",\"fallback\":_vm.previewTheme.colors.btnToggledPanelText,\"label\":_vm.$t('settings.style.advanced_colors.panel_header')},model:{value:(_vm.btnToggledPanelTextColorLocal),callback:function ($$v) {_vm.btnToggledPanelTextColorLocal=$$v},expression:\"btnToggledPanelTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnToggledPanelText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"btnToggledTopBarTextColor\",\"fallback\":_vm.previewTheme.colors.btnToggledTopBarText,\"label\":_vm.$t('settings.style.advanced_colors.top_bar')},model:{value:(_vm.btnToggledTopBarTextColorLocal),callback:function ($$v) {_vm.btnToggledTopBarTextColorLocal=$$v},expression:\"btnToggledTopBarTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.btnToggledTopBarText}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.tabs')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"tabColor\",\"fallback\":_vm.previewTheme.colors.tab,\"label\":_vm.$t('settings.background')},model:{value:(_vm.tabColorLocal),callback:function ($$v) {_vm.tabColorLocal=$$v},expression:\"tabColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"tabTextColor\",\"fallback\":_vm.previewTheme.colors.tabText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.tabTextColorLocal),callback:function ($$v) {_vm.tabTextColorLocal=$$v},expression:\"tabTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.tabText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"tabActiveTextColor\",\"fallback\":_vm.previewTheme.colors.tabActiveText,\"label\":_vm.$t('settings.text')},model:{value:(_vm.tabActiveTextColorLocal),callback:function ($$v) {_vm.tabActiveTextColorLocal=$$v},expression:\"tabActiveTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.tabActiveText}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.borders')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"borderColor\",\"fallback\":_vm.previewTheme.colors.border,\"label\":_vm.$t('settings.style.common.color')},model:{value:(_vm.borderColorLocal),callback:function ($$v) {_vm.borderColorLocal=$$v},expression:\"borderColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"borderOpacity\",\"fallback\":_vm.previewTheme.opacity.border,\"disabled\":_vm.borderColorLocal === 'transparent'},model:{value:(_vm.borderOpacityLocal),callback:function ($$v) {_vm.borderOpacityLocal=$$v},expression:\"borderOpacityLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.faint_text')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"faintColor\",\"fallback\":_vm.previewTheme.colors.faint,\"label\":_vm.$t('settings.text')},model:{value:(_vm.faintColorLocal),callback:function ($$v) {_vm.faintColorLocal=$$v},expression:\"faintColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"faintLinkColor\",\"fallback\":_vm.previewTheme.colors.faintLink,\"label\":_vm.$t('settings.links')},model:{value:(_vm.faintLinkColorLocal),callback:function ($$v) {_vm.faintLinkColorLocal=$$v},expression:\"faintLinkColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"panelFaintColor\",\"fallback\":_vm.previewTheme.colors.panelFaint,\"label\":_vm.$t('settings.style.advanced_colors.panel_header')},model:{value:(_vm.panelFaintColorLocal),callback:function ($$v) {_vm.panelFaintColorLocal=$$v},expression:\"panelFaintColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"faintOpacity\",\"fallback\":_vm.previewTheme.opacity.faint},model:{value:(_vm.faintOpacityLocal),callback:function ($$v) {_vm.faintOpacityLocal=$$v},expression:\"faintOpacityLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.underlay')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"underlay\",\"label\":_vm.$t('settings.style.advanced_colors.underlay'),\"fallback\":_vm.previewTheme.colors.underlay},model:{value:(_vm.underlayColorLocal),callback:function ($$v) {_vm.underlayColorLocal=$$v},expression:\"underlayColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"underlayOpacity\",\"fallback\":_vm.previewTheme.opacity.underlay,\"disabled\":_vm.underlayOpacityLocal === 'transparent'},model:{value:(_vm.underlayOpacityLocal),callback:function ($$v) {_vm.underlayOpacityLocal=$$v},expression:\"underlayOpacityLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.poll')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"poll\",\"label\":_vm.$t('settings.background'),\"fallback\":_vm.previewTheme.colors.poll},model:{value:(_vm.pollColorLocal),callback:function ($$v) {_vm.pollColorLocal=$$v},expression:\"pollColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"pollText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.pollText},model:{value:(_vm.pollTextColorLocal),callback:function ($$v) {_vm.pollTextColorLocal=$$v},expression:\"pollTextColorLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.icons')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"icon\",\"label\":_vm.$t('settings.style.advanced_colors.icons'),\"fallback\":_vm.previewTheme.colors.icon},model:{value:(_vm.iconColorLocal),callback:function ($$v) {_vm.iconColorLocal=$$v},expression:\"iconColorLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.highlight')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"highlight\",\"label\":_vm.$t('settings.background'),\"fallback\":_vm.previewTheme.colors.highlight},model:{value:(_vm.highlightColorLocal),callback:function ($$v) {_vm.highlightColorLocal=$$v},expression:\"highlightColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"highlightText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.highlightText},model:{value:(_vm.highlightTextColorLocal),callback:function ($$v) {_vm.highlightTextColorLocal=$$v},expression:\"highlightTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.highlightText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"highlightLink\",\"label\":_vm.$t('settings.links'),\"fallback\":_vm.previewTheme.colors.highlightLink},model:{value:(_vm.highlightLinkColorLocal),callback:function ($$v) {_vm.highlightLinkColorLocal=$$v},expression:\"highlightLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.highlightLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.popover')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"popover\",\"label\":_vm.$t('settings.background'),\"fallback\":_vm.previewTheme.colors.popover},model:{value:(_vm.popoverColorLocal),callback:function ($$v) {_vm.popoverColorLocal=$$v},expression:\"popoverColorLocal\"}}),_vm._v(\" \"),_c('OpacityInput',{attrs:{\"name\":\"popoverOpacity\",\"fallback\":_vm.previewTheme.opacity.popover,\"disabled\":_vm.popoverOpacityLocal === 'transparent'},model:{value:(_vm.popoverOpacityLocal),callback:function ($$v) {_vm.popoverOpacityLocal=$$v},expression:\"popoverOpacityLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"popoverText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.popoverText},model:{value:(_vm.popoverTextColorLocal),callback:function ($$v) {_vm.popoverTextColorLocal=$$v},expression:\"popoverTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.popoverText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"popoverLink\",\"label\":_vm.$t('settings.links'),\"fallback\":_vm.previewTheme.colors.popoverLink},model:{value:(_vm.popoverLinkColorLocal),callback:function ($$v) {_vm.popoverLinkColorLocal=$$v},expression:\"popoverLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.popoverLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.selectedPost')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedPost\",\"label\":_vm.$t('settings.background'),\"fallback\":_vm.previewTheme.colors.selectedPost},model:{value:(_vm.selectedPostColorLocal),callback:function ($$v) {_vm.selectedPostColorLocal=$$v},expression:\"selectedPostColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedPostText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.selectedPostText},model:{value:(_vm.selectedPostTextColorLocal),callback:function ($$v) {_vm.selectedPostTextColorLocal=$$v},expression:\"selectedPostTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.selectedPostText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedPostLink\",\"label\":_vm.$t('settings.links'),\"fallback\":_vm.previewTheme.colors.selectedPostLink},model:{value:(_vm.selectedPostLinkColorLocal),callback:function ($$v) {_vm.selectedPostLinkColorLocal=$$v},expression:\"selectedPostLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.selectedPostLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.selectedMenu')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedMenu\",\"label\":_vm.$t('settings.background'),\"fallback\":_vm.previewTheme.colors.selectedMenu},model:{value:(_vm.selectedMenuColorLocal),callback:function ($$v) {_vm.selectedMenuColorLocal=$$v},expression:\"selectedMenuColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedMenuText\",\"label\":_vm.$t('settings.text'),\"fallback\":_vm.previewTheme.colors.selectedMenuText},model:{value:(_vm.selectedMenuTextColorLocal),callback:function ($$v) {_vm.selectedMenuTextColorLocal=$$v},expression:\"selectedMenuTextColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.selectedMenuText}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"selectedMenuLink\",\"label\":_vm.$t('settings.links'),\"fallback\":_vm.previewTheme.colors.selectedMenuLink},model:{value:(_vm.selectedMenuLinkColorLocal),callback:function ($$v) {_vm.selectedMenuLinkColorLocal=$$v},expression:\"selectedMenuLinkColorLocal\"}}),_vm._v(\" \"),_c('ContrastRatio',{attrs:{\"contrast\":_vm.previewContrast.selectedMenuLink}})],1),_vm._v(\" \"),_c('div',{staticClass:\"color-item\"},[_c('h4',[_vm._v(_vm._s(_vm.$t('chats.chats')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatBgColor\",\"fallback\":_vm.previewTheme.colors.bg,\"label\":_vm.$t('settings.background')},model:{value:(_vm.chatBgColorLocal),callback:function ($$v) {_vm.chatBgColorLocal=$$v},expression:\"chatBgColorLocal\"}}),_vm._v(\" \"),_c('h5',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.chat.incoming')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageIncomingBgColor\",\"fallback\":_vm.previewTheme.colors.bg,\"label\":_vm.$t('settings.background')},model:{value:(_vm.chatMessageIncomingBgColorLocal),callback:function ($$v) {_vm.chatMessageIncomingBgColorLocal=$$v},expression:\"chatMessageIncomingBgColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageIncomingTextColor\",\"fallback\":_vm.previewTheme.colors.text,\"label\":_vm.$t('settings.text')},model:{value:(_vm.chatMessageIncomingTextColorLocal),callback:function ($$v) {_vm.chatMessageIncomingTextColorLocal=$$v},expression:\"chatMessageIncomingTextColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageIncomingLinkColor\",\"fallback\":_vm.previewTheme.colors.link,\"label\":_vm.$t('settings.links')},model:{value:(_vm.chatMessageIncomingLinkColorLocal),callback:function ($$v) {_vm.chatMessageIncomingLinkColorLocal=$$v},expression:\"chatMessageIncomingLinkColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageIncomingBorderLinkColor\",\"fallback\":_vm.previewTheme.colors.fg,\"label\":_vm.$t('settings.style.advanced_colors.chat.border')},model:{value:(_vm.chatMessageIncomingBorderColorLocal),callback:function ($$v) {_vm.chatMessageIncomingBorderColorLocal=$$v},expression:\"chatMessageIncomingBorderColorLocal\"}}),_vm._v(\" \"),_c('h5',[_vm._v(_vm._s(_vm.$t('settings.style.advanced_colors.chat.outgoing')))]),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageOutgoingBgColor\",\"fallback\":_vm.previewTheme.colors.bg,\"label\":_vm.$t('settings.background')},model:{value:(_vm.chatMessageOutgoingBgColorLocal),callback:function ($$v) {_vm.chatMessageOutgoingBgColorLocal=$$v},expression:\"chatMessageOutgoingBgColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageOutgoingTextColor\",\"fallback\":_vm.previewTheme.colors.text,\"label\":_vm.$t('settings.text')},model:{value:(_vm.chatMessageOutgoingTextColorLocal),callback:function ($$v) {_vm.chatMessageOutgoingTextColorLocal=$$v},expression:\"chatMessageOutgoingTextColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageOutgoingLinkColor\",\"fallback\":_vm.previewTheme.colors.link,\"label\":_vm.$t('settings.links')},model:{value:(_vm.chatMessageOutgoingLinkColorLocal),callback:function ($$v) {_vm.chatMessageOutgoingLinkColorLocal=$$v},expression:\"chatMessageOutgoingLinkColorLocal\"}}),_vm._v(\" \"),_c('ColorInput',{attrs:{\"name\":\"chatMessageOutgoingBorderLinkColor\",\"fallback\":_vm.previewTheme.colors.bg,\"label\":_vm.$t('settings.style.advanced_colors.chat.border')},model:{value:(_vm.chatMessageOutgoingBorderColorLocal),callback:function ($$v) {_vm.chatMessageOutgoingBorderColorLocal=$$v},expression:\"chatMessageOutgoingBorderColorLocal\"}})],1)]),_vm._v(\" \"),_c('div',{staticClass:\"radius-container\",attrs:{\"label\":_vm.$t('settings.style.radii._tab_label')}},[_c('div',{staticClass:\"tab-header\"},[_c('p',[_vm._v(_vm._s(_vm.$t('settings.radii_help')))]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearRoundness}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_all'))+\"\\n \")])]),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"btnRadius\",\"label\":_vm.$t('settings.btnRadius'),\"fallback\":_vm.previewTheme.radii.btn,\"max\":\"16\",\"hard-min\":\"0\"},model:{value:(_vm.btnRadiusLocal),callback:function ($$v) {_vm.btnRadiusLocal=$$v},expression:\"btnRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"inputRadius\",\"label\":_vm.$t('settings.inputRadius'),\"fallback\":_vm.previewTheme.radii.input,\"max\":\"9\",\"hard-min\":\"0\"},model:{value:(_vm.inputRadiusLocal),callback:function ($$v) {_vm.inputRadiusLocal=$$v},expression:\"inputRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"checkboxRadius\",\"label\":_vm.$t('settings.checkboxRadius'),\"fallback\":_vm.previewTheme.radii.checkbox,\"max\":\"16\",\"hard-min\":\"0\"},model:{value:(_vm.checkboxRadiusLocal),callback:function ($$v) {_vm.checkboxRadiusLocal=$$v},expression:\"checkboxRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"panelRadius\",\"label\":_vm.$t('settings.panelRadius'),\"fallback\":_vm.previewTheme.radii.panel,\"max\":\"50\",\"hard-min\":\"0\"},model:{value:(_vm.panelRadiusLocal),callback:function ($$v) {_vm.panelRadiusLocal=$$v},expression:\"panelRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"avatarRadius\",\"label\":_vm.$t('settings.avatarRadius'),\"fallback\":_vm.previewTheme.radii.avatar,\"max\":\"28\",\"hard-min\":\"0\"},model:{value:(_vm.avatarRadiusLocal),callback:function ($$v) {_vm.avatarRadiusLocal=$$v},expression:\"avatarRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"avatarAltRadius\",\"label\":_vm.$t('settings.avatarAltRadius'),\"fallback\":_vm.previewTheme.radii.avatarAlt,\"max\":\"28\",\"hard-min\":\"0\"},model:{value:(_vm.avatarAltRadiusLocal),callback:function ($$v) {_vm.avatarAltRadiusLocal=$$v},expression:\"avatarAltRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"attachmentRadius\",\"label\":_vm.$t('settings.attachmentRadius'),\"fallback\":_vm.previewTheme.radii.attachment,\"max\":\"50\",\"hard-min\":\"0\"},model:{value:(_vm.attachmentRadiusLocal),callback:function ($$v) {_vm.attachmentRadiusLocal=$$v},expression:\"attachmentRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"tooltipRadius\",\"label\":_vm.$t('settings.tooltipRadius'),\"fallback\":_vm.previewTheme.radii.tooltip,\"max\":\"50\",\"hard-min\":\"0\"},model:{value:(_vm.tooltipRadiusLocal),callback:function ($$v) {_vm.tooltipRadiusLocal=$$v},expression:\"tooltipRadiusLocal\"}}),_vm._v(\" \"),_c('RangeInput',{attrs:{\"name\":\"chatMessageRadius\",\"label\":_vm.$t('settings.chatMessageRadius'),\"fallback\":_vm.previewTheme.radii.chatMessage || 2,\"max\":\"50\",\"hard-min\":\"0\"},model:{value:(_vm.chatMessageRadiusLocal),callback:function ($$v) {_vm.chatMessageRadiusLocal=$$v},expression:\"chatMessageRadiusLocal\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"shadow-container\",attrs:{\"label\":_vm.$t('settings.style.shadows._tab_label')}},[_c('div',{staticClass:\"tab-header shadow-selector\"},[_c('div',{staticClass:\"select-container\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.shadows.component'))+\"\\n \"),_c('label',{staticClass:\"select\",attrs:{\"for\":\"shadow-switcher\"}},[_c('select',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.shadowSelected),expression:\"shadowSelected\"}],staticClass:\"shadow-switcher\",attrs:{\"id\":\"shadow-switcher\"},on:{\"change\":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = \"_value\" in o ? o._value : o.value;return val}); _vm.shadowSelected=$event.target.multiple ? $$selectedVal : $$selectedVal[0]}}},_vm._l((_vm.shadowsAvailable),function(shadow){return _c('option',{key:shadow,domProps:{\"value\":shadow}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.shadows.components.' + shadow))+\"\\n \")])}),0),_vm._v(\" \"),_c('i',{staticClass:\"icon-down-open\"})])]),_vm._v(\" \"),_c('div',{staticClass:\"override\"},[_c('label',{staticClass:\"label\",attrs:{\"for\":\"override\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.shadows.override'))+\"\\n \")]),_vm._v(\" \"),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.currentShadowOverriden),expression:\"currentShadowOverriden\"}],staticClass:\"input-override\",attrs:{\"id\":\"override\",\"name\":\"override\",\"type\":\"checkbox\"},domProps:{\"checked\":Array.isArray(_vm.currentShadowOverriden)?_vm._i(_vm.currentShadowOverriden,null)>-1:(_vm.currentShadowOverriden)},on:{\"change\":function($event){var $$a=_vm.currentShadowOverriden,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.currentShadowOverriden=$$a.concat([$$v]))}else{$$i>-1&&(_vm.currentShadowOverriden=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.currentShadowOverriden=$$c}}}}),_vm._v(\" \"),_c('label',{staticClass:\"checkbox-label\",attrs:{\"for\":\"override\"}})]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearShadows}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_all'))+\"\\n \")])]),_vm._v(\" \"),_c('ShadowControl',{attrs:{\"ready\":!!_vm.currentShadowFallback,\"fallback\":_vm.currentShadowFallback},model:{value:(_vm.currentShadow),callback:function ($$v) {_vm.currentShadow=$$v},expression:\"currentShadow\"}}),_vm._v(\" \"),(_vm.shadowSelected === 'avatar' || _vm.shadowSelected === 'avatarStatus')?_c('div',[_c('i18n',{attrs:{\"path\":\"settings.style.shadows.filter_hint.always_drop_shadow\",\"tag\":\"p\"}},[_c('code',[_vm._v(\"filter: drop-shadow()\")])]),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.style.shadows.filter_hint.avatar_inset')))]),_vm._v(\" \"),_c('i18n',{attrs:{\"path\":\"settings.style.shadows.filter_hint.drop_shadow_syntax\",\"tag\":\"p\"}},[_c('code',[_vm._v(\"drop-shadow\")]),_vm._v(\" \"),_c('code',[_vm._v(\"spread-radius\")]),_vm._v(\" \"),_c('code',[_vm._v(\"inset\")])]),_vm._v(\" \"),_c('i18n',{attrs:{\"path\":\"settings.style.shadows.filter_hint.inset_classic\",\"tag\":\"p\"}},[_c('code',[_vm._v(\"box-shadow\")])]),_vm._v(\" \"),_c('p',[_vm._v(_vm._s(_vm.$t('settings.style.shadows.filter_hint.spread_zero')))])],1):_vm._e()],1),_vm._v(\" \"),_c('div',{staticClass:\"fonts-container\",attrs:{\"label\":_vm.$t('settings.style.fonts._tab_label')}},[_c('div',{staticClass:\"tab-header\"},[_c('p',[_vm._v(_vm._s(_vm.$t('settings.style.fonts.help')))]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearFonts}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.clear_all'))+\"\\n \")])]),_vm._v(\" \"),_c('FontControl',{attrs:{\"name\":\"ui\",\"label\":_vm.$t('settings.style.fonts.components.interface'),\"fallback\":_vm.previewTheme.fonts.interface,\"no-inherit\":\"1\"},model:{value:(_vm.fontsLocal.interface),callback:function ($$v) {_vm.$set(_vm.fontsLocal, \"interface\", $$v)},expression:\"fontsLocal.interface\"}}),_vm._v(\" \"),_c('FontControl',{attrs:{\"name\":\"input\",\"label\":_vm.$t('settings.style.fonts.components.input'),\"fallback\":_vm.previewTheme.fonts.input},model:{value:(_vm.fontsLocal.input),callback:function ($$v) {_vm.$set(_vm.fontsLocal, \"input\", $$v)},expression:\"fontsLocal.input\"}}),_vm._v(\" \"),_c('FontControl',{attrs:{\"name\":\"post\",\"label\":_vm.$t('settings.style.fonts.components.post'),\"fallback\":_vm.previewTheme.fonts.post},model:{value:(_vm.fontsLocal.post),callback:function ($$v) {_vm.$set(_vm.fontsLocal, \"post\", $$v)},expression:\"fontsLocal.post\"}}),_vm._v(\" \"),_c('FontControl',{attrs:{\"name\":\"postCode\",\"label\":_vm.$t('settings.style.fonts.components.postCode'),\"fallback\":_vm.previewTheme.fonts.postCode},model:{value:(_vm.fontsLocal.postCode),callback:function ($$v) {_vm.$set(_vm.fontsLocal, \"postCode\", $$v)},expression:\"fontsLocal.postCode\"}})],1)])],1),_vm._v(\" \"),_c('div',{staticClass:\"apply-container\"},[_c('button',{staticClass:\"btn submit\",attrs:{\"disabled\":!_vm.themeValid},on:{\"click\":_vm.setCustomTheme}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('general.apply'))+\"\\n \")]),_vm._v(\" \"),_c('button',{staticClass:\"btn\",on:{\"click\":_vm.clearAll}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('settings.style.switcher.reset'))+\"\\n \")])])],1)}\nvar staticRenderFns = []\nexport { render, staticRenderFns }","import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'\n\nimport DataImportExportTab from './tabs/data_import_export_tab.vue'\nimport MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'\nimport NotificationsTab from './tabs/notifications_tab.vue'\nimport FilteringTab from './tabs/filtering_tab.vue'\nimport SecurityTab from './tabs/security_tab/security_tab.vue'\nimport ProfileTab from './tabs/profile_tab.vue'\nimport GeneralTab from './tabs/general_tab.vue'\nimport VersionTab from './tabs/version_tab.vue'\nimport ThemeTab from './tabs/theme_tab/theme_tab.vue'\n\nconst SettingsModalContent = {\n components: {\n TabSwitcher,\n\n DataImportExportTab,\n MutesAndBlocksTab,\n NotificationsTab,\n FilteringTab,\n SecurityTab,\n ProfileTab,\n GeneralTab,\n VersionTab,\n ThemeTab\n },\n computed: {\n isLoggedIn () {\n return !!this.$store.state.users.currentUser\n },\n open () {\n return this.$store.state.interface.settingsModalState !== 'hidden'\n }\n },\n methods: {\n onOpen () {\n const targetTab = this.$store.state.interface.settingsModalTargetTab\n // We're being told to open in specific tab\n if (targetTab) {\n const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => {\n return elm.data && elm.data.attrs['data-tab-name'] === targetTab\n })\n if (tabIndex >= 0) {\n this.$refs.tabSwitcher.setTab(tabIndex)\n }\n }\n // Clear the state of target tab, so that next time settings is opened\n // it doesn't force it.\n this.$store.dispatch('clearSettingsModalTargetTab')\n }\n },\n mounted () {\n this.onOpen()\n },\n watch: {\n open: function (value) {\n if (value) this.onOpen()\n }\n }\n}\n\nexport default SettingsModalContent\n","function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!./settings_modal_content.scss\")\n}\n/* script */\nexport * from \"!!babel-loader!./settings_modal_content.js\"\nimport __vue_script__ from \"!!babel-loader!./settings_modal_content.js\"/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-da72a86e\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./settings_modal_content.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('tab-switcher',{ref:\"tabSwitcher\",staticClass:\"settings_tab-switcher\",attrs:{\"side-tab-bar\":true,\"scrollable-tabs\":true}},[_c('div',{attrs:{\"label\":_vm.$t('settings.general'),\"icon\":\"wrench\",\"data-tab-name\":\"general\"}},[_c('GeneralTab')],1),_vm._v(\" \"),(_vm.isLoggedIn)?_c('div',{attrs:{\"label\":_vm.$t('settings.profile_tab'),\"icon\":\"user\",\"data-tab-name\":\"profile\"}},[_c('ProfileTab')],1):_vm._e(),_vm._v(\" \"),(_vm.isLoggedIn)?_c('div',{attrs:{\"label\":_vm.$t('settings.security_tab'),\"icon\":\"lock\",\"data-tab-name\":\"security\"}},[_c('SecurityTab')],1):_vm._e(),_vm._v(\" \"),_c('div',{attrs:{\"label\":_vm.$t('settings.filtering'),\"icon\":\"filter\",\"data-tab-name\":\"filtering\"}},[_c('FilteringTab')],1),_vm._v(\" \"),_c('div',{attrs:{\"label\":_vm.$t('settings.theme'),\"icon\":\"brush\",\"data-tab-name\":\"theme\"}},[_c('ThemeTab')],1),_vm._v(\" \"),(_vm.isLoggedIn)?_c('div',{attrs:{\"label\":_vm.$t('settings.notifications'),\"icon\":\"bell-ringing-o\",\"data-tab-name\":\"notifications\"}},[_c('NotificationsTab')],1):_vm._e(),_vm._v(\" \"),(_vm.isLoggedIn)?_c('div',{attrs:{\"label\":_vm.$t('settings.data_import_export_tab'),\"icon\":\"download\",\"data-tab-name\":\"dataImportExport\"}},[_c('DataImportExportTab')],1):_vm._e(),_vm._v(\" \"),(_vm.isLoggedIn)?_c('div',{attrs:{\"label\":_vm.$t('settings.mutes_and_blocks'),\"fullHeight\":true,\"icon\":\"eye-off\",\"data-tab-name\":\"mutesAndBlocks\"}},[_c('MutesAndBlocksTab')],1):_vm._e(),_vm._v(\" \"),_c('div',{attrs:{\"label\":_vm.$t('settings.version.title'),\"icon\":\"info-circled\",\"data-tab-name\":\"version\"}},[_c('VersionTab')],1)])}\nvar staticRenderFns = []\nexport { render, staticRenderFns }"],"sourceRoot":""}
\ No newline at end of file
diff --git a/priv/static/static/js/app.55d173dc5e39519aa518.js b/priv/static/static/js/app.55d173dc5e39519aa518.js
deleted file mode 100644
index d04ae3499..000000000
--- a/priv/static/static/js/app.55d173dc5e39519aa518.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(t){function e(e){for(var i,o,a=e[0],c=e[1],l=e[2],u=0,p=[];u for paragraphs, GS uses
between them)\n // as well as approximate line count by counting characters and approximating ~80\n // per line.\n //\n // Using max-height + overflow: auto for status components resulted in false positives\n // very often with japanese characters, and it was very annoying.\n tallStatus () {\n const lengthScore = this.status.statusnet_html.split(/\n \n \n \n )\n }\n return (\n \n {slot.data.attrs.label ? '' : slot.data.attrs.label}\n \n
\n \n )\n })\n\n const contents = this.$slots.default.map((slot, index) => {\n if (!slot.tag) return\n const active = this.activeIndex === index\n const classes = [ active ? 'active' : 'hidden' ]\n if (slot.data.attrs.fullHeight) {\n classes.push('full-height')\n }\n const renderSlot = (!this.renderOnlyFocused || active)\n ? slot\n : ''\n\n return (\n \n {\n this.sideTabBar\n ? \n )\n })\n\n return (\n {slot.data.attrs.label}
\n : ''\n }\n {renderSlot}\n \n \n )\n }\n})\n","import isFunction from 'lodash/isFunction'\n\nconst getComponentOptions = (Component) => (isFunction(Component)) ? Component.options : Component\n\nconst getComponentProps = (Component) => getComponentOptions(Component).props\n\nexport {\n getComponentOptions,\n getComponentProps\n}\n","import { reduce, find } from 'lodash'\n\nexport const replaceWord = (str, toReplace, replacement) => {\n return str.slice(0, toReplace.start) + replacement + str.slice(toReplace.end)\n}\n\nexport const wordAtPosition = (str, pos) => {\n const words = splitByWhitespaceBoundary(str)\n const wordsWithPosition = addPositionToWords(words)\n\n return find(wordsWithPosition, ({ start, end }) => start <= pos && end > pos)\n}\n\nexport const addPositionToWords = (words) => {\n return reduce(words, (result, word) => {\n const data = {\n word,\n start: 0,\n end: word.length\n }\n\n if (result.length > 0) {\n const previous = result.pop()\n\n data.start += previous.end\n data.end += previous.end\n\n result.push(previous)\n }\n\n result.push(data)\n\n return result\n }, [])\n}\n\nexport const splitByWhitespaceBoundary = (str) => {\n let result = []\n let currentWord = ''\n for (let i = 0; i < str.length; i++) {\n const currentChar = str[i]\n // Starting a new word\n if (!currentWord) {\n currentWord = currentChar\n continue\n }\n // current character is whitespace while word isn't, or vice versa:\n // add our current word to results, start over the current word.\n if (!!currentChar.trim() !== !!currentWord.trim()) {\n result.push(currentWord)\n currentWord = currentChar\n continue\n }\n currentWord += currentChar\n }\n // Add the last word we were working on\n if (currentWord) {\n result.push(currentWord)\n }\n return result\n}\n\nconst completion = {\n wordAtPosition,\n addPositionToWords,\n splitByWhitespaceBoundary,\n replaceWord\n}\n\nexport default completion\n","import Checkbox from '../checkbox/checkbox.vue'\n\n// At widest, approximately 20 emoji are visible in a row,\n// loading 3 rows, could be overkill for narrow picker\nconst LOAD_EMOJI_BY = 60\n\n// When to start loading new batch emoji, in pixels\nconst LOAD_EMOJI_MARGIN = 64\n\nconst filterByKeyword = (list, keyword = '') => {\n return list.filter(x => x.displayText.includes(keyword))\n}\n\nconst EmojiPicker = {\n props: {\n enableStickerPicker: {\n required: false,\n type: Boolean,\n default: false\n }\n },\n data () {\n return {\n keyword: '',\n activeGroup: 'custom',\n showingStickers: false,\n groupsScrolledClass: 'scrolled-top',\n keepOpen: false,\n customEmojiBufferSlice: LOAD_EMOJI_BY,\n customEmojiTimeout: null,\n customEmojiLoadAllConfirmed: false\n }\n },\n components: {\n StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),\n Checkbox\n },\n methods: {\n onStickerUploaded (e) {\n this.$emit('sticker-uploaded', e)\n },\n onStickerUploadFailed (e) {\n this.$emit('sticker-upload-failed', e)\n },\n onEmoji (emoji) {\n const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement\n this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })\n },\n onScroll (e) {\n const target = (e && e.target) || this.$refs['emoji-groups']\n this.updateScrolledClass(target)\n this.scrolledGroup(target)\n this.triggerLoadMore(target)\n },\n highlight (key) {\n const ref = this.$refs['group-' + key]\n const top = ref[0].offsetTop\n this.setShowStickers(false)\n this.activeGroup = key\n this.$nextTick(() => {\n this.$refs['emoji-groups'].scrollTop = top + 1\n })\n },\n updateScrolledClass (target) {\n if (target.scrollTop <= 5) {\n this.groupsScrolledClass = 'scrolled-top'\n } else if (target.scrollTop >= target.scrollTopMax - 5) {\n this.groupsScrolledClass = 'scrolled-bottom'\n } else {\n this.groupsScrolledClass = 'scrolled-middle'\n }\n },\n triggerLoadMore (target) {\n const ref = this.$refs['group-end-custom'][0]\n if (!ref) return\n const bottom = ref.offsetTop + ref.offsetHeight\n\n const scrollerBottom = target.scrollTop + target.clientHeight\n const scrollerTop = target.scrollTop\n const scrollerMax = target.scrollHeight\n\n // Loads more emoji when they come into view\n const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN\n // Always load when at the very top in case there's no scroll space yet\n const atTop = scrollerTop < 5\n // Don't load when looking at unicode category or at the very bottom\n const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax\n if (!bottomAboveViewport && (approachingBottom || atTop)) {\n this.loadEmoji()\n }\n },\n scrolledGroup (target) {\n const top = target.scrollTop + 5\n this.$nextTick(() => {\n this.emojisView.forEach(group => {\n const ref = this.$refs['group-' + group.id]\n if (ref[0].offsetTop <= top) {\n this.activeGroup = group.id\n }\n })\n })\n },\n loadEmoji () {\n const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length\n\n if (allLoaded) {\n return\n }\n\n this.customEmojiBufferSlice += LOAD_EMOJI_BY\n },\n startEmojiLoad (forceUpdate = false) {\n if (!forceUpdate) {\n this.keyword = ''\n }\n this.$nextTick(() => {\n this.$refs['emoji-groups'].scrollTop = 0\n })\n const bufferSize = this.customEmojiBuffer.length\n const bufferPrefilledAll = bufferSize === this.filteredEmoji.length\n if (bufferPrefilledAll && !forceUpdate) {\n return\n }\n this.customEmojiBufferSlice = LOAD_EMOJI_BY\n },\n toggleStickers () {\n this.showingStickers = !this.showingStickers\n },\n setShowStickers (value) {\n this.showingStickers = value\n }\n },\n watch: {\n keyword () {\n this.customEmojiLoadAllConfirmed = false\n this.onScroll()\n this.startEmojiLoad(true)\n }\n },\n computed: {\n activeGroupView () {\n return this.showingStickers ? '' : this.activeGroup\n },\n stickersAvailable () {\n if (this.$store.state.instance.stickers) {\n return this.$store.state.instance.stickers.length > 0\n }\n return 0\n },\n filteredEmoji () {\n return filterByKeyword(\n this.$store.state.instance.customEmoji || [],\n this.keyword\n )\n },\n customEmojiBuffer () {\n return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)\n },\n emojis () {\n const standardEmojis = this.$store.state.instance.emoji || []\n const customEmojis = this.customEmojiBuffer\n\n return [\n {\n id: 'custom',\n text: this.$t('emoji.custom'),\n icon: 'icon-smile',\n emojis: customEmojis\n },\n {\n id: 'standard',\n text: this.$t('emoji.unicode'),\n icon: 'icon-picture',\n emojis: filterByKeyword(standardEmojis, this.keyword)\n }\n ]\n },\n emojisView () {\n return this.emojis.filter(value => value.emojis.length > 0)\n },\n stickerPickerEnabled () {\n return (this.$store.state.instance.stickers || []).length !== 0\n }\n }\n}\n\nexport default EmojiPicker\n","function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!./emoji_picker.scss\")\n}\n/* script */\nexport * from \"!!babel-loader!./emoji_picker.js\"\nimport __vue_script__ from \"!!babel-loader!./emoji_picker.js\"/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-47d21b3b\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./emoji_picker.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"emoji-picker panel panel-default panel-body\"},[_c('div',{staticClass:\"heading\"},[_c('span',{staticClass:\"emoji-tabs\"},_vm._l((_vm.emojis),function(group){return _c('span',{key:group.id,staticClass:\"emoji-tabs-item\",class:{\n active: _vm.activeGroupView === group.id,\n disabled: group.emojis.length === 0\n },attrs:{\"title\":group.text},on:{\"click\":function($event){$event.preventDefault();return _vm.highlight(group.id)}}},[_c('i',{class:group.icon})])}),0),_vm._v(\" \"),(_vm.stickerPickerEnabled)?_c('span',{staticClass:\"additional-tabs\"},[_c('span',{staticClass:\"stickers-tab-icon additional-tabs-item\",class:{active: _vm.showingStickers},attrs:{\"title\":_vm.$t('emoji.stickers')},on:{\"click\":function($event){$event.preventDefault();return _vm.toggleStickers($event)}}},[_c('i',{staticClass:\"icon-star\"})])]):_vm._e()]),_vm._v(\" \"),_c('div',{staticClass:\"content\"},[_c('div',{staticClass:\"emoji-content\",class:{hidden: _vm.showingStickers}},[_c('div',{staticClass:\"emoji-search\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.keyword),expression:\"keyword\"}],staticClass:\"form-control\",attrs:{\"type\":\"text\",\"placeholder\":_vm.$t('emoji.search_emoji')},domProps:{\"value\":(_vm.keyword)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.keyword=$event.target.value}}})]),_vm._v(\" \"),_c('div',{ref:\"emoji-groups\",staticClass:\"emoji-groups\",class:_vm.groupsScrolledClass,on:{\"scroll\":_vm.onScroll}},_vm._l((_vm.emojisView),function(group){return _c('div',{key:group.id,staticClass:\"emoji-group\"},[_c('h6',{ref:'group-' + group.id,refInFor:true,staticClass:\"emoji-group-title\"},[_vm._v(\"\\n \"+_vm._s(group.text)+\"\\n \")]),_vm._v(\" \"),_vm._l((group.emojis),function(emoji){return _c('span',{key:group.id + emoji.displayText,staticClass:\"emoji-item\",attrs:{\"title\":emoji.displayText},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.onEmoji(emoji)}}},[(!emoji.imageUrl)?_c('span',[_vm._v(_vm._s(emoji.replacement))]):_c('img',{attrs:{\"src\":emoji.imageUrl}})])}),_vm._v(\" \"),_c('span',{ref:'group-end-' + group.id,refInFor:true})],2)}),0),_vm._v(\" \"),_c('div',{staticClass:\"keep-open\"},[_c('Checkbox',{model:{value:(_vm.keepOpen),callback:function ($$v) {_vm.keepOpen=$$v},expression:\"keepOpen\"}},[_vm._v(\"\\n \"+_vm._s(_vm.$t('emoji.keep_open'))+\"\\n \")])],1)]),_vm._v(\" \"),(_vm.showingStickers)?_c('div',{staticClass:\"stickers-content\"},[_c('sticker-picker',{on:{\"uploaded\":_vm.onStickerUploaded,\"upload-failed\":_vm.onStickerUploadFailed}})],1):_vm._e()])])}\nvar staticRenderFns = []\nexport { render, staticRenderFns }","import Completion from '../../services/completion/completion.js'\nimport EmojiPicker from '../emoji_picker/emoji_picker.vue'\nimport { take } from 'lodash'\nimport { findOffset } from '../../services/offset_finder/offset_finder.service.js'\n\n/**\n * EmojiInput - augmented inputs for emoji and autocomplete support in inputs\n * without having to give up the comfort of and elements\n *\n * Intended usage is:\n * \n {tabs}\n \n \n {contents}\n \n