diff --git a/injector.js b/injector.js index 9752ee2..ad6b244 100644 --- a/injector.js +++ b/injector.js @@ -84,7 +84,7 @@ { name: 'modal', script: 'modal.js', - css: null, + css: 'modal.css', dependencies: [], description: 'Generic modal system for Jellyfin-style dialogs' }, diff --git a/modal.css b/modal.css new file mode 100644 index 0000000..c2a631a --- /dev/null +++ b/modal.css @@ -0,0 +1,131 @@ +.mdl-radio { + box-sizing: border-box; + display: inline-block; + line-height: 24px; + margin: 0; + position: relative +} + +.radio-label-block { + -webkit-align-items: center; + align-items: center; + display: -webkit-flex; + display: flex; + margin-bottom: .5em; + margin-top: .5em +} + +.mdl-radio__button { + -webkit-appearance: none; + appearance: none; + border: none; + height: 1px; + line-height: 24px; + margin: 0; + opacity: 0; + padding: 0; + position: absolute; + width: 1px +} + +.mdl-radio__circles { + border-radius: 50%; + cursor: pointer; + height: 1.08em; + position: relative; + width: 1.08em +} + +[dir=ltr] .mdl-radio__circles { + margin-right: .54em +} + +[dir=rtl] .mdl-radio__circles { + margin-left: .54em +} + +.mdl-radio__circles svg { + height: 100%; + overflow: visible; + position: absolute; + top: 0; + width: 100%; + z-index: 1 +} + +[dir=ltr] .mdl-radio__circles svg { + left: 0 +} + +[dir=rtl] .mdl-radio__circles svg { + right: 0 +} + +.mdl-radio__button:disabled+.mdl-radio__circles { + cursor: auto +} + +.mdl-radio__button:disabled+.mdl-radio__circles .mdl-radio__outer-circle { + color: rgba(0,0,0,.26) +} + +.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle { + color: #00a4dc +} + +.mdl-radio__inner-circle { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + transition-duration: .2s; + transition-property: -webkit-transform; + transition-property: transform; + transition-property: transform,-webkit-transform +} + +.mdl-radio__button:checked+.mdl-radio__circles .mdl-radio__inner-circle { + -webkit-transform: scale(1); + transform: scale(1) +} + +.mdl-radio__button:disabled+.mdl-radio__circles .mdl-radio__inner-circle { + color: rgba(0,0,0,.26) +} + +.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle { + color: #00a4dc +} + +.mdl-radio__focus-circle { + background: #00a4dc; + border-radius: 50%; + box-sizing: border-box; + height: 100%; + left: 0; + margin: 0; + opacity: .26; + position: absolute; + top: 0; + -webkit-transform: scale(0); + transform: scale(0); + transition-duration: .2s; + transition-property: -webkit-transform; + transition-property: transform; + transition-property: transform,-webkit-transform; + width: 100% +} + +.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__focus-circle { + -webkit-transform: scale(1.75); + transform: scale(1.75) +} + +.mdl-radio__label { + cursor: pointer +} + +.mdl-radio__button:disabled+.mdl-radio__label { + color: rgba(0,0,0,.26); + cursor: auto +}