simzy 3 Posted November 2, 2019 Share Posted November 2, 2019 So i am trying to make a custom theme more for how i like but i want to change the colour on the buttons from generic green like this https://puu.sh/EzLub/82ef2eefb4.png to a colour that i want, i thought it was in the root theme css but my changes didnt work. Any suggestions? :root{--theme-icon-focus-background:#0f3761} /* FONT STYLE */ @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,600,700); body { font-family: 'Ubuntu', sans-serif; } h1, h2, h3 { font-family: 'Ubuntu', sans-serif; text-transform: uppercase; color: rgba(255, 255, 255, 0.87) !important; } h2, h3 { letter-spacing: .3px; } td { color: rgba(255, 255, 255, 0.87); } div.content-primary p { color: rgba(255, 255, 255, 0.87); } .emby-tab-button { font-family: 'Ubuntu' !important; text-transform: uppercase; letter-spacing: .5px; color: rgba(255, 255, 255, 0.87) !important; } .emby-tab-button:active { font-weight: 700 !important; color: #0f3761 !important; } .emby-tab-button-active { font-weight: 700 !important; color: #0f3761 !important; } .emby-button { text-transform: uppercase; } .button-link { text-transform: uppercase; color: #ffffff !important; } .readOnlyContent { color: rgba(255, 255, 255, 0.87) !important; } /* ADMIN DASHBOARD */ span.navMenuOptionText { white-space: pre-wrap; text-align: justify; } .navMenuOption-selected { color: rgba(255, 255, 255, 0.87) !important; } a.navMenuOption.emby-button.navMenuOption-selected { background: #0f3761 !important; } .navMenuOptionText { color: rgba(255, 255, 255, 0.87) !important; } .navMenuOption:hover { background: #0f3761 !important; } .mainDrawer { background: #333333 !important; } .drawer-open { -webkit-box-shadow: 2px 0 12px rgba(0,0,0,.9) !important; box-shadow: 2px 0 12px rgba(0,0,0,.9) !important; } .checkboxLabel { color: rgba(255, 255, 255, 0.87) !important; text-transform: uppercase; } .checkboxListLabel, .inputLabel, .inputLabelUnfocused, .textareaLabelUnfocused { color: rgba(255, 255, 255, 0.87) !important; text-transform: uppercase; } .checkboxOutline { color: rgba(255, 255, 255, 0.87) !important; } .textareaLabel { color: rgba(255, 255, 255, 0.87) !important; text-transform: uppercase; } .selectLabel { color: rgba(255, 255, 255, 0.87) !important; text-transform: uppercase; } .fieldDescription { color: rgba(255, 255, 255, 0.87) !important; font-style: oblique; } .paperList, .visualCardBox { background-color: rgba(51,51,51,.87) !important; border: 2px solid #b3b3b3 !important; } div.focuscontainer.dialog.formDialog.align-items-center.justify-content-center.dialog-fullscreen-lowres.centeredDialog.opened { border: 2px solid #b3b3b3 !important; } div.focuscontainer.dialog.formDialog.align-items-center.justify-items-center.dialog-fullscreen-lowres.centeredDialog.opened { border: 2px solid #b3b3b3 !important; } .sessionCardButton { background-color: #0f3761 !important; } .sessionCardFooter { color: rgba(255, 255, 255, 0.87) !important; } .sessionAppInfo, .sessionNowPlayingInfo { color: rgba(255, 255, 255, 0.87) !important; } .listItemAside { background-color: #0f3761 !important; } .listItemBodyText { color: rgba(255, 255, 255, 0.87) !important; } .listItem .secondary { color: rgba(255, 255, 255, 0.87) !important; } .actionSheetMenuItem:hover { background-color: #0f3761 !important; } .dialog-content-centered { color: rgba(255, 255, 255, 0.87) !important; } .formDialogFooter:not(.formDialogFooter-clear) { background-color: #333333 !important; } .formDialogFooterItem-autosize { padding-left: 1em !important; padding-right: 1em !important; } .emby-input:focus, .emby-textarea:focus { border-color: #0f3761 !important; box-shadow: 0 0 10px 0 rgba(51,51,51,1); } p#appVersionNumber { color: rgba(255, 255, 255, 0.87) !important; } #pUpdateNow p { color: rgba(255, 255, 255, 0.87) !important; } #pnewVersionNumber { color: rgba(255, 255, 255, 0.87) !important; } p#pUpToDate.flex.align-items-center { color: rgba(255, 255, 255, 0.87) !important; } #pUpToDate i.md-icon { background-color: #0f3761 !important; border-color: #0f3761 !important; } p#ports { color: rgba(255, 255, 255, 0.87) !important; } p.localUrl { color: rgba(255, 255, 255, 0.87) !important; } #devicesUploadPage p { color: rgba(255, 255, 255, 0.87) !important; } #dlnaProfilePage p { color: rgba(255, 255, 255, 0.87) !important; } #dlnaProfilePage ul { color: rgba(255, 255, 255, 0.87) !important; } #fldDirectPlayAudioCodec label { color: rgba(255, 255, 255, 0.87) !important; } #popupEditDirectPlayProfile label { color: rgba(255, 255, 255, 0.87) !important; } .tabContent.tabTranscodingBasics label { color: rgba(255, 255, 255, 0.87) !important; } #transcodingProfilePopup label { color: rgba(255, 255, 255, 0.87) !important; } #codecProfilePopup label { color: rgba(255, 255, 255, 0.87) !important; } #responseProfilePopup label { color: rgba(255, 255, 255, 0.87) !important; } #identificationHeaderPopup label { color: rgba(255, 255, 255, 0.87) !important; } #subtitleProfilePopup label { color: rgba(255, 255, 255, 0.87) !important; } #xmlAttributePopup label { color: rgba(255, 255, 255, 0.87) !important; } .emby-checkbox:checked+span+span+.checkboxOutline, .itemProgressBarForeground, .emby-select-withcolor:focus { color: rgba(255, 255, 255, 0.87) !important; background-color: #0f3761 !important; border-color: #0f3761 !important; } .listItemIcon:not(.listItemIcon-transparent) { background-color: #0f3761 !important; } .formDialogHeader:not(.formDialogHeader-clear) { color: rgba(255, 255, 255, 0.87) !important; background-color: #0f3761 !important; } .mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb { background: #0f3761 !important; } .mdl-switch__track { background: #555 !important; } #collapsiblePendingInstallations p { color: rgba(255, 255, 255, 0.87) !important; } div#pendingInstallations { color: rgba(255, 255, 255, 0.87) !important; } .statCard .statCard-content { background-color: #333333 !important; } div[data-role=controlgroup] a.ui-btn-active.emby-button { background: #0f3761 !important; } div.jobItems div.listItem.listItem-border { display: -webkit-box; } table.tblApiKeys.detailTable { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; text-transform: uppercase; } /* METADATA MANAGER */ div.jstree-wholerow.jstree-wholerow-hovered { background: #0f3761 !important; } div.jstree-wholerow.jstree-wholerow-clicked { background: #0f3761 !important; } .button-accent-flat { color: rgba(255, 255, 255, 0.87) !important; } /* HEADER STYLE */ .skinHeader-withBackground { background-color: rgba(51, 51, 51,.90) !important; border-bottom: transparent !important; -webkit-box-shadow: 0 0.25em 0.29em 0 rgba(0,0,0,.90) !important; box-shadow: 0 0.25em 0.29em 0 rgba(51,51,51,.90) !important; } .skinHeader.semiTransparent { background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.9)),to(rgba(0,0,0,0.3))) !important; background: -webkit-linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,0.3)) !important; background: -o-linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,0.3)) !important; background: linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,0.3)) !important; border-bottom: none !important; } .backgroundContainer.withBackdrop { background-color: rgba(0,0,0,.7) !important; } /* BACKGROUND STYLE */ .backgroundContainer, .dialog, html { background-color: #333 !important; } .cardContent-shadow, .defaultCardBackground0 { background-color: transparent !important; } .cardFooter { background-color: #333333 !important; color: rgba(255, 255, 255, 0.87) !important; } .cardText-secondary { color: rgba(255, 255, 255, 0.87) !important; } .collapseContent { background-color: #333333 !important; } .nowPlayingBar { background-color: #000 !important; } .actionSheetContent { border: 1px solid rgba(255, 255, 255, 0.87); } .appfooter { background: #000 !important; border-top: 1px solid rgba(255,255,255,.1) !important; } .dialog-small { border: 2px solid #555 !important; } .selectionCommandsPanel { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; } div.dialog { padding: 0 .2em .2em 0; } /* UI BUTTON STYLE */ .emby-select-withcolor { color: rgba(255, 255, 255, 0.87) !important; background: transparent !important; border: .07em solid #c4c4c4 !important; } .emby-select-withcolor:focus { border-color: #c4c4c4 !important; } .fab, .raised { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; border: 1px solid #0f3761 !important; transition: 0.3s; } .fab:hover, .raised:hover { background: #24588f !important; border-color: #24588f !important; } .emby-input-iconbutton { background: #0f3761 !important; transition: 0.3s; } .emby-input-iconbutton:hover { background: #24588f !important; border-color: #24588f !important; } .scrollbuttoncontainer-left { background-color: #0f3761 !important; } .scrollbuttoncontainer-right { background-color: #0f3761 !important; } i.md-icon { color: rgba(255, 255, 255, 0.87) !important; } i.md-icon.playstatebutton-icon-played { color: #000 !important; background-color: #0f3761 !important; transition: 0.3s; } i.md-icon.playstatebutton-icon-played:hover { background-color: #24588f !important; } button.listItemButton.paper-icon-button-light.emby-button { background-color: #0f3761 !important; transition: 0.3s; } button.listItemButton.paper-icon-button-light.emby-button:hover { background-color: #24588f !important; } i.md-icon.ratingbutton-icon-withrating { color: #000 !important; background-color: #0f3761 !important; transition: 0.3s; } i.md-icon.ratingbutton-icon-withrating:hover { background-color: #24588f !important; } button.listItemButton.paper-icon-button-light.emby-button.ratingbutton-withrating { background-color: #0f3761 !important; transition: 0.3s; } button.listItemButton.paper-icon-button-light.emby-button.ratingbutton-withrating:hover { background-color: #24588f !important; } a.btnDeleteProfile.emby-button { color: rgba(255, 255, 255, 0.87) !important; background-color: #0f3761 !important; } a.btnDeleteProfile.emby-button:hover { background: #8f2424 !important; border-color: #8f2424 !important; } .emby-slider-background-inner { background: rgba(255,255,255,.1) !important; } #popupAddTrigger button { font-size: 1em; text-transform: uppercase; text-decoration: none; font-weight: 600; line-height: 1.35; letter-spacing: .5px; margin: 0 .29em; padding: .86em 1em; color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; border: 1px solid #0f3761 !important; border-radius: .2em; cursor: pointer; transition: 0.3s; } #popupAddTrigger button:hover { background: #24588f !important; border-color: #824588f !important; } /* PROGRESS BAR - CHROME */ .emby-slider::-webkit-slider-thumb, .sliderBubble { background: #0f3761 !important; } .emby-slider-background-lower { background: linear-gradient(to right, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; background: -webkit-linear-gradient(left, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; } progress::-webkit-progress-value { background: linear-gradient(to right, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; background: -webkit-linear-gradient(left, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; } /* PROGRESS BAR - FIREFOX */ .emby-slider::-moz-range-thumb, .mdl-slider:active::-moz-range-thumb { background: #0f3761 !important; } .emby-slider::-moz-range-progress { background: linear-gradient(to right, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; background: -moz-linear-gradient(left, #d3a934 0%, #d3a934 50%, #8f2424 100%) !important; } progress::-moz-progress-bar { background: linear-gradient(to right, #d3a934 0%,#d3a934 50%,#8f2424 100%) !important; background: -moz-linear-gradient(left, #d3a934 0%, #d3a934 50%, #8f2424 100%) !important; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 6px !important; } ::-webkit-scrollbar-track { background: #000 !important; } ::-webkit-scrollbar-thumb { background: #555 !important; border-radius: 6px !important; } ::-webkit-scrollbar-thumb:hover { background: #888 !important; } /* RIBBON - COUNT/PLAYED INDICATOR */ div.cardIndicators { right: -1.5em; } div.cardIndicators div.playedIndicator.indicator { margin-right: 2.2em; background: #0f3761; } div.cardIndicators div.playedIndicator.indicator .indicatorIcon { color: #000 !important; } div.countIndicator { width: 75px; transform: rotate(45deg); border-radius: 0%; background: #0f3761; border: 1px solid rgba(255, 255, 255, 0.87); } div.listItem-content div.playedIndicator i { transform: rotate(-45deg); } .listItemIndicators div.playedIndicator { background: #0f3761 !important; } .listItemIndicators div.playedIndicator .indicatorIcon { color: #000 !important; } /* RIBBON - FOLDER INDICATOR */ div.videoIndicator { transform: rotate(-45deg); width: 75px; left: -21px; border-radius: 0%; background: rgba(30,30,30,.7); border-style: solid; border-width: 1px; } div.videoIndicator i { transform: rotate(45deg); } /* RIBBON - EPISODE VERTICAL LIST */ #childrenContent .listItem[data-action=none] { padding: 0 0 30px 0; } #childrenContent .listItemIndicators { top: 4px; left: -21px; } #childrenContent .listItemImage-large { width: 400px; height: 225px; } #childrenContent div.listItem-content .playedIndicator { width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: #0f3761; border: 1px solid rgba(255, 255, 255, 0.87); } #childrenContent div.listItem-content .indicatorIcon { transform: rotate(45deg); color: #000 !important; } /* PROGRESS RINGS */ div.progressring { right: 30px; color: #0f3761 !important; } #divRunningTasks span { color: #0f3761 !important; } /* EMBY BRANDING */ .pageTitleWithDefaultLogo { display: none; } .btnHeaderPremiere { display: none; } /* CAST & CREW THUMBNAILS */ #castContent .card.portraitCard.personCard.card-hoverable.card-nofocustransform.card-withuserdata { width: 3.7cm; font-size: 80% !important; } #castContent .card.portraitCard.personCard.card-nofocustransform.card-withuserdata { width: 3.7cm; font-size: 80% !important; } #castContent .card.overflowPortraitCard.personCard.card-nofocustransform.card-withuserdata { width: 3.7cm; font-size: 80% !important; } #castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy { background-size: cover !important; border-radius: 1.7cm; } #castContent .cardScalable { width: 3.1cm !important; height: 3.1cm !important; border-radius: 1.7cm; } #castContent .cardOverlayContainer.itemAction { border-radius: 1.7cm; } #castContent .cardOverlayButton-br { bottom: 4%; right: 15%; width: 70%; } #castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light { width: 50%; vertical-align: middle; } #castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.emby-button { width: 50%; vertical-align: middle; } /* LOGIN FORM */ #loginPage .readOnlyContent, #loginPage form { max-width: 22em; } #loginPage h1 { display: none; } #loginPage .padded-left.padded-right.padded-bottom-page { margin-top: 50px; } #loginPage .raised.cancel.block.btnManual.emby-button { display: none; } #loginPage .raised.cancel.block.btnForgotPassword.emby-button { display: none; } /* PLAYBACK REPORTING PLUGIN */ table#activity_report_table thead { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; text-transform: uppercase; } tbody#activity_report_results.resultBody { color: rgba(255, 255, 255, 0.87) !important; } .detailTableBodyRow-shaded:nth-child(even) { background: #333333 !important; } #resource_usage_chart_canvas { background: #333333 !important; } #user_usage_report_table thead { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; text-transform: uppercase; } tbody#user_report_results.resultBody { color: rgba(255, 255, 255, 0.87) !important; } .chartjs-render-monitor { background: #333333 !important; } span#user_report_user_name { color: rgba(255, 255, 255, 0.87) !important; } span#filter_check_list { color: rgba(255, 255, 255, 0.87) !important; } div#TvShows_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#TvShows_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#User_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#User_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#ItemType_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#ItemType_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#PlayMethod_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#PlayMethod_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#ClientName_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#ClientName_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#DeviceName_breakdown_count_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#DeviceName_breakdown_time_chart_legend { color: rgba(255, 255, 255, 0.87) !important; } div#query_result_message { color: rgba(255, 255, 255, 0.87) !important; } div#table_area_div { color: rgba(255, 255, 255, 0.87) !important; } table#custom_query_table { color: rgba(255, 255, 255, 0.87) !important; } #user_usage_report_results button { color: rgba(255, 255, 255, 0.87) !important; background: #0f3761 !important; border: 1px solid #0f3761 !important; border-radius: .2em; cursor: pointer; transition: 0.3s; } #user_usage_report_results button:hover { background: #8f2424 !important; border-color: #0f3761 !important; } Link to comment Share on other sites More sharing options...
Solution Happy2Play 8882 Posted November 2, 2019 Solution Share Posted November 2, 2019 (edited) That would be button focus. Here is the default green. You can use this without adding !important. If you didn't add button you would need !important. button.paper-icon-button-light:focus { background-color: rgba(82,181,75,.2); } You have active also button.paper-icon-button-light:active Edited November 2, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
OCDcrazy 5 Posted April 5, 2021 Share Posted April 5, 2021 On 11/1/2019 at 9:27 PM, Happy2Play said: That would be button focus. Here is the default green. You can use this without adding !important. If you didn't add button you would need !important. button.paper-icon-button-light:focus { background-color: rgba(82,181,75,.2); } You have active also button.paper-icon-button-light:active This only works for computer browser? Link to comment Share on other sites More sharing options...
Happy2Play 8882 Posted April 5, 2021 Share Posted April 5, 2021 Just now, OCDcrazy said: This only works for computer browser? Correct as that is the only html client. 1 Link to comment Share on other sites More sharing options...
OCDcrazy 5 Posted April 5, 2021 Share Posted April 5, 2021 1 hour ago, Happy2Play said: Correct as that is the only html client. Thank you for the information. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now