.plex-shark { background-color: #282A2D !important; } .plex-gamboge-text { color: #E5A00D !important; } .plex-riverbed { background-color: #3F4245 !important; } .white-text { color: #fff !important; } .settings { background-size: 24px 24px; right: 38px; } .menuButtons { cursor: default; } .windowDrag { -webkit-app-region: drag; } .windowNoDrag { -webkit-app-region: no-drag; } .settingsTitle { padding-left: 5%; padding-right: 5%; padding-bottom: 5px; background-color: #F2F3F4; } .plexTogetherInfo { position: absolute; bottom: 0px; /* border-top: 1px solid #F2F3F4; */ box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16); padding-top: 3px; height: 199px } .plexTogetherInfoButton { position: absolute; bottom: 0px; /* border-top: 1px solid #F2F3F4; */ /* box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16); */ padding-top: 3px; height: 42px } .plexAccountInfo { top: 0; padding-top: 3px; height: 64px } .plexServerClientInfo { position: absolute; top: 64px; padding-top: 3px; height: 615px; overflow: auto; } .ptUserDropdown { margin-bottom: 0px; padding-top: 10px; height: 120px; margin-top: -10px; /* left: -150px; */ } .plexNavAccount { height: 42px; box-shadow: 0 0 0 0 #F2F3F4; cursor: default; transition: box-shadow 0.3s ease-in-out; } .plexNavAccount:hover { box-shadow: 0 0 0 2px #F2F3F4; } .plexNavAccount:active { box-shadow: 0 0 0 2px #E5A00D; } .sideNav { background-color: #3F4245; cursor: default; } .sideNav:hover { background-color: #282A2D; } /* Photon */ .window { position: absolute; bottom: 0; display: flex; flex-direction: column; background-color: #F2F3F4 } .window-content { position: relative; overflow-y: auto; overflow-x: hidden; display: flex; flex: 1 } .pane { overflow-y: auto; flex: 1; /* border-left: 1px solid #ddd */ } .pane-group { position: absolute; bottom: 0; display: flex } .pane-group, .window { top: 0; left: 0; right: 0 } .pane-sm { width: 165px } .sidebar { background-color: #3F4245 } .nav-group-title { margin: 0; padding: 10px 10px 2px; font-size: 12px; font-weight: 500; color: #E5A00D } .nav-group-item { padding: 2px 10px 2px 25px; display: block; color: #fff; text-decoration: none } /* -------------------------------- Main Components -------------------------------- */ .cd-accordion-menu { width: 100%; background: #3F4245; /* margin: 4em auto; */ /* box-shadow: 0 4px 40px #70ac76; */ } .cd-accordion-menu ul { /* by default hide all sub menus */ display: none; } .cd-accordion-menu li { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cd-accordion-menu input[type=checkbox] { /* hide native checkbox */ position: absolute; opacity: 0; } .cd-accordion-menu label, .cd-accordion-menu a { position: relative; display: block; padding: 18px 18px 18px 64px; background: #3F4245; box-shadow: inset 0 -1px #555960; color: #ffffff; font-size: 1.6rem; } .no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover { background: #52565d; } .cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after { /* icons */ content: ''; display: inline-block; width: 16px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .cd-accordion-menu label { cursor: default; } .cd-accordion-menu label::before, .cd-accordion-menu label::after { background-repeat: no-repeat; } .cd-accordion-menu label::before { /* arrow icon */ left: 18px; background-position: 0 0; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .cd-accordion-menu label::after { /* folder icons */ left: 41px; } .cd-accordion-menu a::after { /* image icon */ left: 36px; } .cd-accordion-menu input[type=checkbox]:checked + label::before { /* rotate arrow */ -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .cd-accordion-menu input[type=checkbox]:checked + label::after { /* show open folder icon if item is checked */ background-position: -32px 0; } .cd-accordion-menu input[type=checkbox]:checked + label + ul, .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul { /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/ /* show children when item is checked */ display: block; } .cd-accordion-menu ul label, .cd-accordion-menu ul a { background: #35383d; box-shadow: inset 0 -1px #41444a; padding-left: 8px; } .no-touch .cd-accordion-menu ul label:hover, .no-touch .cd-accordion-menu ul a:hover { background: #3c3f45; } .cd-accordion-menu > li:last-of-type > label, .cd-accordion-menu > li:last-of-type > a, .cd-accordion-menu > li > ul > li:last-of-type label, .cd-accordion-menu > li > ul > li:last-of-type a { box-shadow: none; } .cd-accordion-menu ul label::before { left: 36px; } .cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after { left: 59px; } .cd-accordion-menu ul ul label, .cd-accordion-menu ul ul a { padding-left: 100px; } .cd-accordion-menu ul ul label::before { left: 54px; } .cd-accordion-menu ul ul label::after, .cd-accordion-menu ul ul a::after { left: 77px; } .cd-accordion-menu ul ul ul label, .cd-accordion-menu ul ul ul a { padding-left: 118px; } .cd-accordion-menu ul ul ul label::before { left: 72px; } .cd-accordion-menu ul ul ul label::after, .cd-accordion-menu ul ul ul a::after { left: 95px; } @media only screen and (min-width: 600px) { .cd-accordion-menu label, .cd-accordion-menu a { padding: 0 24px 0px 10px; font-size: 12px; } .cd-accordion-menu label::before { left: 24px; } .cd-accordion-menu label::after { left: 53px; } .cd-accordion-menu ul label, .cd-accordion-menu ul a { padding-left: 20px; font-size: 12px; } .cd-accordion-menu ul label::before { left: 48px; } .cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after { left: 77px; } .cd-accordion-menu ul ul label, .cd-accordion-menu ul ul a { padding-left: 130px; } .cd-accordion-menu ul ul label::before { left: 72px; } .cd-accordion-menu ul ul label::after, .cd-accordion-menu ul ul a::after { left: 101px; } .cd-accordion-menu ul ul ul label, .cd-accordion-menu ul ul ul a { padding-left: 154px; } .cd-accordion-menu ul ul ul label::before { left: 96px; } .cd-accordion-menu ul ul ul label::after, .cd-accordion-menu ul ul ul a::after { left: 125px; } } .cd-accordion-menu.animated label::before { /* this class is used if you're using jquery to animate the accordion */ -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }