diff --git a/CSS/themes/adguard/adguard-base.css b/CSS/themes/adguard/adguard-base.css index 390d75ed..e14230f6 100644 --- a/CSS/themes/adguard/adguard-base.css +++ b/CSS/themes/adguard/adguard-base.css @@ -14,47 +14,58 @@ body { background: var(--main-bg-color); color: var(--text) !important; } - /* Scrollbar */ - @media only screen and (min-width: 768px) { + +/* Scrollbar */ +@media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } + body { overflow-y: auto; height: 100%; background: var(--main-bg-color) } } - ::-webkit-scrollbar { - width: 14px; - } - ::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.2); - background-clip: padding-box; - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-thumb:hover { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background-color: hsla(0,0%,100%,.5); - background-clip: padding-box; - } +body *::-webkit-scrollbar-thumb { + background: hsla(0,0%,100%,.2); +} +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + /* TEXT */ a { color: var(--text) } + a:hover { color: var(--accent-color-hover); } + a:-webkit-any-link:focus { outline: none; } @@ -79,9 +90,11 @@ a:-webkit-any-link:focus { .login .btn-link { color: var(--text); } + .login .btn-link:hover { color: var(--text-hover); } + .form__message--error { color: #F44336; } @@ -91,47 +104,58 @@ a:-webkit-any-link:focus { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } + .header-brand-img { filter: invert(1); } + .header .btn-outline-secondary { color: var(--text); background: var(--button-color); border-color: var(--button-color); } + .header .btn-outline-secondary:hover { color: var(--text-hover); background-color: var(--button-color-hover); } + .nav-tabs .nav-link.active { border-color: var(--accent-color); color: var(--accent-color); background: transparent; } + .header .nav-tabs .nav-link.active:hover { border-color: var(--accent-color-hover) !important; color: var(--accent-color-hover) !important; } + .header a:not([href]):not([tabindex]) { color: var(--text); text-decoration: none; } + .header .nav-tabs { color: var(--text); } + .header .nav-tabs .nav-link:hover:not(.disabled) { border-color: var(--text-hover); color: var(--text-hover); } + /* FOOTER */ .footer { background: rgba(0, 0, 0, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.03); color: var(--text); } + .footer a:not(.btn) { color: var(--text); } + .footer .btn-outline-primary { color: var(--button-color); background-color: transparent; @@ -142,70 +166,86 @@ a:-webkit-any-link:focus { .footer .btn-outline-primary:hover { color: var(--text); background-color: var(--button-color-hover); - border-color: var(--button-color-hover); + border-color: var(--button-color-hover); } /* MAIN PAGE */ -.mobile-menu { +.header__row .mobile-menu { background-color: transparent; } - /* BUTTONS */ - .container .btn-outline-primary { - color: var(--text); - background-color: var(--button-color); - background-image: none; - border-color: var(--button-color); - } - .container .btn-outline-primary:hover { - color: var(--text-hover); - background-color: var(--button-color-hover); - border-color: var(--button-color-hover); - } - .tooltip-container { - background: var(--tooltip-bg); - } - /* CARDS*/ - .card { - background-color: rgb(255 255 255 / 8%); - border: 1px solid rgba(255, 255, 255, 0.1); - color: var(--text); - } - .tooltip-custom__container { - background: var(--tooltip-bg); - } - .tooltip-custom__content-link { - color: var(--tooltip-link-color); - } - .card-wrap, .card-title-stats { - color: inherit; - } - .card-title-stats a { - text-decoration: underline; - } - .card-title-stats a:hover { - text-decoration: underline; - color: var(--accent-color-hover); - } - .card .icon--lightgray { - color: var(--text); - } - .card .logs__text { - color: var(--text); - } - .card .button__action { - background-color:transparent; - } - .card .btn-outline-danger { - color: #F44336; - background-color: transparent; - background-image: none; - border-color: #F44336; - } - .btn-outline-danger:hover { - color: #fff; - background-color: #F44336; - border-color: #F44336; - } + +/* BUTTONS */ +.container .btn-outline-primary { + color: var(--text); + background-color: var(--button-color); + background-image: none; + border-color: var(--button-color); +} + +.container .btn-outline-primary:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.tooltip-container { + background: var(--tooltip-bg); +} + +/* CARDS*/ +.card { + background-color: rgb(255 255 255 / 8%); + border: 1px solid rgba(255, 255, 255, 0.1); + color: var(--text); +} + +.tooltip-custom__container { + background: var(--tooltip-bg); +} + +.tooltip-custom__content-link { + color: var(--tooltip-link-color); +} + +.card-wrap, +.card-title-stats { + color: inherit; +} + +.card-title-stats a { + text-decoration: underline; +} + +.card-title-stats a:hover { + text-decoration: underline; + color: var(--accent-color-hover); +} + +.card .icon--lightgray { + color: var(--text); +} + +.card .logs__text { + color: var(--text); +} + +.card .button__action { + background-color: transparent; +} + +.card .btn-outline-danger { + color: #F44336; + background-color: transparent; + background-image: none; + border-color: #F44336; +} + +.btn-outline-danger:hover { + color: #fff; + background-color: #F44336; + border-color: #F44336; +} + /* DROPDOWNS */ .dropdown-menu { color: var(--text); @@ -214,88 +254,141 @@ a:-webkit-any-link:focus { border: 1px solid rgba(0, 40, 100, 0.12); border-radius: 3px; } + .dropdown-item { color: var(--text); } -.dropdown-item:hover, .dropdown-item:focus { + +.dropdown-item:hover, +.dropdown-item:focus { color: var(--text-hover); text-decoration: none; background-color: rgb(255 255 255 / 0.08); } - +.select__menu { + background: var(--modal-bg-color) !important; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5); +} +.select__option:hover { + background: rgba(255, 255, 255, .08) !important; +} +.select__option { + background: rgba(0, 0, 0, 0) !important; + border-bottom: solid rgba(255, 255, 255, .1) 1px; +} +.select__multi-value__remove { + color: black; +} +.basic-multi-select .select__control--is-focused, .basic-multi-select .select__control--is-focused:hover { + border-color: transparent !important; +} /* SETTINGS */ -.checkbox__label-subtitle, .form__desc, .page-subtitle, .card-title small, .card-subtitle { +.checkbox__label-subtitle, +.form__desc, +.page-subtitle, +.card-title small, +.card-subtitle { color: var(--text); } -.dropdown-item.active, .dropdown-item:active { + +.dropdown-item.active, +.dropdown-item:active { background-color: rgb(0 0 0 / 25%); } + .service__icon { color: #eee; } - /* LOGS */ - .logs__table { - background-color: rgb(255 255 255 / 8%); - } - .logs__text, .logs__row .list-unstyled li, .detailed-info, .icon--lightgray, .icon--gray, .loading__text { - color: var(--text) - } - .rt-tr-group.red { - background-color: rgb(244 67 54 / 30%); - } - .rt-tr-group.blue { - background-color: rgb(54 146 244 / 30%); - } - .ReactTable .rt-noData { - background: transparent; - } - .ReactTable .-loading, .ReactTable .-loading > div { - background: rgba(255, 255, 255, 0.5); - } - .loading:before { - background-color: transparent; - } - .custom-select:focus { - -webkit-box-shadow: none; - box-shadow: none; - } - /* FORMS */ - .form-control--transparent { - color: var(--text); - } - .form-control--search { - outline: none; - } - .form-control:focus { - border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - background: #ffffff !important; - } + +/* LOGS */ +.logs__table { + background-color: rgb(255 255 255 / 8%); +} + +.logs__text, +.logs__row .list-unstyled li, +.detailed-info, +.icon--lightgray, +.icon--gray, +.loading__text { + color: var(--text) +} + +.rt-tr-group.red { + background-color: rgb(244 67 54 / 30%); +} + +.rt-tr-group.blue { + background-color: rgb(54 146 244 / 30%); +} + +.ReactTable .rt-noData { + background: transparent; +} + +.ReactTable .-loading, +.ReactTable .-loading>div { + background: rgba(255, 255, 255, 0.5); +} + +.loading:before { + background-color: transparent; +} + +.custom-select:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* FORMS */ +.form-control--transparent { + color: var(--text); +} + +.form-control--search { + outline: none; +} + +.form-control:focus { + border-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + background: #ffffff !important; +} + .icon--selected { background-color: rgb(255 255 255 / 15%); border: solid 1px transparent; } -.tab__control, .tab__control--active { + +.tab__control, +.tab__control--active { color: var(--text); } + /* BUTTONS */ .btn-outline-secondary { color: #c9c9c9; border-color: #c9c9c9; } -.btn-success,.btn-success.disabled, .btn-success:disabled { + +.btn-success, +.btn-success.disabled, +.btn-success:disabled { background-color: var(--button-color); border-color: var(--button-color); color: var(--text); } + .btn-success:hover { color: var(--text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } -.btn-success:focus, .btn-success.focus { + +.btn-success:focus, +.btn-success.focus { -webkit-box-shadow: none; box-shadow: none; } @@ -307,6 +400,7 @@ a:-webkit-any-link:focus { -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); } + .btn-secondary:hover { color: var(--text-hover); background-color: var(--button-color-hover); @@ -317,18 +411,50 @@ a:-webkit-any-link:focus { .modal-content { background: var(--modal-bg-color); } + .ReactModal__Overlay--after-open { background-color: rgb(0 0 0 / 0.7) !important; } + /* MOBILE */ @media (max-width: 767px) { -.mobile-menu { - background: var(--main-bg-color); + .mobile-menu { + background: #1b1b1b !important; + } + + .dropdown-menu { + background: #1f1f1f !important; + } + + .ReactModal__Content { + background: var(--modal-bg-color) !important; + border: 1px solid transparent !important; + } } + +@media (max-width: 991px) { + .mobile-menu { + background: #1b1b1b !important; + } + + .dropdown-menu { + background: #1f1f1f !important; + } } /* PLACEHOLDER TEXT */ -::placeholder {color: var(--text);} -:-moz-placeholder {color: var(--text);} -:-ms-input-placeholder {color: var(--text);} -::-webkit-input-placeholder {color: var(--text) ;} \ No newline at end of file +::placeholder { + color: var(--text); +} + +:-moz-placeholder { + color: var(--text); +} + +:-ms-input-placeholder { + color: var(--text); +} + +::-webkit-input-placeholder { + color: var(--text); +} \ No newline at end of file