1140 lines
21 KiB
CSS
1140 lines
21 KiB
CSS
.databi-header-left {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.view-mode-switch {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
gap: 3px;
|
|
padding: 3px;
|
|
border: 1px solid rgba(61, 141, 190, 0.42);
|
|
border-radius: 8px;
|
|
background: rgba(7, 28, 47, 0.72);
|
|
}
|
|
|
|
.view-mode-switch button {
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #9eb7ce;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.view-mode-switch button:hover,
|
|
.view-mode-switch button.is-active {
|
|
background: rgba(37, 216, 245, 0.18);
|
|
color: #e9f6ff;
|
|
box-shadow: inset 0 0 0 1px rgba(37, 216, 245, 0.38);
|
|
}
|
|
|
|
.databi-screen--report {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.databi-shell--report {
|
|
min-width: 1180px;
|
|
min-height: 100vh;
|
|
padding: 0 24px 28px 0;
|
|
background: #f5f7fb;
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .databi-report-sidebar {
|
|
border-right-color: #dfe8f2;
|
|
background: #ffffff;
|
|
box-shadow: 8px 0 26px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.databi-shell--report .report-sidebar-brand {
|
|
border-color: #b9dcf4;
|
|
background: #eef8ff;
|
|
box-shadow: inset 0 0 0 1px rgba(22, 136, 217, 0.04);
|
|
}
|
|
|
|
.databi-shell--report .report-sidebar-brand svg {
|
|
color: #1688d9;
|
|
filter: none;
|
|
}
|
|
|
|
.databi-shell--report .report-sidebar-item {
|
|
color: #5f6f86;
|
|
}
|
|
|
|
.databi-shell--report .report-sidebar-item:hover,
|
|
.databi-shell--report .report-sidebar-item.is-active {
|
|
border-color: #d8e5f0;
|
|
background: #eef7ff;
|
|
color: #126fb2;
|
|
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.databi-shell--report .report-sidebar-item.is-active:hover {
|
|
border-color: #1688d9;
|
|
background: #e9f5ff;
|
|
}
|
|
|
|
.databi-shell--report .databi-header {
|
|
height: auto;
|
|
min-height: 72px;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
row-gap: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #e4ebf3;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.databi-shell--report .header-controls {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.databi-shell--report .brand-emblem {
|
|
border-color: #b9dcf4;
|
|
background: #eef8ff;
|
|
box-shadow: inset 0 0 0 1px rgba(22, 136, 217, 0.04);
|
|
}
|
|
|
|
.databi-shell--report .brand-emblem svg {
|
|
color: #1688d9;
|
|
filter: none;
|
|
}
|
|
|
|
.databi-shell--report .brand-lockup h1 {
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .view-mode-switch,
|
|
.databi-shell--report .screen-switch,
|
|
.databi-shell--report .game-switch {
|
|
border-color: #d8e5f0;
|
|
background: #eef4fa;
|
|
}
|
|
|
|
.databi-shell--report .view-mode-switch button,
|
|
.databi-shell--report .screen-switch button,
|
|
.databi-shell--report .game-switch button {
|
|
color: #5f6f86;
|
|
}
|
|
|
|
.databi-shell--report .view-mode-switch button:hover,
|
|
.databi-shell--report .view-mode-switch button.is-active,
|
|
.databi-shell--report .screen-switch button:hover,
|
|
.databi-shell--report .screen-switch button.is-active,
|
|
.databi-shell--report .game-switch button:hover,
|
|
.databi-shell--report .game-switch button.is-active {
|
|
background: #ffffff;
|
|
color: #126fb2;
|
|
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.databi-shell--report .filter-trigger,
|
|
.databi-shell--report .date-range-trigger {
|
|
border-color: #d8e5f0;
|
|
background: #ffffff;
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .filter-trigger:hover,
|
|
.databi-shell--report .filter-trigger[aria-expanded="true"],
|
|
.databi-shell--report .date-range-trigger:hover,
|
|
.databi-shell--report .date-range-trigger[aria-expanded="true"] {
|
|
border-color: #1688d9;
|
|
box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1);
|
|
}
|
|
|
|
.databi-shell--report .filter-label,
|
|
.databi-shell--report .date-range-label {
|
|
background: #ffffff;
|
|
color: #718198;
|
|
}
|
|
|
|
.databi-shell--report .filter-trigger:hover .filter-label,
|
|
.databi-shell--report .filter-trigger[aria-expanded="true"] .filter-label,
|
|
.databi-shell--report .date-range-trigger:hover .date-range-label,
|
|
.databi-shell--report .date-range-trigger[aria-expanded="true"] .date-range-label,
|
|
.databi-shell--report .control-glyph,
|
|
.databi-shell--report .filter-label .filter-icon {
|
|
color: #1688d9;
|
|
}
|
|
|
|
.databi-shell--report .filter-value,
|
|
.databi-shell--report .date-range-values b {
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .filter-icon,
|
|
.databi-shell--report .filter-chevron,
|
|
.databi-shell--report .date-range-chevron,
|
|
.databi-shell--report .date-range-label svg {
|
|
color: #718198;
|
|
}
|
|
|
|
.databi-shell--report .date-range-values i {
|
|
color: #8c9aab;
|
|
}
|
|
|
|
.databi-shell--report .filter-popover,
|
|
.databi-shell--report .date-time-popover {
|
|
border-color: #d8e5f0;
|
|
background: #ffffff;
|
|
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
|
|
}
|
|
|
|
.databi-shell--report .filter-popover button,
|
|
.databi-shell--report .date-time-shortcuts button,
|
|
.databi-shell--report .date-time-fields button,
|
|
.databi-shell--report .calendar-toolbar button,
|
|
.databi-shell--report .calendar-day,
|
|
.databi-shell--report .time-column button,
|
|
.databi-shell--report .date-time-footer button {
|
|
color: #34445a;
|
|
}
|
|
|
|
.databi-shell--report .filter-popover button:hover,
|
|
.databi-shell--report .filter-popover button.is-active,
|
|
.databi-shell--report .date-time-shortcuts button:hover,
|
|
.databi-shell--report .date-time-shortcuts button.is-active,
|
|
.databi-shell--report .calendar-day:hover,
|
|
.databi-shell--report .time-column button:hover,
|
|
.databi-shell--report .time-column button.is-active {
|
|
background: #eef7ff;
|
|
color: #126fb2;
|
|
}
|
|
|
|
.databi-shell--report .filter-empty,
|
|
.databi-shell--report .filter-search span,
|
|
.databi-shell--report .date-time-fields span,
|
|
.databi-shell--report .date-time-footer span,
|
|
.databi-shell--report .time-column > span,
|
|
.databi-shell--report .calendar-weekday {
|
|
color: #718198;
|
|
}
|
|
|
|
.databi-shell--report .filter-search input,
|
|
.databi-shell--report .date-time-fields button {
|
|
border-color: #d8e5f0;
|
|
background: #ffffff;
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .filter-search input:focus,
|
|
.databi-shell--report .date-time-fields button.is-active {
|
|
border-color: #1688d9;
|
|
box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1);
|
|
}
|
|
|
|
.databi-shell--report .calendar-toolbar,
|
|
.databi-shell--report .calendar-pane,
|
|
.databi-shell--report .date-time-fields,
|
|
.databi-shell--report .date-time-footer,
|
|
.databi-shell--report .time-column,
|
|
.databi-shell--report .time-column > span {
|
|
border-color: #e4ebf3;
|
|
}
|
|
|
|
.databi-shell--report .calendar-toolbar strong,
|
|
.databi-shell--report .date-time-fields b {
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .calendar-day.is-muted {
|
|
color: #b5c0cd;
|
|
}
|
|
|
|
.databi-shell--report .calendar-day.is-start,
|
|
.databi-shell--report .calendar-day.is-end,
|
|
.databi-shell--report .calendar-day.is-active {
|
|
background: #1688d9;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.databi-shell--report .calendar-day.is-between {
|
|
background: #e9f5ff;
|
|
}
|
|
|
|
.databi-shell--report .date-time-footer button {
|
|
border-color: #1688d9;
|
|
background: #1688d9;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.databi-report {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.databi-empty-report-section {
|
|
min-height: calc(100vh - 28px);
|
|
}
|
|
|
|
.report-metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.report-metric-card {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 142px;
|
|
align-content: start;
|
|
gap: 8px;
|
|
padding: 16px 18px;
|
|
border: 1px solid #dfe8f2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.report-metric-card--clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.report-metric-card--clickable:hover,
|
|
.report-metric-card--clickable:focus-visible {
|
|
border-color: #1688d9;
|
|
box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.08), 0 8px 20px rgba(15, 23, 42, 0.06);
|
|
outline: none;
|
|
}
|
|
|
|
.report-metric-head {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.report-metric-head > span:first-child {
|
|
overflow: hidden;
|
|
color: #53647b;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-metric-card > strong {
|
|
overflow: hidden;
|
|
color: #172033;
|
|
font-size: 28px;
|
|
font-weight: 780;
|
|
line-height: 1.14;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-metric-primary-label {
|
|
color: #7b8a9d;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.report-metric-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.report-metric-detail {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
}
|
|
|
|
.report-metric-detail small {
|
|
overflow: hidden;
|
|
color: #8a98aa;
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-metric-detail b {
|
|
overflow: hidden;
|
|
color: #243044;
|
|
font-size: 14px;
|
|
font-weight: 760;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-workbench {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border: 1px solid #dfe8f2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.report-tabs {
|
|
display: flex;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
padding: 10px 12px 0;
|
|
border-bottom: 1px solid #e4ebf3;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.report-tabs button {
|
|
height: 38px;
|
|
flex: 0 0 auto;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: #65748a;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-tabs button:hover,
|
|
.report-tabs button.is-active {
|
|
border-bottom-color: #1688d9;
|
|
color: #126fb2;
|
|
}
|
|
|
|
.report-tab-panel {
|
|
min-width: 0;
|
|
}
|
|
|
|
.report-panel {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.report-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.report-panel-head h2 {
|
|
margin: 0;
|
|
color: #172033;
|
|
font-size: 18px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.report-panel-action {
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border: 1px solid #c7d7e7;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
color: #126fb2;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-panel-action:hover {
|
|
border-color: #1688d9;
|
|
background: #eef7ff;
|
|
}
|
|
|
|
.report-panel-action:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.report-metric-table-block {
|
|
min-width: 0;
|
|
}
|
|
|
|
.report-table-wrap {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border: 1px solid #e4ebf3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.report-table {
|
|
width: 100%;
|
|
min-width: 860px;
|
|
border-collapse: collapse;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.report-table--wide {
|
|
min-width: 2860px;
|
|
}
|
|
|
|
.report-table th,
|
|
.report-table td {
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
color: #34445a;
|
|
font-size: 13px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.report-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #f8fafc;
|
|
color: #65748a;
|
|
font-size: 12px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-table th:first-child,
|
|
.report-table td:first-child {
|
|
width: 48px;
|
|
color: #8a98aa;
|
|
text-align: center;
|
|
}
|
|
|
|
.report-table td.is-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.report-table th.is-sticky-left,
|
|
.report-table td.is-sticky-left {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 2;
|
|
box-shadow: 1px 0 0 #dbe7f2, 16px 0 18px -20px rgba(27, 39, 56, 0.48);
|
|
}
|
|
|
|
.report-table th.is-sticky-left {
|
|
z-index: 4;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.report-table td.is-sticky-left {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.report-table tbody tr:hover td {
|
|
background: #f7fbff;
|
|
}
|
|
|
|
.report-table tbody tr:hover td.is-sticky-left {
|
|
background: #f7fbff;
|
|
}
|
|
|
|
.report-row-total td {
|
|
background: #eef7ff;
|
|
color: #172033;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.report-row-total td.is-sticky-left {
|
|
background: #eef7ff;
|
|
}
|
|
|
|
.report-row-date-total td {
|
|
background: #f7fafc;
|
|
color: #243044;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-row-date-total td.is-sticky-left {
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.report-row-expandable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.report-row-expandable:focus-visible td {
|
|
background: #e9f5ff;
|
|
outline: 2px solid #1688d9;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.report-row-total:hover td,
|
|
.report-row-date-total:hover td {
|
|
background: #e9f5ff;
|
|
}
|
|
|
|
.report-row-total:hover td.is-sticky-left,
|
|
.report-row-date-total:hover td.is-sticky-left {
|
|
background: #e9f5ff;
|
|
}
|
|
|
|
.report-sort-button {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 38px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.report-sort-button--left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.report-sort-button:hover,
|
|
.report-sort-button.is-active {
|
|
color: #126fb2;
|
|
}
|
|
|
|
.report-sort-button i {
|
|
color: #9aa7b8;
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.report-link-button {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #126fb2;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-weight: 780;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.report-link-button:hover {
|
|
color: #075d99;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.report-link-button:focus-visible {
|
|
border-radius: 4px;
|
|
outline: 2px solid #1688d9;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.report-link-button--left {
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
}
|
|
|
|
.report-country-cell {
|
|
display: inline-flex;
|
|
max-width: 220px;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.report-country-cell i {
|
|
flex: 0 0 auto;
|
|
font-style: normal;
|
|
}
|
|
|
|
.report-country-cell span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.report-date-cell {
|
|
display: inline-flex;
|
|
max-width: 180px;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #53647b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.report-date-cell > span:not(.report-expand-caret) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.report-date-cell small {
|
|
color: #8a98aa;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.report-expand-caret {
|
|
display: inline-flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7b8a9d;
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.report-expand-caret.is-open {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.report-row-expanded-detail > td:first-child {
|
|
width: auto;
|
|
padding: 10px 12px 14px 74px;
|
|
background: #fbfdff;
|
|
text-align: left;
|
|
}
|
|
|
|
.report-row-expanded-detail:hover > td {
|
|
background: #fbfdff;
|
|
}
|
|
|
|
.report-subtable-wrap {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border: 1px solid #e2ebf5;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.report-subtable {
|
|
min-width: 2620px;
|
|
}
|
|
|
|
.report-subtable th {
|
|
position: static;
|
|
background: #f8fbff;
|
|
}
|
|
|
|
.report-subtable th:first-child,
|
|
.report-subtable td:first-child {
|
|
width: 48px;
|
|
}
|
|
|
|
.report-subtable-empty {
|
|
display: grid;
|
|
min-height: 72px;
|
|
place-items: center;
|
|
border: 1px dashed #d8e5f0;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
color: #8a98aa;
|
|
}
|
|
|
|
.report-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 28px;
|
|
background: rgba(15, 23, 42, 0.28);
|
|
}
|
|
|
|
.report-modal {
|
|
display: grid;
|
|
width: min(960px, 100%);
|
|
max-height: min(760px, calc(100vh - 56px));
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
overflow: hidden;
|
|
border: 1px solid #d8e5f0;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 20px 56px rgba(15, 23, 42, 0.22);
|
|
}
|
|
|
|
.report-modal-head {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
}
|
|
|
|
.report-modal-head h2 {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: #172033;
|
|
font-size: 16px;
|
|
font-weight: 780;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-modal-close,
|
|
.report-pagination button {
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid #c7d7e7;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
color: #126fb2;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-modal-close:hover,
|
|
.report-pagination button:hover:not(:disabled) {
|
|
border-color: #1688d9;
|
|
background: #eef7ff;
|
|
}
|
|
|
|
.report-pagination button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.report-modal-body {
|
|
display: grid;
|
|
min-height: 0;
|
|
gap: 12px;
|
|
padding: 14px 16px 16px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.report-modal-toolbar {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.report-source-filter {
|
|
align-items: center;
|
|
color: #65748a;
|
|
display: inline-flex;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
gap: 10px;
|
|
}
|
|
|
|
.report-source-filter select {
|
|
appearance: none;
|
|
background: #ffffff;
|
|
border: 1px solid #c7d7e7;
|
|
border-radius: 8px;
|
|
color: #253047;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
min-width: 150px;
|
|
padding: 7px 12px;
|
|
}
|
|
|
|
.report-source-filter select:focus {
|
|
border-color: #1688d9;
|
|
box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.12);
|
|
outline: none;
|
|
}
|
|
|
|
.report-modal-table-wrap {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border: 1px solid #e4ebf3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.report-modal-table {
|
|
width: 100%;
|
|
min-width: 640px;
|
|
border-collapse: collapse;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.report-modal-table th,
|
|
.report-modal-table td {
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
color: #34445a;
|
|
font-size: 13px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.report-modal-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #f8fafc;
|
|
color: #65748a;
|
|
font-size: 12px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-modal-table th:first-child,
|
|
.report-modal-table td:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.report-modal-table tbody tr:hover td {
|
|
background: #f7fbff;
|
|
}
|
|
|
|
.report-modal-table tbody tr.report-clickable-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.report-modal-table tbody tr.report-clickable-row:hover td {
|
|
background: #eef7ff;
|
|
}
|
|
|
|
.report-modal-table tbody tr.report-clickable-row:focus-visible td {
|
|
background: #e9f5ff;
|
|
outline: 2px solid #1688d9;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.report-user-cell {
|
|
display: inline-flex;
|
|
max-width: 260px;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.report-user-cell img {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.report-user-cell > span {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 1px;
|
|
}
|
|
|
|
.report-user-cell b,
|
|
.report-user-cell small,
|
|
.report-event-id {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.report-user-cell b {
|
|
color: #172033;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.report-user-cell small {
|
|
color: #8a98aa;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.report-event-id {
|
|
display: inline-block;
|
|
max-width: 240px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.report-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: #65748a;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.report-pagination > div {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.report-pagination b {
|
|
color: #34445a;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-pair-cell {
|
|
display: inline-flex;
|
|
min-width: 118px;
|
|
align-items: baseline;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.report-pair-cell b {
|
|
color: #243044;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-pair-cell small {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.report-placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.report-trend-up,
|
|
.report-delta {
|
|
color: #0f9b72;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-trend-down,
|
|
.report-delta--down {
|
|
color: #d97706;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.report-delta--empty {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.report-table-skeleton-row td,
|
|
.report-table-empty-row td {
|
|
text-align: center;
|
|
}
|
|
|
|
.report-table-empty-row td {
|
|
height: 96px;
|
|
color: #8a98aa;
|
|
}
|
|
|
|
.report-empty {
|
|
display: grid;
|
|
min-height: 240px;
|
|
place-items: center;
|
|
border: 1px dashed #d8e5f0;
|
|
border-radius: 8px;
|
|
color: #8a98aa;
|
|
}
|
|
|
|
.report-revenue-chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
border: 1px solid #e4ebf3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.report-chart-skeleton {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
border: 1px solid #e4ebf3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.report-skeleton-title {
|
|
width: 112px;
|
|
height: 14px;
|
|
}
|
|
|
|
.report-skeleton-value {
|
|
width: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.report-skeleton-line {
|
|
width: 100%;
|
|
height: 16px;
|
|
}
|
|
|
|
.report-skeleton-line--short {
|
|
width: 62%;
|
|
}
|
|
|
|
.report-skeleton-chart {
|
|
width: 100%;
|
|
height: 240px;
|
|
}
|
|
|
|
.databi-shell--report .databi-panel,
|
|
.databi-shell--report .mini-stat,
|
|
.databi-shell--report .metric-card {
|
|
border-color: #dfe8f2;
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.databi-shell--report .panel-title,
|
|
.databi-shell--report .self-game-title strong,
|
|
.databi-shell--report .metric-content strong,
|
|
.databi-shell--report .risk-user-copy strong,
|
|
.databi-shell--report .definition-row strong {
|
|
color: #172033;
|
|
}
|
|
|
|
.databi-shell--report .panel-info {
|
|
border-color: #c7d7e7;
|
|
color: #6b7a90;
|
|
}
|
|
|
|
.databi-shell--report .metric-label-row,
|
|
.databi-shell--report .mini-stat > span,
|
|
.databi-shell--report .section-label,
|
|
.databi-shell--report .rank-title,
|
|
.databi-shell--report .self-game-title span,
|
|
.databi-shell--report .definition-row span,
|
|
.databi-shell--report .risk-user-copy small {
|
|
color: #65748a;
|
|
}
|
|
|
|
.databi-shell--report .metric-title-icon,
|
|
.databi-shell--report .metric-unit-icon {
|
|
color: #1688d9;
|
|
}
|
|
|
|
.databi-shell--report .metric-delta {
|
|
border-top-color: #e4ebf3;
|
|
color: #7b8a9d;
|
|
}
|
|
|
|
.databi-shell--report .self-game-table th,
|
|
.databi-shell--report .self-game-table td {
|
|
border-bottom-color: #edf2f7;
|
|
color: #34445a;
|
|
}
|
|
|
|
.databi-shell--report .self-game-table th {
|
|
background: #f8fafc;
|
|
color: #65748a;
|
|
}
|
|
|
|
.databi-shell--report .definition-row {
|
|
border-color: #e4ebf3;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.databi-shell--report .panel-empty {
|
|
color: #8a98aa;
|
|
}
|