prepare class names for a day in the future, when we'll move to tailwind

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()"

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"

src/csui/res/css/flex.scss

@@ -6,7 +6,7 @@
   flex-direction: row;
 }
 
-.flex-col, .flex-column {
+.flex-col {
   flex-direction: column;
 }
 

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">

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>

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 -->

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">

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>

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

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 -->

src/csui/src/PlayerUiPanels/SiteSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column">
+  <div class="flex flex-col">
 
 
     <div class="">

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"

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 -->

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>

src/csui/src/components/JsonEditor/JsonObject.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 class="item-key-line">
         <template v-if="label">

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:

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>

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>

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>

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"

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>

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>

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}}

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>

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">

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>

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>