prepare class names for a day in the future, when we'll move to tailwind
This commit is contained in:
parent
1af80096c7
commit
76c4599dee
@ -12,7 +12,7 @@
|
||||
|
||||
<div
|
||||
v-if="settingsInitialized && uwWindowVisible"
|
||||
class="uw-window flex flex-column uw-clickable"
|
||||
class="uw-window flex flex-col uw-clickable"
|
||||
:class="{'fade-out': uwWindowFadeOut}"
|
||||
@mouseenter="cancelUwWindowHide"
|
||||
@mouseleave="hideUwWindow()"
|
||||
|
@ -10,7 +10,7 @@
|
||||
further than that.
|
||||
-->
|
||||
<div v-if="settingsInitialized"
|
||||
class="popup flex flex-column no-overflow"
|
||||
class="popup flex flex-col no-overflow"
|
||||
:class="{'popup-chrome': ! BrowserDetect?.firefox}"
|
||||
>
|
||||
<div class="flex-row flex-nogrow flex-noshrink relative header"
|
||||
|
@ -6,7 +6,7 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col, .flex-column {
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="popup-panel flex flex-column uw-clickable h-full"
|
||||
class="popup-panel flex flex-col uw-clickable h-full"
|
||||
>
|
||||
<div class="popup-window-header">
|
||||
<div class="header-title">
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-main flex flex-row">
|
||||
<div class="tab-row flex flex-column grow-0 shrink-0">
|
||||
<div class="tab-row flex flex-col grow-0 shrink-0">
|
||||
<div
|
||||
v-for="tab of tabs"
|
||||
:key="tab.id"
|
||||
@ -85,7 +85,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content flex flex-column">
|
||||
<div class="content flex flex-col">
|
||||
<!-- autodetection warning -->
|
||||
|
||||
<div class="warning-area">
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column w-full h-full gap-2">
|
||||
<div class="flex flex-col w-full h-full gap-2">
|
||||
<h1>About Ultrawidify</h1>
|
||||
<p>
|
||||
Ultrawidify version: <b>{{addonVersion}}</b><br>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column tab-root">
|
||||
<div class="flex flex-col tab-root">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
|
||||
<!-- AARD performance metrics -->
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column w-100">
|
||||
<div class="flex flex-col w-100">
|
||||
|
||||
<!-- TAB ROW -->
|
||||
<div class="flex flex-row">
|
||||
|
@ -4,7 +4,7 @@
|
||||
<div style="margin-top: 1rem; margin-bottom: 1rem;">
|
||||
<b>NOTE:</b> Sites not on this list use default extension settings.
|
||||
</div>
|
||||
<div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-column container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
|
||||
<div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex-grow pointer">
|
||||
<b>{{ site.key }}</b>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<!--
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column tab-root">
|
||||
<div class="flex flex-col tab-root">
|
||||
<!-- ADD ANY OPTION BARS HERE -->
|
||||
|
||||
<!-- The rest of the tab -->
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
|
||||
|
||||
<div class="">
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column" style="position: relative; width: 100%;">
|
||||
<div class="flex flex-col" style="position: relative; width: 100%;">
|
||||
<!-- 'Change UI' options is a tiny bit in upper right corner. -->
|
||||
<div
|
||||
class="options-bar flex flex-row"
|
||||
|
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="command-details">
|
||||
<div class="flex flex-column cmd-container cd-pad">
|
||||
<div class="flex flex-col cmd-container cd-pad">
|
||||
<div class="flex bold">
|
||||
Command:
|
||||
</div>
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
|
||||
<!-- SCOPES -->
|
||||
<div class="flex flex-column scopes-container cd-pad">
|
||||
<div class="flex flex-col scopes-container cd-pad">
|
||||
<div class="flex bold">Popup tabs:</div>
|
||||
|
||||
<!-- global scope -->
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column json-level-indent">
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div v-if="value_internal.key" class="item-key">
|
||||
"{{value_internal.key}}" <b>:</b>
|
||||
|
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="flex flex-column json-level-indent">
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div class="item-key-line">
|
||||
<template v-if="label">
|
||||
<b>
|
||||
<span class="item-key">"{{label}}"</span>
|
||||
:
|
||||
</b>
|
||||
</b>
|
||||
</template>
|
||||
<span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
|
||||
<template v-else><b>{</b></template>
|
||||
@ -88,4 +88,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./json.scss">
|
||||
</style>
|
||||
</style>
|
||||
|
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div v-if="!editing && !adding" class="flex flex-row">
|
||||
<div class="">
|
||||
<b>Query selector:</b> {{qs.string}}<br/>
|
||||
<b>Additional CSS:</b> {{qs.css || 'no style rules'}}
|
||||
</div>
|
||||
<div class="flex flex-column flex-nogrow">
|
||||
<div class="flex flex-col flex-nogrow">
|
||||
<a @click="editing = true">Edit</a>
|
||||
<a @click="$emit('delete')">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-row">
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex label-secondary form-label">
|
||||
Query selector:
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column flex-center">
|
||||
<div class="flex flex-col flex-center">
|
||||
<div class="flex flex-self-center">
|
||||
{{label}}
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column h100">
|
||||
<div class="flex flex-col h100">
|
||||
<div class="row">
|
||||
<span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column" style="padding-bottom: 20px">
|
||||
<div class="flex flex-col" style="padding-bottom: 20px">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="24" />
|
||||
<h1>Crop video:</h1>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column" style="padding-bottom: 20px; position: relative">
|
||||
<div class="flex flex-col" style="padding-bottom: 20px; position: relative">
|
||||
<!-- <div class="">
|
||||
<div class="label">Player picker</div>
|
||||
<div class="desc">
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="playerManualQs">
|
||||
<div v-if="!playerByNodeIndex" class="flex flex-column">
|
||||
<div v-if="!playerByNodeIndex" class="flex flex-col">
|
||||
<div class="">Query selectors for player:</div>
|
||||
<input type="text"
|
||||
v-model="playerQs"
|
||||
@ -115,7 +115,7 @@
|
||||
<div class="description">
|
||||
This css will be inserted into webpage every time it loads.
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<textarea
|
||||
v-model="playerCss"
|
||||
@change="updatePlayerCss"
|
||||
@ -135,7 +135,7 @@
|
||||
type="checkbox"
|
||||
/> Detect automatically
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex label-secondary form-label">Query selectors</div>
|
||||
<input type="text"
|
||||
v-model="videoQs"
|
||||
@ -144,7 +144,7 @@
|
||||
@blur="updateVideoQuerySelector"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex label-secondary form-label">Additional style for video element</div>
|
||||
<input type="text"
|
||||
v-model="videoCss"
|
||||
@ -160,10 +160,10 @@
|
||||
Sometimes, the extension may misbehave as a result of issues and bugs present in your browser, operating system or your GPU driver.
|
||||
Some of the issues can be fixed by limiting certain functionalities of this addon.
|
||||
</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
v-if="BrowserDetect.anyChromium"
|
||||
class="workaround flex flex-column"
|
||||
class="workaround flex flex-col"
|
||||
>
|
||||
<div class="flex label-secondary form-label">
|
||||
<input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column h100">
|
||||
<div class="flex flex-col h100">
|
||||
<div class="header flex-nogrow flex-noshrink">
|
||||
Ultrawidify has been updated.
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-column h100">
|
||||
<div class="flex flex-col h100">
|
||||
<div class="header flex-nogrow flex-noshrink">
|
||||
Thank you for installing Ultrawidify.
|
||||
</div>
|
||||
|
@ -23,7 +23,7 @@
|
||||
:class="{'blur': anyOpenedPopups}"
|
||||
>
|
||||
|
||||
<div class="header flex flex-column">
|
||||
<div class="header flex flex-col">
|
||||
<div class="flex extension-name text-sink-anchor">
|
||||
<div class="text-sink title-sink-pad w100 text-center">
|
||||
Ultrawidify
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
|
||||
<!-- MENU ITEMS HERE -->
|
||||
<div class="flex flex-column menu">
|
||||
<div class="flex flex-col menu">
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'general'}"
|
||||
@click="setSelectedTab('general')"
|
||||
@ -71,7 +71,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex content-area flex-column">
|
||||
<div class="flex content-area flex-col">
|
||||
<div class="flex content-title text-sink-anchor">
|
||||
<div class="text-sink title-sink-pad">
|
||||
{{selectedTabTitle}}
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="full-screen"
|
||||
@click="cancel()"
|
||||
>
|
||||
<div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
|
||||
<div class="dialog-box flex flex-col" @click="$event.stopPropagation()">
|
||||
<div>
|
||||
{{dialogText}}
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="full-screen"
|
||||
@click="cancel()"
|
||||
>
|
||||
<div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
|
||||
<div class="dialog-box flex flex-col" @click="$event.stopPropagation()">
|
||||
<div class="window-title">
|
||||
{{actionIndex < 0 ? 'Add new action' : 'Edit action'}}
|
||||
</div>
|
||||
@ -24,7 +24,7 @@
|
||||
</CommandAddEdit>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column section-pad">
|
||||
<div class="flex flex-col section-pad">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex label-secondary form-label">
|
||||
<span class="w100">
|
||||
@ -95,13 +95,13 @@
|
||||
@click.native="cancel()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShortcutButton from '../../common/components/ShortcutButton.vue'
|
||||
import ShortcutButton from '../../common/components/ShortcutButton.vue'
|
||||
import StretchType from '../../common/enums/StretchType.enum';
|
||||
import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
|
||||
import CommandChain from './command-builder/CommandChain';
|
||||
|
@ -24,7 +24,7 @@
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-col">
|
||||
<div class="action-item-category-header">
|
||||
Crop actions
|
||||
</div>
|
||||
|
@ -11,7 +11,7 @@
|
||||
@move-right="$emit('move-left', (index + 1))"
|
||||
>
|
||||
</CommandBlock>
|
||||
<div class="new-command h100 flex flex-column flex-center flex-cross-center"
|
||||
<div class="new-command h100 flex flex-col flex-center flex-cross-center"
|
||||
@click="$emit('new-command')"
|
||||
>
|
||||
<div><b>+</b></div>
|
||||
|
Loading…
Reference in New Issue
Block a user