Move all colours to CSS variables

This commit is contained in:
Mauricio Bonani
2022-06-18 16:05:25 -04:00
parent fc5a5f1b73
commit 3a2fa4073a
43 changed files with 1162 additions and 941 deletions

View File

@@ -17,7 +17,7 @@
.red-ui-debug-window {
padding:0;
margin:0;
background: $secondary-background;
background: var(--red-ui-secondary-background);
line-height: 20px;
.red-ui-debug-msg-payload {
font-size: 14px;
@@ -38,15 +38,15 @@
left: 0px;
right: 0px;
z-index: 20;
background: $tertiary-background;
background: var(--red-ui-tertiary-background);
padding: 10px;
border-bottom: 1px solid $secondary-border-color;
box-shadow: 0 2px 6px $shadow;
border-bottom: 1px solid var(--red-ui-secondary-border-color);
box-shadow: 0 2px 6px var(--red-ui-shadow);
}
#red-ui-sidebar-debug-filter-node-list-row {
.red-ui-treeList-label.disabled {
font-style: italic;
color: $secondary-text-color-disabled;
color: var(--red-ui-secondary-text-color-disabled);
}
.red-ui-treeList-label {
@@ -57,22 +57,22 @@
background: inherit;
}
&.focus, &.focus .red-ui-treeList-sublabel-text {
background: $list-item-background-hover !important;
background: var(--red-ui-list-item-background-hover) !important;
}
}
}
.red-ui-debug-msg {
position: relative;
border-bottom: 1px solid $debug-message-border;
border-left: 8px solid $debug-message-border;
border-right: 8px solid $debug-message-border;
border-bottom: 1px solid var(--red-ui-debug-message-border);
border-left: 8px solid var(--red-ui-debug-message-border);
border-right: 8px solid var(--red-ui-debug-message-border);
padding: 2px;
&>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
display: none;
}
&.red-ui-debug-msg-hover {
border-right-color: $debug-message-border-hover;
border-right-color: var(--red-ui-debug-message-border-hover);
&>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
display: inline-block;
}
@@ -86,7 +86,7 @@
display: inline-block;
}
&:hover {
background: $debug-message-background-hover;
background: var(--red-ui-debug-message-background-hover);
&>.red-ui-debug-msg-tools {
.red-ui-debug-msg-tools-copy {
display: inline-block;
@@ -120,9 +120,9 @@
}
.red-ui-debug-msg-meta {
background: $debug-message-background;
background: var(--red-ui-debug-message-background);
font-size: 11px;
color: $secondary-text-color-inactive;
color: var(--red-ui-secondary-text-color-inactive);
overflow-wrap: anywhere;
}
.red-ui-debug-msg-date {
@@ -131,11 +131,11 @@
}
.red-ui-debug-msg-topic {
display: block;
color: $debug-message-text-color-meta;
color: var(--red-ui-debug-message-text-color-meta);
}
.red-ui-debug-msg-name {
padding: 1px 0px;
color: $secondary-text-color-inactive;
color: var(--red-ui-secondary-text-color-inactive);
white-space: nowrap;
}
.red-ui-debug-msg-tools {
@@ -152,39 +152,39 @@
.red-ui-debug-msg-payload {
display: block;
padding: 2px;
background: $debug-message-background;
font-family: $monospace-font;
background: var(--red-ui-debug-message-background);
font-family: var(--red-ui-monospace-font);
font-size: 13px !important;
}
.red-ui-debug-msg-level-log {
border-left-color: $debug-message-border;
border-right-color: $debug-message-border;
border-left-color: var(--red-ui-debug-message-border);
border-right-color: var(--red-ui-debug-message-border);
}
.red-ui-debug-msg-level-30 {
border-left-color: $debug-message-border-warning;
border-right-color: $debug-message-border-warning;
border-left-color: var(--red-ui-debug-message-border-warning);
border-right-color: var(--red-ui-debug-message-border-warning);
}
.red-ui-debug-msg-level-20 {
border-left-color: $debug-message-border-error;
border-right-color: $debug-message-border-error;
border-left-color: var(--red-ui-debug-message-border-error);
border-right-color: var(--red-ui-debug-message-border-error);
}
.red-ui-debug-msg-object-entry {
position: relative;
padding-left: 15px;
}
.red-ui-debug-msg-element {
color: $debug-message-text-color;
color: var(--red-ui-debug-message-text-color);
line-height: 1.3em;
overflow-wrap: break-word;
}
.red-ui-debug-msg-object-key {
color: $debug-message-text-color-object-key;
color: var(--red-ui-debug-message-text-color-object-key);
}
.red-ui-debug-msg-object-value {
}
.red-ui-debug-msg-object-handle {
color: $secondary-text-color;
color: var(--red-ui-secondary-text-color);
font-size: 1em;
width: 1em;
text-align: center;
@@ -219,17 +219,17 @@
display:none;
}
.red-ui-debug-msg-object-entry pre {
font-family: $monospace-font;
font-family: var(--red-ui-monospace-font);
font-size: 13px;
line-height: 1.2em;
margin: 0 0 0 -1em;
}
.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
.red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
.red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;}
.red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
.red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); }
.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-type-string {
@@ -241,14 +241,14 @@
padding: 4px 2px 2px;
position: relative;
&.red-ui-debug-msg-row-pinned {
background: $secondary-background-selected;
background: var(--red-ui-secondary-background-selected);
}
}
.red-ui-debug-msg-expandable {
cursor: pointer;
}
.red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
color:$secondary-text-color-hover;
color:var(--red-ui-secondary-text-color-hover);
}
.red-ui-debug-msg-buffer-opts {