hacktoberfestthemedark-themesonarrradarrplexorganizrnginxcssthemes-customthemes-csssubfilterguacamoleskinsombilidarrdocker-modsdark-themesdark-modecustom-css
		
		
		
		
			You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							858 lines
						
					
					
						
							19 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							858 lines
						
					
					
						
							19 KiB
						
					
					
				| /* Set the Organizr theme to either Aquamarine or Hotline */ | |
| /* Import the glass-base.css and root variables in the Custom Theme CSS box like below */ | |
| /*  | |
|  | |
| @import "https://theme-park.dev/CSS/addons/organizr/glass-base.css";  | |
| :root { | |
|     --main-bg-color: url(https://domain.com/your/hosted/wallpaper.jpg) center center/cover no-repeat fixed; | |
|     --mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; | |
|  | |
|     --link-color: #fff; | |
|     --custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed; | |
|     --hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed; | |
|     --notification-box-line: #000; | |
|  | |
|     --div-background-color-10: rgba(0, 0, 0, 0.15); | |
|     --div-background-color-15: rgba(0, 0, 0, 0.25); | |
|     --div-background-color-25: rgba(0, 0, 0, 0.35); | |
|     --div-background-color-35: rgba(0, 0, 0, 0.45); | |
| } | |
|  | |
| */ | |
| 
 | |
| /* Replace the variables if you have a dark background  */ | |
| /* Light colors for dark backgrounds */ | |
| /* | |
|     --div-background-color-10: rgba(255, 255, 255, 0.1); | |
|     --div-background-color-15: rgba(255, 255, 255, 0.15); | |
|     --div-background-color-25: rgba(255, 255, 255, 0.25); | |
|     --div-background-color-35: rgba(255, 255, 255, 0.35); | |
| */ | |
| /* Dark blur colors for bright backgrounds */ | |
| /* | |
|     --div-background-color-10: rgba(0, 0, 0, 0.15); | |
|     --div-background-color-15: rgba(0, 0, 0, 0.25); | |
|     --div-background-color-25: rgba(0, 0, 0, 0.35); | |
|     --div-background-color-35: rgba(0, 0, 0, 0.45); | |
| 	 | |
| */ | |
| 
 | |
| /*Settings */ | |
| .feeds li>div i { | |
|     color: black !important; | |
| } | |
| 
 | |
| .row-in i { | |
|     font-size: 24px; | |
|     color: black; | |
| } | |
| 
 | |
| .profile-social-icons a { | |
|     color: #eee; | |
| } | |
| 
 | |
| .btn-info.btn-outline { | |
|     color: #eee !important; | |
| } | |
| 
 | |
| .btn-info.btn-outline:hover { | |
|     background: var(--div-background-color-15); | |
|     color: #fff; | |
| } | |
| 
 | |
| .content-wrap { | |
|     background: var(--div-background-color-15) !important; | |
|     border-radius: 0 0 15px 15px; | |
| } | |
| 
 | |
| .content-wrap section.content-current { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: rgba(0, 0, 0, 0); | |
|     border-radius: 0 0 15px 15px; | |
| } | |
| 
 | |
| .panel-blue .panel-heading, | |
| .panel-info .panel-heading { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: transparent; | |
| 
 | |
| } | |
| 
 | |
| .panel .table { | |
|     background: transparent !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .sttabs nav ul { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-radius: 15px 15px 0 0; | |
| 
 | |
| } | |
| 
 | |
| .sttabs nav { | |
|     background: var(--div-background-color-25); | |
|     border-radius: 15px 15px 0 0; | |
| } | |
| 
 | |
| #settings-main-system-settings-anchor>.sttabs nav ul li { | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| .tab-content>.active { | |
|     background: transparent; | |
| } | |
| 
 | |
| .bg-title { | |
|     background: var(--div-background-color-10); | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .white-box { | |
|     background: transparent; | |
| } | |
| 
 | |
| .white-popup-block { | |
|     background: var(--div-background-color-10) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| } | |
| 
 | |
| .user-bg { | |
|     border-top-left-radius: 15px; | |
|     border-top-right-radius: 15px; | |
| } | |
| 
 | |
| #internal-Settings .nav-tabs>li.active>a, | |
| .nav-tabs>li.active>a:hover { | |
|     padding-top: 10px; | |
| } | |
| 
 | |
| /* Nav bar | |
| .navbar-header { | |
|     background: transparent !important; | |
| } | |
| */ | |
| @media (min-width: 768px) { | |
|     .navbar-static-top { | |
|         background: var(--main-bg) !important; | |
|     } | |
| } | |
| 
 | |
| /* Dropdown */ | |
| .dropdown-menu { | |
|     background: var(--div-background-color-25); | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .open>.dropdown-menu { | |
|     display: block; | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| .navbar-top-links .dropdown-user { | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| #plexRecent .recent-filter { | |
|     background: var(--div-background-color-25) !important; | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| /* Side bar */ | |
| .sidebar { | |
|     background: var(--div-background-color-15) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     box-shadow: none; | |
| 
 | |
| } | |
| 
 | |
| .sidebar-head { | |
|     background: transparent !important; | |
| } | |
| 
 | |
| /*Calendar */ | |
| .fc-toolbar { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-15) !important; | |
| 
 | |
| } | |
| 
 | |
| .fc-view { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-15) !important; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| .fc-popover { | |
|     background: var(--div-background-color-25); | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| #homepageOrdercalendar .fc-toolbar { | |
|     border-top-left-radius: 15px; | |
|     border-top-right-radius: 15px; | |
| 
 | |
| } | |
| 
 | |
| .fc-row, | |
| .fc-unthemed { | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| /* Calendar mobile*/ | |
| .fc th.fc-widget-header { | |
|     padding-left: 5px; | |
| } | |
| 
 | |
| /*Error page */ | |
| .error-body { | |
|     padding-top: 15%; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     height: -webkit-fill-available; | |
|     margin-top: -10%; | |
| 
 | |
| } | |
| 
 | |
| 
 | |
| /* notify - popup */ | |
| .iziToast.update-notify.iziToast-layout2, | |
| .iziToast.success-notify.iziToast-layout2 { | |
|     border: none; | |
|     background: var(--div-background-color-25) !important; | |
|     border-bottom: transparent; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .iziToast.warning-notify.iziToast-layout2 { | |
|     background: var(--div-background-color-25); | |
|     border: 1px solid transparent; | |
|     border-bottom: transparent; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .iziToast:after { | |
|     background: transparent !important; | |
| } | |
| 
 | |
| .mfp-container { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .mfp-zoom-out.mfp-ready.mfp-bg { | |
|     opacity: 1 !important; | |
|     background: var(--main-bg-color) !important; | |
| } | |
| 
 | |
| .mfp-wrap { | |
|     background: var(--main-bg-color); | |
| } | |
| 
 | |
| .main-email-panel .panel-body { | |
|     background: var(--div-background-color-25) !important; | |
|     border-bottom-right-radius: 15px !important; | |
|     border-bottom-left-radius: 15px !important; | |
| } | |
| 
 | |
| .white-popup-block { | |
|     background: var(--div-background-color-25) !important; | |
| } | |
| 
 | |
| .white-popup .panel-footer { | |
|     background: var(--div-background-color-25); | |
|     border-top: 1px solid #fff; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| .panel>.table-responsive:last-child>.table:last-child, | |
| .panel>.table:last-child { | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| /* Homepage downloader */ | |
| 
 | |
| #homepageOrderdownloader { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-15); | |
|     padding: 10px; | |
|     border-radius: 15px; | |
| 
 | |
| } | |
| 
 | |
| #homepageOrderdownloader .nav-tabs>li.active>a, | |
| .nav-tabs>li.active>a:hover { | |
|     padding-top: 14px; | |
| } | |
| 
 | |
| #homepageOrderdownloader .nav-tabs>li>a { | |
|     padding-top: 14px; | |
| } | |
| 
 | |
| /* Homepage card */ | |
| .nowPlayingItem>.white-box>.el-card-item { | |
|     background: var(--div-background-color-15) !important; | |
|     -webkit-box-shadow: none; | |
|     box-shadow: none; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-radius: 15px; | |
| 
 | |
| } | |
| 
 | |
| .active-tab-Homepage .white-popup .panel-body, | |
| .white-popup>.col-md-6>.white-box:nth-child(2) { | |
|     background: var(--div-background-color-25) !important; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| #plexStreams .el-element-overlay .el-card-item .el-overlay-1 img, | |
| #plexStreams .el-element-overlay:hover .el-card-item:hover .el-overlay-1:hover img:hover { | |
|     border-top-right-radius: 15px; | |
|     border-top-left-radius: 15px; | |
| } | |
| 
 | |
| .el-element-overlay .el-card-item .el-overlay-1 { | |
|     border-top-right-radius: 15px; | |
|     border-top-left-radius: 15px; | |
| } | |
| 
 | |
| .el-element-overlay .el-card-item .el-overlay { | |
|     border-top-right-radius: 15px; | |
|     border-top-left-radius: 15px; | |
| } | |
| 
 | |
| .white-popup .panel-heading, | |
| .white-popup>.col-md-6>.white-box:first-child { | |
|     background: var(--div-background-color-25) !important; | |
|     border-top-right-radius: 15px; | |
|     border-top-left-radius: 15px; | |
| } | |
| 
 | |
| 
 | |
| .label-info { | |
|     background: var(--div-background-color-25); | |
| } | |
| 
 | |
| #plexRecent, | |
| #homepageOrderplexplaylist, | |
| #homepageOrdercalendar, | |
| #homepageOrderembyrecent, | |
| #ombi-requests, | |
| #homepageOrderdeluge, | |
| #homepageOrdernzbget, | |
| #homepageOrdertransmission, | |
| #homepageOrderrTorrent, | |
| #homepageOrderjdownloader, | |
| #homepageOrdersabnzbd, | |
| #homepageOrderqBittorrent { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-15); | |
|     margin: 5px; | |
|     border-radius: 15px; | |
| 
 | |
| } | |
| 
 | |
| .bg-info { | |
|     background-color: transparent !important; | |
| } | |
| 
 | |
| /* Health checks */ | |
| .card-body { | |
|     background: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
| 
 | |
| } | |
| 
 | |
| .bg-inverse .healthPosition { | |
|     background: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: saturate(180%) blur(30px); | |
|     backdrop-filter: saturate(180%) blur(30px); | |
| 
 | |
| } | |
| 
 | |
| /* Unifi cards */ | |
| .unifiCards .panel-wrapper.collapse.in { | |
|     background: var(--div-background-color-15); | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| 
 | |
| } | |
| 
 | |
| .unifiCards .panel-heading { | |
|     background: var(--div-background-color-35) !important; | |
|     color: #fff !important; | |
|     border-color: transparent !important; | |
|     text-align: inherit !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-top-left-radius: 15px; | |
|     border-top-right-radius: 15px; | |
|     border-bottom: 0px; | |
| } | |
| 
 | |
| .unifiCards .panel-warning .panel-heading, | |
| .unifiCards .panel-success .panel-heading { | |
|     border-top-left-radius: 15px; | |
|     border-top-right-radius: 15px; | |
|     border-bottom-right-radius: 0px; | |
|     border-bottom-left-radius: 0px; | |
| } | |
| 
 | |
| #allUnifi .unifiCards .panel .panel-warning { | |
|     border-radius: 15px !important; | |
| 
 | |
| } | |
| 
 | |
| .unifiCards .ti-close:before { | |
|     content: "\f111"; | |
|     font-family: FontAwesome; | |
|     font-size: 20px; | |
|     color: rgba(255, 69, 58, 1); | |
| } | |
| 
 | |
| .unifiCards .ti-minus:before { | |
|     content: "\f111"; | |
|     font-family: FontAwesome; | |
|     font-size: 20px; | |
|     color: rgba(255, 204, 0, 1); | |
| } | |
| 
 | |
| .unifiCards .ti-plus:before { | |
|     content: "\f111"; | |
|     font-family: FontAwesome; | |
|     font-size: 20px; | |
|     color: rgba(40, 205, 65, 1); | |
| } | |
| 
 | |
| /* Weather boxes */ | |
| #homepageOrderWeatherAndAir .col-lg-2 .white-box, | |
| #homepageOrderWeatherAndAir>div:nth-child(1)>div.col-lg-4.col-sm-12.col-xs-12>div, | |
| #homepageOrderWeatherAndAir>div:nth-child(2)>div.col-lg-4.col-sm-12.col-xs-12>div { | |
|     background: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px) | |
| } | |
| 
 | |
| /* Custom HTML */ | |
| #homepageOrdercustomhtmlTwo, | |
| #homepageOrdercustomhtml { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-15); | |
|     border-radius: 15px; | |
|     padding-left: 10px; | |
|     padding-right: 10px; | |
|     margin-bottom: 5px; | |
| } | |
| 
 | |
| /* Invite */ | |
| #invite-area .bg-org { | |
|     background: var(--div-background-color-15) !important; | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| #new-invite-area .white-popup .panel-body, | |
| #new-invite-area .white-popup>.col-md-6>.white-box:nth-child(2) { | |
|     background: var(--div-background-color-15) !important; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| .white-popup .panel-body, | |
| .white-popup>.col-md-6>.white-box:nth-child(2) { | |
|     background: var(--div-background-color-15) !important; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| /* Email users */ | |
| .email-div .panel-body { | |
|     border-radius: 0px !important; | |
| } | |
| 
 | |
| /* Speedtest popup */ | |
| 
 | |
| #speedtest-area .white-popup .panel-footer { | |
|     background: var(--div-background-color-25) !important; | |
|     border-bottom-right-radius: 15px; | |
|     border-bottom-left-radius: 15px; | |
| } | |
| 
 | |
| #speedtest-area .white-popup .panel-body, | |
| #speedtest-area .white-popup>.col-md-6>.white-box:nth-child(2) { | |
|     border-bottom-right-radius: 0px !important; | |
|     border-bottom-left-radius: 0px !important; | |
| } | |
| 
 | |
| /* Modal */ | |
| .modal-content, | |
| .modal-header, | |
| .modal-footer, | |
| .modal-body { | |
|     background: var(--div-background-color-10) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-color: transparent; | |
| } | |
| 
 | |
| .modal-body { | |
|     border-bottom-left-radius: 15px; | |
|     border-bottom-right-radius: 15px; | |
| } | |
| 
 | |
| .modal-header { | |
|     border-top-left-radius: 15px; | |
|     border-top-right-radius: 15px; | |
| } | |
| 
 | |
| .modal-open .modal { | |
|     background: var(--main-bg-color); | |
| } | |
| 
 | |
| .modal-content { | |
|     border-radius: 15px; | |
|     box-shadow: none; | |
| } | |
| 
 | |
| /* loginpage sidemenu */ | |
| @media (max-width: 480px) { | |
|     #wrapper .login-register>.login-box>.white-box { | |
|         background: transparent !important; | |
|         margin-top: auto !important; | |
|         width: 100% !important; | |
|         -webkit-backdrop-filter: blur(0px) !important; | |
|         backdrop-filter: blur(0px) !important; | |
| 
 | |
| 
 | |
|     } | |
| } | |
| 
 | |
| @media (max-width: 480px) { | |
|     .login-box.login-sidebar { | |
|         background: var(--div-background-color-15) !important; | |
|         -webkit-backdrop-filter: blur(10px); | |
|         backdrop-filter: blur(10px); | |
| 
 | |
|     } | |
| } | |
| 
 | |
| /* logo */ | |
| .white-box .visible-xs { | |
|     display: block !important; | |
| } | |
| 
 | |
| .loginLogo { | |
|     border: 0; | |
|     margin-top: -60%; | |
|     transform: translateY(-10%); | |
| } | |
| 
 | |
| @media (max-width: 480px) { | |
|     .loginLogo { | |
|         margin-top: -10% !important; | |
|     } | |
| } | |
| 
 | |
| .blockUI { | |
|     opacity: 1 !important; | |
|     background-color: transparent !important; | |
| } | |
| 
 | |
| .blockMsg { | |
|     background: rgba(0, 0, 0, 0.9) !important; | |
|     border: none !important; | |
| } | |
| 
 | |
| .login-register>.login-box>.white-box { | |
|     background: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-radius: 15px; | |
|     -webkit-box-shadow: none; | |
|     box-shadow: none; | |
| } | |
| 
 | |
| 
 | |
| .login-register { | |
| 
 | |
|     height: 100%; | |
|     position: fixed; | |
| } | |
| 
 | |
| .slideInRight { | |
|     -webkit-animation-name: none; | |
|     animation-name: none; | |
| } | |
| 
 | |
| .login-register .login-box .white-box .bg-org { | |
|     background-color: transparent !important; | |
| } | |
| 
 | |
| /*2FA login button*/ | |
| .panel-wrapper .panel-body>.btn-warning, | |
| .btn-warning.disabled { | |
|     background: var(--div-background-color-15) !important; | |
|     border: 1px solid #ffc36d00 !important; | |
| } | |
| 
 | |
| /*2FA animation header*/ | |
| .panel-warning .panel-heading, | |
| .panel-yellow .panel-heading { | |
|     color: #fff; | |
|     border-radius: 3px; | |
|     background-color: rgba(0, 0, 0, 0.3); | |
|     border-color: #00000000; | |
| } | |
| 
 | |
| /*oAuth Successful*/ | |
| .panel-green .panel-heading, | |
| .panel-success .panel-heading { | |
|     color: #53e69d; | |
|     text-align: center; | |
|     text-transform: uppercase; | |
|     border-radius: 3px; | |
|     background-color: transparent; | |
|     border-color: transparent; | |
| } | |
| 
 | |
| /*Login sidebar*/ | |
| .login-box.login-sidebar, | |
| #login-panels .panel-body, | |
| #login-panels .panel { | |
|     background: transparent; | |
| } | |
| 
 | |
| #login-panels .form-control, | |
| #login-panels .btn { | |
|     background: rgba(255, 255, 255, 0.35); | |
|     color: white; | |
|     border-radius: 25px; | |
|     border: none; | |
| } | |
| 
 | |
| /*  #login-panels { | |
|     height: 44px; | |
|     }*/ | |
| #login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover { | |
|     background: rgba(255, 255, 255, 0.65); | |
|     border: none; | |
| 
 | |
| } | |
| 
 | |
| /*Center login Box*/ | |
| .login-sidebar { | |
|     position: relative; | |
|     right: initial; | |
| } | |
| 
 | |
| #lockScreen .white-box { | |
|     width: 400px; | |
|     height: 345px; | |
| } | |
| 
 | |
| .login-sidebar .white-box { | |
|     width: 100%; | |
|     position: absolute; | |
|     top: 50%; | |
|     transform: translateY(-50%); | |
| } | |
| 
 | |
| #lockScreen .white-box { | |
|     position: absolute; | |
|     top: 50%; | |
|     transform: translateY(-50%); | |
|     background: var(--div-background-color-25); | |
|     -webkit-box-shadow: none; | |
|     box-shadow: none; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| .form-control::placeholder { | |
|     color: white; | |
| } | |
| 
 | |
| #login-username-Input, | |
| #login-password-Input { | |
|     text-align: center; | |
| } | |
| 
 | |
| .panel .panel-heading .panel-title, | |
| label, | |
| span, | |
| .fa-lock:before { | |
|     color: #ffffff; | |
| } | |
| 
 | |
| /* Lock screen */ | |
| #lockScreen .form-material .form-control, | |
| .form-material .form-control:focus { | |
|     background: rgba(255, 255, 255, 0.35); | |
|     border-radius: 25px; | |
|     padding: inherit; | |
|     text-align: center; | |
| } | |
| 
 | |
| #lockScreen .btn-info { | |
|     background: rgba(255, 255, 255, 0.35); | |
|     border-radius: 25px; | |
| } | |
| 
 | |
| /* Extra */ | |
| .cbutton { | |
|     background-color: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     border-radius: 15px !important; | |
|     border: none !important; | |
|     padding: 4px !important; | |
| 
 | |
| } | |
| 
 | |
| .cbutton:hover { | |
|     background: var(--div-background-color-25) !important; | |
|     -webkit-backdrop-filter: saturate(180%) blur(30px) !important; | |
|     backdrop-filter: saturate(180%) blur(30px) !important; | |
|     opacity: 1 !important; | |
| 
 | |
| } | |
| 
 | |
| /* Debug modal */ | |
| .mdi-package-variant-closed:before { | |
|     content: "\F3D7"; | |
|     color: black; | |
| } | |
| 
 | |
| .mdi-receipt:before { | |
|     content: "\F449"; | |
|     color: black; | |
| } | |
| 
 | |
| .debugModal .modal-body { | |
|     border-bottom-left-radius: 0px !important; | |
|     border-bottom-right-radius: 0px !important; | |
| } | |
| 
 | |
| .debugModal .modal-footer { | |
|     background: var(--div-background-color-10) !important; | |
|     border-bottom-left-radius: 15px !important; | |
|     border-bottom-right-radius: 15px !important; | |
| } | |
| 
 | |
| #debugPreInfo .slimScrollDiv, | |
| #debugResults .slimScrollDiv { | |
|     background: var(--div-background-color-15); | |
| } | |
| 
 | |
| /* Swal popup */ | |
| .swal-overlay--show-modal .swal-modal { | |
|     -webkit-backdrop-filter: blur(10px); | |
|     backdrop-filter: blur(10px); | |
|     background: var(--div-background-color-25); | |
|     border-radius: 15px; | |
| } | |
| 
 | |
| .swal-title { | |
|     color: white; | |
| } | |
| 
 | |
| .swal-overlay--show-modal { | |
|     background: var(--main-bg-color); | |
| } | |
| 
 | |
| /* Mobile*/ | |
| @media (max-width: 480px) { | |
|     * { | |
|         -webkit-backdrop-filter: none !important; | |
|         backdrop-filter: none !important; | |
|     } | |
| 
 | |
|     #page-wrapper { | |
|         background: var(--mobile-bg-color) !important; | |
|         background-size: cover; | |
|         background-repeat: no-repeat; | |
|         width: 100%; | |
|         height: 100%; | |
|     } | |
| 
 | |
|     #side-menu { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     .navbar-header { | |
|         background: var(--div-background-color-25) !important; | |
|     } | |
| 
 | |
|     .navbar-default, | |
|     .show-sidebar .sidebar .sidebar-head { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     .dropdown-menu { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     #internal-Settings { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     .mfp-zoom-out.mfp-ready.mfp-bg { | |
|         opacity: 1 !important; | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     .mfp-wrap { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     .modal-open .modal { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     #page-wrapper { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     #internal-Settings, | |
|     #preloader, | |
|     .preloader, | |
|     .active-tab-Settings, | |
|     .error-page { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| 
 | |
|     html { | |
|         background: var(--mobile-bg-color) !important; | |
|     } | |
| } |