From d7799bc6eaa1694e592a22c593e8b5b28a6eda55 Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Fri, 23 Jul 2021 18:30:23 +0200 Subject: [PATCH] netdata dracula --- CSS/themes/librespeed/dracula.css | 4 +- CSS/themes/netdata/aquamarine.css | 7 +- CSS/themes/netdata/dark.css | 7 +- CSS/themes/netdata/dracula.css | 16 ++ CSS/themes/netdata/hotline.css | 7 +- CSS/themes/netdata/netdata-base.css | 208 +++++++++++++++------- CSS/themes/netdata/organizr-dark.css | 6 +- CSS/themes/netdata/organizr-dashboard.css | 4 +- CSS/themes/netdata/plex.css | 7 +- CSS/themes/netdata/space-gray.css | 6 +- 10 files changed, 173 insertions(+), 99 deletions(-) create mode 100644 CSS/themes/netdata/dracula.css diff --git a/CSS/themes/librespeed/dracula.css b/CSS/themes/librespeed/dracula.css index bd1fe331..34a65aa5 100644 --- a/CSS/themes/librespeed/dracula.css +++ b/CSS/themes/librespeed/dracula.css @@ -12,5 +12,5 @@ /* https://github.com/gilbN/theme.park */ /* LIBRESPEED DRACULA THEME */ -@import url(https://dev.theme-park.dev/CSS/themes/librespeed/librespeed-base.css); -@import url(https://dev.theme-park.dev/CSS/variables/dracula.css); \ No newline at end of file +@import url(https://theme-park.dev/CSS/themes/librespeed/librespeed-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/netdata/aquamarine.css b/CSS/themes/netdata/aquamarine.css index c4a04653..f4da34c4 100644 --- a/CSS/themes/netdata/aquamarine.css +++ b/CSS/themes/netdata/aquamarine.css @@ -13,9 +13,4 @@ /* NETDATA AQUAMARINE THEME */ @import url(https://theme-park.dev/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://theme-park.dev/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 5b8e3e83..21c8a06b 100644 --- a/CSS/themes/netdata/dark.css +++ b/CSS/themes/netdata/dark.css @@ -13,9 +13,4 @@ /* NETDATA DARK THEME */ @import url(https://theme-park.dev/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://theme-park.dev/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..ceb0bb3d --- /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://github.com/gilbN/theme.park */ + +/* NETDATA AQUAMARINE THEME */ +@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); +@import url(https://theme-park.dev/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 be12c279..41f26db7 100644 --- a/CSS/themes/netdata/hotline.css +++ b/CSS/themes/netdata/hotline.css @@ -13,9 +13,4 @@ /* NETDATA HOTLINE THEME */ @import url(https://theme-park.dev/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://theme-park.dev/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 55b09df1..e118f45c 100644 --- a/CSS/themes/netdata/netdata-base.css +++ b/CSS/themes/netdata/netdata-base.css @@ -11,7 +11,8 @@ /* https://github.com/gilbN/theme.park */ -body { +body, +[class*="styled__SocialMediaContainer-"] { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -20,15 +21,31 @@ 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; @@ -54,7 +71,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, @@ -89,8 +106,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, @@ -102,7 +120,9 @@ 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 { @@ -124,8 +144,11 @@ body { -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; @@ -136,6 +159,33 @@ body { 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; @@ -153,15 +203,31 @@ body { } .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 { @@ -226,14 +292,34 @@ 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 */ @@ -267,23 +353,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 { @@ -301,19 +389,39 @@ 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 */ @@ -328,19 +436,10 @@ hr { -o-background-size: auto, cover; } -[class^="styled__ListContainer"] { - 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: white; -} - -[class^="styled__PanelContainer"] { +[class*="styled__ListContainer"], +[class*="container__Container-"] div, +[class*="styled__PanelContainer"], +[class*="styled__StyledHeader"] { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -349,26 +448,15 @@ hr { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - color: white; + color: var(--text-hover); } -[class^="styled__StyledHeader"] { - 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: 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 cc53768d..dde219d0 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://theme-park.dev/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://theme-park.dev/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 d69b4902..35367def 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://theme-park.dev/CSS/themes/netdata/netdata-base.css); +@import url(https://theme-park.dev/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 121f811b..f38b8eaa 100644 --- a/CSS/themes/netdata/plex.css +++ b/CSS/themes/netdata/plex.css @@ -13,9 +13,4 @@ /* NETDATA PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); -:root { - --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --accent-color: #cc7b19; - } \ No newline at end of file +@import url(https://theme-park.dev/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 b06357b0..d13eb53d 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://theme-park.dev/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://theme-park.dev/CSS/variables/space-gray.css); \ No newline at end of file