adguard client and mobile fixes, closes #96

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 {
+body *::-webkit-scrollbar-thumb {
-        width: 14px;
+    background: hsla(0,0%,100%,.2);
-    }
+}
-    ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar {
-        min-height: 50px;
+    width: 14px;
-        border: 3px solid transparent;
+}
-        border-radius: 8px;
+
-        background-color: hsla(0,0%,100%,.2);
+::-webkit-scrollbar-thumb {
-        background-clip: padding-box;
+    min-height: 50px;
-    }
+    border: 3px solid transparent;
-    ::-webkit-scrollbar-track {
+    border-radius: 8px;
-        background-color: transparent;
+    background-color: hsla(0, 0%, 100%, .2);
-    }
+    background-clip: padding-box;
-    ::-webkit-scrollbar-thumb:hover {
+}
-        min-height: 50px;
+
-        border: 3px solid transparent;
+::-webkit-scrollbar-track {
-        border-radius: 8px;
+    background-color: transparent;
-        background-color: hsla(0,0%,100%,.5);
+}
-        background-clip: padding-box;
+
-    }   
+::-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;
@@ -146,66 +170,82 @@ a:-webkit-any-link:focus {
 }
 
 /* MAIN PAGE */
-.mobile-menu {
+.header__row .mobile-menu {
     background-color: transparent;
 }
-    /* BUTTONS */
+
-    .container .btn-outline-primary {
+/* BUTTONS */
-        color: var(--text);
+.container .btn-outline-primary {
-        background-color: var(--button-color);
+    color: var(--text);
-        background-image: none;
+    background-color: var(--button-color);
-        border-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);
+.container .btn-outline-primary:hover {
-        border-color: var(--button-color-hover); 
+    color: var(--text-hover);
-    }
+    background-color: var(--button-color-hover);
-    .tooltip-container {
+    border-color: var(--button-color-hover);
-        background: var(--tooltip-bg);
+}
-      }
+
-    /* CARDS*/
+.tooltip-container {
-    .card {
+    background: var(--tooltip-bg);
-        background-color: rgb(255 255 255 / 8%);
+}
-        border: 1px solid rgba(255, 255, 255, 0.1);
+
-        color: var(--text);
+/* CARDS*/
-    }
+.card {
-    .tooltip-custom__container {
+    background-color: rgb(255 255 255 / 8%);
-        background: var(--tooltip-bg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
-    }
+    color: var(--text);
-    .tooltip-custom__content-link {
+}
-        color: var(--tooltip-link-color);
+
-    }
+.tooltip-custom__container {
-    .card-wrap, .card-title-stats {
+    background: var(--tooltip-bg);
-        color: inherit;
+}
-    }
+
-    .card-title-stats a {
+.tooltip-custom__content-link {
-        text-decoration: underline;
+    color: var(--tooltip-link-color);
-    }
+}
-    .card-title-stats a:hover {
+
-        text-decoration: underline;
+.card-wrap,
-        color: var(--accent-color-hover);
+.card-title-stats {
-    }
+    color: inherit;
-    .card .icon--lightgray {
+}
-        color: var(--text);
+
-    }
+.card-title-stats a {
-    .card .logs__text {
+    text-decoration: underline;
-        color: var(--text);
+}
-    }
+
-    .card .button__action {
+.card-title-stats a:hover {
-        background-color:transparent;
+    text-decoration: underline;
-    }
+    color: var(--accent-color-hover);
-    .card .btn-outline-danger {
+}
-        color: #F44336;
+
-        background-color: transparent;
+.card .icon--lightgray {
-        background-image: none;
+    color: var(--text);
-        border-color: #F44336;
+}
-    }
+
-    .btn-outline-danger:hover {
+.card .logs__text {
-        color: #fff;
+    color: var(--text);
-        background-color: #F44336;
+}
-        border-color: #F44336;
+
-    }
+.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 {
+/* LOGS */
-        background-color: rgb(255 255 255 / 8%);
+.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)
+
-    }
+.logs__text,
-    .rt-tr-group.red {
+.logs__row .list-unstyled li,
-        background-color: rgb(244 67 54 / 30%);
+.detailed-info,
-    }
+.icon--lightgray,
-    .rt-tr-group.blue {
+.icon--gray,
-        background-color: rgb(54 146 244 / 30%);
+.loading__text {
-    }
+    color: var(--text)
-    .ReactTable .rt-noData {
+}
-        background: transparent;
+
-    }
+.rt-tr-group.red {
-    .ReactTable .-loading, .ReactTable .-loading > div {
+    background-color: rgb(244 67 54 / 30%);
-        background: rgba(255, 255, 255, 0.5);
+}
-    }
+
-    .loading:before {
+.rt-tr-group.blue {
-        background-color: transparent;
+    background-color: rgb(54 146 244 / 30%);
-    }
+}
-    .custom-select:focus {
+
-        -webkit-box-shadow: none;
+.ReactTable .rt-noData {
-        box-shadow: none;
+    background: transparent;
-    }
+}
-    /* FORMS */
+
-    .form-control--transparent {
+.ReactTable .-loading,
-        color: var(--text);
+.ReactTable .-loading>div {
-    }
+    background: rgba(255, 255, 255, 0.5);
-     .form-control--search {
+}
-        outline: none;
+
-    }
+.loading:before {
-    .form-control:focus {
+    background-color: transparent;
-        border-color: transparent;
+}
-       -webkit-box-shadow: none;
+
-        box-shadow: none;
+.custom-select:focus {
-        background: #ffffff !important;
+    -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  {
+    .mobile-menu {
-    background: var(--main-bg-color);
+        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);}
+::placeholder {
-:-moz-placeholder {color: var(--text);}
+    color: var(--text);
-:-ms-input-placeholder {color: var(--text);}
+}
-::-webkit-input-placeholder {color: var(--text) ;}
+
+:-moz-placeholder {
+    color: var(--text);
+}
+
+:-ms-input-placeholder {
+    color: var(--text);
+}
+
+::-webkit-input-placeholder {
+    color: var(--text);
+}