mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
369 lines
7.5 KiB
CSS
369 lines
7.5 KiB
CSS
.libraryPage {
|
|
padding-top: 50px !important;
|
|
}
|
|
|
|
.libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
|
|
padding-top: 100px !important;
|
|
}
|
|
|
|
.libraryMenuDivider {
|
|
height: 1px;
|
|
background: #333;
|
|
margin: .5em 0;
|
|
}
|
|
|
|
.viewMenuBar, .barsMenuButton, .libraryMenuButtonText, .btnCast {
|
|
height: 50px;
|
|
}
|
|
|
|
.barsMenuButton, .libraryMenuButtonText, .btnCast {
|
|
line-height: 50px;
|
|
}
|
|
|
|
.headerButton {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
top: 0;
|
|
bottom: 0;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
border: 0 !important;
|
|
outline: none;
|
|
padding: 0 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.headerButton img {
|
|
height: 19px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.headerSearchButton img {
|
|
height: 18px;
|
|
}
|
|
|
|
.headerButtonLeft {
|
|
float: left;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.headerButtonLeft:first-child {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.menuArrow {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAbklEQ…yGDxkLaBtENI9kPMk0gaoW0Dyj0aWowFLYNYzWB6MWMAAAq1H3+Mhu2hQAAAAASUVORK5CYII=);
|
|
height: 24px;
|
|
width: 24px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.headerButtonRight {
|
|
border-width: 0 !important;
|
|
padding: 0 15px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.headerButtonRight:first-child {
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
.libraryMenuButton, .dashboardMenuButton {
|
|
padding-left: 10px !important;
|
|
}
|
|
|
|
.barMenuInner {
|
|
padding: 7px 10px;
|
|
border: 1px solid #000;
|
|
border-radius: 4px;
|
|
box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.0745098) 0px 1px 0px 0px;
|
|
background-color: rgb(14, 14, 14);
|
|
background-image: linear-gradient(rgb(21, 21, 21), rgb(4, 4, 4));
|
|
background-repeat: repeat-x;
|
|
border-bottom-color: rgba(0, 0, 0, 0.247059);
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-image-outset: 0px;
|
|
border-image-repeat: stretch;
|
|
border-image-slice: 100%;
|
|
border-image-source: none;
|
|
border-image-width: 1;
|
|
border-left-color: rgba(0, 0, 0, 0.0980392);
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
border-right-color: rgba(0, 0, 0, 0.0980392);
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
border-top-color: rgba(0, 0, 0, 0.0980392);
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.barsMenuButton:hover {
|
|
opacity: .5 !important;
|
|
}
|
|
|
|
.icon-bar {
|
|
display: block;
|
|
width: 18px;
|
|
height: 2px;
|
|
background-color: #f5f5f5;
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.icon-bar + .icon-bar {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.libraryMenuButtonText {
|
|
color: #fff !important;
|
|
text-decoration: none;
|
|
font-weight: 300 !important;
|
|
font-size: 15px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding-left: 0 !important;
|
|
margin-left: -8px;
|
|
cursor: default;
|
|
}
|
|
|
|
.logoLibraryMenuButtonText {
|
|
font-family: MBLogo;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.viewMenuBar {
|
|
font-weight: bold;
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
top: 0;
|
|
background-image: linear-gradient(#262626,#111);
|
|
border-bottom: 1px solid #111;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.libraryViewNav {
|
|
height: 48px;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
top: 51px;
|
|
z-index: 1000;
|
|
background-image: linear-gradient(#1a1a1a,#1a1a1a);
|
|
border-bottom: 1px solid #111;
|
|
}
|
|
|
|
.viewMenuLink {
|
|
text-decoration: none;
|
|
color: #ccc !important;
|
|
padding: 7px .5em 6px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.viewMenuTextLink:hover {
|
|
background-color: #38c;
|
|
color: #fff !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.headerButtonRight:hover {
|
|
opacity: .5;
|
|
}
|
|
|
|
.viewMenuLink:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.viewMenuLink:hover img {
|
|
opacity: .5;
|
|
}
|
|
|
|
.viewMenuLink img {
|
|
height: 24px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.viewMenuTextLink {
|
|
display: block;
|
|
padding: .6em .5em .6em 38px !important;
|
|
font-size: 15px;
|
|
font-weight: 300 !important;
|
|
font-family: Roboto;
|
|
background-repeat: no-repeat;
|
|
background-size: 14px 14px;
|
|
background-position: 13px center;
|
|
}
|
|
|
|
.musicViewMenu {
|
|
background-image: url(images/items/folders/music.png);
|
|
}
|
|
|
|
.homeViewMenu {
|
|
background-image: url(images/items/folders/home.png);
|
|
}
|
|
|
|
.tvshowsViewMenu, .livetvViewMenu {
|
|
background-image: url(images/items/folders/tv.png);
|
|
}
|
|
|
|
.moviesViewMenu, .trailersViewMenu {
|
|
background-image: url(images/items/folders/movies.png);
|
|
}
|
|
|
|
.gamesViewMenu {
|
|
background-image: url(images/items/folders/games.png);
|
|
}
|
|
|
|
.channelsViewMenu {
|
|
background-image: url(images/items/folders/channels.png);
|
|
}
|
|
|
|
.booksViewMenu {
|
|
background-image: url(images/items/folders/books.png);
|
|
}
|
|
|
|
.musicvideosViewMenu {
|
|
background-image: url(images/items/folders/musicvideos.png);
|
|
}
|
|
|
|
.photosViewMenu {
|
|
background-image: url(images/items/folders/photos.png);
|
|
}
|
|
|
|
.homeVideosViewMenu {
|
|
background-image: url(images/items/folders/homevideos.png);
|
|
}
|
|
|
|
.generalViewMenu, .boxsetsViewMenu, .playlistsViewMenu, .foldersViewMenu {
|
|
background-image: url(images/items/folders/folder.png);
|
|
}
|
|
|
|
.editorViewMenu {
|
|
background-image: url(images/items/folders/edit.png);
|
|
}
|
|
|
|
.dashboardViewMenu {
|
|
background-image: url(images/items/folders/settings.png);
|
|
}
|
|
|
|
.reportsViewMenu {
|
|
background-image: url(images/items/folders/report.png);
|
|
}
|
|
|
|
.homevideosViewMenu, .adultvideosViewMenu {
|
|
background-image: url(images/items/folders/homevideos.png);
|
|
}
|
|
|
|
.viewMenuSecondary {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.selectedMediaFolder {
|
|
background-color: #52B54B !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.itemDetailPage .selectedMediaFolder {
|
|
background-color: rgba(51,136,204,.8) !important;
|
|
}
|
|
|
|
.ui-panel.ui-body-b {
|
|
background-color: #222;
|
|
}
|
|
|
|
.libraryViewNavInner {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
padding: 0 0 0;
|
|
overflow-x: auto;
|
|
height: 61px;
|
|
}
|
|
|
|
.libraryViewNav .ui-btn-active {
|
|
border-bottom-color: #38c;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.libraryViewNav a {
|
|
display: inline-block;
|
|
padding: 12px 0 9px;
|
|
color: #ddd !important;
|
|
text-decoration: none;
|
|
margin: 0 0;
|
|
position: relative;
|
|
font-weight: normal;
|
|
border-bottom: 5px solid transparent;
|
|
}
|
|
|
|
.libraryViewNav a:not(.ui-btn-active):hover {
|
|
color: #2ad !important;
|
|
}
|
|
|
|
.libraryViewNavLinkContent {
|
|
display: inline-block;
|
|
padding: 2px 15px 2px 15px;
|
|
}
|
|
|
|
.libraryViewNav a + a .libraryViewNavLinkContent {
|
|
padding-left: 17px;
|
|
}
|
|
|
|
.libraryViewNav a + a .libraryViewNavLinkContent {
|
|
border-left: 1px solid #333;
|
|
position: relative;
|
|
left: -2px;
|
|
}
|
|
|
|
@media all and (max-width: 500px) {
|
|
|
|
.libraryMenuButtonText {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 750px) {
|
|
|
|
.dashboardDocument .dashboardMenuButton {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 750px) {
|
|
|
|
.dashboardDocument .libraryMenuButton {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 800px) {
|
|
|
|
/* The sidebar isn't visible at this size, so there's no way to navigate within the editor */
|
|
.editorViewMenu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.libraryDocument .dashboardMenuButton {
|
|
display: none;
|
|
}
|