mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
moved search into slide out panel
This commit is contained in:
Luke Pulverenti
parent
728e0003b2
commit
e7a3a38b03
34 changed files with 493 additions and 621 deletions
|
|
@ -4,19 +4,7 @@
|
|||
}
|
||||
|
||||
.libraryPage {
|
||||
padding-top: 68px !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
.libraryPage:not(.pageViewCount5) {
|
||||
padding-top: 35px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 690px) {
|
||||
.pageViewCount5 {
|
||||
padding-top: 35px !important;
|
||||
}
|
||||
padding-top: 46px !important;
|
||||
}
|
||||
|
||||
.ui-panel fieldset + fieldset {
|
||||
|
|
@ -54,21 +42,24 @@
|
|||
padding: 7px .5em 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.viewMenuLink:hover {
|
||||
color: #fff;
|
||||
.viewMenuBar .btnCurrentUser {
|
||||
padding: 7px 1em 6px;
|
||||
}
|
||||
|
||||
.viewMenuLink:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.viewMenuLink:hover img {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.viewMenuLink:hover img {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.viewMenuLink img {
|
||||
height: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.viewMenuLink img {
|
||||
height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.viewMenuSecondary {
|
||||
float: right;
|
||||
|
|
@ -592,6 +583,10 @@ a.itemTag:hover {
|
|||
padding-right: .8em;
|
||||
}
|
||||
|
||||
.viewMenuBar .btnCurrentUser {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.lnkSibling:not(.hide) {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
334
dashboard-ui/css/mediaplayer.css
Normal file
334
dashboard-ui/css/mediaplayer.css
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
|
||||
|
||||
/* Now playing bar */
|
||||
#nowPlayingBar {
|
||||
padding: 6px .5em;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition {
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition:hover:not(.barBackground ) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#nowPlayingBar .barBackground {
|
||||
border-top: 2px solid green;
|
||||
background: #3c3c3c;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nowPlayingBarImage {
|
||||
border: 1px solid #a7a7a7!important;
|
||||
padding: 1px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.mediaButton {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
#mediaElement {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo a {
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
|
||||
.nowPlayingMediaInfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingText {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
.nowPlayingMediaInfo {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaButton img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
position: absolute;
|
||||
z-index: 99998;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
bottom: 45px;
|
||||
left: -290px;
|
||||
border: 1px solid #666;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.fullscreenVideo {
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
z-index: 99996;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 110px;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.mediaSlider {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
/* IE10 won't see this (good) '*/
|
||||
.mediaSlider {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
background: #777;
|
||||
border-radius: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 3px;
|
||||
top: -17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mediaSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.volumeButton {
|
||||
margin-right: .5em!important;
|
||||
}
|
||||
|
||||
::-ms-thumb {
|
||||
background-image: linear-gradient(#fefefe,#dddddd);
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-ms-track {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
::-ms-tooltip {
|
||||
display: none; /* display and visibility only */
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
left: -250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 750px) {
|
||||
.positionSlider {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaFlyoutContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mediaPlayerFlyout {
|
||||
width: 200px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 55px;
|
||||
margin-left: -50px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chaptersFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.audioTracksFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption:hover, .mediaFlyoutOption:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.selectedMediaFlyoutOption {
|
||||
background-color: #d9F4FF;
|
||||
background-image: url(images/media/selected.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionName {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionSecondaryText {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -660px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2400px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -710px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,133 +1,57 @@
|
|||
.headerSearch {
|
||||
display: none;
|
||||
margin-right: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.txtSearch {
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin: 0 .15em 0 0;
|
||||
width: 80px;
|
||||
padding: 0;
|
||||
border: 1px solid #4d90fe;
|
||||
}
|
||||
|
||||
.btnSearch {
|
||||
vertical-align: middle;
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
|
||||
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: linear-gradient(top,#4d90fe,#4787ed);
|
||||
border: 1px solid #3079ed;
|
||||
color: #fff!important;
|
||||
margin: 0 0;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
min-width: 54px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.txtSearch, .btnSearch {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.btnSearch img {
|
||||
height: 22px;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.searchHints {
|
||||
width: 248px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
z-index: 998;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.searchHintsContent {
|
||||
padding: 10px;
|
||||
.searchHints {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.searchHint {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.searchHint:hover {
|
||||
background-color: #eee;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.searchHint:focus {
|
||||
background-color: #eee;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.searchHintImage {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
width: 20%;
|
||||
vertical-align: middle;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.searchHintContent {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.searchHintName {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.searchHintSecondaryText {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
color: #bbb;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.searchHintContentInner {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 300px) {
|
||||
|
||||
.headerSearch {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 850px) {
|
||||
|
||||
.txtSearch {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.searchHints {
|
||||
width: 248px;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: 5px solid rgba(0,183,229,0.9);
|
||||
|
|
|
|||
|
|
@ -775,344 +775,10 @@ progress {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Now playing bar */
|
||||
#nowPlayingBar {
|
||||
padding: 6px .5em;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition {
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition:hover:not(.barBackground ) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#nowPlayingBar .barBackground {
|
||||
border-top: 2px solid green;
|
||||
background: #3c3c3c;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nowPlayingBarImage {
|
||||
border: 1px solid #a7a7a7!important;
|
||||
padding: 1px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.mediaButton {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
#mediaElement {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo a {
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
|
||||
.nowPlayingMediaInfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingText {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
.nowPlayingMediaInfo {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaButton img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
position: absolute;
|
||||
z-index: 99998;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
bottom: 45px;
|
||||
left: -290px;
|
||||
border: 1px solid #666;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.fullscreenVideo {
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
z-index: 99996;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 110px;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.mediaSlider {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
/* IE10 won't see this (good) '*/
|
||||
.mediaSlider {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
background: #777;
|
||||
border-radius: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 3px;
|
||||
top: -17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mediaSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.volumeButton {
|
||||
margin-right: .5em!important;
|
||||
}
|
||||
|
||||
::-ms-thumb {
|
||||
background-image: linear-gradient(#fefefe,#dddddd);
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-ms-track {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
::-ms-tooltip {
|
||||
display: none; /* display and visibility only */
|
||||
}
|
||||
|
||||
.userProfileIcon {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
left: -250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 750px) {
|
||||
.positionSlider {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaFlyoutContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mediaPlayerFlyout {
|
||||
width: 200px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 55px;
|
||||
margin-left: -50px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chaptersFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.audioTracksFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mediaFlyoutOption:hover, .mediaFlyoutOption:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.selectedMediaFlyoutOption {
|
||||
background-color: #d9F4FF;
|
||||
background-image: url(images/media/selected.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionName {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.mediaFlyoutOptionSecondaryText {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -660px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2400px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
left: -710px;
|
||||
}
|
||||
}
|
||||
|
||||
#editItemMetadataPage #txtOverview {
|
||||
height: 70px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue