mirror of
https://github.com/SigNoz/signoz.git
synced 2026-04-24 04:40:29 +01:00
Compare commits
1 Commits
feat/cloud
...
chore/remo
| Author | SHA1 | Date | |
|---|---|---|---|
|
ee02d96114 |
@@ -74,7 +74,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: radial-gradient(circle, #fff 10%, transparent 0);
|
||||
background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
@@ -99,36 +99,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.auth-error-container {
|
||||
.error-content {
|
||||
&__error-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&__message-badge-label-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-shaking {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -87,23 +87,3 @@
|
||||
background: var(--l3-background);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.auth-footer-content {
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.auth-footer-icon {
|
||||
filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
|
||||
hue-rotate(192deg) brightness(80%) contrast(95%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.auth-footer-text {
|
||||
color: var(--text-neutral-light-200);
|
||||
}
|
||||
|
||||
.auth-footer-link-icon {
|
||||
color: var(--text-neutral-light-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,28 +143,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.bg-dot-pattern {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--l3-background) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
.auth-page-gradient {
|
||||
background: radial-gradient(
|
||||
ellipse at center top,
|
||||
color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.8;
|
||||
filter: blur(200px);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
filter: blur(300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,18 +238,7 @@
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.celery-task-graph-grid-container {
|
||||
.celery-task-graph-worker-count {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.configure-option-Info {
|
||||
border: 1px dashed var(--bg-robin-400);
|
||||
background-color: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,11 +77,11 @@
|
||||
width: 280px;
|
||||
|
||||
&::placeholder {
|
||||
color: white;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
color: rgba($color: #ffffff, $alpha: 0.4);
|
||||
color: rgba($color: var(--l1-foreground), $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -113,42 +113,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.time-options-container {
|
||||
.time-options-item {
|
||||
&.active {
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.2);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeSelection-input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
padding-left: 0px !important;
|
||||
|
||||
input::placeholder {
|
||||
color: var(---bg-ink-300);
|
||||
}
|
||||
|
||||
input:focus::placeholder {
|
||||
color: rgba($color: #000000, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-time-popover__footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
padding: 8px 14px;
|
||||
@@ -300,34 +264,3 @@
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.timezone-container {
|
||||
.timezone {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
&__icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-time-picker {
|
||||
.timeSelection-input {
|
||||
&:hover {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timezone-badge {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
}
|
||||
|
||||
.time-input-suffix-icon-badge {
|
||||
background: rgb(179 179 179 / 15%);
|
||||
|
||||
&:hover {
|
||||
background: rgb(179 179 179 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,20 +129,3 @@ $item-spacing: 8px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.timezone-picker {
|
||||
&__search {
|
||||
.search-icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.timezone-name-wrapper {
|
||||
&__selected-icon {
|
||||
.check-icon {
|
||||
stroke: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
.dropdown-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-button--dark {
|
||||
color: #000;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { EllipsisOutlined } from '@ant-design/icons';
|
||||
import { Button, Dropdown, MenuProps } from 'antd';
|
||||
import { useIsDarkMode } from 'hooks/useDarkMode';
|
||||
|
||||
import './DropDown.styles.scss';
|
||||
|
||||
@@ -12,8 +11,6 @@ function DropDown({
|
||||
element: JSX.Element[];
|
||||
onDropDownItemClick?: MenuProps['onClick'];
|
||||
}): JSX.Element {
|
||||
const isDarkMode = useIsDarkMode();
|
||||
|
||||
const items: MenuProps['items'] = element.map(
|
||||
(e: JSX.Element, index: number) => ({
|
||||
label: e,
|
||||
@@ -35,7 +32,7 @@ function DropDown({
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
|
||||
className={`dropdown-button`}
|
||||
onClick={(e): void => {
|
||||
e.preventDefault();
|
||||
setDdOpen(true);
|
||||
|
||||
@@ -196,17 +196,3 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.members-table {
|
||||
.ant-table-tbody {
|
||||
> tr.members-table-row--tinted > td {
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
> tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,22 +167,3 @@
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.config-btn {
|
||||
&.missing-config-btn {
|
||||
background: var(--bg-amber-100);
|
||||
color: var(--bg-amber-500);
|
||||
|
||||
&:hover {
|
||||
color: var(--bg-amber-600) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.missing-config-btn {
|
||||
.config-btn-content {
|
||||
border-right: 1px solid var(--bg-amber-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ $custom-border-color: #2c3044;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
// Base styles are for dark mode
|
||||
@@ -48,10 +48,6 @@ $custom-border-color: #2c3044;
|
||||
visibility: visible !important;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selection-placeholder {
|
||||
@@ -67,10 +63,6 @@ $custom-border-color: #2c3044;
|
||||
color: var(--l2-foreground);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
@@ -114,7 +106,7 @@ $custom-border-color: #2c3044;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
// Customize tags in multiselect (dark mode by default)
|
||||
@@ -180,7 +172,9 @@ $custom-border-color: #2c3044;
|
||||
.custom-multiselect-dropdown-container {
|
||||
z-index: 1050 !important;
|
||||
padding: 0;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.5),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.4),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
@@ -215,7 +209,7 @@ $custom-border-color: #2c3044;
|
||||
.empty-message {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -573,7 +567,7 @@ $custom-border-color: #2c3044;
|
||||
.empty-message {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: color-mix(in srgb, var(--border) 45%, transparent);
|
||||
color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
@@ -804,8 +798,10 @@ $custom-border-color: #2c3044;
|
||||
.custom-multiselect-dropdown-container {
|
||||
background-color: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.empty-message {
|
||||
color: var(--l2-foreground);
|
||||
@@ -976,11 +972,9 @@ $custom-border-color: #2c3044;
|
||||
font-weight: 500;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
|
||||
.lightMode & {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
visibility 0.2s ease;
|
||||
}
|
||||
|
||||
&:focus-within .all-text {
|
||||
|
||||
@@ -249,57 +249,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-aggregation-container {
|
||||
.aggregation-container {
|
||||
.query-aggregation-select-container {
|
||||
.query-aggregation-select-editor {
|
||||
.cm-editor {
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--l1-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
backdrop-filter: none;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:hover,
|
||||
&[aria-selected='true'] {
|
||||
background: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
::-moz-selection {
|
||||
background: var(--l2-background) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--l1-background) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
.cm-function {
|
||||
color: var(--primary-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.query-aggregation-error-popover {
|
||||
.ant-popover-inner {
|
||||
background-color: var(--l1-background);
|
||||
border: none;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-aggregation-error-popover {
|
||||
.ant-popover-inner {
|
||||
background-color: var(--l1-border);
|
||||
|
||||
@@ -121,44 +121,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.qb-trace-operator {
|
||||
&-arrow {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--l3-background),
|
||||
var(--l3-background) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
&::after {
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
&.non-list-view {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--l3-background),
|
||||
var(--l3-background) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&-label-with-input {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
background: var(--l1-background) !important;
|
||||
|
||||
.label {
|
||||
color: var(--l1-foreground) !important;
|
||||
border-right: 1px solid var(--l1-border) !important;
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: radial-gradient(circle, #fff 10%, transparent 0);
|
||||
background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
@@ -197,17 +197,3 @@
|
||||
background-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.sa-table {
|
||||
.ant-table-tbody {
|
||||
> tr.sa-table-row--tinted > td {
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
> tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,9 +169,12 @@
|
||||
gap: 3px;
|
||||
background: var(--l1-border);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
0px 4px 9px 0px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
@@ -183,29 +186,3 @@
|
||||
letter-spacing: -0.06px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.warning-content {
|
||||
&__warning-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
&__warning-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
&__message-badge {
|
||||
&-label-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.key-value-label__value {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
&__docs-button {
|
||||
background: var(--l1-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,9 +157,3 @@
|
||||
.view-all-drawer {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ant-table {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,7 +134,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -224,54 +226,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.api-quick-filter-left-section {
|
||||
.api-quick-filters-header {
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
}
|
||||
|
||||
.api-module-right-section {
|
||||
.toolbar {
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
}
|
||||
|
||||
.no-filtered-domains-message-container {
|
||||
.no-filtered-domains-message-content {
|
||||
.no-filtered-domains-message {
|
||||
.no-domain-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.no-domain-subtitle {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
.attribute {
|
||||
font-family: 'Space Mono';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.api-monitoring-domain-list-table {
|
||||
.ant-table {
|
||||
.ant-table-cell {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.table-row-light {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.table-row-dark {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.round-metric-tag {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
@@ -463,135 +463,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-description-container {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
.dashboard-details {
|
||||
.left-section {
|
||||
.dashboard-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.right-section {
|
||||
.icons {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.configure-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-description-section {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-settings {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section-1 {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.section-2 {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename-dashboard {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.dashboard-content {
|
||||
.name-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dashboard-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.dashboard-rename {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-naming {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.section-naming-content {
|
||||
.name-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.section-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.dashboard-rename {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,58 +141,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.overview-content {
|
||||
.overview-settings {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.name-icon-input {
|
||||
.dashboard-image-input {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-name-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.description-text-area {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.overview-settings-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.unsaved {
|
||||
.unsaved-dot {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
.unsaved-changes {
|
||||
color: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
.footer-action-btns {
|
||||
.discard-btn {
|
||||
color: var(--l1-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,27 +100,6 @@
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.variable-item {
|
||||
.variable-name {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--bg-robin-300);
|
||||
}
|
||||
|
||||
.variable-value {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
outline: 1px solid var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-error-alert {
|
||||
margin-bottom: 12px;
|
||||
padding: 4px 12px;
|
||||
|
||||
@@ -116,50 +116,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.panel-type-selection-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.panel-selection {
|
||||
.selected {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-card-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
background: var(--primary-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,11 +61,3 @@
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-breadcrumbs {
|
||||
.dashboard-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,32 +57,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.download-logs-popover {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: linear-gradient(
|
||||
139deg,
|
||||
color-mix(in srgb, var(--card) 80%, transparent) 0%,
|
||||
color-mix(in srgb, var(--card) 90%, transparent) 98.68%
|
||||
);
|
||||
|
||||
box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
|
||||
|
||||
.download-logs-content {
|
||||
.action-btns {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.action-btns:hover {
|
||||
&.ant-btn-text {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
.export-heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,41 +119,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.main-container {
|
||||
.plot-tag {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-foreground);
|
||||
.ant-modal-confirm-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-modal-confirm-content {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-confirm-btns {
|
||||
button:nth-of-type(1) {
|
||||
background-color: var(--l3-background);
|
||||
border: none;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-help-btns {
|
||||
.doc-redirection-btn {
|
||||
color: var(--bg-aqua-600) !important;
|
||||
border-color: var(--bg-aqua-600) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-notification-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -174,23 +174,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboard-empty-state {
|
||||
.dashboard-content {
|
||||
.heading {
|
||||
.icons {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.welcome {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.welcome-info {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -333,100 +333,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.fullscreen-grid-container {
|
||||
.react-grid-layout {
|
||||
.row-panel {
|
||||
background: var(--l2-background);
|
||||
|
||||
.settings-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.row-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-full-view {
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-foreground);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-settings {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.menu-content {
|
||||
.section-1 {
|
||||
.rename-btn {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
.remove-section {
|
||||
color: var(--bg-cherry-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename-section {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-modal-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
.action-btns {
|
||||
.cancel-btn {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-onclick-show-button {
|
||||
background: var(--l2-background);
|
||||
border-color: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
.menu-item {
|
||||
&:hover {
|
||||
background-color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,14 +55,6 @@
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.widget-header-container {
|
||||
.ant-input-group-addon {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.long-tooltip {
|
||||
.ant-tooltip-content {
|
||||
max-height: 500px;
|
||||
|
||||
@@ -227,7 +227,9 @@
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 11px !important;
|
||||
font-style: normal;
|
||||
@@ -480,10 +482,10 @@
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.selected {
|
||||
background: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@ import { DataSource } from 'types/common/queryBuilder';
|
||||
import { USER_ROLES } from 'types/roles';
|
||||
|
||||
import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
|
||||
import logsUrl from '@/assets/Icons/logs.svg';
|
||||
|
||||
import { getItemIcon } from '../constants';
|
||||
import { ScrollText } from '@signozhq/icons';
|
||||
|
||||
export default function SavedViews({
|
||||
onUpdateChecklistDoneItem,
|
||||
@@ -54,17 +54,20 @@ export default function SavedViews({
|
||||
isError: metricsViewsError,
|
||||
} = useGetAllViews(DataSource.METRICS);
|
||||
|
||||
const logsViews = useMemo(() => [...(logsViewsData?.data.data || [])], [
|
||||
logsViewsData,
|
||||
]);
|
||||
const logsViews = useMemo(
|
||||
() => [...(logsViewsData?.data.data || [])],
|
||||
[logsViewsData],
|
||||
);
|
||||
|
||||
const tracesViews = useMemo(() => [...(tracesViewsData?.data.data || [])], [
|
||||
tracesViewsData,
|
||||
]);
|
||||
const tracesViews = useMemo(
|
||||
() => [...(tracesViewsData?.data.data || [])],
|
||||
[tracesViewsData],
|
||||
);
|
||||
|
||||
const metricsViews = useMemo(() => [...(metricsViewsData?.data.data || [])], [
|
||||
metricsViewsData,
|
||||
]);
|
||||
const metricsViews = useMemo(
|
||||
() => [...(metricsViewsData?.data.data || [])],
|
||||
[metricsViewsData],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEntity === 'logs') {
|
||||
@@ -348,7 +351,7 @@ export default function SavedViews({
|
||||
className={selectedEntity === 'logs' ? 'selected tab' : 'tab'}
|
||||
onClick={(): void => handleTabChange('logs')}
|
||||
>
|
||||
<img src={logsUrl} alt="logs-icon" className="logs-icon" />
|
||||
<ScrollText size={14} />
|
||||
Logs
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -132,7 +132,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -146,50 +148,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-metric-traces-header {
|
||||
.filter-section {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces-table {
|
||||
.ant-table {
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th:has(.entityname-column-header) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell:has(.entityname-column-value) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entityname-column-value {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,63 +192,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ant-drawer-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entity-detail-drawer {
|
||||
.title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.entity-detail-drawer__entity {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.views-tabs {
|
||||
.tab {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.selected_view {
|
||||
background: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.selected_view::before {
|
||||
background: var(--l3-background);
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.compass-button {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabs-and-search {
|
||||
.action-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces {
|
||||
margin-top: 1rem;
|
||||
|
||||
@@ -382,7 +325,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -397,53 +342,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-metric-traces-header {
|
||||
.filter-section {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metric-traces-table {
|
||||
.ant-table {
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th:has(.entityname-column-header) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
background: var(--l1-foreground);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-cell:has(.entityname-column-value) {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.entityname-column-value {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-metrics-logs-container {
|
||||
margin-top: 1rem;
|
||||
|
||||
|
||||
@@ -202,7 +202,11 @@
|
||||
letter-spacing: -0.07px;
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,7 +255,11 @@
|
||||
> a {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'case' on,
|
||||
'cpsp' on;
|
||||
font-size: var(--font-size-sm);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -765,206 +773,6 @@
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-key-container {
|
||||
.ingestion-key-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-render {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-collapse {
|
||||
border: none;
|
||||
|
||||
.ant-collapse-header {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-collapse-content {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.title-with-action {
|
||||
.ingestion-key-title {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-value {
|
||||
background: var(--l3-background);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.copy-key-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-details {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
|
||||
.ingestion-key-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ingestion-key-last-used-at {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-ingestion-key-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ingestion-key-input {
|
||||
.ant-input {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-info-container {
|
||||
.user-email {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.limits-data {
|
||||
border: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-modal {
|
||||
.ant-modal-content {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
padding: 0;
|
||||
|
||||
.ant-modal-header {
|
||||
background: none;
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-access-role {
|
||||
.ant-radio-button-wrapper {
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
&::before {
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyable-text {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.ingestion-key-expires-at {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.expires-at .ant-picker {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -1077,26 +885,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-setup-details-links {
|
||||
background: color-mix(in srgb, var(--primary-background) 10%, transparent);
|
||||
color: var(--accent-primary);
|
||||
|
||||
.learn-more {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-tooltip {
|
||||
.ingestion-url-error-content {
|
||||
.ingestion-url-error-code {
|
||||
color: var(--bg-amber-500);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
|
||||
.licenses-page-header-title {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 13px;
|
||||
@@ -54,38 +56,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.licenses-page {
|
||||
.licenses-page-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.licenses-page-header-title {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.licenses-page-content-container {
|
||||
.licenses-page-content {
|
||||
background: var(--l1-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,15 +176,3 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.info-text {
|
||||
color: var(--bg-robin-600) !important;
|
||||
}
|
||||
|
||||
.info-link-container {
|
||||
.anticon {
|
||||
color: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,7 +224,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -249,7 +253,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -273,7 +281,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -307,7 +319,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -328,7 +344,11 @@
|
||||
> a {
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'case' on,
|
||||
'cpsp' on;
|
||||
font-size: var(--font-size-sm);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -932,7 +952,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -966,7 +990,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -988,7 +1016,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -1022,7 +1054,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 12.805px;
|
||||
font-style: normal;
|
||||
@@ -1078,305 +1114,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dashboards-list-container {
|
||||
.dashboards-list-view-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ant-table-cell {
|
||||
background: var(--l1-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-list-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.dashboard-title {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.title-with-action {
|
||||
.dashboard-title {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-details {
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.created-by {
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.updated-by {
|
||||
.text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.dashboard-tag {
|
||||
background: var(--l3-background);
|
||||
|
||||
.tag-text {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.dashboard-created-at {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-search {
|
||||
.text {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.all-dashboards-header {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
.dashboard-empty-state {
|
||||
.text {
|
||||
.no-dashboard {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.info {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-error-state {
|
||||
.error-text {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
.retry-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-view-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.save-view-input {
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-actions {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.dashboard-action-content {
|
||||
.section-1 {
|
||||
.action-btn {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-dashboards {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.sort-content {
|
||||
.sort-heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.sort-btns {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-group {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
.configure-content {
|
||||
.configure-btn {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-metadata-root {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.configure-content {
|
||||
.configure-preview {
|
||||
border: 0.915px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.header {
|
||||
.title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.createdAt {
|
||||
.formatted-time {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.user {
|
||||
.user-tag {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updatedAt {
|
||||
.formatted-time {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.user {
|
||||
.user-tag {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
|
||||
.dashboard-created-by {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-action {
|
||||
.connection-line {
|
||||
border: 1px dashed var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.save-changes {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-toolip {
|
||||
.ant-tooltip-content {
|
||||
.ant-tooltip-inner {
|
||||
|
||||
@@ -194,76 +194,3 @@
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.new-dashboard-templates-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.new-dashboard-templates-content-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.new-dashboard-templates-content {
|
||||
.new-dashboard-templates-list {
|
||||
border-right: 1px solid var(--l1-border);
|
||||
|
||||
.templates-list {
|
||||
.template-list-item {
|
||||
.template-name {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-dashboard-template-preview {
|
||||
.template-preview-header {
|
||||
.template-preview-title {
|
||||
.template-preview-icon {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.template-info {
|
||||
.template-name {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
.template-description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-dashboard-btn {
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-preview-image {
|
||||
img {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,3 @@
|
||||
.delete-btn:hover {
|
||||
background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.delete-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,14 +58,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.table-view-actions-content {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background) !important;
|
||||
backdrop-filter: none;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,55 +160,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.login-form-card {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.login-error-container {
|
||||
.error-content {
|
||||
background: color-mix(in srgb, var(--danger-background) 10%, transparent);
|
||||
border-color: color-mix(in srgb, var(--danger-background) 20%, transparent);
|
||||
|
||||
&__error-code {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&__docs-button {
|
||||
color: var(--l1-foreground);
|
||||
border-color: var(--l1-border);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--l2-foreground);
|
||||
border-color: var(--l1-border);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__message-badge-label-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__message-item {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
&::before {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-hint-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-label-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -10,10 +10,6 @@ export const Label = styled.label`
|
||||
color: var(--l1-foreground);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
|
||||
.lightMode & {
|
||||
color: var(--text-ink-500);
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormContainer = styled(Form)`
|
||||
@@ -50,20 +46,10 @@ export const FormContainer = styled(Form)`
|
||||
background: var(--l3-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
.lightMode & {
|
||||
background: var(--bg-vanilla-200) !important;
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
color: var(--text-ink-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .ant-input::placeholder {
|
||||
color: var(--l3-foreground) !important;
|
||||
|
||||
.lightMode & {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .ant-input:focus,
|
||||
|
||||
@@ -323,50 +323,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.logs-list-view-container {
|
||||
.logs-list-table-view-container {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
background-color: var(--l1-background) !important;
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-header-table-container {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +102,9 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
transition:
|
||||
background-color 120ms ease,
|
||||
color 120ms ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--l2-background-hover);
|
||||
@@ -143,10 +145,12 @@
|
||||
left: 50%;
|
||||
width: 4px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transition: background 120ms ease, width 120ms ease;
|
||||
transition:
|
||||
background 120ms ease,
|
||||
width 120ms ease;
|
||||
}
|
||||
|
||||
.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.logs-table-virtuoso-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--bg-slate-300) transparent;
|
||||
scrollbar-color: var(--l3-background) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
@@ -16,23 +16,11 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
background: var(--l3-background);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode .logs-table-virtuoso-scroll {
|
||||
scrollbar-color: var(--bg-vanilla-300) transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-vanilla-100);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -263,24 +263,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.logs-explorer-views-container {
|
||||
.views-tabs-container {
|
||||
.views-tabs {
|
||||
.selected_view {
|
||||
background: white;
|
||||
color: var(--text-robin-400);
|
||||
border: 1px solid var(--bg-robin-400);
|
||||
}
|
||||
|
||||
.selected_view::before {
|
||||
background: var(--bg-robin-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-by-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -179,16 +179,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metrics-explorer-explore-container {
|
||||
.explore-tabs {
|
||||
.selected-view {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboards-and-alerts-popover-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@@ -382,81 +382,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metric-details-header {
|
||||
.ant-btn {
|
||||
background-color: var(--bg-white-400);
|
||||
}
|
||||
}
|
||||
|
||||
.metric-details-content {
|
||||
.metrics-accordion {
|
||||
.metrics-accordion-header {
|
||||
.action-menu {
|
||||
.action-button {
|
||||
.ant-typography {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metrics-accordion-content {
|
||||
.metric-metadata-key {
|
||||
.field-renderer-container {
|
||||
.label {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.all-attributes-key {
|
||||
.all-attributes-contribution {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-metadata-value {
|
||||
background-color: var(--l3-background);
|
||||
.all-attributes-value {
|
||||
.ant-btn {
|
||||
background-color: var(--l2-foreground);
|
||||
.ant-typography {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-renderer-container {
|
||||
.label {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-attributes-content {
|
||||
.top-attributes-item-progress {
|
||||
.top-attributes-item-progress-bar {
|
||||
background-color: var(--bg-robin-400);
|
||||
}
|
||||
|
||||
.top-attributes-item-count {
|
||||
background-color: var(--bg-robin-300);
|
||||
}
|
||||
|
||||
.top-attributes-item-key,
|
||||
.top-attributes-item-count {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-metadata-value {
|
||||
.y-axis-unit-selector-component {
|
||||
.ant-select {
|
||||
@@ -585,24 +510,6 @@
|
||||
color: var(--bg-robin-400) !important;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.attribute-key-popover-overlay,
|
||||
.all-values-popover-overlay {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l2-foreground);
|
||||
background: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.all-values-popover {
|
||||
.all-values-item {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-out {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@@ -177,7 +177,9 @@
|
||||
|
||||
.ant-table-thead
|
||||
> tr
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
> th:not(:last-child):not(.ant-table-selection-column):not(
|
||||
.ant-table-row-expand-icon-cell
|
||||
):not([colspan])::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -228,29 +230,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metrics-table-container {
|
||||
.ant-table {
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
.ant-pagination-item {
|
||||
&-active {
|
||||
background: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
|
||||
a {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric-type-renderer {
|
||||
border-radius: 50px;
|
||||
max-height: 24px;
|
||||
|
||||
@@ -57,28 +57,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.license-section {
|
||||
.license-section-header {
|
||||
.license-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.license-section-content {
|
||||
.license-section-content-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.license-section-content-item-title-action {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.license-section-content-item-description {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,62 +153,3 @@
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.user-info-section {
|
||||
.user-info-section-header {
|
||||
.user-info-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-info-section-subtitle {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-preference-section {
|
||||
.user-preference-section-header {
|
||||
.user-preference-section-title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-preference-section-subtitle {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.user-preference-section-content {
|
||||
.user-preference-section-content-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.user-preference-section-content-item-title-action {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.user-preference-section-content-item-description {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.auto-theme-info {
|
||||
background: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.auto-theme-status {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
strong {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
|
||||
@@ -32,17 +32,3 @@
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.widget-graph {
|
||||
background-color: var(--l1-background);
|
||||
background-image: radial-gradient(var(--l2-foreground) 1px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
|
||||
.header {
|
||||
.plot-tag {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,11 +38,3 @@
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.column-unit-selector {
|
||||
.heading {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,25 +68,3 @@
|
||||
border-top: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.context-link-form-container {
|
||||
.url-parameters-section {
|
||||
.parameter-row {
|
||||
.delete-parameter-btn {
|
||||
color: var(--l1-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--danger-background) !important;
|
||||
border-color: var(--danger-background) !important;
|
||||
background-color: var(--bg-cherry-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-link-footer {
|
||||
border-top-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,35 +111,3 @@
|
||||
.add-context-link-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.context-links-text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.context-link-item {
|
||||
&:hover {
|
||||
background-color: var(--l2-background);
|
||||
}
|
||||
|
||||
.context-link-label {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.context-link-url {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.drag-handle-icon {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.delete-context-link-btn {
|
||||
&:hover {
|
||||
color: var(--danger-background);
|
||||
border-color: var(--danger-background);
|
||||
background-color: var(--bg-cherry-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,28 +142,3 @@
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.legend-colors-container {
|
||||
.legend-colors-content {
|
||||
.legend-items {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
scrollbar-color: var(--l2-foreground) transparent;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
&:hover {
|
||||
background-color: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -222,95 +222,3 @@
|
||||
line-height: 16px; /* 133.333% */
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.right-container {
|
||||
background-color: var(--l1-background);
|
||||
.section-heading,
|
||||
.section-heading-small {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.header {
|
||||
.header-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-config {
|
||||
.panel-type-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.select-option {
|
||||
.display {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.y-axis-unit-selector-v2 {
|
||||
.y-axis-unit-selector-component {
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-card {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.fill-gaps-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.toggle-card-description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-time-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.y-axis-unit-selector,
|
||||
.y-axis-unit-selector-v2 {
|
||||
.heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
.soft-min-max {
|
||||
.container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
.input {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-option {
|
||||
.display {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,20 +36,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.histogram-settings__bucket-config {
|
||||
.histogram-settings__merge-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.histogram-settings__bucket-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.ant-input {
|
||||
background: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.color-selector-button {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
|
||||
@@ -3,17 +3,8 @@
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.custom-color-typography-dark {
|
||||
color: #fff !important;
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
}
|
||||
|
||||
.custom-color-typography-light {
|
||||
color: #000 !important;
|
||||
.custom-color-text {
|
||||
color: var(--l1-foreground) !important;
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
|
||||
@@ -1,24 +1,14 @@
|
||||
import { Typography } from 'antd';
|
||||
import { useIsDarkMode } from 'hooks/useDarkMode';
|
||||
|
||||
import { CustomColorProps } from './types';
|
||||
|
||||
import './CustomColor.styles.scss';
|
||||
|
||||
function CustomColor({ color }: CustomColorProps): JSX.Element {
|
||||
const isDarkMode = useIsDarkMode();
|
||||
return (
|
||||
<div className="custom-color-container">
|
||||
<div className="custom-color-tag" style={{ background: color }} />
|
||||
<Typography.Text
|
||||
className={
|
||||
isDarkMode
|
||||
? `custom-color-typography-dark`
|
||||
: `custom-color-typograph-light`
|
||||
}
|
||||
>
|
||||
{color}
|
||||
</Typography.Text>
|
||||
<Typography.Text className={`custom-color-text`}>{color}</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
|
||||
.edit-action-btns {
|
||||
@@ -38,11 +38,11 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
background: var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
}
|
||||
|
||||
.ant-btn + .ant-btn {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
@@ -57,7 +57,7 @@
|
||||
.time-series-alerts {
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
@@ -81,7 +81,7 @@
|
||||
width: 80%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2px;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
color: var(--l1-foreground);
|
||||
@@ -139,7 +139,7 @@
|
||||
.threshold-units-selector {
|
||||
display: flex;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
height: 32px;
|
||||
@@ -161,7 +161,7 @@
|
||||
.unit-selection {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l2-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
@@ -188,14 +188,14 @@
|
||||
.unit-selection-prev {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l2-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,9 +203,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0px 0px 2px 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
border-top: none;
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
@@ -220,7 +220,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
@@ -230,8 +230,9 @@
|
||||
.color-format {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l1-foreground);
|
||||
background: var(--l1-background);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -247,21 +248,21 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background-color: unset;
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.color-format-prev {
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-left: 1px solid var(--l1-border);
|
||||
border-left: 1px solid var(--l2-border);
|
||||
color: var(--l1-foreground);
|
||||
font-family: 'Space Mono';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px; /* 133.333% */
|
||||
background: var(--l2-background);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -281,8 +282,8 @@
|
||||
gap: 6px;
|
||||
flex: 1 0 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-border);
|
||||
border: 1px solid var(--l2-border);
|
||||
background: var(--l2-background);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -319,123 +320,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.operator-input-root {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.threshold-container {
|
||||
.threshold-card-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.edit-action-btns {
|
||||
.ant-btn {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.ant-btn + .ant-btn {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.time-series-alerts {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.label-input {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
color: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value-table-alerts {
|
||||
.operator-input {
|
||||
.ant-select-selector {
|
||||
background-color: var(--l3-background) !important;
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.typography {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.typography-preview {
|
||||
color: var(--l2-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
.threshold-units-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
|
||||
.unit-input {
|
||||
color: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.unit-selection {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l2-background);
|
||||
|
||||
.ant-select-selector {
|
||||
background-color: var(--l3-background);
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
.unit-selection-prev {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l2-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.thresholds-color-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
border-top: 1px solid var(--l1-foreground);
|
||||
background: var(--l3-background);
|
||||
|
||||
.color-selector {
|
||||
color: var(--l3-background);
|
||||
background: var(--l3-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
border-top: 1px solid var(--l1-foreground);
|
||||
}
|
||||
.color-format {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l3-background);
|
||||
|
||||
.ant-select-selector {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
.color-format-prev {
|
||||
border-left: 1px solid var(--l1-foreground);
|
||||
color: var(--l3-background);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.threshold-action-button {
|
||||
.discard-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.save-changes {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,22 +32,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.threshold-selector-container {
|
||||
.threshold-select {
|
||||
.icon {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.left-section {
|
||||
.icon {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
.text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.fill-mode-selector {
|
||||
.fill-mode-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.line-interpolation-selector {
|
||||
.line-interpolation-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.line-style-selector {
|
||||
.line-style-label {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
// border: 1px solid #1d212d;
|
||||
border-radius: 3px;
|
||||
|
||||
.no-logs-container-content {
|
||||
|
||||
@@ -70,12 +70,6 @@ div[class*='-setup-instructions-container'] {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.dataSourceName {
|
||||
color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.supported-languages-container {
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
@@ -180,80 +180,6 @@
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.entity-value {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
|
||||
.environment,
|
||||
.supported-language {
|
||||
&.selected {
|
||||
color: var(--accent-primary);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-primary);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-container {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
}
|
||||
|
||||
.error-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.steps-container {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
|
||||
.steps-container-header {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-user-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,7 +190,9 @@
|
||||
opacity: 0.6 !important;
|
||||
cursor: pointer;
|
||||
padding: 0 !important;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
opacity 0.2s;
|
||||
box-shadow: none !important;
|
||||
|
||||
svg {
|
||||
@@ -371,144 +373,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.invite-team-members-table-header {
|
||||
.table-header-cell {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.team-member-email-input {
|
||||
background: var(--l2-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
input {
|
||||
background: var(--l2-background) !important;
|
||||
border-color: var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-neutral-light-200) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.team-member-role-select {
|
||||
.ant-select-selector {
|
||||
background: var(--l3-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--l1-foreground) !important;
|
||||
|
||||
.ant-select-selection-placeholder {
|
||||
color: var(--l3-foreground) !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-item {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: var(--l3-foreground) !important;
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
|
||||
&:hover .ant-select-selector {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-team-member-button {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
color: var(--danger-background) !important;
|
||||
|
||||
svg {
|
||||
color: var(--danger-background) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--bg-cherry-400) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
color: var(--danger-background) !important;
|
||||
|
||||
svg {
|
||||
color: var(--danger-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-another-member-button {
|
||||
border: 1px dashed var(--l1-border) !important;
|
||||
background: transparent !important;
|
||||
color: var(--l3-foreground);
|
||||
|
||||
svg,
|
||||
[class*='icon'] {
|
||||
color: var(--l3-foreground) !important;
|
||||
display: inline-block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--bg-robin-500) !important;
|
||||
border-style: dashed !important;
|
||||
color: var(--l1-foreground);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--primary-background) 10%,
|
||||
transparent
|
||||
) !important;
|
||||
|
||||
svg,
|
||||
[class*='icon'] {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.questions-form-container {
|
||||
.invite-users-error-message-container,
|
||||
.invite-users-success-message-container {
|
||||
.success-message {
|
||||
color: var(--bg-success-500);
|
||||
}
|
||||
}
|
||||
|
||||
.partially-sent-invites-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-foreground);
|
||||
|
||||
.partially-sent-invites-message {
|
||||
color: var(--bg-warning-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-shaking {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -17,17 +17,3 @@
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-url-error-tooltip {
|
||||
.ingestion-url-error-content {
|
||||
.ingestion-url-error-code {
|
||||
color: var(--bg-amber-500);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-url-error-message {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -603,10 +603,6 @@
|
||||
color: var(--accent-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.lightMode & {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-question {
|
||||
@@ -1253,399 +1249,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.ingestion-setup-details-links {
|
||||
color: var(--accent-primary);
|
||||
|
||||
.learn-more {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-header-container-close-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.setup-flow {
|
||||
&__header {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
&--sticky {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&__question-block {
|
||||
color: var(--l2-foreground);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
&:before {
|
||||
background-color: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__radio-custom {
|
||||
background-color: var(--l1-background);
|
||||
color: var(--l2-foreground);
|
||||
background: var(--l1-background);
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-background);
|
||||
box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2);
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
color: var(--l2-foreground);
|
||||
box-shadow: 0 4px 10px rgba(58, 134, 255, 0.4);
|
||||
}
|
||||
|
||||
&--animating {
|
||||
animation: selectPulse 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&__category {
|
||||
width: 100%;
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&__content-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__category-filter {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&__category-filter-item {
|
||||
color: var(--l2-foreground);
|
||||
|
||||
&--selected {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
&__description {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-block {
|
||||
color: var(--l2-foreground);
|
||||
background-color: transparent !important;
|
||||
|
||||
&:before {
|
||||
background-color: var(--bg-robin-100);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
&.answered {
|
||||
&:before {
|
||||
background-color: var(--primary-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 50px;
|
||||
bottom: -80px;
|
||||
width: 1px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-robin-400) 0%,
|
||||
var(--bg-robin-400) 50%,
|
||||
transparent 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 2px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes selectPulse {
|
||||
0% {
|
||||
background-color: var(--l2-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
20% {
|
||||
background-color: rgba(58, 134, 255, 0.5);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
40% {
|
||||
background-color: var(--l2-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
60% {
|
||||
background-color: rgba(58, 134, 255, 0.8);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
100% {
|
||||
background-color: var(--primary-background);
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-v2 {
|
||||
.get-help-btn,
|
||||
.invite-teammate-btn {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--l3-background) !important;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none !important;
|
||||
outline-offset: 0px !important;
|
||||
}
|
||||
|
||||
&.rounded-btn {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--primary-background);
|
||||
color: var(--l2-foreground) !important;
|
||||
border: none !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: none !important;
|
||||
color: var(--l2-foreground) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-robin-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-title,
|
||||
.onboarding-filters-title,
|
||||
.onboarding-filters-item-title {
|
||||
color: var(--l2-foreground) !important;
|
||||
|
||||
&.selected {
|
||||
color: var(--accent-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.onboarding-data-source-button {
|
||||
color: var(--l2-foreground);
|
||||
background: var(--l3-background);
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
background: var(--l2-background) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
background: var(--l2-background) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
color: var(--text-robin-500) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
background: var(--l2-background) !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--bg-robin-500) !important;
|
||||
|
||||
color: var(--text-robin-500) !important;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
|
||||
background: var(--l2-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.questionaire-footer {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.onboarding-configure-product-description {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.onboarding-data-source-search {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-input {
|
||||
background: var(--l1-background);
|
||||
border: 1px solid var(--l1-border);
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-add-data-source-container {
|
||||
.onboarding-question {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.question-title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.question-sub-title {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-product-setup-container {
|
||||
&_left-section {
|
||||
.perlian-bg {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--l2-foreground) 10%,
|
||||
transparent 0
|
||||
);
|
||||
background-size: 12px 12px;
|
||||
opacity: 1;
|
||||
-webkit-mask-image: radial-gradient(
|
||||
circle at 50% 0,
|
||||
rgba(255, 255, 255, 0.1) 0,
|
||||
rgba(255, 255, 255, 0) 56.77%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&_right-section {
|
||||
.invite-user-section-content {
|
||||
.ant-btn {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.need-help-section-content-divider {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.need-help-section-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.ant-typography {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.configure-product-ingestion-section-content {
|
||||
.ingestion-endpoint-section {
|
||||
background: var(--l1-foreground);
|
||||
box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19) inset;
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.ingestion-endpoint-section-header {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-info-section {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-section-title {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ingestion-key-details-section {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.ingestion-endpoint-section-error-container {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-data-source-category-container {
|
||||
.onboarding-data-source-category-item {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-configure-container {
|
||||
.configure-product-docs-section {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.loading-container {
|
||||
.loading-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.configure-product-ingestion-section {
|
||||
.configure-product-ingestion-section-content {
|
||||
background-color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-team-member-modal {
|
||||
.ant-modal-content {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
|
||||
.invite-team-member-modal-content {
|
||||
background-color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-header-container-close-icon {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,7 +215,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
@@ -238,7 +242,11 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'cpsp' on,
|
||||
'case' on;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
@@ -444,129 +452,3 @@
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.datePicker {
|
||||
.ant-picker-panel-container {
|
||||
background: var(--card) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.planned-downtime-container {
|
||||
.planned-downtime-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.schedule-created-at {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
border-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.planned-downtime-table {
|
||||
.ant-table-tbody {
|
||||
.collapse-list {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.ant-collapse-content-box {
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-schedule-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.save-view-input {
|
||||
.ant-input {
|
||||
background: var(--l1-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.createDowntimeModal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--card);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-divider {
|
||||
border: 0.5px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.createForm {
|
||||
.ant-picker,
|
||||
input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-picker .ant-picker-input input {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.scheduleTimeInfoText {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.alert-rule-info {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { CheckOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
Divider,
|
||||
Form,
|
||||
FormInstance,
|
||||
Input,
|
||||
@@ -164,7 +163,7 @@ export function PlannedDowntimeForm(
|
||||
values.timezone,
|
||||
shouldKeepLocalTime,
|
||||
),
|
||||
)
|
||||
)
|
||||
: undefined,
|
||||
recurrence: values.recurrence as RuletypesRecurrenceDTO,
|
||||
},
|
||||
@@ -216,7 +215,7 @@ export function PlannedDowntimeForm(
|
||||
timezoneInitialValue,
|
||||
values.timezone,
|
||||
!isEditMode,
|
||||
)
|
||||
)
|
||||
: undefined,
|
||||
startTime: handleTimeConversion(
|
||||
values.startTime,
|
||||
@@ -228,7 +227,7 @@ export function PlannedDowntimeForm(
|
||||
? undefined
|
||||
: values.recurrence?.repeatOn,
|
||||
repeatType: values.recurrence?.repeatType,
|
||||
};
|
||||
};
|
||||
|
||||
const payloadValues = {
|
||||
...values,
|
||||
@@ -442,11 +441,9 @@ export function PlannedDowntimeForm(
|
||||
centered
|
||||
open={isOpen}
|
||||
className="createDowntimeModal"
|
||||
width={384}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
>
|
||||
<Divider plain />
|
||||
<Form<PlannedDowntimeFormData>
|
||||
name={initialValues.editMode ? 'edit-form' : 'create-form'}
|
||||
form={form}
|
||||
|
||||
@@ -122,36 +122,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-functions-container {
|
||||
.add-function-btn {
|
||||
background-color: var(--l3-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.query-functions-list {
|
||||
.query-function {
|
||||
border: 1px solid var(--l1-border);
|
||||
.query-function-name-selector {
|
||||
.ant-select-selector {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.query-function-value {
|
||||
background: var(--l3-background);
|
||||
|
||||
&:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--l3-background);
|
||||
background-color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,15 +23,8 @@
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
//not using var here to support opacity 60%. To be handled at design system level.
|
||||
background: color-mix(in srgb, var(--l3-background) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--l1-background) 60%, transparent);
|
||||
color: var(--l1-foreground);
|
||||
line-height: 1;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.cmd-hint {
|
||||
color: var(--l2-foreground);
|
||||
//not using var here to support opacity 60%. To be handled at design system level.
|
||||
background: color-mix(in srgb, var(--l3-background) 80%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,7 +230,7 @@
|
||||
align-items: center;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 0px;
|
||||
|
||||
@@ -299,14 +299,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-builder-search-v2 {
|
||||
.qb-search-bar-tokenised-tags {
|
||||
.ant-tag {
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,12 +22,3 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.resourceAttributesFilter-container {
|
||||
.resource-attributes-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -295,7 +295,9 @@
|
||||
color: var(--destructive);
|
||||
opacity: 0.6;
|
||||
padding: 0;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
opacity 0.2s;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@@ -371,15 +373,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.role-details-page {
|
||||
.role-details-permission-item {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,16 +250,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.roles-table-section-header {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.roles-table-row {
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
}
|
||||
|
||||
.create-role-modal {
|
||||
.ant-modal-content {
|
||||
padding: 0;
|
||||
|
||||
@@ -353,128 +353,3 @@
|
||||
line-height: 20px; /* 142.857% */
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.routing-policies-container {
|
||||
.routing-policies-content {
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.routing-policies-table {
|
||||
.ant-table-tbody {
|
||||
.policy-list-item {
|
||||
border: 1px solid var(--l1-border);
|
||||
background-color: var(--l1-background);
|
||||
|
||||
.policy-list-item-header {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.policy-list-item-content {
|
||||
.policy-list-item-content-row {
|
||||
.ant-typography:first-child {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.ant-typography:last-child,
|
||||
div .ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-policy-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background-color: var(--card);
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-divider {
|
||||
border: 0.5px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-policy-container {
|
||||
.input-group {
|
||||
.ant-typography {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:hover .ant-select-selector {
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-policy-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
.cancel-btn {
|
||||
background: var(--l3-background);
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: var(--danger-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: var(--l1-foreground);
|
||||
background: var(--bg-cherry-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--l3-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,10 @@
|
||||
background: var(--l1-background);
|
||||
|
||||
padding-bottom: 48px;
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
|
||||
.brand-container {
|
||||
padding: 8px 15px;
|
||||
@@ -295,7 +298,9 @@
|
||||
.nav-section-title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.08s ease, transform 0.08s ease;
|
||||
transition:
|
||||
opacity 0.08s ease,
|
||||
transform 0.08s ease;
|
||||
|
||||
&.reorder {
|
||||
display: none;
|
||||
@@ -332,7 +337,10 @@
|
||||
|
||||
display: none;
|
||||
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
transition-delay: 0.03s;
|
||||
}
|
||||
|
||||
@@ -456,7 +464,10 @@
|
||||
width: 54px;
|
||||
// width: 100%; // temp
|
||||
|
||||
transition: all 0.08s ease, background 0s, border 0s;
|
||||
transition:
|
||||
all 0.08s ease,
|
||||
background 0s,
|
||||
border 0s;
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
@@ -573,7 +584,11 @@
|
||||
|
||||
color: var(--primary-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'case' on,
|
||||
'cpsp' on,
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
@@ -586,7 +601,11 @@
|
||||
.sidenav-beta-tag {
|
||||
color: var(--l1-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'case' on,
|
||||
'cpsp' on,
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
@@ -736,7 +755,8 @@
|
||||
background: var(--l2-background);
|
||||
|
||||
/* Drop Shadow */
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
@@ -916,7 +936,8 @@
|
||||
background: var(--l2-background);
|
||||
|
||||
/* Drop Shadow */
|
||||
box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
box-shadow:
|
||||
0px 103px 12px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 66px 18px 0px rgba(0, 0, 0, 0.01),
|
||||
0px 37px 22px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 17px 17px 0px rgba(0, 0, 0, 0.04),
|
||||
@@ -1024,16 +1045,6 @@
|
||||
width: 360px !important;
|
||||
border-radius: 3px !important;
|
||||
|
||||
// Glass blur
|
||||
// background: rgba(18, 19, 23, 0.6); /* based on #121317 */
|
||||
// backdrop-filter: blur(16px);
|
||||
// -webkit-backdrop-filter: blur(16px);
|
||||
// border: 1px solid color-mix(in srgb, var(--l1-foreground) 8%, transparent);
|
||||
// border-radius: 12px;
|
||||
// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
// color: white;
|
||||
// padding: 8px 0;
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l2-foreground);
|
||||
@@ -1285,225 +1296,6 @@
|
||||
background-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.sideNav {
|
||||
background: var(--l1-background);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
|
||||
.brand {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-title-section {
|
||||
.license-type {
|
||||
background: var(--l3-background);
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.version-container {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
.version {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.get-started-nav-items {
|
||||
.get-started-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-foreground);
|
||||
|
||||
svg {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
// Hover state (light mode)
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--l3-background);
|
||||
border-color: var(--l1-border);
|
||||
|
||||
color: var(--l1-foreground);
|
||||
|
||||
svg {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
.brand-logo {
|
||||
.brand-logo-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-nav-items {
|
||||
border-top: 1px solid var(--l1-border);
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
var(--l1-background) 27.11%
|
||||
);
|
||||
|
||||
.collapse-expand-handlers {
|
||||
svg {
|
||||
color: var(--l2-foreground);
|
||||
fill: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pinned):hover,
|
||||
&.dropdown-open {
|
||||
background: var(--l1-background);
|
||||
|
||||
.nav-wrapper {
|
||||
.nav-top-section {
|
||||
.shortcut-nav-items {
|
||||
.nav-section-title {
|
||||
.nav-section-title-icon {
|
||||
&.reorder {
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-overlay {
|
||||
.ant-dropdown-menu {
|
||||
.ant-dropdown-menu-item {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&:hover:not(.ant-dropdown-menu-item-disabled) {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-items-modal {
|
||||
.ant-modal-content {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.ant-modal-header {
|
||||
background: var(--l1-background);
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.ant-typography {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-items-container {
|
||||
border: 1px solid var(--l1-border);
|
||||
|
||||
.reorder-shortcut-nav-item {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
|
||||
.reorder-shortcut-nav-item-icon {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
.reorder-shortcut-nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-color-picker-trigger {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
> button {
|
||||
background: var(--primary-background) !important;
|
||||
color: var(--primary-foreground) !important;
|
||||
|
||||
&.secondary-btn {
|
||||
background-color: var(--l3-background) !important;
|
||||
border: 1px solid var(--l1-border) !important;
|
||||
|
||||
color: var(--l1-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-tooltip-overlay {
|
||||
.ant-tooltip-inner {
|
||||
background-color: var(--card);
|
||||
|
||||
@@ -50,22 +50,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.linked-spans-container {
|
||||
.item {
|
||||
.item-key {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.value-wrapper {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
|
||||
.item-value {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,11 +18,3 @@
|
||||
letter-spacing: -0.07px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.no-data {
|
||||
.no-data-text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +117,9 @@
|
||||
color: var(--bg-sakura-400);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
|
||||
border-radius: 0 50px 50px 0;
|
||||
|
||||
@@ -193,7 +195,9 @@
|
||||
color: var(--bg-sakura-400);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
}
|
||||
|
||||
.span-percentile-value-loader {
|
||||
@@ -289,7 +293,9 @@
|
||||
color: var(--l1-foreground);
|
||||
text-align: right;
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -301,7 +307,10 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on, 'ss02' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on,
|
||||
'ss02' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -588,7 +597,9 @@
|
||||
background: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
@@ -618,7 +629,9 @@
|
||||
color: var(--l2-foreground);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
|
||||
slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -629,7 +642,9 @@
|
||||
.span-percentile-tooltip-text-percentile {
|
||||
color: var(--text-sakura-500);
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
|
||||
font-feature-settings: 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -670,34 +685,3 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.span-details-drawer {
|
||||
.span-percentile-values-table-data-row {
|
||||
.dashed-line {
|
||||
border-image: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--l1-border) 0,
|
||||
var(--l1-border) 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
)
|
||||
1 stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.current-span-percentile-row {
|
||||
.dashed-line {
|
||||
border-top: 1px dashed var(--primary);
|
||||
border-image: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--primary) 0,
|
||||
var(--primary) 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
)
|
||||
1 stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,33 +72,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.span-logs {
|
||||
&-empty-content {
|
||||
.description {
|
||||
.no-data-text-1 {
|
||||
color: var(--l2-background);
|
||||
|
||||
.no-data-text-2 {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-section {
|
||||
.action-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-background);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--l1-border);
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,25 +55,3 @@
|
||||
letter-spacing: -0.07px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.auto-refresh-root {
|
||||
.ant-popover-inner {
|
||||
border: 1px solid var(--l2-foreground);
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.auto-refresh-checkbox {
|
||||
border-bottom: 1px solid var(--l2-foreground);
|
||||
color: var(--l1-border);
|
||||
}
|
||||
|
||||
.refresh-interval-text {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
|
||||
.refresh-interval-btns {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,62 +237,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light mode styles
|
||||
.lightMode {
|
||||
.add-span-to-funnel-modal-container {
|
||||
.ant-modal {
|
||||
&-content,
|
||||
&-header {
|
||||
background: var(--l1-foreground);
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: var(--l1-background);
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top-color: var(--l1-border);
|
||||
background: var(--l1-foreground);
|
||||
.add-span-to-funnel-modal__discard-button {
|
||||
background: var(--l2-background);
|
||||
color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-span-to-funnel-modal {
|
||||
&__search-input {
|
||||
background: var(--l1-foreground);
|
||||
border: 1px solid var(--l1-border);
|
||||
color: var(--l1-background);
|
||||
|
||||
input {
|
||||
color: var(--l1-background);
|
||||
background: var(--l1-foreground);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__create-button {
|
||||
background: var(--l3-background);
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
&__back-button {
|
||||
color: var(--l1-background);
|
||||
|
||||
&:hover {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__details h3 {
|
||||
color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,14 +26,3 @@
|
||||
border-color: var(--l1-border) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.span-line-action-buttons {
|
||||
border: 1px solid var(--l2-foreground);
|
||||
background: var(--l2-foreground);
|
||||
|
||||
.copy-span-btn {
|
||||
border-color: var(--l2-foreground) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,17 +44,3 @@
|
||||
line-height: 18px; /* 150% */
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.filter-row {
|
||||
.pre-next-toggle {
|
||||
.ant-typography {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -309,7 +309,11 @@
|
||||
top: 40%;
|
||||
font-variant-numeric: lining-nums tabular-nums stacked-fractions
|
||||
slashed-zero;
|
||||
font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
|
||||
font-feature-settings:
|
||||
'case' on,
|
||||
'cpsp' on,
|
||||
'dlig' on,
|
||||
'salt' on;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
@@ -410,61 +414,3 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.success-content {
|
||||
.waterfall-table {
|
||||
.div-td {
|
||||
.span-overview {
|
||||
.span-overview-content {
|
||||
background-color: var(--l2-background);
|
||||
|
||||
.first-row {
|
||||
.collapse-uncollapse-button {
|
||||
border: 1px solid var(--l3-background);
|
||||
background: var(--l3-background);
|
||||
|
||||
.children-count {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.span-name {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.second-row {
|
||||
.service-name {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.interested-span {
|
||||
border-radius: 4px;
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
|
||||
.div-td + .div-td {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.div-th + .div-th {
|
||||
border-left: 1px solid var(--l1-border);
|
||||
}
|
||||
|
||||
.div-thead {
|
||||
background-color: var(--l2-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.span-dets {
|
||||
.related-logs {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,7 +182,9 @@
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease, color 0.15s ease;
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-foreground);
|
||||
@@ -197,26 +199,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.legend-container {
|
||||
.legend-virtuoso-container {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.legend-copy-button {
|
||||
color: var(--l2-background);
|
||||
|
||||
&:hover {
|
||||
color: var(--l1-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.billingPageContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -28,16 +28,3 @@
|
||||
width: 200px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.evaluation-time-selector {
|
||||
.eval-title {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.ant-selector {
|
||||
background-color: var(--l2-background);
|
||||
border: 1px solid var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,19 +110,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.metric-page {
|
||||
.row-panel {
|
||||
.row-panel-section {
|
||||
.row-icon {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,5 +3,5 @@
|
||||
height: 100%;
|
||||
// min-height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
|
||||
@@ -98,51 +98,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.settings-page {
|
||||
.settings-page-header {
|
||||
border-bottom: 1px solid var(--l1-border);
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.settings-page-header-title {
|
||||
color: var(--l1-foreground);
|
||||
|
||||
background: var(--card);
|
||||
border-right: 1px solid var(--l1-border);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-page-content-container {
|
||||
.settings-page-sidenav {
|
||||
border-right: 1px solid var(--l1-border);
|
||||
background: var(--l1-background);
|
||||
|
||||
.nav-item {
|
||||
&.active {
|
||||
.nav-item-data .nav-item-label {
|
||||
color: var(--l1-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-page-content {
|
||||
background: var(--l1-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,10 +17,6 @@ export const Label = styled.label`
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--l1-foreground);
|
||||
|
||||
.lightMode & {
|
||||
color: var(--text-ink-500);
|
||||
}
|
||||
`;
|
||||
|
||||
export const ButtonContainer = styled.div`
|
||||
|
||||
@@ -123,45 +123,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.not-found-trace {
|
||||
.description {
|
||||
.not-found-text-1 {
|
||||
color: var(--l2-background);
|
||||
.not-found-text-2 {
|
||||
color: var(--l2-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reasons {
|
||||
.reason-1 {
|
||||
background: var(--l3-background);
|
||||
.text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
.reason-2 {
|
||||
background: var(--l3-background);
|
||||
|
||||
.text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.none-of-above {
|
||||
.text {
|
||||
color: var(--l2-background);
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
.action-btn {
|
||||
border: 1px solid var(--l1-border);
|
||||
background: var(--l3-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user