feat: added theming to the debug log page
parent
adf370997e
commit
1e9aa04747
@ -1,103 +0,0 @@
|
||||
.dark-theme {
|
||||
// _debugLog
|
||||
|
||||
// TODO Theming - Most of this should be removed when the debug window is properly styled
|
||||
.debug-log {
|
||||
&.modal {
|
||||
.content {
|
||||
textarea {
|
||||
background-color: var(--input-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--input-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
.open {
|
||||
textarea {
|
||||
background-color: var(--input-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--input-text-color);
|
||||
|
||||
&:before {
|
||||
@include color-svg('../images/open_link.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--text-primary-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-right: none;
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// _global
|
||||
.title-bar {
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
|
||||
// TODO Theming - Do we still use this?
|
||||
button.grey {
|
||||
border: 1px solid var(--color-light-gray-color);
|
||||
color: var(--color-gray-color);
|
||||
background: var(--color-lightest-gray-color);
|
||||
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: relative;
|
||||
// TODO Theming - Review
|
||||
&::before {
|
||||
border: 3px solid;
|
||||
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
|
||||
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.x {
|
||||
&:before {
|
||||
@include color-svg('../images/x.svg', var(--white-color));
|
||||
}
|
||||
}
|
||||
|
||||
// TODO Theming - Do we use this anywhere?
|
||||
// .hint {
|
||||
// color: var(--color-white-color);
|
||||
// border: 2px dashed var(--color-white-color);
|
||||
|
||||
// &.firstRun {
|
||||
// &:before,
|
||||
// &:after {
|
||||
// border: solid 10px var(--color-white-color);
|
||||
// border-color: transparent var(--color-white-color) transparent transparent;
|
||||
// }
|
||||
// &:after {
|
||||
// border-color: transparent var(--color-dark-blue-color) transparent transparent;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// TODO Theming - I don't think we use this.
|
||||
// .contact.placeholder {
|
||||
// color: var(--color-white-color);
|
||||
// border: 2px dashed var(--color-white-color);
|
||||
// p {
|
||||
// color: var(--color-white-color);
|
||||
// }
|
||||
// &:before,
|
||||
// &:after {
|
||||
// border: solid 10px var(--color-white-color);
|
||||
// border-color: transparent transparent var(--color-white-color) transparent;
|
||||
// }
|
||||
// &:after {
|
||||
// border-color: transparent transparent var(--color-dark-blue-color) transparent;
|
||||
// }
|
||||
}
|
||||
}
|
@ -1,6 +1,4 @@
|
||||
import React from 'react';
|
||||
import { DebugLogView } from '../components/DebugLogView';
|
||||
|
||||
global.setTimeout(() => {
|
||||
window.ReactDOM.render(<DebugLogView />, document.getElementById('root'));
|
||||
}, 1000);
|
||||
window.ReactDOM.render(<DebugLogView />, document.getElementById('root'));
|
||||
|
Loading…
Reference in New Issue