mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 10:28:18 -07:00
Replaced all inline entries with attribute bases selectors
This commit is contained in:
Hadi Charara
parent
f218e28949
commit
d4202e0279
@ -117,10 +117,17 @@ div[data-role=controlgroup] a[data-role=button]:last-child {
|
||||
}
|
||||
|
||||
div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
|
||||
[dir="ltr"] & {
|
||||
border-left-width: 0 !important;
|
||||
margin: 0 0 0 -0.4em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
border-right-width: 0 !important;
|
||||
margin: 0 -0.4em 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
div[data-role=controlgroup] a.ui-btn-active {
|
||||
background: #00a4dc !important;
|
||||
color: #292929 !important;
|
||||
|
||||
@ -170,11 +170,17 @@
|
||||
|
||||
.pageTitle {
|
||||
display: inline-flex;
|
||||
margin-block: 0;
|
||||
margin-inline: 0.5em 0;
|
||||
height: 1.7em;
|
||||
align-items: center;
|
||||
flex-shrink: 1;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
@ -246,17 +252,30 @@
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding-block: 0.9em !important;
|
||||
padding-inline: 2.4em 0 !important;
|
||||
flex-grow: 1;
|
||||
font-weight: 400 !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0.9em 0 0.9em 2.4em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.9em 2.4em 0.9em 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navMenuOptionIcon {
|
||||
margin-inline-end: 1.2em;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.navMenuOptionText {
|
||||
@ -265,9 +284,15 @@
|
||||
}
|
||||
|
||||
.sidebarHeader {
|
||||
padding-inline-start: 1.2em;
|
||||
margin-block: 1em 0.5em;
|
||||
margin-inline: 0;
|
||||
margin: 1em 0 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboardDocument .skinBody {
|
||||
@ -309,8 +334,11 @@
|
||||
width: 20.205em !important;
|
||||
font-size: 94%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: unset !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
@ -320,11 +348,12 @@
|
||||
}
|
||||
|
||||
.dashboardDocument .skinBody {
|
||||
[dir="ltr"] & {
|
||||
left: 20em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0 !important;
|
||||
right: 20em !important;
|
||||
right: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -391,7 +420,14 @@
|
||||
|
||||
.headerArrowImage {
|
||||
height: 20px;
|
||||
margin-inline-start: 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.backdropContainer {
|
||||
@ -421,15 +457,28 @@
|
||||
}
|
||||
|
||||
.viewControls + .listTopPaging {
|
||||
margin-inline-start: 0.5em !important;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.5em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.criticReview {
|
||||
margin: 1.5em 0;
|
||||
background: #222;
|
||||
padding: 0.8em 0.8em 0.8em 3em;
|
||||
border-radius: 0.3em;
|
||||
position: relative;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0.8em 0.8em 0.8em 3em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.8em 3em 0.8em 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.detailLogo {
|
||||
@ -482,12 +531,25 @@
|
||||
}
|
||||
|
||||
.reviewDate {
|
||||
margin-inline-start: 1em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewScore {
|
||||
position: absolute;
|
||||
inset-inline-start: 0.8em;
|
||||
[dir="ltr"] & {
|
||||
left: 0.8em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.itemBackdrop {
|
||||
@ -524,7 +586,6 @@
|
||||
.detailPageContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-inline: 32.45vw 2%;
|
||||
|
||||
.layout-mobile & {
|
||||
padding-left: 5%;
|
||||
@ -534,19 +595,25 @@
|
||||
.layout-desktop &,
|
||||
.layout-tv & {
|
||||
.emby-scroller {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
.layout-desktop &,
|
||||
.layout-tv & {
|
||||
.emby-scroller {
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding-left: 32.45vw;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 32.45vw;
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.detailSectionContent a {
|
||||
@ -673,7 +740,6 @@
|
||||
.layout-mobile .mainDetailButtons {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-inline-start: 0;
|
||||
|
||||
@include header-poster-padding;
|
||||
|
||||
@ -683,7 +749,12 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
padding-left: unset !important;
|
||||
|
||||
@include header-poster-padding-rtl;
|
||||
@ -716,24 +787,28 @@
|
||||
.layout-mobile & {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.5rem 5% !important;
|
||||
padding: 0.5rem 5%;
|
||||
}
|
||||
|
||||
.layout-desktop & {
|
||||
position: relative;
|
||||
padding-left: 32.45vw !important;
|
||||
}
|
||||
|
||||
.layout-tv & {
|
||||
display: block;
|
||||
padding-left: 32.45vw !important;
|
||||
}
|
||||
|
||||
[dir="ltr"] & {
|
||||
.layout-desktop &,
|
||||
.layout-tv & {
|
||||
padding-left: 32.45vw;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
.layout-desktop &,
|
||||
.layout-tv & {
|
||||
padding-right: 32.45vw !important;
|
||||
padding-left: unset !important;
|
||||
padding-right: 32.45vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -769,9 +844,16 @@
|
||||
}
|
||||
|
||||
.infoText {
|
||||
text-align: start;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.detailPageSecondaryContainer {
|
||||
@ -972,8 +1054,17 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
||||
}
|
||||
|
||||
.recordingFields button {
|
||||
margin-inline: 0 0.5em;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.mainDetailButtons.hide + .recordingFields {
|
||||
@ -1116,8 +1207,15 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
||||
}
|
||||
|
||||
.mediaInfoLabel {
|
||||
margin-inline-end: 1em;
|
||||
font-weight: 600;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingProgressBar::-moz-progress-bar {
|
||||
@ -1207,19 +1305,39 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
||||
}
|
||||
|
||||
.sectionTitleButton {
|
||||
margin-inline-start: 1.5em !important;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1.5em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitleButton + .sectionTitleButton {
|
||||
margin-inline-start: 0.5em !important;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.5em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitleIconButton {
|
||||
margin-inline-start: 1.5em !important;
|
||||
flex-shrink: 0;
|
||||
font-size: 84% !important;
|
||||
padding: 0.5em !important;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1.5em !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalItemsContainer {
|
||||
@ -1248,11 +1366,23 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
||||
}
|
||||
|
||||
.padded-left {
|
||||
padding-inline-start: 3.3%;
|
||||
[dir="ltr"] & {
|
||||
padding-left: 3.3%;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 3.3%;
|
||||
}
|
||||
}
|
||||
|
||||
.padded-right {
|
||||
padding-inline-end: 3.3%;
|
||||
[dir="ltr"] & {
|
||||
padding-right: 3.3%;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-left: 3.3%;
|
||||
}
|
||||
}
|
||||
|
||||
.padded-top {
|
||||
|
||||
@ -7,7 +7,13 @@
|
||||
}
|
||||
|
||||
.libraryTree {
|
||||
margin-inline-start: 0.25em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.offlineEditorNode {
|
||||
@ -54,22 +60,30 @@
|
||||
@media all and (min-width: 50em) {
|
||||
.editPageSidebar {
|
||||
position: fixed;
|
||||
inset-block: 5.2em 0;
|
||||
inset-inline-start: 0;
|
||||
top: 5.2em;
|
||||
bottom: 0;
|
||||
width: 30%;
|
||||
border-inline-end: 1px solid #555;
|
||||
display: block;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
border-left: 1px solid #555;
|
||||
}
|
||||
}
|
||||
|
||||
.editPageInnerContent {
|
||||
float: right;
|
||||
width: 68.5%;
|
||||
}
|
||||
|
||||
[dir="ltr"] & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
@media all and (min-width: 50em) {
|
||||
.editPageInnerContent {
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,14 @@
|
||||
}
|
||||
|
||||
.actionsheetListItemBody {
|
||||
[dir="ltr"] & {
|
||||
padding: 0.4em 1em 0.4em 0.6em !important;
|
||||
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.4em 0.6em 0.4em 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetItemText {
|
||||
@ -64,7 +71,16 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
margin-inline: 5em 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetScroller {
|
||||
@ -100,9 +116,15 @@
|
||||
}
|
||||
|
||||
.actionsheetMenuItemIcon {
|
||||
margin-block: 0 !important;
|
||||
margin-inline: 0.45em 0.85em !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 +134,12 @@
|
||||
.btnCloseActionSheet {
|
||||
position: fixed;
|
||||
top: 0.75em;
|
||||
inset-inline-start: 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,19 +107,22 @@
|
||||
}
|
||||
|
||||
.alphaPicker-fixed-right {
|
||||
inset-inline-end: 0.4em;
|
||||
[dir="ltr"] & {
|
||||
right: 0.4em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 62.5em) {
|
||||
.alphaPicker-fixed-right {
|
||||
[dir="ltr"] & {
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
@media all and (min-width: 62.5em) {
|
||||
.alphaPicker-fixed-right {
|
||||
right: unset;
|
||||
[dir="rtl"] & {
|
||||
left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -302,7 +302,14 @@ button::-moz-focus-inner {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: start;
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog .cardText {
|
||||
@ -396,21 +403,35 @@ button::-moz-focus-inner {
|
||||
}
|
||||
|
||||
.cardIndicators {
|
||||
inset-inline-end: 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;
|
||||
inset-inline-start: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-size: 92%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.programAttributeIndicator {
|
||||
@ -430,7 +451,15 @@ button::-moz-focus-inner {
|
||||
.cardOverlayButton-br {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cardOverlayButtonIcon {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="formDialogHeader formDialogHeader-clear justify-content-center">
|
||||
<h1 class="formDialogHeaderTitle" style="margin-inline-start: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-inline-start: 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-inline-start: 1em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.formDialogContent:not(.no-grow) {
|
||||
@ -98,7 +110,17 @@
|
||||
.formDialogFooterItem-autosize {
|
||||
flex-basis: initial;
|
||||
flex-grow: initial;
|
||||
padding-inline: 2em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 50em) {
|
||||
@ -107,7 +129,15 @@
|
||||
}
|
||||
|
||||
.dialogContentInner {
|
||||
padding-inline: 1.5em;
|
||||
[dir="ltr"] & {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,6 +147,14 @@
|
||||
}
|
||||
|
||||
.dialogContentInner {
|
||||
padding-inline: 2em;
|
||||
[dir="ltr"] & {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -307,13 +307,20 @@
|
||||
}
|
||||
|
||||
.programIcon {
|
||||
margin-inline-start: 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-inline-start: auto;
|
||||
margin-inline-end: 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-inline-start: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: .5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: .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-inline-start: 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-inline-start: .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-inline-start: 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-inline-start: .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>
|
||||
|
||||
@ -7,8 +7,16 @@
|
||||
|
||||
.itemProgressBarForeground {
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
@ -31,7 +39,13 @@
|
||||
}
|
||||
|
||||
.indicator + .indicator {
|
||||
margin-inline-start: 0.25em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.indicatorIcon {
|
||||
|
||||
@ -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-inline-start: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;
|
||||
}
|
||||
}
|
||||
@ -9,10 +9,18 @@
|
||||
margin: 0;
|
||||
display: block;
|
||||
align-items: center;
|
||||
text-align: start;
|
||||
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 {
|
||||
@ -211,17 +219,31 @@
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
font-size: 143%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemIcon:not(.listItemIcon-transparent) {
|
||||
background-color: #00a4dc;
|
||||
color: #fff;
|
||||
padding: 0.5em;
|
||||
border-radius: 100em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.2em 0 0.4em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.4em 0 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemProgressBar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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-inline-start: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:.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right:.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';
|
||||
|
||||
@ -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-inline-start: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:.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right:.5em;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,13 @@
|
||||
.mediaInfoItem {
|
||||
margin-block: 0;
|
||||
margin-inline: 0 1em;
|
||||
padding: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaInfoText {
|
||||
@ -26,7 +32,13 @@
|
||||
}
|
||||
|
||||
.mediaInfoItem:last-child {
|
||||
margin-inline-end: 0;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.starRatingContainer {
|
||||
@ -47,7 +59,6 @@
|
||||
}
|
||||
|
||||
.mediaInfoCriticRating {
|
||||
padding-inline-start: 1.5em;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 1.2em;
|
||||
@ -55,7 +66,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.5em;
|
||||
background-position: right center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -130,7 +130,7 @@ import datetime from '../../scripts/datetime';
|
||||
html += '<h1 class="itemSelectionCount"></h1>';
|
||||
|
||||
const moreIcon = 'more_vert';
|
||||
html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-inline-start: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;
|
||||
|
||||
|
||||
@ -34,3 +34,7 @@
|
||||
.withMultiSelect {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btnSelectionPanelOptions {
|
||||
margin-left:auto;
|
||||
}
|
||||
|
||||
@ -54,10 +54,20 @@
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
text-align: start;
|
||||
flex-grow: 1;
|
||||
font-size: 92%;
|
||||
margin-inline: 0.5em 1em;
|
||||
|
||||
[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 {
|
||||
@ -91,8 +101,6 @@
|
||||
|
||||
.nowPlayingBarRight {
|
||||
position: relative;
|
||||
margin-block: 0;
|
||||
margin-inline: auto 0.5em;
|
||||
|
||||
/* 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-inline-end: 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;
|
||||
inset-inline-start: 1.5em;
|
||||
position: absolute;
|
||||
top: 5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-tv {
|
||||
@ -31,26 +38,51 @@
|
||||
.playerStats-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block: 0 1em;
|
||||
padding-inline: 1em 3em;
|
||||
max-width: 50em;
|
||||
overflow: hidden;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0 3em 1em 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0 1em 1em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat {
|
||||
display: flex;
|
||||
margin-inline-start: 1em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 1em;
|
||||
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-label {
|
||||
font-weight: 500;
|
||||
margin-block: 0;
|
||||
margin-inline: 0 0.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-header {
|
||||
margin-block: 1em 0;
|
||||
margin-inline: 0 1em;
|
||||
[dir="ltr"] & {
|
||||
margin: 1em 1em 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 1em 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.playerStats-stat-value {
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
.recordingButton {
|
||||
margin-inline-start: 0;
|
||||
min-width: 10em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingIcon-active {
|
||||
|
||||
@ -39,9 +39,15 @@
|
||||
}
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
[dir="ltr"] & {
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingAlbum a,
|
||||
.nowPlayingArtist a {
|
||||
font-weight: normal;
|
||||
@ -98,10 +104,17 @@
|
||||
|
||||
.nowPlayingPageImageContainer {
|
||||
width: 16%;
|
||||
margin-inline-end: 1em;
|
||||
position: relative;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainerNoAlbum {
|
||||
@ -269,7 +282,13 @@
|
||||
|
||||
@media all and (min-width: 80em) {
|
||||
.nowPlayingPageImageContainer {
|
||||
margin-inline-end: 0.75em;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -366,24 +385,49 @@
|
||||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
|
||||
padding-top: 0;
|
||||
padding-inline-end: 0;
|
||||
margin-inline-end: 0;
|
||||
float: inline-end;
|
||||
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-inline-start: 0;
|
||||
margin-inline-end: 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-inline-start: auto;
|
||||
margin-inline-end: 0;
|
||||
font-size: smaller;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
|
||||
@ -9,3 +9,8 @@
|
||||
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,12 +1,19 @@
|
||||
.toastContainer {
|
||||
position: fixed;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999999;
|
||||
padding: 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 'jellyfin-apiclient';
|
||||
|
||||
|
||||
@ -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 .5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: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 {
|
||||
|
||||
@ -113,7 +113,10 @@ import confirm from '../../../components/confirm/confirm';
|
||||
deviceHtml += '<div class="cardFooter">';
|
||||
|
||||
if (canEdit || canDelete(device.Id)) {
|
||||
deviceHtml += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
|
||||
if (globalize.getIsRTL())
|
||||
deviceHtml += '<div style="text-align:left; float:left;padding-top:5px;">';
|
||||
else
|
||||
deviceHtml += '<div style="text-align:right; float:right;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>';
|
||||
}
|
||||
|
||||
@ -83,7 +83,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
|
||||
html += '<div class="cardFooter">';
|
||||
|
||||
if (configPage || plugin.CanUninstall) {
|
||||
html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
|
||||
if (globalize.getIsRTL())
|
||||
html += '<div style="text-align:left; float:left;padding-top:5px;">';
|
||||
else
|
||||
html += '<div style="text-align:right; float:right;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>';
|
||||
}
|
||||
|
||||
@ -58,7 +58,10 @@ import '../../../elements/emby-button/emby-button';
|
||||
html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>';
|
||||
html += '</a>';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:start;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
|
||||
let textAlignStyle = 'left';
|
||||
if (globalize.getIsRTL())
|
||||
textAlignStyle = 'right';
|
||||
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
|
||||
html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>';
|
||||
html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>';
|
||||
html += '</a>';
|
||||
|
||||
@ -17,20 +17,36 @@
|
||||
align-items: center;
|
||||
text-transform: none;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
border-width: 0 0 0.1em 0;
|
||||
border-style: solid;
|
||||
padding-left: 0.1em;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
[dir="ltr"] & {
|
||||
text-align: left;
|
||||
padding-left: 0.1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-collapse-expandIcon {
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms ease-out;
|
||||
position: absolute;
|
||||
inset-inline-end: 0.5em;
|
||||
font-size: 1.5em;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-collapse-expandIconExpanded {
|
||||
|
||||
@ -47,12 +47,24 @@
|
||||
|
||||
.inlineForm .inputContainer:first-child,
|
||||
.inlineForm .selectContainer:first-child {
|
||||
margin-inline-start: 0;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0
|
||||
}
|
||||
}
|
||||
|
||||
.inlineForm .inputContainer:last-child,
|
||||
.inlineForm .selectContainer:last-child {
|
||||
margin-inline-end: 0;
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inputLabel {
|
||||
|
||||
@ -32,11 +32,18 @@
|
||||
|
||||
.mdl-radio__circles {
|
||||
position: relative;
|
||||
margin-inline-end: 0.54em;
|
||||
width: 1.08em;
|
||||
height: 1.08em;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
[dir="ltr"] & {
|
||||
margin-right: 0.54em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0.54em;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-radio__circles svg {
|
||||
@ -44,9 +51,16 @@
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__circles {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.emby-scrollbuttons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 104px;
|
||||
@ -10,6 +9,14 @@
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button > .material-icons {
|
||||
|
||||
@ -9,7 +9,15 @@
|
||||
|
||||
/* align first card in scroller to heading */
|
||||
.itemsContainer > .card > .cardBox {
|
||||
margin-inline: 0 1.2em;
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0;
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.servers > .card > .cardBox {
|
||||
|
||||
@ -11,14 +11,20 @@
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 0.5em 1.9em;
|
||||
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0.5em 1.9em 0.5em 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.5em 0.5em 0.5em 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-select[disabled] {
|
||||
@ -35,9 +41,15 @@
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select {
|
||||
padding-block: 0.3em;
|
||||
padding-inline: 0.5em 1.9em;
|
||||
font-size: inherit;
|
||||
|
||||
[dir="ltr"] & {
|
||||
padding: 0.3em 1.9em 0.3em 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding: 0.3em 0.5em 0.3em 1.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select[disabled] {
|
||||
@ -94,10 +106,17 @@
|
||||
|
||||
.selectArrowContainer {
|
||||
position: absolute;
|
||||
inset-inline-end: 0.3em;
|
||||
top: 0.2em;
|
||||
color: inherit;
|
||||
pointer-events: none;
|
||||
|
||||
[dir="ltr"] & {
|
||||
right: 0.3em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.selectContainer-inline > .selectArrowContainer {
|
||||
|
||||
@ -417,7 +417,10 @@ import globalize from '../../scripts/globalize';
|
||||
|
||||
function setRange(elem, startPercent, endPercent) {
|
||||
const style = elem.style;
|
||||
style.insetInlineStart = Math.max(startPercent, 0) + '%';
|
||||
if (globalize.getIsRTL())
|
||||
style.right = Math.max(startPercent, 0) + '%';
|
||||
else
|
||||
style.left = Math.max(startPercent, 0) + '%';
|
||||
|
||||
const widthPercent = endPercent - startPercent;
|
||||
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
|
||||
|
||||
@ -151,10 +151,16 @@
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
top: 50%;
|
||||
inset-inline-start: 0;
|
||||
position: absolute;
|
||||
padding-block: 0;
|
||||
padding-inline: 0.54em;/* half of slider thumb size */
|
||||
padding: 0 0.54em; /* half of slider thumb size */
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex {
|
||||
@ -163,11 +169,18 @@
|
||||
margin-top: -0.1em;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
inset-inline-start: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex-inner {
|
||||
@ -178,11 +191,18 @@
|
||||
.mdl-slider-background-lower {
|
||||
/* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
width: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #00a4dc;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-slider-background-lower-clear {
|
||||
@ -212,8 +232,7 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-block: 0;
|
||||
margin-inline: 0.54em; /* half of slider thumb size */
|
||||
margin: 0 0.54em; /* half of slider thumb size */
|
||||
}
|
||||
|
||||
.sliderBubble {
|
||||
|
||||
@ -59,7 +59,6 @@
|
||||
.mdl-switch__thumb {
|
||||
background: #999;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: -0.25em;
|
||||
height: 1.44em;
|
||||
width: 1.44em;
|
||||
@ -72,6 +71,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
[dir="ltr"] & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="preload">
|
||||
<html class="preload" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
@ -98,12 +98,19 @@
|
||||
.mainDrawerHandle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mainDrawerHandle {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mainDrawerHandle {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -148,7 +155,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body dir="ltr">
|
||||
<div class="backdropContainer"></div>
|
||||
<div class="backgroundContainer"></div>
|
||||
<div class="mainDrawer hide">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user