ConceptPortal-public/rsconcept/frontend/src/styling/overrides.css
2024-08-02 11:17:39 +03:00

101 lines
1.8 KiB
CSS

/**
* Module: Override imported components CSS styling.
*/
@import './constants.css';
@import './imports.css';
:root {
/* Import overrides */
--toastify-color-dark: var(--cd-bg-60);
}
.cm-editor {
resize: vertical;
overflow-y: auto;
overscroll-behavior-y: contain;
border-color: var(--cl-bg-40);
.dark & {
border-color: var(--cd-bg-40);
}
@apply border rounded px-[0.375rem] py-[0.15rem];
}
.cm-editor.cm-focused {
border-color: var(--cl-bg-40);
outline-color: var(--cl-prim-bg-100);
.dark & {
border-color: var(--cd-bg-40);
outline-color: var(--cd-prim-bg-100);
}
@apply outline-2 outline;
}
.cm-editor .cm-placeholder {
color: var(--cl-fg-60);
.dark & {
color: var(--cd-fg-60);
}
}
.react-flow__handle {
cursor: default !important;
border-color: var(--cl-bg-40);
background-color: var(--cl-bg-120);
.selected & {
border-color: var(--cd-bg-40);
}
.dark & {
border-color: var(--cd-bg-40);
background-color: var(--cd-bg-120);
.selected & {
border-color: var(--cl-bg-40);
}
}
}
.react-flow__pane {
cursor: default;
}
:is(.react-flow__node-input, .react-flow__node-synthesis) {
cursor: pointer;
border: 1px solid;
padding: 2px;
width: 150px;
height: 30px;
font-size: 14px;
border-radius: 5px;
background-color: var(--cl-bg-120);
color: var(--cl-fg-100);
border-color: var(--cl-bg-40);
background-color: var(--cl-bg-120);
&:hover:not(.selected) {
box-shadow: 0 0 0 2px var(--cl-prim-bg-80) !important;
}
&.selected {
border-color: var(--cd-bg-40);
}
.dark & {
color: var(--cd-fg-100);
border-color: var(--cd-bg-40);
background-color: var(--cd-bg-120);
&:hover:not(.selected) {
box-shadow: 0 0 0 3px var(--cd-prim-bg-80) !important;
}
&.selected {
border-color: var(--cl-bg-40);
}
}
}