mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update components
This commit is contained in:
Luke Pulverenti
parent
8f42677b0c
commit
5b72e1c91b
@ -45,7 +45,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.noflex .actionSheetItemText {
|
||||
.emby-button-noflex .actionSheetItemText {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
[is="emby-button"] {
|
||||
.emby-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
@ -30,17 +30,20 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[is="emby-button"].raised, [is="emby-button"].fab {
|
||||
.emby-button.raised, .emby-button.fab {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[is="emby-button"].fab {
|
||||
.emby-button > i {
|
||||
/* For non-fab buttons that have icons */
|
||||
font-size: 1.5em;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emby-button.fab {
|
||||
display: inline-flex;
|
||||
border-radius: 50%;
|
||||
min-width: 56px;
|
||||
min-height: 56px;
|
||||
height: 5.2vh;
|
||||
width: 5.2vh;
|
||||
background-color: #444;
|
||||
padding: .6em;
|
||||
box-sizing: border-box;
|
||||
@ -51,40 +54,29 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab i {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
.emby-button.fab > i {
|
||||
height: auto;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
font-size: 40px;
|
||||
font-size: 2.85em;
|
||||
}
|
||||
|
||||
[is="emby-button"].noflex {
|
||||
.emby-button.noflex {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab.mini:not(.autoSize) {
|
||||
min-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
height: 3.3vh !important;
|
||||
width: 3.3vh !important;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab.mini {
|
||||
.emby-button.fab.mini {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab.mini i {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
font-size: 24px !important;
|
||||
.emby-button.fab.mini > i {
|
||||
height: auto;
|
||||
width: auto;
|
||||
font-size: 1.72em;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is="emby-button"].block {
|
||||
.emby-button.block {
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -92,38 +84,25 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[is="emby-button"].raised:focus {
|
||||
.emby-button.raised:focus {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[is="emby-button"] i + span {
|
||||
.emby-button i + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
[is="emby-button"] span + i {
|
||||
.emby-button span + i {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
[is="emby-button"]:not(.autoSize) i {
|
||||
font-size: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.emby-button.iconRight i {
|
||||
margin-left: auto;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
[is=emby-button].autoSize {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
min-height: initial !important;
|
||||
min-width: initial !important;
|
||||
}
|
||||
|
||||
[is=emby-button].iconRight i {
|
||||
margin-left: auto;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
[is=emby-button].noflex.iconRight i {
|
||||
.emby-button-noflex.iconRight i {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
@ -182,32 +161,32 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > img {
|
||||
width: 1.72em;
|
||||
/* Can't use 100% height or it will stretch past the boundaries in safari */
|
||||
/*height: 100%;*/
|
||||
max-height: 100%;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.paper-icon-button-light > img {
|
||||
width: 1.72em;
|
||||
/* Can't use 100% height or it will stretch past the boundaries in safari */
|
||||
/*height: 100%;*/
|
||||
max-height: 100%;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity .3s ease-out;
|
||||
background: currentcolor;
|
||||
opacity: 0;
|
||||
}
|
||||
.paper-icon-button-light:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity .3s ease-out;
|
||||
background: currentcolor;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus:after {
|
||||
opacity: .2;
|
||||
}
|
||||
.paper-icon-button-light:focus:after {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.ripple-effect {
|
||||
position: absolute;
|
||||
|
||||
@ -55,14 +55,14 @@
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embybutton') == 'true') {
|
||||
if (this.classList.contains('emby-button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-embybutton', 'true');
|
||||
this.classList.add('emby-button');
|
||||
|
||||
if (browser.safari || browser.firefox || browser.noFlex) {
|
||||
this.classList.add('noflex');
|
||||
this.classList.add('emby-button-noflex');
|
||||
}
|
||||
|
||||
if (enableAnimation()) {
|
||||
|
||||
@ -406,11 +406,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.detailButtonsContainer {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
[is="emby-button"].detailFloatingButton {
|
||||
.emby-button.detailFloatingButton {
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
top: -28px;
|
||||
@ -419,7 +415,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
background-color: #52B54B !important;
|
||||
}
|
||||
|
||||
[is="emby-button"].btnFloatingRecord {
|
||||
.emby-button.btnFloatingRecord {
|
||||
background-color: #cc3333 !important;
|
||||
}
|
||||
|
||||
@ -530,15 +526,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.detailPageCollabsible .ui-collapsible-heading a {
|
||||
background-color: #141414 !important;
|
||||
font-size: 16px;
|
||||
font-weight: 400 !important;
|
||||
border-radius: 4px;
|
||||
padding-top: .75em;
|
||||
padding-bottom: .75em;
|
||||
}
|
||||
|
||||
.detailSection h1 {
|
||||
margin-bottom: .25em;
|
||||
position: relative;
|
||||
@ -556,11 +543,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailSectionHeader, .detailSectionHeader h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ui-body-a .detailSectionHeader {
|
||||
border: 1px solid #ddd;
|
||||
border-width: 0 0 1px 0;
|
||||
@ -573,6 +555,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
|
||||
.detailSectionHeader, .detailSectionHeader h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.detailSectionHeader button {
|
||||
@ -808,7 +791,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
display: block;
|
||||
color: #fff;
|
||||
margin-bottom: 1em;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.mediaInfoAttribute {
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab iron-icon {
|
||||
.emby-button.fab iron-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is="emby-button"] iron-icon + span {
|
||||
.emby-button iron-icon + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
.paper-icon-button-light > iron-icon {
|
||||
|
||||
@ -1664,7 +1664,7 @@
|
||||
|
||||
var displayType = Globalize.translate('MediaInfoStreamType' + stream.Type);
|
||||
|
||||
html += '<div class="mediaInfoStreamType">' + displayType + '</div>';
|
||||
html += '<h3 class="mediaInfoStreamType">' + displayType + '</h3>';
|
||||
|
||||
var attributes = [];
|
||||
|
||||
|
||||
56
dashboard-ui/thirdparty/paper-button-style.css
vendored
56
dashboard-ui/thirdparty/paper-button-style.css
vendored
@ -1,106 +1,106 @@
|
||||
button[is="emby-button"]:not(.fab).blue {
|
||||
button.emby-button:not(.fab).blue {
|
||||
color: #03a9f4;
|
||||
}
|
||||
|
||||
button[is="emby-button"]:not(.fab).blue:hover {
|
||||
button.emby-button:not(.fab).blue:hover {
|
||||
background: #e1f5f3;
|
||||
}
|
||||
|
||||
button[is="emby-button"].fab.blue {
|
||||
button.emby-button.fab.blue {
|
||||
background: #03a9f4;
|
||||
}
|
||||
|
||||
button[is="emby-button"].menuButton {
|
||||
button.emby-button.menuButton {
|
||||
color: #212121;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button[is="emby-button"].menuButton:hover {
|
||||
button.emby-button.menuButton:hover {
|
||||
background: #e1f5f3;
|
||||
}
|
||||
|
||||
|
||||
button[is="emby-button"].submit {
|
||||
button.emby-button.submit {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.submit, button[is="emby-button"].raised:not(.subdued):not(.cancel) {
|
||||
button.emby-button.raised.submit, button.emby-button.raised:not(.subdued):not(.cancel) {
|
||||
background: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button[is="emby-button"].more {
|
||||
button.emby-button.more {
|
||||
color: #EC407A;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.more {
|
||||
button.emby-button.raised.more {
|
||||
background: #EC407A;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button[is="emby-button"].secondary {
|
||||
button.emby-button.secondary {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.secondary {
|
||||
button.emby-button.raised.secondary {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button[is="emby-button"].accent {
|
||||
button.emby-button.accent {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.accent {
|
||||
button.emby-button.raised.accent {
|
||||
background: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button[is="emby-button"].alt {
|
||||
button.emby-button.alt {
|
||||
color: #F57F17;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.alt {
|
||||
button.emby-button.raised.alt {
|
||||
background: #F57F17;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-body-b button[is="emby-button"].cancel {
|
||||
.ui-body-b button.emby-button.cancel {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.ui-body-b button[is="emby-button"].raised.cancel {
|
||||
.ui-body-b button.emby-button.raised.cancel {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button[is="emby-button"].cancelDark {
|
||||
button.emby-button.cancelDark {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
button[is="emby-button"].raised.cancelDark {
|
||||
button.emby-button.raised.cancelDark {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-body-b button[is="emby-button"].subdued:not([disabled]) {
|
||||
.ui-body-b button.emby-button.subdued:not([disabled]) {
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.ui-body-b button[is="emby-button"].raised.subdued:not([disabled]) {
|
||||
.ui-body-b button.emby-button.raised.subdued:not([disabled]) {
|
||||
background: #404040;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-body-b button[is="emby-button"].raised[disabled].subduedd {
|
||||
.ui-body-b button.emby-button.raised[disabled].subduedd {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
button[is="emby-button"] span {
|
||||
button.emby-button span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button[is="emby-button"].iconRight iron-icon {
|
||||
button.emby-button.iconRight iron-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
@ -126,22 +126,22 @@ button[is="emby-button"].iconRight iron-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
button[is="emby-button"].mini:not(.fab) {
|
||||
button.emby-button.mini:not(.fab) {
|
||||
padding: 0.4em 0.7em;
|
||||
}
|
||||
|
||||
button[is="emby-button"].mini:not(.fab) iron-icon {
|
||||
button.emby-button.mini:not(.fab) iron-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
button[is="emby-button"].notext {
|
||||
button.emby-button.notext {
|
||||
min-width: 2.8em;
|
||||
padding-left: .25em !important;
|
||||
padding-right: .25em !important;
|
||||
}
|
||||
|
||||
button[is="emby-button"].notext iron-icon {
|
||||
button.emby-button.notext iron-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user