Search the Community
Showing results for tags 'dark theme'.
-
I would like to use my theme which is basically the dark theme with some modified values. It works on the web app but it does not show on ios. Help is greatly appreciated! here is the ccs: /* _________________________________________________________________________ ------------------------- COLOR HEX & RGB CODES ------------------------- RED : #E81123 & (232, 17, 35) DARK COLOR : #94131E ORANGE : #FF8000 & (255, 128, 0) DARK COLOR : #BF6000 ORANGE PLEX : #CC7B19 & (204, 123, 25) DARK COLOR : #B35A00 YELLOW : #BDBD00 & (189, 189, 0) DARK COLOR : #757500 GREEN : #52B54B & (82, 181, 75) DARK COLOR : #3E8437 BLUE : #4285F4 & (66, 133, 244) DARK COLOR : #0C57D6 BLUE DARK : #3367d6 & (51,103,214) BLUE DARK (DARK) : #1f4698 PURPLE : #673AB7 & (103, 58, 183) DARK COLOR : #3F2471 GRAY : #7F7F7F & (127, 127, 127) DARK COLOR : #535353 PINK : #FF65FD & (247, 7, 223) DARK COLOR : #C604B3 */ /* _________________________________________________________________________ ----------------------- EMBY THEME : ACCENT COLORS ---------------------- ---------- Table of Contents ---------- 1. ACCENT COLORS 1.1 Buttons 1.1.1 Checkboxes 1.1.2 Rectangles 1.1.3 Links & Text buttons 1.1.4 Others 1.2 Details 1.2.1 Circles 1.2.2 Indicators 1.2.3 Fonts 1.2.4 Icons 1.2.5 Dialogs & Action Sheets 1.2.6 Others 1.3 Fixes 2. MISCELLANEOUS MODIFICATIONS 2.1 Buttons 2.2 Details 2.2.1 Scrollbars 2.2.2 Logos 2.2.3 Others 2.3 Fixes 2.3.1 Dark Colors */ /* ------------------------ 1. ACCENT COLORS ------------------------- */ /* ----- 1.1 Buttons ----- */ /* 1.1.1 Checkboxes */ .emby-checkbox:checked + span + span + .checkboxOutline > .checkboxOutlineTick { background-color: #FF65FD !important; } .emby-checkbox:checked + span + span + .checkboxOutline, .progressring-spiner { border-color: #FF65FD !important; } .emby-checkbox:focus + span + .emby-checkbox-focushelper { background-color: #FF65FD !important; opacity: 0.26 !important; } /* 1.1.2 Rectangles */ .raised { background: #404040 !important; color: #fff !important; } .button-submit, .button-accent { background: #FF65FD !important; color: #fff; } .raised-mini.emby-button { background: #FF65FD !important; color: #ffffff !important; } /* Restart */ .btnRestartContainer.emby-button { background: #FF65FD !important; color: #fff; } /* Play & Resume */ .btnPlaySimple.emby-button { background: #FF65FD !important; color: #fff; } .btnResume.emby-button { background: #C604B3 !important; color: #fff; } /* 1.1.3 Links & Text buttons */ .button-link, .button-flat-accent, .button-accent-flat, .textlink { color: #FF65FD !important; } .button-link:hover, .button-flat-accent:hover, .button-accent-flat:hover, .textlink:hover { color: #9b9b9b !important; } .button-link:active, .button-flat-accent:active, .button-accent-flat:active, .textlink:active { color: #C604B3 !important; } /* Top Header */ .emby-tab-button-active { color: #FF65FD !important; } /* 1.1.4 Others */ /* Alpha Picker */ .alphaPickerButton-selected, .alphaPickerButton-tv:focus { background-color: #FF65FD !important; color: #fff !important; } /* Radio Buttons */ .mdl-radio__inner-circle { background: #FF65FD !important; } .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle { border: 2px solid #FF65FD !important; } .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { -webkit-box-shadow: 0 0 0 10px rgba(247, 7, 233, 0.26) !important; box-shadow: 0 0 0 10px rgba(247, 7, 233, 0.26) !important; } /* Control Group Buttons */ div[data-role=controlgroup] a.ui-btn-active[data-role=button] { background: #FF65FD !important; color: #ffffff !important; } /* ----- 1.2 Details ----- */ /* 1.2.1 Circles */ /*.listItemIcon:not(.listItemIcon-transparent) { background-color: $accent-color !important; }*/ .dashboardSection i.listItemIcon.md-icon { background-color: #FF65FD !important; } .scheduledTaskPaperIconItem[data-status=Running] i.listItemIcon.md-icon { background-color: #C604B3 !important; } /* Focus Helper circles */ .paper-icon-button-light:focus { color: #FF65FD !important; } /* 1.2.2 Indicators */ .countIndicator, .playedIndicator { background: #FF65FD !important; } .levelNormal { background-color: #FF65FD !important; } .fullSyncIndicator { background: #FF65FD !important; color: #fff; } .playstatebutton-played i, .ratingbutton-withrating i { color: #FF65FD !important; } p#pUpToDate i.md-icon { background-color: #FF65FD !important; } /* Loading Spinners */ .mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3, .mdl-spinner__layer-4 { border-color: #FF65FD !important; } .progressring-spiner { border: 0.25em solid #FF65FD !important; } /* 1.2.3 Fonts */ .selectLabelFocused, .textareaLabelFocused, .inputLabelFocused { color: #FF65FD !important; } .secondary.listItemBodyText span, div#divRunningTasks span { color: #FF65FD !important; } /* 1.2.4 Icons */ .starIcon, .mediaInfoTimerIcon { color: #FF65FD !important; } /* Top Header */ .btnActiveCast { color: #FF65FD !important; } /* Now Playing Bar & Now Playing Page */ .repeatActive, button.btnCommand.repeatToggleButton.autoSize.nowPlayingPageRepeatActive { color: #FF65FD !important; } /* 1.2.5 Dialogs & Action Sheets */ /* 1.2.6 Others */ /* General Accent Color Modifications */ :focus { outline: #FF65FD auto 5px; } select:focus { border-color: #FF65FD !important; } ::selection { background-color: #C604B3 !important; } .emby-input:focus, .emby-textarea:focus { border-color: #FF65FD !important; } /* Google Now Playing Bar & Now Playing Page */ .iconOsdProgressInner, .mdl-slider__background-lower, .sliderBubble, .mdl-slider::-webkit-slider-thumb { background: #FF65FD !important; } .mdl-slider:focus::-webkit-slider-thumb { -webkit-box-shadow: 0 0 0 10px rgba(247, 7, 233, 0.26); box-shadow: 0 0 0 10px rgba(247, 7, 233, 0.26) !important; } /* Firefox Now Playing Bar & Now Playing Page */ .mdl-slider::-moz-range-thumb, .mdl-slider::-moz-range-progress { background: #FF65FD !important; } .mdl-slider:focus::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(247, 7, 233, 0.26) !important; } /* Progress Bars */ .itemProgressBarForeground { background-color: #FF65FD !important; } .taskProgressInner { background: #FF65FD !important; } /* Google Progress Bars */ progress::-webkit-progress-value { background: #FF65FD !important; } /* Firefox Progress Bars */ progress::-moz-progress-bar { background: #FF65FD !important; } /* Edge Progress Bars */ progress { background: #FF65FD !important; } /* Main Drawers */ .navMenuDivider { background: #262626 !important; } .adminDrawerLogo { border-bottom: 1px solid #262626 !important; } .mainDrawer { background: #181818 !important; } .sidebarHeader { color: #bbbbbb !important; } .navMenuOption { color: #ffffff !important; } .navMenuOption.navMenuOption-selected { background: #252528 !important; color: #FF65FD !important; } .navMenuOption:hover { background: #252528 !important; color: #9b9b9b !important; } /* Metadata Editor */ div.jstree-wholerow.jstree-wholerow-clicked:hover, div.jstree-wholerow.jstree-wholerow-clicked, div.jstree-wholerow.jstree-wholerow-hovered { background: #252528 !important; } .jstree-anchor.jstree-clicked, .jstree-anchor.jstree-clicked.jstree-hovered { background: #252528 !important; color: #FF65FD !important; } /* Multi-select */ .itemSelectionPanel { border: 1px solid #FF65FD !important; } .selectionCommandsPanel { background: #FF65FD !important; color: #fff; } /* upNextDialog */ .upNextDialog-countdownText { color: #FF65FD !important; } /* Selection Bars */ .emby-select-selectionbar, .emby-textarea-selectionbar, .emby-input-selectionbar { background-color: #FF65FD !important; } /* Media Info Detail Image */ .itemDetailImage.loaded:hover { border: 1px solid #FF65FD !important; } /* 1.3 Fixes */ /* ------------------ 2. MISCELLANEOUS MODIFICATIONS ----------------- */ /* ----- 2.1 Buttons ----- */ /* Circles */ .fab { background-color: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; -webkit-transition: none !important; -o-transition: none !important; transition: none !important; } /* ----- 2.2 Details ----- */ /* 2.2.1 Scrollbars */ /* Google Chrome */ ::-webkit-scrollbar-corner { background-color: #3B3B3B; } ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #3B3B3B; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; background: #888888; } /* Google Chrome - Dashboard Drawer */ div.scrollContainer.smoothScrollY::-webkit-scrollbar-corner { background-color: transparent !important; } div.scrollContainer.smoothScrollY::-webkit-scrollbar { width: 2px; height: 2px; background-color: transparent !important; } div.scrollContainer.smoothScrollY::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; background: #888888; } /* Google Chrome - Filter Dialog */ .dynamicFilterDialog::-webkit-scrollbar-corner { background-color: transparent !important; } .dynamicFilterDialog::-webkit-scrollbar { width: 2px; height: 2px; background-color: transparent !important; } .dynamicFilterDialog::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; background: #888888; } /* 2.2.2 Logos */ /* Login Page */ .imgLogoIcon { content: url(https://i.ibb.co/PgwB1wQ/pinkbunny-v2.png) !important; } /* Main Drawer Mobile */ .adminDrawerLogo img { content: url(https://i.ibb.co/PgwB1wQ/pinkbunny-v2.png) !important; } /* Home Page */ .pageTitleWithLogo { background-image: url(https://i.ibb.co/PgwB1wQ/pinkbunny-v2.png) !important; } /* 2.2.3 Others */ /* CSS Box */ #txtCustomCss { height: 300px !important; overflow-y: scroll !important; } /* Select Box */ select option { background-color: #2b2b2b !important; color: #ffffff !important; } /* Dialogs */ .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear) { background-color: #121212 !important; color: #fff; } /* Headers */ .skinHeader { background-color: #080808 !important; color: #fff !important; } .skinHeader-withBackground { background-color: #080808 !important; } @supports (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) { .skinHeader-blurred { background: rgba(20, 20, 20, 0.7) !important; -webkit-backdrop-filter: blur(1.5em) !important; backdrop-filter: blur(1.5em) !important; } } .skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.4) !important; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.7)), color-stop(10%, transparent)) !important; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.7) 10%, transparent) !important; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 10%, transparent) !important; } .appfooter { background: #080808 !important; color: #fff !important; } @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, 0.7) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } } /* TV Global Modifications */ .emby-tab-button-active.emby-button-tv { color: #fff !important; } .guide-channelHeaderCell, .guide-channelTimeslotHeader { background: #2e2e2e !important; } .guide-programTextIcon { color: #1e1e1e !important; background: #555 !important; } .guide-headerTimeslots { color: #ccc !important; } /* ----- 2.3 Fixes ----- */ /* 2.3.1 Dark Colors */ .autoorganizetable tbody tr:nth-child(odd) td, .autoorganizetable tbody tr:nth-child(odd) th { background-color: #222326 !important; } .autoorganizetable > .table > tbody > tr { border: 1px solid #222326 !important; } /* _____________________________________________________________________ Emby Dark Themes is maintained by Ben Z (BenZuser) with the contribution of Happy2Play. _____________________________________________________________________ */ /* TEMPORARY FIXES */ /* Links */ .searchSuggestionsList a, .noItemsMessage a, a.lnkPremiere { color: #FF65FD !important; } .searchSuggestionsList a:hover, .noItemsMessage a:hover, a.lnkPremiere:hover { color: #9b9b9b !important; } .searchSuggestionsList a:active, .noItemsMessage a:active, a.lnkPremiere:active { color: #C604B3 !important; }