mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #3743 from hadicharara/hadicharara/added-support-for-rtl-layouts
Add Initial support for RTL layouts
This commit is contained in:
Bill Thornton
GitHub
commit
84c007fa0b
82 changed files with 1163 additions and 242 deletions
|
|
@ -45,7 +45,13 @@
|
|||
}
|
||||
|
||||
.actionsheetListItemBody {
|
||||
padding: 0.4em 1em 0.4em 0.6em !important;
|
||||
[dir="ltr"] & {
|
||||
padding: 0.4em 1em 0.4em 0.6em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.4em 0.6em 0.4em 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetItemText {
|
||||
|
|
@ -64,8 +70,16 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
margin-left: 5em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetScroller {
|
||||
|
|
@ -101,8 +115,15 @@
|
|||
}
|
||||
|
||||
.actionsheetMenuItemIcon {
|
||||
margin: 0 0.85em 0 0.45em !important;
|
||||
padding: 0 !important;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.85em 0 0.45em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.45em 0 0.85em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actionsheet-xlargeFont {
|
||||
|
|
@ -112,5 +133,12 @@
|
|||
.btnCloseActionSheet {
|
||||
position: fixed;
|
||||
top: 0.75em;
|
||||
left: 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,14 +110,28 @@
|
|||
}
|
||||
|
||||
.alphaPicker-fixed-right {
|
||||
right: 0.4em;
|
||||
right: max(env(safe-area-inset-right), 0.4em);
|
||||
[dir="ltr"] & {
|
||||
right: 0.4em;
|
||||
right: max(env(safe-area-inset-right), 0.4em);
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0.4em;
|
||||
left: max(env(safe-area-inset-left), 0.4em);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 62.5em) {
|
||||
.alphaPicker-fixed-right {
|
||||
right: 1em;
|
||||
right: max(env(safe-area-inset-right), 1em);
|
||||
[dir="ltr"] & {
|
||||
right: 1em;
|
||||
right: max(env(safe-area-inset-right), 1em);
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 1em;
|
||||
left: max(env(safe-area-inset-left), 1em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -302,7 +302,14 @@ button::-moz-focus-inner {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog .cardText {
|
||||
|
|
@ -364,7 +371,7 @@ button::-moz-focus-inner {
|
|||
|
||||
.cardTextCentered,
|
||||
.cardTextCentered > .textActionButton {
|
||||
text-align: center;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.cardText-rightmargin {
|
||||
|
|
@ -396,21 +403,35 @@ button::-moz-focus-inner {
|
|||
}
|
||||
|
||||
.cardIndicators {
|
||||
right: 0.225em;
|
||||
top: 0.225em;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
contain: layout style;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0.225em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0.225em;
|
||||
}
|
||||
}
|
||||
|
||||
.cardProgramAttributeIndicators {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-size: 92%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.programAttributeIndicator {
|
||||
|
|
@ -430,7 +451,14 @@ button::-moz-focus-inner {
|
|||
.cardOverlayButton-br {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cardOverlayButtonIcon {
|
||||
|
|
|
|||
|
|
@ -705,7 +705,7 @@ import { appRouter } from '../appRouter';
|
|||
|
||||
if (text) {
|
||||
html += "<div class='" + currentCssClass + "'>";
|
||||
html += text;
|
||||
html += '<bdi>' + text + '</bdi>';
|
||||
html += '</div>';
|
||||
valid++;
|
||||
|
||||
|
|
@ -908,19 +908,20 @@ import { appRouter } from '../appRouter';
|
|||
}
|
||||
|
||||
if (options.showYear || options.showSeriesYear) {
|
||||
const productionYear = item.ProductionYear && datetime.toLocaleString(item.ProductionYear, {useGrouping: false});
|
||||
if (item.Type === 'Series') {
|
||||
if (item.Status === 'Continuing') {
|
||||
lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
|
||||
lines.push(globalize.translate('SeriesYearToPresent', productionYear || ''));
|
||||
} else {
|
||||
if (item.EndDate && item.ProductionYear) {
|
||||
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
|
||||
lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
|
||||
const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false});
|
||||
lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
|
||||
} else {
|
||||
lines.push(item.ProductionYear || '');
|
||||
lines.push(productionYear || '');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
lines.push(item.ProductionYear || '');
|
||||
lines.push(productionYear || '');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="formDialogHeader formDialogHeader-clear justify-content-center">
|
||||
<h1 class="formDialogHeaderTitle" style="margin-left:0;margin-top: .5em;padding: 0 1em;"></h1>
|
||||
<h1 class="formDialogHeaderTitle" style="margin-top: .5em;padding: 0 1em;"></h1>
|
||||
</div>
|
||||
|
||||
<div class="formDialogContent smoothScrollY">
|
||||
|
|
|
|||
|
|
@ -12,15 +12,27 @@
|
|||
}
|
||||
|
||||
.formDialogHeaderTitle {
|
||||
margin-left: 0.25em;
|
||||
|
||||
/* In case of h1, h2, h3 */
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.formDialogHeaderTitle:first-child {
|
||||
margin-left: 1em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.formDialogContent:not(.no-grow) {
|
||||
|
|
@ -98,8 +110,8 @@
|
|||
.formDialogFooterItem-autosize {
|
||||
flex-basis: initial;
|
||||
flex-grow: initial;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
@media all and (min-width: 50em) {
|
||||
|
|
|
|||
|
|
@ -307,13 +307,20 @@
|
|||
}
|
||||
|
||||
.programIcon {
|
||||
margin-left: 0.5em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
font-size: 1.6em;
|
||||
color: #ddd;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.guide-programTextIcon {
|
||||
|
|
@ -340,11 +347,19 @@
|
|||
}
|
||||
|
||||
.guideChannelName {
|
||||
margin-left: auto;
|
||||
margin-right: 1em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 70%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: auto;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.guideChannelImage {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="flex align-items-center" style="margin:1.5em 0;">
|
||||
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
|
||||
|
||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
|
||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse">
|
||||
<span class="material-icons folder" aria-hidden="true"></span>
|
||||
<span>${Browse}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -10,3 +10,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.raised.raised-mini.btnBrowse {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,23 @@
|
|||
.first-imageEditor-buttons {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.btnBrowseAllImages {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.btnOpenUploadMenu {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
<div id="imagesContainer">
|
||||
<div class="imageEditor-buttons first-imageEditor-buttons">
|
||||
<h2 style="margin:0;">${Images}</h2>
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize">
|
||||
<span class="material-icons search" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
<div id="backdropsContainer" class="hide">
|
||||
<div class="imageEditor-buttons">
|
||||
<h2 style="margin:0;">${Backdrops}</h2>
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" data-imagetype="Backdrop">
|
||||
<span class="material-icons search" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" data-imagetype="Backdrop">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export function getPlayedIndicatorHtml(item) {
|
|||
if (enablePlayedIndicator(item)) {
|
||||
const userData = item.UserData || {};
|
||||
if (userData.UnplayedItemCount) {
|
||||
return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
|
||||
return '<div class="countIndicator indicator">' + datetime.toLocaleString(userData.UnplayedItemCount) + '</div>';
|
||||
}
|
||||
|
||||
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
|
||||
|
|
@ -93,7 +93,7 @@ export function getChildCountIndicatorHtml(item, options) {
|
|||
const minCount = options && options.minCount ? options.minCount : 0;
|
||||
|
||||
if (item.ChildCount && item.ChildCount > minCount) {
|
||||
return '<div class="countIndicator indicator">' + item.ChildCount + '</div>';
|
||||
return '<div class="countIndicator indicator">' + datetime.toLocaleString(item.ChildCount) + '</div>';
|
||||
}
|
||||
|
||||
return '';
|
||||
|
|
|
|||
|
|
@ -8,8 +8,15 @@
|
|||
.itemProgressBarForeground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
|
|
@ -32,7 +39,13 @@
|
|||
}
|
||||
|
||||
.indicator + .indicator {
|
||||
margin-left: 0.25em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.indicatorIcon {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
|
|||
html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
|
||||
}
|
||||
if (version.Path && user && user.Policy.IsAdministrator) {
|
||||
html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
|
||||
html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}<br/>`;
|
||||
}
|
||||
if (version.Size) {
|
||||
const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
|
||||
|
|
@ -212,8 +212,9 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
|
|||
return html;
|
||||
}
|
||||
|
||||
function createAttribute(label, value) {
|
||||
return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute">${escapeHtml(value)}</span>\n`;
|
||||
// File Paths should be always ltr. The isLtr parameter allows this.
|
||||
function createAttribute(label, value, isLtr) {
|
||||
return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute" ${isLtr && 'dir="ltr"'}>${escapeHtml(value)}</span>\n`;
|
||||
}
|
||||
|
||||
function loadMediaInfo(itemId, serverId) {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import '../cardbuilder/card.scss';
|
|||
import ServerConnections from '../ServerConnections';
|
||||
import toast from '../toast/toast';
|
||||
import template from './itemidentifier.template.html';
|
||||
import datetime from '../../scripts/datetime';
|
||||
|
||||
const enableFocusTransform = !browser.slow && !browser.edge;
|
||||
|
||||
|
|
@ -166,7 +167,7 @@ import template from './itemidentifier.template.html';
|
|||
lines.push(escapeHtml(identifyResult.Name));
|
||||
|
||||
if (identifyResult.ProductionYear) {
|
||||
lines.push(identifyResult.ProductionYear);
|
||||
lines.push(datetime.toLocaleString(identifyResult.ProductionYear, {useGrouping: false}));
|
||||
}
|
||||
|
||||
let resultHtml = lines.join('<br/>');
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import dom from '../../scripts/dom';
|
|||
import '../../elements/emby-checkbox/emby-checkbox';
|
||||
import '../../elements/emby-select/emby-select';
|
||||
import '../../elements/emby-input/emby-input';
|
||||
import './style.scss';
|
||||
import template from './libraryoptionseditor.template.html';
|
||||
|
||||
function populateLanguages(parent) {
|
||||
|
|
@ -231,7 +232,7 @@ import template from './libraryoptionseditor.template.html';
|
|||
html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '</h3>';
|
||||
const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
|
||||
if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
|
||||
html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
|
||||
html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="checkboxList paperList checkboxList-paperList">';
|
||||
|
|
|
|||
9
src/components/libraryoptionseditor/style.scss
Normal file
9
src/components/libraryoptionseditor/style.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.raised.btnImageOptionsForType {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -149,7 +149,7 @@ import ServerConnections from '../ServerConnections';
|
|||
|
||||
elem.classList.add('listItemBodyText');
|
||||
|
||||
elem.innerText = text;
|
||||
elem.innerHTML = '<bdi>' + text + '</bdi>';
|
||||
|
||||
html += elem.outerHTML;
|
||||
}
|
||||
|
|
@ -414,7 +414,7 @@ import ServerConnections from '../ServerConnections';
|
|||
|
||||
if (enableOverview && item.Overview) {
|
||||
html += '<div class="secondary listItem-overview listItemBodyText">';
|
||||
html += item.Overview;
|
||||
html += '<bdi>' + item.Overview + '</bdi>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
|
|
@ -477,7 +477,7 @@ import ServerConnections from '../ServerConnections';
|
|||
|
||||
if (enableOverview && item.Overview) {
|
||||
html += '<div class="listItem-bottomoverview secondary">';
|
||||
html += item.Overview;
|
||||
html += '<bdi>' + item.Overview + '</bdi>';
|
||||
html += '</div>';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
.listItem,
|
||||
.listItemBody,
|
||||
.listItemMediaInfo {
|
||||
display: flex;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -9,10 +16,18 @@
|
|||
margin: 0;
|
||||
display: block;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
padding: 0.25em 0.5em 0.25em 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItem-withContentWrapper {
|
||||
|
|
@ -75,8 +90,15 @@
|
|||
}
|
||||
|
||||
.listViewDragHandle {
|
||||
margin-left: -0.25em !important;
|
||||
touch-action: none;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: -0.25em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: -0.25em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemBody {
|
||||
|
|
@ -89,13 +111,6 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.listItem,
|
||||
.listItemBody,
|
||||
.listItemMediaInfo {
|
||||
display: flex;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.layout-tv .listItemBody {
|
||||
padding: 0.35em 0.75em;
|
||||
}
|
||||
|
|
@ -211,7 +226,14 @@
|
|||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
font-size: 143%;
|
||||
padding: 0 0.25em 0 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemIcon:not(.listItemIcon-transparent) {
|
||||
|
|
@ -219,7 +241,14 @@
|
|||
color: #fff;
|
||||
padding: 0.5em;
|
||||
border-radius: 100em;
|
||||
margin: 0 0.2em 0 0.4em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.2em 0 0.4em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.4em 0 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemProgressBar {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export function show() {
|
|||
|
||||
if (!elem) {
|
||||
elem = document.createElement('div');
|
||||
elem.setAttribute('dir', 'ltr');
|
||||
loadingElem = elem;
|
||||
|
||||
elem.classList.add('docspinner');
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import '../../elements/emby-toggle/emby-toggle';
|
|||
import '../listview/listview.scss';
|
||||
import '../formdialog.scss';
|
||||
import '../../assets/css/flexstyles.scss';
|
||||
import './style.scss';
|
||||
import toast from '../toast/toast';
|
||||
import alert from '../alert';
|
||||
import template from './mediaLibraryCreator.template.html';
|
||||
|
|
@ -119,12 +120,12 @@ import template from './mediaLibraryCreator.template.html';
|
|||
|
||||
function getFolderHtml(pathInfo, index) {
|
||||
let html = '';
|
||||
html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
|
||||
html += '<div class="listItem listItem-border lnkPath">';
|
||||
html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
|
||||
html += `<div class="listItemBodyText">${escapeHtml(pathInfo.Path)}</div>`;
|
||||
html += `<div class="listItemBodyText" dir="ltr">${escapeHtml(pathInfo.Path)}</div>`;
|
||||
|
||||
if (pathInfo.NetworkPath) {
|
||||
html += `<div class="listItemBodyText secondary">${escapeHtml(pathInfo.NetworkPath)}</div>`;
|
||||
html += `<div class="listItemBodyText secondary" dir="ltr">${escapeHtml(pathInfo.NetworkPath)}</div>`;
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="folders">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h1 style="margin: .5em 0;">${Folders}</h1>
|
||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
19
src/components/mediaLibraryCreator/style.scss
Normal file
19
src/components/mediaLibraryCreator/style.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.fab.btnAddFolder.submit {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItem.listItem-border.lnkPath {
|
||||
[dir="ltr"] & {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ import '../../elements/emby-button/paper-icon-button-light';
|
|||
import '../formdialog.scss';
|
||||
import '../../elements/emby-toggle/emby-toggle';
|
||||
import '../../assets/css/flexstyles.scss';
|
||||
import './style.scss';
|
||||
import toast from '../toast/toast';
|
||||
import confirm from '../confirm/confirm';
|
||||
import template from './mediaLibraryEditor.template.html';
|
||||
|
|
@ -109,7 +110,7 @@ import template from './mediaLibraryEditor.template.html';
|
|||
|
||||
function getFolderHtml(pathInfo, index) {
|
||||
let html = '';
|
||||
html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-left:.5em;">`;
|
||||
html += `<div class="listItem listItem-border lnkPath" data-index="${index}">`;
|
||||
html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
|
||||
html += '<h3 class="listItemBodyText">';
|
||||
html += escapeHtml(pathInfo.Path);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="folders hide">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h1 style="margin: .5em 0;">${Folders}</h1>
|
||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
19
src/components/mediaLibraryEditor/style.scss
Normal file
19
src/components/mediaLibraryEditor/style.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.fab.btnAddFolder.submit {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItem.listItem-border.lnkPath {
|
||||
[dir="ltr"] & {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -176,16 +176,16 @@ import '../../elements/emby-button/emby-button';
|
|||
|
||||
if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
|
||||
if (item.Status === 'Continuing') {
|
||||
miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
|
||||
miscInfo.push(globalize.translate('SeriesYearToPresent', datetime.toLocaleString(item.ProductionYear, {useGrouping: false})));
|
||||
} else if (item.ProductionYear) {
|
||||
text = item.ProductionYear;
|
||||
text = datetime.toLocaleString(item.ProductionYear, {useGrouping: false});
|
||||
|
||||
if (item.EndDate) {
|
||||
try {
|
||||
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
|
||||
const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false});
|
||||
|
||||
if (endYear !== item.ProductionYear) {
|
||||
text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`;
|
||||
text += `-${endYear}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('error parsing date:', item.EndDate);
|
||||
|
|
@ -247,7 +247,7 @@ import '../../elements/emby-button/emby-button';
|
|||
miscInfo.push(item.ProductionYear);
|
||||
} else if (item.PremiereDate) {
|
||||
try {
|
||||
text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
|
||||
text = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false});
|
||||
miscInfo.push(text);
|
||||
} catch (e) {
|
||||
console.error('error parsing date:', item.PremiereDate);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
.mediaInfoItem {
|
||||
margin: 0 1em 0 0;
|
||||
padding: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaInfoText {
|
||||
|
|
@ -25,7 +32,13 @@
|
|||
}
|
||||
|
||||
.mediaInfoItem:last-child {
|
||||
margin-right: 0;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.starRatingContainer {
|
||||
|
|
@ -46,13 +59,21 @@
|
|||
}
|
||||
|
||||
.mediaInfoCriticRating {
|
||||
padding-left: 1.5em;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 1.2em;
|
||||
min-height: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding-left: 1.5em;
|
||||
background-position: left center;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.5em;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaInfoCriticRatingFresh {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import '../../elements/emby-button/paper-icon-button-light';
|
|||
import '../formdialog.scss';
|
||||
import '../../assets/css/clearbutton.scss';
|
||||
import '../../assets/css/flexstyles.scss';
|
||||
import './style.scss';
|
||||
import ServerConnections from '../ServerConnections';
|
||||
import toast from '../toast/toast';
|
||||
import { appRouter } from '../appRouter';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<h3 class="formDialogHeaderTitle">
|
||||
${Edit}
|
||||
</h3>
|
||||
<div style="margin-left: auto;" class="flex align-items-center justify-content-center">
|
||||
<div class="dialogHeader flex align-items-center justify-content-center">
|
||||
<button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
|
||||
<span class="material-icons check" aria-hidden="true"></span>
|
||||
<span>${Save}</span>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<div id="fldPath" class="inputContainer">
|
||||
<div class="align-items-center flex">
|
||||
<div class="flex-grow">
|
||||
<input is="emby-input" id="txtPath" type="text" label="${LabelPath}" class="flex-grow" readonly />
|
||||
<input is="emby-input" id="txtPath" type="text" label="${LabelPath}" class="flex-grow" readonly dir="ltr"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
|
||||
${Genres}
|
||||
</h2>
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="paperList" id="listGenres"></div>
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
|
||||
${People}
|
||||
</h2>
|
||||
<button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson marginStart" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div id="peopleList" class="paperList">
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
|
||||
${Studios}
|
||||
</h2>
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="paperList" id="listStudios"></div>
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
|
||||
${Tags}
|
||||
</h2>
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="paperList" id="listTags"></div>
|
||||
|
|
|
|||
19
src/components/metadataEditor/style.scss
Normal file
19
src/components/metadataEditor/style.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.dialogHeader {
|
||||
[dir="ltr"] & {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.metadataFormFields .marginStart {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import alert from '../alert';
|
|||
import playlistEditor from '../playlisteditor/playlisteditor';
|
||||
import confirm from '../confirm/confirm';
|
||||
import itemHelper from '../itemHelper';
|
||||
import datetime from '../../scripts/datetime';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
|
|
@ -78,7 +79,7 @@ import itemHelper from '../itemHelper';
|
|||
if (selectedItems.length) {
|
||||
const itemSelectionCount = document.querySelector('.itemSelectionCount');
|
||||
if (itemSelectionCount) {
|
||||
itemSelectionCount.innerHTML = selectedItems.length;
|
||||
itemSelectionCount.innerHTML = datetime.toLocaleString(selectedItems.length);
|
||||
}
|
||||
} else {
|
||||
hideSelections();
|
||||
|
|
@ -129,7 +130,7 @@ import itemHelper from '../itemHelper';
|
|||
html += '<h1 class="itemSelectionCount"></h1>';
|
||||
|
||||
const moreIcon = 'more_vert';
|
||||
html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
|
||||
html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
|
||||
|
||||
selectionCommandsPanel.innerHTML = html;
|
||||
|
||||
|
|
|
|||
|
|
@ -40,3 +40,7 @@
|
|||
.withMultiSelect {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btnSelectionPanelOptions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ import { appRouter } from '../appRouter';
|
|||
html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">';
|
||||
|
||||
html += '<div class="nowPlayingBarTop">';
|
||||
html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
|
||||
html += '<div class="nowPlayingBarPositionContainer sliderContainer" dir="ltr">';
|
||||
html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider" data-slider-keep-progress="true"/>';
|
||||
html += '</div>';
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ import { appRouter } from '../appRouter';
|
|||
html += '</div>';
|
||||
|
||||
// The onclicks are needed due to the return false above
|
||||
html += '<div class="nowPlayingBarCenter">';
|
||||
html += '<div class="nowPlayingBarCenter" dir="ltr">';
|
||||
|
||||
html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><span class="material-icons skip_previous" aria-hidden="true"></span></button>';
|
||||
|
||||
|
|
|
|||
|
|
@ -54,11 +54,20 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
flex-grow: 1;
|
||||
font-size: 92%;
|
||||
margin-right: 1em;
|
||||
margin-left: 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
margin-right: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
margin-left: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter {
|
||||
|
|
@ -92,7 +101,6 @@
|
|||
|
||||
.nowPlayingBarRight {
|
||||
position: relative;
|
||||
margin: 0 0.5em 0 auto;
|
||||
|
||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||
z-index: 2;
|
||||
|
|
@ -100,6 +108,14 @@
|
|||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.5em 0 auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 auto 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
|
|
@ -110,7 +126,13 @@
|
|||
}
|
||||
|
||||
.nowPlayingBarVolumeSliderContainer {
|
||||
margin-right: 2em;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,16 @@
|
|||
background: rgba(28, 28, 28, 0.8);
|
||||
border-radius: 0.3em;
|
||||
color: #fff;
|
||||
left: 1.5em;
|
||||
position: absolute;
|
||||
top: 5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-tv {
|
||||
|
|
@ -31,23 +38,50 @@
|
|||
.playerStats-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3em 1em 1em;
|
||||
max-width: 50em;
|
||||
overflow: hidden;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0 3em 1em 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0 1em 1em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat {
|
||||
display: flex;
|
||||
margin-left: 1em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-label {
|
||||
font-weight: 500;
|
||||
margin: 0 0.5em 0 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-header {
|
||||
margin: 1em 1em 0 0;
|
||||
[dir="ltr"] & {
|
||||
margin: 1em 1em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 1em 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-value {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
.recordingButton {
|
||||
margin-left: 0;
|
||||
min-width: 10em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingIcon-active {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,13 @@
|
|||
}
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingAlbum a,
|
||||
|
|
@ -51,6 +57,10 @@
|
|||
|
||||
.nowPlayingButtonsContainer {
|
||||
display: flex;
|
||||
|
||||
[dir="rtl"] & {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.infoContainer,
|
||||
|
|
@ -94,10 +104,17 @@
|
|||
|
||||
.nowPlayingPageImageContainer {
|
||||
width: 16%;
|
||||
margin-right: 1em;
|
||||
position: relative;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainerNoAlbum {
|
||||
|
|
@ -268,7 +285,13 @@
|
|||
|
||||
@media all and (min-width: 80em) {
|
||||
.nowPlayingPageImageContainer {
|
||||
margin-right: 0.75em;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -365,24 +388,49 @@
|
|||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
border-radius: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons .btnRepeat,
|
||||
.nowPlayingInfoButtons .btnRewind {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
font-size: smaller;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons .btnShuffleQueue,
|
||||
.nowPlayingInfoButtons .btnFastForward {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
font-size: smaller;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
|
|
@ -413,7 +461,7 @@
|
|||
|
||||
.nowPlayingButtonsContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,3 +9,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.raised.raised-mini.btnBrowse {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="flex align-items-center" style="margin:1.5em 0;">
|
||||
<h2 style="margin:0;">${HeaderAddUpdateSubtitle}</h2>
|
||||
|
||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
|
||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse">
|
||||
<span class="material-icons folder" aria-hidden="true"></span>
|
||||
<span>${Browse}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.toastContainer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999999;
|
||||
|
|
@ -12,6 +11,14 @@
|
|||
padding-bottom: max(env(safe-area-inset-bottom), 1em);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import '../../elements/emby-button/paper-icon-button-light';
|
|||
import '../../elements/emby-select/emby-select';
|
||||
import '../../elements/emby-button/emby-button';
|
||||
import '../../assets/css/flexstyles.scss';
|
||||
import './style.scss';
|
||||
import Dashboard from '../../utils/dashboard';
|
||||
import Events from '../../utils/events.ts';
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<h2 style="background-color:rgba(82,181,75,.8);color:#fff;margin: 0;border-radius:100em;height:1.7em;width:1.7em;" class="flex align-items-center justify-content-center">
|
||||
2
|
||||
</h2>
|
||||
<h3 style="margin:0 0 0 .5em;">
|
||||
<h3 class="guideProviderSelectListings">
|
||||
${GuideProviderSelectListings}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
9
src/components/tvproviders/style.scss
Normal file
9
src/components/tvproviders/style.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.guideProviderSelectListings {
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
bottom: 0;
|
||||
width: 30em;
|
||||
padding: 1em;
|
||||
margin: 0 2em 2em 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
will-change: transform, opacity;
|
||||
|
|
@ -13,6 +12,14 @@
|
|||
color: #fff;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 2em 2em 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 2em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.upNextDialog-hidden {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue