badguardhome/client/src/components/Logs/Cells/Tooltip.css
Andrey Meshkov aa7b3c33d5 Fix #1810
- client: Fix query log bugs

Squashed commit of the following:

commit 188bbad32a2af8a1867fc3ef91d81cda6aa94853
Merge: 15db9e9c ec6e0bea
Author: Andrey Meshkov <am@adguard.com>
Date:   Thu Jun 18 22:43:11 2020 +0300

    Merge branch 'master' into fix/1810

commit 15db9e9c1d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 18 19:01:10 2020 +0300

    Open tooltip on hover, show scroll on overflow y

commit 19c013378d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 18 17:17:46 2020 +0300

    Replace tooltip component

commit 7e7103dc08
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 18 14:21:54 2020 +0300

    -client: Fix query log bugs
2020-06-18 22:53:02 +03:00

111 lines
2.1 KiB
CSS

.tooltip__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: scroll;
max-height: 100%;
}
.white-space--nowrap {
white-space: nowrap !important;
}
.overflow-break {
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: bold;
}
.grid--title:not(:first-child) {
padding-top: 1rem;
}
@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, .grid .title--border {
font-weight: bold;
}
}
.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: 2rem;
}
.title--border:before {
content: '';
position: absolute;
left: 0;
border-top: 0.5px solid var(--gray-d8) !important;
width: 100%;
margin-top: -1rem;
}
.icon-cross {
position: absolute;
right: 0.5rem;
top: 0.5rem;
}