diff --git a/CSS/themes/adguard/adguard-base.css b/CSS/themes/adguard/adguard-base.css index d1b8ece3..1162f757 100644 --- a/CSS/themes/adguard/adguard-base.css +++ b/CSS/themes/adguard/adguard-base.css @@ -31,6 +31,9 @@ body { body *::-webkit-scrollbar-thumb { background: hsla(0,0%,100%,.2); } +body *:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 100%, 0.4); +} ::-webkit-scrollbar { width: 14px; } @@ -58,17 +61,19 @@ 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 +88,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 +114,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 +157,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 +172,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 +184,44 @@ 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,6 +263,10 @@ a:-webkit-any-link:focus { border-color: #F44336; } +.btn-icon--green,.icon--green { + color: var(--button-color); +} + /* DROPDOWNS */ .dropdown-menu { color: var(--text); @@ -282,13 +304,25 @@ a:-webkit-any-link:focus { 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 +336,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, @@ -337,6 +371,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 +383,21 @@ 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 +409,7 @@ a:-webkit-any-link:focus { /* FORMS */ .form-control--transparent { - color: var(--text); + color: var(--text-hover); } .form-control--search { @@ -370,7 +424,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 +444,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 +460,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,11 +468,26 @@ 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); diff --git a/CSS/themes/adguard/aquamarine.css b/CSS/themes/adguard/aquamarine.css index 795d85ed..03da1f55 100644 --- a/CSS/themes/adguard/aquamarine.css +++ b/CSS/themes/adguard/aquamarine.css @@ -19,10 +19,16 @@ --button-color: #009688; --button-color-hover: #12afa0; - --accent-color: #009688; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 0, 150, 136; --accent-color-hover: #12afa0; - --tooltip-bg: #009688; - --tooltip-link-color: #f1c40f; - --text: #eee; + --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 diff --git a/CSS/themes/adguard/dark.css b/CSS/themes/adguard/dark.css index dcc0a9e0..c112d559 100644 --- a/CSS/themes/adguard/dark.css +++ b/CSS/themes/adguard/dark.css @@ -19,10 +19,16 @@ --button-color: hsla(0,0%,100%,.15); --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 100, 100, 100; --accent-color-hover: rgba(255, 255, 255, 0.45); - --tooltip-bg: #1f1f1f; - --tooltip-link-color: #f1c40f; - --text: #eee; + --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 diff --git a/CSS/themes/adguard/dracula.css b/CSS/themes/adguard/dracula.css new file mode 100644 index 00000000..e05fb05a --- /dev/null +++ b/CSS/themes/adguard/dracula.css @@ -0,0 +1,34 @@ + +/* 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 */ + +/* ADGUARD DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/adguard/adguard-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; + --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 diff --git a/CSS/themes/adguard/hotline.css b/CSS/themes/adguard/hotline.css index 336a802f..6962a56a 100644 --- a/CSS/themes/adguard/hotline.css +++ b/CSS/themes/adguard/hotline.css @@ -19,10 +19,16 @@ --button-color: hsla(0,0%,100%,.15); --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 244, 67, 54; --accent-color-hover: #0b3161; - --tooltip-bg: #F44336; - --tooltip-link-color: #0b3161; - --text: #eee; + --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 diff --git a/CSS/themes/adguard/organizr-dark.css b/CSS/themes/adguard/organizr-dark.css index 42b676de..b28a6001 100644 --- a/CSS/themes/adguard/organizr-dark.css +++ b/CSS/themes/adguard/organizr-dark.css @@ -19,10 +19,16 @@ --button-color: #2cabe3; --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 44, 171, 227; --accent-color-hover: white; - --tooltip-bg: #1b1b1b; - --tooltip-link-color: #2cabe3; - --text: #eee; + --link-color: #2cabe3; + --link-color-hover: #fff; + --label-text-color: #fff; + + --text:#96a2b4; --text-hover: #fff; - } \ No newline at end of file + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/adguard/plex.css b/CSS/themes/adguard/plex.css index e60f30fc..98c87f88 100644 --- a/CSS/themes/adguard/plex.css +++ b/CSS/themes/adguard/plex.css @@ -19,10 +19,16 @@ --button-color: #cc7b19; --button-color-hover: #e59029; - --accent-color: #e5a00d; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 229, 160, 13; --accent-color-hover: #ffc107; - --tooltip-bg: #1f1f1f; - --tooltip-link-color: #e5a00d; - --text: #eee; + --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 diff --git a/CSS/themes/adguard/space-gray.css b/CSS/themes/adguard/space-gray.css index 96c41a05..e158a3e9 100644 --- a/CSS/themes/adguard/space-gray.css +++ b/CSS/themes/adguard/space-gray.css @@ -14,15 +14,21 @@ /* ADGUARD SPACE GRAY THEME */ @import url(https://theme-park.dev/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; + --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; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 129, 166, 183; --accent-color-hover: #81a6b7; - --tooltip-bg: #607D8B; - --tooltip-link-color: #f1c40f; + --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