From 31973b84de6cdb875a7072c4702611d697350bb1 Mon Sep 17 00:00:00 2001
From: l4kr <root@embyserver.ji>
Date: Mon, 4 Sep 2023 17:42:19 +0200
Subject: [PATCH] UX changes

---
 item/item.html                                |   6 +-
 .../emby-elements/emby-select/emby-select.css | 171 +++++++++++++++++-
 2 files changed, 173 insertions(+), 4 deletions(-)

diff --git a/item/item.html b/item/item.html
index aef2563..ca6d08c 100644
--- a/item/item.html
+++ b/item/item.html
@@ -40,13 +40,13 @@
 
                             <form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x reduce-font-size-tv" style="padding: 0;max-width:initial;">
                                 <div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero">
-                                    <select is="emby-select" class="selectSource detailTrackSelect emby-select-inline" label="${LabelVersion}"></select>
+                                    <select hidden="emby-select" class="selectSource detailTrackSelect emby-select-inline" label="${}"></select>
                                 </div>
                                 <div class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero">
-                                    <select is="emby-select" class="selectVideo detailTrackSelect emby-select-inline" label="${LabelVideo}"></select>
+                                    <select hidden="emby-select" class="selectVideo detailTrackSelect emby-select-inline" label="${}"></select>
                                 </div>
                                 <div class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero">
-                                    <select is="emby-select" class="selectAudio detailTrackSelect emby-select-inline" label="${LabelAudio}" data-menu="custom"></select>
+                                    <select hidden="emby-select" class="selectAudio detailTrackSelect emby-select-inline" label="${}" data-menu="custom"></select>
                                 </div>
                                 <div class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer">
                                     <select is="emby-select" class="selectSubtitles detailTrackSelect emby-select-inline" label="${LabelSubtitles}" data-menu="custom"></select>
diff --git a/modules/emby-elements/emby-select/emby-select.css b/modules/emby-elements/emby-select/emby-select.css
index 28ad082..8283d05 100644
--- a/modules/emby-elements/emby-select/emby-select.css
+++ b/modules/emby-elements/emby-select/emby-select.css
@@ -1 +1,170 @@
-.emby-select{display:block;margin:0;margin-bottom:0!important;font-size:110%;font-family:inherit;font-weight:inherit;padding-top:.5em;padding-bottom:.5em;-webkit-padding-start:.9ch;padding-inline-start:.9ch;-webkit-padding-end:3.4ch;padding-inline-end:3.4ch;box-sizing:border-box;outline:0!important;-webkit-tap-highlight-color:transparent;width:100%;border-radius:.3em;-webkit-appearance:none;appearance:none;letter-spacing:inherit}.emby-select-nopointer{pointer-events:none}.emby-select[disabled]{background:0 0!important;border-color:transparent!important;color:inherit!important;-webkit-appearance:none;appearance:none;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}.emby-select[multiple] option{display:none!important;visibility:hidden!important}.emby-select-inline{font-size:inherit;border-radius:100em}.emby-select-inline[disabled]{padding:.2em 0;border:0;text-shadow:inherit}.emby-select-tv-inline{width:auto;-webkit-padding-end:.5em;padding-inline-end:.5em}.emby-select::-moz-focus-inner{border:0}.emby-select-focusscale{transition:-webkit-transform .2s ease-out!important;transition:transform .2s ease-out!important;-webkit-transform-origin:center center;transform-origin:center center}.emby-select-focusscale:focus{-webkit-transform:scale(1.02);transform:scale(1.02);z-index:1}.emby-select-inline.emby-select-focusscale:focus{-webkit-transform:scale(1.14);transform:scale(1.14);z-index:1}.selectContainer{margin-bottom:1.5em;position:relative}.selectContainer-inline{display:-webkit-inline-flex;display:inline-flex;margin-bottom:0;-webkit-align-items:center;align-items:center}.emby-select-wrapper{position:relative}.selectLabelText{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-bottom:.1em}.selectLabelText-inline{margin-bottom:0;-webkit-margin-end:.5em;margin-inline-end:.5em}.selectLabel-inline{margin-bottom:0;-webkit-flex-shrink:0;flex-shrink:0;display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline}.emby-select[multiple]{color:transparent!important;max-height:2.5em}.emby-select-selectedNameContainer{position:absolute;top:0;bottom:0;left:.5em;right:2em;inset-inline-start:.5em;inset-inline-end:2em;color:inherit;pointer-events:none;font-size:110%;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;text-shadow:none}.emby-select-selectedName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selectArrowContainer{position:absolute;display:-webkit-flex;display:flex;top:0;bottom:0;right:.3em;inset-inline-start:initial;inset-inline-end:.3em;color:inherit;pointer-events:none;-webkit-align-items:center;align-items:center;text-shadow:none}.selectArrowContainer-inline{top:initial;bottom:.38em;font-size:90%}.emby-select-inline.emby-select-tv+.selectArrowContainer{display:none}.emby-select[disabled]+.selectArrowContainer{display:none}.selectArrow{font-size:1.7em}.emby-select-iconbutton{-webkit-align-self:flex-end;align-self:flex-end}
\ No newline at end of file
+.emby-select {
+  display: block;
+  margin: 0;
+  margin-bottom: 0 !important;
+  font-size: 110%;
+  font-family: inherit;
+  font-weight: inherit;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  -webkit-padding-start: 0.9ch;
+  padding-inline-start: 0.9ch;
+  -webkit-padding-end: 3.4ch;
+  padding-inline-end: 3.4ch;
+  box-sizing: border-box;
+  outline: 0 !important;
+  -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  border-radius: 0.3em;
+  -webkit-appearance: none;
+  appearance: none;
+  letter-spacing: inherit;
+}
+.emby-select-nopointer {
+  pointer-events: none;
+}
+.emby-select[disabled] {
+  background: 0 0 !important;
+  border-color: transparent !important;
+  color: inherit !important;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  box-shadow: none !important;
+}
+.emby-select[multiple] option {
+  display: none !important;
+  visibility: hidden !important;
+}
+.emby-select-inline {
+  font-size: inherit;
+  border-radius: 100em;
+}
+.emby-select-inline[disabled] {
+  padding: 0.2em 0;
+  border: 0;
+  text-shadow: inherit;
+}
+.emby-select-tv-inline {
+  width: auto;
+  -webkit-padding-end: 0.5em;
+  padding-inline-end: 0.5em;
+}
+.emby-select::-moz-focus-inner {
+  border: 0;
+}
+.emby-select-focusscale {
+  transition: -webkit-transform 0.2s ease-out !important;
+  transition: transform 0.2s ease-out !important;
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+}
+.emby-select-focusscale:focus {
+  -webkit-transform: scale(1.02);
+  transform: scale(1.02);
+  z-index: 1;
+}
+.emby-select-inline.emby-select-focusscale:focus {
+  -webkit-transform: scale(1.14);
+  transform: scale(1.14);
+  z-index: 1;
+}
+.selectContainer {
+  margin-bottom: 1.5em;
+  position: relative;
+}
+.selectContainer-inline {
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  margin-bottom: 0;
+  -webkit-align-items: center;
+  align-items: center;
+}
+.emby-select-wrapper {
+  position: relative;
+}
+.selectLabelText {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  margin-bottom: 0.1em;
+}
+.selectLabelText-inline {
+  margin-bottom: 0;
+  -webkit-margin-end: 0.5em;
+  margin-inline-end: 0.5em;
+  margin-left: -2.3em;
+  margin-top: 1em;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+.selectLabel-inline {
+  margin-bottom: 0;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: baseline;
+  align-items: baseline;
+}
+.emby-select[multiple] {
+  color: transparent !important;
+  max-height: 2.5em;
+}
+.emby-select-selectedNameContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.5em;
+  right: 2em;
+  inset-inline-start: 0.5em;
+  inset-inline-end: 2em;
+  color: inherit;
+  pointer-events: none;
+  font-size: 110%;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-flex;
+  display: flex;
+  text-shadow: none;
+}
+.emby-select-selectedName {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.selectArrowContainer {
+  position: absolute;
+  display: -webkit-flex;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  right: 0.3em;
+  inset-inline-start: initial;
+  inset-inline-end: 0.3em;
+  color: inherit;
+  pointer-events: none;
+  -webkit-align-items: center;
+  align-items: center;
+  text-shadow: none;
+}
+.selectArrowContainer-inline {
+  top: initial;
+  bottom: 0.38em;
+  font-size: 90%;
+}
+.emby-select-inline.emby-select-tv + .selectArrowContainer {
+  display: none;
+}
+.emby-select[disabled] + .selectArrowContainer {
+  display: none;
+}
+.selectArrow {
+  font-size: 1.7em;
+}
+.emby-select-iconbutton {
+  -webkit-align-self: flex-end;
+  align-self: flex-end;
+}