Jump to content

Custom ccs theme on ios??

Mai Sakurajima

By Mai Sakurajima
in iOS

 Share

Recommended Posts

Mai Sakurajima

Mai Sakurajima   0

Posted
Posted

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; }
 
 
Link to comment
Share on other sites
  • 5 months later...
dannymichel

dannymichel   102

Posted
Posted

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

 

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...