Port more classes.

src/App.vue

@@ -117,14 +117,28 @@ b {
 }
 
 .btn {
-    @apply py-2 px-4 rounded bg-dark-400;
+    @apply py-2 px-4 rounded;
 }
 
 .dark {
     @apply text-white bg-dark-800;
 }
 
+.dark .input,
+.dark .select,
+.dark .btn {
+    @apply text-gray-400 bg-dark-400 w-auto;
+}
+
+.dark hr {
+    @apply border-dark-100;
+}
+
 h1 {
-    @apply text-2xl font-bold;
+    @apply m-0 !text-5xl font-bold;
+}
+
+hr {
+    @apply !mt-2 !mb-3;
 }
 </style>

src/components/FeedPage.vue

@@ -9,9 +9,9 @@
         <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
     </span>
 
-    <span class="uk-align-right@m">
+    <span class="md:float-right">
         <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
-        <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+        <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
             <option v-t="'actions.most_recent'" value="descending" />
             <option v-t="'actions.least_recent'" value="ascending" />
             <option v-t="'actions.channel_name_asc'" value="channel_ascending" />

src/components/HistoryPage.vue

@@ -7,7 +7,7 @@
 
     <div style="text-align: right">
         <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
-        <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+        <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
             <option v-t="'actions.most_recent'" value="descending" />
             <option v-t="'actions.least_recent'" value="ascending" />
             <option v-t="'actions.channel_name_asc'" value="channel_ascending" />

src/components/ImportPage.vue

@@ -11,7 +11,7 @@
                 <b>Override: <input v-model="override" class="uk-checkbox" type="checkbox"/></b>
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 btn uk-button-large uk-width-auto" @click="handleImport">Import</a>
+                <a class="uk-width-1-1 btn uk-button-large w-auto" @click="handleImport">Import</a>
             </div>
         </form>
         <br />

src/components/LoginPage.vue

@@ -4,7 +4,7 @@
             <div class="uk-form-row">
                 <input
                     v-model="username"
-                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    class="uk-width-1-1 uk-form-large input w-auto"
                     type="text"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
@@ -14,7 +14,7 @@
             <div class="uk-form-row">
                 <input
                     v-model="password"
-                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    class="uk-width-1-1 uk-form-large input w-auto"
                     type="password"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
@@ -22,7 +22,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large uk-width-auto" @click="login">
+                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login">
                     {{ $t("titles.login") }}
                 </a>
             </div>

src/components/Navigation.vue

@@ -1,5 +1,9 @@
 <template>
-    <nav class="uk-navbar w-100 relative" :style="[{ background: backgroundColor, colour: foregroundColor }]" uk-navbar>
+    <nav
+        class="uk-navbar w-full relative"
+        :style="[{ background: backgroundColor, colour: foregroundColor }]"
+        uk-navbar
+    >
         <div class="uk-navbar-left">
             <router-link
                 class="uk-navbar-item uk-logo font-bold font-2xl font-sans font-bold"
@@ -17,7 +21,7 @@
         <div class="uk-navbar-center uk-flex md:visible">
             <input
                 v-model="searchText"
-                class="uk-input uk-width-medium"
+                class="input uk-width-medium"
                 type="text"
                 role="search"
                 :title="$t('actions.search')"
@@ -51,7 +55,7 @@
     <div class="w-full md:hidden">
         <input
             v-model="searchText"
-            class="uk-input"
+            class="input"
             type="text"
             role="search"
             :title="$t('actions.search')"

src/components/Player.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-100">
+    <div class="w-full">
         <div
             ref="container"
             data-shaka-player-container

src/components/Preferences.vue

@@ -67,7 +67,7 @@
     <br />
     <label for="ddlTheme"><b v-t="'actions.theme'"/></label>
     <br />
-    <select id="ddlTheme" v-model="selectedTheme" class="uk-select uk-width-auto" @change="onChange($event)">
+    <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
         <option v-t="'actions.auto'" value="auto" />
         <option v-t="'actions.dark'" value="dark" />
         <option v-t="'actions.light'" value="light" />
@@ -89,40 +89,24 @@
     <br />
     <label for="ddlDefaultQuality"><b v-t="'actions.default_quality'"/></label>
     <br />
-    <select id="ddlDefaultQuality" v-model="defaultQuality" class="uk-select uk-width-auto" @change="onChange($event)">
+    <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
         <option v-t="'actions.auto'" value="0" />
         <option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option>
     </select>
     <br />
     <label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'"/></label>
     <br />
-    <input
+    <input id="txtBufferingGoal" v-model="bufferingGoal" class="input w-auto" type="text" @change="onChange($event)" />
-        id="txtBufferingGoal"
-        v-model="bufferingGoal"
-        class="uk-input uk-width-auto"
-        type="text"
-        @change="onChange($event)"
-    />
     <br />
     <label for="ddlCountrySelection"><b v-t="'actions.country_selection'"/></label>
     <br />
-    <select
+    <select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)">
-        id="ddlCountrySelection"
-        v-model="countrySelected"
-        class="uk-select uk-width-auto"
-        @change="onChange($event)"
-    >
         <option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option>
     </select>
     <br />
     <label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'"/></label>
     <br />
-    <select
+    <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
-        id="ddlDefaultHomepage"
-        v-model="defaultHomepage"
-        class="uk-select uk-width-auto"
-        @change="onChange($event)"
-    >
         <option v-t="'titles.trending'" value="trending" />
         <option v-t="'titles.feed'" value="feed" />
     </select>
@@ -153,24 +137,13 @@
     <br />
     <label for="ddlLanguageSelection"><b v-t="'actions.language_selection'"/></label>
     <br />
-    <select
+    <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
-        id="ddlLanguageSelection"
-        v-model="selectedLanguage"
-        class="uk-select uk-width-auto"
-        @change="onChange($event)"
-    >
         <option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option>
     </select>
     <br />
     <label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'"/></label>
     <br />
-    <select
+    <select id="ddlEnabledCodecs" v-model="enabledCodecs" class="select w-auto" multiple @change="onChange($event)">
-        id="ddlEnabledCodecs"
-        v-model="enabledCodecs"
-        class="uk-select uk-width-auto"
-        multiple
-        @change="onChange($event)"
-    >
         <option value="av1">AV1</option>
         <option value="vp9">VP9</option>
         <option value="avc">AVC (h.264)</option>
@@ -211,12 +184,7 @@
         ><b>{{ $t("actions.instance_selection") }}:</b></label
     >
     <br />
-    <select
+    <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
-        id="ddlInstanceSelection"
-        v-model="selectedInstance"
-        class="uk-select uk-width-auto"
-        @change="onChange($event)"
-    >
         <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl">
             {{ instance.name }}
         </option>

src/components/RegisterPage.vue

@@ -4,7 +4,7 @@
             <div class="uk-form-row">
                 <input
                     v-model="username"
-                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    class="uk-width-1-1 uk-form-large input w-auto"
                     type="text"
                     autocomplete="username"
                     :placeholder="$t('login.username')"
@@ -14,7 +14,7 @@
             <div class="uk-form-row">
                 <input
                     v-model="password"
-                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    class="uk-width-1-1 uk-form-large input w-auto"
                     type="password"
                     autocomplete="password"
                     :placeholder="$t('login.password')"
@@ -22,7 +22,7 @@
                 />
             </div>
             <div class="uk-form-row">
-                <a class="uk-width-1-1 uk-button uk-button-large uk-width-auto" @click="register">
+                <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="register">
                     {{ $t("titles.register") }}</a
                 >
             </div>

src/components/SearchResults.vue

@@ -10,7 +10,7 @@
         id="ddlSearchFilters"
         v-model="selectedFilter"
         default="all"
-        class="uk-select uk-width-auto"
+        class="select w-auto"
         style="height: 100%"
         @change="updateResults()"
     >

src/components/VideoItem.vue

@@ -3,18 +3,12 @@
         <router-link class="uk-text-emphasis" :to="video.url">
             <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
             <div class="relative">
-                <span
+                <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
-                    v-if="video.duration"
+                    timeFormat(video.duration)
-                    class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px right-5px"
+                }}</span>
-                    style="padding: 0 5px"
+                <span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" style="padding: 0 5px">{{
-                    >{{ timeFormat(video.duration) }}</span
+                    $t("video.watched")
-                >
+                }}</span>
-                <span
-                    v-if="video.watched"
-                    class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px left-5px"
-                    style="padding: 0 5px"
-                    >{{ $t("video.watched") }}</span
-                >
             </div>
 
             <div>
@@ -34,7 +28,7 @@
             </div>
         </router-link>
 
-        <div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
+        <div class="float-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
             <router-link
                 :to="video.url + '&listen=1'"
                 :aria-label="'Listen to ' + video.title"
@@ -51,15 +45,14 @@
                     :src="video.uploaderAvatar"
                     loading="lazy"
                     :alt="video.uploaderName"
-                    class="rounded-full"
+                    class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
-                    style="margin-right: 0.5rem; margin-top: 0.5rem; width: 32px; height: 32px"
                 />
             </router-link>
 
-            <div style="width: calc(100% - 32px - 8px)">
+            <div class="w-[calc(100%-32px-1rem)]">
                 <router-link
                     v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
-                    class="uk-link-muted uk-overflow-hidden"
+                    class="uk-link-muted overflow-hidden block"
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                     style="display: block; width: 90%"
@@ -87,6 +80,12 @@
     </div>
 </template>
 
+<style>
+.thumbnail-overlay {
+    @apply rounded-md absolute bg-black bg-opacity-75;
+}
+</style>
+
 <script>
 export default {
     props: {

src/components/WatchVideo.vue

@@ -134,7 +134,7 @@
                     v-for="related in video.relatedStreams"
                     v-show="showRecs || !smallView"
                     :key="related.url"
-                    class="uk-tile-default uk-width-auto"
+                    class="uk-tile-default w-auto"
                     :style="[{ background: backgroundColor }]"
                 >
                     <VideoItem :video="related" height="94" width="168" />