API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 1st, 2024
19
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 78.59 KB | None | 0 0
raw download clone embed print report
  1.   @import url('https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/colorschemes/cyan.css');
  2.   @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {font-family: 'Quicksand', sans-serif;}
  3.  
  4.   :root {
  5.     --white: 243, 242, 243;           /* F3F2F3 */
  6.     --white-off: 207, 221, 233;       /* CFDDE9 */
  7.     --jade-green: 0, 172, 111;        /* 00AC6F */
  8.     --honey-yellow: 255, 194, 85;     /* FFC255 */
  9.     --cherry-red: 212, 51, 83;        /* D43353 */
  10.   }
  11.   :root {
  12.     --rounding: 12px;
  13.     --rounding-alt: 9px;
  14.     --rounding-large: 24px;
  15.     --rounding-circle: 100px;
  16.   }
  17.  
  18.   /*Style backdrop*/
  19.   .backdropImage {
  20.     filter: blur(6px) saturate(120%) contrast(120%) brightness(40%);
  21.   }
  22.   .card.show-animation:focus>.cardBox {
  23.     -webkit-transform:scale(1.1);
  24.     transform:scale(1.1);
  25.   }
  26.  
  27.  
  28.   /*  ###### Desktop Layout ##### */
  29.  
  30.   .layout-desktop .detailLogo {
  31.     left: 5%;
  32.     background-position: left;
  33.   }
  34.  
  35.   .detailLogo {
  36.       height: 16vh;
  37.       position: absolute;
  38.       right: 25vw;
  39.       top: 10vh;
  40.       width: 34em;
  41.   }
  42.  
  43.   .layout-desktop .itemBackdrop {
  44.     background-attachment: scroll;
  45.     background-position: center;
  46.     background-image: none !important;
  47.     background-size: cover;
  48.     height: 100vh;
  49.     position: relative;
  50.   }
  51.   .layout-desktop .backgroundContainer {
  52.     background-size: cover; /* fix for gradient on 2K and 4K displays */
  53.     position: fixed;
  54.     opacity: 100%;
  55.   }
  56.   /* controls gradient overlay properties - url to img in colorschemes */
  57.   .layout-desktop .backgroundContainer {
  58.     position: fixed;
  59.     top: 0;
  60.     right: 0;
  61.     bottom: 0;
  62.     left: 0;
  63.     background-size: cover;
  64.     opacity: 1;
  65.   }
  66.   .layout-desktop .detailPageWrapperContainer {
  67.     margin-top: -89vh;
  68.     /* inicial: 73 */
  69.   }
  70.  
  71.   .layout-desktop .detailImageContainer .card,
  72.   .layout-desktop .itemTags {
  73.     display: none;
  74.   }
  75.  
  76.   .detailsGroupItem.writersGroup,
  77.   .detailsGroupItem.studiosGroup {
  78.     display: none;
  79.   }
  80.  
  81.   .layout-desktop .detailPagePrimaryContainer,
  82.   .layout-desktop .detailPageContent {
  83.     padding-left: 5%;
  84.   }
  85.  
  86.   .layout-desktop .detailPagePrimaryContent {
  87.     width: 45%;
  88.   }
  89.  
  90.   .layout-desktop .detailPagePrimaryContainer {
  91.     display: inline-table;
  92.     z-index: 2;
  93.     left: 5%;
  94.   }
  95.  
  96.   .layout-desktop .detailPageSecondaryContainer {
  97.     margin: 0 0 0em 0 !important;
  98.     padding-bottom: 0em !important;
  99.   }
  100.  
  101.   .layout-desktop .itemDetailsGroup {
  102.     margin-top: 0;
  103.     padding-bottom: 0vh !important;
  104.   }
  105.  
  106.   .layout-desktop a.overview-expand.emby-button {
  107.     margin: none;
  108.     padding: none;
  109.   }
  110.  
  111.  
  112.   .layout-desktop .itemName.originalTitle {
  113.     display: none;
  114.   }
  115.  
  116.   .layout-desktop .itemName,
  117.   .layout-mobile .itemName {
  118.     font-weight: normal;
  119.   }
  120.  
  121.   .infoWrapper {
  122.     margin-bottom: 3vh;
  123.   }
  124.  
  125.   /* hides trailer tab */
  126.   button.emby-tab-button:nth-child(3) {
  127.     display: none;
  128.   }
  129.  
  130.   /* Hide track selection box logic */
  131.  
  132.   .trackSelections > *:nth-child(n+3) {
  133.     visibility: hidden;
  134.   }
  135.   .trackSelections {
  136.     position: relative !important;
  137.   }
  138.   .selectAudioContainer, .selectSubtitlesContainer{
  139.     position: absolute;
  140.   }
  141.   .trackSelections .emby-select {
  142.       width: 386px;
  143.       overflow: hidden;
  144.       text-overflow: ellipsis !important;
  145.   }
  146.   .trackSelections .selectContainer #embyselect0,
  147.   .trackSelections .selectContainer #embyselect2,
  148.   .trackSelections .selectContainer #embyselect3 {
  149.     padding-right: 40px !important;
  150.     background-color: rgba(var(--dark),.75) !important;
  151.     color: rgba(var(--white),.9) !important;
  152.     backdrop-filter: blur(5px);
  153.   }
  154.   .selectContainer{
  155.     width: 480px !important;
  156.   }
  157.   .layout-mobile .trackSelections .selectContainer #embyselect0,
  158.   .layout-mobile .trackSelections .selectContainer #embyselect2,
  159.   .layout-mobile .trackSelections .selectContainer #embyselect3 {
  160.     background-color: rgba(var(--darkest),.75) !important;
  161.   }
  162.  
  163.   .layout-mobile .emby-select {
  164.     width: 275px;
  165.   }
  166.   .layout-mobile .selectContainer{
  167.     width: 340px !important;
  168.   }
  169.  
  170.   /* Move track selection box */
  171.   .detailSection {
  172.       display: -webkit-box;
  173.       display: -moz-box;
  174.       display: box;
  175.       -webkit-box-orient: vertical;
  176.       -moz-box-orient: vertical;
  177.       box-orient: vertical;
  178.   }
  179.   .detailSection .detailSectionContent {
  180.       -webkit-box-ordinal-group: 1;
  181.       -moz-box-ordinal-group: 1;
  182.       box-ordinal-group: 1;
  183.   }
  184.   .detailSection .recordingFields {
  185.       -webkit-box-ordinal-group: 2;
  186.       -moz-box-ordinal-group: 2;
  187.       box-ordinal-group: 2;
  188.   }
  189.   .detailSection .trackSelections {
  190.       -webkit-box-ordinal-group: 3;
  191.       -moz-box-ordinal-group: 3;
  192.       box-ordinal-group: 3;
  193.   }
  194.   .detailSection .itemDetailsGroup {
  195.       -webkit-box-ordinal-group: 4;
  196.       -moz-box-ordinal-group: 4;
  197.       box-ordinal-group: 4;
  198.   }
  199.  
  200.   /* hides movie name only when there is a logo - from Zombie */
  201.   #itemDetailPage .itemName.infoText.parentNameLast > bdi:first-child,
  202.   #itemDetailPage .parentName > bdi:first-child {
  203.     opacity: 0;
  204.   }
  205.   .hide + .detailPageWrapperContainer .itemName > bdi:first-child,
  206.   .hide + .parentName > bdi:first-child {
  207.     opacity: 1 !important;
  208.   }
  209.   /* text layout - from Zombie */
  210.   .layout-desktop .btnShuffle,
  211.   .layout-desktop .listViewUserDataButtons,
  212.   .layout-desktop .material-icons.detailButton-icon.check,
  213.   .layout-desktop .material-icons.detailButton-icon.favorite,
  214.   .layout-desktop .material-icons.detailButton-icon.more_vert,
  215.   .layout-desktop .material-icons.detailButton-icon.replay,
  216.   .layout-desktop .material-icons.detailButton-icon.theaters {
  217.     display: none;
  218.   }
  219.  
  220.   .layout-desktop .btnMoreCommands::after,
  221.   .layout-desktop .btnPlay::after,
  222.   .layout-desktop .btnPlayTrailer::after,
  223.   .layout-desktop .btnPlaystate::after,
  224.   .layout-desktop .btnReplay::after,
  225.   .layout-desktop .btnUserRating::after,
  226.   .layout-desktop .btntheaters::after {
  227.     content: attr(title);
  228.   }
  229.   /* resizes title box to encompass logo to "turn it into a link" */
  230.   .layout-desktop .itemName.parentNameLast {
  231.     height: 7em;
  232.   }
  233.   .layout-desktop h1.parentName {
  234.     margin: 1em 0px 0em !important;
  235.     padding-bottom: 3em;
  236.     height: 6em;
  237.    }
  238.   .layout-desktop #itemDetailPage .parentName .button-link {
  239.     height: 7em;  
  240.     width: 70%;
  241.   }
  242.  
  243.   /* header transparent */
  244.  
  245.   .skinHeader.semiTransparent {
  246.       background-color: transparent;
  247.   }
  248.  
  249.   .skinHeader-withBackground {
  250.       background-color: transparent;
  251.   }
  252.  
  253.   /* Prominent play button */
  254.  
  255.   .layout-desktop .btnPlay {
  256.       background-color: rgb(var(--white));
  257.       color: rgb(var(--darkest)) !important;
  258.       margin-right: 3vw !important;
  259.       border-radius: 14px !important;
  260.   }
  261.  
  262.   .layout-desktop .btnPlay:hover {
  263.     background-color: rgba(var(--accent));
  264.     color: rgb(var(--darkest)) !important;
  265.   }
  266.  
  267.   .layout-desktop .mainAnimatedPages .paging {
  268.     margin-right: 1em !important;
  269.   }
  270.  
  271.   .layout-desktop .detailPagePrimaryContainer .mainDetailButtons .btnPlay::after {
  272.     content: attr(title);
  273.     margin: 1px 11px 0 2px;
  274.     color: rgba(var(--darkest));
  275.   }
  276.  
  277.   .layout-desktop .detailPagePrimaryContainer .mainDetailButtons {
  278.     margin: 0em 0;
  279.   }
  280.  
  281.   .layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
  282.       margin: 0;
  283.       padding-bottom: .2em;
  284.       padding-top: 1em;
  285.   }
  286.  
  287.   .layout-desktop .material-icons.detailButton-icon.play_arrow {
  288.     color: rgba(var(--darkest));
  289.   }
  290.  
  291.   .layout-desktop .btnPlay.detailButton {
  292.     flex-direction: row;
  293.   }
  294.  
  295.   .layout-desktop .listViewUserDataButtons {
  296.     display: none;
  297.   }
  298.  
  299.   /* Hide shuffle and replay buttons in media page */
  300.  
  301.   .btnShuffle, .btnReplay {
  302.     display: none;
  303.   }
  304.  
  305.   /* change Rating star, color */
  306.   .starIcon {
  307.       color: rgba(var(--honey-yellow), 0.8);
  308.   }
  309.  
  310.   /* tweaks to parental ratings */
  311.   .mediaInfoOfficialRating {
  312.       border: 1px solid rgba(var(--white), 1);
  313.       border-radius: 7px;
  314.       background-color: rgba(var(--white), 0.13);
  315.       color: rgba(var(--white), 1);
  316.       font-size: 109%;
  317.  
  318.   }
  319.  
  320.   .layout-mobile .mediaInfoOfficialRating {
  321.       border: 1px solid rgba(var(--white), 1);
  322.       border-radius: 7px;
  323.       background-color: rgba(var(--white), 0.13);
  324.       color: rgba(var(--white), 1);
  325.       font-size: 109%;
  326.  
  327.   }
  328.  
  329.   /* Resize cast, scenes and similar movies */
  330.  
  331.   .layout-desktop #castContent .card.overflowPortraitCard {
  332.     font-size:95%!important;
  333.     width: 13.6em !important;
  334.   }
  335.  
  336.   .layout-desktop #guestCastContent .card.overflowPortraitCard {
  337.     font-size:95%!important;
  338.     width: 13.6em !important;
  339.   }
  340.  
  341.   .layout-tv #castContent .card.overflowPortraitCard {
  342.     font-size: 90%!important;
  343.     width: 13em !important;
  344.     margin-left: -1.6vw !important;
  345.     height: 30vh;
  346.   }
  347.  
  348.   .layout-desktop #similarCollapsible .card.overflowPortraitCard{
  349.     width: 14.6em !important;
  350.   }
  351.  
  352.   .layout-desktop #scenesContent .card.itemAction.chapterCard{
  353.     width: 27.1em !important;
  354.   }
  355.  
  356.  
  357.   /* scene chapters rounded overlay  */
  358.   .chapterCard .innerCardFooter {
  359.     background: rgba(var(--dark), 0.5);
  360.     color: rgba(var(--accent), 0.9);
  361.     backdrop-filter: blur(5px);
  362.       width: 50%;
  363.       margin: 0 auto;
  364.       position: absolute;
  365.       bottom: 7px;
  366.       left: 7px;
  367.       padding: 1px;
  368.       border-radius: 5.5px !important;
  369.   }
  370.  
  371.   /* Increase title font size */
  372.   .detailPagePrimaryContainer {
  373.       font-size: 115% !important;
  374.   }
  375.  
  376.   /* increases font size of "Show more" button */
  377.   a.overview-expand.emby-button {
  378.       font-size: 110%;
  379.   }
  380.  
  381.   /* Add padding to description*/
  382.   .layout-desktop .detailSectionContent {
  383.    /*   margin-top: 1.25vw !important; */
  384.       padding: 0vw 0vw 0.25vw 1vw !important;
  385.   }
  386.  
  387.   /* makes description and tagline bold */
  388.   .detailSectionContent .tagline {
  389.     font-weight: bold;
  390.     font-size: 125% !important;
  391.     margin-bottom: 0.3vh;
  392.   }
  393.  
  394.   #itemDetailPage .tagline {
  395.     border-left: 0.25em solid rgb(var(--white));
  396.     padding: 0 0.5em;
  397.   }
  398.  
  399.   .detailSectionContent .detail-clamp-text, .detailSectionContent .overview {
  400.     font-weight: bold;
  401.     font-size: 125% !important;
  402.     margin-top: 0.4em;
  403.   }
  404.  
  405.   /* hide imdb, tmdb trakt links */
  406.   .itemExternalLinks {
  407.     display: none;
  408.   }
  409.  
  410.   /* Rounded left drawer buttons */
  411.   .navMenuOption,
  412.   .navMenuOption:hover,
  413.   .navMenuOption-selected {
  414.       border-radius: var(--rounding-alt) !important;
  415.       width: 85% !important;
  416.       margin: auto !important;
  417.       text-align: center !important;
  418.       height: 45px !important;
  419.       margin-top: 4px !important;
  420.       margin-bottom: 4px !important;
  421.   }
  422.   .navMenuOption,
  423.   .navMenuOption-selected {
  424.       width: 86% !important;
  425.   }
  426.  
  427.   .navMenuOption:hover {
  428.       width: 89% !important;
  429.   }
  430.  
  431.   .navMenuOption:hover:not(.navMenuOption-selected) {
  432.       backdrop-filter: blur(4px);
  433.       background-color: rgba(var(--accent), 0.85);
  434.       color: rgba(var(--darkest));
  435.   }
  436.  
  437.   /* Selected Custom button color */
  438.   .navMenuOption-selected {
  439.       background: rgba(var(--accent), 0.7) !important;
  440.       color: rgba(var(--darkest)) !important;
  441.       backdrop-filter: blur(50px) !important;
  442.   }
  443.  
  444.   /* change button hover color */
  445.   .raised:hover, .fab:hover, a[data-role="button"]:hover {
  446.     background: rgba(var(--accent), 0.95) !important;
  447.   }
  448.  
  449.   /* hover background in settings */
  450.   #myPreferencesMenuPage .listItem:hover {
  451.     color: rgba(var(--darkest)) !important;
  452.     background: rgba(var(--accent),0.8) !important;
  453.   }
  454.  
  455.   [dir="ltr"] #myPreferencesMenuPage .listItemIcon {
  456.       margin: 0px 0.25em 0px 0.5em;
  457.   }
  458.  
  459.   /* makes Activity and Paths boxes in settings have padding */
  460.   .listItem:not(.listItem-button) {
  461.       margin: 0.6em;
  462.       padding-left: 1em;
  463.   }
  464.  
  465.   .listItem:hover:not(.listItem-button) {
  466.       transition: 0.2s;
  467.       background: rgba(var(--dark));
  468.       margin: 0.6em;
  469.   }
  470.  
  471.   .paperList:not(.listItem-button) {
  472.     padding: 0.6em;
  473.     border-radius: var(--rounding-large);
  474.   }
  475.  
  476.   /* Fixes server info padding issue post 10.9.x in Dashboard*/
  477.   .serverInfo.paperList {
  478.     padding-top: 1.5em;
  479.     padding-bottom: 1.5em;
  480.     padding-left: 1.65em;
  481.   }
  482.  
  483.   /* Themes Dashboard sidebar from 10.9.x */
  484.   .css-4yt2of {
  485.       background-color: rgb(var(--darkest));
  486.       color: rgb(var(--accent));
  487.   }
  488.  
  489.   .css-37qkju {
  490.     color: inherit;
  491.   }
  492.  
  493.   .css-54jp7k {
  494.     color: inherit;
  495.   }
  496.  
  497.   .css-139vfv2 {
  498.       background-color: rgba(var(--darkest),1);
  499.       color: rgb(var(--white));
  500.       background-image: linear-gradient(rgba(var(--accent), 0.1), rgba(var(--accent), 0.1));
  501.   }
  502.  
  503.   #server-subheader,
  504.   #devices-subheader,
  505.   #livetv-subheader,
  506.   #advanced-subheader {
  507.     color: rgba(var(--accent),0.7);
  508.   }
  509.  
  510.   .css-17c09up {
  511.       border-radius: var(--rounding);
  512.       margin: 0.35em;
  513.   }
  514.  
  515.   .css-17c09up.Mui-selected {
  516.       background-color: rgba(var(--accent), 1) !important;
  517.       color: rgb(var(--darkest)) !important;
  518.       border-radius: var(--rounding);
  519.       margin: 0.35em;
  520.   }
  521.  
  522.   .css-17c09up:hover,
  523.   .css-17c09up.Mui-selected:hover {
  524.       background-color: rgba(var(--accent), 0.85) !important;
  525.       color: rgb(var(--darkest)) !important;
  526.       border-radius: var(--rounding);
  527.       margin: 0.35em;
  528.   }
  529.  
  530.   .css-1ip8vbj {
  531.       border-radius: var(--rounding);
  532.       margin: 0.35em;
  533.   }
  534.  
  535.   .css-1ip8vbj.Mui-selected {
  536.       background-color: rgba(var(--accent), 1);
  537.       color: rgb(var(--darkest));
  538.       border-radius: var(--rounding);
  539.       margin: 0.35em;
  540.   }
  541.  
  542.   .css-1ip8vbj:hover,
  543.   .css-1ip8vbj.Mui-selected:hover {
  544.       background-color: rgba(var(--accent), 0.85) !important;
  545.       color: rgb(var(--darkest)) !important;
  546.       border-radius: var(--rounding);
  547.       margin: 0.35em;
  548.   }
  549.  
  550.   /* adds padding to icons in Settings > Activity */
  551.   .listItemIcon:not(.listItemIcon-transparent) {
  552.       margin: 0 0.2em 0 0.1em;
  553.   }
  554.  
  555.   /* fixes the above applying rounding to the checkboxlist in settings */
  556.   .checkboxList.paperList {
  557.     border-radius: var(--rounding);
  558.   }
  559.  
  560.   /* themes header bar in Dashboard added in 10.9.x */
  561.   .css-fknfom {
  562.     background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
  563.       color: rgb(var(--accent));
  564.       background-color: rgba(var(--darkest),.8);
  565.       backdrop-filter: blur(7px);
  566.   }
  567.  
  568.   .css-nc0a08 {
  569.       min-height: 64px;
  570.   }
  571.  
  572.   /* themes Dashboard User menu - 10.9.x */
  573.  
  574.   .css-192q3pc {
  575.       background-color: rgb(var(--accent-off));
  576.       color: rgb(var(--dark));
  577.   }
  578.  
  579.   .css-1ilo2kq {
  580.       border-radius: var(--rounding-large);
  581.       background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
  582.       color: rgb(var(--accent));
  583.       background-color: rgba(var(--darkest),.9);
  584.       backdrop-filter: blur(7px);
  585.   }
  586.  
  587.   .css-1ilo2kq .css-37qkju {
  588.   /*    color: rgb(var(--accent)); */
  589.   }
  590.  
  591.   .css-r8u8y9 {
  592.       margin: 16px;
  593.       padding: 0px;
  594.   }
  595.  
  596.   .css-122sjhb {
  597.       border-radius: var(--rounding-alt);
  598.       padding: 12px 16px;
  599.   }
  600.  
  601.   .css-122sjhb:hover {
  602.       background-color: rgba(var(--accent), 0.75);
  603.       color: rgb(var(--darkest));
  604.   }
  605.  
  606.   /* Dashboard Devices > Activity */
  607.  
  608.   .css-195jjve {
  609.       background-color: rgba(var(--accent), 1);
  610.   }
  611.  
  612.   .css-1jmiiw3 {
  613.       border-color: rgba(var(--accent),.25);
  614.       border-radius: var(--rounding);
  615.       color: rgb(var(--accent));
  616.   }
  617.  
  618.   .css-1jmiiw3 .MuiDataGrid-withBorderColor {
  619.       border-color: rgba(var(--accent),.25);
  620.   }
  621.  
  622.   .css-18gtl5v {
  623.       color: inherit;
  624.   }
  625.  
  626.   .css-8vq3cg.Mui-selected {
  627.       color: rgb(var(--accent));
  628.       background-color: rgba(var(--accent), 0.2);
  629.   }
  630.  
  631.   .css-8vq3cg {
  632.       border-radius: var(--rounding-alt);
  633.       border: 1px solid rgba(var(--accent), 0.12);
  634.       color: rgb(var(--accent));
  635.   }
  636.  
  637.   .css-5y4e7x.Mui-selected:hover {
  638.       background-color: rgba(var(--accent), 0.2);
  639.   }
  640.  
  641.   .css-5y4e7x.Mui-selected {
  642.       background-color: rgba(var(--accent), 0.4);
  643.   }
  644.  
  645.   .css-ntyfco {
  646.       color: rgb(var(--accent));
  647.   }
  648.  
  649.   .css-1xiho4e {
  650.       color: rgb(var(--darkest));
  651.       background-color: rgb(var(--cherry-red));
  652.   }
  653.  
  654.   .css-6ci2yv {
  655.       color: rgb(var(--accent));
  656.   }
  657.  
  658.   .css-8xlzg4 {
  659.       border-radius: var(--rounding-large);
  660.       background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
  661.       color: rgb(var(--accent));
  662.       background-color: rgba(var(--darkest),.9);
  663.       backdrop-filter: blur(7px);
  664.       box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px 2px, rgba(0, 0, 0, 0.14) 0px 1px 1px 1px, rgba(0, 0, 0, 0.12) 0px 5px 3px 0px;
  665.   }
  666.  
  667.   .css-5n0m2r {
  668.       padding: 0px 0px;
  669.   }
  670.  
  671.   .css-xfvph6 {
  672.       color: rgb(var(--accent));
  673.   }
  674.  
  675.   /* Dashboard Devices > DLNA */
  676.  
  677.   .css-1fv02xh {
  678.       color: rgb(var(--darkest));
  679.       background-color: rgb(var(--accent));
  680.       border-radius: var(--rounding-alt);
  681.   }
  682.  
  683.   .css-77wcaa .MuiAlert-icon {
  684.       color: rgb(var(--accent));
  685.   }
  686.  
  687.   .css-77wcaa {
  688.       border-radius: var(--rounding);
  689.       background-color: rgb(var(--darkest));
  690.       color: rgba(var(--accent),.75);
  691.   }
  692.  
  693.   .css-1fv02xh:hover {
  694.       background-color: rgba(var(--accent),.75);
  695.   }
  696.  
  697.   /* Search bar in Plugins */
  698.  
  699.   #pluginsPage .inputContainer .emby-input {
  700.     width: 50%;
  701.   }
  702.  
  703.   #pluginsPage .inputLabel, #pluginsPage .inputLabelUnfocused {
  704.     margin-top: 1em;
  705.     margin-bottom: 1.6em;
  706.     margin-left: 1em;
  707.   }
  708.  
  709.   /* Themes missing scheduled tasks entries */
  710.   .dashboardDocument .paper-icon-button-light {
  711.       color: rgb(var(--accent-off));
  712.   }
  713.  
  714.   .secondary.listItemBodyText > span:nth-child(1) {
  715.     color: rgb(var(--cherry-red)) !important;
  716.   }
  717.  
  718.   .secondary.listItemBodyText > div:nth-child(1) > span:nth-child(2) {
  719.     color: rgb(var(--accent-off)) !important;
  720.   }
  721.  
  722.   .taskProgressOuter {
  723.       background: rgba(var(--accent),.15);
  724.   }
  725.  
  726.   #divRunningTasks > p {
  727.       padding-left: 1em;
  728.   }
  729.  
  730.   #divRunningTasks > p:nth-child(odd) > progress:nth-child(2) {
  731.       background-color: rgb(var(--dark-highlight)) !important;
  732.   }
  733.  
  734.   #divRunningTasks > p:nth-child(even) > progress:nth-child(2) {
  735.       background-color: rgb(var(--dark-highlight)) !important;
  736.   }
  737.  
  738.   /* changes color of user profile  */
  739.  
  740.   .devicesList .cardImage {
  741.       filter: invert();
  742.       opacity: 0.65;
  743.       color: rgb(var(--accent)) !important;
  744.   }
  745.  
  746.   /* Inverts color of SessionApp icon, but does't look good agains dark BGs
  747.   .sessionNowPlayingInnerContent .sessionAppInfo:not(sessionDeviceName) {
  748.       filter: invert();
  749.       opacity: 0.65;
  750.   } */
  751.  
  752.   /* changes color of active device text in settings > dashboard  and adds padding*/
  753.   #dashboardPage .sessionNowPlayingInnerContent {
  754.     color: rgb(var(--accent));
  755.     padding: 1em;
  756.   }
  757.  
  758.   /* changes color of darken overlay in Activity devices */
  759.   .darkenContent {
  760.       background: rgba(var(--darkest),.55);
  761.   }
  762.  
  763.   /* progressbar bg was dark gray */
  764.   #dashboardPage .backgroundProgress > div {
  765.       background-color: transparent;
  766.       display: none;   /*  this may break something? */
  767.   }
  768.  
  769.   /* changes colors of icons inside cards (eg: person icon inside card images without pictures) */
  770.   .cardImageIcon {
  771.     color: rgb(var(--dark));
  772.   }
  773.  
  774.  
  775.  
  776.   /* #### Accentlist #### */
  777.  
  778.   .emby-button.show-focus:focus {
  779.     background: rgba(var(--accent),0.5) !important;
  780.   }
  781.   .paper-icon-button-light.show-focus:focus {
  782.       color: rgba(var(--accent)) !important;
  783.   }
  784.  
  785.   /*Title text buttons*/
  786.   button-flat:hover {
  787.       color: rgba(var(--accent)) !important;
  788.   }
  789.  
  790.   .raised:hover,
  791.   .fab:hover,
  792.   a[data-role="button"]:hover {
  793.     background: rgba(var(--accent),0.5) !important;
  794.   }
  795.  
  796.   .subtitleappearance-preview {
  797.     background: linear-gradient(140deg,rgb(var(--accent)),#111) !important;
  798.     border-radius: var(--rounding);
  799.   }
  800.  
  801.   .navMenuOption-selected {
  802.     color: rgba(var(--accent));
  803.   }
  804.   .mdl-slider-background-lower {
  805.     background-color: rgba(var(--accent));
  806.   }  
  807.  
  808.   progress::-moz-progress-bar {
  809.     background-color: rgba(var(--accent),0.75);
  810.   }
  811.   progress::-webkit-progress-value {
  812.     background-color: rgba(var(--accent),0.75);
  813.   }
  814.   .taskProgressInner {
  815.     background: rgba(var(--accent),0.75) !important;
  816.   }
  817.  
  818.   #dashboardPage .playbackProgress > div {
  819.       background-color: rgba(var(--accent), 0.75) !important;
  820.   }
  821.   #dashboardPage .transcodingProgress > div {
  822.       background-color: rgba(var(--accent), 0.35) !important;
  823.   }
  824.  
  825.   .mdl-slider-background-lower {
  826.     background-color: rgb(var(--accent));
  827.   }
  828.   .mdl-slider::-moz-range-thumb {
  829.     background: rgb(var(--accent));
  830.   }
  831.   .mdl-slider::-ms-thumb {
  832.     background: rgb(var(--accent));
  833.   }
  834.   .mdl-slider::-webkit-slider-thumb {
  835.     background: rgb(var(--accent));
  836.   }
  837.   .iconOsdProgressInner {
  838.     background: rgb(var(--accent));
  839.   }
  840.  
  841.   .paper-icon-button-light:hover,
  842.   .raised.homeLibraryButton:hover,
  843.   .button-flat:hover,
  844.   .playstatebutton-icon-played,
  845.   .ratingbutton-icon-withrating,
  846.   .paper-icon-button-light:hover:not(:disabled),
  847.   .emby-tab-button:hover,
  848.   .selectLabelFocused,
  849.   .inputLabelFocused,
  850.   .textareaLabelFocused,
  851.   .buttonActive,
  852.   .button-link {
  853.     color: rgba(var(--accent)) !important;
  854.   }
  855.  
  856.   #itemDetailPage .button-link {color: inherit !important;}
  857.  
  858.  
  859.   /* rounds hover menu options */
  860.   .navMenuOption:hover, .actionSheetMenuItem:hover {
  861.     background-color: rgba(var(--accent),0.75) !important;
  862.       color: rgba(var(--darkest), 1) !important;
  863.       border-radius: var(--rounding) !important;
  864.   }
  865.   .actionSheetMenuItem:hover .listItemBodyText.secondary {
  866.     color: rgba(var(--darkest), .85);
  867.   }
  868.  
  869.   .navMenuOption:hover {
  870.     background: rgba(var(--accent),0.75) !important;
  871.   }
  872.  
  873.  
  874.   ./* increases size and changes color of check boxes */
  875.  
  876.   .checkboxOutline {
  877.     border: 0.25em solid;
  878.     top: 4px;
  879.   }
  880.  
  881.   .checkboxOutline, .multiSelectCheckboxOutline {
  882.     border-color: rgba(var(--accent)) !important;
  883.   }
  884.  
  885.   #chkSubtitle .checkboxOutline {
  886.     border-color: rgba(var(--accent)) !important;
  887.     border: 0.25em solid;
  888.       background: none;
  889.   }
  890.  
  891.   .emby-checkbox:checked {
  892.     background-color: rgba(var(--accent)) !important;
  893.     font-size: 120% !important;
  894.   }
  895.  
  896.   .mdl-radio__focus-circle {
  897.       background: var(--accent) !important;
  898.   }
  899.  
  900.   .mdl-radio__circles svg {
  901.       color: rgba(var(--accent),.7) !important;
  902.   }
  903.  
  904.   .mdl-radio__circles:hover svg {
  905.       color: rgba(var(--accent),.8) !important;
  906.   }
  907.  
  908.   .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle {
  909.       color: rgba(var(--accent),1) !important;
  910.   }
  911.  
  912.   .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle {
  913.       color: rgba(var(--accent),1) !important;
  914.   }
  915.  
  916.   /* changes color of checkboxes, text areas and selection panels */
  917.   .emby-checkbox:checked + span + .checkboxOutline {
  918.       border: 0.01em solid rgba(var(--accent)) !important;
  919.       background-color: rgba(var(--accent)) !important;
  920.   }
  921.  
  922.   .upNextDialog-countdownText {
  923.     color: rgba(var(--accent));
  924.   }
  925.  
  926.   .mdl-spinner__layer-1 {
  927.     border-color: rgba(var(--accent));
  928.   }
  929.   .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
  930.     background: rgba(var(--accent), 0.5);
  931.   }
  932.   .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
  933.     background: rgba(var(--accent));
  934.   }
  935.  
  936.   ::-webkit-scrollbar-thumb {
  937.     background: rgba(var(--accent),0.8) !important;
  938.   }
  939.   * {
  940.     scrollbar-color: rgba(var(--accent),0.8) #0000 !important;
  941.   }
  942.  
  943.  
  944.  
  945.   /* #### Rounding #### */
  946.  
  947.  
  948.  
  949.   /*Rounded corners on pretty much everything*/
  950.  
  951.   progress {
  952.     border-radius: var(--rounding);
  953.   }
  954.   progress::-webkit-progress-bar {
  955.     border-radius: var(--rounding);
  956.   }
  957.   progress::-moz-progress-bar {
  958.     border-radius: var(--rounding);
  959.   }
  960.   progress::-webkit-progress-value {
  961.     border-radius: var(--rounding);
  962.   }
  963.   .taskProgressOuter,
  964.   .taskProgressInner {
  965.     border-radius: var(--rounding) !important;
  966.   }
  967.   .formDialogHeader {
  968.     border-top-left-radius: var(--rounding);
  969.     border-top-right-radius: var(--rounding);
  970.   }
  971.   .formDialogFooter {
  972.     border-bottom-left-radius: var(--rounding);
  973.     border-bottom-right-radius: var(--rounding);
  974.   }
  975.  
  976.   /* rounds and add a dark blur to media cover/thumbs on hover */
  977.   .cardOverlayContainer {
  978.       border-radius: var(--rounding) !important;
  979.       background: rgba(var(--accent-off),.42);
  980.   }
  981.  
  982.   .missingIndicator,
  983.   .unairedIndicator,
  984.   .detailTable,
  985.   .primaryImageWrapper > img,
  986.   .toast,
  987.   .cardContent,
  988.   .sessionNowPlayingInnerContent,
  989.   .listItem,
  990.   .listItem:hover,
  991.   .cardImage,
  992.   .fab,
  993.   .raised,
  994.   .itemSelectionPanel,
  995.   .cardContent-button,
  996.   .cardContent-shadow,
  997.   .itemDetailImage,
  998.   .cardImageContainer,
  999.   .cardPadder,
  1000.   .listItemImage,
  1001.   .listItemButton,
  1002.   .headerButton,
  1003.   .innerCardFooter,
  1004.   .blurhash-canvas,
  1005.   .dialog,
  1006.   .countIndicator,
  1007.   .playedIndicator,
  1008.   .listItemIcon,
  1009.   .listItem-border,
  1010.   .button-flat,
  1011.   .visualCardBox,
  1012.   .emby-select-withcolor,
  1013.   .chapterThumbTextContainer,
  1014.   .chapterThumbContainer,
  1015.   .chapterThumb,
  1016.   .emby-input,
  1017.   .emby-textarea,
  1018.   .emby-select-withcolor,
  1019.   .nowPlayingPageImage,
  1020.   .upNextDialog-poster-img,
  1021.   .upNextContainer {
  1022.     border-radius: var(--rounding) !important;
  1023.   }
  1024.  
  1025.  
  1026.   /* Makes check boxes circular */
  1027.   .checkboxOutline, .multiSelectCheckboxOutline {
  1028.     border-radius: var(--rounding-circle) !important;
  1029.   }
  1030.  
  1031.   fieldset {
  1032.     border-radius: var(--rounding);
  1033.   }
  1034.   .osdPoster img {
  1035.     border-radius: var(--rounding); border: none;
  1036.   }
  1037.   .mdl-slider::-moz-range-thumb {
  1038.     border-radius: var(--rounding);
  1039.   }
  1040.   .mdl-slider::-ms-thumb {
  1041.     border-radius: var(--rounding);
  1042.   }
  1043.   .mdl-slider::-webkit-slider-thumb {
  1044.     border-radius: var(--rounding);
  1045.   }
  1046.  
  1047.   div[data-role="controlgroup"] a[data-role="button"]:first-child {
  1048.       border-bottom-left-radius: var(--rounding);
  1049.       border-top-left-radius: var(--rounding);
  1050.   }
  1051.   div[data-role="controlgroup"] a[data-role="button"]:last-child {
  1052.       border-bottom-right-radius: var(--rounding);
  1053.       border-top-right-radius: var(--rounding);
  1054.   }
  1055.   #dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent {
  1056.       border-radius: var(--rounding) var(--rounding) 0 0 !important;
  1057.   }
  1058.   #divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent {
  1059.       border-radius: var(--rounding) var(--rounding) 0 0 !important;
  1060.   }
  1061.   #userProfilesPage .cardImage, #userProfilesPage .cardContent {
  1062.       border-radius: var(--rounding) var(--rounding) 0 0 !important;
  1063.   }
  1064.  
  1065.  
  1066.   /* Fix rounding issue on media poster in media page */
  1067.   .cardBox:not(.visualCardBox) .cardPadder,
  1068.   .cardContent-shadow {
  1069.     box-shadow:0 .0725em .29em 0 rgba(0,0,0,0)
  1070.   }
  1071.  
  1072.  
  1073.   /* indicator corner */
  1074.  
  1075.  
  1076.  
  1077.   /*Card indicators style corner*/
  1078.  
  1079.   .cardIndicators,
  1080.   .listItemIndicators {
  1081.     right: 0;
  1082.     top: 0;
  1083.   }
  1084.   .innerCardFooter {
  1085.   /*  border-radius: 0px var(--rounding) !important; */  /* conflicts with my edits of the progress bar */
  1086.   /*  box-shadow: 1px 0px 5px 2px rgba(var(--dark),0.5);  */
  1087.   }
  1088.   .countIndicator, .playedIndicator {
  1089.     border-radius: 0px var(--rounding) !important;
  1090.     box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
  1091.   }
  1092.   .countIndicator {
  1093.     background: rgba(var(--accent),1);
  1094.   }
  1095.   .playedIndicator {
  1096.     background: rgba(var(--darkest), 1)
  1097.   }
  1098.  
  1099.   .mediaSourceIndicator {
  1100.     left: 0;
  1101.     top: 0;
  1102.   }
  1103.   .mediaSourceIndicator {
  1104.     border-radius: var(--rounding) 0px !important;
  1105.     box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
  1106.     background: rgba(0,0,0,0.5);
  1107.   }
  1108.  
  1109.   .countIndicator, .playedIndicator {
  1110.     background: rgba(var(--accent), 1) !important;
  1111.     color: rgba(var(--darkest), 1) !important;
  1112.     font-weight: bold;
  1113.   }
  1114.  
  1115.   /* fix for changes in 10.9.x */
  1116.   [dir="ltr"] .cardIndicators {
  1117.     right: 0em;
  1118.   }
  1119.  
  1120.  
  1121.  
  1122.   /* colorful */
  1123.  
  1124.  
  1125.   /*Colors for Title ribbon */
  1126.   .layout-desktop .detailRibbon {
  1127.       background: rgba(0, 0, 0, 0);
  1128.   }
  1129.   /* Item backdrop overlay color */
  1130.   .itemBackdrop::after {
  1131.     background: rgba(0,0,0,0) !important;
  1132.   }
  1133.  
  1134.   /*Accenting*/
  1135.  
  1136.   .preload {
  1137.       background-color: black;
  1138.   }
  1139.   .backgroundContainer {
  1140.       background-color: rgba(var(--accent),0.17) !important;
  1141.   }
  1142.   .formDialogHeader,
  1143.   .formDialogFooter {
  1144.       background-color: rgba(var(--accent),0.15) !important;
  1145.       backdrop-filter: blur(25px);
  1146.   }
  1147.   /*Fix footers/headers displaying on small pop-ups*/
  1148.   .formDialogFooter-clear,
  1149.   .formDialogHeader-clear,
  1150.   .innerCardFooterClear {
  1151.       background-color: transparent !important;
  1152.   }
  1153.  
  1154.   .button-flat:hover {
  1155.       background: rgba(var(--accent),0.25);
  1156.   }
  1157.  
  1158.   .dashboardSection h3 {
  1159.       margin-bottom: 0.5em;
  1160.       margin-top: .5em;
  1161.       margin-left: .6em;
  1162.       margin-right: .6em;
  1163.   }
  1164.  
  1165.   .paper-icon-button-light:hover, .paper-icon-button-light:hover:not(:disabled) {
  1166.     background-color: rgba(var(--accent),0.25) !important;
  1167.   }
  1168.  
  1169.   .cardOverlayFab-primary:hover {
  1170.       -webkit-transform: scale(1.4);
  1171.       transform: scale(1.4);
  1172.       transition: .2s;
  1173.   }
  1174.  
  1175.   .navMenuOption-selected {
  1176.     color: var(--dark);
  1177.   }
  1178.  
  1179.   .subtitleappearance-preview {
  1180.     background: linear-gradient(140deg,rgba(var(--accent)),#111) !important;
  1181.   }
  1182.   .navMenuOption-selected, .selectionCommandsPanel {
  1183.       background: rgba(var(--accent), 0.8) !important;
  1184.   }
  1185.   .raised,
  1186.   .fab,
  1187.   a[data-role="button"] {
  1188.     background: rgba(var(--accent), 0.8) !important;
  1189.       transition: all 0.2s !important;
  1190.   }
  1191.  
  1192.   /*Various box-shadows, might be related to glowstyle*/
  1193.   .cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow {
  1194.       box-shadow: none !important;
  1195.   }
  1196.   /* glow around text on AppleTV-esque bar */
  1197.   body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground  {
  1198.     text-shadow: 0px 0px 4px rgba(0,0,0,.6) !important;
  1199.   }
  1200.   .layout-desktop .headerTabs, .layout-desktop .headerRight {
  1201.    box-shadow: 1px 3px 6px rgba(var(--darkest),.5);
  1202.   }
  1203.   .blurhashed {
  1204.       box-shadow: 1px 1px 4px 0px rgba(var(--darkest),.3) !important;
  1205.   }
  1206.  
  1207.   /*Dash and general UI styling*/
  1208.   .paperList, .visualCardBox {
  1209.       background-color: rgba(var(--darkest), 1);
  1210.   }
  1211.   .navMenuOption-selected {
  1212.       color: var(--dark);
  1213.   }
  1214.   progress {
  1215.       background: rgba(0, 0, 0, 0.5) !important;
  1216.   }
  1217.  
  1218.   /*Colors for loading spinner, placeholders, scroll bars*/
  1219.   .mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
  1220.   .mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
  1221.   .mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
  1222.   .mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}
  1223.  
  1224.  
  1225.   /* changes colors of Active devices cards in settings > dashboard */
  1226.   .defaultCardBackground1 {
  1227.       background-color: rgba(var(--dark-highlight), 1);
  1228.   }
  1229.   .defaultCardBackground2 {
  1230.       background-color: rgba(var(--dark-highlight), 1);
  1231.   }
  1232.   .defaultCardBackground3 {
  1233.       background-color: rgba(var(--dark-highlight), 1);
  1234.   }
  1235.   .defaultCardBackground4 {
  1236.       background-color: rgba(var(--dark-highlight), 1);
  1237.   }
  1238.   .defaultCardBackground5 {
  1239.       background-color: rgba(var(--dark-highlight), 1);
  1240.   }
  1241.  
  1242.   /*Syncplay*/
  1243.   @-webkit-keyframes pulse {
  1244.    0% {
  1245.     -webkit-transform:scale(.95);
  1246.     transform:scale(.95);
  1247.     color:rgba(var(--accent),.7);
  1248.     background:rgba(var(--accent),.3);
  1249.     box-shadow:0 0 0 0 rgba(var(--accent),.3)
  1250.    }
  1251.    70% {
  1252.     -webkit-transform:scale(1);
  1253.     transform:scale(1);
  1254.     color:rgba(var(--accent),0);
  1255.     background:rgba(var(--accent),0);
  1256.     box-shadow:0 0 0 60px rgba(var(--accent),0)
  1257.    }
  1258.    to {
  1259.     -webkit-transform:scale(.95);
  1260.     transform:scale(.95);
  1261.     color:rgba(var(--accent),0);
  1262.     background:rgba(var(--accent),0);
  1263.     box-shadow:0 0 0 0 rgba(var(--accent),0)
  1264.    }
  1265.   }
  1266.   @keyframes pulse {
  1267.    0% {
  1268.     -webkit-transform:scale(.95);
  1269.     transform:scale(.95);
  1270.     color:rgba(var(--accent),.7);
  1271.     background:rgba(var(--accent),.3);
  1272.     box-shadow:0 0 0 0 rgba(var(--accent),.3)
  1273.    }
  1274.    70% {
  1275.     -webkit-transform:scale(1);
  1276.     transform:scale(1);
  1277.     color:rgba(var(--accent),0);
  1278.     background:rgba(var(--accent),0);
  1279.     box-shadow:0 0 0 60px rgba(var(--accent),0)
  1280.    }
  1281.    to {
  1282.     -webkit-transform:scale(.95);
  1283.     transform:scale(.95);
  1284.     color:rgba(var(--accent),0);
  1285.     background:rgba(var(--accent),0);
  1286.     box-shadow:0 0 0 0 rgba(var(--accent),0)
  1287.    }
  1288.   }
  1289.   @-webkit-keyframes infinite-pulse {
  1290.    0% {
  1291.     -webkit-transform:scale(.95);
  1292.     transform:scale(.95);
  1293.     color:rgba(var(--accent),.7);
  1294.     background:rgba(var(--accent),.3);
  1295.     box-shadow:0 0 0 0 rgba(var(--accent),.3)
  1296.    }
  1297.    70% {
  1298.     -webkit-transform:scale(1);
  1299.     transform:scale(1);
  1300.     color:rgba(var(--accent),.6);
  1301.     background:rgba(var(--accent),0);
  1302.     box-shadow:0 0 0 60px rgba(var(--accent),0)
  1303.    }
  1304.    to {
  1305.     -webkit-transform:scale(.95);
  1306.     transform:scale(.95);
  1307.     color:rgba(var(--accent),.7);
  1308.     background:rgba(var(--accent),.3);
  1309.     box-shadow:0 0 0 0 rgba(var(--accent),0)
  1310.    }
  1311.   }
  1312.   @keyframes infinite-pulse {
  1313.    0% {
  1314.     -webkit-transform:scale(.95);
  1315.     transform:scale(.95);
  1316.     color:rgba(var(--accent),.7);
  1317.     background:rgba(var(--accent),.3);
  1318.     box-shadow:0 0 0 0 rgba(var(--accent),.3)
  1319.    }
  1320.    70% {
  1321.     -webkit-transform:scale(1);
  1322.     transform:scale(1);
  1323.     color:rgba(var(--accent),.6);
  1324.     background:rgba(var(--accent),0);
  1325.     box-shadow:0 0 0 60px rgba(var(--accent),0)
  1326.    }
  1327.    to {
  1328.     -webkit-transform:scale(.95);
  1329.     transform:scale(.95);
  1330.     color:rgba(var(--accent),.7);
  1331.     background:rgba(var(--accent),.3);
  1332.     box-shadow:0 0 0 0 rgba(var(--accent),0)
  1333.    }
  1334.   }
  1335.  
  1336.   /* Syncplay theming*/
  1337.   .syncPlayIconCircle {
  1338.     color: rgba(var(--accent),1) !important;
  1339.     text-shadow: none !important;
  1340.   }
  1341.  
  1342.   /* Red shutdown button */
  1343.   #btnShutdown {
  1344.       background: rgba(var(--cherry-red)) !important;
  1345.       color: rgba(var(--darkest)) !important;
  1346.   }
  1347.  
  1348.   /*Remove divider on list items*/
  1349.   .listItem-border {
  1350.       border: 0 !important;
  1351.   }
  1352.  
  1353.   /* Green played check icon */
  1354.   .playstatebutton-icon-played {
  1355.     color: rgba(var(--jade-green), 1) !important;
  1356.   }
  1357.  
  1358.   /* white dialog Backdrop */
  1359.  
  1360.   .dialogBackdropOpened {
  1361.       opacity: 0.2;
  1362.   }
  1363.  
  1364.   .dialogBackdrop {
  1365.       background-color: rgb(var(--darkest));
  1366.   }
  1367.  
  1368.   .tmla-mask {
  1369.       background-color: rgba(249,249,249,0.2);  /* hardcoded */
  1370.   }
  1371.  
  1372.  
  1373.  
  1374.  
  1375.   /* floating */
  1376.  
  1377.  
  1378.  
  1379.  
  1380.   /* Floating progressbar edit - from JellyFlix theme */
  1381.  
  1382.   .itemProgressBar {
  1383.     backdrop-filter: blur(4px);
  1384.     background: rgba(var(--white-off),.35) !important;
  1385.     height: 10px;
  1386.     border-radius: 30px;
  1387.   }
  1388.  
  1389.   .layout-mobile .itemProgressBar {
  1390.     height: 8px;
  1391.   }
  1392.  
  1393.   /* don't apply the blur inside Settings > Dashboard as it broke things for some reason */
  1394.   #dashboardPage .itemProgressBar {
  1395.     backdrop-filter: none;
  1396.   }
  1397.  
  1398.  
  1399.  
  1400.   .itemProgressBarForeground {
  1401.     background: rgb(var(--accent));
  1402.     border-radius: var(--rounding-circle);
  1403.  
  1404.   }
  1405.  
  1406.    .innerCardFooter {
  1407.       width: calc(100% - 24px);
  1408.       margin: 0 auto;
  1409.       position: absolute;
  1410.       bottom: 12px;
  1411.       box-shadow: 1px 1px 5px rgba(var(--dark),.25);
  1412.   }
  1413.  
  1414.  
  1415.  
  1416.  
  1417.   /* glossy */
  1418.  
  1419.  
  1420.  
  1421.  
  1422.   @supports (backdrop-filter: blur(15px)) {
  1423.     .dialog,
  1424.     .mainDrawer,
  1425.     .toast,
  1426.     .appfooter {
  1427.       backdrop-filter: blur(15px);
  1428.       background-color: rgba(var(--darkest), 0.75) !important;
  1429.     }
  1430.     #itemDetailPage .itemProgressBar,
  1431.     #dashboardPage .backgroundProgress > div {
  1432.       backdrop-filter: blur(4px);
  1433.     }
  1434.     @media all and (max-width: 70em){
  1435.       .cardOverlayButtonIcon {
  1436.        /* background-color: rgba(var(--darkest), 0.35) !important; */
  1437.       }
  1438.       .cardOverlayButtonIcon {
  1439.       /* backdrop-filter: blur(4px); */
  1440.       }
  1441.     }
  1442.     .indicator {
  1443.       backdrop-filter: blur(2px);
  1444.     }
  1445.    
  1446.     .paper-icon-button-light:hover:not(.headerButtonRight) {
  1447.       backdrop-filter: blur(4px);
  1448.     }
  1449.   }
  1450.  
  1451.  
  1452.  
  1453.  
  1454.   /* Episode List */
  1455.  
  1456.  
  1457.  
  1458.  
  1459.   /*Size episode preview images in a normal way*/
  1460.   .listItemImage.listItemImage-large.itemAction.lazy {
  1461.     transition: filter 0.2s;
  1462.   }
  1463.   .listItemImageButton-icon {
  1464.     padding: 0;
  1465.   }
  1466.  
  1467.   .listItemImageButton {
  1468.     margin: auto;
  1469.     font-size: 1.6em !important;
  1470.   }
  1471.  
  1472.   /* CSS rules for screen sizes larger than 110em */
  1473.   @media all and (min-width: 105.01em){
  1474.     .listItemImage.listItemImage-large.itemAction.lazy {
  1475.       height: 190px;
  1476.       width: 338px;
  1477.     }
  1478.     .listItem-content {
  1479.       height: 168px;
  1480.     }
  1481.   }
  1482.   /* CSS rules for screen sizes between 80em and 110em */
  1483.   @media all and (min-width: 80em) and (max-width: 105em) {
  1484.     .listItemImage.listItemImage-large.itemAction.lazy {
  1485.       height: 127px;
  1486.       width: 225px;
  1487.     }
  1488.     .listItem-content {
  1489.       height: 133px;
  1490.     }
  1491.     .layout-desktop .sectionTabs {
  1492.       width: auto !important;
  1493.       align-self: center !important;
  1494.       margin-top: -4em;
  1495.     }
  1496.     .secondary.listItem-overview.listItemBodyText {
  1497.       height: 5.8em;
  1498.     }
  1499.   }
  1500.  
  1501.   /* CSS rules for screen sizes less than 80em */
  1502.   @media all and (max-width: 79.99em){
  1503.     .listItemImage.listItemImage-large.itemAction.lazy {
  1504.       height: 80px;
  1505.       width: 106px;
  1506.       }
  1507.     .listItem-content {
  1508.       height: 85px;
  1509.       }
  1510.     .secondary.listItem-overview.listItemBodyText {
  1511.       height: 2.5em;
  1512.       margin: 0;
  1513.     }
  1514.     .layout-desktop .sectionTabs {
  1515.       width: auto !important;
  1516.       align-self: center !important;
  1517.       margin-top: -4em;
  1518.     }
  1519.   }
  1520.  
  1521.   .missingIndicator, .unairedIndicator {
  1522.       background: #AAAAAA;   /* hardcoded */
  1523.       padding: .3em .6em;
  1524.       color: rgba(var(--darkest));
  1525.   }
  1526.  
  1527.  
  1528.   /* #### login frame #### */
  1529.  
  1530.  
  1531.  
  1532.  
  1533.   /*Narrow the login form, size according to display size (bigger on mobile)*/
  1534.   #loginPage .readOnlyContent,
  1535.   #loginPage form {
  1536.     max-width: 22em;
  1537.   }
  1538.  
  1539.   #loginPage .padded-left.padded-right.padded-bottom-page {
  1540.     margin-top: 8em;
  1541.   }
  1542.  
  1543.   /*Hide "manual" and "forgot" buttons}*/
  1544.   #loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  1545.     display: none;
  1546.   }
  1547.  
  1548.   #loginPage .padded-left.padded-right.padded-bottom-page {
  1549.       margin-left: auto;
  1550.       margin-right: auto;
  1551.       background: rgba(var(--dark-highlight),.33);
  1552.       backdrop-filter: blur(2px);
  1553.       width: 24em;
  1554.       border-radius: 44px; /* hardcoded */
  1555.   }
  1556.   #loginPage .squareCard {
  1557.       width: 33%;
  1558.   }
  1559.   #loginPage form {
  1560.       padding-top: 4em;
  1561.   }
  1562.  
  1563.   #loginPage .sectionTitle{
  1564.       margin-left: auto !important;
  1565.       margin-right: auto !important;
  1566.       margin-bottom: 1.2em !important;
  1567.   }
  1568.  
  1569.   #loginPage .pageTitleWithDefaultLogo {
  1570.     display: none !important;
  1571.   }
  1572.  
  1573.   /* margin to Jellyfin logo */
  1574.   .pageTitle {
  1575.       margin: 0 0 0 .15em;
  1576.   }
  1577.  
  1578.   /* #### Media Player #### */
  1579.  
  1580.  
  1581.   /* hide volume bar in media player */
  1582.  
  1583.   .osdVolumeSliderContainer {
  1584.       -webkit-flex-grow: 1;
  1585.       flex-grow: 1;
  1586.       width: 9em;
  1587.       display: none;
  1588.   }
  1589.  
  1590.   .osdVolumeSlider.mdl-slider.mdl-js-slider.mdl-slider-hoverthumb {
  1591.     display: none;
  1592.   }
  1593.  
  1594.   .volumeButtons {
  1595.       display: flex;
  1596.       margin: 0 1em 0 .29em;
  1597.       margin-right: 0px;
  1598.   }
  1599.  
  1600.  
  1601.   /* Hide extra buttons in media player */
  1602.  
  1603.  
  1604.   .btnPreviousChapter, .btnNextChapter, .btnRewind, .btnFastForward, .btnPreviousTrack, .buttons.focuscontainer-x .btnUserRating {
  1605.     display: none;
  1606.   }
  1607.  
  1608.  
  1609.   /* increase player header and bottom icon sizes */
  1610.  
  1611.   .osdHeader .headerTop {
  1612.       max-height: 3em;
  1613.       pointer-events: all;
  1614.       font-size: 125%;
  1615.   }
  1616.  
  1617.   .videoOsdBottom .buttons {
  1618.     flex-wrap:wrap;
  1619.     padding:.25em 0 0;
  1620.     font-size: 125%;
  1621.   }
  1622.  
  1623.   /* increase header bar icon sizes */
  1624.   .layout-desktop .headerTop {
  1625.    font-size: 125%;
  1626.   }
  1627.  
  1628.   /* increases sidebar icon sizes to match above */
  1629.   .layout-desktop .drawerContent {
  1630.       font-size: 110%;
  1631.   }
  1632.  
  1633.   .mainDrawer-scrollContainer {
  1634.       font-size: 110%;
  1635.       margin-top: .35em;
  1636.   }
  1637.  
  1638.  
  1639.   /* turns slider bubble into same thickness as play bar*/
  1640.   .mdl-slider::-moz-range-thumb {
  1641.     border-radius:50%;
  1642.     height:0.8em;
  1643.     -moz-transition:.2s;
  1644.     transition:.2s;
  1645.     width:0.8em;
  1646.   }
  1647.  
  1648.  
  1649.   .mdl-slider::-webkit-slider-thumb {
  1650.     -webkit-appearance:none;
  1651.     border-radius:50%;
  1652.     height:0.8em;
  1653.     pointer-events:none;
  1654.     -webkit-transition:.2s;
  1655.     transition:.2s;
  1656.     width:0.8em;
  1657.   }
  1658.  
  1659.  
  1660.   /* turns slider bubble into white rectangle on hover */
  1661.   .mdl-slider-hoverthumb:hover::-moz-range-thumb {
  1662.     transform:scale(0.75, 2.3);
  1663.     border-radius:70%/17%;
  1664.     background-color:white;
  1665.   }
  1666.   .mdl-slider.show-focus:focus::-moz-range-thumb {
  1667.     transform:scale(0.75, 2.3);
  1668.     border-radius:70%/17%;
  1669.     background-color:white;
  1670.   }
  1671.  
  1672.  
  1673.   .mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
  1674.     -webkit-transform:scale(0.7, 2.3);
  1675.     transform:scale(0.75, 2.3);
  1676.     border-radius:70%/17%;
  1677.     background-color:white;
  1678.   }
  1679.   .mdl-slider.show-focus:focus::-webkit-slider-thumb {
  1680.     -webkit-transform:scale(0.75, 2.3);
  1681.     transform:scale(0.7, 2.3);
  1682.     border-radius:70%/17%;
  1683.     background-color:white;
  1684.   }
  1685.  
  1686.  
  1687.   /* round and blur progress bar */
  1688.   .mdl-slider-background-flex {
  1689.     background:hsla(0,0%,100%,.3);
  1690.     border:0;
  1691.     display:-webkit-flex;
  1692.     display:flex;
  1693.     height:.8em;
  1694.     left:0;
  1695.     margin-top:-.39em;
  1696.     overflow:hidden;
  1697.     padding:0;
  1698.     top:50%;
  1699.     width:100%;
  1700.     border-radius: 12px !important;
  1701.     backdrop-filter: blur(9px) !important;
  1702.   }
  1703.  
  1704.   /* hides playbar markers */
  1705.   .sliderMarker.watched {
  1706.       background-color: transparent;
  1707.   }
  1708.  
  1709.   .sliderMarker.unwatched {
  1710.   /*    background-color: rgba(var(--white-off),.35) !important; */
  1711.       background-color: transparent;  /* setting it to transparent bc it keeps flickering, even on the default JF theme */
  1712.   }
  1713.  
  1714.   /* round playbar buffer */
  1715.  
  1716.   .mdl-slider-background-upper {
  1717.     background:hsla(0,0%,100%,.4);
  1718.     bottom:0;
  1719.     left:0;
  1720.     position:absolute;
  1721.     top:0;
  1722.     width:0;
  1723.     border-radius: 12px;
  1724.   }
  1725.  
  1726.  
  1727.  
  1728.  
  1729.  
  1730.  
  1731.  
  1732.  
  1733.   /* dialogs */
  1734.   .dialog, .mainDrawer, .appfooter {
  1735.       backdrop-filter: blur(21px);
  1736.       background-color: rgba(var(--dark), 0.75) !important;
  1737.       box-shadow: 0 0 1.9vh #000;
  1738.   }
  1739.   .dialog, .appfooter {
  1740.       border-radius: var(--rounding-large) !important;
  1741.   }
  1742.   .mainDrawer {
  1743.       border-top-right-radius: var(--rounding-large) !important;
  1744.       border-bottom-right-radius: var(--rounding-large) !important;
  1745.   }
  1746.  
  1747.   .toast {
  1748.       background-color: rgba(var(--accent-off), 0.75) !important;
  1749.       color: rgba(var(--darkest), 1) !important;
  1750.       text-shadow: 0px 0px 4px rgba(0,0,0,0) !important;
  1751.       font-weight: bold;
  1752.   }
  1753.   .appfooter,
  1754.   .dialog,
  1755.   .mainDrawer,
  1756.   .toast {
  1757.     backdrop-filter: blur(21px);
  1758.     box-shadow: 0 0 1.9vh #000;
  1759.   }
  1760.  
  1761.   .actionSheetContent {
  1762.       padding: 0.4em 0 !important;
  1763.       margin-left: 0.75em !important;
  1764.       margin-right: 0.75em !important;
  1765.       margin-top: 0.35em !important;
  1766.       margin-bottom: 0.35em !important;
  1767.   }
  1768.  
  1769.   .navMenuOption-selected, .selectionCommandsPanel {
  1770.       color: rgba(var(--darkest), 1) !important;
  1771.       background-color: rgba(var(--accent), 0.55) !important;
  1772.       backdrop-filter: blur(4px);
  1773.   }
  1774.  
  1775.   .raised, .fab, a[data-role="button"] {
  1776.     background: rgba(var(--accent), 0.75) !important;
  1777.     color: rgba(var(--darkest), 1) !important;
  1778.   }
  1779.  
  1780.   div[data-role="controlgroup"] a.ui-btn-active {
  1781.       background: rgb(var(--accent)) !important;
  1782.       color: rgba(var(--darkest), 1) !important;
  1783.   }
  1784.  
  1785.   /* changes the color of icons in various places such as settings > activity, settings> notifications, subtitle results, etc*/
  1786.   #peopleList .material-icons.listItemIcon.person,
  1787.   #listGenres .material-icons.listItemIcon.live_tv,
  1788.   #listStudios .material-icons.listItemIcon.live_tv,
  1789.   #listTags .material-icons.listItemIcon.live_tv,
  1790.   #repositories .listItemIcon:not(.listItemIcon-transparent),
  1791.   #dlnaProfilesPage .listItemIcon:not(.listItemIcon-transparent),
  1792.   #homeScreenPreferencesPage .material-icons.listItemIcon.folder_open,
  1793.   .subtitleList .material-icons.listItemIcon.closed_caption,
  1794.   .subtitleResults .material-icons.listItemIcon.closed_caption {
  1795.     background: rgba(var(--accent-off), 1) !important;
  1796.     color: rgba(var(--darkest), 1) !important;
  1797.   }
  1798.  
  1799.   /* fixes alignment of download and delete icons in edit subtitle screen */
  1800.   .subtitleList, .btnDelete.listItemButton.paper-icon-button-light,
  1801.   .subtitleResults .btnDownload.listItemButton.paper-icon-button-light {
  1802.     margin-right: 1em;
  1803.   }
  1804.  
  1805.   /* moves dialogs up
  1806.   .dialogContainer {
  1807.       top: -110px;
  1808.   }*/
  1809.  
  1810.  
  1811.   /* rounds and pads episode list */
  1812.  
  1813.   .layout-desktop #childrenContent .listItem {
  1814.       padding-left: 1em !important;
  1815.       padding-right: 0.5em !important;
  1816.       padding-top: 0.7em !important;
  1817.       padding-bottom: 0.7em !important;
  1818.       border-radius: 28px !important;
  1819.   }
  1820.  
  1821.   #childrenContent .listItem:hover:not(.listItem-button) {
  1822.       background-color: rgba(var(--darkest),0.6);
  1823.       backdrop-filter: blur(6px);
  1824.   }
  1825.  
  1826.   /* collapsable menu */
  1827.   .collapseContent {
  1828.       background-color: rgba(var(--darkest),0.96);
  1829.       border-radius: var(--rounding-alt);
  1830.       margin-top: 9px;
  1831.   }
  1832.  
  1833.   .mdl-radio__circles {
  1834.       border-radius: 50%;
  1835.       height: 1.78em;
  1836.       margin-right: 1.54em;
  1837.       width: 1.78em;
  1838.   }
  1839.  
  1840.  
  1841.  
  1842.   /*Improve some menu alignments*/
  1843.   .navMenuOptionText {
  1844.       margin-top: 0;
  1845.   }
  1846.   .formDialogHeaderTitle {
  1847.     margin-left: 1em;
  1848.   }
  1849.   .formDialogContent {
  1850.     margin-bottom: 1.1em;  /* previously 6.2 */
  1851.   }
  1852.   .dialogContentInner {
  1853.     padding: .5em 1em 1em;
  1854.     padding-right: 1em;
  1855.     padding-left: 1em;
  1856.   }
  1857.   .listItem-indexnumberleft {
  1858.     margin: 1em;
  1859.   }
  1860.  
  1861.   /* adds padding to entries in Settings > Dashboard: Activity, Settings > Activity, etc.
  1862.   .listItem:not(.listItem-button.actionSheetMenuItem.emby-button) {
  1863.     padding-left: 1em;
  1864.   }
  1865.   */
  1866.  
  1867.   /* Removes above padding from Settings > Dashboard: Path */
  1868.   div.dashboardSection:nth-child(3) > div:nth-child(2) .listItem {
  1869.     padding-left: 0em;
  1870.   }
  1871.  
  1872.  
  1873.   .activeSession .backdropCard .backdropCard-scalable {
  1874.       padding: 0.8em;
  1875.   }
  1876.  
  1877.   /* makes progressbar in the Settings > Dashboard nicer */
  1878.   #dashboardPage .activeSession .backgroundProgress, .activeSession .playbackProgress, .activeSession .transcodingProgress {
  1879.       bottom: 0.6em;
  1880.       height: 8px;
  1881.       left: 0.7em;
  1882.       position: absolute;
  1883.       right: 0.7em;
  1884.       width: 94%;
  1885.   }
  1886.  
  1887.   #dashboardPage .itemProgressBar {
  1888.     background: rgba(var(--dark-highlight),.35) !important;
  1889.   }
  1890.  
  1891.   .dialogContainer .focuscontainer {
  1892.       border-radius: var(--rounding-large) !important;
  1893.   }
  1894.  
  1895.   /* adds top padding to right click dialogs
  1896.   .dialogContainer .focuscontainer.actionsheet-not-fullscreen.actionSheet.centeredDialog {
  1897.       padding-top: 5.5px;
  1898.   }
  1899.   */
  1900.  
  1901.   .formDialogContent.smoothScrollY {
  1902.       padding-bottom: 3em;
  1903.       padding-top: 2em;
  1904.   }
  1905.  
  1906.   /* fixes for right click menus post 10.9.x */
  1907.   [dir="ltr"] .listItem {
  1908.       padding: 0.55em .45em .55em .45em;
  1909.       text-align: left;
  1910.   }
  1911.  
  1912.   /* recolors icons in Settings > Activities, Notifications and Scheduled Tasks*/
  1913.   #dashboardPage .listItemIcon, #serverActivityPage .listItemIcon {
  1914.     background-color: rgba(var(--accent-off)) !important;
  1915.     color: rgba(var(--darkest)) !important;
  1916.   }
  1917.  
  1918.   .listItemIcon.material-icons.notifications_active {
  1919.     background-color: rgba(var(--accent-off)) !important;
  1920.     color: rgba(var(--darkest)) !important;
  1921.   }
  1922.   .notifications_off {
  1923.     background-color: rgba(var(--accent-off),.44) !important;
  1924.     color: rgba(var(--darkest)) !important;
  1925.   }
  1926.  
  1927.   .material-icons.listItemIcon.schedule {
  1928.     background-color: rgba(var(--accent-off)) !important;
  1929.     color: rgba(var(--darkest)) !important;
  1930.   }
  1931.  
  1932.   #dashboardPage .notification_important {
  1933.     background-color: rgba(var(--cherry-red),.75) !important;
  1934.     color: rgba(var(--darkest)) !important;
  1935.   }
  1936.  
  1937.  
  1938.  
  1939.  
  1940.   /* fields no border */
  1941.  
  1942.  
  1943.  
  1944.   /*No borders, background highlights*/
  1945.   .infoBanner {
  1946.       background: rgba(var(--accent), 0.15) !important;
  1947.   }
  1948.   fieldset {
  1949.       border: 1px solid rgba(var(--accent), 0.3);
  1950.   }
  1951.  
  1952.   .emby-input,
  1953.   .emby-textarea,
  1954.   .emby-select-withcolor {
  1955.     border: none !important;
  1956.     background-color: rgba(var(--darkest));
  1957.   }
  1958.  
  1959.   .checkboxOutline {
  1960.     border: 0.22em solid rgba(var(--accent-off)) !important;
  1961.  
  1962.   }
  1963.  
  1964.   #itemDetailPage .emby-select-withcolor {
  1965.     background: rgba(0, 0, 0, 0.2);
  1966.   }
  1967.  
  1968.   /*Change look of in-focus fields: text areas and selection panels */
  1969.    .itemSelectionPanel {
  1970.       border: 0.01em solid rgba(var(--accent)) !important;
  1971.       background-color: rgba(var(--accent),.2) !important;
  1972.       padding: 0.5em;
  1973.   }
  1974.  
  1975.   .itemSelectionCount {
  1976.     color: rgba(var(--darkest)) !important;
  1977.   }
  1978.  
  1979.   .emby-textarea {
  1980.       background-color: rgba(var(--darkest)) !important;
  1981.       color: rgba(var(--accent)) !important;
  1982.   }
  1983.  
  1984.   .emby-textarea:focus {
  1985.       border-color: rgba(var(--accent),.9) !important;
  1986.       background-color: rgba(var(--darkest)) !important;
  1987.   }
  1988.  
  1989.   .emby-input:focus {
  1990.       border-color: rgba(var(--accent),.9) !important;
  1991.       background-color: rgba(var(--darkest)) !important;
  1992.   }
  1993.  
  1994.  
  1995.   .emby-select-withcolor:focus {
  1996.       border-color: rgba(var(--accent),.9) !important;
  1997.       background-color: rgba(var(--darkest)) !important;
  1998.   }
  1999.  
  2000.   .emby-select-withcolor {
  2001.       background-color: rgba(var(--darkest)) !important;
  2002.       color: white;
  2003.   }
  2004.  
  2005.   .emby-input {
  2006.     background-color: rgba(var(--darkest)) !important;
  2007.       color: white;
  2008.   }
  2009.  
  2010.   .checkboxIcon {
  2011.       color: rgba(var(--dark)) !important;
  2012.       font-size: 1.4em;
  2013.       margin-right: 1px;
  2014.       margin-top: 2px;
  2015.   }
  2016.  
  2017.   /* increases size of check boxes */
  2018.   .checkboxList > .emby-checkbox-label {
  2019.       display: flex;
  2020.       margin: 0.5em 0.5em 0.4em 0.4em;
  2021.       font-size: 120%;
  2022.   }
  2023.  
  2024.   .emby-checkbox-label {
  2025.     padding: 0 0 0 3em;
  2026.   }
  2027.  
  2028.   /* padding to fields */
  2029.  
  2030.   .emby-input,
  2031.   .emby-textarea,
  2032.   .emby-select {
  2033.      
  2034.     padding: calc(0.8em - 4.5px) !important;
  2035.   }
  2036.  
  2037.   /* align labels with fields in track selection */
  2038.   .trackSelections .selectContainer .selectLabel {
  2039.     padding-top: calc(calc(0.8em - 4.5px)/2) !important;
  2040.   }
  2041.  
  2042.   /* fixes audio/subtitle selector arrow in media page */
  2043.   .trackSelections .selectContainer .selectArrowContainer .selectArrow {
  2044.       margin-top: 4px;
  2045.   }
  2046.  
  2047.   /* Removes hover bg from right headerbar */
  2048.  
  2049.   .headerRight .paper-icon-button-light:hover, .headerRight .paper-icon-button-light:hover:not(:disabled) {
  2050.     background-color: transparent !important;
  2051.   }
  2052.  
  2053.   .headerRight .paper-icon-button-light:focus, .headerRight .paper-icon-button-light:focus:not(:disabled) {
  2054.     background-color: transparent !important;
  2055.   }
  2056.  
  2057.   /* Fix profile pic in top right headerbar */
  2058.   .headerUserButton {
  2059.     margin-right: 0.14em;
  2060.   }
  2061.  
  2062.  
  2063.   /* Mobile fixes */
  2064.   .layout-mobile .headroom--unpinned {
  2065.       transform: translateY(-50%);
  2066.   }
  2067.  
  2068.  
  2069.   /* AppleTV-esque bar */
  2070.  
  2071.  
  2072.   /* Transparent header bar */
  2073.   .skinHeader {
  2074.       background-color: transparent !important;
  2075.   }
  2076.   .layout-desktop .skinHeader {
  2077.       padding-top: 1.5em !important;
  2078.       padding-bottom: 1.5em !important;
  2079.   }
  2080.  
  2081.   /* Button height */
  2082.   .headerRight,
  2083.   .layout-desktop .emby-tab-button {
  2084.       height: 45px !important;
  2085.   }
  2086.  
  2087.   /* fixes issue with text no being centered */
  2088.   .emby-tab-button {
  2089.     display: inline-flex;
  2090.   }
  2091.  
  2092.   /* Rounded header buttons */
  2093.  
  2094.   .headerTabs,
  2095.   .headerRight {
  2096.       background-color:rgba(var(--white-off), 0.35) !important;
  2097.       border-radius: var(--rounding-circle) !important;
  2098.       color: rgba(var(--darkest)) !important;
  2099.       backdrop-filter: blur(50px) !important;
  2100.   }
  2101.  
  2102.   .homeLibraryText, .emby-button-foreground {
  2103.       color: rgb(var(--darkest));
  2104.   }
  2105.  
  2106.   #indexPage .homeLibraryButton, .emby-tab-button {
  2107.       background: transparent !important;
  2108.       min-width: 0 !important;
  2109.       max-width: 50vw !important;
  2110.     width: fit-content !important;
  2111.   }
  2112.  
  2113.   .layout-desktop .itemsContainer, .layout-desktop .emby-tabs-slider {
  2114.       margin: 0 !important;
  2115.   }
  2116.  
  2117.   .layout-desktop .homeLibraryButton, .layout-desktop .emby-tab-button {
  2118.       margin: .5em !important;
  2119.   }
  2120.  
  2121.   .raised:hover .homeLibraryText, .emby-tab-button:hover .emby-button-foreground {
  2122.       color: rgb(var(--darkest)) !important;
  2123.       transition: 100ms;
  2124.   }
  2125.  
  2126.   #indexPage .homeLibraryButton:hover, .emby-tab-button:hover {
  2127.       background-color: rgba(var(--accent),.5) !important;
  2128.       border-radius: var(--rounding-circle) !important;
  2129.   }
  2130.  
  2131.   .raised.homeLibraryButton.emby-button:hover, .emby-tab-button:hover, .homeLibraryButton:focus {
  2132.       outline: none !important;
  2133.       box-shadow: none !important;
  2134.   }
  2135.  
  2136.   .emby-tab-button:hover::after {
  2137.     background: unset !important;
  2138.   }
  2139.  
  2140.   .emby-tab-button-active {
  2141.     background-color: rgb(var(--accent)) !important;
  2142.     border-radius: var(--rounding-circle) !important;
  2143.   }
  2144.  
  2145.  
  2146.   /* fix for Media (small) cards in home screen */
  2147.   #homeTab .homeLibraryButton {
  2148.       background: rgba(var(--accent),.4) !important;
  2149.   }
  2150.   #homeTab .homeLibraryButton:hover {
  2151.       background: rgba(var(--accent),.6) !important;
  2152.       color: rgba(var(--darkest),1) !important;
  2153.       border-radius: var(--rounding) !important;
  2154.   }
  2155.   #homeTab .homeLibraryIcon {
  2156.     margin-left: 0em;
  2157.   }
  2158.  
  2159.  
  2160.   .cardOverlayButtonIcon {
  2161.     color: rgb(var(--accent));
  2162.   }
  2163.  
  2164.   .cardOverlayFab-primary {
  2165.     background-color: #00000000;
  2166.   }
  2167.   .cardOverlayContainer > .cardOverlayFab-primary {
  2168.       background-color: transparent;
  2169.   }
  2170.  
  2171.  
  2172.   .cardOverlayContainer .paper-icon-button-light:hover,
  2173.   .cardOverlayContainer .paper-icon-button-light:hover:not(:disabled) {
  2174.     color: rgba(var(--dark)) !important;
  2175.   }
  2176.  
  2177.   /* hides card overlay buttons (watched, favorites, etc) */
  2178.   .cardOverlayButton-br {
  2179.       display: none;
  2180.   }
  2181.  
  2182.   /* replaces Jellyfin logo */
  2183.   .adminDrawerLogo img { content: url(https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/images/logo/jellyfin-logo-light.png) !important; } imgLogoIcon { content: url(https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/images/logo/jellyfin-logo-light.png) !important; } .pageTitleWithLogo { background-image: url(https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/images/logo/jellyfin-logo-light.png) !important; } /* imgur link https://i.imgur.com/wHaGTm4.png */
  2184.  
  2185.  
  2186.   /* Support for Jellyscrub plugin */
  2187.  
  2188.   .chapterThumbTextContainer {
  2189.       background: rgba(var(--dark),0.5) !important;
  2190.   }
  2191.  
  2192.   /* fixes issue with Movies > Genres hover boxes */
  2193.   .sectionTitleTextButton > .sectionTitle {
  2194.       margin-bottom: .35em;
  2195.       margin-top: .35em;
  2196.       margin-left: .6em;
  2197.       margin-right: .6em;
  2198.   }
  2199.  
  2200.   .sectionTitleTextButton > .material-icons.chevron_right {
  2201.     display: none;
  2202.   }
  2203.  
  2204.   /* centers section title button's text in home page caused by the above */
  2205.   .homePage .sectionTitleTextButton {
  2206.     left: -.6em;
  2207.   }
  2208.  
  2209.   /* Playback info tweaks */
  2210.   .playerStats {
  2211.       background: rgba(var(--dark),0.75);
  2212.       border-radius: var(--rounding);
  2213.       color: rgba(var(--accent),1);
  2214.       backdrop-filter: blur(7px);
  2215.       top: 8em;
  2216.   }
  2217.  
  2218.   .playerStats-stat-value {
  2219.       color: rgba(var(--accent),.65);
  2220.   }
  2221.  
  2222.   .playerStats-closeButton {
  2223.       color: rgb(var(--accent));
  2224.       position: absolute;
  2225.       right: .25em;
  2226.       top: 0.4em;
  2227.       z-index: 1;
  2228.   }
  2229.  
  2230.   .playerStats-stats {
  2231.       padding: 1.8em 2.7em 2.6em 2.4em;
  2232.       font-size: 110%;
  2233.   }
  2234.  
  2235.  
  2236.   #childrenCollapsible .padded-right {
  2237.       padding-right: 38%;
  2238.   }
  2239.  
  2240.   /* Moves TV shows Up Next to bottom right */
  2241.   .layout-desktop .nextUpSection {
  2242.       border-radius: 34px;
  2243.       left: calc(70vw - 0.5em);
  2244.       margin-right: -30vw;
  2245.       margin-top: 25vh;
  2246.       margin-bottom: 1vh;
  2247.       padding-left: 2.62em;
  2248.       margin-right: 5vw;
  2249.       background-color: rgba(var(--darkest),.77);
  2250.       padding-top: .3em;
  2251.       backdrop-filter: blur(10px);
  2252.       position: absolute;
  2253.       /* margin-left: 1.5vw; */
  2254.   }
  2255.  
  2256.   .cardBox-bottompadded {
  2257.       margin-bottom: 1.5em !important;
  2258.   }
  2259.  
  2260.   .cardText.cardTextCentered.cardText-first .itemAction.textActionButton{
  2261.       margin-top: 0.8em;
  2262.   }
  2263.  
  2264.   .layout-desktop .nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata {
  2265.       right: 0.7em;
  2266.       position: relative;
  2267.   }
  2268.  
  2269.   .layout-desktop .nextUpSection .cardBox-bottompadded {
  2270.       margin-bottom: 1.3em !important;
  2271.   }
  2272.  
  2273.  
  2274.  
  2275.  
  2276.   /*#####################################################################################################################
  2277.               LAYOUT MOBILE
  2278.  
  2279.   ######################################################################################################################*/
  2280.  
  2281.   .layout-mobile .headerHomeButton,
  2282.   /* .layout-mobile .headerCastButton, */
  2283.   .layout-mobile .headerSyncButton {
  2284.     display: none;
  2285.   }
  2286.  
  2287.   .layout-mobile .mainDrawerButton {
  2288.     display: block !important;
  2289.   }
  2290.  
  2291.   .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
  2292.     background: none;
  2293.     background-color: rgba(10, 80, 160, 0.75);
  2294.   }
  2295.  
  2296.   .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
  2297.     background: none;
  2298.     background-color: rgba(190, 80, 10, 0);
  2299.   }
  2300.  
  2301.   .layout-mobile .headerLeft .paper-icon-button-light > .material-icons {
  2302.     filter: drop-shadow(2px 2px 1.6px rgb(var(--darkest)));
  2303.   }
  2304.  
  2305.   .layout-mobile .emby-button-foreground {
  2306.     top: 0px !important;
  2307.   }
  2308.  
  2309.  
  2310.   .layout-mobile .sectionTabs {
  2311.       padding-left: 0.4em !important;
  2312.       padding-right: 0.4em !important;
  2313.       width: auto;
  2314.       align-self: center;
  2315.   }
  2316.  
  2317.   .pageTitle {
  2318.     margin-top: auto;
  2319.     margin-bottom: auto;
  2320.   }
  2321.  
  2322.   .layout-mobile .emby-tab-button {
  2323.       padding: 0.9em 0.95em;
  2324.       margin-top: 0.4em;
  2325.       margin-bottom: 0.4em;
  2326.   }
  2327.  
  2328.  
  2329.   /* Seccion Peliculas/Series */
  2330.  
  2331.   .layout-mobile .itemTags,
  2332.   .layout-mobile .itemName.originalTitle,
  2333.   .layout-mobile .itemExternalLinks,
  2334.   .layout-mobile .writersGroup,
  2335.   .layout-mobile .studiosGroup,
  2336.   #seriesAirTime {
  2337.     display: none;
  2338.   }
  2339.  
  2340.   /* Quitamos imagen de poster */
  2341.   .layout-mobile .detailImageContainer .card,
  2342.   .layout-mobile .detailImageContainer .card.backdropCard,
  2343.   .layout-mobile .detailImageContainer .card.portraitCard,
  2344.   .layout-mobile .detailImageContainer .card.squareCard {
  2345.     top: auto;
  2346.     display: none !important;
  2347.   }
  2348.  
  2349.   .layout-mobile .detailImageContainer .card.portraitCard {
  2350.     display: none !important;
  2351.   }
  2352.  
  2353.   /* Mostrando Logo y posicionandolo */
  2354.   .layout-mobile .detailLogo {
  2355.     display: block;
  2356.     width: 15em;
  2357.     left: 4%;
  2358.     top: 45vw;
  2359.   }
  2360.  
  2361.   /* Mismo color de fondo a franja gris */
  2362.   .detailRibbon {
  2363.     background: rgba(32, 32, 32, 0);  /* hardcoded */
  2364.   }
  2365.  
  2366.   /* Sipnosis tamano de 5 lineas */
  2367.   .detail-clamp-text {
  2368.     -webkit-line-clamp: 4;
  2369.   }
  2370.  
  2371.  
  2372.   .layout-mobile .infoWrapper {
  2373.     padding-left: 0;
  2374.     margin-top: 6em;
  2375.   }
  2376.  
  2377.   .layout-mobile .itemMiscInfo,
  2378.   .layout-mobile .itemName,
  2379.   .layout-mobile .mainDetailButtons,
  2380.   .layout-mobile .parentName {
  2381.     text-align: left;
  2382.   }
  2383.  
  2384.   .layout-mobile .itemMiscInfo,
  2385.   .layout-mobile .itemName,
  2386.   .layout-mobile .mainDetailButtons,
  2387.   .layout-mobile .parentName {
  2388.     justify-content: left;
  2389.     text-align: left;
  2390.   }
  2391.  
  2392.  
  2393.   /* moviendo a la Izq Contenedor de botones de pelicula*/
  2394.   .layout-mobile .mainDetailButtons {
  2395.     padding-left: 0;
  2396.   }
  2397.  
  2398.   /* arregalndo padding y margin y aumentando tamano de fanart y agregando degradado */
  2399.   .layout-mobile .itemBackdrop {
  2400.     background-size: contain;
  2401.     height: 61.5vw;
  2402.   }
  2403.  
  2404.  
  2405.  
  2406.  
  2407.   .layout-mobile .detailPageWrapperContainer {
  2408.     top: -5em;
  2409.   }
  2410.  
  2411.   .layout-mobile .infoWrapper {
  2412.     margin-top: 0;
  2413.   }
  2414.  
  2415.   .layout-mobile .detailPageSecondaryContainer {
  2416.     margin: 0 0 0em 0;
  2417.     padding-top: 0.5em;
  2418.   }
  2419.  
  2420.   .layout-mobile .overview-expand {
  2421.     padding: 0 1em 0.3em 1em;
  2422.   }
  2423.  
  2424.   /* play button */
  2425.   .layout-mobile .mainDetailButtons {
  2426.     margin-top: 1.5em;
  2427.   }
  2428.  
  2429.   .layout-mobile .btnPlay {
  2430.       background-color: rgb(var(--white));
  2431.       color: rgb(var(--darkest)) !important;
  2432.       margin-right: 2.7em !important;
  2433.       border-radius: 14px !important;
  2434.   }
  2435.  
  2436.   .layout-mobile .libraryPage .btnPlay {
  2437.       margin-right: 1em !important;
  2438.   }
  2439.  
  2440.  
  2441.   .layout-mobile .btnPlay::after {
  2442.     content: attr(title);
  2443.     margin: 0 10px 0 2px;
  2444.   }
  2445.  
  2446.   .layout-mobile .btnPlay.detailButton {
  2447.     flex-direction: row;
  2448.   }
  2449.  
  2450.   .layout-mobile .mainAnimatedPages .paging {
  2451.     margin-right: .5em !important;
  2452.   }
  2453.  
  2454.   .layout-mobile .sectionTitleTextButton > .sectionTitle {
  2455.       margin-bottom: .35em !important;
  2456.       margin-top: -.15em !important;
  2457.       margin-left: .6em !important;
  2458.       margin-right: .6em !important;
  2459.   }
  2460.  
  2461.   .layout-mobile .btnShuffle,
  2462.   .layout-desktop .btnShuffle {
  2463.     display: none;
  2464.   }
  2465.  
  2466.   .layout-mobile .material-icons.detailButton-icon.play_arrow {
  2467.     color: rgb(var(--darkest)) !important;
  2468.   }
  2469.  
  2470.   .layout-mobile .listViewUserDataButtons {
  2471.     display: none;
  2472.   }
  2473.  
  2474.   .layout-mobile .listItem-content {
  2475.     display: block;
  2476.   }
  2477.  
  2478.   /* fixes placement of episodes titles */
  2479.   .layout-mobile .listItem-content .listItemBody {
  2480.       left: 110px;
  2481.       position: relative;
  2482.       bottom: 88px;
  2483.       max-width: 64%;
  2484.   }
  2485.  
  2486.   .layout-mobile .listItem-bottomoverview {
  2487.     font-size: 100%;
  2488.     margin-bottom: .1em;
  2489.     margin-top: 0.5em;
  2490.   }
  2491.  
  2492.  
  2493.   #childrenContent .listItem {
  2494.       padding-left: 1em !important;
  2495.       padding-right: 1em !important;
  2496.       padding-top: 1em !important;
  2497.       padding-bottom: 1em !important;
  2498.       border-radius: 24px !important;
  2499.   }
  2500.  
  2501.   .layout-mobile .listItem-content .listItemImage-large {
  2502.     height: 30vw;
  2503.     width: 86vw;
  2504.   }
  2505.  
  2506.   .layout-mobile .listItem-content .listItemImage-large .listItemImageButton,
  2507.   .listItemIndicators {
  2508.     font-size: 1em !important;
  2509.   }
  2510.  
  2511.  
  2512.  
  2513.   .layout-mobile .detailPagePrimaryContent {
  2514.     position: relative;
  2515.     /* margin-top: 1em; */
  2516.   }
  2517.  
  2518.   .layout-mobile .detailPagePrimaryContainer {
  2519.       display: block;
  2520.     padding: 1.5rem 1.15rem 1rem;
  2521.       position: relative;
  2522.   }
  2523.  
  2524.   /* Animation of disappearing headerbars in mobile layout */
  2525.   .layout-mobile .headroom--unpinned {
  2526.    transform: translateY(-115%);
  2527.    transition: transform 0.3s ease-in-out;
  2528.   }
  2529.  
  2530.   .headroom--pinned {
  2531.    transition: transform 0.3s ease-in-out;
  2532.   }
  2533.  
  2534.   .listItemImageButton {
  2535.     color: rgb(var(--accent));
  2536.     background: rgba(0, 0, 0, 0);
  2537.   }
  2538.  
  2539.  .layout-mobile .headerRight {
  2540.       height: 40px !important;
  2541.       filter: drop-shadow(3px 2px 3px rgba(var(--darkest),.35));
  2542.   }
  2543.  
  2544.   /* adds padding to custom css box */
  2545.   #txtCustomCss {
  2546.     padding: 1em !important;
  2547.   }
  2548.  
  2549.   /* changes color of library scan percentage */
  2550.   #divRunningTasks > p:nth-child(odd) > span:nth-child(3){
  2551.     color: rgba(var(--accent),1) !important;
  2552.   }
  2553.  
  2554.   #divRunningTasks > p:nth-child(even) > span:nth-child(3){
  2555.     color: rgba(var(--accent),1) !important;
  2556.   }
  2557.  
  2558.   /* fixes elector arrow's wrong placement */
  2559.   .selectArrow {
  2560.       margin-top: 1.1em;
  2561.   }
  2562.  
  2563.  
  2564.   /* tweaks playback chapter thumbs */
  2565.  
  2566.   .chapterThumbTextContainer {
  2567.       background-color: rgba(var(--dark),.7) !important;
  2568.       width: 50%;
  2569.       margin: 0 auto;
  2570.       position: absolute;
  2571.       margin-bottom: 7px;
  2572.       border-radius: 5.5px !important;
  2573.       margin-left: 7px;
  2574.       padding-left: 8px;
  2575.       padding-right: 8px;
  2576.       padding-top: 5px;
  2577.     padding-bottom: 2px;
  2578.   }
  2579.  
  2580.   .sliderBubble {
  2581.   background-color: transparent;
  2582.   }
  2583.  
  2584.   .chapterThumbContainer,
  2585.   .chapterThumb {
  2586.   background-color: transparent !important;
  2587.   margin-bottom: -5px;
  2588.   }
  2589.  
  2590.   .chapterThumbText {
  2591.     color: rgba(var(--accent),.8) !important;
  2592.   }
  2593.  
  2594.   .chapterThumbText-dim {
  2595.       color: rgba(var(--accent),.7) !important;
  2596.       opacity: 1;
  2597.   }
  2598.  
  2599.   @media (max-width: 32em) {
  2600.     .layout-mobile .detailImageContainer .card {
  2601.         display: none;
  2602.     }
  2603.   }
  2604.  
  2605.   .layout-mobile [dir="ltr"] .infoWrapper {
  2606.     padding-left: 0% !important;
  2607.     padding-top: 5% !important;
  2608.   }
  2609.  
  2610.   .layout-mobile .detailImageContainer .card, .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard {
  2611.       top: auto;
  2612.       display: none;
  2613.   }
  2614.  
  2615.   .detailImageContainer .card .cardBox {
  2616.       margin: 0;
  2617.       display: none;
  2618.   }
  2619.  
  2620.   .layout-mobile .mainDrawer {
  2621.       width: 315px !important;
  2622.   }
  2623.  
  2624.  
  2625.  
  2626.   /* Makes posters larger in the Library view and Home screen */
  2627.   @media (min-width: 31.25em) {
  2628.   .layout-desktop  .portraitCard, .layout-desktop .smallBackdropCard, .layout-desktop .squareCard {
  2629.         width: 33.3333333333%;
  2630.     }
  2631.   }
  2632.  
  2633.   @media (min-width: 43.75em) {
  2634.   .layout-desktop  .portraitCard, .layout-desktop .squareCard {
  2635.         width: 25%;
  2636.     }
  2637.   }
  2638.  
  2639.   @media (min-width: 50em) {
  2640.   .layout-desktop  .portraitCard, .layout-desktop .squareCard {
  2641.         width: 20%;
  2642.     }
  2643.   .layout-desktop  .overflowPortraitCard, .layout-desktop .overflowSquareCard {
  2644.         width: 15vw;
  2645.     }
  2646.   }
  2647.  
  2648.   @media (min-width: 75em) {
  2649.   .layout-desktop .portraitCard, .layout-desktop .squareCard {
  2650.         width: 16.6666666667%;
  2651.     }
  2652.   .layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
  2653.         width: 14.4vw;
  2654.     }
  2655.   }
  2656.  
  2657.   @media (min-width: 87.5em) {
  2658.   .layout-desktop .portraitCard, .layout-desktop .smallBackdropCard, .layout-desktop .squareCard {
  2659.         width: 14%;
  2660.     }
  2661.   .layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
  2662.         width: 13.3vw;
  2663.     }
  2664.   }
  2665.  
  2666.   @media (min-width: 100em) {
  2667.   .layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
  2668.         width: 11.8vw;
  2669.     }
  2670.   }
  2671.  
  2672.   @media (min-width: 120em) {
  2673.   .layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
  2674.         width: 11.41vw;
  2675.     }
  2676.   }
  2677.  
  2678.   .layout-mobile .itemBackdrop {
  2679.       position: relative;
  2680.       background-size: cover;
  2681.       height: 40vh;
  2682.       margin-top: 0;
  2683.       -webkit-mask-image: linear-gradient(to top, rgba(var(--dark-apparent),0) 2%, rgba(var(--dark-apparent),0.08) 11%, rgba(var(--dark-apparent),0.25) 20%, rgba(var(--dark-apparent),0.45) 28%, rgba(var(--dark-apparent),0.6) 33%, rgba(var(--dark-apparent),1) 48%);
  2684.       mask-image: linear-gradient(to top, rgba(var(--dark-apparent),0) 2%, rgba(var(--dark-apparent),0.08) 11%, rgba(var(--dark-apparent),0.25) 20%, rgba(var(--dark-apparent),0.45) 28%, rgba(var(--dark-apparent),0.6) 33%, rgba(var(--dark-apparent),1) 48%);
  2685.       background-position: 70%;
  2686.   }
  2687.  
  2688.   /* Phone & Tablet breakpoints */
  2689.  
  2690.  
  2691.   @media (min-width: 40em) and (orientation: landscape) {
  2692.     .layout-mobile .itemBackdrop {
  2693.       height: 80vh;
  2694.       background-position: 0%;
  2695.       mask-image: linear-gradient(to right, transparent, black),
  2696.         linear-gradient(to top, transparent, black);
  2697.       -webkit-mask-image: linear-gradient(to right, transparent, black),
  2698.         linear-gradient(to top, transparent, black);
  2699.       mask-composite: source-in;
  2700.       -webkit-mask-composite: source-in;
  2701.       mask-composite: intersect;
  2702.     }
  2703.     /* text layout - from Zombie */
  2704.     .layout-mobile .btnShuffle,
  2705.     .layout-mobile .listViewUserDataButtons,
  2706.     .layout-mobile .material-icons.detailButton-icon.check,
  2707.     .layout-mobile .material-icons.detailButton-icon.favorite,
  2708.     .layout-mobile .material-icons.detailButton-icon.more_vert,
  2709.     .layout-mobile .material-icons.detailButton-icon.replay,
  2710.     .layout-mobile .material-icons.detailButton-icon.theaters {
  2711.       display: none;
  2712.     }
  2713.     .layout-mobile .btnMoreCommands::after,
  2714.     .layout-mobile .btnPlay::after,
  2715.     .layout-mobile .btnPlayTrailer::after,
  2716.     .layout-mobile .btnPlaystate::after,
  2717.     .layout-mobile .btnReplay::after,
  2718.     .layout-mobile .btnUserRating::after,
  2719.     .layout-mobile .btntheaters::after {
  2720.       content: attr(title);
  2721.     }
  2722.     .layout-mobile .btnPlay.detailButton {
  2723.       position: absolute;
  2724.       left: 2em;
  2725.     }
  2726.     .layout-mobile .mainDetailButtons {
  2727.       justify-content: left;
  2728.     }
  2729.     .layout-mobile [dir=ltr] .mainDetailButtons {
  2730.       padding-left: 10em;
  2731.     }    
  2732.     .layout-mobile .itemName.parentNameLast {
  2733.       margin: -5em 0px 0em;
  2734.       height: 7em;
  2735.     }
  2736.     .layout-mobile h1.parentName {
  2737.       margin: -6em 0px 0em !important;
  2738.       padding-bottom: 3em;
  2739.       height: 6em;
  2740.      }
  2741.     .layout-mobile #itemDetailPage .parentName .button-link {
  2742.       height: 7em;  
  2743.       width: 70%;
  2744.     }
  2745.     .layout-mobile .itemName.parentNameLast.withOriginalTitle {
  2746.       margin: -5em 0 0;
  2747.     }
  2748.     .layout-mobile .detailLogo {
  2749.         display: block;
  2750.         width: 71vh;
  2751.         left: 2%;
  2752.         top: 10vh;
  2753.         height: 24vw;
  2754.     }
  2755.     .layout-mobile [dir="ltr"] .infoWrapper {
  2756.       padding-top: 0em !important;
  2757.     }
  2758.     .layout-mobile .detailPagePrimaryContainer {
  2759.       display: block;
  2760.       padding: 0rem 1.15rem 1rem;
  2761.       position: relative;
  2762.     }
  2763.     .layout-mobile .detailPageWrapperContainer {
  2764.       top: -39vh;
  2765.     }
  2766.   }
  2767.  
  2768.   @media (min-width: 50em) and (orientation: landscape) {
  2769.     .layout-mobile .itemBackdrop {
  2770.       height: 123vh;
  2771.     }
  2772.     .layout-mobile .detailLogo {
  2773.         display: block;
  2774.         width: 29em;
  2775.         left: 2%;
  2776.         top: 9vh;
  2777.         height: 58vh;
  2778.     }
  2779.     .layout-mobile [dir="ltr"] .infoWrapper {
  2780.       padding-top: 0em !important;
  2781.     }
  2782.     .layout-mobile .detailPagePrimaryContainer {
  2783.       display: block;
  2784.       padding: 0rem 2rem 1rem;
  2785.       position: relative;
  2786.     }
  2787.     .layout-mobile .detailPageWrapperContainer {
  2788.       top: -16em;
  2789.     }
  2790.     .layout-mobile .btnPlay.detailButton {
  2791.       position: absolute;
  2792.       left: 2em;
  2793.     }
  2794.     .layout-mobile .mainDetailButtons {
  2795.       justify-content: left;
  2796.     }
  2797.     .layout-mobile [dir=ltr] .mainDetailButtons {
  2798.       padding-left: 10em;
  2799.     }    
  2800.     .layout-mobile .itemName.parentNameLast {
  2801.       margin: -5em 0px 0em;
  2802.       height: 7em;
  2803.     }
  2804.     .layout-mobile h1.parentName {
  2805.       margin: -8em 0px 0em !important;
  2806.       padding-bottom: 3em;
  2807.       height: 8em;
  2808.      }
  2809.     .layout-mobile #itemDetailPage .parentName .button-link {
  2810.       height: 7em;  
  2811.       width: 60%;
  2812.     }
  2813.     .layout-mobile .itemName.parentNameLast.withOriginalTitle {
  2814.       margin: -5em 0 0;
  2815.     }
  2816.     .layout-mobile .overflowBackdropCard, .layout-mobile .overflowSmallBackdropCard {
  2817.       width: 34.1vw;
  2818.     }
  2819.   }
  2820.  
  2821.  
  2822.   @media (min-width: 60em) and (orientation: landscape) {
  2823.     .layout-mobile .itemBackdrop {
  2824.       height: 80vh;
  2825.   }
  2826.     .layout-mobile .detailLogo {
  2827.         display: block;
  2828.         width: 34em;
  2829.         left: 2%;
  2830.         top: 7vw;
  2831.         height: 30vh;
  2832.     }
  2833.     .layout-mobile [dir="ltr"] .infoWrapper {
  2834.       padding-top: 0em !important;
  2835.     }
  2836.     .layout-mobile .detailPagePrimaryContainer {
  2837.       display: block;
  2838.       padding: 0rem 1.75rem 1rem;
  2839.       position: relative;
  2840.     }
  2841.     .layout-mobile .detailPageWrapperContainer {
  2842.       top: -20em;
  2843.       position: relative;
  2844.     }
  2845.     .layout-mobile [dir=ltr] .mainDetailButtons {
  2846.         padding-left: 12em;
  2847.     }
  2848.     .layout-mobile .itemName.parentNameLast {
  2849.       margin: -5em 0px 0em;
  2850.       height: 6em;
  2851.     }
  2852.     .layout-mobile h1.parentName {
  2853.       margin: -11em 0px 0em !important;
  2854.       padding-bottom: 4em;
  2855.       height: 8em;
  2856.     }
  2857.     .layout-mobile .listItem-content {
  2858.       height: 160px;
  2859.     }
  2860.     .listItemImage.listItemImage-large.itemAction.lazy {
  2861.         height: 160px;
  2862.         width: 285px;
  2863.     }
  2864.     .layout-mobile .listItem-content .listItemBody {
  2865.       left: 298px;
  2866.       position: relative;
  2867.       bottom: 161px;
  2868.       max-width: 64%;
  2869.     }
  2870.     .secondary.listItem-overview.listItemBodyText {
  2871.       height: 6.5em;
  2872.       margin: 0;
  2873.     }
  2874.     .layout-mobile .itemName.parentNameLast.withOriginalTitle {
  2875.       margin: -5em 0 0;
  2876.     }
  2877.   }
  2878.  
  2879.   @media (min-width: 75em) and (orientation: landscape) {
  2880.     .layout-mobile .itemBackdrop {
  2881.       height: 75vh;
  2882.   }
  2883.    
  2884.     .layout-mobile .detailLogo {
  2885.         width: 42em;
  2886.     }
  2887.    
  2888.     .layout-mobile .detailPageWrapperContainer {
  2889.       top: -22em;
  2890.       position: relative;
  2891.     }
  2892.    
  2893.     .layout-mobile .itemName.parentNameLast {
  2894.         margin: 0 0 .4em;
  2895.     }
  2896.    
  2897.     .layout-mobile [dir=ltr] .mainDetailButtons {
  2898.       padding-left: 12.5em;
  2899.     }
  2900.     .layout-mobile .detailLogo {
  2901.       display: block;
  2902.       width: 49em;
  2903.       left: 2%;
  2904.       top: 7vw;
  2905.       height: 34vh;
  2906.     }
  2907.     .layout-mobile h1.parentName {
  2908.       margin: -13em 0px 0em !important;
  2909.       padding-bottom: 3em;
  2910.       height: 11em;
  2911.     }
  2912.     .layout-mobile .itemName.parentNameLast {
  2913.       height: 1em;
  2914.     }
  2915.     .layout-mobile #itemDetailPage .parentName .button-link {
  2916.       height: 12em;
  2917.       width: 65%;
  2918.     }
  2919.     .layout-mobile .listItem-content .listItemBody {
  2920.       left: 298px;
  2921.       position: relative;
  2922.       bottom: 161px;
  2923.       max-width: 69%;
  2924.     }
  2925.   }
  2926.  
  2927.  
  2928.   @media (min-width: 15em) and (orientation: portrait) {
  2929.     .layout-mobile .itemBackdrop {
  2930.       height: 33vh;
  2931.     }
  2932.     .layout-mobile .mainDrawer {
  2933.       width: 280px !important;
  2934.     }
  2935.     .layout-mobile .infoWrapper .itemMiscInfo-primary{
  2936.       font-size: 93%;
  2937.     }
  2938.     .layout-mobile .libraryPage .btnPlay {
  2939.       margin-right: 0.5em !important;
  2940.     }
  2941.     .layout-mobile .detailPageWrapperContainer {
  2942.         top: -5em;
  2943.     }
  2944.     .layout-mobile .detailLogo {
  2945.       display: block;
  2946.       width: 19em;
  2947.       left: 3%;
  2948.       top: 39vw;
  2949.     }
  2950.     .layout-mobile h1.parentName {
  2951.       margin: -4em 0px 0em;
  2952.     }
  2953.     .layout-mobile #itemDetailPage .parentName .button-link {
  2954.       height: 6em;
  2955.       width: 85%;
  2956.     }
  2957.     .layout-mobile [dir=ltr] .mainDetailButtons {
  2958.       margin-bottom: 0;
  2959.       padding-left: 7.8em;
  2960.     }
  2961.     .layout-mobile .btnPlay.detailButton {
  2962.       position: absolute;
  2963.       left: 0.6em;
  2964.     }
  2965.     .layout-mobile .mainDetailButtons {
  2966.       justify-content: space-evenly;
  2967.     }
  2968.     .layout-mobile .emby-select {
  2969.       width: 245px;
  2970.     }
  2971.     .layout-mobile .selectContainer{
  2972.       width: 315px !important;
  2973.     }
  2974.   }
  2975.  
  2976.   @media (min-width: 23em) and (orientation: portrait) {
  2977.     .layout-mobile .itemBackdrop {
  2978.       height: 40vh;
  2979.     }
  2980.     .layout-mobile .mainDrawer {
  2981.       width: 315px !important;
  2982.     }
  2983.       .layout-mobile .infoWrapper .itemMiscInfo-primary{
  2984.       font-size: 100%;
  2985.     }
  2986.     .layout-mobile .libraryPage .btnPlay {
  2987.       margin-right: 1em !important;
  2988.     }
  2989.     .layout-mobile .detailPageWrapperContainer {
  2990.         top: -5em;
  2991.     }
  2992.     .layout-mobile .detailLogo {
  2993.       display: block;
  2994.       width: 18.5em;
  2995.       left: 3%;
  2996.       top: 54vw;
  2997.     }
  2998.     .layout-mobile .itemName.parentNameLast {
  2999.       margin: -3em 0px 0em;
  3000.       height: 5em;
  3001.     }
  3002.     .layout-mobile h1.parentName {
  3003.       margin: -3em 0px 0em !important;
  3004.       padding-bottom: 0;
  3005.       height: 5em;
  3006.      }
  3007.     .layout-mobile #itemDetailPage .parentName .button-link {
  3008.       height: 5em;  
  3009.       width: 80%;
  3010.     }
  3011.     .layout-mobile .itemName.parentNameLast.withOriginalTitle {
  3012.       margin: -3em 0 0;
  3013.     }
  3014.     .layout-mobile .detailPagePrimaryContainer {
  3015.       padding: 1.5rem 0rem 1rem;
  3016.     }
  3017.     .layout-mobile .infoWrapper .itemMiscInfo-primary, .layout-mobile .itemName {
  3018.       padding: 0em 1.15em 0em;
  3019.     }
  3020.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3021.       margin-bottom: 0;
  3022.       padding-left: 9.5em;
  3023.     }
  3024.     .layout-mobile .btnPlay.detailButton {
  3025.       position: absolute;
  3026.       left: 1em;
  3027.     }
  3028.   }
  3029.  
  3030.   @media (min-width: 30em) and (orientation: portrait) {
  3031.     .layout-mobile .detailLogo {
  3032.       display: block;
  3033.       width: 20em;
  3034.       left: 3%;
  3035.       top: 10vw;
  3036.     }
  3037.     .layout-mobile .detailPageWrapperContainer {
  3038.       top: -14em;
  3039.       position: relative;
  3040.     }
  3041.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3042.       /* padding-left: 1%; */
  3043.     }
  3044.     .layout-mobile #itemDetailPage .parentName .button-link {
  3045.       height: 5em;
  3046.       width: 65%;
  3047.     }
  3048.   }
  3049.  
  3050.   @media (min-width: 35em) and (orientation: portrait) {
  3051.     .layout-mobile .detailLogo {
  3052.       display: block;
  3053.       width: 24em;
  3054.       left: 4%;
  3055.       top: 10vw;
  3056.     }
  3057.     .layout-mobile .detailPageWrapperContainer {
  3058.       top: -18em;
  3059.       position: relative;
  3060.     }
  3061.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3062.       padding-left: 10em;
  3063.       justify-content: unset;
  3064.     }
  3065.     /* text layout - from Zombie */
  3066.     .layout-mobile .btnShuffle,
  3067.     .layout-mobile .listViewUserDataButtons,
  3068.     .layout-mobile .material-icons.detailButton-icon.check,
  3069.     .layout-mobile .material-icons.detailButton-icon.favorite,
  3070.     .layout-mobile .material-icons.detailButton-icon.more_vert,
  3071.     .layout-mobile .material-icons.detailButton-icon.replay,
  3072.     .layout-mobile .material-icons.detailButton-icon.theaters {
  3073.       display: none;
  3074.     }
  3075.  
  3076.     .layout-mobile .btnMoreCommands::after,
  3077.     .layout-mobile .btnPlay::after,
  3078.     .layout-mobile .btnPlayTrailer::after,
  3079.     .layout-mobile .btnPlaystate::after,
  3080.     .layout-mobile .btnReplay::after,
  3081.     .layout-mobile .btnUserRating::after,
  3082.     .layout-mobile .btntheaters::after {
  3083.       content: attr(title);
  3084.     }
  3085.     .layout-mobile .btnPlay.detailButton {
  3086.       position: absolute;
  3087.       left: 2em;
  3088.     }
  3089.     .layout-mobile h1.parentName {
  3090.       margin: -6em 0px 0em !important;
  3091.       height: 8em;
  3092.     }
  3093.     .layout-mobile #itemDetailPage .parentName .button-link {
  3094.       height: 7em;  
  3095.       width: 60%;
  3096.     }
  3097.   }
  3098.  
  3099.   @media (min-width: 50em) and (orientation: portrait) {
  3100.       .layout-mobile .detailLogo {
  3101.         display: block;
  3102.         width: 30em;
  3103.         left: 3%;
  3104.         top: 7vw;
  3105.     }
  3106.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3107.       padding-left: 10em;
  3108.       justify-content: unset;
  3109.     }
  3110.     .layout-mobile .detailPageWrapperContainer {
  3111.         top: -23em;
  3112.         position: relative;
  3113.     }
  3114.     .layout-mobile .listItem-content {
  3115.       height: 118px;
  3116.     }
  3117.     .listItemImage.listItemImage-large.itemAction.lazy {
  3118.       height: 120px;
  3119.       width: 210px;
  3120.     }
  3121.     .layout-mobile .listItem-content .listItemBody {
  3122.       left: 220px;
  3123.       position: relative;
  3124.       bottom: 131px;
  3125.       max-width: 66%;
  3126.     }
  3127.     .secondary.listItem-overview.listItemBodyText {
  3128.       height: 5em;
  3129.       margin: 0;
  3130.     }
  3131.   }
  3132.  
  3133.   @media (min-width: 60em) and (orientation: portrait) {
  3134.       .layout-mobile .detailLogo {
  3135.         display: block;
  3136.         width: 37em;
  3137.         left: 3%;
  3138.         top: 7vw;
  3139.     }
  3140.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3141.       padding-left: 10em;
  3142.     }
  3143.     .layout-mobile .detailPageWrapperContainer {
  3144.         top: -25em;
  3145.         position: relative;
  3146.     }
  3147.     .layout-mobile .itemName.parentNameLast {
  3148.       height: 6em;
  3149.     }
  3150.     .layout-mobile h1.parentName {
  3151.       margin: -8em 0px 0em !important;
  3152.       height: 10em;
  3153.     }
  3154.     .layout-mobile #itemDetailPage .parentName .button-link {
  3155.       height: 9em;
  3156.       width: 60%;
  3157.     }
  3158.     .layout-mobile .listItem-content {
  3159.       height: 158px;
  3160.     }
  3161.     .listItemImage.listItemImage-large.itemAction.lazy {
  3162.         height: 160px;
  3163.         width: 285px;
  3164.     }
  3165.     .layout-mobile .listItem-content .listItemBody {
  3166.       left: 298px;
  3167.       position: relative;
  3168.       bottom: 161px;
  3169.       max-width: 64%;
  3170.     }
  3171.     .secondary.listItem-overview.listItemBodyText {
  3172.       height: 6.5em;
  3173.       margin: 0;
  3174.     }
  3175.   }
  3176.   /* fix for logo not showing up in desktop mode on tablets */
  3177.   @media (max-width: 68.75em){
  3178.     .detailLogo {
  3179.         display: inherit;
  3180.     }
  3181.   }
  3182.  
  3183.   @media (max-width: 32em) and (orientation:portrait) {
  3184.     .layout-mobile [dir=ltr] .mainDetailButtons {
  3185.       margin-bottom: 0;
  3186.     }
  3187.   }
  3188.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!