diff --git a/CSS/themes/unraid/aquamarine.css b/CSS/themes/unraid/aquamarine.css index ca7e166f..57e9c153 100644 --- a/CSS/themes/unraid/aquamarine.css +++ b/CSS/themes/unraid/aquamarine.css @@ -13,22 +13,4 @@ /* UNRAID AQUAMARINE THEME */ @import url(https://theme-park.dev/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://theme-park.dev/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 60c2fa65..a37c1894 100644 --- a/CSS/themes/unraid/dark.css +++ b/CSS/themes/unraid/dark.css @@ -13,22 +13,4 @@ /* UNRAID DARK THEME */ @import url(https://theme-park.dev/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-color: 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; -} +@import url(https://theme-park.dev/CSS/variables/dark.css); diff --git a/CSS/themes/unraid/dracula.css b/CSS/themes/unraid/dracula.css new file mode 100644 index 00000000..b64e7d14 --- /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://github.com/gilbN/theme.park */ + +/* UNRAID DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/unraid/unraid-base.css); +@import url(https://theme-park.dev/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 ed2e700a..69e7d136 100644 --- a/CSS/themes/unraid/hotline.css +++ b/CSS/themes/unraid/hotline.css @@ -13,22 +13,4 @@ /* UNRAID HOTLINE THEME */ @import url(https://theme-park.dev/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-color: #fff; - - --heatmap-color-1: #690000; - --heatmap-color-2: #890000; - --heatmap-color-3: #AC0002; - --heatmap-color-4: #D0191D; - --heatmap-color-5: #F44336; -} +@import url(https://theme-park.dev/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 931c0495..34dffd65 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://theme-park.dev/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://theme-park.dev/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 baab6516..7708a0f5 100644 --- a/CSS/themes/unraid/plex.css +++ b/CSS/themes/unraid/plex.css @@ -13,22 +13,4 @@ /* UNRAID PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/unraid/unraid-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; - --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://theme-park.dev/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 3c73a58a..431d21ab 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://theme-park.dev/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://theme-park.dev/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 8ea6c459..6d7d9855 100644 --- a/CSS/themes/unraid/unraid-base.css +++ b/CSS/themes/unraid/unraid-base.css @@ -25,6 +25,12 @@ 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); } @@ -34,7 +40,7 @@ i.control { } #header .text-left { - border-right: solid medium var(--accent-color); + border-right: solid medium rgb(var(--accent-color)); } #header { @@ -54,15 +60,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,6 +91,7 @@ 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 { @@ -80,9 +99,13 @@ span.outer.solid { } span.inner { - width: 137px; + width: 137px !important; } +thead.sortable,thead,table.tablesorter thead tr th { + color: var(--text-hover); + } + .sys, .usage-disk, .usage-bar { @@ -93,6 +116,13 @@ span.inner { 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 { @@ -103,7 +133,7 @@ span.inner { #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 { @@ -169,7 +199,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); @@ -187,7 +217,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; @@ -250,10 +280,14 @@ 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); } /* FOOTER */ @@ -264,13 +298,22 @@ div.tab [type=radio]+label:hover { /* 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, +.selectedMenu { + color: rgb(var(--accent-color)) !important; +} .hoverMenu { - color: var(--link-color) !important; + color: var(--link-color-hover) !important; +} + +.ca_descriptionArea:hover,a.ca_repoPopup:hover { + color: var(--text-hover) !important; } .ca_templatesDisplay .ca_holderFav { @@ -279,44 +322,52 @@ div.tab [type=radio]+label:hover { } 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 { @@ -325,7 +376,7 @@ div.tabs { /*DROPDOWN MENU*/ .dropdown-menu { - background: var(--modal-bg-color) !important; + background: var(--drop-down-menu-bg) !important; } .dropdown-menu a { @@ -391,7 +442,7 @@ blockquote { /* MY SERVERS */ .UnraidUPC .--hasBanner-custom .UnraidUPC-dropdown { - background-color: var(--modal-bg-color) !important; + background-color: var(--drop-down-menu-bg) !important; --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); @@ -414,9 +465,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; @@ -431,4 +482,8 @@ unraid-authed::part(div[data-v-050c892a] > button) { background: rgb(0 0 0 / 25%); padding: 1%; border-radius: 5px; +} + +dt { + color: var(--text-hover); } \ No newline at end of file diff --git a/CSS/variables/plex.css b/CSS/variables/plex.css index e49e7a24..9184cebd 100644 --- a/CSS/variables/plex.css +++ b/CSS/variables/plex.css @@ -1,5 +1,5 @@ :root { - --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), 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; + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), 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%) center center/cover no-repeat fixed, 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%) center center/cover no-repeat fixed, 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%) center center/cover no-repeat fixed, 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: #282828; --modal-header-color: #282828;