mirror of
https://github.com/SigNoz/signoz.git
synced 2025-12-17 23:47:12 +00:00
feat: update styles for light mode
This commit is contained in:
Yunus M
SagarRajput-7
parent
52656b2ee8
commit
48cdf439a9
@ -71,3 +71,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.input-with-label {
|
||||
.label {
|
||||
color: var(--bg-ink-500) !important;
|
||||
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
&.labelAfter {
|
||||
.input {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ function InputWithLabel({
|
||||
type={type}
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
name={label.toLowerCase()}
|
||||
/>
|
||||
{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
|
||||
{onClose && (
|
||||
|
||||
@ -420,3 +420,126 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-builder-v2 {
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
border-top: 1px solid var(--bg-vanilla-300);
|
||||
|
||||
.qb-content-section {
|
||||
.qb-elements-container {
|
||||
.code-mirror-where-clause,
|
||||
.query-aggregation-container,
|
||||
.query-add-ons,
|
||||
.metrics-aggregation-section-content {
|
||||
&::before {
|
||||
border-left: 6px dotted var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
/* Horizontal line pointing from vertical to the item */
|
||||
&::after {
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--bg-vanilla-300),
|
||||
var(--bg-vanilla-300) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-names-section {
|
||||
border-left: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
.qb-formulas-container {
|
||||
.qb-formula {
|
||||
.formula-container {
|
||||
.ant-col {
|
||||
&::before {
|
||||
border-left: 6px dotted var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
/* Horizontal line pointing from vertical to the item */
|
||||
&::after {
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--bg-vanilla-300),
|
||||
var(--bg-vanilla-300) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qb-footer {
|
||||
.qb-footer-container {
|
||||
.qb-add-new-query {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-vanilla-300),
|
||||
var(--bg-vanilla-300) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qb-entity-options {
|
||||
.options {
|
||||
.query-name {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-vanilla-300),
|
||||
var(--bg-vanilla-300) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.formula-name {
|
||||
&::before {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--bg-vanilla-300),
|
||||
var(--bg-vanilla-300) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-data-source {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qb-search-filter-container {
|
||||
.ant-select-selector {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: var(--bg-vanilla-400) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,6 +87,10 @@
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
|
||||
&.cm-focused {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--Slate-400, #1d212d);
|
||||
@ -102,6 +106,7 @@
|
||||
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--bg-ink-300) !important;
|
||||
color: var(--bg-ink-500) !important;
|
||||
border-radius: 2px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 500 !important;
|
||||
@ -264,3 +269,106 @@
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.add-ons-list {
|
||||
.add-ons-tabs {
|
||||
.add-on-tab-title {
|
||||
color: var(--bg-ink-500) !important;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid var(--bg-vanilla-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab::before {
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
.selected-view {
|
||||
color: var(--bg-robin-500) !important;
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
.selected-view::before {
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.compass-button {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.having-filter-container {
|
||||
.having-filter-select-container {
|
||||
.having-filter-select-editor {
|
||||
.cm-editor {
|
||||
&:focus-within {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
color: var(--bg-ink-500) !important;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:hover {
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
color: var(--bg-ink-500) !important;
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--bg-ink-100) !important;
|
||||
}
|
||||
|
||||
.chip-decorator {
|
||||
background: var(--bg-robin-100) !important;
|
||||
color: var(--bg-ink-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-selectionBackground {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,6 +53,10 @@
|
||||
background-color: transparent !important;
|
||||
position: relative !important;
|
||||
|
||||
&.cm-focused {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
@ -195,3 +199,87 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.query-aggregation-container {
|
||||
.aggregation-container {
|
||||
.query-aggregation-options-input {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--bg-ink-400) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.query-aggregation-select-container {
|
||||
.query-aggregation-select-editor {
|
||||
.cm-editor {
|
||||
.cm-content {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
color: var(--bg-ink-500) !important;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:hover {
|
||||
background-color: var(--bg-vanilla-300) !important;
|
||||
color: var(--bg-ink-500) !important;
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
color: var(--bg-ink-500) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
.cm-function {
|
||||
color: var(--bg-robin-500) !important;
|
||||
}
|
||||
|
||||
.chip-decorator {
|
||||
background: var(--bg-robin-500) !important;
|
||||
color: var(--bg-ink-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .cm-selectionBackground {
|
||||
// background: var(--bg-vanilla-100) !important;
|
||||
// opacity: 0.5 !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +66,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.cm-focused {
|
||||
outline: 1px solid var(--bg-slate-200);
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--bg-ink-300) !important;
|
||||
border-radius: 2px !important;
|
||||
@ -78,7 +82,7 @@
|
||||
left: 0px !important;
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bg-slate-200, #1d212d);
|
||||
border: 0px;
|
||||
background: linear-gradient(
|
||||
139deg,
|
||||
rgba(18, 19, 23, 0.8) 0%,
|
||||
@ -441,76 +445,265 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
:global(.darkMode) {
|
||||
// /* Dark mode support */
|
||||
// :global(.darkMode) {
|
||||
// .code-mirror-where-clause {
|
||||
// .cm-editor {
|
||||
// border-color: var(--bg-slate-500);
|
||||
// background-color: var(--bg-ink-400);
|
||||
// }
|
||||
|
||||
// .cursor-position {
|
||||
// background-color: var(--bg-ink-400);
|
||||
// color: var(--bg-vanilla-100);
|
||||
// }
|
||||
|
||||
// .query-context {
|
||||
// background-color: var(--bg-ink-400);
|
||||
// color: var(--bg-vanilla-100);
|
||||
|
||||
// h3 {
|
||||
// color: var(--bg-vanilla-100);
|
||||
// }
|
||||
|
||||
// .context-details {
|
||||
// p {
|
||||
// strong {
|
||||
// color: var(--bg-vanilla-200);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .query-examples-card {
|
||||
// background-color: var(--bg-ink-400);
|
||||
// border-color: var(--bg-slate-500);
|
||||
|
||||
// .ant-collapse-header {
|
||||
// color: var(--bg-vanilla-100) !important;
|
||||
// }
|
||||
|
||||
// .query-example-tag {
|
||||
// background-color: var(--bg-ink-400);
|
||||
// border-color: var(--bg-slate-500);
|
||||
|
||||
// &:hover {
|
||||
// background-color: var(--bg-ink-300);
|
||||
// border-color: var(--bg-robin-500);
|
||||
// }
|
||||
|
||||
// .query-example-label {
|
||||
// color: var(--bg-vanilla-100);
|
||||
// }
|
||||
|
||||
// .query-example-query {
|
||||
// color: var(--bg-vanilla-100);
|
||||
// background-color: var(--bg-ink-300);
|
||||
// }
|
||||
|
||||
// .query-example-description {
|
||||
// color: var(--bg-vanilla-100);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .context-indicator {
|
||||
// background-color: var(--bg-ink-300);
|
||||
// color: var(--bg-vanilla-100);
|
||||
|
||||
// .query-pair-info {
|
||||
// border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
// background-color: rgba(255, 255, 255, 0.05);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.lightMode {
|
||||
.code-mirror-where-clause {
|
||||
.query-where-clause-editor-container {
|
||||
.query-status-container {
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
border: 1px solid var(--bg-vanilla-300);
|
||||
|
||||
&.hasErrors {
|
||||
border-color: var(--bg-cherry-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-where-clause-editor {
|
||||
&.hasErrors {
|
||||
.cm-editor {
|
||||
.cm-content {
|
||||
border-color: var(--bg-cherry-500);
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-editor {
|
||||
border-color: var(--bg-slate-500);
|
||||
background-color: var(--bg-ink-400);
|
||||
&:focus-within {
|
||||
border-color: var(--bg-robin-500);
|
||||
}
|
||||
|
||||
&.cm-focused {
|
||||
outline: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--bg-vanilla-300);
|
||||
padding: 0px !important;
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--bg-vanilla-200);
|
||||
}
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
|
||||
border: 0px;
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
ul {
|
||||
li {
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
color: var(--bg-ink-300) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-vanilla-200) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
background-color: var(--bg-vanilla-100) !important;
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-selectionBackground {
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-position {
|
||||
background-color: var(--bg-ink-400);
|
||||
color: var(--bg-vanilla-100);
|
||||
color: var(--bg-vanilla-200);
|
||||
background-color: var(--bg-vanilla-100);
|
||||
}
|
||||
|
||||
.query-context {
|
||||
background-color: var(--bg-ink-400);
|
||||
color: var(--bg-vanilla-100);
|
||||
background-color: var(--bg-vanilla-100);
|
||||
border-left: 3px solid var(--bg-vanilla-300);
|
||||
color: var(--bg-vanilla-300) !important;
|
||||
|
||||
h3 {
|
||||
color: var(--bg-vanilla-100);
|
||||
.ant-card-head {
|
||||
color: var(--bg-ink-300) !important;
|
||||
}
|
||||
|
||||
.context-details {
|
||||
p {
|
||||
strong {
|
||||
color: var(--bg-vanilla-200);
|
||||
color: var(--bg-ink-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-examples-card {
|
||||
background-color: var(--bg-ink-400);
|
||||
border-color: var(--bg-slate-500);
|
||||
background-color: var(--bg-vanilla-100);
|
||||
border: 1px solid var(--bg-vanilla-300);
|
||||
|
||||
.ant-collapse-header {
|
||||
color: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.query-example-tag {
|
||||
background-color: var(--bg-ink-400);
|
||||
border-color: var(--bg-slate-500);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-ink-300);
|
||||
border-color: var(--bg-robin-500);
|
||||
.query-examples {
|
||||
.ant-collapse-header {
|
||||
color: var(--bg-ink-300) !important;
|
||||
}
|
||||
|
||||
.query-example-label {
|
||||
color: var(--bg-vanilla-100);
|
||||
}
|
||||
.query-example-tag {
|
||||
background-color: var(--bg-vanilla-100);
|
||||
border: 1px solid var(--bg-vanilla-300);
|
||||
|
||||
.query-example-query {
|
||||
color: var(--bg-vanilla-100);
|
||||
background-color: var(--bg-ink-300);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-vanilla-200);
|
||||
border-color: var(--bg-vanilla-300);
|
||||
}
|
||||
|
||||
.query-example-description {
|
||||
color: var(--bg-vanilla-100);
|
||||
.query-example-label {
|
||||
color: var(--bg-ink-300);
|
||||
}
|
||||
|
||||
.query-example-query {
|
||||
color: var(--bg-ink-300);
|
||||
background-color: var(--bg-vanilla-100);
|
||||
}
|
||||
|
||||
.query-example-description {
|
||||
color: var(--bg-ink-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-indicator {
|
||||
background-color: var(--bg-ink-300);
|
||||
color: var(--bg-vanilla-100);
|
||||
background-color: var(--bg-vanilla-100);
|
||||
border-left: 4px solid var(--bg-vanilla-300);
|
||||
|
||||
display: none;
|
||||
|
||||
.query-pair-info {
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
// Color variations based on context
|
||||
&.context-indicator-key {
|
||||
border-left-color: #1890ff; // blue
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
&.context-indicator-operator {
|
||||
border-left-color: #722ed1; // purple
|
||||
background-color: rgba(114, 46, 209, 0.1);
|
||||
}
|
||||
|
||||
&.context-indicator-value {
|
||||
border-left-color: #52c41a; // green
|
||||
background-color: rgba(82, 196, 26, 0.1);
|
||||
}
|
||||
|
||||
&.context-indicator-conjunction {
|
||||
border-left-color: #fa8c16; // orange
|
||||
background-color: rgba(250, 140, 22, 0.1);
|
||||
}
|
||||
|
||||
&.context-indicator-function {
|
||||
border-left-color: #13c2c2; // cyan
|
||||
background-color: rgba(19, 194, 194, 0.1);
|
||||
}
|
||||
|
||||
&.context-indicator-parenthesis {
|
||||
border-left-color: #eb2f96; // magenta
|
||||
background-color: rgba(235, 47, 150, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-status-popover {
|
||||
.ant-popover-content {
|
||||
background: var(--bg-vanilla-100);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
transition: left 0.2s linear;
|
||||
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--Slate-500, #161922);
|
||||
background: var(--Ink-300, #16181d);
|
||||
|
||||
display: flex;
|
||||
@ -64,6 +63,7 @@
|
||||
.explorer-options {
|
||||
padding: 10px 12px;
|
||||
background: var(--Ink-300, #16181d);
|
||||
border-radius: 2px;
|
||||
|
||||
cursor: default;
|
||||
display: flex;
|
||||
@ -232,6 +232,10 @@
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.explorer-options-container {
|
||||
background: var(--bg-vanilla-100);
|
||||
}
|
||||
|
||||
.explorer-options {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
@ -127,32 +127,36 @@
|
||||
|
||||
.lightMode {
|
||||
.left-toolbar {
|
||||
.filter-btn {
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
.left-toolbar-query-actions {
|
||||
border-color: var(--bg-vanilla-300);
|
||||
background: var(--bg-vanilla-100);
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
|
||||
.ant-btn {
|
||||
border-color: var(--bg-vanilla-300);
|
||||
background: var(--bg-vanilla-100);
|
||||
color: var(--bg-ink-200);
|
||||
border-color: var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
color: var(--bg-ink-200) !important;
|
||||
|
||||
&.active-tab {
|
||||
background-color: var(--bg-robin-100);
|
||||
background-color: var(--bg-robin-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.loading-container {
|
||||
.loading-btn {
|
||||
background: var(--bg-vanilla-300);
|
||||
background: var(--bg-vanilla-300) !important;
|
||||
}
|
||||
|
||||
.cancel-run {
|
||||
color: var(--bg-vanilla-100);
|
||||
color: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.cancel-run:hover {
|
||||
background-color: #ff7875;
|
||||
background-color: #ff7875 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,3 +38,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.toolbar {
|
||||
border-top: 1px solid var(--bg-vanilla-300);
|
||||
border-bottom: 1px solid var(--bg-vanilla-300);
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,4 +154,23 @@
|
||||
background: var(--bg-vanilla-100);
|
||||
color: var(--bg-ink-200);
|
||||
}
|
||||
|
||||
.periscope-input-with-label {
|
||||
.label {
|
||||
color: var(--bg-ink-500) !important;
|
||||
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
border: 1px solid var(--bg-vanilla-300) !important;
|
||||
background: var(--bg-vanilla-100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user