mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update components

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-05 02:10:24 -04:00
parent 8f42677b0c
commit 5b72e1c91b
7 changed files with 90 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css vendored
View file

@ -45,7 +45,7 @@
vertical-align: middle; vertical-align: middle;
} }
.noflex .actionSheetItemText { .emby-button-noflex .actionSheetItemText {
display: inline-block; display: inline-block;
} }

87
dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css vendored
View file

@ -1,4 +1,4 @@
[is="emby-button"] { .emby-button {
position: relative; position: relative;
display: inline-block; display: inline-block;
align-items: center; align-items: center;
@ -30,17 +30,20 @@
text-transform: uppercase; 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); 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; display: inline-flex;
border-radius: 50%; border-radius: 50%;
min-width: 56px;
min-height: 56px;
height: 5.2vh;
width: 5.2vh;
background-color: #444; background-color: #444;
padding: .6em; padding: .6em;
box-sizing: border-box; box-sizing: border-box;
@ -51,40 +54,29 @@
margin: 0; margin: 0;
} }
[is="emby-button"].fab i { .emby-button.fab > i {
height: 40px; height: auto;
width: 40px; width: auto;
vertical-align: middle; vertical-align: middle;
font-size: 40px; font-size: 2.85em;
} }
[is="emby-button"].noflex { .emby-button.noflex {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
} }
[is="emby-button"].fab.mini:not(.autoSize) { .emby-button.fab.mini {
min-width: 40px !important;
min-height: 40px !important;
height: 3.3vh !important;
width: 3.3vh !important;
}
[is="emby-button"].fab.mini {
padding: 8px; padding: 8px;
} }
[is="emby-button"].fab.mini i { .emby-button.fab.mini > i {
height: 24px !important; height: auto;
width: 24px !important; width: auto;
font-size: 24px !important; font-size: 1.72em;
} }
[is="emby-button"].fab i { .emby-button.block {
vertical-align: middle;
}
[is="emby-button"].block {
display: block; display: block;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -92,38 +84,25 @@
width: 100%; 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); 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); 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; margin-left: .5em;
} }
[is="emby-button"] span + i { .emby-button span + i {
margin-left: .5em; margin-left: .5em;
} }
[is="emby-button"]:not(.autoSize) i { .emby-button.iconRight i {
font-size: 24px;
width: 24px;
height: 24px;
}
[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-left: auto;
margin-right: .25em; margin-right: .25em;
} }
[is=emby-button].noflex.iconRight i { .emby-button-noflex.iconRight i {
position: absolute; position: absolute;
right: 0; right: 0;
top: 25%; top: 25%;
@ -182,7 +161,7 @@
vertical-align: middle; vertical-align: middle;
} }
.paper-icon-button-light > img { .paper-icon-button-light > img {
width: 1.72em; width: 1.72em;
/* Can't use 100% height or it will stretch past the boundaries in safari */ /* Can't use 100% height or it will stretch past the boundaries in safari */
/*height: 100%;*/ /*height: 100%;*/
@ -191,9 +170,9 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
vertical-align: middle; vertical-align: middle;
} }
.paper-icon-button-light:after { .paper-icon-button-light:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -203,11 +182,11 @@
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
background: currentcolor; background: currentcolor;
opacity: 0; opacity: 0;
} }
.paper-icon-button-light:focus:after { .paper-icon-button-light:focus:after {
opacity: .2; opacity: .2;
} }
.ripple-effect { .ripple-effect {
position: absolute; position: absolute;

6
dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js vendored
View file

@ -55,14 +55,14 @@
EmbyButtonPrototype.attachedCallback = function () { EmbyButtonPrototype.attachedCallback = function () {
if (this.getAttribute('data-embybutton') == 'true') { if (this.classList.contains('emby-button')) {
return; return;
} }
this.setAttribute('data-embybutton', 'true'); this.classList.add('emby-button');
if (browser.safari || browser.firefox || browser.noFlex) { if (browser.safari || browser.firefox || browser.noFlex) {
this.classList.add('noflex'); this.classList.add('emby-button-noflex');
} }
if (enableAnimation()) { if (enableAnimation()) {

24
dashboard-ui/css/librarybrowser.css
View file

@ -406,11 +406,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-bottom: .5em; margin-bottom: .5em;
} }
.detailButtonsContainer { .emby-button.detailFloatingButton {
font-size: 90%;
}
[is="emby-button"].detailFloatingButton {
width: 56px !important; width: 56px !important;
height: 56px !important; height: 56px !important;
top: -28px; top: -28px;
@ -419,7 +415,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background-color: #52B54B !important; background-color: #52B54B !important;
} }
[is="emby-button"].btnFloatingRecord { .emby-button.btnFloatingRecord {
background-color: #cc3333 !important; background-color: #cc3333 !important;
} }
@ -530,15 +526,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-top: 0; 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 { .detailSection h1 {
margin-bottom: .25em; margin-bottom: .25em;
position: relative; position: relative;
@ -556,11 +543,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
position: relative; position: relative;
} }
.detailSectionHeader, .detailSectionHeader h3 {
font-size: 17px;
font-weight: 400;
}
.ui-body-a .detailSectionHeader { .ui-body-a .detailSectionHeader {
border: 1px solid #ddd; border: 1px solid #ddd;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
@ -573,6 +555,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.detailSectionHeader, .detailSectionHeader h3 { .detailSectionHeader, .detailSectionHeader h3 {
font-size: 20px; font-size: 20px;
font-weight: 400;
} }
.detailSectionHeader button { .detailSectionHeader button {
@ -808,7 +791,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
display: block; display: block;
color: #fff; color: #fff;
margin-bottom: 1em; margin-bottom: 1em;
font-size: 120%;
} }
.mediaInfoAttribute { .mediaInfoAttribute {

4
dashboard-ui/css/site.css
View file

@ -7,13 +7,13 @@
contain: layout style; contain: layout style;
} }
[is="emby-button"].fab iron-icon { .emby-button.fab iron-icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
} }
[is="emby-button"] iron-icon + span { .emby-button iron-icon + span {
margin-left: .5em; margin-left: .5em;
} }
.paper-icon-button-light > iron-icon { .paper-icon-button-light > iron-icon {

2
dashboard-ui/scripts/itemdetailpage.js
View file

@ -1664,7 +1664,7 @@
var displayType = Globalize.translate('MediaInfoStreamType' + stream.Type); var displayType = Globalize.translate('MediaInfoStreamType' + stream.Type);
html += '<div class="mediaInfoStreamType">' + displayType + '</div>'; html += '<h3 class="mediaInfoStreamType">' + displayType + '</h3>';
var attributes = []; var attributes = [];

56
dashboard-ui/thirdparty/paper-button-style.css vendored
View file

@ -1,106 +1,106 @@
button[is="emby-button"]:not(.fab).blue { button.emby-button:not(.fab).blue {
color: #03a9f4; color: #03a9f4;
} }
button[is="emby-button"]:not(.fab).blue:hover { button.emby-button:not(.fab).blue:hover {
background: #e1f5f3; background: #e1f5f3;
} }
button[is="emby-button"].fab.blue { button.emby-button.fab.blue {
background: #03a9f4; background: #03a9f4;
} }
button[is="emby-button"].menuButton { button.emby-button.menuButton {
color: #212121; color: #212121;
text-align: left; text-align: left;
} }
button[is="emby-button"].menuButton:hover { button.emby-button.menuButton:hover {
background: #e1f5f3; background: #e1f5f3;
} }
button[is="emby-button"].submit { button.emby-button.submit {
color: #52B54B; 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; background: #52B54B;
color: #fff; color: #fff;
} }
button[is="emby-button"].more { button.emby-button.more {
color: #EC407A; color: #EC407A;
} }
button[is="emby-button"].raised.more { button.emby-button.raised.more {
background: #EC407A; background: #EC407A;
color: #fff; color: #fff;
} }
button[is="emby-button"].secondary { button.emby-button.secondary {
color: #4285f4; color: #4285f4;
} }
button[is="emby-button"].raised.secondary { button.emby-button.raised.secondary {
background: #4285f4; background: #4285f4;
color: #fff; color: #fff;
} }
button[is="emby-button"].accent { button.emby-button.accent {
color: #52B54B; color: #52B54B;
} }
button[is="emby-button"].raised.accent { button.emby-button.raised.accent {
background: #52B54B; background: #52B54B;
color: #fff; color: #fff;
} }
button[is="emby-button"].alt { button.emby-button.alt {
color: #F57F17; color: #F57F17;
} }
button[is="emby-button"].raised.alt { button.emby-button.raised.alt {
background: #F57F17; background: #F57F17;
color: #fff; color: #fff;
} }
.ui-body-b button[is="emby-button"].cancel { .ui-body-b button.emby-button.cancel {
color: #444; color: #444;
} }
.ui-body-b button[is="emby-button"].raised.cancel { .ui-body-b button.emby-button.raised.cancel {
background: #444; background: #444;
color: #fff; color: #fff;
} }
button[is="emby-button"].cancelDark { button.emby-button.cancelDark {
color: #444; color: #444;
} }
button[is="emby-button"].raised.cancelDark { button.emby-button.raised.cancelDark {
background: #444; background: #444;
color: #fff; color: #fff;
} }
.ui-body-b button[is="emby-button"].subdued:not([disabled]) { .ui-body-b button.emby-button.subdued:not([disabled]) {
color: #404040; 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; background: #404040;
color: #fff; color: #fff;
} }
.ui-body-b button[is="emby-button"].raised[disabled].subduedd { .ui-body-b button.emby-button.raised[disabled].subduedd {
background: #111; background: #111;
} }
button[is="emby-button"] span { button.emby-button span {
vertical-align: middle; vertical-align: middle;
} }
button[is="emby-button"].iconRight iron-icon { button.emby-button.iconRight iron-icon {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
@ -126,22 +126,22 @@ button[is="emby-button"].iconRight iron-icon {
color: inherit !important; color: inherit !important;
} }
button[is="emby-button"].mini:not(.fab) { button.emby-button.mini:not(.fab) {
padding: 0.4em 0.7em; padding: 0.4em 0.7em;
} }
button[is="emby-button"].mini:not(.fab) iron-icon { button.emby-button.mini:not(.fab) iron-icon {
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
button[is="emby-button"].notext { button.emby-button.notext {
min-width: 2.8em; min-width: 2.8em;
padding-left: .25em !important; padding-left: .25em !important;
padding-right: .25em !important; padding-right: .25em !important;
} }
button[is="emby-button"].notext iron-icon { button.emby-button.notext iron-icon {
margin-right: 0; margin-right: 0;
} }