wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced all inline entries with attribute bases selectors

Browse Source
This commit is contained in:
Hadi Charara
2022-07-14 17:59:23 -04:00
parent f218e28949
commit d4202e0279
50 changed files with 805 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/elements/emby-collapse/emby-collapse.scss
+18 -2
View File
@@ -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 {
src/elements/emby-input/emby-input.scss
+14 -2
View File
@@ -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 {
src/elements/emby-radio/emby-radio.scss
+16 -2
View File
@@ -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 {
src/elements/emby-scrollbuttons/emby-scrollbuttons.scss
+8 -1
View File
@@ -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 {
src/elements/emby-scroller/emby-scroller.scss
+9 -1
View File
@@ -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 {
src/elements/emby-select/emby-select.scss
+24 -5
View File
@@ -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 {
src/elements/emby-slider/emby-slider.js
+4 -1
View File
@@ -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) + '%';
src/elements/emby-slider/emby-slider.scss
+26 -7
View File
@@ -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 {
src/elements/emby-toggle/emby-toggle.scss
+8 -1
View File
@@ -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 {