mirror of
https://github.com/SigNoz/signoz.git
synced 2026-03-20 03:30:26 +00:00
2316b5be83
Some checks failed
build-staging / prepare (push) Has been cancelled
build-staging / js-build (push) Has been cancelled
build-staging / go-build (push) Has been cancelled
build-staging / staging (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
* Revert "Revert "feat: Option to zoom out OR reset zoom in the explorer pages (#10464)" (#10574)"
This reverts commit 5b8d5fbfd3.
* fix: stop bubble
350 lines
5.8 KiB
SCSS
350 lines
5.8 KiB
SCSS
.custom-time-picker {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
.zoom-out-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: var(--foreground);
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
box-shadow: none;
|
|
padding: 10px;
|
|
height: 33px;
|
|
|
|
&:hover:not(:disabled) {
|
|
color: var(--bg-vanilla-100);
|
|
background: var(--primary);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.timeSelection-input {
|
|
&:hover {
|
|
border-color: #1d212d !important;
|
|
}
|
|
}
|
|
|
|
.time-input-suffix {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.time-options-container {
|
|
.time-options-item {
|
|
margin: 2px 0;
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
|
|
&.active {
|
|
background-color: rgba($color: #000000, $alpha: 0.2);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: rgba($color: #000000, $alpha: 0.3);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: rgba($color: #000000, $alpha: 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.time-selection-dropdown-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.timeSelection-input {
|
|
display: flex;
|
|
gap: 8px;
|
|
height: 33px;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
padding-left: 0px !important;
|
|
|
|
input {
|
|
width: 280px;
|
|
|
|
&::placeholder {
|
|
color: white;
|
|
}
|
|
|
|
&:focus::placeholder {
|
|
color: rgba($color: #ffffff, $alpha: 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.valid-format-error {
|
|
margin-top: 4px;
|
|
color: var(--bg-cherry-400) !important;
|
|
font-size: 13px !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
.info-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
cursor: default;
|
|
color: var(--bg-vanilla-400, #c0c1c3) !important;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: 0.14px;
|
|
}
|
|
|
|
.info-text:hover {
|
|
&.ant-btn-text {
|
|
background-color: unset !important;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.info-text {
|
|
color: var(--bg-slate-400) !important;
|
|
}
|
|
}
|
|
|
|
.date-time-popover__footer {
|
|
border-top: 1px solid var(--bg-ink-200);
|
|
padding: 8px 14px;
|
|
.timezone-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
|
|
.timezone__name {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: var(--bg-robin-400);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.timezone__separator {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: var(--bg-robin-300);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.timezone__offset {
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
color: var(--bg-robin-400);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
&,
|
|
.timezone {
|
|
font-family: Inter;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: -0.06px;
|
|
}
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--bg-vanilla-400);
|
|
gap: 6px;
|
|
|
|
.timezone {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 2px;
|
|
background: rgba(171, 189, 255, 0.04);
|
|
cursor: pointer;
|
|
padding: 0px 4px;
|
|
color: var(--bg-vanilla-100);
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timezone-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
border-radius: 2px;
|
|
color: var(--bg-vanilla-400);
|
|
background-color: var(--bg-ink-200);
|
|
font-size: 9px;
|
|
font-weight: 400;
|
|
line-height: 12px;
|
|
letter-spacing: -0.045px;
|
|
margin-right: 4px;
|
|
width: 72px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-input-prefix {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
|
|
width: 36px;
|
|
|
|
font-size: 11px;
|
|
color: var(--bg-vanilla-400);
|
|
background-color: var(--bg-ink-200);
|
|
cursor: pointer;
|
|
|
|
&.is-live {
|
|
background-color: transparent;
|
|
color: var(--bg-forest-500);
|
|
}
|
|
|
|
.live-dot-icon {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--bg-forest-500);
|
|
animation: ripple 1s infinite;
|
|
|
|
margin-right: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
|
|
}
|
|
60% {
|
|
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
|
|
}
|
|
}
|
|
|
|
.time-input-suffix-icon-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
border-radius: 2px;
|
|
background: rgba(171, 189, 255, 0.04);
|
|
color: var(--bg-vanilla-100);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 16px;
|
|
letter-spacing: -0.06px;
|
|
cursor: pointer;
|
|
height: 20px;
|
|
width: 20px;
|
|
|
|
&:hover {
|
|
background: rgba(171, 189, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
.lightMode {
|
|
.date-time-popover__footer {
|
|
border-color: var(--bg-vanilla-400);
|
|
}
|
|
|
|
.timezone-container {
|
|
color: var(--bg-ink-400);
|
|
|
|
.timezone {
|
|
color: var(--bg-ink-100);
|
|
background: rgb(179 179 179 / 15%);
|
|
&__icon {
|
|
stroke: var(--bg-ink-100);
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-time-picker {
|
|
.timeSelection-input {
|
|
&:hover {
|
|
border-color: var(--bg-vanilla-300) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timezone-badge {
|
|
color: var(--bg-ink-100);
|
|
background: rgb(179 179 179 / 15%);
|
|
}
|
|
|
|
.time-input-prefix {
|
|
background-color: var(--bg-vanilla-300);
|
|
color: var(--bg-ink-400);
|
|
}
|
|
|
|
.time-input-suffix-icon-badge {
|
|
color: var(--bg-ink-100);
|
|
background: rgb(179 179 179 / 15%);
|
|
|
|
&:hover {
|
|
background: rgb(179 179 179 / 20%);
|
|
}
|
|
}
|
|
}
|