Jump to content


Photo

Custom ccs theme on ios??

Theme ccs ios dark theme

  • Please log in to reply
4 replies to this topic

#1 Mai Sakurajima OFFLINE  

Mai Sakurajima

    Newbie

  • Members
  • 2 posts
  • Local time: 09:20 AM

Posted 19 April 2019 - 09:38 PM

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/Pgw...inkbunny-v2.png) !important; }
 
/* Main Drawer Mobile */
.adminDrawerLogo img {
  content: url(https://i.ibb.co/Pgw...inkbunny-v2.png) !important; }
 
/* Home Page */
.pageTitleWithLogo {
  background-image: url(https://i.ibb.co/Pgw...inkbunny-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; }
 
 


#2 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 138077 posts
  • Local time: 12:20 PM

Posted 19 April 2019 - 11:27 PM

Hi, it's currently not possible in the iOS app.



#3 Mai Sakurajima OFFLINE  

Mai Sakurajima

    Newbie

  • Members
  • 2 posts
  • Local time: 09:20 AM

Posted 20 April 2019 - 01:54 AM

Ok, thx for the reply



#4 dannymichel OFFLINE  

dannymichel

    Advanced Member

  • Members
  • 50 posts
  • Local time: 12:20 PM

Posted 02 October 2019 - 04:07 AM

Hi, it's currently not possible in the iOS app.

 

any future plans for making it possible for the ios app?



#5 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 138077 posts
  • Local time: 12:20 PM

Posted 02 October 2019 - 09:09 AM

Not at this time.





Also tagged with one or more of these keywords: Theme, ccs, ios, dark theme

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users