diff --git a/CSS/addons/README.md b/CSS/addons/README.md index ac41a252..12c5e24c 100644 --- a/CSS/addons/README.md +++ b/CSS/addons/README.md @@ -1,8 +1,8 @@ # CSS Addons -## [Organizr](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/) +## [Organizr](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/) -## [Radarr](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr) +## [Radarr](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr) -## [Sonarr](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr) +## [Sonarr](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr) diff --git a/CSS/addons/bazarr/bazarr-4k-logo.css b/CSS/addons/bazarr/bazarr-4k-logo.css index 90138644..287c8e80 100644 --- a/CSS/addons/bazarr/bazarr-4k-logo.css +++ b/CSS/addons/bazarr/bazarr-4k-logo.css @@ -4,7 +4,7 @@ display: none !important; } .header-icon.px-3.m-0.d-none.d-md-block:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/bazarr/bazarr4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/bazarr/bazarr4k.png"); display: inline-block; width: 32px; height: 32px; @@ -22,7 +22,7 @@ display: none !important; } .sidebar-title.d-flex.align-items-center.d-md-none.container:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/bazarr/bazarr4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/bazarr/bazarr4k.png"); display: inline-block; width: 32px; height: 32px; diff --git a/CSS/addons/bazarr/bazarr-4k-logo/bazarr-4k-logo.css b/CSS/addons/bazarr/bazarr-4k-logo/bazarr-4k-logo.css new file mode 100644 index 00000000..6187ce20 --- /dev/null +++ b/CSS/addons/bazarr/bazarr-4k-logo/bazarr-4k-logo.css @@ -0,0 +1,35 @@ +/* Desktop */ +@media (min-width: 752px) { + .header-icon.px-3.m-0.d-none.d-md-block img { + display: none !important; + } + .header-icon.px-3.m-0.d-none.d-md-block:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/bazarr/bazarr-4k-logo/bazarr4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +/* Mobile */ +@media (max-width: 767px) { + .sidebar-title.d-flex.align-items-center.d-md-none.container img { + display: none !important; + } + .sidebar-title.d-flex.align-items-center.d-md-none.container:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/bazarr/bazarr-4k-logo/bazarr4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} diff --git a/CSS/addons/bazarr/bazarr-4k-logo/bazarr4k.png b/CSS/addons/bazarr/bazarr-4k-logo/bazarr4k.png new file mode 100644 index 00000000..7c6c7924 Binary files /dev/null and b/CSS/addons/bazarr/bazarr-4k-logo/bazarr4k.png differ diff --git a/CSS/addons/bazarr/bazarr-darker/bazarr-darker.css b/CSS/addons/bazarr/bazarr-darker/bazarr-darker.css new file mode 100644 index 00000000..96d03ac3 --- /dev/null +++ b/CSS/addons/bazarr/bazarr-darker/bazarr-darker.css @@ -0,0 +1,65 @@ +:root { + --main-bg-color: #313544; + + --modal-bg-color: #252833; + --modal-header-color: #252833; + --modal-footer-color: #252833; + + --drop-down-menu-bg: #252833; + + --button-color: #911f93; + --button-color-hover: #721873; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 145, 31, 147; + --accent-color-hover: rgb(var(--accent-color), .8); + --link-color: #b828bb; + --link-color-hover: #911f93; + --label-text-color: #eee; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #6c757d; + --side-menu-active: #252833; + --side-menu-color: #3a3f51; + --side-menu-link-color: #fff; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #911f93; + --label-info: #5d9cec; + --header-color: #911f93; +} + +/* HEADER */ +.header-container .bg-primary { + background-color: var(--header-color) !important; +} + +/* SIDE MENU */ +.sidebar-container { + background-color: var(--side-menu-color) !important; + color: white !important; +} + +.sidebar-container .sidebar-button { + color: var(--side-menu-link-color) !important; +} + +.sidebar-container .sidebar-button { + background-color: var(--side-menu-color) !important; +} +.sidebar-container .sidebar-button.sb-active, .sidebar-container .sidebar-button.sb-active:hover { + color: var(--side-menu-link-color) !important; + background-color: var(--side-menu-active) !important; +} + + +.sidebar-container .sidebar-button:hover { + background-color: var(--side-menu-active) !important; + color: var(--side-menu-link-color) !important; +} \ No newline at end of file diff --git a/CSS/addons/lidarr/lidarr-darker/lidarr-darker.css b/CSS/addons/lidarr/lidarr-darker/lidarr-darker.css new file mode 100644 index 00000000..16c08f6c --- /dev/null +++ b/CSS/addons/lidarr/lidarr-darker/lidarr-darker.css @@ -0,0 +1,117 @@ +:root { + --main-bg-color: #454545; + + --modal-bg-color: #353535; + --modal-header-color: #353535; + --modal-footer-color: #353535; + + --drop-down-menu-bg: #4d8069; + + --button-color: #5899eb; + --button-color-hover: #4b91ea; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 0, 166, 91; + --accent-color-hover: rgb(0, 166, 91, .8); + --link-color: rgb(0, 166, 91); + --link-color-hover: rgb(0, 166, 91, .8); + --label-text-color: #eee; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #00a65b; + --side-menu-active: #252525; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #1d563d; + --label-info: #5d9cec; + --header-color: #00a65b; + --side-menu-color: #353535; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; +} + +[class*="PageToolbar-toolbar-"] { + background-color: #1d563d; + color: #e1e2e3; +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: #353535; + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ + +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ + +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ + +[class*="Label-default-"] { + border-color: var(--label-color); + background-color: var(--label-color); + color: white; +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: #fff; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +/* SEARCH DROP DOWN */ + +[class*=ArtistSearchInput-containerOpen-] [class*=ArtistSearchInput-artistContainer-] { + border: 1px solid var(--main-bg-color); + background-color: var(--main-bg-color); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} \ No newline at end of file diff --git a/CSS/addons/organizr/README.md b/CSS/addons/organizr/README.md index d60380dd..5765027e 100644 --- a/CSS/addons/organizr/README.md +++ b/CSS/addons/organizr/README.md @@ -1,3 +1,3 @@ # Organizr Addons -## [Glass](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass) +## [Glass](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass) diff --git a/CSS/addons/organizr/glass/README.md b/CSS/addons/organizr/glass/README.md index c6950a34..17d4714a 100644 --- a/CSS/addons/organizr/glass/README.md +++ b/CSS/addons/organizr/glass/README.md @@ -2,8 +2,8 @@ ## Installation -* [Full](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass#Full) -* [Login - Lockscreen only](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass#login---lockscreen-only) +* [Full](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass#Full) +* [Login - Lockscreen only](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass#login---lockscreen-only) @@ -25,9 +25,9 @@ Replace `--main-bg-color` with a wallpaper you have uploaded to Organizr ```css -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/glass-base.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/glass-base.css"; :root { - --main-bg-color: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/example.jpg) center center/cover no-repeat fixed; + --main-bg-color: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/example.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; @@ -90,12 +90,12 @@ Here are the other theme colors if you want to use that instead: If you just want the login and lockscreen css, just add this in custom CSS: ```css -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/glass-login.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/glass-login.css"; ``` You can change the blur background color by adding the variables above. The default is dark. ```css -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/glass-login.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/glass-login.css"; :root { --div-background-color-10: rgba(255, 255, 255, 0.10); --div-background-color-15: rgba(255, 255, 255, 0.15); @@ -106,7 +106,7 @@ You can change the blur background color by adding the variables above. The defa # Screenshots -![](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/screenshots/login.png) -![](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/screenshots/lockscreen.png) -![](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/screenshots/homepage.jpg) -![](https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass/screenshots/settings.jpg) +![](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/screenshots/login.png) +![](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/screenshots/lockscreen.png) +![](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/screenshots/homepage.jpg) +![](https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/organizr/glass/screenshots/settings.jpg) diff --git a/CSS/addons/organizr/glass/glass-base.css b/CSS/addons/organizr/glass/glass-base.css index a9a515a2..74a06516 100644 --- a/CSS/addons/organizr/glass/glass-base.css +++ b/CSS/addons/organizr/glass/glass-base.css @@ -1,7 +1,7 @@ /* 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://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base-old.css" @import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/organizr/glass-base.css"; :root { --main-bg-color: url(https://domain.com/your/hosted/wallpaper.jpg) center center/cover no-repeat fixed; @@ -38,6 +38,7 @@ */ /*Settings */ + .feeds li>div i { color: black !important; } diff --git a/CSS/addons/plex/overseerr-side-menu/overseerr-side-menu.css b/CSS/addons/plex/overseerr-side-menu/overseerr-side-menu.css new file mode 100644 index 00000000..61d4106e --- /dev/null +++ b/CSS/addons/plex/overseerr-side-menu/overseerr-side-menu.css @@ -0,0 +1,111 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PLEX OVERSEERR SIDE MENU */ + +/* APP VARS*/ +:root { + --sidebar-color: #1f2937; + --menu-item: #111827; + --menu-item-hover: #374151; +} + +/* EXTRA CSS */ +[class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"], +[class*="SourceSidebar-sidebar-"] { + background: var(--sidebar-color) !important; + padding-top: 10px; +} + +[class*="SourceSidebarLink-isSelected-"]:before { + background-color: transparent !important; +} + +[class*="NavBar-container-"] { + background: rgb(0 0 0 / 0%) !important; +} + +[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-isSelected-"] { + background: var(--menu-item); + box-shadow: inset 4px 0 0 0 transparent !important; + border-radius: 5px; + margin-bottom: 5px; + +} + +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-title-"] { + color: white; +} + +[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-button-"]:hover, +[class*="SourceSidebar-openSidebar-"] [class*="SourceSidebarLink-isActive-"] { + background: var(--menu-item-hover); + border-radius: 5px; +} + +[class*="SourceSidebarLink-button-"] { + margin-bottom: 5px; +} + +[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] { + background: var(--sidebar-color) !important; +} + +[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="SourceSidebarLink-isSelected-"] { + background: var(--menu-item) !important; +} + +[class*="SourceSidebarContent-expandedSidebarContent-"], +[class*="AllSourcesSidebarContent-container-"] { + padding: 10px; +} + +[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="AllSourcesSidebarContent-container-"] { + padding: 0px; +} + +[class*="SourceSidebarContent-expandedSidebarContent-"] div { + border-radius: 5px; +} + +[class*="SourceSidebarContent-expandedSidebarContent-"] div:hover:not([data-qa-id="sidebarMore"] div) { + background-color: var(--menu-item-hover); +} + +[class*="SourceSidebar-collapsedSidebar-"] [class*="SourceSidebar-sidebar-"] { + border-radius: 0px !important; +} + +[class*="SourceSidebarContent-expandedSidebarContent-"] [class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"] { + box-shadow: none !important; + border-radius: 5px; +} + +[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebar-sidebar-"] [class*="SourceSidebarItem-button-"][class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarItem-isSelected-"][class*="SourceSidebarLink-isSelected-"] { + box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important; + border-radius: 0px; +} + +[class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"]:hover { + box-shadow: none !important; + background: var(--menu-item-hover) !important; +} + +[class*="SourceSidebar-collapsedSidebar-"][class*="SourceSidebarLink-button-"][class*="SidebarLink-sidebarLink-"][class*="Link-default-"][class*="SourceSidebarLink-small-"][class*="SourceSidebarLink-isSelected-"]:hover { + box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important; +} + +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-title-"] { + color: white; +} diff --git a/CSS/addons/plex/plex-alt-logo/SeekPng.com_your-logo-here-png_2467553.png b/CSS/addons/plex/plex-alt-logo/SeekPng.com_your-logo-here-png_2467553.png new file mode 100644 index 00000000..818067b5 Binary files /dev/null and b/CSS/addons/plex/plex-alt-logo/SeekPng.com_your-logo-here-png_2467553.png differ diff --git a/CSS/addons/plex/plex-alt-logo/plex-alt-logo.css b/CSS/addons/plex/plex-alt-logo/plex-alt-logo.css new file mode 100644 index 00000000..6e964fdc --- /dev/null +++ b/CSS/addons/plex/plex-alt-logo/plex-alt-logo.css @@ -0,0 +1,8 @@ +[class*="NavBar-plexLogo-"] { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/plex/plex-alt-logo/SeekPng.com_your-logo-here-png_2467553.png"); + background-position: 50%; + background-repeat: no-repeat; + background-size: contain; + margin: 0 10px; + width: 45px; +} \ No newline at end of file diff --git a/CSS/addons/prowlarr/prowlarr-darker/prowlarr-darker.css b/CSS/addons/prowlarr/prowlarr-darker/prowlarr-darker.css new file mode 100644 index 00000000..767a3200 --- /dev/null +++ b/CSS/addons/prowlarr/prowlarr-darker/prowlarr-darker.css @@ -0,0 +1,119 @@ +:root { + --main-bg-color: #454545; + + --modal-bg-color: #454545; + --modal-header-color: #454545; + --modal-footer-color: #454545; + + --drop-down-menu-bg: #606060; + + --button-color: #5899eb; + --button-color-hover: #4b91ea; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 230, 96, 0; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: rgb(230, 96, 0); + --link-color-hover: rgb(230, 96, 0, .8); + --label-text-color: #eee; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #5d9cec; + --side-menu-active: #333333; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #707070; + --label-info: #5d9cec; + --header-color: #e66000; + --side-menu-color: #595959; + --side-menu-link-color: #e66000; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; +} + +[class*="PageToolbar-toolbar-"] { + background-color: #707070; + color: var(--text); +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: var(--side-menu-color); + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--side-menu-link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ + +[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ + +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ + +[class*="Label-default-"] { + border-color: var(--label-color); + background-color: var(--label-color); + color: white; +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: #fff; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +/* SEARCH DROP DOWN */ + +[class*=IndexerSearchInput-containerOpen-] [class*=IndexerSearchInput-movieContainer-] { + border: 1px solid var(--drop-down-menu-bg); + background-color: var(--drop-down-menu-bg); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} \ No newline at end of file diff --git a/CSS/addons/radarr/README.md b/CSS/addons/radarr/README.md index 830c3a6e..89c74546 100644 --- a/CSS/addons/radarr/README.md +++ b/CSS/addons/radarr/README.md @@ -20,8 +20,8 @@ Examples of how to add it: proxy_set_header Accept-Encoding ""; sub_filter '' -' - +' + '; sub_filter_once on; ``` @@ -30,7 +30,7 @@ sub_filter_once on; ```nginx AddOutputFilterByType SUBSTITUTE text/html - Substitute 's| ' + Substitute 's| ' ';|' ``` @@ -40,7 +40,7 @@ AddOutputFilterByType SUBSTITUTE text/html filter rule { content_type text/html.* search_pattern - replacement "" + replacement "" } ``` @@ -49,6 +49,6 @@ filter rule { Just add another import line. ```css -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/THEME.css"; -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/radarr/THEME.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr-4k-logo.css"; ``` \ No newline at end of file diff --git a/CSS/addons/radarr/radarr-4k-logo.css b/CSS/addons/radarr/radarr-4k-logo.css index ab619006..bf801719 100644 --- a/CSS/addons/radarr/radarr-4k-logo.css +++ b/CSS/addons/radarr/radarr-4k-logo.css @@ -4,7 +4,7 @@ display:none !important; } .navbar > .container-fluid .navbar-brand:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr4k.png"); display: inline-block; width: 128px; height: 128px; @@ -24,7 +24,7 @@ display: inline !important; } .navbar > .container-fluid .navbar-brand:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr4k.png"); display: inline-block; width: 32px; height: 32px; @@ -43,7 +43,7 @@ display: none !important; } [class*="PageHeader-logoContainer-"]:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr4k-v3.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr4k-v3.png"); display: inline-block; width: 148px; height: 48px; @@ -60,7 +60,7 @@ display: none !important; } [class*="PageHeader-logoContainer-"]{ - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-v3-mobile.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr-v3-mobile.png"); display: inline-block; width: 32px; height: 32px; @@ -80,7 +80,7 @@ } [class*="LoadingPage-page-"]:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr4k-v3.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/radarr/radarr4k-v3.png"); display: inline-block; width: 148px; height: 48px; diff --git a/CSS/addons/radarr/radarr-4k-logo/radarr-4k-logo.css b/CSS/addons/radarr/radarr-4k-logo/radarr-4k-logo.css new file mode 100644 index 00000000..468ad316 --- /dev/null +++ b/CSS/addons/radarr/radarr-4k-logo/radarr-4k-logo.css @@ -0,0 +1,96 @@ +/* Desktop */ +@media (min-width: 752px) { + .navbar-brand>img { + display:none !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo/radarr4k.png"); + display: inline-block; + width: 128px; + height: 128px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } + } + /* Mobile */ + @media (max-width: 767px) { + .navbar-brand .visible-xs img { + display: none !important; + } + .navbar-brand .visible-xs { + display: inline !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo/radarr4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-bottom: -12px; + } + } + +/* Radarr V3*/ +@media (min-width: 752px) { + [class*="PageHeader-logoFull-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo/radarr4k-v3.png"); + display: inline-block; + width: 148px; + height: 48px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +@media (max-width: 767px) { + [class*="PageHeader-logo-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]{ + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo/radarr-v3-mobile.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-left: 20px; + margin-right: 8px; + flex: 0 0 32px; + } +} + +[class*="LoadingPage-logoFull-"] { + display: none !important; +} + +[class*="LoadingPage-page-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/radarr/radarr-4k-logo/radarr4k-v3.png"); + display: inline-block; + width: 148px; + height: 48px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-top: 50px; + margin-right: auto; + margin-left: auto; + +} diff --git a/CSS/addons/radarr/radarr-4k-logo/radarr-v3-mobile.png b/CSS/addons/radarr/radarr-4k-logo/radarr-v3-mobile.png new file mode 100644 index 00000000..65dee236 Binary files /dev/null and b/CSS/addons/radarr/radarr-4k-logo/radarr-v3-mobile.png differ diff --git a/CSS/addons/radarr/radarr-4k-logo/radarr4k-v3.png b/CSS/addons/radarr/radarr-4k-logo/radarr4k-v3.png new file mode 100644 index 00000000..ee888e27 Binary files /dev/null and b/CSS/addons/radarr/radarr-4k-logo/radarr4k-v3.png differ diff --git a/CSS/addons/radarr/radarr-4k-logo/radarr4k.png b/CSS/addons/radarr/radarr-4k-logo/radarr4k.png new file mode 100644 index 00000000..469c3675 Binary files /dev/null and b/CSS/addons/radarr/radarr-4k-logo/radarr4k.png differ diff --git a/CSS/addons/radarr/radarr-darker/radarr-darker.css b/CSS/addons/radarr/radarr-darker/radarr-darker.css new file mode 100644 index 00000000..1b7f3bca --- /dev/null +++ b/CSS/addons/radarr/radarr-darker/radarr-darker.css @@ -0,0 +1,124 @@ +:root { + --main-bg-color: #454545; + + --modal-bg-color: #595959; + --modal-header-color: #595959; + --modal-footer-color: #595959; + + --drop-down-menu-bg: #606060; + + --button-color: #5899eb; + --button-color-hover: #4b91ea; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 255, 194, 48; + --accent-color-hover: rgb(255, 194, 48, .8); + --link-color: rgb(255, 194, 48); + --link-color-hover: rgb(255, 194, 48, .8); + --label-text-color: #eee; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #5d9cec; + --side-menu-active: #333333; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #707070; + --label-info: #5d9cec; + --header-color: #464b51; + --side-menu-color: #595959; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; +} + +[class*="PageToolbar-toolbar-"] { + background-color: #707070; + color: var(--text); +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: var(--side-menu-color); + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ +[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ + +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ + +[class*="Label-default-"] { + border-color: var(--label-color); + background-color: var(--label-color); + color: white; +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: #fff; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +/* SEARCH DROP DOWN */ + +[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { + border: 1px solid var(--drop-down-menu-bg); + background-color: var(--drop-down-menu-bg); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} + +/* SERIES PAGE */ + +[class*="MovieIndexPoster-controls-"] { + background-color: var(--label-color) !important; + color: #fff !important; +} \ No newline at end of file diff --git a/CSS/addons/readarr/readarr-alt-logo/readarr-alt-logo.css b/CSS/addons/readarr/readarr-alt-logo/readarr-alt-logo.css new file mode 100644 index 00000000..b9d59343 --- /dev/null +++ b/CSS/addons/readarr/readarr-alt-logo/readarr-alt-logo.css @@ -0,0 +1,53 @@ +@media (min-width: 752px) { + [class*="PageHeader-logo-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png"); + display: inline-block; + width: 34px; + height: 34px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +@media (max-width: 767px) { + [class*="PageHeader-logo-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png"); + display: inline-block; + width: 34px; + height: 34px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +[class*="LoadingPage-logoFull-"] { + display: none !important; +} + +[class*="LoadingPage-page-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png"); + display: inline-block; + width: 48px; + height: 48px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-top: 50px; + margin-right: auto; + margin-left: auto; + +} diff --git a/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png b/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png new file mode 100644 index 00000000..2d8459b8 Binary files /dev/null and b/CSS/addons/readarr/readarr-alt-logo/readarr_alt.png differ diff --git a/CSS/addons/readarr/readarr-alt-logo/readme.md b/CSS/addons/readarr/readarr-alt-logo/readme.md new file mode 100644 index 00000000..4d6f057a --- /dev/null +++ b/CSS/addons/readarr/readarr-alt-logo/readme.md @@ -0,0 +1,3 @@ +Headphone Icon svg made by monkik from www.flaticon.com + +https://www.flaticon.com/free-icon/music_2503487?term=headset&related_id=2503487 \ No newline at end of file diff --git a/CSS/addons/readarr/readarr-darker/readarr-darker.css b/CSS/addons/readarr/readarr-darker/readarr-darker.css new file mode 100644 index 00000000..6f86088c --- /dev/null +++ b/CSS/addons/readarr/readarr-darker/readarr-darker.css @@ -0,0 +1,126 @@ +:root { + --main-bg-color: #4a4a4b; + + --modal-bg-color: #353535; + --modal-header-color: #353535; + --modal-footer-color: #353535; + + --drop-down-menu-bg: #66001a; + + --button-color: #5899eb; + --button-color-hover: #4b91ea; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 202, 48, 45; + --accent-color-hover: rgb(var(--accent-color), .8); + --link-color: rgb(93, 156, 236); + --link-color-hover: rgb(93, 156, 236, .8); + --label-text-color: #eee; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #1d563d; + --side-menu-active: #252525; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #810020; + --label-info: #5d9cec; + --header-color: #a41726; + --side-menu-color: #353535; + --side-menu-link-color: #ca302d; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; +} + +[class*="PageToolbar-toolbar-"] { + background-color: #810020; + color: #e1e2e3; +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: #353535; + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--side-menu-link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ +[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ +[class*="Label-default-"] { + border-color: var(--label-color); + background-color: var(--label-color); + color: white; +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: #fff; +} +.Label-default-xecWd { + border-color: #810020; + background-color: #810020; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +/* SEARCH DROP DOWN */ +[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { + border: 1px solid var(--drop-down-menu-bg); + background-color: var(--drop-down-menu-bg); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} + +/* AUTHOR PAGE */ + +[class*="AuthorDetailsHeader-headerContent-"], [class*="BookDetailsHeader-headerContent-"] { + color: #fff; + background: #4a4a4b; +} \ No newline at end of file diff --git a/CSS/addons/sonarr/README.md b/CSS/addons/sonarr/README.md index 1e7e5214..38600b65 100644 --- a/CSS/addons/sonarr/README.md +++ b/CSS/addons/sonarr/README.md @@ -20,8 +20,8 @@ Examples of how to add it: proxy_set_header Accept-Encoding ""; sub_filter '' -' - +' + '; sub_filter_once on; ``` @@ -30,7 +30,7 @@ sub_filter_once on; ```nginx AddOutputFilterByType SUBSTITUTE text/html - Substitute 's| ' + Substitute 's| ' ';|' ``` @@ -40,7 +40,7 @@ AddOutputFilterByType SUBSTITUTE text/html filter rule { content_type text/html.* search_pattern - replacement "" + replacement "" } ``` @@ -49,6 +49,6 @@ filter rule { Just add another import line. ```css -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/THEME.css"; -@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/sonarr/THEME.css"; +@import "https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k-logo.css"; ``` \ No newline at end of file diff --git a/CSS/addons/sonarr/sonarr-4k-logo.css b/CSS/addons/sonarr/sonarr-4k-logo.css index 4dc8e3bc..3b7d7d1b 100644 --- a/CSS/addons/sonarr/sonarr-4k-logo.css +++ b/CSS/addons/sonarr/sonarr-4k-logo.css @@ -4,7 +4,7 @@ display:none !important; } .navbar > .container-fluid .navbar-brand:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 128px; height: 128px; @@ -25,7 +25,7 @@ display: inline !important; } .navbar > .container-fluid .navbar-brand:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 64px; height: 64px; @@ -46,7 +46,7 @@ display: inline !important; } .navbar > .container-fluid .navbar-brand:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 32px; height: 32px; @@ -65,7 +65,7 @@ display: none !important; } [class*="PageHeader\/logoContainer\/"]:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 32px; height: 32px; @@ -82,7 +82,7 @@ display: none !important; } [class*="PageHeader\/logoContainer\/"]:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 32px; height: 32px; @@ -99,7 +99,7 @@ } [class*="LoadingPage\/page\/"]:before { - background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/sonarr/sonarr-4k.png"); display: inline-block; width: 48px; height: 48px; diff --git a/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k-logo.css b/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k-logo.css new file mode 100644 index 00000000..b6348d13 --- /dev/null +++ b/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k-logo.css @@ -0,0 +1,53 @@ +@media (min-width: 752px) { + [class*="PageHeader-logo-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +@media (max-width: 767px) { + [class*="PageHeader-logo-"] { + display: none !important; + } + [class*="PageHeader-logoContainer-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +[class*="LoadingPage-logoFull-"] { + display: none !important; +} + +[class*="LoadingPage-page-"]:before { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png"); + display: inline-block; + width: 48px; + height: 48px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-top: 50px; + margin-right: auto; + margin-left: auto; + +} diff --git a/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png b/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png new file mode 100644 index 00000000..a42e2fa5 Binary files /dev/null and b/CSS/addons/sonarr/sonarr-4k-logo/sonarr-4k.png differ diff --git a/CSS/addons/sonarr/sonarr-darker/sonarr-darker.css b/CSS/addons/sonarr/sonarr-darker/sonarr-darker.css new file mode 100644 index 00000000..5efcc267 --- /dev/null +++ b/CSS/addons/sonarr/sonarr-darker/sonarr-darker.css @@ -0,0 +1,125 @@ +:root { + --main-bg-color: #4f566f; + + --modal-bg-color: #3a3f51; + --modal-header-color: #3a3f51; + --modal-footer-color: #3a3f51; + + --drop-down-menu-bg: #3a3f51; + + --button-color: #5899eb; + --button-color-hover: #3483e7; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 53, 197, 244; + --accent-color-hover: rgb(33, 147, 181); + --link-color: #35c5f4; + --link-color-hover: rgb(53, 197, 244, .8); + --label-text-color: #4f566f; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #35c5f4; + --side-menu-active: #252833; + --scroller-hover: #656d8c; + --scroller: #9ea4b9; + --border-color: #4f566f; + --label-color: #4f566f; + --label-info: #5d9cec; + --header-color: #2193b5; + --side-menu-color: #3a3f51; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: var(--side-menu-color); + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ +[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ +[class*=Label-default-] { + border-color: var(--label-color); + background-color: var(--label-color); + color: white; +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: white; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +/* SEARCH DROP DOWN */ +[class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] { + border: 1px solid var(--drop-down-menu-bg); + background-color: var(--drop-down-menu-bg); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} + +/* SERIES PAGE */ +[class*="SeriesIndexPoster-controls-"] { + background-color: var(--label-color) !important; + color: #fff !important; +} + +[class*="SeriesIndexPoster-posterContainer-"]>span>button { + background-color: transparent; + color: white !important; +} + +[class*="SeriesIndexPoster-action-"]:hover, +[class*=SeriesIndexPoster-action-] .fa-search:hover { + color: #ccc !important; +} \ No newline at end of file diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/amber.css b/CSS/addons/unraid/login-page/alien/retro-terminal/amber.css index 5aef886a..dd392a6d 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/amber.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/amber.css @@ -3,12 +3,12 @@ /*--body-after: #ffb52a33; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color:black; --body-before:#ffb52a1a; --body-after: #ffb52a33; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromoyellow.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromoyellow.png) center no-repeat; --text-color: #ffb52a; --input-color: #ffb52a; --link-color: #ffb52a; diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/blue.css b/CSS/addons/unraid/login-page/alien/retro-terminal/blue.css index c0266777..d1e0ab48 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/blue.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/blue.css @@ -3,12 +3,12 @@ /*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color:black; --body-before:#70d7f61a; --body-after: #70d7f633; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromoblue.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromoblue.png) center no-repeat; --text-color: #70d7f6; --input-color: #70d7f6; --link-color: #70d7f6; diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/green.css b/CSS/addons/unraid/login-page/alien/retro-terminal/green.css index f71a3e03..151010d1 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/green.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/green.css @@ -3,12 +3,12 @@ /* --body-after: #00ff7733; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /* --custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color:black; --body-before:#00ff771a; --body-after: #00ff7733; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromogreen.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromogreen.png) center no-repeat; --text-color: #37f592; --input-color: #37f592; --link-color: #37f592; diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/red.css b/CSS/addons/unraid/login-page/alien/retro-terminal/red.css index 95662166..3c261ff0 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/red.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/red.css @@ -3,12 +3,12 @@ /*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color: black; --body-before: #ff00001a; --body-after: #ff000033; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromored.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromored.png) center no-repeat; --text-color: #e22828; --input-color: #e22828; --link-color: #e22828; diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/temp.css b/CSS/addons/unraid/login-page/alien/retro-terminal/temp.css index ee37d7b9..93fb0d2a 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/temp.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/temp.css @@ -3,12 +3,12 @@ /*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color:black; --body-before:#70d7f61a; --body-after: #70d7f633; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat; --text-color: #ffffff; --input-color: #ffffff; --link-color: #ffffff; diff --git a/CSS/addons/unraid/login-page/alien/retro-terminal/white.css b/CSS/addons/unraid/login-page/alien/retro-terminal/white.css index ee37d7b9..93fb0d2a 100644 --- a/CSS/addons/unraid/login-page/alien/retro-terminal/white.css +++ b/CSS/addons/unraid/login-page/alien/retro-terminal/white.css @@ -3,12 +3,12 @@ /*--body-after: #70d7f61a; /* This is the background that creates the crt lines, background uses a transparency of 20% */ /*--custom-text-header-animation: textflicker; /* SET TO NONE TO REMOVE THE FLICKER ANIMATION! */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/retro-terminal/retro-terminal-base.css); :root { --main-bg-color:black; --body-before:#70d7f61a; --body-after: #70d7f633; ---logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat; +--logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/alien/logo/nostromo3.png) center no-repeat; --text-color: #ffffff; --input-color: #ffffff; --link-color: #ffffff; diff --git a/CSS/addons/unraid/login-page/fallout/fallout.css b/CSS/addons/unraid/login-page/fallout/fallout.css index 03497dbb..8d208773 100644 --- a/CSS/addons/unraid/login-page/fallout/fallout.css +++ b/CSS/addons/unraid/login-page/fallout/fallout.css @@ -2,8 +2,8 @@ @import "https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap"; @import "https://fonts.googleapis.com/css?family=VT323"; :root { - --main-bg-color: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png), url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/6Ua3u8.jpg) center center/cover no-repeat fixed; - --logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/unraid/login-page/fallout/logo/vault.png) center no-repeat; + --main-bg-color: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/fallout/wallpaper/rocky-wall.png), url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/fallout/wallpaper/6Ua3u8.jpg) center center/cover no-repeat fixed; + --logo: url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//addons/unraid/login-page/fallout/logo/vault.png) center no-repeat; --text-color: #14F074; --input-color: #14F074; --link-color: #14F074; diff --git a/CSS/addons/unraid/login-page/retro-terminal/js/custom_text_header.js b/CSS/addons/unraid/login-page/retro-terminal/js/custom_text_header.js index 3316325c..78fd4ca9 100644 --- a/CSS/addons/unraid/login-page/retro-terminal/js/custom_text_header.js +++ b/CSS/addons/unraid/login-page/retro-terminal/js/custom_text_header.js @@ -3,7 +3,7 @@ // ACSII slant font // Needs to be inside
-// You must escape any backward slashes. "\\" +// YOU MUST ESCAPE ANY SINGLE BACKSLASHES LIKE SO: \\ let custom_text_header = ` 
                     __                             ___       __  
@@ -13,4 +13,4 @@ let custom_text_header = `
 /_/ /_/\\____/____/\\__/_/   \\____/_/ /_/ /_/\\____/_/_/_/ /_/_/|_|
`; -document.getElementById("login").innerHTML += custom_text_header \ No newline at end of file +document.getElementById("login").innerHTML += custom_text_header diff --git a/CSS/defaults/placeholders.css b/CSS/defaults/placeholders.css new file mode 100644 index 00000000..b0f68013 --- /dev/null +++ b/CSS/defaults/placeholders.css @@ -0,0 +1,34 @@ +input::-webkit-input-placeholder { + color: var(--text) !important; +} + +input:focus::-webkit-input-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text) !important; +} + +input:focus:-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text) !important; +} + +input:focus::-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text) !important; +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover) !important; +} \ No newline at end of file diff --git a/CSS/themes/adguard/adguard-base.css b/CSS/themes/adguard/adguard-base.css index 3a195995..4949782b 100644 --- a/CSS/themes/adguard/adguard-base.css +++ b/CSS/themes/adguard/adguard-base.css @@ -12,6 +12,13 @@ body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text) !important; } @@ -25,12 +32,25 @@ body { body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } + body *::-webkit-scrollbar-thumb { - background: hsla(0,0%,100%,.2); + background: hsla(0, 0%, 100%, .2); } + +body *:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 100%, 0.4); +} + ::-webkit-scrollbar { width: 14px; } @@ -58,17 +78,32 @@ body *::-webkit-scrollbar-thumb { /* TEXT */ a { - color: var(--text) + color: var(--link-color) } a:hover { - color: var(--accent-color-hover); + color: var(--link-color-hover); } a:-webkit-any-link:focus { outline: none; } +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + color: var(--text-hover) +} + /* LOGIN PAGE */ .login .login__form .text-center .h-6 { @@ -83,15 +118,15 @@ a:-webkit-any-link:focus { .login .btn-success:hover { background-color: var(--button-color-hover); border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); } .login .btn-link { - color: var(--text); + color: var(--button-text); } .login .btn-link:hover { - color: var(--text-hover); + color: var(--button-text-hover); } .form__message--error { @@ -109,19 +144,19 @@ a:-webkit-any-link:focus { } .header .btn-outline-secondary { - color: var(--text); + color: var(--button-text); background: var(--button-color); border-color: var(--button-color); } .header .btn-outline-secondary:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); } .nav-tabs .nav-link.active { - border-color: var(--accent-color); - color: var(--accent-color); + border-color: rgb(var(--accent-color)); + color: rgb(var(--accent-color)); background: transparent; } @@ -152,7 +187,11 @@ a:-webkit-any-link:focus { } .footer a:not(.btn) { - color: var(--text); + color: var(--link-color); +} + +.footer a:not(.btn):hover { + color: var(--link-color-hover); } .footer .btn-outline-primary { @@ -163,7 +202,7 @@ a:-webkit-any-link:focus { } .footer .btn-outline-primary:hover { - color: var(--text); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -175,35 +214,45 @@ a:-webkit-any-link:focus { /* BUTTONS */ .container .btn-outline-primary { - color: var(--text); + color: var(--button-text); background-color: var(--button-color); background-image: none; border-color: var(--button-color); } .container .btn-outline-primary:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } .tooltip-container { - background: var(--tooltip-bg); + background: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.toast--success { + background-color: rgba(90, 173, 99, 0.75); } /* CARDS*/ .card { - background-color: rgb(255 255 255 / 8%); + background-color: rgb(0 0 0 / 8%); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); } +.card-header .card-title { + color: rgb(var(--accent-color)); +} + .tooltip-custom__container { - background: var(--tooltip-bg); + background: rgb(var(--accent-color)); + color: var(--label-text-color); } .tooltip-custom__content-link { - color: var(--tooltip-link-color); + color: var(--link-color); } .card-wrap, @@ -245,10 +294,22 @@ a:-webkit-any-link:focus { border-color: #F44336; } +.btn-icon--green, +.icon--green { + color: var(--button-color); +} + /* DROPDOWNS */ .dropdown-menu { color: var(--text); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; background-clip: padding-box; border: 1px solid rgba(0, 40, 100, 0.12); border-radius: 3px; @@ -264,31 +325,57 @@ a:-webkit-any-link:focus { text-decoration: none; background-color: rgb(255 255 255 / 0.08); } + .select__menu { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5); } -.select__option:hover { + +.select__option:hover { background: rgba(255, 255, 255, .08) !important; } -.select__option { + +.select__option { background: rgba(0, 0, 0, 0) !important; border-bottom: solid rgba(255, 255, 255, .1) 1px; } + .select__multi-value__remove { color: black; } -.basic-multi-select .select__control--is-focused, .basic-multi-select .select__control--is-focused:hover { + +.basic-multi-select .select__control--is-focused, +.basic-multi-select .select__control--is-focused:hover { border-color: transparent !important; } +/* INSTALL */ +.setup__container { + background-color: rgb(0 0 0 / 8%); +} + +.setup__progress-wrap { + background-color: rgb(0 0 0 / 50%); +} + +.setup__logo { + filter: invert(1); +} + /* SETTINGS */ .checkbox__label-subtitle, .form__desc, .page-subtitle, .card-title small, .card-subtitle { - color: var(--text); + color: var(--text-hover); } .dropdown-item.active, @@ -302,7 +389,7 @@ a:-webkit-any-link:focus { /* LOGS */ .logs__table { - background-color: rgb(255 255 255 / 8%); + background-color: rgb(0 0 0 / 8%); } .logs__text, @@ -314,7 +401,7 @@ a:-webkit-any-link:focus { color: var(--text) } -.logs__no-data{ +.logs__no-data { color: var(--text); background-color: transparent; } @@ -337,6 +424,11 @@ a:-webkit-any-link:focus { .ReactTable .rt-noData { background: transparent; + color: var(--text-muted); +} + +.ReactTable .-pagination .-btn { + color: var(--text-muted); } .ReactTable .-loading, @@ -344,6 +436,25 @@ a:-webkit-any-link:focus { background: rgba(255, 255, 255, 0.5); } +.ReactTable .rt-thead .rt-th, +.ReactTable .rt-thead .rt-td, +.logs__cell--header__container { + color: var(--text-hover); +} + +.ReactTable .rt-tbody .rt-tr-group { + border-bottom: solid 1px rgb(255 255 255 / 20%); +} + +.table th, +.text-wrap table th, +.table td, +.text-wrap table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + .loading:before { background-color: transparent; } @@ -355,7 +466,7 @@ a:-webkit-any-link:focus { /* FORMS */ .form-control--transparent { - color: var(--text); + color: var(--text-hover); } .form-control--search { @@ -370,7 +481,7 @@ a:-webkit-any-link:focus { } .icon--selected { - background-color: rgb(255 255 255 / 15%); + background-color: rgb(0 0 0 / 15%); border: solid 1px transparent; } @@ -390,11 +501,11 @@ a:-webkit-any-link:focus { .btn-success:disabled { background-color: var(--button-color); border-color: var(--button-color); - color: var(--text); + color: var(--button-text); } .btn-success:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -406,7 +517,7 @@ a:-webkit-any-link:focus { } .btn-secondary { - color: var(--text); + color: var(--button-text); background-color: rgb(255 255 255 / 25%); border-color: rgb(255 255 255 / 0%); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); @@ -414,14 +525,38 @@ a:-webkit-any-link:focus { } .btn-secondary:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: transparent; } +.checkbox__input:checked+.checkbox__label:before { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=); + background-color: rgb(var(--accent-color)); + +} + +.custom-radio .custom-control-input:checked~.custom-control-label::before, +.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before { + background-color: rgb(var(--accent-color)); +} + +.custom-control-input:focus~.custom-control-label::before, +.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before { + -webkit-box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25); + box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25); +} + /* MODALS */ .modal-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .ReactModal__Overlay--after-open { @@ -440,6 +575,13 @@ a:-webkit-any-link:focus { .ReactModal__Content { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid transparent !important; } } @@ -469,4 +611,4 @@ a:-webkit-any-link:focus { ::-webkit-input-placeholder { color: var(--text); -} +} \ No newline at end of file diff --git a/CSS/themes/adguard/aquamarine.css b/CSS/themes/adguard/aquamarine.css index 0572ccd3..8472fbe4 100644 --- a/CSS/themes/adguard/aquamarine.css +++ b/CSS/themes/adguard/aquamarine.css @@ -13,16 +13,4 @@ /* ADGUARD AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; - --tooltip-bg: #009688; - --tooltip-link-color: #f1c40f; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/adguard/dark.css b/CSS/themes/adguard/dark.css index d0c14c01..1d5948cb 100644 --- a/CSS/themes/adguard/dark.css +++ b/CSS/themes/adguard/dark.css @@ -13,16 +13,4 @@ /* ADGUARD DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --tooltip-bg: #1f1f1f; - --tooltip-link-color: #f1c40f; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/adguard/dracula.css b/CSS/themes/adguard/dracula.css new file mode 100644 index 00000000..12db6080 --- /dev/null +++ b/CSS/themes/adguard/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* ADGUARD DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/adguard/hotline.css b/CSS/themes/adguard/hotline.css index d71e4324..141cf240 100644 --- a/CSS/themes/adguard/hotline.css +++ b/CSS/themes/adguard/hotline.css @@ -13,16 +13,4 @@ /* ADGUARD HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --tooltip-bg: #F44336; - --tooltip-link-color: #0b3161; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/adguard/organizr-dark.css b/CSS/themes/adguard/organizr-dark.css index 7ac6ad61..ce07999a 100644 --- a/CSS/themes/adguard/organizr-dark.css +++ b/CSS/themes/adguard/organizr-dark.css @@ -13,16 +13,4 @@ /* ADGUARD ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - --tooltip-bg: #1b1b1b; - --tooltip-link-color: #2cabe3; - --text: #eee; - --text-hover: #fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/adguard/plex.css b/CSS/themes/adguard/plex.css index ccfc62f9..38bf32af 100644 --- a/CSS/themes/adguard/plex.css +++ b/CSS/themes/adguard/plex.css @@ -13,16 +13,4 @@ /* ADGUARD PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --tooltip-bg: #1f1f1f; - --tooltip-link-color: #e5a00d; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/adguard/space-gray.css b/CSS/themes/adguard/space-gray.css index 11ff405a..58bdf04b 100644 --- a/CSS/themes/adguard/space-gray.css +++ b/CSS/themes/adguard/space-gray.css @@ -13,16 +13,4 @@ /* ADGUARD SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/adguard/adguard-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --tooltip-bg: #607D8B; - --tooltip-link-color: #f1c40f; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/aquamarine.css b/CSS/themes/bazarr/aquamarine.css index 4212eeef..f0af5695 100644 --- a/CSS/themes/bazarr/aquamarine.css +++ b/CSS/themes/bazarr/aquamarine.css @@ -13,23 +13,4 @@ /* BAZARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 0, 150, 136; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #bbb; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/bazarr-base.css b/CSS/themes/bazarr/bazarr-base.css index a352e0f6..15a3d32b 100644 --- a/CSS/themes/bazarr/bazarr-base.css +++ b/CSS/themes/bazarr/bazarr-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css"); + * { outline: none; } @@ -93,6 +95,26 @@ a:hover { color: var(--text); } +.table thead th { + color: var(--text-hover); +} + +.table-striped tbody tr:nth-of-type(odd) { + background-color: rgb(0 0 0 / 15%); +} + +h1, +h2, +h3, +h4, +h5, +h6, +.custom-control-label, +label, +.modal-header { + color: var(--text-hover); +} + /* Form Stuff */ .header-container input[type=text] { @@ -130,7 +152,7 @@ a:hover { .form-control[readonly] { background-color: rgb(255 255 255 / 15%); opacity: .7; - color: var(--text); + color: #fff; border: 1px solid rgb(255 255 255 / 15%); } @@ -190,23 +212,49 @@ a:hover { } .sidebar-container .sidebar-button { + color: var(--text) !important; background: transparent } .sidebar-container .sidebar-button:active, .sidebar-container .sidebar-button:focus { - color: #fff; - background-color: hsla(0, 0%, 100%, .08) !important; + color: rgb(var(--accent-color)) !important; + background-color: rgba(0, 0, 0, 0.15) !important; } .sidebar-container .sidebar-button:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background-color: transparent !important; + color: rgb(var(--accent-color)) !important; } -.sidebar-container .sidebar-button.sb-active { - background-color: hsla(0, 0%, 100%, .08); +.content-header.bg-dark .btn-dark:hover { + color: rgb(var(--accent-color)); } +.sidebar-container .sidebar-button.sb-active, +.sidebar-container .sidebar-button.sb-active:hover { + background-color: rgba(0, 0, 0, 0.15) !important; + color: rgb(var(--accent-color)) !important; +} + +.content-header.bg-dark>button { + color: var(--text); +} + +.content-header.bg-dark>button:hover { + color: var(--text-hover); +} + +.content-header.bg-dark .btn-dark { + color: var(--text); +} + +.btn-dark.disabled:hover, +.btn-dark:disabled:hover { + color: var(--text) !important; +} + + .sidebar-container .sidebar-collapse-box.active:before, .sidebar-container .sidebar-button.sb-active:before { background-color: rgb(var(--accent-color)); @@ -217,12 +265,21 @@ a:hover { .sidebar-container.open, .sidebar-container { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } + .sidebar-container .badge-secondary { color: var(--label-text-color); - background-color: var(--queue-color); + background-color: var(--arr-queue-color); } + /* TOP NAV BAR */ .header-container .bg-primary { background-color: rgba(0, 0, 0, .35) !important; @@ -252,23 +309,43 @@ a:hover { /* PAGES */ .content-header.bg-dark { - background: var(--main-bg-color) !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: solid 1px rgba(255, 255, 255, .1); } /* LOGIN */ .bg-light { - background-color: var(--main-bg-color) !important; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + .auth-card { border: 1px solid transparent; } + .auth-card .card-footer { background-color: transparent; border-top: 1px solid rgba(255, 255, 255, .1); } +hr { + border-top: 1px solid rgb(255 255 255 / 10%); +} + .card { background-color: rgba(0, 0, 0, .45); @@ -313,7 +390,12 @@ a:hover { } .badge-primary { - color: #fff; + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); +} + +.text-truncate.badge.badge-secondary { + color: var(--label-text-color); background-color: rgb(var(--accent-color)); } @@ -357,11 +439,27 @@ a:hover { } .modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: 1px solid var(--accent-color); } .modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-top: 1px solid var(--accent-color); } @@ -563,6 +661,14 @@ a:hover { background-color: rgba(var(--accent-color), .5) } +.custom-checkbox .custom-control-input:checked~.custom-control-label:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E"); +} + +input { + color: var(--text-hover) !important; +} + .custom-select:focus { border-color: rgb(var(--accent-color)); outline: 0; @@ -575,9 +681,17 @@ a:hover { } /* DROPDOWN MENU */ -.dropdown-menu { +.dropdown-menu, +.dropdown-header { color: var(--text); - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .dropdown-item { @@ -611,7 +725,14 @@ a:hover { } .selector__menu { - background: var(--modal-bg-color) !important; + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text) } @@ -620,16 +741,19 @@ a:hover { } .custom-selector .selector__option--is-focused { - background-color: rgba(var(--accent-color), .2) + background-color: rgba(var(--accent-color), .2); + color: #fff; } .custom-selector .selector__option--is-focused:active, .custom-selector .selector__option--is-focused:focus { - background-color: rgba(var(--accent-color), .2) + background-color: rgba(var(--accent-color), .2); + color: #fff; } .custom-selector .selector__option--is-selected { background-color: rgb(var(--accent-color)); + color: var(--label-text-color); } .custom-selector .selector__option--is-selected:active { @@ -671,46 +795,38 @@ line { fill: none; } -/* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text) !important; - opacity: .5 !important; -} - -:-moz-placeholder { - color: var(--text) !important; - opacity: .5 !important; -} - -:-ms-input-placeholder { - color: var(--text) !important; - opacity: .5 !important; -} - -::-webkit-input-placeholder { - color: var(--text) !important; - opacity: .5; -} /* TOASTS */ .toast { background: var(--modal-bg-color); - border: 1px solid rgba(0,0,0,.1); - box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid rgba(0, 0, 0, .1); + box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1); color: var(--text) } .toast-header { color: var(--text-hover); background-color: hsla(0, 0%, 0%, .35); - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, .05); } .alert-container .toast-container .toast .toast-body .progress .progress-bar { - text-shadow: -2px -2px 5px rgb(var(--accent-color)),2px -2px 5px rgb(var(--accent-color)),-2px 2px 5px rgb(var(--accent-color)),2px 2px 5px rgb(var(--accent-color)); + text-shadow: -2px -2px 5px rgba(var(--accent-color), .35), 2px -2px 5px rgba(var(--accent-color), .35), -2px 2px 5px rgba(var(--accent-color), .35), 2px 2px 5px rgba(var(--accent-color), .35); overflow: visible } +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(var(--accent-color), .5) 25%, transparent 0, transparent 50%, rgba(var(--accent-color), .5) 0, rgba(var(--accent-color), .5) 75%, transparent 0, transparent); + background-size: 1rem 1rem +} + /* LOGS */ /* Stack traceback */ code.zmdi-language-python-alt { diff --git a/CSS/themes/bazarr/dark.css b/CSS/themes/bazarr/dark.css index bc51efcc..379e5801 100644 --- a/CSS/themes/bazarr/dark.css +++ b/CSS/themes/bazarr/dark.css @@ -13,23 +13,4 @@ /* BAZARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 100, 100, 100; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/dracula.css b/CSS/themes/bazarr/dracula.css index fc71872f..e3f31b90 100644 --- a/CSS/themes/bazarr/dracula.css +++ b/CSS/themes/bazarr/dracula.css @@ -11,25 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* BAZARR AQUAMARINE THEME */ +/* BAZARR DRACULA THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 80, 250, 123; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/bazarr/hotline.css b/CSS/themes/bazarr/hotline.css index 219fa679..d2b29137 100644 --- a/CSS/themes/bazarr/hotline.css +++ b/CSS/themes/bazarr/hotline.css @@ -13,23 +13,4 @@ /* BAZARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #bbb; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/organizr-dark.css b/CSS/themes/bazarr/organizr-dark.css index dee1879e..cb60b2df 100644 --- a/CSS/themes/bazarr/organizr-dark.css +++ b/CSS/themes/bazarr/organizr-dark.css @@ -13,23 +13,4 @@ /* BAZARR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 44, 171, 227; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/plex.css b/CSS/themes/bazarr/plex.css index ae8f3e60..d00ee8e1 100644 --- a/CSS/themes/bazarr/plex.css +++ b/CSS/themes/bazarr/plex.css @@ -13,23 +13,4 @@ /* BAZARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #bbb; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/bazarr/space-gray.css b/CSS/themes/bazarr/space-gray.css index 94dd701e..aab3ba02 100644 --- a/CSS/themes/bazarr/space-gray.css +++ b/CSS/themes/bazarr/space-gray.css @@ -13,23 +13,4 @@ /* BAZARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 96, 125, 139; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #9adfff; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text: #eee; - --text-hover: #fff; - --text-muted: #bbb; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/aquamarine.css b/CSS/themes/bitwarden/aquamarine.css index 427d0763..03725339 100644 --- a/CSS/themes/bitwarden/aquamarine.css +++ b/CSS/themes/bitwarden/aquamarine.css @@ -13,14 +13,4 @@ /* BITWARDEN AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/bitwarden-base.css b/CSS/themes/bitwarden/bitwarden-base.css index 062fa4e5..85b92c22 100644 --- a/CSS/themes/bitwarden/bitwarden-base.css +++ b/CSS/themes/bitwarden/bitwarden-base.css @@ -21,17 +21,32 @@ img.logo { body.layout_frontend, body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } /* LINKS */ -a { +a, +app-vault-groupings .card .card-body a, +app-org-vault-groupings .card .card-body a, +.groupings .card .card-body a { color: var(--link-color); } -a:hover { - color: var(--link-color); - opacity: .8; +a:hover, +app-vault-groupings .card li.active>a:first-of-type, +app-vault-groupings .card li.active>div a:first-of-type, +app-org-vault-groupings .card li.active>a:first-of-type, +app-org-vault-groupings .card li.active>div a:first-of-type, +.groupings .card li.active>a:first-of-type, +.groupings .card li.active>div a:first-of-type { + color: var(--link-color-hover) !important; } /* TEXT */ @@ -40,8 +55,7 @@ a:hover { .modal-header small, .table, .text-body { - color: var(--text) !important; - opacity: .8; + color: var(--text-muted) !important; } .table-hover tbody tr:hover { @@ -49,8 +63,24 @@ a:hover { background-color: rgba(255, 255, 255, .08); } -h3 { - color: white !important; +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +label, +label:not(.form-check-label):not(.btn), +label.bold .card-header:first-child, +.card-header, +.modal-header { + color: var(--text-hover) !important; } /* NAVBAR */ @@ -58,19 +88,22 @@ h3 { background-color: rgb(0 0 0 / 25%) !important; } +.navbar-dark .navbar-nav .show>.nav-link, +.navbar-dark .navbar-nav .active>.nav-link, +.navbar-dark .navbar-nav .nav-link.show, +.navbar-dark .navbar-nav .nav-link.active { + color: rgb(var(--accent-color)); +} + /* CARDS */ .card { background-color: rgba(255, 255, 255, 0.07); } -app-vault-groupings .card .card-body a { - color: var(--text); -} - app-vault-groupings .card li.active>a:first-of-type, app-vault-groupings .card li.active>div a:first-of-type, app-vault-groupings .card li.active>div>.fa { - color: var(--accent-color); + color: rgb(var(--accent-color)); } body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4 { @@ -78,13 +111,20 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator } .password-number { - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* MODALS */ .modal-content, .modal-footer { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .close, @@ -97,7 +137,14 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator } .swal2-popup { - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); border: transparent; } @@ -111,7 +158,14 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator } .swal2-popup .swal2-actions { - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .btn-primary, @@ -143,13 +197,20 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator .form-control:disabled, .form-control[readonly] { - background-color: rgb(255 255 255 / 50%); + background-color: rgb(255 255 255 / 25%); opacity: 1; } /* DROPDOWN MENU */ .dropdown-menu { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid transparent; box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); } @@ -181,7 +242,7 @@ a.text-danger:focus { .list-group-item.active { color: var(--text); background-color: rgb(255 255 255 / 10%); - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } .callout { @@ -196,25 +257,27 @@ a.text-danger:focus { /* BUTTONS */ .btn-link { color: var(--button-color); + color: var(--button-text); } .btn-link:hover { - color: var(--button-color); - opacity: .8; + color: var(--button-color-hover); + color: var(--button-text-hover); transition: 0.15s; } .btn-primary { background-color: var(--button-color); border-color: var(--button-color); + color: var(--button-text); } .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active { - background-color: var(--button-color); - opacity: .8; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + color: var(--button-text-hover); transition: 0.15s; - border-color: var(--button-color) } .btn-primary:focus, @@ -231,26 +294,27 @@ a.text-danger:focus { } .btn[class*="btn-outline-"]:not(:hover), -.swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) { +.swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover), +.swal2-popup .swal2-actions button.swal2-cancel { border-color: var(--button-color); background-color: var(--button-color); - color: var(--text-hover); + color: var(--button-text); } .btn-outline-secondary:hover, .swal2-popup .swal2-actions button.swal2-cancel:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } .btn-outline-secondary:hover:not(:disabled), .swal2-popup .swal2-actions button.swal2-cancel:hover:not(:disabled) { - color: var(--text-hover); + color: var(--button-text-hover); } .btn-outline-primary:hover { - color: var(--text-hover); + color: var(--button-text-hover) !important; background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -258,15 +322,21 @@ a.text-danger:focus { .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, -.show>.btn-outline-primary.dropdown-toggle:focus { - box-shadow: none; +.show>.btn-outline-primary.dropdown-toggle:focus, +.btn-outline-secondary:focus, +.swal2-popup .swal2-actions button.swal2-cancel:focus, +.btn-outline-secondary.focus, +.swal2-popup .swal2-actions button.focus.swal2-cancel, +.btn-outline-primary:focus, +.btn-outline-primary.focus { + box-shadow: 0 0 0 0.2rem rgb(var(--accent-color), .5); } .btn-outline-secondary:not(:disabled):not(.disabled):active, @@ -275,7 +345,7 @@ a.text-danger:focus { .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled).active, .show>.btn-outline-secondary.dropdown-toggle, .swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-cancel { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -293,7 +363,7 @@ a.text-danger:focus { .swal2-popup .swal2-actions button.disabled.swal2-confirm, .btn-primary:disabled, .swal2-popup .swal2-actions button.swal2-confirm:disabled { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color); border-color: var(--button-color); opacity: .8; @@ -301,7 +371,14 @@ a.text-danger:focus { /* Org */ .org-nav { - background-color: var(--main-bg-color); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .org-nav .nav-tabs a { @@ -309,7 +386,7 @@ a.text-danger:focus { } .org-nav .nav-tabs a.active { - border-top: 3px solid var(--accent-color); + border-top: 3px solid rgb(var(--accent-color)); } .nav-tabs .nav-link.active, @@ -319,51 +396,77 @@ a.text-danger:focus { border-color: transparent; } -app-vault-groupings .card .card-body a, -app-org-vault-groupings .card .card-body a { - color: var(--text); -} app-vault-groupings .card .card-body a:hover.text-muted { color: #fff !important; opacity: 1 !important; } + app-vault-groupings .card li.active>a:first-of-type, app-vault-groupings .card li.active>div a:first-of-type, app-org-vault-groupings .card li.active>a:first-of-type, app-org-vault-groupings .card li.active>div a:first-of-type { font-weight: bold; - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text) !important; - opacity: .5; +input::-webkit-input-placeholder { + color: var(--text); } -:-moz-placeholder { - color: var(--text) !important; - opacity: .5; +input:focus::-webkit-input-placeholder { + color: #000; } -:-ms-input-placeholder { - color: var(--text) !important; - opacity: .5; +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text); } -::-webkit-input-placeholder { - color: var(--text) !important; - opacity: .5; +input:focus:-moz-placeholder { + color: #000; +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: #000; +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: #000; } /* ADMIN PAGE */ .bg-light { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .bg-light .navbar { - background-color: var(--main-bg-color) !important; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* Cards */ @@ -390,4 +493,10 @@ app-org-vault-groupings .card li.active>div a:first-of-type { cursor: auto; background-color: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 10%); +} + +.text-muted, +.card-header small, +.modal-header small { + color: var(--text-muted) !important; } \ No newline at end of file diff --git a/CSS/themes/bitwarden/dark.css b/CSS/themes/bitwarden/dark.css index d42e7b42..588b8a0a 100644 --- a/CSS/themes/bitwarden/dark.css +++ b/CSS/themes/bitwarden/dark.css @@ -13,14 +13,4 @@ /* BITWARDEN DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/dracula.css b/CSS/themes/bitwarden/dracula.css new file mode 100644 index 00000000..e3f51237 --- /dev/null +++ b/CSS/themes/bitwarden/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* BITWARDEN DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/hotline.css b/CSS/themes/bitwarden/hotline.css index b2198145..68c7f14e 100644 --- a/CSS/themes/bitwarden/hotline.css +++ b/CSS/themes/bitwarden/hotline.css @@ -13,14 +13,4 @@ /* BITWARDEN HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/organizr-dark.css b/CSS/themes/bitwarden/organizr-dark.css index 7f46a930..5c3916eb 100644 --- a/CSS/themes/bitwarden/organizr-dark.css +++ b/CSS/themes/bitwarden/organizr-dark.css @@ -13,14 +13,4 @@ /* BITWARDEN ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #2cabe3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/plex.css b/CSS/themes/bitwarden/plex.css index 076b889c..dd968b41 100644 --- a/CSS/themes/bitwarden/plex.css +++ b/CSS/themes/bitwarden/plex.css @@ -13,14 +13,4 @@ /* BITWARDEN PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/space-gray.css b/CSS/themes/bitwarden/space-gray.css index 39bfdf99..0a68dfad 100644 --- a/CSS/themes/bitwarden/space-gray.css +++ b/CSS/themes/bitwarden/space-gray.css @@ -13,14 +13,4 @@ /* BITWARDEN SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/aquamarine.css b/CSS/themes/calibreweb/aquamarine.css index c083c3db..5ec6cb35 100644 --- a/CSS/themes/calibreweb/aquamarine.css +++ b/CSS/themes/calibreweb/aquamarine.css @@ -14,11 +14,4 @@ /* CALIBRE-WEB AQUAMARINE THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --color-primary: #12afa0; - --color-secondary: #009688; - --color-secondary-hover: #12afa0; - --color-background-mobile: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/calibreweb-base.css b/CSS/themes/calibreweb/calibreweb-base.css index 8d587c84..1c661b42 100644 --- a/CSS/themes/calibreweb/calibreweb-base.css +++ b/CSS/themes/calibreweb/calibreweb-base.css @@ -1,44 +1,337 @@ - + /* dP dP dP */ + /* 88 88 88 */ + /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ + /* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ + /* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ + /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ + /* 88 */ + /* dP */ + + /* Made by @gilbN */ + /* https://htpc.deathbybandaid.net/assets/theme.park */ + + /* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ + /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ + /* APP VARS*/ + :root { + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); + } + *, + *:focus, + *:active, + .bootstrap-select .dropdown-toggle:focus, + .bootstrap-select>select.mobile-device:focus+.dropdown-toggle { + outline: none !important; + } + + body:not(.read-frame) { + background: var(--main-bg-color) !important; + background-image: none; + } + + .blur-wrapper:after { + background: var(--main-bg-color) !important; + } + + body>.container-fluid { + background: var(--main-bg-color); + } + + body.login:not(.read-frame), + body.shelfcreate, + body.shelfedit { + background: var(--main-bg-color) !important; + } + + @media only screen and (max-width: 767px) { + .navbar-collapse.collapse { + background: var(--modal-bg-color) !important; + } + } + + /* Book cover border */ + .container-fluid .book .cover span img { + border: 1px solid transparent; + } + + /* Buttons */ + .btn-default a, + .btn-default a:hover { + color: var(--text); + } + + /* TP */ + + /* TEXT */ + + .h1, + .h2, + .h3, + .h4, + .h5, + .h6, + h1, + h2, + h3, + h4, + h5, + h6, + body.admin>div.container-fluid>div>div.col-sm-10>div.container-fluid>div.row:first-of-type>div.col>h2:before, + body.admin>div.container-fluid>div>div.col-sm-10>div.discover>h2:first-of-type:before, + body.edituser.admin>div.container-fluid>div.row-fluid>div.col-sm-10>div.discover>h1:before, + body.newuser.admin>div.container-fluid>div.row-fluid>div.col-sm-10>div.discover>h1:before, + .container-fluid .book .meta .author, + .container-fluid .book .meta .author>a:hover, + .well>h2, + body:not(.admin)>div.container-fluid>div>div.col-sm-10>div.discover:only-of-type>h2 { + color: var(--text-hover) !important; + } + + + body, + html, + p { + color: var(--text) !important; + } + + .home-btn>a, + .plexBack>a, + .container-fluid .book .meta .author, + .container-fluid .book .meta .author>a { + color: var(--text); + } + + .home-btn>a:hover, + body>div.navbar.navbar-default.navbar-static-top>div>div.home-btn>a:hover:before, + .plexBack:not(.noBack):hover>a, + .form-group>label, + label, + body.authorlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.catlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.langlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.me>div.container-fluid>div>div.col-sm-10>div.discover:before, + body.serieslist>div.container-fluid>div>div.col-sm-10>div.container:before { + color: var(--text-hover) + } + + /* LINKS */ + a, + body.admin, + body.admin td>a { + color: var(--link-color); + } + + a:hover, + body.admin td>a:hover { + color: var(--link-color-hover); + } + + .navigation .create-shelf a, + .meta>a>p { + color: var(--link-color) !important; + } + + .navigation .create-shelf a:hover, + .author>a:hover, + .meta>a>p:hover { + color: var(--link-color-hover) !important; + } + + /* tables */ + + th, + body.tasks>div.container-fluid>div>div.col-sm-10>div.discover>div.bootstrap-table>div.fixed-table-container>div.fixed-table-body>#table>thead>tr>th>.th-inner { + color: var(--text-hover) !important; + } + + + /* MODAL */ + .modal-content { + background: var(--modal-bg-color); + } + + #GeneralDeleteModal .bg-danger { + background: var(--modal-bg-color); + } + + /* ICONS */ + .glyphicon, + #add-to-shelf>span, + #btnGroupDrop1>span, + #readbtn>span, + #sendbtn>span, + .book-meta .btn-toolbar>.btn-group>.btn-group:nth-child(1)>a:first-of-type>span, + .book-meta .btn-toolbar>.btn-group>.btn-warning>span, + .btn-toolbar>.btn-group>#btnGroupDrop2>span, + .btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2>span, + div[aria-label="Edit/Delete book"]>.btn>span { + color: var(--text); + + } + + #add-to-shelf:hover span, + #btnGroupDrop1:hover>span, + #readbtn:hover>span, + #sendbtn:hover>span, + .book-meta .btn-toolbar>.btn-group>.btn-group:nth-child(1)>a:first-of-type:hover>span, + .book-meta .btn-toolbar>.btn-group>.btn-warning:hover>span, + .btn-toolbar>.btn-group>#btnGroupDrop2:hover>span, + .btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2:hover>span, + div[aria-label="Edit/Delete book"]>.btn>span:hover, + #btnGroupDrop1[aria-expanded=true]>span, + #shelf-actions>.btn-group.open>#add-to-shelf>span { + color: var(--text-hover); + } + + + /* DROPDOWN MENU */ + .dropdown-menu { + background: var(--drop-down-menu-bg) !important; + } + + .dropdown-menu>li>a { + color: var(--text); + } + + .dropdown-menu>li>a:focus, + .dropdown-menu>li>a:hover { + color: var(--text-hover); + background: hsla(0, 0%, 100%, .08); + } + + /* SIDEMENU */ + .navigation li a:hover .glyphicon, + .navigation li a:hover { + color: rgb(var(--accent-color)); + } + + .navigation li a { + color: var(--text); + } + + .navigation .nav-head { + color: var(--text-hover); + } + + body>div.navbar.navbar-default.navbar-static-top>div>div.navbar-header>a:hover { + color: var(--accent-color-hover) !important; + -webkit-transition: color .2s; + -o-transition: color .2s; + transition: color .2s; + background-color: rgba(0, 0, 0, .55) !important; + } + + /* NAVBAR */ + .navbar-default .navbar-nav>li>a:focus .glyphicon, + .navbar-default .navbar-nav>li>a:hover .glyphicon { + color: var(--text-hover) !important; + } + + /* BUTTONS */ + + + .btn-primary, + .btn-primary>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf>span::before) { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + } + + .btn-primary:hover:not(#add-to-shelf), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not(#add-to-shelf) { + border-color: var(--button-color-hover); + } + + .btn-primary.active, + .btn-primary:active, + .btn-primary:focus, + .btn-primary:hover, + .open .dropdown-toggle.btn-primary, + .btn-primary:focus>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span), + .btn-primary:active>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span) { + background-color: var(--button-color-hover); + } + + .btn-primary.active.focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary.active:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary.active:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active.focus:not(#edit_book):not(#add-to-shelf:not([data-original-title="Download :"])):not(#btnGroupDrop1), + .btn-primary:active:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary.focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:focus>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1) { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + } + + .book-meta>.bookinfo .btn-info, + .book-meta>.bookinfo .btn-success { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); + font-size: 13px; + display: inline-block; + border-radius: 4px; + vertical-align: middle; + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; + -webkit-transition: background-color .2s, color .2s; + -o-transition: background-color .2s, color .2s; + transition: background-color .2s, color .2s; + text-transform: uppercase; + } + + .book-meta>.bookinfo .btn-info:hover, + .book-meta>.bookinfo .btn-success:hover { + color: var(--label-text-color); + text-decoration: none; + background: var(--accent-color-hover); + } + + [data-target="#fileModal"] span { + color: var(--button-text); + } + + [data-target="#fileModal"]:hover span { + color: var(--button-text-hover); + } + + /* ALERT */ + + .alert { + background: var(--modal-bg-color); + color: var(--text-hover); + } + + /* SERIES PAGE */ + /* from caliBlur_overide.css */ + .cover .badge { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); + position: absolute; + top: 0; + left: 0; + border-radius: 0; + padding: 0 8px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); + line-height: 24px; + } + .cover { + box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); + } -/* dP dP dP */ -/* 88 88 88 */ -/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ -/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ -/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ -/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ -/* 88 */ -/* dP */ - -/* Made by @gilbN */ -/* https://htpc.deathbybandaid.net/assets/theme.park */ - -/* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ -/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ -body:not(.read-frame) { - background: var(--main-bg-color) !important; - background-image: none; -} -.blur-wrapper:after { - background: var(--modal-bg-color) !important; -} -body>.container-fluid { - background: var(--main-bg-color); -} -body.login:not(.read-frame), body.shelfcreate, body.shelfedit { - background: var(--main-bg-color) !important; -} -@media only screen and (max-width: 767px) { - .navbar-collapse.collapse { - background: var(--modal-bg-color) !important; - } - } -/* Book cover border */ -.container-fluid .book .cover span img { - border: 1px solid transparent; -} - -/* Buttons */ -.btn-default a, -.btn-default a:hover { - color: var(--text); -} + .cover .read { + padding: 0 0; + line-height: 15px; + } + body.serieslist.grid-view div.container-fluid > div > div.col-sm-10::before { + display: none; + } \ No newline at end of file diff --git a/CSS/themes/calibreweb/dark.css b/CSS/themes/calibreweb/dark.css index 020b66bd..8c16fb59 100644 --- a/CSS/themes/calibreweb/dark.css +++ b/CSS/themes/calibreweb/dark.css @@ -14,11 +14,4 @@ /* CALIBRE-WEB DARK THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --color-primary: #F9BE03; - --color-secondary: #CC7B19; - --color-secondary-hover: #E59029; - --color-background-mobile: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/dracula.css b/CSS/themes/calibreweb/dracula.css new file mode 100644 index 00000000..8262a3cb --- /dev/null +++ b/CSS/themes/calibreweb/dracula.css @@ -0,0 +1,17 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* CALIBRE-WEB DRACULA THEME */ +/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/hotline.css b/CSS/themes/calibreweb/hotline.css index 59a066c4..1ad7f4e3 100644 --- a/CSS/themes/calibreweb/hotline.css +++ b/CSS/themes/calibreweb/hotline.css @@ -14,11 +14,4 @@ /* CALIBRE-WEB HOTLINE THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --color-primary: #ff6155; - --color-secondary: #F44336; - --color-secondary-hover: #0b3161; - --color-background-mobile: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/organizr-dark.css b/CSS/themes/calibreweb/organizr-dark.css index 8a534e75..62d517ca 100644 --- a/CSS/themes/calibreweb/organizr-dark.css +++ b/CSS/themes/calibreweb/organizr-dark.css @@ -14,11 +14,4 @@ /* CALIBRE-WEB ORGANIZR-DARK THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --color-primary: #2cabe3; - --color-secondary: #2cabe3; - --color-secondary-hover: rgb(44 171 227 / .8); - --color-background-mobile: #1f1f1f; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/calibreweb/space-gray.css b/CSS/themes/calibreweb/space-gray.css index 9028dc67..d8943037 100644 --- a/CSS/themes/calibreweb/space-gray.css +++ b/CSS/themes/calibreweb/space-gray.css @@ -14,11 +14,4 @@ /* CALIBRE-WEB SPACE GRAY THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/calibreweb/calibreweb-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --color-primary: #c3dde8; - --color-secondary: #81a6b7; - --color-secondary-hover: #607D8B; - --color-background-mobile: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/deluge/aquamarine.css b/CSS/themes/deluge/aquamarine.css index 56483791..b09556c2 100644 --- a/CSS/themes/deluge/aquamarine.css +++ b/CSS/themes/deluge/aquamarine.css @@ -13,10 +13,4 @@ /* DELUGE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #009688; - --button-color: #009688; - --button-color-hover: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/deluge/dark.css b/CSS/themes/deluge/dark.css index b5ef983d..3047b1e3 100644 --- a/CSS/themes/deluge/dark.css +++ b/CSS/themes/deluge/dark.css @@ -13,10 +13,4 @@ /* DELUGE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --progress-color: #3d3d3d; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/deluge/deluge-base.css b/CSS/themes/deluge/deluge-base.css index bb239390..d49c7f19 100644 --- a/CSS/themes/deluge/deluge-base.css +++ b/CSS/themes/deluge/deluge-base.css @@ -1,2183 +1,2453 @@ - - -/* dP dP dP */ -/* 88 88 88 */ -/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ -/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ -/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ -/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ -/* 88 */ -/* dP */ + /* dP dP dP */ + /* 88 88 88 */ + /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ + /* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ + /* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ + /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ + /* 88 */ + /* dP */ -/* Made by @gilbN */ -/* https://htpc.deathbybandaid.net/assets/theme.park */ + /* Made by @gilbN */ + /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* Based on https://github.com/HalianElf/Deluge-Dark/blob/master/deluge.css */ - - @import url('https://fonts.googleapis.com/css?family=Roboto'); - - html { - background: var(--main-bg-color); - color: #FFF; - font-family: 'Roboto', sans-serif !important; - } - - input { - color: #FFF !important; - } - - /* scroller */ - ::-webkit-scrollbar-corner { - background-color: hsla(0,0%,100%,.08); - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - background: rgba(0, 0, 0, .25); - - } - ::-webkit-scrollbar-thumb { - -webkit-border-radius: 2px; - border-radius: 2px; - background-color: hsla(0,0%,100%,.08); - } - - .x-grid3-header table, .x-grid3-body table { - border-collapse: collapse; - } - - .ext-el-mask { - background-color: rgba(0, 0, 0, 0.25); - } - - .ext-el-mask-msg { - border-color:#999; - background-color:#f000; - //background-image: url(../images/gray/panel/white-top-bottom.gif); - background-position: 0 -1px; - } - .ext-el-mask-msg div { - background-color: #eee; - border-color:#d0d0d0; - color:#222; - font:normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-mask-loading div { - background-color:#fbfbfb; - //background-image: url(../images/default/grid/loading.gif); - } - - .x-item-disabled { - color: #aaaaaa; - } - - .x-item-disabled * { - color: #aaaaaa !important; - } - - .x-splitbar-proxy { - background-color: #aaa; - } - - .x-color-palette a { - border-color:#fff; - } - - .x-color-palette a:hover, .x-color-palette a.x-color-palette-sel { - border-color:#CFCFCF; - background-color: #eaeaea; - } - .x-deluge-plugins { - background: transparent; - } - .x-deluge-all { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/all.png); - background-position: left center; - } - - .x-deluge-downloading, .x-btn .x-deluge-downloading, .x-deluge-peer { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/dling.png); - background-position: left center; - } - - .x-deluge-seeding, .x-btn .x-deluge-seeding, .deluge-torrents .seeding, .x-deluge-seed { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/uling.png); - background-position: left center; - } - - .x-deluge-active, .x-deluge-traffic, .x-btn .x-deluge-traffic { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/active.png); - background-position: left center; - } - - .x-deluge-paused, .x-btn .x-deluge-paused, .deluge-torrents .paused { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/paused.png); - background-position: left center; - } - - .x-deluge-queued, .x-btn .x-deluge-queued, .deluge-torrents .queued { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/queued.png); - background-position: left center; - } - - .x-deluge-checking, .deluge-torrents .checking { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/checking.png); - background-position: left center; - } - - .x-deluge-error, .deluge-torrents .error, .icon-error, .x-not-connected { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/error.png) !important; - background-position: left center; - } - - .icon-ok { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/ok.png) !important; - background-position: left center; - } - - .x-deluge-connections, .x-btn .x-deluge-connections { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connections.png) !important; - background-position: left center; - } - - .x-deluge-freespace, .x-btn .x-deluge-freespace { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/harddrive.png) !important; - background-position: left center; - } - - .icon-move { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/move.png) !important; - background-position: left center; - } - - .icon-recheck, .x-deluge-find-more, .x-btn .x-deluge-find-more { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/search.png) !important; - background-position: left center; - } - - .icon-edit-trackers, .icon-edit, .x-deluge-edit-trackers, .x-btn .x-deluge-edit-trackers { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/edit.png) !important; - background-position: left center; - } - - .xg-hmenu-sort-asc .x-menu-item-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/ascending.png) !important; - background-position: left center; - } - - .xg-hmenu-sort-desc .x-menu-item-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/descending.png) !important; - background-position: left center; - } - - .icon-update-tracker { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/update.png) !important; - background-position: left center; - } - - .icon-queue, .icon-upload-slots { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/queue.png) !important; - background-position: left center; - } - - .x-deluge-install-plugin, .x-btn .x-deluge-install-plugin { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/plugin.png) !important; - background-position: left center; - } - - .x-deluge-connect-window-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; - background-position: left center; - } - - .x-deluge-connect-window-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; - background-position: left center; - } - - .x-deluge-connect-window-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; - background-position: left center; - } - - .icon-top { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/top.png) !important; - background-position: left center; - } - - .icon-bottom { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/bottom.png) !important; - background-position: left center; - } - - /* + /* Based on https://github.com/HalianElf/Deluge-Dark/blob/master/deluge.css */ + + @import url('https://fonts.googleapis.com/css?family=Roboto'); + + html { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); + font-family: 'Roboto', sans-serif !important; + } + + input { + color: #FFF !important; + } + + /* scroller */ + ::-webkit-scrollbar-corner { + background-color: hsla(0, 0%, 100%, .08); + } + + ::-webkit-scrollbar { + width: 10px; + height: 10px; + background: rgba(0, 0, 0, .25); + + } + + ::-webkit-scrollbar-thumb { + -webkit-border-radius: 2px; + border-radius: 2px; + background-color: hsla(0, 0%, 100%, .08); + } + + .x-grid3-header table, + .x-grid3-body table { + border-collapse: collapse; + } + + .ext-el-mask { + background-color: rgba(0, 0, 0, 0.25); + } + + .ext-el-mask-msg { + border-color: #999; + background-color: #f000; + //background-image: url(../images/gray/panel/white-top-bottom.gif); + background-position: 0 -1px; + } + + .ext-el-mask-msg div { + background-color: #eee; + border-color: #d0d0d0; + color: #222; + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-mask-loading div { + background-color: #fbfbfb; + //background-image: url(../images/default/grid/loading.gif); + } + + .x-item-disabled { + color: #aaaaaa; + } + + .x-item-disabled * { + color: var(--text-muted) !important; + } + + .x-splitbar-proxy { + background-color: #aaa; + } + + .x-color-palette a { + border-color: #fff; + } + + .x-color-palette a:hover, + .x-color-palette a.x-color-palette-sel { + border-color: #CFCFCF; + background-color: #eaeaea; + } + + .x-deluge-plugins { + background: transparent; + } + + .x-deluge-all { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/all.png); + background-position: left center; + } + + .x-deluge-downloading, + .x-btn .x-deluge-downloading, + .x-deluge-peer { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/dling.png); + background-position: left center; + } + + .x-deluge-seeding, + .x-btn .x-deluge-seeding, + .deluge-torrents .seeding, + .x-deluge-seed { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/uling.png); + background-position: left center; + } + + .x-deluge-active, + .x-deluge-traffic, + .x-btn .x-deluge-traffic { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/active.png); + background-position: left center; + } + + .x-deluge-paused, + .x-btn .x-deluge-paused, + .deluge-torrents .paused { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/paused.png); + background-position: left center; + } + + .x-deluge-queued, + .x-btn .x-deluge-queued, + .deluge-torrents .queued { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/queued.png); + background-position: left center; + } + + .x-deluge-checking, + .deluge-torrents .checking { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/checking.png); + background-position: left center; + } + + .x-deluge-error, + .deluge-torrents .error, + .icon-error, + .x-not-connected { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/error.png) !important; + background-position: left center; + } + + .icon-ok { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/ok.png) !important; + background-position: left center; + } + + .x-deluge-connections, + .x-btn .x-deluge-connections { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connections.png) !important; + background-position: left center; + } + + .x-deluge-freespace, + .x-btn .x-deluge-freespace { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/harddrive.png) !important; + background-position: left center; + } + + .icon-move { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/move.png) !important; + background-position: left center; + } + + .icon-recheck, + .x-deluge-find-more, + .x-btn .x-deluge-find-more { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/search.png) !important; + background-position: left center; + } + + .icon-edit-trackers, + .icon-edit, + .x-deluge-edit-trackers, + .x-btn .x-deluge-edit-trackers { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/edit.png) !important; + background-position: left center; + } + + .xg-hmenu-sort-asc .x-menu-item-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/ascending.png) !important; + background-position: left center; + } + + .xg-hmenu-sort-desc .x-menu-item-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/descending.png) !important; + background-position: left center; + } + + .icon-update-tracker { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/update.png) !important; + background-position: left center; + } + + .icon-queue, + .icon-upload-slots { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/queue.png) !important; + background-position: left center; + } + + .x-deluge-install-plugin, + .x-btn .x-deluge-install-plugin { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/plugin.png) !important; + background-position: left center; + } + + .x-deluge-connect-window-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; + background-position: left center; + } + + .x-deluge-connect-window-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; + background-position: left center; + } + + .x-deluge-connect-window-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection_small.png) !important; + background-position: left center; + } + + .icon-top { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/top.png) !important; + background-position: left center; + } + + .icon-bottom { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/bottom.png) !important; + background-position: left center; + } + + /* .x-color-palette em:hover, .x-color-palette span:hover{ background-color: #eaeaea; } */ - - .x-color-palette em { - border-color:#aca899; - } - - .x-ie-shadow { - background-color:#777; - } - - .x-shadow .xsmc { - //background-image: url(../images/default/shadow-c.png); - } - - .x-shadow .xsml, .x-shadow .xsmr { - //background-image: url(../images/default/shadow-lr.png); - } - - .x-shadow .xstl, .x-shadow .xstc, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbc, .x-shadow .xsbr{ - //background-image: url(../images/default/shadow.png); - } - - .loading-indicator { - font-size: 11px; - //background-image: url(../images/default/grid/loading.gif); - } - - .x-spotlight { - background-color: #ccc; - } - - .x-tab-panel-header, .x-tab-panel-footer { - background: var(--main-bg-color); - border-color:#d0d0d0; - overflow:hidden; - zoom:1; - padding-bottom: 0; - } - - .x-tab-panel-header, .x-tab-panel-footer { - border-color:transparent; - } - - ul.x-tab-strip-top { - background-color: rgba(0, 0, 0, 0.25); - background-image: none; - border-bottom-color: transparent; - } - - ul.x-tab-strip-bottom{ - background-color: rgba(0, 0, 0, 0.25); - //background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif); - border-top-color:transparent; - } - - .x-tab-panel-header-plain .x-tab-strip-spacer, - .x-tab-panel-footer-plain .x-tab-strip-spacer { - border-color:transparent; - background-color: transparent; - } - - .x-tab-strip span.x-tab-strip-text { - font:normal 11px 'Roboto', tahoma,arial,helvetica; - color:#aaaaaa; - } - - .x-tab-strip-over span.x-tab-strip-text { - color:#ffffff; - } - - .x-tab-strip-active span.x-tab-strip-text { - color:#cccccc; - font-weight:bold; - } - - .x-tab-strip-disabled .x-tabs-text { - color:#aaaaaa; - } - - .x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner{ - background-image: none; - background-color: transparent; - } - ul.x-tab-strip li { - float: left; - margin-left: 2px; - background: rgba(0, 0, 0, 0.25); - } - .x-tab-strip-bottom .x-tab-right { - //background-image: url(../images/gray/tabs/tab-btm-inactive-right-bg.gif); - } - - .x-tab-strip-bottom .x-tab-left { - //background-image: url(../images/gray/tabs/tab-btm-inactive-left-bg.gif); - } - - .x-tab-strip-bottom .x-tab-strip-over .x-tab-left { - //background-image: url(../images/gray/tabs/tab-btm-over-left-bg.gif); - } - - .x-tab-strip-bottom .x-tab-strip-over .x-tab-right { - //background-image: url(../images/gray/tabs/tab-btm-over-right-bg.gif); - } - - .x-tab-strip-bottom .x-tab-strip-active .x-tab-right { - //background-image: url(../images/gray/tabs/tab-btm-right-bg.gif); - } - - .x-tab-strip-bottom .x-tab-strip-active .x-tab-left { - //background-image: url(../images/gray/tabs/tab-btm-left-bg.gif); - } - - .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close { - //background-image: url(../images/gray/tabs/tab-close.gif); - } - - .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover{ - //background-image: url(../images/gray/tabs/tab-close.gif); - } - - .x-tab-panel-body { - border-color: transparent; - background-color: transparent; - } - - .x-tab-panel-body-top { - border-top: 0 none; - } - - .x-tab-panel-body-bottom { - border-bottom: 0 none; - } - - .x-tab-scroller-left { - //background-image: url(../images/gray/tabs/scroll-left.gif); - border-bottom-color:#d0d0d0; - } - - .x-tab-scroller-left-over { - background-position: 0 0; - } - - .x-tab-scroller-left-disabled { - background-position: -18px 0; - opacity:.5; - -moz-opacity:.5; - filter:alpha(opacity=50); - cursor:default; - } - - .x-tab-scroller-right { - //background-image: url(../images/gray/tabs/scroll-right.gif); - border-bottom-color:#d0d0d0; - } - - .x-tab-panel-bbar .x-toolbar, .x-tab-panel-tbar .x-toolbar { - border-color:#d0d0d0; - } - .x-form-field{ - font:normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-form-text, textarea.x-form-field { - background-color: rgba(255, 255, 255, 0.08); - background-image: none; - border-color: transparent; - } - - .x-form-select-one { - background-color:#fff; - border-color:#C1C1C1; - } - - .x-form-check-group-label { - border-bottom: 1px solid #d0d0d0; - color: #333; - } - - .x-editor .x-form-check-wrap { - background-color:#fff; - } - - .x-form-field-wrap .x-form-trigger{ - //background-image: url(../images/gray/form/trigger.gif); - border-bottom-color:#b5b8c8; - } - - .x-form-field-wrap .x-form-date-trigger{ - //background-image: url(../images/gray/form/date-trigger.gif); - } - - .x-form-field-wrap .x-form-clear-trigger{ - //background-image: url(../images/gray/form/clear-trigger.gif); - } - - .x-form-field-wrap .x-form-search-trigger{ - //background-image: url(../images/gray/form/search-trigger.gif); - } - - .x-trigger-wrap-focus .x-form-trigger{ - border-bottom-color: #777777; - } - - .x-item-disabled .x-form-trigger-over{ - border-bottom-color:#b5b8c8; - } - - .x-item-disabled .x-form-trigger-click{ - border-bottom-color:#b5b8c8; - } - - .x-form-focus, textarea.x-form-focus{ - border-color:transparent; - } - - .x-form-invalid, textarea.x-form-invalid{ - background-color:#fff; - //background-image: url(../images/default/grid/invalid_line.gif); - border-color:#c30; - } - - .ext-webkit .x-form-invalid{ - background-color:#fee; - border-color:#ff7870; - } - - .x-form-inner-invalid, textarea.x-form-inner-invalid{ - background-color:#fff; - //background-image: url(../images/default/grid/invalid_line.gif); - } - - .x-form-grow-sizer { - font:normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-form-item { - font:normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-form-invalid-msg { - color:#c0272b; - font:normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - //background-image: url(../images/default/shared/warning.gif); - } - - .x-form-empty-field { - color:gray; - } - - .x-small-editor .x-form-field { - font:normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .ext-webkit .x-small-editor .x-form-field { - font:normal 12px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-form-invalid-icon { - //background-image: url(../images/default/form/exclamation.gif); - } - - .x-fieldset { - border-color:rgba(255, 255, 255, 0.25); - } - - .x-fieldset legend { - font:bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - color:#ffffff; - } - - .x-panel-tbar .icon-add { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-add:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-add:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 1px -23px !important; - } - - .x-panel-bbar .icon-add { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add_small.png) no-repeat 0 0 !important; - } - - .x-panel-tbar .icon-remove { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-remove:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-remove:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 1px -23px !important; - } - - .x-panel-bbar .icon-remove { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove_small.png) no-repeat 0 0 !important; - } - - .x-panel-tbar .icon-pause { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-pause:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-pause:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 1px -23px !important; - } - - .x-menu-item .icon-pause { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/paused.png) no-repeat 0 0 !important; - } - - .x-panel-tbar .icon-resume { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-resume:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-resume:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 1px -23px !important; - } - - .x-menu-item .icon-resume { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume_small.png) no-repeat 0 0 !important; - } - - .icon-remove { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove_small.png) no-repeat 0 0 !important; - } - - .x-panel-tbar .icon-up { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-up:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-up:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 1px -23px !important; - } - - .icon-up { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up_small.png) no-repeat 0 0 !important; - } - - .x-panel-tbar .icon-down { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-panel-tbar .icon-down:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 0 -24px !important; - } - - .x-panel-tbar .icon-down:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 1px -23px !important; - } - - .icon-down { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down_small.png) no-repeat 0 0 !important; - } - - .x-btn .x-deluge-preferences { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-btn .x-deluge-preferences:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 0 -24px !important; - } - - .x-btn .x-deluge-preferences:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 1px -23px !important; - } - - .x-deluge-preferences { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings_small.png) no-repeat 0 4px !important; - } - - .icon-options { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings_small.png) no-repeat 0 0px !important; - } - - .x-deluge-connection-manager, .x-btn .x-deluge-connection-manager { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .x-deluge-connection-manager:hover, .x-btn .x-deluge-connection-manager:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 0 -24px !important; - } - - .x-deluge-connection-manager:active, .x-btn .x-deluge-connection-manager:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 1px -23px !important; - } - - .icon-help { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .icon-help:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 0 -24px !important; - } - - .icon-help:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 1px -23px !important; - } - - .icon-logout { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 0 0 !important; - width: 24px !important; - overflow: hidden; - } - - .icon-logout:hover { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 0 -24px !important; - } - - .icon-logout:active { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 1px -23px !important; - } - - .x-deluge-main-panel { - background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/deluge.png) no-repeat 0 0 !important; - padding-left: 30px !important; - } - - #tbar-deluge-text.x-item-disabled * { - color: white !important; - font-size: 16px; - font-weight: normal; - } - #tbar-deluge-text * { - color: white !important; - } - - /* Buttons hover */ - .x-btn{ - font:normal 11px 'Roboto', tahoma, verdana, helvetica; - } - .x-window-bc .x-window-footer .x-btn { - background-color: var(--button-color); - } - .x-window-bc .x-window-footer .x-btn:hover { - background-color: var(--button-color-hover); - } - .x-form-file-wrap .x-btn { - position: absolute; - right: 0; - z-index: 1; - background: var(--button-color); - } - .x-form-file-wrap:hover .x-form-file-btn:hover .x-btn:hover { - position: absolute; - right: 0; - z-index: 1; - background: var(--button-color-hover); - } - - .x-btn button{ - font:normal 11px 'Roboto', arial,tahoma,verdana,helvetica; - color:#ffffff; - } - - .x-btn em { - font-style:normal; - font-weight:normal; - } - - .x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc{ - background-image: none; - } - - .x-btn-click .x-btn-text, .x-btn-menu-active .x-btn-text, .x-btn-pressed .x-btn-text{ - color:#AAAAAA; - } - - .x-btn-disabled *{ - color:gray !important; - } - - .x-btn-mc em.x-btn-arrow { - //background-image: url(../images/default/button/arrow.gif); - } - - .x-btn-mc em.x-btn-split { - //background-image: url(../images/default/button/s-arrow.gif); - } - - .x-btn-over .x-btn-mc em.x-btn-split, .x-btn-click .x-btn-mc em.x-btn-split, .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-btn-pressed .x-btn-mc em.x-btn-split { - //background-image: url(../images/gray/button/s-arrow-o.gif); - } - - .x-btn-mc em.x-btn-arrow-bottom { - //background-image: url(../images/default/button/s-arrow-b-noline.gif); - } - - .x-btn-mc em.x-btn-split-bottom { - //background-image: url(../images/default/button/s-arrow-b.gif); - } - - .x-btn-over .x-btn-mc em.x-btn-split-bottom, .x-btn-click .x-btn-mc em.x-btn-split-bottom, .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, .x-btn-pressed .x-btn-mc em.x-btn-split-bottom { - //background-image: url(../images/gray/button/s-arrow-bo.gif); - } - - .x-btn-group-header { - color: #666; - } - - .x-btn-group-tc { - //background-image: url(../images/gray/button/group-tb.gif); - } - - .x-btn-group-tl { - //background-image: url(../images/gray/button/group-cs.gif); - } - - .x-btn-group-tr { - //background-image: url(../images/gray/button/group-cs.gif); - } - - .x-btn-group-bc { - //background-image: url(../images/gray/button/group-tb.gif); - } - - .x-btn-group-bl { - //background-image: url(../images/gray/button/group-cs.gif); - } - - .x-btn-group-br { - //background-image: url(../images/gray/button/group-cs.gif); - } - - .x-btn-group-ml { - //background-image: url(../images/gray/button/group-lr.gif); - } - .x-btn-group-mr { - //background-image: url(../images/gray/button/group-lr.gif); - } - - .x-btn-group-notitle .x-btn-group-tc { - //background-image: url(../images/gray/button/group-tb.gif); - } - .x-toolbar { - border-color: transparent; - background-color: transparent; - background-image: none; - } - - .x-toolbar td,.x-toolbar span,.x-toolbar input,.x-toolbar div,.x-toolbar select,.x-toolbar label{ - font:normal 11px 'Roboto', arial,tahoma, helvetica, sans-serif; - } - - .x-toolbar .x-item-disabled { - color:gray; - } - - .x-toolbar .x-item-disabled * { - color:gray; - } - - .x-toolbar div.xtb-text { - padding: 0px; - } - - .x-toolbar .x-btn-mc em.x-btn-split { - //background-image: url(../images/default/button/s-arrow-noline.gif); - } - - .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split, - .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split - { - //background-image: url(../images/gray/button/s-arrow-o.gif); - } - - .x-toolbar .x-btn-mc em.x-btn-split-bottom { - //background-image: url(../images/default/button/s-arrow-b-noline.gif); - } - - .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split-bottom, - .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split-bottom - { - //background-image: url(../images/gray/button/s-arrow-bo.gif); - } - - .x-toolbar .xtb-sep { - background: linear-gradient(to right, transparent 45%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, 0.08) 55%, transparent 55%); - width: 10px - } - - .x-tbar-page-first{ - //background-image: url(../images/gray/grid/page-first.gif) !important; - } - - .x-tbar-loading{ - //background-image: url(../images/gray/grid/refresh.gif) !important; - } - - .x-tbar-page-last{ - //background-image: url(../images/gray/grid/page-last.gif) !important; - } - - .x-tbar-page-next{ - //background-image: url(../images/gray/grid/page-next.gif) !important; - } - - .x-tbar-page-prev{ - //background-image: url(../images/gray/grid/page-prev.gif) !important; - } - - .x-item-disabled .x-tbar-loading{ - //background-image: url(../images/default/grid/loading.gif) !important; - } - - .x-item-disabled .x-tbar-page-first{ - //background-image: url(../images/default/grid/page-first-disabled.gif) !important; - } - - .x-item-disabled .x-tbar-page-last{ - //background-image: url(../images/default/grid/page-last-disabled.gif) !important; - } - - .x-item-disabled .x-tbar-page-next{ - //background-image: url(../images/default/grid/page-next-disabled.gif) !important; - } - - .x-item-disabled .x-tbar-page-prev{ - //background-image: url(../images/default/grid/page-prev-disabled.gif) !important; - } - - .x-paging-info { - color:#444; - } - - .x-toolbar-more-icon { - //background-image: url(../images/gray/toolbar/more.gif) !important; - } - .x-resizable-handle { - background-color:#fff; - } - - .x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-east, - .x-resizable-over .x-resizable-handle-west, .x-resizable-pinned .x-resizable-handle-west - { - //background-image: url(../images/gray/sizer/e-handle.gif); - } - - .x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-south, - .x-resizable-over .x-resizable-handle-north, .x-resizable-pinned .x-resizable-handle-north - { - //background-image: url(../images/gray/sizer/s-handle.gif); - } - - .x-resizable-over .x-resizable-handle-north, .x-resizable-pinned .x-resizable-handle-north{ - //background-image: url(../images/gray/sizer/s-handle.gif); - } - .x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast{ - //background-image: url(../images/gray/sizer/se-handle.gif); - } - .x-resizable-over .x-resizable-handle-northwest, .x-resizable-pinned .x-resizable-handle-northwest{ - //background-image: url(../images/gray/sizer/nw-handle.gif); - } - .x-resizable-over .x-resizable-handle-northeast, .x-resizable-pinned .x-resizable-handle-northeast{ - //background-image: url(../images/gray/sizer/ne-handle.gif); - } - .x-resizable-over .x-resizable-handle-southwest, .x-resizable-pinned .x-resizable-handle-southwest{ - //background-image: url(../images/gray/sizer/sw-handle.gif); - } - .x-resizable-proxy{ - border-color:#565656; - } - .x-resizable-overlay{ - background-color:#fff; - } - .x-grid3 { - background: rgba(0, 0, 0, 0.25); - } - - .x-grid-panel .x-panel-mc .x-panel-body { - border-color:#d0d0d0; - } - - .x-grid3-row td, .x-grid3-summary-row td{ - font:normal 11px/16px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-grid3-hd-row td { - font:normal 11px/15px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-grid3-hd-row td { - border-left-color:transparent; - border-right-color:transparent; - } - - .x-grid-row-loading { - background-color: #fff; - //background-image: url(../images/default/shared/loading-balls.gif); - } - - .x-grid3-row { - border-color:transparent; - border-top-color:transparent; - } - - .x-grid3-row-alt { - background-color:rgba(0, 0, 0, 0.25); - } - - .x-grid3-row-over { - border-color:transparent; - background-color: rgba(255, 255, 255, 0.08); - background-image: none; - } - - .x-grid3-resize-proxy { - background:var(--main-bg-color); - } - - .x-grid3-resize-marker { - background:var(--main-bg-color); - } - - .x-grid3-header{ - background-color:rgba(0, 0, 0, 0.25); - background-image: none; - } - - .x-grid3-header-pop { - border-left-color:#d0d0d0; - } - - .x-grid3-header-pop-inner { - border-left-color:#eee; - //background-image: url(../images/default/grid/hd-pop.gif); - } - - td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open { - border-left-color:rgba(0, 0, 0, 0.25); - border-right-color:transparent; - } - - td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner { - background-color:rgba(0, 0, 0, 0.25); - background-image: none; - - } - - .sort-asc .x-grid3-sort-icon { - //background-image: url(../images/gray/grid/sort_asc.gif); - } - - .sort-desc .x-grid3-sort-icon { - //background-image: url(../images/gray/grid/sort_desc.gif); - } - - .x-grid3-cell-text, .x-grid3-hd-text { - color:#000; - } - - .x-grid3-split { - //background-image: url(../images/default/grid/grid-split.gif); - } - - .x-grid3-hd-text { - color:#333; - } - - .x-dd-drag-proxy .x-grid3-hd-inner{ - background-color:#f9f9f9; - //background-image: url(../images/gray/grid/grid3-hrow-over2.gif); - border-color:#ACACAC; - } - - .col-move-top{ - //background-image: url(../images/gray/grid/col-move-top.gif); - } - - .col-move-bottom{ - //background-image: url(../images/gray/grid/col-move-bottom.gif); - } - - .x-grid3-row-selected { - background-color:rgba(255, 255, 255, 0.08) !important; - background-image: none; - border-color:transparent; - } - - .x-grid3-cell-selected{ - background-color: #CBCBCB !important; - color:#000; - } - - .x-grid3-cell-selected span{ - color:#000 !important; - } - - .x-grid3-cell-selected .x-grid3-cell-text{ - color:#000; - } - - .x-grid3-locked td.x-grid3-row-marker, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker{ - background-color:#ebeadb !important; - //background-image: url(../images/default/grid/grid-hrow.gif) !important; - color:#000; - border-top-color:#fff; - border-right-color:#6fa0df !important; - } - - .x-grid3-locked td.x-grid3-row-marker div, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div{ - color:#333 !important; - } - - .x-grid3-dirty-cell { - //background-image: url(../images/default/grid/dirty.gif); - } - - .x-grid3-topbar, .x-grid3-bottombar{ - font:normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-grid3-bottombar .x-toolbar{ - border-top-color:#a9bfd3; - } - - .x-props-grid .x-grid3-td-name .x-grid3-cell-inner{ - //background-image: url(../images/default/grid/grid3-special-col-bg.gif) !important; - color:#000 !important; - } - - .x-props-grid .x-grid3-body .x-grid3-td-name{ - background-color:#fff !important; - border-right-color:#eee; - } - - .xg-hmenu-sort-asc .x-menu-item-icon{ - //background-image: url(../images/default/grid/hmenu-asc.gif); - } - - .xg-hmenu-sort-desc .x-menu-item-icon{ - //background-image: url(../images/default/grid/hmenu-desc.gif); - } - - .xg-hmenu-lock .x-menu-item-icon{ - //background-image: url(../images/default/grid/hmenu-lock.gif); - } - - .xg-hmenu-unlock .x-menu-item-icon{ - //background-image: url(../images/default/grid/hmenu-unlock.gif); - } - - .x-grid3-hd-btn, a.x-grid3-hd-btn:hover { - background: linear-gradient(116deg, transparent 0%, transparent 0%, transparent 60%, #252525 60%), linear-gradient(244deg, #fff 0%, #fff 0%, #fff 60%, transparent 60%); - height: 6px !important; - width: 8px; - padding: 7px 2px; - border-left: 1px solid #444444; - background-clip: content-box; - } - - .x-grid3-body .x-grid3-td-expander { - //background-image: url(../images/default/grid/grid3-special-col-bg.gif); - } - - .x-grid3-row-expander { - //background-image: url(../images/gray/grid/row-expand-sprite.gif); - } - - .x-grid3-body .x-grid3-td-checker { - //background-image: url(../images/default/grid/grid3-special-col-bg.gif); - } - - .x-grid3-row-checker, .x-grid3-hd-checker { - //background-image: url(../images/default/grid/row-check-sprite.gif); - } - - .x-grid3-body .x-grid3-td-numberer { - //background-image: url(../images/default/grid/grid3-special-col-bg.gif); - } - - .x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner { - color:#444; - } - - .x-grid3-body .x-grid3-td-row-icon { - //background-image: url(../images/default/grid/grid3-special-col-bg.gif); - } - - .x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer, - .x-grid3-body .x-grid3-row-selected .x-grid3-td-checker, - .x-grid3-body .x-grid3-row-selected .x-grid3-td-expander { - //background-image: url(../images/gray/grid/grid3-special-col-sel-bg.gif); - } - - .x-grid3-check-col { - //background-image: url(../images/default/menu/unchecked.gif); - } - - .x-grid3-check-col-on { - //background-image: url(../images/default/menu/checked.gif); - } - - .x-grid-group, .x-grid-group-body, .x-grid-group-hd { - zoom:1; - } - - .x-grid-group-hd { - border-bottom-color:#d0d0d0; - } - - .x-grid-group-hd div.x-grid-group-title { - //background-image: url(../images/gray/grid/group-collapse.gif); - color:#5F5F5F; - font:bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title { - //background-image: url(../images/gray/grid/group-expand.gif); - } - - .x-group-by-icon { - //background-image: url(../images/default/grid/group-by.gif); - } - - .x-cols-icon { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/columns.png); - } - - .x-show-groups-icon { - //background-image: url(../images/default/grid/group-by.gif); - } - - .x-grid-empty { - color:gray; - font:normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-grid-with-col-lines .x-grid3-row td.x-grid3-cell { - border-right-color:#ededed; - } - - .x-grid3-cell { - box-sizing: border-box; - } - - .x-grid-with-col-lines .x-grid3-row{ - border-top-color:#ededed; - } - - .x-grid-with-col-lines .x-grid3-row-selected { - border-top-color:#B9B9B9; - } - .x-pivotgrid .x-grid3-header-offset table td { - background: url(../images/gray/grid/grid3-hrow2.gif) repeat-x 50% 100%; - border-left: 1px solid; - border-right: 1px solid; - border-left-color: #D0D0D0; - border-right-color: #D0D0D0; - } - - .x-pivotgrid .x-grid3-row-headers { - background-color: #f9f9f9; - } - - .x-pivotgrid .x-grid3-row-headers table td { - background: #EEE url(../images/default/grid/grid3-rowheader.gif) repeat-x left top; - border-left: 1px solid; - border-right: 1px solid; - border-left-color: #EEE; - border-right-color: #D0D0D0; - border-bottom: 1px solid; - border-bottom-color: #D0D0D0; - height: 18px; - } - .x-dd-drag-ghost{ - color:#000; - font: normal 11px 'Roboto', arial, helvetica, sans-serif; - border-color: #ddd #bbb #bbb #ddd; - background-color:#fff; - } - - .x-dd-drop-nodrop .x-dd-drop-icon{ - //background-image: url(../images/default/dd/drop-no.gif); - } - - .x-dd-drop-ok .x-dd-drop-icon{ - //background-image: url(../images/default/dd/drop-yes.gif); - } - - .x-dd-drop-ok-add .x-dd-drop-icon{ - //background-image: url(../images/default/dd/drop-add.gif); - } - - .x-view-selector { - background-color:#D6D6D6; - border-color:#888888; - } - - .x-tree-node-expanded .x-tree-node-icon{ - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/folder.png); - } - - .x-tree-node-leaf .x-tree-node-icon{ - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/file.png); - } - - .x-tree-node-collapsed .x-tree-node-icon{ - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/folder.png); - } - - .x-tree-node-loading .x-tree-node-icon{ - //background-image: url(../images/default/tree/loading.gif) !important; - } - - .x-tree-node .x-tree-node-inline-icon { - background-image: none; - } - - .x-tree-node-loading a span{ - font-style: italic; - color:#444444; - } - - .ext-ie .x-tree-node-el input { - width:15px; - height:15px; - } - - .x-tree-lines .x-tree-elbow{ - //background-image: url(../images/default/tree/elbow.gif); - } - - .x-tree-lines .x-tree-elbow-plus{ - //background-image: url(../images/default/tree/elbow-plus.gif); - } - - .x-tree-lines .x-tree-elbow-minus{ - //background-image: url(../images/default/tree/elbow-minus.gif); - } - - .x-tree-lines .x-tree-elbow-end{ - //background-image: url(../images/default/tree/elbow-end.gif); - } - - .x-tree-lines .x-tree-elbow-end-plus{ - //background-image: url(../images/gray/tree/elbow-end-plus.gif); - } - - .x-tree-lines .x-tree-elbow-end-minus{ - //background-image: url(../images/gray/tree/elbow-end-minus.gif); - } - - .x-tree-lines .x-tree-elbow-line{ - //background-image: url(../images/default/tree/elbow-line.gif); - } - - .x-tree-no-lines .x-tree-elbow-plus{ - //background-image: url(../images/default/tree/elbow-plus-nl.gif); - } - - .x-tree-no-lines .x-tree-elbow-minus{ - //background-image: url(../images/default/tree/elbow-minus-nl.gif); - } - - .x-tree-no-lines .x-tree-elbow-end-plus{ - //background-image: url(../images/gray/tree/elbow-end-plus-nl.gif); - } - - .x-tree-no-lines .x-tree-elbow-end-minus{ - //background-image: url(../images/gray/tree/elbow-end-minus-nl.gif); - } - - .x-tree-arrows .x-tree-elbow-plus{ - //background-image: url(../images/gray/tree/arrows.gif); - } - - .x-tree-arrows .x-tree-elbow-minus{ - //background-image: url(../images/gray/tree/arrows.gif); - } - - .x-tree-arrows .x-tree-elbow-end-plus{ - //background-image: url(../images/gray/tree/arrows.gif); - } - - .x-tree-arrows .x-tree-elbow-end-minus{ - //background-image: url(../images/gray/tree/arrows.gif); - } - - .x-tree-node{ - color:#cccccc; - font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-treegrid-root-table, .x-treegrid-col { - border-color: rgba(255, 255, 255, 0.08) !important; - } - - .x-tree-node a, .x-dd-drag-ghost a{ - color:#cccccc; - } - - .x-tree-node a span, .x-dd-drag-ghost a span{ - color:#cccccc; - } - - .x-tree-node .x-tree-node-disabled a span{ - color:gray !important; - } - - .x-tree-node div.x-tree-drag-insert-below{ - border-bottom-color:#36c; - } - - .x-tree-node div.x-tree-drag-insert-above{ - border-top-color:#36c; - } - - .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{ - border-bottom-color:#36c; - } - - .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{ - border-top-color:#36c; - } - - .x-tree-node .x-tree-drag-append a span{ - background-color:#ddd; - border-color:gray; - } - - .x-tree-node .x-tree-node-over { - background-color: rgba(255, 255, 255, 0.08); - } - - .x-tree-node .x-tree-selected { - background-color: rgba(0, 0, 0, 0.45); - } - - .x-tree-drop-ok-append .x-dd-drop-icon{ - //background-image: url(../images/default/tree/drop-add.gif); - } - - .x-tree-drop-ok-above .x-dd-drop-icon{ - //background-image: url(../images/default/tree/drop-over.gif); - } - - .x-tree-drop-ok-below .x-dd-drop-icon{ - //background-image: url(../images/default/tree/drop-under.gif); - } - - .x-tree-drop-ok-between .x-dd-drop-icon{ - //background-image: url(../images/default/tree/drop-between.gif); - } - .x-date-picker { - border-color:#585858; - background-color:#fff; - } - - .x-date-middle,.x-date-left,.x-date-right { - //background-image: url(../images/gray/shared/hd-sprite.gif); - color:#fff; - font:bold 11px 'Roboto', "sans serif", tahoma, verdana, helvetica; - } - - .x-date-middle .x-btn .x-btn-text { - color:#fff; - } - - .x-panel-tbar .x-btn-text { - height: 24px !important; - color: rgb(0,0,0,0) !important; - } - - .x-panel-tbar .x-toolbar .xtb-sep { - height: 24px !important; - } - - .x-date-middle .x-btn-mc em.x-btn-arrow { - //background-image: url(../images/gray/toolbar/btn-arrow-light.gif); - } - - .x-date-right a { - //background-image: url(../images/gray/shared/right-btn.gif); - } - - .x-date-left a{ - //background-image: url(../images/gray/shared/left-btn.gif); - } - - .x-date-inner th { - background-color:#D8D8D8; - //background-image: url(../images/gray/panel/white-top-bottom.gif); - border-bottom-color:#AFAFAF; - font:normal 10px 'Roboto', helvetica,tahoma,sans-serif; - color:#595959; - } - - .x-date-inner td { - border-color:#fff; - } - - .x-date-inner a { - font:normal 11px 'Roboto', arial, helvetica,tahoma,sans-serif; - color:#000; - } - - .x-date-inner .x-date-active{ - color:#000; - } - - .x-date-inner .x-date-selected a{ - background-image: none; - background-color:#D8D8D8; - border-color:#DCDCDC; - } - - .x-date-inner .x-date-today a{ - border-color:darkred; - } - - .x-date-inner .x-date-selected span{ - font-weight:bold; - } - - .x-date-inner .x-date-prevday a,.x-date-inner .x-date-nextday a { - color:#aaa; - } - - .x-date-bottom { - border-top-color:#AFAFAF; - background-color:#D8D8D8; - background:#D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; - } - - .x-date-inner a:hover, .x-date-inner .x-date-disabled a:hover{ - color:#000; - background-color:#D8D8D8; - } - - .x-date-inner .x-date-disabled a { - background-color:#eee; - color:#bbb; - } - - .x-date-mmenu{ - background-color:#eee !important; - } - - .x-date-mmenu .x-menu-item { - font-size:10px; - color:#000; - } - - .x-date-mp { - background-color:#fff; - } - - .x-date-mp td { - font:normal 11px 'Roboto', arial, helvetica,tahoma,sans-serif; - } - - .x-date-mp-btns button { - background-color:#4E565F; - color:#fff; - border-color:#C0C0C0 #434343 #434343 #C0C0C0; - font:normal 11px 'Roboto', arial, helvetica,tahoma,sans-serif; - } - - .x-date-mp-btns { - background-color:#D8D8D8; - background:#D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; - } - - .x-date-mp-btns td { - border-top-color:#AFAFAF; - } - - td.x-date-mp-month a,td.x-date-mp-year a { - color: #333; - } - - td.x-date-mp-month a:hover,td.x-date-mp-year a:hover { - color:#333; - background-color:#FDFDFD; - } - - td.x-date-mp-sel a { - background-color:#D8D8D8; - //background:#D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; - border-color:#DCDCDC; - } - - .x-date-mp-ybtn a { - //background-image: url(../images/gray/panel/tool-sprites.gif); - } - - td.x-date-mp-sep { - border-right-color:#D7D7D7; - } - - .x-tip .x-tip-close{ - //background-image: url(../images/gray/qtip/close.gif); - } - - .x-tip .x-tip-tc, .x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc, .x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr { - //background-image: url(../images/gray/qtip/tip-sprite.gif); - } - - .x-tip .x-tip-mc { - font: normal 11px 'Roboto', tahoma,arial,helvetica,sans-serif; - } - .x-tip .x-tip-ml { - background-color: #fff; - } - - .x-tip .x-tip-header-text { - font: bold 11px 'Roboto', tahoma,arial,helvetica,sans-serif; - color:#444; - } - - .x-tip .x-tip-body { - font: normal 11px 'Roboto', tahoma,arial,helvetica,sans-serif; - color:#444; - } - - .x-form-invalid-tip .x-tip-tc, .x-form-invalid-tip .x-tip-tl, .x-form-invalid-tip .x-tip-tr, .x-form-invalid-tip .x-tip-bc, - .x-form-invalid-tip .x-tip-bl, .x-form-invalid-tip .x-tip-br, .x-form-invalid-tip .x-tip-ml, .x-form-invalid-tip .x-tip-mr - { - //background-image: url(../images/default/form/error-tip-corners.gif); - } - - .x-form-invalid-tip .x-tip-body { - //background-image: url(../images/default/form/exclamation.gif); - } - - .x-tip-anchor { - //background-image: url(../images/gray/qtip/tip-anchor-sprite.gif); - } - .x-menu { - background:var(--modal-bg-color); - } - - .x-menu-floating{ - border-color:transparent; - } - - .x-menu-nosep { - background-image:none; - } - - .x-menu-list-item{ - font:normal 11px 'Roboto', arial,tahoma,sans-serif; - } - - .x-menu-item-arrow{ - //background-image: url(../images/gray/menu/menu-parent.gif); - } - - .x-menu-sep { - background-color: transparent; - border-bottom-color: rgba(255, 255, 255, 0.08); - } - - a.x-menu-item { - color:#fff; - } - - .x-menu-item-active { - background-image: none; - background-color: rgba(255, 255, 255, 0.08); - border-color:transparent; - } - - .x-menu-item-active a.x-menu-item { - border-color:transparent; - } - - .x-menu-check-item .x-menu-item-icon{ - //background-image: url(../images/default/menu/unchecked.gif); - } - - .x-menu-item-checked .x-menu-item-icon{ - //background-image: url(../images/default/menu/checked.gif); - } - - .x-menu-item-checked .x-menu-group-item .x-menu-item-icon{ - //background-image: url(../images/gray/menu/group-checked.gif); - } - - .x-menu-group-item .x-menu-item-icon{ - background-image:none; - } - - .x-menu-plain { - background-color:#fff !important; - } - - .x-menu .x-date-picker{ - border-color:#AFAFAF; - } - - .x-cycle-menu .x-menu-item-checked { - border-color:#B9B9B9 !important; - background-color:#F1F1F1; - } - - .x-menu-scroller-top { - //background-image: url(../images/default/layout/mini-top.gif); - } - - .x-menu-scroller-bottom { - //background-image: url(../images/default/layout/mini-bottom.gif); - }.x-box-tl { - //background-image: url(../images/default/box/corners.gif); - } - - .x-box-tc { - //background-image: url(../images/default/box/tb.gif); - } - - .x-box-tr { - //background-image: url(../images/default/box/corners.gif); - } - - .x-box-ml { - //background-image: url(../images/default/box/l.gif); - } - - .x-box-mc { - background-color: #eee; - //background-image: url(../images/default/box/tb.gif); - font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif; - color: #393939; - font-size: 12px; - } - - .x-box-mc h3 { - font-size: 14px; - font-weight: bold; - } - - .x-box-mr { - //background-image: url(../images/default/box/r.gif); - } - - .x-box-bl { - //background-image: url(../images/default/box/corners.gif); - } - - .x-box-bc { - //background-image: url(../images/default/box/tb.gif); - } - - .x-box-br { - //background-image: url(../images/default/box/corners.gif); - } - - .x-box-blue .x-box-bl, .x-box-blue .x-box-br, .x-box-blue .x-box-tl, .x-box-blue .x-box-tr { - //background-image: url(../images/default/box/corners-blue.gif); - } - - .x-box-blue .x-box-bc, .x-box-blue .x-box-mc, .x-box-blue .x-box-tc { - //background-image: url(../images/default/box/tb-blue.gif); - } - - .x-box-blue .x-box-mc { - background-color: #c3daf9; - } - - .x-box-blue .x-box-mc h3 { - color: #17385b; - } - - .x-box-blue .x-box-ml { - //background-image: url(../images/default/box/l-blue.gif); - } - - .x-box-blue .x-box-mr { - //background-image: url(../images/default/box/r-blue.gif); - } - .x-combo-list { - border-color:#666666; - background-color:#252525; - font:normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-combo-list-inner { - background-color:#252525; - } - - .x-combo-list-hd { - font:bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - color:#333; - //background-image: url(../images/default/layout/panel-title-light-bg.gif); - border-bottom-color:#BCBCBC; - } - - .x-resizable-pinned .x-combo-list-inner { - border-bottom-color:#BEBEBE; - } - - .x-combo-list-item { - border-color:#252525; - } - - .x-combo-list .x-combo-selected{ - border-color:#252525 !important; - background-color:#333333; - } - - .x-combo-list .x-toolbar { - border-top-color:#BCBCBC; - } - - .x-combo-list-small { - font:normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; - } - - .x-panel { - background: var(--main-bg-color); - border-color: #d0d0d0; - } - - .x-panel-header { - color:#ffffff; - font-weight:bold; - font-size: 11px; - font-family: 'Roboto', tahoma,arial,verdana,sans-serif; - border-color:transparent; - background-image: none; - background-color: rgba(0, 0, 0, 0.25); - } - - .x-panel-body { - border-color: transparent; - border: 1px solid rgba(255, 255, 255, 0.08); - background: var(--main-bg-color); - } - - .x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar { - border-color:transparent !important; - } - - .x-panel-tbar-noheader .x-toolbar, .x-panel-mc .x-panel-tbar .x-toolbar { - border-top-color:transparent; - } - - .x-panel-body-noheader, .x-panel-mc .x-panel-body { - border-top-color:transparent; - } - - .x-panel-tl .x-panel-header { - color:#333; - font:bold 11px 'Roboto', tahoma,arial,verdana,sans-serif; - } - - .x-panel-tc { - //background-image: url(../images/gray/panel/top-bottom.gif); - } - - .x-panel-tl, .x-panel-tr, .x-panel-bl, .x-panel-br{ - //background-image: url(../images/gray/panel/corners-sprite.gif); - border-bottom-color:#d0d0d0; - } - - .x-panel-bc { - //background-image: url(../images/gray/panel/top-bottom.gif); - } - - .x-panel-mc { - font: normal 11px 'Roboto', tahoma,arial,helvetica,sans-serif; - background-color:#f1f1f1; - } - - .x-panel-ml { - background-color: #fff; - //background-image: url(../images/gray/panel/left-right.gif); - } - - .x-panel-mr { - //background-image: url(../images/gray/panel/left-right.gif); - } - - .x-tool { - //background-image: url(../images/gray/panel/tool-sprites.gif); - } - - .x-panel-collapsed .x-accordion-hd .x-tool-toggle { - height: 8px; - width: 8px; - border: 1px solid #a7a7a7; - padding: 2px; - background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(to right, transparent 45%, #fff 45%, #fff 55%, transparent 55%); - background-clip: content-box; - } - - .x-accordion-hd .x-tool-toggle { - height: 8px; - width: 8px; - border: 1px solid #a7a7a7; - padding: 2px; - background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%);; - background-clip: content-box; - } - - .x-tool-collapse-west { - height: 8px; - width: 6px; - padding: 2px 3px; - border: 1px solid #a7a7a7; - background: linear-gradient(26deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(154deg, #252525 40%, #fff 40%, #fff 100%, #252525 100%); - background-clip: content-box; - } - - .x-tool-expand-west { - height: 8px; - width: 6px; - padding: 2px 3px; - border: 1px solid #a7a7a7; - background: linear-gradient(-26deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(-154deg, #252525 40%, #fff 40%, #fff 100%, #252525 100%); - background-clip: content-box; - } - - .x-tool-collapse-south { - height: 6px !important; - width: 8px; - padding: 3px 2px; - border: 1px solid #a7a7a7; - background: linear-gradient(116deg, transparent 0%, transparent 0%, transparent 60%, #252525 60%), linear-gradient(244deg, #fff 0%, #fff 0%, #fff 60%, transparent 60%); - background-clip: content-box; - } - - .x-tool-expand-south { - height: 6px; - width: 8px; - padding: 3px 2px; - border: 1px solid #a7a7a7; - background: linear-gradient(116deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(244deg, transparent 40%, #fff 40%, #fff 100%, transparent 100%); - background-clip: content-box; - } - - .x-tool-close { - height: 8px; - width: 8px; - border: 1px solid #44444400; - padding: 2px; - background: linear-gradient(to bottom right, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(to top right, transparent 45%, #fff 45%, #fff 55%, transparent 55%); - background-clip: content-box; - } - - .x-panel-ghost { - background-color:#f2f2f2; - } - - .x-panel-ghost ul { - border-color:#d0d0d0; - } - - .x-panel-dd-spacer { - border-color:#d0d0d0; - } - - .x-panel-fbar td,.x-panel-fbar span,.x-panel-fbar input,.x-panel-fbar div,.x-panel-fbar select,.x-panel-fbar label{ - font:normal 11px 'Roboto', arial,tahoma, helvetica, sans-serif; - } - - .x-window { - background: var(--modal-bg-color); - } - - .x-window-proxy { - background-color:#fcfcfc; - border-color:#d0d0d0; - } - - .x-window-bwrap { - border: 1px solid transparent; - border-top: 1px solid rgba(255, 255, 255, 0.25); - } - - .x-window-tl .x-window-header { - color:#ffffff; - font:bold 11px 'Roboto', tahoma,arial,verdana,sans-serif; - } - - .x-window-tc { - background-image: none; - background-color: transparent; - } - - .x-window-tl { - background-image: none; - background-color: transparent; - } - - .x-window-tr { - background-image: none; - background-color: transparent; - } - - .x-window-bc { - background-image: none; - background-color: transparent; - } - - .x-window-bl { - background-image: none; - background-color: transparent; - } - - .x-window-br { - background-image: none; - background-color: transparent; - } - - .x-window-mc { - border-color:transparent; - font: normal 11px 'Roboto', tahoma,arial,helvetica,sans-serif; - background-color: transparent; - } - - .x-window-ml { - background-image: none; - background-color: transparent; - } - - .x-window-mr { - background-image: none; - background-color: transparent; - } - - .x-window-maximized .x-window-tc { - background-color:#fff; - } - - .x-window-bbar .x-toolbar { - border-top-color:#d0d0d0; - } - - .x-panel-ghost .x-window-tl { - border-bottom-color:#d0d0d0; - } - - .x-panel-collapsed .x-window-tl { - border-bottom-color:#d0d0d0; - } - - .x-dlg-mask{ - background-color:#ccc; - } - - .x-window-plain .x-window-mc { - background-color: transparent; - border-color: transparent; - } - - .x-window-plain .x-window-body { - border-color: transparent; - } - - body.x-body-masked .x-window-plain .x-window-mc { - background-color: transparent; - } - .x-html-editor-wrap { - border-color:#BCBCBC; - background-color:#fff; - } - .x-html-editor-tb .x-btn-text { - //background-image: url(../images/default/editor/tb-sprite.gif); - } - .x-panel-noborder .x-panel-header-noborder { - border-bottom-color: rgba(255, 255, 255, 0.08); - } - - .x-panel-noborder .x-panel-tbar-noborder .x-toolbar { - border-bottom-color:#353535; - background: var(--main-bg-color); - } - - .x-panel-noborder .x-panel-bbar-noborder .x-toolbar { - border-top-color:#353535; - } - - .x-tab-panel-bbar-noborder .x-toolbar { - border-top-color:#d0d0d0; - } - - .x-tab-panel-tbar-noborder .x-toolbar { - border-bottom-color:#d0d0d0; - } - - .x-border-layout-ct { - background-color:#f0f0f0; - } - .x-border-layout-ct { - background:var(--main-bg-color); - } - - .x-accordion-hd { - color:#ffffff; - font-weight:normal; - //background-image: url(../images/gray/panel/light-hd.gif); - } - - .x-layout-collapsed { - background-color: rgba(0, 0, 0, 0.25); - border-color: transparent; - } - - .x-layout-collapsed-over{ - background-color: rgba(0, 0, 0, 0.45); - } - - .x-layout-split-west .x-layout-mini { - //background-image: url(../images/default/layout/mini-left.gif); - } - .x-layout-split-east .x-layout-mini { - //background-image: url(../images/default/layout/mini-right.gif); - } - .x-layout-split-north .x-layout-mini { - //background-image: url(../images/default/layout/mini-top.gif); - } - .x-layout-split-south .x-layout-mini { - //background-image: url(../images/default/layout/mini-bottom.gif); - } - - .x-layout-cmini-west .x-layout-mini { - //background-image: url(../images/default/layout/mini-right.gif); - } - - .x-layout-cmini-east .x-layout-mini { - //background-image: url(../images/default/layout/mini-left.gif); - } - - .x-layout-cmini-north .x-layout-mini { - //background-image: url(../images/default/layout/mini-bottom.gif); - } - - .x-layout-cmini-south .x-layout-mini { - //background-image: url(../images/default/layout/mini-top.gif); - } - .x-progress-wrap { - border-color:transparent; - } - - .x-progress-inner { - background-color:transparent; - background-image: none; - } - - .x-progress-bar { - background-color:var(--progress-color); - background-image: none; - border-top-color:transparent; - border-bottom-color:transparent; - border-right-color:transparent; - } - - .x-progress-text { - font-size:11px; - font-weight:normal; - color:#fff !important; - } - - .x-progress-text-back { - color:#fff !important; - } - .x-list-header { - background-color: rgba(0, 0, 0, 0.25); - background-image: none; - } - - .x-list-header-inner div em { - border-left-color:rgba(255, 255, 255, .08); - font:normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-list-body dt em { - font:normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; - } - - .x-list-over { - background-color: rgba(255, 255, 255, 0.08); - } - - .x-list-selected { - background-color: rgba(255, 255, 255, 0.08); - } - - .x-list-resizer { - border-left-color:#555; - border-right-color:#555; - } - - .x-list-header-inner em.sort-asc, .x-list-header-inner em.sort-desc { - background: #202020; - border-color: #202020; - } - .x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner { - //background-image: url(../images/default/slider/slider-bg.png); - } - - .x-slider-horz .x-slider-thumb { - //background-image: url(../images/gray/slider/slider-thumb.png); - } - - .x-slider-vert, .x-slider-vert .x-slider-end, .x-slider-vert .x-slider-inner { - //background-image: url(../images/default/slider/slider-v-bg.png); - } - - .x-slider-vert .x-slider-thumb { - //background-image: url(../images/gray/slider/slider-v-thumb.png); - } - .x-window-dlg .ext-mb-text, - .x-window-dlg .x-window-header-text { - font-size:12px; - } - - .x-window-dlg .ext-mb-textarea { - font:normal 12px 'Roboto', tahoma,arial,helvetica,sans-serif; - } - - .x-window-dlg .x-msg-box-wait { - //background-image: url(../images/default/grid/loading.gif); - } - - .x-window-dlg .ext-mb-info { - //background-image: url(../images/gray/window/icon-info.gif); - } - - .x-window-dlg .ext-mb-warning { - //background-image: url(../images/gray/window/icon-warning.gif); - } - - .x-window-dlg .ext-mb-question { - //background-image: url(../images/gray/window/icon-question.gif); - } - - .x-window-dlg .ext-mb-error { - //background-image: url(../images/gray/window/icon-error.gif); - } - + + .x-color-palette em { + border-color: #aca899; + } + + .x-ie-shadow { + background-color: #777; + } + + .x-shadow .xsmc { + //background-image: url(../images/default/shadow-c.png); + } + + .x-shadow .xsml, + .x-shadow .xsmr { + //background-image: url(../images/default/shadow-lr.png); + } + + .x-shadow .xstl, + .x-shadow .xstc, + .x-shadow .xstr, + .x-shadow .xsbl, + .x-shadow .xsbc, + .x-shadow .xsbr { + //background-image: url(../images/default/shadow.png); + } + + .loading-indicator { + font-size: 11px; + //background-image: url(../images/default/grid/loading.gif); + } + + .x-spotlight { + background-color: #ccc; + } + + .x-tab-panel-header, + .x-tab-panel-footer { + background: var(--main-bg-color); + border-color: #d0d0d0; + overflow: hidden; + zoom: 1; + padding-bottom: 0; + } + + .x-tab-panel-header, + .x-tab-panel-footer { + border-color: transparent; + } + + ul.x-tab-strip-top { + background-color: rgba(0, 0, 0, 0.25); + background-image: none; + border-bottom-color: transparent; + } + + ul.x-tab-strip-bottom { + background-color: rgba(0, 0, 0, 0.25); + //background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif); + border-top-color: transparent; + } + + .x-tab-panel-header-plain .x-tab-strip-spacer, + .x-tab-panel-footer-plain .x-tab-strip-spacer { + border-color: transparent; + background-color: transparent; + } + + .x-tab-strip span.x-tab-strip-text { + font: normal 11px 'Roboto', tahoma, arial, helvetica; + color: var(--text); + } + + .x-tab-strip-over span.x-tab-strip-text { + color: var(--text-hover); + } + + .x-tab-strip-active span.x-tab-strip-text { + color: var(--text-hover) !important; + font-weight: bold; + } + + .x-tab-strip-disabled .x-tabs-text { + color: var(--text-muted); + } + + .x-tab-strip-top .x-tab-right, + .x-tab-strip-top .x-tab-left, + .x-tab-strip-top .x-tab-strip-inner { + background-image: none; + background-color: transparent; + } + + ul.x-tab-strip li { + float: left; + margin-left: 2px; + background: rgba(0, 0, 0, 0.25); + } + + #torrentDetails dl dt, + dl.singleline dt { + color: var(--text-hover) !important; + } + + .x-tab-strip-bottom .x-tab-right { + //background-image: url(../images/gray/tabs/tab-btm-inactive-right-bg.gif); + } + + .x-tab-strip-bottom .x-tab-left { + //background-image: url(../images/gray/tabs/tab-btm-inactive-left-bg.gif); + } + + .x-tab-strip-bottom .x-tab-strip-over .x-tab-left { + //background-image: url(../images/gray/tabs/tab-btm-over-left-bg.gif); + } + + .x-tab-strip-bottom .x-tab-strip-over .x-tab-right { + //background-image: url(../images/gray/tabs/tab-btm-over-right-bg.gif); + } + + .x-tab-strip-bottom .x-tab-strip-active .x-tab-right { + //background-image: url(../images/gray/tabs/tab-btm-right-bg.gif); + } + + .x-tab-strip-bottom .x-tab-strip-active .x-tab-left { + //background-image: url(../images/gray/tabs/tab-btm-left-bg.gif); + } + + .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close { + //background-image: url(../images/gray/tabs/tab-close.gif); + } + + .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover { + //background-image: url(../images/gray/tabs/tab-close.gif); + } + + .x-tab-panel-body { + border-color: transparent; + background-color: transparent; + } + + .x-tab-panel-body-top { + border-top: 0 none; + } + + .x-tab-panel-body-bottom { + border-bottom: 0 none; + } + + .x-tab-scroller-left { + //background-image: url(../images/gray/tabs/scroll-left.gif); + border-bottom-color: #d0d0d0; + } + + .x-tab-scroller-left-over { + background-position: 0 0; + } + + .x-tab-scroller-left-disabled { + background-position: -18px 0; + opacity: .5; + -moz-opacity: .5; + filter: alpha(opacity=50); + cursor: default; + } + + .x-tab-scroller-right { + //background-image: url(../images/gray/tabs/scroll-right.gif); + border-bottom-color: #d0d0d0; + } + + .x-tab-panel-bbar .x-toolbar, + .x-tab-panel-tbar .x-toolbar { + border-color: #d0d0d0; + } + + .x-form-field { + font: normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-form-text, + textarea.x-form-field { + background-color: rgba(255, 255, 255, 0.08); + background-image: none; + border-color: transparent; + } + + .x-form-select-one { + background-color: #fff; + border-color: #C1C1C1; + } + + .x-form-check-group-label { + border-bottom: 1px solid #d0d0d0; + color: #333; + } + + .x-editor .x-form-check-wrap { + background-color: #fff; + } + + .x-form-field-wrap .x-form-trigger { + //background-image: url(../images/gray/form/trigger.gif); + border-bottom-color: #b5b8c8; + } + + .x-form-field-wrap .x-form-date-trigger { + //background-image: url(../images/gray/form/date-trigger.gif); + } + + .x-form-field-wrap .x-form-clear-trigger { + //background-image: url(../images/gray/form/clear-trigger.gif); + } + + .x-form-field-wrap .x-form-search-trigger { + //background-image: url(../images/gray/form/search-trigger.gif); + } + + .x-trigger-wrap-focus .x-form-trigger { + border-bottom-color: #777777; + } + + .x-item-disabled .x-form-trigger-over { + border-bottom-color: #b5b8c8; + } + + .x-item-disabled .x-form-trigger-click { + border-bottom-color: #b5b8c8; + } + + .x-form-focus, + textarea.x-form-focus { + border-color: transparent; + } + + .x-form-invalid, + textarea.x-form-invalid { + background-color: #fff; + //background-image: url(../images/default/grid/invalid_line.gif); + border-color: #c30; + } + + .ext-webkit .x-form-invalid { + background-color: #fee; + border-color: #ff7870; + } + + .x-form-inner-invalid, + textarea.x-form-inner-invalid { + background-color: #fff; + //background-image: url(../images/default/grid/invalid_line.gif); + } + + .x-form-grow-sizer { + font: normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-form-item { + font: normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-form-invalid-msg { + color: #c0272b; + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + //background-image: url(../images/default/shared/warning.gif); + } + + .x-form-empty-field { + color: gray; + } + + .x-small-editor .x-form-field { + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .ext-webkit .x-small-editor .x-form-field { + font: normal 12px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-form-invalid-icon { + //background-image: url(../images/default/form/exclamation.gif); + } + + .x-fieldset { + border-color: rgba(255, 255, 255, 0.25); + } + + .x-fieldset legend { + font: bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + color: var(--text-hover); + } + + .x-window-draggable, + .x-window-draggable .x-window-header-text { + color: var(--text-hover); + } + + .x-panel-tbar .icon-add { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-add:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-add:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add.png) no-repeat 1px -23px !important; + } + + .x-panel-bbar .icon-add { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/add_small.png) no-repeat 0 0 !important; + } + + .x-panel-tbar .icon-remove { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-remove:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-remove:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove.png) no-repeat 1px -23px !important; + } + + .x-panel-bbar .icon-remove { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove_small.png) no-repeat 0 0 !important; + } + + .x-panel-tbar .icon-pause { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-pause:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-pause:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/pause.png) no-repeat 1px -23px !important; + } + + .x-menu-item .icon-pause { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/paused.png) no-repeat 0 0 !important; + } + + .x-panel-tbar .icon-resume { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-resume:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-resume:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume.png) no-repeat 1px -23px !important; + } + + .x-menu-item .icon-resume { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/resume_small.png) no-repeat 0 0 !important; + } + + .icon-remove { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/remove_small.png) no-repeat 0 0 !important; + } + + .x-panel-tbar .icon-up { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-up:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-up:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up.png) no-repeat 1px -23px !important; + } + + .icon-up { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/up_small.png) no-repeat 0 0 !important; + } + + .x-panel-tbar .icon-down { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-panel-tbar .icon-down:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 0 -24px !important; + } + + .x-panel-tbar .icon-down:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down.png) no-repeat 1px -23px !important; + } + + .icon-down { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/down_small.png) no-repeat 0 0 !important; + } + + .x-btn .x-deluge-preferences { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-btn .x-deluge-preferences:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 0 -24px !important; + } + + .x-btn .x-deluge-preferences:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings.png) no-repeat 1px -23px !important; + } + + .x-deluge-preferences { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings_small.png) no-repeat 0 4px !important; + } + + .icon-options { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/settings_small.png) no-repeat 0 0px !important; + } + + .x-deluge-connection-manager, + .x-btn .x-deluge-connection-manager { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .x-deluge-connection-manager:hover, + .x-btn .x-deluge-connection-manager:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 0 -24px !important; + } + + .x-deluge-connection-manager:active, + .x-btn .x-deluge-connection-manager:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/connection.png) no-repeat 1px -23px !important; + } + + .icon-help { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .icon-help:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 0 -24px !important; + } + + .icon-help:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/help.png) no-repeat 1px -23px !important; + } + + .icon-logout { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 0 0 !important; + width: 24px !important; + overflow: hidden; + } + + .icon-logout:hover { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 0 -24px !important; + } + + .icon-logout:active { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/logout.png) no-repeat 1px -23px !important; + } + + .x-deluge-main-panel { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/deluge.png) no-repeat 0 0 !important; + padding-left: 30px !important; + } + + #tbar-deluge-text.x-item-disabled * { + color: var(--text) !important; + font-size: 16px; + font-weight: normal; + } + + #tbar-deluge-text * { + color: var(--text-hover) !important; + } + + /* Buttons hover */ + .x-btn { + font: normal 11px 'Roboto', tahoma, verdana, helvetica; + } + + .x-window-bc .x-window-footer .x-btn { + background-color: var(--button-color); + color: var(--button-text); + } + + .x-window-bc .x-window-footer .x-btn:hover { + background-color: var(--button-color-hover); + color: var(--button-text-hover) + } + + .x-form-file-wrap .x-btn { + position: absolute; + right: 0; + z-index: 1; + background: var(--button-color); + } + + .x-form-file-wrap:hover .x-form-file-btn:hover .x-btn:hover { + position: absolute; + right: 0; + z-index: 1; + background: var(--button-color-hover); + color: var(--button-text-hover) + } + + .x-btn button { + font: normal 11px 'Roboto', arial, tahoma, verdana, helvetica; + color: var(--button-text); + } + + .x-btn em { + font-style: normal; + font-weight: normal; + } + + .x-btn-tl, + .x-btn-tr, + .x-btn-tc, + .x-btn-ml, + .x-btn-mr, + .x-btn-mc, + .x-btn-bl, + .x-btn-br, + .x-btn-bc { + background-image: none; + } + + .x-btn-click .x-btn-text, + .x-btn-menu-active .x-btn-text, + .x-btn-pressed .x-btn-text { + color: #AAAAAA; + } + + .x-btn-disabled * { + color: gray !important; + } + + .x-btn-mc em.x-btn-arrow { + //background-image: url(../images/default/button/arrow.gif); + } + + .x-btn-mc em.x-btn-split { + //background-image: url(../images/default/button/s-arrow.gif); + } + + .x-btn-over .x-btn-mc em.x-btn-split, + .x-btn-click .x-btn-mc em.x-btn-split, + .x-btn-menu-active .x-btn-mc em.x-btn-split, + .x-btn-pressed .x-btn-mc em.x-btn-split { + //background-image: url(../images/gray/button/s-arrow-o.gif); + } + + .x-btn-mc em.x-btn-arrow-bottom { + //background-image: url(../images/default/button/s-arrow-b-noline.gif); + } + + .x-btn-mc em.x-btn-split-bottom { + //background-image: url(../images/default/button/s-arrow-b.gif); + } + + .x-btn-over .x-btn-mc em.x-btn-split-bottom, + .x-btn-click .x-btn-mc em.x-btn-split-bottom, + .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, + .x-btn-pressed .x-btn-mc em.x-btn-split-bottom { + //background-image: url(../images/gray/button/s-arrow-bo.gif); + } + + .x-btn-group-header { + color: #666; + } + + .x-btn-group-tc { + //background-image: url(../images/gray/button/group-tb.gif); + } + + .x-btn-group-tl { + //background-image: url(../images/gray/button/group-cs.gif); + } + + .x-btn-group-tr { + //background-image: url(../images/gray/button/group-cs.gif); + } + + .x-btn-group-bc { + //background-image: url(../images/gray/button/group-tb.gif); + } + + .x-btn-group-bl { + //background-image: url(../images/gray/button/group-cs.gif); + } + + .x-btn-group-br { + //background-image: url(../images/gray/button/group-cs.gif); + } + + .x-btn-group-ml { + //background-image: url(../images/gray/button/group-lr.gif); + } + + .x-btn-group-mr { + //background-image: url(../images/gray/button/group-lr.gif); + } + + .x-btn-group-notitle .x-btn-group-tc { + //background-image: url(../images/gray/button/group-tb.gif); + } + + .x-toolbar { + border-color: transparent; + background-color: transparent; + background-image: none; + } + + .x-toolbar td, + .x-toolbar span, + .x-toolbar input, + .x-toolbar div, + .x-toolbar select, + .x-toolbar label { + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-toolbar .x-item-disabled { + color: gray; + } + + .x-toolbar .x-item-disabled * { + color: gray; + } + + .x-toolbar div.xtb-text { + padding: 0px; + } + + .x-toolbar .x-btn-mc em.x-btn-split { + //background-image: url(../images/default/button/s-arrow-noline.gif); + } + + .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, + .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split, + .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, + .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split { + //background-image: url(../images/gray/button/s-arrow-o.gif); + } + + .x-toolbar .x-btn-mc em.x-btn-split-bottom { + //background-image: url(../images/default/button/s-arrow-b-noline.gif); + } + + .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split-bottom, + .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split-bottom, + .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, + .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split-bottom { + //background-image: url(../images/gray/button/s-arrow-bo.gif); + } + + .x-toolbar .xtb-sep { + background: linear-gradient(to right, transparent 45%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, 0.08) 55%, transparent 55%); + width: 10px + } + + .x-tbar-page-first { + //background-image: url(../images/gray/grid/page-first.gif) !important; + } + + .x-tbar-loading { + //background-image: url(../images/gray/grid/refresh.gif) !important; + } + + .x-tbar-page-last { + //background-image: url(../images/gray/grid/page-last.gif) !important; + } + + .x-tbar-page-next { + //background-image: url(../images/gray/grid/page-next.gif) !important; + } + + .x-tbar-page-prev { + //background-image: url(../images/gray/grid/page-prev.gif) !important; + } + + .x-item-disabled .x-tbar-loading { + //background-image: url(../images/default/grid/loading.gif) !important; + } + + .x-item-disabled .x-tbar-page-first { + //background-image: url(../images/default/grid/page-first-disabled.gif) !important; + } + + .x-item-disabled .x-tbar-page-last { + //background-image: url(../images/default/grid/page-last-disabled.gif) !important; + } + + .x-item-disabled .x-tbar-page-next { + //background-image: url(../images/default/grid/page-next-disabled.gif) !important; + } + + .x-item-disabled .x-tbar-page-prev { + //background-image: url(../images/default/grid/page-prev-disabled.gif) !important; + } + + .x-paging-info { + color: #444; + } + + .x-toolbar-more-icon { + //background-image: url(../images/gray/toolbar/more.gif) !important; + } + + .x-resizable-handle { + background-color: #fff; + } + + .x-resizable-over .x-resizable-handle-east, + .x-resizable-pinned .x-resizable-handle-east, + .x-resizable-over .x-resizable-handle-west, + .x-resizable-pinned .x-resizable-handle-west { + //background-image: url(../images/gray/sizer/e-handle.gif); + } + + .x-resizable-over .x-resizable-handle-south, + .x-resizable-pinned .x-resizable-handle-south, + .x-resizable-over .x-resizable-handle-north, + .x-resizable-pinned .x-resizable-handle-north { + //background-image: url(../images/gray/sizer/s-handle.gif); + } + + .x-resizable-over .x-resizable-handle-north, + .x-resizable-pinned .x-resizable-handle-north { + //background-image: url(../images/gray/sizer/s-handle.gif); + } + + .x-resizable-over .x-resizable-handle-southeast, + .x-resizable-pinned .x-resizable-handle-southeast { + //background-image: url(../images/gray/sizer/se-handle.gif); + } + + .x-resizable-over .x-resizable-handle-northwest, + .x-resizable-pinned .x-resizable-handle-northwest { + //background-image: url(../images/gray/sizer/nw-handle.gif); + } + + .x-resizable-over .x-resizable-handle-northeast, + .x-resizable-pinned .x-resizable-handle-northeast { + //background-image: url(../images/gray/sizer/ne-handle.gif); + } + + .x-resizable-over .x-resizable-handle-southwest, + .x-resizable-pinned .x-resizable-handle-southwest { + //background-image: url(../images/gray/sizer/sw-handle.gif); + } + + .x-resizable-proxy { + border-color: #565656; + } + + .x-resizable-overlay { + background-color: #fff; + } + + .x-grid3 { + background: rgba(0, 0, 0, 0.25); + } + + .x-grid-panel .x-panel-mc .x-panel-body { + border-color: #d0d0d0; + } + + .x-grid3-row td, + .x-grid3-summary-row td { + font: normal 11px/16px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-grid3-hd-row td { + font: normal 11px/15px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-grid3-hd-row td { + border-left-color: transparent; + border-right-color: transparent; + } + + .x-grid-row-loading { + background-color: #fff; + //background-image: url(../images/default/shared/loading-balls.gif); + } + + .x-grid3-row { + border-color: transparent; + border-top-color: transparent; + } + + .x-grid3-row-alt { + background-color: rgba(0, 0, 0, 0.25); + } + + .x-grid3-row-over { + border-color: transparent; + background-color: rgba(255, 255, 255, 0.08); + background-image: none; + } + + .x-grid3-resize-proxy { + background: var(--main-bg-color); + } + + .x-grid3-resize-marker { + background: var(--main-bg-color); + } + + .x-grid3-header { + background-color: rgba(0, 0, 0, 0.25); + background-image: none; + color: var(--text-hover) !important; + } + + .x-grid3-header-pop { + border-left-color: #d0d0d0; + } + + .x-grid3-header-pop-inner { + border-left-color: #eee; + //background-image: url(../images/default/grid/hd-pop.gif); + } + + td.x-grid3-hd-over, + td.sort-desc, + td.sort-asc, + td.x-grid3-hd-menu-open { + border-left-color: rgba(0, 0, 0, 0.25); + border-right-color: transparent; + } + + td.x-grid3-hd-over .x-grid3-hd-inner, + td.sort-desc .x-grid3-hd-inner, + td.sort-asc .x-grid3-hd-inner, + td.x-grid3-hd-menu-open .x-grid3-hd-inner { + background-color: rgba(0, 0, 0, 0.25); + background-image: none; + + } + + .sort-asc .x-grid3-sort-icon { + //background-image: url(../images/gray/grid/sort_asc.gif); + } + + .sort-desc .x-grid3-sort-icon { + //background-image: url(../images/gray/grid/sort_desc.gif); + } + + .x-grid3-cell-text, + .x-grid3-hd-text { + color: #000; + } + + .x-grid3-split { + //background-image: url(../images/default/grid/grid-split.gif); + } + + .x-grid3-hd-text { + color: #333; + } + + .x-dd-drag-proxy .x-grid3-hd-inner { + background-color: #f9f9f9; + //background-image: url(../images/gray/grid/grid3-hrow-over2.gif); + border-color: #ACACAC; + } + + .col-move-top { + //background-image: url(../images/gray/grid/col-move-top.gif); + } + + .col-move-bottom { + //background-image: url(../images/gray/grid/col-move-bottom.gif); + } + + .x-grid3-row-selected { + background-color: rgba(255, 255, 255, 0.08) !important; + background-image: none; + border-color: transparent; + color: var(--text-hover) !important; + } + + .x-grid3-cell-selected { + background-color: #CBCBCB !important; + color: #000; + } + + .x-grid3-cell-selected span { + color: #000 !important; + } + + .x-grid3-cell-selected .x-grid3-cell-text { + color: #000; + } + + .x-grid3-locked td.x-grid3-row-marker, + .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker { + background-color: #ebeadb !important; + //background-image: url(../images/default/grid/grid-hrow.gif) !important; + color: #000; + border-top-color: #fff; + border-right-color: #6fa0df !important; + } + + .x-grid3-locked td.x-grid3-row-marker div, + .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div { + color: #333 !important; + } + + .x-grid3-dirty-cell { + //background-image: url(../images/default/grid/dirty.gif); + } + + .x-grid3-topbar, + .x-grid3-bottombar { + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-grid3-bottombar .x-toolbar { + border-top-color: #a9bfd3; + } + + .x-props-grid .x-grid3-td-name .x-grid3-cell-inner { + //background-image: url(../images/default/grid/grid3-special-col-bg.gif) !important; + color: #000 !important; + } + + .x-props-grid .x-grid3-body .x-grid3-td-name { + background-color: #fff !important; + border-right-color: #eee; + } + + .xg-hmenu-sort-asc .x-menu-item-icon { + //background-image: url(../images/default/grid/hmenu-asc.gif); + } + + .xg-hmenu-sort-desc .x-menu-item-icon { + //background-image: url(../images/default/grid/hmenu-desc.gif); + } + + .xg-hmenu-lock .x-menu-item-icon { + //background-image: url(../images/default/grid/hmenu-lock.gif); + } + + .xg-hmenu-unlock .x-menu-item-icon { + //background-image: url(../images/default/grid/hmenu-unlock.gif); + } + + .x-grid3-hd-btn, + a.x-grid3-hd-btn:hover { + background: linear-gradient(116deg, transparent 0%, transparent 0%, transparent 60%, #252525 60%), linear-gradient(244deg, var(--text-hover) 0%, var(--text-hover) 0%, var(--text-hover) 60%, transparent 60%); + height: 6px !important; + width: 8px; + padding: 7px 2px; + border-left: 1px solid #444444; + background-clip: content-box; + } + + .x-grid3-body .x-grid3-td-expander { + //background-image: url(../images/default/grid/grid3-special-col-bg.gif); + } + + .x-grid3-row-expander { + //background-image: url(../images/gray/grid/row-expand-sprite.gif); + } + + .x-grid3-body .x-grid3-td-checker { + //background-image: url(../images/default/grid/grid3-special-col-bg.gif); + } + + .x-grid3-row-checker, + .x-grid3-hd-checker { + //background-image: url(../images/default/grid/row-check-sprite.gif); + } + + .x-grid3-body .x-grid3-td-numberer { + //background-image: url(../images/default/grid/grid3-special-col-bg.gif); + } + + .x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner { + color: #444; + } + + .x-grid3-body .x-grid3-td-row-icon { + //background-image: url(../images/default/grid/grid3-special-col-bg.gif); + } + + .x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer, + .x-grid3-body .x-grid3-row-selected .x-grid3-td-checker, + .x-grid3-body .x-grid3-row-selected .x-grid3-td-expander { + //background-image: url(../images/gray/grid/grid3-special-col-sel-bg.gif); + } + + .x-grid3-check-col { + //background-image: url(../images/default/menu/unchecked.gif); + } + + .x-grid3-check-col-on { + //background-image: url(../images/default/menu/checked.gif); + } + + .x-grid-group, + .x-grid-group-body, + .x-grid-group-hd { + zoom: 1; + } + + .x-grid-group-hd { + border-bottom-color: #d0d0d0; + } + + .x-grid-group-hd div.x-grid-group-title { + //background-image: url(../images/gray/grid/group-collapse.gif); + color: #5F5F5F; + font: bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title { + //background-image: url(../images/gray/grid/group-expand.gif); + } + + .x-group-by-icon { + //background-image: url(../images/default/grid/group-by.gif); + } + + .x-cols-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/columns.png); + } + + .x-show-groups-icon { + //background-image: url(../images/default/grid/group-by.gif); + } + + .x-grid-empty { + color: gray; + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-grid-with-col-lines .x-grid3-row td.x-grid3-cell { + border-right-color: #ededed; + } + + .x-grid3-cell { + box-sizing: border-box; + } + + .x-grid-with-col-lines .x-grid3-row { + border-top-color: #ededed; + } + + .x-grid-with-col-lines .x-grid3-row-selected { + border-top-color: #B9B9B9; + } + + .x-pivotgrid .x-grid3-header-offset table td { + background: url(../images/gray/grid/grid3-hrow2.gif) repeat-x 50% 100%; + border-left: 1px solid; + border-right: 1px solid; + border-left-color: #D0D0D0; + border-right-color: #D0D0D0; + } + + .x-pivotgrid .x-grid3-row-headers { + background-color: #f9f9f9; + } + + .x-pivotgrid .x-grid3-row-headers table td { + background: #EEE url(../images/default/grid/grid3-rowheader.gif) repeat-x left top; + border-left: 1px solid; + border-right: 1px solid; + border-left-color: #EEE; + border-right-color: #D0D0D0; + border-bottom: 1px solid; + border-bottom-color: #D0D0D0; + height: 18px; + } + + .x-dd-drag-ghost { + color: #000; + font: normal 11px 'Roboto', arial, helvetica, sans-serif; + border-color: #ddd #bbb #bbb #ddd; + background-color: #fff; + } + + .x-dd-drop-nodrop .x-dd-drop-icon { + //background-image: url(../images/default/dd/drop-no.gif); + } + + .x-dd-drop-ok .x-dd-drop-icon { + //background-image: url(../images/default/dd/drop-yes.gif); + } + + .x-dd-drop-ok-add .x-dd-drop-icon { + //background-image: url(../images/default/dd/drop-add.gif); + } + + .x-view-selector { + background-color: #D6D6D6; + border-color: #888888; + } + + .x-tree-node-expanded .x-tree-node-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/folder.png); + } + + .x-tree-node-leaf .x-tree-node-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/file.png); + } + + .x-tree-node-collapsed .x-tree-node-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/deluge/folder.png); + } + + .x-tree-node-loading .x-tree-node-icon { + //background-image: url(../images/default/tree/loading.gif) !important; + } + + .x-tree-node .x-tree-node-inline-icon { + background-image: none; + } + + .x-tree-node-loading a span { + font-style: italic; + color: #444444; + } + + .ext-ie .x-tree-node-el input { + width: 15px; + height: 15px; + } + + .x-tree-lines .x-tree-elbow { + //background-image: url(../images/default/tree/elbow.gif); + } + + .x-tree-lines .x-tree-elbow-plus { + //background-image: url(../images/default/tree/elbow-plus.gif); + } + + .x-tree-lines .x-tree-elbow-minus { + //background-image: url(../images/default/tree/elbow-minus.gif); + } + + .x-tree-lines .x-tree-elbow-end { + //background-image: url(../images/default/tree/elbow-end.gif); + } + + .x-tree-lines .x-tree-elbow-end-plus { + //background-image: url(../images/gray/tree/elbow-end-plus.gif); + } + + .x-tree-lines .x-tree-elbow-end-minus { + //background-image: url(../images/gray/tree/elbow-end-minus.gif); + } + + .x-tree-lines .x-tree-elbow-line { + //background-image: url(../images/default/tree/elbow-line.gif); + } + + .x-tree-no-lines .x-tree-elbow-plus { + //background-image: url(../images/default/tree/elbow-plus-nl.gif); + } + + .x-tree-no-lines .x-tree-elbow-minus { + //background-image: url(../images/default/tree/elbow-minus-nl.gif); + } + + .x-tree-no-lines .x-tree-elbow-end-plus { + //background-image: url(../images/gray/tree/elbow-end-plus-nl.gif); + } + + .x-tree-no-lines .x-tree-elbow-end-minus { + //background-image: url(../images/gray/tree/elbow-end-minus-nl.gif); + } + + .x-tree-arrows .x-tree-elbow-plus { + //background-image: url(../images/gray/tree/arrows.gif); + } + + .x-tree-arrows .x-tree-elbow-minus { + //background-image: url(../images/gray/tree/arrows.gif); + } + + .x-tree-arrows .x-tree-elbow-end-plus { + //background-image: url(../images/gray/tree/arrows.gif); + } + + .x-tree-arrows .x-tree-elbow-end-minus { + //background-image: url(../images/gray/tree/arrows.gif); + } + + .x-tree-node { + color: #cccccc; + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-treegrid-root-table, + .x-treegrid-col { + border-color: rgba(255, 255, 255, 0.08) !important; + } + + .x-tree-node a, + .x-dd-drag-ghost a { + color: #cccccc; + } + + .x-tree-node a span, + .x-dd-drag-ghost a span { + color: #cccccc; + } + + .x-tree-node .x-tree-node-disabled a span { + color: gray !important; + } + + .x-tree-node div.x-tree-drag-insert-below { + border-bottom-color: #36c; + } + + .x-tree-node div.x-tree-drag-insert-above { + border-top-color: #36c; + } + + .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a { + border-bottom-color: #36c; + } + + .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a { + border-top-color: #36c; + } + + .x-tree-node .x-tree-drag-append a span { + background-color: #ddd; + border-color: gray; + } + + .x-tree-node .x-tree-node-over { + background-color: rgba(255, 255, 255, 0.08); + } + + .x-tree-node .x-tree-selected { + background-color: rgba(0, 0, 0, 0.45); + } + + .x-tree-drop-ok-append .x-dd-drop-icon { + //background-image: url(../images/default/tree/drop-add.gif); + } + + .x-tree-drop-ok-above .x-dd-drop-icon { + //background-image: url(../images/default/tree/drop-over.gif); + } + + .x-tree-drop-ok-below .x-dd-drop-icon { + //background-image: url(../images/default/tree/drop-under.gif); + } + + .x-tree-drop-ok-between .x-dd-drop-icon { + //background-image: url(../images/default/tree/drop-between.gif); + } + + .x-date-picker { + border-color: #585858; + background-color: #fff; + } + + .x-date-middle, + .x-date-left, + .x-date-right { + //background-image: url(../images/gray/shared/hd-sprite.gif); + color: #fff; + font: bold 11px 'Roboto', "sans serif", tahoma, verdana, helvetica; + } + + .x-date-middle .x-btn .x-btn-text { + color: #fff; + } + + .x-panel-tbar .x-btn-text { + height: 24px !important; + color: rgb(0, 0, 0, 0) !important; + } + + .x-panel-tbar .x-toolbar .xtb-sep { + height: 24px !important; + } + + .x-date-middle .x-btn-mc em.x-btn-arrow { + //background-image: url(../images/gray/toolbar/btn-arrow-light.gif); + } + + .x-date-right a { + //background-image: url(../images/gray/shared/right-btn.gif); + } + + .x-date-left a { + //background-image: url(../images/gray/shared/left-btn.gif); + } + + .x-date-inner th { + background-color: #D8D8D8; + //background-image: url(../images/gray/panel/white-top-bottom.gif); + border-bottom-color: #AFAFAF; + font: normal 10px 'Roboto', helvetica, tahoma, sans-serif; + color: #595959; + } + + .x-date-inner td { + border-color: #fff; + } + + .x-date-inner a { + font: normal 11px 'Roboto', arial, helvetica, tahoma, sans-serif; + color: #000; + } + + .x-date-inner .x-date-active { + color: #000; + } + + .x-date-inner .x-date-selected a { + background-image: none; + background-color: #D8D8D8; + border-color: #DCDCDC; + } + + .x-date-inner .x-date-today a { + border-color: darkred; + } + + .x-date-inner .x-date-selected span { + font-weight: bold; + } + + .x-date-inner .x-date-prevday a, + .x-date-inner .x-date-nextday a { + color: #aaa; + } + + .x-date-bottom { + border-top-color: #AFAFAF; + background-color: #D8D8D8; + background: #D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; + } + + .x-date-inner a:hover, + .x-date-inner .x-date-disabled a:hover { + color: #000; + background-color: #D8D8D8; + } + + .x-date-inner .x-date-disabled a { + background-color: #eee; + color: #bbb; + } + + .x-date-mmenu { + background-color: #eee !important; + } + + .x-date-mmenu .x-menu-item { + font-size: 10px; + color: #000; + } + + .x-date-mp { + background-color: #fff; + } + + .x-date-mp td { + font: normal 11px 'Roboto', arial, helvetica, tahoma, sans-serif; + } + + .x-date-mp-btns button { + background-color: #4E565F; + color: #fff; + border-color: #C0C0C0 #434343 #434343 #C0C0C0; + font: normal 11px 'Roboto', arial, helvetica, tahoma, sans-serif; + } + + .x-date-mp-btns { + background-color: #D8D8D8; + background: #D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; + } + + .x-date-mp-btns td { + border-top-color: #AFAFAF; + } + + td.x-date-mp-month a, + td.x-date-mp-year a { + color: #333; + } + + td.x-date-mp-month a:hover, + td.x-date-mp-year a:hover { + color: #333; + background-color: #FDFDFD; + } + + td.x-date-mp-sel a { + background-color: #D8D8D8; + //background:#D8D8D8 url(../images/gray/panel/white-top-bottom.gif) 0 -2px; + border-color: #DCDCDC; + } + + .x-date-mp-ybtn a { + //background-image: url(../images/gray/panel/tool-sprites.gif); + } + + td.x-date-mp-sep { + border-right-color: #D7D7D7; + } + + .x-tip .x-tip-close { + //background-image: url(../images/gray/qtip/close.gif); + } + + .x-tip .x-tip-tc, + .x-tip .x-tip-tl, + .x-tip .x-tip-tr, + .x-tip .x-tip-bc, + .x-tip .x-tip-bl, + .x-tip .x-tip-br, + .x-tip .x-tip-ml, + .x-tip .x-tip-mr { + //background-image: url(../images/gray/qtip/tip-sprite.gif); + } + + .x-tip .x-tip-mc { + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-tip .x-tip-ml { + background-color: #fff; + } + + .x-tip .x-tip-header-text { + font: bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + color: #444; + } + + .x-tip .x-tip-body { + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + color: #444; + } + + .x-form-invalid-tip .x-tip-tc, + .x-form-invalid-tip .x-tip-tl, + .x-form-invalid-tip .x-tip-tr, + .x-form-invalid-tip .x-tip-bc, + .x-form-invalid-tip .x-tip-bl, + .x-form-invalid-tip .x-tip-br, + .x-form-invalid-tip .x-tip-ml, + .x-form-invalid-tip .x-tip-mr { + //background-image: url(../images/default/form/error-tip-corners.gif); + } + + .x-form-invalid-tip .x-tip-body { + //background-image: url(../images/default/form/exclamation.gif); + } + + .x-tip-anchor { + //background-image: url(../images/gray/qtip/tip-anchor-sprite.gif); + } + + .x-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-menu-floating { + border-color: transparent; + } + + .x-menu-nosep { + background-image: none; + } + + .x-menu-list-item { + font: normal 11px 'Roboto', arial, tahoma, sans-serif; + } + + .x-menu-item-arrow { + //background-image: url(../images/gray/menu/menu-parent.gif); + } + + .x-menu-sep { + background-color: transparent; + border-bottom-color: rgba(255, 255, 255, 0.08); + } + + a.x-menu-item { + color: var(--text); + } + + .x-menu-item-active { + background-image: none; + background-color: rgba(255, 255, 255, 0.08); + border-color: transparent; + color: var(--text-hover) !important; + } + + .x-menu-item-active a.x-menu-item { + border-color: transparent; + color: var(--text-hover) !important; + } + + .x-menu-check-item .x-menu-item-icon { + //background-image: url(../images/default/menu/unchecked.gif); + } + + .x-menu-item-checked .x-menu-item-icon { + //background-image: url(../images/default/menu/checked.gif); + } + + .x-menu-item-checked .x-menu-group-item .x-menu-item-icon { + //background-image: url(../images/gray/menu/group-checked.gif); + } + + .x-menu-group-item .x-menu-item-icon { + background-image: none; + } + + .x-menu-plain { + background-color: #fff !important; + } + + .x-menu .x-date-picker { + border-color: #AFAFAF; + } + + .x-cycle-menu .x-menu-item-checked { + border-color: #B9B9B9 !important; + background-color: #F1F1F1; + } + + .x-menu-scroller-top { + //background-image: url(../images/default/layout/mini-top.gif); + } + + .x-menu-scroller-bottom { + //background-image: url(../images/default/layout/mini-bottom.gif); + } + + .x-box-tl { + //background-image: url(../images/default/box/corners.gif); + } + + .x-box-tc { + //background-image: url(../images/default/box/tb.gif); + } + + .x-box-tr { + //background-image: url(../images/default/box/corners.gif); + } + + .x-box-ml { + //background-image: url(../images/default/box/l.gif); + } + + .x-box-mc { + background-color: #eee; + //background-image: url(../images/default/box/tb.gif); + font-family: "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", "Arial", sans-serif; + color: #393939; + font-size: 12px; + } + + .x-box-mc h3 { + font-size: 14px; + font-weight: bold; + } + + .x-box-mr { + //background-image: url(../images/default/box/r.gif); + } + + .x-box-bl { + //background-image: url(../images/default/box/corners.gif); + } + + .x-box-bc { + //background-image: url(../images/default/box/tb.gif); + } + + .x-box-br { + //background-image: url(../images/default/box/corners.gif); + } + + .x-box-blue .x-box-bl, + .x-box-blue .x-box-br, + .x-box-blue .x-box-tl, + .x-box-blue .x-box-tr { + //background-image: url(../images/default/box/corners-blue.gif); + } + + .x-box-blue .x-box-bc, + .x-box-blue .x-box-mc, + .x-box-blue .x-box-tc { + //background-image: url(../images/default/box/tb-blue.gif); + } + + .x-box-blue .x-box-mc { + background-color: #c3daf9; + } + + .x-box-blue .x-box-mc h3 { + color: #17385b; + } + + .x-box-blue .x-box-ml { + //background-image: url(../images/default/box/l-blue.gif); + } + + .x-box-blue .x-box-mr { + //background-image: url(../images/default/box/r-blue.gif); + } + + .x-combo-list { + border-color: #666666; + background-color: #252525; + font: normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-combo-list-inner { + background-color: #252525; + } + + .x-combo-list-hd { + font: bold 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + color: #333; + //background-image: url(../images/default/layout/panel-title-light-bg.gif); + border-bottom-color: #BCBCBC; + } + + .x-resizable-pinned .x-combo-list-inner { + border-bottom-color: #BEBEBE; + } + + .x-combo-list-item { + border-color: #252525; + } + + .x-combo-list .x-combo-selected { + border-color: #252525 !important; + background-color: #333333; + } + + .x-combo-list .x-toolbar { + border-top-color: #BCBCBC; + } + + .x-combo-list-small { + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-panel { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-color: #d0d0d0; + } + + .x-panel-header { + color: var(--text-hover); + font-weight: bold; + font-size: 11px; + font-family: 'Roboto', tahoma, arial, verdana, sans-serif; + border-color: transparent; + background-image: none; + background-color: rgba(0, 0, 0, 0.25); + } + + .x-panel-body { + border-color: transparent; + border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-panel-bbar .x-toolbar, + .x-panel-tbar .x-toolbar { + border-color: transparent !important; + } + + .x-panel-tbar-noheader .x-toolbar, + .x-panel-mc .x-panel-tbar .x-toolbar { + border-top-color: transparent; + } + + .x-panel-body-noheader, + .x-panel-mc .x-panel-body { + border-top-color: transparent; + } + + .x-panel-tl .x-panel-header { + color: #333; + font: bold 11px 'Roboto', tahoma, arial, verdana, sans-serif; + } + + .x-panel-tc { + //background-image: url(../images/gray/panel/top-bottom.gif); + } + + .x-panel-tl, + .x-panel-tr, + .x-panel-bl, + .x-panel-br { + //background-image: url(../images/gray/panel/corners-sprite.gif); + border-bottom-color: #d0d0d0; + } + + .x-panel-bc { + //background-image: url(../images/gray/panel/top-bottom.gif); + } + + .x-panel-mc { + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + background-color: #f1f1f1; + } + + .x-panel-ml { + background-color: #fff; + //background-image: url(../images/gray/panel/left-right.gif); + } + + .x-panel-mr { + //background-image: url(../images/gray/panel/left-right.gif); + } + + .x-tool { + //background-image: url(../images/gray/panel/tool-sprites.gif); + } + + .x-panel-collapsed .x-accordion-hd .x-tool-toggle { + height: 8px; + width: 8px; + border: 1px solid var(--button-color); + padding: 2px; + background: linear-gradient(to bottom, transparent 45%, var(--button-color) 45%, var(--button-color) 55%, transparent 55%), linear-gradient(to right, transparent 45%, var(--button-color) 45%, var(--button-color) 55%, transparent 55%); + background-clip: content-box; + } + + .x-accordion-hd .x-tool-toggle { + height: 8px; + width: 8px; + border: 1px solid var(--button-color); + padding: 2px; + background: linear-gradient(to bottom, transparent 45%, var(--button-color) 45%, var(--button-color) 55%, transparent 55%); + background-clip: content-box; + } + + .x-tool-collapse-west { + height: 8px; + width: 6px; + padding: 2px 3px; + border: 1px solid var(--button-color); + background: linear-gradient(26deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(154deg, #252525 40%, var(--button-color) 40%, var(--button-color) 100%, #252525 100%); + background-clip: content-box; + } + + .x-tool-expand-west { + height: 8px; + width: 6px; + padding: 2px 3px; + border: 1px solid var(--button-color); + background: linear-gradient(-26deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(-154deg, #252525 40%, var(--button-color) 40%, var(--button-color) 100%, #252525 100%); + background-clip: content-box; + } + + .x-tool-collapse-south { + height: 6px !important; + width: 8px; + padding: 3px 2px; + border: 1px solid var(--button-color); + background: linear-gradient(116deg, transparent 0%, transparent 0%, transparent 60%, #252525 60%), linear-gradient(244deg, var(--button-color) 0%, var(--button-color) 0%, var(--button-color) 60%, transparent 60%); + background-clip: content-box; + } + + .x-tool-expand-south { + height: 6px; + width: 8px; + padding: 3px 2px; + border: 1px solid var(--button-color); + background: linear-gradient(116deg, #252525 40%, #252525 40%, #252525 0%, transparent 0%), linear-gradient(244deg, transparent 40%, var(--button-color) 40%, var(--button-color) 100%, transparent 100%); + background-clip: content-box; + } + + .x-tool-close { + height: 8px; + width: 8px; + border: 1px solid #44444400; + padding: 2px; + background: linear-gradient(to bottom right, transparent 45%, var(--button-color) 45%, var(--button-color) 55%, transparent 55%), linear-gradient(to top right, transparent 45%, var(--button-color) 45%, var(--button-color) 55%, transparent 55%); + background-clip: content-box; + } + + .x-panel-ghost { + background-color: #f2f2f2; + } + + .x-panel-ghost ul { + border-color: #d0d0d0; + } + + .x-panel-dd-spacer { + border-color: #d0d0d0; + } + + .x-panel-fbar td, + .x-panel-fbar span, + .x-panel-fbar input, + .x-panel-fbar div, + .x-panel-fbar select, + .x-panel-fbar label { + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-window, + .x-window .x-panel-body, + .x-window .x-tab-panel-header, + .x-tab-panel-footer, + .x-window .x-panel-noborder .x-panel-bbar-noborder .x-toolbar { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-window .x-panel-bbar .x-toolbar, + .x-panel-tbar .x-toolbar { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-window-proxy { + background-color: #fcfcfc; + border-color: #d0d0d0; + } + + .x-window-bwrap { + border: 1px solid transparent; + border-top: 1px solid rgba(255, 255, 255, 0.25); + } + + .x-window-tl .x-window-header { + color: #ffffff; + font: bold 11px 'Roboto', tahoma, arial, verdana, sans-serif; + } + + .x-window-tc { + background-image: none; + background-color: transparent; + } + + .x-window-tl { + background-image: none; + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-window-tr { + background-image: none; + background-color: transparent; + } + + .x-window-bc { + background-image: none; + background-color: transparent; + } + + .x-window-bl { + background-image: none; + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-window-br { + background-image: none; + background-color: transparent; + } + + .x-window-mc { + border-color: transparent; + font: normal 11px 'Roboto', tahoma, arial, helvetica, sans-serif; + background-color: transparent; + } + + .x-window-ml { + background-image: none; + background-color: transparent; + } + + .x-window-mr { + background-image: none; + background-color: transparent; + } + + .x-window-maximized .x-window-tc { + background-color: #fff; + } + + .x-window-bbar .x-toolbar { + border-top-color: #d0d0d0; + } + + .x-panel-ghost .x-window-tl { + border-bottom-color: #d0d0d0; + } + + .x-panel-collapsed .x-window-tl { + border-bottom-color: #d0d0d0; + } + + .x-dlg-mask { + background-color: #ccc; + } + + .x-window-plain .x-window-mc { + background-color: transparent; + border-color: transparent; + } + + .x-window-plain .x-window-body { + border-color: transparent; + } + + body.x-body-masked .x-window-plain .x-window-mc { + background-color: transparent; + } + + .x-html-editor-wrap { + border-color: #BCBCBC; + background-color: #fff; + } + + .x-html-editor-tb .x-btn-text { + //background-image: url(../images/default/editor/tb-sprite.gif); + } + + .x-panel-noborder .x-panel-header-noborder { + border-bottom-color: rgba(255, 255, 255, 0.08); + } + + .x-panel-noborder .x-panel-tbar-noborder .x-toolbar { + border-bottom-color: #353535; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-panel-noborder .x-panel-bbar-noborder .x-toolbar { + border-top-color: #353535; + } + + .x-tab-panel-bbar-noborder .x-toolbar { + border-top-color: #d0d0d0; + } + + .x-tab-panel-tbar-noborder .x-toolbar { + border-bottom-color: #d0d0d0; + } + + .x-border-layout-ct { + background-color: #f0f0f0; + } + + .x-border-layout-ct { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .x-accordion-hd { + color: var(--text-hover); + font-weight: normal; + //background-image: url(../images/gray/panel/light-hd.gif); + } + + .x-layout-collapsed { + background-color: rgba(0, 0, 0, 0.25); + border-color: transparent; + } + + .x-layout-collapsed-over { + background-color: rgba(0, 0, 0, 0.45); + } + + .x-layout-split-west .x-layout-mini { + //background-image: url(../images/default/layout/mini-left.gif); + } + + .x-layout-split-east .x-layout-mini { + //background-image: url(../images/default/layout/mini-right.gif); + } + + .x-layout-split-north .x-layout-mini { + //background-image: url(../images/default/layout/mini-top.gif); + } + + .x-layout-split-south .x-layout-mini { + //background-image: url(../images/default/layout/mini-bottom.gif); + } + + .x-layout-cmini-west .x-layout-mini { + //background-image: url(../images/default/layout/mini-right.gif); + } + + .x-layout-cmini-east .x-layout-mini { + //background-image: url(../images/default/layout/mini-left.gif); + } + + .x-layout-cmini-north .x-layout-mini { + //background-image: url(../images/default/layout/mini-bottom.gif); + } + + .x-layout-cmini-south .x-layout-mini { + //background-image: url(../images/default/layout/mini-top.gif); + } + + .x-progress-wrap { + border-color: transparent; + background: rgba(255, 255, 255, 0.35); + } + + .x-progress-inner { + background-color: transparent; + background-image: none; + } + + .x-progress-bar { + background-color: rgb(var(--accent-color)); + background-image: none; + border-top-color: transparent; + border-bottom-color: transparent; + border-right-color: transparent; + color: var(--label-text-color); + } + + .x-progress-text { + font-size: 11px; + font-weight: normal; + color: var(--label-text-color) !important; + } + + .x-progress-text-back { + color: var(--label-text-color) !important; + } + + .x-list-header { + background-color: rgba(0, 0, 0, 0.25); + background-image: none; + color: var(--text-hover) !important; + } + + .x-list-header-inner div em { + border-left-color: rgba(255, 255, 255, .08); + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-list-body dt em { + font: normal 11px 'Roboto', arial, tahoma, helvetica, sans-serif; + } + + .x-list-over { + background-color: rgba(255, 255, 255, 0.08); + } + + .x-list-selected { + background-color: rgba(255, 255, 255, 0.08); + color: var(--text-hover) !important; + } + + .x-list-resizer { + border-left-color: #555; + border-right-color: #555; + } + + .x-list-header-inner em.sort-asc, + .x-list-header-inner em.sort-desc { + background: #202020; + border-color: #202020; + } + + .x-slider-horz, + .x-slider-horz .x-slider-end, + .x-slider-horz .x-slider-inner { + //background-image: url(../images/default/slider/slider-bg.png); + } + + .x-slider-horz .x-slider-thumb { + //background-image: url(../images/gray/slider/slider-thumb.png); + } + + .x-slider-vert, + .x-slider-vert .x-slider-end, + .x-slider-vert .x-slider-inner { + //background-image: url(../images/default/slider/slider-v-bg.png); + } + + .x-slider-vert .x-slider-thumb { + //background-image: url(../images/gray/slider/slider-v-thumb.png); + } + + .x-window-dlg .ext-mb-text, + .x-window-dlg .x-window-header-text { + font-size: 12px; + } + + .x-window-dlg .ext-mb-textarea { + font: normal 12px 'Roboto', tahoma, arial, helvetica, sans-serif; + } + + .x-window-dlg .x-msg-box-wait { + //background-image: url(../images/default/grid/loading.gif); + } + + .x-window-dlg .ext-mb-info { + //background-image: url(../images/gray/window/icon-info.gif); + } + + .x-window-dlg .ext-mb-warning { + //background-image: url(../images/gray/window/icon-warning.gif); + } + + .x-window-dlg .ext-mb-question { + //background-image: url(../images/gray/window/icon-question.gif); + } + + .x-window-dlg .ext-mb-error { + //background-image: url(../images/gray/window/icon-error.gif); + } \ No newline at end of file diff --git a/CSS/themes/deluge/dracula.css b/CSS/themes/deluge/dracula.css new file mode 100644 index 00000000..a1cdf95f --- /dev/null +++ b/CSS/themes/deluge/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* DELUGE DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/deluge/hotline.css b/CSS/themes/deluge/hotline.css index 825d15ee..28a352f6 100644 --- a/CSS/themes/deluge/hotline.css +++ b/CSS/themes/deluge/hotline.css @@ -13,10 +13,4 @@ /* DELUGE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #df6c4c; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/deluge/organizr-dark.css b/CSS/themes/deluge/organizr-dark.css index b10bc132..2b0ddb9f 100644 --- a/CSS/themes/deluge/organizr-dark.css +++ b/CSS/themes/deluge/organizr-dark.css @@ -13,10 +13,4 @@ /* DELUGE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --progress-color: #2cabe3; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/deluge/plex.css b/CSS/themes/deluge/plex.css index 8f7be846..1efc3f14 100644 --- a/CSS/themes/deluge/plex.css +++ b/CSS/themes/deluge/plex.css @@ -13,10 +13,4 @@ /* DELUGE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --progress-color: #cc7b19; - --button-color: #cc7b19; - --button-color-hover: #e59029; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/deluge/space-gray.css b/CSS/themes/deluge/space-gray.css index 8b605526..c56cc4d1 100644 --- a/CSS/themes/deluge/space-gray.css +++ b/CSS/themes/deluge/space-gray.css @@ -13,10 +13,4 @@ /* DELUGE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/deluge/deluge-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --progress-color: #607D8B; - --button-color: #607D8B; - --button-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/aquamarine.css b/CSS/themes/dozzle/aquamarine.css index 23b7c389..36f00dfb 100644 --- a/CSS/themes/dozzle/aquamarine.css +++ b/CSS/themes/dozzle/aquamarine.css @@ -13,19 +13,4 @@ /* DOZZLE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: 0, 150, 136; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --text-strong-color: #fff; - --text-color: #eee; - --text-muted: #999; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/dozzle/dark.css b/CSS/themes/dozzle/dark.css index 2fdb328b..61c0eff7 100644 --- a/CSS/themes/dozzle/dark.css +++ b/CSS/themes/dozzle/dark.css @@ -13,19 +13,4 @@ /* DOZZLE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --accent-color: 100, 100, 100; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - --text-color: #eee; - --text-strong-color: #fff; - --text-muted: #727272; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/dozzle-base.css b/CSS/themes/dozzle/dozzle-base.css index 63e0279a..e05c8f5d 100644 --- a/CSS/themes/dozzle/dozzle-base.css +++ b/CSS/themes/dozzle/dozzle-base.css @@ -10,6 +10,15 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --scheme-main-ter: var(--main-bg-color); + --text-strong-color: var(--button-text-hover); + --border-color: rgb(255 255 255 / 25%); + --logo-color: rgb(var(--accent-color)); + --body-background-color: var(--main-bg-color); + --border-hover-color: rgb(var(--accent-color)); +} + * { outline: none; } @@ -17,7 +26,25 @@ html, body { background: var(--main-bg-color) !important; - color: var(--text-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +h1, +h2, +h3, +h4, +h5, +h6, +section header, +.menu-label { + color: var(--text-hover) !important; } @@ -51,16 +78,17 @@ html.has-custom-scrollbars section main { /* Text important */ p, .menu-list a { - color: var(--text-color) !important; + color: var(--text) !important; } .panel-heading { background-color: rgb(var(--accent-color)); + color: var(--label-text-color) !important; } .panel-block { - color: var(--text-color); + color: var(--text); } .panel-tabs a.is-active { @@ -70,7 +98,7 @@ p, .panel-tabs a { border-bottom: 1px solid var(--border-color); - color: var(--text-color); + color: var(--text); } .panel-tabs a:hover { @@ -87,13 +115,13 @@ label.panel-block:hover { /* Side Menu*/ .menu-list a:hover { background-color: rgba(255, 255, 255, .08); - color: var(--text-strong-color); + color: var(--text-hover) !important; } .menu-list a.is-active, .menu-list a.is-active:hover { background-color: rgb(var(--accent-color)); - color: #fff !important; + color: var(--label-text-color) !important; } .menu-list li:hover .column-icon:hover { @@ -109,6 +137,13 @@ li.exited a { .input, .dropdown-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: rgba(255, 255, 255, .1); border-radius: 4px; color: var(--text-strong-color); @@ -185,6 +220,17 @@ section .is-scrollbar-notification button { color: var(--button-text-hover) !important; } +#hide-nav { + background: var(--button-color) !important; + color: var(--button-text) !important; +} + +#hide-nav:hover { + border-color: var(--button-color-hover) !important; + background: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; +} + code { background: rgba(0, 0, 0, .35) !important; } diff --git a/CSS/themes/dozzle/dracula.css b/CSS/themes/dozzle/dracula.css new file mode 100644 index 00000000..81b7b3b8 --- /dev/null +++ b/CSS/themes/dozzle/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* DOZZLE DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/hotline.css b/CSS/themes/dozzle/hotline.css index 21f5aa5c..ee0516ad 100644 --- a/CSS/themes/dozzle/hotline.css +++ b/CSS/themes/dozzle/hotline.css @@ -13,19 +13,4 @@ /* DOZZLE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: 244, 67, 54; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - --text-color: #eee; - --text-strong-color: #fff; - --text-muted: #bbb; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/organizr-dark.css b/CSS/themes/dozzle/organizr-dark.css index 6e5c3a66..d0810ec2 100644 --- a/CSS/themes/dozzle/organizr-dark.css +++ b/CSS/themes/dozzle/organizr-dark.css @@ -13,19 +13,4 @@ /* DOZZLE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --accent-color: 44, 171, 227; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #FFF; - --text-color: #96a2b4; - --text-strong-color: #fff; - --text-muted: #bbb; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/plex.css b/CSS/themes/dozzle/plex.css index a14e0ab0..253a1641 100644 --- a/CSS/themes/dozzle/plex.css +++ b/CSS/themes/dozzle/plex.css @@ -13,19 +13,4 @@ /* DOZZLE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --accent-color: 229, 160, 13; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - --text-color: #eee; - --text-strong-color: #fff; - --text-muted: #bbb; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/dozzle/space-gray.css b/CSS/themes/dozzle/space-gray.css index fa5abaeb..ea7b2614 100644 --- a/CSS/themes/dozzle/space-gray.css +++ b/CSS/themes/dozzle/space-gray.css @@ -13,19 +13,4 @@ /* DOZZLE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/dozzle/dozzle-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --accent-color: 129, 166, 183; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #FFF; - --text-color: #eee; - --text-strong-color: #fff; - --text-muted: #bbb; - --border-color: rgb(255 255 255 / 25%); - --logo-color: rgb(var(--accent-color)); - --body-background-color: var(--main-bg-color); - --border-hover-color: rgb(var(--accent-color)); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/aquamarine.css b/CSS/themes/duplicacy/aquamarine.css index 9181dc8d..7446efbe 100644 --- a/CSS/themes/duplicacy/aquamarine.css +++ b/CSS/themes/duplicacy/aquamarine.css @@ -13,15 +13,4 @@ /* DUPLICACY AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/dark.css b/CSS/themes/duplicacy/dark.css index 135b30f4..f6f769c2 100644 --- a/CSS/themes/duplicacy/dark.css +++ b/CSS/themes/duplicacy/dark.css @@ -13,15 +13,4 @@ /* DUPLICACY DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/dracula.css b/CSS/themes/duplicacy/dracula.css new file mode 100644 index 00000000..3e0adb22 --- /dev/null +++ b/CSS/themes/duplicacy/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* DUPLICACY DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/duplicacy-base.css b/CSS/themes/duplicacy/duplicacy-base.css index 5225f7b7..a0ad489b 100644 --- a/CSS/themes/duplicacy/duplicacy-base.css +++ b/CSS/themes/duplicacy/duplicacy-base.css @@ -13,18 +13,25 @@ body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -a { - color: var(--link-color); +a:not(.timeline-content a) { + color: var(--link-color) !important; } -a:hover { - color: #fff; +a:hover:not(.timeline-content a) { + color: var(--link-color-hover) !important; } a.disabled-link { - color: #666; + color: var(--text-muted); } /* Scrollbar */ @@ -38,7 +45,14 @@ a.disabled-link { body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -68,11 +82,8 @@ a.disabled-link { /* TEXT */ body, -.card, .category, -.card label, .card .labels p, -.card .title, .card .stats, .vis-time-axis .vis-text, .footer .copyright, @@ -82,8 +93,37 @@ body, color: var(--text) !important; } +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6, +.card label, +.card, +.card .title { + color: var(--text-hover); +} + +label { + color: var(--text) !important; +} + .main-panel { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .content .card { @@ -99,7 +139,7 @@ body, } .text-primary { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .text-primary:hover { @@ -141,7 +181,7 @@ body, .col-xs-4 .card, .col-xs-12 .card, .col-xs-8 .card { - background: rgb(255 255 255 / 8%) !important; + background: rgb(0 0 0 / 8%) !important; } #schedule-0, @@ -164,8 +204,9 @@ body, #schedule-17, #schedule-18, #schedule-19, -#schedule-20 { - background-color: rgb(255 255 255 / 8%); +#schedule-20, +[id*="#schedule-"] { + background-color: rgb(0 0 0 / 8%); } /* TIMELINE */ @@ -227,22 +268,27 @@ body, background: rgb(0 0 0 / 10%); } +.sidebar[data-background-color="black"] .logo, +.off-canvas-sidebar[data-background-color="black"] .logo { + border-bottom: 1px solid rgba(var(--accent-color)); +} + .sidebar .nav li.active>a:before, .sidebar .nav li.active>a:after { - border-right: 17px solid var(--accent-color); + border-right: 17px solid rgb(var(--accent-color)); } @media (min-width: 992px) { .off-canvas-sidebar .nav li.active>a:before, .off-canvas-sidebar .nav li.active>a:after { - border-right: 17px solid var(--accent-color); + border-right: 17px solid rgb(var(--accent-color)); } } .sidebar[data-active-color="success"] .nav li.active>a, .off-canvas-sidebar[data-active-color="success"] .nav li.active>a { - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; } .sidebar .nav li>a:hover { @@ -256,15 +302,38 @@ body, /* MODAL */ .modal-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid transparent; } .modal-header { - border-bottom: 1px solid rgb(255 255 255 / 25%); + border-bottom: 1px solid rgb(var(--accent-color)); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-footer { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid rgb(var(--accent-color)); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-body .nav-tabs>li.active>a, @@ -310,6 +379,13 @@ body, /* DROPDOWN */ .dropdown-menu { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .dropdown a { @@ -397,6 +473,7 @@ fieldset[disabled] .form-control { .btn-info.btn-fill:focus { background: var(--button-color-hover); border: var(--button-color-hover); + color: var(--button-text-hover); } .btn-primary { @@ -408,13 +485,13 @@ fieldset[disabled] .form-control { .btn-primary:focus, .btn-primary:active:focus { border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); } .btn-primary:hover { border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); } @@ -425,7 +502,7 @@ fieldset[disabled] .form-control { } .btn-primary.btn-fill:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); @@ -436,7 +513,7 @@ div>div>div.modal-footer>button.btn.btn-default.pull-left, .btn-danger.btn-fill { border-color: #f05050; background-color: #f05050; - color: var(--button-text); + color: #eee; } div>div>div.modal-footer>button.btn.btn-default.pull-left:hover, @@ -446,20 +523,20 @@ div>div>div.modal-footer>button.btn.btn-default.pull-left:focus, .btn-danger.btn-fill:hover, .btn-danger.btn-fill:focus { border-color: #ec2626; - color: var(--text-hover); + color: #fff; background-color: #ec2626; } div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default { border-color: #f05050; background-color: #f05050; - color: var(--button-text); + color: #eee; } div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:hover, div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:focus { border-color: #ec2626; - color: var(--text-hover); + color: #fff; background-color: #ec2626; } @@ -484,12 +561,37 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .btn-success.active, .open>.btn-success.dropdown-toggle { background-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); border-color: var(--button-color-hover); } +.btn-icon { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); + border-color: rgb(var(--accent-color)); +} + +.btn-icon.active.focus, +.btn-icon.active:focus, +.btn-icon.active:hover, +.btn-icon:active.focus, +.btn-icon:active:focus, +.btn-icon:active:hover, +.btn-icon:hover, +.btn-icon:focus, +.btn-icon:active, +.btn-icon.active, +.open>.dropdown-toggle.btn-icon.focus, +.open>.dropdown-toggle.btn-icon:focus, +.open>.dropdown-toggle.btn-icon:hover { + background-color: var(--accent-color-hover) !important; + color: var(--label-text-color); + border-color: var(--accent-color-hover); +} + .radio-box input:checked~.radio-button { background-color: var(--button-color); + color: var(--label-text-color); } /* TABLES */ @@ -507,10 +609,18 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .table>thead>tr>th.active, .row-clickable.active { background-color: rgb(0 0 0 / 25%); + color: var(--text-hover); } .fixed-header th { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .table thead tr>th, @@ -518,11 +628,14 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .table tbody tr>th, .table tbody tr>td, .table tfoot tr>th, -.table tfoot tr>td, -hr { +.table tfoot tr>td { border-top: 1px solid rgb(255 255 255 / 20%); } +hr { + border-top: 1px solid rgb(var(--accent-color)); +} + .list-group-item { background-color: transparent; } @@ -530,8 +643,8 @@ hr { .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { - background-color: var(--accent-color); - border-color: var(--accent-color); + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } /* PROGRESS BARS */ @@ -540,7 +653,7 @@ hr { } .progress-bar { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } .progress span { @@ -557,10 +670,17 @@ hr { .off-canvas-sidebar .sidebar-wrapper { box-shadow: 0 0 10px 0px #000000; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .off-canvas-sidebar .nav li.active>a:before, .off-canvas-sidebar .nav>li.active>a:after { - border-left: 17px solid var(--accent-color); + border-left: 17px solid rgb(var(--accent-color)); } -} +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/hotline.css b/CSS/themes/duplicacy/hotline.css index 658624ef..dbe40cba 100644 --- a/CSS/themes/duplicacy/hotline.css +++ b/CSS/themes/duplicacy/hotline.css @@ -13,15 +13,4 @@ /* DUPLICACY HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/organizr-dark.css b/CSS/themes/duplicacy/organizr-dark.css index d7ab8ea7..096ccc68 100644 --- a/CSS/themes/duplicacy/organizr-dark.css +++ b/CSS/themes/duplicacy/organizr-dark.css @@ -13,15 +13,4 @@ /* DUPLICACY ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text:#96a2b4; - --text-hover: #fff; - --link-color: #2cabe3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/plex.css b/CSS/themes/duplicacy/plex.css index 5eb918ce..967469f7 100644 --- a/CSS/themes/duplicacy/plex.css +++ b/CSS/themes/duplicacy/plex.css @@ -13,15 +13,4 @@ /* DUPLICACY PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/space-gray.css b/CSS/themes/duplicacy/space-gray.css index 4d852cc0..1a1830aa 100644 --- a/CSS/themes/duplicacy/space-gray.css +++ b/CSS/themes/duplicacy/space-gray.css @@ -13,15 +13,4 @@ /* DUPLICACY SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/emby/aquamarine.css b/CSS/themes/emby/aquamarine.css index 13f05836..56ea09ad 100644 --- a/CSS/themes/emby/aquamarine.css +++ b/CSS/themes/emby/aquamarine.css @@ -13,50 +13,4 @@ /* EMBY AQUAMARINE THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); -:root { - --theme-primary-color: #009688; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #009688; - --theme-primary-color-lightened: rgba(0, 150, 135, 0.2); - --theme-icon-focus-background: rgba(0, 150, 135, 0.2); - - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css"); diff --git a/CSS/themes/emby/dark.css b/CSS/themes/emby/dark.css index 874160d4..75a1d8e3 100644 --- a/CSS/themes/emby/dark.css +++ b/CSS/themes/emby/dark.css @@ -13,51 +13,4 @@ /* EMBY DARK THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); - -:root { - --theme-primary-color: #646464; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #646464; - --theme-primary-color-lightened: rgba(100, 100, 100, 0.8); - --theme-icon-focus-background: rgba(100, 100, 100, 0.2); - - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css"); \ No newline at end of file diff --git a/CSS/themes/emby/dracula.css b/CSS/themes/emby/dracula.css new file mode 100644 index 00000000..5a542e94 --- /dev/null +++ b/CSS/themes/emby/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* EMBY DRACULA THEME */ +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css"); \ No newline at end of file diff --git a/CSS/themes/emby/emby-base.css b/CSS/themes/emby/emby-base.css index e4b5cb17..27ded91e 100644 --- a/CSS/themes/emby/emby-base.css +++ b/CSS/themes/emby/emby-base.css @@ -1,10 +1,82 @@ +:root { + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); + + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: var(--button-color); + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); + + --header-background: var(--theme-background); + --theme-body-secondary-text-color: rgba(255, 255, 255, .6); + --line-background: rgba(255, 255, 255, .08); + --line-size: .08em; + --scrollbar-thumb-background: rgba(255,255,255,.3); +} + +@media (pointer: fine) { + :not(.layout-tv):root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); + } +} + +.layout-tv:root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); +} + +/*TP CUSTOM */ +h1, +h2, +h3, +h4, +h5, +h6, +.inputLabel, +label { + color: var(--text-hover); +} + +a:not(.emby-button), +.cardText.cardTextCentered.cardText-first>button { + color: var(--link-color) !important; +} + +a:hover:not(.emby-button), +.cardText.cardTextCentered.cardText-first>button:hover { + color: var(--link-color-hover) !important; +} + +/*TP END*/ + html { color: var(--theme-text-color); scrollbar-color: var(--scrollbar-thumb-background) transparent } .emby-collapsible-button { - border-color: var(--line-background)!important + border-color: var(--line-background) !important } .skinHeader-withBackground.skinHeader-withfulldrawer { @@ -12,16 +84,53 @@ html { } .skinHeader-withBackground { - background: var(--header-background) + background: var(--header-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.appfooter,.formDialogFooter:not(.formDialogFooter-clear),.formDialogHeader:not(.formDialogHeader-clear) { - background: var(--footer-background) +.appfooter, +.formDialogFooter:not(.formDialogFooter-clear) { + background: var(--footer-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.formDialogHeader:not(.formDialogHeader-clear) { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dialog { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { .skinHeader-withBackground { - background:var(--header-blur-background); + background: var(--header-blur-background); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em) } @@ -34,61 +143,79 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none!important; - backdrop-filter: none!important; - background-color: rgba(0,0,0,.3); - background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0))); - background: -webkit-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - background: -o-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - -webkit-box-shadow: none!important; - box-shadow: none!important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + background-color: rgba(0, 0, 0, .3); + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); + background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + -webkit-box-shadow: none !important; + box-shadow: none !important; border-bottom: 0; - color: rgba(255,255,255,.87) + color: rgba(255, 255, 255, .87) } .pageTitleWithDefaultLogo { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/emby/logowhite.png) } -.backgroundContainer,.dialog,html { - background: var(--theme-background) +.backgroundContainer, +html { + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .backgroundContainer.withBackdrop { - background-color: rgba(0,0,0,.83) + background-color: rgba(0, 0, 0, .83) } @media not all and (min-width: 50em) { .itemBackgroundContainer.withBackdrop { - background :var(--theme-background) + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } -.paper-icon-button-light-tv:focus,.paper-icon-button-light:active { - color: var(--theme-primary-color); +.paper-icon-button-light-tv:focus, +.paper-icon-button-light:active { + color: rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } @media(hover: hover) and (pointer:fine) { .paper-icon-button-light:focus { - color:var(--theme-primary-color); + color: rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } } -.detailButton-icon,.fab,.raised { - background: var(--button-background); - color: var(--theme-text-color) +.detailButton-icon, +.fab, +.raised:not(.raised-mini) { + background: var(--button-color); + color: var(--button-text); } .detailButton-icon { - border-color: rgba(255,255,255,.3) + border-color: rgba(255, 255, 255, .3) } .emby-select-withcolor { color: inherit; - background: var(--button-background); + background: rgba(0, 0, 0, 0.25); border: var(--line-size) solid transparent } @@ -98,38 +225,46 @@ html { } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { - .detailButton-icon,.emby-select-withcolor.detailTrackSelect,.fab,.raised:not(.nobackdropfilter) { - background:rgba(85,85,85,.3); + + .detailButton-icon, + .emby-select-withcolor.detailTrackSelect, + .fab, + .raised:not(.nobackdropfilter) { + background: rgba(85, 85, 85, .3); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em) } - .dialog-blur,.toast { + .dialog-blur, + .toast { color: #fff; - background: rgba(56,56,56,.76); + background: rgba(56, 56, 56, .76); -webkit-backdrop-filter: blur(2.5em) saturate(1.8); backdrop-filter: blur(2.5em) saturate(1.8); - -webkit-box-shadow: none!important; - box-shadow: none!important + -webkit-box-shadow: none !important; + box-shadow: none !important } .toast-large { - color: rgba(255,255,255,.87) + color: rgba(255, 255, 255, .87) } } -.fab:focus,.raised:focus { - background: #333 +.fab:focus, +.raised:focus { + background: var(--button-color-hover); + color: var(--button-text-hover); } .button-submit:not(.emby-button-tv) { - background: var(--theme-primary-color); - color: #fff + background: var(--button-color); + color: var(--button-text) } -.button-submit:not(.emby-button-tv):focus { - background: var(--theme-primary-color-lightened); - color: #fff +.button-submit:not(.emby-button-tv):focus, +.button-submit:not(.emby-button-tv):hover { + background: var(--button-color-hover); + color: var(--button-text-hover) } .emby-select-withcolor>option { @@ -138,12 +273,12 @@ html { } .emby-select-withcolor:focus { - border-color: var(--theme-primary-color)!important + border-color: rgb(var(--theme-primary-color)) !important } .emby-select-tv-withcolor:focus { - background-color: var(--theme-primary-color)!important; - color: #fff!important + background-color: rgb(var(--theme-primary-color)) !important; + color: #fff !important } .checkboxLabel { @@ -154,19 +289,22 @@ html { background-color: var(--theme-icon-focus-background) } -.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { - color: var(--theme-accent-text-color) +.inputLabelFocused, +.selectLabelFocused, +.textareaLabelFocused { + color: rgb(var(--accent-color)) } .button-link { - color: var(--theme-accent-text-color) + color: var(--link-color) } .button-flat-accent { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } -.paperList,.visualCardBox { +.paperList, +.visualCardBox { background-color: var(--card-background) } @@ -174,10 +312,16 @@ html { border: var(--line-size) solid var(--line-background) } -.cardText-secondary,.fieldDescription,.listItemBodyText-secondary,.secondaryText { +.fieldDescription, +.listItemBodyText-secondary, +.secondaryText { color: var(--theme-body-secondary-text-color) } +.cardText-secondary { + color: var(--text) +} + .cardText-first { color: var(--theme-text-color-opaque) } @@ -188,17 +332,22 @@ html { @media(hover: hover) and (pointer:fine) { .actionSheetMenuItem:hover { - background-color:rgba(255,255,255,.2) + background-color: rgba(255, 255, 255, .2) } } .selectionCommandsPanel { - background: var(--theme-primary-color); - color: #fff + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color); +} + +.itemSelectionCount { + color: var(--label-text-color) !important; + } .upNextDialog-countdownText { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .alphaPickerButton { @@ -211,25 +360,25 @@ html { } .alphaPickerButton-tv:focus { - background-color: var(--theme-primary-color); - color: #fff!important + background-color: rgb(var(--theme-primary-color)); + color: #fff !important } .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; - background: rgba(30,30,30,.9) + background: rgba(30, 30, 30, .9) } .listItem-border { - border-color: var(--line-background)!important + border-color: var(--line-background) !important } .listItem-focusscale:focus { - background: rgba(54,54,54,.8) + background: rgba(54, 54, 54, .8) } .progressring-spiner { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .mediaInfoText { @@ -244,14 +393,16 @@ html { color: #cb272a } -.emby-input,.emby-textarea { +.emby-input, +.emby-textarea { color: inherit; - background: var(--button-background); - border: var(--line-size) solid var(--button-background) + background: rgb(0 0 0 / 25%); + border: var(--line-size) solid rgba(255, 255, 255, 0.1) } -.emby-input:focus,.emby-textarea:focus { - border-color: var(--theme-primary-color) +.emby-input:focus, +.emby-textarea:focus { + border-color: rgb(var(--theme-primary-color)) } .emby-checkbox:checked+span:before { @@ -259,12 +410,17 @@ html { } .emby-checkbox:checked+span:before { - border-color: var(--theme-primary-color); - background-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) !important; + background-color: rgb(var(--theme-primary-color)) !important; + +} + +.checkboxLabel::after { + color: var(--label-text-color); } .itemProgressBarForeground { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .itemProgressBarForeground-recording { @@ -272,11 +428,12 @@ html { } .countIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color); } .playedIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .mainDrawer { @@ -290,17 +447,18 @@ html { @media(hover: hover) and (pointer:fine) { .navMenuOption:hover { - background:#303030 + background: #303030 } } .navMenuOption-selected { - background-color: var(--theme-icon-focus-background)!important; - color: var(--theme-accent-text-color) + background-color: var(--theme-icon-focus-background) !important; + color: rgb(var(--accent-color)) } -.emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { - background: var(--theme-primary-color); +.emby-button-focusscale:focus, +.emby-button-focusscale:focus .detailButton-icon { + background: rgb(var(--theme-primary-color)); color: #fff } @@ -309,7 +467,7 @@ html { } .emby-tab-button-active { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } .emby-tab-button-active.emby-button-tv { @@ -317,34 +475,66 @@ html { } .emby-tab-button.emby-button-tv:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--accent-color)); background: 0 0 } .emby-button { - outline-color: var(--theme-primary-color) + outline-color: rgb(var(--theme-primary-color)) } -.channelCell,.guide-headerTimeslots,.timeslotHeaders { - background: var(--theme-background) +.channelCell, +.guide-headerTimeslots, +.timeslotHeaders { + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } @media (pointer: coarse) { .channelCell-mobilefocus { - background:var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } .channelCell-mobilefocus:not(:focus-visible) { - background: var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .channelCell-mobilefocus:not(:-moz-focusring) { - background: var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.channelCell,.epgRow,.programCell { - border-color: rgba(255,255,255,.05) +.channelCell, +.epgRow, +.programCell { + border-color: rgba(255, 255, 255, .05) } .guide-currentTimeIndicatorDot { @@ -352,7 +542,7 @@ html { } .guide-currentTimeIndicatorDot:after { - border-top-color: var(--theme-primary-color) + border-top-color: rgb(var(--theme-primary-color)) } .firstChannelCell { @@ -360,23 +550,24 @@ html { } .programCell-sports { - background: #3949ab!important + background: #3949ab !important } .programCell-movie { - background: #5e35b1!important + background: #5e35b1 !important } .programCell-kids { - background: #039be5!important + background: #039be5 !important } .programCell-news { - background: #43a047!important + background: #43a047 !important } -.channelCell:focus,.programCell:focus { - background-color: var(--theme-primary-color); +.channelCell:focus, +.programCell:focus { + background-color: rgb(var(--theme-primary-color)); color: #fff } @@ -393,7 +584,7 @@ html { } .ratingbutton-icon-withrating { - color: #c33!important + color: #c33 !important } .downloadbutton-icon-on { @@ -405,7 +596,7 @@ html { } .playstatebutton-icon-played { - color: #c33!important + color: #c33 !important } .repeatButton-active { @@ -413,7 +604,7 @@ html { } .card:focus .card-focuscontent { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .cardContent-button { @@ -449,7 +640,11 @@ html { } .cardOverlayButtonIcon { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) +} + +.cardScalable.cardPadder-portrait>div>button>i { + color: var(--label-text-color) !important; } ::-webkit-scrollbar-track-piece { @@ -465,7 +660,7 @@ html { } .emby-slider { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-track { @@ -473,32 +668,32 @@ html { } .emby-slider::-moz-range-progress { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-webkit-slider-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-ms-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider-background-lower { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .scrollbuttoncontainer { color: #fff; - background: rgba(20,20,20,.5) + background: rgba(20, 20, 20, .5) } .recordingIcon-active { - color: #c33!important + color: #c33 !important } .drawerLogo { @@ -511,32 +706,31 @@ html { } .emby-search-tab-button.emby-tab-button-active { - background: var(--theme-accent-text-color)!important + background: rgb(var(--accent-color)) !important } .textActionButton.dragging { - background: var(--button-background)!important + background: var(--button-background) !important } .dragging-over.full-drop-target { - background: var(--theme-primary-color)!important; - color: #fff!important + background: rgb(var(--theme-primary-color)) !important; + color: #fff !important } .dragging-over-top:before { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } .dragging-over-bottom:after { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } - -/* TP CUSTOM */ @media (hover: hover) and (pointer: fine) { -.navMenuOption:hover { - background: rgb(255 255 255 / 15%) !important; -} + .navMenuOption:hover:not(.navMenuOption-selected) { + background: 0 !important; + color: var(--accent-color-hover); + } } .mainDrawer { @@ -544,3 +738,10 @@ html { -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); } + +.jstree-default .jstree-clicked { + background: rgb(var(--accent-color)); + -webkit-border-radius: 2px; + border-radius: 2px; + color: var(--label-text-color) !important; +} \ No newline at end of file diff --git a/CSS/themes/emby/hotline.css b/CSS/themes/emby/hotline.css index 1dc4f36e..8fd8976d 100644 --- a/CSS/themes/emby/hotline.css +++ b/CSS/themes/emby/hotline.css @@ -13,50 +13,4 @@ /* EMBY HOTLINE THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); -:root { - --theme-primary-color: #F44336; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #F44336; - --theme-primary-color-lightened: rgba(244, 67, 54, 0.2); - --theme-icon-focus-background: rgba(244, 67, 54, 0.2); - - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css"); \ No newline at end of file diff --git a/CSS/themes/emby/organizr-dark.css b/CSS/themes/emby/organizr-dark.css index dadf5e76..73324bc4 100644 --- a/CSS/themes/emby/organizr-dark.css +++ b/CSS/themes/emby/organizr-dark.css @@ -13,51 +13,4 @@ /* EMBY ORGANIZR-DARK THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); - -:root { - --theme-primary-color: #2cabe3; - --theme-text-color: #96a2b4; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #2cabe3; - --theme-primary-color-lightened: rgba(44, 171, 227 , 0.8); - --theme-icon-focus-background: rgba(44, 171, 227 , 0.2); - - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css"); \ No newline at end of file diff --git a/CSS/themes/emby/plex.css b/CSS/themes/emby/plex.css index 4f9b3360..51f306c8 100644 --- a/CSS/themes/emby/plex.css +++ b/CSS/themes/emby/plex.css @@ -13,50 +13,4 @@ /* EMBY PLEX THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); -:root { - --theme-primary-color: #e5a00d; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #e5a00d; - --theme-primary-color-lightened: rgba(229, 161, 13, 0.2); - --theme-icon-focus-background: rgba(229, 161, 13, 0.2); - - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css"); \ No newline at end of file diff --git a/CSS/themes/emby/space-gray.css b/CSS/themes/emby/space-gray.css index 23a19076..09cd69e7 100644 --- a/CSS/themes/emby/space-gray.css +++ b/CSS/themes/emby/space-gray.css @@ -13,50 +13,4 @@ /* EMBY SPACE GRAY THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/emby/emby-base.css"); -:root { - --theme-primary-color: #81a6b7; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #81a6b7; - --theme-primary-color-lightened: rgba(129, 166, 183, 0.2); - --theme-icon-focus-background: rgba(129, 166, 183, 0.2); - - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css"); \ No newline at end of file diff --git a/CSS/themes/filebrowser/aquamarine.css b/CSS/themes/filebrowser/aquamarine.css index cc97a32c..11a175ed 100644 --- a/CSS/themes/filebrowser/aquamarine.css +++ b/CSS/themes/filebrowser/aquamarine.css @@ -13,11 +13,4 @@ /* FILEBROWSER AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: hsla(0,0%,100%,.85); - --accent-color-hover: hsla(0,0%,100%,.95); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/filebrowser/dark.css b/CSS/themes/filebrowser/dark.css index 755fb0de..4c3b04a8 100644 --- a/CSS/themes/filebrowser/dark.css +++ b/CSS/themes/filebrowser/dark.css @@ -13,11 +13,4 @@ /* FILEBROWSER DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/filebrowser/dracula.css b/CSS/themes/filebrowser/dracula.css new file mode 100644 index 00000000..d54dc086 --- /dev/null +++ b/CSS/themes/filebrowser/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* FILEBROWSER DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/filebrowser/filebrowser-base.css b/CSS/themes/filebrowser/filebrowser-base.css index 182e8e40..87fa1bb2 100644 --- a/CSS/themes/filebrowser/filebrowser-base.css +++ b/CSS/themes/filebrowser/filebrowser-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -11,300 +10,675 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css */ - - /* Scrollbar */ -/* @media only screen and (min-width: 768px) { - html { - height: 100% !important; - width: 100% !important; - overflow: hidden !important; - } - body { - overflow-y: auto !important; - height: 100% !important; - background: var(--main-bg-color) !important; - } +/* PLACEHOLDERS */ +input::-webkit-input-placeholder { + color: var(--text); } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } */ + +input:focus::-webkit-input-placeholder { + color: var(--text-hover); +} + +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text); +} + +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + .message { color: #FFF; } + #login { min-height: 100%; height: auto; background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + body { - - color: #FFFFFF; - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; + + color: var(--text); + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; } -#login input[type=password], #login input[type=text] { - color: white !important; - background-color: rgba(0,0,0,0.15) !important; + +h1, +h2, +h3, +h4, +h5, +h6, +th { + color: var(--text-hover) !important; +} + +#login input[type=password], +#login input[type=text] { + color: var(--text-hover) !important; + background-color: rgba(0, 0, 0, 0.15) !important; border: none; } + #loading { -background: var(--main-bg-color); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #loading .spinner * { - background-color: #FFF !important; -} -button:hover, input[type=submit]:hover{ - color: #FFF; -} -.button--flat:hover { - background: rgba(255, 255, 255, 0.1); + background-color: #FFF !important; } + html { min-height: 100%; background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -body{ + +body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + +@media (max-width: 736px) { + + nav, + nav.active { + background: var(--modal-bg-color) !important; + } + + #dropdown.active { + background: var(--drop-down-menu-bg) !important; + } +} + nav { - background-color: rgba(0,0,0,.45); + background: rgba(0, 0, 0, .45); height: 100%; - top: 60px; + top: 64px; width: 240px; } -nav .action{ - color:rgba(255, 255, 255, 0.737); + +.overlay:not(nav) { + background-color: transparent; +} + +nav .action { + color: var(--text); font-size: 13px; - font-family: Open Sans Semibold,Helvetica Neue,Helvetica,Arial,sans-serif; + font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 0px; padding-bottom: 0px; } -nav .action:hover{ - background-color:rgba(255, 255, 255, 0.05); + +nav .action:hover { + background-color: rgba(255, 255, 255, 0.05); + color: rgb(var(--accent-color)); } -nav>div{ + +nav>div { border-top: none; } -header{ - background: var(--modal-bg-color); - border-bottom: transparent; - box-shadow: 0 3px 6px 0 rgba(0,0,0,.15); + +header { + background: rgba(0, 0, 0, 0.25); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: transparent; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15); } -header>div:first-child{ + +header>div:first-child { height: 60px; } -body{ + +body { padding-top: 60px; } + .shell { background: var(--modal-bg-color); - color: #FFF; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: rgb(var(--accent-color)); } + .shell__prompt i { - color: var(--accent-color); + color: rgb(var(--accent-color)); } -.action{ + +.action { color: #FFF; } -#listing.list .item{ - background-color: rgba(0,0,0,.15); - color:rgb(238, 238, 238); + +#listing.list .item { + background-color: rgba(0, 0, 0, .15); + color: var(--text); border: none; } -#listing.list .item:hover{ - background-color:rgba(255, 255, 255, 0.08); - color:rgb(238, 238, 238); + +#listing.list .item:hover { + background-color: rgba(255, 255, 255, 0.08); + color: var(--text-hover); border: none; transition: .4s; } -#listing.list .item.header{ - background-color: rgba(0,0,0,.45); - color:rgb(238, 238, 238); + +#listing.list .item.header { + background-color: rgba(0, 0, 0, .45); + color: var(--text-hover); border-bottom: none; right: auto; } -.material-icons, .prompt .file-list ul li:before{ - color: white; + +.material-icons, +.prompt .file-list ul li:before { + color: rgb(var(--accent-color)); } + +.action:hover { + background-color: rgba(var(--accent-color), .1); +} + +.action .counter { + background: rgb(var(--accent-color)); + color: var(--label-text-color); + border: 2px solid var(--label-text-color); +} + .share__box { background: transparent; } + .share__box__info { background: rgba(0, 0, 0, 0.25); } + .share__box__download { - background: var(--accent-color); - color: rgb(255, 255, 255); - border-bottom: 1px solid var(--accent-color); + background: rgb(var(--accent-color)); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } + +.share__box__element { + border-top: 1px solid rgb(255 255 255 / 10%); +} + svg { - fill: var(--accent-color) !important; + fill: rgb(var(--accent-color)) !important; } + #listing.list .item div:first-of-type i { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + #listing .item i { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + #listing.mosaic:hover .item:hover i:hover { color: var(--accent-color-hover); } -#listing .item[aria-selected=true]{ + +#listing .item[aria-selected=true] { background-color: rgba(255, 255, 255, 0.2) !important; + color: var(--text-hover) !important; } -#listing h2{ - color: rgb(238, 238, 238); + +#listing h2 { + color: var(--text-hover); } + #listing #multiple-selection { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -#breadcrumbs span a{ - color: rgb(238, 238, 238); + +#breadcrumbs span a { + color: var(--text-hover); } + #breadcrumbs { - border-bottom: 1px solid var(--accent-color); + border-bottom: 1px solid rgb(var(--accent-color)); } -#listing .item{ - background-color: rgba(0,0,0,.15); - color:rgb(238, 238, 238); + +#listing .item { + background-color: rgba(0, 0, 0, .15); + color: var(--text); border: none; } + .input { - background: #FFF; - color: #000; + background: rgba(0, 0, 0, 0.25); + color: var(--text-hover); } + +select>option { + background: #1f1f1f; +} + #search #input { background: #fff; display: flex; padding: 10px; } -#search #result{ + +#search #result { background: var(--modal-bg-color); - color: rgb(238, 238, 238); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); } -#search .boxes{ - background-color: rgba(0,0,0,.15); + +#search .boxes { + background-color: rgba(0, 0, 0, .15); padding: 15px; } -#search .boxes h3{ - color: rgb(238, 238, 238); + +#search .boxes h3 { + color: var(--text-hover); } -#search .boxes>div>div{ - background-color: rgba(0,0,0,.10); + +#search .boxes>div>div { + background-color: rgba(0, 0, 0, .10); } -#search .boxes>div>div:hover{ - background-color: rgba(255,255,255,.08); + +#search .boxes>div>div:hover { + background-color: rgba(255, 255, 255, .08); } -#search.active #input{ + +#search.active #input { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; height: 60px; color: black; } -#search.active i, #search.active input{ - color: rgba(255, 255, 255, 0.85); + +#search.active i, +#search.active input { + color: var(--text-hover); } -#search #result>div>:first-child{ + +#search #result>div>:first-child { margin-top: 10px; } -.card{ - background-color: rgba(0,0,0,.15); + +.card { + background-color: rgba(0, 0, 0, .15); } -.card h3{ - color: rgb(238, 238, 238); + +.card h3 { + color: var(--text-hover); } + .card#share ul li a { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + select { - color: rgb(238, 238, 238); + color: var(--text-hover); } -input, textarea, select, button{ - color: rgb(0, 0, 0); + +.card#share .input-group * { + border: none; + background: transparent; } -.collapsible>label *{ - color: rgb(238, 238, 238); + +input, +textarea, +select, +button { + color: var(--text-hover); } -a{ - color: rgba(255, 255, 255, 0.85); + +.collapsible>label * { + color: var(--text-hover); } -table th{ - color: rgba(255, 255, 255, 0.85); + +a, +.link, +.breadcrumbs span a, +.breadcrumbs, +.breadcrumbs span { + color: var(--link-color); } -.card.floating{ + +a:hover, +.link:hover, +.breadcrumbs span a:hover { + color: var(--link-color-hover); +} + +table th { + color: var(--text-hover); +} + +.card.floating { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + #search #input { - background-color:rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.08); } -#listing.mosaic .item{ +#listing.mosaic .item { box-shadow: none !important; } -#listing.mosaic .item:hover{ + +#listing.mosaic .item:hover { box-shadow: none !important; - background-color: rgba(255,255,255,0.08); + background-color: rgba(255, 255, 255, 0.08); } + .dashboard p label { - color: rgb(255, 255, 255); -} -.dashboard #nav li.active { - border-color: var(--accent-color); -} -.link { - color: var(--accent-color); -} -.link:hover { - color: var(--accent-color-hover); -} -@media (max-width: 736px){ -nav{ - background-color: black; -} -#dropdown.active{ - background-color: black; -} + color: var(--text-hover); } -@media (min-width: 1024px){ - main{ +.dashboard #nav li.active { + border-color: rgb(var(--accent-color)); +} + +.dashboard #nav ul li.active { + border-color: rgb(var(--accent-color)); + color: rgb(var(--accent-color)); +} + +.dashboard #nav ul li.active:before { + background: rgb(var(--accent-color)); + opacity: .08; +} + +.dashboard #nav ul li:hover { + background: rgb(var(--accent-color), .15); + color: rgb(var(--accent-color)); +} + +.dashboard #nav .wrapper { + border-bottom: 2px solid var(--accent-color-hover); +} + + +@media (min-width: 1024px) { + main { margin-left: 270px; } } -@media (max-width: 1024px){ - nav{ + +@media (max-width: 1024px) { + nav { width: 175px; } } /* Buttons */ -.button { +.button:not(.button--flat.button--red) { background: var(--button-color); - color: #FFF; + color: var(--button-text); } -.button:hover { + +.button:hover:not(.button--flat.button--red), +.button:active:not(.button--flat.button--red), +.button:focus:not(.button--flat.button--red) { background: var(--button-color-hover); + color: var(--button-text-hover); } -.button--flat, .button--grey { - color: #fff; - margin-right: 5px; + +button:hover:not(.action), +input[type=submit]:hover { + color: var(--button-text-hover); } + +.button--flat { + margin-left: 5px; +} + +.button--flat:hover { + background: var(--dark-red); + color: #FFF; + margin-left: 5px; +} + + +#editor-container { + background: var(--modal-bg-color); +} + +/* ACE EDITOR */ + +.ace-chrome .ace_gutter { + background: #282a36 !important; + color: rgb(144, 145, 148) !important; +} + +.ace-chrome .ace_print-margin { + width: 1px; + background: #44475a +} + +.ace-chrome { + background-color: #282a36; + color: #f8f8f2 +} + +.ace-chrome .ace_cursor { + color: #f8f8f0 +} + +.ace-chrome .ace_marker-layer .ace_selection { + background: #44475a +} + +.ace-chrome.ace_multiselect .ace_selection.ace_start { + box-shadow: 0 0 3px 0px #282a36; + border-radius: 2px +} + +.ace-chrome .ace_marker-layer .ace_step { + background: rgb(198, 219, 174) +} + +.ace-chrome .ace_marker-layer .ace_bracket { + margin: -1px 0 0 -1px; + border: 1px solid #a29709 +} + +.ace-chrome .ace_marker-layer .ace_active-line { + background: #44475a +} + +.ace-chrome .ace_gutter-active-line { + background-color: #44475a +} + +.ace-chrome .ace_marker-layer .ace_selected-word { + box-shadow: 0px 0px 0px 1px #a29709; + border-radius: 3px; +} + +.ace-chrome .ace_fold { + background-color: #50fa7b; + border-color: #f8f8f2 +} + +.ace-chrome .ace_keyword { + color: #ff79c6 +} + +.ace-chrome .ace_constant.ace_language { + color: #bd93f9 +} + +.ace-chrome .ace_constant.ace_numeric { + color: #bd93f9 +} + +.ace-chrome .ace_constant.ace_character { + color: #bd93f9 +} + +.ace-chrome .ace_constant.ace_character.ace_escape { + color: #ff79c6 +} + +.ace-chrome .ace_constant.ace_other { + color: #bd93f9 +} + +.ace-chrome .ace_support.ace_function { + color: #8be9fd +} + +.ace-chrome .ace_support.ace_constant { + color: #6be5fd +} + +.ace-chrome .ace_support.ace_class { + font-style: italic; + color: #66d9ef +} + +.ace-chrome .ace_support.ace_type { + font-style: italic; + color: #66d9ef +} + +.ace-chrome .ace_storage { + color: #ff79c6 +} + +.ace-chrome .ace_storage.ace_type { + font-style: italic; + color: #8be9fd +} + +.ace-chrome .ace_invalid { + color: #F8F8F0; + background-color: #ff79c6 +} + +.ace-chrome .ace_invalid.ace_deprecated { + color: #F8F8F0; + background-color: #bd93f9 +} + +.ace-chrome .ace_string { + color: #f1fa8c +} + +.ace-chrome .ace_comment { + color: #6272a4 +} + +.ace-chrome .ace_variable { + color: #50fa7b +} + +.ace-chrome .ace_variable.ace_parameter { + font-style: italic; + color: #ffb86c +} + +.ace-chrome .ace_entity.ace_other.ace_attribute-name { + color: #50fa7b +} + +.ace-chrome .ace_entity.ace_name.ace_function { + color: #50fa7b +} + +.ace-chrome .ace_entity.ace_name.ace_tag { + color: #ff79c6 +} + +.ace-chrome .ace_invisible { + color: #626680; +} + +.ace-chrome .ace_indent-guide { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y +} + +.credits { + + color: var(--text-muted); +} \ No newline at end of file diff --git a/CSS/themes/filebrowser/hotline.css b/CSS/themes/filebrowser/hotline.css index e6bea04a..891c3b1a 100644 --- a/CSS/themes/filebrowser/hotline.css +++ b/CSS/themes/filebrowser/hotline.css @@ -13,11 +13,4 @@ /* FILEBROWSER HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: hsla(0,0%,100%,.85); - --accent-color-hover: hsla(0,0%,100%,.95); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/filebrowser/organizr-dark.css b/CSS/themes/filebrowser/organizr-dark.css index 0686123e..788c8878 100644 --- a/CSS/themes/filebrowser/organizr-dark.css +++ b/CSS/themes/filebrowser/organizr-dark.css @@ -13,11 +13,4 @@ /* FILEBROWSER ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/filebrowser/plex.css b/CSS/themes/filebrowser/plex.css index 0cd02afe..1f207d13 100644 --- a/CSS/themes/filebrowser/plex.css +++ b/CSS/themes/filebrowser/plex.css @@ -13,11 +13,4 @@ /* FILEBROWSER PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/filebrowser/space-gray.css b/CSS/themes/filebrowser/space-gray.css index 053e5a47..47ba6856 100644 --- a/CSS/themes/filebrowser/space-gray.css +++ b/CSS/themes/filebrowser/space-gray.css @@ -13,11 +13,4 @@ /* FILEBROWSER SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/filebrowser/filebrowser-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/flood/aquamarine.css b/CSS/themes/flood/aquamarine.css index 7f74e13f..f9603ab3 100644 --- a/CSS/themes/flood/aquamarine.css +++ b/CSS/themes/flood/aquamarine.css @@ -12,22 +12,4 @@ /* FLOOD AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 18, 175, 160; - --accent-color-hover: #009688; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/flood/dark.css b/CSS/themes/flood/dark.css index 4f64d1c1..fee800a7 100644 --- a/CSS/themes/flood/dark.css +++ b/CSS/themes/flood/dark.css @@ -12,22 +12,4 @@ /* FLOOD DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0, 0%, 100%, .15); - --button-color-hover: hsla(0, 0%, 100%, .30); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/flood/dracula.css b/CSS/themes/flood/dracula.css new file mode 100644 index 00000000..047a8e46 --- /dev/null +++ b/CSS/themes/flood/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* FLOOD DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/flood/flood-base.css b/CSS/themes/flood/flood-base.css index 10ea3715..16e9d213 100644 --- a/CSS/themes/flood/flood-base.css +++ b/CSS/themes/flood/flood-base.css @@ -31,6 +31,13 @@ body, .torrents { color: var(--text); background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* TEXT */ @@ -47,15 +54,33 @@ h4, h5, h6, p, -.dark .torrents__alert, +.inverse .h1, +.inverse .h2, +.inverse .h3, +.inverse .h4, +.inverse .h5, +.inverse .h6, +.inverse h1, +.inverse h2, +.inverse h3, +.inverse h4, +.inverse h5, +.inverse h6 .dark .torrents__alert, .torrents__alert { - color: var(--text); + color: var(--text-hover); } /* AUTH PAGE */ .application__view--auth-form { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } @@ -141,6 +166,10 @@ p, fill: rgb(var(--accent-color)); } +.form__element__addon .icon { + fill: var(--text-hover); +} + .select__item--is-selected .icon { fill: rgb(var(--accent-color)); } @@ -205,6 +234,13 @@ p, .context-menu__items, .menu { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 1px 3px 1px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .1); color: var(--text); @@ -293,7 +329,7 @@ p, .table__row--heading { background: rgba(255, 255, 255, .15); box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%); - color: #fff; + color: var(--text-hover); } .dark .torrent__detail--name, @@ -316,6 +352,13 @@ p, font-weight: 500; } +.dark .torrent--is-condensed.torrent--is-selected .torrent__detail, +.torrent--is-condensed.torrent--is-selected .torrent__detail, +.dark .torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail, +.torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail { + color: var(--label-text-color); +} + .table__heading:focus-visible, .table__heading:hover, .dark .table__heading:focus-visible, @@ -377,12 +420,15 @@ p, .torrent-details__section--file-tree .directory-tree__parent-directory, .dark .torrent-details__section--file-tree .directory-tree__parent-directory { - color: rgba(var(--accent-color), .6); + color: var(--text-hover); } +.dark .torrent-details__table__heading--primary, .torrent-details__table__heading--primary, -.torrent-details__table__heading--secondary { - color: rgba(var(--accent-color), .6); +.dark .torrent-details__table__heading--secondary .torrent-details__table__heading--secondary, +.dark .torrent-details__table__heading--tertiary, +.torrent-details__table__heading--tertiary { + color: var(--text-hover); } .torrent-details__section .badge { @@ -401,6 +447,13 @@ p, /* TOB NAVBAR */ .action-bar { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--text); } @@ -438,6 +491,12 @@ p, color: var(--text); } +.sidebar-filter__item--heading, +.sidebar-filter__item--heading:focus-visible, +.sidebar-filter__item--heading:hover { + color: var(--text-hover) !important; +} + .dark .sidebar-filter__item, .sidebar-filter__item { color: var(--text); @@ -456,18 +515,25 @@ p, .dark .sidebar-filter__item.is-active .badge, .sidebar-filter__item.is-active .badge { background: rgb(var(--accent-color)); - color: var(--button-text-hover); + color: var(--label-text-color); } .dark .sidebar-filter__item .icon, .sidebar-filter__item .icon { - fill: hsla(0, 0%, 100%, .38); + fill: rgb(var(--accent-color), .3); } .sidebar-filter .badge, .dark .sidebar-filter .badge { background: rgb(var(--accent-color), .3); - color: var(--text); + color: var(--label-text-color); +} + +.dark .sidebar-filter__item:focus-visible .icon, +.dark .sidebar-filter__item:hover .icon, +.sidebar-filter__item:focus-visible .icon, +.sidebar-filter__item:hover .icon { + fill: rgb(var(--accent-color)); } .dark .sidebar-filter__item:focus-visible, @@ -481,7 +547,7 @@ p, background: rgba(var(--accent-color), .25); border-bottom: 1px solid rgba(var(--accent-color), .3); border-top: 1px solid rgba(var(--accent-color), .3); - color: var(--text); + color: #eee; padding-right: 45px; } @@ -510,6 +576,14 @@ p, background: hsla(0, 0%, 100%, .12); } +.torrent--is-selected.torrent--is-stopped .progress-bar__icon .icon { + color: #ffffff; +} + +.torrent--is-selected.torrent--is-stopped .progress-bar__fill { + background: #ffffff; +} + .dark .sidebar__icon-button, .sidebar__icon-button { color: var(--text); @@ -534,6 +608,13 @@ p, .modal__content__wrapper, .modal__header { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text) } @@ -544,15 +625,39 @@ p, .modal--vertical.modal--tabs-in-header .modal__header { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .1); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal--vertical.modal--tabs-in-header .modal__header, +.modal--vertical.modal--tabs-in-body .modal__tabs { + /* Modal side menu*/ + background: rgb(0 0 0 / 45%) !important; + color: var(--text-hover); +} + +.modal__tabs .modal__tab.is-active:after { + background: rgb(var(--accent-color)); +} + +.modal--vertical .modal__tabs .modal__tab:after { + width: 3px; } .modal__header { - color: var(--text); + color: var(--text-hover); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%); } .modal__tabs .modal__tab.is-active { - color: rgb(var(--accent-color)); + color: var(--text-hover); + background: rgb(255 255 255 / 15%); + border-radius: 3px 3px 0px 0px; } .modal__tabs { diff --git a/CSS/themes/flood/hotline.css b/CSS/themes/flood/hotline.css index 0525472d..3bb16a2f 100644 --- a/CSS/themes/flood/hotline.css +++ b/CSS/themes/flood/hotline.css @@ -12,22 +12,4 @@ /* FLOOD HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0, 0%, 100%, .15); - --button-color-hover: hsla(0, 0%, 100%, .30); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #0b3161; - --link-color-hover: #fff; - - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/flood/organizr-dark.css b/CSS/themes/flood/organizr-dark.css index d73ffe01..c43d8d13 100644 --- a/CSS/themes/flood/organizr-dark.css +++ b/CSS/themes/flood/organizr-dark.css @@ -12,22 +12,4 @@ /* FLOOD ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 44, 171, 227; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - - --text: #96a2b4; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/flood/plex.css b/CSS/themes/flood/plex.css index c7e9dc51..c9dc4187 100644 --- a/CSS/themes/flood/plex.css +++ b/CSS/themes/flood/plex.css @@ -12,22 +12,4 @@ /* FLOOD PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/flood/space-gray.css b/CSS/themes/flood/space-gray.css index 4dfabc30..7f63b4e0 100644 --- a/CSS/themes/flood/space-gray.css +++ b/CSS/themes/flood/space-gray.css @@ -12,22 +12,4 @@ /* FLOOD SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/flood/flood-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 129, 166, 183; - --accent-color-hover: #607D8B; - --queue-color: #81a6b7; - --link-color: #9adfff; - --link-color-hover: #fff; - - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/gaps/aquamarine.css b/CSS/themes/gaps/aquamarine.css index b96df315..58e88f60 100644 --- a/CSS/themes/gaps/aquamarine.css +++ b/CSS/themes/gaps/aquamarine.css @@ -12,14 +12,4 @@ /* GAPS AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/gaps/dark.css b/CSS/themes/gaps/dark.css index e0d47e07..a3391a4b 100644 --- a/CSS/themes/gaps/dark.css +++ b/CSS/themes/gaps/dark.css @@ -12,14 +12,4 @@ /* GAPS DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/gaps/dracula.css b/CSS/themes/gaps/dracula.css new file mode 100644 index 00000000..81cdbf66 --- /dev/null +++ b/CSS/themes/gaps/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* GAPS DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/gaps/gaps-base.css b/CSS/themes/gaps/gaps-base.css index 365e0183..ecd953df 100644 --- a/CSS/themes/gaps/gaps-base.css +++ b/CSS/themes/gaps/gaps-base.css @@ -12,174 +12,342 @@ body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } -/* Scrollbar */ - @media only screen and (min-width: 768px) { + +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + a { - color: var(--accent-color); + color: var(--link-color); } + a:hover { - color: var(--accent-color-hover); + color: var(--link-color-hover); text-decoration: underline; } + .text-primary { - color: var(--text)!important; + color: var(--text) !important; } + .text-muted { - color: var(--text)!important; - opacity: .8; + color: var(--text-muted) !important; } - /* Header */ + +h1, +h2, +h3, +h4, +h4.text-primary, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +label { + color: var(--text-hover) !important; +} + +.alert-heading { + color: white !important; +} + +/* Header */ .bg-primary { background-color: transparent !important; background: rgba(0, 0, 0, .25) !important; } -.navbar .list-ul-active,.info-circle-active, .arrow-clockwise-active, .gear-active, .rss-active, .exclamation-triangle-active, .collection-fill-active { - background-color: var(--accent-color); + +.navbar .list-ul-active, +.info-circle-active, +.arrow-clockwise-active, +.gear-active, +.rss-active, +.exclamation-triangle-active, +.collection-fill-active, +.activePage { + background-color: rgb(var(--accent-color)); } + .bg-primary .navbar-nav .active>.nav-link { - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; +} + +.default { + background-color: var(--text); +} + +.navbar-dark .navbar-nav .nav-link { + color: var(--text); +} + +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { + color: var(--text-hover); +} + +.navbar-dark .navbar-nav .nav-link:hover .default, +.navbar-dark .navbar-nav .nav-link:focus .default { + background-color: var(--text-hover); } /* Tables */ -table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr { - background-color: rgba(0, 0, 0, .25); -} -table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { +table.dataTable.stripe tbody tr.odd, +table.dataTable.display tbody tr.odd, +table.dataTable tbody tr { background-color: rgba(0, 0, 0, .25); } -table.dataTable thead th, table.dataTable thead td { +table.dataTable.hover tbody tr:hover, +table.dataTable.display tbody tr:hover { + background-color: rgba(0, 0, 0, .25); +} + +table.dataTable thead th, +table.dataTable thead td { border-bottom: 1px solid #00000000; } -table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { + +table.dataTable.row-border tbody th, +table.dataTable.row-border tbody td, +table.dataTable.display tbody th, +table.dataTable.display tbody td { border-top: 1px solid rgb(255 255 255 / 10%); } - /* Pagination */ -.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { +/* Pagination */ +.dataTables_wrapper .dataTables_paginate .paginate_button.current, +.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--text) !important; border: 1px solid transparent; background: rgba(0, 0, 0, .25); } -.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:active { + +.dataTables_wrapper .dataTables_paginate .paginate_button:hover, +.dataTables_wrapper .dataTables_paginate .paginate_button:active { color: var(--text-hover) !important; border: 1px solid transparent; background: rgba(255, 255, 255, .08); } + .dataTables_wrapper .dataTables_paginate .paginate_button:active { outline: none; } + /* Cards */ .card { background: transparent; color: var(--text); - border: 1px solid rgba(0,0,0,0); + border: 1px solid rgba(0, 0, 0, 0); } + .card .text-muted { color: var(--text) !important; } + #movies .card img { height: 200px !important; width: auto !important; } + .card-text .text-info { - color: var(--accent-color) !important; -} + color: rgb(var(--accent-color)) !important; +} /* Buttons */ -.btn-primary, .btn-info { - color: #fff; +.btn-primary, +.btn-info { + color: var(--button-text); background-color: var(--button-color) !important; border-color: var(--button-color) !important; } -.btn-primary:active, .btn-info:active { - box-shadow: none !important; + +.btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.show>.btn-primary.dropdown-toggle:focus, +.btn-info:focus, +.btn-info.focus { + -webkit-box-shadow: 0 0 0 0.2rem rgb(var(--accent-color), .5); + box-shadow: 0 0 0 0.2rem rgb(var(--accent-color), .5); } -.btn-primary:hover, .btn-info:hover { + +.btn-primary:hover, +.btn-info:hover { background-color: var(--button-color-hover) !important; border-color: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; } + .btn-secondary { - color: #fff; + color: var(--button-text); background-color: var(--button-color); border-color: var(--button-color); } + .btn-secondary:hover { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } + +.list-group-item { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.list-group-item.active { + color: var(--label-text-color); + background: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); +} + +.list-group-item.active:hover { + color: var(--label-text-color); + background: var(--accent-color-hover); + border-color: var(--accent-color-hover); +} + +.list-group-item-action:hover, +.list-group-item-action:focus { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); +} + /* Settings */ -.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { - color: var(--text); +.nav-tabs .nav-link.active, +.nav-tabs .nav-link.active:hover, +.nav-tabs .nav-link.active:focus, +.nav-tabs .nav-item.open .nav-link:focus, +.nav-pills .nav-link.active:focus, +.nav-pills .nav-item.open .nav-link:focus, +.nav-tabs .nav-item.show .nav-link { + color: rgb(var(--accent-color)); background-color: rgba(255, 255, 255, .1); border-color: transparent; } -.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + +.nav-tabs .nav-link, +.nav-tabs .nav-item.open .nav-link, +.nav-pills .nav-link, +.nav-pills .nav-link.active, +.nav-pills .nav-link.active:hover, +.nav-pills .nav-item.open .nav-link { + color: var(--text); +} + +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus, +.nav-tabs .nav-item.open .nav-link:hover, +.nav-pills .nav-item.open .nav-link:hover { background-color: rgba(0, 0, 0, .25); border-color: transparent; + color: var(--text-hover); } + .nav-tabs .nav-link.active:hover { background-color: rgba(255, 255, 255, .1); } + .badge-primary { - color: var(--text); - background-color: var(--accent-color); + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); } + #plexServers .card-header { background-color: rgba(255, 255, 255, .1); + color: var(--text-hover) } + #plexServers .border-secondary { border-color: #0000 !important; } + #plexServers .list-group-item { background-color: rgba(0, 0, 0, .25); border: none; } -#plexServers .card-footer { + +#plexServers .card-footer { background-color: rgb(0 0 0 / 25%); } + .dropdown-menu { color: var(--text); - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid transparent; - box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } -.dropdown-item:hover, .dropdown-item:focus { + +.dropdown-item { + color: var(--text); +} + +.dropdown-item:hover, +.dropdown-item:focus { color: var(--text-hover); text-decoration: none; background-color: rgba(255, 255, 255, .08); @@ -193,7 +361,35 @@ table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table. border: none; border-radius: 5px; } -button, select { + +button, +select { text-transform: none; outline: none; +} + +/* Progress Bar */ +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(var(--accent-color)) 25%, transparent 25%, transparent 50%, rgba(var(--accent-color)) 50%, rgba(var(--accent-color)) 75%, transparent 75%, transparent); + background-size: .625rem .625rem; +} + +.progress-bar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + overflow: hidden; + color: #fff; + text-align: center; + white-space: nowrap; + background-color: rgb(var(--accent-color), .15); + -webkit-transition: width .6s ease; + transition: width .6s ease; } \ No newline at end of file diff --git a/CSS/themes/gaps/hotline.css b/CSS/themes/gaps/hotline.css index fe6f502d..f4a161ca 100644 --- a/CSS/themes/gaps/hotline.css +++ b/CSS/themes/gaps/hotline.css @@ -12,14 +12,4 @@ /* GAPS HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/gaps/organizr-dark.css b/CSS/themes/gaps/organizr-dark.css index 962f47b9..37d824e1 100644 --- a/CSS/themes/gaps/organizr-dark.css +++ b/CSS/themes/gaps/organizr-dark.css @@ -12,14 +12,4 @@ /* GAPS ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - --text: #eee; - --text-hover: #fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/gaps/plex.css b/CSS/themes/gaps/plex.css index aca493cb..f0dcefc7 100644 --- a/CSS/themes/gaps/plex.css +++ b/CSS/themes/gaps/plex.css @@ -12,14 +12,4 @@ /* GAPS PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/gaps/space-gray.css b/CSS/themes/gaps/space-gray.css index 4b4bd202..de31f733 100644 --- a/CSS/themes/gaps/space-gray.css +++ b/CSS/themes/gaps/space-gray.css @@ -12,14 +12,4 @@ /* GAPS SPACE-GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gaps/gaps-base.css); -:root{ - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/gitea/aquamarine.css b/CSS/themes/gitea/aquamarine.css index 92cf3b51..16720d5a 100644 --- a/CSS/themes/gitea/aquamarine.css +++ b/CSS/themes/gitea/aquamarine.css @@ -14,22 +14,4 @@ /* GITEA AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --text-muted: #bbb; - --link-color: #12afa0; - - --heatmap-color-1: #002D24; - --heatmap-color-2: #004B40; - --heatmap-color-3: #006B5F; - --heatmap-color-4: #008C7E; - --heatmap-color-5: #12AFA0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/gitea/dark.css b/CSS/themes/gitea/dark.css index 728e9b6c..e06a3433 100644 --- a/CSS/themes/gitea/dark.css +++ b/CSS/themes/gitea/dark.css @@ -14,22 +14,4 @@ /* GITEA DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #646464; - --accent-color-hover: #ffffff73; - --text: #b7b7b7; - --text-hover: #fff; - --text-muted: #bbb; - --link-hover: rgba(255, 255, 255, 0.45); - - --heatmap-color-1: #303030; - --heatmap-color-2: #5E5E5E; - --heatmap-color-3: #919191; - --heatmap-color-4: #C6C6C6; - --heatmap-color-5: #FFFFFF; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/gitea/dracula.css b/CSS/themes/gitea/dracula.css new file mode 100644 index 00000000..d3cc6cd4 --- /dev/null +++ b/CSS/themes/gitea/dracula.css @@ -0,0 +1,17 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* GITEA DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/gitea/gitea-base.css b/CSS/themes/gitea/gitea-base.css index 54043671..92b48c26 100644 --- a/CSS/themes/gitea/gitea-base.css +++ b/CSS/themes/gitea/gitea-base.css @@ -10,8 +10,25 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --color-text: var(--text); + --color-secondary-alpha-70: rgba(0, 0, 0, 0.35); + --color-primary-light-4: rgb(var(--gitea-color-primary-dark-4),.2); + --color-primary-light-2: rgb(var(--gitea-color-primary-dark-4),.4); + --color-primary: rgb(var(--gitea-color-primary-dark-4),.6); + --color-primary-dark-2: rgb(var(--gitea-color-primary-dark-4),.8); + --color-primary-dark-4: rgb(var(--gitea-color-primary-dark-4)); + } + body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } * { @@ -48,7 +65,7 @@ a:hover, .ui.cards>.card>.content>a.header:hover, .ui.card>.extra a:not(.ui):hover, .ui.cards>.card>.extra a:not(.ui):hover { - color: #fff; + color: var(--link-color-hover); } /* LINKS IMPORTANT */ @@ -64,7 +81,7 @@ a:hover, .ui .text.blue a:hover, .ui .text.grey a:hover, .ui .migrate a:hover { - color: #fff !important; + color: var(--link-color-hover) !important; } /* SCROLLBAR */ @@ -78,7 +95,14 @@ a:hover, body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -109,12 +133,6 @@ a:hover, /* TEXT */ body, -h1, -h2, -h3, -h4, -h5, -h6, p, /*strong,*/ footer, @@ -124,9 +142,7 @@ footer, .issue.list>.item .title, .ui.accordion .title:not(.ui), .ui.checkbox label, -.ui.header, .ui .text.black, -.ui.header .sub.header, .ui.form .inline.field>label, .form .help, .ui.form .field>label, @@ -150,6 +166,21 @@ footer, color: var(--text); } +.issue.list>.item .desc { + color: var(--text-muted); +} + +h1, +h2, +h3, +h4, +h5, +h6, +.ui.header, +.ui.header .sub.header { + color: var(--text-hover); +} + /* TEXT IMPORTANT */ .ui .text.grey { color: var(--text) !important; @@ -189,7 +220,7 @@ b:hover, .following.bar.lightui.secondary.menu .active.item:hover { box-shadow: none; background: rgba(0, 0, 0, .25) !important; - color: var(--accent-color); + color: rgb(var(--accent-color)); } .ui.secondary.menu .dropdown.item:hover, @@ -221,7 +252,7 @@ b:hover, .organization.settings .ui.vertical.menu { display: block; flex-direction: column; - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); } @@ -234,7 +265,7 @@ b:hover, } .ui.segment { - background: rgb(255 255 255 / 8%) !important; + background: rgb(0 0 0 / 15%) !important; } .ui.attached.segment, @@ -256,7 +287,7 @@ b:hover, } .ui.info.message { - background-color: rgb(255 255 255 / 8%); + background-color: rgb(0 0 0 / 15%); color: #276f86; } @@ -302,6 +333,7 @@ b:hover, color: var(--text-hover); box-shadow: none; } + .feeds .list ul li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @@ -315,7 +347,7 @@ b:hover, } .ui.secondary.pointing.menu .item { - color: var(--text-muted); + color: var(--text); } .ui.repository.list .item:not(:first-child) { @@ -328,17 +360,38 @@ b:hover, .ui.basic.modal>.actions, .ui.basic.modal>.content, .ui.basic.modal>.header { - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .ui.modal { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .ui.modal>.header { display: block; font-family: Roboto, Helvetica Neue, Arial, Helvetica, sans-serif; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; margin: 0; padding: 1.25rem 1.5rem; box-shadow: none; @@ -353,10 +406,24 @@ b:hover, line-height: 1.4; padding: 1.5rem; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .ui.modal>.actions { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; padding: 1rem; border-top: 1px solid rgb(255 255 255 / 0.1); text-align: right; @@ -371,6 +438,7 @@ b:hover, .ui.menu.new-menu { background: rgb(0 0 0 / 25%); } + .ui.menu.new-menu::after { background: transparent; } @@ -384,7 +452,7 @@ b:hover, .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover { border-color: currentColor; - color: var(--accent-color); + color: rgb(var(--accent-color)); } .ui.tabular.menu .item { @@ -405,6 +473,13 @@ b:hover, .ui.menu .dropdown.item .menu { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .ui.menu .ui.dropdown .menu>.item { @@ -413,7 +488,7 @@ b:hover, .ui.menu .ui.dropdown .menu>.active.item { background: rgb(0 0 0 / 10%) !important; - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; } .ui.menu .ui.dropdown .menu>.item:hover, @@ -438,6 +513,13 @@ b:hover, .ui.dropdown .menu { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: rgb(255 255 255 / 10%); } @@ -452,7 +534,7 @@ b:hover, } .ui.dropdown .menu .active.item { - color: var(--accent-color); + color: rgb(var(--accent-color)); outline: none !important; } @@ -510,6 +592,13 @@ textarea:hover { .ui.pointing.dropdown>.menu:not(.hidden):after { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* MESSAGES */ @@ -546,7 +635,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c #app .ui.item.menu, .ui.item.menu .item { - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); border-color: rgb(255 255 255 / 10%); } @@ -569,7 +658,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c .ui.menu a.item:hover { color: var(--text-hover); - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); } #app .ui.link.menu .item:hover, @@ -581,13 +670,13 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c } #app .ui.secondary.segment { - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); color: rgba(0, 0, 0, .6); } /* COMMIT CALENDAR */ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { - stroke: var(--accent-color); + stroke: rgb(var(--accent-color)); stroke-width: 1px; } @@ -627,6 +716,13 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { .repository .diff-detail-box { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .repository .diff-detail-box.sticky { @@ -668,7 +764,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { } .repository .segment.reactions .ui.label.basic { - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; } .repository .diff-file-box .code-diff-split tbody tr.add-code td:first-child, @@ -721,7 +817,7 @@ td.blob-excerpt { } .repo-header .ui.breadcrumb a { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .repo-header .ui.breadcrumb a:hover { @@ -738,6 +834,13 @@ td.blob-excerpt { .ui.tabular.menu .active.item { background: none var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); border-color: rgb(255 255 255 / 10%) !important; } @@ -749,13 +852,13 @@ td.blob-excerpt { .ui.tabular.menu .item:hover, .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { - color: var(--text-hover) !important; + color: rgb(var(--accent-color)) !important; border-radius: .28571429rem .28571429rem 0 0 !important; } .ui.card, .ui.cards>.card { - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); box-shadow: none; } @@ -831,6 +934,13 @@ a.ui.card:hover { .editor-preview, .editor-preview-side { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* COMMIT STUFF */ @@ -852,7 +962,7 @@ a.ui.card:hover { } #git-graph-container li .author { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .repository .ui.segment.sub-menu .list .item a, @@ -874,17 +984,19 @@ a.ui.card:hover { } .ui.blue.labels .label, -.ui.ui.ui.blue.label { - background-color: var(--accent-color) !important; - border-color: var(--accent-color) !important; - color: var(--text-hover); +.ui.ui.ui.blue.label, +.ui.grey.labels .label, +.ui.ui.ui.grey.label { + background-color: rgb(var(--accent-color)) !important; + border-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color); } .ui.black.labels .label, .ui.ui.ui.black.label { - background-color: var(--accent-color); - border-color: var(--accent-color); - color: var(--button-text); + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); + color: var(--label-text-color); } .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { @@ -937,7 +1049,7 @@ a.ui.card:hover { } .ui.form .dropzone { - border: 2px dashed var(--accent-color) !important; + border: 2px dashed rgb(var(--accent-color)) !important; box-shadow: none !important; padding: 0; min-height: 5rem; @@ -969,11 +1081,11 @@ a.ui.card:hover { } .repository.view.issue .comment-list .comment .content>.header .actions a:hover { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .repository.view.issue .pull-desc code { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .repository .segment.reactions .ui.label.basic.blue { @@ -986,8 +1098,8 @@ a.ui.card:hover { } .repository.view.issue .comment-list .timeline-item .badge { - background-color: var(--accent-color); - border: 2px solid var(--accent-color); + background-color: rgb(var(--accent-color)); + border: 2px solid rgb(var(--accent-color)); color: #fff; } @@ -1050,8 +1162,8 @@ footer { } .ui.checkbox input:checked~label:after { - color: #fff !important; - background: var(--accent-color); + color: var(--label-text-color) !important; + background: rgb(var(--accent-color)); } .ui.toggle.checkbox input:checked~label:before { @@ -1060,7 +1172,7 @@ footer { .ui.toggle.checkbox input:checked~label, .ui.toggle.checkbox label { - color: var(--text) !important; + color: var(--label-text-color) !important; } .ui.toggle.checkbox label:before, @@ -1072,7 +1184,7 @@ footer { .ui.toggle.checkbox input:focus:checked~label, .ui.checkbox input:focus~label, .ui.checkbox input:focus~label:after { - color: var(--text-hover) !important; + color: var(--label-text-color) !important; } .ui.blue.button, @@ -1167,7 +1279,7 @@ footer { .ui.basic.blue.button, .ui.basic.blue.buttons .button { - box-shadow: inset 0 0 0 1px var(--accent-color) !important; + box-shadow: inset 0 0 0 1px rgb(var(--accent-color)) !important; color: var(--button-text) !important; } @@ -1195,7 +1307,7 @@ footer { .ui.basic.button:hover, .ui.basic.buttons .button:focus, .ui.basic.buttons .button:hover { - background: rgb(255 255 255 / 8%); + background: rgb(0 0 0 / 15%); color: var(--button-text); } @@ -1224,14 +1336,14 @@ footer { .ui.basic.labels .label { background: none var(--button-color); border: 1px solid rgba(34, 36, 38, .15); - color: var(--button-text); + color: var(--label-text-color); } .repo-buttons .ui.basic.labels a.label:hover, a.ui.basic.label:hover { text-decoration: none; background: none var(--button-color-hover); - color: var(--button-text); + color: var(--label-text-color); box-shadow: none; } @@ -1253,9 +1365,10 @@ a.ui.basic.label:hover { color: var(--button-text); } */ -.ui.label { - background-color: rgb(255 255 255 / 10%); - color: #fff; +.ui.label, +.ui.menu .item>.label { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); } .ui.labels a.label:hover, @@ -1266,14 +1379,14 @@ a.ui.label:hover { .ui .sha.label { background: var(--button-color) !important; - color: var(--button-text) !important; + color: var(--label-text-color) !important; border: 1px solid var(--button-color) !important; } a.ui.label:hover, a.ui.labels .label:hover { background: var(--button-color-hover); - color: var(--button-text); + color: var(--label-text-color); } .repository #commits-table td.sha .sha.label, @@ -1296,7 +1409,7 @@ a.ui.labels .label:hover { .repository.file.list #repo-files-table tbody .svg.octicon-file-directory, .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* FORMS */ @@ -1339,7 +1452,7 @@ input { .ui.form input[type=time]:focus, .ui.form input[type=url]:focus { color: var(--text); - border-color: rgb(255 255 255 / 8%); + border-color: rgb(0 0 0 / 15%); border-radius: .28571429rem; background: rgb(0 0 0 / 50%); box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35); @@ -1402,7 +1515,7 @@ textarea:hover { } .ui.action.input:not([class*="left action"])>input:focus { - border-right-color: var(--accent-color); + border-right-color: rgb(var(--accent-color)); } /* MARKDOWN */ @@ -1448,41 +1561,41 @@ textarea:hover { /* HIGHLIGHTING */ ::-webkit-selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } ::-moz-selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } ::selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } textarea::-webkit-selection, input::-webkit-selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } textarea::-moz-selection, input::-moz-selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } textarea::-moz-selection, input::-moz-selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } textarea::selection, input::selection { - background-color: var(--accent-color) !important; + background-color: rgb(var(--accent-color)) !important; color: var(--text-hover) !important; } diff --git a/CSS/themes/gitea/hotline.css b/CSS/themes/gitea/hotline.css index e2d9e8b0..dfcadee6 100644 --- a/CSS/themes/gitea/hotline.css +++ b/CSS/themes/gitea/hotline.css @@ -14,22 +14,4 @@ /* GITEA HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --text-muted: #bbb; - --link-hover: #F44336; - - --heatmap-color-1: #690000; - --heatmap-color-2: #890000; - --heatmap-color-3: #AC0002; - --heatmap-color-4: #D0191D; - --heatmap-color-5: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/gitea/organizr-dark.css b/CSS/themes/gitea/organizr-dark.css index c157b666..e9819ccb 100644 --- a/CSS/themes/gitea/organizr-dark.css +++ b/CSS/themes/gitea/organizr-dark.css @@ -14,22 +14,4 @@ /* GITEA ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text: #96a2b4; - --text-hover: #fff; - --text-muted: #bbb; - --link-color: #2cabe3; - - --heatmap-color-1: #002A57; - --heatmap-color-2: #004878; - --heatmap-color-3: #00679A; - --heatmap-color-4: #0088BE; - --heatmap-color-5: #2CABE3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/gitea/plex.css b/CSS/themes/gitea/plex.css index 06638c04..32a941a3 100644 --- a/CSS/themes/gitea/plex.css +++ b/CSS/themes/gitea/plex.css @@ -14,22 +14,4 @@ /* GITEA PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --text-muted: #bbb; - --link-color:#fff; - - --heatmap-color-1: #492000; - --heatmap-color-2: #6E4500; - --heatmap-color-3: #9B6C00; - --heatmap-color-4: #CC9500; - --heatmap-color-5: #FFC107; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/gitea/space-gray.css b/CSS/themes/gitea/space-gray.css index fc2498d7..8d1cc7d6 100644 --- a/CSS/themes/gitea/space-gray.css +++ b/CSS/themes/gitea/space-gray.css @@ -14,23 +14,4 @@ /* GITEA SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/gitea-base.css); @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/gitea/chroma.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --text-muted: #bbb; - --link-color: #81a6b7; - - --heatmap-color-1: #002634; - --heatmap-color-2: #1D4352; - --heatmap-color-3: #3E6272; - --heatmap-color-4: #5F8394; - --heatmap-color-5: #81A6B7; - -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/grafana/aquamarine.css b/CSS/themes/grafana/aquamarine.css index d134ebff..cdf443c9 100644 --- a/CSS/themes/grafana/aquamarine.css +++ b/CSS/themes/grafana/aquamarine.css @@ -13,12 +13,4 @@ /* GRAFANA AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/grafana/dark.css b/CSS/themes/grafana/dark.css index 38452c82..b52ebcb4 100644 --- a/CSS/themes/grafana/dark.css +++ b/CSS/themes/grafana/dark.css @@ -13,11 +13,4 @@ /* GRAFANA DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/grafana/dracula.css b/CSS/themes/grafana/dracula.css new file mode 100644 index 00000000..675fa7d5 --- /dev/null +++ b/CSS/themes/grafana/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* GRAFANA DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/grafana/grafana-base.css b/CSS/themes/grafana/grafana-base.css index 1e01be79..f9b4d6ed 100644 --- a/CSS/themes/grafana/grafana-base.css +++ b/CSS/themes/grafana/grafana-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,241 +11,407 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ body { - color:#FFFFFF !important; - background: var(--main-bg-color) !important; + color: var(--text) !important; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } -.theme-dark, .theme-light, .preloader { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat!important; - background-attachment: fixed, fixed!important; - background-position: center center, center center!important; - background-size: auto, cover!important; - -webkit-background-size: auto, cover!important; - -moz-background-size: auto, cover!important; - -o-background-size: auto, cover!important; + +.theme-dark, +.theme-light, +.preloader { + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } -.page-header-canvas { + +h1, +h2, +h3, +h4, +h5, +h6, +label, +legend { + color: var(--text-hover); +} + +div>aria-label>span, +#reactRoot>div>div.main-view>div>div:nth-child(1)>div>div:nth-child(10)>div>div.button-group.css-1uxatfi>div>div>div>div>div>div>span { + color: var(--text-hover) !important; +} + +p { + color: var(--text); +} + +.page-header-canvas, +.page-toolbar[class*="css-"] { background: rgba(0, 0, 0, 0.25) !important; box-shadow: none !important; border-bottom: none !important; } + .main-view { - background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; + background: linear-gradient(180deg, #ffffff00 10px, #ffffff00 100px) !important; } + /* Scrollbar */ -.no-overlay-scrollbar ::-webkit-scrollbar-thumb:vertical{ +.no-overlay-scrollbar ::-webkit-scrollbar-thumb:vertical { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background: hsla(0,0%,100%,.2) !important; + background: hsla(0, 0%, 100%, .2) !important; } + /* Variable Dropdown Menu */ .variable-value-dropdown { -background: var(--modal-bg-color); -border: 1px solid #00000000; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; + border: 1px solid #00000000; } + .variable-value-dropdown.single .selected { -background-color: rgba(0, 0, 0, 0.25); + background-color: rgba(0, 0, 0, 0.25); } + .css-0.gf-form-select-box__menu { -background: #09090b !important; --webkit-box-shadow:5px 5px 20px -5px #000; -box-shadow:5px 5px 20px -5px #000; -position:absolute; -z-index:1000; -min-width:100% + background: #09090b !important; + -webkit-box-shadow: 5px 5px 20px -5px #000; + box-shadow: 5px 5px 20px -5px #000; + position: absolute; + z-index: 1000; + min-width: 100% } + /* time picker Menu */ .time-picker-popover { -border: 1px solid #00000000; -background: var(--modal-bg-color); + border: 1px solid #00000000; + background: var(--modal-bg-color); } -.time-picker-calendar .react-calendar__navigation, .time-picker-calendar .react-calendar__navigation__arrow, .time-picker-calendar .react-calendar__navigation__label { -background-color: rgba(0, 0, 0, 0.25); + +.time-picker-calendar .react-calendar__navigation, +.time-picker-calendar .react-calendar__navigation__arrow, +.time-picker-calendar .react-calendar__navigation__label { + background-color: rgba(0, 0, 0, 0.25); } + .time-picker-calendar .react-calendar__month-view__weekdays { -background-color: rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.6); } -.time-picker-calendar .react-calendar__tile--active, .time-picker-calendar .react-calendar__tile--active:hover { -background: rgba(255, 255, 255, 0.08); -border: 1px solid rgba(0,0,0,0); + +.time-picker-calendar .react-calendar__tile--active, +.time-picker-calendar .react-calendar__tile--active:hover { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(0, 0, 0, 0); } + .time-picker-calendar .time-picker-calendar-tile:hover { --webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08); -box-shadow: 0 0 4px #ffffff00; -background: rgba(255, 255, 255, 0.08); -border: 1px solid rgba(255, 255, 255, 0.08); + -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08); + box-shadow: 0 0 4px #ffffff00; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.08); } + .time-picker-calendar .react-calendar__month-view__days { -background-color: rgba(0, 0, 0, 0.15); + background-color: rgba(0, 0, 0, 0.15); } + .time-picker-calendar .time-picker-calendar-tile { -border-radius: 0px; + border-radius: 0px; } + .time-picker-calendar { -border: 1px solid #00000000; + border: 1px solid #00000000; } + /* login page */ .login { -background-image: var(--main-bg-color) !important; -background-repeat: repeat, no-repeat!important; -background-attachment: fixed, fixed!important; -background-position: center center, center center!important; -background-size: auto, cover!important; --webkit-background-size: auto, cover!important; --moz-background-size: auto, cover!important; --o-background-size: auto, cover!important; -background-color: rgba(0,0,0,.0) !important; -color:#FFFFFF !important; + background-image: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; + background-color: rgba(0, 0, 0, .0) !important; + color: #FFFFFF !important; } + .login-branding { border-right: none !important; } + /* Configuration menu */ .card-item { background: rgba(0, 0, 0, .25) !important; } + .card-item:hover { - background: hsla(0,0%,100%,.08) !important; + background: hsla(0, 0%, 100%, .08) !important; } -.card-item-sub-name, .card-item-type { + +.card-item-sub-name, +.card-item-type { color: #FFF !important; } + .gf-form--has-input-icon .gf-form-input-icon { color: #fff !important; } -.gf-tabs-link.active, .gf-tabs-link.active:focus, .gf-tabs-link.active:hover { + +.gf-tabs-link.active, +.gf-tabs-link.active:focus, +.gf-tabs-link.active:hover { background: rgba(0, 0, 0, 0.25) !important; } + .filter-table tbody tr:nth-child(odd) { - background: hsla(0,0%,100%,.08) !important; + background: hsla(0, 0%, 100%, .08) !important; } + .cta-form { background-color: rgba(0, 0, 0, 0.25) !important; } + .empty-list-cta { background-color: rgba(0, 0, 0, .25) !important; } + .layout-selector button { background: rgba(0, 0, 0, 0.25); color: #ffffff; } + .layout-selector button.active { background-color: rgba(0, 0, 0, 0.45); color: #ffffff; } + /* Configuration menu - Teams */ .css-1ph0cdx-call-to-action-card { background: rgba(0, 0, 0, .25) !important; } + .grafana-info-box { background-color: rgba(0, 0, 0, 0.45); } + /* sidemenu */ -.sidemenu-open, .sidemenu { +.sidemenu-open, +.sidemenu { background: rgba(0, 0, 0, .25) !important; } + .sidemenu__logo:hover { background: rgba(0, 0, 0, .25) !important; } -.sidemenu-item.active, .sidemenu-item:hover { + +.sidemenu-item.active, +.sidemenu-item:hover { background-color: rgba(0, 0, 0, .25) !important; + color: rgb(var(--accent-color)) !important; + border-image: none; + border-color: rgb(var(--accent-color)); } -.side-menu-header, .dropdown-menu--menu, .dropdown-menu--navbar, .dropdown-menu--sidemenu { - background: var(--modal-bg-color); + +.sidemenu-link { + color: var(--text) !important; } + +.sidemenu-link:hover { + color: rgb(var(--accent-color)) !important; +} + +.side-menu-header, +.dropdown-menu--menu, +.dropdown-menu--navbar, +.dropdown-menu--sidemenu, + +#reactRoot>div>div.main-view>div[class*="css-"]>div:nth-child(1)>div>div:nth-child(10)>div>div.button-group[class*="css-"]>div>div { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} + +#reactRoot>div>div.main-view>div[class*="css-"]>div:nth-child(1)>div>div:nth-child(10)>div>div.button-group[class*="css-"]>div>div>div>span { + color: var(--text-hover); +} + .dropdown-menu .divider { border-bottom: 1px solid #d8d9da; } + .dropdown-menu--sidemenu>li>.side-menu-header-link:hover { - color: #fff!important; - background: var(--modal-bg-color)!important; + color: var(--text-hover) !important; + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } -.dropdown-menu--menu>li>a:hover, .dropdown-menu--navbar>li>a:hover, .dropdown-menu--sidemenu>li>a:hover { - background: rgba(0, 0, 0, 0.25)!important; + +.dropdown-menu--menu>li>a:hover, +.dropdown-menu--navbar>li>a:hover, +.dropdown-menu--sidemenu>li>a:hover { + background: rgba(0, 0, 0, 0.25) !important; + color: var(--text-hover) !important; } + .dropdown-menu>li>a { - color: #ffffff!important; + color: var(--text) !important; } + .dropdown-menu-item-shortcut { - color: #ffffff!important; + color: var(--text) !important; } + .dropdown-menu { border: 1px solid transparent; } + .dropdown-submenu:hover>a { - Background-color: rgba(0, 0, 0, 0.25)!important; + Background-color: rgba(0, 0, 0, 0.25) !important; } -.icon-circle:hover .fa:hover, .icon-circle:hover .gicon:hover, .icon-circle:hover .icon-gf:hover { + +.icon-circle:hover .fa:hover, +.icon-circle:hover .gicon:hover, +.icon-circle:hover .icon-gf:hover { color: #ffffff; opacity: 1; } + /* Dashboard dropdown menu */ .search-dropdown__col_1 { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + .search-container { left: 0px !important; } + .navbar-page-btn { color: #FFFFFF !important; } + /* dropdown menu */ -.css-n9566h, .css-1m7hyr { +.css-n9566h, +.css-1m7hyr { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + .search-filter-box { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + .search-filter-box__header { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } + /* Dashboard row */ .dashboard-row--collapsed { background: rgba(0, 0, 0, 0.25); } + .search-section { background: rgba(255, 255, 255, 0.08); border: none; } + .search-item { background: rgba(0, 0, 0, 0.15); } -.search-item.selected, .search-item:hover { + +.search-item.selected, +.search-item:hover { background: rgba(0, 0, 0, 0.25); } + .search-section__header { color: #ffffff !important; } + .navbar-page-btn__folder { color: #d8d9da; } + /* Panel fullscreen navbar */ .panel-in-fullscreen .navbar { - background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important; + background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0.25)) !important; } /* Dashboard search menu */ .search-field-wrapper>input { - height: 55px !important; + height: 55px !important; } /* Dashboard settings menu */ .dashboard-settings__aside { background: rgba(0, 0, 0, .25) !important; } + .dashboard-page--settings-open .navbar { - background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important; + background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0.25)) !important; } + .navbar-button--primary { border-color: #ffffff00 !important; } + .dashboard-settings__aside-header { color: #ffffff !important; } + .dashboard-settings__nav-item { color: #ffffff !important; } + .bootstrap-tagsinput { background-color: #09090b !important; } @@ -254,48 +419,70 @@ color:#FFFFFF !important; .gf-form-switch--table-cell { background-color: transparent !important; } + .gf-form-select-wrapper { - background-color: hsla(0,0%,100%,.08) !important; + background-color: hsla(0, 0%, 100%, .08) !important; } + .dashboard-settings__nav-item.active { background: rgba(255, 255, 255, 0.08); } + .gf-form-checkbox { background: rgba(0, 0, 0, 0.25); border: none; } + .gf-form-switch__checkbox { border: none; background: #ffffff; } + .gf-form-select-box__option { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + .gf-form-select-box__option.gf-form-select-box__option--is-focused { color: #fff; - -o-border-image: -o-linear-gradient(var(--accent-color) 30%,var(--accent-color) 99%); - border-image: -webkit-gradient(linear,left top,left bottom,color-stop(30%,var(--accent-color)),color-stop(99%,var(--accent-color))); - border-image: -webkit-linear-gradient(var(--accent-color) 30%,var(--accent-color) 99%); + -o-border-image: -o-linear-gradient(rgb(var(--accent-color)) 30%, rgb(var(--accent-color)) 99%); + border-image: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgb(var(--accent-color))), color-stop(99%, rgb(var(--accent-color)))); + border-image: -webkit-linear-gradient(rgb(var(--accent-color)) 30%, rgb(var(--accent-color)) 99%); } + .filter-table td.filter-table__switch-cell { border-right: none; } + /* Variable label color */ -.template-variable, .gf-form-label--variable { - color: var(--accent-color) !important; +.template-variable, +.gf-form-label--variable { + color: rgb(var(--accent-color)) !important; } /* Variable label box */ .gf-form-label { - background-color: rgba(0, 0, 0, 0.25) !important; - border: none !important; + background: rgba(0, 0, 0, 0.25) !important; + border: none !important; } + +.gf-form-label>button[class*="css-"] { + background: transparent !important; +} + .gf-form-label--btn:hover { background: rgba(0, 0, 0, 0.45) !important; } -.variable-option.highlighted, .variable-option:hover { - background-color: hsla(0,0%,100%,.1) !important; +.variable-option.highlighted, +.variable-option:hover { + background-color: hsla(0, 0%, 100%, .1) !important; } /* Variable dashboard dropdown */ @@ -308,30 +495,34 @@ color:#FFFFFF !important; /* Variable input box */ .gf-form-input { - color: #FFFFFF !important; - border: none !important; + color: #FFFFFF !important; + border: none !important; } + .gf-form-input:focus { color: #FFF !important; - box-shadow: none !important; + box-shadow: none !important; } + .gf-form-select-box-button-select { background: transparent; - border: none; + border: none; } + .gf-form-select-wrapper .gf-form-select-icon+.gf-form-input option { color: #fff; - background: #1f1f1f; + background: #1f1f1f; } -.css-0 > .gf-form-input { - background-color: transparent !important; + +.css-0>.gf-form-input { + background-color: transparent !important; } /* NAVBAR BUTTONS */ .navbar-button { color: #FFF !important; background-color: rgba(0, 0, 0, 0.25) !important; - background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important; border: none !important; } @@ -346,17 +537,25 @@ color:#FFFFFF !important; border: transparent; box-shadow: none !important; } -.panel-container.panel-transparent, .panel-container--transparent { - background-color: transparent; - border: transparent; + +.panel-container.panel-transparent, +.panel-container--transparent { + background-color: transparent; + border: transparent; } .panel-header:hover { background-color: rgba(0, 0, 0, 0.25) !important; } + +.panel-title-text:hover { + color: var(--text-hover); +} + /* ////PANEL BACKGROUND COLOR//// */ -.graph-legend-table .graph-legend-series:nth-child(odd), .graph-legend-table .graph-legend-series:nth-child(2n) { +.graph-legend-table .graph-legend-series:nth-child(odd), +.graph-legend-table .graph-legend-series:nth-child(2n) { background: transparent !important; } @@ -380,62 +579,92 @@ div.flot-text { .table-panel-container { background-color: rgba(0, 0, 0, .25) !important; } + /* table panel border size */ .table-panel-table td { padding: .45em 0 .45em 1.1em; border-bottom: 1px solid #171819; border-right: 1px solid #171819; } + .table-panel-header-bg { background: rgba(0, 0, 0, 0.25); border-top: 2px solid transparent; border-bottom: 2px solid transparent; } + /* Panel tables */ .css-58bavm-thead { background: rgba(0, 0, 0, .25); } + .css-sq6g4h-row { border-bottom: 1px solid rgb(255 255 255 / 10%); } + .css-11m63ae { border-right: 1px solid rgb(255 255 255 / 10%); } + .css-2n373z { border-right: 1px solid rgb(255 255 255 / 25%); } + .css-sq6g4h-row:hover { background-color: rgb(255 255 255 / 0.08); } + .css-3o5ryu { background: rgb(0 0 0 / 45%); } -.css-1n8kpcb-activeTabStyle,.css-dnqfjg-activeTabStyle { + +.css-1n8kpcb-activeTabStyle, +.css-dnqfjg-activeTabStyle { background: rgb(0 0 0 / 35%); } -.css-1n8kpcb-activeTabStyle::before, .css-dnqfjg-activeTabStyle::before { - background: var(--accent-color); + +.css-1n8kpcb-activeTabStyle::before, +.css-dnqfjg-activeTabStyle::before { + background: rgb(var(--accent-color)); } + /* Edit panel tabs */ +[aria-label="Panel editor content"] { + background: var(--main-bg-color); +} + +div>.scrollbar-view>div>[class*="css-"], +#reactRoot>div>div.main-view>div.css-1mwktlb>div[class*="css-"]>div[class*="css-"]>div>div.Pane.vertical.Pane1>div>div.Pane.horizontal.Pane2>div>div>div[class*="css-"], +.css-v2fjpc, +.css-ld7ft6 { + background: rgba(0, 0, 0, .25) !important; +} + .tabbed-view-header { box-shadow: none; background: rgba(0, 0, 0, 0.25); border-bottom: none; } + .tabbed-view-panel-title { padding-left: 10px; } + /* panel query settings */ -.panel-editor__right, .toolbar { +.panel-editor__right, +.toolbar { background: rgba(0, 0, 0, 0.25); } + .query-editor-row__header { background: rgba(0, 0, 0, 0.25); } + .query-editor-row__body { background: rgba(0, 0, 0, 0.15); } + .panel-options-group { background: rgba(0, 0, 0, 0.15); } @@ -444,30 +673,37 @@ div.flot-text { background: rgba(0, 0, 0, 0.25); border: transparent; } + .viz-picker__item { background: rgba(0, 0, 0, 0.25); border: transparent; } + .viz-picker__item--current { - box-shadow: 0 0 6px #eb7b18!important; - border: 1px solid #eb7b18!important; - background: rgba(0, 0, 0, 0.4)!important; + box-shadow: 0 0 6px #eb7b18 !important; + border: 1px solid #eb7b18 !important; + background: rgba(0, 0, 0, 0.4) !important; } + .viz-picker__item:hover { - box-shadow: 0 0 6px #eb7b18!important; + box-shadow: 0 0 6px #eb7b18 !important; background: rgba(0, 0, 0, 0.4); - border: 1px solid #eb7b18!important; + border: 1px solid #eb7b18 !important; } + .panel-options-group__header { background: rgba(0, 0, 0, 0.25); } -.custom-scrollbar .thumb-vertical, .custom-scrollbar .thumb-horizontal { + +.custom-scrollbar .thumb-vertical, +.custom-scrollbar .thumb-horizontal { background-color: rgba(255, 255, 255, 0); - background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0.25)),to(rgba(255, 255, 255, 0.25))); - background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.25),rgba(255, 255, 255, 0.25)); - background-image: -o-linear-gradient(top,#404357,#424345); - background-image: linear-gradient(180deg,rgba(249, 249, 249, 0.25),rgba(251, 251, 251, 0.25)); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0.25))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)); + background-image: -o-linear-gradient(top, #404357, #424345); + background-image: linear-gradient(180deg, rgba(249, 249, 249, 0.25), rgba(251, 251, 251, 0.25)); } + .toolbar__main { color: #ffffff; background-color: rgba(0, 0, 0, 0.15); @@ -475,17 +711,21 @@ div.flot-text { } /* worldmap zoom buttons and leaflet */ -.leaflet-bar a, .leaflet-bar a:hover { +.leaflet-bar a, +.leaflet-bar a:hover { background-color: #1f1f1f !important; border-bottom: 1px solid #1f1f1f !important; color: white !important; } + .leaflet-bar a:hover { background-color: #1b1b1b !important; } + .leaflet-control-attribution { display: none; } + /* buttons .btn-inverse { border-color: #b56d16 !important; @@ -504,39 +744,53 @@ border-color: #b56d16 !important; .btn-inverse { background: rgba(0, 0, 0, 0.25); - -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0,0,0,.3); - box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0,0,0,.3); + -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); + box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); } -.btn-primary, .btn-success { - -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0,0,0,.3); - box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0,0,0,.3); + +.btn-primary, +.btn-success { + -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); + box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); } -.btn-inverse.active, .btn-inverse.disabled, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .btn-inverse[disabled] { + +.btn-inverse.active, +.btn-inverse.disabled, +.btn-inverse:active, +.btn-inverse:focus, +.btn-inverse:hover, +.btn-inverse[disabled] { background-color: rgba(255, 255, 255, 0.08); } /* New Dashboard */ .add-panel__item { - background: linear-gradient(135deg,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25)); - box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0, 0, 0, 0); + background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); + box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, 0); } -.add-panel__item.active, .add-panel__item:hover { - background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)); + +.add-panel__item.active, +.add-panel__item:hover { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)); } + .add-panel__header { background: rgba(0, 0, 0, 0.25); box-shadow: none; border-bottom: 0px; } + /* Explore */ .query-transaction { color: #fff; } + .query-type-toggle .btn.active { background-color: rgba(0, 0, 0, 0.45); border: none; border-radius: 3px; } + .toggle-button-group .btn { background-color: rgba(0, 0, 0, 0.25); background-image: none; @@ -544,31 +798,52 @@ border-color: #b56d16 !important; border-radius: 3px !important; border-right: 1px; } + .toggle-button-group .btn:hover { background-color: rgba(0, 0, 0, 0.45); } + .logs-panel-options { background-color: transparent; border: none; } + /* JSON Model */ .gf-code-dark { background-color: rgba(0, 0, 0, 0.25); color: #e0e0e0; } + .gf-code-editor.ace_editor { border: none; } -.modal-header, .css-1z13zsv-modalHeader { +.modal-header, +.css-1z13zsv-modalHeader { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #d8d9da; color: #eee; } -.modal-body, .css-111908g { + +.modal-body, +.css-111908g { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; color: #eee; } @@ -577,304 +852,371 @@ border-color: #b56d16 !important; /*V7*/ /*LOGIN*/ -.css-bnbqsv {background: var(--main-bg-color)} -.css-3iwqj4 { background: transparent;} -#login-view > div > form > div:nth-child(1) > div:nth-child(2) > div > div > input, #login-view > div > form > div:nth-child(2) > div:nth-child(2) > div > div > input { +.css-bnbqsv { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} + +.css-3iwqj4 { + background: transparent; +} + +#login-view>div>form>div:nth-child(1)>div:nth-child(2)>div>div>input, +#login-view>div>form>div:nth-child(2)>div:nth-child(2)>div>div>input { height: 38px; } + /*Buttons*/ -.css-y3nv3e-button, -.css-cc7c9f-button, -.css-1vlnne-button, -.css-1ihbihm-button, -.css-14zdxje-button, -.css-179z9yx-button, -.css-370vzt-button, -.css-msayan-button, -.css-19kbjxc-button, -.css-n4gkqg-button, -.css-u6ysb0-button, -.css-ak0gkt-button, -.css-1pa3vaj-button, -.css-g7zx83-button, -.css-1pcbsvw-button, -.gf-form-button-row a, .gf-form-button-row button, -.page-action-bar>a, .page-action-bar>button, -.btn-primary{ -background: var(--button-color) !important; -background-color: var(--button-color) !important; -border-color: var(--button-color); +button[class$="-button"]:not(button[aria-label="toggle-viz-picker"]), +.gf-form-button-row a, +.gf-form-button-row button, +.page-action-bar>a, +.page-action-bar>button, +.btn-primary, +button.toolbar-button { + background: var(--button-color) !important; + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; + color: var(--button-text) !important; +} + +button[class$="-button"]:hover, +button[class$="-button"]:focus, +button[class$="-button"]:active, +.gf-form-button-row a, +.gf-form-button-row button:hover, +.btn-primary:hover { + color: rgb(255, 255, 255); + background: var(--button-color-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + box-shadow: none !important; +} + +.css-1d9e5zy-button { + color: #fff; + background: var(--button-color) +} + +.css-1d9e5zy-button:hover { + color: #fff; + background: var(--button-color-hover) } -.css-y3nv3e-button:hover, -.css-y3nv3e-button:focus, -.css-cc7c9f-button:hover, -.css-cc7c9f-button:focus, -.css-1vlnne-button:hover, -.css-1vlnne-button:focus, -.css-1ihbihm-button:hover, -.css-1ihbihm-button:focus, -.css-14zdxje-button:hover, -.css-14zdxje-button:focus, -.css-179z9yx-button:hover, -.css-179z9yx-button:focus, -.css-370vzt-button:hover, -.css-370vzt-button:focus, -.css-msayan-button:hover, -.css-msayan-button:focus, -.css-19kbjxc-button:hover, -.css-19kbjxc-button:focus, -.css-n4gkqg-button:hover, -.css-n4gkqg-button:focus, -.css-u6ysb0-button:hover, -.css-u6ysb0-button:focus, -.css-ak0gkt-button:hover, -.css-ak0gkt-button:focus, -.css-1pa3vaj-button:hover, -.css-1pa3vaj-button:focus, -.css-g7zx83-button:hover, -.css-g7zx83-button:focus, -.css-1pcbsvw-button:hover, -.css-1pcbsvw-button:focus, -.gf-form-button-row a, .gf-form-button-row button:hover, -.btn-primary:hover{ -color: rgb(255, 255, 255); -background: var(--button-color-hover) !important; -background-color: var(--button-color-hover) !important; -box-shadow: none !important; -} -.css-1d9e5zy-button {color: #fff; background: var(--button-color)} -.css-1d9e5zy-button:hover {color: #fff; background: var(--button-color-hover)} /*INPUT*/ -input:focus {box-shadow: none !important;} -.css-17rc2pp-input-wrapper:focus, .css-1i9is3t:focus { -box-shadow:none; -color: transparent; +input:focus { + box-shadow: none !important; } + +.css-17rc2pp-input-wrapper:focus, +.css-1i9is3t:focus { + box-shadow: none; + color: transparent; +} + .gf-form-select-box__control--is-focused { -border-color: transparent; -outline: none; --webkit-box-shadow: none !important; -box-shadow: none !important; + border-color: transparent; + outline: none; + -webkit-box-shadow: none !important; + box-shadow: none !important; } .css-1bjepp-input-input { -background-color: hsla(0,0%,100%,.25); -border-radius: 3px; -border-color: transparent; --webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; -transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; + background-color: hsla(0, 0%, 100%, .25); + border-radius: 3px; + border-color: transparent; + -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; + transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; } .css-1bjepp-input-input:focus { -box-shadow: none !important; -background-color: white; -color: black; -transition: background-color .2s; --webkit-transition: background-color .2s; -border-radius: 3px; + box-shadow: none !important; + background-color: white; + color: black; + transition: background-color .2s; + -webkit-transition: background-color .2s; + border-radius: 3px; } -.css-14hvfbu-input-wrapper:focus { -border-color:transparent !important; -box-shadow: none !important; + +.css-14hvfbu-input-wrapper:focus { + border-color: transparent !important; + box-shadow: none !important; } + .css-1w5c5dq-input-inputWrapper input:not(:last-child) { height: 100% } + /*Disabled input*/ .css-1bjepp-input-input:disabled { background-color: rgba(0, 0, 0, .5); color: rgb(159, 167, 179); } -.css-1bjepp-input-input:hover {border-color: transparent;} -body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > div:nth-child(2) > form > div > div > div > div.css-1w5c5dq-input-inputWrapper > input {height: 100%;} + +.css-1bjepp-input-input:hover { + border-color: transparent; +} + +body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container.page-body>div:nth-child(2)>form>div>div>div>div.css-1w5c5dq-input-inputWrapper>input { + height: 100%; +} /* SEARCH */ .css-x9mxj5 { -background: var(--main-bg-color); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } -.css-1m6pigl:focus + label { -outline-offset: 2px; -box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; -z-index: 3; -outline: transparent dotted 2px; -transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; + +.css-1m6pigl:focus+label { + outline-offset: 2px; + box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; + z-index: 3; + outline: transparent dotted 2px; + transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; } -.css-1m6pigl:checked + label { + +.css-1m6pigl:checked+label { color: #eee !important; border-color: rgba(255, 255, 255, .1); background: var(--button-color); } -.css-b40tk8:focus + label { -box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; + +.css-b40tk8:focus+label { + box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; } + .css-y0yg3l { -background: var(--main-bg-color); -border-color: transparent; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; + border-color: transparent; } + .css-y0yg3l { -background: rgba(0, 0, 0, .25) !important; -border-color: transparent; + background: rgba(0, 0, 0, .25) !important; + border-color: transparent; } .css-1je3bh6 { -background: transparent; -border-bottom: 1px solid rgba(0, 0, 0, 0); + background: transparent; + border-bottom: 1px solid rgba(0, 0, 0, 0); } /*Folder bars*/ .css-1umfglk { -background: rgba(0, 0, 0, .25); + background: rgba(0, 0, 0, .25); } + .css-1umfglk:hover { -background: rgba(0, 0, 0, .35); + background: rgba(0, 0, 0, .35); } /* Login Error message*/ .css-1ow9mne-input-input { -line-height: 1.5; -height: 38px; -background-color: hsla(0,0%,100%,.25); -border-radius: 3px; -border-color: transparent; --webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; -transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; + line-height: 1.5; + height: 38px; + background-color: hsla(0, 0%, 100%, .25); + border-radius: 3px; + border-color: transparent; + -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; + transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; } + .css-1ow9mne-input-input { -box-shadow: none !important; -background-color: white; -color: black; -transition: background-color .2s; --webkit-transition: background-color .2s; -height: 38px; -border-radius: 3px; + box-shadow: none !important; + background-color: white; + color: black; + transition: background-color .2s; + -webkit-transition: background-color .2s; + height: 38px; + border-radius: 3px; } + .css-13o428a { -margin: 10px 0px 0px; + margin: 10px 0px 0px; } /*Welcome to Grafana*/ -.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);} +.css-15xxblz, +.css-1ld19yb { + background: rgba(0, 0, 0, .25); +} -.css-1as70ku, .css-u5zjuh { -background: rgba(0, 0, 0, .25);} -.css-17abkeq, .css-5ak73y { -color: #fff; +.css-1as70ku, +.css-u5zjuh { + background: rgba(0, 0, 0, .25); +} + +.css-17abkeq, +.css-5ak73y { + color: #fff; } /* Import */ -body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > form > div:nth-child(4) > div:nth-child(2) > div > div.css-1w5c5dq-input-inputWrapper > input {height:100%} +body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container.page-body>form>div:nth-child(4)>div:nth-child(2)>div>div.css-1w5c5dq-input-inputWrapper>input { + height: 100% +} /*PANEL EDIT*/ -.css-cxwxzk-Label-description,.css-n370st { +.css-cxwxzk-Label-description, +.css-n370st { color: #eee; } -.css-1pziiev { + +.css-10pj50r, +.css-15rfc12 { background: rgb(0 0 0 / 50%); } + /*Header*/ .css-1marj6o { -display: flex; --webkit-box-pack: justify; -justify-content: space-between; -padding: 8px; -background: transparent; -border-bottom: 1px solid transparent; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + padding: 8px; + background: transparent; + border-bottom: 1px solid transparent; } + /*Background*/ .css-azp59k { -background: var(--main-bg-color); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + /*Query box*/ .css-hz0utb { -background: rgba(0, 0, 0, .35); -border-right: 1px solid rgba(0, 0, 0, 0); + background: rgba(0, 0, 0, .35); + border-right: 1px solid rgba(0, 0, 0, 0); } -.query-keyword, .css-wvxxxy, .css-fpnw35 { + +.query-keyword, +.css-wvxxxy, +.css-fpnw35 { font-weight: 500; - color: var(--accent-color); + color: rgb(var(--accent-color)); } + .css-lvafs5 { background: rgba(0, 0, 0, .5); } .css-ui3sz4-activeTabStyle { -margin-right: 16px; -position: relative; -display: block; -color: rgb(216, 217, 218); -cursor: default; -list-style: none; -padding: 11px 15px 9px; -border-style: solid; -border-image: initial; -border-width: 0px 1px 1px; -border-radius: 3px 3px 0px 0px; -border-color: transparent !important; -background: rgba(0, 0, 0, .5); -overflow: hidden; + margin-right: 16px; + position: relative; + display: block; + color: rgb(216, 217, 218); + cursor: default; + list-style: none; + padding: 11px 15px 9px; + border-style: solid; + border-image: initial; + border-width: 0px 1px 1px; + border-radius: 3px 3px 0px 0px; + border-color: transparent !important; + background: rgba(0, 0, 0, .5); + overflow: hidden; } + .css-1awj6q7-counter { -background-color: rgba(0, 0, 0, .5); -color: rgb(255, 255, 255); + background-color: rgba(0, 0, 0, .5); + color: rgb(255, 255, 255); } + /*Transform tab*/ .css-y2f54e { -background: rgba(0, 0, 0, .25); + background: rgba(0, 0, 0, .25); } + .css-y2f54e:hover { -background: rgba(0, 0, 0, .35); + background: rgba(0, 0, 0, .35); } + .css-1e8invk::before { -background:rgba(0, 0, 0, .35) !important; + background: rgba(0, 0, 0, .35) !important; } /* Right side menu*/ .css-1xj5tuf { -background: rgba(0, 0, 0, .35); -border-left: 1px solid transparent; + background: rgba(0, 0, 0, .35); + border-left: 1px solid transparent; } + /*Dropdown bottom borders*/ .css-1majipf { -border-bottom: 1px solid rgba(255, 255, 255, .08); + border-bottom: 1px solid rgba(255, 255, 255, .08); } + /*Settings text input*/ .css-1f38lle:focus { box-shadow: none !important; } -.css-1gokw4e input:checked + label, .css-1gokw4e input:checked + label:hover { -background: var(--accent-color); + +.css-1gokw4e input:checked+label, +.css-1gokw4e input:checked+label:hover { + background: rgb(var(--accent-color)); } + .css-1gokw4e label { background: white; } + /*Visualization*/ .css-1lemfi9 { background: rgba(0, 0, 0, .25); border-color: transparent; } -.css-1fsv7gr:hover > div:first-child { - border-color: var(--accent-color); + +.css-1fsv7gr:hover>div:first-child { + border-color: rgb(var(--accent-color)); } -.css-1emhacm-currentVisualizationItem > div:first-child { + +.css-1emhacm-currentVisualizationItem>div:first-child { outline-offset: 2px; - box-shadow: rgb(20, 22, 25) 0px 0px 0px 2px, var(--accent-color) 0px 0px 0px 4px; + box-shadow: rgb(20, 22, 25) 0px 0px 0px 2px, rgb(var(--accent-color)) 0px 0px 0px 4px; } -.css-mgq0xs-currentVisualizationItem > div:first-child { + +.css-mgq0xs-currentVisualizationItem>div:first-child { outline: transparent dotted 2px; outline-offset: 1px; - box-shadow: var(--accent-color) 0px 0px 0px 2px, #607D8B 0px 0px 0px 2px; + box-shadow: rgb(var(--accent-color)) 0px 0px 0px 2px, #607D8B 0px 0px 0px 2px; transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; } + /*Old stat panel unit dropdown */ -body > grafana-app > div > div > react-container > div > div.css-azp59k > div.css-1bd2u9 > div > div.Pane.vertical.Pane2 > div > div > div.css-1xj5tuf > div > div.view > div:nth-child(3) > div:nth-child(1) > div.panel-options-group__body > panel-editor-tab > panel-editor-tab-singlestatoptions > div > div:nth-child(2) > div:nth-child(6) > unit-picker > div > div > div > div > input { -height: 100%; +body>grafana-app>div>div>react-container>div>div.css-azp59k>div.css-1bd2u9>div>div.Pane.vertical.Pane2>div>div>div.css-1xj5tuf>div>div.view>div:nth-child(3)>div:nth-child(1)>div.panel-options-group__body>panel-editor-tab>panel-editor-tab-singlestatoptions>div>div:nth-child(2)>div:nth-child(6)>unit-picker>div>div>div>div>input { + height: 100%; } + /*Buttons*/ .css-m58wdd:hover { color: rgba(255, 255, 255, .94); @@ -885,6 +1227,7 @@ height: 100%; border-image: initial; background: rgba(255, 255, 255, .15) } + .css-m58wdd { color: rgba(255, 255, 255, .94); z-index: 2; @@ -894,49 +1237,73 @@ height: 100%; border-image: initial; background: rgba(255, 255, 255, .08) } + input:checked+.gf-form-switch__slider { -background: var(--accent-color); + background: rgb(var(--accent-color)); } + /* RuPaul Drag Line*/ .css-pii3u7:hover { -border-color: rgba(255, 255, 255, .25); + border-color: rgba(255, 255, 255, .25); } .css-1t13ra6 { -border-color: rgba(255, 255, 255, .09); + border-color: rgba(255, 255, 255, .09); } + .css-1t13ra6:hover { - border-color: rgba(255, 255, 255, .25); + border-color: rgba(255, 255, 255, .25); } /*SETTINGS*/ /*Teams*/ .css-1w9m9al-call-to-action-card { background: rgba(0, 0, 0, .25); - } +} /*DASHBOARD SETINGS*/ -.dashboard-settings,.dashboard-settings__body2 { +.dashboard-settings, +.dashboard-settings__body2 { background: var(--main-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; } + .navbar--edit { background: rgba(0, 0, 0, .25); border-bottom: 1px solid transparent; -webkit-box-shadow: 0 0 10px transparent; box-shadow: 0 0 10px transparent; } + .grafana-info-box { -background-color: rgba(0, 0, 0, .5); -border-top: 3px solid var(--accent-color); + background-color: rgba(0, 0, 0, .5); + border-top: 3px solid rgb(var(--accent-color)); } + /* Variables*/ .filter-table--hover tbody tr:hover { - background: hsla(0,0%,100%,.15); + background: hsla(0, 0%, 100%, .15); } + .filter-table tbody tr:nth-child(odd):hover { -background: hsla(0,0%,100%,.15) !important; + background: hsla(0, 0%, 100%, .15) !important; } + /*Placeholder text*/ -::placeholder {color: #fff !important;} -:-ms-input-placeholder {color: #fff !important;} -::-webkit-input-placeholder {color: #fff !important;} \ No newline at end of file +::placeholder { + color: #fff !important; +} + +:-ms-input-placeholder { + color: #fff !important; +} + +::-webkit-input-placeholder { + color: #fff !important; +} \ No newline at end of file diff --git a/CSS/themes/grafana/hotline.css b/CSS/themes/grafana/hotline.css index 81f6d881..4b5cc4c5 100644 --- a/CSS/themes/grafana/hotline.css +++ b/CSS/themes/grafana/hotline.css @@ -13,11 +13,4 @@ /* GRAFANA HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/grafana/organizr-dark.css b/CSS/themes/grafana/organizr-dark.css index 47257730..eeb6c6b3 100644 --- a/CSS/themes/grafana/organizr-dark.css +++ b/CSS/themes/grafana/organizr-dark.css @@ -13,11 +13,4 @@ /* GRAFANA ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/grafana/plex.css b/CSS/themes/grafana/plex.css index 78ab283f..510b7e2f 100644 --- a/CSS/themes/grafana/plex.css +++ b/CSS/themes/grafana/plex.css @@ -13,11 +13,4 @@ /* LIDARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/grafana/space-gray.css b/CSS/themes/grafana/space-gray.css index 305abe8b..6dfb2c5b 100644 --- a/CSS/themes/grafana/space-gray.css +++ b/CSS/themes/grafana/space-gray.css @@ -13,11 +13,4 @@ /* GRAFANA SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/grafana/grafana-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/aquamarine.css b/CSS/themes/guacamole/aquamarine.css index 1caa5fa9..4469a8be 100644 --- a/CSS/themes/guacamole/aquamarine.css +++ b/CSS/themes/guacamole/aquamarine.css @@ -13,10 +13,4 @@ /* GUACAMOLE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: rgba(0,0,0,.25); - --button-color-hover: rgba(0,0,0,.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/dark.css b/CSS/themes/guacamole/dark.css index 63487461..25347ba4 100644 --- a/CSS/themes/guacamole/dark.css +++ b/CSS/themes/guacamole/dark.css @@ -13,10 +13,4 @@ /* GUACAMOLE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/dracula.css b/CSS/themes/guacamole/dracula.css new file mode 100644 index 00000000..423d840e --- /dev/null +++ b/CSS/themes/guacamole/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* GUACAMOLE DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/guacamole-base.css b/CSS/themes/guacamole/guacamole-base.css index 47ed68d5..4e96f65b 100644 --- a/CSS/themes/guacamole/guacamole-base.css +++ b/CSS/themes/guacamole/guacamole-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -10,196 +9,335 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ - body { + + +* { + outline: none !important; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-hover); +} + +body { background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color:#FFFFFF !important; - } - div.displayMiddle { - background: var(--modal-bg-color); - } - /* Scrollbar */ - @media only screen and (min-width: 768px) { - html { - height: 100%; - width: 100%; - overflow: hidden; - } - body { - overflow-y: auto; - height: 100%; - background: var(--main-bg-color) - } - } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } - /* LOGIN MENU */ - div.login-ui { - background: inherit; - } - .login-ui div.login-dialog { - background: rgba(0, 0, 0, .25); - border: none; - } - input[type="submit"], button, a.button { - background-color: var(--button-color); - border: none; - outline: none; - } - input[type="submit"]:hover, button:hover, a.button:hover { - background-color: var(--button-color-hover); - border: none; - } - .login-ui .login-fields .labeled-field input:focus { - background: #1f1f1f !important; - outline: none; - } - .login-ui .login-fields .labeled-field.empty input { - background: rgba(0,0,0,0.25) !important; - outline: none; - } - .login-ui .login-fields .labeled-field.empty input:focus { - background: #1f1f1f !important; - outline: none; - } - .login-ui .login-dialog .login-fields input { - background-color: #1f1f1f !important; - } - div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { - color: white !important; - background: rgba(0, 0, 0, 0.25) !important; - } - input[type=checkbox], input[type=number], input[type=text], input[type=email], input[type=radio], label, textarea { - color: white !important; - background: transparent; - } - - /* HOME MENU */ - .header h2 { - color: white; - background-color: rgba(0, 0, 0, 0.25); - } - - .connection .icon.vnc, .connection .icon.rdp { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-monitor.png); - } - .connection .icon.ssh, .connection .icon.telnet { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-text.png); - } - - .user-menu .menu-dropdown .menu-title { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-user.png); - background-color: transparent; - } - .user-menu .menu-dropdown .menu-contents li a[href="#/"] { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-home-dark.png); - } - .user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-config-dark.png); - } - .user-menu .menu-dropdown .menu-contents li a.logout { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-logout-dark.png); - } - .icon.user { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-user.png); - } - .pager .icon.first-page { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-first-page.png); - } - .pager .icon.prev-page { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-prev-page.png); - } - .pager .icon.next-page { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-next-page.png); - } - .pager .icon.last-page { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-last-page.png); - } - .loading::before{ - background-image:url('https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/cog.png'); - } - table.sorted th.sort-primary.sort-descending:after { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/up.png); - } - - .menu-dropdown .menu-indicator { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); - } - .menu-dropdown .menu-indicator:hover { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); - color: #f9be03; - } - table.sorted th.sort-primary:after { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); - } - .menu-dropdown.open, .menu-dropdown.open:hover { - background: rgba(0, 0, 0, 0.25); - } - .menu-dropdown { - border-left: none; - background: rgba(0, 0, 0, 0.25); - } - .menu-dropdown .menu-contents li a { - display: block; - cursor: pointer; - color: white; - text-decoration: none; - padding: .75em; - background: #1f1f1f; - } - .menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current:hover { - background-color: rgba(0,0,0,.25); - opacity: .9; - } - .menu-dropdown .menu-contents li a:hover { - background-color: rgba(0,0,0,.25); - } - .menu-dropdown:hover { - background: rgba(0, 0, 0, 0.25); - } - - .menu-dropdown .menu-contents { - background: #1f1f1f; - - } - .header .filter input { - -moz-border-radius: 0; - -webkit-border-radius: 0; - -khtml-border-radius: 0; - border-radius: 0; - border: 0; - border-left: 1px solid rgba(0,0,0,0.125); - background-color: transparent; - color: white; - } - .header .filter { - background-color: rgba(0, 0, 0, 0.25); - } - .filter .search-string { + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; +} + +div.displayMiddle { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +input::-webkit-input-placeholder { + color: var(--text) !important; +} + +input:focus::-webkit-input-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text) !important; +} + +input:focus:-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text) !important; +} + +input:focus::-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text) !important; +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover) !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* LOGIN MENU */ +div.login-ui { + background: inherit; +} + +.login-ui div.login-dialog { + background: rgba(0, 0, 0, .25); + border: none; +} + +input[type="submit"], +button, +a.button { + background-color: var(--button-color); + border: none; + outline: none; +} + +input[type="submit"]:hover, +button:hover, +a.button:hover { + background-color: var(--button-color-hover); + border: none; + cursor: pointer; +} + +.login-ui .login-fields .labeled-field input:focus { + background: rgba(0, 0, 0, 0.45) !important; + outline: none; +} + +.login-ui .login-fields .labeled-field.empty input { + background: rgba(0, 0, 0, 0.25) !important; + outline: none; +} + +.login-ui .login-fields .labeled-field.empty input:focus { + background: rgba(0, 0, 0, 0.45) !important; + outline: none; +} + +.login-ui .login-dialog .login-fields input { + background-color: rgba(0, 0, 0, 0.45) !important; +} + +div.location, +input[type=text], +input[type=email], +input[type=number], +input[type=password], +textarea { + color: white !important; + background: rgba(0, 0, 0, 0.25) !important; +} + +input[type=checkbox], +input[type=number], +input[type=text], +input[type=email], +input[type=radio], +textarea { + color: var(--text-hover) !important; + background: transparent; +} + +/* HOME MENU */ +.header h2 { + color: var(--text-hover); + background-color: rgba(0, 0, 0, 0.25); +} + +.connection .icon.vnc, +.connection .icon.rdp { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-monitor.png); +} + +.connection .icon.ssh, +.connection .icon.telnet { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-text.png); +} + +.user-menu .menu-dropdown .menu-title { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-user.png); + background-color: transparent; +} + +.user-menu .menu-dropdown .menu-contents li a[href="#/"] { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-home-dark.png); +} + +.user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"], +.user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"], +.user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"], +.user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-config-dark.png); +} + +.user-menu .menu-dropdown .menu-contents li a.logout { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-logout-dark.png); +} + +.icon.user { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-user.png); +} + +.pager .icon.first-page { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-first-page.png); +} + +.pager .icon.prev-page { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-prev-page.png); +} + +.pager .icon.next-page { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-next-page.png); +} + +.pager .icon.last-page { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/guac-last-page.png); +} + +.loading::before { + background-image: url('https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/cog.png'); +} + +table.sorted th.sort-primary.sort-descending:after { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/up.png); +} + +.menu-dropdown .menu-indicator { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); +} + +.menu-dropdown .menu-indicator:hover { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); + color: #f9be03; +} + +table.sorted th.sort-primary:after { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/down.png); +} + +thead { + color: var(--text-hover); +} + +table.sorted th, +table.sorted td { + border: 1px solid rgb(255 255 255 / 15%); +} + +.settings table.session-list tr.session:hover { + background: rgba(255, 255, 255, 0.15); +} + +.menu-dropdown.open, +.menu-dropdown.open:hover { + background: rgba(0, 0, 0, 0.25); +} + +.menu-dropdown { + border-left: none; + background: rgba(0, 0, 0, 0.25); +} + +.menu-dropdown .menu-contents li a { + display: block; + cursor: pointer; + color: var(--text); + text-decoration: none; + padding: .75em; +} + +.menu-dropdown .menu-contents li a.current, +.menu-dropdown .menu-contents li a.current:hover { + background-color: rgba(0, 0, 0, .25); + color: var(--text-hover) +} + +.menu-dropdown .menu-contents li a:hover { + background-color: rgba(0, 0, 0, .25); + color: var(--text-hover); +} + +.menu-dropdown:hover { + background: rgba(0, 0, 0, 0.25); + color: var(--text-hover); +} + +.menu-dropdown .menu-contents { + background: var(--drop-down-menu-bg); + +} + +.header .filter input { + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; + border-radius: 0; + border: 0; + border-left: 1px solid rgba(0, 0, 0, 0.125); + background-color: transparent; + color: var(--text-hover); +} + +.header .filter { + background-color: rgba(0, 0, 0, 0.25); +} + +.filter .search-string { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/magnifier.png) !important; background-repeat: no-repeat !important; background-size: 1.75em !important; @@ -210,140 +348,295 @@ max-width: none; background-color: rgba(0, 0, 0, 0.25); border: 0; - } - div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { - color: white; - } - - - .user a:visited, .connection a:visited, .connection-group a:visited { - text-decoration: none; - color: white; - } - .recent-connections .connection:hover { - background: hsla(0, 0%, 100%, 0.08); - } - .list-item:not(.selected) .caption:hover { - background: hsla(0, 0%, 100%, 0.07); - } - .list-item .name { - color: white; - } - - /* SIDE MENU */ - .menu, .menu .header { +} + +div.location, +input[type=text], +input[type=email], +input[type=number], +input[type=password], +textarea { + color: var(--text-hover); +} + + +.user a:visited, +.connection a:visited, +.connection-group a:visited { + text-decoration: none; + color: var(--link-color-hover); +} + +.recent-connections .connection:hover { + background: hsla(0, 0%, 100%, 0.08); + color: var(--link-color-hover); +} + +.list-item:not(.selected) .caption:hover { + background: hsla(0, 0%, 100%, 0.07); + color: var(--link-color-hover); +} + +.list-item .name { + color: var(--link-color); +} + +.list-item:not(.selected) .caption:hover .name { + color: var(--link-color-hover); +} + +/* SIDE MENU */ +.menu, +.menu .header { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; box-shadow: none; } -.menu-content, .menu-content .header, .menu-body { - background: var(--modal-bg-color) !important; -} - .clipboard, .clipboard-service-target { - background: rgba(0, 0, 0, 0.25); - color: white; - } - /* NOTIFICATION BOX */ - .notification.error { - background: var(--modal-bg-color); - color: white; - } - .notification { - background: var(--modal-bg-color); - color: white; - } - - /* SETTINGS */ - .page-tabs .page-list li a[href]:visited { - color: white; - } - .page-tabs .page-list li a[href] { - color: white; - } - .page-tabs .page-list li a[href]:hover { - background-color: rgba(0, 0, 0, 0.25); - } - .user a:visited, .connection a:visited, .connection-group a:visited { - text-decoration: none; - color: white; - } - .user a:hover, .user-group a:hover, .connection a:hover, .connection-group a:hover { - color: #ffffff !important; -} - .user a, .connection a, .connection-group a { - text-decoration: none; - color: white; - } - div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { - border: 0; - background: rgba(0, 0, 0, .25); - } - .location-chooser .dropdown { - background: #666; - } - /* USER SETTINGS */ - .page-tabs .page-list li a[href], .section-tabs li a { - color: white; - } - .page-tabs .page-list li a[href]:hover, .section-tabs li a:hover { - background-color: hsla(0, 0%, 100%, 0.07); - } - .manage-user .page-tabs .page-list li.linked a[href]:before { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/checkmark.png); - } - .manage-user .page-tabs .page-list li.read-only a[href]:before { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/lock.png); - } - .manage-user .notice.read-only { - background: hsla(0, 0%, 100%, 0.07); - } - /* DUA 2FA PAGE */ - .duo-signature-response-field { - background: var(--modal-bg-color) !important; - } - .base-wrapper { - border: 1px solid transparent !important; - background: var(--modal-bg-color) !important; - } - .base-body { - background-color: #333 !important; - } - h1.spacious-frame-view { - color: white !important; - } - @media screen and (-webkit-max-device-pixel-ratio: 1.25), screen and (max-resolution: 120dpi) { - h1, .h1 { - color: white !important; - } - } - .white-wrapper { - background-color: #333 !important; - color: white !important; - } - form:not(.inline) fieldset { - background-color: #333 !important; - } - label span { - color: white !important; - } - input[type=radio] { - border: 1px solid #fff !important; - } - /* Connection */ - #connection-warning { - background: var(--modal-bg-color); - color: #FFF; +.menu-content, +.menu-content .header, +.menu-body { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + +.clipboard, +.clipboard-service-target { + background: rgba(0, 0, 0, 0.25); + color: white; +} + +/* NOTIFICATION BOX */ +.notification.error { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: white; +} + +.notification { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: white; +} + +/* SETTINGS */ +.page-tabs .page-list li a[href]:visited { + color: white; +} + +.page-tabs .page-list li a[href] { + color: white; +} + +.page-tabs .page-list li a[href]:hover { + background-color: rgba(0, 0, 0, 0.25); +} + +.user a:visited, +.connection a:visited, +.connection-group a:visited { + text-decoration: none; + color: var(--link-color); +} + +.user a:hover, +.user-group a:hover, +.connection a:hover, +.connection-group a:hover, +a.ng-binding:hover:not(.add-user):not(.button) { + color: var(--link-color-hover) !important; +} + +.user a, +.connection a, +.connection-group a, +a.ng-binding:not(.add-user):not(.button) { + text-decoration: none; + color: var(--link-color); +} + +div.location, +input[type=text], +input[type=email], +input[type=number], +input[type=password], +textarea { + border: 0; + background: rgba(0, 0, 0, .25); +} + +.location-chooser .dropdown { + background: #666; +} + +/* USER SETTINGS */ +.page-tabs .page-list li a[href], +.section-tabs li a { + color: var(--text) !important; +} + +.page-tabs .page-list li a[href].current, +.page-tabs .page-list li a[href].current:hover, +.section-tabs li a.current, +.section-tabs li a.current:hover { + background: rgba(0, 0, 0, 0.25); + cursor: default; + color: rgb(var(--accent-color)) !important; +} + +.page-tabs .page-list li a[href]:hover, +.section-tabs li a:hover { + background-color: hsla(0, 0%, 100%, 0.07); + color: var(--text-hover) !important; +} + +.manage-user .page-tabs .page-list li.linked a[href]:before { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/checkmark.png); +} + +.manage-user .page-tabs .page-list li.read-only a[href]:before { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/guacamole/lock.png); +} + +.manage-user .notice.read-only { + background: hsla(0, 0%, 100%, 0.07); +} + +/* DUA 2FA PAGE */ +.duo-signature-response-field { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.base-wrapper { + border: 1px solid transparent !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.base-body { + background-color: #333 !important; +} + +h1.spacious-frame-view { + color: var(--text-hover) !important; +} + +@media screen and (-webkit-max-device-pixel-ratio: 1.25), +screen and (max-resolution: 120dpi) { + + h1, + .h1 { + color: var(--text-hover) !important; + } +} + +.white-wrapper { + background-color: #333 !important; + color: var(--text) !important; +} + +form:not(.inline) fieldset { + background-color: #333 !important; +} + +label span { + color: white !important; +} + +input[type=radio] { + border: 1px solid var(--text-hover) !important; +} + +/* Connection */ + +#connection-warning { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + /* File Transfer */ #file-transfer-dialog .transfer-manager { - background: var(--modal-bg-color) ; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + .transfer.error { - background: rgba(244, 67, 54, 0.5) ; + background: rgba(244, 67, 54, 0.5); } + .transfer-manager .header h2 { - background-color: transparent ; + background-color: transparent; } + .transfer .in-progress .progress { - background-color: var(--modal-bg-color) ; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.related-objects .abbreviated-related-objects ul li { + display: inline-block; + margin: .25em; + padding: .25em; + border: 1px solid rgb(var(--accent-color)); + background: rgb(var(--accent-color)); +} + +.related-objects .abbreviated-related-objects ul li label span { + color: var(--label-text-color) !important; } \ No newline at end of file diff --git a/CSS/themes/guacamole/hotline.css b/CSS/themes/guacamole/hotline.css index 4dcc0702..fdd1e907 100644 --- a/CSS/themes/guacamole/hotline.css +++ b/CSS/themes/guacamole/hotline.css @@ -13,10 +13,4 @@ /* GUACAMOLE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: rgba(0,0,0,.25); - --button-color-hover: rgba(0,0,0,.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/organizr-dark.css b/CSS/themes/guacamole/organizr-dark.css index 5cb4c497..d5c8de1c 100644 --- a/CSS/themes/guacamole/organizr-dark.css +++ b/CSS/themes/guacamole/organizr-dark.css @@ -13,10 +13,4 @@ /* GUACAMOLE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/plex.css b/CSS/themes/guacamole/plex.css index af3a544f..2ea6f04a 100644 --- a/CSS/themes/guacamole/plex.css +++ b/CSS/themes/guacamole/plex.css @@ -13,10 +13,4 @@ /* GUACAMOLE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/guacamole/space-gray.css b/CSS/themes/guacamole/space-gray.css index ec4233e4..ef9faf33 100644 --- a/CSS/themes/guacamole/space-gray.css +++ b/CSS/themes/guacamole/space-gray.css @@ -13,9 +13,4 @@ /* GUACAMOLE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/guacamole/guacamole-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: rgba(255, 255, 255, 0.15); - --button-color-hover: rgba(255, 255, 255, 0.25); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/html5speedtest/aquamarine.css b/CSS/themes/html5speedtest/aquamarine.css index dac75740..d5e70b5c 100644 --- a/CSS/themes/html5speedtest/aquamarine.css +++ b/CSS/themes/html5speedtest/aquamarine.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST AQUAMARINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --start-button-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed; diff --git a/CSS/themes/html5speedtest/dark.css b/CSS/themes/html5speedtest/dark.css index 6c2ff1f7..e6faa7e3 100644 --- a/CSS/themes/html5speedtest/dark.css +++ b/CSS/themes/html5speedtest/dark.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; diff --git a/CSS/themes/html5speedtest/hotline.css b/CSS/themes/html5speedtest/hotline.css index 47b22d80..aebdfe76 100644 --- a/CSS/themes/html5speedtest/hotline.css +++ b/CSS/themes/html5speedtest/hotline.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST HOTLINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --start-button-color: radial-gradient(ellipse at center, #F44336 0%, #3F51B5 100%) center center/cover no-repeat fixed; diff --git a/CSS/themes/html5speedtest/organizr-dark.css b/CSS/themes/html5speedtest/organizr-dark.css index 660b531c..152a1f3c 100644 --- a/CSS/themes/html5speedtest/organizr-dark.css +++ b/CSS/themes/html5speedtest/organizr-dark.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST ORGANIZR-DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: #1f1f1f; --modal-bg-color: #1b1b1b; diff --git a/CSS/themes/html5speedtest/plex.css b/CSS/themes/html5speedtest/plex.css index d3436162..cc70084c 100644 --- a/CSS/themes/html5speedtest/plex.css +++ b/CSS/themes/html5speedtest/plex.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST PLEX THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; --start-button-color: #cc7b19; diff --git a/CSS/themes/html5speedtest/space-gray.css b/CSS/themes/html5speedtest/space-gray.css index b316ce44..ba66f715 100644 --- a/CSS/themes/html5speedtest/space-gray.css +++ b/CSS/themes/html5speedtest/space-gray.css @@ -12,7 +12,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* HTML5SPEEDTEST SPACE GRAY THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/html5speedtest/html5speedtest-base.css); :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --start-button-color: #607D8B; diff --git a/CSS/themes/jackett/aquamarine.css b/CSS/themes/jackett/aquamarine.css index cf098fa6..bc1961ec 100644 --- a/CSS/themes/jackett/aquamarine.css +++ b/CSS/themes/jackett/aquamarine.css @@ -13,10 +13,4 @@ /* JACKETT AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: rgba(0,0,0,.25); - --button-color-hover: rgba(255,255,255,.08); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/jackett/dark.css b/CSS/themes/jackett/dark.css index 9a178494..42bf163c 100644 --- a/CSS/themes/jackett/dark.css +++ b/CSS/themes/jackett/dark.css @@ -13,10 +13,4 @@ /* JACKETT DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/jackett/dracula.css b/CSS/themes/jackett/dracula.css new file mode 100644 index 00000000..351404f7 --- /dev/null +++ b/CSS/themes/jackett/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* JACKETT AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/jackett/hotline.css b/CSS/themes/jackett/hotline.css index 761da674..55d349eb 100644 --- a/CSS/themes/jackett/hotline.css +++ b/CSS/themes/jackett/hotline.css @@ -13,10 +13,4 @@ /* JACKETT HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: rgba(0,0,0,.25); - --button-color-hover: rgba(255,255,255,.08); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/jackett/jackett-base.css b/CSS/themes/jackett/jackett-base.css index a10e3b14..8263c37a 100644 --- a/CSS/themes/jackett/jackett-base.css +++ b/CSS/themes/jackett/jackett-base.css @@ -10,13 +10,34 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ * { - outline: none; + outline: none !important; } body { background-repeat: repeat; background: var(--main-bg-color) !important; - color: #FFF; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +h1, +h2, +h3, +h4, +h5, +h6, +#header-title { + color: var(--text-hover); +} + +hr { + border-top-color: rgb(var(--accent-color), .25); } /* Scrollbar */ @@ -30,7 +51,14 @@ body { body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -73,15 +101,42 @@ body { .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { color: #fff !important; + background-color: rgba(255, 255, 255, 0.15); } + +.dataTables_wrapper .dataTables_paginate .paginate_button.current, +.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, +.dataTables_wrapper .dataTables_paginate .paginate_button.current:active, +.dataTables_wrapper .dataTables_paginate .paginate_button:active { + color: var(--button-text-hover) !important; + border: 1px solid var(--button-color-hover) !important; + background-color: var(--button-color-hover) !important; + background: var(--button-color-hover) !important; + box-shadow: inset 0 0 3px var(--button-color-hover); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button { + color: var(--button-text) !important; + border: 1px solid transparent; + background: rgba(255, 255, 255, 0.15); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button:hover { + color: var(--button-text-hover) !important; + border: 1px solid var(--button-color-hover) !important; + background-color: var(--button-color-hover) !important; + background: var(--button-color-hover) !important; +} + + a { - color: #ffffff; + color: var(--link-color); } a:focus, a:hover { - color: #f1f1f1; + color: var(--link-color-hover); } .dataTables_wrapper .dataTables_filter input { @@ -109,13 +164,13 @@ table.dataTable.cell-border tbody td { button, input, -select, textarea { background: rgba(0, 0, 0, 0.25); border: none; outline: none; } + #page { background-color: rgba(0, 0, 0, 0.25); } @@ -145,12 +200,37 @@ table.dataTable thead td { } .form-control { - color: #fff; + color: var(--text-hover); background-color: rgba(0, 0, 0, 0.25); border: 1px solid #ccc0; } +select { + background: rgba(0, 0, 0, 0.25); + color: var(--text) !important; + border: 1px solid rgba(0, 0, 0, 0) !important; + -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + height: 26px; + padding: 0 8px; + border-radius: 4px; +} + +select:focus { + background: #1f1f1f !important; + color: var(--text) !important; + border: 1px solid #1f1f1f !important; + -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); +} + +.form-control:focus:not([checked="checked"]) { + border-color: rgb(var(--accent-color)); + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(var(--accent-color), .6); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(var(--accent-color), .6); +} + .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { @@ -160,39 +240,87 @@ fieldset[disabled] .form-control { .dataTables_length select, .dataTables_filter input, .dataTable.compact tfoot td select { - color: black; + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(204, 204, 204, 0); } #footer { - color: #ffffff; + color: rgb(var(--accent-color)); +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); } .modal-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); } .dropdown-menu { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .dropdown-menu>li>a { - color: #fff; + color: var(--text); } .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { - color: #ffffff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.08); } +.dropdown-menu>.active>a, +.dropdown-menu>.active>a:focus, +.dropdown-menu>.active>a:hover { + color: var(--text-hover); + text-decoration: none; + background-color: rgba(255, 255, 255, 0.15); + outline: 0; +} + .close { color: #fff; } .btn-default { - color: #fff; + color: var(--button-text); background-color: var(--button-color); - border-color: #ccc0; + border-color: var(--button-color); } .btn-default.active, @@ -201,9 +329,76 @@ fieldset[disabled] .form-control { .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); - border-color: #00000000; + border-color: var(--button-color-hover); +} + +.btn-primary { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary.active, +.btn-primary.focus, +.btn-primary:active, +.btn-primary:focus, +.btn-primary:hover, +.open>.dropdown-toggle.btn-primary { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-primary.active, +.btn-primary:active, +.open>.dropdown-toggle.btn-primary { + background-image: none +} + +.btn-primary.disabled, +.btn-primary.disabled.active, +.btn-primary.disabled.focus, +.btn-primary.disabled:active, +.btn-primary.disabled:focus, +.btn-primary.disabled:hover, +.btn-primary[disabled], +.btn-primary[disabled].active, +.btn-primary[disabled].focus, +.btn-primary[disabled]:active, +.btn-primary[disabled]:focus, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary, +fieldset[disabled] .btn-primary.active, +fieldset[disabled] .btn-primary.focus, +fieldset[disabled] .btn-primary:active, +fieldset[disabled] .btn-primary:focus, +fieldset[disabled] .btn-primary:hover { + background-color: hsla(0, 0%, 100%, 0.35); + border-color: hsla(0, 0%, 100%, 0.35); +} + +.btn-primary .badge { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); +} + +#page>form>div:nth-child(2)>input[type=submit] { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +#page>form>div:nth-child(2)>input[type=submit]:hover, +#page>form>div:nth-child(2)>input[type=submit]:focus { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .input-group-addon { @@ -216,5 +411,31 @@ fieldset[disabled] .form-control { .alert-info { color: #ffffff; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: transparent; } + +pre { + color: var(--text); +} + +.jackettlogWarn, +.jackettlogWarn pre { + background-color: #FFFF8E !important; + color: black !important; +} + +.indexer-caps { + padding: 0 15px 15px 15px; + border-top: 1px solid rgb(var(--accent-color)); +} + +#logo { + filter: invert(1); +} \ No newline at end of file diff --git a/CSS/themes/jackett/organizr-dark.css b/CSS/themes/jackett/organizr-dark.css index b6aea8d2..21172f30 100644 --- a/CSS/themes/jackett/organizr-dark.css +++ b/CSS/themes/jackett/organizr-dark.css @@ -13,10 +13,4 @@ /* JACKETT ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/jackett/plex.css b/CSS/themes/jackett/plex.css index 1d8052f9..4318a478 100644 --- a/CSS/themes/jackett/plex.css +++ b/CSS/themes/jackett/plex.css @@ -13,10 +13,4 @@ /* JACKETT PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/jackett/space-gray.css b/CSS/themes/jackett/space-gray.css index 226d4ef2..37767eac 100644 --- a/CSS/themes/jackett/space-gray.css +++ b/CSS/themes/jackett/space-gray.css @@ -13,9 +13,4 @@ /* JACKETT SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jackett/jackett-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/jellyfin/aquamarine.css b/CSS/themes/jellyfin/aquamarine.css index 13ef3099..ed38d5eb 100644 --- a/CSS/themes/jellyfin/aquamarine.css +++ b/CSS/themes/jellyfin/aquamarine.css @@ -13,50 +13,4 @@ /* JELLYFIN AQUAMARINE THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); -:root { - --theme-primary-color: #009688; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #009688; - --theme-primary-color-lightened: rgba(0, 150, 135, 0.2); - --theme-icon-focus-background: rgba(0, 150, 135, 0.2); - - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/dark.css b/CSS/themes/jellyfin/dark.css index dae67111..c3fa47bc 100644 --- a/CSS/themes/jellyfin/dark.css +++ b/CSS/themes/jellyfin/dark.css @@ -13,51 +13,4 @@ /* JELLYFIN DARK THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); - -:root { - --theme-primary-color: #646464; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #646464; - --theme-primary-color-lightened: rgba(100, 100, 100, 0.8); - --theme-icon-focus-background: rgba(100, 100, 100, 0.2); - - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/dracula.css b/CSS/themes/jellyfin/dracula.css new file mode 100644 index 00000000..232816b1 --- /dev/null +++ b/CSS/themes/jellyfin/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* JELLYFIN AQUAMARINE THEME */ +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/hotline.css b/CSS/themes/jellyfin/hotline.css index 453b1686..3df10d70 100644 --- a/CSS/themes/jellyfin/hotline.css +++ b/CSS/themes/jellyfin/hotline.css @@ -13,50 +13,4 @@ /* JELLYFIN HOTLINE THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); -:root { - --theme-primary-color: #F44336; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #F44336; - --theme-primary-color-lightened: rgba(244, 67, 54, 0.2); - --theme-icon-focus-background: rgba(244, 67, 54, 0.2); - - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/jellyfin-base.css b/CSS/themes/jellyfin/jellyfin-base.css index 4ac0251c..a783cb1c 100644 --- a/CSS/themes/jellyfin/jellyfin-base.css +++ b/CSS/themes/jellyfin/jellyfin-base.css @@ -1,10 +1,83 @@ +:root { + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); + + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20, 20, 20, 0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: var(--button-color); + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29, 29, 31, 0.66); + + --header-background: var(--theme-background); + --theme-body-secondary-text-color: rgba(255, 255, 255, .6); + --line-background: rgba(255, 255, 255, .08); + --line-size: .08em; + --scrollbar-thumb-background: rgba(255, 255, 255, .3); +} + +@media (pointer: fine) { + :not(.layout-tv):root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20, 20, 20, 0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29, 29, 31, 0.66); + } +} + +.layout-tv:root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20, 20, 20, 0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29, 29, 31, 0.66); +} + +/*TP CUSTOM */ +h1, +h2, +h3, +h4, +h5, +h6, +.inputLabel { + color: var(--text-hover); +} + +a:not(.emby-button), +.cardText.cardTextCentered.cardText-first>button, +.emby-linkbutton>a { + color: var(--link-color) !important; +} + +a:hover:not(.emby-button), +.cardText.cardTextCentered.cardText-first>button:hover, +.emby-linkbutton>a:hover { + color: var(--link-color-hover) !important; +} + +/*TP END*/ + html { color: var(--theme-text-color); scrollbar-color: var(--scrollbar-thumb-background) transparent } .emby-collapsible-button { - border-color: var(--line-background)!important + border-color: var(--line-background) !important } .skinHeader-withBackground.skinHeader-withfulldrawer { @@ -12,16 +85,53 @@ html { } .skinHeader-withBackground { - background: var(--header-background) + background: var(--header-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.appfooter,.formDialogFooter:not(.formDialogFooter-clear),.formDialogHeader:not(.formDialogHeader-clear) { - background: var(--footer-background) +.appfooter, +.formDialogFooter:not(.formDialogFooter-clear) { + background: var(--footer-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.formDialogHeader:not(.formDialogHeader-clear) { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dialog { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { .skinHeader-withBackground { - background:var(--header-blur-background); + background: var(--header-blur-background); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em) } @@ -34,62 +144,76 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none!important; - backdrop-filter: none!important; - background-color: rgba(0,0,0,.3); - background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0))); - background: -webkit-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - background: -o-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); - -webkit-box-shadow: none!important; - box-shadow: none!important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + background-color: rgba(0, 0, 0, .3); + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); + background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + -webkit-box-shadow: none !important; + box-shadow: none !important; border-bottom: 0; - color: rgba(255,255,255,.87) + color: rgba(255, 255, 255, .87) } -.pageTitleWithDefaultLogo { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/emby/logowhite.png) -} -.backgroundContainer,.dialog,html { - background: var(--theme-background) +.backgroundContainer:not(.backgroundContainer.withBackdrop), +html { + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .backgroundContainer.withBackdrop { - background-color: rgba(0,0,0,.83) + background-color: rgba(0, 0, 0, .83) } @media not all and (min-width: 50em) { .itemBackgroundContainer.withBackdrop { - background :var(--theme-background) + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } -.paper-icon-button-light-tv:focus,.paper-icon-button-light:active { - color: var(--theme-primary-color); +.paper-icon-button-light-tv:focus, +.paper-icon-button-light:active { + color: rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } @media(hover: hover) and (pointer:fine) { .paper-icon-button-light:focus { - color:var(--theme-primary-color); + color: rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } } -.detailButton-icon,.fab,.raised { +.fab, +.raised { background: var(--button-background); color: var(--theme-text-color) } .detailButton-icon { background: none !important; - border-color: rgba(255,255,255,.3) + border-color: rgba(255, 255, 255, .3) } .emby-select-withcolor { color: inherit; - background: var(--button-background); + background: rgba(0, 0, 0, 0.25); border: var(--line-size) solid transparent } @@ -98,39 +222,52 @@ html { color: var(--theme-text-color) } +.dialog-blur, +.toast { + background: var(--button-background) !important; + color: var(--theme-text-color) !important; +} + @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { - .detailButton-icon,.emby-select-withcolor.detailTrackSelect,.fab,.raised:not(.nobackdropfilter) { - background:rgba(85,85,85,.3); + + .detailButton-icon:not(.playstatebutton-icon-unplayed), + .emby-select-withcolor.detailTrackSelect, + .fab, + .raised:not(.nobackdropfilter) { + background: rgba(85, 85, 85, .3); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em) } - .dialog-blur,.toast { + .dialog-blur, + .toast { color: #fff; - background: rgba(56,56,56,.76); + background: rgba(56, 56, 56, .76); -webkit-backdrop-filter: blur(2.5em) saturate(1.8); backdrop-filter: blur(2.5em) saturate(1.8); - -webkit-box-shadow: none!important; - box-shadow: none!important + -webkit-box-shadow: none !important; + box-shadow: none !important } .toast-large { - color: rgba(255,255,255,.87) + color: rgba(255, 255, 255, .87) } } -.fab:focus,.raised:focus { - background: #333 +.fab:focus, +.raised:focus { + background: var(--button-color-hover); + color: var(--button-text-hover); } .button-submit:not(.emby-button-tv) { - background: var(--theme-primary-color); - color: #fff + background: var(--button-color); + color: var(--button-text) } .button-submit:not(.emby-button-tv):focus { - background: var(--theme-primary-color-lightened); - color: #fff + background: var(--button-color-hover); + color: var(--button-text-hover) } .emby-select-withcolor>option { @@ -139,12 +276,12 @@ html { } .emby-select-withcolor:focus { - border-color: var(--theme-primary-color)!important + border-color: rgb(var(--theme-primary-color)) !important } .emby-select-tv-withcolor:focus { - background-color: var(--theme-primary-color)!important; - color: #fff!important + background-color: rgb(var(--theme-primary-color)) !important; + color: var(--label-text-color) !important } .checkboxLabel { @@ -155,19 +292,26 @@ html { background-color: var(--theme-icon-focus-background) } -.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { - color: var(--theme-accent-text-color) +.inputLabelFocused, +.selectLabelFocused, +.textareaLabelFocused { + color: rgb(var(--accent-color)) } .button-link { - color: var(--theme-accent-text-color) + color: var(--link-color) !important; +} + +.button-link:hover { + color: var(--link-color-hover) !important; } .button-flat-accent { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } -.paperList,.visualCardBox { +.paperList, +.visualCardBox { background-color: var(--card-background) } @@ -175,10 +319,16 @@ html { border: var(--line-size) solid var(--line-background) } -.cardText-secondary,.fieldDescription,.listItemBodyText-secondary,.secondaryText { +.fieldDescription, +.listItemBodyText-secondary, +.secondaryText { color: var(--theme-body-secondary-text-color) } +.cardText-secondary { + color: var(--text) +} + .cardText-first { color: var(--theme-text-color-opaque) } @@ -189,17 +339,23 @@ html { @media(hover: hover) and (pointer:fine) { .actionSheetMenuItem:hover { - background-color:rgba(255,255,255,.2) + background-color: rgba(255, 255, 255, .2); + color: var(--text-hover); } } .selectionCommandsPanel { - background: var(--theme-primary-color); - color: #fff + background: rgb(rgb(var(--theme-primary-color))); + color: var(--label-text-color); +} + +.itemSelectionCount { + color: var(--label-text-color) !important; + } .upNextDialog-countdownText { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .alphaPickerButton { @@ -212,25 +368,30 @@ html { } .alphaPickerButton-tv:focus { - background-color: var(--theme-primary-color); - color: #fff!important + background-color: rgb(var(--theme-primary-color)); + color: var(--label-text-color) !important } .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; - background: rgba(30,30,30,.9) + background: rgba(30, 30, 30, .9) } .listItem-border { - border-color: var(--line-background)!important + border-color: var(--line-background) !important } .listItem-focusscale:focus { - background: rgba(54,54,54,.8) + background: rgba(54, 54, 54, .8) +} + +.listItemIcon:not(.listItemIcon-transparent) { + background-color: rgb(var(--theme-primary-color)); + color: var(--label-text-color); } .progressring-spiner { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .mediaInfoText { @@ -245,14 +406,16 @@ html { color: #cb272a } -.emby-input,.emby-textarea { +.emby-input, +.emby-textarea { color: inherit; - background: var(--button-background); - border: var(--line-size) solid var(--button-background) + background: rgb(0 0 0 / 25%); + border: var(--line-size) solid rgba(255, 255, 255, 0.1) } -.emby-input:focus,.emby-textarea:focus { - border-color: var(--theme-primary-color) +.emby-input:focus, +.emby-textarea:focus { + border-color: rgb(var(--theme-primary-color)) } .emby-checkbox:checked+span:before { @@ -260,12 +423,18 @@ html { } .emby-checkbox:checked+span:before { - border-color: var(--theme-primary-color); - background-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) !important; + background-color: rgb(var(--theme-primary-color)) !important; + +} + +.checkboxLabel::after, +.checkboxIcon { + color: var(--label-text-color) !important; } .itemProgressBarForeground { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .itemProgressBarForeground-recording { @@ -273,11 +442,12 @@ html { } .countIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color); } .playedIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .mainDrawer { @@ -291,18 +461,19 @@ html { @media(hover: hover) and (pointer:fine) { .navMenuOption:hover { - background:#303030 + background: #303030 } } .navMenuOption-selected { - background-color: var(--theme-icon-focus-background)!important; - color: var(--theme-accent-text-color) + background-color: var(--theme-icon-focus-background) !important; + color: rgb(var(--accent-color)) } -.emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { - background: var(--theme-primary-color); - color: #fff +.emby-button-focusscale:focus, +.emby-button-focusscale:focus .detailButton-icon { + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color) } .emby-tab-button { @@ -310,7 +481,7 @@ html { } .emby-tab-button-active { - color: var(--theme-accent-text-color) + color: rgb(var(--theme-accent-text-color)) } .emby-tab-button-active.emby-button-tv { @@ -318,34 +489,66 @@ html { } .emby-tab-button.emby-button-tv:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--accent-color)); background: 0 0 } .emby-button { - outline-color: var(--theme-primary-color) + outline-color: rgb(var(--theme-primary-color)) } -.channelCell,.guide-headerTimeslots,.timeslotHeaders { - background: var(--theme-background) +.channelCell, +.guide-headerTimeslots, +.timeslotHeaders { + background: var(--theme-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } @media (pointer: coarse) { .channelCell-mobilefocus { - background:var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } .channelCell-mobilefocus:not(:focus-visible) { - background: var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .channelCell-mobilefocus:not(:-moz-focusring) { - background: var(--theme-background)!important + background: var(--theme-background) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.channelCell,.epgRow,.programCell { - border-color: rgba(255,255,255,.05) +.channelCell, +.epgRow, +.programCell { + border-color: rgba(255, 255, 255, .05) } .guide-currentTimeIndicatorDot { @@ -353,7 +556,7 @@ html { } .guide-currentTimeIndicatorDot:after { - border-top-color: var(--theme-primary-color) + border-top-color: rgb(var(--theme-primary-color)) } .firstChannelCell { @@ -361,24 +564,25 @@ html { } .programCell-sports { - background: #3949ab!important + background: #3949ab !important } .programCell-movie { - background: #5e35b1!important + background: #5e35b1 !important } .programCell-kids { - background: #039be5!important + background: #039be5 !important } .programCell-news { - background: #43a047!important + background: #43a047 !important } -.channelCell:focus,.programCell:focus { - background-color: var(--theme-primary-color); - color: #fff +.channelCell:focus, +.programCell:focus { + background-color: rgb(var(--theme-primary-color)); + color: var(--label-text-color) } .guide-programTextIcon { @@ -394,7 +598,7 @@ html { } .ratingbutton-icon-withrating { - color: #c33!important + color: #c33 !important } .downloadbutton-icon-on { @@ -406,7 +610,7 @@ html { } .playstatebutton-icon-played { - color: #c33!important + color: #c33 !important } .repeatButton-active { @@ -414,7 +618,7 @@ html { } .card:focus .card-focuscontent { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .cardContent-button { @@ -450,7 +654,11 @@ html { } .cardOverlayButtonIcon { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) +} + +.cardScalable.cardPadder-portrait>div>button>i { + color: var(--label-text-color) !important; } ::-webkit-scrollbar-track-piece { @@ -466,7 +674,7 @@ html { } .emby-slider { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-track { @@ -474,37 +682,32 @@ html { } .emby-slider::-moz-range-progress { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-webkit-slider-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-ms-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider-background-lower { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .scrollbuttoncontainer { color: #fff; - background: rgba(20,20,20,.5) + background: rgba(20, 20, 20, .5) } .recordingIcon-active { - color: #c33!important -} - -.drawerLogo { - background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/emby/logowhite.png); - border-bottom-color: var(--line-background) + color: #c33 !important } .searchTabsContainer { @@ -512,43 +715,64 @@ html { } .emby-search-tab-button.emby-tab-button-active { - background: var(--theme-accent-text-color)!important + background: rgb(var(--accent-color)) !important } .textActionButton.dragging { - background: var(--button-background)!important + background: var(--button-background) !important } .dragging-over.full-drop-target { - background: var(--theme-primary-color)!important; - color: #fff!important + background: rgb(var(--theme-primary-color)) !important; + color: var(--label-text-color) !important } .dragging-over-top:before { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } .dragging-over-bottom:after { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } /* TP CUSTOM */ @media (hover: hover) and (pointer: fine) { -.navMenuOption:hover { - background: rgb(255 255 255 / 15%) !important; -} + .navMenuOption:hover:not(.navMenuOption-selected) { + background: 0 !important; + color: var(--accent-color-hover); + } } .mainDrawer { - background: var(--header-blur-background); - -webkit-backdrop-filter: saturate(1.8) blur(1.5em); - backdrop-filter: saturate(1.8) blur(1.5em); + background: var(--header-background); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + .mainDrawer { + background: var(--header-blur-background); + -webkit-backdrop-filter: saturate(1.8) blur(1.5em); + backdrop-filter: saturate(1.8) blur(1.5em); + } +} + +.jstree-default .jstree-clicked { + background: rgb(var(--accent-color)); + -webkit-border-radius: 2px; + border-radius: 2px; + color: var(--label-text-color) !important; } .cardImageIcon { color: #fff; - } +} .dialog .inputLabelFocused, .selectLabelFocused, @@ -561,152 +785,152 @@ html { @media (hover: hover) and (pointer: fine) { .paper-icon-button-light:hover:not(:disabled) { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); background-color: var(--theme-icon-focus-background); } } .paper-icon-button-light:active:not(:disabled) { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); background-color: var(--theme-icon-focus-background); } .paper-icon-button-light.show-focus:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .button-submit { - background: var(--theme-accent-text-color); - color: #fff; + background: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .button-submit:focus { - background: var(--theme-accent-text-color); - color: #fff; + background: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .inputLabelFocused, .selectLabelFocused, .textareaLabelFocused { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .itemSelectionPanel { - border: 1px solid var(--theme-accent-text-color); + border: 1px solid rgb(var(--theme-accent-text-color)); } .selectionCommandsPanel { - background: var(--theme-accent-text-color); - color: #fff; + background: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .upNextDialog-countdownText { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .alphaPickerButton-tv:focus { - background-color: var(--theme-accent-text-color); - color: #fff !important; + background-color: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color) !important; } .progressring-spiner { - border-color: var(--theme-accent-text-color); + border-color: rgb(var(--theme-accent-text-color)); } .button-flat:hover { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .button-link { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .emby-input:focus, .emby-textarea:focus { - border-color: var(--theme-accent-text-color); + border-color: rgb(var(--theme-accent-text-color)); } .emby-select-withcolor:focus { - border-color: var(--theme-accent-text-color) !important; + border-color: rgb(var(--theme-accent-text-color)) !important; } .emby-select-tv-withcolor:focus { - background-color: var(--theme-accent-text-color) !important; - color: #fff !important; + background-color: rgb(var(--theme-accent-text-color)) !important; + color: var(--label-text-color) !important; } -.emby-checkbox:checked + span + .checkboxOutline { - border-color: var(--theme-accent-text-color); +.emby-checkbox:checked+span+.checkboxOutline { + border-color: rgb(var(--theme-accent-text-color)); } -.emby-checkbox:checked + span + .checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { - background-color: var(--theme-accent-text-color); + background-color: rgb(var(--theme-accent-text-color)); } -.emby-checkbox:focus:not(:checked) + span + .checkboxOutline { - border-color: var(--theme-accent-text-color); +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: rgb(var(--theme-accent-text-color)); } .countIndicator, .fullSyncIndicator, .playedIndicator { - background: var(--theme-accent-text-color); + background: rgb(var(--theme-accent-text-color)); } .navMenuOption-selected { - background: var(--theme-accent-text-color) !important; - color: #fff; + background: rgb(var(--theme-accent-text-color)) !important; + color: var(--label-text-color); } .emby-button.show-focus:focus { - background: var(--theme-accent-text-color); - color: #fff; + background: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .emby-tab-button.show-focus:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .emby-tab-button:hover { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .guide-channelHeaderCell:focus, .programCell:focus { - background-color: var(--theme-accent-text-color) !important; - color: #fff !important; + background-color: rgb(var(--theme-accent-text-color)) !important; + color: var(--label-text-color) !important; } .guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .guide-date-tab-button.show-focus:focus { - background-color: var(--theme-accent-text-color); - color: #fff; + background-color: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .buttonActive { - color: var(--theme-accent-text-color) !important; + color: rgb(var(--theme-accent-text-color)) !important; } .card:focus .cardBox.visualCardBox, .card:focus .cardBox:not(.visualCardBox) .cardScalable { - border-color: var(--theme-accent-text-color) !important; + border-color: rgb(var(--theme-accent-text-color)) !important; } .metadataSidebarIcon { - color: var(--theme-accent-text-color); + color: rgb(var(--theme-accent-text-color)); } .emby-button.detailFloatingButton { - background-color: var(--theme-accent-text-color); - color: #fff; + background-color: rgb(var(--theme-accent-text-color)); + color: var(--label-text-color); } .layout-tv .emby-button.detailFloatingButton:focus { background-color: #f2f2f2; - color: var(--theme-accent-text-color); -} + color: rgb(var(--theme-accent-text-color)); +} \ No newline at end of file diff --git a/CSS/themes/jellyfin/organizr-dark.css b/CSS/themes/jellyfin/organizr-dark.css index 86a92dec..3f351694 100644 --- a/CSS/themes/jellyfin/organizr-dark.css +++ b/CSS/themes/jellyfin/organizr-dark.css @@ -13,51 +13,4 @@ /* JELLYFIN ORGANIZR-DARK THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); - -:root { - --theme-primary-color: #2cabe3; - --theme-text-color: #96a2b4; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #2cabe3; - --theme-primary-color-lightened: rgba(44, 171, 227 , 0.8); - --theme-icon-focus-background: rgba(44, 171, 227 , 0.2); - - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: #1f1f1f; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/plex.css b/CSS/themes/jellyfin/plex.css index 7034e3fc..50801bb1 100644 --- a/CSS/themes/jellyfin/plex.css +++ b/CSS/themes/jellyfin/plex.css @@ -13,50 +13,4 @@ /* JELLYFIN PLEX THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); -:root { - --theme-primary-color: #e5a00d; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #e5a00d; - --theme-primary-color-lightened: rgba(229, 161, 13, 0.2); - --theme-icon-focus-background: rgba(229, 161, 13, 0.2); - - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css"); \ No newline at end of file diff --git a/CSS/themes/jellyfin/space-gray.css b/CSS/themes/jellyfin/space-gray.css index 27d9f31d..5b821e26 100644 --- a/CSS/themes/jellyfin/space-gray.css +++ b/CSS/themes/jellyfin/space-gray.css @@ -13,50 +13,4 @@ /* JELLYFIN SPACE GRAY THEME */ @import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/jellyfin/jellyfin-base.css"); -:root { - --theme-primary-color: #81a6b7; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #81a6b7; - --theme-primary-color-lightened: rgba(129, 166, 183, 0.2); - --theme-icon-focus-background: rgba(129, 166, 183, 0.2); - - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - - --header-background: var(--theme-background); - --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); - --line-size: .08em; - --scrollbar-thumb-background: rgba(255,255,255,.3); -} - -@media (pointer: fine) { - :not(.layout-tv):root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); - } -} - -.layout-tv:root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --header-blur-background: rgba(20,20,20,0.66); - --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; - --footer-blur-background: rgba(29,29,31,0.66); -} \ No newline at end of file +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css"); \ No newline at end of file diff --git a/CSS/themes/kitana/aquamarine.css b/CSS/themes/kitana/aquamarine.css index 2fa615ba..efa9dfae 100644 --- a/CSS/themes/kitana/aquamarine.css +++ b/CSS/themes/kitana/aquamarine.css @@ -13,15 +13,4 @@ /* KITANA AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/kitana/dark.css b/CSS/themes/kitana/dark.css index 950f3402..1eee48f0 100644 --- a/CSS/themes/kitana/dark.css +++ b/CSS/themes/kitana/dark.css @@ -13,15 +13,4 @@ /* KITANA DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/kitana/dracula.css b/CSS/themes/kitana/dracula.css new file mode 100644 index 00000000..bb41ee4d --- /dev/null +++ b/CSS/themes/kitana/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* KITANA DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/kitana/hotline.css b/CSS/themes/kitana/hotline.css index aacddc39..f24301f8 100644 --- a/CSS/themes/kitana/hotline.css +++ b/CSS/themes/kitana/hotline.css @@ -13,15 +13,4 @@ /* KITANA HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/kitana/kitana-base.css b/CSS/themes/kitana/kitana-base.css index 6f1bb6f0..00261ab4 100644 --- a/CSS/themes/kitana/kitana-base.css +++ b/CSS/themes/kitana/kitana-base.css @@ -12,6 +12,14 @@ body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } a { @@ -19,11 +27,23 @@ a { } a:hover { - color: #fff; + color: var(--link-color-hover); +} + +a.ml-2, +a.mx-2 { + color: rgb(var(--accent-color)) !important; } #content:before { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } * { @@ -36,10 +56,20 @@ body, color: var(--text); } +h1, +h2, +h3, +h4, +h5, +h6, +label { + color: var(--text-hover); +} + /* ACCENTS */ .badge-dark { - color: var(--button-text); - background-color: var(--accent-color); + color: var(--label-text-color); + background-color: rgb(rgb(var(--accent-color))); } /* NAVBAR */ @@ -65,6 +95,13 @@ body, .dropdown-menu { color: #fff; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid transparent; } @@ -94,6 +131,7 @@ body, } .card-header { + color: var(--text-hover); background-color: rgb(0 0 0 / 25%); border-bottom: 1px solid rgba(255, 255, 255, .125) !important; } @@ -139,14 +177,14 @@ ul li:hover { .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); box-shadow: none !important; } .badge-primary { - color: var(--button-text); - background-color: var(--accent-color); + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); } .badge-secondary { @@ -168,6 +206,31 @@ ul li:hover { color: var(--text-hover) !important; } +.custom-control-input:checked~.custom-control-label::before { + color: var(--label-text-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); +} + +.custom-checkbox .custom-control-input:checked~.custom-control-label::after { + filter: invert(1); +} + +.custom-control-input:focus~.custom-control-label::before { + box-shadow: 0 0 0 .2rem rgba(55, 90, 127, 0.25) +} + +.custom-control-input:focus:not(:checked)~.custom-control-label::before { + border-color: rgb(var(--accent-color)); +} + +.custom-control-input:not(:disabled):active~.custom-control-label::before { + color: #fff; + background-color: #97b3d2; + border-color: #97b3d2 +} + + /* PLACEHOLDER TEXT */ ::placeholder { color: var(--text) !important; diff --git a/CSS/themes/kitana/organizr-dark.css b/CSS/themes/kitana/organizr-dark.css index 34f8e976..969cffa7 100644 --- a/CSS/themes/kitana/organizr-dark.css +++ b/CSS/themes/kitana/organizr-dark.css @@ -13,15 +13,4 @@ /* KITANA ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text:#96a2b4; - --text-hover: #fff; - --link-color: #2cabe3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/kitana/plex.css b/CSS/themes/kitana/plex.css index a1d89f8e..70054515 100644 --- a/CSS/themes/kitana/plex.css +++ b/CSS/themes/kitana/plex.css @@ -13,15 +13,4 @@ /* KITANA PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/kitana/space-gray.css b/CSS/themes/kitana/space-gray.css index c25017d3..78ff4375 100644 --- a/CSS/themes/kitana/space-gray.css +++ b/CSS/themes/kitana/space-gray.css @@ -13,15 +13,4 @@ /* KITANA SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/kitana/kitana-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/aquamarine.css b/CSS/themes/lazylibrarian/aquamarine.css index bf1463d3..42c2d04d 100644 --- a/CSS/themes/lazylibrarian/aquamarine.css +++ b/CSS/themes/lazylibrarian/aquamarine.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/dark.css b/CSS/themes/lazylibrarian/dark.css index ad5643c9..d1d0105c 100644 --- a/CSS/themes/lazylibrarian/dark.css +++ b/CSS/themes/lazylibrarian/dark.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/dracula.css b/CSS/themes/lazylibrarian/dracula.css new file mode 100644 index 00000000..25123524 --- /dev/null +++ b/CSS/themes/lazylibrarian/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* LAZYLIBRARIAN DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/hotline.css b/CSS/themes/lazylibrarian/hotline.css index f8f46219..b0a370c0 100644 --- a/CSS/themes/lazylibrarian/hotline.css +++ b/CSS/themes/lazylibrarian/hotline.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/lazylibrarian-base.css b/CSS/themes/lazylibrarian/lazylibrarian-base.css index a8371162..c67683d0 100644 --- a/CSS/themes/lazylibrarian/lazylibrarian-base.css +++ b/CSS/themes/lazylibrarian/lazylibrarian-base.css @@ -9,283 +9,481 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ - - body { - color: #ccc; - background: var(--main-bg-color); - } - p { - color: #ccc !important; - } - - /* SCROLLBAR */ - @media only screen and (min-width: 768px) { +* { + outline: none !important; +} + +body { + color: var(--text); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +p { + color: var(--text) !important; +} + +h1, +h2, +h3, +h4, +h5, +h6, +label, +legend { + color: var(--text-hover); +} + +legend, +.nav-tabs { + border-bottom: 1px solid rgb(var(--accent-color), .45) !important; +} + +a, +.btn-link { + color: var(--link-color); +} + +a:hover, +.btn-link:hover { + color: var(--link-color-hover); +} + +input::-webkit-input-placeholder { + color: var(--text-muted) !important; +} + +input:focus::-webkit-input-placeholder { + color: var(--text-hover) !important; +} + +/* Placeholders */ +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text-muted) !important; +} + +input:focus:-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text-muted) !important; +} + +input:focus::-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text-muted) !important; +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover) !important; +} + +/* SCROLLBAR */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } - } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } - - /* NAVBAR */ - .navbar { - border: 1px solid transparent; - text-shadow: 1px 1px 1px rgb(0, 0, 0); - background: rgba(0, 0, 0, 0); - } - .navbar-inverse { - background-image: none; - background-color: transparent; - border-color: transparent; - } - .navbar-default .navbar-brand { - color: #e4e4e4; - } - .navbar-default .navbar-nav>li>a { - color: #e4e4e4; - } - .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { - color: #ffffff; - background-image: none; - background-color: rgba(0, 0, 0, .25); - } - /* BUTTONS */ - - .btn-primary, .btn-default { - background-image: none; - color: #ffffff; - background-color: var(--button-color); - border-color: transparent; - outline: none; - } - - .btn-primary:hover, .btn-default:hover, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { - background-image: none; - color: #ffffff; - background-color: var(--button-color-hover); - border-color: transparent; - } - .btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus { - color: #ffffff; - background-color: var(--button-color-hover); - border-color: transparent; - } - .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { - color: #ffffff; - background-color: var(--button-color-hover); - border-color: transparent; - } - - .btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus,.btn:hover, .btn:focus, .btn.focus { - outline: none; - background-color: var(--button-color-hover); - border-color: transparent; - } - .btn-link:hover, .btn-link:focus, button.close { - outline:none - } - - .btn-warning { - background-image: none; - color: #ffffff; - background-color: #f89406; - border-color: #f89406; - } - - .btn-warning:hover { - background-image: none; - color: #ffffff; - background-color: #c67605; - border-color: #bc7005; - } - .btn:hover, .btn:focus, .btn.focus { - color: #ffffff; - text-decoration: none; - } - - .pagination>li.disabled>a, .pagination>li.disabled>a:hover, .pagination>li.disabled>span, .pagination>li.disabled>span:hover { - background-color: var(--button-color); - background-image: none; - outline:none; - } - .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { - color: #ccc; - background-color: var(--button-color); - border-color: transparent; - cursor: not-allowed; - } - .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { - color: #ffffff; - background-image: none; - background-color: rgba(0, 0, 0, 0.45); - border-color: transparent; - outline: none; - } - .pagination>li.active>a, .pagination>li.active>span { - background-image: none; - } - .pagination>li>a, .pagination>li>span { - text-shadow: 1px 1px 1px rgba(0,0,0,0.3); - background-image: none; - } - .pagination>li>a, .pagination>li>span { - color: #ffffff; - background-color: var(--button-color); - border: 1px solid transparent; - - } - .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { - color: #ffffff; - background-image: none; - background-color: var(--button-color-hover); - border-color: transparent; - outline: none; - } - - /* FORM CONTYROL */ - - .form-control:focus { - border-color: transparent; - outline: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - - .form-control { - color: #fff; - background-color: rgba(0, 0, 0, 0.25); - background-image: none; - border: 1px solid transparent; - } - .form-control:active, .form-control:focus { - color: #272b30; - background-color: #fff !important; - background-image: none; - border: 1px solid transparent; - } - #subhead_menu .input-group .form-control:active ,.input-group .form-control:focus { - color: #272b30; - background-color: #fff !important; - height: 30px !important; - } - .configtable .input-group .form-control:active ,.configtable .input-group .form-control:focus { - display: block; - width: 100%; - height: 38px !important; - padding: 8px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #272b30; - background-color: #fff !important; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); - box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); - -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; - } - - - /* TABLE */ - - table { - background-color: rgba(255, 255, 255, 0.08); - } - - .table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.08); - } - .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.08) !important; - } - .table-bordered { - border: 1px solid transparent; - } - .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td { - border: 1px solid rgba(255, 255, 255, 0.08); - } - - /* BOOKWALL */ - - .table-responsive>.table { - background-color: rgba(255, 255, 255, .08); - } - - /* SETTINGS */ - - .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { - color: #ffffff; - background-color: rgba(255, 255, 255, 0.08); - border: 1px solid TRANSPARENT; - border-bottom-color: transparent; - cursor: default; - } - .nav-tabs { - border-bottom: 1px solid rgba(255, 255, 255, 0.45); - } - .nav-tabs>li>a:hover { - border-color: transparent; - } - .nav>li>a:hover, .nav>li>a:focus { - text-decoration: none; - background-color: rgba(255, 255, 255, 0.15); - } - .input-group-addon { - border:none; - border-color: transparent; - background-image: none; - color: #ffffff; - background-color: rgba(0, 0, 0, .45); - } - .input-group { - margin-top: 2px; - } - - legend { - border-bottom: 1px solid rgba(255, 255, 255, .45); - } - - /* MODAL */ - - .modal-content { - background: var(--modal-bg-color); - border: 1px solid transparent; - } - .modal-header { - border-bottom: 1px solid rgba(255, 255, 255, .45); - } - .modal-footer { - border-top: 1px solid rgba(255, 255, 255, .45); - } - pre { - color: #ccc; - background-color: rgba(0, 0, 0, 0.25); - border: 1px solid transparent; - } \ No newline at end of file +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* NAVBAR */ +.navbar { + border: 1px solid transparent; + text-shadow: 1px 1px 1px rgb(0, 0, 0); + background: rgba(0, 0, 0, 0); +} + +.navbar-inverse { + background-image: none; + background-color: transparent; + border-color: transparent; +} + +.navbar-default .navbar-brand { + color: rgb(var(--accent-color)); +} + +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: var(--accent-color-hover); + background-color: none; +} + +.navbar-default .navbar-nav>li>a { + color: var(--text); +} + +.navbar-default .navbar-nav>li>a:hover, +.navbar-default .navbar-nav>li>a:focus { + color: var(--text-hover); + background-image: none; + background-color: rgba(0, 0, 0, .25); +} + +/* BUTTONS */ + +.btn-primary, +.btn-default { + color: var(--button-text) !important; + background-color: var(--button-color) !important; + background: var(--button-color) !important; + border-color: var(--button-color) !important; + background-image: none !important; + outline: none; +} + +.btn-primary:hover, +.btn-default:hover, +.btn-primary:active, +.btn-primary.active, +.open>.dropdown-toggle.btn-primary { + background-image: none; + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-primary:active:hover, +.btn-primary.active:hover, +.open>-toggle.btn-primary:hover, +.btn-primary:active:focus, +.btn-primary.active:focus, +.open>.dropdown-toggle.btn-primary:focus, +.btn-primary:active.focus, +.btn-primary.active.focus, +.open>.dropdown-toggle.btn-primary.focus { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-primary.active.focus, +.btn-primary.active:focus, +.btn-primary.active:hover, +.btn-primary:active.focus, +.btn-primary:active:focus, +.btn-primary:active:hover, +.open>.dropdown-toggle.btn-primary.focus, +.open>.dropdown-toggle.btn-primary:focus, +.open>.dropdown-toggle.btn-primary:hover { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-primary:active:hover, +.btn-primary.active:hover, +.open>.dropdown-toggle.btn-primary:hover, +.btn-primary:active:focus, +.btn-primary.active:focus, +.open>.dropdown-toggle.btn-primary:focus, +.btn-primary:active.focus, +.btn-primary.active.focus, +.open>.dropdown-toggle.btn-primary.focus { + outline: none; + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-link:hover, +.btn-link:focus, +button.close { + outline: none +} + +.btn-warning { + background-image: none; + color: var(--button-text-hover); + background-color: #f89406; + border-color: #f89406; +} + +.btn-warning:hover { + background-image: none; + color: var(--button-text-hover); + background-color: #c67605; + border-color: #bc7005; +} + +.btn:hover, +.btn:focus, +.btn.focus { + color: var(--button-text-hover); + text-decoration: none; +} + +.pagination>li.disabled>a, +.pagination>li.disabled>a:hover, +.pagination>li.disabled>span, +.pagination>li.disabled>span:hover { + background-color: var(--button-color); + color: var(--text-muted); + background-image: none; + outline: none; +} + +.pagination>.disabled>span, +.pagination>.disabled>span:hover, +.pagination>.disabled>span:focus, +.pagination>.disabled>a, +.pagination>.disabled>a:hover, +.pagination>.disabled>a:focus { + color: var(--text-muted); + background-color: var(--button-color); + border-color: var(--button-color); + cursor: not-allowed; +} + +.pagination>.active>a, +.pagination>.active>span, +.pagination>.active>a:hover, +.pagination>.active>span:hover, +.pagination>.active>a:focus, +.pagination>.active>span:focus { + color: var(--button-text-hover); + background-image: none; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + outline: none; +} + +.pagination>li.active>a, +.pagination>li.active>span { + background-image: none; +} + +.pagination>li>a, +.pagination>li>span { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + background-image: none; +} + +.pagination>li>a, +.pagination>li>span { + color: var(--button-text); + background-color: var(--button-color); + border: 1px solid var(--button-color); + +} + +.pagination>li>a:hover, +.pagination>li>span:hover, +.pagination>li>a:focus, +.pagination>li>span:focus { + color: var(--button-text-hover); + background-image: none; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + outline: none; +} + +/* FORM CONTYROL */ + +.form-control:focus { + border-color: transparent; + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.form-control { + color: var(--text); + background-color: rgba(255, 255, 255, 0.1); + background-image: none; + border: 1px solid transparent; +} + +select:focus, +select:active, +select.form-control:focus, +select.form-control:active, +#auth_type:focus { + background: #1b1b1b !important; + color: white !important; +} + +.form-control:active:not(select.form-control), +.form-control:focus:not(select.form-control), +.configtable .input-group .form-control:active, +.configtable .input-group .form-control:focus { + color: var(--text-hover); + background-color: rgba(0, 0, 0, 0.25) !important; + background-image: none; + border: 1px solid transparent; +} + + +/* TABLE */ + +table { + background-color: rgba(255, 255, 255, 0.08); +} + +thead { + color: var(--text-hover); +} + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.08); +} + +.table-hover>tbody>tr:hover { + background-color: rgba(255, 255, 255, 0.08) !important; +} + +.table-bordered { + border: 1px solid transparent; +} + +.table-bordered>thead>tr>th, +.table-bordered>tbody>tr>th, +.table-bordered>tfoot>tr>th, +.table-bordered>thead>tr>td, +.table-bordered>tbody>tr>td, +.table-bordered>tfoot>tr>td { + border: 1px solid rgba(255, 255, 255, 0.08); +} + +/* BOOKWALL */ + +.table-responsive>.table { + background-color: rgba(255, 255, 255, .08); +} + +/* SETTINGS */ + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:hover, +.nav-tabs>li.active>a:focus { + color: rgb(var(--accent-color)); + background-color: rgba(255, 255, 255, 0.08); + border: 1px solid TRANSPARENT; + border-bottom-color: transparent; + cursor: default; +} + +.nav-tabs { + border-bottom: 1px solid rgba(255, 255, 255, 0.45); +} + +.nav-tabs>li>a:hover { + border-color: transparent; +} + +.nav>li>a:hover, +.nav>li>a:focus { + text-decoration: none; + background-color: rgba(255, 255, 255, 0.15); +} + +.input-group-addon { + border: none; + border-color: transparent; + background-image: none; + color: var(--button-text); + background-color: var(--button-color); +} + +.input-group { + margin-top: 2px; +} + +legend { + border-bottom: 1px solid rgba(255, 255, 255, .45); +} + +/* MODAL */ + +.modal-content { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid transparent; +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); +} + +pre { + color: var(--text); + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; +} \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/organizr-dark.css b/CSS/themes/lazylibrarian/organizr-dark.css index a82d4d48..4365def4 100644 --- a/CSS/themes/lazylibrarian/organizr-dark.css +++ b/CSS/themes/lazylibrarian/organizr-dark.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/plex.css b/CSS/themes/lazylibrarian/plex.css index f98f55c6..5b5214af 100644 --- a/CSS/themes/lazylibrarian/plex.css +++ b/CSS/themes/lazylibrarian/plex.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/space-gray.css b/CSS/themes/lazylibrarian/space-gray.css index 955d54b0..789b2853 100644 --- a/CSS/themes/lazylibrarian/space-gray.css +++ b/CSS/themes/lazylibrarian/space-gray.css @@ -12,13 +12,4 @@ /* LAZYLIBRARIAN SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/librespeed/aquamarine.css b/CSS/themes/librespeed/aquamarine.css index f1977fb5..a1df0e1c 100644 --- a/CSS/themes/librespeed/aquamarine.css +++ b/CSS/themes/librespeed/aquamarine.css @@ -13,8 +13,4 @@ /* LIBRESPEED AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --start-button-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed; - --start-button-color-hover: radial-gradient(ellipse at center, #5066e0 0%, #01ccb9 100%) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/dark.css b/CSS/themes/librespeed/dark.css index 545c0eb5..a30fff85 100644 --- a/CSS/themes/librespeed/dark.css +++ b/CSS/themes/librespeed/dark.css @@ -13,9 +13,4 @@ /* LIBRESPEED DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --start-button-color: #cc7b19; - --start-button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/dracula.css b/CSS/themes/librespeed/dracula.css new file mode 100644 index 00000000..e74ecfc0 --- /dev/null +++ b/CSS/themes/librespeed/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* LIBRESPEED DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/hotline.css b/CSS/themes/librespeed/hotline.css index f169f3b0..9884fb4f 100644 --- a/CSS/themes/librespeed/hotline.css +++ b/CSS/themes/librespeed/hotline.css @@ -13,8 +13,4 @@ /* LIBRESPEED HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --start-button-color: radial-gradient(ellipse at center, #F44336 0%, #3F51B5 100%) center center/cover no-repeat fixed; - --start-button-color-hover: radial-gradient(ellipse at center, #fb6054 0%, #5269e6 100%) center center/cover no-repeat fixed; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/librespeed-base.css b/CSS/themes/librespeed/librespeed-base.css index 18a3acc1..4a5d8023 100644 --- a/CSS/themes/librespeed/librespeed-base.css +++ b/CSS/themes/librespeed/librespeed-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -11,60 +10,97 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -html, body { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color:#FFFFFF !important; +html, +body { + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; } -h1 { - color: white; + +h1, +h2, +h3, +h4, +h5, +h6, +label { + color: var(--text-hover); } + div.meterText:empty:before { - color: white !important; + color: var(--text-hover) !important; } #dlText { color: #F44336; } + #ulText { color: #4CAF50; } -#pingText, #jitText { + +#pingText, +#jitText { color: #2cabe3; } + #startStopBtn { - color: #ffffff; - background: var(--start-button-color); - border: 0.15em solid var(--start-button-color); + color: var(--button-text); + background: var(--button-color); + border: 0.15em solid var(--button-color); } + #startStopBtn:hover { - border: 0.15em solid var(--start-button-color-hover); - background: var(--start-button-color-hover); + border: 0.15em solid var(--button-color-hover); + background: var(--button-color-hover); } + #startStopBtn.running { background: #FF3030 !important; border-color: #FF6060; color: #FFFFFF; } + #startStopBtn.running:hover { background: #FF3030; border-color: #FF6060; color: #FFFFFF; } + +a, a:-webkit-any-link { - color: white; + color: var(--link-color); } + +a:hover, +a:-webkit-any-link:hover { + color: var(--link-color-hover); +} + +#ip, +.unit { + color: rgb(var(--accent-color)); +} + #privacyPolicy { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + input { - font-family: "Roboto",sans-serif; + font-family: "Roboto", sans-serif; color: white; background-color: rgba(0, 0, 0, 0.25) !important; -webkit-rtl-ordering: logical; @@ -78,3 +114,6 @@ input { outline: none; } +.testName { + color: var(--text-hover) !important; +} \ No newline at end of file diff --git a/CSS/themes/librespeed/organizr-dark.css b/CSS/themes/librespeed/organizr-dark.css index 7cab3498..e0032bfe 100644 --- a/CSS/themes/librespeed/organizr-dark.css +++ b/CSS/themes/librespeed/organizr-dark.css @@ -13,9 +13,4 @@ /* LIBRESPEED ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --start-button-color: #2cabe3; - --start-button-color-hover: rgb(44 171 227 / .8); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/plex.css b/CSS/themes/librespeed/plex.css index 813d8e3f..ff216af4 100644 --- a/CSS/themes/librespeed/plex.css +++ b/CSS/themes/librespeed/plex.css @@ -13,8 +13,4 @@ /* LIBRESPEED PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --start-button-color: #cc7b19; - --start-button-color-hover: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/librespeed/space-gray.css b/CSS/themes/librespeed/space-gray.css index e55d0528..67da1786 100644 --- a/CSS/themes/librespeed/space-gray.css +++ b/CSS/themes/librespeed/space-gray.css @@ -13,8 +13,4 @@ /* LIBRESPEED SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/librespeed/librespeed-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --start-button-color: #607D8B; - --start-button-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/aquamarine.css b/CSS/themes/lidarr/aquamarine.css index dc31bb83..e18bff59 100644 --- a/CSS/themes/lidarr/aquamarine.css +++ b/CSS/themes/lidarr/aquamarine.css @@ -13,30 +13,4 @@ /* LIDARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/dark.css b/CSS/themes/lidarr/dark.css index 30f8c850..f4497900 100644 --- a/CSS/themes/lidarr/dark.css +++ b/CSS/themes/lidarr/dark.css @@ -13,30 +13,4 @@ /* LIDARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/dracula.css b/CSS/themes/lidarr/dracula.css index 32e84c16..45af6924 100644 --- a/CSS/themes/lidarr/dracula.css +++ b/CSS/themes/lidarr/dracula.css @@ -13,30 +13,4 @@ /* LIDARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #50fa7b; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/hotline.css b/CSS/themes/lidarr/hotline.css index a57261a8..1ffa26ef 100644 --- a/CSS/themes/lidarr/hotline.css +++ b/CSS/themes/lidarr/hotline.css @@ -13,31 +13,4 @@ /* LIDARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/lidarr-base.css b/CSS/themes/lidarr/lidarr-base.css index dc699c7e..abaffee2 100644 --- a/CSS/themes/lidarr/lidarr-base.css +++ b/CSS/themes/lidarr/lidarr-base.css @@ -10,6 +10,15 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --calendar-downloading: 122 67 182; + --calendar-downloaded: 39 194 76; + --calendar-unreleased: 93 156 236; + --calendar-partial: 255, 165, 0; + --calendar-unmonitored: 173 173 173; + --calendar-missing: 240 80 80; +} + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -109,22 +118,43 @@ a:hover { /* MODAL */ [class*="ModalHeader-modalHeader-"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Modal-large-"], [class*="Modal-modal-"], [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="ModalFooter-modalFooter-"] { - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff; - border-top: 1px solid var(--accent-color); + border-top: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-closeButton-"]:hover { @@ -159,8 +189,13 @@ a:hover { } [class*="CheckInput-primaryIsChecked-"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; } /* HEADER */ @@ -183,6 +218,13 @@ a:hover { [class*="ArtistSearchInput-containerOpen-"] [class*="ArtistSearchInput-artistContainer-"] { border: none !important; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff !important; box-shadow: 0 0 10px 1px transparent !important; } @@ -213,13 +255,21 @@ a:hover { [class*="EnhancedSelectInput-options-"] { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { background-color: rgba(255, 255, 255, 0.20) !important; + color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { @@ -240,36 +290,42 @@ a:hover { background-color: transparent; } -[class*="PageSidebarItem-link-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); text-decoration: none; } -[class*="PageSidebarItem-isActiveLink-"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 768px) { [class*="PageSidebar-sidebarContainer-"] { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } [class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } /* LIBRARY PAGE */ /* LIDARR SPECIFIC */ [class*="ArtistIndexPoster-controls-"] { - background-color: #000 !important; + background-color: rgb(var(--accent-color)) !important; } /* OVERVIEW PAGE */ @@ -297,7 +353,7 @@ a:hover { } [class*=".ProgressBar-purple-"] { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } @@ -319,13 +375,13 @@ a:hover { border-top: 1px solid rgba(255, 255, 255, 0.5); } -.fa-search:hover { +/* .fa-search:hover { color: var(--text-hover) !important; -} +} */ [class*="Label-default-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } @@ -340,11 +396,13 @@ a:hover { [class*="ProtocolLabel-torrent-"] { border-color: #00853d !important; background-color: #00853d !important; + color: #fff !important; } [class*="ProtocolLabel-usenet-"] { border-color: #17b1d9 !important; background-color: #17b1d9 !important; + color: #fff !important; } /*ARTIST ALBUM PAGE*/ @@ -363,7 +421,7 @@ a:hover { } [class*="AlbumDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="AlbumDetailsMedium-collapseButtonContainer-"] { @@ -386,6 +444,13 @@ a:hover { [class*="Popover-body-"], [class*="Tooltip-body-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="Tooltip-tooltipContainer-"] { @@ -409,33 +474,43 @@ a:hover { color: var(--text); } +[class*="Label-default-"] [class*="IconButton-button-"], +[class*="Label-small-"] [class*="IconButton-button-"]:hover { + color: var(--label-text-color); +} + [class*="IconButton-button-"]:hover { background-color: transparent; color: var(--text-hover); } +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--text-hover); +} + [class*="Label-info-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--queue-color); - background-color: var(--queue-color); + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); color: var(--label-text-color); } /* Table options*/ [class*="TableOptionsColumn-column-"] { background: rgba(0, 0, 0, .25); - color: #FFF; + color: var(--text-hover); border: none; } [class*="TableHeaderCell-headerCell-"] { - color: #fff; + color: var(--text-hover); } [class*="Table-table-"] { @@ -476,25 +551,32 @@ a:hover { } [class*="PageToolbarButton-toolbarButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } [class*="MenuButton-menuButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } /* POSTERS */ [class*="ArtistIndexPoster-title-"], [class*="ArtistIndexPosterInfo-info-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /* TOP HEADER DROPDOWN */ [class*="MenuItem-menuItem-"], [class*="MenuContent-menuContent-"] { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -525,7 +607,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: var(--label-text-color); + color: #FFF; } [class*="ArtistSearchInput-container-"] [class*="Input-input-"] { @@ -585,10 +667,22 @@ a:hover { color: #fff; } +[class*="RootFolderSelectInputOption-freeSpace-"], +[class*="RootFolderSelectInputOption-seriesFolder-"] { + color: var(--text-muted); +} + /* IMPORT ARTIST */ [class*="ImportArtistSelectArtist-content-"], [class*="ImportArtistSelectArtist-searchIconContainer-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #FFF; border: 1px solid transparent; } @@ -602,18 +696,41 @@ a:hover { } /* MOVE THIS */ -::placeholder { +input::-webkit-input-placeholder { color: var(--text); } -:-ms-input-placeholder { - color: var(--text) +input:focus::-webkit-input-placeholder { + color: var(--text-hover); } -::-webkit-input-placeholder { +/* Firefox < 19 */ +input:-moz-placeholder { color: var(--text); } +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + /* IMPORT */ /* Text color */ [class*="ImportArtistSelectFolder-header-"] { @@ -637,8 +754,8 @@ a:hover { /* IMPORT */ [class*="FieldSet-legend-"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="VirtualTableRow-row-"]:hover { @@ -754,14 +871,23 @@ a:hover { } /* SETTINGS */ -[class*="PageContentBody-innerContentBody-"] [class*="Link-to-"] { - color: #fff; +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Settings-summary-"] { color: var(--text); } +[class*="FormLabel-large-"] { + color: var(--text-hover); +} + +[class*="FormLabel-isAdvanced-"] { + color: #ff902b; +} + /* MEDIA MANAGEMENT - FILE NAME TOKENS */ [class*="NamingOption-small-"] { border: 1px solid transparent; @@ -808,7 +934,6 @@ a:hover { [class*="ReleaseProfiles-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="QualityProfileItem-qualityProfileItem-"], @@ -843,7 +968,6 @@ a:hover { [class*="Indexers-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="Card-card-"], @@ -859,7 +983,6 @@ a:hover { [class*="RootFolders-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="Indexers-center-"], @@ -876,21 +999,18 @@ a:hover { [class*="DownloadClients-center-"] { background-color: transparent; border: none; - color: var(--text); } /* CONNECTIONS */ [class*="Notifications-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LISTS */ [class*="ImportLists-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LOG */ @@ -946,12 +1066,14 @@ input[type=password] { background-color: var(--button-color); cursor: pointer; } + .button:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; text-decoration: none; } + .form-input:focus { outline: 0; border-color: #fff; @@ -1014,5 +1136,4 @@ input[type=password] { [class*="Label-danger-"][class*="Label-outline-"] { color: #FFF; background-color: #f05050; -} - +} \ No newline at end of file diff --git a/CSS/themes/lidarr/organizr-dark.css b/CSS/themes/lidarr/organizr-dark.css index 1acf226f..fea4372c 100644 --- a/CSS/themes/lidarr/organizr-dark.css +++ b/CSS/themes/lidarr/organizr-dark.css @@ -13,30 +13,4 @@ /* LIDARR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/plex.css b/CSS/themes/lidarr/plex.css index a9cb27ee..8526a2fb 100644 --- a/CSS/themes/lidarr/plex.css +++ b/CSS/themes/lidarr/plex.css @@ -13,30 +13,4 @@ /* LIDARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/lidarr/space-gray.css b/CSS/themes/lidarr/space-gray.css index a36fe02d..343b68f6 100644 --- a/CSS/themes/lidarr/space-gray.css +++ b/CSS/themes/lidarr/space-gray.css @@ -13,30 +13,4 @@ /* LIDARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/logarr/logarr-base.css b/CSS/themes/logarr/logarr-base.css index 0d5e89a0..bd611c7e 100644 --- a/CSS/themes/logarr/logarr-base.css +++ b/CSS/themes/logarr/logarr-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,74 +11,91 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ body { - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - background-color: var(--main-bg-color)!important; - color:#FFFFFF !important; + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: #FFFFFF !important; } - /* Scrollbar */ - - @media only screen and (min-width: 768px) { +/* Scrollbar */ + +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: auto; } + body { overflow-y: auto; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } - .expand::-webkit-scrollbar-track { - background-color: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - .expand::-webkit-scrollbar { - background-color: transparent !important; - } - .expand::-webkit-scrollbar-thumb { - background-color: hsla(0,0%,100%,.2) !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - .expand::-webkit-scrollbar-thumb:hover { - background-color: hsla(0,0%,100%,.5) !important; - } - body::-webkit-scrollbar-track { - background-color: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - body::-webkit-scrollbar { - background-color: transparent !important; - } - body::-webkit-scrollbar-thumb { - background-color: hsla(0,0%,100%,.2) !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - body::-webkit-scrollbar-thumb:hover { - background-color: hsla(0,0%,100%,.5) !important; - } +.expand::-webkit-scrollbar-track { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.expand::-webkit-scrollbar { + background-color: transparent !important; +} + +.expand::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 100%, .2) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.expand::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 100%, .5) !important; +} + +body::-webkit-scrollbar-track { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +body::-webkit-scrollbar { + background-color: transparent !important; +} + +body::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 100%, .2) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +body::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 100%, .5) !important; +} + .flex-child { border-radius: 0px; background-color: rgba(255, 255, 255, 0.08); - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); } + #includedContent { -background-color: transparent; -background: transparent; + background-color: transparent; + background: transparent; } + body { opacity: 1; transition: 1s opacity; @@ -89,38 +105,62 @@ body { color: #FFFFFF; padding: 10px 10px 0; } + .btn { - font-weight: 600 !important; + font-weight: 600 !important; } + body.fade-out { opacity: 0; transition: none; } -.left, .right, .category-filter-item, .nav-item, .filesize, .path { + +.left, +.right, +.category-filter-item, +.nav-item, +.filesize, +.path { color: #ffffff; } -#username:hover, #password:hover { + +#username:hover, +#password:hover { text-shadow: 0 0 1rem transparent; } -#categoryFilter, #auto-update { + +#categoryFilter, +#auto-update { color: white !important; background-color: transparent !important; box-shadow: none; border-radius: 0px; } + #markform { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + .slide { border: 1px solid transparent; } + .expandtoggle { background-color: transparent !important; } + .expandtoggle:hover { background-color: rgba(255, 255, 255, 0.08) !important; } + .expandtoggle:checked~.expandtoggle::before { content: ""; background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/logarr/increase.png) no-repeat; @@ -130,6 +170,7 @@ body.fade-out { height: 2em; cursor: row-resize; } + .expandtoggle::before { background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/logarr/decrease.png) no-repeat; background-size: 2em; @@ -142,6 +183,7 @@ body.fade-out { transition: .5s; cursor: pointer; } + .expand { height: 43rem; width: auto; @@ -152,101 +194,142 @@ body.fade-out { word-wrap: break-word; padding: 0 10px 0 10px; } -.header-brand, .logheader { + +.header-brand, +.logheader { text-shadow: none !important; } + /* Settings */ - /* Text Color */ -.alpaca-control-label, .alpaca-control.radio { +/* Text Color */ +.alpaca-control-label, +.alpaca-control.radio { color: white !important; } + .alpaca-form-buttons-container { background-color: transparent !important; } + .Rtable-cell { color: white !important; } + #colorkey { color: white !important; } + .settingstitle { text-shadow: none !important; } + #reginfo { color: white !important; } + #infodata { background-color: transparent !important; box-shadow: none !important; } + .input_icon { color: var(--button-color) !important; } + .input_icon:hover { color: var(--button-color-hover) !important; } -.input:hover, input.form-control:hover, select.form-control:hover { + +.input:hover, +input.form-control:hover, +select.form-control:hover { border: .2rem solid transparent; } -.input:focus, input.form-control:focus, select.form-control:focus { + +.input:focus, +input.form-control:focus, +select.form-control:focus { border: .2rem solid transparent; } + input:invalid { border: .2rem solid transparent; } + input:valid { border: .2rem solid transparent; } + /* Sidebar */ #sidebar-wrapper { box-shadow: none !important; - background-color: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.07); } + .sidebar-nav li:hover:before { -webkit-transition: none !important; transition: none !important; background-color: rgba(0, 0, 0, 0.07); } + .sidebar-nav li:before { background-color: rgba(0, 0, 0, 0.07); transition: none !important; - -webkit-transition: none !important; + -webkit-transition: none !important; +} + +.sidebar-nav li:first-child a { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(2):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(3):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(4):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(5):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(6):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(7):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(8):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(9):before { + background-color: rgba(0, 0, 0, 0.07); } - .sidebar-nav li:first-child a { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(2):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(3):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(4):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(5):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(6):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(7):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(8):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(9):before { - background-color: rgba(0, 0, 0, 0.07); - } #modalloading { background: var(--main-bg-color); - color: white !important; - border: 1px solid transparent !important; - box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; - } -.modaltextloading, .modalloadingspinner { + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: white !important; + border: 1px solid transparent !important; + box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; +} + +.modaltextloading, +.modalloadingspinner { color: #FFF !important; } @@ -254,87 +337,117 @@ input:valid { max-width: 100% !important; padding-right: 2rem !important; } + #stats { - background-color: rgba(0,0,0,.15) !important; - padding-left: .0rem !important; - padding-right: 1.11rem !important; - box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + padding-left: .0rem !important; + padding-right: 1.11rem !important; + box-shadow: none; } + #hd { padding-left: 0.8rem !important; } + .double-val-label>span.success { background-color: #28a745 !important; } -.servicetile:hover, .servicetile:focus { - text-shadow: 0 0 20px #000; -} -#servicetitle:hover, #servicetitle:focus { + +.servicetile:hover, +.servicetile:focus { text-shadow: 0 0 20px #000; } + +#servicetitle:hover, +#servicetitle:focus { + text-shadow: 0 0 20px #000; +} + #servicetitle { color: #fff !important; } -.btnoffline, .btnunknown, .btnonline { + +.btnoffline, +.btnunknown, +.btnonline { box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; } + .btnonline { background-color: #28a745 !important; } + .btn { background-color: var(--button-color) !important; - border: none !important; + border: none !important; } + .btn:hover { background-color: var(--button-color-hover) !important; - border: none !important; + border: none !important; } -.btn-primary,.btn-primary:hover { + +.btn-primary, +.btn-primary:hover { border-color: transparent; } -.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) { + +.btn-group>.btn-group:not(:first-child)>.btn, +.btn-group>.btn:not(:first-child) { color: white !important; } + .btn-group>.btn:first-child { color: white !important; } + #time { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; - box-shadow: none; + box-shadow: none; } + #slidertable { -background-color: rgba(0,0,0,.15) !important; -box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + box-shadow: none; } + #textslider { color: #fff !important; } + .dtg { - color: #fff !important; + color: #fff !important; } + .datemin { - color: #fff !important; + color: #fff !important; } + #center { - background-color: rgba(0,0,0,.0) !important; - box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; + background-color: rgba(0, 0, 0, .0) !important; + box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; } + /*Service tile*/ .col-lg-4 { - background-color: rgba(0,0,0,.15) !important; - margin: 1rem .1rem 1.5rem 1rem !important; - width: 9rem !important; - box-shadow: none; -} -.col-lg-4:hover { - background-color: hsla(0,0%,100%,.08) !important; + background-color: rgba(0, 0, 0, .15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } -.servicetile, .servicetile:hover, .servicetile:focus { + +.col-lg-4:hover { + background-color: hsla(0, 0%, 100%, .08) !important; + margin: 1rem .1rem 1.5rem 1rem !important; + width: 9rem !important; + box-shadow: none; +} + +.servicetile, +.servicetile:hover, +.servicetile:focus { color: #ffffff; text-shadow: none !important; text-decoration: none !important; @@ -346,6 +459,7 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } + .servicetile { color: #ffffff; text-shadow: none !important; @@ -358,69 +472,96 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } -#servicetitle:hover, #servicetitle:focus { + +#servicetitle:hover, +#servicetitle:focus { text-shadow: none !important; font-weight: inherit !important; } #clock { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; box-shadow: none; } + .date { color: #fff !important; } + #summary { background-color: #e84242 !important; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; } -.pace, .pace-progress { - background: rgba(0,0,0,.15) !important; + +.pace, +.pace-progress { + background: rgba(0, 0, 0, .15) !important; } -.pace, .pace-progress-inner { - box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; + +.pace, +.pace-progress-inner { + box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important; } + .pace .pace-activity { - border-top-color: #FFF !important; - border-left-color: #FFF !important; - } + border-top-color: #FFF !important; + border-left-color: #FFF !important; +} + .footer { color: white !important; } + .footer:hover { text-shadow: 0 0 15px transparent !important; } + #footer { color: transparent !important; } .navbar-brand { text-shadow: 0 0 15px #000000 !important; - } +} /* ButtonShadow */ -.btnoffline, .btnunknown, .btnonline { +.btnoffline, +.btnunknown, +.btnonline { box-shadow: none !important; -webkit-box-shadow: none !important; } + .logrollmodal { background: var(--modal-bg-color) !important; - border: 1px solid transparent !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid transparent !important; } -.modalimgpath, .modaltext, #uploadbutton { +.modalimgpath, +.modaltext, +#uploadbutton { color: #fff !important; } + .file-upload { background-color: var(--button-color) !important; color: white !important; } + .file-upload:hover { background-color: var(--button-color-hover) !important; color: white !important; } + @media only screen and (max-width: 775px) { #slidertable { display: none !important; @@ -430,10 +571,11 @@ box-shadow: none; display: none !important; } } + @media only screen and (max-width: 768px) { -#dateRight { - background-color: rgba(0,0,0,.15) !important; - color: #fff !important; - box-shadow: none; -} -} + #dateRight { + background-color: rgba(0, 0, 0, .15) !important; + color: #fff !important; + box-shadow: none; + } +} \ No newline at end of file diff --git a/CSS/themes/monitorr/monitorr-base.css b/CSS/themes/monitorr/monitorr-base.css index 136d47a9..59310ea5 100644 --- a/CSS/themes/monitorr/monitorr-base.css +++ b/CSS/themes/monitorr/monitorr-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -18,142 +17,181 @@ } body { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color:#FFFFFF !important; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: #FFFFFF !important; } - /* Scrollbar */ - body::-webkit-scrollbar-track { - background-color: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - body::-webkit-scrollbar { - background-color: transparent !important; - } - body::-webkit-scrollbar-thumb { - background-color: hsla(0,0%,100%,.2) !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - body::-webkit-scrollbar-thumb:hover { - background-color: hsla(0,0%,100%,.5) !important; - } - - - - #myModal3::-webkit-scrollbar-track { - background-color: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - #myModal3::-webkit-scrollbar { - background-color: transparent !important; - } - #myModal3::-webkit-scrollbar-thumb { - background-color: hsla(0,0%,100%,.2) !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - #myModal3::-webkit-scrollbar-thumb:hover { - background-color: hsla(0,0%,100%,.5) !important; - } +/* Scrollbar */ + +body::-webkit-scrollbar-track { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +body::-webkit-scrollbar { + background-color: transparent !important; +} + +body::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 100%, .2) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +body::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 100%, .5) !important; +} + + + +#myModal3::-webkit-scrollbar-track { + background-color: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +#myModal3::-webkit-scrollbar { + background-color: transparent !important; +} + +#myModal3::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 100%, .2) !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +#myModal3::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 100%, .5) !important; +} #includedContent { -background-color: transparent; -background: transparent; + background-color: transparent; + background: transparent; } -#username:hover, #password:hover { + +#username:hover, +#password:hover { text-shadow: 0 0 1rem transparent; } /* Settings */ - /* Text Color */ -.alpaca-control-label, .alpaca-control.radio { +/* Text Color */ +.alpaca-control-label, +.alpaca-control.radio { color: white !important; } + .alpaca-form-buttons-container { background-color: transparent !important; } + .Rtable-cell { color: white !important; } + #colorkey { color: white !important; } + .settingstitle { text-shadow: none !important; } + #reginfo { color: white !important; } + #infodata { background-color: transparent !important; box-shadow: none !important; } + .input_icon { color: var(--button-color) !important; } + .input_icon:hover { color: var(--button-color-hover) !important; } + /* Sidebar */ #sidebar-wrapper { box-shadow: none !important; - background-color: rgba(0, 0, 0, 0.07); + background-color: rgba(0, 0, 0, 0.07); } + .sidebar-nav li:hover:before { -webkit-transition: none !important; transition: none !important; background-color: rgba(0, 0, 0, 0.07); } + .sidebar-nav li:before { background-color: rgba(0, 0, 0, 0.07); transition: none !important; - -webkit-transition: none !important; + -webkit-transition: none !important; +} + +.sidebar-nav li:first-child a { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(2):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(3):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(4):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(5):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(6):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(7):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(8):before { + background-color: rgba(0, 0, 0, 0.07); +} + +.sidebar-nav li:nth-child(9):before { + background-color: rgba(0, 0, 0, 0.07); } - .sidebar-nav li:first-child a { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(2):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(3):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(4):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(5):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(6):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(7):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(8):before { - background-color: rgba(0, 0, 0, 0.07); - } - .sidebar-nav li:nth-child(9):before { - background-color: rgba(0, 0, 0, 0.07); - } #modalloading { background: var(--main-bg-color); - color: white !important; - border: 1px solid transparent !important; - box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; - } -.modaltextloading, .modalloadingspinner { + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: white !important; + border: 1px solid transparent !important; + box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; +} + +.modaltextloading, +.modalloadingspinner { color: #FFF !important; } @@ -161,85 +199,115 @@ background: transparent; max-width: 100% !important; padding-right: 2rem !important; } + #stats { - background-color: rgba(0,0,0,.15) !important; - padding-left: .0rem !important; - padding-right: 1.11rem !important; - box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + padding-left: .0rem !important; + padding-right: 1.11rem !important; + box-shadow: none; } + #hd { padding-left: 0.8rem !important; } + .double-val-label>span.success { background-color: #28a745 !important; } -.servicetile:hover, .servicetile:focus { - text-shadow: 0 0 20px #000; -} -#servicetitle:hover, #servicetitle:focus { + +.servicetile:hover, +.servicetile:focus { text-shadow: 0 0 20px #000; } + +#servicetitle:hover, +#servicetitle:focus { + text-shadow: 0 0 20px #000; +} + #servicetitle { color: #fff !important; } -.btnoffline, .btnunknown, .btnonline { + +.btnoffline, +.btnunknown, +.btnonline { box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; } + .btnonline { background-color: #28a745 !important; } + .btn { background-color: var(--button-color) !important; } + .btn:hover { background-color: var(--button-color-hover) !important; } -.btn-primary,.btn-primary:hover { + +.btn-primary, +.btn-primary:hover { border-color: transparent; } -.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) { + +.btn-group>.btn-group:not(:first-child)>.btn, +.btn-group>.btn:not(:first-child) { color: white !important; } + .btn-group>.btn:first-child { color: white !important; } + #time { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; - box-shadow: none; + box-shadow: none; } + #slidertable { -background-color: rgba(0,0,0,.15) !important; -box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + box-shadow: none; } + #textslider { color: #fff !important; } + .dtg { - color: #fff !important; + color: #fff !important; } + .datemin { - color: #fff !important; + color: #fff !important; } + #center { - background-color: rgba(0,0,0,.0) !important; - box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; + background-color: rgba(0, 0, 0, .0) !important; + box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; } + /*Service tile*/ .col-lg-4 { - background-color: rgba(0,0,0,.15) !important; - margin: 1rem .1rem 1.5rem 1rem !important; - width: 9rem !important; - box-shadow: none; -} -.col-lg-4:hover { - background-color: hsla(0,0%,100%,.08) !important; + background-color: rgba(0, 0, 0, .15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } -.servicetile, .servicetile:hover, .servicetile:focus { + +.col-lg-4:hover { + background-color: hsla(0, 0%, 100%, .08) !important; + margin: 1rem .1rem 1.5rem 1rem !important; + width: 9rem !important; + box-shadow: none; +} + +.servicetile, +.servicetile:hover, +.servicetile:focus { color: #ffffff; text-shadow: none !important; text-decoration: none !important; @@ -251,6 +319,7 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } + .servicetile { color: #ffffff; text-shadow: none !important; @@ -263,68 +332,96 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } -#servicetitle:hover, #servicetitle:focus { + +#servicetitle:hover, +#servicetitle:focus { text-shadow: none !important; font-weight: inherit !important; } #clock { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; box-shadow: none; } + .date { color: #fff !important; } + #summary { background-color: #e84242 !important; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; } -.pace, .pace-progress { - background: rgba(0,0,0,.15) !important; + +.pace, +.pace-progress { + background: rgba(0, 0, 0, .15) !important; } -.pace, .pace-progress-inner { - box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; + +.pace, +.pace-progress-inner { + box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important; } + .pace .pace-activity { - border-top-color: #FFF !important; - border-left-color: #FFF !important; - } + border-top-color: #FFF !important; + border-left-color: #FFF !important; +} + .footer { color: white !important; } + .footer:hover { text-shadow: 0 0 15px transparent !important; } + #footer { color: transparent !important; } .navbar-brand { text-shadow: 0 0 15px #000000 !important; - } +} /* ButtonShadow */ -.btnoffline, .btnunknown, .btnonline { +.btnoffline, +.btnunknown, +.btnonline { box-shadow: none !important; -webkit-box-shadow: none !important; } + #myModal3 { background: var(--modal-bg-color) !important; - border: 1px solid transparent !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid transparent !important; } -.modalimgpath, .modaltext, #uploadbutton { + +.modalimgpath, +.modaltext, +#uploadbutton { color: #fff !important; } + .file-upload { background-color: var(--button-color) !important; color: white !important; } + .file-upload:hover { background-color: var(--button-color-hover) !important; color: white !important; } + @media only screen and (max-width: 775px) { #slidertable { display: none !important; @@ -333,4 +430,4 @@ box-shadow: none; #time { display: none !important; } -} +} \ No newline at end of file diff --git a/CSS/themes/monitorr/organizr-dashboard.css b/CSS/themes/monitorr/organizr-dashboard.css index 94261515..81b86b52 100644 --- a/CSS/themes/monitorr/organizr-dashboard.css +++ b/CSS/themes/monitorr/organizr-dashboard.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -19,70 +18,93 @@ body { max-width: 100% !important; padding-right: 2rem !important; } + #stats { - background-color: rgba(0,0,0,.15) !important; - padding-left: .0rem !important; - padding-right: 1.11rem !important; - box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + padding-left: .0rem !important; + padding-right: 1.11rem !important; + box-shadow: none; } + #hd { padding-left: 0.8rem !important; } + .double-val-label>span.success { background-color: #28a745 !important; } -.servicetile:hover, .servicetile:focus { - text-shadow: 0 0 20px #000; -} -#servicetitle:hover, #servicetitle:focus { + +.servicetile:hover, +.servicetile:focus { text-shadow: 0 0 20px #000; } + +#servicetitle:hover, +#servicetitle:focus { + text-shadow: 0 0 20px #000; +} + #servicetitle { color: #fff !important; } -.btnoffline, .btnunknown, .btnonline { + +.btnoffline, +.btnunknown, +.btnonline { box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; } + .btnonline { background-color: #28a745 !important; } + #time { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; - box-shadow: none; + box-shadow: none; } + #slidertable { -background-color: rgba(0,0,0,.15) !important; -box-shadow: none; + background-color: rgba(0, 0, 0, .15) !important; + box-shadow: none; } + #textslider { color: #fff !important; } + .dtg { - color: #fff !important; + color: #fff !important; } + .datemin { - color: #fff !important; + color: #fff !important; } + #center { - background-color: rgba(0,0,0,.0) !important; - box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; + background-color: rgba(0, 0, 0, .0) !important; + box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; } + /*Service tile*/ .col-lg-4 { - background-color: rgba(0,0,0,.15) !important; - margin: 1rem .1rem 1.5rem 1rem !important; - width: 9rem !important; - box-shadow: none; -} -.col-lg-4:hover { - background-color: hsla(0,0%,100%,.08) !important; + background-color: rgba(0, 0, 0, .15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } -.servicetile, .servicetile:hover, .servicetile:focus { + +.col-lg-4:hover { + background-color: hsla(0, 0%, 100%, .08) !important; + margin: 1rem .1rem 1.5rem 1rem !important; + width: 9rem !important; + box-shadow: none; +} + +.servicetile, +.servicetile:hover, +.servicetile:focus { color: #ffffff; text-shadow: none !important; text-decoration: none !important; @@ -94,6 +116,7 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } + .servicetile { color: #ffffff; text-shadow: none !important; @@ -106,54 +129,72 @@ box-shadow: none; -o-transition: none !important; transition: none !important; } -#servicetitle:hover, #servicetitle:focus { + +#servicetitle:hover, +#servicetitle:focus { text-shadow: none !important; font-weight: inherit !important; } #clock { - background-color: rgba(0,0,0,.15) !important; + background-color: rgba(0, 0, 0, .15) !important; color: #fff !important; box-shadow: none; } + .date { color: #fff !important; } + #summary { background-color: #e84242 !important; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; } -.pace, .pace-progress { - background: rgba(0,0,0,.15) !important; + +.pace, +.pace-progress { + background: rgba(0, 0, 0, .15) !important; } -.pace, .pace-progress-inner { - box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; + +.pace, +.pace-progress-inner { + box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important; } + .footer { color: transparent !important; } + .footer:hover { text-shadow: 0 0 15px transparent !important; } + #footer { color: transparent !important; } -.alpaca-control-label, .alpaca-control.radio { + +.alpaca-control-label, +.alpaca-control.radio { color: black !important; } + .navbar-brand { text-shadow: 0 0 15px #000000 !important; - } +} + .Rtable-cell { color: #000000 !important; } + #colorkey { color: #000000 !important; } /* ButtonShadow */ -.btnoffline, .btnunknown, .btnonline { +.btnoffline, +.btnunknown, +.btnonline { box-shadow: none !important; -webkit-box-shadow: none !important; } @@ -166,4 +207,4 @@ box-shadow: none; #time { display: none !important; } -} +} \ No newline at end of file diff --git a/CSS/themes/moviematch/aquamarine.css b/CSS/themes/moviematch/aquamarine.css index 50a53941..c2d938ae 100644 --- a/CSS/themes/moviematch/aquamarine.css +++ b/CSS/themes/moviematch/aquamarine.css @@ -13,19 +13,4 @@ /* MOVIEMATCH AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --link-color: #12afa0; - --link-color-hover: #fff; - --text-muted: #bbb; - --logo-color: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/dark.css b/CSS/themes/moviematch/dark.css index bec90e61..c9e7a951 100644 --- a/CSS/themes/moviematch/dark.css +++ b/CSS/themes/moviematch/dark.css @@ -13,19 +13,4 @@ /* MOVIEMATCH DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --text-color: #b7b7b7; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: #646464; - --accent-color-hover: #ffffff73; - --link-color: #fff; - --link-color-hover: rgba(255, 255, 255, 0.45); - --text-muted: #bbb; - --logo-color: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/dracula.css b/CSS/themes/moviematch/dracula.css new file mode 100644 index 00000000..42c4523b --- /dev/null +++ b/CSS/themes/moviematch/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* MOVIEMATCH DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/hotline.css b/CSS/themes/moviematch/hotline.css index 86bfdef9..51cdfffb 100644 --- a/CSS/themes/moviematch/hotline.css +++ b/CSS/themes/moviematch/hotline.css @@ -13,19 +13,4 @@ /* MOVIEMATCH HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --link-color: #F44336; - --link-hover: #0b3161; - --text-muted: #bbb; - --logo-color: invert(32%) sepia(35%) saturate(3786%) hue-rotate(341deg) brightness(100%) contrast(92%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/moviematch-base.css b/CSS/themes/moviematch/moviematch-base.css index 4d0f3190..81c2f167 100644 --- a/CSS/themes/moviematch/moviematch-base.css +++ b/CSS/themes/moviematch/moviematch-base.css @@ -17,33 +17,40 @@ body { background: var(--main-bg-color); - color: var(--text-color) + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) } + + /* TEXT COLOR */ .matches-title, .matches-list:empty::before, .card-stack:empty::after, footer, .Field_Label { - color: var(--text-color); + color: var(--text); } /* ACCENTS */ .matches-section hr { - border: 0.5px solid var(--accent-color); + border: 0.5px solid rgb(var(--accent-color)); } .matches-section hr::before, .matches-title .matches-count { - background: var(--accent-color); + background: rgb(var(--accent-color)); color: var(--button-text); } -.logo, .Logo { - filter: var(--logo-color); - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* FORMS */ @@ -69,7 +76,7 @@ input:focus { .Select_Element { border: 2px solid var(--button-color); - color: var(--button-color-text); + color: var(--button-text); } /* BUTTONS */ @@ -86,8 +93,7 @@ input:focus { .login-form .room-code-container .generate-button:hover, .login-form .submit-button:hover, .ButtonPrimary:hover, -.ButtonPrimary:active -.ButtonSecondary:hover, +.ButtonPrimary:active .ButtonSecondary:hover, .ButtonSecondary:active, .ButtonTertiary:hover, .ButtonTertiary:active, @@ -99,6 +105,7 @@ input:focus { color: var(--button-text-hover); border-color: var(--button-color-hover); } + @media (hover: hover) { .ButtonSecondary:hover { color: var(--button-text-hover); @@ -126,11 +133,13 @@ input:focus { } .Card_MoreInfoButton:hover { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + .RoomInfoBar { background-color: rgba(0, 0, 0, 0.25); } + /* MENUS POPOVER */ .PopoverMenuButton:hover { background: rgb(255 255 255 / 15%) !important; diff --git a/CSS/themes/moviematch/organizr-dark.css b/CSS/themes/moviematch/organizr-dark.css index 70d63747..8d9f43e9 100644 --- a/CSS/themes/moviematch/organizr-dark.css +++ b/CSS/themes/moviematch/organizr-dark.css @@ -13,19 +13,4 @@ /* MOVIEMATCH ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --text-color: #96a2b4; - --text-color-hover: #fff; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --link-color: #2cabe3; - --link-color-hover: #fff; - --text-muted: #bbb; - --logo-color: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/plex.css b/CSS/themes/moviematch/plex.css index c38da890..5e2b59da 100644 --- a/CSS/themes/moviematch/plex.css +++ b/CSS/themes/moviematch/plex.css @@ -13,19 +13,4 @@ /* MOVIEMATCH PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color:url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --link-color: #ffc107; - --link-color-hover: #fff; - --text-muted: #bbb; - --logo-color: invert(58%) sepia(97%) saturate(908%) hue-rotate(3deg) brightness(98%) contrast(90%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/moviematch/space-gray.css b/CSS/themes/moviematch/space-gray.css index 3110a1c7..ffb7db8f 100644 --- a/CSS/themes/moviematch/space-gray.css +++ b/CSS/themes/moviematch/space-gray.css @@ -13,19 +13,4 @@ /* MOVIEMATCH SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/moviematch/moviematch-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: #81a6b7; - --accent-color-hover: #607D8B; - --link-color: #81a6b7; - --link-color-hover: #fff; - --text-muted: #bbb; - --logo-color: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/netdata/aquamarine.css b/CSS/themes/netdata/aquamarine.css index 1fa8e816..2565c9d4 100644 --- a/CSS/themes/netdata/aquamarine.css +++ b/CSS/themes/netdata/aquamarine.css @@ -13,9 +13,4 @@ /* NETDATA AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --accent-color: #FFEB3B; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/netdata/dark.css b/CSS/themes/netdata/dark.css index d8cc1645..f41d0109 100644 --- a/CSS/themes/netdata/dark.css +++ b/CSS/themes/netdata/dark.css @@ -13,9 +13,4 @@ /* NETDATA DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --accent-color: #FFCC00; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/netdata/dracula.css b/CSS/themes/netdata/dracula.css new file mode 100644 index 00000000..ea4f69fe --- /dev/null +++ b/CSS/themes/netdata/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* NETDATA AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/netdata/hotline.css b/CSS/themes/netdata/hotline.css index 6cd2d56d..34898165 100644 --- a/CSS/themes/netdata/hotline.css +++ b/CSS/themes/netdata/hotline.css @@ -13,9 +13,4 @@ /* NETDATA HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --accent-color: #FFEB3B; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/netdata/netdata-base.css b/CSS/themes/netdata/netdata-base.css index 4a1b60ca..479489e9 100644 --- a/CSS/themes/netdata/netdata-base.css +++ b/CSS/themes/netdata/netdata-base.css @@ -11,7 +11,8 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ -body { +body, +[class*="styled__SocialMediaContainer-"] { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -20,16 +21,50 @@ body { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - color: #ffffff !important; + color: var(--text); } * { - outline: none; + outline: none !important; +} + +/* TEXT */ + +h1, +h2, +h3, +h4, +h5, +h6, +label:not(.toggle-on.btn, .toggle-off.btn), +legend { + color: var(--text-hover) !important; +} + +.dashboard-context-info { + color: var(--text); +} + +a, +.dashboard-context-info a { + color: var(--link-color) !important; +} + +a:hover, +.dashboard-context-info a:hover { + color: var(--link-color-hover) !important; } .loadOverlay { - color: #eee !important; + color: var(--text) !important; background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* Navbar */ @@ -47,7 +82,7 @@ body { .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { background-color: rgba(0, 0, 0, .25) !important; - color: #ffffff !important; + color: var(--text-hover) !important; } .navbar-default .navbar-nav>.open>a, @@ -82,8 +117,9 @@ body { .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { - background-color: rgba(0, 0, 0, 0.45) !important; + background-color: rgba(0, 0, 0, 0.15) !important; border: 1px solid #00000000 !important; + color: rgb(var(--accent-color)); } .nav>li>a:hover, @@ -95,7 +131,10 @@ body { .nav>li>a:hover, .nav>li>a:focus { background-color: rgba(255, 255, 255, 0.08) !important; - border-color: transparent !important; +} + +.nav-tabs>li>a:hover { + border-color: transparent; } .nav-tabs { @@ -108,13 +147,63 @@ body { .sign-in-btn { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.dropdown-menu { - background: var(--modal-bg-color) !important; +.dropdown-menu, +[class*="__Dropdown-"], +[class*="documentation__Container-sc-"], +[class*="styled__PickerBox-"] { + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 0px !important; } +[class*="styled__ShortPickElement-"] { + color: var(--link-color); +} + +[class*="styled__ShortPickElement-"]:hover { + color: var(--link-color-hover); +} + +.DateInput_input__focused { + border: 1px solid rgb(var(--accent-color)); + +} + +.CalendarDay__selected, +.CalendarDay__selected:active, +.CalendarDay__selected:hover, +.CalendarDay__selected_span:active, +.CalendarDay__selected_span:hover { + background: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.CalendarDay__default:hover { + background: var(--accent-color-hover); + color: var(--label-text-color); +} + +[class*="item__PanelRowContainer-"]:hover { + background: rgba(255, 255, 255, 0.15); +} + + + .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: rgba(0, 0, 0, 0.25) !important; @@ -122,18 +211,41 @@ body { .modal-content { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-header { - border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; + background: var(--modal-header-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)) !important; } .modal-footer { - border-top: 1px solid rgba(255, 255, 255, 0.3) !important; + background: var(--modal-footer-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)) !important; } .nav-tabs { - border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; + border-bottom: 1px solid rgb(var(--accent-color)) !important; } .panel { @@ -166,12 +278,26 @@ table { .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { - background-color: var(--modal-bg-color) !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-top: 1px solid #00000000 !important; } .multi-column-dropdown li a:hover { - background-color: var(--modal-bg-color) !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .close, @@ -184,14 +310,38 @@ table { .dashboard-sidebar .nav>.active>a, .dashboard-sidebar .nav>.active:hover>a, .dashboard-sidebar .nav>.active:focus>a { - color: var(--accent-color) !important; - border-left: 2px solid var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; + border-left: 2px solid rgb(var(--accent-color)) !important; +} + +[class*="sidebar__Wrapper-"] { + background-color: rgba(0, 0, 0, 0.25); +} + +[class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) { + background: transparent; +} + +[class*="collapsible__Animated-"] { + background: var(--main-bg-color); +} + +[class*="header__Wrapper-"] { + background: var(--main-bg-color); +} + +[class*="styled__StyledButton-"] .button-icon { + fill: rgb(var(--accent-color)) !important; +} + +[class*="styled__StyledButton-"]:hover .button-icon { + fill: var(--accent-color-hover) !important; } /*code*/ code { - color: #fff !important; - background-color: rgba(255, 255, 255, 0.15) !important; + color: var(--label-text-color) !important; + background-color: rgb(var(--accent-color)) !important; } /* System Overview metrics */ @@ -225,23 +375,25 @@ code { /* Sidebar */ .dashboard-sidebar .nav>li>a { - color: #ffffff !important; + color: var(--text); } -.dashboard-sidebar .nav>li>a:hover, -.dashboard-sidebar .nav>li>a:focus { - color: var(--accent-color) !important; - border-left: 1px solid var(--accent-color) !important; +.dashboard-sidebar .nav>li>a:focus, +.dashboard-sidebar .nav>li>a:hover { + padding-left: 19px; + color: var(--text-hover); + text-decoration: none; + background-color: transparent; + border-left: 1px solid rgb(var(--accent-color)); } small, .small { - font-size: 85%; - color: white; + color: var(--text-muted); } .action-button { - color: white !important; + color: var(--button-text-hover) !important; } hr { @@ -259,46 +411,74 @@ hr { } /* Buttons */ -.btn-default { - background-color: rgba(0, 0, 0, 0.25) !important; +.btn-default:not([class*="toggle"]) { + background-color: var(--button-color); + color: var(--button-text); + border-color: var(--button-color); } -.btn-default:hover { - background-color: rgba(255, 255, 255, 0.08) !important; +a[class*="styled__StyledButton-"], +[data-testid*="date-picker::click-apply::global-view-"] { + background-color: var(--button-color) !important; + color: var(--button-text) !important; + border-color: var(--button-color) !important; } -.btn-default:active, -.btn-default.active, -.open>.dropdown-toggle.btn-default { - background-color: rgba(0, 0, 0, 0.45); - border-color: rgba(0, 0, 0, 0.45) !important; +a[class*="styled__StyledButton-"]:hover, +a[class*="styled__StyledButton-"]:active, +[data-testid*="date-picker::click-apply::global-view-"]:hover, +[data-testid*="date-picker::click-apply::global-view-"]:active { + background-color: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-default:hover:not([class*="toggle"]) { + background-color: var(--button-color-hover); + color: var(--button-text-hover); + border-color: var(--button-color-hover); +} + +.btn-default:active:not(.open>.dropdown-toggle.btn-default):not([class*="toggle"]), +.btn-default.active:not(.open>.dropdown-toggle.btn-default):not([class*="toggle"]) { + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + color: var(--button-text-hover); } /* NAV */ [class^="with-panel"] { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -[class^="styled__ListContainer"] { - background: var(--main-bg-color); - color: white; -} - -[class^="styled__PanelContainer"] { +[class*="styled__ListContainer"], +[class*="container__Container-"] div, +[class*="styled__PanelContainer"], +[class*="styled__StyledHeader"] { background: var(--modal-bg-color); - color: white; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); } -[class^="styled__StyledHeader"] { - background: var(--main-bg-color); - color: white; -} [class^="styled__BottomPanel"] { background: #0000; } [class^=".styled__StyledSpaceBarPlus"] { - background: var(--accent-color); - border-color: var(--accent-color); + background: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } \ No newline at end of file diff --git a/CSS/themes/netdata/organizr-dark.css b/CSS/themes/netdata/organizr-dark.css index 3ce76862..792c4e21 100644 --- a/CSS/themes/netdata/organizr-dark.css +++ b/CSS/themes/netdata/organizr-dark.css @@ -13,8 +13,4 @@ /* NETDATA ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --accent-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/netdata/organizr-dashboard.css b/CSS/themes/netdata/organizr-dashboard.css index 61bd4ddc..cfaf338a 100644 --- a/CSS/themes/netdata/organizr-dashboard.css +++ b/CSS/themes/netdata/organizr-dashboard.css @@ -14,9 +14,7 @@ /* NETDATA ORGANIZR DASHBOARD THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); :root { --main-bg-color: transparent; - --modal-bg-color: #1f1f1f; - - --accent-color: #FFEB3B; } \ No newline at end of file diff --git a/CSS/themes/netdata/plex.css b/CSS/themes/netdata/plex.css index 14783d60..11b12e1b 100644 --- a/CSS/themes/netdata/plex.css +++ b/CSS/themes/netdata/plex.css @@ -13,9 +13,4 @@ /* NETDATA PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --accent-color: #cc7b19; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/netdata/space-gray.css b/CSS/themes/netdata/space-gray.css index 13a4948c..fa304cd5 100644 --- a/CSS/themes/netdata/space-gray.css +++ b/CSS/themes/netdata/space-gray.css @@ -13,8 +13,4 @@ /* NETDATA SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --accent-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/aquamarine.css b/CSS/themes/nzbget/aquamarine.css index 2c4e1ac1..bcc94fdc 100644 --- a/CSS/themes/nzbget/aquamarine.css +++ b/CSS/themes/nzbget/aquamarine.css @@ -13,9 +13,4 @@ /* NZBGET AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: #FFEB3B; - --button-color: #00bcd4; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/dark.css b/CSS/themes/nzbget/dark.css index 48a9d894..4eba90ee 100644 --- a/CSS/themes/nzbget/dark.css +++ b/CSS/themes/nzbget/dark.css @@ -13,9 +13,4 @@ /* NZBGET DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --accent-color: #f9be03; - --button-color: #cc7b19; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/dracula.css b/CSS/themes/nzbget/dracula.css new file mode 100644 index 00000000..8980876f --- /dev/null +++ b/CSS/themes/nzbget/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* NZBGET DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/hotline.css b/CSS/themes/nzbget/hotline.css index 5bf249fc..70423748 100644 --- a/CSS/themes/nzbget/hotline.css +++ b/CSS/themes/nzbget/hotline.css @@ -13,9 +13,4 @@ /* NZBGET HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: #FFEB3B; - --button-color: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/nzbget-base.css b/CSS/themes/nzbget/nzbget-base.css index 4b0c1dfc..83ddae13 100644 --- a/CSS/themes/nzbget/nzbget-base.css +++ b/CSS/themes/nzbget/nzbget-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,277 +11,439 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ body { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - background-color: rgba(0,0,0,.0); - color:#FFFFFF !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; } /* scroller */ ::-webkit-scrollbar-corner { - background-color: rgba(0, 0, 0, .25); + background-color: rgba(0, 0, 0, .25); } + ::-webkit-scrollbar { width: 10px; height: 10px; background: #0c1218; } + ::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; - background-color: hsla(0,0%,100%,.08); + background-color: hsla(0, 0%, 100%, .08); } + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid rgb(var(--accent-color)); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + .modal { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - background-color: var(--modal-bg-color) !important; - color:#FFFFFF !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; } + .modal-footer { - background-color: transparent; - border-top: none; + background-color: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); + -webkit-box-shadow: inset 0 1px 0 transparent; + -moz-box-shadow: inset 0 1px 0 transparent; + box-shadow: inset 0 1px 0 transparent; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-hover); } /* TABLES */ .table a { - color: #ffffff; + color: var(--link-color); } + .table a:hover { - color: #e5a00d; + color: var(--link-color-hover) !important; } + .table-striped tbody tr:nth-child(odd) { background-color: rgba(0, 0, 0, 0.25); } -.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { + +.table-striped tbody tr:nth-child(odd) td, +.table-striped tbody tr:nth-child(odd) th { background-color: transparent; } + .table-striped tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.08); } -.table tbody tr:hover, .table tbody tr:hover td, .table tbody tr:hover a { - color: white; - background-color: hsla(0,0%,100%,.08); + +.table tbody tr:hover, +.table tbody tr:hover td, +.table tbody tr:hover a { + color: var(--text-hover); + background-color: hsla(0, 0%, 100%, .08); } -.table-striped tbody tr.checked:nth-child(2n+1) td, .checked .progress { - background-color: hsla(0,0%,100%,.08); + +.table-striped tbody tr.checked:nth-child(2n+1) td, +.checked .progress { + background-color: hsla(0, 0%, 100%, .08); } -tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress { - background-color: hsla(0,0%,100%,.08); + +tr.checked, +tr.checked td, +tr.checked:nth-child(odd) .progress { + background-color: hsla(0, 0%, 100%, .08); } -.table tbody tr.checked:hover, .table tbody tr.checked:hover td { - background-color: hsla(0,0%,100%,.08); + +.table tbody tr.checked:hover, +.table tbody tr.checked:hover td { + background-color: hsla(0, 0%, 100%, .08); } -.table tbody tr.checked:hover, .table tbody tr.checked:hover td { - background-color: hsla(0,0%,100%,.08); + +.table tbody tr.checked:hover, +.table tbody tr.checked:hover td { + background-color: hsla(0, 0%, 100%, .08); } -.table.check-simple tbody tr.checked:hover, .table.check-simple tbody tr.checked:hover td { - background-color: hsla(0,0%,100%,.08); + +.table.check-simple tbody tr.checked:hover, +.table.check-simple tbody tr.checked:hover td { + background-color: hsla(0, 0%, 100%, .08); } -.table th, .table td { + +.table th, +.table td { border-top: none; } + .table-bordered { border-left: none; - border: none; + border: none; } .pagination a { border: none; background: rgba(0, 0, 0, .25); } -.pagination a:hover, .pagination .active a { - background-color: hsla(0,0%,100%,.08); -} + +.pagination a:hover, .pagination .active a { - color: #ffffff; + background-color: hsla(0, 0%, 100%, .08); +} + +.pagination .active a { + color: rgb(rgb(var(--accent-color))); } /* PROGRESS BAR */ .progress { - background: hsla(0,0%,100%,.08); + background: hsla(0, 0%, 100%, .08); } + .progress-warning.progress-striped .bar { background-color: #cc7b19; } + .progress-success.progress-striped .bar { background-color: #51a351; } +.bar-text-left, +.bar-text-right { + color: #fff; +} + /* NAVBAR */ .navbar-fixed-top .navbar-inner { - color: #fff !important; + color: var(--text-hover) !important; } -.navbar-inner { - background-image: none; - background-color: transparent; + +.navbar-inner { + background-image: none; + background-color: transparent; } + .navbar-container { background: var(--main-bg-color); -} -.navbar .nav > li > a:hover { - color: var(--accent-color); -} -.navbar .nav .active > a, .navbar .nav .active > a:hover { - background: hsla(0,0%,100%,.08); - color: var(--accent-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -[class^="icon-"], [class*=" icon-"], [class^="img-"], [class*=" img-"] { +.navbar .nav>li>a:hover { + color: rgb(var(--accent-color)) !important; + background: hsla(0, 0%, 100%, .08); +} + +.navbar .nav .active>a { + background: hsla(0, 0%, 100%, .08); + color: rgb(var(--accent-color)); +} + +.navbar .nav .active>a:hover { + background: hsla(0, 0%, 100%, .08); + color: var(--accent-color-hover) !important; +} + +div.check:hover { + border: 1px solid var(--accent-color-hover); +} + +#DownloadsTable>tbody>tr.checked td .check { + border: 1px solid rgb(var(--accent-color)); +} + +[class^="icon-"], +[class*=" icon-"], +[class^="img-"], +[class*=" img-"] { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/nzbget/icons.png); } + .navbar-search .search-query { - color: #ffffff; + color: var(--text); background-color: rgba(0, 0, 0, 0.25) !important; - border: 0px solid #151515; + } -.navbar-search .search-query:focus, .navbar-search .search-query.focused { - color: #000 !important; + +.navbar-search .search-query:focus, +.navbar-search .search-query.focused { + color: var(--text-hover) !important; text-shadow: none; - background-color: white !important; + background-color: rgba(0, 0, 0, 0.45) !important; } + +.focused .search-caret-button .caret { + margin-left: 5px; + border-top-color: rgb(255, 255, 255); + border-bottom-color: rgb(255, 255, 255); +} + .search-caret-button { outline: none; } + .menu-header { - color: #ffffff; + color: var(--text-hover); } + .dropdown-menu { - background-color: #191a1c; - background: var(--modal-bg-color); - color: #FFF; + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } + .dropdown-menu a { - color: #ffffff; + color: var(--text); } -.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: #ffffff; - background-color: hsla(0,0%,100%,.05); + +.dropdown-menu li>a:hover, +.dropdown-menu .active>a, +.dropdown-menu .active>a:hover { + color: var(--text-hover); + background-color: hsla(0, 0%, 100%, .05); } + .dropdown-menu .divider { height: 0px; border-bottom: none; } +#ConfigContent .config-header { + border-bottom: 1px solid rgb(var(--accent-color)); + color: var(--text-hover); +} + +#StatDialog_Custom a, +#AddDialog_Files a { + color: var(--link-color); +} + +#StatDialog_Custom a:hover, +#AddDialog_Files a:hover { + color: var(--link-color-hover); + cursor: pointer; +} + /* BUTTONS */ -.btn-group > .dropdown-toggle { - box-shadow: none; -} - -.config-header .btn{ - background:#FFF; - color:#adb1b1; - text-shadow:unset; - } - -#ConfigData > div > button.btn{ - background: rgba(0, 0, 0, .25) !important; - color: #FFF !important; - font-weight:bold; - text-shadow:unset; -} -#ConfigData > div > button.btn:hover{ - background: hsla(0,0%,100%,.08) !important; - color: #FFF !important; - font-weight:bold; - text-shadow:unset; -} - -#ConfigData > div > div > table > tbody > tr > td>.btn{ - background:#414141; - color:#adb1b1; - text-shadow:unset; - font-weight:bold; -} -#Config_Save:hover{ - background-color:#51a351; - color:#FFF; -} -#Config_Save { - background:rgba(0, 0, 0, 0.25); - color:#FFF; - margin:auto; -} -#ConfigData > div> div > button.btn.btn-danger { - background:#ad292c; - text-shadow:unset; -} -#ConfigData > div> div > button.btn.btn-danger:hover { - background:#d33a3e; - text-shadow:unset; -} -#ConfigData > div:nth-child(3) > div > button, -#ConfigData > div:nth-child(4) > div > button, -#ConfigData > div:nth-child(5) > div > button { - text-shadow:unset; - background: rgba(0, 0, 0, 0.25); - color:white; -} -#ConfigData > div:nth-child(3) > div > button:hover, -#ConfigData > div:nth-child(4) > div > button:hover, -#ConfigData > div:nth-child(5) > div > button:hover { - text-shadow:unset; - background: hsla(0,0%,100%,.08); - color:white; -} -#ConfigData input.btn.btn-primary{ - background: var(--button-color) !important; - text-shadow:unset; - color:white; -} -#ConfigData input.btn{ - background: rgba(0, 0, 0, 0.25) !important; - text-shadow:unset; - color:#a8a8a8; -} -#Config_ViewButton{ - background:rgba(0, 0, 0, 0.25); - color:#FFF; -} - -#Config_ViewButton:hover{ - background: hsla(0,0%,100%,.08); - color:#FFF; -} -#DownloadsEditDialog input.btn.btn-primary{ - background: var(--button-color) !important; - text-shadow:unset; - color:white; -} -#HistoryEdit_ParamData input.btn.btn-primary{ - background: var(--button-color) !important; - text-shadow:unset; - color:white; -} - - .btn { - color: #ffffff; +.btn-primary, +.btn-primary:hover, +.btn-warning, +.btn-warning:hover, +.btn-danger, +.btn-danger:hover, +.btn-success, +.btn-success:hover, +.btn-info, +.btn-info:hover, +.btn-inverse, +.btn-inverse:hover { text-shadow: none; - background-color: rgba(0, 0, 0, 0.25); +} +.btn-group>.dropdown-toggle { + box-shadow: none; +} + +.config-header .btn { + background: #FFF; + color: #adb1b1; + text-shadow: unset; +} + +#ConfigData>div>button.btn { + background: var(--button-color) !important; + color: var(--button-text) !important; + font-weight: bold; + text-shadow: unset; +} + +#ConfigData>div>button.btn:hover { + background: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + font-weight: bold; + text-shadow: unset; +} + +#ConfigData>div>div>table>tbody>tr>td>.btn { + background: var(--button-color); + color: var(--button-text); + text-shadow: unset; + font-weight: bold; +} + +#Config_Save:hover { + background-color: rgb(81, 163, 81); + color: #eee; +} + +#Config_Save { + background: rgba(81, 163, 81, 0.8); + color: #FFF; + margin: auto; +} + +#ConfigData>div>div>button.btn.btn-danger { + background: #ad292c; + text-shadow: unset; +} + +#ConfigData>div>div>button.btn.btn-danger:hover { + background: #d33a3e; + text-shadow: unset; +} + +#ConfigData>div:nth-child(3)>div>button, +#ConfigData>div:nth-child(4)>div>button, +#ConfigData>div:nth-child(5)>div>button { + text-shadow: unset; + background: rgba(0, 0, 0, 0.25); + color: white; +} + +#ConfigData>div:nth-child(3)>div>button:hover, +#ConfigData>div:nth-child(4)>div>button:hover, +#ConfigData>div:nth-child(5)>div>button:hover { + text-shadow: unset; + background: hsla(0, 0%, 100%, .08); + color: white; +} + +#ConfigData input.btn.btn-primary { + background: var(--button-color-hover) !important; + text-shadow: unset; + color: var(--button-text-hover) !important; + border: 1px solid var(--button-color-hover); +} + +#ConfigData input.btn { + background: rgba(0, 0, 0, 0.25) !important; + text-shadow: unset; + color: #a8a8a8; +} + +#Config_ViewButton { + background: rgba(0, 0, 0, 0.25); + color: #FFF; +} + +#Config_ViewButton:hover { + background: hsla(0, 0%, 100%, .08); + color: #FFF; +} + +#DownloadsEditDialog input.btn.btn-primary { + background: var(--button-color) !important; + text-shadow: unset; + color: white; +} + +#HistoryEdit_ParamData input.btn.btn-primary { + background: var(--button-color) !important; + text-shadow: unset; + color: white; +} + +.btn { + color: var(--button-text); + text-shadow: none; + background-color: var(--button-color); background-image: none; - border-color: transparent; - border-bottom-color: transparent; + /* border-color: transparent; + border-bottom-color: transparent; */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; + border-color: transparent; } + .btn:hover { - color: #FFF; - background-color: hsla(0,0%,100%,.08); + color: var(--button-text-hover); + background-color: var(--button-color-hover); } @@ -291,41 +452,52 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress { } .btn-group.open .btn.dropdown-toggle { - background-color: #FFF; - background-color: hsla(0,0%,100%,.08); + background-color: var(--button-color-hover); } -#ConfigData > div > div > table > tbody > tr > td>.btn{ - background:rgba(0, 0, 0, 0.25); - color:#FFF; - text-shadow:unset; - font-weight:bold; -} -#ConfigData > div > div > table > tbody > tr > td>.btn:hover{ - background: hsla(0,0%,100%,.08); - color:#FFF; +#ConfigData>div>div>table>tbody>tr>td>.btn { + background: var(--button-color); + color: var(--button-text); + text-shadow: unset; + font-weight: bold; } -input, textarea, select, .uneditable-input { - color: #ffffff; - background-color: rgb(0, 0, 0); - background-image: var(main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - background-color: rgba(0, 0, 0, 0.25) !important; - color: #FFFFFF !important; - border: none; +#ConfigData>div>div>table>tbody>tr>td>.btn:hover { + background: var(--button-color-hover); + color: var(--button-text-hover); } + +input, +textarea, +.uneditable-input { + background: rgba(0, 0, 0, 0.25) !important; + color: var(--text) !important; + border: transparent; +} + +input:focus:not(.btn), +textarea:focus, +.uneditable-input:focus { + background: rgba(255, 255, 255, 0.10) !important; + color: var(--text-hover) !important; + border: transparent; +} + +select { + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid #00000000; + color: var(--text) +} + select:focus { - background: #191a1c !important; - color: #FFF !important; + background: #1b1b1b !important; + color: var(--text-hover) !important; } -input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { outline: thin dotted #333; outline: none; outline-offset: -2px; @@ -333,24 +505,28 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu -moz-box-shadow: none; box-shadow: none; } -input:focus, textarea:focus { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); + +input:focus, +textarea:focus { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } + .alert-info { - font-weight: bold; - border-radius: unset; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - border:0px; - background-color:hsla(0,0%,100%,.05); - text-shadow:unset; - color:#FFF; - text-transform:capitalize; + font-weight: bold; + border-radius: unset; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + border: 0px; + background-color: hsla(0, 0%, 100%, .05); + text-shadow: unset; + color: var(--text-hover); + text-transform: capitalize; } + .alert-inverse { - background-color: #414141; + background-color: #414141; background-image: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -360,52 +536,93 @@ input:focus, textarea:focus { -moz-background-size: auto, cover; -o-background-size: auto, cover; border-color: transparent; - opacity: 1; + opacity: 1; } /* SETTINGS */ label { - color: #FFF; + color: var(--text-hover); +} + +.badge-active, +#MessagesTabBadge { + background-color: var(--button-color-hover); + color: var(--button-text-hover); + -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgb(0 0 0 / 20%); +} + +.label:not(.label-success, .label-warning, .label-important, .label-info, .label-inverse), +.badge:not(.badge-success, .badge-warning, .badge-important, .badge-info, .badge-inverse) { + font-size: 10.998px; + font-weight: bold; + line-height: 14px; + color: #ffffff; + text-shadow: 0 -1px 0 rgb(0 0 0 / 25%); + white-space: nowrap; + vertical-align: baseline; + background-color: rgb(255 255 255 / 25%); } #ConfigNav { - border: 1px solid rgba(0, 0, 0, .25); + border: 1px solid rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25); } + #ConfigNav.nav-list a { - color: #fff; + color: var(--text); text-decoration: none; } -.nav-list > li > a, .nav-list .nav-header { + +.nav-list>li>a, +.nav-list .nav-header { text-shadow: none; } -.nav-list > .active > a, .nav-list > .active > a:hover { + +.nav-list>.active>a, +.nav-list>.active>a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #0088cc; } -.nav-list > .active > a, .nav-list > .active > a:hover { - color: var(--accent-color) !important; + +.nav-list>.active>a, +.nav-list>.active>a:hover { + color: rgb(var(--accent-color)) !important; background-color: transparent; } -.nav > li > a:hover { - background-color: hsla(0,0%,100%,.08); + +.nav>li>a:hover { + background-color: hsla(0, 0%, 100%, .08); + color: var(--text-hover) !important; } + +.nav-list .divider { + background-color: rgb(var(--accent-color)); + border-bottom: 1px solid rgb(var(--accent-color)); +} + span.help-option-title { color: #eee; } -.help-block, .help-inline { + +.help-block, +.help-inline { color: #eee; } + .confirm-help-block { color: #eee; font-size: 13px; line-height: 16px; margin-bottom: 0; } -.input-prepend .add-on, .input-append .add-on { + +.input-prepend .add-on, +.input-append .add-on { background-color: rgba(0, 0, 0, 0.25); background-image: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; @@ -419,21 +636,29 @@ span.help-option-title { color: #FFFFFF !important; border: none; } + .config-settitle { background-color: rgba(0, 0, 0, 0.25); border-bottom: none; } + a { - color: var(--accent-color); + color: var(--link-color); text-decoration: none; } + a:hover { - color: #fff; + color: var(--link-color-hover); text-decoration: underline; } -.label-warning, .badge-warning { - background-color: var(--button-color); -} + .caret { border-top: 4px solid #ffffff; } + +hr { + margin: 18px 0; + border: 0; + border-top: 1px solid gb(var(--accent-color)); + border-bottom: 1px solid gb(var(--accent-color)); +} \ No newline at end of file diff --git a/CSS/themes/nzbget/organizr-dark.css b/CSS/themes/nzbget/organizr-dark.css index 82e41e32..66cceaa6 100644 --- a/CSS/themes/nzbget/organizr-dark.css +++ b/CSS/themes/nzbget/organizr-dark.css @@ -13,9 +13,4 @@ /* NZBGET ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --accent-color: #2cabe3; - --button-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/plex.css b/CSS/themes/nzbget/plex.css index 0c19b9c1..5f7f8fe2 100644 --- a/CSS/themes/nzbget/plex.css +++ b/CSS/themes/nzbget/plex.css @@ -13,9 +13,4 @@ /* NZBGET PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --accent-color: #f9be03; - --button-color: #cc7b19; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/nzbget/space-gray.css b/CSS/themes/nzbget/space-gray.css index b683ee8c..3bbbcadc 100644 --- a/CSS/themes/nzbget/space-gray.css +++ b/CSS/themes/nzbget/space-gray.css @@ -13,9 +13,4 @@ /* NZBGET SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbget/nzbget-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --accent-color: #81a6b7; - --button-color: #607D8B; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/aquamarine.css b/CSS/themes/nzbhydra2/aquamarine.css index a856168e..645d4008 100644 --- a/CSS/themes/nzbhydra2/aquamarine.css +++ b/CSS/themes/nzbhydra2/aquamarine.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 AQUAMARINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #009688; - --default-button-color-hover: radial-gradient(ellipse at center, #5066e0 0%, #01ccb9 100%) center center/cover no-repeat fixed; - --accent-color: #118074; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/nzbhydra2/dark.css b/CSS/themes/nzbhydra2/dark.css index 23b5de3a..d6c284bd 100644 --- a/CSS/themes/nzbhydra2/dark.css +++ b/CSS/themes/nzbhydra2/dark.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #cc7b19; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/dracula.css b/CSS/themes/nzbhydra2/dracula.css new file mode 100644 index 00000000..ec028464 --- /dev/null +++ b/CSS/themes/nzbhydra2/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* NZBHYDRA2 DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/nzbhydra2/hotline.css b/CSS/themes/nzbhydra2/hotline.css index 5b138eeb..00fc3efa 100644 --- a/CSS/themes/nzbhydra2/hotline.css +++ b/CSS/themes/nzbhydra2/hotline.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 HOTLINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: radial-gradient(ellipse at center, #F44336 0%, #3F51B5 100%) center center/cover no-repeat fixed; - --default-button-color-hover: radial-gradient(ellipse at center, #fb6054 0%, #5269e6 100%) center center/cover no-repeat fixed; - --accent-color: var(--default-button-color); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/nzbhydra2-base.css b/CSS/themes/nzbhydra2/nzbhydra2-base.css new file mode 100644 index 00000000..0b7cfae5 --- /dev/null +++ b/CSS/themes/nzbhydra2/nzbhydra2-base.css @@ -0,0 +1,583 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); + +body, +html { + height: 100%; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif; + color: var(--text); +} + +* { + outline: none !important; +} + +a { + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); +} + +.navbar-default { + background-color: rgba(0, 0, 0, 0.6); + border-color: transparent; +} + +.navbar-default .navbar-nav>.active>a, +.navbar-default .navbar-nav>.active>a:focus, +.navbar-default .navbar-nav>.active>a:hover { + color: rgb(var(--accent-color)); + background-color: rgba(0, 0, 0, 0.25); +} + +.navbar-default .navbar-nav>li>a:focus, +.navbar-default .navbar-nav>li>a:hover { + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.08); +} + +.navbar-default .navbar-nav>li>a { + color: var(--text); +} + +.growl-container>.alert-info.icon { + background: rgb(var(--accent-color)); +} + +.alert-info { + background: rgb(var(--accent-color)); + border-color: transparent; + color: var(--label-text-color); + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + outline: none; +} + +.alert-info a:hover { + color: var(--link-color); + opacity: .8; +} + +/* Config */ +.nav-tabs { + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover { + color: rgb(var(--accent-color)); + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid #1a1f2000; + border-bottom-color: transparent; +} + +.nav-tabs>li>a:hover { + border-color: transparent; + color: var(--text-hover); +} + +.nav>li>a:focus, +.nav>li>a:hover { + background-color: rgba(255, 255, 255, 0.08); +} + +.nav-tabs>li>a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; + color: var(--text); +} + +.formly>.formly-field-group { + background-color: transparent; + border: 1px solid transparent; +} + +legend, +label { + color: var(--text-hover); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-hover) !important; +} + +/* Buttons */ +.btn-primary { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary.active, +.btn-primary.focus, +.btn-primary:active, +.btn-primary:focus, +.btn-primary:hover, +.open>.dropdown-toggle.btn-primary { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-primary.active.focus, +.btn-primary.active:focus, +.btn-primary.active:hover, +.btn-primary:active.focus, +.btn-primary:active:focus, +.btn-primary:active:hover, +.open>.dropdown-toggle.btn-primary.focus, +.open>.dropdown-toggle.btn-primary:focus, +.open>.dropdown-toggle.btn-primary:hover { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-info { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); +} + +.btn-info.active, +.btn-info.focus, +.btn-info:active, +.btn-info:focus, +.btn-info:hover, +.open>.dropdown-toggle.btn-info { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-info.active.focus, +.btn-info.active:focus, +.btn-info.active:hover, +.btn-info:active.focus, +.btn-info:active:focus, +.btn-info:active:hover, +.open>.dropdown-toggle.btn-info.focus, +.open>.dropdown-toggle.btn-info:focus, +.open>.dropdown-toggle.btn-info:hover { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-default:not(.uib-day button, .uib-month button, .uib-year button) { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color) !important; +} + +.btn-default.active, +.btn-default.focus, +.btn-default:active, +.btn-default:focus, +.btn-default:hover, +.open>.dropdown-toggle.btn-default { + color: var(--button-text-hover); + background: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} + +.btn-default.active.focus, +.btn-default.active:focus, +.btn-default.active:hover, +.btn-default:active.focus, +.btn-default:active:focus, +.btn-default:active:hover, +.open>.dropdown-toggle.btn-default.focus, +.open>.dropdown-toggle.btn-default:focus, +.open>.dropdown-toggle.btn-default:hover { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover) !important; +} + +.config-button { + border: 1px solid transparent; +} + +.btn-success.active.focus, +.btn-success.active:focus, +.btn-success.active:hover, +.btn-success:active.focus, +.btn-success:active:focus, +.btn-success:active:hover, +.open>.dropdown-toggle.btn-success.focus, +.open>.dropdown-toggle.btn-success:focus, +.open>.dropdown-toggle.btn-success:hover { + outline: none !important; + border-color: transparent; +} + +.btn-danger.active.focus, +.btn-danger.active:focus, +.btn-danger.active:hover, +.btn-danger:active.focus, +.btn-danger:active:focus, +.btn-danger:active:hover, +.open>.dropdown-toggle.btn-danger.focus, +.open>.dropdown-toggle.btn-danger:focus, +.open>.dropdown-toggle.btn-danger:hover { + outline: none; +} + +.btn-warning.active.focus, +.btn-warning.active:focus, +.btn-warning.active:hover, +.btn-warning:active.focus, +.btn-warning:active:focus, +.btn-warning:active:hover, +.open>.dropdown-toggle.btn-warning.focus, +.open>.dropdown-toggle.btn-warning:focus, +.open>.dropdown-toggle.btn-warning:hover { + outline: none; +} + +.dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-menu>li>a { + color: var(--text); +} + +.dropdown-menu>li>a:focus, +.dropdown-menu>li>a:hover { + text-decoration: none; + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.1); +} + +.history-title { + font-style: italic; + color: var(--text-muted); +} + +.bootstrap-switch { + border: 1px solid rgba(255, 255, 255, .08); +} + +.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, +.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { + color: var(--text-muted); + background: rgba(0, 0, 0, 0.25); +} + +.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { + background-color: var(--button-color); + color: var(--button-text); +} + +.input-group-btn:last-child>.btn, +.input-group-btn:last-child>.btn-group { + margin-left: -1px; + background: #f0f8ff00; +} + +.input-group-btn2 { + border: 1px solid var(--button-color); + background: var(--button-color); +} + +.input-group-btn1 { + border: 1px solid var(--button-color); + background: var(--button-color); +} + +.input-group-addon { + color: var(--button-text); + border: 1px solid var(--button-color); + background: var(--button-color); + +} + +/* Form Control */ + +.form-control { + border: 1px solid transparent; + background-color: rgba(0, 0, 0, 0.25); + +} + +.form-control:focus { + border-color: rgba(255, 255, 255, 0); + background: rgba(0, 0, 0, 0.35); + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +select.form-control:focus { + background: #1b1b1b; + color: var(--text) +} + +/* .input-group-addon { + outline: none; + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; + +} */ + +/* Categories */ +.panel { + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; +} + +.repeatsection { + background: rgba(0, 0, 0, 0.25); + box-shadow: 0 0 4px 1px transparent; +} + +hr { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} + +/* Modal */ +.modal-body { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); + color: var(--text-hover); +} + +.modal-content { + border: 1px solid transparent; + color: var(--text) +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); +} + +.well { + background-color: hsla(0, 0%, 0%, 0.45); + border: 1px solid #00000000; +} + +/* Updates */ +.alert-warning { + background: rgba(255, 255, 255, 0.25); + border-color: transparent; + color: #fff; +} + +.panel-default>.panel-heading { + background-color: rgba(0, 0, 0, 0.25); +} + +.panel-default>.panel-heading { + color: var(--text); + border-color: rgba(255, 255, 255, 0.08); +} + +.list-group-item { + background-color: rgba(0, 0, 0, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Table */ +table { + background-color: rgba(0, 0, 0, 0.25); +} + +.table>thead>tr>th { + vertical-align: bottom; + border-bottom: 2px solid rgba(255, 255, 255, 0.25); +} + +.table>tbody>tr>td, +.table>tbody>tr>th, +.table>tfoot>tr>td, +.table>tfoot>tr>th, +.table>thead>tr>td, +.table>thead>tr>th { + border-top: 1px solid rgba(255, 255, 255, 0.15); +} + +.table-hover>tbody>tr:hover { + background-color: rgba(255, 255, 255, 0.08); +} + +.search-result-tbody { + color: white; +} + +pre { + background-color: rgba(0, 0, 0, 0.45); + border: 1px solid transparent; +} + +/* FORM LOGIN */ +body>div>div.center-form.panel.col-md-8>div>form>button { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); + +} + +body>div>div.center-form.panel.col-md-8>div>form>button:hover, +body>div>div.center-form.panel.col-md-8>div>form>button:focus, +body>div>div.center-form.panel.col-md-8>div>form>button:active { + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); + +} + +/* SEARCH */ +.search-results-table { + background-color: rgb(0 0 0 / 25%); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.filter-button.btn-default:focus, +.filter-button.btn-default:focus.active { + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + color: var(--button-text) !important; +} + +.indexer-statuses-accordion { + color: rgb(var(--accent-color)); +} + +/* Pagination */ + +.pagination>li>a, +.pagination>li>span { + text-decoration: none; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + +} + +.pagination>li>a:focus, +.pagination>li>a:hover, +.pagination>li>span:focus, +.pagination>li>span:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.pagination>.active>a, +.pagination>.active>a:focus, +.pagination>.active>a:hover, +.pagination>.active>span, +.pagination>.active>span:focus, +.pagination>.active>span:hover { + z-index: 2; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + cursor: default +} + +.pagination>.disabled>a, +.pagination>.disabled>a:focus, +.pagination>.disabled>a:hover, +.pagination>.disabled>span, +.pagination>.disabled>span:focus, +.pagination>.disabled>span:hover { + color: var(--text-muted); + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); + cursor: not-allowed +} + +/*pre*/ +pre { + color: var(--text); + background: var(--modal-bg-color); + border: 1px solid rgba(255, 255, 255, .1); +} + +chart>nvd3>svg>text { + fill: var(--text-muted); +} + +.caption, +caption { + color: var(--text-muted); +} + +.default-chip { + border: 1px solid rgb(var(--accent-color)); + border-radius: 5px; + background: rgb(var(--accent-color)); + color: var(--label-text-color); + padding: 0 2px 0 2px; +} + +chip-tmpl:focus .default-chip { + border: 2px solid var(--accent-color-hover); + background: var(--accent-color-hover); + color: var(--label-text-color); +} \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/organizr-dark.css b/CSS/themes/nzbhydra2/organizr-dark.css index a17d0d37..319a6293 100644 --- a/CSS/themes/nzbhydra2/organizr-dark.css +++ b/CSS/themes/nzbhydra2/organizr-dark.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 ORGANIZR-DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --default-button-color: #2cabe3; - --default-button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/plex.css b/CSS/themes/nzbhydra2/plex.css index 87da4f28..a4f59f28 100644 --- a/CSS/themes/nzbhydra2/plex.css +++ b/CSS/themes/nzbhydra2/plex.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 PLEX THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #cc7b19; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/space-gray.css b/CSS/themes/nzbhydra2/space-gray.css index 6023d97b..8c35e070 100644 --- a/CSS/themes/nzbhydra2/space-gray.css +++ b/CSS/themes/nzbhydra2/space-gray.css @@ -12,11 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* NZBHYDRA2 SPACE GRAY THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --accent-color: #7598a9; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/ombi/aquamarine.css b/CSS/themes/ombi/aquamarine.css index 599c8478..09e2c5c0 100644 --- a/CSS/themes/ombi/aquamarine.css +++ b/CSS/themes/ombi/aquamarine.css @@ -13,22 +13,4 @@ /* OMBI AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 0, 150, 136; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/ombi/dark.css b/CSS/themes/ombi/dark.css index 9d570f06..d4998a7e 100644 --- a/CSS/themes/ombi/dark.css +++ b/CSS/themes/ombi/dark.css @@ -13,22 +13,4 @@ /* OMBI DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); diff --git a/CSS/themes/ombi/dracula.css b/CSS/themes/ombi/dracula.css new file mode 100644 index 00000000..d6295268 --- /dev/null +++ b/CSS/themes/ombi/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* OMBI DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/ombi/hotline.css b/CSS/themes/ombi/hotline.css index 68f007e1..421382de 100644 --- a/CSS/themes/ombi/hotline.css +++ b/CSS/themes/ombi/hotline.css @@ -13,22 +13,4 @@ /* OMBI HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/ombi/ombi-base.css b/CSS/themes/ombi/ombi-base.css index 9cdb62cb..b9c19925 100644 --- a/CSS/themes/ombi/ombi-base.css +++ b/CSS/themes/ombi/ombi-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -20,12 +19,35 @@ html, body, .wizard-background, .content-container, -.mat-sidenav-container, -.content-container .top-bar-container { +.mat-sidenav-container { color: var(--text) !important; background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, legend { + +.content-container .top-bar-container { + background: transparent !important; +} + +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6, +legend { color: var(--text-hover); } @@ -43,11 +65,12 @@ a:hover { .forgot-password:hover { color: var(--link-color-hover) !important; } + /* SCROLLBAR */ ::-webkit-scrollbar-thumb { border-radius: 3px; background: rgb(255 255 255 / 30%); -} +} /* TOP NAV */ .top-search-bar .mat-form-field-flex { @@ -58,7 +81,14 @@ a:hover { /* Drop down menu */ .mat-menu-panel, #requestsToDisplayDropdown-panel { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { @@ -109,20 +139,23 @@ a:hover { } .sidenav-container[_ngcontent-icv-c127] .sidenav[_ngcontent-icv-c127] .active-list-item[_ngcontent-icv-c127] { - color: var(--text-hover) !important; + color: rgb(var(--accent-color)) !important; } -.sidenav-container .sidenav .active-list-item { - color: var(--text-hover); +.sidenav-container .sidenav .active-list-item, +.sidenav-container .sidenav .active-list-item:hover { + color: rgb(var(--accent-color)) !important; background: rgb(255 255 255 / 15%) !important; border-radius: .375rem !important; padding: 10px 20px; height: auto; - width: 16rem !important; +} + +[id*="nav-"] { + color: var(--text) !important; } .sidenav-container .sidenav .mat-list-item { - color: var(--text) !important; font-family: Roboto, sans-serif; font-size: 16px; font-weight: 400; @@ -152,11 +185,20 @@ a:hover { } .sidenav-container .sidenav.mat-action-list .mat-list-item:focus, -.sidenav-container .sidenav .mat-action-list .mat-list-item:hover, .sidenav-container .sidenav.mat-list-option:focus, -.mat-list-option:hover, .sidenav-container .sidenav .mat-nav-list .mat-list-item:focus, -.sidenav-container .sidenav .mat-nav-list .mat-list-item:hover { +.sidenav-container .sidenav.mat-action-list .mat-list-item:focus:hover, +.sidenav-container .sidenav.mat-list-option:focus:hover, +.sidenav-container .sidenav .mat-nav-list .mat-list-item:focus:hover { + background: hsla(0, 0%, 100%, .04); + border-radius: .375rem !important; + color: rgb(var(--accent-color)) !important; +} + + +.sidenav-container .sidenav .mat-action-list .mat-list-item:hover:not(.active-list-item), +.mat-list-option:hover:not(.active-list-item), +.sidenav-container .sidenav .mat-nav-list .mat-list-item:hover:not(.active-list-item) { background: hsla(0, 0%, 100%, .04); border-radius: .375rem !important; color: var(--text-hover) !important; @@ -191,7 +233,7 @@ a:hover { margin: 10px auto auto !important; } -@media (min-width: 768px) { +/* @media (min-width: 768px) { .content-container { margin-left: 255px !important; } @@ -199,7 +241,7 @@ a:hover { .content-container .section { margin: 6px !important; } -} +} */ /* MOBILE */ @media (min-width: 768px) { @@ -231,11 +273,13 @@ a:hover { max-height: 290px; max-width: 12rem; } + @media (max-width: 768px) { -.section h2 { - margin-left: 5px !important; + .section h2 { + margin-left: 5px !important; } } + @media (min-width: 768px) { .section h2 { margin-left: 63px !important; @@ -282,20 +326,30 @@ a:hover { #info-wrapper .mat-card, .mat-expansion-panel { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #info-wrapper .mat-card.mat-card-flat:not([class*=mat-elevation-z]) { box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%); background: transparent; } + #info-wrapper .mat-card .label, #info-wrapper .mat-card .mat-card-header { color: var(--text-hover); } -#info-wrapper .mat-card,#info-wrapper .mat-card-content { +#info-wrapper .mat-card, +#info-wrapper .mat-card-content { color: var(--text); } + .btn-ombi { background-color: rgba(0, 0, 0, 0.85) !important; /* backdrop-filter: blur(10px) !important; @@ -309,7 +363,7 @@ a:hover { } .btn-ombi:hover { - background-color: var(--button-color) !important; + background-color: var(--button-color-hover) !important; color: var(--button-text-hover) !important; } @@ -401,11 +455,17 @@ small.important { color: var(--button-text) !important; background-color: var(--button-color) !important; } + .mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex) { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); background: var(--button-color); } +.mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):hover { + box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); + background: var(--button-color-hover) !important; +} + /* Plex buttons */ .viewon-btn.plex, .viewon-btn.emby, @@ -424,6 +484,13 @@ button#sign-in { .mat-raised-button.mat-primary { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } button.admin-cog { @@ -491,6 +558,13 @@ button.admin-cog { .mat-snack-bar-container { color: var(--text); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) } @@ -546,6 +620,7 @@ tr.mat-header-row { #info-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { background-color: rgb(var(--accent-color)); + color: var(--label-text-color); } hr { @@ -553,28 +628,52 @@ hr { } .full-screenshot.enabled.overlay { - background-image: linear-gradient(180deg,transparent,50%,rgb(var(--accent-color), 0.1)); + background-image: linear-gradient(180deg, transparent, 50%, rgb(var(--accent-color), 0.1)); } + .social-icons-container { background-color: hsl(0deg 0% 0% / 85%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } + /* MODAL */ .mat-autocomplete-panel, .mat-dialog-container { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .mat-bottom-sheet-container { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* OTHER */ .mat-tooltip { - background: var(--modal-bg-color) !important; + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.mat-progress-spinner.mat-accent circle,.mat-spinner.mat-accent circle { +.mat-progress-spinner.mat-accent circle, +.mat-spinner.mat-accent circle { stroke: rgb(var(--accent-color)); -} \ No newline at end of file +} diff --git a/CSS/themes/ombi/organizr-dark.css b/CSS/themes/ombi/organizr-dark.css index 82eb495d..937acf5b 100644 --- a/CSS/themes/ombi/organizr-dark.css +++ b/CSS/themes/ombi/organizr-dark.css @@ -13,22 +13,4 @@ /* OMBI ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 44, 171, 227; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); diff --git a/CSS/themes/ombi/plex.css b/CSS/themes/ombi/plex.css index cbf757a3..80b6a125 100644 --- a/CSS/themes/ombi/plex.css +++ b/CSS/themes/ombi/plex.css @@ -13,22 +13,4 @@ /* OMBI PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/ombi/space-gray.css b/CSS/themes/ombi/space-gray.css index 8a158519..c2522e9b 100644 --- a/CSS/themes/ombi/space-gray.css +++ b/CSS/themes/ombi/space-gray.css @@ -13,22 +13,4 @@ /* OMBI SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/ombi/ombi-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 129, 166, 183; - --accent-color-hover: #607D8B; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/organizr/Aquamarine.css b/CSS/themes/organizr/Aquamarine.css index 90dac1ca..e54fcc24 100644 --- a/CSS/themes/organizr/Aquamarine.css +++ b/CSS/themes/organizr/Aquamarine.css @@ -11,16 +11,11 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* ORGANIZR AQUAMARINE THEME */ -@import 'Organizr.css'; -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --link-color: #FFEB3B; - --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: #009688; +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css"); +/* APP VARS */ +:root { --calendar-tv-premier: #FFEB3B; --calendar-tv-missing: #ff7676; --calendar-tv-available: #53e69d; diff --git a/CSS/themes/organizr/Hotline.css b/CSS/themes/organizr/Hotline.css index 3d07393e..9667d8dd 100644 --- a/CSS/themes/organizr/Hotline.css +++ b/CSS/themes/organizr/Hotline.css @@ -11,16 +11,11 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* ORGANIZR HOTLINE THEME */ -@import 'Organizr.css'; -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css"); + +/* APP VARS */ :root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --link-color: #FFEB3B; - --custom-buttons-color: radial-gradient(ellipse at center, #F44336 0%, #3F51B5 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: #F44336; - --calendar-tv-premier: #FFEB3B; --calendar-tv-missing: #ff7676; --calendar-tv-available: #53e69d; diff --git a/CSS/themes/organizr/dark.css b/CSS/themes/organizr/dark.css index 8289346d..1d8f6bb8 100644 --- a/CSS/themes/organizr/dark.css +++ b/CSS/themes/organizr/dark.css @@ -12,21 +12,16 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* ORGANIZR DARK THEME */ -@import 'Organizr.css'; -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --link-color: #2cabe3; - --custom-buttons-color: rgba(255, 255, 255, 0.2); - --hompage-item-hover: radial-gradient(farthest-corner at 50% 50%,rgba(0, 0, 0, 0.1) 50%,#000000f2 100%); - --notification-box-line: #2cabe3; +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css"); - --calendar-tv-premier: #FFEB3B; - --calendar-tv-missing: #ff7676; - --calendar-tv-available: #53e69d; - --calendar-tv-unreleased: #eeeeee; - --calendar-movie-missing: #ff7676; - --calendar-movie-available: #53e69d; - --calendar-movie-unreleased: #eeeeee; +/* APP VARS */ +:root { + --calendar-tv-premier: #FFEB3B; + --calendar-tv-missing: #ff7676; + --calendar-tv-available: #53e69d; + --calendar-tv-unreleased: #eeeeee; + --calendar-movie-missing: #ff7676; + --calendar-movie-available: #53e69d; + --calendar-movie-unreleased: #eeeeee; } diff --git a/CSS/themes/organizr/dracula.css b/CSS/themes/organizr/dracula.css new file mode 100644 index 00000000..b3e00230 --- /dev/null +++ b/CSS/themes/organizr/dracula.css @@ -0,0 +1,26 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* ORGANIZR DRACULA THEME */ +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css"); + +/* APP VARS */ +:root { + --calendar-tv-premier: #FFEB3B; + --calendar-tv-missing: #ff7676; + --calendar-tv-available: #53e69d; + --calendar-tv-unreleased: #eeeeee; + --calendar-movie-missing: #ff7676; + --calendar-movie-available: #53e69d; + --calendar-movie-unreleased: #eeeeee; + } \ No newline at end of file diff --git a/CSS/themes/organizr/organizr-base-old.css b/CSS/themes/organizr/organizr-base-old.css new file mode 100644 index 00000000..e48f350f --- /dev/null +++ b/CSS/themes/organizr/organizr-base-old.css @@ -0,0 +1,1366 @@ +html { + background: var(--main-bg-color); +} + +body { + color: white; +} + +.panel .panel-heading .panel-title { + color: #ffffff; +} + +.dataTables_wrapper .dataTables_filter, +.dataTables_wrapper .dataTables_length, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, +.dataTables_wrapper, +.dataTables_info, +.text-dark, +.drop-title, +.tabs-style-flip nav a, +.text-dark .bg-title .breadcrumb a, +.daterangepicker .input-mini, +.dd-handle, +.dd3-content, +.dropify-wrapper, +.form-control, +.panel-default .panel-heading, +.panel-white .panel-heading, +.select2-container .select2-choice, +.steamline .sl-right div>a, +.white-box .box-title, +a.list-group-item, +button.list-group-item, +h1, +h2, +h3, +h4, +h5, +h6, +.panel-default .panel-body, +.panel-white .panel-body { + color: #ffffff !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* Header */ +.navbar-header { + background: transparent !important; +} + +@media (max-width: 480px) { + .navbar-header { + background: var(--main-bg-color) !important; + } +} + +.nav .open>a, +.nav .open>a:focus, +.nav .open>a:hover { + background: transparent; +} + +.navbar-default { + background-color: transparent; +} + +.dropdown-menu { + background: var(--modal-bg-color); +} + +.chat-list .odd .chat-text { + background: rgba(255, 255, 255, 0.15); +} + +/* Background */ +#page-wrapper { + background: var(--main-bg-color) !important; +} + +/* Update bar */ +.progress-bar-primary { + background: var(--modal-bg-color); +} + +/* Lockscreen */ +.lock-screen { + background: var(--main-bg-color) !important; +} + +/* Buttons */ +.btn-primary, +.btn-primary.disabled { + background: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; +} + +.btn-primary:hover { + background: rgba(0, 0, 0, 0.45); + border: 1px solid rgba(0, 0, 0, 0); +} + +.form-material .form-control, +.form-material .form-control:focus { + background: #1f1f1f; + border-radius: 3px; + padding: inherit; +} + +.lock-screen>.login-box { + width: 400px; + margin: 10% auto 0; + height: initial; + position: initial; +} + +/* Sidebar/settings */ +#internal-Settings, +.active-tab-Settings, +.sidebar body[data-active-tab=""], +.sidebar { + background: var(--main-bg-color) !important; +} + +.sidebar, +.sidebar { + background: transparent; + box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.6); +} + +.sidebar-head { + background: var(--main-bg-color) !important; +} + +#side-menu li a { + color: #ffffff; +} + +#side-menu li a:focus, +#side-menu li a:hover { + color: #fff; + background: rgba(255, 255, 255, .08) !important; +} + +#side-menu li a.active { + box-shadow: inset 4px 0 0 0 var(--link-color); +} + +.label-inverse { + background: var(--custom-buttons-color); +} + +.tabLoaded { + -webkit-filter: drop-shadow(0 0 5px var(--link-color)); + filter: drop-shadow(0 0 5px var(--link-color)); +} + +/*input form control dropdown*/ +.form-control, +select { + background: rgba(0, 0, 0, .25); + color: #fff; + border: 1px transparent; +} + +.form-control:focus, +select:focus { + color: #fff !important; + background: #1f1f1f; + border: 1px transparent; + transition: all 0ms linear 0s; +} + +/* Settings */ +.bg-title { + background: rgba(0, 0, 0, 0.15); +} + +.content-wrap { + background: var(--main-bg-color) !important; +} + +.swal-modal.bg-org { + background: var(--main-bg-color); +} + +.panel-wrapper>.bg-org .tab-content { + background-color: transparent !important; +} + +.panel-blue .panel-heading, +.panel-info .panel-heading { + border-color: #ffffff; + color: #fff; + background-color: rgba(0, 0, 0, 0.15); +} + +.panel { + background: transparent; +} + +.panel-body { + background: transparent !important; +} + +.nav-tabs>li>a:hover { + background: rgba(0, 0, 0, 0.15); +} + +.bg-org { + background-color: transparent !important; +} + +.tab-content>.active { + display: block; + background: var(--main-bg-color); +} + +/* Settings - tables */ +.panel .table { + background: var(--main-bg-color) !important; +} + +/* User Management */ +#settings-user-manage-users tr.jsgrid-header-row th { + background: rgba(0, 0, 0, .0); +} + +#settings-user-manage-users .jsgrid-grid-body td { + background: rgba(0, 0, 0, .0) !important; +} + +#settings-user-manage-users .jsgrid-selected-row td { + background: rgba(0, 0, 0, .15) !important +} + +/* iframe sandbox */ +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + color: #ffffff; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: #00000094; + border: 1px solid #00000000; + color: #ffffff; +} + +/* error page */ +.error-box { + top: 10%; + background: var(--main-bg-color); +} + +/*error page background */ +#internal-Settings, +#preloader, +.preloader, +.active-tab-Settings, +.error-page { + background: var(--main-bg-color); +} + +/*Speed test footer and circles*/ +.white-popup .panel-footer { + background: var(--main-bg-color); + border-top: 1px solid #fff; +} + +.css-bar-lg:after { + background: #1f1f1f !important; +} + +/* Settings - menu tabs */ +.sttabs nav { + background: rgba(0, 0, 0, 0); +} + +.tabs-style-flip nav li.tab-current a::after { + background-color: rgba(0, 0, 0, .15) !important; + -webkit-transform: none !important; + transform: none !important; + border-radius: 0px !important; +} + +.tabs-style-flip nav a::after { + background: rgba(0, 0, 0, 0) !important; + transition: none; + -webkit-transform: none; + transform: none; +} + +.tabs-style-flip nav a:hover { + background: rgba(255, 255, 255, .05) !important; +} + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:hover { + background-color: none !important; +} + +.tabs-style-flip nav li.tab-current a:hover { + color: #ffffff; + background: rgba(0, 0, 0, 0) !important; +} + +.tabs-style-flip nav li.tab-current a { + color: var(--link-color) !important; +} + +/* Settings - custom css */ +.ace_gutter { + background: rgba(0, 0, 0, .3) !important; + color: #fff !important; +} + +/* Settings - image manager */ +.el-element-overlay .white-box { + background: transparent !important; +} + +/* Settings - news panel */ +#organizrNewsPanel .panel-body { + background: rgba(0, 0, 0, 0.15) !important; +} + +/* Settings - tab editor panel */ +.table-hover>tbody>tr:hover, +.table-striped>tbody>tr:nth-of-type(odd), +.table>tbody>tr.active>td, +.table>tbody>tr.active>th, +.table>tbody>tr>td.active, +.table>tbody>tr>th.active, +.table>tfoot>tr.active>td, +.table>tfoot>tr.active>th, +.table>tfoot>tr>td.active, +.table>tfoot>tr>th.active, +.table>thead>tr.active>td, +.table>thead>tr.active>th, +.table>thead>tr>td.active, +.table>thead>tr>th.active { + background-color: rgba(0, 0, 0, 0.15) !important; +} + +.table-hover>tbody>tr:hover { + background: rgba(0, 0, 0, .15) !important; +} + +#tabEditorTable .btn-info.btn-outline { + color: var(--custom-buttons-color); +} + +#tabEditorTable .btn-info.btn-outline:hover, +#tabEditorTable .btn-info.btn-outline:focus { + color: white; + background: var(--custom-buttons-color); +} + +/* Settings - popup modal */ +.white-popup .panel-heading, +.white-popup>.col-md-6>.white-box:first-child { + background: var(--main-bg-color) !important; +} + +.white-popup .panel-body, +.white-popup>.col-md-6>.white-box:nth-child(2) { + background: var(--main-bg-color) !important; +} + +.panel-blue a:hover, +.panel-info a:hover { + color: #ffffff; +} + +.customtab li.active a, +.customtab li.active a:focus, +.customtab li.active a:hover, +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover { + background: rgba(0, 0, 0, 0.25); +} + +.white-popup-block { + background: var(--main-bg-color) !important; +} + +.nav-tabs>li>a { + color: #ffffff; +} + +.modal-content, +.modal-header, +.modal-footer, +.modal-body { + background: var(--main-bg-color) !important; +} + +.close:focus, +.close:hover { + color: #fff; +} + +.has-success .control-label { + color: var(--link-color); +} + +/* Settings - save button */ +.btn-info, +.btn-info.disabled { + background: rgba(0, 0, 0, 0.25); + border: none; +} + +.btn-info.disabled.focus, +.btn-info.disabled:focus, +.btn-info.disabled:hover, +.btn-info.focus, +.btn-info:focus, +.btn-info:hover { + background: rgba(0, 0, 0, 0.45); + border: none; +} + +.btn-info.active, +.btn-info:active, +.open>.dropdown-toggle.btn-info, +.btn-info:active:hover { + background-color: #1b1a1a; + border-color: #1b1a1a; +} + +/* Settings logs */ + +.table-striped>tbody>tr:nth-of-type(odd) { + background: rgba(0, 0, 0, .15) !important; +} + +.table-striped>tbody>tr:nth-of-type(odd):hover { + background: rgba(0, 0, 0, .25) !important; +} + +table.dataTable>tbody>tr:nth-of-type(even) { + background: rgba(0, 0, 0, .15) !important; +} + +table.dataTable>tbody>tr:nth-of-type(even):hover { + background: rgba(0, 0, 0, .25) !important; +} + +.dataTables_wrapper .dataTables_paginate .paginate_button.current, +.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { + background: rgba(0, 0, 0, .08) !important; + color: var(--link-color) !important; + border: 0 !important; + border-radius: 0 !important; + margin: 0 !important; + transition: none; +} + +.dataTables_wrapper .dataTables_paginate .paginate_button { + background: rgba(0, 0, 0, .15); + color: rgba(255, 255, 255, .7) !important; + border: 0 !important; + border-radius: 0 !important; + margin: 0 !important; + transition: none; +} + +.dataTables_wrapper .dataTables_paginate .paginate_button:hover, +.nav-tabs li a:hover { + background: rgba(255, 255, 255, .08) !important; + color: #eee !important; +} + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:hover { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* Settings - custom CSS */ +.ace-idle-fingers { + background-color: rgba(0, 0, 0, 0.15) !important; + background: rgba(0, 0, 0, 0.15) !important; +} + +.ace_gutter { + background: rgba(0, 0, 0, .3) !important; + color: #eee !important; +} + +/* custom buttons */ +.cbutton { + background-color: rgba(255, 255, 255, 0.2) !important; + border-radius: 3px !important; + border-color: transparent !important; +} + +/* Calendar */ +.fc-day-header a, +.fc-day-number, +.fc-list-heading-main { + color: #FFF; + cursor: pointer !important; + transition: color .2s ease; +} + +.fc-unthemed th, +.fc-unthemed td, +.fc-unthemed thead, +.fc-unthemed .fc-divider, +.fc-unthemed .fc-row, +.fc-unthemed .fc-popover { + border-color: transparent; + background: rgba(0, 0, 0, 0.05); +} + +.bg-theme, +.fc-day-header { + background: rgba(0, 0, 0, .3) !important; +} + +.bg-theme, +.fc th.fc-sun, +.fc th.fc-tue, +.fc th.fc-thu, +.fc th.fc-sat, +.fc th.fc-mon, +.fc th.fc-wed, +.fc th.fc-fri, +.fc-button { + background-color: rgba(0, 0, 0, 0.25) !important; +} + +th.fc-day-header.fc-widget-header.fc-today { + background-color: rgba(0, 0, 0, 0.25) !important; +} + +.fc-widget-content.fc-today { + background-color: rgba(255, 255, 255, 0.25) !important; +} + +.fc-popover { + background: var(--modal-bg-color); +} + +/*TV Missing icon and status*/ +#calendar .fa.fa-tv.text-danger, +#calendar .fc-time.tv.text-danger { + color: var(--calendar-tv-missing); +} + +/*TV Available icon and status*/ +#calendar .fa.fa-tv.text-success, +#calendar .fc-time.tv.text-success { + color: var(--calendar-tv-available); +} + +/*TV Unreleased icon and status*/ +#calendar .fa.fa-tv.text-info, +#calendar .fc-time.tv.text-info { + color: var(--calendar-tv-unreleased); +} + +/*TV Premier icon and status*/ +#calendar .fa.fa-tv.text-primary, +#calendar .fc-time.tv.text-primary, +#calendar .fa.fa-tv.text-purple, +#calendar .fc-time.tv.text-purple { + color: var(--calendar-tv-premier); +} + +/*Movie Missing icon and status*/ +#calendar .fa.fa-film.text-danger:before { + color: var(--calendar-movie-missing); +} + +#calendar .fa.fa-film.text-danger:after { + content: " Missing"; + font-family: Rubik, sans-serif; + font-weight: 500; + color: var(--calendar-movie-missing); +} + +/*Movie Available icon and status*/ +#calendar .fa.fa-film.text-success:before { + color: var(--calendar-movie-available); +} + +#calendar .fa.fa-film.text-success:after { + content: " Available"; + font-family: Rubik, sans-serif; + font-weight: 500; + color: var(--calendar-movie-available); +} + +/*Movie Unreleased icon and status*/ +#calendar .fa.fa-film.text-info:before { + color: var(--calendar-movie-unreleased); +} + +#calendar .fa.fa-film.text-info:after { + content: " Unreleased"; + font-family: Rubik, sans-serif; + font-weight: 500; + color: var(--calendar-movie-unreleased); +} + + +/* Homepage Now playing card */ +.nowPlayingItem>.white-box>.el-card-item { + background: rgba(0, 0, 0, 0.15) !important; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); +} + +.icon-film, +.icon-control-play, +.icon-screen-desktop, +.icon-control-pause { + color: white !important; +} + +.label-info { + background: var(--custom-buttons-color); +} + +.white-box { + background: var(--main-bg-color); +} + +/* Homepage headers */ +.panel-default .panel-heading, +.fc-toolbar { + background: transparent !important; + padding: 20px 0px; +} + +/* Homepage buttons */ +#homepage-items .btn-group .btn { + background: 0 0 !important; + color: rgba(255, 255, 255, .7) !important; + padding: 6px 12px; + margin: 0 12.5px; + transition: color .2s ease; +} + +#homepageOrderdeluge .mailbox-widget .customtab li.active a, +#homepageOrderqBittorrent .mailbox-widget .customtab li.active a, +#homepageOrderrTorrent .mailbox-widget .customtab li.active a, +#homepageOrdertransmission .mailbox-widget .customtab li.active a { + height: auto; + padding: 5px 5px 0px 5px; + cursor: pointer; + font-weight: 400; +} + +#homepageOrderdeluge .ti-download:before, +#homepageOrderqBittorrent .ti-download:before, +#homepageOrderrTorrent .ti-download:before, +#homepageOrdertransmission .ti-download:before { + display: none; +} + +#homepageOrderdeluge .white-box, +#homepageOrderqBittorrent .white-box, +#homepageOrderrTorrent .white-box, +#homepageOrdertransmission .white-box { + padding-right: 0px !important; +} + +/* #homepage-items .white-box { + padding-left: 0px !important; + }*/ +#homepage-items .nav-tabs>li.active>a, +.nav-tabs>li.active>a:hover { + cursor: pointer; + opacity: 1; + background: rgba(0, 0, 0, 0.25) !important; +} + +#homepageOrderdownloader .nav-tabs>li.active>a, +.nav-tabs>li.active .nav>li>a, +#homepageOrderdownloader .nav-tabs>li>a, +.nav-tabs>li .nav>li>a { + padding: 10px 12.5px; +} + +#homepageOrderdownloader .nav-tabs>li.active>a, +.nav-tabs>li.active .nav>li>a .customtab, +#homepageOrderdownloader .nav-tabs { + padding: 10px 12.5px; +} + +#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li.active>a, +#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li>a { + padding: 10px 11.5px !important; +} + +#homepageOrderdownloader .nav-tabs>li.active>a:hover, +#homepageOrderdownloader .nav-tabs>li.active:hover { + background: rgba(0, 0, 0, 0.25) !important; + opacity: 1; +} + +#homepageOrderdownloader .downloaderCount { + margin-top: -20px !important; +} + +#homepageOrderdownloader .mailbox-widget .customtab li a { + padding: 20px 15px 5px 15px; +} + +#homepageOrderdownloader .customtab li a { + padding: 20px 15px 5px 15px !important; +} + +#homepageOrderdownloader .mailbox-widget .customtab li a:hover { + opacity: 1; +} + +/* Homepage calendar buttons */ +.fc-next-button, +.fc-prev-button { + background: 0 0 !important; + color: rgba(255, 255, 255, .7) !important; + border: 0 !important; +} + +.btn-group.open .dropdown-toggle, +.fc-state-default { + text-shadow: none; + box-shadow: none; +} + +.fc-button:hover { + background: rgba(255, 255, 255, .08) !important; +} + +.fc-button { + background: rgba(0, 0, 0, 0) !important; + color: #fff; + border-radius: 0 !important; + border: 0 !important; + text-transform: uppercase; +} + +/* Homepage ombi - request triangle */ +.inside-request-div { + background-color: var(--link-color) !important; +} + +/* Homepage ombi - dropdown */ +#homepage-items .btn-group .btn { + background: 0 0 !important; + color: rgba(255, 255, 255, .7) !important; + padding: 6px 12px; + margin: 0 12.5px; + transition: color .2s ease; +} + +.btn-group.open, +.dropdown-toggle, +.fc-state-default { + text-shadow: none !important; + box-shadow: none !important; +} + +.btn-info:active:focus, +.btn-info:active:hover, +.btn-info:focus { + border: none !important; +} + +.btn.active, +.btn:active { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Notification Popups */ +/* Izi */ +.iziToast.update-notify.iziToast-layout2, +.iziToast.success-notify.iziToast-layout2 { + border: none; + background: var(--modal-bg-color) !important; + border-bottom: transparent; +} + +.iziToast.update-notify>.iziToast-body .iziToast-icon, +.iziToast.success-notify>.iziToast-body .iziToast-icon { + color: var(--link-color) !important; +} + +.iziToast:after { + background: var(--modal-bg-color) !important; +} + +.update-notify .iziToast-progressbar div, +.success-notify .iziToast-progressbar div { + background: var(--notification-box-line) !important; +} + +.iziToast>.iziToast-close { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAk6AAAJOgHwZJJKAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTAyVDIyOjExOjA0KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wMlQyMjoxMTozNiswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0xMi0wMlQyMjoxMTozNiswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzZkZDFlZS01YjJhLWIyNGMtOTA5ZC1lMzljOTJlMDVlYmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTM2ZGQxZWUtNWIyYS1iMjRjLTkwOWQtZTM5YzkyZTA1ZWJjIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MTM2ZGQxZWUtNWIyYS1iMjRjLTkwOWQtZTM5YzkyZTA1ZWJjIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMzZkZDFlZS01YjJhLWIyNGMtOTA5ZC1lMzljOTJlMDVlYmMiIHN0RXZ0OndoZW49IjIwMTktMTItMDJUMjI6MTE6MDQrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz47W311AAAA1klEQVRYw82XDQrDIAyFPVgP4AX8vXHPtIJTsKMMk6XT7E0IVGz9nrHGxJRStmp7N2uUW2NceJvpD2d7VHOKcNcZZ9vfBaiJGMBfAuxgoPX9QrgnGJZTt0QEA3cSFx3VwgQ89DlkW0yo/UoEA/cSlx0DEfEGPBJz+Bn1IhEMPKxwYesn5pu0BC5YTboBj7PHiBKRL+9kFbhgdZmBp9WhlBKhD//ganJrfi1CHw4XAN0C6E8IPYbQQAQNxdDLCHodQxMSaEoGTUqhaTm8MPmH0gxenELL8yfG1e3Ahlk83AAAAABJRU5ErkJggg==) 50% 50% / 8px no-repeat; +} + +/* Alertify */ +.ajs-message.ajs-error-alertify.ajs-visible { + color: #f44336; + background: var(--modal-bg-color); + border-color: transparent; +} + +.ajs-message.ajs-warning-alertify { + color: #ffeb3b; + background: var(--modal-bg-color); + border-color: transparent; +} + +.ajs-message.ajs-info-alertify { + color: #6da8ff; + background: var(--modal-bg-color); + border-color: transparent; +} + +.ajs-message.ajs-success-alertify { + color: #00ffb8; + background: var(--modal-bg-color); + border-color: transparent; +} + +/* Noty */ +.noty_type__error-noty .noty_body { + background: var(--modal-bg-color); + color: #f44336; + border: 1px solid transparent; + border-bottom: transparent; +} + +.noty_type__warning-noty .noty_body { + background: var(--modal-bg-color); + color: #ffeb3b; + border: 1px solid transparent; + border-bottom: transparent; +} + +.noty_type__info-noty .noty_body { + background: var(--modal-bg-color); + color: #3a83f0; + border: 1px solid transparent; + border-bottom: transparent; +} + +.noty_type__success-noty .noty_body { + background: var(--modal-bg-color); + color: #00ffb8; + border: 1px solid transparent; + border-bottom: transparent; +} + +.btn-link, +a { + color: var(--link-color); + text-decoration: none; +} + +/* Homepage cover - hover */ +.hover-homepage-item:hover { + background: var(--hompage-item-hover); + opacity: 1; + transition: linear .2s; +} + +/* Homepage streams- hover */ +.el-card-avatar a { + color: rgba(255, 255, 255, .7) !important; + border: white; +} + +.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover { + background: transparent; + color: white !important; + border: white !important; +} + +.progress-bar-info { + background: rgba(255, 255, 255, 0.25) !important; +} + +.progress-bar-inverse, +.progress { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* Homepage health checks */ +.bg-inverse .healthPosition { + background: rgba(255, 255, 255, 0.2) !important; + -webkit-backdrop-filter: saturate(180%) blur(30px); + backdrop-filter: saturate(180%) blur(30px); + border-radius: 3px; +} + +#homepageOrderhealthchecks .card-body { + background: rgba(255, 255, 255, 0.2); +} + +.card, +.card-body { + border-radius: 3px; +} + +.bg-inverse { + background: transparent !important; +} + +.left-health { + border-radius: 3px 0 0 3px; +} + +/* Homepage Tautulli Cards*/ +#homepageOrdertautulli .library-card .card-body, +#homepageOrdertautulli div:nth-child(8) .card-body { + background: rgba(255, 255, 255, .2); +} + +.homepage-tautulli-card .cardCountType { + color: #eee; +} + +.homepage-tautulli-card .tautulliRank, +.homepage-tautulli-card .tautulliSeparator { + color: #eee; +} + +.homepage-tautulli-card .bg-img-cont { + border-radius: 3px; + border: .0001px solid #00000000; +} + +/* Homepage Unifi cards */ +.unifiCards .panel-heading { + background: rgba(255, 255, 255, 0.2) !important; + color: #fff !important; + border-color: transparent !important; + text-align: inherit !important; + border-radius: 3px 3px 0 0 !important; +} + +.unifiCards .panel-wrapper.collapse.in { + background: rgba(0, 0, 0, 0.15); +} + +/* Homepage Monitor Cards */ +#homepageOrderMonitorr .card-body { + background: rgba(255, 255, 255, 0.2); +} + +#homepageOrderMonitorr .col-lg-2 { + width: 170px; +} + +#homepageOrderMonitorr .badge { + border-radius: 3px; +} + +#homepageOrderMonitorr .bg-success { + background-color: #47bb62 !important; +} + +#homepageOrderMonitorr .col-lg-3 .bg-success { + background-color: #53e69d !important; +} + +/*Homepage WeatherAndAir Cards*/ +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { + background: rgba(0, 0, 0, .2); +} + +.health-and-pollutant-section .content-current { + background: rgba(255, 255, 255, .2); +} + +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after { + border-top-color: var(--link-color); +} + +#homepageOrderWeatherAndAir .text-info { + color: var(--link-color); +} + +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li a { + color: #ddd; +} + +#homepageOrderWeatherAndAir .white-box { + background: rgba(255, 255, 255, .1); + border-radius: 3px; +} + +/*Homepage Speedtest Cards*/ +#allSpeedtest .speedtest-card { + background-color: rgba(255, 255, 255, .1); +} + +#allSpeedtest .speedtest-card .text-muted, +#allSpeedtest .speedtest-card h5 { + color: #d6d6d6 !important; +} + +#allSpeedtest .shadow-sm { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/* loginpage sidemenu */ +@media (max-width: 480px) { + .login-register>.login-box>.white-box { + margin-top: auto !important; + width: 100% !important; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important; + box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important; + } +} + +/* 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: transparent !important; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); +} + +.login-register { + background: var(--main-bg-color) !important; + 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: hsla(0, 0%, 0%, 0.25) !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 sidebar*/ +/*Login sidebar*/ +.login-box.login-sidebar, +#login-panels .panel-body, +#login-panels .panel { + background: transparent !important; +} + +/*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: transparent; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); +} + +/* Splash screen */ +.p-20 { + padding: 0px !important; +} + +#splashScreen, +.lock-screen { + overflow-y: scroll; +} + +#splashScreen .flexbox:first-of-type { + width: calc(100% - 40px); + margin: auto; +} + +@media (max-width: 375px) { + #splashScreen div[id^=menu-] { + max-width: 88px !important; + } +} + +@media (max-width: 480px) { + #splashScreen .flexbox:first-of-type { + width: auto; + margin-left: 30px; + } +} + +@media (min-width: 768px) { + #splashScreen .flexbox:first-of-type { + width: 600px !important; + margin-top: 0px !important; + } +} + +#splashScreen div[id^=menu-] { + background: transparent; + border-radius: 3px; + max-width: 115px; + margin: 24px 20px 0 0 !important; + padding: 25px; +} + +#splashScreen .bg-org.fc-event { + background-color: transparent !important; + border-radius: 1000px; + height: 80px !important; + width: 80px !important; + background-position: center; +} + +#splashScreen .homepage-text { + display: none; +} + +#splashScreen .flexbox:last-of-type .bg-danger { + background: transparent !important; + color: #fff !important; + border: 0 !important; + border-radius: 100px; + height: 0px !important; + text-align: center; + +} + +#splashScreen .bottom-close-splash { + position: relative !important; + width: 0px; + right: 0px; + bottom: 0px; +} + +#splashScreen .flexbox:last-of-type .bg-danger:before { + font-family: "FontAwesome"; + font-size: 40px; + content: "\f00d"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + -webkit-transform: scale(1.1) !important; + transform: scale(1.1) !important; + -webkit-animation-name: none; + animation-name: none; + text-align: center; + padding-top: inherit; + +} + +#splashScreen .flexbox:last-of-type { + padding: 0 !important; + position: absolute; + left: 50%; + -webkit-transform: translateX(calc(-50% - 10px)); + transform: translateX(calc(-50% - 10px)); +} + +.hvr-wobble-bottom:active, +.hvr-wobble-bottom:focus, +.hvr-wobble-bottom:hover { + -webkit-transform: scale(1.1) !important; + transform: scale(1.1) !important; + -webkit-animation-name: none; + animation-name: none; + +} + +.hvr-wobble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: center; + transform-origin: center; +} + +.splash-badge { + color: #fff; + width: 80px !important; + height: 80px; + font-size: 60px; + border-radius: 1000px; +} + +.splash-badge i { + position: absolute; + left: 10px; + top: 10px; + margin: 0px; + padding: 0px; +} + +.splash-badge i.fa-home:before { + position: absolute !important; + left: -2px !important; +} + +/* Google auth settings modal*/ + +.color-table.info-table thead th { + background-color: rgba(0, 0, 0, 0.25); + color: #fff; +} + +.bg-success.text-inverse { + background-color: rgba(255, 255, 255, 0.15) !important; + color: #FFF; +} + +.panel-blue a, +.panel-info a { + color: var(--link-color); +} + +.color-bordered-table.purple-bordered-table { + border: 2px solid var(--notification-box-line); +} + +.white-box .bg-info { + background: var(--link-color) !important; +} + +/* Email Center*/ + +.ms-container .ms-selectable, +.ms-container .ms-selection { + background: rgba(0, 0, 0, 0.25); +} + +.ms-container .ms-list { + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.ms-container .ms-selectable li.ms-elem-selectable, +.ms-container .ms-selection li.ms-elem-selection { + border-bottom: 1px rgba(238, 238, 238, .2) solid; +} + +.ms-container .ms-selectable li.ms-hover, +.ms-container .ms-selection li.ms-hover { + background: rgba(255, 255, 255, .08) +} + +.ms-container .ms-list.ms-focus { + border-color: rgba(255, 255, 255, .5); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); +} \ No newline at end of file diff --git a/CSS/themes/organizr/organizr-base.css b/CSS/themes/organizr/organizr-base.css index 28864aa9..9119628f 100644 --- a/CSS/themes/organizr/organizr-base.css +++ b/CSS/themes/organizr/organizr-base.css @@ -1,407 +1,1034 @@ -html { - background: var(--main-bg-color); +@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900); +/*Theme Colors*/ +/*bootstrap Color*/ +/*Normal Color*/ +/*Border radius*/ +/*Just change your choise color here its theme Colors*/ + +/* THEME PARK CUSTOM */ + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: rgb(var(--accent-color)); + border: 1px solid rgb(var(--accent-color)); + color: var(--label-text-color); } - body { - color: white; - } - .panel .panel-heading .panel-title { - color: #ffffff; - } - .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper, .dataTables_info, .text-dark, .drop-title, .tabs-style-flip nav a, .text-dark .bg-title .breadcrumb a, .daterangepicker .input-mini, .dd-handle, .dd3-content, .dropify-wrapper, .form-control, .panel-default .panel-heading, .panel-white .panel-heading, .select2-container .select2-choice, .steamline .sl-right div>a, .white-box .box-title, a.list-group-item, button.list-group-item, h1, h2, h3, h4, h5, h6, .panel-default .panel-body, .panel-white .panel-body { - color: #ffffff !important; - } - /* Scrollbar */ - @media only screen and (min-width: 768px) { + +.select2-container--default.select2-container--focus .select2-selection--multiple { + border: solid rgb(var(--accent-color)) 1px; +} + +.select2-container--default .select2-selection--multiple { + border: 1px solid rgb(var(--accent-color), 0.5); +} + +.modal-content, +.mfp-content .panel { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} + +[id*="homepage-"]>fieldset>div>div.panel-wrapper.collapse.in>div>div, +[id$="-settings-items"]>div { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} + +.panel-footer { + background: var(--modal-footer-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} + +.panel-default .panel-body, +.panel-white .panel-body { + color: var(--text); +} + +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6, +label, +.bg-title .breadcrumb a:hover, +.chat-list .odd .chat-text h4, +.close, +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover, +.pagination>li>a:focus, +.pagination>li>a:hover, +.pagination>li>span:focus, +.pagination>li>span:hover, +.text-dark:not(#to-recover), +.swal-title { + color: var(--text-hover) !important; +} + +.text-muted:not(.bg-plex) { + color: var(--text-muted) !important; +} + +.panel .panel-heading .panel-title { + color: var(--text-hover); +} + +.daterangepicker .input-mini, +.dd-handle, +.dd3-content, +.dropify-wrapper, +.panel-default .panel-heading, +.panel-white .panel-heading, +.select2-container .select2-choice, +.css-bar-lg:after { + background: #1f1f1f; +} + +.steamline .sl-right div>a, +.white-box .box-title, +a.list-group-item, +button.list-group-item, +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--text-hover) !important; +} + +.badge { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.tabLoaded { + -webkit-filter: drop-shadow(0 0 2px transparent); + filter: drop-shadow(0 0 2px transparent); + color: var(--text-hover) +} + +.active .tabLoaded { + -webkit-filter: drop-shadow(0 0 5px transparent); + filter: drop-shadow(0 0 5px transparent); + color: rgb(var(--accent-color)); +} + +.navbar-top-links>li>a:hover { + background: rgba(0, 0, 0, 0.1); + color: var(--link-color-hover); +} + +.bg-title .breadcrumb, +.chat-list .odd .chat-text h4, +.close, +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover, +.pagination>li>a:focus, +.pagination>li>a:hover, +.pagination>li>span:focus, +.pagination>li>span:hover { + color: var(--text-hover); +} + +.btn:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.cbutton { + background: var(--button-color) !important; + border-color: var(--button-color) !important; + color: var(--button-text) !important; +} + +.btn:hover:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.btn:active:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.btn:focus:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.cbutton:hover { + background: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; +} + +.cbutton { + border-radius: 20px; + border-color: var(--button-color); + padding: 0px; + width: auto; + height: auto; + background-color: var(--button-color); + position: relative; + text-align: center; +} + +.cbutton:hover { + opacity: .8; +} + +.cbuttontitle { + color: var(--button-text); + width: -webkit-fill-available; + border-radius: 20px; + border: 4px solid; +} + +.panel-blue .panel-heading, +.panel-info .panel-heading { + border-color: rgb(var(--accent-color)); + color: var(--text-hover); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.panel-body:not(.unifiCards .panel-body):not(body > div.swal-overlay.swal-overlay--show-modal > div > div > div > div.panel-wrapper.collapse.in > div) { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.bg-plex:not(h2 .bg-plex) { + background: #e5a00d; + color: white; + border-radius: 25px; +} + +.tabs-style-flip nav a, +.nav-tabs>li>a { + color: var(--text-hover); +} + +.customtab2 li.active a, +.customtab2 li.active a:focus, +.customtab2 li.active a:hover { + background: rgba(0, 0, 0, 0.25) !important; + border-color: rgba(255, 255, 255, 0.1) !important; + border-radius: 20px; +} + +/*toast*/ +.iziToast.success-notify.iziToast-layout2 { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: transparent +} + +#dazsm6ofc1i6j6s9g5k5fija>div>div:nth-child(2), +#dazsm6ofc1i6j6s9g5k5fija>div>div.white-box.m-b-0.bg-info { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.css-bar-lg:after { + background: #1f1f1f !important; +} + +/* settings */ +/* header*/ +[id*="settings-"]>div>div.panel-heading:not(form > div > div.panel-heading) { + background: rgba(0, 0, 0, 0.25); +} + +#customize-appearance-form>ul>li.active>a { + background: rgba(0, 0, 0, 0.25); +} + +#settings-main-system-settings { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* forms */ +select.form-control:focus { + box-shadow: none; + background: #1f1f1f; + border: 1px solid rgba(120, 130, 140, 0.4); +} + +.form-material .form-control:focus, +.form-control:focus { + background: rgba(0, 0, 0, 0.45); + border: 1px solid rgba(255, 255, 255, 0.1); + +} + +.form-material .form-control, +.form-control { + background: rgba(0, 0, 0, 0.25); + border-radius: 3px; +} + +#githubVersions .bg-org { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* Ace editor stuff */ +.ace-idle-fingers { + background-color: rgb(0 0 0 / 25%) !important; + color: var(--text-hover) !important; +} + +.ace-idle-fingers .ace_marker-layer .ace_active-line { + background: rgba(255, 255, 255, 0.15) !important; +} + +.ace-idle-fingers .ace_gutter { + background: rgb(255 255 255 / 10%) !important; + color: var(--text-hover) !important; +} + +.table>thead>tr>th { + border-bottom: 1px solid rgba(120, 130, 140, 0.13); + color: var(--text-hover); +} + +#tabEditorTable, +#categoryEditorTable { + color: var(--text); +} + +/* Datatables */ +.dataTables_wrapper .dataTables_filter, +.dataTables_wrapper .dataTables_info, +.dataTables_wrapper .dataTables_length, +.dataTables_wrapper .dataTables_paginate, +.dataTables_wrapper .dataTables_paginate .paginate_button, +.dataTables_wrapper .dataTables_processing, +.dd-handle, +.footable.breakpoint>tbody>tr>td>span.footable-toggle, +pre { + color: var(--text) !important; +} + +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { + color: var(--text-muted) !important; +} + +#loginLogTable>tbody>.even, +#organizrLogTable>tbody>.even { + background: rgba(255, 255, 255, 0.10); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button.current, +.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { + color: var(--button-text) !important; + border: 1px solid var(--button-color); + background: var(--button-color); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button:hover { + color: var(--button-text-hover) !important; + border: 1px solid var(--button-color-hover); + background: var(--button-color-hover); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button:active { + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0); +} + +/* PLACEHOLDERS */ +input::-webkit-input-placeholder { + color: var(--text) !important; +} + +input:focus::-webkit-input-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text) !important; +} + +input:focus:-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text) !important; +} + +input:focus::-moz-placeholder { + color: var(--text-hover) !important; +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text) !important; +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover) !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } - ::-webkit-scrollbar { - width: 14px; + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* JS GRID USERS */ +.jsgrid-grid-header { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +th.text-center, +th.jsgrid-header-sortable, +th.jsgrid-control-field.jsgrid-align-center { + color: var(--text-hover) !important; +} + +#jsGrid-Users>div.jsgrid-grid-header.jsgrid-header-scrollbar>table, +.jsgrid-grid-body>table>tbody { + color: var(--text) !important; +} + +.jsgrid-table tbody .jsgrid-header-row, +#jsGrid-Users>div.jsgrid-grid-header.jsgrid-header-scrollbar>table>tbody { + color: var(--text-hover) !important; +} + +.jsGrid-Users, +.jsgrid-header-sort-desc, +.jsgrid-header-sort-asc { + background: rgba(0, 0, 0, 0.25) !important; +} + +tr.jsgrid-header-row th { + border: transparent !important; + background: rgb(0 0 0 / 35%); +} + +.jsgrid-grid-body td { + border-bottom: 1px solid rgba(120, 130, 140, .13); + border-top: 1px solid rgb(255 255 255 / 10%) !important; + background: #ffffff00 !important; +} + +.jsgrid-filter-row>td, +.jsgrid-header-sortable:hover { + background: rgba(0, 0, 0, 0.45) !important; + color: var(--text-hover) !important; +} + +/* Calendar */ + +#calendar .fc-content-skeleton>table>thead>tr { + background: rgba(0, 0, 0, 0.15); +} + +.fc-event:not(.homepage-drag), +.fc-event:hover:not(.homepage-drag), +.ui-widget .fc-event { + color: var(--text-hover) !important; + text-decoration: none; +} + +.fc-day-header a, +.fc-day-number, +.fc-list-heading-main { + color: rgb(var(--accent-color)) !important; + cursor: pointer !important; + transition: color .2s ease; +} + +.fc-unthemed th, +.fc-unthemed td, +.fc-unthemed thead, +.fc-unthemed .fc-divider, +.fc-unthemed .fc-row, +.fc-unthemed .fc-popover { + border-color: transparent; + background: rgba(0, 0, 0, 0.05); +} + +.bg-theme, +.fc-day-header { + background: rgba(0, 0, 0, .3) !important; +} + +.bg-theme, +.fc th.fc-sun, +.fc th.fc-tue, +.fc th.fc-thu, +.fc th.fc-sat, +.fc th.fc-mon, +.fc th.fc-wed, +.fc th.fc-fri, +.fc-button { + background-color: rgba(0, 0, 0, 0.25) !important; +} + +th.fc-day-header.fc-widget-header.fc-today { + background-color: rgba(0, 0, 0, 0.25) !important; +} + +.fc-widget-content.fc-today { + background-color: rgba(255, 255, 255, 0.25) !important; +} + +.fc-popover { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* loginpage sidemenu */ + +.login-box { + background: transparent; +} + +@media (max-width: 480px) { + @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + #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; + -webkit-box-shadow: none; + box-shadow: none; + } + + .login-box.login-sidebar { + background: rgba(0, 0, 0, .45) !important; + -webkit-backdrop-filter: blur(10px) !important; + backdrop-filter: blur(10px) !important; + + } } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; + + /* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ + @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + #wrapper .login-register>.login-box>.white-box { + background: transparent !important; + margin-top: auto !important; + width: 100% !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + + .login-box.login-sidebar { + background: var(--modal-bg-color) !important; + } } - ::-webkit-scrollbar-track { - background-color: transparent; + + #lockScreen .white-box { + width: 100% !important; + height: 100% !important; + background: rgb(0 0 0 / 45%) !important; + margin-top: auto !important; + border-radius: 0px !important; } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } - /* Header */ - .navbar-header { - background: transparent !important; - } - @media (max-width: 480px) { - .navbar-header { + + .lock-screen { + overflow: auto !important; + } + + @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + #lockScreen .white-box { + background: var(--modal-bg-color) !important; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 15px; + } + } +} + +/* 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; +} + +#organizr-login-heading>a, +#plex-login-heading>a, +#recoverform>div:nth-child(1)>div>h3, +#recoverform>div:nth-child(1)>div>p { + color: #fff !important; +} + +#login-username-Input::placeholder, +#login-password-Input::placeholder, +#recover-input::placeholder { + color: var(--text-muted) !important; +} + +#to-recover, +label[for="checkbox-login"] { + color: #bbb !important; +} + +#to-recover:hover, +label[for="checkbox-login"]:hover { + color: #fff !important; +} + +#organizr-login-collapse>div>div.form-group.text-center.m-t-20.m-b-0>div>button, +#recoverform>div:nth-child(3)>div>button, +#leave-recover, +#form-lockscreen>div.form-group.text-center>div>button { + background: rgb(255 255 255 / 15%) !important; + color: white; + border-radius: 25px; + border: none; +} + +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + .login-register>.login-box>.white-box { + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + border-radius: 15px; + background-color: rgba(0, 0, 0, 0.45) !important; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + color: white !important; + } +} + + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + .login-register>.login-box>.white-box { + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important; + border-radius: 15px !important; background: var(--main-bg-color) !important; } - } - .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background: transparent; - } - .navbar-default { - background-color: transparent; - } - .dropdown-menu { - background: var(--modal-bg-color); - } - .chat-list .odd .chat-text { - background: rgba(255, 255, 255, 0.15); - } - /* Background */ - #page-wrapper { - background: var(--main-bg-color) !important; - } - /* Update bar */ - .progress-bar-primary { - background: var(--modal-bg-color); - } - /* Lockscreen */ - .lock-screen { - background: var(--main-bg-color) !important; - } - /* Buttons */ - .btn-primary, .btn-primary.disabled { - background: rgba(0, 0, 0, 0.25); - border: 1px solid transparent; - } - .btn-primary:hover { - background: rgba(0, 0, 0, 0.45); - border: 1px solid rgba(0, 0, 0, 0); - } - .form-material .form-control, .form-material .form-control:focus { - background: #1f1f1f; - border-radius: 3px; - padding: inherit; - } - .lock-screen > .login-box { - width: 400px; - margin: 10% auto 0; - height: initial; - position: initial; - } - /* Sidebar/settings */ - #internal-Settings, .active-tab-Settings, .sidebar body[data-active-tab=""], .sidebar { - background: var(--main-bg-color) !important; - } - .sidebar, .sidebar { - background: transparent; - box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.6); - } - .sidebar-head { - background: var(--main-bg-color) !important; - } - #side-menu li a { - color: #ffffff; - } - #side-menu li a:focus, #side-menu li a:hover { - color: #fff; - background: rgba(255,255,255,.08)!important; - } - #side-menu li a.active { - box-shadow: inset 4px 0 0 0 var(--link-color); } -.label-inverse { - background: var(--custom-buttons-color); + +.login-register { + /* background: var(--main-bg-color) !important; */ + height: 100%; + position: fixed; } -.tabLoaded { - -webkit-filter: drop-shadow(0 0 5px var(--link-color)); - filter: drop-shadow(0 0 5px var(--link-color)); + +.slideInRight { + -webkit-animation-name: none; + animation-name: none; } - /*input form control dropdown*/ -.form-control, select { - background: rgba(0,0,0,.25); - color: #fff; - border: 1px transparent; - } - .form-control:focus, select:focus { - color: #fff !important; - background: #1f1f1f; - border: 1px transparent; - transition: all 0ms linear 0s; - } - /* Settings */ - .bg-title { - background: rgba(0, 0, 0, 0.15); - } - .content-wrap { - background: var(--main-bg-color) !important; - } - .swal-modal.bg-org { - background: var(--main-bg-color); -} - .panel-wrapper > .bg-org .tab-content { - background-color: transparent !important; - } - .panel-blue .panel-heading, .panel-info .panel-heading { - border-color: #ffffff; - color: #fff; - background-color: rgba(0, 0, 0, 0.15); - } - .panel { - background: transparent; - } - .panel-body { + +.login-register .login-box .white-box .bg-org { background: transparent !important; - } - .nav-tabs>li>a:hover { - background: rgba(0, 0, 0, 0.15); - } - .bg-org { - background-color: transparent !important; - } - .tab-content>.active { - display: block; - background: var(--main-bg-color); - } -/* Settings - tables */ - .panel .table { - background: var(--main-bg-color) !important; - } - /* User Management */ - #settings-user-manage-users tr.jsgrid-header-row th { - background: rgba(0, 0, 0, .0); - } +} - #settings-user-manage-users .jsgrid-grid-body td { - background: rgba(0, 0, 0, .0) !important; - } - #settings-user-manage-users .jsgrid-selected-row td { - background: rgba(0, 0, 0, .15) !important - } -/* iframe sandbox */ -.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { - color: #ffffff; +/*2FA login button*/ +.panel-wrapper .panel-body>.btn-warning, +.btn-warning.disabled { + background: hsla(0, 0%, 0%, 0.25) !important; + border: 1px solid #ffc36d00 !important; } -.select2-container--default .select2-selection--multiple .select2-selection__choice { - background-color: #00000094; - border: 1px solid #00000000; - color: #ffffff; -} - /* error page */ -.error-box { - top: 10%; - background: var(--main-bg-color); -} -/*error page background */ -#internal-Settings, #preloader, .preloader, .active-tab-Settings, .error-page { - background: var(--main-bg-color); -} -/*Speed test footer and circles*/ -.white-popup .panel-footer { - background: var(--main-bg-color); - border-top: 1px solid #fff; -} -.css-bar-lg:after { - background: #1f1f1f !important; -} -/* Settings - menu tabs */ - .sttabs nav { - background: rgba(0, 0, 0, 0); -} -.tabs-style-flip nav li.tab-current a::after { - background-color: rgba(0,0,0,.15) !important; - -webkit-transform: none !important; - transform: none !important; - border-radius: 0px !important; -} -.tabs-style-flip nav a::after { - background: rgba(0,0,0,0)!important; - transition: none; - -webkit-transform: none; - transform: none; -} -.tabs-style-flip nav a:hover { - background: rgba(255,255,255,.05)!important; -} - .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover { - background-color: none !important; -} -.tabs-style-flip nav li.tab-current a:hover { - color: #ffffff; - background: rgba(0,0,0,0)!important; -} -.tabs-style-flip nav li.tab-current a { - color: var(--link-color) !important; -} - /* Settings - custom css */ - .ace_gutter { - background: rgba(0,0,0,.3) !important; - color: #fff !important; - } - /* Settings - image manager */ - .el-element-overlay .white-box { - background: transparent !important; - } - /* Settings - news panel */ - #organizrNewsPanel .panel-body { - background: rgba(0, 0, 0, 0.15) !important; - } - /* Settings - tab editor panel */ - .table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd), .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active { - background-color: rgba(0, 0, 0, 0.15)!important; - } - .table-hover>tbody>tr:hover { - background: rgba(0,0,0,.15)!important; - } - #tabEditorTable .btn-info.btn-outline { - color: var(--custom-buttons-color); -} -#tabEditorTable .btn-info.btn-outline:hover,#tabEditorTable .btn-info.btn-outline:focus { - color: white; - background: var(--custom-buttons-color); -} - /* Settings - popup modal */ - .white-popup .panel-heading, .white-popup>.col-md-6>.white-box:first-child { - background: var(--main-bg-color)!important; - } - .white-popup .panel-body, .white-popup>.col-md-6>.white-box:nth-child(2) { - background: var(--main-bg-color) !important; - } - .panel-blue a:hover, .panel-info a:hover { - color: #ffffff; - } - .customtab li.active a, .customtab li.active a:focus, .customtab li.active a:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - background: rgba(0, 0, 0, 0.25); - } - .white-popup-block { - background: var(--main-bg-color)!important; - } - .nav-tabs>li>a { - color: #ffffff; - } - .modal-content, .modal-header, .modal-footer, .modal-body { - background: var(--main-bg-color)!important; - } - .close:focus, .close:hover { + +/*2FA animation header*/ +.panel-warning .panel-heading, +.panel-yellow .panel-heading { color: #fff; - } - .has-success .control-label { - color: var(--link-color); - } - /* Settings - save button */ - .btn-info, .btn-info.disabled { - background: rgba(0, 0, 0, 0.25); - border: none; - } - .btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info.focus, .btn-info:focus, .btn-info:hover { - background: rgba(0, 0, 0, 0.45); - border: none; - } - .btn-info.active, .btn-info:active, .open>.dropdown-toggle.btn-info, .btn-info:active:hover { - background-color: #1b1a1a; - border-color: #1b1a1a; - } - /* Settings logs */ - - .table-striped>tbody>tr:nth-of-type(odd) { - background: rgba(0,0,0,.15)!important; + border-radius: 3px; + background-color: rgba(0, 0, 0, 0.3); + border-color: #00000000; } - .table-striped>tbody>tr:nth-of-type(odd):hover { - background: rgba(0,0,0,.25)!important; -} -table.dataTable>tbody>tr:nth-of-type(even) { - background: rgba(0,0,0,.15)!important; -} -table.dataTable>tbody>tr:nth-of-type(even):hover { - background: rgba(0,0,0,.25)!important; -} - .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { - background: rgba(0,0,0,.08)!important; - color: var(--link-color) !important; - border: 0!important; - border-radius: 0!important; - margin: 0!important; - transition: none; - } - .dataTables_wrapper .dataTables_paginate .paginate_button { - background: rgba(0,0,0,.15); - color: rgba(255,255,255,.7)!important; - border: 0!important; - border-radius: 0!important; - margin: 0!important; - transition: none; - } - .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .nav-tabs li a:hover { - background: rgba(255,255,255,.08)!important; - color: #eee!important; - } - .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover { - background: rgba(0, 0, 0, 0.25) !important; - } -/* Settings - custom CSS */ - .ace-idle-fingers { - background-color: rgba(0, 0, 0, 0.15) !important; - background: rgba(0, 0, 0, 0.15) !important; - } - .ace_gutter { - background: rgba(0,0,0,.3)!important; - color: #eee!important; - } - /* custom buttons */ - .cbutton { - background-color: rgba(255, 255, 255, 0.2) !important; - border-radius: 3px !important; - border-color: transparent !important; - } - - /* Calendar */ - .fc-day-header a, .fc-day-number, .fc-list-heading-main { - color: #FFF; - cursor: pointer!important; - transition: color .2s ease; - } - .fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-popover { - border-color: transparent; - background: rgba(0, 0, 0, 0.05); - } - .bg-theme, .fc-day-header { - background: rgba(0,0,0,.3) !important; - } - .bg-theme, .fc th.fc-sun, .fc th.fc-tue, .fc th.fc-thu, .fc th.fc-sat, .fc th.fc-mon, .fc th.fc-wed, .fc th.fc-fri, .fc-button { - background-color: rgba(0, 0, 0, 0.25) !important; - } - th.fc-day-header.fc-widget-header.fc-today { - background-color:rgba(0, 0, 0, 0.25) !important; +/*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-panels .panel-body, +#login-panels .panel { + background: 0 0; +} + +/*Center login Box*/ +.login-sidebar { + position: relative; + right: initial; +} + +#lockScreen .white-box { + width: 400px; + height: 345px; +} + +#form-lockscreen>div:nth-child(1)>div>div>h3 { + color: #fff !important; +} + +.login-sidebar .white-box { + width: 100%; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + #lockScreen .white-box { + position: absolute; + top: 50%; + transform: translateY(-50%); + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + border-radius: 15px; + background-color: rgba(0, 0, 0, 0.45); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } - .fc-widget-content.fc-today { - background-color: rgba(255, 255, 255, 0.25) !important; - } - .fc-popover { +} + + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + #lockScreen .white-box { + position: absolute; + top: 50%; + transform: translateY(-50%); + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + border-radius: 15px; background: var(--modal-bg-color); - } + } +} + +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + #splashScreen { + overflow-y: scroll; + background: rgb(0 0 0 / 80%) !important; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + } +} + + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + #splashScreen { + overflow-y: scroll; + background: rgb(0 0 0 / 90%) !important; + } +} + +/* Splash screen */ +.p-20 { + padding: 0px !important; +} + + + +.lock-screen { + overflow-y: scroll; +} + +#splashScreen .flexbox:first-of-type { + width: calc(100% - 40px); + margin: auto; +} + +@media (max-width: 375px) { + #splashScreen div[id^=menu-] { + max-width: 88px !important; + } +} + +@media (max-width: 480px) { + #splashScreen .flexbox:first-of-type { + width: auto; + margin-left: 30px; + } +} + +@media (min-width: 768px) { + #splashScreen .flexbox:first-of-type { + width: 600px !important; + margin-top: 0px !important; + } +} + +#splashScreen div[id^=menu-] { + background: transparent; + border-radius: 3px; + max-width: 115px; + margin: 24px 20px 0 0 !important; + padding: 25px; +} + +#splashScreen .bg-org.fc-event { + background-color: transparent !important; + border-radius: 1000px; + height: 80px !important; + width: 80px !important; + background-position: center; +} + +#splashScreen .homepage-text { + display: none; +} + +#splashScreen .flexbox:last-of-type .bg-danger { + background: transparent !important; + color: #fff !important; + border: 0 !important; + border-radius: 100px; + height: 0px !important; + text-align: center; + +} + +#splashScreen .bottom-close-splash { + position: relative !important; + width: 0px; + right: 0px; + bottom: 0px; +} + +#splashScreen .flexbox:last-of-type .bg-danger:before { + font-family: "FontAwesome"; + font-size: 40px; + content: "\f00d"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + -webkit-transform: scale(1.1) !important; + transform: scale(1.1) !important; + -webkit-animation-name: none; + animation-name: none; + text-align: center; + padding-top: inherit; + +} + +#splashScreen .flexbox:last-of-type { + padding: 0 !important; + position: absolute; + left: 50%; + -webkit-transform: translateX(calc(-50% - 10px)); + transform: translateX(calc(-50% - 10px)); +} + +.hvr-wobble-bottom:active, +.hvr-wobble-bottom:focus, +.hvr-wobble-bottom:hover { + -webkit-transform: scale(1.1) !important; + transform: scale(1.1) !important; + -webkit-animation-name: none; + animation-name: none; + +} + +.hvr-wobble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: center; + transform-origin: center; +} + +.splash-badge { + color: #fff; + width: 80px !important; + height: 80px; + font-size: 60px; + border-radius: 1000px; +} + +.splash-badge i { + position: absolute; + left: 10px; + top: 10px; + margin: 0px; + padding: 0px; +} + +.splash-badge i.fa-home:before { + position: absolute !important; + left: -2px !important; +} + +/* Google auth settings modal*/ + +.color-table.info-table thead th { + background-color: rgba(61, 33, 33, 0.25); + color: #fff; +} + +.bg-success.text-inverse { + background-color: rgba(255, 255, 255, 0.15) !important; + color: #FFF; +} + +.panel-blue a, +.panel-info a { + color: var(--link-color); +} + +.color-bordered-table.purple-bordered-table { + border: 2px solid rgb(var(--accent-color)); +} + +.white-box .bg-info { + background: var(--link-color) !important; +} + +/* HOMEPAGE STUFF */ /*TV Missing icon and status*/ #calendar .fa.fa-tv.text-danger, #calendar .fc-time.tv.text-danger { color: var(--calendar-tv-missing); } + /*TV Available icon and status*/ #calendar .fa.fa-tv.text-success, #calendar .fc-time.tv.text-success { color: var(--calendar-tv-available); } + /*TV Unreleased icon and status*/ #calendar .fa.fa-tv.text-info, #calendar .fc-time.tv.text-info { color: var(--calendar-tv-unreleased); } + /*TV Premier icon and status*/ #calendar .fa.fa-tv.text-primary, #calendar .fc-time.tv.text-primary, @@ -414,9 +1041,10 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { #calendar .fa.fa-film.text-danger:before { color: var(--calendar-movie-missing); } + #calendar .fa.fa-film.text-danger:after { - content:" Missing"; - font-family: Rubik,sans-serif; + content: " Missing"; + font-family: Rubik, sans-serif; font-weight: 500; color: var(--calendar-movie-missing); } @@ -425,9 +1053,10 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { #calendar .fa.fa-film.text-success:before { color: var(--calendar-movie-available); } + #calendar .fa.fa-film.text-success:after { - content:" Available"; - font-family: Rubik,sans-serif; + content: " Available"; + font-family: Rubik, sans-serif; font-weight: 500; color: var(--calendar-movie-available); } @@ -436,608 +1065,1444 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { #calendar .fa.fa-film.text-info:before { color: var(--calendar-movie-unreleased); } + #calendar .fa.fa-film.text-info:after { - content:" Unreleased"; - font-family: Rubik,sans-serif; + content: " Unreleased"; + font-family: Rubik, sans-serif; font-weight: 500; color: var(--calendar-movie-unreleased); } - /* Homepage Now playing card */ - .nowPlayingItem > .white-box > .el-card-item { +/* Homepage Now playing card */ +.nowPlayingItem>.white-box>.el-card-item { background: rgba(0, 0, 0, 0.15) !important; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - } - .icon-film, .icon-control-play, .icon-screen-desktop, .icon-control-pause { - color: white !important; - } - .label-info { - background: var(--custom-buttons-color); - } - .white-box { - background: var(--main-bg-color); - } - /* Homepage headers */ - .panel-default .panel-heading, .fc-toolbar { +} + +.icon-film, +.icon-control-play, +.icon-screen-desktop, +.icon-control-pause { + color: white !important; +} + +.label-info { + background: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.white-box { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* Homepage headers */ +.panel-default .panel-heading .fc-toolbar { background: transparent !important; padding: 20px 0px; - } - /* Homepage buttons */ - #homepage-items .btn-group .btn { - background: 0 0!important; - color: rgba(255,255,255,.7)!important; - padding: 6px 12px; - margin: 0 12.5px; - transition: color .2s ease; - } - #homepageOrderdeluge .mailbox-widget .customtab li.active a, - #homepageOrderqBittorrent .mailbox-widget .customtab li.active a, - #homepageOrderrTorrent .mailbox-widget .customtab li.active a, - #homepageOrdertransmission .mailbox-widget .customtab li.active a{ - height: auto; - padding: 5px 5px 0px 5px; - cursor: pointer; - font-weight: 400; - } +} - #homepageOrderdeluge .ti-download:before, - #homepageOrderqBittorrent .ti-download:before, - #homepageOrderrTorrent .ti-download:before, - #homepageOrdertransmission .ti-download:before{ - display:none; - } - #homepageOrderdeluge .white-box, - #homepageOrderqBittorrent .white-box, - #homepageOrderrTorrent .white-box, - #homepageOrdertransmission .white-box { - padding-right: 0px !important; - } -/* #homepage-items .white-box { - padding-left: 0px !important; - }*/ - #homepage-items .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover { - cursor: pointer; - opacity: 1; - background: rgba(0, 0, 0, 0.25) !important; - } - #homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active .nav>li>a, - #homepageOrderdownloader .nav-tabs>li>a, .nav-tabs>li .nav>li>a{ - padding: 10px 12.5px; - } - #homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active .nav>li>a .customtab, - #homepageOrderdownloader .nav-tabs { - padding: 10px 12.5px; - } - #homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li.active>a,#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li>a { - padding: 10px 11.5px !important; - } - #homepageOrderdownloader .nav-tabs>li.active>a:hover, #homepageOrderdownloader .nav-tabs>li.active:hover { +.panel-black .panel-heading, +.panel-inverse .panel-heading { + border-color: transparent; + color: #fff; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* Homepage buttons */ + +#homepageOrderdeluge .mailbox-widget .customtab li.active a, +#homepageOrderqBittorrent .mailbox-widget .customtab li.active a, +#homepageOrderrTorrent .mailbox-widget .customtab li.active a, +#homepageOrdertransmission .mailbox-widget .customtab li.active a { + height: auto; + padding: 5px 5px 0px 5px; + cursor: pointer; + font-weight: 400; +} + +#homepageOrderdeluge .ti-download:before, +#homepageOrderqBittorrent .ti-download:before, +#homepageOrderrTorrent .ti-download:before, +#homepageOrdertransmission .ti-download:before { + display: none; +} + +#homepageOrderdeluge .white-box, +#homepageOrderqBittorrent .white-box, +#homepageOrderrTorrent .white-box, +#homepageOrdertransmission .white-box { + padding-right: 0px !important; +} + +#homepage-items .nav-tabs>li.active>a, +.nav-tabs>li.active>a:hover { + cursor: pointer; + opacity: 1; + background: rgba(0, 0, 0, 0.25) !important; +} + +#homepageOrderdownloader .nav-tabs>li.active>a, +.nav-tabs>li.active .nav>li>a, +#homepageOrderdownloader .nav-tabs>li>a, +.nav-tabs>li .nav>li>a { + padding: 10px 12.5px; +} + +#homepageOrderdownloader .nav-tabs>li.active>a, +.nav-tabs>li.active .nav>li>a .customtab, +#homepageOrderdownloader .nav-tabs { + padding: 10px 12.5px; +} + +#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li.active>a, +#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li>a { + padding: 10px 11.5px !important; +} + +#homepageOrderdownloader .nav-tabs>li.active>a:hover, +#homepageOrderdownloader .nav-tabs>li.active:hover { background: rgba(0, 0, 0, 0.25) !important; opacity: 1; - } - #homepageOrderdownloader .downloaderCount { - margin-top: -20px !important; - } - #homepageOrderdownloader .mailbox-widget .customtab li a { - padding: 20px 15px 5px 15px; - } - #homepageOrderdownloader .customtab li a { - padding: 20px 15px 5px 15px !important; - } +} - #homepageOrderdownloader .mailbox-widget .customtab li a:hover { - opacity: 1; - } - /* Homepage calendar buttons */ - .fc-next-button, .fc-prev-button { - background: 0 0!important; - color: rgba(255,255,255,.7)!important; - border: 0!important; - } - .btn-group.open .dropdown-toggle, .fc-state-default { - text-shadow: none; - box-shadow: none; - } - .fc-button:hover { - background: rgba(255,255,255,.08)!important; - } - .fc-button { - background: rgba(0, 0, 0, 0)!important; - color: #fff; - border-radius: 0!important; - border: 0!important; - text-transform: uppercase; - } - /* Homepage ombi - request triangle */ - .inside-request-div { +#homepageOrderdownloader .downloaderCount { + margin-top: -20px !important; +} + +#homepageOrderdownloader .mailbox-widget .customtab li a { + padding: 20px 15px 5px 15px; +} + +#homepageOrderdownloader .customtab li a { + padding: 20px 15px 5px 15px !important; +} + +#homepageOrderdownloader .mailbox-widget .customtab li a:hover { + opacity: 1; +} + +/* Homepage calendar buttons */ +.fc-next-button, +.fc-prev-button { + background: 0 0 !important; + color: rgba(255, 255, 255, .7) !important; + border: 0 !important; +} + +.btn-group.open .dropdown-toggle, +.fc-state-default { + text-shadow: none; + box-shadow: none; +} + +.fc-button:hover { + background: rgba(255, 255, 255, .08) !important; +} + +.fc-button { + background: rgba(0, 0, 0, 0) !important; + color: var(--text-hover); + border-radius: 0 !important; + border: 0 !important; + text-transform: uppercase; +} + +/* Homepage ombi - request triangle */ +.inside-request-div { background-color: var(--link-color) !important; } - /* Homepage ombi - dropdown */ - #homepage-items .btn-group .btn { - background: 0 0!important; - color: rgba(255,255,255,.7)!important; - padding: 6px 12px; - margin: 0 12.5px; - transition: color .2s ease; - } - .btn-group.open, .dropdown-toggle, .fc-state-default { - text-shadow: none !important; - box-shadow: none !important; - } - .btn-info:active:focus, .btn-info:active:hover, .btn-info:focus { - border: none !important; - } - .btn.active, .btn:active { - -webkit-box-shadow: none; - box-shadow: none; - } + +.btn-group.open, +.dropdown-toggle, +.fc-state-default { + text-shadow: none !important; + box-shadow: none !important; +} + +/* .btn-info:active:focus, +.btn-info:active:hover, +.btn-info:focus { + border: none !important; +} */ + +.btn.active, +.btn:active { + -webkit-box-shadow: none; + box-shadow: none; +} /* Notification Popups */ - /* Izi */ - .iziToast.update-notify.iziToast-layout2, .iziToast.success-notify.iziToast-layout2 { +/* Izi */ +.iziToast.update-notify.iziToast-layout2, +.iziToast.success-notify.iziToast-layout2, +.iziToast.warning-notify.iziToast-layout2 { border: none; background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: transparent; - } - .iziToast.update-notify>.iziToast-body .iziToast-icon, .iziToast.success-notify>.iziToast-body .iziToast-icon { +} + +.iziToast.update-notify>.iziToast-body .iziToast-icon, +.iziToast.success-notify>.iziToast-body .iziToast-icon .iziToast.warning-notify>.iziToast-body .iziToast-icon, +.iziToast.warning-notify>.iziToast-body .iziToast-icon { color: var(--link-color) !important; - } - .iziToast:after { +} + +.iziToast:after { background: var(--modal-bg-color) !important; - } - .update-notify .iziToast-progressbar div, .success-notify .iziToast-progressbar div { - background: var(--notification-box-line) !important; - } - .iziToast>.iziToast-close { + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.update-notify .iziToast-progressbar div, +.success-notify .iziToast-progressbar div, +.warning-notify .iziToast-progressbar div { + background: rgb(var(--accent-color)) !important; +} + +.iziToast>.iziToast-close { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAk6AAAJOgHwZJJKAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTAyVDIyOjExOjA0KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wMlQyMjoxMTozNiswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0xMi0wMlQyMjoxMTozNiswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzZkZDFlZS01YjJhLWIyNGMtOTA5ZC1lMzljOTJlMDVlYmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTM2ZGQxZWUtNWIyYS1iMjRjLTkwOWQtZTM5YzkyZTA1ZWJjIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MTM2ZGQxZWUtNWIyYS1iMjRjLTkwOWQtZTM5YzkyZTA1ZWJjIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMzZkZDFlZS01YjJhLWIyNGMtOTA5ZC1lMzljOTJlMDVlYmMiIHN0RXZ0OndoZW49IjIwMTktMTItMDJUMjI6MTE6MDQrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz47W311AAAA1klEQVRYw82XDQrDIAyFPVgP4AX8vXHPtIJTsKMMk6XT7E0IVGz9nrHGxJRStmp7N2uUW2NceJvpD2d7VHOKcNcZZ9vfBaiJGMBfAuxgoPX9QrgnGJZTt0QEA3cSFx3VwgQ89DlkW0yo/UoEA/cSlx0DEfEGPBJz+Bn1IhEMPKxwYesn5pu0BC5YTboBj7PHiBKRL+9kFbhgdZmBp9WhlBKhD//ganJrfi1CHw4XAN0C6E8IPYbQQAQNxdDLCHodQxMSaEoGTUqhaTm8MPmH0gxenELL8yfG1e3Ahlk83AAAAABJRU5ErkJggg==) 50% 50% / 8px no-repeat; - } - /* Alertify */ +} + +/* Alertify */ .ajs-message.ajs-error-alertify.ajs-visible { color: #f44336; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: transparent; } + .ajs-message.ajs-warning-alertify { color: #ffeb3b; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: transparent; } + .ajs-message.ajs-info-alertify { color: #6da8ff; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: transparent; } + .ajs-message.ajs-success-alertify { color: #00ffb8; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-color: transparent; } + /* Noty */ .noty_type__error-noty .noty_body { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #f44336; border: 1px solid transparent; border-bottom: transparent; } + .noty_type__warning-noty .noty_body { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #ffeb3b; border: 1px solid transparent; border-bottom: transparent; } + .noty_type__info-noty .noty_body { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #3a83f0; border: 1px solid transparent; border-bottom: transparent; } + .noty_type__success-noty .noty_body { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #00ffb8; border: 1px solid transparent; border-bottom: transparent; } - .btn-link, a { - color: var(--link-color); - text-decoration: none; - } - /* Homepage cover - hover */ - .hover-homepage-item:hover { - background: var(--hompage-item-hover); - opacity: 1; - transition: linear .2s; - } - /* Homepage streams- hover */ - .el-card-avatar a { - color: rgba(255,255,255,.7)!important; - border: white; - } - .el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover { - background: transparent; - color: white !important; - border: white !important; - } - .progress-bar-info { - background: rgba(255, 255, 255, 0.25) !important; - } - .progress-bar-inverse, .progress { - background: rgba(0, 0, 0, 0.25) !important; - } - - /* Homepage health checks */ +.btn-link, +a { + color: var(--link-color); + text-decoration: none; +} + +.btn-link:hover, +a:hover, +.panel-blue a:hover, +.panel-info a:hover { + color: var(--link-color-hover); + text-decoration: none; +} + +/* Homepage streams- hover */ +.el-card-avatar a { + color: rgba(255, 255, 255, .7) !important; + border: white; +} + +.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover { + background: transparent; + color: white !important; + border: white !important; +} + +.progress-bar-info { + background: rgb(var(--accent-color)) !important; + color: var(--label-text-color); +} + +.progress-bar-inverse, +.progress { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* Homepage health checks */ +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .bg-inverse .healthPosition { background: rgba(255, 255, 255, 0.2) !important; -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-radius: 3px; } - #homepageOrderhealthchecks .card-body { - background: rgba(255, 255, 255, 0.2); - } -.card, .card-body { +} + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + .bg-inverse .healthPosition { + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-radius: 3px; + } +} + +.bg-inverse .healthPosition h3, +.bg-inverse .healthPosition h5 { + color: #fff !important; +} + +#homepageOrderhealthchecks .card-body { + background: rgba(255, 255, 255, 0.2); +} + +.card, +.card-body { border-radius: 3px; - } +} + .bg-inverse { background: transparent !important; - } +} + .left-health { border-radius: 3px 0 0 3px; - } - - /* Homepage Tautulli Cards*/ - #homepageOrdertautulli .library-card .card-body, #homepageOrdertautulli div:nth-child(8) .card-body { - background: rgba(255, 255, 255, .2); - } - .homepage-tautulli-card .cardCountType { - color: #eee; - } - .homepage-tautulli-card .tautulliRank, .homepage-tautulli-card .tautulliSeparator { - color: #eee; - } - .homepage-tautulli-card .bg-img-cont { - border-radius: 3px; - border: .0001px solid #00000000; - } - - /* Homepage Unifi cards */ - .unifiCards .panel-heading { - background: rgba(255, 255, 255, 0.2) !important; - color: #fff !important; - border-color: transparent !important; - text-align: inherit !important; - border-radius: 3px 3px 0 0 !important; - } - .unifiCards .panel-wrapper.collapse.in { - background:rgba(0, 0, 0, 0.15); - } - - /* Homepage Monitor Cards */ - #homepageOrderMonitorr .card-body { - background: rgba(255, 255, 255, 0.2); - } - #homepageOrderMonitorr .col-lg-2 { - width: 170px; - } - #homepageOrderMonitorr .badge { - border-radius: 3px; - } - #homepageOrderMonitorr .bg-success { - background-color: #47bb62 !important; - } - #homepageOrderMonitorr .col-lg-3 .bg-success { - background-color: #53e69d !important; - } - - /*Homepage WeatherAndAir Cards*/ - #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { - background: rgba(0, 0, 0, .2); - } - .health-and-pollutant-section .content-current { - background: rgba(255, 255, 255, .2); - } - #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after { - border-top-color: var(--link-color); - } - #homepageOrderWeatherAndAir .text-info { - color: var(--link-color); - } - #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li a { - color: #ddd; - } - #homepageOrderWeatherAndAir .white-box { - background: rgba(255, 255, 255, .1); - border-radius: 3px; - } - /*Homepage Speedtest Cards*/ - #allSpeedtest .speedtest-card { - background-color: rgba(255, 255, 255, .1); - } - #allSpeedtest .speedtest-card .text-muted, #allSpeedtest .speedtest-card h5 { - color: #d6d6d6 !important; - } - #allSpeedtest .shadow-sm { - -webkit-box-shadow: none !important; - box-shadow: none !important; - } -/* loginpage sidemenu */ -@media (max-width: 480px) { - .login-register > .login-box > .white-box { - margin-top: auto !important; - width: 100% !important; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important; - box-shadow: 0 0 10px rgba(0, 0, 0, 0) !important; - } - } - -/* 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: transparent !important; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - } - - .login-register { - background: var(--main-bg-color)!important; - 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: hsla(0, 0%, 0%, 0.25) !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 sidebar*//*Login sidebar*/ - .login-box.login-sidebar, - #login-panels .panel-body, - #login-panels .panel { - background: transparent !important; - } - - /*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: transparent; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - } - - /* Splash screen */ - .p-20 { - padding: 0px!important; -} -#splashScreen, .lock-screen { - overflow-y: scroll; -} -#splashScreen .flexbox:first-of-type { - width: calc(100% - 40px); - margin: auto; -} - @media (max-width: 375px) { -#splashScreen div[id^=menu-] { - max-width: 88px !important; -} - } - @media (max-width: 480px) { -#splashScreen .flexbox:first-of-type { - width: auto; - margin-left: 30px; -} - } -@media (min-width: 768px) { -#splashScreen .flexbox:first-of-type { - width: 600px!important; - margin-top: 0px!important; -} } -#splashScreen div[id^=menu-] { - background: transparent; +/* Homepage Tautulli Cards*/ +#homepageOrdertautulli .library-card .card-body, +#homepageOrdertautulli div:nth-child(8) .card-body { + background: rgba(255, 255, 255, .2); +} + +.homepage-tautulli-card .cardCountType { + color: #eee; +} + +.homepage-tautulli-card .tautulliRank, +.homepage-tautulli-card .tautulliSeparator { + color: #eee; +} + +.homepage-tautulli-card .bg-img-cont { border-radius: 3px; - max-width: 115px; - margin: 24px 20px 0 0!important; - padding: 25px; -} -#splashScreen .bg-org.fc-event { - background-color: transparent !important; - border-radius: 1000px; - height: 80px!important; - width: 80px !important; - background-position: center; + border: .0001px solid #00000000; } -#splashScreen .homepage-text { - display: none; -} - -#splashScreen .flexbox:last-of-type .bg-danger { - background: transparent !important; - color: #fff!important; - border: 0!important; - border-radius: 100px; - height: 0px!important; - text-align: center; - -} -#splashScreen .bottom-close-splash { - position: relative !important; - width: 0px ; - right: 0px ; - bottom: 0px ; +/* Homepage Unifi cards */ +.unifiCards .panel-heading { + background: rgb(var(--accent-color)); + color: var(--label-text-color) !important; + border-color: transparent !important; + text-align: inherit !important; + border-radius: 3px 3px 0 0 } -#splashScreen .flexbox:last-of-type .bg-danger:before { - font-family: "FontAwesome"; - font-size: 40px; - content: "\f00d"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - -webkit-transform: scale(1.1) !important; - transform: scale(1.1) !important; - -webkit-animation-name: none; - animation-name: none; - text-align: center; - padding-top: inherit; - -} -#splashScreen .flexbox:last-of-type { - padding: 0!important; - position: absolute; - left: 50%; - -webkit-transform: translateX(calc(-50% - 10px)); - transform: translateX(calc(-50% - 10px)); -} -.hvr-wobble-bottom:active, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:hover { - -webkit-transform: scale(1.1) !important; - transform: scale(1.1) !important; - -webkit-animation-name: none; - animation-name: none; - -} -.hvr-wobble-bottom { - display: inline-block; - vertical-align: middle; - -webkit-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); - box-shadow: 0 0 1px rgba(0,0,0,0); - -webkit-transition-duration: .3s; - transition-duration: .3s; - -webkit-transition-property: transform; - transition-property: transform; - -webkit-transform-origin: center; - transform-origin: center; -} -.splash-badge { - color: #fff; - width: 80px!important; - height: 80px; - font-size: 60px; - border-radius: 1000px; -} -.splash-badge i { - position: absolute; - left: 10px; - top: 10px; - margin: 0px; - padding: 0px; -} -.splash-badge i.fa-home:before { - position: absolute !important; - left: -2px !important; +.unifiCards .panel-wrapper.collapse.in { + background: rgba(0, 0, 0, 0.15); } -/* Google auth settings modal*/ +/* Homepage Monitor Cards */ +#homepageOrderMonitorr .card-body { + background: rgba(255, 255, 255, 0.2); +} -.color-table.info-table thead th { - background-color: rgba(0, 0, 0, 0.25); - color: #fff; +#homepageOrderMonitorr .col-lg-2 { + width: 170px; } -.bg-success.text-inverse { - background-color: rgba(255, 255, 255, 0.15) !important; - color: #FFF; + +#homepageOrderMonitorr .badge { + border-radius: 3px; } -.panel-blue a, .panel-info a { + +#homepageOrderMonitorr .bg-success { + background-color: #47bb62 !important; +} + +#homepageOrderMonitorr .col-lg-3 .bg-success { + background-color: #53e69d !important; +} + +/*Homepage WeatherAndAir Cards*/ +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { + background: rgba(0, 0, 0, .2); +} + +.health-and-pollutant-section .content-current { + background: rgba(255, 255, 255, .2); +} + +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after { + border-top-color: var(--link-color); +} + +#homepageOrderWeatherAndAir .text-info { color: var(--link-color); } -.color-bordered-table.purple-bordered-table { - border: 2px solid var(--notification-box-line); -} -.white-box .bg-info { - background: var(--link-color) !important; + +#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li a { + color: #ddd; } -/* Email Center*/ - -.ms-container .ms-selectable, .ms-container .ms-selection { - background: rgba(0, 0, 0, 0.25); -} -.ms-container .ms-list { - border: 1px solid rgba(255, 255, 255, 0.2); -} -.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection { - border-bottom: 1px rgba(238, 238, 238, .2) solid; +#homepageOrderWeatherAndAir .white-box { + background: rgba(255, 255, 255, .1); + border-radius: 3px; } -.ms-container .ms-selectable li.ms-hover, -.ms-container .ms-selection li.ms-hover { - background: rgba(255, 255, 255, .08) +/*Homepage Speedtest Cards*/ +#allSpeedtest .speedtest-card { + background-color: rgba(255, 255, 255, .1); } -.ms-container .ms-list.ms-focus{ - border-color: rgba(255, 255, 255, .5); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); + +#allSpeedtest .speedtest-card .text-muted, +#allSpeedtest .speedtest-card h5 { + color: #d6d6d6 !important; } + +#allSpeedtest .shadow-sm { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.swal-overlay--show-modal .swal-modal { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); +} + +[id*="homepage"] .panel-heading.bg-info, +.fc-toolbar:not(.fc-alternate) { + background: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +.fc-toolbar:not(.fc-alternate) h2, +.fc .fc-button-group>button:not(.fc-alternate [class*="fc"]) { + color: var(--label-text-color) !important; +} + +.bg-info:not(.fc-alternate):not(.feeds .bg-info) { + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +/* Email Center */ +#user-list-div .ms-container .ms-selectable li.ms-hover, +#user-list-div .ms-container .ms-selection li.ms-hover { + background: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +#user-list-div .ms-container .ms-selectable, +#user-list-div .ms-container .ms-selection { + background: rgb(0 0 0 / 25%); + color: var(--text); +} + +#user-list-div .ms-container .ms-selectable li.ms-elem-selectable, +#user-list-div .ms-container .ms-selection li.ms-elem-selection { + border-bottom: 1px rgba(238, 238, 238, .1) solid; + color: var(--text) +} + +#user-list-div .ms-container .ms-list.ms-focus { + border-color: rgba(var(--accent-color), 0.8); + -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(var(--accent-color), .6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--accent-color), 0.6); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(var(--accent-color), .6); +} + +#user-list-div .ms-container .ms-list { + border: 1px solid rgb(var(--accent-color)); +} + +/* Apparance side menu*/ +.tabs-vertical li.active a, +.tabs-vertical li.active a:focus, +.tabs-vertical li.active a:hover { + background: rgba(var(--accent-color), .15) !important; +} + +.customvtab .tabs-vertical li.active a, +.customvtab .tabs-vertical li.active a:focus, +.customvtab .tabs-vertical li.active a:hover { + border-right: 2px solid rgb(var(--accent-color)); + color: rgb(var(--accent-color)); +} + +.vtabs .tabs-vertical li a { + color: var(--text); +} + +.vtabs .nav>li>a:focus, +.vtabs .nav>li>a:hover { + background-color: rgba(var(--accent-color), .15); +} + +/* THEME PARK CUSTOM END*/ + +html { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +#page-wrapper { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/*Top Header Part*/ +.logo i { + color: var(--text-hover); +} + +@-moz-document url-prefix() { + .navbar-header { + background: transparent !important; + } + + .dropdown-menu { + background: transparent !important; + } +} + +.navbar-header { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.navbar-top-links>li>a { + color: var(--link-color); +} + +.nav .open>a, +.nav .open>a:focus, +.nav .open>a:hover { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/*Right panel*/ +.right-sidebar .rpanel-title { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/*Bread Crumb*/ +.bg-title .breadcrumb .active { + color: #1f1f1f; +} + +/*Sidebar*/ + +@media (max-width: 767px) { + + .show-sidebar .sidebar, + .sidebar .sidebar-head { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +.sidebar { + background: rgba(0, 0, 0, 0.26) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08); + transition: max-width .2s cubic-bezier(.4, 0, .2, 1), background-color .2s ease-out; + +} + +.navbar-default, +.sidebar .sidebar-head { + background: transparent; +} + +.sidebar:hover { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; + transition: max-width .2s cubic-bezier(.4, 0, .2, 1), background-color .2s ease-out; +} + +.sidebar .label-custom { + background: #01c0c8; +} + +#side-menu li a { + color: var(--text); +} + +#side-menu li a { + color: var(--text); + border-left: 0px solid #1b1a1a; +} + +@media (pointer: fine) { + + #side-menu>li>a:hover, + #side-menu>li>a:focus { + background: rgba(0, 0, 0, 0.07); + color: var(--text-hover); + } +} + +#side-menu>li>a.active, +#side-menu>li>ul>li>a.active { + background: rgba(var(--accent-color), 0.05); + color: rgb(var(--accent-color)); + font-weight: 500; + -webkit-box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)); + box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)); + border-radius: 0 0 0 0; + margin-left: 0px; +} + +#side-menu ul>li>a:hover { + color: var(--text-hover); +} + +#side-menu ul>li>a.active { + color: var(--text-hover); + font-weight: 500; +} + +.user-profile .user-pro-body .u-dropdown { + color: var(--text); +} + +.drop-title { + color: var(--text-hover); +} + +.dropdown-menu { + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-menu>li>a { + color: var(--text) !important; + +} + +.dropdown-menu>li>a:focus, +.dropdown-menu>li>a:hover { + color: var(--text-hover) !important; +} + +.label-inverse { + background-color: #131313; +} + +/*themecolor*/ +.bg-theme { + background-color: #707cd2 !important; +} + +.bg-org:not([id="menu-"]div):not(.panel-heading) { + background: var(--main-bg-color) !important; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/*Button*/ +.btn-custom { + background: var(--button-color); + border: 1px solid var(--button-color); + color: var(--button-text); +} + +.btn-custom:hover { + background: var(--button-color-hover); + opacity: 0.8; + color: var(--button-text-hover); + border: 1px solid var(--button-color-hover); +} + +/*Custom tab +.customtab li.active a, +.customtab li.active a:hover, +.customtab li.active a:focus { + border-bottom: 2px solid #1f1f1f; + color: #1f1f1f; +} +*/ + +.tabs-vertical li.active a, +.tabs-vertical li.active a:hover, +.tabs-vertical li.active a:focus { + background: #1f1f1f; + border-right: 2px solid #1f1f1f; +} + +/*Nav-pills*/ +.nav-pills>li.active>a, +.nav-pills>li.active>a:focus, +.nav-pills>li.active>a:hover { + background: #1f1f1f; + color: #ffffff; +} + +/*Extra css*/ +.bg-theme, +.fc th.fc-sun, +.fc th.fc-tue, +.fc th.fc-thu, +.fc th.fc-sat, +.fc th.fc-mon, +.fc th.fc-wed, +.fc th.fc-fri, +.fc-button { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.table tbody tr.advance-table-row.active, +.fc-button { + border-color: #1f1f1f; +} + +.manage-users .tabs-style-iconbox nav { + background: #1f1f1f; +} + +.manage-users .tabs-style-iconbox nav li.tab-current a { + background: #1f1f1f; +} + +.manage-users .tabs-style-iconbox nav li.tab-current a:after { + border-top-color: #1f1f1f; +} + +.panel-themecolor, +.panel-theme { + border-color: #1f1f1f; +} + +.panel-themecolor .panel-heading, +.panel-theme .panel-heading { + border-color: #1f1f1f; + color: white; + background-color: #1f1f1f; +} + +.panel-themecolor .panel-heading a, +.panel-theme .panel-heading a { + color: var(--text-hover); +} + +.panel-themecolor .panel-heading a:hover, +.panel-theme .panel-heading a:hover { + color: rgba(255, 255, 255, 0.5); +} + +.panel-themecolor a, +.panel-theme a { + color: #1f1f1f; +} + +.panel-themecolor a:hover, +.panel-theme a:hover { + color: #177eac; +} + +.white-box, +body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div:nth-child(2) { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div.white-box.m-b-0.bg-info>h3 { + color: var(--label-text-color) !important; +} + +@media screen and (min-width: 768px) { + .orgErrorAlert { + min-width: 478px; + width: calc(100% - 40px); + max-width: 1200px; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +/* #mediaSearch-area>div>div, +body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div, +body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div.white-box.m-b-0.bg-info { + background: var(--modal-bg-color) !important; +} */ + +.bg-title { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.panel { + background: #1b1a1a; +} + +.form-control, +input, +.input-group-addon, +.no-bg-addon .input-group-addon { + background-color: #1f1f1f; +} + +.bg-title .breadcrumb .active { + color: #e6d086; +} + +.tabs-style-flip nav li.tab-current a::after { + background-color: rgba(var(--accent-color), 0.05); + -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 0deg); + transform: perspective(900px) rotate3d(1, 0, 0, 0deg); + border-radius: 0px 0px 0 0; +} + +.tabs-style-flip .content-wrap { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.tabs-style-flip nav li.tab-current a { + color: rgb(var(--accent-color)); +} + +.customtab2 li.active a, +.customtab2 li.active a:focus, +.customtab2 li.active a:hover { + background: #1f1f1f; + border-radius: 20px; +} + +.nav-tabs>li>a:hover { + background: rgba(0, 0, 0, 0.25) !important; + border-radius: 0px; + color: var(--text-hover); +} + +.tabs-style-flip nav a:focus, +.tabs-style-flip nav a:hover { + color: rgb(var(--accent-color)); +} + +.breadcrumb>li+li:before { + padding: 0 2px 0 4px; + color: #ccc; + content: "/\00a0"; +} + +.wizard-steps>li.done { + background: #2b8b2d; +} + + +#account-area>div>div>div>div>div.panel-wrapper.collapse.in.main-email-panel>div { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.tab-content .panel .panel-body, +.tab-content .panel .panel-body .bg-org { + background: transparent !important; +} + +/* +.jq-toast-single { + border-radius: 10px 10px 0 0; +} +*/ + +.tooltip-text3 { + border-bottom: 10px solid #2cabe4; + overflow: hidden; + -webkit-transform: scale3d(0, 1, 1); + transform: scale3d(0, 1, 1); + -webkit-transition: -webkit-transform .3s .3s; + transition: transform .3s .3s; +} + +a.mytooltip { + font-weight: 500; + color: #2cabe4; +} + +.tooltip-content5::after { + content: ''; + bottom: -20px; + left: 50%; + border: solid transparent; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: #2cabe4 transparent transparent; + border-width: 10px; + margin-left: -10px; +} + +.tooltip-info+.tooltip .tooltip-inner,.tooltip-info.tooltip .tooltip-inner { + color: var(--label-text-color); + background-color: rgba(var(--accent-color)); +} + +.tooltip-info+.tooltip.top .tooltip-arrow,.tooltip-info.tooltip.top .tooltip-arrow { + border-top-color: rgba(var(--accent-color)); +} + +.tooltip-info+.tooltip.right .tooltip-arrow,.tooltip-info.tooltip.right .tooltip-arrow { + border-right-color: rgba(var(--accent-color)); +} + +.tooltip-info+tooltip.bottom .tooltip-arrow,.tooltip-info.tooltip.bottom .tooltip-arrow { + border-bottom-color: rgba(var(--accent-color)); +} + +.tooltip-info+.tooltip.left .tooltip-arrow,.tooltip-info.tooltip.left .tooltip-arrow { + border-left-color: rgba(var(--accent-color)); +} + +.swapLog.active { + border: 1px solid rgba(120, 130, 140, .2); + background-color: #12dafefc !important; + color: #1f1f1f; +} + +.white-popup-block { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + padding: 20px 30px; + text-align: left; + max-width: 75%; + margin: 40px auto; + position: relative; + /*border: 1px solid #2cabe4; + border-radius: 10px;*/ +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #333; + opacity: 1; +} + +.sweet-alert { + background-color: #1b1a1a; +} + +.sweet-alert button.cancel { + background-color: #2cabe3; +} + +.sweet-alert button.cancel:hover { + background-color: #3a7b98; +} + +.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover { + background: #707cd2; + border-color: #707cd2; +} + +.error-page { + width: 100%; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + height: 100%; + position: fixed; + display: none; + z-index: 11; +} + +.error-body h1 { + font-size: 210px; + font-weight: 400; + line-height: 210px; +} + +.fc-unthemed .fc-popover { + background-color: #1b1b1b; +} + +.fc-unthemed .fc-divider, +.fc-unthemed .fc-popover .fc-header { + background: #1f1f1f; +} + +.table-hover>tbody>tr:hover, +.table-striped>tbody>tr:nth-of-type(odd), +.table>tbody>tr.active>td, +.table>tbody>tr.active>th, +.table>tbody>tr>td.active, +.table>tbody>tr>th.active, +.table>tfoot>tr.active>td, +.table>tfoot>tr.active>th, +.table>tfoot>tr>td.active, +.table>tfoot>tr>th.active, +.table>thead>tr.active>td, +.table>thead>tr.active>th, +.table>thead>tr>td.active, +.table>thead>tr>th.active { + background-color: rgba(0, 0, 0, 0.25) !important; +} + +.asColorPicker-dropdown, +.checkbox label::before, +.clockpicker-popover .popover-content, +.clockpicker-popover .popover-title, +.customvtab .tabs-vertical li.active a, +.customvtab .tabs-vertical li.active a:focus, +.customvtab .tabs-vertical li.active a:hover, +.dropdown-menu, +.fc-day, +.footable-row-detail, +.img-thumbnail, +.input-group-addon, +.jsgrid-filter-row>td, +.jsgrid-header-sortable:hover, +.nav-tabs>li>a:focus, +.nav-tabs>li>a:hover, +.pager .disabled>a, +.pager .disabled>a:focus, +.pager .disabled>a:hover, +.pager .disabled>span, +.pager li>a:focus, +.pager li>a:hover, +.pagination>.disabled>a, +.pagination>.disabled>a:focus, +.pagination>.disabled>a:hover, +.pagination>.disabled>span, +.pagination>.disabled>span:focus, +.pagination>.disabled>span:hover, +.popover, +.popover-title, +.right-sidebar, +code, +table.dataTable tbody tr { + background: #1b1b1b; +} + +.table>tbody>tr>td, +.table>tbody>tr>th, +.table>tfoot>tr>td, +.table>tfoot>tr>th, +.table>thead>tr>td, +.table>thead>tr>th { + padding: 8px; + line-height: 1.42857143; + vertical-align: middle; + /*border-top: transparent;*/ +} + +.btn-default, +.chat-list .chat-text h4, +.dropdown-menu>li>a, +.dropdown-menu>li>a:focus, +.dropdown-menu>li>a:hover, +.flot-text, +.footer, +.form-control, +.h1 .small, +.h1 small, +.h2 .small, +.h2 small, +.h3 .small, +.h3 small, +.h4 .small, +.h4 small, +.h5 .small, +.h5 small, +.h6 .small, +.h6 small, +.help-block, +.input-group-addon, +.text-muted, +a.list-group-item:focus, +a.list-group-item:hover, +button.list-group-item:focus, +button.list-group-item:hover, +h1 .small, +h1 small, +h2 .small, +h2 small, +h3 .small, +h3 small, +h4 .small, +h4 small, +h5 .small, +h5 small, +h6 .small, +h6 small, +tbody, +th { + color: #ffffff; +} + +.bootstrap-tagsinput, +.calendar-widget, +.chat-main-box, +.content-wrap, +.css-bar:after, +.customtab li.active a, +.customtab li.active a:focus, +.customtab li.active a:hover, +.daterangepicker .input-mini, +.dropify-wrapper, +.dropify-wrapper .dropify-preview, +.dropzone, +.footer, +.form-control, +.jsgrid-alt-row>td, +.jsgrid-header-row>th, +.jsgrid-row>td, +.list-group-item, +.list-group-item.disabled, +.list-group-item.disabled:focus, +.list-group-item.disabled:hover, +.manage-table, +.myadmin-dd .dd-list .dd-item .dd-handle, +.myadmin-dd-empty .dd-list .dd3-content, +.myadmin-dd-empty .dd-list .dd3-handle, +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover, +.pager li>a, +.pager li>span, +.pagination>li>a, +.pagination>li>span, +.panel:not(#invite-area > div > div > div.col-md-12 > div):not(#login-panels > div), +.panel-default .panel-body, +.panel-default .panel-footer, +.panel-default .panel-heading, +.panel-footer textarea, +.panel-white .panel-body, +.panel-white .panel-footer, +.panel-white .panel-heading, +.radio label::before, +.select2-container-multi .select2-choices, +.table tbody tr.advance-table-row td, +.thumbnail, +.well, +.white-box:not(.resultBox-outside.white-box), +input, +pre, +select, +table.dataTable.display tbody tr.odd, +table.dataTable.stripe tbody tr.odd { + background: rgba(0, 0, 0, 0.15); +} + +input:focus:not(select), +input:active:not(select), +.form-control:focus:not(select), +.form-control:active:not(select) { + background: rgba(0, 0, 0, 0.445); + border: 1px solid rgba(120, 130, 140, 0.4); +} + + +.cp-container .cp-pills li a { + padding: 5px; + color: #FFF; + text-decoration: none; +} + +.cp-container .cp-pills li a.active, +.cp-container .cp-pills li a:hover { + background-color: #2cabe3; + color: #fff +} + +.jq-icon-info { + background-color: rgba(71, 68, 68, 0.93); + color: #FFF; + border-color: #bce8f1; +} + +.jq-icon-warning { + background-color: rgba(154, 83, 20, 0.93); + color: #fcf8e3; + border-color: #faebcc; +} + +.jq-icon-error { + background-color: #a94442; + color: #f2dede; + border-color: #ebccd1; +} + +.jq-icon-success { + color: #dff0d8; + background-color: rgba(13, 132, 11, 0.93); + border-color: #d6e9c6; +} + +.jq-icon-organizr { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); + background-color: #31708f; + color: #000; + border-color: #bce8f1; +} + +.jq-icon-update { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAA4JGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTctMTItMTRUMDk6MzQ6MDgtMDc6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMi0xNFQwOTozNTowOC0wNzowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTctMTItMTRUMDk6MzU6MDgtMDc6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6NDg4MmMzYjEtODM4YS1lMDRjLThiYmYtZTc0Zjk5ZjJjNGIxPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOjQ4ODJjM2IxLTgzOGEtZTA0Yy04YmJmLWU3NGY5OWYyYzRiMTwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjQ4ODJjM2IxLTgzOGEtZTA0Yy04YmJmLWU3NGY5OWYyYzRiMTwveG1wTU06T3JpZ2luYWxEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SGlzdG9yeT4KICAgICAgICAgICAgPHJkZjpTZXE+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPmNyZWF0ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo0ODgyYzNiMS04MzhhLWUwNGMtOGJiZi1lNzRmOTlmMmM0YjE8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTctMTItMTRUMDk6MzQ6MDgtMDc6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PssSCj0AAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAbRJREFUeNqslT1rFFEUhp/9AI2JWrgkoJEgIopFhBSWVlYWQpqAraU/wsrKQi39EXYRLBTJL7AQ1FKjKO4iItlkFYQ8NmfgOuzdubP6wnBnzpzznnvP1+2oFGITuAlsAAPgO/AK2AaeZK3UpmdN3XE2Xqqnp9k3kZ9T9yzDN3WlztGZEaIO8B5YoxyvgSupoDtD+U5LcoB1YKskBz31jfNhJ+Wqn+B2VMUucJn5cCGNTD9ZnwHX+XccnZaD5y3JfzX8P0xzcKtFfO+rV9WBuqHem6JzqG6ry1UfvCgkv5EpiGsZ/Y/qEdRhAfmjGunJ2vfd3IlRRwUOLiZkD6O7HySyMxm7T8QcacJSEC3W5AshP5Ez7AOPY0IC1OdGFxgn1dYHfgILIe8lY+ULsJhw9IC31SxayjjohGwS63Hgc6w/gFXgIPSOJfrV5iZVo+0X1v84ITDI6+9/od9AeApYAb4mJ+gmO0xPsByX0KjNhXNWfRf52lcn0UhVQ01CrvpBPd/2wiFKdNxQZb/V9XlutOoZqLsZ8pG6mrMtdZBzMoww8j8c1J0MZ+18XgfVWHiqXirR/zMAbHa5dGMozWYAAAAASUVORK5CYII='); + background-color: #2cabe4; + color: #FFF; + border-color: #bce8f1; +} + +.panel-body.settings-bottom { + background: #1b1a1a; + color: white; + border-radius: 0 0 10px 10px; +} + +.panel-heading.settings-top { + background: #2cabe3; + border-color: #ffffff; + color: #232323; + border-radius: 10px 10px 0 0; +} + +span.select2-results { + background: #0e0e0e; +} + +.select2-container--default .select2-results__option[aria-selected=true] { + background-color: #232323; +} \ No newline at end of file diff --git a/CSS/themes/organizr/plex.css b/CSS/themes/organizr/plex.css index 4935599d..2e51156e 100644 --- a/CSS/themes/organizr/plex.css +++ b/CSS/themes/organizr/plex.css @@ -11,17 +11,11 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* ORGANIZR PLEX THEME */ -@import 'Organizr.css'; -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css"); +/* APP VARS */ :root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: #191a1c; - --link-color: #e5a00d; - --custom-buttons-color: #e5a00d; - --hompage-item-hover: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.1) 50%,#1f292d 100%); - --notification-box-line: #e5a00d; - --calendar-tv-premier: #FFEB3B; --calendar-tv-missing: #ff7676; --calendar-tv-available: #53e69d; diff --git a/CSS/themes/organizr/space-gray.css b/CSS/themes/organizr/space-gray.css index efb13e9c..1601887e 100644 --- a/CSS/themes/organizr/space-gray.css +++ b/CSS/themes/organizr/space-gray.css @@ -11,21 +11,16 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* ORGANIZR SPACE GRAY THEME */ -@import 'Organizr.css'; -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --link-color: #81a6b7; - --custom-buttons-color: #607D8B; - --hompage-item-hover: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.1) 50%,#1f292d 100%); - --notification-box-line: #81a6b7; +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/organizr/organizr-base.css"); +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css"); - --calendar-tv-premier: #FFEB3B; - --calendar-tv-missing: #ff7676; - --calendar-tv-available: #53e69d; - --calendar-tv-unreleased: #eeeeee; - --calendar-movie-missing: #ff7676; - --calendar-movie-available: #53e69d; - --calendar-movie-unreleased: #eeeeee; +/* APP VARS */ +:root { + --calendar-tv-premier: #FFEB3B; + --calendar-tv-missing: #ff7676; + --calendar-tv-available: #53e69d; + --calendar-tv-unreleased: #eeeeee; + --calendar-movie-missing: #ff7676; + --calendar-movie-available: #53e69d; + --calendar-movie-unreleased: #eeeeee; } diff --git a/CSS/themes/petio/aquamarine.css b/CSS/themes/petio/aquamarine.css index 551f9af9..19b037f4 100644 --- a/CSS/themes/petio/aquamarine.css +++ b/CSS/themes/petio/aquamarine.css @@ -11,19 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* MOVIEMATCH AQUAMARINE THEME */ +/* PETIO AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: 18, 175, 160; - --accent-color-hover: #fff; - --link-color: #0ed2bf; - --spinner: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/petio/dark.css b/CSS/themes/petio/dark.css index 7625831d..d118cb06 100644 --- a/CSS/themes/petio/dark.css +++ b/CSS/themes/petio/dark.css @@ -11,19 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* MOVIEMATCH DARK THEME */ +/* PETIO DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --text-color: #b7b7b7; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --link-color: #fff; - --spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/petio/dracula.css b/CSS/themes/petio/dracula.css new file mode 100644 index 00000000..dd7bf30a --- /dev/null +++ b/CSS/themes/petio/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PETIO DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/petio/hotline.css b/CSS/themes/petio/hotline.css index 44ce2cc1..d24af7d2 100644 --- a/CSS/themes/petio/hotline.css +++ b/CSS/themes/petio/hotline.css @@ -11,19 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* MOVIEMATCH HOTLINE THEME */ +/* PETIO HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --link-color: #0b3161; - --spinner: invert(32%) sepia(35%) saturate(3786%) hue-rotate(341deg) brightness(100%) contrast(92%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/petio/organizr-dark.css b/CSS/themes/petio/organizr-dark.css index 82d9a73f..1d42da00 100644 --- a/CSS/themes/petio/organizr-dark.css +++ b/CSS/themes/petio/organizr-dark.css @@ -11,19 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* MOVIEMATCH ORGANIZR-DARK THEME */ +/* PETIO ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --text-color: #96a2b4; - --text-color-hover: #fff; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 44, 171, 227; - --accent-color-hover: #fff; - --link-color: #2cabe3; - --spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/petio/petio-base.css b/CSS/themes/petio/petio-base.css index f28a11cf..044a2f5e 100644 --- a/CSS/themes/petio/petio-base.css +++ b/CSS/themes/petio/petio-base.css @@ -16,16 +16,26 @@ body { background: var(--main-bg-color); - color: var(--text-color) + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) } /* TEXT COLOR */ p, -.card .text-wrap .title, .card .text-wrap .year, .media-content .overview, -.media-content .media-crew .crew-credit { - color: var(--text-color); +.media-content .media-crew .crew-credit, +.media-content .media-crew .sidebar--item a, +.sidebar--item .media-content .media-crew a, +.sidebar--item p, +.menu--item p { + color: var(--text); } h1, @@ -34,8 +44,21 @@ h3, h4, h5, h6, -.person--details p { - color: #fff; +.person--details p, +.text-wrap>p, +.card .text-wrap .title, +.main-title, +.media-details .media-title, +.single-title, +.sub-title, +.sub-title, +.widget--title, +.settings--menu--item p { + color: var(--text-hover); +} + +.card .text-wrap>p { + color: var(--text-hover); } .settings--menu--item.active p { @@ -46,6 +69,10 @@ h6, border-bottom: 1px solid rgb(var(--accent-color)); } +.settings--menu--item:hover { + border-bottom: 1px solid var(--text-hover); +} + .settings--menu--item.active .icon svg path { fill: rgb(var(--accent-color)); } @@ -60,6 +87,13 @@ h6, .sidebar--inner, .sidebar--scroll { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -70,17 +104,31 @@ h6, } @media (max-width: 991.98px) { - .menu { - background: var(--modal-bg-color) + .menu { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } .mob-menu-top { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .menu--item.active { - background: rgba(255, 255, 255, .15); + background: rgba(var(--accent-color), .05); border-right: 4px solid rgb(var(--accent-color)); } @@ -97,7 +145,7 @@ h6, } .sidebar--item.active { - background: rgba(255, 255, 255, .15); + background: rgba(var(--accent-color), .05); border-top: 4px solid rgb(var(--accent-color)); } @@ -117,6 +165,19 @@ h6, background: rgb(var(--accent-color)); } +.sidebar--item:hover p, +.sidebar--item:hover .icon svg path, +.menu--item:hover p, +.menu--item:hover .icon svg path { + color: rgb(var(--accent-color)); + fill: rgb(var(--accent-color)); +} + +.sidebar--item .icon svg path, +.menu--item .icon svg path { + fill: var(--text); +} + /* LINKS */ a, .table-action, @@ -129,11 +190,27 @@ p a, color: var(--link-color); } +a:hover, +.table-action:hover, +.session--toggle:hover, +p a:hover, +.profile-page .logout:hover, +.person--bio--read-more:hover, +.filter--item--collapse:hover, +.filter--comparison:hover { + color: var(--link-color-hover); +} + /* OTHER */ .widget--item hr { background: rgb(255 255 255 / 50%); } +.widget--item--inner, +.sr--instance--inner { + background: hsl(0deg 0% 0% / 15%); +} + .filter--add:hover { color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color)); @@ -149,7 +226,7 @@ p a, } .spinner svg { - filter: var(--spinner); + filter: var(--petio-spinner); } .request-status { @@ -206,7 +283,8 @@ code { background: rgb(var(--accent-color)); } -.card--inner:hover .image-wrap { +.card--inner:hover .image-wrap, +.company-card:hover .company-card--inner { -webkit-filter: brightness(.7); filter: brightness(.7); -webkit-box-shadow: 0 0 0 2px rgb(var(--accent-color)), 0 5px 10px 0 rgb(0 0 0 / 30%); @@ -247,14 +325,15 @@ code { } /* Keep Plex Button Color*/ -#root > div > div.login-wrap > div.login--inner > form > div:nth-child(7) > button, -#root > div > div.view > div > div > div.settings--content > section:nth-child(2) > button:nth-child(3) { +#root>div>div.login-wrap>div.login--inner>form>div:nth-child(7)>button, +#root>div>div.view>div>div>div.settings--content>section:nth-child(2)>button:nth-child(3) { background: #d79b23; border: 2px solid #d79b23; color: #000; } -#root > div > div.login-wrap > div.login--inner > form > div:nth-child(7) > button:hover, -#root > div > div.view > div > div > div.settings--content > section:nth-child(2) > button:nth-child(3):hover { + +#root>div>div.login-wrap>div.login--inner>form>div:nth-child(7)>button:hover, +#root>div>div.view>div>div>div.settings--content>section:nth-child(2)>button:nth-child(3):hover { background: #ab7b1c; border-color: #ab7b1c; } @@ -324,7 +403,7 @@ code { } thead { - color: #fff; + color: var(--text-hover); background: rgba(0, 0, 0, 0.25); } @@ -338,12 +417,26 @@ thead { .issues--inner, .review--main { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal--top, .issues--top, .review--top { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* FORMS & INPUTS */ @@ -354,19 +447,19 @@ input[type=checkbox]:checked:after { input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus { border-bottom: 2px solid rgb(var(--accent-color)); background: rgba(255, 255, 255, .2); - color: var(--text-color-hover) + color: var(--text-hover) } input:not([type=checkbox]):not(.styled-input--input):not([type=file]), .login-wrap input { border-bottom: 2px solid rgba(0, 0, 0, 0); - color: var(--text-color); + color: var(--text); background: rgb(255 255 255 / 10%); } .search-form input:focus { background: hsla(0, 0%, 100%, .1) !important; - color: var(--text-color-hover) !important; + color: var(--text-hover) !important; border-bottom: 2px solid rgba(0, 0, 0, 0) !important; } diff --git a/CSS/themes/petio/plex.css b/CSS/themes/petio/plex.css new file mode 100644 index 00000000..61b3954d --- /dev/null +++ b/CSS/themes/petio/plex.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PETIO PLEX THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/petio/space-gray.css b/CSS/themes/petio/space-gray.css index c1118baa..7852a42b 100644 --- a/CSS/themes/petio/space-gray.css +++ b/CSS/themes/petio/space-gray.css @@ -11,19 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* MOVIEMATCH SPACE GRAY THEME */ +/* PETIO SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/petio/petio-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 129, 166, 183; - --accent-color-hover: #607D8B; - --link-color: #9adfff; - --spinner: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/pihole/aquamarine.css b/CSS/themes/pihole/aquamarine.css index 373146cb..cd759cf9 100644 --- a/CSS/themes/pihole/aquamarine.css +++ b/CSS/themes/pihole/aquamarine.css @@ -12,13 +12,4 @@ /* PI-HOLE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/pihole/dark.css b/CSS/themes/pihole/dark.css index 8d957424..6ea361a5 100644 --- a/CSS/themes/pihole/dark.css +++ b/CSS/themes/pihole/dark.css @@ -12,13 +12,4 @@ /* PI-HOLE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.5); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: rgba(255, 255, 255, 0.45);; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/pihole/dracula.css b/CSS/themes/pihole/dracula.css new file mode 100644 index 00000000..8187aaf5 --- /dev/null +++ b/CSS/themes/pihole/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PI-HOLE DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/pihole/hotline.css b/CSS/themes/pihole/hotline.css index 98b45b3a..c37358af 100644 --- a/CSS/themes/pihole/hotline.css +++ b/CSS/themes/pihole/hotline.css @@ -12,13 +12,4 @@ /* PI-HOLE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --link-color: #fd534a; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/pihole/organizr-dark.css b/CSS/themes/pihole/organizr-dark.css index 34d2fa7e..bf674598 100644 --- a/CSS/themes/pihole/organizr-dark.css +++ b/CSS/themes/pihole/organizr-dark.css @@ -12,12 +12,4 @@ /* PI-HOLE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - } +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); diff --git a/CSS/themes/pihole/pihole-base.css b/CSS/themes/pihole/pihole-base.css index 4fff36d6..0d2b5473 100644 --- a/CSS/themes/pihole/pihole-base.css +++ b/CSS/themes/pihole/pihole-base.css @@ -1,373 +1,592 @@ /* dP dP dP */ -/* 88 88 88 */ -/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ -/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ -/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ -/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ -/* 88 */ -/* dP */ + /* 88 88 88 */ + /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ + /* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ + /* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ + /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ + /* 88 */ + /* dP */ -/* Made by @gilbN */ -/* https://htpc.deathbybandaid.net/assets/theme.park */ + /* Made by @gilbN */ + /* https://htpc.deathbybandaid.net/assets/theme.park */ -body { - background: var(--main-bg-color) !important; - color: #eee !important; -} -a { - color: var(--link-color); - } -a:hover, a:active, a:focus, -.treeview-menu > li.active > a, .treeview-menu > li > a:hover { - color: var(--accent-color) !important; - } - h4 { - color: var(--accent-color); - } -/* Donate dropdown */ - .skin-blue .main-header li.user-header { - background: var(--modal-bg-color); - } - .dropdown-menu { - box-shadow: none; - border-color: rgba(0, 0, 0, .25); - background: var(--modal-bg-color) - } - .navbar-nav>.user-menu>.dropdown-menu>.user-body { - padding: 15px; - border-bottom: 1px solid rgba(255, 255, 255, .25); - border-top: 1px solid rgba(255, 255, 255, .25); - background-color: rgba(255, 255, 255, .2) !important; - } - .navbar-nav>.user-menu>.dropdown-menu>.user-body a { - color: white !important; - } - .navbar-nav>.user-menu>.dropdown-menu>.user-footer { - background-color: transparent; - } -/* Header */ - .skin-blue .main-header .navbar, .skin-blue .main-header .logo, - .main-header .navbar,.main-header .logo { - background-color: rgba(0, 0, 0, .25); - } - .skin-blue .main-header .logo:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover, - .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { - background-color: rgba(255, 255, 255, .05); - color: white !important; - } - /* Footer */ - .main-footer { - background: rgba(0, 0, 0, .25); - color: #eee; - border-top: 1px solid rgb(255 255 255 / 20%); - } -/* Side bar */ - .skin-blue .sidebar a { - color: #eee; - } - .skin-blue .sidebar a:hover { - color: white !important; - } - .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side, - .wrapper, .main-sidebar, .left-side { - background-color: rgba(0, 0, 0, .25) !important; - } - .skin-blue .sidebar-menu>li.header, - .sidebar-menu > li.header { - color: white; - background: rgba(0, 0, 0, .2); - } - .treeview-menu > li > a { - color: #eee !important; - } - .sidebar-menu > li > .treeview-menu { - background-color: rgb(0 0 0 / 25%); - } - /* Menus */ - .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, - .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { - color: #fff; - background: rgba(0, 0, 0, .1); - border-left-color: var(--accent-color); - } - .skin-blue .sidebar-menu>li>.treeview-menu { - background: rgba(0, 0, 0, .25); - } - .skin-blue .treeview-menu>li>a { - color: #eee; - } - /* Collapsed menu hover*/ - @media (min-width: 768px) { - .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { - background: var(--main-bg-color); - color: #eee; - } + @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); + + body { + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; + } + + a { + color: var(--link-color); + } + + * { + outline: none !important; + } + + a:hover, + a:active, + a:focus { + color: var(--link-color-hover); + } + + .treeview-menu>li.active>a, + .treeview-menu>li>a:hover { + color: var(--text-hover); + background: rgba(255, 255, 255, 0.1); + } + + .h1, + .h2, + .h3, + .h4, + .h5, + .h6, + h1, + h2, + h3:not(.statistic), + h4, + h5, + h6 { + color: var(--text-hover); + } + + h3.box-title { + color: var(--text-hover); + } + + .box, + .box-footer, + .info-box, + .box-comment, + .comment-text, + .comment-text .username { + color: var(--text); + } + + kbd { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); + } + + /* Donate dropdown */ + .skin-blue .main-header li.user-header { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .dropdown-menu { + box-shadow: none; + border-color: rgba(0, 0, 0, .25); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + .navbar-nav>.user-menu>.dropdown-menu>.user-body { + padding: 15px; + border-bottom: 1px solid rgba(255, 255, 255, .25); + border-top: 1px solid rgba(255, 255, 255, .25); + background-color: rgba(255, 255, 255, .2) !important; + } + + .navbar-nav>.user-menu>.dropdown-menu>.user-body a { + color: var(--text-hover) !important; + } + + .navbar-nav>.user-menu>.dropdown-menu>.user-footer { + background-color: transparent; + } + + /* Header */ + .skin-blue .main-header .navbar, + .skin-blue .main-header .logo, + .main-header .navbar, + .main-header .logo { + background-color: rgba(0, 0, 0, .25); + } + + .skin-blue .main-header .logo:hover, + .skin-blue .main-header .navbar .sidebar-toggle:hover, + .sidebar-menu>li:hover>a { + background-color: rgba(255, 255, 255, .05); + color: var(--text-hover) !important; + } + + .sidebar-menu>li.active>a { + background-color: rgba(255, 255, 255, .05); + color: rgb(var(--accent-color)) !important; + } + + /* Footer */ + .main-footer { + background: rgba(0, 0, 0, .25); + color: var(--text); + border-top: 1px solid rgb(255 255 255 / 20%); + } + + /* Side bar */ + .skin-blue .sidebar a, + .sidebar a { + color: var(--text); + } + + .skin-blue .sidebar a:hover, + .sidebar a:hover { + color: var(--text-hover) !important; + } + + .skin-blue .wrapper, + .skin-blue .main-sidebar, + .skin-blue .left-side, + .wrapper, + .main-sidebar, + .left-side { + background-color: rgba(0, 0, 0, .25) !important; + } + + .skin-blue .sidebar-menu>li.header, + .sidebar-menu>li.header { + color: rgb(var(--accent-color)); + background: rgba(0, 0, 0, .2); + } + + .treeview-menu>li>a { + color: var(--text) !important; + } + + .sidebar-menu>li>.treeview-menu { + background-color: rgb(0 0 0 / 25%); + } + + /* Menus */ + .skin-blue .sidebar-menu>li:hover>a, + .skin-blue .sidebar-menu>li.active>a, + .sidebar-menu>li:hover>a, + .sidebar-menu>li.active>a { + color: var(--text-hover); + background: rgba(0, 0, 0, .1); + border-left-color: rgb(var(--accent-color)); + } + + .skin-blue .sidebar-menu>li>.treeview-menu { + background: rgba(0, 0, 0, .25); + } + + .skin-blue .treeview-menu>li>a { + color: var(--text); + } + + /* Collapsed menu hover*/ + @media (min-width: 768px) { + + .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), + .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } -/* Pages */ - /*Background*/ - .content-wrapper, .right-side { - background-color: var(--main-bg-color); - } - .page-header>small { - color: #ddd; - } - .main-footer .nav-tabs, .nav-tabs-custom .nav-tabs { - background-color: rgb(0 0 0 / 0.25); - border-bottom-color: rgb(255 255 255 / 15%); - } - .nav-tabs-custom>.nav-tabs>li:hover { - background-color: rgba(255, 255, 255, .05); - color: #eee; - border-top-color: var(--accent-color); - } - .nav-tabs-custom > .nav-tabs > li:hover > a { - background-color: rgba(255, 255, 255, .05); - } - /* Dashboard */ - /*Total Queries box */ - .box-header { - color: white; - } - .box { - background: rgba(0, 0, 0, .24); - border-top: 3px solid #0000; - box-shadow: 0 1px 1px rgba(0,0,0,0.1); - } - .box-solid > .box-header, .box > .box-header { - color: #eee; - background-color: rgba(0, 0, 0, .25); - } - .box.box-warning { - border-top-color: var(--accent-color); - } - /* - .chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend { - -webkit-filter: invert(100%); - filter: invert(100%); - } - #chartjs-tooltip { - filter: invert(100%); - } - .chart-legend ul { - -webkit-filter: invert(100%); - filter: invert(100%); - } - */ - /* Total queries box*/ - .small-box.bg-green { - background-color: rgba(0, 166, 90, .45) !important; - border-top: 3px solid var(--accent-color); - } - /* Queries blocked box*/ - .small-box.bg-aqua { - background-color: rgba(0, 192, 239, .45) !important; - border-top: 3px solid var(--accent-color); - } - /* Percent blocked box */ - .small-box.bg-yellow { - background-color: rgba(243, 156, 18, .45) !important; - border-top: 3px solid var(--accent-color); - } - /*Blocklist box*/ - .small-box.bg-red { - background-color: rgba(221, 75, 57, .45) !important; - border-top: 3px solid var(--accent-color); - } - .table-bordered { - border: 1px solid #f4f4f41a !important; - background: rgba(0, 0, 0, .1); - } - .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td { - border: 1px solid rgba(255, 255, 255, 0.15); - } - .table-striped>tbody>tr:nth-of-type(odd) { - background-color:rgba(255, 255, 255, .1); - } - /* Query Log */ - .text-black { - color: #eee!important; - } - .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover, - .dataTables_paginate .pagination li > a{ - color: rgba(238, 238, 238, .5); - background-color: rgba(255, 255, 255, .1); - border-color: #ddd0; - } - .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover, - .paginate_button .active #all-queries_wrapper .pagination > li > a{ - color: #fff; - background-color: var(--button-color); - border-color: var(--button-color); - } - .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { - color: #fff !important; - background-color: var(--button-color-hover); - border-color: var(--button-color-hover); - } - .pagination>li>a { - background: rgba(0, 0, 0, 0.25); - color: #eee; - border: 1px solid rgba(255, 255, 255, 0.07); - } - .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { - color: rgb(255, 255, 255) !important; - background-color: rgba(255, 255, 255, .25); - border-color: rgba(255, 255, 255, 0.07); - } - /* Login */ - .panel-default { - border-color: transparent; - background: rgba(0, 0, 0, 0.25); - } - .panel-default>.panel-heading { - color: #eee; - background-color: inherit; - border-color: transparent; - } - .panel, .panel-body, .panel-default > .panel-heading { - background-color: rgb(0 0 0 / 25%); - border-radius: 0px; - border: 1px solid transparent; - color: #bec5cb; - } + } - /* Blacklist */ - .nav-tabs-custom { - background: rgba(0, 0, 0, 0.25); - } - .nav-tabs-custom>.tab-content { - background: transparent; - } - .nav-tabs-custom>.nav-tabs>li.active { - border-top-color: var(--accent-color); - } - .nav-tabs-custom>.nav-tabs>li.active>a { - border-top-color: transparent; - border-left-color: rgba(255, 255, 255, 0.1); - border-right-color: rgba(255, 255, 255, 0.1); - } - .nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a { - background-color: rgba(0, 0, 0, 0.25); - color: #eee !important; - } - .nav-tabs-custom>.nav-tabs>li>a { - color: #eee !important; - border-radius: 0; - } - .input-group .input-group-addon { - border-radius: 0; - border-color: #d2d6de00; - background-color: var(--accent-color); - color: #eee; - } + /* Pages */ + /*Background*/ + .content-wrapper, + .right-side { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } - /* Network */ - .table-striped>tbody>tr:nth-of-type(odd) { - background-color:rgba(0, 0, 0, .25) !important; - } - .table-striped>tbody>tr:nth-of-type(even) { - background-color:rgba(0, 0, 0, .5) !important; - } - #network-entries_wrapper.text-center { - text-align: center; - color: #eee !important; - } -/* Buttons */ - button,.btn-default { - background-color:var(--button-color) !important; - border:1px solid var(--button-color) !important; - color: white !important; - } - .btn-primary:hover, .btn-primary:active, .btn-primary.hover { - background-color: var(--button-color-hover) !important; - } - .btn-default:hover, .btn-default:active, .btn-default.hover { - background-color: var(--button-color-hover) !important; - } - .box.box-solid>.box-header .btn:hover, .box.box-solid>.box-header a:hover { - background: var(--button-color-hover) !important; - border: 1px solid transparent !important - } - .box.box-solid.box-info>.box-header, .box.box-solid.box-info { - color: #fff; - background: var(--button-color) !important; - border: 1px solid var(--button-color) !important; - } - .btn-danger { - background-color: #dd4b39 !important; - border-color: #d73925 !important; - } - .btn-danger:hover, .btn-danger:active, .btn-danger.hover { - background-color: #d73925 !important; - } - .btn-warning { - background-color: #f39c12 !important; - border-color: #e08e0b !important; - } - .btn-warning:hover { - color: #fff; - background-color: #ec971f !important; - border-color: #d58512 !important; - } - .icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before { - background-color: var(--button-color) !important; - border-color: var(--button-color) !important; - } - .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before { - border-color: var(--button-color) !important; - } -/* Input */ - input,.form-control,pre,.box-footer,.datatables_processing { - background:#080909; - border:1px solid #666; - color:#b2b2b2; - } - .dataTables_wrapper input[type="search"] { - background-color: #ffffff; - color: #000000; - } - input, - select, - select.form-control, - .form-group .input-group-addon, - .input-group .input-group-addon, - .form-group input, - .input-group input, - .form-group textarea, - .input-group textarea, - .daterangepicker select.hourselect, - .daterangepicker select.minuteselect, - .daterangepicker select.secondselect, - .daterangepicker select.ampmselect, - .form-control, - div.dataTables_wrapper div.dataTables_length select { - background-color: rgb(0 0 0 / 0.25); - color: #eee; - border: 1px solid rgb(255 255 255 / 15%); - } - .form-control:focus { - border-color: rgb(255 255 255 / 0.25); - box-shadow: none; - } -/* Scrollbar */ - -::-webkit-scrollbar { - width: 0px; -} -::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; -} -::-webkit-scrollbar-track { - background: var(--main-bg-color); -} -::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; -} \ No newline at end of file + .page-header>small { + color: var(--text-muted); + } + + .main-footer .nav-tabs, + .nav-tabs-custom .nav-tabs { + background-color: rgb(0 0 0 / 0.25); + border-bottom-color: rgb(255 255 255 / 15%); + } + + .nav-tabs-custom>.nav-tabs>li:hover { + background-color: rgba(255, 255, 255, .05); + color: var(--text-hover); + border-top-color: rgb(var(--accent-color)); + } + + .nav-tabs-custom>.nav-tabs>li:hover>a { + background-color: rgba(255, 255, 255, .05); + } + + /* Dashboard */ + /*Total Queries box */ + .box-header { + color: var(--text-hover); + } + + .box { + background: rgba(0, 0, 0, .24); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + } + + .box-solid>.box-header, + .box>.box-header { + color: var(--text); + background-color: rgba(0, 0, 0, .25); + } + + /* Total queries box*/ + .small-box.bg-green { + background-color: rgba(0, 166, 90, .45) !important; + } + + /* Queries blocked box*/ + .small-box.bg-aqua { + background-color: rgba(0, 192, 239, .45) !important; + + } + + /* Percent blocked box */ + .small-box.bg-yellow { + background-color: rgba(243, 156, 18, .45) !important; + } + + /*Blocklist box*/ + .small-box.bg-red { + background-color: rgba(221, 75, 57, .45) !important; + } + + thead { + color: var(--text-hover); + } + + .table-bordered { + background: rgba(0, 0, 0, .1); + } + + .table-bordered>thead>tr>th, + .table-bordered>tbody>tr>th, + .table-bordered>tfoot>tr>th, + .table-bordered>thead>tr>td, + .table-bordered>tbody>tr>td, + .table-bordered>tfoot>tr>td { + border: 1px solid rgba(255, 255, 255, 0.15); + } + + .table-striped>tbody>tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, .1); + } + + /* Query Log */ + .text-black { + color: #eee !important; + } + + + + .pagination>.active>a, + .pagination>.active>a:focus, + .pagination>.active>a:hover, + .pagination>.active>span, + .pagination>.active>span:focus, + .pagination>.active>span:hover, + .paginate_button .active #all-queries_wrapper .pagination>li>a { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + } + + .pagination>.active>a, + .pagination>.active>a:focus, + .pagination>.active>a:hover, + .pagination>.active>span, + .pagination>.active>span:focus, + .pagination>.active>span:hover { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + } + + .pagination>li>a { + color: var(--button-text) !important; + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; + } + + .pagination>li>a:focus, + .pagination>li>a:hover, + .pagination>li>span:focus, + .pagination>li>span:hover { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + } + + /* Login */ + .panel-default { + border-color: transparent; + background: rgba(0, 0, 0, 0.25); + } + + .panel-default>.panel-heading { + color: var(--text-hover); + background-color: inherit; + border-color: transparent; + } + + .panel, + .panel-body, + .panel-default>.panel-heading { + background-color: rgb(0 0 0 / 25%); + border-radius: 0px; + border: 1px solid transparent; + color: var(--text); + } + + /* Blacklist */ + .nav-tabs-custom { + background: rgba(0, 0, 0, 0.25); + } + + .nav-tabs-custom>.tab-content { + background: transparent; + } + + .nav-tabs-custom>.nav-tabs>li.active { + border-top-color: rgb(var(--accent-color)); + } + + .nav-tabs-custom>.nav-tabs>li.active>a { + border-top-color: transparent; + border-left-color: rgba(255, 255, 255, 0.1); + border-right-color: rgba(255, 255, 255, 0.1); + } + + .nav-tabs-custom>.nav-tabs>li.active>a, + .nav-tabs-custom>.nav-tabs>li.active:hover>a { + background-color: rgba(0, 0, 0, 0.25); + color: rgb(var(--accent-color)) !important; + } + + .nav-tabs-custom>.nav-tabs>li>a { + color: var(--text) !important; + border-radius: 0; + } + + .input-group .input-group-addon { + border-radius: 0; + border-color: #d2d6de00; + background-color: rgb(var(--accent-color)); + color: var(--text); + } + + /* Network */ + .table-striped>tbody>tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, .25) !important; + } + + .table-striped>tbody>tr:nth-of-type(even) { + background-color: rgba(0, 0, 0, .5) !important; + } + + #network-entries_wrapper.text-center { + text-align: center; + color: var(--text) !important; + } + + /* Buttons */ + button, + .btn-default { + background-color: var(--button-color) !important; + border: 1px solid var(--button-color) !important; + color: var(--button-text) !important; + } + + .btn-primary:hover, + .btn-primary:active, + .btn-primary.hover { + background-color: var(--button-color-hover) !important; + border: 1px solid var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + } + + .btn-default:hover, + .btn-default:active, + .btn-default.hover { + background-color: var(--button-color-hover) !important; + border: 1px solid var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + } + + .box.box-solid>.box-header .btn:hover, + .box.box-solid>.box-header a:hover { + background-color: var(--button-color-hover) !important; + border: 1px solid var(--button-color-hover) !important; + color: var(--button-text-hover) !important; + } + + .box.box-solid.box-info>.box-header, + .box.box-solid.box-info { + background-color: var(--button-color) !important; + border: 1px solid var(--button-color) !important; + color: var(--button-text) !important; + } + + .btn-danger { + background-color: #dd4b39 !important; + border-color: #d73925 !important; + } + + .btn-danger:hover, + .btn-danger:active, + .btn-danger.hover { + background-color: #d73925 !important; + } + + .btn-warning { + background-color: #f39c12 !important; + border-color: #e08e0b !important; + } + + .btn-warning:hover { + color: #fff; + background-color: #ec971f !important; + border-color: #d58512 !important; + } + + .box.box-warning { + border-top-color: rgb(var(--accent-color)); + } + + .icheck-primary>input:first-child:checked+input[type=hidden]+label::before, + .icheck-primary>input:first-child:checked+label::before { + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; + } + + .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, + .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before { + border-color: var(--button-color) !important; + } + + /* Input */ + input, + .form-control, + pre, + .box-footer, + .datatables_processing { + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.1); + color: var(--text); + } + + .dataTables_wrapper input[type="search"] { + background-color: rgb(0 0 0 / 25%); + color: var(--text-hover); + } + + input, + select, + select.form-control, + .form-group .input-group-addon, + .input-group .input-group-addon, + .form-group input, + .input-group input, + .form-group textarea, + .input-group textarea, + .daterangepicker select.hourselect, + .daterangepicker select.minuteselect, + .daterangepicker select.secondselect, + .daterangepicker select.ampmselect, + .form-control, + div.dataTables_wrapper div.dataTables_length select { + background-color: rgb(0 0 0 / 0.25); + color: var(--text); + border: 1px solid rgb(255 255 255 / 15%); + } + + select:focus, + select.form-control:focus { + background: #1b1b1b !important; + color: var(--text-hover) !important; + } + + .form-control:focus { + border-color: rgb(255 255 255 / 0.25); + box-shadow: none; + color: var(--text-hover); + } + + .select2-dropdown, + .select2 .select2-selection { + background: var(--drop-down-menu-bg); + color: var(--text); + border: 1px solid rgba(255, 255, 255, 0.1); + } + + .select2-container--default .select2-results__option--highlighted[aria-selected] { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); + } + + /* Scrollbar */ + + ::-webkit-scrollbar { + width: 0px; + } + + ::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; + } + + ::-webkit-scrollbar-track { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + + ::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; + } \ No newline at end of file diff --git a/CSS/themes/pihole/plex.css b/CSS/themes/pihole/plex.css index 633831d8..3eec4b66 100644 --- a/CSS/themes/pihole/plex.css +++ b/CSS/themes/pihole/plex.css @@ -12,13 +12,4 @@ /* PI-HOLE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --link-color: #ffc107; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/pihole/space-gray.css b/CSS/themes/pihole/space-gray.css index d25a260c..e3a60e2d 100644 --- a/CSS/themes/pihole/space-gray.css +++ b/CSS/themes/pihole/space-gray.css @@ -12,13 +12,4 @@ /* PI-HOLE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/pihole/pihole-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/plex/aquamarine.css b/CSS/themes/plex/aquamarine.css index 86afd605..185f88e2 100644 --- a/CSS/themes/plex/aquamarine.css +++ b/CSS/themes/plex/aquamarine.css @@ -12,19 +12,4 @@ /* PLEX AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: 18, 175, 160; - --accent-color-hover: #fff; - --link-color: #0ed2bf; - --link-color-hover: #FFF; - --poster-unwatched: #15D5C2; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/plex/dark.css b/CSS/themes/plex/dark.css index f0fa6dd2..797a1cf8 100644 --- a/CSS/themes/plex/dark.css +++ b/CSS/themes/plex/dark.css @@ -12,19 +12,4 @@ /* PLEX DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --text-color: #b7b7b7; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 229, 160, 13; - --accent-color-hover: #ffffff73; - --link-color: #e5a00d; - --link-color-hover: #FFF; - --poster-unwatched: #e5a00d; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/plex/dracula.css b/CSS/themes/plex/dracula.css new file mode 100644 index 00000000..2b6834c2 --- /dev/null +++ b/CSS/themes/plex/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PLEX DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/plex/hotline.css b/CSS/themes/plex/hotline.css index c30fce65..00bc75c2 100644 --- a/CSS/themes/plex/hotline.css +++ b/CSS/themes/plex/hotline.css @@ -12,19 +12,4 @@ /* PLEX HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #0b3161; - --button-color-hover: rgb(244, 67, 54); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 244, 67, 54; - --accent-color-hover: rgba(255, 255, 255, .5); - --link-color: #f44336; - --link-color-hover: #FFF; - --poster-unwatched: #FB3122; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/plex/organizr-dark.css b/CSS/themes/plex/organizr-dark.css index 3e5432a4..64a59859 100644 --- a/CSS/themes/plex/organizr-dark.css +++ b/CSS/themes/plex/organizr-dark.css @@ -12,19 +12,4 @@ /* PLEX ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --text-color: #96a2b4; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 44, 171, 227; - --accent-color-hover: #fff; - --link-color: #2cabe3; - --link-color-hover: #FFF; - --poster-unwatched: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/plex/plex-base.css b/CSS/themes/plex/plex-base.css index bc023fea..7c8bcc94 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -16,15 +16,70 @@ /* TEXT */ body, +p, +label, +[class*="PrePlaySummary-summary-"], +[class*="ClaimedServer-messageHeader-"], +[class*="MetadataPosterCardTitle-isSecondary-"], +[class*="MetadataPosterCardTitle-isSecondary-"] a { + color: var(--text) !important; +} + +[class*="SourceSidebarLink-title-"], +[class*="SourceSidebarLink-sourceLink-"], +[class*="Link-default-"], +[class*="PrePlayTertiaryTitle-tertiaryTitle-"] { + color: var(--text); +} + +[class*="PivotTab-button-"] { + color: var(--text) !important; +} + +[class*="PivotTabDropdown-isSelected-"] { + border-color: rgb(var(--accent-color)) !important; + border-bottom-width: 5px !important; + border-left: 4px solid transparent !important; + border-right: 4px solid transparent !important; + border-top-width: 0 !important; + margin-top: -2px !important; +} + +[class*="MetadataPosterCardActions-editButton-"], +[class*="MetadataPosterCardActions-moreButton-"] { + color: rgb(var(--accent-color)) !important; +} + +[class*="MetadataPosterCardActions-editButton-"]:hover, +[class*="MetadataPosterCardActions-moreButton-"]:hover { + color: var(--accent-color-hover) !important; +} + h1, h2, h3, h4, h5, -p, -label, -[class*="ClaimedServer-messageHeader-"] { - color: var(--text-color) !important; +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +[class*="PrePlayPrimaryTitle-primaryTitle-"] a, +[class*="PrePlayLeftTitle-leftTitle-"], +[class*="PrePlayPrimaryTitle-primaryTitle-"], +[class*="CollapsibleText-readMore-"], +[class*="HubTitle-hubTitle-"], +[class*="FormLabel-label-"], +[class*="ServerDashboardPageHeader-headerTitle-"], +[class*="SidebarList-sidebarListHeader-"], +[class*="MenuHeader-menuHeader-WuKJVD"], +[class*="PrePlayDetailsGroupItem-label-"], +[class*="PageHeader-pageHeader-"], +[class*="PageHeaderTitle-title-"] { + color: var(--text-hover) !important; } .text-muted { @@ -35,20 +90,46 @@ label, a, [class*="Link-primary-"], -[class*="Link-isSelected-"] { +[class*="Link-isSelected-"], +[class*="PrePlayDetailsGroupItem-groupItem-"] a, +[class*="MetadataPosterCardTitle-title-"] a, +a[class*="MetadataPosterCardTitle-title-"], +[class*="PrePlayTagListLink-tagsListLink-"][class*="Link-default-"] { color: var(--link-color) } a:hover, -.artwork-file-container:hover a { +[class*="Link-link-"]:hover:not([type="button"]):not([role="menuitem"]), +.artwork-file-container:hover a, +[class*="MetadataPosterCardTitle-title-"] a:hover, +a[class*="MetadataPosterCardTitle-title-"]:hover { color: var(--link-color-hover); } +[class*="MetadataPosterCardTitle-title-"][class*="MetadataPosterCardTitle-isSecondary-377V8A"] [class*="Link-link-1Kt-hA"]:hover, +[class*="MetadataPosterCardTitle-title-"][class*="MetadataPosterCardTitle-isSecondary-377V8A"]:hover, +[class*=".MetadataTableRow-title-"] a:hover, +a[class*="MetadataTableRow-title-"]:hover { + color: var(--text-hover) !important; +} + +[class*="TopUsersCell-playHistoryLink-"][class*="Link-link-"] { + color: var(--label-text-color) !important; +} + /* BODY */ [class*="FullPageBackground-backgroundContainer-"] [class*="CrossFadeImage-crossFade-"], #plex>[class*="background-container-"]>div>div>div:nth-child(2), -#plex>div[class*="FullPageBackground-backgroundContainer-"]>div>div:nth-child(2) { +#plex>div[class*="FullPageBackground-backgroundContainer-"]>div>div:nth-child(2), +#plex>div[class*="FullPageBackground-backgroundContainer-"]>div>div:nth-child(4) { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="BottomBar-bottomBar-"] { @@ -57,6 +138,15 @@ a:hover, } /* SIDEBAR */ + +/* TEMP */ +[class*="SourceSidebarLink-isSelected-"] { + box-shadow: inset 2px 0 0 0 rgb(var(--accent-color)); + background: rgb(var(--accent-color), 0.05); +} + +/* /TEMP */ + [class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"], [class*="SourceSidebar-sidebar-"] { background: rgba(0, 0, 0, .25); @@ -64,14 +154,31 @@ a:hover, [class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="DisclosureArrow-isSelected-"] { border-color: rgb(var(--accent-color)); } -[class*="SourceSidebarLink-isSelected-"] { - box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important; +[class*="SourceSidebarLink-isSelected-"]:before { + background-color: rgb(var(--accent-color)) !important; +} + +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-title-"] { + color: rgb(var(--accent-color)); +} + +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-title-"] { + color: var(--accent-color-hover); } [class*="SourceSidebarServerHeader-title-"] { @@ -84,12 +191,24 @@ a:hover, } [class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] { - background: rgb(var(--accent-color)); - color: #000; + color: rgb(var(--accent-color)); } -[class*="NavBarActivityButton-isHighlighted-"]:hover [class*="NavBarActivityButton-activityIcon-"] { +/* old plex web */ +.NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-activityIcon-3gF_TD { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-activityIcon-3gF_TD { background-color: var(--accent-color-hover); + color: var(--label-text-color) !important; +} + +/* /old plex web */ + +[class*="NavBarActivityButton-isHighlighted-"]:hover [class*="NavBarActivityButton-activityIcon-"] { + color: var(--accent-color-hover); } @@ -106,22 +225,62 @@ a:hover, /* ACCENTS */ +[class*="Badge-primary-"] { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +[class*="DisclosureArrow-default-"] { + border-color: rgb(var(--accent-color)); +} + +a:hover [class*="DisclosureArrow-disclosureArrow-"], +button:hover [class*="DisclosureArrow-disclosureArrow-"] { + border-color: var(--accent-color-hover); +} + +.nav-pills>li.active>a, +.nav-pills>li.active>a:focus, +.nav-pills>li.active>a:hover { + color: rgb(var(--accent-color)) +} + +.nav-pills>li.active>a, +.nav-pills>li.active>a:focus, +.nav-pills>li.active>a:hover { + background-color: rgb(var(--accent-color), .03); + +} + +.btn-gray:focus, +.btn-gray:hover { + color: var(--accent-color-hover); +} + [class*="PageHeaderTabButton-isSelected-"], [class*="PageHeaderTabDropdown-isSelected-"], [class*="MultiSelectPageHeader-selectedTitle-"], [class*="PageHeaderMultiselectActions-container-"], [class*="PageHeaderMultiselectActions-count-"], [class*="PivotTab-selectedButton-"], -[class*="PivotTabDropdown-isSelected-"] { - color: rgb(var(--accent-color)); +[class*="PageHeaderTitle-detail-"] { + color: rgb(var(--accent-color)) !important; border-color: rgb(var(--accent-color)); } +[class*="PivotTab-selectedButton-"]:after { + background-color: rgb(var(--accent-color)); +} + +[class*="PivotTab-selectedButton-"]:hover:after { + background-color: var(--link-color-hover); +} + [class*="MetadataPosterCardOverlay-unplayedBadge-"], [class*="MetadataPosterCard-legacyUnwatchedTag-"], [class*="MetadataPosterCard-legacyUnwatchedEpisodesBadge-"], [class*="MetadataPosterCardOverlay-versionBadge-"] { - background-color: var(--poster-unwatched); + background-color: var(--plex-poster-unwatched); } [class*="MetadataPosterCardFace-"]:hover, @@ -149,7 +308,7 @@ a:hover, [class*="SelectButton-selectButton-"].isActive [class*="SelectButton-selectCircle-"] { background: rgb(var(--accent-color-hover)); - } +} [class*="PlayButton-playButton-"]:hover [class*="PlayButton-playCircle-"], [class*="PlayPauseOverlay-playCircle-"] { @@ -249,7 +408,7 @@ a:hover, } .media-poster-container.selected .media-poster:after { - color: var(--button-text) + color: var(--label-text-color); } [class*="NavBarActivityMenuStatusItem-statusButtonIndicator-"] { @@ -264,17 +423,38 @@ a:hover, /* MODAL */ [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-header { padding: 15px 20px; - background: var(--modal-bg-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: 1px solid rgba(255, 255, 255, .05); } .modal-content { position: relative; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; @@ -287,13 +467,25 @@ a:hover, .modal-footer { padding: 15px 20px; margin-top: 0; - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-top: 1px solid rgba(255, 255, 255, .05); } +.modal-body-with-panes .modal-nav-pane { + background-image: none; + background: rgba(0, 0, 0, .25); +} + .well, .files ul li { - color: var(--text-color); + color: var(--text); background-color: rgb(255 255 255 / 10%); border: 1px solid transparent; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); @@ -301,12 +493,12 @@ a:hover, } .edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover { - color: var(--text-color-hover); + color: var(--text-hover); background-color: rgba(255, 255, 255, .05); } .edit-section-modal .wizard-blocks-group>.wizard-block.selectable { - color: var(--text-color) + color: var(--text) } .striped-list-item>.striped-list-inner-item>.selected, @@ -315,13 +507,13 @@ a:hover, } .modal-header>h4>.modal-icon { - color: var(--text-color-hover); + color: var(--text-hover); } /* BUTTONS */ .btn-primary { border-color: var(--button-color); - color: #fff; + color: var(--button-text); background-color: var(--button-color); -webkit-transition: background-color .1s; transition: background-color .1s; @@ -329,7 +521,7 @@ a:hover, .btn-primary:focus, .btn-primary:hover { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); } @@ -360,11 +552,11 @@ fieldset[disabled] .btn-primary:hover { } .btn-gray { - color: var(--text-color); + color: var(--text); } .edit-lock-addon.locked { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color); border-color: var(--button-color); } @@ -383,7 +575,7 @@ fieldset[disabled] .btn-primary:hover { } .edit-section-modal .wizard-blocks-group>.wizard-block { - color: var(--text-color); + color: var(--text); } [class*="Button-primary-"], @@ -400,8 +592,16 @@ fieldset[disabled] .btn-primary:hover { /* DROPDOWN MENU */ [class*="Menu-menu-"], -.selectize-dropdown, .selectize-dropdown.form-control { - background: var(--modal-bg-color); +.selectize-dropdown, +.selectize-dropdown.form-control { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="ServerMenuItem-selectedServerMenuItem-"], @@ -411,7 +611,7 @@ fieldset[disabled] .btn-primary:hover { [class*="Tooltip-tooltip-"] { background-color: var(--button-color); - color: #fff; + color: var(--button-text); } [class*="Tooltip-tooltipBottomArrow-"]:after { @@ -446,11 +646,17 @@ hr { .alerts-container .page-count { margin-right: 15px; font-size: 14px; - color: var(--text-color); + color: var(--text); vertical-align: top; } /* SYNC */ .filter-bar .dropdown.open>a { color: rgb(var(--accent-color)); +} + +/* TABLE */ + +[class*="TableHeaderTitle-tableHeaderTitle-"] { + color: var(--text-hover); } \ No newline at end of file diff --git a/CSS/themes/plex/space-gray.css b/CSS/themes/plex/space-gray.css index fbc34d6a..109af8ca 100644 --- a/CSS/themes/plex/space-gray.css +++ b/CSS/themes/plex/space-gray.css @@ -12,19 +12,4 @@ /* PLEX AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 112, 174, 202; - --accent-color-hover: #81a6b7; - --link-color: #70aeca; - --link-color-hover: #81a6b7; - --poster-unwatched: #70aeca; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/plpp/plpp-base.css b/CSS/themes/plpp/plpp-base.css index 5fd6c231..e85e8c60 100644 --- a/CSS/themes/plpp/plpp-base.css +++ b/CSS/themes/plpp/plpp-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,54 +11,68 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ body { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - background-color: transparent; - color:hsla(0,0%,100%,.7)!important; - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important; - font-size: 1.4em !important; - overflow-y: auto; + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + background-color: transparent; + color: hsla(0, 0%, 100%, .7) !important; + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif !important; + font-size: 1.4em !important; + overflow-y: auto; height: 100%; } - /* Scrollbar */ - @media only screen and (min-width: 768px) { + +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + legend { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } @@ -68,120 +81,204 @@ legend { background-color: rgba(0, 0, 0, 0.6); border-color: transparent; } - + .side-nav { background-color: rgba(0, 0, 0, 0.15); } -.navbar-inverse .navbar-nav > li > a { - color: hsla(0,0%,100%,.7); + +.navbar-inverse .navbar-nav>li>a { + color: hsla(0, 0%, 100%, .7); } -.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { - background-color: hsla(0,0%,100%,.08); + +.navbar-inverse .navbar-nav>li>a:hover, +.navbar-inverse .navbar-nav>li>a:focus { + background-color: hsla(0, 0%, 100%, .08); } -.nav > li.selected > a { + +.nav>li.selected>a { background-color: transparent; color: #f9be03 !important; } - @media only screen and (max-width: 768px) { -.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { - border-color: transparent; - background: var(--modal-bg-color); + +@media only screen and (max-width: 768px) { + + .navbar-inverse .navbar-collapse, + .navbar-inverse .navbar-form { + border-color: transparent; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } } - } -.breadcrumb > .active { - text-transform: uppercase; - text-transform: bold; + +.breadcrumb>.active { + text-transform: uppercase; + text-transform: bold; } -.panel, .panel-default > .panel-heading, .breadcrumb > .active { + +.panel, +.panel-default>.panel-heading, +.breadcrumb>.active { background-color: transparent; border: transparent; - color: inherit; + color: inherit; font-size: 15px; - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important; + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif !important; line-height: 24px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0); } -.plpp_table.even:hover, .plpp_table.odd:hover { -background-color: hsla(0,0%,100%,.08) !important; + +.plpp_table.even:hover, +.plpp_table.odd:hover { + background-color: hsla(0, 0%, 100%, .08) !important; } - .panel-heading { -font-weight: bold; + +.panel-heading { + font-weight: bold; } -.plpp_thumbs_Title:hover, .plpp_slider_Title:hover, .plpp_thumbs_Episode_Title:hover, -.plpp_slider_Episode_Title:hover, .plpp_thumbs_Season_Title:hover, .plpp_slider_Season_Title:hover, -.plpp_thumbs_Show_Title:hover, .plpp_slider_Show_Title:hover, .plpp_thumbs_Artist:hover, .plpp_slider_Artist:hover, -.plpp_thumbs_Year:hover, .plpp_thumbs_Episode_No:hover, .plpp_slider_Year:hover, .plpp_slider_Episode_no:hover, -.plpp_thumbs_Track_no:hover, .plpp_slider_Track_no:hover, .plpp_thumbs_Episode_Count:hover, .plpp_slider_Episode_Count:hover, -.plpp_thumbs_Track_Count:hover, .plpp_slider_Track_Count:hover, .plpp_thumbs_Dimensions:hover, .plpp_slider_Dimensions:hover, -.plpp_thumbs_Duration:hover, .plpp_slider_Duration:hover { -text-decoration: underline; + +.plpp_thumbs_Title:hover, +.plpp_slider_Title:hover, +.plpp_thumbs_Episode_Title:hover, +.plpp_slider_Episode_Title:hover, +.plpp_thumbs_Season_Title:hover, +.plpp_slider_Season_Title:hover, +.plpp_thumbs_Show_Title:hover, +.plpp_slider_Show_Title:hover, +.plpp_thumbs_Artist:hover, +.plpp_slider_Artist:hover, +.plpp_thumbs_Year:hover, +.plpp_thumbs_Episode_No:hover, +.plpp_slider_Year:hover, +.plpp_slider_Episode_no:hover, +.plpp_thumbs_Track_no:hover, +.plpp_slider_Track_no:hover, +.plpp_thumbs_Episode_Count:hover, +.plpp_slider_Episode_Count:hover, +.plpp_thumbs_Track_Count:hover, +.plpp_slider_Track_Count:hover, +.plpp_thumbs_Dimensions:hover, +.plpp_slider_Dimensions:hover, +.plpp_thumbs_Duration:hover, +.plpp_slider_Duration:hover { + text-decoration: underline; } + .img-rounded { border-radius: 0px; } + .img-rounded:hover { border-radius: 0px; - box-shadow: 0 0 0 2px #cc7b19; - background: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.5) 50%,#323232 100%); + box-shadow: 0 0 0 2px #cc7b19; + background: radial-gradient(farthest-corner at 50% 50%, rgba(50, 50, 50, .5) 50%, #323232 100%); opacity: .7; transition: linear .2s; } -.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { + +.img-responsive, +.thumbnail>img, +.thumbnail a>img, +.carousel-inner>.item>img, +.carousel-inner>.item>a>img { width: 100%; } -div.modal-content > div.modal-body > div.plpp_details_container > div.plpp_details_Thumbnail, div.plpp_details_Poster > .img-rounded { + +div.modal-content>div.modal-body>div.plpp_details_container>div.plpp_details_Thumbnail, +div.plpp_details_Poster>.img-rounded { box-shadow: none; - opacity: 1; + opacity: 1; } div.plpp_slider { margin: 2px 15px 10px 2px; } + table { background-color: rgba(0, 0, 0, 0.25); } -table, .table { - color: hsla(0,0%,100%,.7); + +table, +.table { + color: hsla(0, 0%, 100%, .7); } -.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { - border-top: 1px solid rgba(255,255,255,.15); + +.table>thead>tr>th, +.table>tbody>tr>th, +.table>tfoot>tr>th, +.table>thead>tr>td, +.table>tbody>tr>td, +.table>tfoot>tr>td { + border-top: 1px solid rgba(255, 255, 255, .15); } -.table > thead > tr > th { + +.table>thead>tr>th { vertical-align: bottom; - border-bottom: 2px solid rgba(255,255,255,.15); + border-bottom: 2px solid rgba(255, 255, 255, .15); } -.pagination > li > a, .pagination > li > span { + +.pagination>li>a, +.pagination>li>span { color: #ffffff; background-color: rgba(0, 0, 0, 0.25); border: transparent; } -.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { + +.pagination>.disabled>span, +.pagination>.disabled>span:hover, +.pagination>.disabled>span:focus, +.pagination>.disabled>a, +.pagination>.disabled>a:hover, +.pagination>.disabled>a:focus { color: #BDBDBD; background-color: rgba(0, 0, 0, 0.25); border: transparent; cursor: not-allowed; } + /* Modal */ -.modal-header, div.modal-body, .modal-footer { - border-bottom: 1px solid rgba(255,255,255,.15); - background: var(--modal-bg-color); +.modal-header, +div.modal-body, +.modal-footer { + border-bottom: 1px solid rgba(255, 255, 255, .15); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + /* Buttons */ .btn-default { background-color: var(--button-color); border-color: transparent; } -.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { + +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active, +.open .dropdown-toggle.btn-default { background-color: var(--button-color-hover); border-color: transparent; } + .modal-header .close { -color: #dadada; + color: #dadada; } + .modal-header .close:hover { -color: #fff; -} + color: #fff; +} \ No newline at end of file diff --git a/CSS/themes/portainer/aquamarine.css b/CSS/themes/portainer/aquamarine.css index 0f260d14..50644054 100644 --- a/CSS/themes/portainer/aquamarine.css +++ b/CSS/themes/portainer/aquamarine.css @@ -13,12 +13,4 @@ /* PORTAINER AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/portainer/dark.css b/CSS/themes/portainer/dark.css index e676751f..dae351a9 100644 --- a/CSS/themes/portainer/dark.css +++ b/CSS/themes/portainer/dark.css @@ -13,12 +13,4 @@ /* PORTAINER DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/portainer/dracula.css b/CSS/themes/portainer/dracula.css new file mode 100644 index 00000000..e53f3e91 --- /dev/null +++ b/CSS/themes/portainer/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* PORTAINER DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/portainer/hotline.css b/CSS/themes/portainer/hotline.css index 6141b18e..e0e07506 100644 --- a/CSS/themes/portainer/hotline.css +++ b/CSS/themes/portainer/hotline.css @@ -13,12 +13,4 @@ /* PORTAINER HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/portainer/organizr-dark.css b/CSS/themes/portainer/organizr-dark.css index 3c2d7dac..4463e602 100644 --- a/CSS/themes/portainer/organizr-dark.css +++ b/CSS/themes/portainer/organizr-dark.css @@ -13,12 +13,4 @@ /* PORTAINER ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/portainer/plex.css b/CSS/themes/portainer/plex.css index 628a964b..41491ebb 100644 --- a/CSS/themes/portainer/plex.css +++ b/CSS/themes/portainer/plex.css @@ -13,12 +13,4 @@ /* PORTAINER PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/portainer/portainer-base.css b/CSS/themes/portainer/portainer-base.css index c5d7f1e5..77e4f5b3 100644 --- a/CSS/themes/portainer/portainer-base.css +++ b/CSS/themes/portainer/portainer-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -10,385 +9,704 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ - - /* Scrollbar */ - @media only screen and (min-width: 768px) { - html { - height: 100%; - width: 100%; - overflow: hidden; - } - body { - overflow-y: auto; - height: 100%; - background: var(--main-bg-color) - } - } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } - - body { + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +body { background: var(--main-bg-color); - color: #cccccc !important; - } - a, ul.sidebar .sidebar-list .sidebar-sublist a { - color: #ccc; - } - a:focus, a:hover { - color: #bbb; - text-decoration: none; - } - .text-danger { - color: #f44336; - } - .fa.red-icon { - color: #f44336; - } - .text-muted { - color: #bbb; - } - .form-section-title { - color: #ccc; - } - ul.sidebar .sidebar-list a { - color: #ccc; - } - /* NEWS */ - .motd-body { + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; +} + +* { + outline: none !important; +} + +h1, +h2, +h3, +h4, +h5, +h6, +label, +legend, +ul.sidebar .sidebar-title.endpoint-name { + color: var(--text-hover); +} + +ul.sidebar .sidebar-list .sidebar-sublist a { + color: var(--text); +} + +a { + color: var(--link-color); +} + +a:focus, +a:hover { + color: var(--link-color-hover); + text-decoration: none; +} + +.text-danger { + color: #f44336; +} + +.fa.red-icon { + color: #f44336; +} + +.text-muted { + color: var(--text-muted); +} + +.form-section-title { + color: var(--text); +} + +ul.sidebar .sidebar-list a { + color: var(--text); +} + +/* NEWS */ +.motd-body { background-color: rgba(255, 255, 255, 0.15) !important; } - /* LOGIN */ - .panel-default { + +/* LOGIN */ +.panel-default { border-color: transparent; } + .panel { background-color: transparent; border: 1px solid transparent; -webkit-box-shadow: none; box-shadow: none; } + .panel-body { background-color: transparent; } - /* SIDEBAR */ - #sidebar-wrapper { - background: rgba(0, 0, 0, 0.25); - } - .sidebar-header { - background: rgba(0, 0, 0, 0.25); - } - ul.sidebar .sidebar-list a.active { - background: rgba(255, 255, 255, 0.1); - border-left: 3px solid var(--accent-color); - } - #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator, .sidebar-footer, ul.sidebar .sidebar-list a:hover, ul.sidebar .sidebar-main a { - background: rgba(255, 255, 255, 0.15); - } - ul.sidebar .sidebar-list a:hover { - border-left: 3px solid var(--accent-color); - } - ul.sidebar .sidebar-title { - color: var(--accent-color); - } - ul.sidebar .sidebar-list .sidebar-sublist a.active { - border-left: 3px solid var(--accent-color); - background: rgba(255, 255, 255, .08); - } - ul.sidebar .sidebar-title { - color: #eee; - } - /* Header */ - .row.header { - background: var(--main-bg-color); - } - - /* WIDGETS */ - .widget { - background: rgba(0, 0, 0, 0.25); - border-color: transparent; - } - .widget .widget-body table thead { - background: rgba(0, 0, 0, 0.25); - } - .widget .widget-header { - color: #ccc; - background-color: rgba(0, 0, 0, .25); - border-bottom: 1px solid transparent; - } - - /* DATATABLES */ - .datatable .toolBar { - background: rgba(0, 0, 0, 0.25); - } - .datatable .footer { - background: rgba(0, 0, 0, 0.25); - color: #ccc; - } - .blocklist-item--selected, .blocklist-item:hover { - background-color: rgba(255, 255, 255, 0.15); - color: #ccc; - } - .datatable .actionBar, .datatable .toolBar { - color: #ccc; - } - .datatable .searchIcon { - color: #ccc; - } - - - /* TABLE */ - - .table-hover>tbody>tr:hover, .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active { - background-color: rgba(255, 255, 255, 0.1); - } - .table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover { - background-color: rgba(255, 255, 255, 0.1); - } - .table .table { - background-color: rgba(255, 255, 255, 0.08); - } - .label-default { - background-color: var(--button-color); - } - /* BUTTONS */ - .btn-primary, .btn-default { - color: #fff; - background-color: var(--button-color); - border-color: var(--button-color); - } - .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { - color: #fff; + +/* SIDEBAR */ +#sidebar-wrapper { + background: rgba(0, 0, 0, 0.25); +} + +.sidebar-header { + background: rgba(0, 0, 0, 0.25); +} + +ul.sidebar .sidebar-list a.active { + color: rgb(var(--accent-color)); + background: rgba(255, 255, 255, 0.1); + border-left: 3px solid rgb(var(--accent-color)); +} + +#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator, +.sidebar-footer, +ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active), +ul.sidebar .sidebar-main a { + background: rgba(255, 255, 255, 0.15); + color: var(--text-hover); +} + +ul.sidebar .sidebar-list a:hover, +#page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span { + border-left: 3px solid rgb(var(--accent-color)); +} + +ul.sidebar .sidebar-title { + color: rgb(var(--accent-color)); +} + +ul.sidebar .sidebar-list .sidebar-sublist a.active { + border-left: 3px solid rgb(var(--accent-color)); + background: rgba(255, 255, 255, .08); +} + +ul.sidebar .sidebar-title { + color: var(--text-hover); +} + +/* Header */ +.row.header { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* WIDGETS */ +.widget { + background: rgba(0, 0, 0, 0.25); + border-color: transparent; +} + +.widget .widget-body table thead { + background: rgba(0, 0, 0, 0.25); +} + +.widget .widget-header { + color: var(--text-hover); + background-color: rgba(0, 0, 0, .25); + border-bottom: 1px solid transparent; +} + +/* DATATABLES */ +.datatable .toolBar { + background: rgba(0, 0, 0, 0.25); +} + +.datatable .footer { + background: rgba(0, 0, 0, 0.25); + color: var(--text); +} + +.blocklist-item--selected, +.blocklist-item:hover { + background-color: rgba(255, 255, 255, 0.15); + color: var(--text); +} + +.datatable .actionBar, +.datatable .toolBar { + color: var(--text); +} + +.datatable .searchIcon { + color: var(--text); +} + + +/* TABLE */ + +.table-hover>tbody>tr:hover, +.table>tbody>tr.active>td, +.table>tbody>tr.active>th, +.table>tbody>tr>td.active, +.table>tbody>tr>th.active, +.table>tfoot>tr.active>td, +.table>tfoot>tr.active>th, +.table>tfoot>tr>td.active, +.table>tfoot>tr>th.active, +.table>thead>tr.active>td, +.table>thead>tr.active>th, +.table>thead>tr>td.active, +.table>thead>tr>th.active { + background-color: rgba(255, 255, 255, 0.1); +} + +.table-hover>tbody>tr.active:hover>td, +.table-hover>tbody>tr.active:hover>th, +.table-hover>tbody>tr:hover>.active, +.table-hover>tbody>tr>td.active:hover, +.table-hover>tbody>tr>th.active:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.table .table { + background-color: rgba(255, 255, 255, 0.08); +} + +.label-default { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); +} + +/* BUTTONS */ + +.btn-danger:hover { + color: #fff !important; + background-color: #c9302c !important; + border-color: #ac2925 !important; +} + +.btn-primary, +.btn-default { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-default.active, +.btn-default:active, +.open>.dropdown-toggle.btn-default, +.btn-default.active.focus, +.btn-default.active:focus, +.btn-default.active:hover, +.btn-default:active.focus, +.btn-default:active:focus, +.btn-default:active:hover, +.open>.dropdown-toggle.btn-default.focus, +.open>.dropdown-toggle.btn-default:focus, +.open>.dropdown-toggle.btn-default:hover { + color: var(--button-text-hover); background-color: var(--button-color-hover); - border-color: transparent; - } - .btn-link { - font-weight: 400; - color: var(--button-color); - border-radius: 0; - } - .btn-primary:hover, .btn-default:hover { - color: #fff; - background-color: var(--button-color-hover); - border-color: transparent; - } - .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { + border-color: var(--button-color-hover); +} + +.btn-link { + font-weight: 400; + color: var(--button-color); + border-radius: 0; +} + +.btn-primary:hover, +.btn-default:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn.active.focus, +.btn.active:focus, +.btn.focus, +.btn:active.focus, +.btn:active:focus, +.btn:focus { outline: none; } - .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { - background-color: var(--button-color-hover); - border-color: transparent; - } - .bootbox-form .checkbox i, .switch i { + +.btn-primary.disabled.focus, +.btn-primary.disabled:focus, +.btn-primary.disabled:hover, +.btn-primary[disabled].focus, +.btn-primary[disabled]:focus, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary.focus, +fieldset[disabled] .btn-primary:focus, +fieldset[disabled] .btn-primary:hover { + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.bootbox-form .checkbox i, +.switch i { background: rgba(255, 255, 255, 0.15); } -.btn.focus, .btn:focus, .btn:hover { - color: #fff; + +.btn.focus, +.btn:focus, +.btn:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } -.ui-select-bootstrap>.ui-select-match>.btn:hover, .ui-select-bootstrap>.ui-select-match>.btn:focus { - text-align: left!important; - color: #fff; + +.btn-link:focus, +.btn-link:hover { + background: transparent; + color: var(--button-color-hover); + border-color: transparent; +} + +.btn-primary.active.focus, +.btn-primary.active:focus, +.btn-primary.active:hover, +.btn-primary:active.focus, +.btn-primary:active:focus, +.btn-primary:active:hover, +.open>.dropdown-toggle.btn-primary.focus, +.open>.dropdown-toggle.btn-primary:focus, +.open>.dropdown-toggle.btn-primary:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.ui-select-bootstrap>.ui-select-match>.btn:hover, +.ui-select-bootstrap>.ui-select-match>.btn:focus { + text-align: left !important; + color: var(--button-text-hover); background-color: rgba(255, 255, 255, 0.25); border-color: #00000000; } - /* PAGINATION */ - .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { - color: #ccc; - cursor: not-allowed; - background-color: rgba(255, 255, 255, 0.1); - border-color: transparent; - } - .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { - z-index: 2; - color: #fff; - cursor: default; - background-color: var(--accent-color); - border-color: transparent; - } - .pagination>li>a, .pagination>li>span { - color: #ccc; - text-decoration: none; - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(0, 0, 0, 0.1); - } - - /* FORM CONTROL */ - - .form-control { - background-color: rgba(255, 255, 255, 0.15); - border: 1px solid transparent; - } - - .form-control, output { - color: #ccc; - } - .form-control:focus { - border-color: transparent; - outline: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - .input-group-addon { - color: #eee; - background-color: rgba(255, 255, 255, 0.15); - border: 1px solid transparent; - } - /* DROPDOWN MENU */ - - .dropdown-menu { - background: var(--modal-bg-color); - color: #ccc; - } - .dropdown-menu>li>a { - color: #ccc; - } - .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { - background-color: var(--accent-color); - } - - /* APP TEMPLATES */ - - .blocklist-item { - border: 1px solid transparent; - -webkit-box-shadow: 0 3px 10px -2px hsla(0, 0%, 0%, 0.5); - box-shadow: 0 3px 10px -2px hsla(0, 0%, 0%, 0.5); - } - - /* ADD NETWORK */ - - .boxselector_wrapper input[type=radio]:checked+label { - background: rgba(255, 255, 255, .15); - color: #fff; - border-color: transparent; - } - - .boxselector_wrapper label { - -webkit-box-shadow: none; - box-shadow: none; - background: rgba(0, 0, 0, 0.15); - border: 1px solid transparent; - } - /* PLACEHOLDER TEXT */ - ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + +/* PAGINATION */ +.pagination>.disabled>a, +.pagination>.disabled>a:focus, +.pagination>.disabled>a:hover, +.pagination>.disabled>span, +.pagination>.disabled>span:focus, +.pagination>.disabled>span:hover { + color: var(--text-muted); + cursor: not-allowed; + background-color: rgba(255, 255, 255, 0.1); + border-color: transparent; +} + +.pagination>.active>a, +.pagination>.active>a:focus, +.pagination>.active>a:hover, +.pagination>.active>span, +.pagination>.active>span:focus, +.pagination>.active>span:hover { + z-index: 2; + color: var(--button-text); + cursor: default; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.pagination>li>a, +.pagination>li>span { + text-decoration: none; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.pagination>li>a:focus, +.pagination>li>a:hover, +.pagination>li>span:focus, +.pagination>li>span:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +/* FORM CONTROL */ + +.form-control { + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid transparent; +} + +.form-control:not([disabled]):not(select), +output { + color: var(--text-hover); +} + +.form-control:focus { + border-color: rgb(var(--accent-color)); + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.input-group-addon { + color: var(--button-text); + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid transparent; +} + +/* DROPDOWN MENU */ + +.dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.dropdown-menu>li>a, +.ui-select-bootstrap .ui-select-choices-row>span { + color: var(--text); +} + +.dropdown-menu>.active>a, +.dropdown-menu>.active>a:focus, +.dropdown-menu>.active>a:hover, +.ui-select-bootstrap .ui-select-choices-row.active>span { + background-color: rgba(0, 0, 0, 0.25); +} + +.ui-select-bootstrap .ui-select-choices-row>span:focus, +.ui-select-bootstrap .ui-select-choices-row>span:hover, +.ui-select-choices-row:hover { + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.15); +} + +/* APP TEMPLATES */ + +.blocklist-item { + border: 1px solid transparent; + -webkit-box-shadow: 0 3px 10px -2px hsla(0, 0%, 0%, 0.5); + box-shadow: 0 3px 10px -2px hsla(0, 0%, 0%, 0.5); +} + +/* ADD NETWORK */ + +.boxselector_wrapper input[type=radio]:checked+label { + background: rgba(255, 255, 255, .15); + color: var(--text-hover); + border-color: transparent; +} + +.boxselector_wrapper label { + -webkit-box-shadow: none; + box-shadow: none; + background: rgba(0, 0, 0, 0.15); + border: 1px solid transparent; +} + +.boxselector_wrapper input[type=radio]:checked+label:after { + color: rgb(var(--accent-color)); + border: 2px solid rgb(var(--accent-color)); + background: var(--label-text-color); +} + +.bootbox-form .checkbox :checked~i, +.switch :checked+i { + -webkit-box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color)); + box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color)); +} + +.md-checkbox input[type=checkbox]:checked+label:before { + background: rgb(var(--accent-color)); + border: none; +} + +.md-checkbox input[type=checkbox]:checked+label:after { + border-color: var(--label-text-color); +} + +.fa.blue-icon, +.fab.blue-icon { + color: rgb(var(--accent-color)); +} + +/* PLACEHOLDER TEXT */ +::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ color: #bbb; - } - ::-moz-placeholder { /* Firefox 19+ */ +} + +::-moz-placeholder { + /* Firefox 19+ */ color: #bbb; - } - :-ms-input-placeholder { /* IE 10+ */ +} + +:-ms-input-placeholder { + /* IE 10+ */ color: #bbb; - } - :-moz-placeholder { /* Firefox 18- */ +} + +:-moz-placeholder { + /* Firefox 18- */ color: #bbb; - } - /* STACKS */ - .CodeMirror { - background: rgba(255, 255, 255, 0.10); - color: white; - } - .CodeMirror-gutters { - border-right: 1px solid rgba(255, 255, 255, 0.25); - background-color: rgba(0, 0, 0, 0.25); - caret-color: white; - } - .CodeMirror-linenumber { - color: var(--accent-color); - } - .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection { - background: #d7d4f0; - } - .cm-s-default .cm-atom { - color: var(--accent-color); - } - /* NAVIGATION */ - .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - color: #fff; - cursor: default; - background-color: rgba(255, 255, 255, 0.15); - border: 1px solid #ddd0; - border-bottom-color: transparent; - } - .nav-tabs>li>a:hover { - border-color: transparent; - } - - .nav>li>a:focus, .nav>li>a:hover { - text-decoration: none; - background-color: rgba(0, 0, 0, 0.25); - } - .nav-tabs>li>a { - border: 1px solid rgba(0, 0, 0, 0); - background: rgba(0, 0, 0, 0.15); - } - /* LOGS */ - .log_viewer { - color: #fff; - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid transparent; - } - /* JSON TREE */ - json-tree { - color: #eee; - } - json-tree .key { - color: var(--accent-color); - padding-right: 5px; - } - pre { - color: #fff; - background-color: rgba(255, 255, 255, .1); - border: 1px solid transparent; - } - /* MODAL */ - .modal-content { - background: var(--modal-bg-color); - } - .modal-header { - border-bottom: 1px solid rgba(255, 255, 255, 0.20); - } - .modal-footer { - border-top: 1px solid rgba(255, 255, 255, .20); - } - /* STACKS / SERVICES TABLES */ - .widget .widget-body table tbody { - background-color:transparent !important; - background:transparent !important; - } - .widget .widget-body table .ng-scope tr { - background: rgba(0, 0, 0, .25) !important; - background-color: rgba(0, 0, 0, .25) !important; - } - .widget .widget-body table thead { - background-color:rgba(0, 0, 0, .25) !important; - background:rgba(0, 0, 0, .25) !important; - } - .widget .widget-body table tbody .ng-isolate-scope div { - background-color: rgba(0, 0, 0, .25) !important; - background: rgba(0, 0, 0, 0) !important; - } - .widget .widget-body table tbody tr:hover { - background-color:#0000 !important; - background:rgba(0, 0, 0, 0) !important; - } - .widget .widget-body table thead tr:hover { - background-color:rgba(0, 0, 0, .35) !important; - background:rgba(0, 0, 0, .35) !important; - } - \ No newline at end of file +} + +/* STACKS */ +.CodeMirror { + background: rgba(255, 255, 255, 0.10); + color: white; +} + +.CodeMirror-gutters { + border-right: 1px solid rgba(255, 255, 255, 0.25); + background-color: rgba(0, 0, 0, 0.25); + caret-color: white; +} + +.CodeMirror-linenumber { + color: rgb(var(--accent-color)); +} + +.CodeMirror-line::selection, +.CodeMirror-line>span::selection, +.CodeMirror-line>span>span::selection { + background: #d7d4f0; +} + +.cm-s-default .cm-atom { + color: rgb(var(--accent-color)); +} + +/* NAVIGATION */ +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover { + color: #fff; + cursor: default; + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid #ddd0; + border-bottom-color: transparent; +} + +.nav-tabs>li>a:hover { + border-color: transparent; +} + +.nav>li>a:focus, +.nav>li>a:hover { + text-decoration: none; + background-color: rgba(0, 0, 0, 0.25); +} + +.nav-tabs>li>a { + border: 1px solid rgba(0, 0, 0, 0); + background: rgba(0, 0, 0, 0.15); +} + +/* LOGS */ +.log_viewer { + color: #fff; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid transparent; +} + +/* JSON TREE */ +json-tree { + color: #eee; +} + +json-tree .key { + color: rgb(var(--accent-color)); + padding-right: 5px; +} + +pre { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border: 1px solid transparent; +} + +/* MODAL */ +.close { + float: right; + font-size: 21px; + font-weight: 700; + line-height: 1; + color: var(--text); + text-shadow: 0 1px 0 var(--text); + filter: alpha(opacity=100); + opacity: 1; +} + +.close:focus, +.close:hover { + color: var(--text-hover); + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=100); + opacity: 1; +} + +.modal-content { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); +} + +/* STACKS / SERVICES TABLES */ +.widget .widget-body table tbody { + background-color: transparent !important; + background: transparent !important; +} + +.widget .widget-body table .ng-scope tr { + background: rgba(0, 0, 0, .25) !important; + background-color: rgba(0, 0, 0, .25) !important; +} + +.widget .widget-body table thead { + background-color: rgba(0, 0, 0, .25) !important; + background: rgba(0, 0, 0, .25) !important; +} + +.widget .widget-body table tbody .ng-isolate-scope div { + background-color: rgba(0, 0, 0, .25) !important; + background: rgba(0, 0, 0, 0) !important; +} + +.widget .widget-body table tbody tr:hover { + background-color: #0000 !important; + background: rgba(0, 0, 0, 0) !important; +} + +.widget .widget-body table thead tr:hover { + background-color: rgba(0, 0, 0, .35) !important; + background: rgba(0, 0, 0, .35) !important; +} \ No newline at end of file diff --git a/CSS/themes/portainer/space-gray.css b/CSS/themes/portainer/space-gray.css index d9683a28..03aba5e7 100644 --- a/CSS/themes/portainer/space-gray.css +++ b/CSS/themes/portainer/space-gray.css @@ -13,12 +13,4 @@ /* LIDARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/aquamarine.css b/CSS/themes/prowlarr/aquamarine.css index c6f60878..d5503002 100644 --- a/CSS/themes/prowlarr/aquamarine.css +++ b/CSS/themes/prowlarr/aquamarine.css @@ -11,32 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* prowlarr AQUAMARINE THEME */ +/* PROWLARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/dark.css b/CSS/themes/prowlarr/dark.css index 113cf0bc..baba932a 100644 --- a/CSS/themes/prowlarr/dark.css +++ b/CSS/themes/prowlarr/dark.css @@ -11,32 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* prowlarr DARK THEME */ +/* PROWLARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/dracula.css b/CSS/themes/prowlarr/dracula.css index 1922508b..59f03fa5 100644 --- a/CSS/themes/prowlarr/dracula.css +++ b/CSS/themes/prowlarr/dracula.css @@ -13,30 +13,4 @@ /* PROWLARR DRACULA THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #50fa7b; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/prowlarr/hotline.css b/CSS/themes/prowlarr/hotline.css index 85e852d3..4f56a19f 100644 --- a/CSS/themes/prowlarr/hotline.css +++ b/CSS/themes/prowlarr/hotline.css @@ -11,32 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* prowlarr HOTLINE THEME */ +/* PROWLARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/organizr-dark.css b/CSS/themes/prowlarr/organizr-dark.css index 5e59538f..8d06d71f 100644 --- a/CSS/themes/prowlarr/organizr-dark.css +++ b/CSS/themes/prowlarr/organizr-dark.css @@ -13,30 +13,4 @@ /* prowlarr ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/plex.css b/CSS/themes/prowlarr/plex.css index 072ea2b1..ea76f6e4 100644 --- a/CSS/themes/prowlarr/plex.css +++ b/CSS/themes/prowlarr/plex.css @@ -13,30 +13,4 @@ /* prowlarr PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/prowlarr/prowlarr-base.css b/CSS/themes/prowlarr/prowlarr-base.css index 82e0b6cd..a3e630e8 100644 --- a/CSS/themes/prowlarr/prowlarr-base.css +++ b/CSS/themes/prowlarr/prowlarr-base.css @@ -109,20 +109,41 @@ a:hover { /* MODAL */ [class*="ModalHeader-modalHeader-"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="ModalFooter-modalFooter-"] { - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff; - border-top: 1px solid var(--accent-color); + border-top: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-closeButton-"]:hover { @@ -157,8 +178,13 @@ a:hover { } [class*="CheckInput-primaryIsChecked-"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; } /* HEADER */ @@ -182,6 +208,13 @@ a:hover { [class*="IndexerSearchInput-containerOpen-"] [class*="IndexerSearchInput-movieContainer-"] { border: none !important; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff !important; box-shadow: 0 0 10px 1px transparent !important; } @@ -203,36 +236,42 @@ a:hover { background-color: transparent; } -[class*="PageSidebarItem-link-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); text-decoration: none; } -[class*="PageSidebarItem-isActiveLink-"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 768px) { [class*="PageSidebar-sidebarContainer-"] { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } [class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } /* MOVIES PAGE */ /* RADARR SPECIFIC */ [class*="MovieIndexPoster-controls-"] { - background-color: #000 !important; + background-color: rgb(var(--accent-color)) !important; } /* OVERVIEW PAGE */ @@ -267,7 +306,7 @@ a:hover { } [class*=".ProgressBar-purple-"] { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } /* MOVIE PAGE */ @@ -298,11 +337,13 @@ a:hover { [class*="ProtocolLabel-torrent-"] { border-color: #00853d !important; background-color: #00853d !important; + color: #fff !important; } [class*="ProtocolLabel-usenet-"] { border-color: #17b1d9 !important; background-color: #17b1d9 !important; + color: #fff !important; } [class*="MovieDetailsSeason-seasonNumber-"] { @@ -333,6 +374,13 @@ a:hover { [class*="Popover-body-"], [class*="Tooltip-body-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="Tooltip-tooltipContainer-"] { @@ -357,45 +405,50 @@ a:hover { } [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--label-text-color); +} + +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { background-color: transparent; color: var(--text-hover); } [class*="Label-default-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="Label-info-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--queue-color); - background-color: var(--queue-color); + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); color: var(--label-text-color); } [class*="MovieDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="MovieDetails-tabList-"] { - color: #fff; + color: var(--text-hover); } /* Table options*/ [class*="TableOptionsColumn-column-"] { background: rgba(0, 0, 0, .25); - color: #FFF; + color: var(--text-hover); border: none; } [class*="TableHeaderCell-headerCell-"] { - color: #fff; + color: var(--text-hover); } [class*="Table-table-"] { @@ -436,11 +489,11 @@ a:hover { } [class*="PageToolbarButton-toolbarButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } [class*="MenuButton-menuButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } /* POSTERS */ @@ -450,13 +503,20 @@ a:hover { [class*="MovieIndexPosterInfo-info-"], [class*="MovieCreditPoster-title-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /* LIBRARY TOP HEADER DROPDOWN */ [class*="MenuItem-menuItem-"], [class*="MenuContent-menuContent-"] { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -496,12 +556,21 @@ a:hover { [class*="EnhancedSelectInput-options-"] { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } + [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { background-color: rgba(255, 255, 255, 0.20) !important; + color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { @@ -518,7 +587,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: var(--label-text-color); + color: #fff; } [class*="IndexerSearchInput-container-"] [class*="Input-input-"] { @@ -579,24 +648,52 @@ a:hover { color: #fff; } +[class*="RootFolderSelectInputOption-freeSpace-"], +[class*="RootFolderSelectInputOption-movieFolder-"] { + color: var(--text-muted); +} + /* MOVE THIS */ -::placeholder { +input::-webkit-input-placeholder { color: var(--text); } -:-ms-input-placeholder { - color: var(--text) +input:focus::-webkit-input-placeholder { + color: var(--text-hover); } -::-webkit-input-placeholder { +/* Firefox < 19 */ +input:-moz-placeholder { color: var(--text); } +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + /* IMPORT */ [class*="FieldSet-legend-"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="VirtualTableRow-row-"]:hover { @@ -613,6 +710,13 @@ a:hover { [class*="ImportMovieSelectMovie-searchIconContainer-"] { border: none; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: white; } @@ -778,14 +882,23 @@ a:hover { } /* SETTINGS */ -[class*="PageContentBody-innerContentBody-"] [class*="Link-to-"] { - color: #fff; +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Settings-summary-"] { color: var(--text); } +[class*="FormLabel-large-"] { + color: var(--text-hover); +} + +[class*="FormLabel-isAdvanced-"] { + color: #ff902b; +} + /* MEDIA MANAGEMENT - FILE NAME TOKENS */ [class*="NamingOption-small-"] { border: 1px solid transparent; @@ -823,18 +936,23 @@ a:hover { color: var(--text); } -[class*="Card-card-"]:hover { +[class*="Card-card-"]:hover, +[class*="Applications-center-"]:hover { color: var(--text-hover); } [class*="QualityProfiles-center-"], [class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"], +[class*="ReleaseProfiles-center-"] { + background-color: transparent; + border: none; + color: var(--text); +} + [class*="Applications-center-"], [class*="AppProfiles-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="QualityProfileItem-qualityProfileItem-"], @@ -876,14 +994,12 @@ a:hover { [class*="DownloadClients-center-"] { background-color: transparent; border: none; - color: var(--text); } /* CONNECTIONS */ [class*="Notifications-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LISTS */ @@ -946,12 +1062,14 @@ input[type=password] { background-color: var(--button-color); cursor: pointer; } + .button:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; text-decoration: none; } + .form-input:focus { outline: 0; border-color: #fff; @@ -974,10 +1092,10 @@ input[type=password] { /* ChartJS */ [class*="Stats-fullWidthChart-"], -[class*="Stats-halfWidthChart-"]{ - background: rgba(0, 0, 0, .25) !important; +[class*="Stats-halfWidthChart-"] { + background: rgba(0, 0, 0, .25) !important; } canvas { -filter: invert(1) -} + filter: invert(1) +} \ No newline at end of file diff --git a/CSS/themes/prowlarr/space-gray.css b/CSS/themes/prowlarr/space-gray.css index 24ca8171..848ba695 100644 --- a/CSS/themes/prowlarr/space-gray.css +++ b/CSS/themes/prowlarr/space-gray.css @@ -13,30 +13,4 @@ /* prowlarr SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/aquamarine.css b/CSS/themes/qbittorrent/aquamarine.css index 8668f52f..5131fe01 100644 --- a/CSS/themes/qbittorrent/aquamarine.css +++ b/CSS/themes/qbittorrent/aquamarine.css @@ -13,16 +13,4 @@ /* QBITTORRENT AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #4c95af; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: 18, 175, 160; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/qbittorrent/dark.css b/CSS/themes/qbittorrent/dark.css index 492b1c06..1b24d7fb 100644 --- a/CSS/themes/qbittorrent/dark.css +++ b/CSS/themes/qbittorrent/dark.css @@ -13,16 +13,4 @@ /* QBITTORRENT DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --progress-color: #3d3d3d; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: 255, 255, 255; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/dracula.css b/CSS/themes/qbittorrent/dracula.css new file mode 100644 index 00000000..029a6899 --- /dev/null +++ b/CSS/themes/qbittorrent/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + + /* QBITTORRENT DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/hotline.css b/CSS/themes/qbittorrent/hotline.css index c2724c2d..5c37aea0 100644 --- a/CSS/themes/qbittorrent/hotline.css +++ b/CSS/themes/qbittorrent/hotline.css @@ -13,16 +13,4 @@ /* QBITTORRENT HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #df6c4c; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: 244, 64, 52; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/organizr-dark.css b/CSS/themes/qbittorrent/organizr-dark.css index 4ddef10c..537f3a13 100644 --- a/CSS/themes/qbittorrent/organizr-dark.css +++ b/CSS/themes/qbittorrent/organizr-dark.css @@ -13,16 +13,4 @@ /* QBITTORRENT ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --progress-color: #2cabe3; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color: 44, 171, 227; - --accent-color-hover: #fff; - --text:#96a2b4; - --text-hover: #fff; - --link-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/plex.css b/CSS/themes/qbittorrent/plex.css index 1146047f..82f896fa 100644 --- a/CSS/themes/qbittorrent/plex.css +++ b/CSS/themes/qbittorrent/plex.css @@ -13,16 +13,4 @@ /* QBITTORRENT PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --progress-color: #cc7b19; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: 227, 159, 13; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/qbittorrent/qbittorrent-base.css b/CSS/themes/qbittorrent/qbittorrent-base.css index 69389453..5ab9672e 100644 --- a/CSS/themes/qbittorrent/qbittorrent-base.css +++ b/CSS/themes/qbittorrent/qbittorrent-base.css @@ -29,16 +29,31 @@ html, body { - color: #FFF; + color: var(--text); background: transparent; } body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } #desktop { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } input:disabled { @@ -49,7 +64,7 @@ input:disabled { } input[type="text"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -58,7 +73,7 @@ input[type="text"i] { } input[type="password"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -67,7 +82,7 @@ input[type="password"i] { } input[type="number"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -75,7 +90,7 @@ input[type="number"i] { } input[type="file"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -103,7 +118,7 @@ h2, h3, h4, .mochaTitlebar h3 { - color: #fff; + color: var(--text-hover); } /* Login */ @@ -115,6 +130,7 @@ h4, margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; + color: var(--text-hover); } #error_msg { @@ -199,30 +215,44 @@ label { } #desktopNavbar ul li a { - color: #fff; + color: var(--text); } #desktopNavbar ul li a:hover { - color: #fff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.08); } #desktopNavbar li ul li a:hover { background: rgba(255, 255, 255, .08); - color: #fff; + color: var(--text-hover); } #desktopNavbar li ul { border: 1px solid transparent; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #desktopNavbar li ul li a { - color: #fff; + color: var(--text); } #desktopHeader { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #desktopFooter { @@ -241,6 +271,7 @@ label { .dynamicTable th { background-color: rgba(0, 0, 0, 0.25) !important; border-right-color: rgba(255, 255, 255, .08) !important; + color: var(--text-hover); } .dynamicTable thead tr { @@ -266,23 +297,35 @@ label { .dynamicTable tbody tr:hover { background-color: rgba(255, 255, 255, 0.15) !important; + color: var(--text-hover); } .dynamicTable tbody tr.selected { - background-color: rgba(var(--accent-color),0.6) !important; + background-color: rgba(var(--accent-color), 0.6) !important; + color: var(--label-text-color); } + .dynamicTable th.sorted.reverse { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/qbittorrent/go-down.png) !important; } + .dynamicTable th.sorted { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/qbittorrent/go-up.png) !important; background-size: 9px !important; background-position: right !important; background-repeat: no-repeat !important; - + } + .panel { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border-bottom: 1px solid transparent; } @@ -297,7 +340,7 @@ li.divider { #main input[type="text"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -313,7 +356,7 @@ li.divider { } #main input[type="password"i] { - color: #FFF; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; @@ -350,7 +393,7 @@ li.divider { border-radius: 4px; cursor: pointer; border: none; - color: var(--button-text) !important; + color: var(--button-text-hover) !important; } @@ -358,19 +401,36 @@ li.divider { .contextMenu { border: 1px solid transparent; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .contextMenu li a { - color: #fff; + color: var(--text); } .contextMenu li a:hover { background-color: rgba(255, 255, 255, .08) !important; + color: var(--text-hover); } +.contextMenu li a:hover {} + .contextMenu li ul { border: 1px solid transparent; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .contextMenu .separator { @@ -379,12 +439,21 @@ li.divider { /* Sidemenu */ .selectedFilter { - background-color: rgba(var(--accent-color),0.6); - color: #FFF; + background-color: rgba(var(--accent-color), 0.6); + color: #eee; +} + +.selectedFilter:before { + color: var(--button-color-hover) !important; } ul.filterList li:hover { - background-color: rgba(var(--accent-color),0.6); + background-color: rgba(var(--accent-color), 0.6); + color: var(--button-color-hover) !important; +} + +ul.filterList li:hover:before { + color: var(--button-color-hover) !important; } .columnHandle { @@ -412,13 +481,13 @@ ul.filterList li:hover { } .tab-menu li.selected a { - color: #fff !important; + color: var(--text-hover) !important; background: transparent !important; font-weight: normal !important; } .tab-menu li a { - color: #fff !important; + color: var(--text) !important; background: transparent !important; } @@ -439,7 +508,8 @@ ul.filterList li:hover { } .progressbar_dark { - background: var(--progress-color) !important; + background: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; } .progressbar_light { @@ -494,6 +564,13 @@ fieldset { top: 0; left: 0; background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .mochaToolbarWrapper { @@ -516,7 +593,11 @@ fieldset { } .mocha.isFocused .mochaTitlebar h3 { - color: #fff; + color: var(--text-hover); +} + +fieldset.settings legend { + color: var(--text-hover); } .mochaContentWrapper { @@ -541,7 +622,7 @@ textarea:disabled { } textarea { - color: #fff !important; + color: var(--text-hover) !important; cursor: default; background-color: rgb(0, 0, 0, .25) !important; border: none !important; @@ -621,7 +702,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); margin-top: 5px; } @@ -634,7 +715,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #uploadButton>img.mochaToolButton { @@ -650,7 +731,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #uploadButton:hover:before { @@ -662,7 +743,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #deleteButton>img.mochaToolButton { @@ -678,7 +759,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #deleteButton:hover:before { @@ -690,7 +771,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #resumeButton>img.mochaToolButton { @@ -706,7 +787,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #resumeButton:hover:before { @@ -718,7 +799,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #pauseButton>img.mochaToolButton { @@ -734,7 +815,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #pauseButton:hover:before { @@ -746,7 +827,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #topPrioButton>img.mochaToolButton { @@ -762,7 +843,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #topPrioButton:hover:before { @@ -774,7 +855,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #increasePrioButton>img.mochaToolButton { @@ -790,7 +871,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #increasePrioButton:hover:before { @@ -802,7 +883,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #decreasePrioButton>img.mochaToolButton { @@ -818,7 +899,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #decreasePrioButton:hover:before { @@ -830,7 +911,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #bottomPrioButton>img.mochaToolButton { @@ -846,7 +927,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #bottomPrioButton:hover:before { @@ -858,7 +939,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } #preferencesButton>img.mochaToolButton { @@ -874,7 +955,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); } #preferencesButton:hover:before { @@ -886,7 +967,7 @@ input[type="submit"i]:hover { width: 24px; height: 24px; margin-right: 10px; - color: white; + color: var(--button-color-hover); } /*Top menu icons*/ @@ -916,7 +997,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -931,7 +1012,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -946,7 +1027,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -961,7 +1042,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -978,7 +1059,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -993,7 +1074,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1008,7 +1089,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1023,7 +1104,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1038,7 +1119,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1053,7 +1134,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1068,7 +1149,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1083,7 +1164,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1098,7 +1179,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1113,7 +1194,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1131,7 +1212,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1158,7 +1239,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1186,7 +1267,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1214,7 +1295,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1230,7 +1311,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1269,7 +1350,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1300,7 +1381,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1317,7 +1398,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1332,7 +1413,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1347,7 +1428,7 @@ input[type="submit"i]:hover { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1368,7 +1449,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1383,7 +1464,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1398,7 +1479,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1413,7 +1494,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1428,7 +1509,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1443,7 +1524,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1458,7 +1539,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.9); + color: var(--button-color); padding-left: 5px; } @@ -1473,7 +1554,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.4); + color: var(--button-color); padding-left: 5px; } @@ -1488,7 +1569,7 @@ ul.filterList a { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.4); + color: var(--button-color); padding-left: 5px; } @@ -1503,7 +1584,7 @@ ul.filterList a { font-weight: 900; display: inline-block !important; margin-right: 5px; - color: rgba(255, 255, 255, 0.4); + color: var(--button-color); padding-left: 5px; } @@ -1518,7 +1599,7 @@ ul.filterList a { font-weight: 900; display: inline-block !important; margin-right: 5px; - color: rgba(255, 255, 255, 0.4); + color: var(--button-color); padding-left: 5px; } @@ -1527,7 +1608,6 @@ img[src="icons/inode-directory.svg"] { background-size: contain; background-repeat: no-repeat; background-origin: content-box; - object-position: -999999px 999999px; filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); } @@ -1536,7 +1616,6 @@ img[src="icons/network-server.svg"] { background-size: contain; background-repeat: no-repeat; background-origin: content-box; - object-position: -999999px 999999px; filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); } @@ -1545,15 +1624,14 @@ img[src="icons/mail-folder-inbox.svg"] { background-size: contain; background-repeat: no-repeat; background-origin: content-box; - object-position: -999999px 999999px; filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); } -img[src="icons/downloading_small.svg"], +/* img[src="icons/downloading_small.svg"], img[src="icons/seeding.svg"], img[src="icons/stalledDL.svg"] { filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); -} +} */ #searchPattern { width: 300px; @@ -1565,10 +1643,10 @@ img[src="icons/stalledDL.svg"] { background-position: left; } -#connectionStatus, +/* #connectionStatus, #alternativeSpeedLimits { filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); -} +} */ #errored_filter>a img { display: none; @@ -1581,7 +1659,7 @@ img[src="icons/stalledDL.svg"] { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1598,7 +1676,7 @@ img[src="icons/stalledDL.svg"] { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } @@ -1615,14 +1693,74 @@ img[src="icons/stalledDL.svg"] { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } -/* Torrent right clkick menu */ - -#torrentsTableMenu>li img { - display: none; +/* Blue SVG icons */ +img[src="icons/application-x-mswinurl.svg"], +img[src="icons/collapse.svg"], +img[src="icons/completed.svg"], +img[src="icons/configure.svg"], +img[src="icons/dialog-information.svg"], +img[src="icons/document-edit.svg"], +img[src="icons/document-edit-verify.svg"], +img[src="icons/document-import.svg"], +img[src="icons/document-new.svg"], +img[src="icons/document-properties.svg"], +img[src="icons/document-save.svg"], +img[src="icons/download.svg"], +img[src="icons/edit-clear.svg"], +img[src="icons/edit-clear-history.svg"], +img[src="icons/edit-copy.svg"], +img[src="icons/edit-cut.svg"], +img[src="icons/edit-find.svg"], +img[src="icons/edit-find-user.svg"], +img[src="icons/edit-paste.svg"], +img[src="icons/edit-rename.svg"], +img[src="icons/expand.svg"], +img[src="icons/folder-documents.svg"], +img[src="icons/folder-download.svg"], +img[src="icons/folder-new.svg"], +img[src="icons/folder-remote.svg"], +img[src="icons/gear.svg"], +img[src="icons/go-bottom.svg"], +img[src="icons/go-down.svg"], +img[src="icons/go-top.svg"], +img[src="icons/go-up.svg"], +img[src="icons/help-about.svg"], +img[src="icons/help-contents.svg"], +img[src="icons/insert-link.svg"], +img[src="icons/list-add.svg"], +img[src="icons/mail-mark-read.svg"], +img[src="icons/media-playback-pause.svg"], +img[src="icons/media-playback-start.svg"], +img[src="icons/media-seek-forward.svg"], +img[src="icons/network-wired.svg"], +img[src="icons/office-chart-line.svg"], +img[src="icons/preferences-desktop.svg"], +img[src="icons/preferences-other.svg"], +img[src="icons/preferences-system-network.svg"], +img[src="icons/preferences-web-browser-cookies.svg"], +img[src="icons/rss-config.svg"], +img[src="icons/services.svg"], +img[src="icons/speedometer.svg"], +img[src="icons/stalledUP.svg"], +img[src="icons/stalledDL.svg"], +img[src="icons/tab-close.svg"], +img[src="icons/task-ongoing.svg"], +img[src="icons/text-plain.svg"], +img[src="icons/user-group-delete.svg"], +img[src="icons/user-group-new.svg"], +img[src="icons/view-calendar-journal.svg"], +img[src="icons/view-categories.svg"], +img[src="icons/view-filter.svg"], +img[src="icons/view-preview.svg"], +img[src="icons/view-statistics.svg"], +img[src="icons/wallet-open.svg"], +img[src="icons/webui.svg"], +img[src="icons/checking.svg"] { + filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(289deg) brightness(106%) contrast(101%); } .contextMenu, @@ -1641,6 +1779,8 @@ img[src="icons/stalledDL.svg"] { background-position: left; } +.contextMenu li a.arrow-right, +.contextMenu li a:hover.arrow-right, .contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/qbittorrent/arrow-right.gif); @@ -1661,6 +1801,6 @@ img[src="icons/stalledDL.svg"] { font-weight: 900; display: inline-block; margin-right: 5px; - color: rgba(255, 255, 255, 0.7); + color: var(--button-color); padding-left: 5px; } \ No newline at end of file diff --git a/CSS/themes/qbittorrent/space-gray.css b/CSS/themes/qbittorrent/space-gray.css index a97b745d..c3eb0093 100644 --- a/CSS/themes/qbittorrent/space-gray.css +++ b/CSS/themes/qbittorrent/space-gray.css @@ -13,16 +13,4 @@ /* QBITTORRENT SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --progress-color: #607D8B; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: 129, 166, 183; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/radarr/aquamarine.css b/CSS/themes/radarr/aquamarine.css index 889086cb..569e65f4 100644 --- a/CSS/themes/radarr/aquamarine.css +++ b/CSS/themes/radarr/aquamarine.css @@ -12,31 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RADARR AQUAMARINE THEME */ -@import url(https://gilbn.github.io/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/radarr/dark.css b/CSS/themes/radarr/dark.css index 71cffae9..76dd7202 100644 --- a/CSS/themes/radarr/dark.css +++ b/CSS/themes/radarr/dark.css @@ -13,30 +13,4 @@ /* RADARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/radarr/dracula.css b/CSS/themes/radarr/dracula.css index dd44b8d4..d78c11a3 100644 --- a/CSS/themes/radarr/dracula.css +++ b/CSS/themes/radarr/dracula.css @@ -12,30 +12,4 @@ /* RADARR DRACULA THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #50fa7b; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/radarr/hotline.css b/CSS/themes/radarr/hotline.css index 470cfd66..c5758159 100644 --- a/CSS/themes/radarr/hotline.css +++ b/CSS/themes/radarr/hotline.css @@ -13,30 +13,4 @@ /* RADARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/radarr/organizr-dark.css b/CSS/themes/radarr/organizr-dark.css index def412f9..aa3cc979 100644 --- a/CSS/themes/radarr/organizr-dark.css +++ b/CSS/themes/radarr/organizr-dark.css @@ -13,30 +13,4 @@ /* RADARR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/radarr/plex.css b/CSS/themes/radarr/plex.css index dc7c6a0e..6fbd3377 100644 --- a/CSS/themes/radarr/plex.css +++ b/CSS/themes/radarr/plex.css @@ -13,30 +13,4 @@ /* RADARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/radarr/radarr-base.css b/CSS/themes/radarr/radarr-base.css index c68277cf..b0877860 100644 --- a/CSS/themes/radarr/radarr-base.css +++ b/CSS/themes/radarr/radarr-base.css @@ -9,6 +9,14 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --calendar-in-cinemas: 53, 197, 244; + --calendar-downloading: 122 67 182; + --calendar-unmonitored: 173 173 173; + --calendar-unaired: 93 156 236; + --calendar-missing: 240 80 80; + --calendar-available: 39 194 76; + } body { background: var(--main-bg-color); @@ -109,20 +117,41 @@ a:hover { /* MODAL */ [class*="ModalHeader-modalHeader-"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="ModalFooter-modalFooter-"] { - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff; - border-top: 1px solid var(--accent-color); + border-top: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-closeButton-"]:hover { @@ -157,8 +186,13 @@ a:hover { } [class*="CheckInput-primaryIsChecked-"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; } /* HEADER */ @@ -181,6 +215,13 @@ a:hover { [class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { border: none !important; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff !important; box-shadow: 0 0 10px 1px transparent !important; } @@ -202,37 +243,44 @@ a:hover { background-color: transparent; } -[class*="PageSidebarItem-link-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); text-decoration: none; } -[class*="PageSidebarItem-isActiveLink-"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 768px) { [class*="PageSidebar-sidebarContainer-"] { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } [class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } /* MOVIES PAGE */ /* RADARR SPECIFIC */ [class*="MovieIndexPoster-controls-"] { - background-color: #000 !important; + background-color: rgb(var(--accent-color)) !important; } + [class*="MovieTitlesTableContent-blankpad-"], [class*="ExtraFileTableContent-blankpad-"], [class*="MovieHistoryTableContent-blankpad-"] { @@ -271,7 +319,7 @@ a:hover { } [class*=".ProgressBar-purple-"] { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } /* MOVIE PAGE */ @@ -302,11 +350,13 @@ a:hover { [class*="ProtocolLabel-torrent-"] { border-color: #00853d !important; background-color: #00853d !important; + color: #fff !important; } [class*="ProtocolLabel-usenet-"] { border-color: #17b1d9 !important; background-color: #17b1d9 !important; + color: #fff !important; } [class*="MovieDetailsSeason-seasonNumber-"] { @@ -333,6 +383,13 @@ a:hover { [class*="Popover-body-"], [class*="Tooltip-body-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="Tooltip-tooltipContainer-"] { @@ -356,7 +413,8 @@ a:hover { color: var(--text); } -[class*="Label-default-"] [class*="IconButton-button-"] { +[class*="Label-default-"] [class*="IconButton-button-"], +[class*="Label-small-"] [class*="IconButton-button-"]:hover { color: var(--label-text-color); } @@ -365,41 +423,46 @@ a:hover { color: var(--text-hover); } +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--text-hover); +} + [class*="Label-default-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="Label-info-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--queue-color); - background-color: var(--queue-color); + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); color: var(--label-text-color); } [class*="MovieDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="MovieDetails-tabList-"] { - color: #fff; + color: var(--text-hover); } /* Table options*/ [class*="TableOptionsColumn-column-"] { background: rgba(0, 0, 0, .25); - color: #FFF; + color: var(--text-hover); border: none; } [class*="TableHeaderCell-headerCell-"] { - color: #fff; + color: var(--text-hover); } [class*="Table-table-"] { @@ -440,11 +503,11 @@ a:hover { } [class*="PageToolbarButton-toolbarButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } [class*="MenuButton-menuButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } /* POSTERS */ @@ -454,13 +517,20 @@ a:hover { [class*="MovieIndexPosterInfo-info-"], [class*="MovieCreditPoster-title-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /* LIBRARY TOP HEADER DROPDOWN */ [class*="MenuItem-menuItem-"], [class*="MenuContent-menuContent-"] { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -500,12 +570,21 @@ a:hover { [class*="EnhancedSelectInput-options-"] { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } + [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { background-color: rgba(255, 255, 255, 0.20) !important; + color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { @@ -522,7 +601,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: var(--label-text-color); + color: #fff; } [class*="MovieSearchInput-container-"] [class*="Input-input-"] { @@ -561,7 +640,7 @@ a:hover { [class*="PageContentBody-innerContentBody-"], [class*="PageContentBody-contentBody-"], -.react-tabs__tab-panel .react-tabs__tab-panel--selected > div { +.react-tabs__tab-panel .react-tabs__tab-panel--selected>div { color: var(--text); } @@ -585,24 +664,52 @@ a:hover { color: #fff; } +[class*="RootFolderSelectInputOption-freeSpace-"], +[class*="RootFolderSelectInputOption-movieFolder-"] { + color: var(--text-muted); +} + /* MOVE THIS */ -::placeholder { +input::-webkit-input-placeholder { color: var(--text); } -:-ms-input-placeholder { - color: var(--text) +input:focus::-webkit-input-placeholder { + color: var(--text-hover); } -::-webkit-input-placeholder { +/* Firefox < 19 */ +input:-moz-placeholder { color: var(--text); } +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + /* IMPORT */ [class*="FieldSet-legend-"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="VirtualTableRow-row-"]:hover { @@ -619,6 +726,13 @@ a:hover { [class*="ImportMovieSelectMovie-searchIconContainer-"] { border: none; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: white; } @@ -643,7 +757,7 @@ a:hover { [class*="DiscoverMoviePoster-title-"], [class*="DiscoverMoviePosterInfo-info-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /*Title*/ @@ -787,14 +901,23 @@ a:hover { } /* SETTINGS */ -[class*="PageContentBody-innerContentBody-"] [class*="Link-to-"] { - color: #fff; +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Settings-summary-"] { color: var(--text); } +[class*="FormLabel-large-"] { + color: var(--text-hover); +} + +[class*="FormLabel-isAdvanced-"] { + color: #ff902b; +} + /* MEDIA MANAGEMENT - FILE NAME TOKENS */ [class*="NamingOption-small-"] { border: 1px solid transparent; @@ -841,7 +964,6 @@ a:hover { [class*="ReleaseProfiles-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="QualityProfileItem-qualityProfileItem-"], @@ -876,28 +998,24 @@ a:hover { [class*="Indexers-center-"] { background-color: transparent; border: none; - color: var(--text); } /* DOWNLOAD CLIENTS */ [class*="DownloadClients-center-"] { background-color: transparent; border: none; - color: var(--text); } /* CONNECTIONS */ [class*="Notifications-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LISTS */ [class*="ImportLists-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LOG */ @@ -953,12 +1071,14 @@ input[type=password] { background-color: var(--button-color); cursor: pointer; } + .button:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; text-decoration: none; } + .form-input:focus { outline: 0; border-color: #fff; @@ -977,4 +1097,4 @@ input[type=password] { [class*="SelectMovieModalContent-path-"] { color: var(--text); -} +} \ No newline at end of file diff --git a/CSS/themes/radarr/space-gray.css b/CSS/themes/radarr/space-gray.css index 0df391fb..4aacd2b7 100644 --- a/CSS/themes/radarr/space-gray.css +++ b/CSS/themes/radarr/space-gray.css @@ -13,30 +13,4 @@ /* RADARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --calendar-in-cinemas: 53, 197, 244; - --calendar-downloading: 122 67 182; - --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; - --calendar-missing: 240 80 80; - --calendar-available: 39 194 76; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/readarr/aquamarine.css b/CSS/themes/readarr/aquamarine.css index f264e6ce..3b7a09f0 100644 --- a/CSS/themes/readarr/aquamarine.css +++ b/CSS/themes/readarr/aquamarine.css @@ -13,30 +13,4 @@ /* READARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/readarr/dark.css b/CSS/themes/readarr/dark.css index 5deb4fcd..90225352 100644 --- a/CSS/themes/readarr/dark.css +++ b/CSS/themes/readarr/dark.css @@ -13,30 +13,4 @@ /* READARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/readarr/dracula.css b/CSS/themes/readarr/dracula.css index f2615e6c..dddd5f79 100644 --- a/CSS/themes/readarr/dracula.css +++ b/CSS/themes/readarr/dracula.css @@ -13,30 +13,4 @@ /* READARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #50fa7b; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/readarr/hotline.css b/CSS/themes/readarr/hotline.css index f341e386..227c5c3a 100644 --- a/CSS/themes/readarr/hotline.css +++ b/CSS/themes/readarr/hotline.css @@ -13,31 +13,4 @@ /* READARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/readarr/organizr-dark.css b/CSS/themes/readarr/organizr-dark.css index 367909c7..91f40972 100644 --- a/CSS/themes/readarr/organizr-dark.css +++ b/CSS/themes/readarr/organizr-dark.css @@ -13,30 +13,4 @@ /* READARR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/readarr/plex.css b/CSS/themes/readarr/plex.css index eb30a081..3ae309df 100644 --- a/CSS/themes/readarr/plex.css +++ b/CSS/themes/readarr/plex.css @@ -13,30 +13,4 @@ /* READARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/readarr/readarr-base.css b/CSS/themes/readarr/readarr-base.css index e3886e84..ab1c176c 100644 --- a/CSS/themes/readarr/readarr-base.css +++ b/CSS/themes/readarr/readarr-base.css @@ -10,6 +10,15 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --calendar-downloading: 122 67 182; + --calendar-downloaded: 39 194 76; + --calendar-unreleased: 93 156 236; + --calendar-partial: 255, 165, 0; + --calendar-unmonitored: 173 173 173; + --calendar-missing: 240 80 80; + } + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -109,22 +118,43 @@ a:hover { /* MODAL */ [class*="ModalHeader-modalHeader-"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Modal-large-"], [class*="Modal-modal-"], [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="ModalFooter-modalFooter-"] { - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff; - border-top: 1px solid var(--accent-color); + border-top: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-closeButton-"]:hover { @@ -159,8 +189,13 @@ a:hover { } [class*="CheckInput-primaryIsChecked-"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; } /* HEADER */ @@ -176,35 +211,42 @@ a:hover { } /* LIDARR SPECIFIC */ -[class*="ArtistSearchInput-sectionTitle-"] { +[class*="AuthorSearchInput-sectionTitle-"] { color: #fff; } -[class*="ArtistSearchInput-containerOpen-"] [class*="ArtistSearchInput-artistContainer-"] { +[class*="AuthorSearchInput-containerOpen-"] [class*="AuthorSearchInput-authorContainer-"] { border: none !important; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff !important; box-shadow: 0 0 10px 1px transparent !important; } -[class*="ArtistSearchInput-highlighted-"] { +[class*="AuthorSearchInput-highlighted-"] { background-color: hsla(0, 0%, 100%, .08) } -[class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb, -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { +[class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb, +[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); } /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb, +[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 100%, .08) !important; } [class*="OverlayScroller-thumb-"]:hover, -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover, +[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25) !important; } @@ -213,13 +255,21 @@ a:hover { [class*="EnhancedSelectInput-options-"] { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { background-color: rgba(255, 255, 255, 0.20) !important; + color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { @@ -240,55 +290,61 @@ a:hover { background-color: transparent; } -[class*="PageSidebarItem-link-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); text-decoration: none; } -[class*="PageSidebarItem-isActiveLink-"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 768px) { [class*="PageSidebar-sidebarContainer-"] { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } [class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } /* LIBRARY PAGE */ /* LIDARR SPECIFIC */ -[class*="ArtistIndexPoster-controls-"] { - background-color: #000 !important; +[class*="AuthorIndexPoster-controls-"] { + background-color: rgb(var(--accent-color)) !important; } /* OVERVIEW PAGE */ /* OVERVIEW PAGE */ -[class*="ArtistIndexOverview-container-"], -[class*="ArtistIndexOverview-container-"]:hover { +[class*="AuthorIndexOverview-container-"], +[class*="AuthorIndexOverview-container-"]:hover { background-color: transparent !important; } -[class*="ArtistIndexOverview-container-"]:hover [class*="ArtistIndexOverview-content-"] { +[class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] { background-color: transparent; } -[class*="ArtistIndexOverview-content-"]:hover { +[class*="AuthorIndexOverview-content-"]:hover { background-color: hsla(0, 0%, 100%, .08) !important; } -[class*="ArtistIndexOverview-link-"]:hover { +[class*="AuthorIndexOverview-link-"]:hover { text-decoration: none; } @@ -297,21 +353,21 @@ a:hover { } [class*=".ProgressBar-purple-"] { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } /*ARTIST PAGE*/ -[class*="ArtistDetailsSeason-albumType-"], -[class*="ArtistDetailsSeason-collapseButtonContainer-"] { +[class*="AuthorDetailsSeason-albumType-"], +[class*="AuthorDetailsSeason-collapseButtonContainer-"] { border: none !important; background-color: rgba(0, 0, 0, .25) !important; } -[class*="ArtistDetailsSeason-header-"], -[class*="ArtistDetailsSeason-albumCount-"], -[class*="ArtistDetails-metadataMessage-"], -[class*="ArtistDetailsSeason-albumCount-"] { +[class*="AuthorDetailsSeason-header-"], +[class*="AuthorDetailsSeason-albumCount-"], +[class*="AuthorDetails-metadataMessage-"], +[class*="AuthorDetailsSeason-albumCount-"] { color: #fff; } @@ -320,8 +376,8 @@ a:hover { } [class*="Label-default-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } @@ -336,11 +392,13 @@ a:hover { [class*="ProtocolLabel-torrent-"] { border-color: #00853d !important; background-color: #00853d !important; + color: #fff !important; } [class*="ProtocolLabel-usenet-"] { border-color: #17b1d9 !important; background-color: #17b1d9 !important; + color: #fff !important; } /*ARTIST ALBUM PAGE*/ @@ -359,7 +417,7 @@ a:hover { } [class*="AlbumDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="AlbumDetailsMedium-collapseButtonContainer-"] { @@ -367,12 +425,12 @@ a:hover { background-color: rgba(0, 0, 0, .25); } -[class*="ArtistIndexProgressBar-progress-"] { +[class*="AuthorIndexProgressBar-progress-"] { background-color: hsla(0, 0%, 100%, .08); } -[class*="ArtistIndexBanner-title-"], -[class*="ArtistIndexBannerInfo-info-"] { +[class*="AuthorIndexBanner-title-"], +[class*="AuthorIndexBannerInfo-info-"] { background-color: rgba(0, 0, 0, .25); color: #fff; } @@ -382,6 +440,13 @@ a:hover { [class*="Popover-body-"], [class*="Tooltip-body-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="Tooltip-tooltipContainer-"] { @@ -405,32 +470,51 @@ a:hover { color: var(--text); } +[class*="Label-default-"] [class*="IconButton-button-"], +[class*="Label-small-"] [class*="IconButton-button-"]:hover { + color: var(--label-text-color); +} + [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--label-text-color); +} + +[class*="AuthorDetailsHeader-monitorToggleButton-"]:hover, +[class*="AuthorDetails-authorNavigationButton-"]:hover, +[class*="AuthorDetails-authorUpButton-"]:hover, +[class*="BookDetailsHeader-monitorToggleButton-1F9Pp"]:hover, +[class*="BookDetails-bookUpButton-"]:hover, +[class*="BookDetails-bookNavigationButton-"]:hover { + color: var(--text-hover); +} + +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { background-color: transparent; color: var(--text-hover); } [class*="Label-info-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: #fff; } [class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--queue-color); - background-color: var(--queue-color); + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); color: #fff; } /* Table options*/ [class*="TableOptionsColumn-column-"] { background: rgba(0, 0, 0, .25); - color: #FFF; + color: var(--text-hover); border: none; } [class*="TableHeaderCell-headerCell-"] { - color: #fff; + color: var(--text-hover); } [class*="Table-table-"] { @@ -471,25 +555,32 @@ a:hover { } [class*="PageToolbarButton-toolbarButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } [class*="MenuButton-menuButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } /* POSTERS */ -[class*="ArtistIndexPoster-title-"], -[class*="ArtistIndexPosterInfo-info-"] { +[class*="AuthorIndexPoster-title-"], +[class*="AuthorIndexPosterInfo-info-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /* TOP HEADER DROPDOWN */ [class*="MenuItem-menuItem-"], [class*="MenuContent-menuContent-"] { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -519,7 +610,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: var(--label-text-color); + color: #fff; } [class*="AuthorSearchInput-input-"][class*="Input-input-"] { @@ -532,7 +623,7 @@ a:hover { background: transparent; } -[class*="ArtistSearchResult-alternateTitle-"] { +[class*="AuthorSearchResult-alternateTitle-"] { color: #ffffff; font-size: 12px; } @@ -557,18 +648,18 @@ a:hover { } /* SEARCH RESULTS */ -[class*="AddNewArtistSearchResult-year-"] { +[class*="AddNewAuthorSearchResult-year-"] { color: #fff; } -[class*="AddNewArtistSearchResult-searchResult-"], -[class*="AddNewArtistSearchResult-underlay-"], +[class*="AddNewAuthorSearchResult-searchResult-"], +[class*="AddNewAuthorSearchResult-underlay-"], [class*="AddNewAlbumSearchResult-underlay-"] { background-color: transparent; } -[class*="AddNewArtistSearchResult-searchResult-"]:hover, -[class*="AddNewArtistSearchResult-underlay-"]:hover, +[class*="AddNewAuthorSearchResult-searchResult-"]:hover, +[class*="AddNewAuthorSearchResult-underlay-"]:hover, [class*="AddNewAlbumSearchResult-underlay-"]:hover { background-color: hsla(0, 0%, 100%, .08); color: inherit; @@ -579,38 +670,72 @@ a:hover { color: #fff; } +[class*="RootFolderSelectInputOption-freeSpace-"] { + color: var(--text-muted); +} + /* IMPORT ARTIST */ -[class*="ImportArtistSelectArtist-content-"], -[class*="ImportArtistSelectArtist-searchIconContainer-"] { +[class*="ImportAuthorSelectAuthor-content-"], +[class*="ImportAuthorSelectAuthor-searchIconContainer-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #FFF; border: 1px solid transparent; } -[class*="ImportArtistName-disambiguation-"] { +[class*="ImportAuthorName-disambiguation-"] { color: var(--text-muted); } -[class*="ImportArtistSearchResult-artist-"]:hover { +[class*="ImportAuthorSearchResult-author-"]:hover { background-color: rgba(255, 255, 255, 0.08); } /* MOVE THIS */ -::placeholder { +input::-webkit-input-placeholder { color: var(--text); } -:-ms-input-placeholder { - color: var(--text) +input:focus::-webkit-input-placeholder { + color: var(--text-hover); } -::-webkit-input-placeholder { +/* Firefox < 19 */ +input:-moz-placeholder { color: var(--text); } +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + /* IMPORT */ /* Text color */ -[class*="ImportArtistSelectFolder-header-"] { +[class*="ImportAuthorSelectFolder-header-"] { color: #FFF; } @@ -621,7 +746,7 @@ a:hover { /* IMPORT NEW ARTIST */ /* Drop down menu/button*/ -[class*="ImportArtistSelectArtist-button-"] { +[class*="ImportAuthorSelectAuthor-button-"] { border: none; background-color: rgba(0, 0, 0, 0.25) !important; color: #fff; @@ -631,8 +756,8 @@ a:hover { /* IMPORT */ [class*="FieldSet-legend-"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="VirtualTableRow-row-"]:hover { @@ -748,14 +873,23 @@ a:hover { } /* SETTINGS */ -[class*="PageContentBody-innerContentBody-"] [class*="Link-to-"] { - color: #fff; +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Settings-summary-"] { color: var(--text); } +[class*="FormLabel-large-"] { + color: var(--text-hover); +} + +[class*="FormLabel-isAdvanced-"] { + color: #ff902b; +} + /* MEDIA MANAGEMENT - FILE NAME TOKENS */ [class*="NamingOption-small-"] { border: 1px solid transparent; @@ -802,7 +936,6 @@ a:hover { [class*="ReleaseProfiles-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="QualityProfileItem-qualityProfileItem-"], @@ -837,7 +970,6 @@ a:hover { [class*="Indexers-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="Card-card-"], @@ -853,7 +985,6 @@ a:hover { [class*="RootFolders-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="RootFolders-center-"] { @@ -874,21 +1005,18 @@ a:hover { [class*="DownloadClients-center-"] { background-color: transparent; border: none; - color: var(--text); } /* CONNECTIONS */ [class*="Notifications-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LISTS */ [class*="ImportLists-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LOG */ @@ -944,12 +1072,14 @@ input[type=password] { background-color: var(--button-color); cursor: pointer; } + .button:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; text-decoration: none; } + .form-input:focus { outline: 0; border-color: #fff; @@ -1013,10 +1143,11 @@ input[type=password] { [class*="AuthorDetails-tabList-"] { border-bottom: 1px solid rgb(255 255 255 / 50%); + color: var(--text-hover); } [class*="BookDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="BookshelfBook-book-"] { @@ -1030,6 +1161,13 @@ input[type=password] { color: #fff; } +/* Files Tab*/ +[class*="BookFileEditorTableContent-filesTable-"] { + border: 1px solid rgb(255 255 255 / 10%); + border-top: 1px solid rgb(255 255 255 / 50%); + background-color: rgb(0 0 0 / 25%); +} + /*Series Tab*/ [class*="AuthorDetailsSeries-bookType-"] { border: none; @@ -1050,12 +1188,9 @@ input[type=password] { } /*Search Tab*/ -[class*="MenuButton-menuButton-"] { - color: #FFF; -} [class*="AuthorDetails-selectedTab-"] { - border-bottom: 4px solid var(--accent-color); + border-bottom: 4px solid rgb(var(--accent-color)); } [class*="AuthorDetails-metadataMessage-"] { @@ -1063,7 +1198,7 @@ input[type=password] { } [class*="AuthorDetails-metadataMessage-"] [class*="Link-to-"] { - color: var(--accent-color); + color: rgb(var(--accent-color)); } [class*="AuthorDetails-metadataMessage-"] [class*="Link-to-"]:hover { @@ -1073,4 +1208,4 @@ input[type=password] { /*Specific Book Page*/ [class*="BookDetails-tab-"] { color: #FFF; -} +} \ No newline at end of file diff --git a/CSS/themes/readarr/space-gray.css b/CSS/themes/readarr/space-gray.css index 7ebb3b93..40d7b99e 100644 --- a/CSS/themes/readarr/space-gray.css +++ b/CSS/themes/readarr/space-gray.css @@ -13,30 +13,4 @@ /* READARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --calendar-downloading: 122 67 182; - --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; - --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/aquamarine.css b/CSS/themes/requestrr/aquamarine.css index 7a9e30bd..863f4af8 100644 --- a/CSS/themes/requestrr/aquamarine.css +++ b/CSS/themes/requestrr/aquamarine.css @@ -13,12 +13,4 @@ /* REQUESTRR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --text-color: #eee; - --text-color-faded: #ddd; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/requestrr/dark.css b/CSS/themes/requestrr/dark.css index 8e2d74af..45a54198 100644 --- a/CSS/themes/requestrr/dark.css +++ b/CSS/themes/requestrr/dark.css @@ -13,12 +13,4 @@ /* REQUESTRR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --text-color: #eee; - --text-color-faded: #ddd; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/dracula.css b/CSS/themes/requestrr/dracula.css new file mode 100644 index 00000000..80e2f802 --- /dev/null +++ b/CSS/themes/requestrr/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* RADARR DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/requestrr/hotline.css b/CSS/themes/requestrr/hotline.css index 43c1a305..e48ae166 100644 --- a/CSS/themes/requestrr/hotline.css +++ b/CSS/themes/requestrr/hotline.css @@ -13,12 +13,4 @@ /* REQUESTRR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --text-color: #eee; - --text-color-faded: #ddd; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/organizr-dark.css b/CSS/themes/requestrr/organizr-dark.css index 502710a1..a795171c 100644 --- a/CSS/themes/requestrr/organizr-dark.css +++ b/CSS/themes/requestrr/organizr-dark.css @@ -13,12 +13,4 @@ /* REQUESTRR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --text-color: #96a2b4; - --text-color-faded: #ddd; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/plex.css b/CSS/themes/requestrr/plex.css index d31480f8..d33b764d 100644 --- a/CSS/themes/requestrr/plex.css +++ b/CSS/themes/requestrr/plex.css @@ -13,12 +13,4 @@ /* REQUESTRR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --text-color: #eee; - --text-color-faded: #ddd; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/requestrr-base.css b/CSS/themes/requestrr/requestrr-base.css index ece930bf..be9eb8f4 100644 --- a/CSS/themes/requestrr/requestrr-base.css +++ b/CSS/themes/requestrr/requestrr-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -11,10 +10,12 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); body { - color: var(--text-color); + color: var(--text); background: var(--main-bg-color); + background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; @@ -22,73 +23,133 @@ body { -moz-background-size: auto, cover; -o-background-size: auto, cover; } + .bg-default { - background-color: var(--main-bg-color) !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - color: var(--text-color); + +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6, +.heading-small.text-muted, +.form-control-label, +.text-white { + color: var(--text-hover) !important; } -.text-muted, .form-control-label { - color: var(--text-color-faded) !important; + +.text-muted { + color: var(--text-muted); } -.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { - color: white; + +.navbar-light .navbar-nav .active>.nav-link, +.navbar-light .navbar-nav .nav-link.active, +.navbar-light .navbar-nav .nav-link.show, +.navbar-light .navbar-nav .show>.nav-link { + color: rgb(var(--accent-color)); } + .navbar-light .navbar-nav .nav-link { - color: var(--text-color); + color: var(--text); } -.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { - color: var(--text-color-faded); + +.nav-link.active:hover, +.nav-link.active:focus { background: rgba(255, 255, 255, 0.08); } + +.navbar-light .navbar-nav .nav-link:focus:not(.nav-link.active), +.navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) { + color: var(--text-hover); + background: rgba(255, 255, 255, 0.08); +} + @media (min-width: 768px) { -.navbar-vertical.navbar-expand-md.fixed-left { - left: 0; - border-width: 0 1px 0 0; - background: rgba(0, 0, 0, 0.25) !important; -} + .navbar-vertical.navbar-expand-md.fixed-left { + left: 0; + border-width: 0 1px 0 0; + background: rgba(0, 0, 0, 0.25) !important; + } } + @media (max-width: 767.98px) { -.navbar-collapse.collapsing, .navbar-collapse.show { - background: var(--modal-bg-color); - box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0,0,0,.1); -} + + .navbar-collapse.collapsing, + .navbar-collapse.show { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, .1); + } } + @media (max-width: 767.98px) { -.navbar-nav .nav-link { - color: var(--text-color) !important; + .navbar-nav .nav-link { + color: var(--text) !important; + } } -} -#sidenav-main > div > div > ul.mb-md-3.navbar-nav > li:nth-child(3) > a > i { + +#sidenav-main>div>div>ul.mb-md-3.navbar-nav>li:nth-child(3)>a>i { color: white !important; } -.card-profile-image img, .shadow,.navbar-vertical { + +.card-profile-image img, +.shadow, +.navbar-vertical { box-shadow: none !important; } + .fade { -webkit-transition: opacity .15s linear; transition: opacity .15s linear; background: rgba(0, 0, 0, 0.15) !important; } + .bg-secondary { - background-color: rgba(0, 0, 0, 0)!important; + background-color: rgba(0, 0, 0, 0) !important; } + .bg-gradient-default { background: none !important; } -.card-profile-image img, .shadow { - box-shadow: 0 0 2rem 0 rgba(0,0,0,.15) !important; + +.card-profile-image img, +.shadow { + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .15) !important; } -.bg-white,.footer { + +.bg-white, +.footer { background-color: rgba(0, 0, 0, 0.25) !important; } + .footer { padding-left: 15px; } /* Logo */ -#sidenav-main > div > a::before { +#sidenav-main>div>a::before { content: ""; background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; background-size: 200px; @@ -96,188 +157,242 @@ body { height: 36px; display: block; } + .navbar-brand-img { display: none; } -@media (max-width: 767.98px){ -.navbar-collapse .collapse-brand img { - display: none; + +@media (max-width: 767.98px) { + .navbar-collapse .collapse-brand img { + display: none; + } } -} -@media (max-width: 767.98px){ -#sidenav-main > div > div > div > div > div.collapse-brand.col-6 > a::before { - content: ""; - background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; - background-size: 200px; - width: 200px; - height: 36px; - display: block; + +@media (max-width: 767.98px) { + #sidenav-main>div>div>div>div>div.collapse-brand.col-6>a::before { + content: ""; + background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; + background-size: 200px; + width: 200px; + height: 36px; + display: block; } } /* FORMS */ -.form-control:disabled, .form-control[readonly] { +.form-control:disabled, +.form-control[readonly] { background-color: rgba(255, 255, 255, 0.1); opacity: 1; border: 1px solid transparent; color: gray; } -.form-control-alternative, .has-danger .form-control { + +.form-control-alternative, +.has-danger .form-control { background: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25); } + .form-control-alternative:focus { background: rgba(0, 0, 0, 0.5); } + .form-control:focus { - color: #fff; + color: var(--text-hover); } + .has-success .form-control { background-color: rgba(0, 0, 0, 0.5); } + .form-control { - color: var(--text-color); + color: var(--text); border: 1px solid transparent; } - /* Drop down*/ - .react-dropdown-select.dropdown .react-dropdown-select-item-selected { - background: var(--accent-color) !important; - color: #fff!important; - } - .react-dropdown-select.dropdown div[role=list] span { - background-color: #fff; - color: #000000; - } - .react-dropdown-select.dropdown div[role=list] span:focus, .react-dropdown-select.dropdown div[role=list] span:hover { - color: #000000; - background-color: rgba(0, 0, 0, 0.2); - } - - .react-dropdown-select.dropdown { - color: var(--text-color); - background-color: rgba(0, 0, 0, 0.25); - } -::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: var(--text-color) !important; +/* Drop down*/ +.react-dropdown-select-item.css-148o527-ItemComponent { + background: var(--drop-down-menu-bg) !important; } -::-webkit-input-placeholder:focus { /* Chrome/Opera/Safari */ - color: blue !important; + +.react-dropdown-select.dropdown div[role=list] span { + color: var(--text); } -::-moz-placeholder { /* Firefox 19+ */ - color: var(--text-color) !important; + +.react-dropdown-select.dropdown div[role=list] span:focus, +.react-dropdown-select.dropdown div[role=list] span:hover { + color: var(--text-hover); } -:-ms-input-placeholder { /* IE 10+ */ - color: var(--text-color) !important; + +[class*="-ItemComponent"] { + border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } -:-moz-placeholder { /* Firefox 18- */ - color: var(--text-color) !important; + +[class*="-DropDown"]:not(.react-dropdown-select-dropdown-position-bottom) { + background: rgb(255 255 255 / 0%); + box-shadow: 0 0 10px 1px #000 !important; } +.react-dropdown-select.dropdown { + color: var(--text); + background-color: rgb(0 0 0 / 25%); +} + +.react-dropdown-select.dropdown .react-dropdown-select-item-selected { + background: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + + /* Buttons */ .custom-checkbox .custom-control-input:checked~.custom-control-label:before { - background-color: var(--accent-color); - border-color: var(--accent-color); + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } -.btn-primary, .btn-primary:hover { - color: #fff; + +.custom-checkbox .custom-control-input:checked~.custom-control-label:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='000000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); +} + + +.btn-primary { + color: var(--button-text); background-color: var(--button-color); border-color: var(--button-color); } -.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { - color: #fff; + +.btn-primary:hover { + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } -.btn-default, .btn-default:hover { + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-default, +.btn-default:hover { color: #fff; background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } -.btn-default:not(:disabled):not(.disabled).active, .btn-default:not(:disabled):not(.disabled):active, .show>.btn-default.dropdown-toggle { + +.btn-default:not(:disabled):not(.disabled).active, +.btn-default:not(:disabled):not(.disabled):active, +.show>.btn-default.dropdown-toggle { color: #fff; background-color: rgba(0, 0, 0, 0.26); border-color: transparent; } -.btn-default.disabled, .btn-default:disabled { + +.btn-default.disabled, +.btn-default:disabled { color: #fff; background-color: rgba(255, 255, 255, 0.15); border-color: transparent; opacity: .5; } -.btn-info.disabled, .btn-info:disabled { - color: #fff; + +.btn-info.disabled, +.btn-info:disabled { + color: var(--text-muted); background-color: var(--button-color); border-color: var(--button-color); } -.btn-info, .btn-info:hover { - color: #fff; + +.btn-info, +.btn-info:hover { + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } /* Login page*/ -.bg-gradient-info { - background: var(--main-bg-color) !important; +.header.bg-gradient-info { + background: transparent !important; } + @media (min-width: 1200px) { -.separator-skew { - height: 70px; - display: none; + .separator-skew { + height: 70px; + display: none; + } } -} -#root > div > div.mt--8.pb-5.container > div > div > div { + +#root>div>div.mt--8.pb-5.container>div>div>div { background: rgba(0, 0, 0, 0.25) !important; } -#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(1) > div > input, -#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(2) > div > input, -#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(3) > div > input { + +#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(1)>div>input, +#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(2)>div>input, +#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>div>input { background: rgba(0, 0, 0, .25) !important; border: 10px solid transparent; } + .input-group-text { - color: var(--text-color); + color: var(--text); background-color: rgba(0, 0, 0, 0.25); border: 1px solid transparent !important; } + .input-group-prepend { margin-right: 0px; } -#root > div > div.header.bg-gradient-info.py-7.py-lg-8 > div.separator.separator-bottom.separator-skew.zindex-100 > svg > polygon { - display:none; + +#root>div>div.header.bg-gradient-info.py-7.py-lg-8>div.separator.separator-bottom.separator-skew.zindex-100>svg>polygon { + display: none; } -/* Scrollbar */ - @media only screen and (min-width: 768px) { +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } \ No newline at end of file + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} \ No newline at end of file diff --git a/CSS/themes/requestrr/space-gray.css b/CSS/themes/requestrr/space-gray.css index 64754602..0af00669 100644 --- a/CSS/themes/requestrr/space-gray.css +++ b/CSS/themes/requestrr/space-gray.css @@ -13,12 +13,4 @@ /* RADARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/requestrr/requestrr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --text-color: #eee; - --text-color-faded: #ddd; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/resilio-sync/aquamarine.css b/CSS/themes/resilio-sync/aquamarine.css index 40cfbc56..86d2ab73 100644 --- a/CSS/themes/resilio-sync/aquamarine.css +++ b/CSS/themes/resilio-sync/aquamarine.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC AQUAMARINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/dark.css b/CSS/themes/resilio-sync/dark.css index 0c7ac1a8..18ef57c8 100644 --- a/CSS/themes/resilio-sync/dark.css +++ b/CSS/themes/resilio-sync/dark.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/dracula.css b/CSS/themes/resilio-sync/dracula.css new file mode 100644 index 00000000..a96bcaee --- /dev/null +++ b/CSS/themes/resilio-sync/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* RESILIO-SYNC DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/hotline.css b/CSS/themes/resilio-sync/hotline.css index f4b98841..e4875fcd 100644 --- a/CSS/themes/resilio-sync/hotline.css +++ b/CSS/themes/resilio-sync/hotline.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC HOTLINE THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/organizr-dark.css b/CSS/themes/resilio-sync/organizr-dark.css index 228384ec..d1039d5a 100644 --- a/CSS/themes/resilio-sync/organizr-dark.css +++ b/CSS/themes/resilio-sync/organizr-dark.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC ORGANIZR-DARK THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: #2a90bd; - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text:#96a2b4; - --text-hover: #fff; - --link-color: #2cabe3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/plex.css b/CSS/themes/resilio-sync/plex.css index 044e9110..94764669 100644 --- a/CSS/themes/resilio-sync/plex.css +++ b/CSS/themes/resilio-sync/plex.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC PLEX THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/resilio-sync/resilio-sync-base.css b/CSS/themes/resilio-sync/resilio-sync-base.css new file mode 100644 index 00000000..26205b37 --- /dev/null +++ b/CSS/themes/resilio-sync/resilio-sync-base.css @@ -0,0 +1,804 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); + +body, +.tableScrollContainer, +.settings-tabs-wrapper .settings-tabs-container { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + color: var(--text-hover) !important; +} + +a { + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); +} + +* { + outline: none !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* TEXT */ +body, +#onboarding-dark #page-main, +p, +h1, +h2, +h3, +h4, +h5, +h6, +#choose-product-dialog .choose-title h1, +label.control-label, +.emptyMessage, +.bt-navbar #choose-share-type-menu .container-fluid .menu-item h2, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item h2, +UL.jqueryFileTree A, +.settings-tabs-wrapper .settings-tabs-container, +.bt-checkbox label, +.bt-radio label, +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button, +#licenses-tab #unlicensed-container h1, +#licenses-tab #unlicensed-container .unlicensed-text, +#support-tab #page-menu .support-content>a h5, +#support-tab #page-menu .support-content>button h5, +#support-tab #page-menu .support-content>a p, +.modal-header .transfer-path .labelContainer .secondaryLine, +.transfer-table .transfer-row .nameLabel, +.dropdown-menu li a { + color: var(--text); +} + +/* ACCENTS */ +#choose-product-dialog .product-container .product:hover { + border-color: rgb(var(--accent-color)); +} + +.text-success { + color: #4CAF50; +} + +#historyContainer .table-filter-panel .filter-item.active, +.resizableTableContainer .table-filter-panel .filter-item.active, +.tableContainerWithFilterPanel .table-filter-panel .filter-item.active { + color: rgb(var(--accent-color)) +} + +/* NAVBAR */ +.bt-navbar { + background-color: rgb(0 0 0 / 25%); +} + +.bt-navbar .btn.dropdown-toggle { + background-color: rgb(255 255 255 / 8%); +} + +.bt-navbar .btn.dropdown-toggle:hover { + background-color: rgb(255 255 255 / 16%); +} + +.bt-navbar .btn.btn-tab.active, +.bt-navbar .btn.btn-tab:active { + background-color: rgb(0 0 0 / 25%); + border-bottom-color: rgb(var(--accent-color)); +} + +.bt-navbar .btn:hover { + background-color: rgb(255 255 255 / 8%) !important; +} + +.bt-navbar .btn#try-pro-button { + background-color: rgb(0 0 0 / 50%); + color: var(--button-text); +} + +.bt-navbar .btn#try-pro-button:hover { + background-color: rgb(255 255 255 / 8%); +} + +.bt-navbar .btn.btn-tab { + background: transparent; +} + +/* SIDE MENU */ +/* DROPDOWN MENU */ +.bt-navbar #choose-share-type-menu, +.bt-navbar .choose-dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border: 1px solid rgba(255, 255, 255, .1); + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .2); + box-shadow: 0 6px 12px rgba(0, 0, 0, .2); +} + +.dropdown-menu li a:focus, +.dropdown-menu li a:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +#columns-context .bt-checkbox:hover { + background-color: rgba(255, 255, 255, .1); +} + +.context-menu .bt-checkbox label, +.context-menu .bt-radio label { + color: var(--text-hover); +} + +.sync-level .add-folder-mode .option-text { + color: var(--text-hover); +} + +.sync-level .add-folder-mode .option-description { + color: var(--text); + white-space: normal; +} + +.sync-level .add-folder-mode li.selected a { + background-color: rgb(0 0 0 / 25%); +} + +.sync-level .add-folder-mode li:not(.selected) a:focus, +.sync-level .add-folder-mode li:not(.selected) a:hover { + background-color: rgb(255 255 255 / .08); +} + +.sync-level .add-folder-mode .btn-group { + background-color: transparent !important; +} + +button.selectpicker.btn-default { + border-color: #ccc0 !important; + color: var(--text) !important; + background-color: rgb(0 0 0 / 25%) !important; +} + +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: none !important; + box-shadow: none !important; + border: none; + background: rgb(0 0 0 / 50%) !important; +} + +.animating { + background-color: transparent !important; +} + +/* ICONS */ +.mycon.mycon-folder-rw, +.mycon.mycon-folder-owner, +.mycon.mycon-folder-encrypted, +.mycon.mycon-file, +.mycon.mycon-plus { + background-image: none !important; +} + +.mycon.mycon-folder-rw:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f07b"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-folder-owner:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f65e"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-folder-encrypted:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f023"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-file:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f064"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-plus:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f0c1"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.bt-navbar #choose-share-type-menu .container-fluid .menu-item:focus, +.bt-navbar #choose-share-type-menu .container-fluid .menu-item:hover, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item:focus, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item:hover { + background-color: rgb(255 255 255 / 8%); + +} + +.bt-navbar #choose-share-type-menu .container-fluid .menu-item .menu-item-description:hover, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item .menu-item-description:hover { + margin-left: 6px; + padding-top: 4px; + color: var(--text-hover); +} + +.bt-navbar #choose-share-type-menu .arrow, +.bt-navbar .choose-dropdown-menu .arrow { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.popout-parent { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.context-menu li a:focus, +.context-menu li a:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover) !important; +} + +.context-menu li.has-icon a { + color: var(--text); +} + +.context-notification .context-notification-inner { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +#general-settings #languagedrop { + background-color: rgb(0 0 0 / 25%); + border: transparent; +} + +.popout-anchor.popout-open { + color: var(--text-hover); +} + +/* MODALS */ +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.modal-content, +.modal-body, +.modal-body .fileTreeContainer, +.modal-page { + color: var(--text); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-body .horizontal-separator .horizontal-separator-text { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.modal-filter .btn:hover, +.modal-input .btn:hover { + background-color: var(--button-color); + color: var(--button-text); +} + +#choose-product-dialog .product-container .product { + background-color: rgb(255 255 255 / 0.08); + border: 1px solid transparent; +} + +.modal-header .close:hover { + background: rgb(255 255 255 / 8%); +} + +ul.jqueryFileTree a.active, +ul.jqueryFileTree a:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.modal-filter:before, +.modal-input:before { + background: -owg-linear-gradient(left, transparent, transparent); + background: transparent !important; + background: -moz-linear-gradient(left, transparent, transparent); + background: -o-linear-gradient(left, transparent, transparent); + background: linear-gradient(left, transparent, transparent); +} + +.nav-tabs.nav-sub-tabs, +.nav-tabs.nav-sub-tabs>li { + background-color: transparent; + border-bottom-color: rgb(255 255 255 / .1); +} + +.nav-tabs.nav-sub-tabs>li.active a, +.nav-tabs.nav-sub-tabs>li.active a:focus, +.nav-tabs.nav-sub-tabs>li.active a:hover { + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); + color: var(--button-text-hover); +} + +.nav-tabs.nav-sub-tabs>li>a { + background-color: var(--button-color); + border: 1px solid var(--button-color); + color: var(--button-text); +} + +.nav-tabs.nav-sub-tabs>li>a:hover { + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); + color: var(--button-text-hover); +} + +#file-sharing-content .shareOptionsContainer .shareOption:hover, +#sharing-content .shareOptionsContainer .shareOption:hover, +.sharing-dialog-content .shareOptionsContainer .shareOption:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +#sharing-content .nav-tabs.nav-sub-tabs>li { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +#sharing-content .nav-tabs.nav-sub-tabs>li>a { + border: 1px solid var(--button-color); + color: var(--button-text); + background: var(--button-color); +} + +#sharing-content .nav-tabs.nav-sub-tabs>li.active a, +.nav-tabs.nav-sub-tabs>li.active a:focus, +.nav-tabs.nav-sub-tabs>li.active a:hover { + background: var(--button-color-hover) !important; + border: 1px solid var(--button-color-hover); + color: var(--button-text-hover); +} + +.activity-filter.open, +.main-filter.open, +.modal-filter.open, +.modal-input.open { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-header .transfer-path .labelContainer { + border-left: 1px solid rgb(255 255 255 / .1); +} + +.modal-filter .btn, +.modal-input .btn { + background: transparent; +} + +.modal-filter .btn:hover, +.modal-input .btn:focus, +.modal-filter animating { + background: rgb(255 255 255 / .08) !important; +} + +/* PAGES */ +#archive-onboarding.fixed .tutorial-background, +#onboarding-dark.fixed .tutorial-background, +#syncall-tutorial.fixed .tutorial-background { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +#historyContainer .table-filter-panel, +.resizableTableContainer .table-filter-panel, +.tableContainerWithFilterPanel .table-filter-panel { + background-color: rgb(0 0 0 / 25%); + border-bottom: 1px solid rgb(255 255 255 / 10%); +} + +.section-header { + border-bottom: 1px solid rgb(255 255 255 / .1); +} + +/* FOOTER */ +#sync-core-state { + background-color: rgb(0 0 0 / 50%); + border-top: 1px solid rgb(255 255 255 / 10%); +} + +#statusPanel { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.status-panel-shown #statusPanel { + border-top: 1px solid rgb(255 255 255 / 20%); +} + +#statusPanel .nav-pills a.tab-button .header, +#statusPanel .nav-pills a.tab-button .value, +#statusPanel .nav-pills a.tab-button span[class$=-speed-label] { + color: var(--text); +} + +#statusPanel .nav-pills li { + border-bottom: 1px solid rgb(255 255 255 / .1); +} + +#statusPanel .nav-pills a.tab-button:focus, +#statusPanel .nav-pills a.tab-button:hover, +#statusPanel .nav-pills .active>a { + background-color: rgb(255 255 255 / 8%); +} + +#statusPanel .tab-content { + background-color: transparent; +} + +#statusPanel .chart-wrapper { + background-color: rgb(0 0 0 / 25%); + border-right: 1px solid rgba(255, 255, 255, .1); +} + +.resizableTableContainer .tableHeaderContainer { + border-bottom: 1px solid rgba(255, 255, 255, .1); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +#statusPanel .chart-c3 .c3-tooltip { + background-color: #000; + opacity: .7; + border-radius: 4px; + box-shadow: none; +} + +.c3-grid line { + stroke: var(--text); +} + +.c3 text { + fill: var(--text); +} + + +/* SETTINGS */ +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active { + background-color: rgb(0 0 0 / 25%); + color: rgb(var(--accent-color)); +} + +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) { + background-color: rgb(255 255 255 / 8%); +} + +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) .txt-button { + color: var(--button-text-hover); +} + +#support-tab #page-menu .support-content>a, +#support-tab #page-menu .support-content>button { + background-color: transparent; +} + +#support-tab #page-menu .support-content>a:hover h5, +#support-tab #page-menu .support-content>a:hover p, +#support-tab #page-menu .support-content>button:hover h5, +#support-tab #page-menu .support-content>button:hover p { + color: var(--text-hover); +} + +.settings-tabs-wrapper .settings-tabs-buttons { + border-right: 1px solid rgb(255 255 255 / 10%); + background: rgb(0 0 0 / 25%); +} + +/* IDENTITY */ +#my-devices .my-devices .single-my-device:hover:not(.disabled) { + background-color: rgb(255 255 255 / 8%); +} + +#my-devices .my-devices .link-device-block #device-to-qr .device-link { + color: rgb(var(--accent-color)); +} + +#my-devices .my-devices .link-device-block #device-to-qr:hover:not(:disabled) .device-link-text { + text-decoration: underline; + color: var(--text-hover); +} + +#my-devices .my-devices .info-button:hover { + background-color: var(--button-color-hover); + color: var(--button-text-hover); +} + +/* BUTTONS */ +.btn, +#support-tab #page-feedback-form .back-button { + border-color: var(--button-color); + background: var(--button-color); + color: var(--button-text); + margin-right: 5px; + box-shadow: none; + border: transparent; + border-radius: 2px; +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +#support-tab #page-feedback-form .back-button:hover { + border-color: var(--button-color-hover); + color: var(--button-text-hover); + background-color: var(--button-color-hover); + box-shadow: none !important; +} + +.transfer-table .transfer-row .optionsColumn .options-button { + background-color: transparent; + color: var(--button-text); +} + +.transfer-table .transfer-row .optionsColumn .options-button.active, +.transfer-table .transfer-row .optionsColumn .options-button:hover { + background-color: rgb(255 255 255 / 8%); +} + +/* FORMS */ +.form-control { + color: var(--text) !important; + background-color: rgba(0, 0, 0, .25) !important; + border: 1px solid transparent !important; + box-shadow: none !important; + transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +.form-control:focus { + background-color: rgba(0, 0, 0, .5) !important; + color: var(--text-hover) !important; +} + +/* TABLE */ +#advanced-settings-dialog .verticalScrollContainer tr:active, +#advanced-settings-dialog .verticalScrollContainer tr:focus, +#advanced-settings-dialog .verticalScrollContainer tr:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.table-hover>tbody>tr.active, +.table-hover>tbody>tr:hover:not(.no-hover) { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.transfer-table .transfer-row.active a, +.transfer-table .transfer-row:hover a { + color: var(--text-hover); +} + +.table>thead>tr>th { + vertical-align: bottom; + border-bottom: 1px solid rgb(255 255 255 / 10%); + +} + +.table.table-bordered-header thead tr th { + background-color: #fff; + border-right: 1px solid rgb(255 255 255 / 0.1) !important; +} + +.tableScrollContainer .table thead tr th { + background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat !important; + background-attachment: fixed, fixed !important; + background-position: center center, center center !important; + background-size: auto, cover !important; + -webkit-background-size: auto, cover !important; + -moz-background-size: auto, cover !important; + -o-background-size: auto, cover !important; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/space-gray.css b/CSS/themes/resilio-sync/space-gray.css index bf42f5e6..10371a73 100644 --- a/CSS/themes/resilio-sync/space-gray.css +++ b/CSS/themes/resilio-sync/space-gray.css @@ -12,16 +12,5 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* RESILIO-SYNC SPACE GRAY THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/resilio-sync/resilio-sync-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/aquamarine.css b/CSS/themes/rutorrent/aquamarine.css index 1ac91841..5abb4d22 100644 --- a/CSS/themes/rutorrent/aquamarine.css +++ b/CSS/themes/rutorrent/aquamarine.css @@ -13,10 +13,4 @@ /* RUTORRENT AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #009688; - --default-button-color-hover: #12afa0; - --progress-color: #009688; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/dark.css b/CSS/themes/rutorrent/dark.css index 5a471250..cf0a9f70 100644 --- a/CSS/themes/rutorrent/dark.css +++ b/CSS/themes/rutorrent/dark.css @@ -13,10 +13,4 @@ /* RUTORRENT DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --default-button-color: #3d3d3d; - --default-button-color-hover: #5a5a5a; - --progress-color: #3d3d3d; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/dracula.css b/CSS/themes/rutorrent/dracula.css new file mode 100644 index 00000000..a439a2ae --- /dev/null +++ b/CSS/themes/rutorrent/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* RUTORRENT DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/hotline.css b/CSS/themes/rutorrent/hotline.css index 78209777..d1a25451 100644 --- a/CSS/themes/rutorrent/hotline.css +++ b/CSS/themes/rutorrent/hotline.css @@ -13,10 +13,4 @@ /* RUTORRENT HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #F44336; - --default-button-color-hover: rgb(247, 106, 96); - --progress-color: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/organizr-dark.css b/CSS/themes/rutorrent/organizr-dark.css index 74133c5a..695c37ba 100644 --- a/CSS/themes/rutorrent/organizr-dark.css +++ b/CSS/themes/rutorrent/organizr-dark.css @@ -13,10 +13,4 @@ /* RUTORRENT ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --default-button-color: #2cabe3; - --default-button-color-hover: rgb(44 171 227 / .8); - --progress-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/plex.css b/CSS/themes/rutorrent/plex.css index 127ecb31..d0999c5a 100644 --- a/CSS/themes/rutorrent/plex.css +++ b/CSS/themes/rutorrent/plex.css @@ -13,10 +13,4 @@ /* RUTORRENT PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --progress-color: #cc7b19; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/rutorrent/rutorrent-base.css b/CSS/themes/rutorrent/rutorrent-base.css index 8ad1e5e9..4e3e08c5 100644 --- a/CSS/themes/rutorrent/rutorrent-base.css +++ b/CSS/themes/rutorrent/rutorrent-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -14,33 +13,38 @@ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300); -@font-face -{ - font-family:'Roboto'!important +@font-face { + font-family: 'Roboto' !important } -html,body -{ - font-family:'Roboto' !important; - background: var(--main-bg-color); - color:#fff; - text-shadow:0 -1px 0 #000 +html, +body { + font-family: 'Roboto' !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); + text-shadow: 0 -1px 0 #000 } -div#preload -{ - width:0; - height:0; - display:none; - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/menus.png); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/r_bg.gif); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/asc.gif); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/desc.gif); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_open.gif); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_close.gif); - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) +div#preload { + width: 0; + height: 0; + display: none; + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/menus.png); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/r_bg.gif); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/asc.gif); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/desc.gif); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_open.gif); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_close.gif); + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) } hr { @@ -50,9 +54,15 @@ hr { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -div#cover -{ - background:var(--main-bg-color) +div#cover { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } div#msg { @@ -64,74 +74,82 @@ div#msg { text-shadow: 0 -3px 0 #0000; } -div#sc -{ - border:1px solid #333; - background-color:#181818 +div#sc { + border: 1px solid #333; + background-color: #181818 } -div#sc li.se_act div -{ - background-color:#333; - color:#888 +div#sc li.se_act div { + background-color: #333; + color: #888 } -div#lng -{ - background-color:#181818; - border:1px solid #333 +div#lng { + background-color: #181818; + border: 1px solid #333 } + .rmenuitem { - color: #fff !important; + color: var(--text-hover) !important; } + iframe { - border-width: 0px !important; - border: none !important; + border-width: 0px !important; + border: none !important; } + ul.CMenu { opacity: .98; border: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid transparent; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; padding: 0; - border-radius: 5px; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + border-radius: 5px; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } -ul.CMenu li -{ - background:var(--modal-bg-color); +ul.CMenu li { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -ul.CMenu li.menuitem:first-child -{ - border-top-right-radius:5px; - border-top-left-radius:5px +ul.CMenu li.menuitem:first-child { + border-top-right-radius: 5px; + border-top-left-radius: 5px } -ul.CMenu li.menuitem:last-child -{ - border-bottom-right-radius:5px; - border-top-left-radius:5px +ul.CMenu li.menuitem:last-child { + border-bottom-right-radius: 5px; + border-top-left-radius: 5px } -ul.CMenu li a -{ - color:#fff; - background:transparent; +ul.CMenu li a { + color: var(--text); + background: transparent; } -ul.CMenu li a.dis -{ - color:#fff +ul.CMenu li a.dis { + color: rgb(var(--accent-color)) } -ul.CMenu li a.dis:hover -{ - color:#fff +ul.CMenu li a.dis:hover { + color: var(--text-hover) } ul.CMenu li hr { @@ -144,14 +162,13 @@ ul.CMenu li hr { width: 100%; } -ul.CMenu li a.exp -{ - background: transparent; +ul.CMenu li a.exp { + background: transparent; } -ul.CMenu li a.exp:hover -{ - background:rgba(255, 255, 255, .08);; +ul.CMenu li a.exp:hover { + background: rgba(255, 255, 255, .08); + ; } ul.CMenu li a.sel { @@ -159,524 +176,451 @@ ul.CMenu li a.sel { background: rgba(0, 0, 0, 0.15); } -ul.CMenu li ul li a.sel -{ - color:#178FD1 +ul.CMenu li ul li a.sel { + color: #178FD1 } ul.CMenu li a:hover { background-color: rgba(255, 255, 255, 0.08) !important; - color: #fff; + color: var(--text-hover); text-shadow: 0 -1px 0 #000; } ul.CMenu li:hover ul li a { background-color: transparent; - color: #fff; + color: var(--text-hover); } -ul.CMenu li:hover ul li a:hover -{ - color:#fff; - text-shadow:0 -1px 0 transparent +ul.CMenu li:hover ul li a:hover { + color: var(--text-hover); + text-shadow: 0 -1px 0 transparent } -ul.CMenu li ul li a.dis -{ - color:#fff +ul.CMenu li ul li a.dis { + color: #fff } -ul.CMenu li ul li a.dis:hover -{ - background-color:#181818; - color:#333 +ul.CMenu li ul li a.dis:hover { + background-color: #181818; + color: #333 } -div.stable-body table tbody tr.even:nth-child(2n+1) td -{ - background:rgba(255, 255, 255, 0.08)!important +div.stable-body table tbody tr.even:nth-child(2n+1) td { + background: rgba(255, 255, 255, 0.08) !important } -.stable-body td -{ - border-bottom:1px solid #ff000000!important; +.stable-body td { + border-bottom: 1px solid #ff000000 !important; } -.stable-body tr.odd td -{ - background:#2A2A2A!important +.stable-body tr.odd td { + background: #2A2A2A !important } -#tdetails -{ - overflow:hidden +#tdetails { + overflow: hidden } -#StatusBar -{ - border-top:1px solid #292828!important; - background:#1E1E1E; - margin-top:-2px +#StatusBar { + border-top: 1px solid #292828 !important; + background: #1E1E1E; + margin-top: -2px } -#sel -{ - border:1px dotted #555 +#sel { + border: 1px dotted #555 } -div#t -{ - background-color:rgba(0, 0, 0, 0.25); - background-image:none; - border-bottom:none; - padding:4px 0 2px 0; - height: 40px; +div#t { + background-color: rgba(0, 0, 0, 0.25); + background-image: none; + border-bottom: none; + padding: 4px 0 2px 0; + height: 40px; } -div#t a -{ - margin:4px 5px 0 5px +div#t a { + margin: 4px 5px 0 5px } #mnu_logoff.top-menu-item { - margin-left: 15px; + margin-left: 15px; } -div#t a:hover -{ - background:none +div#t a:hover { + background: none } -div#t div.TB_Separator -{ - border:none; - background:none; - margin:0 5px; - height:40px +div#t div.TB_Separator { + border: none; + background: none; + margin: 0 5px; + height: 40px } -div#t div#add -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat 0 0 +div#t div#add { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat 0 0 } -div#t div#add:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat 0 -24px +div#t div#add:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat 0 -24px } -div#t div#create -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -24px 0 +div#t div#create { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -24px 0 } -div#t div#create:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -24px -24px +div#t div#create:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -24px -24px } -div#t div#remove -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -48px 0 +div#t div#remove { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -48px 0 } -div#t div#remove:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -48px -24px +div#t div#remove:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -48px -24px } -div#t div#start -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -72px 0 +div#t div#start { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -72px 0 } -div#t div#start:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -72px -24px +div#t div#start:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -72px -24px } -div#t div#pause -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -96px 0 +div#t div#pause { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -96px 0 } -div#t div#pause:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -96px -24px +div#t div#pause:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -96px -24px } -div#t div#stop -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -120px 0 +div#t div#stop { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -120px 0 } -div#t div#stop:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -120px -24px +div#t div#stop:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -120px -24px } -div#t div#moveu -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -144px 0 +div#t div#moveu { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -144px 0 } -div#t div#moveu:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -144px -24px +div#t div#moveu:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -144px -24px } -div#t div#moved -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -168px 0 +div#t div#moved { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -168px 0 } -div#t div#moved:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -168px -24px +div#t div#moved:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -168px -24px } -div#t div#search -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -192px 0 +div#t div#search { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -192px 0 } -div#t div#search:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -192px -24px +div#t div#search:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -192px -24px } -div#t div#rss -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -241px 0 +div#t div#rss { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -241px 0 } -div#t div#rss:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -241px -24px +div#t div#rss:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -241px -24px } -div#t div#setting -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -264px 0 +div#t div#setting { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -264px 0 } -div#t div#setting:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -264px -24px +div#t div#setting:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -264px -24px } -div#t div#plugins -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/plugin.png) no-repeat 0 center +div#t div#plugins { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/plugin.png) no-repeat 0 center } -div#t div#plugins:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pluginh.png) no-repeat 0 center +div#t div#plugins:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pluginh.png) no-repeat 0 center } -div#t div#help -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -288px 0 +div#t div#help { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -288px 0 } -div#t div#help:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -288px -24px +div#t div#help:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/toolbar.png) no-repeat -288px -24px } -div#t div#go -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/go.png) no-repeat 0 0 +div#t div#go { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/go.png) no-repeat 0 0 } -div#t div#go:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/goh.png) no-repeat 0 0 +div#t div#go:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/goh.png) no-repeat 0 0 } div select { - -webkit-appearance:none !important; - background:#1f1f1f url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dropdown.png) no-repeat 0 0; + -webkit-appearance: none !important; + background: #1f1f1f url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dropdown.png) no-repeat 0 0; background-position: right; - border: 1px solid #1f1f1f ; + border: 1px solid #1f1f1f; padding-right: 15px !important; } -.stg_con -{ - background-color:transparent +.stg_con { + background-color: transparent } -.stg_con fieldset -{ - border:none; - border-top:1px solid #888; - border-radius:0 +.stg_con fieldset { + border: none; + border-top: 1px solid rgb(var(--accent-color)); + border-radius: 0 } -.stg_con td input -{ - padding:1px 4px +.stg_con td input { + padding: 1px 4px } -#st_ao_h,#st_throttle_h -{ - height:360px !important +#st_ao_h, +#st_throttle_h { + height: 360px !important } -a -{ - color:#fff; - font-family:'Roboto' +a { + color: #fff; + font-family: 'Roboto' } + .flot-text { color: #fff !important; } -.flot-overlay{ - border:none !important; -} -div#stg-header -{ - background:#273238 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-toolbars.gif) no-repeat scroll 0 -72px; - text-shadow:0 -1px 0 #000 + +.flot-overlay { + border: none !important; } -div#CatList -{ - border:none; - background-color:rgba(0, 0, 0, 0.25); - border-right:1px solid transparent; - border-left:none +div#stg-header { + background: #273238 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-toolbars.gif) no-repeat scroll 0 -72px; + text-shadow: 0 -1px 0 #000 } -div#CatList ul li span -{ - color:#D4D6C9 +div#CatList { + border: none; + background-color: rgba(0, 0, 0, 0.25); + border-right: 1px solid transparent; + border-left: none } -div#CatList ul li.sel span -{ - color:#AACF27 +div#CatList ul li span { + color: var(--text) } -div#CatList ul li -{ - border:none; - margin:5px; - font-family:'Roboto' +div#CatList ul li.sel span { + color: #AACF27 } -div#CatList ul li.sel -{ - background-color:transparent; - color:var(--default-button-color); - text-shadow:0 -1px 0 #000; - border:none +div#CatList ul li { + border: none; + margin: 5px; + font-family: 'Roboto' } -#-_-_-all-_-_-,#-_-_-dls-_-_-,#-_-_-com-_-_-,#-_-_-act-_-_-,#-_-_-iac-_-_-,#-_-_-err-_-_- -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) +div#CatList ul li.sel { + background-color: transparent; + color: var(--text-hover); + text-shadow: 0 -1px 0 #000; + border: none } -.catpanel -{ - font-size:12px; - font-family:'Roboto'; - padding:2px 30px; - height:22px; - line-height:25px; +#-_-_-all-_-_-, +#-_-_-dls-_-_-, +#-_-_-com-_-_-, +#-_-_-act-_-_-, +#-_-_-iac-_-_-, +#-_-_-err-_-_- { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) +} + +.catpanel { + font-size: 12px; + font-family: 'Roboto'; + padding: 2px 30px; + height: 22px; + line-height: 25px; background-image: none; - background:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_open.gif) 0 0 no-repeat !important; - background-color:#273238; - font-weight:700; - color:#DCDCDC; - text-shadow:0 -1px 0 #000; - border:none + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pnl_open.gif) 0 0 no-repeat !important; + background-color: #273238; + font-weight: 700; + color: var(--text-hover); + text-shadow: 0 -1px 0 #000; + border: none } -.catpanelcont -{ - margin:15px 2px; - transition:all .3s cubic-bezier(0.68,-0.55,0.27,1.55) 0 +.catpanelcont { + margin: 15px 2px; + transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0 } -#-_-_-all-_-_- -{ - background-position:4px -175px +#-_-_-all-_-_- { + background-position: 4px -175px } -#-_-_-dls-_-_- -{ - background-position:4px 2px +#-_-_-dls-_-_- { + background-position: 4px 2px } -#-_-_-com-_-_- -{ - background-position:4px -15px +#-_-_-com-_-_- { + background-position: 4px -15px } -#-_-_-act-_-_- -{ - background-position:4px -159px +#-_-_-act-_-_- { + background-position: 4px -159px } -#-_-_-iac-_-_- -{ - background-position:4px -31px +#-_-_-iac-_-_- { + background-position: 4px -31px } -#-_-_-err-_-_- -{ - background-position:4px -95px +#-_-_-err-_-_- { + background-position: 4px -95px } -div#CatList ul li.RSS -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); - background-position:4px -207px +div#CatList ul li.RSS { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); + background-position: 4px -207px } -div#CatList ul li.disRSS -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) +div#CatList ul li.disRSS { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) } -.stable-icon -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) +.stable-icon { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) } -.Icon_File -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/file.gif) no-repeat left center +.Icon_File { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/file.gif) no-repeat left center } -.Icon_Dir -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dir.gif) no-repeat left center +.Icon_Dir { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dir.gif) no-repeat left center } -.Icon_Share -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dir.gif) no-repeat left center +.Icon_Share { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dir.gif) no-repeat left center } -div#CatList ul li.sel span -{ - color:var(--default-button-color) +div#CatList ul li.sel span { + color: rgb(var(--accent-color)); } -div#flabel_cont ul li -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); - background-position:4px -352px +div#flabel_cont ul li { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); + background-position: 4px -352px } -div.tab -{ - background:transparent; - font-family:'Roboto' +div.tab { + background: transparent; + font-family: 'Roboto' } -div#lcont -{ - background:rgba(0, 0, 0, 0.25); - font-family:'Roboto' +div#lcont { + background: rgba(0, 0, 0, 0.25); + font-family: 'Roboto' } -div#gcont table td.Header -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 0 -286px; - font-family:'Roboto'; - color:#D4D6C9; - padding-left:17px +div#gcont table td.Header { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 0 -286px; + font-family: 'Roboto'; + color: var(--text-hover); + padding-left: 17px } -div#gcont table tr -{ - background:rgba(0, 0, 0, 0.45); - font-family:'Roboto'; - color:#D4D6C9 +div#gcont table tr { + background: rgba(0, 0, 0, 0.45); + font-family: 'Roboto'; + color: var(--text); } -div#gcont table tr td -{ - background:rgba(0, 0, 0, 0.15); +div#gcont table tr td { + background: rgba(0, 0, 0, 0.15); } -div#gcont table -{ - font-family:'Roboto' +div#gcont table { + font-family: 'Roboto' } -div.graph_tab -{ - color:#FFF; - border-color:transparent; - background-color:rgba(0, 0, 0, 0.25) +div.graph_tab { + color: #FFF; + border-color: transparent; + background-color: rgba(0, 0, 0, 0.25) } -div.table_tab -{ - background-color: rgba(0, 0, 0, 0.45); - font-family:'Roboto' +div.table_tab { + background-color: rgba(0, 0, 0, 0.45); + font-family: 'Roboto' } -div#modalbg -{ - background-color:#181818 +div#modalbg { + background-color: #181818 } -div#List -{ - margin-right:6px; - border:none; +div#List { + margin-right: 6px; + border: none; background-color: rgba(0, 0, 0, 0.25); } -div#FileList,div#TrackerList,div#PeerList,div#Speed -{ - background-color:rgba(0, 0, 0, 0.25); +div#FileList, +div#TrackerList, +div#PeerList, +div#Speed { + background-color: rgba(0, 0, 0, 0.25); } -.dlg-window -{ - background-color:#222; - box-shadow:0 19px 38px rgba(0,0,0,0.60) +.dlg-window { + background-color: #222; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.60) } -* > fieldset -{ +*>fieldset { border: 1px solid rgba(255, 255, 255, 0.08); - border-radius:2px + border-radius: 2px } -a.dlg-close -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center +a.dlg-close { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center } -a.dlg-close:hover -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center +a.dlg-close:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center } -a.dlg-close:link,a.dlg-close:visited -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center +a.dlg-close:link, +a.dlg-close:visited { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/close.png) no-repeat scroll left center } -div.dlg-header -{ - background-color:rgba(0, 0, 0, 0.25); - border-bottom:none; - font-family:'Roboto'; - text-transform:uppercase; - font-weight:700; - font-size:1em +div.dlg-header { + background-color: rgba(0, 0, 0, 0.25); + border-bottom: none; + font-family: 'Roboto'; + text-transform: uppercase; + font-weight: 700; + font-size: 1em } + .tskconsole { font-size: 11px; font-family: monospace; @@ -688,86 +632,80 @@ div.dlg-header width: 580px; cursor: text; } -fieldset -{ - background-color:transparent; - font-family:'Roboto' + +fieldset { + background-color: transparent; + font-family: 'Roboto' } -legend -{ - color:#999; - text-transform:uppercase; - font-weight:500; - font-size:1em +legend { + color: #999; + text-transform: uppercase; + font-weight: 500; + font-size: 1em } -td.disabled,label.disabled,span.disabled,div.disabled -{ - color:#b9b9b9 +td.disabled, +label.disabled, +span.disabled, +div.disabled { + color: #b9b9b9 } -disabled -{ - opacity:50% +disabled { + opacity: 50% } -div#stg .lm -{ - margin:5px 0 5px 5px; - padding:10px 5px 0; - background:none; - border:none +div#stg .lm { + margin: 5px 0 5px 5px; + padding: 10px 5px 0; + background: none; + border: none } -.lm li,.lm li.first,.lm li.last,.lm li div.toggle -{ - background:transparent none repeat scroll 0 0; - text-transform:uppercase; - font-size:.9em; - margin:0 0 3px +.lm li, +.lm li.first, +.lm li.last, +.lm li div.toggle { + background: transparent none repeat scroll 0 0; + text-transform: uppercase; + font-size: .9em; + margin: 0 0 3px } -.lm li a -{ - font-size:1em; - font-weight:400; - color:#dedede; - transition:all .5s +.lm li a { + font-size: 1em; + font-weight: 400; + color: var(--text); + transition: all .5s } -.lm li a:hover -{ - color:#fff; - transition:all .5s +.lm li a:hover { + color: var(--text-hover); + transition: all .5s } -.lm li a.focus -{ - color:#FFF; - background:none +.lm li a.focus { + color: var(--text-hover); + background: none } -input.disabled -{ - background-color:#181818; - color:#333; - border:1px solid #333 +input.disabled { + background-color: #181818; + color: #333; + border: 1px solid #333 } -legend -{ - color:#FFF; +legend { + color: var(--text-hover); } -select.cols -{ - border:1px solid #333 +select.cols { + border: 1px solid #333 } -div#dragmask -{ - border:1px dotted #333 +div#dragmask { + border: 1px dotted #333 } div#tdetails { @@ -779,22 +717,21 @@ div#tdetails { border-top-left-radius: 0px; } -div#tdcont -{ - background:transparent; - border:none; - padding:0 +div#tdcont { + background: transparent; + border: none; + padding: 0 } -div#HDivider -{ - background:rgba(0, 0, 0, 0.45); - cursor:e-resize; - height:0; - margin:0; - padding:0; - width:5px +div#HDivider { + background: rgba(0, 0, 0, 0.45); + cursor: e-resize; + height: 0; + margin: 0; + padding: 0; + width: 5px } + div#RSSList { border: none !important; background-color: rgba(0, 0, 0, 0.25) !important; @@ -804,205 +741,200 @@ div#RSSList { -moz-user-focus: normal; -moz-user-input: enabled; } -div#HDivider:hover,div#VDivider:hover -{ - background:rgba(255, 255, 255, 0.08); + +div#HDivider:hover, +div#VDivider:hover { + background: rgba(255, 255, 255, 0.08); } -div#tcreate textarea#trackers -{ - color:#fff; - border:none!important; - background: rgba(0, 0, 0, 0.25); - border-radius:2px; - cursor:text; +div#tcreate textarea#trackers { + color: #fff; + border: none !important; + background: rgba(0, 0, 0, 0.25); + border-radius: 2px; + cursor: text; } -input[type="text"],input[type="password"],select -{ - color:#fff; - border:none; - background:rgba(0, 0, 0, 0.25) url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x scroll 0 -138px; - border-radius:2px; - outline: none; +input[type="text"], +input[type="password"], +select { + color: #fff; + border: none; + background: rgba(0, 0, 0, 0.25) url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x scroll 0 -138px; + border-radius: 2px; + outline: none; } -input[type="text"][disabled],input[type="password"][disabled],input[type="file"][disabled],select[disabled] -{ - color:#fff; - border:none; - background:rgba(0, 0, 0, 0.08) url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat scroll 0 0!important; - border-radius:2px; - opacity:.2 +input[type="text"][disabled], +input[type="password"][disabled], +input[type="file"][disabled], +select[disabled] { + color: #fff; + border: none; + background: rgba(0, 0, 0, 0.08) url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat scroll 0 0 !important; + border-radius: 2px; + opacity: .2 } -#StatusBar table tr td.pstatus2 -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/green.png) no-repeat scroll 5px center!important +#StatusBar table tr td.pstatus2 { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/green.png) no-repeat scroll 5px center !important } -textarea -{ - border:none; - border-radius:2px +textarea { + border: none; + border-radius: 2px } -#hostcookies,#lookat,#message,#FS_downlink -{ - color:#fff; - border:none!important; - background:rgba(0, 0, 0, 0.25); - border-radius:2px +#hostcookies, +#lookat, +#message, +#FS_downlink { + color: #fff; + border: none !important; + background: rgba(0, 0, 0, 0.25); + border-radius: 2px } -input.Button -{ - background:var(--default-button-color) none repeat scroll 0 0; - border-radius:2px; - border:none; - color:#FFF; - cursor:pointer; - display:inline; - font-weight:700; - text-shadow:none +input.Button { + background: var(--button-color) none repeat scroll 0 0; + border-radius: 2px; + border: none; + color: var(--button-text); + cursor: pointer; + display: inline; + font-weight: 700; + text-shadow: none } -input.Button:hover,input.Button:focus -{ - background:var(--default-button-color-hover) none repeat scroll 0 0; +input.Button:hover, +input.Button:focus { + background: var(--button-color-hover) none repeat scroll 0 0; + color: var(--button-text-hover); } -#mainlayout -{ - max-width:1000px +#mainlayout { + max-width: 1000px } -ul#tabbar -{ - background:rgba(0, 0, 0, 0.45); - border:none; - color:#606060; - height:24px; - text-shadow:none +ul#tabbar { + background: rgba(0, 0, 0, 0.45); + border: none; + color: #606060; + height: 24px; + text-shadow: none } -ul#tabbar li a -{ - background:none; - border:none; - color:#bbbbbb; - cursor:pointer; - font-family:inherit; - line-height:24px; - margin:2px 2px 0; - padding:4px 15px 3px; - font-weight:500; - text-shadow:none; - top:0 +ul#tabbar li a { + background: none; + border: none; + color: var(--text); + cursor: pointer; + font-family: inherit; + line-height: 24px; + margin: 2px 2px 0; + padding: 4px 15px 3px; + font-weight: 500; + text-shadow: none; + top: 0 } -ul#tabbar li a:hover -{ - color:#fff; - text-shadow:none; - background:none +ul#tabbar li a:hover { + color: var(--text-hover); + text-shadow: none; + background: none } -ul#tabbar li.selected a -{ - background:none; - border-bottom:2px solid var(--default-button-color); - color:#eee; - padding:4px 15px 5px; - font-weight:700; - text-shadow:none; - top:0; - transition:all .2s cubic-bezier(.18,.89,.32,1.28) 0 +ul#tabbar li.selected a { + background: none; + border-bottom: 2px solid rgb(var(--accent-color)); + color: rgb(var(--accent-color)); + padding: 4px 15px 5px; + font-weight: 700; + text-shadow: none; + top: 0; + transition: all .2s cubic-bezier(.18, .89, .32, 1.28) 0 } -.tabbar li -{ - margin-left:1px; - margin-right:2px +.tabbar li { + margin-left: 1px; + margin-right: 2px } -.tabbar -{ - background:none; - border:none; - color:#038ba9; - height:21px; - padding:4px; - text-shadow:none +.tabbar { + background: none; + border: none; + color: #038ba9; + height: 21px; + padding: 4px; + text-shadow: none } -.tabbar li a -{ - background:none; - border:none; - color:#606060; - cursor:pointer; - font-family:inherit; - line-height:24px; - margin:-2px 1px 0; - padding:4px 15px 3px; - font-weight:500; - text-shadow:none; - top:0; - transition:all .5s +.tabbar li a { + background: none; + border: none; + color: #606060; + cursor: pointer; + font-family: inherit; + line-height: 24px; + margin: -2px 1px 0; + padding: 4px 15px 3px; + font-weight: 500; + text-shadow: none; + top: 0; + transition: all .5s } -.tabbar li a:hover -{ - color:#fff; - background:none; - border:none +.tabbar li a:hover { + color: #fff; + background: none; + border: none } -.tabbar li.selected a -{ - background:none; - border:none; - border-bottom:2px solid #fff; - color:#ececec; - font-weight:700; - margin:0 2px 0 0; - padding:4px 15px 3px; - text-shadow:none; - top:0 +.tabbar li.selected a { + background: none; + border: none; + border-bottom: 2px solid #fff; + color: #ececec; + font-weight: 700; + margin: 0 2px 0 0; + padding: 4px 15px 3px; + text-shadow: none; + top: 0 } -#fMan_navbut -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/directory.png)!important; - border:1px solid #181818!important +#fMan_navbut { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/directory.png) !important; + border: 1px solid #181818 !important } -#fMan_navbut:hover -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refresh.png)!important +#fMan_navbut:hover { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refresh.png) !important } -#fMan_pathsel -{ - max-width:600px!important +#fMan_pathsel { + max-width: 600px !important } -#meter-disk-value -{ - border-radius:2px; - overflow:hidden +#meter-disk-value { + border-radius: 2px; + overflow: hidden } -div#dlgProps textarea#prop-trackers -{ - background:#222#ff8000; - border:1px solid #333 +div#dlgProps textarea#prop-trackers { + background: #222#ff8000; + border: 1px solid #333 } div.dlg-window { background: var(--modal-bg-color); - color: #fff; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; @@ -1010,45 +942,40 @@ div.dlg-window { border: none; } -#stg_c -{ - font-weight:300!important +#stg_c { + font-weight: 300 !important } -.dlg-header -{ - background-color:#222; - border-bottom:none +.dlg-header { + background-color: #222; + border-bottom: none } -#FS_main div.dlg-header -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/share.png)!important +#FS_main div.dlg-header { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/share.png) !important } -div#yesnoDlg div.dlg-header -{ - background:rgba(0, 0, 0, 0.25); - text-shadow:0 -1px 0 #000 +div#yesnoDlg div.dlg-header { + background: rgba(0, 0, 0, 0.25); + text-shadow: 0 -1px 0 #000 } -div#stg-header -{ - background:rgba(0, 0, 0, 0.25); - text-shadow:0 -1px 0 #000 +div#stg-header { + background: rgba(0, 0, 0, 0.25); + text-shadow: 0 -1px 0 #000; + color: var(--text-hover); } -div#dlgHelp-header,div#dlgHelp div.dlg-header -{ - background:rgba(0, 0, 0, 0.25); - text-shadow:0 -1px 0 #000 +div#dlgHelp-header, +div#dlgHelp div.dlg-header { + background: rgba(0, 0, 0, 0.25); + text-shadow: 0 -1px 0 #000 } -div#tadd -{ - margin:5px; - height:300px!important; - width:450px!important +div#tadd { + margin: 5px; + height: 300px !important; + width: 450px !important } div#tadd-header { @@ -1057,252 +984,228 @@ div#tadd-header { text-shadow: 0 -1px 0 #000; } -#addtorrenturl label:nth-of-type(2),#addtorrenturl br,#addtorrent label:last-of-type,#addtorrent br:last-of-type,#addtorrent br:nth-last-of-type(2) -{ - display:none!important +#addtorrenturl label:nth-of-type(2), +#addtorrenturl br, +#addtorrent label:last-of-type, +#addtorrent br:last-of-type, +#addtorrent br:nth-last-of-type(2) { + display: none !important } -#addtorrent hr:last-of-type -{ - margin-bottom:15px +#addtorrent hr:last-of-type { + margin-bottom: 15px } -#tadd_label,#tadd_label_select -{ - margin:5px 0 5px 25px +#tadd_label, +#tadd_label_select { + margin: 5px 0 5px 25px } -#addtorrent span,#addtorrent label,#tadd_label_select,#tadd_label -{ - clear:both; - float:left +#addtorrent span, +#addtorrent label, +#tadd_label_select, +#tadd_label { + clear: both; + float: left } -#addtorrent span:first-of-type,#addtorrent label:nth-of-type(2) -{ - margin-top:10px +#addtorrent span:first-of-type, +#addtorrent label:nth-of-type(2) { + margin-top: 10px } -#addtorrenturl -{ - margin-top:15px +#addtorrenturl { + margin-top: 15px } -Input.TextboxLarge -{ - border:none +Input.TextboxLarge { + border: none } -div.tab -{ - background-color:rgba(0, 0, 0, 0.25) +div.tab { + background-color: rgba(0, 0, 0, 0.25) } -div#t div#ind -{ - height:34px; - width:34px; - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/ajax-loader.gif) no-repeat 0 center; - margin:2px 6px +div#t div#ind { + height: 34px; + width: 34px; + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/ajax-loader.gif) no-repeat 0 center; + margin: 2px 6px } -tr#rrow td * -{ - margin-top:-2px +tr#rrow td * { + margin-top: -2px } -tr#rrow td a#mnu_go div#go -{ - margin-top:-5px +tr#rrow td a#mnu_go div#go { + margin-top: -5px } -span#loadimg -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/ajax-loader.gif) no-repeat center center +span#loadimg { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/ajax-loader.gif) no-repeat center center } -.meter-value-start-color -{ - background-color:#E05400 +.meter-value-start-color { + background-color: #E05400 } -.meter-value-end-color -{ - background-color:#8FBC00 +.meter-value-end-color { + background-color: #8FBC00 } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } - -input#clear_log,input#add_url,input#add_button -{ - margin-top:2px +::-webkit-scrollbar { + width: 14px; } -div#lcont div.std -{ - background:rgba(0, 0, 0, 0.25); - height:17px; - line-height:17px; - border-bottom:1px solid transparent; +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; } -div#lcont div.std:nth-child(2n+1) -{ - background:rgba(255, 255, 255, 0.08); +::-webkit-scrollbar-track { + background-color: transparent; } -#StatusBar -{ - border-top:1px solid transparent; - background:rgba(0, 0, 0, 0.45); - color:#ccc; - font-family:Roboto +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; } -#StatusBar table tr td -{ - padding-right:5px; - border:none; - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) no-repeat right -208px +input#clear_log, +input#add_url, +input#add_button { + margin-top: 2px } -#StatusBar table tr td td -{ - background:none +div#lcont div.std { + background: rgba(0, 0, 0, 0.25); + height: 17px; + line-height: 17px; + border-bottom: 1px solid transparent; } -#StatusBar table tr td:last-child -{ - border-top:red +div#lcont div.std:nth-child(2n+1) { + background: rgba(255, 255, 255, 0.08); } -#st_up -{ - background:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status.png) no-repeat 6px 2px +#StatusBar { + border-top: 1px solid transparent; + background: rgba(0, 0, 0, 0.45); + color: #ccc; + font-family: Roboto } -#st_down -{ - background:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status.png) no-repeat 6px -18px +#StatusBar table tr td { + padding-right: 5px; + border: none; + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) no-repeat right -208px } -.statuscell -{ - padding-right:5px; - border:none +#StatusBar table tr td td { + background: none } -#stup_speed -{ - color:#AACF27 +#StatusBar table tr td:last-child { + border-top: red } -#stdown_speed -{ - color:#178FD1 +#st_up { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status.png) no-repeat 6px 2px } -#stup_total,#stdown_total -{ - color:#fff +#st_down { + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status.png) no-repeat 6px -18px } -span#ds,span#dl -{ - color:#178FD1 +.statuscell { + padding-right: 5px; + border: none } -span#ra -{ - color:#F70000 +#stup_speed { + color: #AACF27 } -span#us,span#ul -{ - color:#AACF27 +#stdown_speed { + color: #178FD1 } -span.det -{ - color:#fff +#stup_total, +#stdown_total { + color: #fff } -.stable-head table tr td -{ - border-right:1px solid #242424!important; - font-family:Roboto!important +span#ds, +span#dl { + color: #178FD1 } -.Icon_Dir -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); - background-position:0 -272px +span#ra { + color: #F70000 } -.Icon_File -{ - background-image:url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); - background-position:0 -256px +span#us, +span#ul { + color: #AACF27 } -.Icon_Torrent -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/torrent.png) no-repeat scroll left center!important +span.det { + color: #fff } -.Icon_Vid -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/video.png) no-repeat scroll left center!important +.stable-head table tr td { + border-right: 1px solid #242424 !important; + font-family: Roboto !important } -.Icon_Mp3 -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/mp3.png) no-repeat scroll left center!important +.Icon_Dir { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); + background-position: 0 -272px } -.Icon_Img -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/image.png) no-repeat scroll left center!important +.Icon_File { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png); + background-position: 0 -256px } -.Icon_Nfo -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/nfo.png) no-repeat scroll left center!important +.Icon_Torrent { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/torrent.png) no-repeat scroll left center !important } -.Icon_Sfv -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/text.png) no-repeat scroll left center!important +.Icon_Vid { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/video.png) no-repeat scroll left center !important } -.Icon_UpD -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/up.png) no-repeat scroll left center!important +.Icon_Mp3 { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/mp3.png) no-repeat scroll left center !important } -.Icon_Rar,.Icon_Zip -{ - background:transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/archive.zip) no-repeat scroll left center!important +.Icon_Img { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/image.png) no-repeat scroll left center !important +} + +.Icon_Nfo { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/nfo.png) no-repeat scroll left center !important +} + +.Icon_Sfv { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/text.png) no-repeat scroll left center !important +} + +.Icon_UpD { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/up.png) no-repeat scroll left center !important +} + +.Icon_Rar, +.Icon_Zip { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/archive.zip) no-repeat scroll left center !important } @@ -1317,46 +1220,167 @@ span.det src: local('Ubuntu'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v5/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff'); } -.stable { border: 1px solid; border-color: #333333 #181818 #181818 #333333; } -.stable td { padding: 2px; } -.stable-head { color: #dcdcdc; background: rgba(0, 0, 0, 0.45); border: none; text-shadow: 0px 1px 0px #000; font-family: Ubuntu; } -div#tdcont .stable-head { border: none; } -div#tdcont .stable { border: none; } -.stable-head table tr { background: transparent; border: none; } -.stable-head table tr td { border: none; font-family: Ubuntu; height: 18px; line-height: 18px; cursor: pointer; } -.stable-head div.resz { border: 1px solid #FF0000; background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/s.gif) no-repeat scroll left center; } -.stable-body { background: window; text-shadow: 0px 1px 0px #000; color: #CACCCC; } -.stable-body td { border-bottom: 1px solid #333333; } -.stable-body td div { font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; height: 16px !important; } -.stable-body tr.odd td { background: #333333 } -.stable-body tr.even td { background: #191919 } -.stable-body tr { height: 22px; } -.stable-body { background: transparent } -.stable-body tr.selected td{ background: rgba(255, 255, 255, 0.25); color: #fff; text-shadow: 0px -1px 0px #000; } -div.stable-body table tbody tr.even td { background: rgba(0, 0, 0, 0.08); } -div.stable-body table tbody tr.even td:nth-child(2n+1) { color: #ffffff; } -div.stable-body table tbody tr.even:nth-child(2n+1) td { background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -64px; } -.stable-move-header { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/header_move.gif) repeat-x scroll center top; border: 1px solid #0099FF; } +.stable { + border: 1px solid; + border-color: #333333 #181818 #181818 #333333; +} -.stable-move-header { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/header_move.gif) repeat-x scroll center top rgba(128,128,128,0.7); border: 1px solid #0099FF; } -.gecko .stable-move-header { background: rgba(128,128,128,0.7); -moz-opacity: 0.7; } -.ie .stable-move-header { background: rgba(128,128,128,0.7); filter:alpha(opacity=70) } -.webkit .stable-move-header { background: rgba(128,128,128,0.7); } +.stable td { + padding: 2px; +} -.stable-active-header { border-color: threedface !important } -.stable-separator-header { background: #181818; } -.stable-scrollpos { background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -37px; height: 17px; line-height: 17px; border-bottom: 1px solid #333333; } -.stable-scrollpos:nth-child(2n+1) { background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -64px; } +.stable-head { + color: var(--text-hover); + background: rgba(0, 0, 0, 0.45); + border: none; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0); + font-family: Ubuntu; +} + +div#tdcont .stable-head { + border: none; +} + +div#tdcont .stable { + border: none; +} + +.stable-head table tr { + background: transparent; + border: none; +} + +.stable-head table tr td { + border: none; + font-family: Ubuntu; + height: 18px; + line-height: 18px; + cursor: pointer; +} + +.stable-head div.resz { + border: 1px solid #FF0000; + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/s.gif) no-repeat scroll left center; +} + +.stable-body { + background: window; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0); + color: var(--text); +} + +.stable-body td { + border-bottom: 1px solid #333333; +} + +.stable-body td div { + font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif; + height: 16px !important; +} + +.stable-body tr.odd td { + background: #333333 +} + +.stable-body tr.even td { + background: #191919 +} + +.stable-body tr { + height: 22px; +} + +.stable-body { + background: transparent +} + +.stable-body tr.selected td { + background: rgba(255, 255, 255, 0.25); + color: var(--text-hover); + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0); +} + +div.stable-body table tbody tr.even td { + background: rgba(0, 0, 0, 0.08); +} + +div.stable-body table tbody tr.even td:nth-child(2n+1) { + color: var(--text); +} + +div.stable-body table tbody tr.even:nth-child(2n+1) td { + background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -64px; +} + +.stable-move-header { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/header_move.gif) repeat-x scroll center top; + border: 1px solid #0099FF; +} + +.stable-move-header { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/header_move.gif) repeat-x scroll center top rgba(128, 128, 128, 0.7); + border: 1px solid #0099FF; +} + +.gecko .stable-move-header { + background: rgba(128, 128, 128, 0.7); + -moz-opacity: 0.7; +} + +.ie .stable-move-header { + background: rgba(128, 128, 128, 0.7); + filter: alpha(opacity=70) +} + +.webkit .stable-move-header { + background: rgba(128, 128, 128, 0.7); +} + +.stable-active-header { + border-color: threedface !important +} + +.stable-separator-header { + background: #181818; +} + +.stable-scrollpos { + background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -37px; + height: 17px; + line-height: 17px; + border-bottom: 1px solid #333333; +} + +.stable-scrollpos:nth-child(2n+1) { + background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -64px; +} .meter-value { float: left; border: 1px inset transparent !important; border-bottom: none !important; - background: var(--progress-color) !important; + background: rgb(var(--accent-color)) !important; } -.stable-body tr.selected span.meter-value { color: #fff; } -.meter-text { line-height: 16px; position: relative; text-align: left; float: left; width: 0px; height: 0px; overflow: visible; left: 40%; font-size: 11px; font-family: Ubuntu; z-index: 1; text-shadow: 0px 0px 2px #000; color: #fff; } +.stable-body tr.selected span.meter-value { + color: #fff; +} + +.meter-text { + line-height: 16px; + position: relative; + text-align: left; + float: left; + width: 0px; + height: 0px; + overflow: visible; + left: 40%; + font-size: 11px; + font-family: Ubuntu; + z-index: 1; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0); + color: var(--label-text-color); +} @@ -1368,127 +1392,351 @@ div.stable-body table tbody tr.even:nth-child(2n+1) td { background: #181818 url src: local('Ubuntu'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v5/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff'); } -.tskconsole, .exconsole, .console, .starterConsole { background: #333333 } +.tskconsole, +.exconsole, +.console, +.starterConsole { + background: #333333 +} + #tsk_btns input.Button { - margin: 0px 3px - } - - #tsk_btns .scplay { - display:none - } + margin: 0px 3px +} -.cCell { color: black } -#meter-disk-value, #qmeter-disk-value, #qmeter-band-value { float: left; border: 1px inset #1b1b1b; border-bottom: none; background: #96CE00 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -138px; } -#meter-disk-text, #qmeter-disk-text, #meter-band-text { color: #fff; text-shadow: 0px 0px 2px #000; position: relative; text-align: left; float: left; width: 0px; height: 0px; overflow: visible; left: 40%; font-size: 11px; font-family: Ubuntu; z-index: 1; } -#meter-disk-holder, #qmeter-disk-holder, #meter-band-holder { width: 100px; height: 16px; line-height: 16px; border-right: none; padding-left: 25px; margin-left: 0px; background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 3px -336px; } +#tsk_btns .scplay { + display: none +} + +.cCell { + color: black +} + +#meter-disk-value, +#qmeter-disk-value, +#qmeter-band-value { + float: left; + border: 1px inset #1b1b1b; + border-bottom: none; + background: #96CE00 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/headers.png) repeat-x 0px -138px; +} + +#meter-disk-text, +#qmeter-disk-text, +#meter-band-text { + color: #fff; + text-shadow: 0px 0px 2px #000; + position: relative; + text-align: left; + float: left; + width: 0px; + height: 0px; + overflow: visible; + left: 40%; + font-size: 11px; + font-family: Ubuntu; + z-index: 1; +} + +#meter-disk-holder, +#qmeter-disk-holder, +#meter-band-holder { + width: 100px; + height: 16px; + line-height: 16px; + border-right: none; + padding-left: 25px; + margin-left: 0px; + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 3px -336px; +} + +#meter-cpu-text { + position: absolute; + left: 65px; + top: 0px; + color: #fff; + text-shadow: 0px 0px 2px #000; + font-size: 11px; + font-family: Ubuntu; +} + +#meter-cpu-holder { + width: 100px; + height: 16px; + line-height: 16px; + border-right: none; + margin-left: 0px; + padding-left: 25px; + background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 3px -320px; +} -#meter-cpu-text { position: absolute; left: 65px; top: 0px; color: #fff; text-shadow: 0px 0px 2px #000; font-size: 11px; font-family: Ubuntu; } -#meter-cpu-holder { width: 100px; height: 16px; line-height: 16px; border-right: none; margin-left: 0px; padding-left: 25px; background: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/status_icons.png) no-repeat 3px -320px; } /* #meter-cpu-td {}*/ -div.graph_tab { color: #FFF; border-color: transparent; } -div#tcreate div.dlg-header { background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid transparent; text-shadow: 0px -1px 0px #000; background-image: none !important; } -div#dlgAddRSS { background-color: #222222; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid transparent; } -div#dlgAddRSS-header, div#dlgAddRSS div.dlg-header { background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid transparent; text-shadow: 0px -1px 0px #000; background-image: none !important; } +div.graph_tab { + color: #FFF; + border-color: transparent; +} + +div#tcreate div.dlg-header { + background: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid transparent; + text-shadow: 0px -1px 0px #000; + background-image: none !important; +} + +div#dlgAddRSS { + background-color: #222222; + border-top: 1px solid transparent; + border-right: 1px solid transparent; + border-left: 1px solid transparent; + border-bottom: 1px solid transparent; +} + +div#dlgAddRSS-header, +div#dlgAddRSS div.dlg-header { + background: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid transparent; + text-shadow: 0px -1px 0px #000; + background-image: none !important; +} -.lf li input.TextboxFocus { background-color: transparent; color: #009DDD } +.lf li input.TextboxFocus { + background-color: transparent; + color: #009DDD +} -.cCell { color:#333; } +.cCell { + color: #333; +} -.Cell0 { background-color: #FFFDF0; border: 1px dotted #888888; } +.Cell0 { + background-color: #FFFDF0; + border: 1px dotted #888888; +} -.Cell1 { background-color: #7EB400; } +.Cell1 { + background-color: #7EB400; +} -.Cell2 { background-color: #75A602; } +.Cell2 { + background-color: #75A602; +} -.Cell3 { background-color: #6D9A02; } +.Cell3 { + background-color: #6D9A02; +} -.Cell4 { background-color: #628C02; } +.Cell4 { + background-color: #628C02; +} -.Cell5 { background-color: #5B8101; } +.Cell5 { + background-color: #5B8101; +} -.Cell6 { background-color: #527501; } +.Cell6 { + background-color: #527501; +} -.Cell7 { background-color: #4A6801; } +.Cell7 { + background-color: #4A6801; +} -.Cell8 { background-color: #435F01; } +.Cell8 { + background-color: #435F01; +} -.Cell9 { background-color: #3B5401; } +.Cell9 { + background-color: #3B5401; +} -.CellA { background-color: #C1C3C3; } +.CellA { + background-color: #C1C3C3; +} -.CellB { background-color: #999A9A; } +.CellB { + background-color: #999A9A; +} -.CellC { background-color: #767776; } +.CellC { + background-color: #767776; +} -.CellD { background-color: #6B6C6B; } +.CellD { + background-color: #6B6C6B; +} -.CellE { background-color: #60605E; } +.CellE { + background-color: #60605E; +} -.CellF { background-color: #000; color:#fff; } +.CellF { + background-color: #000; + color: #fff; +} -#tCellNotSupported { text-align: center; } +#tCellNotSupported { + text-align: center; +} -#tRowNotSupported { vertical-align: middle; color: red; } +#tRowNotSupported { + vertical-align: middle; + color: red; +} -div#dlgEditRules-header,#dlgEditRatioRules-header,div#dlgEditRules div.dlg-header { background:#181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-toolbars.gif) no-repeat 0 -72px !important; border-bottom: 1px solid #333333; text-shadow: 0px -1px 0px #000; } -div#dlgEditRules,div#dlgEditRatioRules { width:600px; } +div#dlgEditRules-header, +#dlgEditRatioRules-header, +div#dlgEditRules div.dlg-header { + background: #181818 url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-toolbars.gif) no-repeat 0 -72px !important; + border-bottom: 1px solid #333333; + text-shadow: 0px -1px 0px #000; +} -.lfc_rru, .lfc_rur { width:250px;} -.lf_rru, .lf_rur { border:none; border-radius:2px; background-color:#2D2D2D;} +div#dlgEditRules, +div#dlgEditRatioRules { + width: 600px; +} -#exratio_buttons1 input.Button {margin:0px 3px;} +.lfc_rru, +.lfc_rur { + width: 250px; +} -#autodl-tb { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/autodll-irc1.png) no-repeat center; } -#autodl-tb:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/autodll-irc2.png) no-repeat center; } -#autodl-multiselect-header { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-autodl-irc.gif"); } +.lf_rru, +.lf_rur { + border: none; + border-radius: 2px; + background-color: #2D2D2D; +} -.shieven { background: #191919; } -.shiodd { background: #333333; } +#exratio_buttons1 input.Button { + margin: 0px 3px; +} -div#webuiUpdateToggle.pause { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pauseui.png) no-repeat; } -div#webuiUpdateToggle.pause:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pauseuih.png) no-repeat; } +#autodl-tb { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/autodll-irc1.png) no-repeat center; +} -div#webuiUpdateToggle.resume { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/playui.png) no-repeat; } -div#webuiUpdateToggle.resume:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/playuih.png) no-repeat; } +#autodl-tb:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/autodll-irc2.png) no-repeat center; +} -div#webuiRefresh { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refreshui.png) no-repeat; } -div#webuiRefresh:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refreshuih.png) no-repeat; } +#autodl-multiselect-header { + background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/dlg-autodl-irc.gif"); +} -div#linkproxy { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/proxy.png) no-repeat; } -div#linkproxy:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/proxyh.png) no-repeat; } +.shieven { + background: #191919; +} -div#linklogs { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/linklogs.png) no-repeat; } -div#linklogs:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/linklogsh.png) no-repeat; } +.shiodd { + background: #333333; +} -div#linkseedboxmanager { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/seedboxmanager.png) no-repeat; } -div#linkseedboxmanager:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/seedboxmanagerh.png) no-repeat; } +div#webuiUpdateToggle.pause { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pauseui.png) no-repeat; +} -div#plugin { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/plugin.png) no-repeat; } -div#plugin:hover { background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pluginh.png) no-repeat; } +div#webuiUpdateToggle.pause:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pauseuih.png) no-repeat; +} -#maillayout #letterform table tr td { background: #181818 } -#maillayout #replyform table tr td { background: #181818 } +div#webuiUpdateToggle.resume { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/playui.png) no-repeat; +} -div#chat { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat.png); } -div#chat:hover { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat3.png); } -div#tchat div.dlg-header { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat2.png); } +div#webuiUpdateToggle.resume:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/playuih.png) no-repeat; +} -#userlist,#chatselect,#chatarea,#chatselect option -{ - border:none !important; - background-color:#6F6F6F !important; - border-radius:2px !important; - color:#fff !important - } +div#webuiRefresh { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refreshui.png) no-repeat; +} -div#logoff { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff.png); } -div#logoff:hover { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff3.png); } -div#logoffDlg div.dlg-header { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff2.png); } +div#webuiRefresh:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/refreshuih.png) no-repeat; +} -.noty_alert, .noty_success { color: #000000; text-shadow: 0 -1px 0 #ffffff } +div#linkproxy { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/proxy.png) no-repeat; +} + +div#linkproxy:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/proxyh.png) no-repeat; +} + +div#linklogs { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/linklogs.png) no-repeat; +} + +div#linklogs:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/linklogsh.png) no-repeat; +} + +div#linkseedboxmanager { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/seedboxmanager.png) no-repeat; +} + +div#linkseedboxmanager:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/seedboxmanagerh.png) no-repeat; +} + +div#plugin { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/plugin.png) no-repeat; +} + +div#plugin:hover { + background: transparent url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/pluginh.png) no-repeat; +} + +#maillayout #letterform table tr td { + background: #181818 +} + +#maillayout #replyform table tr td { + background: #181818 +} + +div#chat { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat.png); +} + +div#chat:hover { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat3.png); +} + +div#tchat div.dlg-header { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/chat2.png); +} + +#userlist, +#chatselect, +#chatarea, +#chatselect option { + border: none !important; + background-color: #6F6F6F !important; + border-radius: 2px !important; + color: #fff !important +} + +div#logoff { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff.png); +} + +div#logoff:hover { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff3.png); +} + +div#logoffDlg div.dlg-header { + background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/rutorrent/logoff2.png); +} + +.noty_alert, +.noty_success { + color: #000000; + text-shadow: 0 -1px 0 #ffffff +} .retrackers { width: 100%; @@ -1503,19 +1751,22 @@ div#logoffDlg div.dlg-header { background-image: url(https://htpc.deathbybandaid } -#dlgEditRatioRules .rf_rru, #dlgEditRules .rf_rur { +#dlgEditRatioRules .rf_rru, +#dlgEditRules .rf_rur { background-color: transparent; } -#dlgEditRatioRules .lf_rru li input.TextboxFocus, #dlgEditRules .lf_rur li input.TextboxFocus { - background-color: rgb(255 255 255 / 25%); - color: #FFF; +#dlgEditRatioRules .lf_rru li input.TextboxFocus, +#dlgEditRules .lf_rur li input.TextboxFocus { + background-color: rgb(255 255 255 / 25%); + color: #FFF; } - #dlgEditRatioRules .lf_rru li input.TextboxNormal, #dlgEditRules .lf_rur li input.TextboxNormal { - background-color: rgb(255 255 255 / .08) !important; - color: #FFF; +#dlgEditRatioRules .lf_rru li input.TextboxNormal, +#dlgEditRules .lf_rur li input.TextboxNormal { + background-color: rgb(255 255 255 / .08) !important; + color: #FFF; } .autodl-listbox { @@ -1526,6 +1777,9 @@ div#logoffDlg div.dlg-header { background-image: url(https://htpc.deathbybandaid #autodl-filters { width: 800px !important; } -div#dlgEditRules-header, #dlgEditRatioRules-header, div#dlgEditRules div.dlg-header { + +div#dlgEditRules-header, +#dlgEditRatioRules-header, +div#dlgEditRules div.dlg-header { background: rgba(0, 0, 0, 0.25) !important; } \ No newline at end of file diff --git a/CSS/themes/rutorrent/space-gray.css b/CSS/themes/rutorrent/space-gray.css index 7b13a413..0af1e750 100644 --- a/CSS/themes/rutorrent/space-gray.css +++ b/CSS/themes/rutorrent/space-gray.css @@ -13,10 +13,4 @@ /* RUTORRENT SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/rutorrent/rutorrent-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --progress-color: #607D8B; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/sabnzbd/aquamarine.css b/CSS/themes/sabnzbd/aquamarine.css index a75597e3..fc8a93c2 100644 --- a/CSS/themes/sabnzbd/aquamarine.css +++ b/CSS/themes/sabnzbd/aquamarine.css @@ -13,13 +13,4 @@ /* SABNZBD AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --settings-accent-color: #12afa0; - --nav-button-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: hsla(0,0%,100%,.25); - --default-button-color-hover: hsla(0,0%,100%,.3); - --default-button-color-active: hsla(0,0%,100%,.3); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/dark.css b/CSS/themes/sabnzbd/dark.css index 3a180bd5..fe44701a 100644 --- a/CSS/themes/sabnzbd/dark.css +++ b/CSS/themes/sabnzbd/dark.css @@ -13,12 +13,4 @@ /* SABNZBD DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --settings-accent-color: #f9be03; - --nav-button-color: #cc7b19; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --default-button-color-active: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/dracula.css b/CSS/themes/sabnzbd/dracula.css new file mode 100644 index 00000000..94f811d1 --- /dev/null +++ b/CSS/themes/sabnzbd/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* SABNZBD DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/hotline.css b/CSS/themes/sabnzbd/hotline.css index 74410f21..d80a8832 100644 --- a/CSS/themes/sabnzbd/hotline.css +++ b/CSS/themes/sabnzbd/hotline.css @@ -13,13 +13,4 @@ /* SABNZBD HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --settings-accent-color: #FFEB3B; - --nav-button-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: hsla(0,0%,100%,.25); - --default-button-color-hover: hsla(0,0%,100%,.3); - --default-button-color-active: hsla(0,0%,100%,.3); -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/organizr-dark.css b/CSS/themes/sabnzbd/organizr-dark.css index 6afebf96..e338e6ae 100644 --- a/CSS/themes/sabnzbd/organizr-dark.css +++ b/CSS/themes/sabnzbd/organizr-dark.css @@ -13,12 +13,4 @@ /* SABNZBD ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --settings-accent-color: #2cabe3; - --nav-button-color: #2cabe3; - --default-button-color: #2cabe3; - --default-button-color-hover: rgb(44 171 227 / .8); - --default-button-color-active: rgb(44 171 227 / .8); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/plex.css b/CSS/themes/sabnzbd/plex.css index ceb29005..e9ee43d1 100644 --- a/CSS/themes/sabnzbd/plex.css +++ b/CSS/themes/sabnzbd/plex.css @@ -13,13 +13,4 @@ /* SABNZBD PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --settings-accent-color: #f9be03; - --nav-button-color: #cc7b19; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --default-button-color-active: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/sabnzbd/sabnzbd-base.css b/CSS/themes/sabnzbd/sabnzbd-base.css index 81f0e9b7..cb76438e 100644 --- a/CSS/themes/sabnzbd/sabnzbd-base.css +++ b/CSS/themes/sabnzbd/sabnzbd-base.css @@ -9,6 +9,8 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); + body { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; @@ -19,10 +21,55 @@ body { -moz-background-size: auto, cover; -o-background-size: auto, cover; background-color: transparent; - color: hsla(0, 0%, 100%, .7) !important; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif !important; font-size: 1.4em !important; - color: white; + color: var(--text); +} + +* { + outline: none !important; +} + +h1, +h2, +h3, +h4, +h5, +h6, +label:not(.btn), +legend { + color: var(--text-hover) !important; +} + +p { + color: var(--text); +} + +a { + color: var(--link-color); +} + +.speedlimit-dropdown.dropdown>div>div>a { + color: var(--button-text); +} + +#navbar-collapse>ul>li.speedlimit-dropdown.dropdown>div>div:hover a.hover-button { + color: var(--button-text-hover); + opacity: 1; +} + +a:active, +a:hover, +a:focus { + color: var(--link-color-hover); +} + +#modal-options .modal-header a { + color: var(--link-color) !important; +} + +#modal-options .modal-header a:hover { + color: var(--link-color-hover) !important; } /* Scrollbar */ @@ -36,7 +83,14 @@ body { body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -65,16 +119,49 @@ body { } /* navbar */ +.nav-tabs, +hr { + border-bottom: 1px solid rgb(var(--accent-color)); +} + +#modal-options #options-status hr { + border-top: 1px solid rgb(var(--accent-color)); +} + .navbar-inverse { background-color: rgba(0, 0, 0, .25); border-color: transparent !important; } -.navbar-btn { - background: var(--nav-button-color) !important; - border-color: transparent !important; +.navbar-nav>li>a { + color: rgb(var(--accent-color)) !important; + opacity: 1; } +.navbar-nav>li>a:hover, +.main-menu-link:hover a { + opacity: 1; + color: var(--accent-color-hover) !important; +} + +.main-menu-link .icon-bar { + display: block; + width: 16px; + height: 3px; + border-radius: 1px !important; + background-color: var(--link-color); + margin-top: 3px; +} + +.main-menu-link:hover .icon-bar { + background-color: var(--link-color-hover); +} + +/* .navbar-btn { + background: var(--button-color) !important; + border-color: transparent !important; +} */ + .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { @@ -83,11 +170,11 @@ body { .ui-slider-horizontal, .ui-slider-range-min { - background: var(--settings-accent-color) !important; + background: rgb(var(--accent-color)) !important; } .ui-slider .ui-slider-handle { - background-color: var(--settings-accent-color); + background-color: rgb(var(--accent-color)); border: 1px solid black; } @@ -96,79 +183,111 @@ body { border: none; } -.dropdown-menu { - background: var(--modal-bg-color); +.dropdown-menu, +#feedback-slider { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .dropdown-menu>li>a { - color: #fff; + color: var(--text-hover); } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { - color: #ffffff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.08); } .dropdown-header { - color: #fff; + color: var(--text-hover); } .menu-options .form-control { - background: var(--modal-bg-color); - background-color: rgb(25, 26, 28); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .main-notification-box { - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.form-control:focus { - border-color: #ffffff; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 255, 255, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(255, 255, 255, 0.6); +.main-filedrop.in, +.main-restarting.in { + color: var(--text-hover); } + .caret { border-top-color: white !important; } svg.peity polygon { - fill: var(--nav-button-color) !important; + fill: var(--button-color) !important; } svg.peity polyline { - stroke: var(--nav-button-color) !important; + stroke: var(--button-color) !important; +} + +.rss-icon-svg { + fill: var(--button-color); + border-radius: 3px !important; } /* BUTTONS */ +.input-group-addon { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); +} + .form-signin .btn { - background: var(--default-button-color) !important; + background: var(--button-color) !important; outline: none !important; } .text-center a { - color: #ffffff; + color: var(--text-hover); } .btn-default { - color: #fff; - background: var(--default-button-color); - border-color: #00000000 !important; + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); outline: none !important; } .btn-default:focus, .btn-default.focus { - color: #fff; - background: var(--default-button-color-hover); - border-color: #00000000 !important; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-default:hover { - color: #fff; - background: var(--default-button-color-hover); - border-color: #00000000 !important; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-default:active:hover, @@ -180,17 +299,17 @@ svg.peity polyline { .btn-default:active.focus, .btn-default.active.focus, .open>.dropdown-toggle.btn-default.focus { - color: #fff; - background: var(--default-button-color-active); - border-color: #00000000 !important; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { - color: #fff; - background: var(--default-button-color-active); - border-color: #00000000 !important; + color: var(--button-text-hover) !important; + background: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; } .btn-group>.btn:hover, @@ -213,34 +332,34 @@ svg.peity polyline { .btn-default:active.focus, .btn-default.active.focus, .open>.dropdown-toggle.btn-default.focus { - color: #fff !important; - background-color: var(--default-button-color-active); - border-color: #00000000 !important; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { - color: #fff; - background-color: var(--default-button-color-active) !important; - border-color: #00000000 !important; + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; } /* buttons settings */ .btn-default.sabnzbd_restart { - color: #fff; + color: var(--button-text); background-color: #a94442; border-color: transparent; } .btn-default.sabnzbd_restart:hover { - color: #fff; + color: var(--button-text-hover); background-color: #d93935; border-color: transparent; } .btn-default.saveButton { - color: #fff; + color: var(--button-text); background-color: #3c763d; border-color: transparent; } @@ -255,20 +374,20 @@ svg.peity polyline { /* buttons categories */ .btn-default.delCat { - color: #fff; + color: var(--button-text); background-color: #a94442; border-color: #2d2c2c; } .btn-default.delCat:hover { - color: #fff; + color: var(--button-text-hover); background-color: #d93935; border-color: transparent; } .btn-default.fileBrowser { - color: #fff; - background-color: var(--default-button-color); + color: var(--button-text); + background-color: var(--button-color); border-color: transparent; } @@ -276,20 +395,20 @@ svg.peity polyline { .btn-default.fileBrowser:focus, .btn-default.fileBrowser:active { color: #fff !important; - background-color: var(--default-button-color-hover) !important; + background-color: var(--button-color-hover) !important; border-color: transparent !important; } /* Button Switches*/ .btn-default.restoreDefaults { - color: #fff; + color: var(--button-text); background-color: #a94442; border-color: transparent; } .btn-default.restoreDefaults:hover, .btn-default.restoreDefaults:focus { - color: #fff; + color: var(--button-text-hover); background-color: #d93935; border-color: transparent; } @@ -309,20 +428,20 @@ svg.peity polyline { .btn-default.patternKey { color: #fff !important; - background-color: var(--default-button-color); + background-color: var(--button-color); border-color: transparent; } .btn-default.patternKey:hover { color: #fff !important; - background-color: var(--default-button-color-hover); + background-color: var(--button-color-hover); border-color: transparent; } input[type="button"], input[type="submit"] { color: #fff !important; - background: var(--default-button-color); + background: var(--button-color); border: 1px solid #00000000 } @@ -333,14 +452,14 @@ input[type="submit"]:active, input[type="button"]:focus, input[type="submit"]:focus { color: #fff !important; - background-color: var(--default-button-color-hover) !important; + background-color: var(--button-color-hover) !important; border: 1px solid #00000000 } /* file button */ .btn-default.btn-file { - color: #fff; - background-color: var(--default-button-color); + color: var(--text-hover); + background-color: var(--button-color); border-color: transparent; } @@ -348,20 +467,18 @@ input[type="submit"]:focus { .btn-default.btn-file:active, .btn-default.btn-file:focus { color: #fff !important; - background-color: var(--default-button-color-hover) !important; + background-color: var(--button-color-hover) !important; border-color: transparent !important; } /* History */ -.caret { - border-top-color: white !important; + +.queue-table .row-extra-text, .history-table .row-extra-text { + color: var(--text-muted); } -a, -a:active, -a:hover, -a:focus { - color: white; +.caret { + border-top-color: white !important; } .table-striped>tbody>tr:nth-of-type(odd) { @@ -393,7 +510,8 @@ table:hover { } .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.07) !important + background-color: rgba(255, 255, 255, 0.07) !important; + color: var(--text-hover); } tbody>tr:last-child td { @@ -409,7 +527,8 @@ tr td.row-extra-text, .history-table tr td.status, .history-table tr td.history-completedon, .history-table tr td.row-extra-text { - color: #fff; + color: var(--text); + border-top: none !important; } .table-messages .table-messages-remove { @@ -417,6 +536,10 @@ tr td.row-extra-text, background: rgba(255, 255, 255, 0.25); } +.progress .progress-bar .fileDetails { + color: var(--button-text); +} + .progress { background-color: transparent !important; box-shadow: none !important; @@ -433,7 +556,7 @@ tr td.row-extra-text, .progress-bar-info, .progress-bar { - background-color: var(--nav-button-color) !important; + background-color: var(--button-color) !important; } .glyphicon-compressed:before { @@ -455,27 +578,45 @@ tr td.row-extra-text, } #history-options .hover-button { - color: white; + color: rgb(var(--accent-color)); +} + +#history-tab .table>tbody>tr:nth-of-type(2n+1), +.table-striped>tbody>tr:nth-of-type(2n+1) { + background-color: rgba(255, 255, 255, 0.05); } .pagination>li>a, .pagination>li>span, .pagination>li>span:hover { - color: white; + color: var(--button-text); + background-color: var(--button-color); + border: 1px solid var(--button-color); } .pagination>li>a, .pagination>li>span { - background-color: rgba(0, 0, 0, 0.25) !important; - border: none !important; + color: var(--button-text); + background-color: var(--button-color); + border: 1px solid var(--button-color); } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { - background-color: rgba(255, 255, 255, 0.25); - border-color: transparent; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); +} + +.pagination li.active a, +.pagination li.active span, +.pagination li.active a:hover, +.pagination li.active span:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); } .pagination>.disabled>span, @@ -484,9 +625,9 @@ tr td.row-extra-text, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { - color: white; + color: var(--text-muted); background-color: rgba(0, 0, 0, .25); - border-color: transparent; + border: 1px solid transparent; } @@ -496,7 +637,14 @@ tr td.row-extra-text, .form-control { color: white; - background-color: #1b1a1a; + background-color: rgb(0 0 0 / 25%); +} + +.form-control:focus { + border-color: var(--text-hover); + -webkit-box-shadow: none; + box-shadow: none; + background: #1b1b1b; } /*Tabbed sorting */ @@ -526,18 +674,25 @@ tr td.row-extra-text, } .badge { - color: #fff; - background-color: rgba(0, 0, 0, 0.25); + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); } /*Settings*/ .navbar-default { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: none; } .navbar-default .navbar-nav>li>a { - color: #dddddd !important; + color: var(--text) !important; } .navbar-default .navbar-nav>.open>a { @@ -551,16 +706,16 @@ tr td.row-extra-text, .navbar-default .navbar-nav>li>a:hover { background-color: hsla(0, 0%, 100%, .08) !important; - color: white !important; + color: var(--text-hover) !important; } .navbar-default .navbar-nav>li>a.active { background-color: hsla(0, 0%, 0%, .15) !important; - color: var(--settings-accent-color) !important; + color: rgb(var(--accent-color)) !important; } #content { - color: #fff; + color: var(--text-hover); } .colmask { @@ -568,6 +723,10 @@ tr td.row-extra-text, background-color: rgba(0, 0, 0, .25); } +.padTable:not(.ui-sortable) { + background: var(--main-bg-color) !important; +} + table { border-color: transparent !important; } @@ -578,7 +737,7 @@ table { .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { - border-top: transparent; + border-top: none !important; } .section, @@ -593,7 +752,7 @@ table { } .info-container { - color: #fff; + color: var(--text-hover); } .col2 table { @@ -612,7 +771,7 @@ table { } .path { - color: #fff; + color: var(--text-hover); } .col2 h3 { @@ -620,35 +779,35 @@ table { } .form-control.advanced-button.config-hover { - color: #fff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.25); border-radius: 3px !important; } .form-control.advanced-button.config-hover:hover { - color: #fff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3); border-radius: 3px !important; } .form-control::-moz-placeholder { - color: #fff !important; + color: var(--text-muted) !important; opacity: 1 } .form-control:-ms-input-placeholder { - color: #fff !important; + color: var(--text-muted) !important; } .form-control::-webkit-input-placeholder { - color: #fff !important; + color: var(--text-muted) !important; } .col2 p, .col2-cats { - color: #fff; + color: var(--text-hover); } /*Input*/ @@ -661,9 +820,9 @@ input[type="date"], textarea, select { border: none; - background-color: rgba(255, 255, 255, 0.25); + background-color: rgba(0, 0, 0, 0.15); border-radius: 3px !important; - color: #fff !important; + color: var(--text-hover) !important; outline: none; } @@ -709,13 +868,54 @@ input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus { - background-color: rgba(255, 255, 255, 0.25); + background-color: rgba(255, 255, 255, 0.1); border: none; -webkit-box-shadow: none !important; box-shadow: none !important; } +input[type="date"] { + background: transparent; + color: white; +} + +input[type="date"]::-webkit-calendar-picker-indicator { + filter: invert(100%); +} + /*Servers*/ + +.server-disabled { + background: repeating-linear-gradient(-55deg, + #444444, + #444444 10px, + #333 10px, + #333 20px) center center/cover no-repeat fixed; + color: var(--text-muted); +} + +.server-disabled p, +.server-disabled label, +.server-disabled h3 { + color: var(--text-muted) !important; +} + +.server-disabled button { + background: #363636; + border-color: #363636; + color: var(--text-muted); +} + +.server-disabled button:hover { + background: #464646; + border-color: #464646; + color: var(--text-muted); +} + +.section .server-disabled { + background-color: rgba(255, 255, 255, 0); +} + .Servers .ct-label { color: white; } @@ -726,11 +926,11 @@ input[type="week"]:focus { } .Servers .ct-series-a .ct-line { - stroke: #ffffff; + stroke: var(--text-hover); } .Servers .ct-series-a .ct-area { - fill: #ffffff; + fill: var(--text-hover); } /*Categories*/ @@ -776,18 +976,39 @@ select[disabled]:hover { /*modal*/ .modal-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-body { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-header { - background: var(--modal-bg-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .modal-body>.nav-tabs>li>a { - color: white !important; + color: var(--text) !important; opacity: 1 !important; border: transparent; } @@ -795,8 +1016,8 @@ select[disabled]:hover { .modal-body>.nav-tabs>li.active>a, .modal-body>.nav-tabs>li.active>a:hover, .modal-body>.nav-tabs>li.active>a:focus { - color: #555; - background-color: hsla(0, 0%, 100%, .08); + color: rgb(var(--accent-color)) !important; + background-color: hsla(0, 0%, 100%, .08) !important; border: transparent; border-bottom-color: transparent; cursor: default; @@ -809,10 +1030,18 @@ select[disabled]:hover { .modal-body>.nav>li>a:hover, .modal-body>.nav>li>a:focus { background-color: hsla(0, 0%, 100%, .08) !important; + color: var(--text-hover) !important; } .modal-body>.tab-content>.active { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #modal-options .tab-content h4 { @@ -824,9 +1053,32 @@ select[disabled]:hover { color: white; } +#modal-options #options-status small { + color: var(--text-muted); +} + +#modal-options .options-function-box .input-group-addon { + background-color: var(--button-color); + color: var(--button-text); + border: 1px solid var(--button-color); +} + +#modal-options .table-server-connections thead { + + background-color: rgba(0, 0, 0, .25); +} + +#modal-options .table-server-connections thead { + background-color: rgba(0, 0, 0, .25); +} + +#modal-item-files .item-files-table .progress small { + color: var(--text-muted) !important; +} + a.list-group-item, button.list-group-item { - color: #fff; + color: var(--text-hover); } a.list-group-item:hover, @@ -834,22 +1086,10 @@ button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus { text-decoration: none; - color: #fff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.08); } -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 20px; - font-size: 21px; - line-height: inherit; - color: #fff; - border: 0; - border-bottom: none; -} - .form-control { border: transparent; } @@ -873,11 +1113,7 @@ fieldset[disabled] .form-control { /* Scheduling */ .time { - color: #fff; -} - -label { - color: #ffffff; + color: var(--text-hover); } /* Wizard */ @@ -914,4 +1150,13 @@ label { #modal-options .table-server-connections th:last-child { border-right: none; +} + +.main-helplink { + display: block; + position: static; + float: right; + color: rgb(var(--accent-color)) !important; + padding: 0px; + font-size: 1.2em; } \ No newline at end of file diff --git a/CSS/themes/sabnzbd/space-gray.css b/CSS/themes/sabnzbd/space-gray.css index 364308ef..c255792b 100644 --- a/CSS/themes/sabnzbd/space-gray.css +++ b/CSS/themes/sabnzbd/space-gray.css @@ -13,12 +13,4 @@ /* SABNZBD SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --settings-accent-color: #81a6b7; - --nav-button-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --default-button-color-active: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/aquamarine.css b/CSS/themes/sonarr/aquamarine.css index 94e902a5..d34caabe 100644 --- a/CSS/themes/sonarr/aquamarine.css +++ b/CSS/themes/sonarr/aquamarine.css @@ -12,31 +12,4 @@ /* SONARR AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #009688; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/dark.css b/CSS/themes/sonarr/dark.css index bb6a876e..11bac53e 100644 --- a/CSS/themes/sonarr/dark.css +++ b/CSS/themes/sonarr/dark.css @@ -13,31 +13,4 @@ /* SONARR DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/dracula.css b/CSS/themes/sonarr/dracula.css index 102966c5..c5fb662b 100644 --- a/CSS/themes/sonarr/dracula.css +++ b/CSS/themes/sonarr/dracula.css @@ -12,31 +12,4 @@ /* SONARR DRACULA THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #50fa7b; - --accent-color-hover: #50fa7b; - --queue-color: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; - --label-text-color: #282a36; - - --text:#6272a4; - --text-hover: #95adfa; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); diff --git a/CSS/themes/sonarr/hotline.css b/CSS/themes/sonarr/hotline.css index 1d06ba1b..581c01c2 100644 --- a/CSS/themes/sonarr/hotline.css +++ b/CSS/themes/sonarr/hotline.css @@ -12,31 +12,4 @@ /* SONARR HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/noname.css b/CSS/themes/sonarr/noname.css index fb956256..92336b56 100644 --- a/CSS/themes/sonarr/noname.css +++ b/CSS/themes/sonarr/noname.css @@ -11,7 +11,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* SONARR THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS//themes/sonarr/sonarr-base.css); :root { --main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed; diff --git a/CSS/themes/sonarr/organizr-dark.css b/CSS/themes/sonarr/organizr-dark.css index 83378ece..853a0e60 100644 --- a/CSS/themes/sonarr/organizr-dark.css +++ b/CSS/themes/sonarr/organizr-dark.css @@ -12,31 +12,4 @@ /* SONARR ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #2cabe3; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/plex.css b/CSS/themes/sonarr/plex.css index 0e081b05..87b41379 100644 --- a/CSS/themes/sonarr/plex.css +++ b/CSS/themes/sonarr/plex.css @@ -12,31 +12,4 @@ /* SONARR PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/sonarr/sonarr-base.css b/CSS/themes/sonarr/sonarr-base.css index 74fa486b..27197bee 100644 --- a/CSS/themes/sonarr/sonarr-base.css +++ b/CSS/themes/sonarr/sonarr-base.css @@ -10,6 +10,16 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +:root { + --calendar-tv-unaired-premiere: 53 197 244; + --calendar-tv-downloading: 122 67 182; + --calendar-tv-unmonitored: 173 173 173; + --calendar-tv-unaired: 93 156 236; + --calendar-tv-missing: 240 80 80; + --calendar-tv-on-air: 255 165 0; + --calendar-tv-available: 39 194 76; + } + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -111,20 +121,41 @@ a:hover { /* MODAL */ [class*="ModalHeader-modalHeader-"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-modalContent-"] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } [class*="ModalFooter-modalFooter-"] { - background: var(--modal-bg-color); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff; - border-top: 1px solid var(--accent-color); + border-top: 1px solid rgb(var(--accent-color)); } [class*="ModalContent-closeButton-"]:hover { @@ -167,8 +198,13 @@ a:hover { } [class*="CheckInput-primaryIsChecked-"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; } /* HEADER */ @@ -191,6 +227,13 @@ a:hover { [class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] { border: none !important; background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: #fff !important; box-shadow: 0 0 10px 1px transparent !important; } @@ -220,20 +263,19 @@ a:hover { background-color: transparent; } -[class*="PageSidebarItem-link-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); text-decoration: none; } -[class*="PageSidebarItem-isActiveLink-"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 768px) { @@ -243,13 +285,13 @@ a:hover { } [class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } /* SERIES PAGE */ /* SONARR SPECIFIC */ [class*="SeriesIndexPoster-controls-"] { - background-color: #000 !important; + background-color: rgb(var(--accent-color)) !important; } /* OVERVIEW PAGE */ @@ -277,7 +319,7 @@ a:hover { [class*=".ProgressBar-purple-"] { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } /* SHOW PAGE */ @@ -296,6 +338,11 @@ a:hover { color: var(--text) !important; } +[class*="SeriesDetailsSeason-actionButton-"]:hover, +[class*="SeriesDetailsSeason-collapseButtonIcon-"]:hover { + color: var(--text-hover) !important; +} + [class*="SeriesDetailsSeason-sizeOnDisk-"] { color: var(--text-muted); } @@ -319,11 +366,13 @@ a:hover { [class*="ProtocolLabel-torrent-"] { border-color: #00853d !important; background-color: #00853d !important; + color: #fff !important; } [class*="ProtocolLabel-usenet-"] { border-color: #17b1d9 !important; background-color: #17b1d9 !important; + color: #fff !important; } [class*="SeriesDetailsSeason-seasonNumber-"] { @@ -340,6 +389,13 @@ a:hover { [class*="Popover-body-"], [class*="Tooltip-bod-"] { background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } [class*="Tooltip-tooltipContainer-"] { @@ -348,6 +404,13 @@ a:hover { [class*="Tooltip-tooltip-"][class*=Tooltip-inverse-] { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } @@ -371,26 +434,43 @@ a:hover { color: var(--text); } -[class*="IconButton-button-"]:hover { +[class*="IconButton-button-"]:hover, +[class*="Label-small-"] [class*="IconButton-button-"] { background-color: transparent; - color: var(--text-hover) !important; + color: var(--label-text-color); +} + +[class*="SeriesIndexPoster-action-"] .fa-search:hover { + background-color: transparent; + color: var(--label-text-color) !important; +} + +[class*="SeriesDetailsSeason-left-"] [class*="IconButton-button-"]:hover, +[class*="SeriesDetails-seriesNavigationButton-"]:hover, +[class*="SeriesDetails-monitorToggleButton-"]:hover { + color: var(--text-hover); +} + +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--text-hover); } [class*="Label-default-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } [class*="Label-info-"] { - border-color: var(--accent-color); - background-color: var(--accent-color); + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); color: var(--label-text-color); } -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--queue-color); - background-color: var(--queue-color); +[class*="PageSidebarItem-status-"] [class*="Label-info-"] { + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); color: var(--label-text-color); } @@ -403,12 +483,12 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { background: rgba(0, 0, 0, .25); - color: #FFF; + color: var(--text-hover); border: none; } [class*="TableHeaderCell-headerCell-"] { - color: #fff; + color: var(--text-hover); } [class*="Table-table-"] { @@ -445,11 +525,11 @@ a:hover { } [class*="PageToolbarButton-toolbarButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } [class*="MenuButton-menuButton-"]:hover { - color: var(--text-hover); + color: rgb(var(--accent-color)); } /* POSTERS */ @@ -457,13 +537,20 @@ a:hover { [class*="SeriesIndexPoster-nextAiring-"], [class*="SeriesIndexPosterInfo-info-"] { background-color: rgba(255, 255, 255, 0.08); - color: var(--text); + color: var(--text-hover); } /* SERIES TOP HEADER DROPDOWN */ [class*="MenuItem-menuItem-"], [class*="MenuContent-menuContent-"] { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -502,12 +589,21 @@ a:hover { [class*="EnhancedSelectInput-options-"] { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } + [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { background-color: rgba(255, 255, 255, 0.20) !important; + color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { @@ -525,7 +621,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: var(--label-text-color); + color: #fff; } [class*="SeriesSearchInput-container-"] [class*="Input-input-"] { @@ -557,18 +653,41 @@ a:hover { } /* MOVE THIS */ -::placeholder { +input::-webkit-input-placeholder { color: var(--text); } -:-ms-input-placeholder { - color: var(--text) +input:focus::-webkit-input-placeholder { + color: var(--text-hover); } -::-webkit-input-placeholder { +/* Firefox < 19 */ +input:-moz-placeholder { color: var(--text); } +input:focus:-moz-placeholder { + color: var(--text-hover); +} + +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} + +input:focus::-moz-placeholder { + color: var(--text-hover); +} + +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} + +input:focus:-ms-input-placeholder { + color: var(--text-hover); +} + /* TEXT COLOR */ [class*="PageContentBody-innerContentBody-"] { color: var(--text); @@ -592,11 +711,16 @@ a:hover { color: #fff; } +[class*="RootFolderSelectInputOption-freeSpace-"], +[class*="RootFolderSelectInputOption-seriesFolder-"] { + color: var(--text-muted); +} + /* IMPORT */ [class*="FieldSet-legend-"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="VirtualTableRow-row-"]:hover { @@ -616,7 +740,14 @@ a:hover { [class*="ImportSeriesSelectSeries-content-"], [class*="ImportSeriesSelectSeries-searchIconContainer-"] { border: none; - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: white; } @@ -775,8 +906,9 @@ a:hover { } /* SETTINGS */ -[class*="PageContentBody-innerContentBody"] [class*="Link-to"] { - color: #fff; +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); } [class*="Settings-summary"] { @@ -784,7 +916,7 @@ a:hover { } [class*="FormLabel-large-"] { - color: #fff + color: var(--text-hover); } [class*="FormLabel-isAdvanced-"] { @@ -820,7 +952,7 @@ a:hover { color: var(--text); } -[class*="Card-card-"] { +[class*="Card-card-"]:hover { color: var(--text-hover); } @@ -829,7 +961,6 @@ a:hover { [class*="ReleaseProfiles-center-"] { background-color: transparent; border: none; - color: var(--text); } [class*="QualityProfileItem-qualityProfileItem-"], @@ -859,7 +990,6 @@ a:hover { [class*="Indexers-center-"] { background-color: transparent; border: none; - color: var(--text); } /* INDEXERS */ @@ -868,21 +998,18 @@ a:hover { [class*="DownloadClients-center-"] { background-color: transparent; border: none; - color: var(--text); } /*INPORT LISTS */ [class*="ImportLists-center-"] { background-color: transparent; border: none; - color: var(--text); } /* CONNECTIONS */ [class*="Notifications-center-"] { background-color: transparent; border: none; - color: var(--text); } /* LOG */ @@ -919,12 +1046,14 @@ input[type=password] { background-color: var(--button-color); cursor: pointer; } + .button:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; text-decoration: none; } + .form-input:focus { outline: 0; border-color: #fff; @@ -951,12 +1080,4 @@ input[type=password] { [class*="ReleaseSceneIndicator-levelMapped-"] { border-color: var(--text); color: var(--text); -} - -/* Scrollbar test fix - -[class*="PageContentBody-contentBody-"], -[class*="PageSidebar-sidebar-"] { - margin-right: -70px !important; - margin-bottom: -70px !important; } \ No newline at end of file diff --git a/CSS/themes/sonarr/space-gray.css b/CSS/themes/sonarr/space-gray.css index b10bfb00..dfb8f283 100644 --- a/CSS/themes/sonarr/space-gray.css +++ b/CSS/themes/sonarr/space-gray.css @@ -12,31 +12,4 @@ /* SONARR SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; - --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; - --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; - --calendar-tv-available: 39 194 76; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - --label-text-color: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/synclounge/aquamarine.css b/CSS/themes/synclounge/aquamarine.css index 5010843a..d002a295 100644 --- a/CSS/themes/synclounge/aquamarine.css +++ b/CSS/themes/synclounge/aquamarine.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #009688; - --default-button-color-hover: #12afa0; - --accent-color: #12afa0; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); diff --git a/CSS/themes/synclounge/dark.css b/CSS/themes/synclounge/dark.css index 3e35a570..01c00728 100644 --- a/CSS/themes/synclounge/dark.css +++ b/CSS/themes/synclounge/dark.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #e59029; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/synclounge/hotline.css b/CSS/themes/synclounge/hotline.css index 99138b29..60f88d6e 100644 --- a/CSS/themes/synclounge/hotline.css +++ b/CSS/themes/synclounge/hotline.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #F44336; - --default-button-color-hover: rgb(247, 106, 96); - --accent-color: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/synclounge/organizr-dark.css b/CSS/themes/synclounge/organizr-dark.css index 3b2d53bb..3db6bd99 100644 --- a/CSS/themes/synclounge/organizr-dark.css +++ b/CSS/themes/synclounge/organizr-dark.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --default-button-color: #2cabe3; - --default-button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/synclounge/plex.css b/CSS/themes/synclounge/plex.css index 0f0a4cfa..f279e0cb 100644 --- a/CSS/themes/synclounge/plex.css +++ b/CSS/themes/synclounge/plex.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #e59029; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/synclounge/space-gray.css b/CSS/themes/synclounge/space-gray.css index 6b13817d..1f456abb 100644 --- a/CSS/themes/synclounge/space-gray.css +++ b/CSS/themes/synclounge/space-gray.css @@ -13,10 +13,4 @@ /* SYNCLOUNGE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/synclounge/synclounge-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --accent-color: #607D8B; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); diff --git a/CSS/themes/synclounge/synclounge-base.css b/CSS/themes/synclounge/synclounge-base.css index cd2f0d85..8be3c2d2 100644 --- a/CSS/themes/synclounge/synclounge-base.css +++ b/CSS/themes/synclounge/synclounge-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -11,92 +10,187 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css); + +:root { + --v-primary-base: rgb(var(--accent-color)); + --v-anchor-base: rgb(var(--accent-color)); +} + main { -background: var(--main-bg-color); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) } + h4 { - color: #ffffff; + color: var(--text-hover); } + .v-toolbar { background: transparent !important; box-shadow: none; } -.v-toolbar__content, .v-toolbar__extension { + +.v-toolbar__content, +.v-toolbar__extension { background-color: rgba(0, 0, 0, 0.6) !important; } + p a { - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; } -.application .theme--dark.v-card, .theme--dark .v-card .primary--text { - color: var(--accent-color) !important; + +.theme--dark.v-icon { + color: rgb(var(--accent-color)); } -.application .theme--dark.v-card, .theme--dark .v-card .accent--text { - color: var(--accent-color) !important; + +.application .theme--dark.v-card, +.theme--dark .v-card .primary--text { + color: rgb(var(--accent-color)) !important; } -.application .theme--dark.v-card, .theme--dark .v-card .primary { - color: var(--accent-color) !important; + +.application .theme--dark.v-card, +.theme--dark .v-card .accent--text { + color: rgb(var(--accent-color)) !important; } + +.application .theme--dark.v-card, +.theme--dark .v-card .primary { + color: rgb(var(--accent-color)) !important; +} + + + .flex.xs12 a { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + .v-list__tile { - color: #fff !important; + color: var(--text-hover) !important; } .v-stepper__step__step .primary { - background-color: var(--default-button-color) !important; - border-color: var(--default-button-color) !important; + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; } .primary { - background-color: var(--default-button-color) !important; - border-color: var(--default-button-color) !important; -} -.v-input__control .v-input__slot .primary--text input, .primary--text textarea { - caret-color: var(--accent-color) !important; -} -.v-input input:active, .v-input input:focus, .v-input textarea:active, .v-input textarea:focus .primary--text input, .primary--text textarea { - caret-color: var(--accent-color) !important; + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; } - -.application .theme--dark.v-btn:not(.v-btn--icon):not(.v-btn--flat), .theme--dark .v-btn:not(.v-btn--icon):not(.v-btn--flat) { - background-color: var(--default-button-color) !important; +.primary:hover, +.primary:focus { + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; + color: var(--button-text-hover) !important; } + +.v-input__control .v-input__slot .primary--text input, +.primary--text textarea { + caret-color: rgb(var(--accent-color)) !important; +} + +.v-input input:active, +.v-input input:focus, +.v-input textarea:active, +.v-input textarea:focus .primary--text input, +.primary--text textarea { + caret-color: rgb(var(--accent-color)) !important; +} + +.theme--dark.v-app-bar.v-toolbar.v-sheet { + background: var(--modal-bg-color) !important; +} + +.application .theme--dark.v-btn:not(.v-btn--icon):not(.v-btn--flat), +.theme--dark .v-btn:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn:not(.v-btn--round).v-size--small) { + background-color: var(--button-color) !important; + color: var(--button-text); +} + +.application .theme--dark.v-btn:hover:not(.v-btn--icon):not(.v-btn--flat), +.theme--dark .v-btn:hover:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn:not(.v-btn--round).v-size--small) { + background-color: var(--button-color-hover) !important; + color: var(--button-text-hover); +} + .v-btn__content { - color: #fff; + color: var(--button-text); } -.v-btn--active:before, .v-btn:focus:before, .v-btn:hover:before { - background-color: white; + +.v-btn--active:before, +.v-btn:focus:before, +.v-btn:hover:before { + background-color: var(--text-hover); } -.application .theme--dark.v-card, .theme--dark .v-card { - background: var(--modal-bg-color); + +.application .theme--dark.v-card, +.theme--dark .v-card { + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.flex.md3 .application .theme--dark.v-card, .theme--dark .v-card { + +.flex.md3 .application .theme--dark.v-card, +.theme--dark .v-card { background: rgba(255, 255, 255, 0.10) !important; - color: #fff; + color: var(--text-hover); } + .theme--dark.v-expansion-panels .v-expansion-panel { background-color: transparent; - color: #fff; + color: var(--text-hover); } + .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { background: rgb(0 0 0 / 0.50); } -.flex.md3 .application .theme--dark.v-list, .theme--dark .v-list { - background: rgba(255, 255, 255, 0.10) !important; -} -flex xs12 .flex.md3 .application .theme--dark.v-list, .theme--dark .v-list { - background: inherit !important; -} + .v-navigation-drawer { - background: var(--main-bg-color) !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /*popup modal */ -.v-dialog { + +.v-dialog, +.theme--dark.v-list { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + .menuable__content__active { - background: var(--modal-bg-color); -} + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} \ No newline at end of file diff --git a/CSS/themes/tautulli/aquamarine.css b/CSS/themes/tautulli/aquamarine.css index 0bd0fcdd..01cd72f7 100644 --- a/CSS/themes/tautulli/aquamarine.css +++ b/CSS/themes/tautulli/aquamarine.css @@ -13,11 +13,4 @@ /* TAUTULLI AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/dark.css b/CSS/themes/tautulli/dark.css index 4c3822ed..eb0b5b16 100644 --- a/CSS/themes/tautulli/dark.css +++ b/CSS/themes/tautulli/dark.css @@ -13,11 +13,4 @@ /* TAUTULLI DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/dracula.css b/CSS/themes/tautulli/dracula.css new file mode 100644 index 00000000..c71f466a --- /dev/null +++ b/CSS/themes/tautulli/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* TAUTULLI DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/hotline.css b/CSS/themes/tautulli/hotline.css index efe41be0..2b57eb61 100644 --- a/CSS/themes/tautulli/hotline.css +++ b/CSS/themes/tautulli/hotline.css @@ -13,11 +13,4 @@ /* TAUTULLI HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/organizr-dark.css b/CSS/themes/tautulli/organizr-dark.css index 48515a42..27e9efae 100644 --- a/CSS/themes/tautulli/organizr-dark.css +++ b/CSS/themes/tautulli/organizr-dark.css @@ -11,13 +11,6 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -/* TAUTULLI DARK THEME */ +/* TAUTULLI ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/plex.css b/CSS/themes/tautulli/plex.css index 0c684cf3..5069c3c9 100644 --- a/CSS/themes/tautulli/plex.css +++ b/CSS/themes/tautulli/plex.css @@ -13,11 +13,4 @@ /* TAUTULLI PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/space-gray.css b/CSS/themes/tautulli/space-gray.css index da256693..a8fd6645 100644 --- a/CSS/themes/tautulli/space-gray.css +++ b/CSS/themes/tautulli/space-gray.css @@ -13,11 +13,4 @@ /* TAUTULLI SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/tautulli/tautulli-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/tautulli/tautulli-base.css b/CSS/themes/tautulli/tautulli-base.css index 524e1157..eb748540 100644 --- a/CSS/themes/tautulli/tautulli-base.css +++ b/CSS/themes/tautulli/tautulli-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -10,331 +9,616 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ - body { - background: var(--main-bg-color); - } - - /* Text */ - .text-muted, .help-block, .small-muted ,h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { - color: #FFF; - } - a.no-highlight { - color: #dedede; - } - #plexpy-notifiers-table .friendly_name, #notifier-config-modal span.notifier_id, #plexpy-newsletters-table .friendly_name, #newsletter-config-modal span.newsletter_id, #plexpy-mobile-devices-table .friendly_name, #mobile-device-config-modal span.notifier_id { - color: #fff; - } - /* Navbar */ - .navbar { - background: var(--main-bg-color); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - #search_form #search_button.btn-inactive { - background-color: #0000; - } - .nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { - color: #f9be03; - background-color: rgba(0, 0, 0, 0.25); - } - .nav > li > a { - color: #FFF; - } - .nav > li > a:hover, .nav > li > a:focus { - background-color: rgba(255, 255, 255, 0.08); - } - .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { - background-color: rgba(255, 255, 255, 0.08); - } - - /* Dropdown */ - .dropdown-menu { - background: var(--modal-bg-color); - } - .dropdown-menu > li > a { - color: #FFF; - } - .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { - background-color: rgba(255, 255, 255, 0.08); - } - .dropdown-menu .divider { - background-color: rgba(255, 255, 255, 0.08); - } - select, .react-selectize.bootstrap3.root-node .react-selectize-control { - background: rgba(0, 0, 0, 0.25); - } - - /* Dashboard */ - .dashboard-stats-background, .dashboard-activity-background, .dashboard-activity-poster-container { - background-color: rgba(0, 0, 0, 0.25); - } - .dashboard-activity-progress-bar { - background-color: rgba(0, 0, 0, 0.25); - } - .dashboard-activity-progress .buffer-bar { - background-color: rgba(255, 255, 255, 0.25); - } - .dashboard-activity-metadata-user a { - color: #fff; - } - .dashboard-activity-metadata-subtitle-container { - color: #fff; - } - .dashboard-recent-media-metacontainer h3.text-muted a { - color: #fff; - } - .dashboard-recent-media-metacontainer h3.text-muted { - color: #fff; - } - /* Buttons */ - .btn-dark { - background-color: rgba(0, 0, 0, 0.25); - border-color: transparent; - } - .btn-dark:hover { - color: #d7d7d7; - background-color: rgba(255, 255, 255, 0.08); - border-color: transparent; - } - .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark, .btn-dark.active:focus { - color: #fff; - background-color: rgba(0, 0, 0, 0.45); - border-color: transparent; - } - .btn:focus, .btn.focus, .btn-dark:focus, .btn-dark.focus, .btn-dark:active:focus { - color: #fff; - background-color: rgba(0, 0, 0, 0.45) !important; - } - .btn-dark.active:hover { - background-color: rgba(255, 255, 255, 0.08); - } - .btn-dark.inactive:hover { - background-color: rgba(255, 255, 255, 0.08); - } - .btn-danger.btn-edit { - background-color: rgba(255, 255, 255, 0.25); - } - .btn-form { - background-color: rgba(0, 0, 0, 0.45); - } - .btn-form:hover { - background-color: rgba(255, 255, 255, 0.08); - } - - /* Inputs */ - textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: rgba(0, 0, 0, 0.25); - } - .react-selectize.root-node .react-selectize-control, .selectize-control.form-control .selectize-input { - background: rgba(0, 0, 0, 0.25) !important; - } - - /*Formcontrol */ - select.form-control, div.form-control .selectize-input { - background-color: rgba(0, 0, 0, 0.25); - } - @media (min-width: 768px) { - .form-inline .input-group > .form-control { - width: auto; - } - } - .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: rgba(236, 236, 236, 0.25); - } - textarea.form-control { - background-color: rgba(0, 0, 0, 0.25); - } - textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { - color: #fff; - background: rgba(0, 0, 0, 0.25); - } - .form-control:focus { - border-color: transparent; - outline: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - /* Settings table cards */ - .table-card-header { - background-color: rgba(0, 0, 0, 0.25); - border-bottom: 1px solid rgba(255, 255, 255, 0.25); - border-top: 1px solid #00000000; - } - .table-card-back { - background-color: rgba(0, 0, 0, 0.15); - } - table.display thead th { - color: #fff; - background-color: rgba(0, 0, 0, 0.25); - } - table.display thead tr:hover { - background-color: rgba(0, 0, 0, 0.45); - } - /*Settings menu */ - .card-back-full { - background-color: transparent; - } - .nav-settings > li > a { - border-bottom: 1px solid transparent; - color: #fff; - } - .nav-settings > li { - background-color: rgba(0, 0, 0, 0.45); - border-top: 1px solid transparent; - } - .nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { - background-color: rgba(0, 0, 0, 0.25); - } - .nav-settings > li > a:hover, .nav-settings > li > a:focus { - color: #fff; - background-color: rgba(255, 255, 255, 0.08); - } - .card { - background-color: rgba(0, 0, 0, 0.25); - border-top: 1px solid #00000000; - } - .card-sortable { - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - } - .card-handle { - color: #fff; - background-color: rgba(0, 0, 0, 0.25); - } - /*Notification agents menu */ - .stacked-configs > li { - background-color: rgba(0, 0, 0, 0.25); - } - .stacked-configs > li > span { - color: #FFF; - border-left: 2px solid rgba(0, 0, 0, 0.25); - border-top: 1px solid rgba(255, 255, 255, 0.08); - } - .stacked-configs > li > span:hover, .stacked-configs > li > span:focus { - color: #fff; - background-color: rgba(255, 255, 255, 0.08); - } - .stacked-configs > li > span > a.toggle-left, .stacked-configs > li > span > span.toggle-left { - color: #999; - } -span > a.active, .stacked-configs > li > span > span.active { - color: #f9be03; - } - .inline-pre { - background-color: rgba(255, 255, 255, 0.25); - } - /* Summary containers */ - .summary-container .table-card-header, .summary-container .table-card-back { - background: rgba(0, 0, 0, 0.45); - } - .summary-navbar { - background-color: rgba(0, 0, 0, 0.25); - } - - /* pagination */ - .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { - background-color: rgba(0, 0, 0, 0.25); - border-color: #00000000; - } - .pagination > li > a, .pagination > li > span { - background-color: rgba(0, 0, 0, 0.25); - border: 1px solid #00000000; - } - .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { - background-color: rgba(255, 255, 255, 0.08); - border: 1px solid #00000000; - color: #FFF; - } - /* Graphs */ - .graphs-instance { - background-color: rgba(0, 0, 0, 0.45); - } - /* Modal */ - .modal-content { - border: none; - } - .modal-body li { - color: #fff; - } - .modal-body { - background: var(--modal-bg-color); - } - .modal-header { - background: var(--modal-bg-color); - border-bottom: 1px solid var(--accent-color); - } - .modal-footer { - background: var(--modal-bg-color); - border-top: 1px solid var(--accent-color); - } - .modal-config-section { - border-top: 1px solid rgba(255, 255, 255, .08); - } - #changelog-modal .modal-body > h2 { - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - } - #notifier-config-modal .nav-tabs > li > a, #newsletter-config-modal .nav-tabs > li > a { - color: #ffffff; - } - #notifier-config-modal .nav-tabs > li.active > a, #notifier-config-modal .nav-tabs > li.active > a:hover, #notifier-config-modal .nav-tabs > li.active > a:focus, #newsletter-config-modal .nav-tabs > li.active > a, #newsletter-config-modal .nav-tabs > li.active > a:hover, #newsletter-config-modal .nav-tabs > li.active > a:focus { - color: #fff; - background: rgba(0, 0, 0, 0.45); - } - #notifier-config-modal .nav-tabs > li.active > a, #notifier-config-modal .nav-tabs > li.active > a:hover, #notifier-config-modal .nav-tabs > li.active > a:focus, #newsletter-config-modal .nav-tabs > li.active > a, #newsletter-config-modal .nav-tabs > li.active > a:hover, #newsletter-config-modal .nav-tabs > li.active > a:focus { - border: 1px solid #0000; - border-bottom-color: transparent; - } - #notifier-config-modal .nav-tabs > li > a:hover, #newsletter-config-modal .nav-tabs > li > a:hover { - border-color: #0000; - background: rgba(255, 255, 255, 0.08); - } - #notifier-config-modal .nav-tabs, #newsletter-config-modal .nav-tabs { - border-bottom: 1px solid rgba(255, 255, 255, 0.25); - } - .accordion { - background: rgba(0, 0, 0, 0.25); - } - .accordion li .link { - color: #fff; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - } - .accordion li .link:hover, .accordion li .link:hover i.fa { - background: rgba(255, 255, 255, 0.08); - } - .submenu { - background: rgba(0, 0, 0, 0.25); - } - /* Stream info */ - .stream-info { - background-color: rgba(0, 0, 0, 0.25); - } - /* Edit metadata */ - .item-children-section-title { - background-color: rgba(255, 255, 255, 0.08); - border-bottom: 1px solid #00000000; - border-top: 1px solid #00000000; - } - - /* Mobile */ - .navbar-toggle:hover, .navbar-toggle:focus { - background-color: rgba(255, 255, 255, 0.08); - } - .navbar-toggle { - background-color: rgba(255, 255, 255, 0.08); - } - @media (max-width: 768px) { - .navbar-collapse.in { - box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); - } +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } + +/* Text */ + +p, +.news-title, +.news-date { + color: var(--text); +} + +.help-block, +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small, +.h1 small, +.h2 small, +.h3 small, +.h4 small, +.h5 small, +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small, +.header-bar span, +.dashboard-activity-info-time, +strong, +.summary-content-details-tag strong, +.padded-header h1, +h2, +h3, +h4, +h5, +h6, +.config-scheduler-table th, +#tautulli-news .open .news-title, +#tautulli-news .open .news-date, +#tautulli-news .accordion li.open .link i.fa { + color: var(--text-hover); +} + +.list-unstyled { + color: #fff; +} + +.text-muted, +.small-muted { + color: var(--text-muted); +} + +/* LINKS */ + +a:not(.sub-value a), +a.no-highlight, +.news-body a { + color: var(--link-color); +} + +a:hover, +a.no-highlight:hover, +.dashboard-activity-metadata-title a:hover, +.dashboard-activity-metadata-user a:hover { + color: var(--link-color-hover); +} + +#plexpy-notifiers-table .friendly_name, +#notifier-config-modal span.notifier_id, +#plexpy-newsletters-table .friendly_name, +#newsletter-config-modal span.newsletter_id, +#plexpy-mobile-devices-table .friendly_name, +#mobile-device-config-modal span.notifier_id { + color: #fff; +} + +/* Navbar */ +.navbar { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +#search_form #search_button.btn-inactive { + background-color: #0000; +} + +.nav>li.active>a, +.nav>li.active>a:hover, +.nav>li.active>a:focus { + color: #f9be03; + background-color: rgba(0, 0, 0, 0.25); +} + +.nav>li>a { + color: var(--text); +} + +.nav>li>a:hover, +.nav>li>a:focus { + background-color: rgba(255, 255, 255, 0.08); + color: var(--text-hover); +} + +.nav .open>a, +.nav .open>a:hover, +.nav .open>a:focus { + background-color: rgba(255, 255, 255, 0.08); + color: rgb(var(--accent-color)); +} + +/* Dropdown */ +.dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-menu>li>a { + color: var(--text); +} + +.dropdown-menu>li>a:hover, +.dropdown-menu>li>a:focus { + background-color: rgba(255, 255, 255, 0.08); + color: var(--text-hover); +} + +.dropdown-menu .divider { + background-color: rgba(255, 255, 255, 0.08); +} + +select, +.react-selectize.bootstrap3.root-node .react-selectize-control { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +/* Dashboard */ +.dashboard-stats-background, +.dashboard-activity-background, +.dashboard-activity-poster-container { + background-color: rgba(0, 0, 0, 0.25); +} + +.dashboard-activity-progress-bar { + background-color: rgba(0, 0, 0, 0.25); +} + +.dashboard-activity-progress .buffer-bar { + background-color: rgba(255, 255, 255, 0.25); +} + +.dashboard-activity-metadata-user a { + color: var(--link-color); +} + +.dashboard-activity-metadata-subtitle-container { + color: #fff; +} + +.dashboard-recent-media-metacontainer h3.text-muted a { + color: #fff; +} + +.dashboard-recent-media-metacontainer h3.text-muted { + color: #fff; +} + +/* Buttons */ +.btn-dark { + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-dark:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-dark:active, +.btn-dark.active, +.open>.dropdown-toggle.btn-dark, +.btn-dark.active:focus { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn:focus:not(select), +.btn.focus:not(select), +.btn-dark:focus:not(select), +.btn-dark.focus:not(select), +.btn-dark:active:focus:not(select) { + color: var(--button-text-hover); + background-color: var(--button-color-hover) !important; +} + +.btn-dark.active:hover { + background-color: var(--button-color-hover); +} + +.btn-dark.inactive:hover { + background-color: rgba(255, 255, 255, 0.08); +} + +.btn-danger.btn-edit { + background-color: rgba(255, 255, 255, 0.25); +} + +.btn-form { + background-color: var(--button-color); +} + +.btn-form:hover { + background-color: var(--button-color-hover); +} + +/* Inputs */ +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: rgba(0, 0, 0, 0.25); +} + +.react-selectize.root-node .react-selectize-control, +.selectize-control.form-control .selectize-input { + background: rgba(0, 0, 0, 0.25) !important; +} + +/*Formcontrol */ +select.form-control, +div.form-control .selectize-input { + background-color: rgba(0, 0, 0, 0.25); +} + +@media (min-width: 768px) { + .form-inline .input-group>.form-control { + width: auto; + } +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: rgba(236, 236, 236, 0.25); +} + +textarea.form-control { + background-color: rgba(0, 0, 0, 0.25); +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + color: #fff; + background: rgba(0, 0, 0, 0.25); +} + +.form-control:focus { + border-color: transparent; + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Settings table cards */ +.table-card-header { + background-color: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(255, 255, 255, 0.25); + border-top: 1px solid #00000000; +} + +.table-card-back { + background-color: rgba(0, 0, 0, 0.15); +} + +table.display thead th { + color: var(--text-hover); + background-color: rgba(0, 0, 0, 0.25); +} + +table.display thead tr:hover { + background-color: rgba(0, 0, 0, 0.45); +} + +/*Settings menu */ +.card-back-full { + background-color: transparent; +} + +.nav-settings>li>a { + border-bottom: 1px solid transparent; + color: var(--text); +} + +.nav-settings>li { + background-color: rgba(0, 0, 0, 0.45); + border-top: 1px solid transparent; +} + +.nav-settings>.active>a, +.nav-settings>.active>a:hover, +.nav-settings>.active>a:focus { + background-color: rgba(0, 0, 0, 0.25); +} + +.nav-settings>li>a:hover, +.nav-settings>li>a:focus { + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.08); +} + +.card { + background-color: rgba(0, 0, 0, 0.25); + border-top: 1px solid #00000000; +} + +.card-sortable { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.card-handle { + color: #fff; + background-color: rgba(0, 0, 0, 0.25); +} + +/*Notification agents menu */ +.stacked-configs>li { + background-color: rgba(0, 0, 0, 0.25); +} + +.stacked-configs>li>span { + color: #FFF; + border-left: 2px solid rgba(0, 0, 0, 0.25); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.stacked-configs>li>span:hover, +.stacked-configs>li>span:focus { + color: #fff; + background-color: rgba(255, 255, 255, 0.08); +} + +.stacked-configs>li>span>a.toggle-left, +.stacked-configs>li>span>span.toggle-left { + color: #999; +} + +span>a.active, +.stacked-configs>li>span>span.active { + color: #f9be03; +} + +.inline-pre { + background-color: rgba(255, 255, 255, 0.25); +} + +/* Summary containers */ +.summary-container .table-card-header, +.summary-container .table-card-back { + background: rgba(0, 0, 0, 0.45); +} + +.summary-navbar { + background-color: rgba(0, 0, 0, 0.25); +} + +/* pagination */ +.pagination>.disabled>span, +.pagination>.disabled>span:hover, +.pagination>.disabled>span:focus, +.pagination>.disabled>a, +.pagination>.disabled>a:hover, +.pagination>.disabled>a:focus { + background-color: rgba(0, 0, 0, 0.25); + border-color: #00000000; +} + +.pagination>li>a, +.pagination>li>span { + background-color: var(--button-color); + border: 1px solid var(--button-color); + color: var(--button-text); +} + +.pagination>li>a:hover, +.pagination>li>span:hover, +.pagination>li>a:focus, +.pagination>li>span:focus { + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); + color: var(--button-text-hover); +} + +/* Graphs */ +.graphs-instance { + background-color: rgba(0, 0, 0, 0.45); +} + +/* Modal */ +.modal-content { + border: none; +} + +.modal-body li { + color: #fff; +} + +.modal-body { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); +} + +.modal-config-section { + border-top: 1px solid rgba(255, 255, 255, .08); +} + +#changelog-modal .modal-body>h2 { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +#notifier-config-modal .nav-tabs>li>a, +#newsletter-config-modal .nav-tabs>li>a { + color: var(--text); +} + +#notifier-config-modal .nav-tabs>li.active>a, +#notifier-config-modal .nav-tabs>li.active>a:hover, +#notifier-config-modal .nav-tabs>li.active>a:focus, +#newsletter-config-modal .nav-tabs>li.active>a, +#newsletter-config-modal .nav-tabs>li.active>a:hover, +#newsletter-config-modal .nav-tabs>li.active>a:focus { + color: var(--text-hover); + background: rgba(0, 0, 0, 0.45); +} + +#notifier-config-modal .nav-tabs>li.active>a, +#notifier-config-modal .nav-tabs>li.active>a:hover, +#notifier-config-modal .nav-tabs>li.active>a:focus, +#newsletter-config-modal .nav-tabs>li.active>a, +#newsletter-config-modal .nav-tabs>li.active>a:hover, +#newsletter-config-modal .nav-tabs>li.active>a:focus { + border: 1px solid #0000; + border-bottom-color: transparent; +} + +#notifier-config-modal .nav-tabs>li>a:hover, +#newsletter-config-modal .nav-tabs>li>a:hover { + border-color: #0000; + background: rgba(255, 255, 255, 0.08); + color: var(--text-hover); +} + +#notifier-config-modal .nav-tabs, +#newsletter-config-modal .nav-tabs { + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} + +.accordion { + background: rgba(0, 0, 0, 0.25); +} + +.accordion li .link { + color: #fff; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.accordion li .link:hover, +.accordion li .link:hover i.fa { + background: rgba(255, 255, 255, 0.08); +} + +.submenu { + background: rgba(0, 0, 0, 0.25); +} + +/* Stream info */ +.stream-info { + background-color: rgba(0, 0, 0, 0.25); +} + +/* Edit metadata */ +.item-children-section-title { + background-color: rgba(255, 255, 255, 0.08); + border-bottom: 1px solid #00000000; + border-top: 1px solid #00000000; +} + +/* Mobile */ +.navbar-toggle:hover, +.navbar-toggle:focus { + background-color: rgba(255, 255, 255, 0.08); +} + +.navbar-toggle { + background-color: rgba(255, 255, 255, 0.08); +} + +@media (max-width: 768px) { + .navbar-collapse.in { + box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); + } +} + #login-methods .submenu { background: transparent; } + .login-container .remember-group { color: #eee; } -#login-methods > li.open > div { - color: var(--accent-color); + +#login-methods>li.open>div { + color: rgb(var(--accent-color)); } /* Buttons */ @@ -343,134 +627,232 @@ span > a.active, .stacked-configs > li > span > span.active { background-color: var(--button-color); box-shadow: inset 0 1px 0 var(--button-color); } + .btn-bright:hover { color: #fff; background-color: var(--button-color-hover); box-shadow: inset 0 1px 0 var(--button-color-hover); } -.btn-bright:active, .btn-bright.active, .open > .dropdown-toggle.btn-bright, #menu_link_show_advanced_settings.active { + +.btn-bright:active, +.btn-bright.active, +.open>.dropdown-toggle.btn-bright, +#menu_link_show_advanced_settings.active { color: #fff; background-color: var(--button-color-hover); box-shadow: inset 0 1px 0 var(--button-color-hover); } -.btn-bright:active:hover, .btn-bright.active:hover, .open > .dropdown-toggle.btn-bright:hover, .btn-bright:active:focus, .btn-bright.active:focus, .open > .dropdown-toggle.btn-bright:focus, .btn-bright:active.focus, .btn-bright.active.focus, .open > .dropdown-toggle.btn-bright.focus { + +.btn-bright:active:hover, +.btn-bright.active:hover, +.open>.dropdown-toggle.btn-bright:hover, +.btn-bright:active:focus, +.btn-bright.active:focus, +.open>.dropdown-toggle.btn-bright:focus, +.btn-bright:active.focus, +.btn-bright.active.focus, +.open>.dropdown-toggle.btn-bright.focus { color: #fff; background-color: var(--button-color-hover); box-shadow: inset 0 1px 0 var(--button-color-hover); } -.btn:focus, .btn.focus, .btn-dark:focus, .btn-dark.focus, .btn-dark:active:focus { + +.btn:focus:not(#history-user):not(#graph-user):not(#sync-user), +.btn.focus, +.btn-dark:focus, +.btn-dark.focus, +.btn-dark:active:focus { color: #fff; background-color: var(--button-color-hover) !important; opacity: .8; } -.btn-bright.disabled, .btn-bright[disabled], fieldset[disabled] .btn-bright, .btn-bright.disabled:hover, .btn-bright[disabled]:hover, fieldset[disabled] .btn-bright:hover, .btn-bright.disabled:focus, .btn-bright[disabled]:focus, fieldset[disabled] .btn-bright:focus, .btn-bright.disabled.focus, .btn-bright[disabled].focus, fieldset[disabled] .btn-bright.focus, .btn-bright.disabled:active, .btn-bright[disabled]:active, fieldset[disabled] .btn-bright:active, .btn-bright.disabled.active, .btn-bright[disabled].active, fieldset[disabled] .btn-bright.active { + +.btn-bright.disabled, +.btn-bright[disabled], +fieldset[disabled] .btn-bright, +.btn-bright.disabled:hover, +.btn-bright[disabled]:hover, +fieldset[disabled] .btn-bright:hover, +.btn-bright.disabled:focus, +.btn-bright[disabled]:focus, +fieldset[disabled] .btn-bright:focus, +.btn-bright.disabled.focus, +.btn-bright[disabled].focus, +fieldset[disabled] .btn-bright.focus, +.btn-bright.disabled:active, +.btn-bright[disabled]:active, +fieldset[disabled] .btn-bright:active, +.btn-bright.disabled.active, +.btn-bright[disabled].active, +fieldset[disabled] .btn-bright.active { background-color: var(--button-color); border-color: var(--button-color); } /* Accents */ -.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { - color: var(--accent-color); +.badge { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); } + +.summary-content { + color: rgb(var(--accent-color)); +} + +.nav>li.active>a, +.nav>li.active>a:hover, +.nav>li.active>a:focus { + color: rgb(var(--accent-color)); +} + .dashboard-activity-progress .progress-bar { - background-color: var(--accent-color); - background-image: -moz-linear-gradient(top, var(--accent-color-hover), var(--accent-color)); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--accent-color-hover)), to(var(--accent-color))); - background-image: -webkit-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); - background-image: -o-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); - background-image: linear-gradient(to bottom, var(--accent-color-hover, var(--accent-color))); + background-color: rgb(var(--accent-color)); + background-image: -moz-linear-gradient(top, var(--accent-color-hover), rgb(var(--accent-color))); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--accent-color-hover)), to(rgb(var(--accent-color)))); + background-image: -webkit-linear-gradient(top, var(--accent-color-hover, rgb(var(--accent-color)))); + background-image: -o-linear-gradient(top, var(--accent-color-hover, rgb(var(--accent-color)))); + background-image: linear-gradient(to bottom, var(--accent-color-hover, rgb(var(--accent-color)))); } + .dashboard-stats-info-item .sub-count { - color: var(--accent-color); + color: rgb(var(--accent-color)); } -.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { - background-color: var(--accent-color); - border-color: var(--accent-color); + +.pagination>.active>a, +.pagination>.active>span, +.pagination>.active>a:hover, +.pagination>.active>span:hover, +.pagination>.active>a:focus, +.pagination>.active>span:focus { + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + color: var(--button-text-hover); } -a:hover, a:focus { - color: var(--accent-color); + +a:hover, +a:focus { + color: var(--link-color-hover); } + table.display td:hover a { - color: var(--accent-color); + color: var(--link-color-hover); } -.user-overview-stats-instance h3, .user-player-instance-playcount h3, .summary-content-title h1, .summary-content-title h1 a { - color: var(--accent-color); + +.user-overview-stats-instance h3, +.user-player-instance-playcount h3, +.summary-content-title h1, +.summary-content-title h1 a { + color: var(--text-hover); } -.user-info-nav > .active > a { - color: var(--accent-color); + +.user-info-nav>.active>a { + color: rgb(var(--accent-color)); } -a:hover .dashboard-recent-media-poster, a:hover .dashboard-recent-media-cover { - webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + +a:hover .dashboard-recent-media-poster, +a:hover .dashboard-recent-media-cover { + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } -.nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { - color: var(--accent-color); + +.nav-settings>.active>a, +.nav-settings>.active>a:hover, +.nav-settings>.active>a:focus { + color: rgb(var(--accent-color)); } + div.advanced-setting { - border-left: 1px solid var(--accent-color); + border-left: 1px solid rgb(var(--accent-color)); } + .docker-setting { - color: var(--accent-color); + color: rgb(var(--accent-color)); } -.modal-body strong, .modal-body strong i.fa { - color: var(--accent-color); + +.modal-body strong, +.modal-body strong i.fa { + color: rgb(var(--accent-color)); } + .user-info-nav a:hover { color: var(--accent-color-hover) } -a:hover .dashboard-activity-poster, a:hover .dashboard-activity-cover { - -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + +a:hover .dashboard-activity-poster, +a:hover .dashboard-activity-cover { + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } -a:hover .dashboard-stats-poster, a:hover .dashboard-stats-cover, a:hover .dashboard-stats-circle, a:hover .dashboard-stats-square { - -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + +a:hover .dashboard-stats-poster, +a:hover .dashboard-stats-cover, +a:hover .dashboard-stats-circle, +a:hover .dashboard-stats-square { + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } + a:hover .item-children-poster { - webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } + .dashboard-activity-terminate-session:hover { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + a .dashboard-activity-metadata-user-thumb:hover { - -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } + .stream-info .heading { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + a .library-user-instance-box:hover { - -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } + .summary-navbar-list .breadcrumb a:hover { - color: var(--accent-color); + color: rgb(var(--accent-color)); } + .dashboard-recent-media-metacontainer h3.text-muted a:hover { - color: var(--accent-color); + color: rgb(var(--accent-color)); } -a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover,.summary-poster-face-overlay { - -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); - -moz-box-shadow: inset 0 0 0 2px var(--accent-color); - box-shadow: inset 0 0 0 2px var(--accent-color); + +a .poster-face:hover, +a .cover-face:hover, +a .users-poster-face:hover, +.summary-poster-face-overlay { + -webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + -moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); + box-shadow: inset 0 0 0 2px rgb(var(--accent-color)); } + .submenu li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -span > a.active, .stacked-configs > li > span > span.active { - color: var(--accent-color); + +span>a.active, +.stacked-configs>li>span>span.active { + color: rgb(var(--accent-color)); } -.accordion li.open .link, .accordion li.open .link i.fa { - color: var(--accent-color); + +.accordion li.open .link, +.accordion li.open .link i.fa { + color: rgb(var(--accent-color)); } + .news-body a:hover { - color: var(--accent-color); + color: var(--link-color-hover); } \ No newline at end of file diff --git a/CSS/themes/thelounge/thelounge-base.css b/CSS/themes/thelounge/thelounge-base.css index 813e6f8b..09710f1c 100644 --- a/CSS/themes/thelounge/thelounge-base.css +++ b/CSS/themes/thelounge/thelounge-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -14,23 +13,37 @@ #chat .userlist .names { background: rgba(0, 0, 0, 0.25); } + #chat .user-mode:before { background: rgba(0, 0, 0, 0.25); } -@media (max-width: 768px) { - #chat .userlist .names { - box-shadow: 0 0 25px 0 rgba(0,0,0,.5); - background: var(--window-bg-color); - } - } @media (max-width: 768px) { - #viewport.menu-dragging #sidebar, #viewport.menu-open #sidebar { - box-shadow: 0 0 25px 0 rgba(0,0,0,.5); + #chat .userlist .names { + box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5); + background: var(--window-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +@media (max-width: 768px) { + + #viewport.menu-dragging #sidebar, + #viewport.menu-open #sidebar { + box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5); background: rgba(0, 0, 0, 0.85); } } -#chat .chan .notice .user, #chat .notice .content, #chat .notice .time { + +#chat .chan .notice .user, +#chat .notice .content, +#chat .notice .time { color: var(--date-marker-color) !important; } @@ -38,73 +51,129 @@ background: var(--theme-accent); color: #f3f3f3; } + #form { background-color: rgba(0, 0, 0, 0.45); border-color: #0086ff00; color: var(--body-color); } -#sidebar .active, #sidebar .active:hover { + +#sidebar .active, +#sidebar .active:hover { background-color: rgba(0, 0, 0, 0.25); } -#chat .msg.motd .text, code, .irc-monospace { + +#chat .msg.motd .text, +code, +.irc-monospace { background: rgba(0, 0, 0, 0.45); color: #f3f3f3; } -#chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist { + +#chat .content, +#windows #chat .header, +#chat .user-mode::before, +#chat .userlist { border-color: rgba(255, 255, 255, 0.08); } + #chat .msg[data-type=motd] .text { background: rgba(255, 255, 255, 0.08); } /* Dropdown menu */ -#context-menu, .textcomplete-menu { +#context-menu, +.textcomplete-menu { background: var(--body-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; /* color: white !important; */ } -.context-menu-item, .textcomplete-item { + +.context-menu-item, +.textcomplete-item { color: var(--body-color); } -#chat .userlist .user.active, .context-menu-item:focus, .context-menu-item:hover, .textcomplete-item:focus, .textcomplete-item:hover, .textcomplete-menu .active { + +#chat .userlist .user.active, +.context-menu-item:focus, +.context-menu-item:hover, +.textcomplete-item:focus, +.textcomplete-item:hover, +.textcomplete-menu .active { background-color: rgba(255, 255, 255, 0.08); transition: none; outline: 0; } -#chat.table.ignore-list td, #chat table.ban-list td, #chat table.ban-list th, #chat table.channel-list td, #chat table.channel-list th, #chat table.ignore-list th, #chat table.invite-list td, #chat table.invite-list th { + +#chat.table.ignore-list td, +#chat table.ban-list td, +#chat table.ban-list th, +#chat table.channel-list td, +#chat table.channel-list th, +#chat table.ignore-list th, +#chat table.invite-list td, +#chat table.invite-list th { padding: 5px; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } + #chat .userlist .count { background-color: rgba(0, 0, 0, 0.6); } -#footer button:hover, #sidebar .chan:hover { + +#footer button:hover, +#sidebar .chan:hover { background-color: rgba(255, 255, 255, 0.08); } + #settings .extra-help:before { content: "\F059"; color: var(--body-color); } + #windows .window h2 { color: var(--body-color); } + #windows .window h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } -.input:not(:disabled):focus, .input:not(:disabled):hover { + +.input:not(:disabled):focus, +.input:not(:disabled):hover { border-color: #ffffff; } -.btn:active, .btn:focus, .input:focus { + +.btn:active, +.btn:focus, +.input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); } + .btn { color: inherit; } + .mentions-popup { background: var(--body-bg-color); - } -#chat .toggle-content{ - background: var(--highlight-bg-color); - + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } + +#chat .toggle-content { + background: var(--highlight-bg-color); + +} \ No newline at end of file diff --git a/CSS/themes/transmission/aquamarine.css b/CSS/themes/transmission/aquamarine.css index 5cd84050..70eb0c15 100644 --- a/CSS/themes/transmission/aquamarine.css +++ b/CSS/themes/transmission/aquamarine.css @@ -13,10 +13,4 @@ /* TRANSMISSION AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #009688; - --default-button-color-hover: #12afa0; - --progress-color: #009688; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/transmission/dark.css b/CSS/themes/transmission/dark.css index 7d08a151..0c85fd45 100644 --- a/CSS/themes/transmission/dark.css +++ b/CSS/themes/transmission/dark.css @@ -13,10 +13,4 @@ /* TRANSMISSION DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --default-button-color: #3d3d3d; - --default-button-color-hover: #5a5a5a; - --progress-color: #3d3d3d; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/transmission/dracula.css b/CSS/themes/transmission/dracula.css new file mode 100644 index 00000000..3803ded9 --- /dev/null +++ b/CSS/themes/transmission/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* TRANSMISSION DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/transmission/hotline.css b/CSS/themes/transmission/hotline.css index 8ca0cbbd..3808077a 100644 --- a/CSS/themes/transmission/hotline.css +++ b/CSS/themes/transmission/hotline.css @@ -13,10 +13,4 @@ /* TRANSMISSION HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --default-button-color: #F44336; - --default-button-color-hover: rgb(247, 106, 96); - --progress-color: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/transmission/organizr-dark.css b/CSS/themes/transmission/organizr-dark.css index cc435b63..ed54a2a5 100644 --- a/CSS/themes/transmission/organizr-dark.css +++ b/CSS/themes/transmission/organizr-dark.css @@ -13,10 +13,4 @@ /* TRANSMISSION DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --default-button-color: #2cabe3; - --default-button-color-hover: rgb(44 171 227 / .8); - --progress-color: #2cabe3; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/transmission/plex.css b/CSS/themes/transmission/plex.css index 5f06db86..96dfca77 100644 --- a/CSS/themes/transmission/plex.css +++ b/CSS/themes/transmission/plex.css @@ -13,10 +13,4 @@ /* TRANSMISSION PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --progress-color: #cc7b19; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/transmission/space-gray.css b/CSS/themes/transmission/space-gray.css index a80cea2a..43751404 100644 --- a/CSS/themes/transmission/space-gray.css +++ b/CSS/themes/transmission/space-gray.css @@ -13,10 +13,4 @@ /* TRANSMISSION SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/transmission/transmission-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --progress-color: #607D8B; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/transmission/transmission-base.css b/CSS/themes/transmission/transmission-base.css index be5756c2..4a21c055 100644 --- a/CSS/themes/transmission/transmission-base.css +++ b/CSS/themes/transmission/transmission-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,535 +11,972 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); +* { + outline: none !important; +} + +a { + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); +} body { background: var(--main-bg-color); - color: #dedede; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); } -/* Scrollbar */ - @media only screen and (min-width: 768px) { + +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } - } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } -div#torrent_container {background: var(--main-bg-color)} +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +div#torrent_container { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +div#torrent_inspector #inspector_header #torrent_inspector_name, +.prefs-section .title { + color: var(--text-hover); +} /* Toolbar */ div#toolbar { background: rgba(0, 0, 0, .25); background-image: none; border-bottom: 1px solid transparent; - } - div#toolbar > div#toolbar-separator { display:none} - /* Open torrent folder*/ - div#toolbar > div#toolbar-open {background-image: none;} - div#toolbar > div#toolbar-open:hover:before {color: #fff;} - div#toolbar > div#toolbar-open:before { +} + +div#toolbar>div#toolbar-separator { + display: none +} + +/* Open torrent folder*/ +div#toolbar>div#toolbar-open { + background-image: none; +} + +div#toolbar>div#toolbar-open:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-open:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f07c"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, 0.7); + color: rgb(var(--accent-color)); margin-right: 5px; - } - /* Stop Icon */ - div#toolbar > div#toolbar-remove {background-image: none;} - div#toolbar > div#toolbar-remove:hover:before {color: #fff;} - div#toolbar > div#toolbar-remove:before { +} + +/* Stop Icon */ +div#toolbar>div#toolbar-remove { + background-image: none; +} + +div#toolbar>div#toolbar-remove:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-remove:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f28d"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); + color: rgb(var(--accent-color)); margin-left: 5px; - } - /* Start Icon */ - div#toolbar > div#toolbar-start {background-image: none;} - div#toolbar > div#toolbar-start:hover:before {color: #fff;} - div#toolbar > div#toolbar-start:before { +} + +/* Start Icon */ +div#toolbar>div#toolbar-start { + background-image: none; +} + +div#toolbar>div#toolbar-start:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-start:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f152"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); + color: rgb(var(--accent-color)); margin-left: 5px; - } - /* Pause Icon */ - div#toolbar > div#toolbar-pause {background-image: none;} - div#toolbar > div#toolbar-pause:hover:before {color: #fff;} - div#toolbar > div#toolbar-pause:before { +} + +/* Pause Icon */ +div#toolbar>div#toolbar-pause { + background-image: none; +} + +div#toolbar>div#toolbar-pause:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-pause:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f04c"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); + color: rgb(var(--accent-color)); margin-left: 5px; - } - /* Start-all Icon */ - div#toolbar > div#toolbar-start-all {background-image: none;} - div#toolbar > div#toolbar-start-all:hover:before {color: #fff;} - div#toolbar > div#toolbar-start-all:before { +} + +/* Start-all Icon */ +div#toolbar>div#toolbar-start-all { + background-image: none; +} + +div#toolbar>div#toolbar-start-all:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-start-all:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f101"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); + color: rgb(var(--accent-color)); margin-left: 5px; - } - /* Pause-all Icon */ - div#toolbar > div#toolbar-pause-all {background-image: none;} - div#toolbar > div#toolbar-pause-all:hover:before {color: #fff;} - div#toolbar > div#toolbar-pause-all:before { +} + +/* Pause-all Icon */ +div#toolbar>div#toolbar-pause-all { + background-image: none; +} + +div#toolbar>div#toolbar-pause-all:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-pause-all:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f28b"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /* Info Icon */ - div#toolbar > div#toolbar-inspector {background-image: none;} - div#toolbar > div#toolbar-inspector:hover:before {color: #fff;} - div#toolbar > div#toolbar-inspector:before { + color: rgb(var(--accent-color)); +} + +/* Info Icon */ +div#toolbar>div#toolbar-inspector { + background-image: none; +} + +div#toolbar>div#toolbar-inspector:hover:before { + color: var(--accent-color-hover); +} + +div#toolbar>div#toolbar-inspector:before { font-family: "Font Awesome 5 Free"; - font-size: 33px; + font-size: 33px; content: "\f05a"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } + color: rgb(var(--accent-color)); +} + /* Statusbar */ - #statusbar {border-bottom: 1px solid transparent;background-image:none; background-color:rgba(0, 0, 0, 0.25)} - #statusbar #filter input#torrent_search { - outline:none; +#statusbar { + border-bottom: 1px solid transparent; + background-image: none; + background-color: rgba(0, 0, 0, 0.25) +} + +#statusbar #filter input#torrent_search { + outline: none; border: none; border-radius: 2px; - } - #statusbar #filter input#torrent_search.blur { +} + +#statusbar #filter input#torrent_search.blur { color: #999; outline: none; border: none; border-radius: 2px; - } - #statusbar #speed-info #speed-dn-icon {background: none;} - #statusbar #speed-info #speed-dn-icon:before { +} + +#statusbar #speed-info #speed-dn-icon { + background: none; +} + +#statusbar #speed-info #speed-dn-icon:before { font-family: "Font Awesome 5 Free"; font-size: 10px; content: "\f0d7"; - font-weight: 900; - } - #statusbar #speed-info #speed-up-icon {background: none;} - #statusbar #speed-info #speed-up-icon:before { + font-weight: 900; +} + +#statusbar #speed-info #speed-up-icon { + background: none; +} + +#statusbar #speed-info #speed-up-icon:before { font-family: "Font Awesome 5 Free"; font-size: 10px; content: "\f0d8"; - font-weight: 900; - } - ul.torrent_list,ul.torrent_list li.torrent.even {background: rgba(0, 0, 0, 0.25);} - ul.torrent_list li.torrent div.torrent_name {color: #dedede;} - ul.torrent_list li.torrent.selected {background-color: rgba(0, 0, 0, .45);} - ul.torrent_list li.torrent { + font-weight: 900; +} + +ul.torrent_list, +ul.torrent_list li.torrent.even { + background: rgba(0, 0, 0, 0.25); +} + +ul.torrent_list li.torrent div.torrent_name { + color: var(--text-hover); +} + +ul.torrent_list li.torrent.selected { + background-color: rgba(0, 0, 0, 0.25); +} + +ul.torrent_list li.torrent { border-bottom: 1px solid rgba(204, 204, 204, 0.1); padding: 4px 30px 5px 14px; - color: #dedede; + color: var(--text); background-color: rgba(255, 255, 255, 0.08); - } +} + /* Modal */ - div.dialog_container div.dialog_window { +div.dialog_container div.dialog_window { background: var(--modal-bg-color); - background-color: #eee; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: none !important; opacity: 1; - } - div.dialog_container div.dialog_window h2.dialog_heading,div#upload_container div.dialog_window div.dialog_message label {color: #dedede} - input {color:#dedede} - #add-dialog-folder-input,#torrent_upload_url {color:#000;outline:none;} - div.dialog_container div.dialog_window div.dialog_message {color: #dedede;} - /* Button*/ - div.dialog_container div.dialog_window a { - background-color: var(--default-button-color); - border: 1px solid var(--default-button-color); - color: #dedede; - } - div.dialog_container div.dialog_window a:hover, div.dialog_container div.dialog_window a:active { - background: none; - background-color: var(--default-button-color-hover); - border: 1px solid var(--default-button-color-hover); - } +} - ul.torrent_list div.torrent_progress_bar.complete.leeching { - background-position: left 0px; - border-color: var(--progress-color); - } - .ui-widget-content { - border: 1px solid transparent; - background: var(--modal-bg-color); +div.dialog_container div.dialog_window h2.dialog_heading, +div#upload_container div.dialog_window div.dialog_message label { + color: #dedede +} + +input { + color: var(--text-hover); + background: rgba(0, 0, 0, .25) +} + +#add-dialog-folder-input, +#torrent_upload_url { + color: var(--text-hover); + outline: none; +} + +div.dialog_container div.dialog_window div.dialog_message { color: #dedede; - } - .ui-widget-header {color: #dedede !important;} - .ui-widget .ui-widget { +} + +/* Button*/ +div.dialog_container div.dialog_window a { + background-color: var(--button-color); + border: 1px solid var(--button-color); + color: var(--button-text); +} + +div.dialog_container div.dialog_window a:hover, +div.dialog_container div.dialog_window a:active { + background: none; + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); +} + +/* ul.torrent_list div.torrent_progress_bar.complete.leeching { + background-position: left 0px; + background: var(--progress-color); + border-color: var(--progress-color); + } */ + +/* ul.torrent_list div.torrent_progress_bar { + height: 100%; + position: absolute; + top: 0px; + left: 0px; + background-image: none; + background-repeat: repeat-x; + border: 1px solid #888; + } */ + +.ui-widget-content { + border: 1px solid transparent; + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.ui-widget-header { + color: var(--text-hover) !important; +} + +.ui-widget .ui-widget { box-shadow: none; - } - .ui-widget { +} + +.ui-widget { -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); - } - #download-dir,#seedRatioLimit,#idle-seeding-limit,#speed-limit-up,#speed-limit-down,#alt-speed-up,#alt-speed-down,#peer-limit-per-torrent,#peer-limit-global,#blocklist-url,#blocklist-update-button,#peer-port {color: black; outline:none;} - .ui-widget-header { +} + +#download-dir, +#seedRatioLimit, +#idle-seeding-limit, +#speed-limit-up, +#speed-limit-down, +#alt-speed-up, +#alt-speed-down, +#peer-limit-per-torrent, +#peer-limit-global, +#blocklist-url, +#blocklist-update-button, +#peer-port { + color: black; + outline: none; +} + +.ui-widget-header { border: 1px solid transparent; background: none; color: #222; font-weight: bold; - } - .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { +} + +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active { border: 1px solid transparent; background: rgba(255, 255, 255, .1) !important; font-weight: normal; color: #dedede; - } - .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { +} + +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { color: #dedede; text-decoration: none; - } - .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { +} + +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited { color: #dedede; text-decoration: none; - } - .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { +} + +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { border: 1px solid transparent; background: rgba(0, 0, 0, 0.25); font-weight: normal; color: #dedede; - } - .ui-tabs .ui-tabs-nav li.ui-tabs-active { +} + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0px; - } - /*Close Icon*/ - ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close {background-image: none;} - ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close:hover:before {color: #fff;} - ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close:before { +} + +/*Close Icon*/ +ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close { + background-image: none; +} + +ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close:hover:before { + color: var(--text-hover); +} + +ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close:before { font-family: "Font Awesome 5 Free"; - font-size: 10px; + font-size: 10px; content: "\f00d"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } + color: var(--text); +} /*Inspector*/ - div#torrent_inspector { +div#torrent_inspector { border-left: 1px solid transparent; -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); - } - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > * { +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* { border-color: transparent; height: auto; background-color: rgba(0, 0, 0, 0.25); - } - div#torrent_inspector div.inspector_torrent_file_list_entry_name, div#torrent_inspector ul.tier_list .tracker_activity,div#torrent_inspector ul.tier_list table,div#torrent_inspector div.tracker_host { +} + +div#torrent_inspector div.inspector_torrent_file_list_entry_name, +div#torrent_inspector ul.tier_list .tracker_activity, +div#torrent_inspector ul.tier_list table, +div#torrent_inspector div.tracker_host { color: #dedede; - } - /*Info button*/ - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info {background-image: none;background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:before { +} + +/*Info button*/ +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f05a"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info.selected {background-image: none;background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info.selected:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-info.selected:before { + color: var(--text); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f05a"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } + color: var(--text); +} - /*Peers Button*/ - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers {background-image: none;background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:before { +/*Peers Button*/ +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0c0"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers.selected {background-image:none; background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers.selected:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-peers.selected:before { + color: var(--text); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0c0"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } + color: var(--text); +} - /*Tracker Button*/ - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers {background-image: none;background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:before { +/*Tracker Button*/ +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f233"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers.selected {background-image:none; background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers.selected:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-trackers.selected:before { + color: var(--text); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f233"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } + color: var(--text); +} - /*Files Button*/ - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files {background-image: none;background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:before { +/*Files Button*/ +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0c5"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files.selected {background-image:none; background-color: rgba(0, 0, 0, 0.25);} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files.selected:hover:before {color: #fff;} - div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs > #inspector-tab-files.selected:before { + color: var(--text); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected { + background-image: none; + background-color: rgba(0, 0, 0, 0.25); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected:hover:before { + color: var(--text-hover); +} + +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, +div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0c5"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - tr.inspector_peer_entry.odd { + color: var(--text); +} + +tr.inspector_peer_entry.odd { background-color: rgba(255, 255, 255, 0.1); - } - /* Priority buttons */ - div.file-priority-radiobox > * {border-color: transparent; width: auto;} - - /*Low pri*/ - div.file-priority-radiobox > div.low {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.low:hover:before {color: #fff;} - div.file-priority-radiobox > div.low:before { +} + +/* Priority buttons */ +div.file-priority-radiobox>* { + border-color: transparent; + width: auto; +} + +/*Low pri*/ +div.file-priority-radiobox>div.low { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.low:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.low:before { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f107"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.file-priority-radiobox > div.low:active, div.file-priority-radiobox > div.low.selected {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.low:active, div.file-priority-radiobox > div.low.selected:hover:before {color: #fff;} - div.file-priority-radiobox > div.low:active, div.file-priority-radiobox > div.low.selectedbefore { + color: var(--text); +} + +div.file-priority-radiobox>div.low:active, +div.file-priority-radiobox>div.low.selected { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.low:active, +div.file-priority-radiobox>div.low.selected:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.low:active, +div.file-priority-radiobox>div.low.selectedbefore { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f107"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /*Normal pri*/ - div.file-priority-radiobox > div.normal {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.normal:hover:before {color: #fff;} - div.file-priority-radiobox > div.normal:before { + color: var(--text); +} + +/*Normal pri*/ +div.file-priority-radiobox>div.normal { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.normal:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.normal:before { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f068"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal.selected {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal.selected:hover:before {color: #fff;} - div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal.selectedbefore { + color: var(--text); +} + +div.file-priority-radiobox>div.normal:active, +div.file-priority-radiobox>div.normal.selected { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.normal:active, +div.file-priority-radiobox>div.normal.selected:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.normal:active, +div.file-priority-radiobox>div.normal.selectedbefore { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f068"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /*High pri*/ - div.file-priority-radiobox > div.high {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.high:hover:before {color: #fff;} - div.file-priority-radiobox > div.high:before { + color: var(--text); +} + +/*High pri*/ +div.file-priority-radiobox>div.high { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.high:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.high:before { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f106"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.file-priority-radiobox > div.high:active, div.file-priority-radiobox > div.high.selected {background-color: transparent;background-image: none;} - div.file-priority-radiobox > div.high:active, div.file-priority-radiobox > div.high.selected:hover:before {color: #fff;} - div.file-priority-radiobox > div.high:active, div.file-priority-radiobox > div.high.selectedbefore { + color: var(--text); +} + +div.file-priority-radiobox>div.high:active, +div.file-priority-radiobox>div.high.selected { + background-color: transparent; + background-image: none; +} + +div.file-priority-radiobox>div.high:active, +div.file-priority-radiobox>div.high.selected:hover:before { + color: var(--text-hover); +} + +div.file-priority-radiobox>div.high:active, +div.file-priority-radiobox>div.high.selectedbefore { font-family: "Font Awesome 5 Free"; - font-size: 30px; + font-size: 30px; content: "\f106"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div#torrent_inspector li.inspector_tracker_entry.odd { + color: var(--text); +} + +div#torrent_inspector li.inspector_tracker_entry.odd { background-color: rgba(255, 255, 255, 0.1); - } +} + /*Bottom Toolbar*/ - div.torrent_footer { +div.torrent_footer { border-top: 1px solid transparent; background-color: rgba(0, 0, 0, .25); background-image: none; height: 30px; - } - div.torrent_footer > div { +} + +div.torrent_footer>div { border: 1px solid transparent; - } - /* Settings Icon */ - div.torrent_footer #settings_menu {background-color: transparent; background-image: none;} - div.torrent_footer #settings_menu:hover:before {color: #fff;} - div.torrent_footer #settings_menu:before { +} + +/* Settings Icon */ +div.torrent_footer #settings_menu { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #settings_menu:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #settings_menu:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f013"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.torrent_footer #settings_menu:active, div.torrent_footer #settings_menu.selected {background-color: transparent; background-image: none;} - div.torrent_footer #settings_menu:active, div.torrent_footer #settings_menu.selected:hover:before {color: #fff;} - div.torrent_footer #settings_menu:active, div.torrent_footer #settings_menu.selected:before { + color: var(--text); +} + +div.torrent_footer #settings_menu:active, +div.torrent_footer #settings_menu.selected { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #settings_menu:active, +div.torrent_footer #settings_menu.selected:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #settings_menu:active, +div.torrent_footer #settings_menu.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f013"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /* Prefs Icon */ - div.torrent_footer #prefs-button {background-color: transparent; background-image: none;} - div.torrent_footer #prefs-button:hover:before {color: #fff;} - div.torrent_footer #prefs-button:before { + color: var(--text); +} + +/* Prefs Icon */ +div.torrent_footer #prefs-button { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #prefs-button:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #prefs-button:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0ad"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button.selected {background-color: transparent; background-image: none;} - div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button.selected:hover:before {color: #fff;} - div.torrent_footer #prefs-button:active, div.torrent_footer #prefs-button.selected:before { + color: var(--text); +} + +div.torrent_footer #prefs-button:active, +div.torrent_footer #prefs-button.selected { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #prefs-button:active, +div.torrent_footer #prefs-button.selected:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #prefs-button:active, +div.torrent_footer #prefs-button.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0ad"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /* Turtle Icon */ - div.torrent_footer #turtle-button {background-color: transparent; background-image: none;} - div.torrent_footer #turtle-button:hover:before {color: #fff;} - div.torrent_footer #turtle-button:before { + color: var(--text); +} + +/* Turtle Icon */ +div.torrent_footer #turtle-button { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #turtle-button:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #turtle-button:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f3fd"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button.selected {background-color: transparent; background-image: none;} - div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button.selected:hover:before {color: #fff;} - div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button.selected:before { + color: var(--text); +} + +div.torrent_footer #turtle-button:active, +div.torrent_footer #turtle-button.selected { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #turtle-button:active, +div.torrent_footer #turtle-button.selected:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #turtle-button:active, +div.torrent_footer #turtle-button.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f3fd"; font-weight: 900; display: inline-block; - color: white; - } - /* Compact Icon */ - div.torrent_footer #compact-button {background-color: transparent; background-image: none;} - div.torrent_footer #compact-button:hover:before {color: #fff;} - div.torrent_footer #compact-button:before { + color: white; +} + +/* Compact Icon */ +div.torrent_footer #compact-button { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #compact-button:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #compact-button:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0ca"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - div.torrent_footer #compact-button:active, div.torrent_footer #compact-button.selected {background-color: transparent; background-image: none;} - div.torrent_footer #compact-button:active, div.torrent_footer #compact-button.selected:hover:before {color: #fff;} - div.torrent_footer #compact-button:active, div.torrent_footer #compact-button.selected:before { + color: var(--text); +} + +div.torrent_footer #compact-button:active, +div.torrent_footer #compact-button.selected { + background-color: transparent; + background-image: none; +} + +div.torrent_footer #compact-button:active, +div.torrent_footer #compact-button.selected:hover:before { + color: var(--text-hover); +} + +div.torrent_footer #compact-button:active, +div.torrent_footer #compact-button.selected:before { font-family: "Font Awesome 5 Free"; - font-size: 20px; + font-size: 20px; content: "\f0ca"; font-weight: 900; display: inline-block; - color: rgba(255, 255, 255, .7); - } - /*Compact mode*/ - ul.torrent_list li.torrent div.torrent_name.paused,ul.torrent_list li.torrent.compact div.torrent_name { + color: var(--text); +} + +/*Compact mode*/ +ul.torrent_list li.torrent div.torrent_name.paused, +ul.torrent_list li.torrent.compact div.torrent_name { color: #dedede; - } - /* Settings menu */ - .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { +} + +/* Settings menu */ +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { border: 1px solid transparent; - background:none; + background: none; background-color: rgba(255, 255, 255, 0.1); - color: #dedede; - outline:none; - } - .ui-icon, .ui-widget-content .ui-icon { + color: var(--text-hover); + outline: none; +} + +.ui-icon, +.ui-widget-content .ui-icon { background-image: url(https://htpc.deathbybandaid.net/assets/theme.park/Resources/transmission/icons.png); - } - +} diff --git a/CSS/themes/unraid/aquamarine.css b/CSS/themes/unraid/aquamarine.css index 15e9c172..60595db0 100644 --- a/CSS/themes/unraid/aquamarine.css +++ b/CSS/themes/unraid/aquamarine.css @@ -13,22 +13,4 @@ /* UNRAID AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --text-muted: #6c757d; - --link-color: #12afa0; - - --heatmap-color-1: #002D24; - --heatmap-color-2: #004B40; - --heatmap-color-3: #006B5F; - --heatmap-color-4: #008C7E; - --heatmap-color-5: #12AFA0; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/unraid/dark.css b/CSS/themes/unraid/dark.css index baae117b..ce6178e4 100644 --- a/CSS/themes/unraid/dark.css +++ b/CSS/themes/unraid/dark.css @@ -13,22 +13,4 @@ /* UNRAID DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #646464; - --accent-color-hover: #ffffff73; - --text: #b7b7b7; - --text-hover: #fff; - --text-muted: #6c757d; - --link-hover: rgba(255, 255, 255, 0.45); - - --heatmap-color-1: #303030; - --heatmap-color-2: #5E5E5E; - --heatmap-color-3: #919191; - --heatmap-color-4: #C6C6C6; - --heatmap-color-5: #FFFFFF; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); diff --git a/CSS/themes/unraid/dracula.css b/CSS/themes/unraid/dracula.css new file mode 100644 index 00000000..e7cb8070 --- /dev/null +++ b/CSS/themes/unraid/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* UNRAID DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/unraid/hotline.css b/CSS/themes/unraid/hotline.css index 2e2ea47b..fbaf710b 100644 --- a/CSS/themes/unraid/hotline.css +++ b/CSS/themes/unraid/hotline.css @@ -13,22 +13,4 @@ /* UNRAID HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --text-muted: #6c757d; - --link-hover: #F44336; - - --heatmap-color-1: #690000; - --heatmap-color-2: #890000; - --heatmap-color-3: #AC0002; - --heatmap-color-4: #D0191D; - --heatmap-color-5: #F44336; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/unraid/organizr-dark.css b/CSS/themes/unraid/organizr-dark.css index 644a0da0..c2d11488 100644 --- a/CSS/themes/unraid/organizr-dark.css +++ b/CSS/themes/unraid/organizr-dark.css @@ -13,22 +13,4 @@ /* UNRAID ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text: #96a2b4; - --text-hover: #fff; - --text-muted: #6c757d; - --link-color: #2cabe3; - - --heatmap-color-1: #002A57; - --heatmap-color-2: #004878; - --heatmap-color-3: #00679A; - --heatmap-color-4: #0088BE; - --heatmap-color-5: #2CABE3; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/unraid/plex.css b/CSS/themes/unraid/plex.css index e2444d06..1216ec6b 100644 --- a/CSS/themes/unraid/plex.css +++ b/CSS/themes/unraid/plex.css @@ -13,22 +13,4 @@ /* UNRAID PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --text-muted: #6c757d; - --link-color:#e5a00d; - - --heatmap-color-1: #492000; - --heatmap-color-2: #6E4500; - --heatmap-color-3: #9B6C00; - --heatmap-color-4: #CC9500; - --heatmap-color-5: #FFC107; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/unraid/space-gray.css b/CSS/themes/unraid/space-gray.css index dbd10633..b4ed2e32 100644 --- a/CSS/themes/unraid/space-gray.css +++ b/CSS/themes/unraid/space-gray.css @@ -13,23 +13,4 @@ /* UNRAID SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/unraid/unraid-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --text-muted: #6c757d; - --link-color: #81a6b7; - - --heatmap-color-1: #002634; - --heatmap-color-2: #1D4352; - --heatmap-color-3: #3E6272; - --heatmap-color-4: #5F8394; - --heatmap-color-5: #81A6B7; - -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/unraid/unraid-base.css b/CSS/themes/unraid/unraid-base.css index 8b8112e7..fcfdfcc7 100644 --- a/CSS/themes/unraid/unraid-base.css +++ b/CSS/themes/unraid/unraid-base.css @@ -11,11 +11,33 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ * { - outline: none; + outline: none; } + body { color: var(--text); background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +h1, +h2, +h3, +h4, +h5, +h6, +strong { + color: var(--text-hover); +} + +i.fa.fa-fw { + color: var(--text-hover) !important; } a, @@ -25,16 +47,36 @@ i.control { color: var(--link-color); } +a:hover, +a.static:hover, +i.control:hover { + color: var(--link-color-hover); +} + #template { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #menu { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #header .text-left { - border-right: solid medium var(--accent-color); + border-right: solid medium rgb(var(--accent-color)); } #header { @@ -54,15 +96,27 @@ i.control { #nav-block #nav-item:focus:after, #nav-block #nav-item:hover:after, #nav-block #nav-item.active:after { - background: var(--accent-color); + background: var(--accent-color-hover); } #nav-block #nav-item a:hover { - color: var(--text-hover) !important; + color: var(--text-hover); } #nav-block #nav-item a { - color: var(--text) !important; + color: var(--text); +} + +#nav-item.active a { + color: rgb(var(--accent-color)) !important; +} + +#nav-item.active a:hover { + color: rgb(var(--accent-color)) !important; +} + +textarea { + background: rgb(0 0 0 / 25%); } /*DASHBOARD*/ @@ -73,12 +127,23 @@ table.share_status.dashboard { table.share_status.dashboard tr>td.next { border-top: 1px solid rgba(255, 255, 255, .25); + color: var(--text-hover); } span.outer.solid { background-color: transparent; } +span.inner { + width: 137px !important; +} + +thead.sortable, +thead, +table.tablesorter thead tr th { + color: var(--text-hover); +} + .sys, .usage-disk, .usage-bar { @@ -89,6 +154,14 @@ span.outer.solid { background-color: #4caf50 } +#db-box3>tbody.smb.share.share1.sortable>tr>td>a { + color: var(--link-color); +} + +#db-box3>tbody.smb.share.share1.sortable>tr>td>a:hover { + color: var(--link-color-hover); +} + .green-text, .passed, .green { @@ -99,7 +172,7 @@ span.outer.solid { #title { border-bottom: 1px solid rgba(255, 255, 255, .25); background-color: rgba(0, 0, 0, .5); - color: var(--text) + color: var(--text-hover); } table { @@ -165,7 +238,7 @@ a.button:hover, .sweet-alert button:hover, #template button[type=button]:hover, #template button:hover { - color: var(--button-text); + color: var(--button-text-hover); text-shadow: var(--text-shadow) var(--button-color-hover); box-shadow: var(--box-shadow) var(--button-color-hover); background-color: var(--button-color-hover); @@ -183,7 +256,7 @@ a.button:hover, } .swal-button:hover { - color: var(--button-text) !important; + color: var(--button-text-hover) !important; text-shadow: var(--text-shadow) var(--button-color-hover) !important; box-shadow: var(--box-shadow) var(--button-color-hover) !important; background-color: var(--button-color-hover) !important; @@ -222,21 +295,40 @@ label.checkbox input:checked~.checkmark { .logLine.spacing { color: var(--text); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #sb-info-inner, #sb-loading-inner, -div.sb-message, -#sb-title, -#sb-title-inner { +div.sb-message { color: var(--text); background-color: transparent; } +#sb-title, +#sb-title-inner { + color: var(--text-hover); + background-color: transparent; +} + + #sb-wrapper { border: 1px rgba(0, 0, 0, 0) solid; color: var(--text); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } #sb-loading, @@ -246,82 +338,134 @@ iframe { background: transparent !important; } +div.Panel i.PanelIcon { + color: var(--text-hover); +} + /* PLUGINS */ div.tab [type=radio]:checked+label, div.tab [type=radio]+label:hover { - border: 1px solid var(--accent-color); + border: 1px solid var(--accent-color-hover); + color: var(--text-hover); +} + +div.tab [type=radio]+label { + border: 1px solid rgb(255 255 255 / 25%); + background-color: rgb(0 0 0 / 50%); + opacity: 0.5; } /* FOOTER */ #footer { color: var(--text); background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* CA */ .ca_holderDocker { - background-color: rgb(255 255 255 / 10%) !important; - border-color: rgb(255 255 255 / 25%) !important; + background-color: rgb(0 0 0 / 10%) !important; + border-color: rgb(0 0 0 / 25%) !important; +} + +.ca_holderDocker::before { + color: rgb(255 255 255 / 40%) !important; +} + +.selectedMenu { + color: rgb(var(--accent-color)) !important; } -.selectedMenu, .hoverMenu { - color: var(--link-color) !important; + color: var(--link-color-hover) !important; +} + +.ca_descriptionArea:hover, +a.ca_repoPopup:hover { + color: var(--button-text-hover) !important; } .ca_templatesDisplay .ca_holderFav { - background: var(--button-color-hover) !important; - color: var(--text-hover) !important; + background: rgb(var(--accent-color), .7) !important; + color: var(--label-text-color) !important; } a.ca_appreadmore:hover { - color: var(--accent-color-hover) !important; + color: var(--link-color-hover) !important; } .ca_bottomLine .appIcons:hover, .ca_bottomLine .unpinned:hover { text-decoration: none; - color: var(--accent-color) !important; + color: var(--link-color-hover) !important; } .tooltipster-sidetip.tooltipster-right .tooltipster-box { - border-left: 3px solid var(--accent-color) !important; + border-left: 3px solid rgb(var(--accent-color)) !important; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-box { - border-top: 3px solid var(--accent-color) !important; + border-top: 3px solid rgb(var(--accent-color)) !important; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { - border-top-color: var(--accent-color) !important; + border-top-color: rgb(var(--accent-color)) !important; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { - border-right-color: var(--accent-color) !important; + border-right-color: rgb(var(--accent-color)) !important; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border, .tooltipster-sidetip.tooltipster-top .tooltipster-box { - border-bottom-color: var(--accent-color) !important; + border-bottom-color: rgb(var(--accent-color)) !important; } .appIconsPopUp:hover { - color: var(--accent-color) !important; + color: var(--accent-color-hover) !important; } a.popUpLink:hover { color: var(--accent-color-hover) !important; } +li.caMenuItem { + color: var(--link-color); +} + +li.caMenuItem:hover { + color: var(--link-color-hover); +} + /* AZURE THEME*/ div.frame, div.tabs { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /*DROPDOWN MENU*/ .dropdown-menu { - background: var(--modal-bg-color) !important; + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .dropdown-menu a { @@ -363,9 +507,16 @@ div.shade-black { background: var(--modal-bg-color) !important; } */ -.showSweetAlert, +.showSweetAlert:not([data-has-cancel-button="false"]), .swal-overlay--show-modal .swal-modal { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .sweet-alert h2, @@ -379,15 +530,22 @@ div.shade-black { /*HELP TEXT*/ blockquote { - border-top: 2px solid rgb(255 255 255 / 25%); - border-bottom: 2px solid rgb(255 255 255 / 25%); + border-top: 2px solid rgb(0 0 0 / 25%); + border-bottom: 2px solid rgb(0 0 0 / 25%); color: var(--text); - background-color: rgb(255 255 255 / 10%); + background-color: rgb(0 0 0 / 10%); } /* MY SERVERS */ .UnraidUPC .--hasBanner-custom .UnraidUPC-dropdown { - background-color: var(--modal-bg-color) !important; + background: var(--drop-down-menu-bg) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%) !important; -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); @@ -410,9 +568,9 @@ blockquote { .UnraidUPC-dropdown button:hover { background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops))); background-image: linear-gradient(90deg, var(--tw-gradient-stops)); - --tw-gradient-from: var(--accent-color); - --tw-gradient-stops: var(--tw-gradient-from), var(--accent-color, rgba(226, 40, 40, 0)); - --tw-gradient-to: var(--accent-color); + --tw-gradient-from: var(--accent-color-hover); + --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--accent-color)), rgba(226, 40, 40, 0); + --tw-gradient-to: var(--accent-color-hover); --tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity)); outline: 0; @@ -426,5 +584,9 @@ unraid-authed::part(div[data-v-050c892a] > button) { #contDescription { background: rgb(0 0 0 / 25%); padding: 1%; - border-radius: 5px; + border-radius: 5px; +} + +dt { + color: var(--text-hover); } \ No newline at end of file diff --git a/CSS/themes/uptime-kuma/uptime-kuma-base.css b/CSS/themes/uptime-kuma/uptime-kuma-base.css new file mode 100644 index 00000000..08a4d46b --- /dev/null +++ b/CSS/themes/uptime-kuma/uptime-kuma-base.css @@ -0,0 +1,395 @@ +@import url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/defaults/placeholders.css"); + +body, +.dark { + margin: 0; + font-family: var(--bs-body-font-family); + font-size: var(--bs-body-font-size); + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: var(--text); + text-align: var(--bs-body-text-align); + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/* TEXT */ +.text-secondary { + color: var(--text-muted) !important; +} + +.text-dark, +.form-text { + color: var(--text); +} + +.stats p, +.word, +footer { + color: var(--text) !important; +} + +.title { + color: rgb(var(--accent-color)) !important +} + +h6, +.h6, +h5, +.h5, +h4, +.h4, +h3, +.h3, +h2, +.h2, +h1, +.h1 { + color: var(--text-hover) +} + +a:hover:not(.btn), +.nav-link:hover, +.dark a:hover:not(.btn) { + color: var(--link-color-hover); +} + +a, +.nav-link, +.dark a, +.dark .nav-link { + color: var(--link-color); +} + +.url a { + color: var(--link-color) !important; + text-decoration: underline; +} + + + +/* CARDS */ +.shadow-box, +.dark .shadow-box { + box-shadow: 0px 0px 20px 10px #0000001a; + background: rgb(255 255 255 / 8%); +} + +.list .item:hover { + background-color: rgba(255, 255, 255, .15) !important; +} + +.dark .list .item.active, +.list .item.active { + background-color: rgba(0, 0, 0, .25) !important; +} + +.dark .hp-bar-big .beat.empty, +.hp-bar-big .beat.empty { + background-color: rgba(255, 255, 255, .45) !important; +} + + +canvas { + filter: invert(1) +} + +/* TABLES */ + +th { + color: var(--text-hover) +} + +td { + color: var(--text); +} + +.dark .table-hover>tbody>tr:hover, +.table-hover>tbody>tr:hover { + --bs-table-accent-bg: rgba(0, 0, 0, .2); + color: var(--text); +} + + +/* MENUS */ +.dropdown-menu { + color: var(--text) !important; + background: var(--drop-down-menu-bg) !important; +} + +.dropdown-item { + color: var(--text) !important; +} + +.dropdown-item:hover, +.dropdown-item:focus { + color: var(--text-hover) !important; + background-color: rgba(255, 255, 255, .1) !important; +} + +.dark .dropdown-clear-data ul { + border-color: #0000 !important; + color: var(--text) !important; + background: var(--drop-down-menu-bg) !important; +} + +/* HEADER */ +.dark header, +#app>div>header { + background-color: rgba(0, 0, 0, .15) !important; + border-bottom-color: rgba(255, 255, 255, 0) !important; +} + +/* BUTTONS */ + +.dark .btn-primary { + color: var(--button-text); +} + +.btn-primary { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-check:focus+.btn-primary, +.btn-primary:focus { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5) +} + +.btn-check:checked+.btn-primary, +.btn-check:active+.btn-primary, +.btn-primary:active, +.btn-primary.active, +.show>.btn-primary.dropdown-toggle { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-check:checked+.btn-primary:focus, +.btn-check:active+.btn-primary:focus, +.btn-primary:active:focus, +.btn-primary.active:focus, +.show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5) +} + +.btn-primary:disabled, +.btn-primary.disabled { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + + +.btn-outline-primary, +.btn-outline-secondary { + color: var(--button-text); + border-color: var(--button-color); +} + +.btn-outline-primary:hover, +.btn-outline-secondary:hover { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-check:focus+.btn-outline-primary, +.btn-outline-primary:focus { + box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5); +} + +.btn-check:checked+.btn-outline-primary, +.btn-check:active+.btn-outline-primary, +.btn-outline-primary:active, +.btn-outline-primary.active, +.btn-outline-primary.dropdown-toggle.show { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-check:checked+.btn-outline-primary:focus, +.btn-check:active+.btn-outline-primary:focus, +.btn-outline-primary:active:focus, +.btn-outline-primary.active:focus, +.btn-outline-primary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5); +} + +.btn-outline-primary:disabled, +.btn-outline-primary.disabled { + color: var(--button-color); + background-color: transparent +} + + +.nav-pills .nav-link.active, +.nav-pills .show>.nav-link { + color: var(--button-text) !important; + background-color: var(--button-color); +} + +.dark #importBackup::file-selector-button, +#importBackup::file-selector-button { + color: var(--button-text) !important; + background-color: var(--button-color) !important; +} + +.dark #importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button, +#importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button { + color: var(--button-text-hover) !important; + background-color: var(--button-color-hover) !important; +} + +/* FORMS */ + +.dark .form-control, +.dark .form-select, +.form-select, +.form-control { + color: var(--text); + background-color: rgba(0, 0, 0, .25); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); + background-repeat: no-repeat; +} + +.dark .form-select:focus, +.dark .form-control:focus, +.form-select:focus, +.form-control:focus { + background: #1f1f1f; + box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25); + border-color: rgba(var(--accent-color), 0.25); +} + +.dark .form-control, +.dark .form-select, +.form-select, +.form-control { + border-color: #0000; +} + + + +.form-check-input:checked { + background-color: var(--button-color); + border-color: var(--button-color); +} + +.form-check-input[type=checkbox]:indeterminate { + background-color: var(--button-color); + border-color: var(--button-color); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") +} + +.dark .multiselect__content-wrapper, +.multiselect__content-wrapper { + background: var(--drop-down-menu-bg) !important; + border-color: transparent !important; +} + +.multiselect { + color: var(--text); +} + +.multiselect__option--highlight { + background: rgb(var(--accent-color)) !important; + outline: none; + color: #fff +} + +.multiselect__option--highlight:after { + content: attr(data-select); + background: rgb(var(--accent-color)) !important; + color: #fff +} + +.multiselect__option--selected, +.dark .multiselect__option--selected { + background: rgba(0, 0, 0, .45); + color: #fff; + font-weight: 700; +} + +.multiselect__tag, +.dark .multiselect__tag { + background: var(--button-color) !important; + color: var(--button-text) !important; +} + +.dark .multiselect__tags, +.multiselect__tags { + color: var(--text); + background-color: rgba(0, 0, 0, .25); + border-color: transparent; +} + +.dark .multiselect__input, +.dark .multiselect__single, +.multiselect__input, +.multiselect__single { + background-color: rgba(0, 0, 0, .25) !important; + color: var(--text-hover) !important; +} + +/* MODAL */ +.dark .modal-header, +.modal-header { + border-color: rgb(var(--accent-color)); + border-radius: 1rem 1rem 0 0; + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dark .modal-footer, +.modal-footer { + border-color: rgb(var(--accent-color)); + background: var(--modal-footer-color); + border-radius: 0 0 1rem 1rem; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dark .modal-content, +.modal-content { + box-shadow: 0 15px 70px #000; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} \ No newline at end of file diff --git a/CSS/themes/vuetorrent/aquamarine.css b/CSS/themes/vuetorrent/aquamarine.css index 3ae09112..6cc6a7e3 100644 --- a/CSS/themes/vuetorrent/aquamarine.css +++ b/CSS/themes/vuetorrent/aquamarine.css @@ -12,23 +12,4 @@ /* VUETORRENT AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 18, 175, 160; - --accent-color-hover: #009688; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - - --text: #eee; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/dark.css b/CSS/themes/vuetorrent/dark.css index 6b16dfd1..0268a43f 100644 --- a/CSS/themes/vuetorrent/dark.css +++ b/CSS/themes/vuetorrent/dark.css @@ -12,23 +12,4 @@ /* VUETORRENT DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0, 0%, 100%, .15); - --button-color-hover: hsla(0, 0%, 100%, .30); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text: #eee; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/dracula.css b/CSS/themes/vuetorrent/dracula.css new file mode 100644 index 00000000..77cac969 --- /dev/null +++ b/CSS/themes/vuetorrent/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* VUETORRENT DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/hotline.css b/CSS/themes/vuetorrent/hotline.css index d95ebda3..18bb7704 100644 --- a/CSS/themes/vuetorrent/hotline.css +++ b/CSS/themes/vuetorrent/hotline.css @@ -12,23 +12,4 @@ /* VUETORRENT HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0, 0%, 100%, .15); - --button-color-hover: hsla(0, 0%, 100%, .30); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #0b3161; - --link-color-hover: #fff; - - --text: #eee; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/organizr-dark.css b/CSS/themes/vuetorrent/organizr-dark.css index 41c7a61a..afb15957 100644 --- a/CSS/themes/vuetorrent/organizr-dark.css +++ b/CSS/themes/vuetorrent/organizr-dark.css @@ -12,23 +12,4 @@ /* VUETORRENT ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 44, 171, 227; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - - --text: #96a2b4; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/plex.css b/CSS/themes/vuetorrent/plex.css index 5f0d2666..5ba5c2a4 100644 --- a/CSS/themes/vuetorrent/plex.css +++ b/CSS/themes/vuetorrent/plex.css @@ -12,23 +12,4 @@ /* VUETORRENT PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - - --text: #eee; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/space-gray.css b/CSS/themes/vuetorrent/space-gray.css index ba9540e0..6312af37 100644 --- a/CSS/themes/vuetorrent/space-gray.css +++ b/CSS/themes/vuetorrent/space-gray.css @@ -12,23 +12,4 @@ /* VUETORRENT SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/vuetorrent/vuetorrent-base.css); - -:root { - --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 129, 166, 183; - --accent-color-hover: #607D8B; - --queue-color: #81a6b7; - --link-color: #9adfff; - --link-color-hover: #fff; - - --text: #eee; - --text-muted: #ccc; - --text-hover: #fff; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/vuetorrent/vuetorrent-base.css b/CSS/themes/vuetorrent/vuetorrent-base.css index c2e0f61e..de0f10a4 100644 --- a/CSS/themes/vuetorrent/vuetorrent-base.css +++ b/CSS/themes/vuetorrent/vuetorrent-base.css @@ -32,6 +32,13 @@ body, .v-application .background { color: var(--text); background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } html { @@ -67,7 +74,7 @@ p, .theme--dark.v-label, .theme--light.v-label, .theme--light.v-counter { - color: var(--text); + color: var(--text-hover); } .v-application .grey--text { @@ -88,7 +95,7 @@ p, .theme--dark.v-subheader, .theme--light.v-subheader { - color: hsla(0, 0%, 100%, .7); + color: var(--text-hover); } .theme--light.v-input, @@ -114,8 +121,15 @@ p, background-color: rgba(0, 0, 0, .25) !important; } -.v-app-bar.v-app-bar--is-scrolled{ +.v-app-bar.v-app-bar--is-scrolled { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .v-navigation-drawer__content .theme--dark.v-card, @@ -180,6 +194,13 @@ p, .v-dialog .theme--light.v-list, .v-dialog .theme--dark.v-list { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); } @@ -303,6 +324,73 @@ p, color: #FFF; } +.v-application .torrent-paused-color .caption, +.v-application .torrent-seeding-color .caption, +.v-application .torrent-done-color .caption { + color: #ccc !important; +} + +.v-application .torrent-paused-color { + background-color: rgb(156 163 175 / 70%) !important; + border-color: rgb(156 163 175 / 70%) !important; +} + +.v-application .torrent-seeding-color { + background-color: rgba(78, 205, 230, .7) !important; + border-color: rgba(78, 205, 230, .7) !important; +} + +.v-application .torrent-done-color { + background-color: rgba(22, 87, 62, .7) !important; + border-color: rgba(22, 87, 62, .7) !important; +} + +.v-application .torrent-downloading-color { + background-color: rgba(91, 185, 116, .7) !important; + border-color: rgba(91, 185, 116, .7) !important; +} + +.v-application .torrent-fail-color { + background-color: rgba(248, 62, 112, .7) !important; + border-color: rgba(248, 62, 112, .7) !important; +} + +.v-application .torrent-queued-color { + background-color: rgba(46, 94, 170, .7) !important; + border-color: rgba(46, 94, 170, .7) !important; +} + +.v-application .torrent-checking-color { + background-color: rgba(255, 112, 67, .7) !important; + border-color: rgba(255, 112, 67, .7) !important; +} + +.v-application .torrent-stalled-color { + background-color: rgba(74, 222, 128, .7) !important; + border-color: rgba(74, 222, 128, .7) !important; +} + +.v-application .torrent-metadata-color { + background-color: rgba(126, 87, 194, .7) !important; + border-color: rgba(126, 87, 194, .7) !important; +} + +.v-application .torrent-moving-color { + background-color: rgba(255, 170, 44, .7) !important; + border-color: rgba(255, 170, 44, .7) !important; +} + +.torrent-paused-color .v-chip.paused, +.torrent-seeding-color .v-chip.seeding, +.torrent-done-color .v-chip.downloading, +.torrent-done-color .v-chip.fail, +.torrent-done-color .v-chip.queued, +.torrent-done-color .v-chip.checking, +.torrent-done-color .v-chip.stalled, +.torrent-done-color .v-chip.metadata, +.torrent-done-color .v-chip.moving { + color: #fff !important; +} /* DROPDOWN */ .v-menu__content .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled), @@ -312,17 +400,24 @@ p, .v-menu__content .theme--dark.theme--dark.v-list, .v-menu__content .theme--light.theme--light.v-list { -background: var(--modal-bg-color) !important; + background: var(--modal-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .theme--dark.v-icon, .theme--light.v-icon { - color: #fff; + color: rgb(var(--accent-color)) !important; } .theme--light.v-divider, .theme--dark.v-divider { - border-color: rgba(255, 255, 255,.2) !important; + border-color: rgba(255, 255, 255, .2) !important; } /* TABLE */ @@ -375,6 +470,13 @@ background: var(--modal-bg-color) !important; .apexcharts-tooltip.apexcharts-theme-light { color: var(--text); background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; border: 1px solid rgba(255, 255, 255, .1); } diff --git a/CSS/themes/webtools/webtools-base.css b/CSS/themes/webtools/webtools-base.css index 0d8ff061..9182d5b6 100644 --- a/CSS/themes/webtools/webtools-base.css +++ b/CSS/themes/webtools/webtools-base.css @@ -12,6 +12,13 @@ body { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } a, @@ -25,6 +32,13 @@ a:hover { #content:before { background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } * { @@ -94,12 +108,26 @@ content-loading .contentLoading { /* MODALS */ .ngdialog.ngdialog-theme-default .ngdialog-content { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text) !important; border: #f0505000 5px solid; } .fm .settings { background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text); Border: 1px solid rgba(0, 0, 0, 0.2); } diff --git a/CSS/themes/xbackbone/aquamarine.css b/CSS/themes/xbackbone/aquamarine.css index 68004ce9..2595d44c 100644 --- a/CSS/themes/xbackbone/aquamarine.css +++ b/CSS/themes/xbackbone/aquamarine.css @@ -12,22 +12,4 @@ /* XBACKBONE AQUAMARINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 0, 150, 136; - --accent-color-hover: #12afa0; - --queue-color: #009688; - --link-color: #0ed2bf; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/dark.css b/CSS/themes/xbackbone/dark.css index a8bbf291..445804d5 100644 --- a/CSS/themes/xbackbone/dark.css +++ b/CSS/themes/xbackbone/dark.css @@ -12,22 +12,4 @@ /* XBACKBONE DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/dracula.css b/CSS/themes/xbackbone/dracula.css new file mode 100644 index 00000000..7d97cd5c --- /dev/null +++ b/CSS/themes/xbackbone/dracula.css @@ -0,0 +1,15 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/hotline.css b/CSS/themes/xbackbone/hotline.css index dd760fe4..48d4f21d 100644 --- a/CSS/themes/xbackbone/hotline.css +++ b/CSS/themes/xbackbone/hotline.css @@ -12,22 +12,4 @@ /* XBACKBONE HOTLINE THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #FFF; - - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --queue-color: #6b5; - --link-color: #ddd; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/organizr-dark.css b/CSS/themes/xbackbone/organizr-dark.css index 6631e75b..2cf2d68f 100644 --- a/CSS/themes/xbackbone/organizr-dark.css +++ b/CSS/themes/xbackbone/organizr-dark.css @@ -12,22 +12,4 @@ /* XBACKBONE ORGANIZR-DARK THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 44, 171, 227; - --accent-color-hover: white; - --queue-color: #2cabe3; - --link-color: #2cabe3; - --link-color-hover: #fff; - - --text:#96a2b4; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/plex.css b/CSS/themes/xbackbone/plex.css index ce5b8d6e..edcc42a8 100644 --- a/CSS/themes/xbackbone/plex.css +++ b/CSS/themes/xbackbone/plex.css @@ -12,22 +12,4 @@ /* XBACKBONE PLEX THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --queue-color: #27c24c; - --link-color: #e5a00d; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; - } \ No newline at end of file +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/space-gray.css b/CSS/themes/xbackbone/space-gray.css index deece252..d79c2b16 100644 --- a/CSS/themes/xbackbone/space-gray.css +++ b/CSS/themes/xbackbone/space-gray.css @@ -12,22 +12,4 @@ /* XBACKBONE SPACE GRAY THEME */ @import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - - --accent-color: 96, 125, 139; - --accent-color-hover: #81a6b7; - --queue-color: #81a6b7; - --link-color: #81a6b7; - --link-color-hover: #fff; - - --text:#eee; - --text-hover: #fff; - --text-muted: #999; -} +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/themes/xbackbone/xbackbone-base.css b/CSS/themes/xbackbone/xbackbone-base.css index ff27dc37..f3bd8eb9 100644 --- a/CSS/themes/xbackbone/xbackbone-base.css +++ b/CSS/themes/xbackbone/xbackbone-base.css @@ -12,6 +12,13 @@ .bg-light { background: var(--main-bg-color) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } /* Scrollbar */ @@ -25,7 +32,14 @@ body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } } @@ -63,12 +77,18 @@ body, } .navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover { +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .show>.nav-link, +.col-form-label { color: var(--text-hover); } +.navbar-dark .navbar-nav .nav-link.active { + color: rgb(var(--accent-color)); +} + .card-header { - color: #FFF; + color: rgb(var(--accent-color)); } .text-muted { @@ -84,10 +104,13 @@ code { border-radius: 5px; } +pre { + color: rgb(var(--accent-color)); +} + /* LINKS */ a { color: var(--link-color); - text-decoration: underline; } a:hover { @@ -99,9 +122,29 @@ a:hover { background: rgba(0, 0, 0, .15) !important; } +.navbar-dark .navbar-brand { + color: rgb(var(--accent-color)); +} + +.navbar-dark .navbar-brand:focus, +.navbar-dark .navbar-brand:hover { + color: var(--accent-color-hover); +} + /* DROPDOWN MENU */ .dropdown-menu { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-header { + color: var(--text-hover); } .dropdown-item:focus, @@ -122,7 +165,8 @@ a:hover { } /* TABLES */ -.table-hover>tbody>tr:hover { +.table-hover>tbody>tr:hover, +.table>thead { color: var(--text-hover); } @@ -158,12 +202,24 @@ a:hover { .btn-primary:hover, .btn-outline-dark:hover, -.btn-outline-secondary:hover { +.btn-outline-secondary:hover, +.btn-check:focus+.btn-primary, +.btn-primary:focus { color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } +.btn-check:active+.btn-primary:focus, +.btn-check:checked+.btn-primary:focus, +.btn-primary.active:focus, +.btn-primary:active:focus, +.show>.btn-primary.dropdown-toggle:focus, +.btn-check:focus+.btn-primary, +.btn-primary:focus { + box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), .5); +} + .btn-outline-primary, .btn-outline-info { color: var(--button-color); @@ -202,8 +258,98 @@ a:hover { .btn-outline-info.dropdown-toggle.show:focus, .btn-outline-info:active:focus { box-shadow: 0 0 0 0.25rem rgb(var(--accent-color), .5); + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); } +.btn-outline-info:not(:disabled):not(.disabled).active:focus, +.btn-outline-info:not(:disabled):not(.disabled):active:focus, +.show>.btn-outline-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem rgb(var(--accent-color) / 50%); +} + +.btn-outline-info:not(:disabled):not(.disabled).active, +.btn-outline-info:not(:disabled):not(.disabled):active, +.show>.btn-outline-info.dropdown-toggle { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-outline-primary { + color: var(--button-color); + border-color: var(--button-color); +} + +.btn-outline-primary:hover { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-outline-primary.focus, +.btn-outline-primary:focus { + box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5) +} + +.btn-outline-primary.disabled, +.btn-outline-primary:disabled { + color: var(--button-color); + background-color: transparent +} + +.btn-outline-primary:not(:disabled):not(.disabled).active, +.btn-outline-primary:not(:disabled):not(.disabled):active, +.show>.btn-outline-primary.dropdown-toggle { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, +.btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.show>.btn-outline-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .5) +} + +.btn-outline-dark { + color: var(--button-text); + border-color: var(--button-color); +} + +.btn-outline-dark:hover { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-outline-dark.focus, +.btn-outline-dark:focus { + box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .5) +} + +.btn-outline-dark.disabled, +.btn-outline-dark:disabled { + color: var(--button-color); + background-color: transparent +} + +.btn-outline-dark:not(:disabled):not(.disabled).active, +.btn-outline-dark:not(:disabled):not(.disabled):active, +.show>.btn-outline-dark.dropdown-toggle { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, +.btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.show>.btn-outline-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) +} + + /* FORMS */ .form-control { color: #fff; diff --git a/CSS/variables/aquamarine.css b/CSS/variables/aquamarine.css new file mode 100644 index 00000000..88dd6fe6 --- /dev/null +++ b/CSS/variables/aquamarine.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 18, 175, 160; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #0ed2bf; + --link-color-hover: #36e7d6; + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #009688; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: rgb(21, 213, 194); + --petio-spinner: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 18, 175, 160; +} diff --git a/CSS/variables/dark.css b/CSS/variables/dark.css new file mode 100644 index 00000000..d3ecc7ac --- /dev/null +++ b/CSS/variables/dark.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --drop-down-menu-bg: #2d2d2d; + + --button-color: #7a7a7a; + --button-color-hover: #9b9b9b; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 170, 170, 170; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --link-color: #7a7a7a; + --link-color-hover: #fff; + --label-text-color: black; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #6b5; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #e5a00d; + --petio-spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 255, 255, 255; +} \ No newline at end of file diff --git a/CSS/variables/dracula.css b/CSS/variables/dracula.css new file mode 100644 index 00000000..f7fbf04f --- /dev/null +++ b/CSS/variables/dracula.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: #282a36; + + --modal-bg-color: #1e2029; + --modal-header-color: #1e2029; + --modal-footer-color: #1e2029; + + --drop-down-menu-bg: #1e2029; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 80, 250, 123; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #50fa7b; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #bd93f9; + --petio-spinner: invert(79%) sepia(27%) saturate(1033%) hue-rotate(74deg) brightness(104%) contrast(96%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 80, 250, 123; + } \ No newline at end of file diff --git a/CSS/variables/hotline-old.css b/CSS/variables/hotline-old.css new file mode 100644 index 00000000..2fb98d4a --- /dev/null +++ b/CSS/variables/hotline-old.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 244, 67, 54; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #fff; + --link-color-hover: #fff; + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #6b5; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #FB3122; + --petio-spinner: invert(32%) sepia(35%) saturate(3786%) hue-rotate(341deg) brightness(100%) contrast(92%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 244, 67, 54; +} \ No newline at end of file diff --git a/CSS/variables/hotline.css b/CSS/variables/hotline.css new file mode 100644 index 00000000..f576a9d6 --- /dev/null +++ b/CSS/variables/hotline.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; + + --modal-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(90deg, rgba(247,101,184,1) 0%, rgba(21, 95, 165) 100%) center center/cover no-repeat fixed; + + --button-color: #f98dc9; + --button-color-hover: #ff4cb1; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 249, 141, 201; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color:rgb(255, 179, 222); + --link-color-hover: #d7fffe; + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #f98dc9; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #f765b8; + --petio-spinner: invert(78%) sepia(17%) saturate(4447%) hue-rotate(290deg) brightness(109%) contrast(95%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 215,255,254; +} \ No newline at end of file diff --git a/CSS/variables/hotpink.css b/CSS/variables/hotpink.css new file mode 100644 index 00000000..d52be3ee --- /dev/null +++ b/CSS/variables/hotpink.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: #204c80; + + --button-color: #fb3f62; + --button-color-hover: rgba(251, 63, 98, .8); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 251, 63, 98; + --accent-color-hover: rgba(var(--accent-color), .8); + --link-color: rgb(0, 255, 157); + --link-color-hover: rgba(0, 255, 157, 0.8); + --label-text-color: #282a36; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; + + --arr-queue-color: rgb(0, 255, 157); + --plex-poster-unwatched: #fb3f62; + --petio-spinner: invert(29%) sepia(87%) saturate(2199%) hue-rotate(331deg) brightness(115%) contrast(97%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 251, 63, 98; + } + diff --git a/CSS/variables/mind.css b/CSS/variables/mind.css new file mode 100644 index 00000000..1fef006a --- /dev/null +++ b/CSS/variables/mind.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 242, 0, .7) 0%, #0d0400 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/mind.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --button-color: #e1d500; + --button-color-hover: #c3b900; + --button-text: #000; + --button-text-hover: #000; + + --accent-color: 228, 216, 0; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #fff200; + --link-color-hover: #fff200cc; + --label-text-color: #000; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #e1d500; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #e1d500; + --petio-spinner: invert(72%) sepia(97%) saturate(1218%) hue-rotate(10deg) brightness(102%) contrast(101%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 228, 216, 0; +} \ No newline at end of file diff --git a/CSS/variables/onedark.css b/CSS/variables/onedark.css new file mode 100644 index 00000000..5cf895aa --- /dev/null +++ b/CSS/variables/onedark.css @@ -0,0 +1,31 @@ +:root { + --main-bg-color: #282c34; + + --modal-bg-color: #1e222a; + --modal-header-color: #1e222a; + --modal-footer-color: #1e222a; + + --drop-down-menu-bg: #1e222a; + + --button-color: #61afef; + --button-color-hover: #c678dd; + --button-text: #e2e4eb; + --button-text-hover: #FFF; + + --accent-color: 152, 195, 121; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #61afef; + --link-color-hover: #56b6c2; + --label-text-color: #282c34; + + --text:#abb2bf; + --text-hover: #c8ccd4; + --text-muted: #565c64; + + /*Specials*/ + --arr-queue-color: #e5c07b; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #e06c75; + --petio-spinner: invert(79%) sepia(27%) saturate(1033%) hue-rotate(74deg) brightness(104%) contrast(96%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 97, 175, 239; + } + diff --git a/CSS/variables/organizr-dark.css b/CSS/variables/organizr-dark.css new file mode 100644 index 00000000..909aa4ea --- /dev/null +++ b/CSS/variables/organizr-dark.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: #1f1f1f; + + --modal-bg-color: #333; + --modal-header-color: #232323; + --modal-footer-color: #232323; + + --drop-down-menu-bg: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 44, 171, 227; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #2cabe3; + --link-color-hover: #3cc5ff; + --label-text-color: #fff; + + --text:#96a2b4; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #2cabe3; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #2cabe3; + --petio-spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 44, 171, 227; +} \ No newline at end of file diff --git a/CSS/variables/overseerr.css b/CSS/variables/overseerr.css new file mode 100644 index 00000000..7cffcc5e --- /dev/null +++ b/CSS/variables/overseerr.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%); + + --modal-bg-color: #1f2937; + --modal-header-color: #1f2937; + --modal-footer-color: #1f2937; + + --drop-down-menu-bg: #374151; + + --button-color: #4f46e5; + --button-color-hover: #6366f1; + --button-text: #e5e7eb; + --button-text-hover: #fff; + + --accent-color: 167, 139, 250; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #6366f1; + --link-color-hover: #a78bfa; + --label-text-color: #000; + + --text: #d1d5db; + --text-hover: #fff; + --text-muted: #9ca3af; + + /*Specials*/ + --arr-queue-color: #6366f1; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #6366f1; + --petio-spinner: invert(24%) sepia(59%) saturate(3411%) hue-rotate(237deg) brightness(91%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 98, 116, 145; +} \ No newline at end of file diff --git a/CSS/variables/plex.css b/CSS/variables/plex.css new file mode 100644 index 00000000..40438071 --- /dev/null +++ b/CSS/variables/plex.css @@ -0,0 +1,32 @@ + :root { + /* --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; + */ + --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0) center center/cover no-repeat fixed; + + --modal-bg-color: #1f2326; + --modal-header-color: #1f2326; + --modal-footer-color: #323232; + + --drop-down-menu-bg: #191a1c; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 229, 160, 13; + --accent-color-hover: #ffc107; + --link-color: #e5a00d; + --link-color-hover: #fff; + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #27c24c; /* Servarr apps + Bazarr*/ + --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 255, 193, 7; + } \ No newline at end of file diff --git a/CSS/variables/power.css b/CSS/variables/power.css new file mode 100644 index 00000000..ded7885c --- /dev/null +++ b/CSS/variables/power.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(166, 40, 140, .7) 0%, rgba(11,8,51,1) 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/power.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --button-color: #85096b; + --button-color-hover: #85096bcc; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 166, 40, 140; + --accent-color-hover: rgba(var(--accent-color), 0.8); + --link-color: rgb(223, 21, 179); + --link-color-hover: rgb(255, 0, 200); + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: rgb(216, 22, 174); /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: rgb(216, 22, 174); + --petio-spinner: invert(8%) sepia(62%) saturate(6812%) hue-rotate(304deg) brightness(108%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 166, 40, 140; +} \ No newline at end of file diff --git a/CSS/variables/reality.css b/CSS/variables/reality.css new file mode 100644 index 00000000..1322bf76 --- /dev/null +++ b/CSS/variables/reality.css @@ -0,0 +1,27 @@ + :root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(232, 11, 11, 0.7) 0%, #08000d 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/reality.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; + + --button-color: #e80c0b; + --button-color-hover: #e80c0bcc; + --accent-color: 232, 12, 11; + --accent-color-hover: rgba(var(--accent-color), 0.8); + --link-color: rgb(232, 12, 11); + --link-color-hover: rgba(232, 12, 11,.8); + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #e80c0b; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: rgb(232, 12, 11); + --petio-spinner: invert(14%) sepia(93%) saturate(3042%) hue-rotate(349deg) brightness(112%) contrast(116%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 232, 12, 11; +} \ No newline at end of file diff --git a/CSS/variables/soul.css b/CSS/variables/soul.css new file mode 100644 index 00000000..a634a651 --- /dev/null +++ b/CSS/variables/soul.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 153, 0, .7) 0%, #3c0015 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/soul.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; + + --button-color: rgb(255, 153, 0); + --button-color-hover: #f90c; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 255, 153, 0; + --accent-color-hover: rgba(var(--accent-color), 0.8); + --link-color: rgb(255, 153, 0); + --link-color-hover: rgb(255, 153, 0, 0.8); + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: rgb(255, 153, 0); /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #880030; + --petio-spinner: invert(9%) sepia(44%) saturate(6901%) hue-rotate(327deg) brightness(101%) contrast(110%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 255, 153, 0; +} \ No newline at end of file diff --git a/CSS/variables/space-gray.css b/CSS/variables/space-gray.css new file mode 100644 index 00000000..bcfda52b --- /dev/null +++ b/CSS/variables/space-gray.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 129, 166, 183; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: #81a6b7; + --link-color-hover: #9adfff; + --label-text-color: #fff; + + --text:#bbb; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #81a6b7; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #70aeca; + --petio-spinner: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 129, 166, 183; +} \ No newline at end of file diff --git a/CSS/variables/space.css b/CSS/variables/space.css new file mode 100644 index 00000000..d0d75258 --- /dev/null +++ b/CSS/variables/space.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(0, 98, 255, .7) 0%, #020013 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/space.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; + --modal-headercolor: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; + + --button-color: #0062ff; + --button-color-hover: #0062ffcc; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 0, 98, 255; + --accent-color-hover: rgba(var(--accent-color), 0.8); + --link-color: rgb(61, 126, 255); + --link-color-hover: rgb(0, 98, 255); + --label-text-color: #fff; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #0062ffcc; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: rgb(0, 98, 255); + --petio-spinner: invert(25%) sepia(99%) saturate(4489%) hue-rotate(214deg) brightness(104%) contrast(109%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 0, 98, 255; +} \ No newline at end of file diff --git a/CSS/variables/time.css b/CSS/variables/time.css new file mode 100644 index 00000000..4926dce3 --- /dev/null +++ b/CSS/variables/time.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center bottom, rgba(109, 247, 81, .7) 0%, #00130c 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed, + url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/time.jpg") center center/cover no-repeat fixed; + --modal-bg-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; + --modal-header-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; + --modal-footer-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; + + --drop-down-menu-bg: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; + + --button-color: rgb(4, 168, 0); + --button-color-hover: rgba(4, 168, 0, .8); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 109, 247, 81; + --accent-color-hover: rgba(var(--accent-color), 0.8); + --link-color: rgb(109, 247, 81); + --link-color-hover: rgba(109, 247, 81,.8); + --label-text-color: #000; + + --text:#ddd; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #6df751cc; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: rgb(109, 247, 81); + --petio-spinner: invert(73%) sepia(74%) saturate(428%) hue-rotate(55deg) brightness(101%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 109, 247, 81; +} \ No newline at end of file diff --git a/Resources/apply_theme.js b/Resources/apply_theme.js new file mode 100644 index 00000000..f2e794d5 --- /dev/null +++ b/Resources/apply_theme.js @@ -0,0 +1,49 @@ +function get_base_sha(app,theme) { + url = `https://api.github.com/repos/gilbn/theme.park/contents/CSS/themes/${app}/${app}-base.css` + const date = new Date().toUTCString(); + fetch(url, { + headers: { "If-Modified-Since": date } + }) + .then(res => res.json()) + .then(data => (injectTheme(app,theme,sha=data.sha || "ratelimited"))) + .catch(err => { throw err }); +} + + function injectTheme(app,theme,sha,container="head") { + if (container === "head") { + html_element = document.head; + } else html_element = document.body; + let link = document.createElement("link"); + url = "https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/" + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = `${url}/${app}/${theme}.css?v=${sha}`; + + html_element.appendChild(link); + } + + function injectAddon(app,addon,container="head") { + if (container === "head") { + html_element = document.head; + } else html_element = document.body; + let link = document.createElement("link"); + url = "https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/" + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = `${url}/${app}/${addon}.css`; + + html_element.appendChild(link); + } + + +// { +// if (res.status) { +// res.json() +// .then(data => console.log(data)) +// } else { +// res.json() +// .then(data => console.log(data)) +// console.info("%c theme.park %c ".concat("ERROR", " "), "color: white; background: #009688; font-weight: 700; font-size: 24px; font-family: Monospace;", "color: red; background: white; font-weight: 700; font-size: 24px; font-family: Monospace;"); +// console.info(`%c Error %c Failed to fetch the url, double check the name passed in your subfilter.. `, "color: white; background: red; font-weight: 700;", "color: red; background: white; font-weight: 700;"); +// } +// }) diff --git a/Resources/landing-page/assets/img/dracula-small.jpg b/Resources/landing-page/assets/img/dracula-small.jpg new file mode 100644 index 00000000..7f2e9048 Binary files /dev/null and b/Resources/landing-page/assets/img/dracula-small.jpg differ diff --git a/Resources/landing-page/assets/img/dracula.png b/Resources/landing-page/assets/img/dracula.png new file mode 100644 index 00000000..fbffef93 Binary files /dev/null and b/Resources/landing-page/assets/img/dracula.png differ diff --git a/Resources/landing-page/assets/img/hotline-small.jpg b/Resources/landing-page/assets/img/hotline-small.jpg index 32d8df79..68c31714 100644 Binary files a/Resources/landing-page/assets/img/hotline-small.jpg and b/Resources/landing-page/assets/img/hotline-small.jpg differ diff --git a/Resources/landing-page/assets/img/hotline.png b/Resources/landing-page/assets/img/hotline.png index b1d8d5a0..43a0ab57 100644 Binary files a/Resources/landing-page/assets/img/hotline.png and b/Resources/landing-page/assets/img/hotline.png differ diff --git a/Resources/landing-page/assets/img/hotpink-small.jpg b/Resources/landing-page/assets/img/hotpink-small.jpg new file mode 100644 index 00000000..dae9d361 Binary files /dev/null and b/Resources/landing-page/assets/img/hotpink-small.jpg differ diff --git a/Resources/landing-page/assets/img/hotpink.png b/Resources/landing-page/assets/img/hotpink.png new file mode 100644 index 00000000..189eaa02 Binary files /dev/null and b/Resources/landing-page/assets/img/hotpink.png differ diff --git a/Resources/landing-page/assets/img/overseer-small.jpg b/Resources/landing-page/assets/img/overseer-small.jpg new file mode 100644 index 00000000..a0df0d5a Binary files /dev/null and b/Resources/landing-page/assets/img/overseer-small.jpg differ diff --git a/Resources/landing-page/assets/img/overseer.png b/Resources/landing-page/assets/img/overseer.png new file mode 100644 index 00000000..de685d62 Binary files /dev/null and b/Resources/landing-page/assets/img/overseer.png differ diff --git a/Resources/landing-page/assets/img/plex-small.jpg b/Resources/landing-page/assets/img/plex-small.jpg index bd781357..9da859a8 100644 Binary files a/Resources/landing-page/assets/img/plex-small.jpg and b/Resources/landing-page/assets/img/plex-small.jpg differ diff --git a/Resources/landing-page/assets/img/plex.png b/Resources/landing-page/assets/img/plex.png index e3dd2907..9a6dda5f 100644 Binary files a/Resources/landing-page/assets/img/plex.png and b/Resources/landing-page/assets/img/plex.png differ diff --git a/Resources/landing-page/assets/img/slides/10.jpg b/Resources/landing-page/assets/img/slides/10.jpg index 81a676e9..680a2076 100644 Binary files a/Resources/landing-page/assets/img/slides/10.jpg and b/Resources/landing-page/assets/img/slides/10.jpg differ diff --git a/Resources/landing-page/assets/img/slides/11.jpg b/Resources/landing-page/assets/img/slides/11.jpg new file mode 100644 index 00000000..6338bdbc Binary files /dev/null and b/Resources/landing-page/assets/img/slides/11.jpg differ diff --git a/Resources/landing-page/assets/img/slides/12.jpg b/Resources/landing-page/assets/img/slides/12.jpg new file mode 100644 index 00000000..0a213b3a Binary files /dev/null and b/Resources/landing-page/assets/img/slides/12.jpg differ diff --git a/Resources/landing-page/assets/img/slides/13.jpg b/Resources/landing-page/assets/img/slides/13.jpg new file mode 100644 index 00000000..189eaa02 Binary files /dev/null and b/Resources/landing-page/assets/img/slides/13.jpg differ diff --git a/Resources/landing-page/css/custom.css b/Resources/landing-page/css/custom.css index d8a9f5f5..57fd24db 100644 --- a/Resources/landing-page/css/custom.css +++ b/Resources/landing-page/css/custom.css @@ -1,32 +1,73 @@ +:root { + --about: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 0)), var(--main-bg-color); +} + +.bg-primary { + background: var(--about) !important; + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.bg-dark, +.theme-overview, +#services, +#themes, +footer { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.text-white-50 { + color: var(--text) !important; +} + @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + #mainNav, #mainNav.navbar-scrolled { - box-shadow: none; - background-color: rgba(0, 0, 0, 0.55); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + box-shadow: none; + background-color: rgba(0, 0, 0, 0.55); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } - } - +} + @media (max-width: 768px) { - #mainNav, #mainNav.navbar-scrolled { + + #mainNav, + #mainNav.navbar-scrolled { padding: 0 1rem 0 1rem !important; } + .branding { height: 40px !important; } - #mainNav .navbar-nav .nav-item .nav-link{ + + #mainNav .navbar-nav .nav-item .nav-link { padding-left: 1rem; } } - /* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ - @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + #mainNav, #mainNav.navbar-scrolled { - box-shadow: none; - background-color: rgba(0, 0, 0, 0.9); + box-shadow: none; + background-color: rgba(0, 0, 0, 0.9); } - } +} @media (min-width: 992px) { #mainNav { @@ -69,27 +110,31 @@ } #mainNav.navbar-scrolled .navbar-brand:hover { - color: #12afa0; + color: rgb(var(--accent-color)); } #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link { color: #fff; - ; } #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover { - color: #12afa0; + color: var(--link-color-hover); } } -#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active { - color: #12afa0; - } + +#mainNav .navbar-nav .nav-item .nav-link:hover, +#mainNav .navbar-nav .nav-item .nav-link:active { + color: rgb(var(--accent-color)); +} + #mainNav .navbar-nav .nav-item .nav-link.active { - color: #12afa0 !important; - } + color: var(--link-color-hover) !important; +} + .navbar-light .navbar-toggler-icon { filter: invert(1); } + .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgb(255 255 255 / 10%); @@ -105,65 +150,67 @@ /* BUTTON SHIT*/ .btn-primary { - color: #fff; - background-color: #009688; - border-color: #009688; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); } .btn-primary:hover { - color: #fff; - background-color: #12afa0; - border-color: #12afa0; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-primary:focus, .btn-primary.focus { - color: #fff; - background-color: #12afa0; - border-color: #12afa0; - box-shadow: 0 0 0 0.2rem #12afa080; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.5); } .btn-primary.disabled, .btn-primary:disabled { - color: #fff; - background-color: #009688; - border-color: #009688; + color: var(--text-muted); + background-color: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.3); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { - color: #fff; - background-color: #12afa0; - border-color: #12afa0; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem #12afa080; + box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.502); } hr.divider { - border-color: #12afa0 + border-color: rgb(var(--accent-color)); } a { - color: #fff; + color: var(--link-color); } + a:hover { - color: #12afa0; + color: var(--link-color-hover); text-decoration: none; } + .text-primary { - color: #12afa0 !important; + color: rgb(var(--accent-color)) !important; } body, header.masthead { background: black; - } +} /* IMAGE SLIDER */ .jquery-bg-slideshow-wrap-bg-element { @@ -173,10 +220,13 @@ header.masthead { } @media (max-width: 768px) { - .bg,header.masthead { + + .bg, + header.masthead { background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%), url(../assets/img/space-gray.png) !important; } } + .bg { height: 100%; width: 100%; @@ -185,49 +235,61 @@ header.masthead { margin: 0; } +/* .bg-primary, .bg-dark { background: #2d2d2d; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); - /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ } +*/ + + + .theme-overview { - background: #2d2d2d; + /* background: #2d2d2d; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); - background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); - /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0)); */ font-family: var(--font-family-sans-serif); } -#services { - background: rgba(87, 109, 117, 1.0); - color: white; + +#services, +#themes { + /* background: rgba(87, 109, 117, 1.0); */ + color: var(--text-hover); padding: 0rem 0 8rem 0; } + .all-apps { max-width: 1980px; } + .img-fluid { border-radius: 5px; } + .app-container { background: rgba(0, 0, 0, 0.2); - color:rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.7); border-radius: 5px; max-width: 120px; - min-width: 120px; + min-width: 130px; } + .app-container:hover { color: white; text-decoration: none; - background: #47918a80; + background: rgba(var(--accent-color), 0.5); } + .app-container:hover img { transform: scale(1.1); } + .app-container img { transition: transform .5s; } @@ -243,6 +305,7 @@ p { font-weight: 500; line-height: 1.2; } + /* @media (min-width: 992px) { .portfolio-box img { object-fit: cover; @@ -250,26 +313,21 @@ p { } */ /* EXAMPLE IMAGES*/ -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.aquamarine-hover, -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.hotline-hover, -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.space-gray-hover, -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.organizr-dark-hover, -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.dark-hover, -#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.plex-hover { +#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption[class*="-hover"] { opacity: .9; border-radius: 5px; } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.aquamarine-hover { - background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%); } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover { - background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + background: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%); } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover { - background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%); } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover { @@ -277,9 +335,21 @@ p { } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dark-hover { - background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000); } #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover { - background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; + background: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0); +} + +#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover { + background: #282a36; +} + +#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.overseer-hover { + background: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%); +} + +#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotpink-hover { + background: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%); } \ No newline at end of file diff --git a/Resources/landing-page/css/styles.css b/Resources/landing-page/css/styles.css index 98202b99..032a1d56 100644 --- a/Resources/landing-page/css/styles.css +++ b/Resources/landing-page/css/styles.css @@ -1,4 +1,5 @@ @charset "UTF-8"; + /*! * Start Bootstrap - Creative v6.0.5 (https://startbootstrap.com/theme/creative) * Copyright 2013-2021 Start Bootstrap @@ -54,7 +55,16 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } @@ -79,7 +89,12 @@ hr { overflow: visible; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 0.5rem; } @@ -93,11 +108,11 @@ abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; - text-decoration-skip-ink: none; + text-decoration-skip-ink: none; } address { @@ -163,6 +178,7 @@ a { text-decoration: none; background-color: transparent; } + a:hover { color: #d6370c; text-decoration: underline; @@ -172,6 +188,7 @@ a:not([href]):not([class]) { color: inherit; text-decoration: none; } + a:not([href]):not([class]):hover { color: inherit; text-decoration: none; @@ -357,35 +374,51 @@ template { display: none !important; } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 0.5rem; font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 500; line-height: 1.2; } -h1, .h1 { +h1, +.h1 { font-size: 2.5rem; } -h2, .h2 { +h2, +.h2 { font-size: 2rem; } -h3, .h3 { +h3, +.h3 { font-size: 1.75rem; } -h4, .h4 { +h4, +.h4 { font-size: 1.5rem; } -h5, .h5 { +h5, +.h5 { font-size: 1.25rem; } -h6, .h6 { +h6, +.h6 { font-size: 1rem; } @@ -450,6 +483,7 @@ mark, .list-inline-item { display: inline-block; } + .list-inline-item:not(:last-child) { margin-right: 0.5rem; } @@ -469,6 +503,7 @@ mark, font-size: 80%; color: #6c757d; } + .blockquote-footer::before { content: "— "; } @@ -506,7 +541,8 @@ code { color: #e83e8c; word-wrap: break-word; } -a > code { + +a>code { color: inherit; } @@ -517,6 +553,7 @@ kbd { background-color: #212529; border-radius: 0.2rem; } + kbd kbd { padding: 0; font-size: 100%; @@ -528,6 +565,7 @@ pre { font-size: 87.5%; color: #212529; } + pre code { font-size: inherit; color: inherit; @@ -553,25 +591,43 @@ pre code { } @media (min-width: 576px) { - .container-sm, .container { + + .container-sm, + .container { max-width: 540px; } } + @media (min-width: 768px) { - .container-md, .container-sm, .container { + + .container-md, + .container-sm, + .container { max-width: 720px; } } + @media (min-width: 992px) { - .container-lg, .container-md, .container-sm, .container { + + .container-lg, + .container-md, + .container-sm, + .container { max-width: 960px; } } + @media (min-width: 1200px) { - .container-xl, .container-lg, .container-md, .container-sm, .container { + + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } + .row { display: flex; flex-wrap: wrap; @@ -583,18 +639,83 @@ pre code { margin-right: 0; margin-left: 0; } -.no-gutters > .col, -.no-gutters > [class*=col-] { + +.no-gutters>.col, +.no-gutters>[class*=col-] { padding-right: 0; padding-left: 0; } .col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { +.col-xl-auto, +.col-xl-12, +.col-xl-11, +.col-xl-10, +.col-xl-9, +.col-xl-8, +.col-xl-7, +.col-xl-6, +.col-xl-5, +.col-xl-4, +.col-xl-3, +.col-xl-2, +.col-xl-1, +.col-lg, +.col-lg-auto, +.col-lg-12, +.col-lg-11, +.col-lg-10, +.col-lg-9, +.col-lg-8, +.col-lg-7, +.col-lg-6, +.col-lg-5, +.col-lg-4, +.col-lg-3, +.col-lg-2, +.col-lg-1, +.col-md, +.col-md-auto, +.col-md-12, +.col-md-11, +.col-md-10, +.col-md-9, +.col-md-8, +.col-md-7, +.col-md-6, +.col-md-5, +.col-md-4, +.col-md-3, +.col-md-2, +.col-md-1, +.col-sm, +.col-sm-auto, +.col-sm-12, +.col-sm-11, +.col-sm-10, +.col-sm-9, +.col-sm-8, +.col-sm-7, +.col-sm-6, +.col-sm-5, +.col-sm-4, +.col-sm-3, +.col-sm-2, +.col-sm-1, +.col, +.col-auto, +.col-12, +.col-11, +.col-10, +.col-9, +.col-8, +.col-7, +.col-6, +.col-5, +.col-4, +.col-3, +.col-2, +.col-1 { position: relative; width: 100%; padding-right: 15px; @@ -607,32 +728,32 @@ pre code { max-width: 100%; } -.row-cols-1 > * { +.row-cols-1>* { flex: 0 0 100%; max-width: 100%; } -.row-cols-2 > * { +.row-cols-2>* { flex: 0 0 50%; max-width: 50%; } -.row-cols-3 > * { +.row-cols-3>* { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } -.row-cols-4 > * { +.row-cols-4>* { flex: 0 0 25%; max-width: 25%; } -.row-cols-5 > * { +.row-cols-5>* { flex: 0 0 20%; max-width: 20%; } -.row-cols-6 > * { +.row-cols-6>* { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } @@ -814,32 +935,32 @@ pre code { max-width: 100%; } - .row-cols-sm-1 > * { + .row-cols-sm-1>* { flex: 0 0 100%; max-width: 100%; } - .row-cols-sm-2 > * { + .row-cols-sm-2>* { flex: 0 0 50%; max-width: 50%; } - .row-cols-sm-3 > * { + .row-cols-sm-3>* { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } - .row-cols-sm-4 > * { + .row-cols-sm-4>* { flex: 0 0 25%; max-width: 25%; } - .row-cols-sm-5 > * { + .row-cols-sm-5>* { flex: 0 0 20%; max-width: 20%; } - .row-cols-sm-6 > * { + .row-cols-sm-6>* { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } @@ -1018,6 +1139,7 @@ pre code { margin-left: 91.6666666667%; } } + @media (min-width: 768px) { .col-md { flex-basis: 0; @@ -1025,32 +1147,32 @@ pre code { max-width: 100%; } - .row-cols-md-1 > * { + .row-cols-md-1>* { flex: 0 0 100%; max-width: 100%; } - .row-cols-md-2 > * { + .row-cols-md-2>* { flex: 0 0 50%; max-width: 50%; } - .row-cols-md-3 > * { + .row-cols-md-3>* { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } - .row-cols-md-4 > * { + .row-cols-md-4>* { flex: 0 0 25%; max-width: 25%; } - .row-cols-md-5 > * { + .row-cols-md-5>* { flex: 0 0 20%; max-width: 20%; } - .row-cols-md-6 > * { + .row-cols-md-6>* { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } @@ -1229,6 +1351,7 @@ pre code { margin-left: 91.6666666667%; } } + @media (min-width: 992px) { .col-lg { flex-basis: 0; @@ -1236,32 +1359,32 @@ pre code { max-width: 100%; } - .row-cols-lg-1 > * { + .row-cols-lg-1>* { flex: 0 0 100%; max-width: 100%; } - .row-cols-lg-2 > * { + .row-cols-lg-2>* { flex: 0 0 50%; max-width: 50%; } - .row-cols-lg-3 > * { + .row-cols-lg-3>* { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } - .row-cols-lg-4 > * { + .row-cols-lg-4>* { flex: 0 0 25%; max-width: 25%; } - .row-cols-lg-5 > * { + .row-cols-lg-5>* { flex: 0 0 20%; max-width: 20%; } - .row-cols-lg-6 > * { + .row-cols-lg-6>* { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } @@ -1440,6 +1563,7 @@ pre code { margin-left: 91.6666666667%; } } + @media (min-width: 1200px) { .col-xl { flex-basis: 0; @@ -1447,32 +1571,32 @@ pre code { max-width: 100%; } - .row-cols-xl-1 > * { + .row-cols-xl-1>* { flex: 0 0 100%; max-width: 100%; } - .row-cols-xl-2 > * { + .row-cols-xl-2>* { flex: 0 0 50%; max-width: 50%; } - .row-cols-xl-3 > * { + .row-cols-xl-3>* { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } - .row-cols-xl-4 > * { + .row-cols-xl-4>* { flex: 0 0 25%; max-width: 25%; } - .row-cols-xl-5 > * { + .row-cols-xl-5>* { flex: 0 0 20%; max-width: 20%; } - .row-cols-xl-6 > * { + .row-cols-xl-6>* { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } @@ -1651,22 +1775,26 @@ pre code { margin-left: 91.6666666667%; } } + .table { width: 100%; margin-bottom: 1rem; color: #212529; } + .table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; } + .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } -.table tbody + tbody { + +.table tbody+tbody { border-top: 2px solid #dee2e6; } @@ -1678,10 +1806,12 @@ pre code { .table-bordered { border: 1px solid #dee2e6; } + .table-bordered th, .table-bordered td { border: 1px solid #dee2e6; } + .table-bordered thead th, .table-bordered thead td { border-bottom-width: 2px; @@ -1690,7 +1820,7 @@ pre code { .table-borderless th, .table-borderless td, .table-borderless thead th, -.table-borderless tbody + tbody { +.table-borderless tbody+tbody { border: 0; } @@ -1704,176 +1834,193 @@ pre code { } .table-primary, -.table-primary > th, -.table-primary > td { +.table-primary>th, +.table-primary>td { background-color: #fcd3c8; } + .table-primary th, .table-primary td, .table-primary thead th, -.table-primary tbody + tbody { +.table-primary tbody+tbody { border-color: #f9ad99; } .table-hover .table-primary:hover { background-color: #fbc0b0; } -.table-hover .table-primary:hover > td, -.table-hover .table-primary:hover > th { + +.table-hover .table-primary:hover>td, +.table-hover .table-primary:hover>th { background-color: #fbc0b0; } .table-secondary, -.table-secondary > th, -.table-secondary > td { +.table-secondary>th, +.table-secondary>td { background-color: #d6d8db; } + .table-secondary th, .table-secondary td, .table-secondary thead th, -.table-secondary tbody + tbody { +.table-secondary tbody+tbody { border-color: #b3b7bb; } .table-hover .table-secondary:hover { background-color: #c8cbcf; } -.table-hover .table-secondary:hover > td, -.table-hover .table-secondary:hover > th { + +.table-hover .table-secondary:hover>td, +.table-hover .table-secondary:hover>th { background-color: #c8cbcf; } .table-success, -.table-success > th, -.table-success > td { +.table-success>th, +.table-success>td { background-color: #c3e6cb; } + .table-success th, .table-success td, .table-success thead th, -.table-success tbody + tbody { +.table-success tbody+tbody { border-color: #8fd19e; } .table-hover .table-success:hover { background-color: #b1dfbb; } -.table-hover .table-success:hover > td, -.table-hover .table-success:hover > th { + +.table-hover .table-success:hover>td, +.table-hover .table-success:hover>th { background-color: #b1dfbb; } .table-info, -.table-info > th, -.table-info > td { +.table-info>th, +.table-info>td { background-color: #bee5eb; } + .table-info th, .table-info td, .table-info thead th, -.table-info tbody + tbody { +.table-info tbody+tbody { border-color: #86cfda; } .table-hover .table-info:hover { background-color: #abdde5; } -.table-hover .table-info:hover > td, -.table-hover .table-info:hover > th { + +.table-hover .table-info:hover>td, +.table-hover .table-info:hover>th { background-color: #abdde5; } .table-warning, -.table-warning > th, -.table-warning > td { +.table-warning>th, +.table-warning>td { background-color: #ffeeba; } + .table-warning th, .table-warning td, .table-warning thead th, -.table-warning tbody + tbody { +.table-warning tbody+tbody { border-color: #ffdf7e; } .table-hover .table-warning:hover { background-color: #ffe8a1; } -.table-hover .table-warning:hover > td, -.table-hover .table-warning:hover > th { + +.table-hover .table-warning:hover>td, +.table-hover .table-warning:hover>th { background-color: #ffe8a1; } .table-danger, -.table-danger > th, -.table-danger > td { +.table-danger>th, +.table-danger>td { background-color: #f5c6cb; } + .table-danger th, .table-danger td, .table-danger thead th, -.table-danger tbody + tbody { +.table-danger tbody+tbody { border-color: #ed969e; } .table-hover .table-danger:hover { background-color: #f1b0b7; } -.table-hover .table-danger:hover > td, -.table-hover .table-danger:hover > th { + +.table-hover .table-danger:hover>td, +.table-hover .table-danger:hover>th { background-color: #f1b0b7; } .table-light, -.table-light > th, -.table-light > td { +.table-light>th, +.table-light>td { background-color: #fdfdfe; } + .table-light th, .table-light td, .table-light thead th, -.table-light tbody + tbody { +.table-light tbody+tbody { border-color: #fbfcfc; } .table-hover .table-light:hover { background-color: #ececf6; } -.table-hover .table-light:hover > td, -.table-hover .table-light:hover > th { + +.table-hover .table-light:hover>td, +.table-hover .table-light:hover>th { background-color: #ececf6; } .table-dark, -.table-dark > th, -.table-dark > td { +.table-dark>th, +.table-dark>td { background-color: #c6c8ca; } + .table-dark th, .table-dark td, .table-dark thead th, -.table-dark tbody + tbody { +.table-dark tbody+tbody { border-color: #95999c; } .table-hover .table-dark:hover { background-color: #b9bbbe; } -.table-hover .table-dark:hover > td, -.table-hover .table-dark:hover > th { + +.table-hover .table-dark:hover>td, +.table-hover .table-dark:hover>th { background-color: #b9bbbe; } .table-active, -.table-active > th, -.table-active > td { +.table-active>th, +.table-active>td { background-color: rgba(0, 0, 0, 0.075); } .table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); } -.table-hover .table-active:hover > td, -.table-hover .table-active:hover > th { + +.table-hover .table-active:hover>td, +.table-hover .table-active:hover>th { background-color: rgba(0, 0, 0, 0.075); } @@ -1882,6 +2029,7 @@ pre code { background-color: #343a40; border-color: #454d55; } + .table .thead-light th { color: #495057; background-color: #e9ecef; @@ -1892,17 +2040,21 @@ pre code { color: #fff; background-color: #343a40; } + .table-dark th, .table-dark td, .table-dark thead th { border-color: #454d55; } + .table-dark.table-bordered { border: 0; } + .table-dark.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.05); } + .table-dark.table-hover tbody tr:hover { color: #fff; background-color: rgba(255, 255, 255, 0.075); @@ -1915,10 +2067,12 @@ pre code { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .table-responsive-sm > .table-bordered { + + .table-responsive-sm>.table-bordered { border: 0; } } + @media (max-width: 767.98px) { .table-responsive-md { display: block; @@ -1926,10 +2080,12 @@ pre code { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .table-responsive-md > .table-bordered { + + .table-responsive-md>.table-bordered { border: 0; } } + @media (max-width: 991.98px) { .table-responsive-lg { display: block; @@ -1937,10 +2093,12 @@ pre code { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .table-responsive-lg > .table-bordered { + + .table-responsive-lg>.table-bordered { border: 0; } } + @media (max-width: 1199.98px) { .table-responsive-xl { display: block; @@ -1948,17 +2106,20 @@ pre code { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .table-responsive-xl > .table-bordered { + + .table-responsive-xl>.table-bordered { border: 0; } } + .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } -.table-responsive > .table-bordered { + +.table-responsive>.table-bordered { border: 0; } @@ -1977,19 +2138,23 @@ pre code { border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } + .form-control::-ms-expand { background-color: transparent; border: 0; } + .form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #495057; } + .form-control:focus { color: #495057; background-color: #fff; @@ -1997,19 +2162,24 @@ pre code { outline: 0; box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } + .form-control::-moz-placeholder { color: #6c757d; opacity: 1; } + .form-control:-ms-input-placeholder { color: #6c757d; opacity: 1; } + .form-control::placeholder { color: #6c757d; opacity: 1; } -.form-control:disabled, .form-control[readonly] { + +.form-control:disabled, +.form-control[readonly] { background-color: #e9ecef; opacity: 1; } @@ -2019,8 +2189,8 @@ input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; } select.form-control:focus::-ms-value { @@ -2068,7 +2238,9 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { + +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } @@ -2089,7 +2261,8 @@ select.form-control:focus::-ms-value { border-radius: 0.3rem; } -select.form-control[size], select.form-control[multiple] { +select.form-control[size], +select.form-control[multiple] { height: auto; } @@ -2112,8 +2285,9 @@ textarea.form-control { margin-right: -5px; margin-left: -5px; } -.form-row > .col, -.form-row > [class*=col-] { + +.form-row>.col, +.form-row>[class*=col-] { padding-right: 5px; padding-left: 5px; } @@ -2129,7 +2303,9 @@ textarea.form-control { margin-top: 0.3rem; margin-left: -1.25rem; } -.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { + +.form-check-input[disabled]~.form-check-label, +.form-check-input:disabled~.form-check-label { color: #6c757d; } @@ -2143,6 +2319,7 @@ textarea.form-control { padding-left: 0; margin-right: 0.75rem; } + .form-check-inline .form-check-input { position: static; margin-top: 0; @@ -2173,18 +2350,21 @@ textarea.form-control { background-color: rgba(40, 167, 69, 0.9); border-radius: 0.25rem; } -.form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip { + +.form-row>.col>.valid-tooltip, +.form-row>[class*=col-]>.valid-tooltip { left: 5px; } -.was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip, -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip { +.was-validated :valid~.valid-feedback, +.was-validated :valid~.valid-tooltip, +.is-valid~.valid-feedback, +.is-valid~.valid-tooltip { display: block; } -.was-validated .form-control:valid, .form-control.is-valid { +.was-validated .form-control:valid, +.form-control.is-valid { border-color: #28a745; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); @@ -2192,56 +2372,77 @@ textarea.form-control { background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { + +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { +.was-validated textarea.form-control:valid, +textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.was-validated .custom-select:valid, .custom-select.is-valid { +.was-validated .custom-select:valid, +.custom-select.is-valid { border-color: #28a745; padding-right: calc(0.75em + 2.3125rem); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; } -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { + +.was-validated .custom-select:valid:focus, +.custom-select.is-valid:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { +.was-validated .form-check-input:valid~.form-check-label, +.form-check-input.is-valid~.form-check-label { color: #28a745; } -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { + +.was-validated .form-check-input:valid~.valid-feedback, +.was-validated .form-check-input:valid~.valid-tooltip, +.form-check-input.is-valid~.valid-feedback, +.form-check-input.is-valid~.valid-tooltip { display: block; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { +.was-validated .custom-control-input:valid~.custom-control-label, +.custom-control-input.is-valid~.custom-control-label { color: #28a745; } -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #28a745; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #34ce57; - background-color: #34ce57; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { + +.was-validated .custom-control-input:valid~.custom-control-label::before, +.custom-control-input.is-valid~.custom-control-label::before { border-color: #28a745; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { +.was-validated .custom-control-input:valid:checked~.custom-control-label::before, +.custom-control-input.is-valid:checked~.custom-control-label::before { + border-color: #34ce57; + background-color: #34ce57; +} + +.was-validated .custom-control-input:valid:focus~.custom-control-label::before, +.custom-control-input.is-valid:focus~.custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +} + +.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before, +.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before { border-color: #28a745; } -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { + +.was-validated .custom-file-input:valid~.custom-file-label, +.custom-file-input.is-valid~.custom-file-label { + border-color: #28a745; +} + +.was-validated .custom-file-input:valid:focus~.custom-file-label, +.custom-file-input.is-valid:focus~.custom-file-label { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } @@ -2269,18 +2470,21 @@ textarea.form-control { background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; } -.form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip { + +.form-row>.col>.invalid-tooltip, +.form-row>[class*=col-]>.invalid-tooltip { left: 5px; } -.was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip, -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip { +.was-validated :invalid~.invalid-feedback, +.was-validated :invalid~.invalid-tooltip, +.is-invalid~.invalid-feedback, +.is-invalid~.invalid-tooltip { display: block; } -.was-validated .form-control:invalid, .form-control.is-invalid { +.was-validated .form-control:invalid, +.form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); @@ -2288,56 +2492,77 @@ textarea.form-control { background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { +.was-validated textarea.form-control:invalid, +textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.was-validated .custom-select:invalid, .custom-select.is-invalid { +.was-validated .custom-select:invalid, +.custom-select.is-invalid { border-color: #dc3545; padding-right: calc(0.75em + 2.3125rem); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; } -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { + +.was-validated .custom-select:invalid:focus, +.custom-select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { +.was-validated .form-check-input:invalid~.form-check-label, +.form-check-input.is-invalid~.form-check-label { color: #dc3545; } -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { + +.was-validated .form-check-input:invalid~.invalid-feedback, +.was-validated .form-check-input:invalid~.invalid-tooltip, +.form-check-input.is-invalid~.invalid-feedback, +.form-check-input.is-invalid~.invalid-tooltip { display: block; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { +.was-validated .custom-control-input:invalid~.custom-control-label, +.custom-control-input.is-invalid~.custom-control-label { color: #dc3545; } -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #dc3545; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #e4606d; - background-color: #e4606d; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { + +.was-validated .custom-control-input:invalid~.custom-control-label::before, +.custom-control-input.is-invalid~.custom-control-label::before { border-color: #dc3545; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { +.was-validated .custom-control-input:invalid:checked~.custom-control-label::before, +.custom-control-input.is-invalid:checked~.custom-control-label::before { + border-color: #e4606d; + background-color: #e4606d; +} + +.was-validated .custom-control-input:invalid:focus~.custom-control-label::before, +.custom-control-input.is-invalid:focus~.custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); +} + +.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before, +.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before { border-color: #dc3545; } -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { + +.was-validated .custom-file-input:invalid~.custom-file-label, +.custom-file-input.is-invalid~.custom-file-label { + border-color: #dc3545; +} + +.was-validated .custom-file-input:invalid:focus~.custom-file-label, +.custom-file-input.is-invalid:focus~.custom-file-label { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } @@ -2347,9 +2572,11 @@ textarea.form-control { flex-flow: row wrap; align-items: center; } + .form-inline .form-check { width: 100%; } + @media (min-width: 576px) { .form-inline label { display: flex; @@ -2357,6 +2584,7 @@ textarea.form-control { justify-content: center; margin-bottom: 0; } + .form-inline .form-group { display: flex; flex: 0 0 auto; @@ -2364,18 +2592,22 @@ textarea.form-control { align-items: center; margin-bottom: 0; } + .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } + .form-inline .form-control-plaintext { display: inline-block; } + .form-inline .input-group, -.form-inline .custom-select { + .form-inline .custom-select { width: auto; } + .form-inline .form-check { display: flex; align-items: center; @@ -2383,6 +2615,7 @@ textarea.form-control { width: auto; padding-left: 0; } + .form-inline .form-check-input { position: relative; flex-shrink: 0; @@ -2390,10 +2623,12 @@ textarea.form-control { margin-right: 0.25rem; margin-left: 0; } + .form-inline .custom-control { align-items: center; justify-content: center; } + .form-inline .custom-control-label { margin-bottom: 0; } @@ -2406,9 +2641,9 @@ textarea.form-control { text-align: center; vertical-align: middle; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; @@ -2417,25 +2652,33 @@ textarea.form-control { border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } + .btn:hover { color: #212529; text-decoration: none; } -.btn:focus, .btn.focus { + +.btn:focus, +.btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } -.btn.disabled, .btn:disabled { + +.btn.disabled, +.btn:disabled { opacity: 0.65; } + .btn:not(:disabled):not(.disabled) { cursor: pointer; } + a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; @@ -2446,28 +2689,39 @@ fieldset:disabled a.btn { background-color: #f4623a; border-color: #f4623a; } + .btn-primary:hover { color: #fff; background-color: #f24516; border-color: #ee3e0d; } -.btn-primary:focus, .btn-primary.focus { + +.btn-primary:focus, +.btn-primary.focus { color: #fff; background-color: #f24516; border-color: #ee3e0d; box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5); } -.btn-primary.disabled, .btn-primary:disabled { + +.btn-primary.disabled, +.btn-primary:disabled { color: #fff; background-color: #f4623a; border-color: #f4623a; } -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { + +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +.show>.btn-primary.dropdown-toggle { color: #fff; background-color: #ee3e0d; border-color: #e23a0d; } -.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { + +.btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5); } @@ -2476,28 +2730,39 @@ fieldset:disabled a.btn { background-color: #6c757d; border-color: #6c757d; } + .btn-secondary:hover { color: #fff; background-color: #5a6268; border-color: #545b62; } -.btn-secondary:focus, .btn-secondary.focus { + +.btn-secondary:focus, +.btn-secondary.focus { color: #fff; background-color: #5a6268; border-color: #545b62; box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } -.btn-secondary.disabled, .btn-secondary:disabled { + +.btn-secondary.disabled, +.btn-secondary:disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; } -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { + +.btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, +.show>.btn-secondary.dropdown-toggle { color: #fff; background-color: #545b62; border-color: #4e555b; } -.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { + +.btn-secondary:not(:disabled):not(.disabled):active:focus, +.btn-secondary:not(:disabled):not(.disabled).active:focus, +.show>.btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } @@ -2506,28 +2771,39 @@ fieldset:disabled a.btn { background-color: #28a745; border-color: #28a745; } + .btn-success:hover { color: #fff; background-color: #218838; border-color: #1e7e34; } -.btn-success:focus, .btn-success.focus { + +.btn-success:focus, +.btn-success.focus { color: #fff; background-color: #218838; border-color: #1e7e34; box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } -.btn-success.disabled, .btn-success:disabled { + +.btn-success.disabled, +.btn-success:disabled { color: #fff; background-color: #28a745; border-color: #28a745; } -.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { + +.btn-success:not(:disabled):not(.disabled):active, +.btn-success:not(:disabled):not(.disabled).active, +.show>.btn-success.dropdown-toggle { color: #fff; background-color: #1e7e34; border-color: #1c7430; } -.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { + +.btn-success:not(:disabled):not(.disabled):active:focus, +.btn-success:not(:disabled):not(.disabled).active:focus, +.show>.btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } @@ -2536,28 +2812,39 @@ fieldset:disabled a.btn { background-color: #17a2b8; border-color: #17a2b8; } + .btn-info:hover { color: #fff; background-color: #138496; border-color: #117a8b; } -.btn-info:focus, .btn-info.focus { + +.btn-info:focus, +.btn-info.focus { color: #fff; background-color: #138496; border-color: #117a8b; box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } -.btn-info.disabled, .btn-info:disabled { + +.btn-info.disabled, +.btn-info:disabled { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } -.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { + +.btn-info:not(:disabled):not(.disabled):active, +.btn-info:not(:disabled):not(.disabled).active, +.show>.btn-info.dropdown-toggle { color: #fff; background-color: #117a8b; border-color: #10707f; } -.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { + +.btn-info:not(:disabled):not(.disabled):active:focus, +.btn-info:not(:disabled):not(.disabled).active:focus, +.show>.btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } @@ -2566,28 +2853,39 @@ fieldset:disabled a.btn { background-color: #ffc107; border-color: #ffc107; } + .btn-warning:hover { color: #212529; background-color: #e0a800; border-color: #d39e00; } -.btn-warning:focus, .btn-warning.focus { + +.btn-warning:focus, +.btn-warning.focus { color: #212529; background-color: #e0a800; border-color: #d39e00; box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } -.btn-warning.disabled, .btn-warning:disabled { + +.btn-warning.disabled, +.btn-warning:disabled { color: #212529; background-color: #ffc107; border-color: #ffc107; } -.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { + +.btn-warning:not(:disabled):not(.disabled):active, +.btn-warning:not(:disabled):not(.disabled).active, +.show>.btn-warning.dropdown-toggle { color: #212529; background-color: #d39e00; border-color: #c69500; } -.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { + +.btn-warning:not(:disabled):not(.disabled):active:focus, +.btn-warning:not(:disabled):not(.disabled).active:focus, +.show>.btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } @@ -2596,28 +2894,39 @@ fieldset:disabled a.btn { background-color: #dc3545; border-color: #dc3545; } + .btn-danger:hover { color: #fff; background-color: #c82333; border-color: #bd2130; } -.btn-danger:focus, .btn-danger.focus { + +.btn-danger:focus, +.btn-danger.focus { color: #fff; background-color: #c82333; border-color: #bd2130; box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } -.btn-danger.disabled, .btn-danger:disabled { + +.btn-danger.disabled, +.btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } -.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { + +.btn-danger:not(:disabled):not(.disabled):active, +.btn-danger:not(:disabled):not(.disabled).active, +.show>.btn-danger.dropdown-toggle { color: #fff; background-color: #bd2130; border-color: #b21f2d; } -.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { + +.btn-danger:not(:disabled):not(.disabled):active:focus, +.btn-danger:not(:disabled):not(.disabled).active:focus, +.show>.btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } @@ -2626,28 +2935,39 @@ fieldset:disabled a.btn { background-color: #f8f9fa; border-color: #f8f9fa; } + .btn-light:hover { color: #212529; background-color: #e2e6ea; border-color: #dae0e5; } -.btn-light:focus, .btn-light.focus { + +.btn-light:focus, +.btn-light.focus { color: #212529; background-color: #e2e6ea; border-color: #dae0e5; box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); } -.btn-light.disabled, .btn-light:disabled { + +.btn-light.disabled, +.btn-light:disabled { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { + +.btn-light:not(:disabled):not(.disabled):active, +.btn-light:not(:disabled):not(.disabled).active, +.show>.btn-light.dropdown-toggle { color: #212529; background-color: #dae0e5; border-color: #d3d9df; } -.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { + +.btn-light:not(:disabled):not(.disabled):active:focus, +.btn-light:not(:disabled):not(.disabled).active:focus, +.show>.btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); } @@ -2656,28 +2976,39 @@ fieldset:disabled a.btn { background-color: #343a40; border-color: #343a40; } + .btn-dark:hover { color: #fff; background-color: #23272b; border-color: #1d2124; } -.btn-dark:focus, .btn-dark.focus { + +.btn-dark:focus, +.btn-dark.focus { color: #fff; background-color: #23272b; border-color: #1d2124; box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } -.btn-dark.disabled, .btn-dark:disabled { + +.btn-dark.disabled, +.btn-dark:disabled { color: #fff; background-color: #343a40; border-color: #343a40; } -.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { + +.btn-dark:not(:disabled):not(.disabled):active, +.btn-dark:not(:disabled):not(.disabled).active, +.show>.btn-dark.dropdown-toggle { color: #fff; background-color: #1d2124; border-color: #171a1d; } -.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { + +.btn-dark:not(:disabled):not(.disabled):active:focus, +.btn-dark:not(:disabled):not(.disabled).active:focus, +.show>.btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } @@ -2685,24 +3016,35 @@ fieldset:disabled a.btn { color: #f4623a; border-color: #f4623a; } + .btn-outline-primary:hover { color: #fff; background-color: #f4623a; border-color: #f4623a; } -.btn-outline-primary:focus, .btn-outline-primary.focus { + +.btn-outline-primary:focus, +.btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.5); } -.btn-outline-primary.disabled, .btn-outline-primary:disabled { + +.btn-outline-primary.disabled, +.btn-outline-primary:disabled { color: #f4623a; background-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { + +.btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, +.show>.btn-outline-primary.dropdown-toggle { color: #fff; background-color: #f4623a; border-color: #f4623a; } -.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { + +.btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.5); } @@ -2710,24 +3052,35 @@ fieldset:disabled a.btn { color: #6c757d; border-color: #6c757d; } + .btn-outline-secondary:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; } -.btn-outline-secondary:focus, .btn-outline-secondary.focus { + +.btn-outline-secondary:focus, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } -.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { + +.btn-outline-secondary.disabled, +.btn-outline-secondary:disabled { color: #6c757d; background-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { + +.btn-outline-secondary:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, +.show>.btn-outline-secondary.dropdown-toggle { color: #fff; background-color: #6c757d; border-color: #6c757d; } -.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { + +.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } @@ -2735,24 +3088,35 @@ fieldset:disabled a.btn { color: #28a745; border-color: #28a745; } + .btn-outline-success:hover { color: #fff; background-color: #28a745; border-color: #28a745; } -.btn-outline-success:focus, .btn-outline-success.focus { + +.btn-outline-success:focus, +.btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } -.btn-outline-success.disabled, .btn-outline-success:disabled { + +.btn-outline-success.disabled, +.btn-outline-success:disabled { color: #28a745; background-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { + +.btn-outline-success:not(:disabled):not(.disabled):active, +.btn-outline-success:not(:disabled):not(.disabled).active, +.show>.btn-outline-success.dropdown-toggle { color: #fff; background-color: #28a745; border-color: #28a745; } -.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { + +.btn-outline-success:not(:disabled):not(.disabled):active:focus, +.btn-outline-success:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } @@ -2760,24 +3124,35 @@ fieldset:disabled a.btn { color: #17a2b8; border-color: #17a2b8; } + .btn-outline-info:hover { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } -.btn-outline-info:focus, .btn-outline-info.focus { + +.btn-outline-info:focus, +.btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } -.btn-outline-info.disabled, .btn-outline-info:disabled { + +.btn-outline-info.disabled, +.btn-outline-info:disabled { color: #17a2b8; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { + +.btn-outline-info:not(:disabled):not(.disabled):active, +.btn-outline-info:not(:disabled):not(.disabled).active, +.show>.btn-outline-info.dropdown-toggle { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } -.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { + +.btn-outline-info:not(:disabled):not(.disabled):active:focus, +.btn-outline-info:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } @@ -2785,24 +3160,35 @@ fieldset:disabled a.btn { color: #ffc107; border-color: #ffc107; } + .btn-outline-warning:hover { color: #212529; background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning:focus, .btn-outline-warning.focus { + +.btn-outline-warning:focus, +.btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } -.btn-outline-warning.disabled, .btn-outline-warning:disabled { + +.btn-outline-warning.disabled, +.btn-outline-warning:disabled { color: #ffc107; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { + +.btn-outline-warning:not(:disabled):not(.disabled):active, +.btn-outline-warning:not(:disabled):not(.disabled).active, +.show>.btn-outline-warning.dropdown-toggle { color: #212529; background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { + +.btn-outline-warning:not(:disabled):not(.disabled):active:focus, +.btn-outline-warning:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } @@ -2810,24 +3196,35 @@ fieldset:disabled a.btn { color: #dc3545; border-color: #dc3545; } + .btn-outline-danger:hover { color: #fff; background-color: #dc3545; border-color: #dc3545; } -.btn-outline-danger:focus, .btn-outline-danger.focus { + +.btn-outline-danger:focus, +.btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } -.btn-outline-danger.disabled, .btn-outline-danger:disabled { + +.btn-outline-danger.disabled, +.btn-outline-danger:disabled { color: #dc3545; background-color: transparent; } -.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { + +.btn-outline-danger:not(:disabled):not(.disabled):active, +.btn-outline-danger:not(:disabled):not(.disabled).active, +.show>.btn-outline-danger.dropdown-toggle { color: #fff; background-color: #dc3545; border-color: #dc3545; } -.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { + +.btn-outline-danger:not(:disabled):not(.disabled):active:focus, +.btn-outline-danger:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } @@ -2835,24 +3232,35 @@ fieldset:disabled a.btn { color: #f8f9fa; border-color: #f8f9fa; } + .btn-outline-light:hover { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light:focus, .btn-outline-light.focus { + +.btn-outline-light:focus, +.btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } -.btn-outline-light.disabled, .btn-outline-light:disabled { + +.btn-outline-light.disabled, +.btn-outline-light:disabled { color: #f8f9fa; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { + +.btn-outline-light:not(:disabled):not(.disabled):active, +.btn-outline-light:not(:disabled):not(.disabled).active, +.show>.btn-outline-light.dropdown-toggle { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { + +.btn-outline-light:not(:disabled):not(.disabled):active:focus, +.btn-outline-light:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } @@ -2860,24 +3268,35 @@ fieldset:disabled a.btn { color: #343a40; border-color: #343a40; } + .btn-outline-dark:hover { color: #fff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark:focus, .btn-outline-dark.focus { + +.btn-outline-dark:focus, +.btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } -.btn-outline-dark.disabled, .btn-outline-dark:disabled { + +.btn-outline-dark.disabled, +.btn-outline-dark:disabled { color: #343a40; background-color: transparent; } -.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { + +.btn-outline-dark:not(:disabled):not(.disabled):active, +.btn-outline-dark:not(:disabled):not(.disabled).active, +.show>.btn-outline-dark.dropdown-toggle { color: #fff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { + +.btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } @@ -2886,26 +3305,33 @@ fieldset:disabled a.btn { color: #f4623a; text-decoration: none; } + .btn-link:hover { color: #d6370c; text-decoration: underline; } -.btn-link:focus, .btn-link.focus { + +.btn-link:focus, +.btn-link.focus { text-decoration: underline; } -.btn-link:disabled, .btn-link.disabled { + +.btn-link:disabled, +.btn-link.disabled { color: #6c757d; pointer-events: none; } -.btn-lg, .btn-group-lg > .btn { +.btn-lg, +.btn-group-lg>.btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } -.btn-sm, .btn-group-sm > .btn { +.btn-sm, +.btn-group-sm>.btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; @@ -2916,7 +3342,8 @@ fieldset:disabled a.btn { display: block; width: 100%; } -.btn-block + .btn-block { + +.btn-block+.btn-block { margin-top: 0.5rem; } @@ -2929,11 +3356,13 @@ input[type=button].btn-block { .fade { transition: opacity 0.15s linear; } + @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } + .fade:not(.show) { opacity: 0; } @@ -2948,6 +3377,7 @@ input[type=button].btn-block { overflow: hidden; transition: height 0.35s ease; } + @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; @@ -2964,6 +3394,7 @@ input[type=button].btn-block { .dropdown-toggle { white-space: nowrap; } + .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -2974,6 +3405,7 @@ input[type=button].btn-block { border-bottom: 0; border-left: 0.3em solid transparent; } + .dropdown-toggle:empty::after { margin-left: 0; } @@ -3019,6 +3451,7 @@ input[type=button].btn-block { left: auto; } } + @media (min-width: 768px) { .dropdown-menu-md-left { right: auto; @@ -3030,6 +3463,7 @@ input[type=button].btn-block { left: auto; } } + @media (min-width: 992px) { .dropdown-menu-lg-left { right: auto; @@ -3041,6 +3475,7 @@ input[type=button].btn-block { left: auto; } } + @media (min-width: 1200px) { .dropdown-menu-xl-left { right: auto; @@ -3052,12 +3487,14 @@ input[type=button].btn-block { left: auto; } } + .dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } + .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -3068,6 +3505,7 @@ input[type=button].btn-block { border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } + .dropup .dropdown-toggle:empty::after { margin-left: 0; } @@ -3079,6 +3517,7 @@ input[type=button].btn-block { margin-top: 0; margin-left: 0.125rem; } + .dropright .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -3089,9 +3528,11 @@ input[type=button].btn-block { border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } + .dropright .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-toggle::after { vertical-align: 0; } @@ -3103,15 +3544,18 @@ input[type=button].btn-block { margin-top: 0; margin-right: 0.125rem; } + .dropleft .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; } + .dropleft .dropdown-toggle::after { display: none; } + .dropleft .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; @@ -3121,14 +3565,19 @@ input[type=button].btn-block { border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } + .dropleft .dropdown-toggle:empty::after { margin-left: 0; } + .dropleft .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^=top], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left] { +.dropdown-menu[x-placement^=top], +.dropdown-menu[x-placement^=right], +.dropdown-menu[x-placement^=bottom], +.dropdown-menu[x-placement^=left] { right: auto; bottom: auto; } @@ -3152,17 +3601,23 @@ input[type=button].btn-block { background-color: transparent; border: 0; } -.dropdown-item:hover, .dropdown-item:focus { + +.dropdown-item:hover, +.dropdown-item:focus { color: #16181b; text-decoration: none; background-color: #e9ecef; } -.dropdown-item.active, .dropdown-item:active { + +.dropdown-item.active, +.dropdown-item:active { color: #fff; text-decoration: none; background-color: #f4623a; } -.dropdown-item.disabled, .dropdown-item:disabled { + +.dropdown-item.disabled, +.dropdown-item:disabled { color: #adb5bd; pointer-events: none; background-color: transparent; @@ -3193,19 +3648,24 @@ input[type=button].btn-block { display: inline-flex; vertical-align: middle; } -.btn-group > .btn, -.btn-group-vertical > .btn { + +.btn-group>.btn, +.btn-group-vertical>.btn { position: relative; flex: 1 1 auto; } -.btn-group > .btn:hover, -.btn-group-vertical > .btn:hover { + +.btn-group>.btn:hover, +.btn-group-vertical>.btn:hover { z-index: 1; } -.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, -.btn-group-vertical > .btn:focus, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn.active { + +.btn-group>.btn:focus, +.btn-group>.btn:active, +.btn-group>.btn.active, +.btn-group-vertical>.btn:focus, +.btn-group-vertical>.btn:active, +.btn-group-vertical>.btn.active { z-index: 1; } @@ -3214,21 +3674,24 @@ input[type=button].btn-block { flex-wrap: wrap; justify-content: flex-start; } + .btn-toolbar .input-group { width: auto; } -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) { +.btn-group>.btn:not(:first-child), +.btn-group>.btn-group:not(:first-child) { margin-left: -1px; } -.btn-group > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group > .btn-group:not(:last-child) > .btn { + +.btn-group>.btn:not(:last-child):not(.dropdown-toggle), +.btn-group>.btn-group:not(:last-child)>.btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) > .btn { + +.btn-group>.btn:not(:first-child), +.btn-group>.btn-group:not(:first-child)>.btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3237,19 +3700,25 @@ input[type=button].btn-block { padding-right: 0.5625rem; padding-left: 0.5625rem; } -.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after { + +.dropdown-toggle-split::after, +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { margin-left: 0; } + .dropleft .dropdown-toggle-split::before { margin-right: 0; } -.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { +.btn-sm+.dropdown-toggle-split, +.btn-group-sm>.btn+.dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } -.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { +.btn-lg+.dropdown-toggle-split, +.btn-group-lg>.btn+.dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } @@ -3259,33 +3728,38 @@ input[type=button].btn-block { align-items: flex-start; justify-content: center; } -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group { + +.btn-group-vertical>.btn, +.btn-group-vertical>.btn-group { width: 100%; } -.btn-group-vertical > .btn:not(:first-child), -.btn-group-vertical > .btn-group:not(:first-child) { + +.btn-group-vertical>.btn:not(:first-child), +.btn-group-vertical>.btn-group:not(:first-child) { margin-top: -1px; } -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group-vertical > .btn-group:not(:last-child) > .btn { + +.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical>.btn-group:not(:last-child)>.btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn:not(:first-child), -.btn-group-vertical > .btn-group:not(:first-child) > .btn { + +.btn-group-vertical>.btn:not(:first-child), +.btn-group-vertical>.btn-group:not(:first-child)>.btn { border-top-left-radius: 0; border-top-right-radius: 0; } -.btn-group-toggle > .btn, -.btn-group-toggle > .btn-group > .btn { +.btn-group-toggle>.btn, +.btn-group-toggle>.btn-group>.btn { margin-bottom: 0; } -.btn-group-toggle > .btn input[type=radio], -.btn-group-toggle > .btn input[type=checkbox], -.btn-group-toggle > .btn-group > .btn input[type=radio], -.btn-group-toggle > .btn-group > .btn input[type=checkbox] { + +.btn-group-toggle>.btn input[type=radio], +.btn-group-toggle>.btn input[type=checkbox], +.btn-group-toggle>.btn-group>.btn input[type=radio], +.btn-group-toggle>.btn-group>.btn input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; @@ -3298,60 +3772,70 @@ input[type=button].btn-block { align-items: stretch; width: 100%; } -.input-group > .form-control, -.input-group > .form-control-plaintext, -.input-group > .custom-select, -.input-group > .custom-file { + +.input-group>.form-control, +.input-group>.form-control-plaintext, +.input-group>.custom-select, +.input-group>.custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } -.input-group > .form-control + .form-control, -.input-group > .form-control + .custom-select, -.input-group > .form-control + .custom-file, -.input-group > .form-control-plaintext + .form-control, -.input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .custom-file, -.input-group > .custom-select + .form-control, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .custom-file, -.input-group > .custom-file + .form-control, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .custom-file { + +.input-group>.form-control+.form-control, +.input-group>.form-control+.custom-select, +.input-group>.form-control+.custom-file, +.input-group>.form-control-plaintext+.form-control, +.input-group>.form-control-plaintext+.custom-select, +.input-group>.form-control-plaintext+.custom-file, +.input-group>.custom-select+.form-control, +.input-group>.custom-select+.custom-select, +.input-group>.custom-select+.custom-file, +.input-group>.custom-file+.form-control, +.input-group>.custom-file+.custom-select, +.input-group>.custom-file+.custom-file { margin-left: -1px; } -.input-group > .form-control:focus, -.input-group > .custom-select:focus, -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { + +.input-group>.form-control:focus, +.input-group>.custom-select:focus, +.input-group>.custom-file .custom-file-input:focus~.custom-file-label { z-index: 3; } -.input-group > .custom-file .custom-file-input:focus { + +.input-group>.custom-file .custom-file-input:focus { z-index: 4; } -.input-group > .form-control:not(:first-child), -.input-group > .custom-select:not(:first-child) { + +.input-group>.form-control:not(:first-child), +.input-group>.custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group > .custom-file { + +.input-group>.custom-file { display: flex; align-items: center; } -.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:first-child) .custom-file-label { + +.input-group>.custom-file:not(:last-child) .custom-file-label, +.input-group>.custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group:not(.has-validation) > .form-control:not(:last-child), -.input-group:not(.has-validation) > .custom-select:not(:last-child), -.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after { + +.input-group:not(.has-validation)>.form-control:not(:last-child), +.input-group:not(.has-validation)>.custom-select:not(:last-child), +.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group.has-validation > .form-control:nth-last-child(n+3), -.input-group.has-validation > .custom-select:nth-last-child(n+3), -.input-group.has-validation > .custom-file:nth-last-child(n+3) .custom-file-label::after { + +.input-group.has-validation>.form-control:nth-last-child(n+3), +.input-group.has-validation>.custom-select:nth-last-child(n+3), +.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } @@ -3360,23 +3844,26 @@ input[type=button].btn-block { .input-group-append { display: flex; } + .input-group-prepend .btn, .input-group-append .btn { position: relative; z-index: 2; } + .input-group-prepend .btn:focus, .input-group-append .btn:focus { z-index: 3; } -.input-group-prepend .btn + .btn, -.input-group-prepend .btn + .input-group-text, -.input-group-prepend .input-group-text + .input-group-text, -.input-group-prepend .input-group-text + .btn, -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .input-group-text, -.input-group-append .input-group-text + .btn { + +.input-group-prepend .btn+.btn, +.input-group-prepend .btn+.input-group-text, +.input-group-prepend .input-group-text+.input-group-text, +.input-group-prepend .input-group-text+.btn, +.input-group-append .btn+.btn, +.input-group-append .btn+.input-group-text, +.input-group-append .input-group-text+.input-group-text, +.input-group-append .input-group-text+.btn { margin-left: -1px; } @@ -3403,68 +3890,69 @@ input[type=button].btn-block { border: 1px solid #ced4da; border-radius: 0.25rem; } + .input-group-text input[type=radio], .input-group-text input[type=checkbox] { margin-top: 0; } -.input-group-lg > .form-control:not(textarea), -.input-group-lg > .custom-select { +.input-group-lg>.form-control:not(textarea), +.input-group-lg>.custom-select { height: calc(1.5em + 1rem + 2px); } -.input-group-lg > .form-control, -.input-group-lg > .custom-select, -.input-group-lg > .input-group-prepend > .input-group-text, -.input-group-lg > .input-group-append > .input-group-text, -.input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-append > .btn { +.input-group-lg>.form-control, +.input-group-lg>.custom-select, +.input-group-lg>.input-group-prepend>.input-group-text, +.input-group-lg>.input-group-append>.input-group-text, +.input-group-lg>.input-group-prepend>.btn, +.input-group-lg>.input-group-append>.btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } -.input-group-sm > .form-control:not(textarea), -.input-group-sm > .custom-select { +.input-group-sm>.form-control:not(textarea), +.input-group-sm>.custom-select { height: calc(1.5em + 0.5rem + 2px); } -.input-group-sm > .form-control, -.input-group-sm > .custom-select, -.input-group-sm > .input-group-prepend > .input-group-text, -.input-group-sm > .input-group-append > .input-group-text, -.input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-append > .btn { +.input-group-sm>.form-control, +.input-group-sm>.custom-select, +.input-group-sm>.input-group-prepend>.input-group-text, +.input-group-sm>.input-group-append>.input-group-text, +.input-group-sm>.input-group-prepend>.btn, +.input-group-sm>.input-group-append>.btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } -.input-group-lg > .custom-select, -.input-group-sm > .custom-select { +.input-group-lg>.custom-select, +.input-group-sm>.custom-select { padding-right: 1.75rem; } -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text, -.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, -.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, -.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, -.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { +.input-group>.input-group-prepend>.btn, +.input-group>.input-group-prepend>.input-group-text, +.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.btn, +.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.input-group-text, +.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.btn, +.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.input-group-text, +.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), +.input-group>.input-group-append:last-child>.input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group > .input-group-append > .btn, -.input-group > .input-group-append > .input-group-text, -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text, -.input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { +.input-group>.input-group-append>.btn, +.input-group>.input-group-append>.input-group-text, +.input-group>.input-group-prepend:not(:first-child)>.btn, +.input-group>.input-group-prepend:not(:first-child)>.input-group-text, +.input-group>.input-group-prepend:first-child>.btn:not(:first-child), +.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3476,7 +3964,7 @@ input[type=button].btn-block { min-height: 1.5rem; padding-left: 1.5rem; -webkit-print-color-adjust: exact; - color-adjust: exact; + color-adjust: exact; } .custom-control-inline { @@ -3492,26 +3980,34 @@ input[type=button].btn-block { height: 1.25rem; opacity: 0; } -.custom-control-input:checked ~ .custom-control-label::before { + +.custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #f4623a; background-color: #f4623a; } -.custom-control-input:focus ~ .custom-control-label::before { + +.custom-control-input:focus~.custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } -.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + +.custom-control-input:focus:not(:checked)~.custom-control-label::before { border-color: #fbc2b3; } -.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + +.custom-control-input:not(:disabled):active~.custom-control-label::before { color: #fff; background-color: #fde9e3; border-color: #fde9e3; } -.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { + +.custom-control-input[disabled]~.custom-control-label, +.custom-control-input:disabled~.custom-control-label { color: #6c757d; } -.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { + +.custom-control-input[disabled]~.custom-control-label::before, +.custom-control-input:disabled~.custom-control-label::before { background-color: #e9ecef; } @@ -3520,6 +4016,7 @@ input[type=button].btn-block { margin-bottom: 0; vertical-align: top; } + .custom-control-label::before { position: absolute; top: 0.25rem; @@ -3532,6 +4029,7 @@ input[type=button].btn-block { background-color: #fff; border: #adb5bd solid 1px; } + .custom-control-label::after { position: absolute; top: 0.25rem; @@ -3546,42 +4044,51 @@ input[type=button].btn-block { .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } -.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + +.custom-checkbox .custom-control-input:checked~.custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); } -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { + +.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before { border-color: #f4623a; background-color: #f4623a; } -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { + +.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); } -.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { + +.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before { background-color: rgba(244, 98, 58, 0.5); } -.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { + +.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before { background-color: rgba(244, 98, 58, 0.5); } .custom-radio .custom-control-label::before { border-radius: 50%; } -.custom-radio .custom-control-input:checked ~ .custom-control-label::after { + +.custom-radio .custom-control-input:checked~.custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } -.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { + +.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before { background-color: rgba(244, 98, 58, 0.5); } .custom-switch { padding-left: 2.25rem; } + .custom-switch .custom-control-label::before { left: -2.25rem; width: 1.75rem; pointer-events: all; border-radius: 0.5rem; } + .custom-switch .custom-control-label::after { top: calc(0.25rem + 2px); left: calc(-2.25rem + 2px); @@ -3591,16 +4098,19 @@ input[type=button].btn-block { border-radius: 0.5rem; transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { .custom-switch .custom-control-label::after { transition: none; } } -.custom-switch .custom-control-input:checked ~ .custom-control-label::after { + +.custom-switch .custom-control-input:checked~.custom-control-label::after { background-color: #fff; transform: translateX(0.75rem); } -.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { + +.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before { background-color: rgba(244, 98, 58, 0.5); } @@ -3618,30 +4128,37 @@ input[type=button].btn-block { border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; } + .custom-select:focus { border-color: #fbc2b3; outline: 0; box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } + .custom-select:focus::-ms-value { color: #495057; background-color: #fff; } -.custom-select[multiple], .custom-select[size]:not([size="1"]) { + +.custom-select[multiple], +.custom-select[size]:not([size="1"]) { height: auto; padding-right: 0.75rem; background-image: none; } + .custom-select:disabled { color: #6c757d; background-color: #e9ecef; } + .custom-select::-ms-expand { display: none; } + .custom-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #495057; @@ -3680,17 +4197,22 @@ input[type=button].btn-block { overflow: hidden; opacity: 0; } -.custom-file-input:focus ~ .custom-file-label { + +.custom-file-input:focus~.custom-file-label { border-color: #fbc2b3; box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } -.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { + +.custom-file-input[disabled]~.custom-file-label, +.custom-file-input:disabled~.custom-file-label { background-color: #e9ecef; } -.custom-file-input:lang(en) ~ .custom-file-label::after { + +.custom-file-input:lang(en)~.custom-file-label::after { content: "Browse"; } -.custom-file-input ~ .custom-file-label[data-browse]::after { + +.custom-file-input~.custom-file-label[data-browse]::after { content: attr(data-browse); } @@ -3710,6 +4232,7 @@ input[type=button].btn-block { border: 1px solid #ced4da; border-radius: 0.25rem; } + .custom-file-label::after { position: absolute; top: 0; @@ -3733,24 +4256,30 @@ input[type=button].btn-block { padding: 0; background-color: transparent; -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; } + .custom-range:focus { outline: 0; } + .custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } + .custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } + .custom-range:focus::-ms-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(244, 98, 58, 0.25); } + .custom-range::-moz-focus-outer { border: 0; } + .custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; @@ -3761,17 +4290,20 @@ input[type=button].btn-block { -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-appearance: none; - appearance: none; + appearance: none; } + @media (prefers-reduced-motion: reduce) { .custom-range::-webkit-slider-thumb { -webkit-transition: none; transition: none; } } + .custom-range::-webkit-slider-thumb:active { background-color: #fde9e3; } + .custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; @@ -3781,6 +4313,7 @@ input[type=button].btn-block { border-color: transparent; border-radius: 1rem; } + .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; @@ -3790,17 +4323,20 @@ input[type=button].btn-block { -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -moz-appearance: none; - appearance: none; + appearance: none; } + @media (prefers-reduced-motion: reduce) { .custom-range::-moz-range-thumb { -moz-transition: none; transition: none; } } + .custom-range::-moz-range-thumb:active { background-color: #fde9e3; } + .custom-range::-moz-range-track { width: 100%; height: 0.5rem; @@ -3810,6 +4346,7 @@ input[type=button].btn-block { border-color: transparent; border-radius: 1rem; } + .custom-range::-ms-thumb { width: 1rem; height: 1rem; @@ -3823,15 +4360,18 @@ input[type=button].btn-block { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance: none; } + @media (prefers-reduced-motion: reduce) { .custom-range::-ms-thumb { -ms-transition: none; transition: none; } } + .custom-range::-ms-thumb:active { background-color: #fde9e3; } + .custom-range::-ms-track { width: 100%; height: 0.5rem; @@ -3841,27 +4381,34 @@ input[type=button].btn-block { border-color: transparent; border-width: 0.5rem; } + .custom-range::-ms-fill-lower { background-color: #dee2e6; border-radius: 1rem; } + .custom-range::-ms-fill-upper { margin-right: 15px; background-color: #dee2e6; border-radius: 1rem; } + .custom-range:disabled::-webkit-slider-thumb { background-color: #adb5bd; } + .custom-range:disabled::-webkit-slider-runnable-track { cursor: default; } + .custom-range:disabled::-moz-range-thumb { background-color: #adb5bd; } + .custom-range:disabled::-moz-range-track { cursor: default; } + .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } @@ -3871,10 +4418,12 @@ input[type=button].btn-block { .custom-select { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { + .custom-control-label::before, -.custom-file-label, -.custom-select { + .custom-file-label, + .custom-select { transition: none; } } @@ -3891,9 +4440,12 @@ input[type=button].btn-block { display: block; padding: 0.5rem 1rem; } -.nav-link:hover, .nav-link:focus { + +.nav-link:hover, +.nav-link:focus { text-decoration: none; } + .nav-link.disabled { color: #6c757d; pointer-events: none; @@ -3903,26 +4455,32 @@ input[type=button].btn-block { .nav-tabs { border-bottom: 1px solid #dee2e6; } + .nav-tabs .nav-link { margin-bottom: -1px; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } -.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { border-color: #e9ecef #e9ecef #dee2e6; } + .nav-tabs .nav-link.disabled { color: #6c757d; background-color: transparent; border-color: transparent; } + .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } + .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; @@ -3932,29 +4490,31 @@ input[type=button].btn-block { .nav-pills .nav-link { border-radius: 0.25rem; } + .nav-pills .nav-link.active, -.nav-pills .show > .nav-link { +.nav-pills .show>.nav-link { color: #fff; background-color: #f4623a; } -.nav-fill > .nav-link, +.nav-fill>.nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } -.nav-justified > .nav-link, +.nav-justified>.nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } -.tab-content > .tab-pane { +.tab-content>.tab-pane { display: none; } -.tab-content > .active { + +.tab-content>.active { display: block; } @@ -3966,6 +4526,7 @@ input[type=button].btn-block { justify-content: space-between; padding: 0.5rem 1rem; } + .navbar .container, .navbar .container-fluid, .navbar .container-sm, @@ -3977,6 +4538,7 @@ input[type=button].btn-block { align-items: center; justify-content: space-between; } + .navbar-brand { display: inline-block; padding-top: 0.3125rem; @@ -3986,7 +4548,9 @@ input[type=button].btn-block { line-height: inherit; white-space: nowrap; } -.navbar-brand:hover, .navbar-brand:focus { + +.navbar-brand:hover, +.navbar-brand:focus { text-decoration: none; } @@ -3997,10 +4561,12 @@ input[type=button].btn-block { margin-bottom: 0; list-style: none; } + .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } + .navbar-nav .dropdown-menu { position: static; float: none; @@ -4026,7 +4592,9 @@ input[type=button].btn-block { border: 1px solid transparent; border-radius: 0.25rem; } -.navbar-toggler:hover, .navbar-toggler:focus { + +.navbar-toggler:hover, +.navbar-toggler:focus { text-decoration: none; } @@ -4045,223 +4613,271 @@ input[type=button].btn-block { } @media (max-width: 575.98px) { - .navbar-expand-sm > .container, -.navbar-expand-sm > .container-fluid, -.navbar-expand-sm > .container-sm, -.navbar-expand-sm > .container-md, -.navbar-expand-sm > .container-lg, -.navbar-expand-sm > .container-xl { + + .navbar-expand-sm>.container, + .navbar-expand-sm>.container-fluid, + .navbar-expand-sm>.container-sm, + .navbar-expand-sm>.container-md, + .navbar-expand-sm>.container-lg, + .navbar-expand-sm>.container-xl { padding-right: 0; padding-left: 0; } } + @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; } + .navbar-expand-sm .navbar-nav { flex-direction: row; } + .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-sm > .container, -.navbar-expand-sm > .container-fluid, -.navbar-expand-sm > .container-sm, -.navbar-expand-sm > .container-md, -.navbar-expand-sm > .container-lg, -.navbar-expand-sm > .container-xl { + + .navbar-expand-sm>.container, + .navbar-expand-sm>.container-fluid, + .navbar-expand-sm>.container-sm, + .navbar-expand-sm>.container-md, + .navbar-expand-sm>.container-lg, + .navbar-expand-sm>.container-xl { flex-wrap: nowrap; } + .navbar-expand-sm .navbar-nav-scroll { overflow: visible; } + .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; } + .navbar-expand-sm .navbar-toggler { display: none; } } + @media (max-width: 767.98px) { - .navbar-expand-md > .container, -.navbar-expand-md > .container-fluid, -.navbar-expand-md > .container-sm, -.navbar-expand-md > .container-md, -.navbar-expand-md > .container-lg, -.navbar-expand-md > .container-xl { + + .navbar-expand-md>.container, + .navbar-expand-md>.container-fluid, + .navbar-expand-md>.container-sm, + .navbar-expand-md>.container-md, + .navbar-expand-md>.container-lg, + .navbar-expand-md>.container-xl { padding-right: 0; padding-left: 0; } } + @media (min-width: 768px) { .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; } + .navbar-expand-md .navbar-nav { flex-direction: row; } + .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-md > .container, -.navbar-expand-md > .container-fluid, -.navbar-expand-md > .container-sm, -.navbar-expand-md > .container-md, -.navbar-expand-md > .container-lg, -.navbar-expand-md > .container-xl { + + .navbar-expand-md>.container, + .navbar-expand-md>.container-fluid, + .navbar-expand-md>.container-sm, + .navbar-expand-md>.container-md, + .navbar-expand-md>.container-lg, + .navbar-expand-md>.container-xl { flex-wrap: nowrap; } + .navbar-expand-md .navbar-nav-scroll { overflow: visible; } + .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; } + .navbar-expand-md .navbar-toggler { display: none; } } + @media (max-width: 991.98px) { - .navbar-expand-lg > .container, -.navbar-expand-lg > .container-fluid, -.navbar-expand-lg > .container-sm, -.navbar-expand-lg > .container-md, -.navbar-expand-lg > .container-lg, -.navbar-expand-lg > .container-xl { + + .navbar-expand-lg>.container, + .navbar-expand-lg>.container-fluid, + .navbar-expand-lg>.container-sm, + .navbar-expand-lg>.container-md, + .navbar-expand-lg>.container-lg, + .navbar-expand-lg>.container-xl { padding-right: 0; padding-left: 0; } } + @media (min-width: 992px) { .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; } + .navbar-expand-lg .navbar-nav { flex-direction: row; } + .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-lg > .container, -.navbar-expand-lg > .container-fluid, -.navbar-expand-lg > .container-sm, -.navbar-expand-lg > .container-md, -.navbar-expand-lg > .container-lg, -.navbar-expand-lg > .container-xl { + + .navbar-expand-lg>.container, + .navbar-expand-lg>.container-fluid, + .navbar-expand-lg>.container-sm, + .navbar-expand-lg>.container-md, + .navbar-expand-lg>.container-lg, + .navbar-expand-lg>.container-xl { flex-wrap: nowrap; } + .navbar-expand-lg .navbar-nav-scroll { overflow: visible; } + .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } + .navbar-expand-lg .navbar-toggler { display: none; } } + @media (max-width: 1199.98px) { - .navbar-expand-xl > .container, -.navbar-expand-xl > .container-fluid, -.navbar-expand-xl > .container-sm, -.navbar-expand-xl > .container-md, -.navbar-expand-xl > .container-lg, -.navbar-expand-xl > .container-xl { + + .navbar-expand-xl>.container, + .navbar-expand-xl>.container-fluid, + .navbar-expand-xl>.container-sm, + .navbar-expand-xl>.container-md, + .navbar-expand-xl>.container-lg, + .navbar-expand-xl>.container-xl { padding-right: 0; padding-left: 0; } } + @media (min-width: 1200px) { .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; } + .navbar-expand-xl .navbar-nav { flex-direction: row; } + .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-xl > .container, -.navbar-expand-xl > .container-fluid, -.navbar-expand-xl > .container-sm, -.navbar-expand-xl > .container-md, -.navbar-expand-xl > .container-lg, -.navbar-expand-xl > .container-xl { + + .navbar-expand-xl>.container, + .navbar-expand-xl>.container-fluid, + .navbar-expand-xl>.container-sm, + .navbar-expand-xl>.container-md, + .navbar-expand-xl>.container-lg, + .navbar-expand-xl>.container-xl { flex-wrap: nowrap; } + .navbar-expand-xl .navbar-nav-scroll { overflow: visible; } + .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; } + .navbar-expand-xl .navbar-toggler { display: none; } } + .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } -.navbar-expand > .container, -.navbar-expand > .container-fluid, -.navbar-expand > .container-sm, -.navbar-expand > .container-md, -.navbar-expand > .container-lg, -.navbar-expand > .container-xl { + +.navbar-expand>.container, +.navbar-expand>.container-fluid, +.navbar-expand>.container-sm, +.navbar-expand>.container-md, +.navbar-expand>.container-lg, +.navbar-expand>.container-xl { padding-right: 0; padding-left: 0; } + .navbar-expand .navbar-nav { flex-direction: row; } + .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } -.navbar-expand > .container, -.navbar-expand > .container-fluid, -.navbar-expand > .container-sm, -.navbar-expand > .container-md, -.navbar-expand > .container-lg, -.navbar-expand > .container-xl { + +.navbar-expand>.container, +.navbar-expand>.container-fluid, +.navbar-expand>.container-sm, +.navbar-expand>.container-md, +.navbar-expand>.container-lg, +.navbar-expand>.container-xl { flex-wrap: nowrap; } + .navbar-expand .navbar-nav-scroll { overflow: visible; } + .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } + .navbar-expand .navbar-toggler { display: none; } @@ -4269,76 +4885,102 @@ input[type=button].btn-block { .navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); } -.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { + +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, 0.9); } + .navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); } -.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { + +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { color: rgba(0, 0, 0, 0.7); } + .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } -.navbar-light .navbar-nav .show > .nav-link, -.navbar-light .navbar-nav .active > .nav-link, + +.navbar-light .navbar-nav .show>.nav-link, +.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgba(0, 0, 0, 0.9); } + .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); } + .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } + .navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); } + .navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); } -.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { + +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: rgba(0, 0, 0, 0.9); } .navbar-dark .navbar-brand { color: #fff; } -.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { + +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-brand:focus { color: #fff; } + .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } -.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { + +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } + .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } -.navbar-dark .navbar-nav .show > .nav-link, -.navbar-dark .navbar-nav .active > .nav-link, + +.navbar-dark .navbar-nav .show>.nav-link, +.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } + .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); } + .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } + .navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); } + .navbar-dark .navbar-text a { color: #fff; } -.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { + +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { color: #fff; } @@ -4353,26 +4995,31 @@ input[type=button].btn-block { border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } -.card > hr { + +.card>hr { margin-right: 0; margin-left: 0; } -.card > .list-group { + +.card>.list-group { border-top: inherit; border-bottom: inherit; } -.card > .list-group:first-child { + +.card>.list-group:first-child { border-top-width: 0; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } -.card > .list-group:last-child { + +.card>.list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } -.card > .card-header + .list-group, -.card > .list-group + .card-footer { + +.card>.card-header+.list-group, +.card>.list-group+.card-footer { border-top: 0; } @@ -4398,7 +5045,8 @@ input[type=button].btn-block { .card-link:hover { text-decoration: none; } -.card-link + .card-link { + +.card-link+.card-link { margin-left: 1.25rem; } @@ -4408,6 +5056,7 @@ input[type=button].btn-block { background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } + .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } @@ -4417,6 +5066,7 @@ input[type=button].btn-block { background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } + .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } @@ -4465,6 +5115,7 @@ input[type=button].btn-block { .card-deck .card { margin-bottom: 15px; } + @media (min-width: 576px) { .card-deck { display: flex; @@ -4472,6 +5123,7 @@ input[type=button].btn-block { margin-right: -15px; margin-left: -15px; } + .card-deck .card { flex: 1 0 0%; margin-right: 15px; @@ -4480,44 +5132,53 @@ input[type=button].btn-block { } } -.card-group > .card { +.card-group>.card { margin-bottom: 15px; } + @media (min-width: 576px) { .card-group { display: flex; flex-flow: row wrap; } - .card-group > .card { + + .card-group>.card { flex: 1 0 0%; margin-bottom: 0; } - .card-group > .card + .card { + + .card-group>.card+.card { margin-left: 0; border-left: 0; } - .card-group > .card:not(:last-child) { + + .card-group>.card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-img-top, -.card-group > .card:not(:last-child) .card-header { + + .card-group>.card:not(:last-child) .card-img-top, + .card-group>.card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-img-bottom, -.card-group > .card:not(:last-child) .card-footer { + + .card-group>.card:not(:last-child) .card-img-bottom, + .card-group>.card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } - .card-group > .card:not(:first-child) { + + .card-group>.card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-img-top, -.card-group > .card:not(:first-child) .card-header { + + .card-group>.card:not(:first-child) .card-img-top, + .card-group>.card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-img-bottom, -.card-group > .card:not(:first-child) .card-footer { + + .card-group>.card:not(:first-child) .card-img-bottom, + .card-group>.card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } @@ -4525,15 +5186,17 @@ input[type=button].btn-block { .card-columns .card { margin-bottom: 0.75rem; } + @media (min-width: 576px) { .card-columns { -moz-column-count: 3; - column-count: 3; + column-count: 3; -moz-column-gap: 1.25rem; - column-gap: 1.25rem; + column-gap: 1.25rem; orphans: 1; widows: 1; } + .card-columns .card { display: inline-block; width: 100%; @@ -4543,19 +5206,23 @@ input[type=button].btn-block { .accordion { overflow-anchor: none; } -.accordion > .card { + +.accordion>.card { overflow: hidden; } -.accordion > .card:not(:last-of-type) { + +.accordion>.card:not(:last-of-type) { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.accordion > .card:not(:first-of-type) { + +.accordion>.card:not(:first-of-type) { border-top-left-radius: 0; border-top-right-radius: 0; } -.accordion > .card > .card-header { + +.accordion>.card>.card-header { border-radius: 0; margin-bottom: -1px; } @@ -4570,21 +5237,25 @@ input[type=button].btn-block { border-radius: 0.25rem; } -.breadcrumb-item + .breadcrumb-item { +.breadcrumb-item+.breadcrumb-item { padding-left: 0.5rem; } -.breadcrumb-item + .breadcrumb-item::before { + +.breadcrumb-item+.breadcrumb-item::before { float: left; padding-right: 0.5rem; color: #6c757d; content: "/"; } -.breadcrumb-item + .breadcrumb-item:hover::before { + +.breadcrumb-item+.breadcrumb-item:hover::before { text-decoration: underline; } -.breadcrumb-item + .breadcrumb-item:hover::before { + +.breadcrumb-item+.breadcrumb-item:hover::before { text-decoration: none; } + .breadcrumb-item.active { color: #6c757d; } @@ -4606,6 +5277,7 @@ input[type=button].btn-block { background-color: #fff; border: 1px solid #dee2e6; } + .page-link:hover { z-index: 2; color: #d6370c; @@ -4613,6 +5285,7 @@ input[type=button].btn-block { background-color: #e9ecef; border-color: #dee2e6; } + .page-link:focus { z-index: 3; outline: 0; @@ -4624,16 +5297,19 @@ input[type=button].btn-block { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } + .page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } + .page-item.active .page-link { z-index: 3; color: #fff; background-color: #f4623a; border-color: #f4623a; } + .page-item.disabled .page-link { color: #6c757d; pointer-events: none; @@ -4647,10 +5323,12 @@ input[type=button].btn-block { font-size: 1.25rem; line-height: 1.5; } + .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } + .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; @@ -4661,10 +5339,12 @@ input[type=button].btn-block { font-size: 0.875rem; line-height: 1.5; } + .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } + .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; @@ -4682,12 +5362,15 @@ input[type=button].btn-block { border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { .badge { transition: none; } } -a.badge:hover, a.badge:focus { + +a.badge:hover, +a.badge:focus { text-decoration: none; } @@ -4710,11 +5393,15 @@ a.badge:hover, a.badge:focus { color: #fff; background-color: #f4623a; } -a.badge-primary:hover, a.badge-primary:focus { + +a.badge-primary:hover, +a.badge-primary:focus { color: #fff; background-color: #ee3e0d; } -a.badge-primary:focus, a.badge-primary.focus { + +a.badge-primary:focus, +a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(244, 98, 58, 0.5); } @@ -4723,11 +5410,15 @@ a.badge-primary:focus, a.badge-primary.focus { color: #fff; background-color: #6c757d; } -a.badge-secondary:hover, a.badge-secondary:focus { + +a.badge-secondary:hover, +a.badge-secondary:focus { color: #fff; background-color: #545b62; } -a.badge-secondary:focus, a.badge-secondary.focus { + +a.badge-secondary:focus, +a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } @@ -4736,11 +5427,15 @@ a.badge-secondary:focus, a.badge-secondary.focus { color: #fff; background-color: #28a745; } -a.badge-success:hover, a.badge-success:focus { + +a.badge-success:hover, +a.badge-success:focus { color: #fff; background-color: #1e7e34; } -a.badge-success:focus, a.badge-success.focus { + +a.badge-success:focus, +a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } @@ -4749,11 +5444,15 @@ a.badge-success:focus, a.badge-success.focus { color: #fff; background-color: #17a2b8; } -a.badge-info:hover, a.badge-info:focus { + +a.badge-info:hover, +a.badge-info:focus { color: #fff; background-color: #117a8b; } -a.badge-info:focus, a.badge-info.focus { + +a.badge-info:focus, +a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } @@ -4762,11 +5461,15 @@ a.badge-info:focus, a.badge-info.focus { color: #212529; background-color: #ffc107; } -a.badge-warning:hover, a.badge-warning:focus { + +a.badge-warning:hover, +a.badge-warning:focus { color: #212529; background-color: #d39e00; } -a.badge-warning:focus, a.badge-warning.focus { + +a.badge-warning:focus, +a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } @@ -4775,11 +5478,15 @@ a.badge-warning:focus, a.badge-warning.focus { color: #fff; background-color: #dc3545; } -a.badge-danger:hover, a.badge-danger:focus { + +a.badge-danger:hover, +a.badge-danger:focus { color: #fff; background-color: #bd2130; } -a.badge-danger:focus, a.badge-danger.focus { + +a.badge-danger:focus, +a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } @@ -4788,11 +5495,15 @@ a.badge-danger:focus, a.badge-danger.focus { color: #212529; background-color: #f8f9fa; } -a.badge-light:hover, a.badge-light:focus { + +a.badge-light:hover, +a.badge-light:focus { color: #212529; background-color: #dae0e5; } -a.badge-light:focus, a.badge-light.focus { + +a.badge-light:focus, +a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } @@ -4801,11 +5512,15 @@ a.badge-light:focus, a.badge-light.focus { color: #fff; background-color: #343a40; } -a.badge-dark:hover, a.badge-dark:focus { + +a.badge-dark:hover, +a.badge-dark:focus { color: #fff; background-color: #1d2124; } -a.badge-dark:focus, a.badge-dark.focus { + +a.badge-dark:focus, +a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } @@ -4816,6 +5531,7 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #e9ecef; border-radius: 0.3rem; } + @media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; @@ -4847,6 +5563,7 @@ a.badge-dark:focus, a.badge-dark.focus { .alert-dismissible { padding-right: 4rem; } + .alert-dismissible .close { position: absolute; top: 0; @@ -4861,9 +5578,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #fde0d8; border-color: #fcd3c8; } + .alert-primary hr { border-top-color: #fbc0b0; } + .alert-primary .alert-link { color: #562214; } @@ -4873,9 +5592,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #e2e3e5; border-color: #d6d8db; } + .alert-secondary hr { border-top-color: #c8cbcf; } + .alert-secondary .alert-link { color: #202326; } @@ -4885,9 +5606,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #d4edda; border-color: #c3e6cb; } + .alert-success hr { border-top-color: #b1dfbb; } + .alert-success .alert-link { color: #0b2e13; } @@ -4897,9 +5620,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #d1ecf1; border-color: #bee5eb; } + .alert-info hr { border-top-color: #abdde5; } + .alert-info .alert-link { color: #062c33; } @@ -4909,9 +5634,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #fff3cd; border-color: #ffeeba; } + .alert-warning hr { border-top-color: #ffe8a1; } + .alert-warning .alert-link { color: #533f03; } @@ -4921,9 +5648,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #f8d7da; border-color: #f5c6cb; } + .alert-danger hr { border-top-color: #f1b0b7; } + .alert-danger .alert-link { color: #491217; } @@ -4933,9 +5662,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #fefefe; border-color: #fdfdfe; } + .alert-light hr { border-top-color: #ececf6; } + .alert-light .alert-link { color: #686868; } @@ -4945,9 +5676,11 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #d6d8d9; border-color: #c6c8ca; } + .alert-dark hr { border-top-color: #b9bbbe; } + .alert-dark .alert-link { color: #040505; } @@ -4956,6 +5689,7 @@ a.badge-dark:focus, a.badge-dark.focus { from { background-position: 1rem 0; } + to { background-position: 0 0; } @@ -4965,10 +5699,12 @@ a.badge-dark:focus, a.badge-dark.focus { from { background-position: 1rem 0; } + to { background-position: 0 0; } } + .progress { display: flex; height: 1rem; @@ -4990,6 +5726,7 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #f4623a; transition: width 0.6s ease; } + @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; @@ -5003,12 +5740,13 @@ a.badge-dark:focus, a.badge-dark.focus { .progress-bar-animated { -webkit-animation: 1s linear infinite progress-bar-stripes; - animation: 1s linear infinite progress-bar-stripes; + animation: 1s linear infinite progress-bar-stripes; } + @media (prefers-reduced-motion: reduce) { .progress-bar-animated { -webkit-animation: none; - animation: none; + animation: none; } } @@ -5034,12 +5772,15 @@ a.badge-dark:focus, a.badge-dark.focus { color: #495057; text-align: inherit; } -.list-group-item-action:hover, .list-group-item-action:focus { + +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: #495057; text-decoration: none; background-color: #f8f9fa; } + .list-group-item-action:active { color: #212529; background-color: #e9ecef; @@ -5052,29 +5793,36 @@ a.badge-dark:focus, a.badge-dark.focus { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); } + .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } + .list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } -.list-group-item.disabled, .list-group-item:disabled { + +.list-group-item.disabled, +.list-group-item:disabled { color: #6c757d; pointer-events: none; background-color: #fff; } + .list-group-item.active { z-index: 2; color: #fff; background-color: #f4623a; border-color: #f4623a; } -.list-group-item + .list-group-item { + +.list-group-item+.list-group-item { border-top-width: 0; } -.list-group-item + .list-group-item.active { + +.list-group-item+.list-group-item.active { margin-top: -1px; border-top-width: 1px; } @@ -5082,22 +5830,27 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal { flex-direction: row; } -.list-group-horizontal > .list-group-item:first-child { + +.list-group-horizontal>.list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } -.list-group-horizontal > .list-group-item:last-child { + +.list-group-horizontal>.list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } -.list-group-horizontal > .list-group-item.active { + +.list-group-horizontal>.list-group-item.active { margin-top: 0; } -.list-group-horizontal > .list-group-item + .list-group-item { + +.list-group-horizontal>.list-group-item+.list-group-item { border-top-width: 1px; border-left-width: 0; } -.list-group-horizontal > .list-group-item + .list-group-item.active { + +.list-group-horizontal>.list-group-item+.list-group-item.active { margin-left: -1px; border-left-width: 1px; } @@ -5106,105 +5859,131 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-horizontal-sm { flex-direction: row; } - .list-group-horizontal-sm > .list-group-item:first-child { + + .list-group-horizontal-sm>.list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-sm > .list-group-item:last-child { + + .list-group-horizontal-sm>.list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-sm > .list-group-item.active { + + .list-group-horizontal-sm>.list-group-item.active { margin-top: 0; } - .list-group-horizontal-sm > .list-group-item + .list-group-item { + + .list-group-horizontal-sm>.list-group-item+.list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-sm > .list-group-item + .list-group-item.active { + + .list-group-horizontal-sm>.list-group-item+.list-group-item.active { margin-left: -1px; border-left-width: 1px; } } + @media (min-width: 768px) { .list-group-horizontal-md { flex-direction: row; } - .list-group-horizontal-md > .list-group-item:first-child { + + .list-group-horizontal-md>.list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-md > .list-group-item:last-child { + + .list-group-horizontal-md>.list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-md > .list-group-item.active { + + .list-group-horizontal-md>.list-group-item.active { margin-top: 0; } - .list-group-horizontal-md > .list-group-item + .list-group-item { + + .list-group-horizontal-md>.list-group-item+.list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-md > .list-group-item + .list-group-item.active { + + .list-group-horizontal-md>.list-group-item+.list-group-item.active { margin-left: -1px; border-left-width: 1px; } } + @media (min-width: 992px) { .list-group-horizontal-lg { flex-direction: row; } - .list-group-horizontal-lg > .list-group-item:first-child { + + .list-group-horizontal-lg>.list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-lg > .list-group-item:last-child { + + .list-group-horizontal-lg>.list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-lg > .list-group-item.active { + + .list-group-horizontal-lg>.list-group-item.active { margin-top: 0; } - .list-group-horizontal-lg > .list-group-item + .list-group-item { + + .list-group-horizontal-lg>.list-group-item+.list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-lg > .list-group-item + .list-group-item.active { + + .list-group-horizontal-lg>.list-group-item+.list-group-item.active { margin-left: -1px; border-left-width: 1px; } } + @media (min-width: 1200px) { .list-group-horizontal-xl { flex-direction: row; } - .list-group-horizontal-xl > .list-group-item:first-child { + + .list-group-horizontal-xl>.list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal-xl > .list-group-item:last-child { + + .list-group-horizontal-xl>.list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal-xl > .list-group-item.active { + + .list-group-horizontal-xl>.list-group-item.active { margin-top: 0; } - .list-group-horizontal-xl > .list-group-item + .list-group-item { + + .list-group-horizontal-xl>.list-group-item+.list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal-xl > .list-group-item + .list-group-item.active { + + .list-group-horizontal-xl>.list-group-item+.list-group-item.active { margin-left: -1px; border-left-width: 1px; } } + .list-group-flush { border-radius: 0; } -.list-group-flush > .list-group-item { + +.list-group-flush>.list-group-item { border-width: 0 0 1px; } -.list-group-flush > .list-group-item:last-child { + +.list-group-flush>.list-group-item:last-child { border-bottom-width: 0; } @@ -5212,10 +5991,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #7f331e; background-color: #fcd3c8; } -.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { + +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { color: #7f331e; background-color: #fbc0b0; } + .list-group-item-primary.list-group-item-action.active { color: #fff; background-color: #7f331e; @@ -5226,10 +6008,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #383d41; background-color: #d6d8db; } -.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { + +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { color: #383d41; background-color: #c8cbcf; } + .list-group-item-secondary.list-group-item-action.active { color: #fff; background-color: #383d41; @@ -5240,10 +6025,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #155724; background-color: #c3e6cb; } -.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { + +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { color: #155724; background-color: #b1dfbb; } + .list-group-item-success.list-group-item-action.active { color: #fff; background-color: #155724; @@ -5254,10 +6042,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #0c5460; background-color: #bee5eb; } -.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { + +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { color: #0c5460; background-color: #abdde5; } + .list-group-item-info.list-group-item-action.active { color: #fff; background-color: #0c5460; @@ -5268,10 +6059,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #856404; background-color: #ffeeba; } -.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { + +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { color: #856404; background-color: #ffe8a1; } + .list-group-item-warning.list-group-item-action.active { color: #fff; background-color: #856404; @@ -5282,10 +6076,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #721c24; background-color: #f5c6cb; } -.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { + +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { color: #721c24; background-color: #f1b0b7; } + .list-group-item-danger.list-group-item-action.active { color: #fff; background-color: #721c24; @@ -5296,10 +6093,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #818182; background-color: #fdfdfe; } -.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { + +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { color: #818182; background-color: #ececf6; } + .list-group-item-light.list-group-item-action.active { color: #fff; background-color: #818182; @@ -5310,10 +6110,13 @@ a.badge-dark:focus, a.badge-dark.focus { color: #1b1e21; background-color: #c6c8ca; } -.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { + +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { color: #1b1e21; background-color: #b9bbbe; } + .list-group-item-dark.list-group-item-action.active { color: #fff; background-color: #1b1e21; @@ -5329,11 +6132,14 @@ a.badge-dark:focus, a.badge-dark.focus { text-shadow: 0 1px 0 #fff; opacity: 0.5; } + .close:hover { color: #000; text-decoration: none; } -.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { + +.close:not(:disabled):not(.disabled):hover, +.close:not(:disabled):not(.disabled):focus { opacity: 0.75; } @@ -5358,16 +6164,20 @@ a.close.disabled { opacity: 0; border-radius: 0.25rem; } + .toast:not(:last-child) { margin-bottom: 0.75rem; } + .toast.showing { opacity: 1; } + .toast.show { display: block; opacity: 1; } + .toast.hide { display: none; } @@ -5391,6 +6201,7 @@ a.close.disabled { .modal-open { overflow: hidden; } + .modal-open .modal { overflow-x: hidden; overflow-y: auto; @@ -5414,18 +6225,22 @@ a.close.disabled { margin: 0.5rem; pointer-events: none; } + .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } + @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } + .modal.show .modal-dialog { transform: none; } + .modal.modal-static .modal-dialog { transform: scale(1.02); } @@ -5434,14 +6249,17 @@ a.close.disabled { display: flex; max-height: calc(100% - 1rem); } + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } + .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer { flex-shrink: 0; } + .modal-dialog-scrollable .modal-body { overflow-y: auto; } @@ -5451,6 +6269,7 @@ a.close.disabled { align-items: center; min-height: calc(100% - 1rem); } + .modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); @@ -5459,14 +6278,17 @@ a.close.disabled { height: min-content; content: ""; } + .modal-dialog-centered.modal-dialog-scrollable { flex-direction: column; justify-content: center; height: 100%; } + .modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none; } + .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } @@ -5493,9 +6315,11 @@ a.close.disabled { height: 100vh; background-color: #000; } + .modal-backdrop.fade { opacity: 0; } + .modal-backdrop.show { opacity: 0.5; } @@ -5509,6 +6333,7 @@ a.close.disabled { border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } + .modal-header .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; @@ -5535,7 +6360,8 @@ a.close.disabled { border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } -.modal-footer > * { + +.modal-footer>* { margin: 0.25rem; } @@ -5556,6 +6382,7 @@ a.close.disabled { .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); } + .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); } @@ -5563,6 +6390,7 @@ a.close.disabled { .modal-dialog-centered { min-height: calc(100% - 3.5rem); } + .modal-dialog-centered::before { height: calc(100vh - 3.5rem); height: -webkit-min-content; @@ -5574,17 +6402,21 @@ a.close.disabled { max-width: 300px; } } + @media (min-width: 992px) { + .modal-lg, -.modal-xl { + .modal-xl { max-width: 800px; } } + @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } } + .tooltip { position: absolute; z-index: 1070; @@ -5608,15 +6440,18 @@ a.close.disabled { word-wrap: break-word; opacity: 0; } + .tooltip.show { opacity: 0.9; } + .tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; } + .tooltip .arrow::before { position: absolute; content: ""; @@ -5624,53 +6459,73 @@ a.close.disabled { border-style: solid; } -.bs-tooltip-top, .bs-tooltip-auto[x-placement^=top] { +.bs-tooltip-top, +.bs-tooltip-auto[x-placement^=top] { padding: 0.4rem 0; } -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^=top] .arrow { + +.bs-tooltip-top .arrow, +.bs-tooltip-auto[x-placement^=top] .arrow { bottom: 0; } -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { + +.bs-tooltip-top .arrow::before, +.bs-tooltip-auto[x-placement^=top] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; border-top-color: #000; } -.bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] { +.bs-tooltip-right, +.bs-tooltip-auto[x-placement^=right] { padding: 0 0.4rem; } -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^=right] .arrow { + +.bs-tooltip-right .arrow, +.bs-tooltip-auto[x-placement^=right] .arrow { left: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before { + +.bs-tooltip-right .arrow::before, +.bs-tooltip-auto[x-placement^=right] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; } -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^=bottom] { +.bs-tooltip-bottom, +.bs-tooltip-auto[x-placement^=bottom] { padding: 0.4rem 0; } -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^=bottom] .arrow { + +.bs-tooltip-bottom .arrow, +.bs-tooltip-auto[x-placement^=bottom] .arrow { top: 0; } -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { + +.bs-tooltip-bottom .arrow::before, +.bs-tooltip-auto[x-placement^=bottom] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; } -.bs-tooltip-left, .bs-tooltip-auto[x-placement^=left] { +.bs-tooltip-left, +.bs-tooltip-auto[x-placement^=left] { padding: 0 0.4rem; } -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^=left] .arrow { + +.bs-tooltip-left .arrow, +.bs-tooltip-auto[x-placement^=left] .arrow { right: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before { + +.bs-tooltip-left .arrow::before, +.bs-tooltip-auto[x-placement^=left] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; @@ -5713,6 +6568,7 @@ a.close.disabled { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; } + .popover .arrow { position: absolute; display: block; @@ -5720,7 +6576,9 @@ a.close.disabled { height: 0.5rem; margin: 0 0.3rem; } -.popover .arrow::before, .popover .arrow::after { + +.popover .arrow::before, +.popover .arrow::after { position: absolute; display: block; content: ""; @@ -5728,60 +6586,83 @@ a.close.disabled { border-style: solid; } -.bs-popover-top, .bs-popover-auto[x-placement^=top] { +.bs-popover-top, +.bs-popover-auto[x-placement^=top] { margin-bottom: 0.5rem; } -.bs-popover-top > .arrow, .bs-popover-auto[x-placement^=top] > .arrow { + +.bs-popover-top>.arrow, +.bs-popover-auto[x-placement^=top]>.arrow { bottom: calc(-0.5rem - 1px); } -.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before { + +.bs-popover-top>.arrow::before, +.bs-popover-auto[x-placement^=top]>.arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } -.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after { + +.bs-popover-top>.arrow::after, +.bs-popover-auto[x-placement^=top]>.arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: #fff; } -.bs-popover-right, .bs-popover-auto[x-placement^=right] { +.bs-popover-right, +.bs-popover-auto[x-placement^=right] { margin-left: 0.5rem; } -.bs-popover-right > .arrow, .bs-popover-auto[x-placement^=right] > .arrow { + +.bs-popover-right>.arrow, +.bs-popover-auto[x-placement^=right]>.arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^=right] > .arrow::before { + +.bs-popover-right>.arrow::before, +.bs-popover-auto[x-placement^=right]>.arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } -.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^=right] > .arrow::after { + +.bs-popover-right>.arrow::after, +.bs-popover-auto[x-placement^=right]>.arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #fff; } -.bs-popover-bottom, .bs-popover-auto[x-placement^=bottom] { +.bs-popover-bottom, +.bs-popover-auto[x-placement^=bottom] { margin-top: 0.5rem; } -.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^=bottom] > .arrow { + +.bs-popover-bottom>.arrow, +.bs-popover-auto[x-placement^=bottom]>.arrow { top: calc(-0.5rem - 1px); } -.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before { + +.bs-popover-bottom>.arrow::before, +.bs-popover-auto[x-placement^=bottom]>.arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } -.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after { + +.bs-popover-bottom>.arrow::after, +.bs-popover-auto[x-placement^=bottom]>.arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #fff; } -.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before { + +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[x-placement^=bottom] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -5792,21 +6673,28 @@ a.close.disabled { border-bottom: 1px solid #f7f7f7; } -.bs-popover-left, .bs-popover-auto[x-placement^=left] { +.bs-popover-left, +.bs-popover-auto[x-placement^=left] { margin-right: 0.5rem; } -.bs-popover-left > .arrow, .bs-popover-auto[x-placement^=left] > .arrow { + +.bs-popover-left>.arrow, +.bs-popover-auto[x-placement^=left]>.arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^=left] > .arrow::before { + +.bs-popover-left>.arrow::before, +.bs-popover-auto[x-placement^=left]>.arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } -.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^=left] > .arrow::after { + +.bs-popover-left>.arrow::after, +.bs-popover-auto[x-placement^=left]>.arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #fff; @@ -5821,6 +6709,7 @@ a.close.disabled { border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } + .popover-header:empty { display: none; } @@ -5843,6 +6732,7 @@ a.close.disabled { width: 100%; overflow: hidden; } + .carousel-inner::after { display: block; clear: both; @@ -5856,9 +6746,10 @@ a.close.disabled { width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; - backface-visibility: hidden; + backface-visibility: hidden; transition: transform 0.6s ease-in-out; } + @media (prefers-reduced-motion: reduce) { .carousel-item { transition: none; @@ -5886,21 +6777,25 @@ a.close.disabled { transition-property: opacity; transform: none; } + .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; } + .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { z-index: 0; opacity: 0; transition: opacity 0s 0.6s; } + @media (prefers-reduced-motion: reduce) { + .carousel-fade .active.carousel-item-left, -.carousel-fade .active.carousel-item-right { + .carousel-fade .active.carousel-item-right { transition: none; } } @@ -5920,13 +6815,17 @@ a.close.disabled { opacity: 0.5; transition: opacity 0.15s ease; } + @media (prefers-reduced-motion: reduce) { + .carousel-control-prev, -.carousel-control-next { + .carousel-control-next { transition: none; } } -.carousel-control-prev:hover, .carousel-control-prev:focus, + +.carousel-control-prev:hover, +.carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; @@ -5972,6 +6871,7 @@ a.close.disabled { margin-left: 15%; list-style: none; } + .carousel-indicators li { box-sizing: content-box; flex: 0 1 auto; @@ -5988,11 +6888,13 @@ a.close.disabled { opacity: 0.5; transition: opacity 0.6s ease; } + @media (prefers-reduced-motion: reduce) { .carousel-indicators li { transition: none; } } + .carousel-indicators .active { opacity: 1; } @@ -6020,6 +6922,7 @@ a.close.disabled { transform: rotate(360deg); } } + .spinner-border { display: inline-block; width: 2rem; @@ -6029,7 +6932,7 @@ a.close.disabled { border-right-color: transparent; border-radius: 50%; -webkit-animation: 0.75s linear infinite spinner-border; - animation: 0.75s linear infinite spinner-border; + animation: 0.75s linear infinite spinner-border; } .spinner-border-sm { @@ -6042,6 +6945,7 @@ a.close.disabled { 0% { transform: scale(0); } + 50% { opacity: 1; transform: none; @@ -6052,11 +6956,13 @@ a.close.disabled { 0% { transform: scale(0); } + 50% { opacity: 1; transform: none; } } + .spinner-grow { display: inline-block; width: 2rem; @@ -6066,7 +6972,7 @@ a.close.disabled { border-radius: 50%; opacity: 0; -webkit-animation: 0.75s linear infinite spinner-grow; - animation: 0.75s linear infinite spinner-grow; + animation: 0.75s linear infinite spinner-grow; } .spinner-grow-sm { @@ -6075,12 +6981,14 @@ a.close.disabled { } @media (prefers-reduced-motion: reduce) { + .spinner-border, -.spinner-grow { + .spinner-grow { -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; + animation-duration: 1.5s; } } + .align-baseline { vertical-align: baseline !important; } @@ -6105,11 +7013,12 @@ a.close.disabled { vertical-align: text-top !important; } -.bg-primary { +/* .bg-primary { background-color: #f4623a !important; -} +} */ -a.bg-primary:hover, a.bg-primary:focus, +a.bg-primary:hover, +a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { background-color: #ee3e0d !important; @@ -6119,7 +7028,8 @@ button.bg-primary:focus { background-color: #6c757d !important; } -a.bg-secondary:hover, a.bg-secondary:focus, +a.bg-secondary:hover, +a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { background-color: #545b62 !important; @@ -6129,7 +7039,8 @@ button.bg-secondary:focus { background-color: #28a745 !important; } -a.bg-success:hover, a.bg-success:focus, +a.bg-success:hover, +a.bg-success:focus, button.bg-success:hover, button.bg-success:focus { background-color: #1e7e34 !important; @@ -6139,7 +7050,8 @@ button.bg-success:focus { background-color: #17a2b8 !important; } -a.bg-info:hover, a.bg-info:focus, +a.bg-info:hover, +a.bg-info:focus, button.bg-info:hover, button.bg-info:focus { background-color: #117a8b !important; @@ -6149,7 +7061,8 @@ button.bg-info:focus { background-color: #ffc107 !important; } -a.bg-warning:hover, a.bg-warning:focus, +a.bg-warning:hover, +a.bg-warning:focus, button.bg-warning:hover, button.bg-warning:focus { background-color: #d39e00 !important; @@ -6159,7 +7072,8 @@ button.bg-warning:focus { background-color: #dc3545 !important; } -a.bg-danger:hover, a.bg-danger:focus, +a.bg-danger:hover, +a.bg-danger:focus, button.bg-danger:hover, button.bg-danger:focus { background-color: #bd2130 !important; @@ -6169,7 +7083,8 @@ button.bg-danger:focus { background-color: #f8f9fa !important; } -a.bg-light:hover, a.bg-light:focus, +a.bg-light:hover, +a.bg-light:focus, button.bg-light:hover, button.bg-light:focus { background-color: #dae0e5 !important; @@ -6179,7 +7094,8 @@ button.bg-light:focus { background-color: #343a40 !important; } -a.bg-dark:hover, a.bg-dark:focus, +a.bg-dark:hover, +a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus { background-color: #1d2124 !important; @@ -6392,6 +7308,7 @@ button.bg-dark:focus { display: inline-flex !important; } } + @media (min-width: 768px) { .d-md-none { display: none !important; @@ -6429,6 +7346,7 @@ button.bg-dark:focus { display: inline-flex !important; } } + @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -6466,6 +7384,7 @@ button.bg-dark:focus { display: inline-flex !important; } } + @media (min-width: 1200px) { .d-xl-none { display: none !important; @@ -6503,6 +7422,7 @@ button.bg-dark:focus { display: inline-flex !important; } } + @media print { .d-print-none { display: none !important; @@ -6540,6 +7460,7 @@ button.bg-dark:focus { display: inline-flex !important; } } + .embed-responsive { position: relative; display: block; @@ -6547,10 +7468,12 @@ button.bg-dark:focus { padding: 0; overflow: hidden; } + .embed-responsive::before { display: block; content: ""; } + .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, @@ -6854,6 +7777,7 @@ button.bg-dark:focus { align-self: stretch !important; } } + @media (min-width: 768px) { .flex-md-row { flex-direction: row !important; @@ -6991,6 +7915,7 @@ button.bg-dark:focus { align-self: stretch !important; } } + @media (min-width: 992px) { .flex-lg-row { flex-direction: row !important; @@ -7128,6 +8053,7 @@ button.bg-dark:focus { align-self: stretch !important; } } + @media (min-width: 1200px) { .flex-xl-row { flex-direction: row !important; @@ -7265,6 +8191,7 @@ button.bg-dark:focus { align-self: stretch !important; } } + .float-left { float: left !important; } @@ -7290,6 +8217,7 @@ button.bg-dark:focus { float: none !important; } } + @media (min-width: 768px) { .float-md-left { float: left !important; @@ -7303,6 +8231,7 @@ button.bg-dark:focus { float: none !important; } } + @media (min-width: 992px) { .float-lg-left { float: left !important; @@ -7316,6 +8245,7 @@ button.bg-dark:focus { float: none !important; } } + @media (min-width: 1200px) { .float-xl-left { float: left !important; @@ -7329,24 +8259,25 @@ button.bg-dark:focus { float: none !important; } } + .user-select-all { -webkit-user-select: all !important; - -moz-user-select: all !important; - user-select: all !important; + -moz-user-select: all !important; + user-select: all !important; } .user-select-auto { -webkit-user-select: auto !important; - -moz-user-select: auto !important; - -ms-user-select: auto !important; - user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; } .user-select-none { -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; } .overflow-auto { @@ -7413,7 +8344,8 @@ button.bg-dark:focus { border: 0; } -.sr-only-focusable:active, .sr-only-focusable:focus { +.sr-only-focusable:active, +.sr-only-focusable:focus { position: static; width: auto; height: auto; @@ -7940,22 +8872,22 @@ button.bg-dark:focus { } .mt-sm-0, -.my-sm-0 { + .my-sm-0 { margin-top: 0 !important; } .mr-sm-0, -.mx-sm-0 { + .mx-sm-0 { margin-right: 0 !important; } .mb-sm-0, -.my-sm-0 { + .my-sm-0 { margin-bottom: 0 !important; } .ml-sm-0, -.mx-sm-0 { + .mx-sm-0 { margin-left: 0 !important; } @@ -7964,22 +8896,22 @@ button.bg-dark:focus { } .mt-sm-1, -.my-sm-1 { + .my-sm-1 { margin-top: 0.25rem !important; } .mr-sm-1, -.mx-sm-1 { + .mx-sm-1 { margin-right: 0.25rem !important; } .mb-sm-1, -.my-sm-1 { + .my-sm-1 { margin-bottom: 0.25rem !important; } .ml-sm-1, -.mx-sm-1 { + .mx-sm-1 { margin-left: 0.25rem !important; } @@ -7988,22 +8920,22 @@ button.bg-dark:focus { } .mt-sm-2, -.my-sm-2 { + .my-sm-2 { margin-top: 0.5rem !important; } .mr-sm-2, -.mx-sm-2 { + .mx-sm-2 { margin-right: 0.5rem !important; } .mb-sm-2, -.my-sm-2 { + .my-sm-2 { margin-bottom: 0.5rem !important; } .ml-sm-2, -.mx-sm-2 { + .mx-sm-2 { margin-left: 0.5rem !important; } @@ -8012,22 +8944,22 @@ button.bg-dark:focus { } .mt-sm-3, -.my-sm-3 { + .my-sm-3 { margin-top: 1rem !important; } .mr-sm-3, -.mx-sm-3 { + .mx-sm-3 { margin-right: 1rem !important; } .mb-sm-3, -.my-sm-3 { + .my-sm-3 { margin-bottom: 1rem !important; } .ml-sm-3, -.mx-sm-3 { + .mx-sm-3 { margin-left: 1rem !important; } @@ -8036,22 +8968,22 @@ button.bg-dark:focus { } .mt-sm-4, -.my-sm-4 { + .my-sm-4 { margin-top: 1.5rem !important; } .mr-sm-4, -.mx-sm-4 { + .mx-sm-4 { margin-right: 1.5rem !important; } .mb-sm-4, -.my-sm-4 { + .my-sm-4 { margin-bottom: 1.5rem !important; } .ml-sm-4, -.mx-sm-4 { + .mx-sm-4 { margin-left: 1.5rem !important; } @@ -8060,22 +8992,22 @@ button.bg-dark:focus { } .mt-sm-5, -.my-sm-5 { + .my-sm-5 { margin-top: 3rem !important; } .mr-sm-5, -.mx-sm-5 { + .mx-sm-5 { margin-right: 3rem !important; } .mb-sm-5, -.my-sm-5 { + .my-sm-5 { margin-bottom: 3rem !important; } .ml-sm-5, -.mx-sm-5 { + .mx-sm-5 { margin-left: 3rem !important; } @@ -8084,22 +9016,22 @@ button.bg-dark:focus { } .pt-sm-0, -.py-sm-0 { + .py-sm-0 { padding-top: 0 !important; } .pr-sm-0, -.px-sm-0 { + .px-sm-0 { padding-right: 0 !important; } .pb-sm-0, -.py-sm-0 { + .py-sm-0 { padding-bottom: 0 !important; } .pl-sm-0, -.px-sm-0 { + .px-sm-0 { padding-left: 0 !important; } @@ -8108,22 +9040,22 @@ button.bg-dark:focus { } .pt-sm-1, -.py-sm-1 { + .py-sm-1 { padding-top: 0.25rem !important; } .pr-sm-1, -.px-sm-1 { + .px-sm-1 { padding-right: 0.25rem !important; } .pb-sm-1, -.py-sm-1 { + .py-sm-1 { padding-bottom: 0.25rem !important; } .pl-sm-1, -.px-sm-1 { + .px-sm-1 { padding-left: 0.25rem !important; } @@ -8132,22 +9064,22 @@ button.bg-dark:focus { } .pt-sm-2, -.py-sm-2 { + .py-sm-2 { padding-top: 0.5rem !important; } .pr-sm-2, -.px-sm-2 { + .px-sm-2 { padding-right: 0.5rem !important; } .pb-sm-2, -.py-sm-2 { + .py-sm-2 { padding-bottom: 0.5rem !important; } .pl-sm-2, -.px-sm-2 { + .px-sm-2 { padding-left: 0.5rem !important; } @@ -8156,22 +9088,22 @@ button.bg-dark:focus { } .pt-sm-3, -.py-sm-3 { + .py-sm-3 { padding-top: 1rem !important; } .pr-sm-3, -.px-sm-3 { + .px-sm-3 { padding-right: 1rem !important; } .pb-sm-3, -.py-sm-3 { + .py-sm-3 { padding-bottom: 1rem !important; } .pl-sm-3, -.px-sm-3 { + .px-sm-3 { padding-left: 1rem !important; } @@ -8180,22 +9112,22 @@ button.bg-dark:focus { } .pt-sm-4, -.py-sm-4 { + .py-sm-4 { padding-top: 1.5rem !important; } .pr-sm-4, -.px-sm-4 { + .px-sm-4 { padding-right: 1.5rem !important; } .pb-sm-4, -.py-sm-4 { + .py-sm-4 { padding-bottom: 1.5rem !important; } .pl-sm-4, -.px-sm-4 { + .px-sm-4 { padding-left: 1.5rem !important; } @@ -8204,22 +9136,22 @@ button.bg-dark:focus { } .pt-sm-5, -.py-sm-5 { + .py-sm-5 { padding-top: 3rem !important; } .pr-sm-5, -.px-sm-5 { + .px-sm-5 { padding-right: 3rem !important; } .pb-sm-5, -.py-sm-5 { + .py-sm-5 { padding-bottom: 3rem !important; } .pl-sm-5, -.px-sm-5 { + .px-sm-5 { padding-left: 3rem !important; } @@ -8228,22 +9160,22 @@ button.bg-dark:focus { } .mt-sm-n1, -.my-sm-n1 { + .my-sm-n1 { margin-top: -0.25rem !important; } .mr-sm-n1, -.mx-sm-n1 { + .mx-sm-n1 { margin-right: -0.25rem !important; } .mb-sm-n1, -.my-sm-n1 { + .my-sm-n1 { margin-bottom: -0.25rem !important; } .ml-sm-n1, -.mx-sm-n1 { + .mx-sm-n1 { margin-left: -0.25rem !important; } @@ -8252,22 +9184,22 @@ button.bg-dark:focus { } .mt-sm-n2, -.my-sm-n2 { + .my-sm-n2 { margin-top: -0.5rem !important; } .mr-sm-n2, -.mx-sm-n2 { + .mx-sm-n2 { margin-right: -0.5rem !important; } .mb-sm-n2, -.my-sm-n2 { + .my-sm-n2 { margin-bottom: -0.5rem !important; } .ml-sm-n2, -.mx-sm-n2 { + .mx-sm-n2 { margin-left: -0.5rem !important; } @@ -8276,22 +9208,22 @@ button.bg-dark:focus { } .mt-sm-n3, -.my-sm-n3 { + .my-sm-n3 { margin-top: -1rem !important; } .mr-sm-n3, -.mx-sm-n3 { + .mx-sm-n3 { margin-right: -1rem !important; } .mb-sm-n3, -.my-sm-n3 { + .my-sm-n3 { margin-bottom: -1rem !important; } .ml-sm-n3, -.mx-sm-n3 { + .mx-sm-n3 { margin-left: -1rem !important; } @@ -8300,22 +9232,22 @@ button.bg-dark:focus { } .mt-sm-n4, -.my-sm-n4 { + .my-sm-n4 { margin-top: -1.5rem !important; } .mr-sm-n4, -.mx-sm-n4 { + .mx-sm-n4 { margin-right: -1.5rem !important; } .mb-sm-n4, -.my-sm-n4 { + .my-sm-n4 { margin-bottom: -1.5rem !important; } .ml-sm-n4, -.mx-sm-n4 { + .mx-sm-n4 { margin-left: -1.5rem !important; } @@ -8324,22 +9256,22 @@ button.bg-dark:focus { } .mt-sm-n5, -.my-sm-n5 { + .my-sm-n5 { margin-top: -3rem !important; } .mr-sm-n5, -.mx-sm-n5 { + .mx-sm-n5 { margin-right: -3rem !important; } .mb-sm-n5, -.my-sm-n5 { + .my-sm-n5 { margin-bottom: -3rem !important; } .ml-sm-n5, -.mx-sm-n5 { + .mx-sm-n5 { margin-left: -3rem !important; } @@ -8348,47 +9280,48 @@ button.bg-dark:focus { } .mt-sm-auto, -.my-sm-auto { + .my-sm-auto { margin-top: auto !important; } .mr-sm-auto, -.mx-sm-auto { + .mx-sm-auto { margin-right: auto !important; } .mb-sm-auto, -.my-sm-auto { + .my-sm-auto { margin-bottom: auto !important; } .ml-sm-auto, -.mx-sm-auto { + .mx-sm-auto { margin-left: auto !important; } } + @media (min-width: 768px) { .m-md-0 { margin: 0 !important; } .mt-md-0, -.my-md-0 { + .my-md-0 { margin-top: 0 !important; } .mr-md-0, -.mx-md-0 { + .mx-md-0 { margin-right: 0 !important; } .mb-md-0, -.my-md-0 { + .my-md-0 { margin-bottom: 0 !important; } .ml-md-0, -.mx-md-0 { + .mx-md-0 { margin-left: 0 !important; } @@ -8397,22 +9330,22 @@ button.bg-dark:focus { } .mt-md-1, -.my-md-1 { + .my-md-1 { margin-top: 0.25rem !important; } .mr-md-1, -.mx-md-1 { + .mx-md-1 { margin-right: 0.25rem !important; } .mb-md-1, -.my-md-1 { + .my-md-1 { margin-bottom: 0.25rem !important; } .ml-md-1, -.mx-md-1 { + .mx-md-1 { margin-left: 0.25rem !important; } @@ -8421,22 +9354,22 @@ button.bg-dark:focus { } .mt-md-2, -.my-md-2 { + .my-md-2 { margin-top: 0.5rem !important; } .mr-md-2, -.mx-md-2 { + .mx-md-2 { margin-right: 0.5rem !important; } .mb-md-2, -.my-md-2 { + .my-md-2 { margin-bottom: 0.5rem !important; } .ml-md-2, -.mx-md-2 { + .mx-md-2 { margin-left: 0.5rem !important; } @@ -8445,22 +9378,22 @@ button.bg-dark:focus { } .mt-md-3, -.my-md-3 { + .my-md-3 { margin-top: 1rem !important; } .mr-md-3, -.mx-md-3 { + .mx-md-3 { margin-right: 1rem !important; } .mb-md-3, -.my-md-3 { + .my-md-3 { margin-bottom: 1rem !important; } .ml-md-3, -.mx-md-3 { + .mx-md-3 { margin-left: 1rem !important; } @@ -8469,22 +9402,22 @@ button.bg-dark:focus { } .mt-md-4, -.my-md-4 { + .my-md-4 { margin-top: 1.5rem !important; } .mr-md-4, -.mx-md-4 { + .mx-md-4 { margin-right: 1.5rem !important; } .mb-md-4, -.my-md-4 { + .my-md-4 { margin-bottom: 1.5rem !important; } .ml-md-4, -.mx-md-4 { + .mx-md-4 { margin-left: 1.5rem !important; } @@ -8493,22 +9426,22 @@ button.bg-dark:focus { } .mt-md-5, -.my-md-5 { + .my-md-5 { margin-top: 3rem !important; } .mr-md-5, -.mx-md-5 { + .mx-md-5 { margin-right: 3rem !important; } .mb-md-5, -.my-md-5 { + .my-md-5 { margin-bottom: 3rem !important; } .ml-md-5, -.mx-md-5 { + .mx-md-5 { margin-left: 3rem !important; } @@ -8517,22 +9450,22 @@ button.bg-dark:focus { } .pt-md-0, -.py-md-0 { + .py-md-0 { padding-top: 0 !important; } .pr-md-0, -.px-md-0 { + .px-md-0 { padding-right: 0 !important; } .pb-md-0, -.py-md-0 { + .py-md-0 { padding-bottom: 0 !important; } .pl-md-0, -.px-md-0 { + .px-md-0 { padding-left: 0 !important; } @@ -8541,22 +9474,22 @@ button.bg-dark:focus { } .pt-md-1, -.py-md-1 { + .py-md-1 { padding-top: 0.25rem !important; } .pr-md-1, -.px-md-1 { + .px-md-1 { padding-right: 0.25rem !important; } .pb-md-1, -.py-md-1 { + .py-md-1 { padding-bottom: 0.25rem !important; } .pl-md-1, -.px-md-1 { + .px-md-1 { padding-left: 0.25rem !important; } @@ -8565,22 +9498,22 @@ button.bg-dark:focus { } .pt-md-2, -.py-md-2 { + .py-md-2 { padding-top: 0.5rem !important; } .pr-md-2, -.px-md-2 { + .px-md-2 { padding-right: 0.5rem !important; } .pb-md-2, -.py-md-2 { + .py-md-2 { padding-bottom: 0.5rem !important; } .pl-md-2, -.px-md-2 { + .px-md-2 { padding-left: 0.5rem !important; } @@ -8589,22 +9522,22 @@ button.bg-dark:focus { } .pt-md-3, -.py-md-3 { + .py-md-3 { padding-top: 1rem !important; } .pr-md-3, -.px-md-3 { + .px-md-3 { padding-right: 1rem !important; } .pb-md-3, -.py-md-3 { + .py-md-3 { padding-bottom: 1rem !important; } .pl-md-3, -.px-md-3 { + .px-md-3 { padding-left: 1rem !important; } @@ -8613,22 +9546,22 @@ button.bg-dark:focus { } .pt-md-4, -.py-md-4 { + .py-md-4 { padding-top: 1.5rem !important; } .pr-md-4, -.px-md-4 { + .px-md-4 { padding-right: 1.5rem !important; } .pb-md-4, -.py-md-4 { + .py-md-4 { padding-bottom: 1.5rem !important; } .pl-md-4, -.px-md-4 { + .px-md-4 { padding-left: 1.5rem !important; } @@ -8637,22 +9570,22 @@ button.bg-dark:focus { } .pt-md-5, -.py-md-5 { + .py-md-5 { padding-top: 3rem !important; } .pr-md-5, -.px-md-5 { + .px-md-5 { padding-right: 3rem !important; } .pb-md-5, -.py-md-5 { + .py-md-5 { padding-bottom: 3rem !important; } .pl-md-5, -.px-md-5 { + .px-md-5 { padding-left: 3rem !important; } @@ -8661,22 +9594,22 @@ button.bg-dark:focus { } .mt-md-n1, -.my-md-n1 { + .my-md-n1 { margin-top: -0.25rem !important; } .mr-md-n1, -.mx-md-n1 { + .mx-md-n1 { margin-right: -0.25rem !important; } .mb-md-n1, -.my-md-n1 { + .my-md-n1 { margin-bottom: -0.25rem !important; } .ml-md-n1, -.mx-md-n1 { + .mx-md-n1 { margin-left: -0.25rem !important; } @@ -8685,22 +9618,22 @@ button.bg-dark:focus { } .mt-md-n2, -.my-md-n2 { + .my-md-n2 { margin-top: -0.5rem !important; } .mr-md-n2, -.mx-md-n2 { + .mx-md-n2 { margin-right: -0.5rem !important; } .mb-md-n2, -.my-md-n2 { + .my-md-n2 { margin-bottom: -0.5rem !important; } .ml-md-n2, -.mx-md-n2 { + .mx-md-n2 { margin-left: -0.5rem !important; } @@ -8709,22 +9642,22 @@ button.bg-dark:focus { } .mt-md-n3, -.my-md-n3 { + .my-md-n3 { margin-top: -1rem !important; } .mr-md-n3, -.mx-md-n3 { + .mx-md-n3 { margin-right: -1rem !important; } .mb-md-n3, -.my-md-n3 { + .my-md-n3 { margin-bottom: -1rem !important; } .ml-md-n3, -.mx-md-n3 { + .mx-md-n3 { margin-left: -1rem !important; } @@ -8733,22 +9666,22 @@ button.bg-dark:focus { } .mt-md-n4, -.my-md-n4 { + .my-md-n4 { margin-top: -1.5rem !important; } .mr-md-n4, -.mx-md-n4 { + .mx-md-n4 { margin-right: -1.5rem !important; } .mb-md-n4, -.my-md-n4 { + .my-md-n4 { margin-bottom: -1.5rem !important; } .ml-md-n4, -.mx-md-n4 { + .mx-md-n4 { margin-left: -1.5rem !important; } @@ -8757,22 +9690,22 @@ button.bg-dark:focus { } .mt-md-n5, -.my-md-n5 { + .my-md-n5 { margin-top: -3rem !important; } .mr-md-n5, -.mx-md-n5 { + .mx-md-n5 { margin-right: -3rem !important; } .mb-md-n5, -.my-md-n5 { + .my-md-n5 { margin-bottom: -3rem !important; } .ml-md-n5, -.mx-md-n5 { + .mx-md-n5 { margin-left: -3rem !important; } @@ -8781,47 +9714,48 @@ button.bg-dark:focus { } .mt-md-auto, -.my-md-auto { + .my-md-auto { margin-top: auto !important; } .mr-md-auto, -.mx-md-auto { + .mx-md-auto { margin-right: auto !important; } .mb-md-auto, -.my-md-auto { + .my-md-auto { margin-bottom: auto !important; } .ml-md-auto, -.mx-md-auto { + .mx-md-auto { margin-left: auto !important; } } + @media (min-width: 992px) { .m-lg-0 { margin: 0 !important; } .mt-lg-0, -.my-lg-0 { + .my-lg-0 { margin-top: 0 !important; } .mr-lg-0, -.mx-lg-0 { + .mx-lg-0 { margin-right: 0 !important; } .mb-lg-0, -.my-lg-0 { + .my-lg-0 { margin-bottom: 0 !important; } .ml-lg-0, -.mx-lg-0 { + .mx-lg-0 { margin-left: 0 !important; } @@ -8830,22 +9764,22 @@ button.bg-dark:focus { } .mt-lg-1, -.my-lg-1 { + .my-lg-1 { margin-top: 0.25rem !important; } .mr-lg-1, -.mx-lg-1 { + .mx-lg-1 { margin-right: 0.25rem !important; } .mb-lg-1, -.my-lg-1 { + .my-lg-1 { margin-bottom: 0.25rem !important; } .ml-lg-1, -.mx-lg-1 { + .mx-lg-1 { margin-left: 0.25rem !important; } @@ -8854,22 +9788,22 @@ button.bg-dark:focus { } .mt-lg-2, -.my-lg-2 { + .my-lg-2 { margin-top: 0.5rem !important; } .mr-lg-2, -.mx-lg-2 { + .mx-lg-2 { margin-right: 0.5rem !important; } .mb-lg-2, -.my-lg-2 { + .my-lg-2 { margin-bottom: 0.5rem !important; } .ml-lg-2, -.mx-lg-2 { + .mx-lg-2 { margin-left: 0.5rem !important; } @@ -8878,22 +9812,22 @@ button.bg-dark:focus { } .mt-lg-3, -.my-lg-3 { + .my-lg-3 { margin-top: 1rem !important; } .mr-lg-3, -.mx-lg-3 { + .mx-lg-3 { margin-right: 1rem !important; } .mb-lg-3, -.my-lg-3 { + .my-lg-3 { margin-bottom: 1rem !important; } .ml-lg-3, -.mx-lg-3 { + .mx-lg-3 { margin-left: 1rem !important; } @@ -8902,22 +9836,22 @@ button.bg-dark:focus { } .mt-lg-4, -.my-lg-4 { + .my-lg-4 { margin-top: 1.5rem !important; } .mr-lg-4, -.mx-lg-4 { + .mx-lg-4 { margin-right: 1.5rem !important; } .mb-lg-4, -.my-lg-4 { + .my-lg-4 { margin-bottom: 1.5rem !important; } .ml-lg-4, -.mx-lg-4 { + .mx-lg-4 { margin-left: 1.5rem !important; } @@ -8926,22 +9860,22 @@ button.bg-dark:focus { } .mt-lg-5, -.my-lg-5 { + .my-lg-5 { margin-top: 3rem !important; } .mr-lg-5, -.mx-lg-5 { + .mx-lg-5 { margin-right: 3rem !important; } .mb-lg-5, -.my-lg-5 { + .my-lg-5 { margin-bottom: 3rem !important; } .ml-lg-5, -.mx-lg-5 { + .mx-lg-5 { margin-left: 3rem !important; } @@ -8950,22 +9884,22 @@ button.bg-dark:focus { } .pt-lg-0, -.py-lg-0 { + .py-lg-0 { padding-top: 0 !important; } .pr-lg-0, -.px-lg-0 { + .px-lg-0 { padding-right: 0 !important; } .pb-lg-0, -.py-lg-0 { + .py-lg-0 { padding-bottom: 0 !important; } .pl-lg-0, -.px-lg-0 { + .px-lg-0 { padding-left: 0 !important; } @@ -8974,22 +9908,22 @@ button.bg-dark:focus { } .pt-lg-1, -.py-lg-1 { + .py-lg-1 { padding-top: 0.25rem !important; } .pr-lg-1, -.px-lg-1 { + .px-lg-1 { padding-right: 0.25rem !important; } .pb-lg-1, -.py-lg-1 { + .py-lg-1 { padding-bottom: 0.25rem !important; } .pl-lg-1, -.px-lg-1 { + .px-lg-1 { padding-left: 0.25rem !important; } @@ -8998,22 +9932,22 @@ button.bg-dark:focus { } .pt-lg-2, -.py-lg-2 { + .py-lg-2 { padding-top: 0.5rem !important; } .pr-lg-2, -.px-lg-2 { + .px-lg-2 { padding-right: 0.5rem !important; } .pb-lg-2, -.py-lg-2 { + .py-lg-2 { padding-bottom: 0.5rem !important; } .pl-lg-2, -.px-lg-2 { + .px-lg-2 { padding-left: 0.5rem !important; } @@ -9022,22 +9956,22 @@ button.bg-dark:focus { } .pt-lg-3, -.py-lg-3 { + .py-lg-3 { padding-top: 1rem !important; } .pr-lg-3, -.px-lg-3 { + .px-lg-3 { padding-right: 1rem !important; } .pb-lg-3, -.py-lg-3 { + .py-lg-3 { padding-bottom: 1rem !important; } .pl-lg-3, -.px-lg-3 { + .px-lg-3 { padding-left: 1rem !important; } @@ -9046,22 +9980,22 @@ button.bg-dark:focus { } .pt-lg-4, -.py-lg-4 { + .py-lg-4 { padding-top: 1.5rem !important; } .pr-lg-4, -.px-lg-4 { + .px-lg-4 { padding-right: 1.5rem !important; } .pb-lg-4, -.py-lg-4 { + .py-lg-4 { padding-bottom: 1.5rem !important; } .pl-lg-4, -.px-lg-4 { + .px-lg-4 { padding-left: 1.5rem !important; } @@ -9070,22 +10004,22 @@ button.bg-dark:focus { } .pt-lg-5, -.py-lg-5 { + .py-lg-5 { padding-top: 3rem !important; } .pr-lg-5, -.px-lg-5 { + .px-lg-5 { padding-right: 3rem !important; } .pb-lg-5, -.py-lg-5 { + .py-lg-5 { padding-bottom: 3rem !important; } .pl-lg-5, -.px-lg-5 { + .px-lg-5 { padding-left: 3rem !important; } @@ -9094,22 +10028,22 @@ button.bg-dark:focus { } .mt-lg-n1, -.my-lg-n1 { + .my-lg-n1 { margin-top: -0.25rem !important; } .mr-lg-n1, -.mx-lg-n1 { + .mx-lg-n1 { margin-right: -0.25rem !important; } .mb-lg-n1, -.my-lg-n1 { + .my-lg-n1 { margin-bottom: -0.25rem !important; } .ml-lg-n1, -.mx-lg-n1 { + .mx-lg-n1 { margin-left: -0.25rem !important; } @@ -9118,22 +10052,22 @@ button.bg-dark:focus { } .mt-lg-n2, -.my-lg-n2 { + .my-lg-n2 { margin-top: -0.5rem !important; } .mr-lg-n2, -.mx-lg-n2 { + .mx-lg-n2 { margin-right: -0.5rem !important; } .mb-lg-n2, -.my-lg-n2 { + .my-lg-n2 { margin-bottom: -0.5rem !important; } .ml-lg-n2, -.mx-lg-n2 { + .mx-lg-n2 { margin-left: -0.5rem !important; } @@ -9142,22 +10076,22 @@ button.bg-dark:focus { } .mt-lg-n3, -.my-lg-n3 { + .my-lg-n3 { margin-top: -1rem !important; } .mr-lg-n3, -.mx-lg-n3 { + .mx-lg-n3 { margin-right: -1rem !important; } .mb-lg-n3, -.my-lg-n3 { + .my-lg-n3 { margin-bottom: -1rem !important; } .ml-lg-n3, -.mx-lg-n3 { + .mx-lg-n3 { margin-left: -1rem !important; } @@ -9166,22 +10100,22 @@ button.bg-dark:focus { } .mt-lg-n4, -.my-lg-n4 { + .my-lg-n4 { margin-top: -1.5rem !important; } .mr-lg-n4, -.mx-lg-n4 { + .mx-lg-n4 { margin-right: -1.5rem !important; } .mb-lg-n4, -.my-lg-n4 { + .my-lg-n4 { margin-bottom: -1.5rem !important; } .ml-lg-n4, -.mx-lg-n4 { + .mx-lg-n4 { margin-left: -1.5rem !important; } @@ -9190,22 +10124,22 @@ button.bg-dark:focus { } .mt-lg-n5, -.my-lg-n5 { + .my-lg-n5 { margin-top: -3rem !important; } .mr-lg-n5, -.mx-lg-n5 { + .mx-lg-n5 { margin-right: -3rem !important; } .mb-lg-n5, -.my-lg-n5 { + .my-lg-n5 { margin-bottom: -3rem !important; } .ml-lg-n5, -.mx-lg-n5 { + .mx-lg-n5 { margin-left: -3rem !important; } @@ -9214,47 +10148,48 @@ button.bg-dark:focus { } .mt-lg-auto, -.my-lg-auto { + .my-lg-auto { margin-top: auto !important; } .mr-lg-auto, -.mx-lg-auto { + .mx-lg-auto { margin-right: auto !important; } .mb-lg-auto, -.my-lg-auto { + .my-lg-auto { margin-bottom: auto !important; } .ml-lg-auto, -.mx-lg-auto { + .mx-lg-auto { margin-left: auto !important; } } + @media (min-width: 1200px) { .m-xl-0 { margin: 0 !important; } .mt-xl-0, -.my-xl-0 { + .my-xl-0 { margin-top: 0 !important; } .mr-xl-0, -.mx-xl-0 { + .mx-xl-0 { margin-right: 0 !important; } .mb-xl-0, -.my-xl-0 { + .my-xl-0 { margin-bottom: 0 !important; } .ml-xl-0, -.mx-xl-0 { + .mx-xl-0 { margin-left: 0 !important; } @@ -9263,22 +10198,22 @@ button.bg-dark:focus { } .mt-xl-1, -.my-xl-1 { + .my-xl-1 { margin-top: 0.25rem !important; } .mr-xl-1, -.mx-xl-1 { + .mx-xl-1 { margin-right: 0.25rem !important; } .mb-xl-1, -.my-xl-1 { + .my-xl-1 { margin-bottom: 0.25rem !important; } .ml-xl-1, -.mx-xl-1 { + .mx-xl-1 { margin-left: 0.25rem !important; } @@ -9287,22 +10222,22 @@ button.bg-dark:focus { } .mt-xl-2, -.my-xl-2 { + .my-xl-2 { margin-top: 0.5rem !important; } .mr-xl-2, -.mx-xl-2 { + .mx-xl-2 { margin-right: 0.5rem !important; } .mb-xl-2, -.my-xl-2 { + .my-xl-2 { margin-bottom: 0.5rem !important; } .ml-xl-2, -.mx-xl-2 { + .mx-xl-2 { margin-left: 0.5rem !important; } @@ -9311,22 +10246,22 @@ button.bg-dark:focus { } .mt-xl-3, -.my-xl-3 { + .my-xl-3 { margin-top: 1rem !important; } .mr-xl-3, -.mx-xl-3 { + .mx-xl-3 { margin-right: 1rem !important; } .mb-xl-3, -.my-xl-3 { + .my-xl-3 { margin-bottom: 1rem !important; } .ml-xl-3, -.mx-xl-3 { + .mx-xl-3 { margin-left: 1rem !important; } @@ -9335,22 +10270,22 @@ button.bg-dark:focus { } .mt-xl-4, -.my-xl-4 { + .my-xl-4 { margin-top: 1.5rem !important; } .mr-xl-4, -.mx-xl-4 { + .mx-xl-4 { margin-right: 1.5rem !important; } .mb-xl-4, -.my-xl-4 { + .my-xl-4 { margin-bottom: 1.5rem !important; } .ml-xl-4, -.mx-xl-4 { + .mx-xl-4 { margin-left: 1.5rem !important; } @@ -9359,22 +10294,22 @@ button.bg-dark:focus { } .mt-xl-5, -.my-xl-5 { + .my-xl-5 { margin-top: 3rem !important; } .mr-xl-5, -.mx-xl-5 { + .mx-xl-5 { margin-right: 3rem !important; } .mb-xl-5, -.my-xl-5 { + .my-xl-5 { margin-bottom: 3rem !important; } .ml-xl-5, -.mx-xl-5 { + .mx-xl-5 { margin-left: 3rem !important; } @@ -9383,22 +10318,22 @@ button.bg-dark:focus { } .pt-xl-0, -.py-xl-0 { + .py-xl-0 { padding-top: 0 !important; } .pr-xl-0, -.px-xl-0 { + .px-xl-0 { padding-right: 0 !important; } .pb-xl-0, -.py-xl-0 { + .py-xl-0 { padding-bottom: 0 !important; } .pl-xl-0, -.px-xl-0 { + .px-xl-0 { padding-left: 0 !important; } @@ -9407,22 +10342,22 @@ button.bg-dark:focus { } .pt-xl-1, -.py-xl-1 { + .py-xl-1 { padding-top: 0.25rem !important; } .pr-xl-1, -.px-xl-1 { + .px-xl-1 { padding-right: 0.25rem !important; } .pb-xl-1, -.py-xl-1 { + .py-xl-1 { padding-bottom: 0.25rem !important; } .pl-xl-1, -.px-xl-1 { + .px-xl-1 { padding-left: 0.25rem !important; } @@ -9431,22 +10366,22 @@ button.bg-dark:focus { } .pt-xl-2, -.py-xl-2 { + .py-xl-2 { padding-top: 0.5rem !important; } .pr-xl-2, -.px-xl-2 { + .px-xl-2 { padding-right: 0.5rem !important; } .pb-xl-2, -.py-xl-2 { + .py-xl-2 { padding-bottom: 0.5rem !important; } .pl-xl-2, -.px-xl-2 { + .px-xl-2 { padding-left: 0.5rem !important; } @@ -9455,22 +10390,22 @@ button.bg-dark:focus { } .pt-xl-3, -.py-xl-3 { + .py-xl-3 { padding-top: 1rem !important; } .pr-xl-3, -.px-xl-3 { + .px-xl-3 { padding-right: 1rem !important; } .pb-xl-3, -.py-xl-3 { + .py-xl-3 { padding-bottom: 1rem !important; } .pl-xl-3, -.px-xl-3 { + .px-xl-3 { padding-left: 1rem !important; } @@ -9479,22 +10414,22 @@ button.bg-dark:focus { } .pt-xl-4, -.py-xl-4 { + .py-xl-4 { padding-top: 1.5rem !important; } .pr-xl-4, -.px-xl-4 { + .px-xl-4 { padding-right: 1.5rem !important; } .pb-xl-4, -.py-xl-4 { + .py-xl-4 { padding-bottom: 1.5rem !important; } .pl-xl-4, -.px-xl-4 { + .px-xl-4 { padding-left: 1.5rem !important; } @@ -9503,22 +10438,22 @@ button.bg-dark:focus { } .pt-xl-5, -.py-xl-5 { + .py-xl-5 { padding-top: 3rem !important; } .pr-xl-5, -.px-xl-5 { + .px-xl-5 { padding-right: 3rem !important; } .pb-xl-5, -.py-xl-5 { + .py-xl-5 { padding-bottom: 3rem !important; } .pl-xl-5, -.px-xl-5 { + .px-xl-5 { padding-left: 3rem !important; } @@ -9527,22 +10462,22 @@ button.bg-dark:focus { } .mt-xl-n1, -.my-xl-n1 { + .my-xl-n1 { margin-top: -0.25rem !important; } .mr-xl-n1, -.mx-xl-n1 { + .mx-xl-n1 { margin-right: -0.25rem !important; } .mb-xl-n1, -.my-xl-n1 { + .my-xl-n1 { margin-bottom: -0.25rem !important; } .ml-xl-n1, -.mx-xl-n1 { + .mx-xl-n1 { margin-left: -0.25rem !important; } @@ -9551,22 +10486,22 @@ button.bg-dark:focus { } .mt-xl-n2, -.my-xl-n2 { + .my-xl-n2 { margin-top: -0.5rem !important; } .mr-xl-n2, -.mx-xl-n2 { + .mx-xl-n2 { margin-right: -0.5rem !important; } .mb-xl-n2, -.my-xl-n2 { + .my-xl-n2 { margin-bottom: -0.5rem !important; } .ml-xl-n2, -.mx-xl-n2 { + .mx-xl-n2 { margin-left: -0.5rem !important; } @@ -9575,22 +10510,22 @@ button.bg-dark:focus { } .mt-xl-n3, -.my-xl-n3 { + .my-xl-n3 { margin-top: -1rem !important; } .mr-xl-n3, -.mx-xl-n3 { + .mx-xl-n3 { margin-right: -1rem !important; } .mb-xl-n3, -.my-xl-n3 { + .my-xl-n3 { margin-bottom: -1rem !important; } .ml-xl-n3, -.mx-xl-n3 { + .mx-xl-n3 { margin-left: -1rem !important; } @@ -9599,22 +10534,22 @@ button.bg-dark:focus { } .mt-xl-n4, -.my-xl-n4 { + .my-xl-n4 { margin-top: -1.5rem !important; } .mr-xl-n4, -.mx-xl-n4 { + .mx-xl-n4 { margin-right: -1.5rem !important; } .mb-xl-n4, -.my-xl-n4 { + .my-xl-n4 { margin-bottom: -1.5rem !important; } .ml-xl-n4, -.mx-xl-n4 { + .mx-xl-n4 { margin-left: -1.5rem !important; } @@ -9623,22 +10558,22 @@ button.bg-dark:focus { } .mt-xl-n5, -.my-xl-n5 { + .my-xl-n5 { margin-top: -3rem !important; } .mr-xl-n5, -.mx-xl-n5 { + .mx-xl-n5 { margin-right: -3rem !important; } .mb-xl-n5, -.my-xl-n5 { + .my-xl-n5 { margin-bottom: -3rem !important; } .ml-xl-n5, -.mx-xl-n5 { + .mx-xl-n5 { margin-left: -3rem !important; } @@ -9647,25 +10582,26 @@ button.bg-dark:focus { } .mt-xl-auto, -.my-xl-auto { + .my-xl-auto { margin-top: auto !important; } .mr-xl-auto, -.mx-xl-auto { + .mx-xl-auto { margin-right: auto !important; } .mb-xl-auto, -.my-xl-auto { + .my-xl-auto { margin-bottom: auto !important; } .ml-xl-auto, -.mx-xl-auto { + .mx-xl-auto { margin-left: auto !important; } } + .stretched-link::after { position: absolute; top: 0; @@ -9725,6 +10661,7 @@ button.bg-dark:focus { text-align: center !important; } } + @media (min-width: 768px) { .text-md-left { text-align: left !important; @@ -9738,6 +10675,7 @@ button.bg-dark:focus { text-align: center !important; } } + @media (min-width: 992px) { .text-lg-left { text-align: left !important; @@ -9751,6 +10689,7 @@ button.bg-dark:focus { text-align: center !important; } } + @media (min-width: 1200px) { .text-xl-left { text-align: left !important; @@ -9764,6 +10703,7 @@ button.bg-dark:focus { text-align: center !important; } } + .text-lowercase { text-transform: lowercase !important; } @@ -9808,7 +10748,8 @@ button.bg-dark:focus { color: #f4623a !important; } -a.text-primary:hover, a.text-primary:focus { +a.text-primary:hover, +a.text-primary:focus { color: #d6370c !important; } @@ -9816,7 +10757,8 @@ a.text-primary:hover, a.text-primary:focus { color: #6c757d !important; } -a.text-secondary:hover, a.text-secondary:focus { +a.text-secondary:hover, +a.text-secondary:focus { color: #494f54 !important; } @@ -9824,7 +10766,8 @@ a.text-secondary:hover, a.text-secondary:focus { color: #28a745 !important; } -a.text-success:hover, a.text-success:focus { +a.text-success:hover, +a.text-success:focus { color: #19692c !important; } @@ -9832,7 +10775,8 @@ a.text-success:hover, a.text-success:focus { color: #17a2b8 !important; } -a.text-info:hover, a.text-info:focus { +a.text-info:hover, +a.text-info:focus { color: #0f6674 !important; } @@ -9840,7 +10784,8 @@ a.text-info:hover, a.text-info:focus { color: #ffc107 !important; } -a.text-warning:hover, a.text-warning:focus { +a.text-warning:hover, +a.text-warning:focus { color: #ba8b00 !important; } @@ -9848,7 +10793,8 @@ a.text-warning:hover, a.text-warning:focus { color: #dc3545 !important; } -a.text-danger:hover, a.text-danger:focus { +a.text-danger:hover, +a.text-danger:focus { color: #a71d2a !important; } @@ -9856,7 +10802,8 @@ a.text-danger:hover, a.text-danger:focus { color: #f8f9fa !important; } -a.text-light:hover, a.text-light:focus { +a.text-light:hover, +a.text-light:focus { color: #cbd3da !important; } @@ -9864,7 +10811,8 @@ a.text-light:hover, a.text-light:focus { color: #343a40 !important; } -a.text-dark:hover, a.text-dark:focus { +a.text-dark:hover, +a.text-dark:focus { color: #121416 !important; } @@ -9914,9 +10862,10 @@ a.text-dark:hover, a.text-dark:focus { } @media print { + *, -*::before, -*::after { + *::before, + *::after { text-shadow: none !important; box-shadow: none !important; } @@ -9926,7 +10875,7 @@ a.text-dark:hover, a.text-dark:focus { } abbr[title]::after { - content: " (" attr(title) ")"; + content: " ("attr(title) ")"; } pre { @@ -9934,7 +10883,7 @@ a.text-dark:hover, a.text-dark:focus { } pre, -blockquote { + blockquote { border: 1px solid #adb5bd; page-break-inside: avoid; } @@ -9944,25 +10893,26 @@ blockquote { } tr, -img { + img { page-break-inside: avoid; } p, -h2, -h3 { + h2, + h3 { orphans: 3; widows: 3; } h2, -h3 { + h3 { page-break-after: avoid; } @page { size: a3; } + body { min-width: 992px !important; } @@ -9982,23 +10932,25 @@ h3 { .table { border-collapse: collapse !important; } + .table td, -.table th { + .table th { background-color: #fff !important; } .table-bordered th, -.table-bordered td { + .table-bordered td { border: 1px solid #dee2e6 !important; } .table-dark { color: inherit; } + .table-dark th, -.table-dark td, -.table-dark thead th, -.table-dark tbody + tbody { + .table-dark td, + .table-dark thead th, + .table-dark tbody+tbody { border-color: #dee2e6; } @@ -10007,6 +10959,7 @@ h3 { border-color: #dee2e6; } } + body, html { width: 100%; @@ -10045,11 +10998,13 @@ hr.light { background-color: #fff; transition: background-color 0.2s ease; } + #mainNav .navbar-brand { font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 700; color: #212529; } + #mainNav .navbar-nav .nav-item .nav-link { color: #6c757d; font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -10057,46 +11012,60 @@ hr.light { font-size: 0.9rem; padding: 0.75rem 0; } -#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active { + +#mainNav .navbar-nav .nav-item .nav-link:hover, +#mainNav .navbar-nav .nav-item .nav-link:active { color: #f4623a; } + #mainNav .navbar-nav .nav-item .nav-link.active { color: #f4623a !important; } + @media (min-width: 992px) { #mainNav { box-shadow: none; background-color: transparent; } + #mainNav .navbar-brand { color: rgba(255, 255, 255, 0.7); } + #mainNav .navbar-brand:hover { color: #fff; } + #mainNav .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, 0.7); padding: 0 1rem; } + #mainNav .navbar-nav .nav-item .nav-link:hover { color: #fff; } + #mainNav .navbar-nav .nav-item:last-child .nav-link { padding-right: 0; } + #mainNav.navbar-scrolled { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background-color: #fff; } + #mainNav.navbar-scrolled .navbar-brand { color: #212529; } + #mainNav.navbar-scrolled .navbar-brand:hover { color: #f4623a; } + #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link { color: #212529; } + #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover { color: #f4623a; } @@ -10111,9 +11080,11 @@ header.masthead { background-attachment: scroll; background-size: cover; } + header.masthead h1 { font-size: 2.25rem; } + @media (min-width: 992px) { header.masthead { height: 100vh; @@ -10121,27 +11092,44 @@ header.masthead h1 { padding-top: 4.5rem; padding-bottom: 0; } + header.masthead p { font-size: 1.15rem; } + header.masthead h1 { font-size: 3rem; } } + @media (min-width: 1200px) { header.masthead h1 { font-size: 3.5rem; } } -#portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl { +#portfolio .container-fluid, +#portfolio .container-sm, +#portfolio .container-md, +#portfolio .container-lg, +#portfolio .container-xl { max-width: 1920px; } -#portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, #portfolio .container-xl .portfolio-box { + +#portfolio .container-fluid .portfolio-box, +#portfolio .container-sm .portfolio-box, +#portfolio .container-md .portfolio-box, +#portfolio .container-lg .portfolio-box, +#portfolio .container-xl .portfolio-box { position: relative; display: block; } -#portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, #portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, #portfolio .container-xl .portfolio-box .portfolio-box-caption { + +#portfolio .container-fluid .portfolio-box .portfolio-box-caption, +#portfolio .container-sm .portfolio-box .portfolio-box-caption, +#portfolio .container-md .portfolio-box .portfolio-box-caption, +#portfolio .container-lg .portfolio-box .portfolio-box-caption, +#portfolio .container-xl .portfolio-box .portfolio-box-caption { display: flex; align-items: center; justify-content: center; @@ -10157,16 +11145,31 @@ header.masthead h1 { transition: opacity 0.25s ease; text-align: center; } -#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category { + +#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, +#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, +#portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, +#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, +#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category { font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; } -#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name { + +#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, +#portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, +#portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, +#portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, +#portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name { font-size: 1.2rem; } -#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, #portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, #portfolio .container-md .portfolio-box:hover .portfolio-box-caption, #portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xl .portfolio-box:hover .portfolio-box-caption { + +#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, +#portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, +#portfolio .container-md .portfolio-box:hover .portfolio-box-caption, +#portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, +#portfolio .container-xl .portfolio-box:hover .portfolio-box-caption { opacity: 1; } diff --git a/Resources/landing-page/js/scripts.js b/Resources/landing-page/js/scripts.js index 345cd699..8ee9ff77 100644 --- a/Resources/landing-page/js/scripts.js +++ b/Resources/landing-page/js/scripts.js @@ -70,3 +70,23 @@ }); })(jQuery); // End of use strict + +// load random css stylesheet +const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr", +"plex","space-gray","hotpink","onedark"]; +var random = themes[~~(Math.random() * themes.length)]; +function injectTheme(theme,container="head") { + if (container === "head") { + html_element = document.head; + } else html_element = document.body; + let link = document.createElement("link"); + url = "/CSS/variables/" + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = `${url}/${theme}.css`; + + html_element.appendChild(link); + } + + injectTheme(random); + diff --git a/Resources/organizr/aquamarine/aquamarine_login.jpg b/Resources/organizr/aquamarine/aquamarine_login.jpg new file mode 100644 index 00000000..519b3d0c Binary files /dev/null and b/Resources/organizr/aquamarine/aquamarine_login.jpg differ diff --git a/Resources/organizr/aquamarine/aquamarine_splash.jpg b/Resources/organizr/aquamarine/aquamarine_splash.jpg new file mode 100644 index 00000000..9ccc6f9f Binary files /dev/null and b/Resources/organizr/aquamarine/aquamarine_splash.jpg differ diff --git a/Resources/organizr/dark/dark_login.jpg b/Resources/organizr/dark/dark_login.jpg new file mode 100644 index 00000000..28e263b9 Binary files /dev/null and b/Resources/organizr/dark/dark_login.jpg differ diff --git a/Resources/organizr/dark/dark_splash.jpg b/Resources/organizr/dark/dark_splash.jpg new file mode 100644 index 00000000..9d58f025 Binary files /dev/null and b/Resources/organizr/dark/dark_splash.jpg differ diff --git a/Resources/organizr/dracula/dracula_homepage.jpg b/Resources/organizr/dracula/dracula_homepage.jpg new file mode 100644 index 00000000..15726f51 Binary files /dev/null and b/Resources/organizr/dracula/dracula_homepage.jpg differ diff --git a/Resources/organizr/dracula/dracula_login.jpg b/Resources/organizr/dracula/dracula_login.jpg new file mode 100644 index 00000000..9a31a167 Binary files /dev/null and b/Resources/organizr/dracula/dracula_login.jpg differ diff --git a/Resources/organizr/dracula/dracula_search.jpg b/Resources/organizr/dracula/dracula_search.jpg new file mode 100644 index 00000000..6f82189b Binary files /dev/null and b/Resources/organizr/dracula/dracula_search.jpg differ diff --git a/Resources/organizr/dracula/dracula_splash.jpg b/Resources/organizr/dracula/dracula_splash.jpg new file mode 100644 index 00000000..f4404582 Binary files /dev/null and b/Resources/organizr/dracula/dracula_splash.jpg differ diff --git a/Resources/organizr/dracula/theme-park-organizr-dracula-logo.png b/Resources/organizr/dracula/theme-park-organizr-dracula-logo.png new file mode 100644 index 00000000..e8fa7f93 Binary files /dev/null and b/Resources/organizr/dracula/theme-park-organizr-dracula-logo.png differ diff --git a/Resources/organizr/hotline/hotline_homepage.jpg b/Resources/organizr/hotline/hotline_homepage.jpg index dfafad4c..ef8a0718 100644 Binary files a/Resources/organizr/hotline/hotline_homepage.jpg and b/Resources/organizr/hotline/hotline_homepage.jpg differ diff --git a/Resources/organizr/hotline/hotline_login.jpg b/Resources/organizr/hotline/hotline_login.jpg new file mode 100644 index 00000000..2a8dc6a1 Binary files /dev/null and b/Resources/organizr/hotline/hotline_login.jpg differ diff --git a/Resources/organizr/hotline/hotline_search.jpg b/Resources/organizr/hotline/hotline_search.jpg index 9da7f115..57f9e4e9 100644 Binary files a/Resources/organizr/hotline/hotline_search.jpg and b/Resources/organizr/hotline/hotline_search.jpg differ diff --git a/Resources/organizr/hotline/hotline_splash.jpg b/Resources/organizr/hotline/hotline_splash.jpg new file mode 100644 index 00000000..43cb17ea Binary files /dev/null and b/Resources/organizr/hotline/hotline_splash.jpg differ diff --git a/Resources/organizr/hotline/theme-park-organizr-hotline-logo.png b/Resources/organizr/hotline/theme-park-organizr-hotline-logo.png index 8dfb194e..51ca81cb 100644 Binary files a/Resources/organizr/hotline/theme-park-organizr-hotline-logo.png and b/Resources/organizr/hotline/theme-park-organizr-hotline-logo.png differ diff --git a/Resources/organizr/hotpink/hotpink_homepage.jpg b/Resources/organizr/hotpink/hotpink_homepage.jpg new file mode 100644 index 00000000..40d07483 Binary files /dev/null and b/Resources/organizr/hotpink/hotpink_homepage.jpg differ diff --git a/Resources/organizr/hotpink/hotpink_login.jpg b/Resources/organizr/hotpink/hotpink_login.jpg new file mode 100644 index 00000000..6a36bd35 Binary files /dev/null and b/Resources/organizr/hotpink/hotpink_login.jpg differ diff --git a/Resources/organizr/hotpink/hotpink_search.jpg b/Resources/organizr/hotpink/hotpink_search.jpg new file mode 100644 index 00000000..a00fe46d Binary files /dev/null and b/Resources/organizr/hotpink/hotpink_search.jpg differ diff --git a/Resources/organizr/hotpink/hotpink_splash.jpg b/Resources/organizr/hotpink/hotpink_splash.jpg new file mode 100644 index 00000000..da2f51cb Binary files /dev/null and b/Resources/organizr/hotpink/hotpink_splash.jpg differ diff --git a/Resources/organizr/hotpink/theme-park-organizr-hotpink-logo.png b/Resources/organizr/hotpink/theme-park-organizr-hotpink-logo.png new file mode 100644 index 00000000..a1c7e090 Binary files /dev/null and b/Resources/organizr/hotpink/theme-park-organizr-hotpink-logo.png differ diff --git a/Resources/organizr/onedark/onedark_homepage.jpg b/Resources/organizr/onedark/onedark_homepage.jpg new file mode 100644 index 00000000..49efb8ae Binary files /dev/null and b/Resources/organizr/onedark/onedark_homepage.jpg differ diff --git a/Resources/organizr/onedark/onedark_login.jpg b/Resources/organizr/onedark/onedark_login.jpg new file mode 100644 index 00000000..78d94d11 Binary files /dev/null and b/Resources/organizr/onedark/onedark_login.jpg differ diff --git a/Resources/organizr/onedark/onedark_search.jpg b/Resources/organizr/onedark/onedark_search.jpg new file mode 100644 index 00000000..afc41d5e Binary files /dev/null and b/Resources/organizr/onedark/onedark_search.jpg differ diff --git a/Resources/organizr/onedark/onedark_splash.jpg b/Resources/organizr/onedark/onedark_splash.jpg new file mode 100644 index 00000000..379b2dbf Binary files /dev/null and b/Resources/organizr/onedark/onedark_splash.jpg differ diff --git a/Resources/organizr/onedark/theme-park-organizr-onedark-logo.png b/Resources/organizr/onedark/theme-park-organizr-onedark-logo.png new file mode 100644 index 00000000..c2409dbd Binary files /dev/null and b/Resources/organizr/onedark/theme-park-organizr-onedark-logo.png differ diff --git a/Resources/organizr/overseerr/overseerr_homepage.jpg b/Resources/organizr/overseerr/overseerr_homepage.jpg new file mode 100644 index 00000000..d6995b2a Binary files /dev/null and b/Resources/organizr/overseerr/overseerr_homepage.jpg differ diff --git a/Resources/organizr/overseerr/overseerr_login.jpg b/Resources/organizr/overseerr/overseerr_login.jpg new file mode 100644 index 00000000..a22f2774 Binary files /dev/null and b/Resources/organizr/overseerr/overseerr_login.jpg differ diff --git a/Resources/organizr/overseerr/overseerr_search.jpg b/Resources/organizr/overseerr/overseerr_search.jpg new file mode 100644 index 00000000..b4a4518d Binary files /dev/null and b/Resources/organizr/overseerr/overseerr_search.jpg differ diff --git a/Resources/organizr/overseerr/overseerr_splash.jpg b/Resources/organizr/overseerr/overseerr_splash.jpg new file mode 100644 index 00000000..e45adc1d Binary files /dev/null and b/Resources/organizr/overseerr/overseerr_splash.jpg differ diff --git a/Resources/organizr/overseerr/theme-park-organizr-overseerr-logo.png b/Resources/organizr/overseerr/theme-park-organizr-overseerr-logo.png new file mode 100644 index 00000000..697614ba Binary files /dev/null and b/Resources/organizr/overseerr/theme-park-organizr-overseerr-logo.png differ diff --git a/Resources/organizr/plex/plex_homepage.jpg b/Resources/organizr/plex/plex_homepage.jpg index fc56d507..9fe841af 100644 Binary files a/Resources/organizr/plex/plex_homepage.jpg and b/Resources/organizr/plex/plex_homepage.jpg differ diff --git a/Resources/organizr/plex/plex_login.jpg b/Resources/organizr/plex/plex_login.jpg index e7d92e1d..ac0981d2 100644 Binary files a/Resources/organizr/plex/plex_login.jpg and b/Resources/organizr/plex/plex_login.jpg differ diff --git a/Resources/organizr/plex/plex_search.jpg b/Resources/organizr/plex/plex_search.jpg index c40c7aa3..57f696c9 100644 Binary files a/Resources/organizr/plex/plex_search.jpg and b/Resources/organizr/plex/plex_search.jpg differ diff --git a/Resources/organizr/plex/plex_splash.jpg b/Resources/organizr/plex/plex_splash.jpg index 212cad04..7951b3ab 100644 Binary files a/Resources/organizr/plex/plex_splash.jpg and b/Resources/organizr/plex/plex_splash.jpg differ diff --git a/Resources/organizr/plex/theme-park-organizr-plex-logo.png b/Resources/organizr/plex/theme-park-organizr-plex-logo.png index f383446e..7a97cb63 100644 Binary files a/Resources/organizr/plex/theme-park-organizr-plex-logo.png and b/Resources/organizr/plex/theme-park-organizr-plex-logo.png differ diff --git a/Resources/organizr/spacegray/spacegray_login.jpg b/Resources/organizr/spacegray/spacegray_login.jpg index 1756eb52..15cf9c63 100644 Binary files a/Resources/organizr/spacegray/spacegray_login.jpg and b/Resources/organizr/spacegray/spacegray_login.jpg differ diff --git a/Resources/organizr/spacegray/spacegray_splash.jpg b/Resources/organizr/spacegray/spacegray_splash.jpg index e7e7d0d7..8b82bdef 100644 Binary files a/Resources/organizr/spacegray/spacegray_splash.jpg and b/Resources/organizr/spacegray/spacegray_splash.jpg differ diff --git a/Resources/organizr/theme-park-organizr-theme-logo.psd b/Resources/organizr/theme-park-organizr-theme-logo.psd index fd4b52aa..75980bab 100644 Binary files a/Resources/organizr/theme-park-organizr-theme-logo.psd and b/Resources/organizr/theme-park-organizr-theme-logo.psd differ diff --git a/docker-mods/bazarr/Dockerfile b/docker-mods/bazarr/Dockerfile new file mode 100644 index 00000000..adf98959 --- /dev/null +++ b/docker-mods/bazarr/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Bazarr" +#copy local files. +COPY root/ / diff --git a/docker-mods/bazarr/root/etc/cont-init.d/98-themepark b/docker-mods/bazarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..65ef2823 --- /dev/null +++ b/docker-mods/bazarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,51 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Bazarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/bazarr/bin/frontend/build/index.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/frontend/build/index.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi diff --git a/docker-mods/calibre-web/Dockerfile b/docker-mods/calibre-web/Dockerfile new file mode 100644 index 00000000..7eb23cad --- /dev/null +++ b/docker-mods/calibre-web/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Calibre-Web" +#copy local files. +COPY root/ / diff --git a/docker-mods/calibre-web/root/etc/cont-init.d/98-themepark b/docker-mods/calibre-web/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..644fda43 --- /dev/null +++ b/docker-mods/calibre-web/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '--------------------------------' +echo '| Calibre-web theme.park Mod |' +echo '--------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /app/calibre-web/cps/templates/layout.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /app/calibre-web/cps/templates/layout.html + sed -i "s/<\/head>/<\/head> /g" /app/calibre-web/cps/templates/layout.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi diff --git a/docker-mods/deluge/Dockerfile b/docker-mods/deluge/Dockerfile new file mode 100644 index 00000000..0660554f --- /dev/null +++ b/docker-mods/deluge/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Deluge" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/deluge/root/etc/cont-init.d/98-themepark b/docker-mods/deluge/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..fdfcd212 --- /dev/null +++ b/docker-mods/deluge/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Deluge theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/lib/python3/dist-packages/deluge/ui/web/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /usr/lib/python3/dist-packages/deluge/ui/web/index.html + sed -i "s/<\/head>/<\/head> /g" /usr/lib/python3/dist-packages/deluge/ui/web/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/emby/Dockerfile b/docker-mods/emby/Dockerfile new file mode 100644 index 00000000..c7ef48c2 --- /dev/null +++ b/docker-mods/emby/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Emby" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/emby/root/etc/cont-init.d/98-themepark b/docker-mods/emby/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..5063f222 --- /dev/null +++ b/docker-mods/emby/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '-------------------------' +echo '| Emby theme.park Mod |' +echo '-------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /app/emby/dashboard-ui/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/body>/<\/body> /g" /app/emby/dashboard-ui/index.html + sed -i "s/<\/body>/<\/body> /g" /app/emby/dashboard-ui/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi diff --git a/docker-mods/jackett/Dockerfile b/docker-mods/jackett/Dockerfile new file mode 100644 index 00000000..6266087b --- /dev/null +++ b/docker-mods/jackett/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Jackett" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/jackett/root/etc/cont-init.d/98-themepark b/docker-mods/jackett/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..707cf4a0 --- /dev/null +++ b/docker-mods/jackett/root/etc/cont-init.d/98-themepark @@ -0,0 +1,45 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Jackett theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/Jackett/Content/index.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/Content/index.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/jellyfin/Dockerfile b/docker-mods/jellyfin/Dockerfile new file mode 100644 index 00000000..4e9e16d2 --- /dev/null +++ b/docker-mods/jellyfin/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Jellyfin" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/jellyfin/root/etc/cont-init.d/98-themepark b/docker-mods/jellyfin/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..f8653e22 --- /dev/null +++ b/docker-mods/jellyfin/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '-----------------------------' +echo '| Jellyfin theme.park Mod |' +echo '-----------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/share/jellyfin/web/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/body>/<\/body> /g" /usr/share/jellyfin/web/index.html + sed -i "s/<\/body>/<\/body> /g" /usr/share/jellyfin/web/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/lazylibrarian/Dockerfile b/docker-mods/lazylibrarian/Dockerfile new file mode 100644 index 00000000..279c50e6 --- /dev/null +++ b/docker-mods/lazylibrarian/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Lazylibrarian" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/lazylibrarian/root/etc/cont-init.d/98-themepark b/docker-mods/lazylibrarian/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..5270d780 --- /dev/null +++ b/docker-mods/lazylibrarian/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '----------------------------------' +echo '| Lazylibrarian theme.park Mod |' +echo '----------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /app/lazylibrarian/data/interfaces/bookstrap/base.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /app/lazylibrarian/data/interfaces/bookstrap/base.html + sed -i "s/<\/head>/<\/head> /g" /app/lazylibrarian/data/interfaces/bookstrap/base.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/librespeed/Dockerfile b/docker-mods/librespeed/Dockerfile new file mode 100644 index 00000000..71ad6955 --- /dev/null +++ b/docker-mods/librespeed/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Librespeed" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/librespeed/root/etc/cont-init.d/98-themepark b/docker-mods/librespeed/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..d10b338a --- /dev/null +++ b/docker-mods/librespeed/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '-------------------------------' +echo '| Librespeed theme.park Mod |' +echo '-------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/share/webapps/librespeed/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /usr/share/webapps/librespeed/index.html + sed -i "s/<\/head>/<\/head> /g" /usr/share/webapps/librespeed/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/lidarr/Dockerfile b/docker-mods/lidarr/Dockerfile new file mode 100644 index 00000000..ba048736 --- /dev/null +++ b/docker-mods/lidarr/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Lidarr" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/lidarr/root/etc/cont-init.d/98-themepark b/docker-mods/lidarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..844252a5 --- /dev/null +++ b/docker-mods/lidarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,56 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Lidarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/lidarr/bin/UI/index.html' +LOGIN_FILEPATH='/app/lidarr/bin/UI/login.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/UI/index.html' + LOGIN_FILEPATH='/app/bin/UI/login.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi \ No newline at end of file diff --git a/docker-mods/nzbget/Dockerfile b/docker-mods/nzbget/Dockerfile new file mode 100644 index 00000000..dbfbcb47 --- /dev/null +++ b/docker-mods/nzbget/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="NZBGet" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/nzbget/root/etc/cont-init.d/98-themepark b/docker-mods/nzbget/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..dc264e44 --- /dev/null +++ b/docker-mods/nzbget/root/etc/cont-init.d/98-themepark @@ -0,0 +1,43 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| NZBGet theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/nzbget/webui/index.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/webui/index.html' +fi +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" +fi \ No newline at end of file diff --git a/docker-mods/plex/Dockerfile b/docker-mods/plex/Dockerfile new file mode 100644 index 00000000..8f787f32 --- /dev/null +++ b/docker-mods/plex/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Plex" +#copy local files. +COPY root/ / diff --git a/docker-mods/plex/root/etc/cont-init.d/98-themepark b/docker-mods/plex/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..81e36fd8 --- /dev/null +++ b/docker-mods/plex/root/etc/cont-init.d/98-themepark @@ -0,0 +1,50 @@ +#!/usr/bin/with-contenv bash + +echo '-------------------------' +echo '| Plex theme.park Mod |' +echo '-------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}"/usr/lib/plexmediaserver/Resources/Plug-ins-*/WebClient.bundle/Contents/Resources/index.html + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}"/usr/lib/plexmediaserver/Resources/Plug-ins-*/WebClient.bundle/Contents/Resources/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}"/usr/lib/plexmediaserver/Resources/Plug-ins-*/WebClient.bundle/Contents/Resources/index.html + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi \ No newline at end of file diff --git a/docker-mods/prowlarr/Dockerfile b/docker-mods/prowlarr/Dockerfile new file mode 100644 index 00000000..a66c908c --- /dev/null +++ b/docker-mods/prowlarr/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + + LABEL maintainer="GilbN" + LABEL app="Prowlarr" + +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/prowlarr/root/etc/cont-init.d/98-themepark b/docker-mods/prowlarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..f44552d2 --- /dev/null +++ b/docker-mods/prowlarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,56 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Prowlarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/prowlarr/bin/UI/index.html' +LOGIN_FILEPATH='/app/prowlarr/bin/UI/login.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/UI/index.html' + LOGIN_FILEPATH='/app/bin/UI/login.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi \ No newline at end of file diff --git a/docker-mods/qbittorrent/Dockerfile b/docker-mods/qbittorrent/Dockerfile new file mode 100644 index 00000000..e65aa179 --- /dev/null +++ b/docker-mods/qbittorrent/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + + +LABEL maintainer="GilbN" +LABEL app="Qbittorrent" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/qbittorrent/root/etc/cont-init.d/98-themepark b/docker-mods/qbittorrent/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..48c342bd --- /dev/null +++ b/docker-mods/qbittorrent/root/etc/cont-init.d/98-themepark @@ -0,0 +1,117 @@ +#!/usr/bin/with-contenv bash + +echo '------------------------------' +echo '| qBittorrent theme.park Mod |' +echo '------------------------------' + +APP_FILEPATH='/config/qBittorrent/qBittorrent.conf' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/config/config/qBittorrent.conf' +fi + +# Backup config +if [[ ! -f "${APP_FILEPATH}.bak" ]]; then + echo "Creating qBittorrent.conf backup in /config." + cp -p ${APP_FILEPATH} "${APP_FILEPATH}.bak" +fi + +# Restore qBittorrent.conf +if [ "${TP_DISABLE_THEME}" = true ]; then + echo "Restoring backup of qBittorrent.conf" + sed -i "s/WebUI\\\AlternativeUIEnabled=.*$/WebUI\\\AlternativeUIEnabled=false/g" "${APP_FILEPATH}"; + exit 0 +fi + +if ! [[ -x "$(command -v svn)" ]]; then +echo '--------------------------' +echo '| Installing svn package |' +echo '--------------------------' + apt-get update && \ + apt-get install -y subversion +fi + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'APP_FILEPATH'=${APP_FILEPATH}\\n\ +'TP_DISABLE_THEME'=${TP_DISABLE_THEME}\\n\ +'TP_HOTIO'=${TP_HOTIO}\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Downloading fresh webui files from source. +if [[ ! -d /themepark ]]; then + echo '---------------------------------------' + echo '| Downloading WebUI files from github |' + echo '---------------------------------------' + printf '\nDownloading qBittorrent webui to "/themepark"..please wait\n' + svn export --quiet https://github.com/qbittorrent/qBittorrent/trunk/src/webui/www /themepark + printf '\nDownload finished\n\n' + printf '\nDownloading qBittorrent webui icons to "/themepark/xxx"..please wait\n' + svn export --force --quiet https://github.com/qbittorrent/qBittorrent/trunk/src/icons /temp + cp -a /temp/. /themepark/public/icons + cp -a /temp/. /themepark/private/icons + rm -rf /temp + printf '\nDownload finished\n\n' +fi + +sed_file(){ + sed -i "s/<\/head>/<\/head> /g" $1 + sed -i "s/<\/head>/<\/head> /g" $1 + printf 'Stylesheet set to %s on %s\n\n' "${TP_THEME}" "$1" +} + +# Adding stylesheets +echo '---------------------------------------' +echo '| Adding the stylesheet to html files |' +echo '---------------------------------------' +if ! grep -q "${TP_DOMAIN}" /themepark/public/index.html; then + sed_file /themepark/public/index.html +fi + +if ! grep -q "${TP_DOMAIN}" /themepark/private/index.html; then + find ./themepark/private -type f -iname *.html | while read fname + do + sed_file $fname + done +fi + +if ! grep -q "WebUI\\\RootFolder" "${APP_FILEPATH}"; then + echo '--------------------------------------' + echo '| Adding WebUI\RootFolder=/themepark |' + echo '--------------------------------------' + sed -i -e '$aWebUI\\RootFolder=/themepark' "${APP_FILEPATH}"; +fi + +if ! grep -q "WebUI\\\AlternativeUIEnabled" "${APP_FILEPATH}"; then + echo '------------------------------------------' + echo '| Adding WebUI\AlternativeUIEnabled=true |' + echo '------------------------------------------' + sed -i -e '$aWebUI\\AlternativeUIEnabled=true' "${APP_FILEPATH}"; +fi + +if ! grep -q "WebUI\\\RootFolder=/themepark" "${APP_FILEPATH}" || ! grep -q "WebUI\\\AlternativeUIEnabled=true" "${APP_FILEPATH}"; then + echo '-------------------------------------------------------' + echo '| Updating RootFolder and AlternativeUIEnabled values |' + echo '-------------------------------------------------------' + sed -i "s/WebUI\\\AlternativeUIEnabled=.*$/WebUI\\\AlternativeUIEnabled=true/g" "${APP_FILEPATH}"; + sed -i "s/WebUI\\\RootFolder=.*$/WebUI\\\RootFolder=\/themepark/g" "${APP_FILEPATH}"; +fi diff --git a/docker-mods/radarr/Dockerfile b/docker-mods/radarr/Dockerfile new file mode 100644 index 00000000..0d568ce8 --- /dev/null +++ b/docker-mods/radarr/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + + LABEL maintainer="GilbN" + LABEL app="Radarr" + +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/radarr/root/etc/cont-init.d/98-themepark b/docker-mods/radarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..5982b13b --- /dev/null +++ b/docker-mods/radarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,56 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Radarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/radarr/bin/UI/index.html' +LOGIN_FILEPATH='/app/radarr/bin/UI/login.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/UI/index.html' + LOGIN_FILEPATH='/app/bin/UI/login.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi \ No newline at end of file diff --git a/docker-mods/readarr/Dockerfile b/docker-mods/readarr/Dockerfile new file mode 100644 index 00000000..2d17371a --- /dev/null +++ b/docker-mods/readarr/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + + LABEL maintainer="GilbN" + LABEL app="Readarr" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/readarr/root/etc/cont-init.d/98-themepark b/docker-mods/readarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..8e6bd988 --- /dev/null +++ b/docker-mods/readarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,56 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Readarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/readarr/bin/UI/index.html' +LOGIN_FILEPATH='/app/readarr/bin/UI/login.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/UI/index.html' + LOGIN_FILEPATH='/app/bin/UI/login.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi diff --git a/docker-mods/rutorrent/Dockerfile b/docker-mods/rutorrent/Dockerfile new file mode 100644 index 00000000..7c8cad78 --- /dev/null +++ b/docker-mods/rutorrent/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Rutorrent" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/rutorrent/root/etc/cont-init.d/98-themepark b/docker-mods/rutorrent/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..0567c07a --- /dev/null +++ b/docker-mods/rutorrent/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '------------------------------' +echo '| Rutorrent theme.park Mod |' +echo '------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /app/rutorrent/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /app/rutorrent/index.html + sed -i "s/<\/head>/<\/head> /g" /app/rutorrent/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/sabnzbd/Dockerfile b/docker-mods/sabnzbd/Dockerfile new file mode 100644 index 00000000..2db1860c --- /dev/null +++ b/docker-mods/sabnzbd/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="SABnzbd" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/sabnzbd/root/etc/cont-init.d/98-themepark b/docker-mods/sabnzbd/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..61871d9b --- /dev/null +++ b/docker-mods/sabnzbd/root/etc/cont-init.d/98-themepark @@ -0,0 +1,50 @@ +#!/usr/bin/with-contenv bash + +echo '----------------------------' +echo '| SABnzbd theme.park Mod |' +echo '----------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/sabnzbd' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}/interfaces/Glitter/templates/main.tmpl"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Glitter/templates/main.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Config/templates/_inc_header_uc.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Config/templates/login/main.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/wizard/inc_top.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Glitter/templates/main.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Config/templates/_inc_header_uc.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/Config/templates/login/main.tmpl" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}/interfaces/wizard/inc_top.tmpl" + printf 'Stylesheet set to %s\n' "${TP_THEME}" +fi \ No newline at end of file diff --git a/docker-mods/sonarr/Dockerfile b/docker-mods/sonarr/Dockerfile new file mode 100644 index 00000000..a3547724 --- /dev/null +++ b/docker-mods/sonarr/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Sonarr" + +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/sonarr/root/etc/cont-init.d/98-themepark b/docker-mods/sonarr/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..59de70a9 --- /dev/null +++ b/docker-mods/sonarr/root/etc/cont-init.d/98-themepark @@ -0,0 +1,56 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------' +echo '| Sonarr theme.park Mod |' +echo '---------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_ADDON'=${TP_ADDON}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/sonarr/bin/UI/index.html' +LOGIN_FILEPATH='/app/sonarr/bin/UI/login.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/bin/UI/index.html' + LOGIN_FILEPATH='/app/bin/UI/login.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" + if [[ -n ${TP_ADDON} ]]; then + for addon in $(echo "$TP_ADDON" | tr "|" " "); do + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${LOGIN_FILEPATH}" + printf 'Added custom addon: %s\n\n' "${addon}" + done + fi +fi \ No newline at end of file diff --git a/docker-mods/synclounge/Dockerfile b/docker-mods/synclounge/Dockerfile new file mode 100644 index 00000000..dc7ed341 --- /dev/null +++ b/docker-mods/synclounge/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Synclounge" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/synclounge/root/etc/cont-init.d/98-themepark b/docker-mods/synclounge/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..e373ebc0 --- /dev/null +++ b/docker-mods/synclounge/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '-------------------------------' +echo '| Synclounge theme.park Mod |' +echo '-------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/lib/node_modules/synclounge/dist/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /usr/lib/node_modules/synclounge/dist/index.html + sed -i "s/<\/head>/<\/head> /g" /usr/lib/node_modules/synclounge/dist/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/tautulli/Dockerfile b/docker-mods/tautulli/Dockerfile new file mode 100644 index 00000000..d6d6f560 --- /dev/null +++ b/docker-mods/tautulli/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Tautulli" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/tautulli/root/etc/cont-init.d/98-themepark b/docker-mods/tautulli/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..be378f8e --- /dev/null +++ b/docker-mods/tautulli/root/etc/cont-init.d/98-themepark @@ -0,0 +1,44 @@ +#!/usr/bin/with-contenv bash + +echo '-----------------------------' +echo '| Tautulli theme.park Mod |' +echo '-----------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +APP_FILEPATH='/app/tautulli/data/interfaces/default/base.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file path!' + APP_FILEPATH='/app/data/interfaces/default/base.html' +fi + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + sed -i "s/<\/head>/<\/head> /g" "${APP_FILEPATH}" + printf 'Stylesheet set to %s\n' "${TP_THEME}" +fi \ No newline at end of file diff --git a/docker-mods/thelounge/Dockerfile b/docker-mods/thelounge/Dockerfile new file mode 100644 index 00000000..c112091b --- /dev/null +++ b/docker-mods/thelounge/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="The Lounge" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/thelounge/root/etc/cont-init.d/98-themepark b/docker-mods/thelounge/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..aeaf101d --- /dev/null +++ b/docker-mods/thelounge/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '-------------------------------' +echo '| The Lounge theme.park Mod |' +echo '-------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/lib/node_modules/thelounge/client/index.html.tpl; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /usr/lib/node_modules/thelounge/client/index.html.tpl + sed -i "s/<\/head>/<\/head> /g" /usr/lib/node_modules/thelounge/client/index.html.tpl + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/transmission/Dockerfile b/docker-mods/transmission/Dockerfile new file mode 100644 index 00000000..175cc581 --- /dev/null +++ b/docker-mods/transmission/Dockerfile @@ -0,0 +1,6 @@ +FROM scratch + +LABEL maintainer="GilbN" +LABEL app="Transmission" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/transmission/root/etc/cont-init.d/98-themepark b/docker-mods/transmission/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..2ec8b98a --- /dev/null +++ b/docker-mods/transmission/root/etc/cont-init.d/98-themepark @@ -0,0 +1,39 @@ +#!/usr/bin/with-contenv bash + +echo '---------------------------------' +echo '| Transmission theme.park Mod |' +echo '---------------------------------' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" /usr/share/transmission/web/index.html; then + echo '---------------------------' + echo '| Adding the stylesheet |' + echo '---------------------------' + sed -i "s/<\/head>/<\/head> /g" /usr/share/transmission/web/index.html + sed -i "s/<\/head>/<\/head> /g" /usr/share/transmission/web/index.html + printf 'Stylesheet set to %s\n' "${TP_THEME} + " +fi \ No newline at end of file diff --git a/docker-mods/vuetorrent/Dockerfile b/docker-mods/vuetorrent/Dockerfile new file mode 100644 index 00000000..32b48e23 --- /dev/null +++ b/docker-mods/vuetorrent/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + + +LABEL maintainer="GilbN" +LABEL app="VueTorrent" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/vuetorrent/root/etc/cont-init.d/98-themepark b/docker-mods/vuetorrent/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..8ca812cd --- /dev/null +++ b/docker-mods/vuetorrent/root/etc/cont-init.d/98-themepark @@ -0,0 +1,133 @@ +#!/usr/bin/with-contenv bash +APP_FILEPATH='/config/qBittorrent/qBittorrent.conf' +INDEX_FILEPATH='/vuetorrent/public/index.html' +if [ "${TP_HOTIO}" = true ]; then + echo 'Changing to Hotio file paths!' + APP_FILEPATH='/config/config/qBittorrent.conf' + INDEX_FILEPATH='/app/vuetorrent/public/index.html' +fi + +# Backup config +if [[ ! -f "${APP_FILEPATH}.bak" ]]; then + echo "Creating qBittorrent.conf backup in /config." + cp -p ${APP_FILEPATH} "${APP_FILEPATH}.bak" +fi + +# Restore qBittorrent.conf +if [ "${TP_DISABLE_THEME}" = true ]; then + echo "Restoring backup of qBittorrent.conf" + sed -i "s/WebUI\\\AlternativeUIEnabled=.*$/WebUI\\\AlternativeUIEnabled=false/g" "${APP_FILEPATH}"; + exit 0 +fi + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi +RELEASE_FILEPATH='/vuetorrent/release.json' +NEEDS_UPDATE=false +CURRENT_RELEASE=$(curl -s https://api.github.com/repos/WDaan/VueTorrent/releases/latest | jq -r ".assets[]") + +# =============================================== +install_deps() { + if ! [[ -x "$(command -v jq)" ]]; then + echo '-------------------------' + echo '| Installing jq package |' + echo '-------------------------' + apt-get update && + apt-get install -y jq + fi +} +check_updates() { + if [[ ! -d ./vuetorrent ]]; then + NEEDS_UPDATE=true + elif [[ ! -f $RELEASE_FILEPATH ]]; then + NEEDS_UPDATE=true + else + old_date=$(date -d $(cat "${RELEASE_FILEPATH}" | jq -r ".updated_at") +%s) + new_date=$(date -d $(echo $CURRENT_RELEASE | jq -r ".updated_at") +%s) + if [ $new_date -gt $old_date ]; then + NEEDS_UPDATE=true + fi + fi +} +update_ui() { + printf '\nDownloading qBittorrent webui to "/vuetorrent"..please wait\n' + curl -L $(echo $CURRENT_RELEASE | jq -r ".browser_download_url") --output /tmp/vuetorrent.zip + printf '\nDownload finished\n\n' + if [[ -d /vuetorrent ]]; then + rm -rf /vuetorrent + fi + # mkdir -p /vuetorrent + unzip -q /tmp/vuetorrent.zip -d / + echo $CURRENT_RELEASE >"${RELEASE_FILEPATH}" +} +# =============================================== + +echo '-----------------------------------------' +echo '| qBittorrent vuetorrent theme.park Mod |' +echo '-----------------------------------------' + +if [[ -z ${TP_HOTIO} ]]; then + install_deps + check_updates + + if [ "$NEEDS_UPDATE" = true ]; then + echo '---------------------------------------' + echo '| Downloading WebUI files from github |' + echo '---------------------------------------' + update_ui + else + echo ' WebUI files are up-to-date!' + fi + + if ! grep -q "WebUI\\\RootFolder" "${APP_FILEPATH}"; then + echo '--------------------------------------' + echo '| Adding WebUI\RootFolder=/vuetorrent |' + echo '--------------------------------------' + sed -i -e '$aWebUI\\RootFolder=/vuetorrent' "${APP_FILEPATH}" + fi + + if ! grep -q "WebUI\\\AlternativeUIEnabled" "${APP_FILEPATH}"; then + echo '------------------------------------------' + echo '| Adding WebUI\AlternativeUIEnabled=true |' + echo '------------------------------------------' + sed -i -e '$aWebUI\\AlternativeUIEnabled=true' "${APP_FILEPATH}" + fi + + if ! grep -q "WebUI\\\RootFolder=/vuetorrent" "${APP_FILEPATH}" || ! grep -q "WebUI\\\AlternativeUIEnabled=true" "${APP_FILEPATH}"; then + echo '-------------------------------------------------------' + echo '| Updating RootFolder and AlternativeUIEnabled values |' + echo '-------------------------------------------------------' + sed -i "s/WebUI\\\AlternativeUIEnabled=.*$/WebUI\\\AlternativeUIEnabled=true/g" "${APP_FILEPATH}" + sed -i "s/WebUI\\\RootFolder=.*$/WebUI\\\RootFolder=\/vuetorrent/g" "${APP_FILEPATH}" + fi +fi + +# Adding stylesheets +if ! grep -q "${TP_DOMAIN}" "${INDEX_FILEPATH}"; then + echo '---------------------------------------------------------' + echo '| Adding the stylesheet to /vuetorrent/public/index.html |' + echo '---------------------------------------------------------' + sed -i "s/<\/body>/<\/body> /g" "${INDEX_FILEPATH}" + sed -i "s/<\/body>/<\/body> /g" "${INDEX_FILEPATH}" + printf 'Stylesheet set to %s on public index.html\n' "${TP_THEME}" +fi \ No newline at end of file diff --git a/index.html b/index.html index eca056ad..ab386885 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@ - + - + @@ -43,6 +43,15 @@ href="https://docs.theme-park.dev/discord"> Discord
  • Sponsor
    • +
  • + Star +
    • +
  • + Fork +
    • @@ -51,7 +60,7 @@
    @@ -62,7 +71,7 @@
    -

    A collection of themes/skins for over 45 selfhosted +

    A collection of themes/skins for over 40 selfhosted apps!

    Find Out More @@ -75,9 +84,9 @@
    -

    Over 45 themed apps

    +

    Over 40 themed applications!

    -

    theme.park contains 47 themed applications, with css theme.park contains 45 themed applications, with css addons on certain themes.

    Installation methods include custom docker mods @@ -85,6 +94,9 @@

    custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache

    +

    Choose between 9 different + styles! With the possibility to easily create your own themes using the defined variables.

    Get Started!
    @@ -112,6 +124,12 @@ src="https://docs.theme-park.dev/site_assets/readarr/logo.png" />

    Readarr

    + +

    +

    +

    Prowlarr

    +

    @@ -122,6 +140,12 @@

    Plex

     + +

    +

    +

    Synclounge

    +

    @@ -133,8 +157,8 @@

    Jellyfin

     -

    +

    +

    Emby

     @@ -157,6 +181,11 @@ src="https://docs.theme-park.dev/site_assets/organizr/logo.png" />

    Organizr

     + +

    +

    +

    deluge

    +

    @@ -182,17 +211,29 @@

    NZBGet

     - + +

    +

    +

    NZBHydra 2

    +     + +

    +

    +

    Jackett

    +     +

    Netdata

     - +

    @@ -222,21 +263,21 @@ src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" />

    Filebrowser

     - +

    Librespeed

     - +

    Kitana

     - +

    @@ -308,22 +349,43 @@

    Flood

     + +

    +

    +

    VueTorrent

    +

    Dozzle

     + +

    +

    +

    Xbackbone

    +     + +

    +

    +

    Uptime Kuma

    +
    -
    +

    How to get started

    -
    +

    Theme Docs

    @@ -332,14 +394,15 @@ theme!

    -
    +

    Find us on Github

    -

    Having issues with a theme? Let us know on Github!

    +

    Having issues with a theme? Let us know on Github!

    -
    +

    Discord Community

    @@ -347,7 +410,14 @@ href="https://docs.theme-park.dev/discord">Discord server!

    -
    +
    +
    + +

    Community Themes!

    +

    Got a good color scheme you'd like to see added? PR it!

    +
    +
    +

    Made with Love

    @@ -357,67 +427,101 @@
    - -
    -
    -
    -
    - - ... -
    -
    Theme
    -
    Aquamarine
    -
    -     -
    -
    - - ... -
    -
    Theme
    -
    Hotline
    -
    -     -
    -
    - - ... -
    -
    Theme
    -
    Space Gray
    -
    -     -
    -
    - - ... -
    -
    Theme
    -
    Organizr Dark
    -
    -     -
    -
    - - ... -
    -
    Theme
    -
    Dark
    -
    -     -
    -
    - - ... -
    -
    Theme
    -
    Plex
    -
    -     + +
    +
    +

    Available theme options

    +
    +
    +
    + -