Mirrors/theme.park
1
0
Fork 0
mirror of https://github.com/gilbN/theme.park.git synced 2024-10-27 06:12:54 +01:00
Code Issues Releases Wiki Activity

netdata dracula

Browse Source
This commit is contained in:
Marius 2021-07-23 18:30:23 +02:00
parent c5f9e0807c
commit d7799bc6ea
10 changed files with 173 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CSS/themes/librespeed/dracula.css
View File

@ -12,5 +12,5 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
/* LIBRESPEED DRACULA THEME */ /* LIBRESPEED DRACULA THEME */
@import url(https://dev.theme-park.dev/CSS/themes/librespeed/librespeed-base.css); @import url(https://theme-park.dev/CSS/themes/librespeed/librespeed-base.css);
@import url(https://dev.theme-park.dev/CSS/variables/dracula.css); @import url(https://theme-park.dev/CSS/variables/dracula.css);

7
CSS/themes/netdata/aquamarine.css
View File

@ -13,9 +13,4 @@
/* NETDATA AQUAMARINE THEME */ /* NETDATA AQUAMARINE THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/aquamarine.css);
--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;
}

7
CSS/themes/netdata/dark.css
View File

@ -13,9 +13,4 @@
/* NETDATA DARK THEME */ /* NETDATA DARK THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/dark.css);
--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;
}

16
CSS/themes/netdata/dracula.css Normal file
View File

@ -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);

7
CSS/themes/netdata/hotline.css
View File

@ -13,9 +13,4 @@
/* NETDATA HOTLINE THEME */ /* NETDATA HOTLINE THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/hotline.css);
--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;
}

208
CSS/themes/netdata/netdata-base.css
View File

@ -11,7 +11,8 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
body { body,
[class*="styled__SocialMediaContainer-"] {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -20,15 +21,31 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-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 { .loadOverlay {
color: #eee !important; color: var(--text) !important;
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -54,7 +71,7 @@ body {
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus { .navbar-default .navbar-nav>li>a:focus {
background-color: rgba(0, 0, 0, .25) !important; background-color: rgba(0, 0, 0, .25) !important;
color: #ffffff !important; color: var(--text-hover) !important;
} }
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a,
@ -89,8 +106,9 @@ body {
.nav-tabs>li.active>a, .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus { .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; border: 1px solid #00000000 !important;
color: rgb(var(--accent-color));
} }
.nav>li>a:hover, .nav>li>a:hover,
@ -102,7 +120,9 @@ body {
.nav>li>a:hover, .nav>li>a:hover,
.nav>li>a:focus { .nav>li>a:focus {
background-color: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important;
border-color: transparent !important; }
.nav-tabs > li > a:hover {
border-color: transparent;
} }
.nav-tabs { .nav-tabs {
@ -124,8 +144,11 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.dropdown-menu { .dropdown-menu,
background: var(--modal-bg-color) !important; [class*="__Dropdown-"],
[class*="documentation__Container-sc-"],
[class*="styled__PickerBox-"] {
background: var(--drop-down-menu-bg) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -136,6 +159,33 @@ body {
border: 0px !important; 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:hover,
.dropdown-menu>li>a:focus { .dropdown-menu>li>a:focus {
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
@ -153,15 +203,31 @@ body {
} }
.modal-header { .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 { .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 { .nav-tabs {
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; border-bottom: 1px solid rgb(var(--accent-color)) !important;
} }
.panel { .panel {
@ -226,14 +292,34 @@ table {
.dashboard-sidebar .nav>.active>a, .dashboard-sidebar .nav>.active>a,
.dashboard-sidebar .nav>.active:hover>a, .dashboard-sidebar .nav>.active:hover>a,
.dashboard-sidebar .nav>.active:focus>a { .dashboard-sidebar .nav>.active:focus>a {
color: var(--accent-color) !important; color: rgb(var(--accent-color)) !important;
border-left: 2px solid 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*/
code { code {
color: #fff !important; color: var(--label-text-color) !important;
background-color: rgba(255, 255, 255, 0.15) !important; background-color: rgb(var(--accent-color)) !important;
} }
/* System Overview metrics */ /* System Overview metrics */
@ -267,23 +353,25 @@ code {
/* Sidebar */ /* Sidebar */
.dashboard-sidebar .nav>li>a { .dashboard-sidebar .nav>li>a {
color: #ffffff !important; color: var(--text);
} }
.dashboard-sidebar .nav>li>a:hover, .dashboard-sidebar .nav>li>a:focus,
.dashboard-sidebar .nav>li>a:focus { .dashboard-sidebar .nav>li>a:hover {
color: var(--accent-color) !important; padding-left: 19px;
border-left: 1px solid var(--accent-color) !important; color: var(--text-hover);
text-decoration: none;
background-color: transparent;
border-left: 1px solid rgb(var(--accent-color));
} }
small, small,
.small { .small {
font-size: 85%; color: var(--text-muted);
color: white;
} }
.action-button { .action-button {
color: white !important; color: var(--button-text-hover) !important;
} }
hr { hr {
@ -301,19 +389,39 @@ hr {
} }
/* Buttons */ /* Buttons */
.btn-default { .btn-default:not([class*="toggle"]) {
background-color: rgba(0, 0, 0, 0.25) !important; background-color: var(--button-color);
color: var(--button-text);
border-color: var(--button-color);
} }
.btn-default:hover { a[class*="styled__StyledButton-"],
background-color: rgba(255, 255, 255, 0.08) !important; [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, a[class*="styled__StyledButton-"]:hover,
.btn-default.active, a[class*="styled__StyledButton-"]:active,
.open>.dropdown-toggle.btn-default { [data-testid*="date-picker::click-apply::global-view-"]:hover,
background-color: rgba(0, 0, 0, 0.45); [data-testid*="date-picker::click-apply::global-view-"]:active {
border-color: rgba(0, 0, 0, 0.45) !important; 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 */ /* NAV */
@ -328,19 +436,10 @@ hr {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
[class^="styled__ListContainer"] { [class*="styled__ListContainer"],
background: var(--main-bg-color); [class*="container__Container-"] div,
background-repeat: repeat, no-repeat; [class*="styled__PanelContainer"],
background-attachment: fixed, fixed; [class*="styled__StyledHeader"] {
background-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"] {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -349,26 +448,15 @@ hr {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-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"] { [class^="styled__BottomPanel"] {
background: #0000; background: #0000;
} }
[class^=".styled__StyledSpaceBarPlus"] { [class^=".styled__StyledSpaceBarPlus"] {
background: var(--accent-color); background: rgb(var(--accent-color));
border-color: var(--accent-color); border-color: rgb(var(--accent-color));
} }

6
CSS/themes/netdata/organizr-dark.css
View File

@ -13,8 +13,4 @@
/* NETDATA ORGANIZR-DARK THEME */ /* NETDATA ORGANIZR-DARK THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/organizr-dark.css);
--main-bg-color: #1f1f1f;
--modal-bg-color: #1b1b1b;
--accent-color: #2cabe3;
}

4
CSS/themes/netdata/organizr-dashboard.css
View File

@ -14,9 +14,7 @@
/* NETDATA ORGANIZR DASHBOARD THEME */ /* NETDATA ORGANIZR DASHBOARD THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
@import url(https://theme-park.dev/CSS/variables/organizr-dark.css);
:root { :root {
--main-bg-color: transparent; --main-bg-color: transparent;
--modal-bg-color: #1f1f1f;
--accent-color: #FFEB3B;
} }

7
CSS/themes/netdata/plex.css
View File

@ -13,9 +13,4 @@
/* NETDATA PLEX THEME */ /* NETDATA PLEX THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/plex.css);
--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;
}

6
CSS/themes/netdata/space-gray.css
View File

@ -13,8 +13,4 @@
/* NETDATA SPACE GRAY THEME */ /* NETDATA SPACE GRAY THEME */
@import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css); @import url(https://theme-park.dev/CSS/themes/netdata/netdata-base.css);
:root { @import url(https://theme-park.dev/CSS/variables/space-gray.css);
--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;
}