More small css fixes

This commit is contained in:
Hadi Charara 2022-07-03 10:13:06 -04:00
parent b671da1086
commit d38518e1e5
23 changed files with 55 additions and 48 deletions

View file

@ -348,7 +348,7 @@
.headerArrowImage {
height: 20px;
margin-left: 0.5em;
margin-inline-start: 0.5em;
}
.backdropContainer {
@ -378,7 +378,7 @@
}
.viewControls + .listTopPaging {
margin-left: 0.5em !important;
margin-inline-start: 0.5em !important;
}
.criticReview {
@ -439,12 +439,12 @@
}
.reviewDate {
margin-left: 1em;
margin-inline-start: 1em;
}
.reviewScore {
position: absolute;
left: 0.8em;
inset-inline-start: 0.8em;
}
.itemBackdrop {
@ -630,7 +630,7 @@
.layout-mobile .mainDetailButtons {
margin-top: 1em;
margin-bottom: 0.5em;
margin-left: 0;
margin-inline-start: 0;
@include header-poster-padding;
@ -639,6 +639,13 @@
margin-bottom: 0;
padding-left: 0;
}
[dir="rtl"] & {
@media all and (max-width: 32em) {
padding-left: unset;
padding-right: 0;
}
}
}
.subtitle {
@ -909,8 +916,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
}
.recordingFields button {
margin-left: 0;
margin-right: 0.5em;
margin-inline: 0 0.5em;
flex-shrink: 0;
}
@ -1145,16 +1151,16 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
}
.sectionTitleButton {
margin-left: 1.5em !important;
margin-inline-start: 1.5em !important;
flex-shrink: 0;
}
.sectionTitleButton + .sectionTitleButton {
margin-left: 0.5em !important;
margin-inline-start: 0.5em !important;
}
.sectionTitleIconButton {
margin-left: 1.5em !important;
margin-inline-start: 1.5em !important;
flex-shrink: 0;
font-size: 84% !important;
padding: 0.5em !important;

View file

@ -7,7 +7,7 @@
}
.libraryTree {
margin-left: 0.25em;
margin-inline-start: 0.25em;
}
.offlineEditorNode {

View file

@ -12,7 +12,7 @@
}
.formDialogHeaderTitle {
margin-left: 0.25em;
margin-inline-start: 0.25em;
/* In case of h1, h2, h3 */
margin-top: 0;
@ -20,7 +20,7 @@
}
.formDialogHeaderTitle:first-child {
margin-left: 1em;
margin-inline-start: 1em;
}
.formDialogContent:not(.no-grow) {
@ -98,8 +98,7 @@
.formDialogFooterItem-autosize {
flex-basis: initial;
flex-grow: initial;
padding-left: 2em;
padding-right: 2em;
padding-inline: 2em;
}
@media all and (min-width: 50em) {
@ -108,8 +107,7 @@
}
.dialogContentInner {
padding-left: 1.5em;
padding-right: 1.5em;
padding-inline: 1.5em;
}
}
@ -119,7 +117,6 @@
}
.dialogContentInner {
padding-left: 2em;
padding-right: 2em;
padding-inline: 2em;
}
}

View file

@ -307,7 +307,7 @@
}
.programIcon {
margin-left: 0.5em;
margin-inline-start: 0.5em;
height: 1em;
width: 1em;
font-size: 1.6em;
@ -340,8 +340,8 @@
}
.guideChannelName {
margin-left: auto;
margin-right: 1em;
margin-inline-start: auto;
margin-inline-end: 1em;
text-overflow: ellipsis;
overflow: hidden;
max-width: 70%;

View file

@ -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" style="margin-inline-start:1.5em;">
<span class="material-icons folder" aria-hidden="true"></span>
<span>${Browse}</span>
</button>

View file

@ -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" style="margin-inline-start: 1em;">
<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" style="margin-inline-start: .5em;">
<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" style="margin-inline-start: 1em;" 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" style="margin-inline-start: .5em;" data-imagetype="Backdrop">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>

View file

@ -31,7 +31,7 @@
}
.indicator + .indicator {
margin-left: 0.25em;
margin-inline-start: 0.25em;
}
.indicatorIcon {

View file

@ -231,7 +231,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="margin-inline-start:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
}
html += '</div>';
html += '<div class="checkboxList paperList checkboxList-paperList">';

View file

@ -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" style="margin-inline-start:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>

View file

@ -109,7 +109,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}" style="padding-inline-start:.5em;">`;
html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
html += '<h3 class="listItemBodyText">';
html += escapeHtml(pathInfo.Path);

View file

@ -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" style="margin-inline-start:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>

View file

@ -47,13 +47,17 @@
}
.mediaInfoCriticRating {
padding-left: 1.5em;
padding-inline-start: 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="rtl"] & {
background-position: right center;
}
}
.mediaInfoCriticRatingFresh {

View file

@ -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" style="margin-inline-start:1em;" 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" style="margin-inline-start:1em;" 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" style="margin-inline-start:1em;" 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" style="margin-inline-start:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
<div class="paperList" id="listTags"></div>

View file

@ -2,7 +2,7 @@
background: rgba(28, 28, 28, 0.8);
border-radius: 0.3em;
color: #fff;
left: 1.5em;
inset-inline-start: 1.5em;
position: absolute;
top: 5em;
}

View file

@ -1,5 +1,5 @@
.recordingButton {
margin-left: 0;
margin-inline-start: 0;
min-width: 10em;
}

View file

@ -1,6 +1,6 @@
.toastContainer {
position: fixed;
left: 0;
inset-inline-start: 0;
bottom: 0;
pointer-events: none;
z-index: 9999999;

View file

@ -113,7 +113,7 @@ import confirm from '../../../components/confirm/confirm';
deviceHtml += '<div class="cardFooter">';
if (canEdit || canDelete(device.Id)) {
deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
deviceHtml += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
deviceHtml += '</div>';
}

View file

@ -310,7 +310,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
if (virtualFolder.showMenu !== false) {
html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
html += '</div>';
}

View file

@ -83,7 +83,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
html += '<div class="cardFooter">';
if (configPage || plugin.CanUninstall) {
html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
html += '</div>';
}

View file

@ -47,12 +47,12 @@
.inlineForm .inputContainer:first-child,
.inlineForm .selectContainer:first-child {
margin-left: 0;
margin-inline-start: 0;
}
.inlineForm .inputContainer:last-child,
.inlineForm .selectContainer:last-child {
margin-right: 0;
margin-inline-end: 0;
}
.inputLabel {

View file

@ -44,7 +44,7 @@
height: 100%;
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
z-index: 1;
overflow: visible;
}

View file

@ -59,7 +59,7 @@
.mdl-switch__thumb {
background: #999;
position: absolute;
left: 0;
inset-inline-start: 0;
top: -0.25em;
height: 1.44em;
width: 1.44em;

View file

@ -98,7 +98,7 @@
.mainDrawerHandle {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
bottom: 0;
z-index: 1;
width: 0.8em;