mirror of
https://github.com/gilbN/theme.park.git
synced 2024-10-27 06:12:54 +01:00
adguard 🧛
This commit is contained in:
parent
92b8587e70
commit
5fee0bae5c
@ -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);
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
34
CSS/themes/adguard/dracula.css
Normal file
34
CSS/themes/adguard/dracula.css
Normal file
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
--text-muted: #999;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user