Files
AdGuardHome/client/src/components/Logs/Cells/IconTooltip.css
Ildar Kamalov 0eba31ca03 Pull request: 4815 fix table view of the query log modal
Updates #4815

Squashed commit of the following:

commit a547c546a2b3cdbfb6988c910d8a970e0189ae5a
Merge: 3c1e745d f5602d9c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 17:40:38 2022 +0300

    Merge branch 'master' into 4815-tablet-view-fix

commit 3c1e745dc2e34a62be8264ad003b5e6c155bb241
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 16:50:10 2022 +0300

    fix mobile view

commit a1d0b36473982854eecf1d96cf5a7033059e7720
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 17:57:14 2022 +0300

    client: fix styles

commit f34f928e1dbeef5ed37a0de3515be8d12f2241f6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 16:59:23 2022 +0300

    client: fix table view of query log modal
2022-10-10 17:49:19 +03:00

141 lines
2.7 KiB
CSS

.tooltip-custom__container {
padding: 1rem 1.5rem 1.25rem 1.5rem;
font-size: 16px !important;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px !important;
pointer-events: auto !important;
background-color: var(--white);
z-index: 102;
overflow-y: auto;
max-height: 100%;
}
.white-space--nowrap {
white-space: nowrap !important;
}
.overflow-break {
white-space: normal !important;
overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
.overflow-break-mobile {
white-space: normal !important;
overflow-wrap: break-word;
}
}
.grid {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-row-gap: 0.5rem;
grid-column-gap: 1rem;
}
.grid--limited {
grid-template-columns: repeat(2, minmax(0, min-content));
}
.grid--gap-bg {
grid-column-gap: 1.5rem;
}
.grid--title {
font-weight: 600;
}
.grid--title:not(:first-child) {
padding-top: 1rem;
}
@media (max-width: 1024px) {
.grid .title--border {
margin-bottom: 4px;
font-weight: 600;
}
.grid .key-colon {
margin-right: 4px;
color: var(--gray-8);
}
.grid__row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 2px;
font-size: 14px;
word-break: break-all;
overflow: hidden;
}
.grid__row .filteringRules__filter,
.grid__row .filteringRules {
margin-bottom: 0;
}
}
@media (max-width: 767.98px) {
.grid {
grid-template-columns: 35% 55%;
}
.grid * {
grid-column: 1 / -1;
}
.grid > :nth-child(even) {
margin: -0.5rem 0 0;
}
.grid > .key__time_table_header, .grid > .key__data, .grid > .key__encryption_status, .grid > .key__elapsed {
grid-column: 1 / span 1;
}
.grid > .value__time_table_header, .grid > .value__data, .grid > .value__encryption_status, .grid > .value__elapsed {
grid-column: 2 / span 1;
margin: 0 !important;
}
}
.grid .key-colon:nth-child(odd)::after {
content: ":";
}
.grid__one-row {
grid-template-columns: 15rem;
}
.grid__flow-column {
grid-auto-flow: column;
}
.grid-content > * {
justify-content: space-between !important;
width: 100% !important;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.title--border {
padding-top: 1rem;
}
.title--border:before {
content: "";
position: absolute;
left: 0;
border-top: 0.5px solid var(--gray-d8) !important;
width: 100%;
margin-top: -0.5rem;
}
.icon-cross {
position: absolute;
right: 0.5rem;
top: 0.5rem;
}