diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue index c0f2b56..1c72177 100644 --- a/src/csui/Popup.vue +++ b/src/csui/Popup.vue @@ -13,28 +13,39 @@ class="popup flex flex-col no-overflow" :class="{'popup-chrome': ! BrowserDetect?.firefox}" > -
-
-

+
+

Ultrawidify: Quick settings

-
+ +
+ +
+
site: {{site.host}}
-
-
- Build channel: {{BrowserDetect?.processEnvChannel}}
-
- {{ settings.getExtensionVersion() }} -
-
-
- {{ settings.getExtensionVersion() }} + + +
+
+ {{ settings.getExtensionVersion() }} (non-stable) +
+
+
+ {{ settings.getExtensionVersion() }} +
@@ -152,10 +163,10 @@ export default { logger: undefined, site: undefined, siteSettings: undefined, - selectedTab: 'playerUiCtl', + selectedTab: 'videoSettings', tabs: [ // see this for icons: https://pictogrammers.com/library/mdi/ - {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'}, + // {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'}, {id: 'videoSettings', label: 'Video settings', icon: 'crop'}, // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'}, {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' }, @@ -259,6 +270,9 @@ export default { }, methods: { + showInPlayerUi() { + this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}}); + }, async sleep(t) { return new Promise( (resolve,reject) => { setTimeout(() => resolve(), t); @@ -365,12 +379,15 @@ export default { .header { background-color: rgb(90, 28, 13); + background-color: rgb(0,0,0); color: #fff; padding: 8px; - display: flex; - flex-direction: row; - justify-content: space-between; + // display: flex; + // flex-direction: row; + // justify-content: space-between; + + border-bottom: 1px dotted #fa6; h1 { @@ -388,6 +405,21 @@ export default { } +.settings-header-button { + display: flex; + flex-direction: row; + align-items: center; + + padding: 0.5rem 2rem; + text-transform: lowercase; + font-variant: small-caps; + + background-color: #000; + border: 1px solid #fa68; + + color: #eee; +} + .site-support-info { display: flex; flex-direction: row; diff --git a/src/csui/res/css/flex.scss b/src/csui/res/css/flex.scss index e3dad40..b876bf0 100644 --- a/src/csui/res/css/flex.scss +++ b/src/csui/res/css/flex.scss @@ -27,6 +27,9 @@ flex-shrink: 0; } +.items-center { + align-items: center; +} .flex-wrap { flex-wrap: wrap;