mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework nav drawer
This commit is contained in:
Luke Pulverenti
parent
52f247c51a
commit
ff8014a721
66 changed files with 5861 additions and 6234 deletions
BIN
dashboard-ui/css/images/logo.png
Normal file
BIN
dashboard-ui/css/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
|
|
@ -30,7 +30,6 @@
|
|||
}
|
||||
|
||||
.viewMenuBar paper-icon-button {
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -53,19 +52,10 @@
|
|||
height: auto !important;
|
||||
/* Need to reset this because it causes the entire panel to be draggable in safari */
|
||||
box-sizing: initial !important;
|
||||
font-size: 108%;
|
||||
}
|
||||
|
||||
.verticalScrollingDrawer {
|
||||
overflow-y: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/*.mainDrawerPanel #drawer, .mainDrawerPanel #scrim {
|
||||
top: 50px !important;
|
||||
}*/
|
||||
|
||||
.mainDrawerPanel #main {
|
||||
.mainDrawerPanel[narrow] #main {
|
||||
left: 0 !important;
|
||||
position: static !important;
|
||||
z-index: 1;
|
||||
|
|
@ -75,15 +65,18 @@
|
|||
/* Give it at least something to make it visible */
|
||||
z-index: 1098;
|
||||
/* It defaults to absolute, not visible after scrolling */
|
||||
position: fixed!important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.mainDrawer {
|
||||
height: auto !important;
|
||||
overflow-y: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.mainDrawerContent {
|
||||
padding-bottom: 40px;
|
||||
.drawerContent {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
|
|
@ -120,30 +113,16 @@
|
|||
.libraryMenuButtonText {
|
||||
text-decoration: none;
|
||||
font-weight: 400 !important;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
padding-left: 0 !important;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
white-space: nowrap;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.libraryMenuButtonText {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
.libraryMenuButtonText {
|
||||
max-width: 300px;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoLibraryMenuButtonText {
|
||||
|
|
@ -200,11 +179,18 @@
|
|||
|
||||
.viewMenuBar, .libraryViewNav {
|
||||
background-color: #020202;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.viewMenuBar.semiTransparent {
|
||||
background-color: rgba(15, 15, 15, .3);
|
||||
}
|
||||
.dashboardDocument .viewMenuBar {
|
||||
background-color: #43A047;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.viewMenuBar.semiTransparent {
|
||||
background-color: rgba(15, 15, 15, .3);
|
||||
}
|
||||
|
||||
.paperLibraryViewNav {
|
||||
background-color: transparent !important;
|
||||
|
|
@ -338,20 +324,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.dashboardDocument .dashboardDrawerContent {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.dashboardDocument .libraryDrawerContent {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.drawerUserPanel {
|
||||
color: #fff;
|
||||
padding: 1em 1.2em;
|
||||
|
|
@ -370,10 +342,6 @@
|
|||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.libraryDocument .dashboardDrawerContent {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .lnkMySync {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -390,36 +358,123 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .btnCast {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .headerSearchButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body:not(.dashboardDocument) .btnNotifications {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.darkDrawer {
|
||||
.darkDrawerPanel #drawer {
|
||||
background-color: #212121 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLinkIcon {
|
||||
color: #eee !important;
|
||||
}
|
||||
.darkDrawerPanel .sidebarLinkIcon {
|
||||
color: #bbb !important;
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
|
||||
.darkDrawerPanel .sidebarLinkText, .darkDrawerPanel .sidebarLink {
|
||||
color: #fff !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarHeader {
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarDivider {
|
||||
background: #282828 !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLink:hover {
|
||||
background: #4d4d4d;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLink.selectedSidebarLink, .darkDrawerPanel .selectedMediaFolder {
|
||||
background: #4d4d4d !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel #drawer {
|
||||
background: #fff !important;
|
||||
box-shadow: none !important;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink {
|
||||
color: #333 !important;
|
||||
font-weight: 400 !important;
|
||||
padding: .7em 0 .7em 1.5em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarHeader {
|
||||
color: #666 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarDivider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLinkIcon {
|
||||
color: #666 !important;
|
||||
height: 12px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink:hover {
|
||||
color: #00897B !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink.selectedSidebarLink {
|
||||
background: #66BB6A !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
|
||||
color: #fff !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarHeader {
|
||||
color: #bbb !important;
|
||||
.adminDrawerPanel #drawer .emby-collapsible-button {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel #drawer .emby-collapsible-title {
|
||||
font-size: inherit;
|
||||
text-transform: none;
|
||||
color: #333;
|
||||
margin: .7em 0;
|
||||
}
|
||||
|
||||
.adminDrawerLogo {
|
||||
padding: 15px 1em;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adminDrawerLogo img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarDivider {
|
||||
background: #303030 !important;
|
||||
}
|
||||
.adminDrawerPanel #drawer #titleIcon {
|
||||
color: #666;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink:hover {
|
||||
background: #4d4d4d;
|
||||
}
|
||||
.adminDrawerPanel:not([narrow]) .libraryMenuButtonText {
|
||||
padding-left: 240px !important;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
|
||||
background: #4d4d4d !important;
|
||||
}
|
||||
.title-separator {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
font-weight: 500;
|
||||
position: relative;
|
||||
border-radius: 1000px;
|
||||
background: #444;
|
||||
background: #2E7D32;
|
||||
line-height: 28px;
|
||||
min-width: 30px;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -282,9 +282,9 @@ html {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
html.smallerDefault {
|
||||
font-size: 13px;
|
||||
}
|
||||
html.smallerDefault {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll !important;
|
||||
|
|
@ -817,40 +817,25 @@ paper-input + .fieldDescription {
|
|||
}
|
||||
|
||||
.content-primary {
|
||||
padding-top: 55px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.content-secondary {
|
||||
z-index: 999;
|
||||
border: 0;
|
||||
display: none;
|
||||
text-align: left;
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
/*-moz-box-shadow: -3px 0 10px 0 #555;
|
||||
-webkit-box-shadow: -3px 0 10px 0 #555;
|
||||
box-shadow: -3px 0 10px 0 #555;*/
|
||||
.mainDrawerPanel:not([narrow]) .content-primary {
|
||||
padding: 110px 1.5em 3em 3em;
|
||||
}
|
||||
|
||||
.mainDrawerPanel:not([narrow]) .content-primary ul:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.background-theme-a, .dialog.background-theme-a {
|
||||
background-color: #f6f6f6;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.dialog:not(.background-theme-a):not(.background-theme-b) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ui-page-theme-a .content-secondary {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebarLinks {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: 50px;
|
||||
|
|
@ -874,10 +859,9 @@ paper-input + .fieldDescription {
|
|||
}
|
||||
|
||||
.sidebarLinkIcon {
|
||||
width: 72px !important;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: #7f7f7f;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.sidebarLinkIcon + span {
|
||||
|
|
@ -941,7 +925,7 @@ paper-input + .fieldDescription {
|
|||
Forms
|
||||
*/
|
||||
form, .readOnlyContent {
|
||||
max-width: 600px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -954,19 +938,6 @@ paper-input + .fieldDescription {
|
|||
padding-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-secondary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
padding: 80px 15px 3em 0;
|
||||
margin: 0 0 0 290px;
|
||||
}
|
||||
|
||||
.content-primary ul:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 900px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue