From 76c4599dee23778ec90a1bdd3daa27469a461060 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 8 Jun 2024 03:23:34 +0200
Subject: [PATCH] prepare class names for a day in the future, when we'll move
 to tailwind

---
 src/csui/PlayerOverlay.vue                         |  2 +-
 src/csui/Popup.vue                                 |  2 +-
 src/csui/res/css/flex.scss                         |  2 +-
 src/csui/src/PlayerUIWindow.vue                    |  6 +++---
 src/csui/src/PlayerUiPanels/AboutPanel.vue         |  2 +-
 .../PlayerUiPanels/AutodetectionSettingsPanel.vue  |  2 +-
 .../src/PlayerUiPanels/BaseExtensionSettings.vue   |  2 +-
 .../ExtensionSettings/OtherSiteSettings.vue        |  2 +-
 .../VideoSettings/ZoomOptionsPanel.vue             |  2 +-
 .../src/PlayerUiPanels/PlayerDetectionPanel.vue    |  2 +-
 src/csui/src/PlayerUiPanels/SiteSettings.vue       |  2 +-
 src/csui/src/PlayerUiPanels/VideoSettings.vue      |  2 +-
 src/csui/src/components/ActionAlt.vue              |  4 ++--
 src/csui/src/components/JsonEditor/JsonArray.vue   |  2 +-
 src/csui/src/components/JsonEditor/JsonObject.vue  |  6 +++---
 src/csui/src/components/QuerySelectorSetting.vue   |  6 +++---
 src/csui/src/components/ShortcutButton.vue         |  2 +-
 src/csui/src/popup/panels/AboutPanel.vue           |  2 +-
 src/csui/src/popup/panels/PopupVideoSettings.vue   |  2 +-
 src/csui/src/popup/panels/SiteDetailsPanel.vue     | 14 +++++++-------
 src/install/first-time/App.vue                     |  2 +-
 src/install/updated/App.vue                        |  2 +-
 src/options/App.vue                                |  6 +++---
 src/options/common/ConfirmationPopup.vue           |  2 +-
 .../controls-settings/AddEditActionPopup.vue       |  8 ++++----
 src/options/controls-settings/ControlsSettings.vue |  2 +-
 .../command-builder/CommandChain.vue               |  2 +-
 27 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue
index 4f3fda9..a87955d 100644
--- a/src/csui/PlayerOverlay.vue
+++ b/src/csui/PlayerOverlay.vue
@@ -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()"
diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue
index 414142c..06917ac 100644
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@@ -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"
diff --git a/src/csui/res/css/flex.scss b/src/csui/res/css/flex.scss
index 9bbf1a6..e3dad40 100644
--- a/src/csui/res/css/flex.scss
+++ b/src/csui/res/css/flex.scss
@@ -6,7 +6,7 @@
   flex-direction: row;
 }
 
-.flex-col, .flex-column {
+.flex-col {
   flex-direction: column;
 }
 
diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index fc77539..8e372e1 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@@ -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">
diff --git a/src/csui/src/PlayerUiPanels/AboutPanel.vue b/src/csui/src/PlayerUiPanels/AboutPanel.vue
index dd80b68..84aa44d 100644
--- a/src/csui/src/PlayerUiPanels/AboutPanel.vue
+++ b/src/csui/src/PlayerUiPanels/AboutPanel.vue
@@ -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>
diff --git a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
index 5b6a508..d5c3b30 100644
--- a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
@@ -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 -->
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 4c4351a..99690c9 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -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">
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue
index 3e19c1a..29dd30f 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue
@@ -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>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
index 2861a0e..34e9894 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
@@ -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
diff --git a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
index 5167053..d45c511 100644
--- a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
@@ -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 -->
diff --git a/src/csui/src/PlayerUiPanels/SiteSettings.vue b/src/csui/src/PlayerUiPanels/SiteSettings.vue
index a0fc980..8fb27a7 100644
--- a/src/csui/src/PlayerUiPanels/SiteSettings.vue
+++ b/src/csui/src/PlayerUiPanels/SiteSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column">
+  <div class="flex flex-col">
 
 
     <div class="">
diff --git a/src/csui/src/PlayerUiPanels/VideoSettings.vue b/src/csui/src/PlayerUiPanels/VideoSettings.vue
index ab83390..c7b6806 100644
--- a/src/csui/src/PlayerUiPanels/VideoSettings.vue
+++ b/src/csui/src/PlayerUiPanels/VideoSettings.vue
@@ -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"
diff --git a/src/csui/src/components/ActionAlt.vue b/src/csui/src/components/ActionAlt.vue
index bbc8d88..4b06c7f 100644
--- a/src/csui/src/components/ActionAlt.vue
+++ b/src/csui/src/components/ActionAlt.vue
@@ -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 -->
diff --git a/src/csui/src/components/JsonEditor/JsonArray.vue b/src/csui/src/components/JsonEditor/JsonArray.vue
index f04ec13..4835132 100644
--- a/src/csui/src/components/JsonEditor/JsonArray.vue
+++ b/src/csui/src/components/JsonEditor/JsonArray.vue
@@ -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>
diff --git a/src/csui/src/components/JsonEditor/JsonObject.vue b/src/csui/src/components/JsonEditor/JsonObject.vue
index 9797c02..a34771e 100644
--- a/src/csui/src/components/JsonEditor/JsonObject.vue
+++ b/src/csui/src/components/JsonEditor/JsonObject.vue
@@ -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>
\ No newline at end of file
+</style>
diff --git a/src/csui/src/components/QuerySelectorSetting.vue b/src/csui/src/components/QuerySelectorSetting.vue
index 3f67375..66a917f 100644
--- a/src/csui/src/components/QuerySelectorSetting.vue
+++ b/src/csui/src/components/QuerySelectorSetting.vue
@@ -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:
diff --git a/src/csui/src/components/ShortcutButton.vue b/src/csui/src/components/ShortcutButton.vue
index c6537f8..1631f99 100644
--- a/src/csui/src/components/ShortcutButton.vue
+++ b/src/csui/src/components/ShortcutButton.vue
@@ -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>
diff --git a/src/csui/src/popup/panels/AboutPanel.vue b/src/csui/src/popup/panels/AboutPanel.vue
index c01970d..f12cd6b 100644
--- a/src/csui/src/popup/panels/AboutPanel.vue
+++ b/src/csui/src/popup/panels/AboutPanel.vue
@@ -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>
diff --git a/src/csui/src/popup/panels/PopupVideoSettings.vue b/src/csui/src/popup/panels/PopupVideoSettings.vue
index 2829d65..7ba3444 100644
--- a/src/csui/src/popup/panels/PopupVideoSettings.vue
+++ b/src/csui/src/popup/panels/PopupVideoSettings.vue
@@ -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" />&nbsp;&nbsp;
       <h1>Crop video:</h1>
diff --git a/src/csui/src/popup/panels/SiteDetailsPanel.vue b/src/csui/src/popup/panels/SiteDetailsPanel.vue
index a48c2af..ca2090a 100644
--- a/src/csui/src/popup/panels/SiteDetailsPanel.vue
+++ b/src/csui/src/popup/panels/SiteDetailsPanel.vue
@@ -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"
diff --git a/src/install/first-time/App.vue b/src/install/first-time/App.vue
index 1145017..55db685 100644
--- a/src/install/first-time/App.vue
+++ b/src/install/first-time/App.vue
@@ -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>
diff --git a/src/install/updated/App.vue b/src/install/updated/App.vue
index ac3fe86..114f2a4 100644
--- a/src/install/updated/App.vue
+++ b/src/install/updated/App.vue
@@ -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>
diff --git a/src/options/App.vue b/src/options/App.vue
index ce64921..ed3821e 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -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}}
diff --git a/src/options/common/ConfirmationPopup.vue b/src/options/common/ConfirmationPopup.vue
index fab13d7..1624424 100644
--- a/src/options/common/ConfirmationPopup.vue
+++ b/src/options/common/ConfirmationPopup.vue
@@ -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>
diff --git a/src/options/controls-settings/AddEditActionPopup.vue b/src/options/controls-settings/AddEditActionPopup.vue
index 37761c4..8cc3c87 100644
--- a/src/options/controls-settings/AddEditActionPopup.vue
+++ b/src/options/controls-settings/AddEditActionPopup.vue
@@ -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';
diff --git a/src/options/controls-settings/ControlsSettings.vue b/src/options/controls-settings/ControlsSettings.vue
index 23c52fb..955739f 100644
--- a/src/options/controls-settings/ControlsSettings.vue
+++ b/src/options/controls-settings/ControlsSettings.vue
@@ -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>
diff --git a/src/options/controls-settings/command-builder/CommandChain.vue b/src/options/controls-settings/command-builder/CommandChain.vue
index c574ef6..23d0891 100644
--- a/src/options/controls-settings/command-builder/CommandChain.vue
+++ b/src/options/controls-settings/command-builder/CommandChain.vue
@@ -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>