mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
362 lines
7.1 KiB
CSS
362 lines
7.1 KiB
CSS
@import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* prettier-ignore */
|
|
:root {
|
|
--font-ui: 'Geologica', sans-serif;
|
|
--font-main: 'Rubik', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
|
|
--font-math: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
|
|
|
|
/* Light Theme */
|
|
--cl-bg-120: hsl(000, 000%, 100%);
|
|
--cl-bg-100: hsl(000, 000%, 098%);
|
|
--cl-bg-80: hsl(000, 000%, 094%);
|
|
--cl-bg-60: hsl(000, 000%, 091%);
|
|
--cl-bg-40: hsl(000, 000%, 080%);
|
|
|
|
--cl-fg-60: hsl(000, 000%, 065%);
|
|
--cl-fg-80: hsl(000, 000%, 047%);
|
|
--cl-fg-100: hsl(000, 000%, 000%);
|
|
|
|
--cl-prim-bg-100: hsl(220, 100%, 060%);
|
|
--cl-prim-bg-80: hsl(220, 080%, 092%);
|
|
--cl-prim-bg-60: hsl(190, 080%, 094%);
|
|
|
|
--cl-prim-fg-80: hsl(220, 100%, 050%);
|
|
--cl-prim-fg-100: hsl(000, 000%, 100%);
|
|
|
|
--cl-red-bg-100: hsl(000, 100%, 095%);
|
|
--cl-red-fg-100: hsl(000, 072%, 051%);
|
|
--cl-green-fg-100: hsl(120, 080%, 37%);
|
|
|
|
/* Dark Theme */
|
|
--cd-bg-120: hsl(000, 000%, 005%);
|
|
--cd-bg-100: hsl(000, 000%, 009%);
|
|
--cd-bg-80: hsl(000, 000%, 015%);
|
|
--cd-bg-60: hsl(000, 000%, 022%);
|
|
--cd-bg-40: hsl(000, 000%, 035%);
|
|
|
|
--cd-fg-60: hsl(000, 000%, 055%);
|
|
--cd-fg-80: hsl(000, 000%, 080%);
|
|
--cd-fg-100: hsl(000, 000%, 093%);
|
|
|
|
--cd-prim-bg-100: hsl(267, 050%, 050%);
|
|
--cd-prim-bg-80: hsl(267, 050%, 032%);
|
|
--cd-prim-bg-60: hsl(269, 030%, 028%);
|
|
|
|
--cd-prim-fg-80: hsl(267, 070%, 070%);
|
|
--cd-prim-fg-100: hsl(000, 000%, 100%);
|
|
|
|
--cd-red-bg-100: hsl(000, 100%, 015%);
|
|
--cd-red-fg-100: hsl(000, 080%, 055%);
|
|
--cd-green-fg-100: hsl(120, 080%, 042%);
|
|
|
|
/* Import overrides */
|
|
--toastify-color-dark: var(--cd-bg-60);
|
|
}
|
|
|
|
/* Depth layers */
|
|
.z-bottom {
|
|
z-index: 0;
|
|
}
|
|
.z-pop {
|
|
z-index: 10;
|
|
}
|
|
:is(.z-sticky, .sticky) {
|
|
z-index: 20;
|
|
}
|
|
.z-tooltip {
|
|
z-index: 30;
|
|
}
|
|
.z-navigation {
|
|
z-index: 50;
|
|
}
|
|
.z-modal {
|
|
z-index: 60;
|
|
}
|
|
.z-modal-controls {
|
|
z-index: 70;
|
|
}
|
|
.z-modal-top {
|
|
z-index: 80;
|
|
}
|
|
.z-modal-tooltip {
|
|
z-index: 90;
|
|
}
|
|
.z-topmost {
|
|
z-index: 99;
|
|
}
|
|
|
|
:root {
|
|
font-family: var(--font-main);
|
|
|
|
color: var(--cl-fg-100);
|
|
border-color: var(--cl-bg-40);
|
|
background-color: var(--cl-bg-100);
|
|
|
|
&.dark {
|
|
color: var(--cd-fg-100);
|
|
border-color: var(--cd-bg-40);
|
|
background-color: var(--cd-bg-100);
|
|
}
|
|
}
|
|
|
|
:focus {
|
|
outline-width: 2px;
|
|
outline-style: solid;
|
|
outline-color: transparent;
|
|
.dark & {
|
|
outline-color: transparent;
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background: var(--cl-prim-bg-60);
|
|
.dark & {
|
|
background: var(--cd-prim-bg-60);
|
|
}
|
|
tr :hover& {
|
|
background: var(--cl-red-bg-100);
|
|
.dark & {
|
|
background: var(--cd-red-bg-100);
|
|
}
|
|
}
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--cl-fg-60);
|
|
.dark & {
|
|
color: var(--cd-fg-60);
|
|
}
|
|
}
|
|
|
|
[data-color-scheme='dark'] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-color-scheme='light'] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-controls {
|
|
font-family: var(--font-ui);
|
|
font-weight: 600;
|
|
font-variant: small-caps;
|
|
}
|
|
.font-math {
|
|
font-family: var(--font-math);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
h1 {
|
|
@apply text-lg font-semibold text-center;
|
|
}
|
|
|
|
h2 {
|
|
@apply font-semibold text-center;
|
|
}
|
|
|
|
b {
|
|
@apply font-semibold;
|
|
}
|
|
|
|
.border {
|
|
@apply rounded;
|
|
}
|
|
|
|
.shadow-border {
|
|
@apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
|
|
}
|
|
|
|
.clr-modal-backdrop {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
:is(
|
|
.clr-border,
|
|
.border,
|
|
.border-x,
|
|
.border-y,
|
|
.border-b,
|
|
.border-t,
|
|
.border-l,
|
|
.border-r,
|
|
.border-2,
|
|
.border-x-2,
|
|
.border-y-2,
|
|
.border-b-2,
|
|
.border-t-2,
|
|
.border-l-2,
|
|
.border-r-2,
|
|
.divide-x,
|
|
.divide-y,
|
|
.divide-x-2,
|
|
.divide-y-2
|
|
) {
|
|
border-color: var(--cl-bg-40);
|
|
@apply divide-inherit;
|
|
.dark & {
|
|
border-color: var(--cd-bg-40);
|
|
}
|
|
}
|
|
|
|
:is(.clr-app, .clr-footer, .clr-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
|
|
background-color: var(--cl-bg-100);
|
|
.dark & {
|
|
background-color: var(--cd-bg-100);
|
|
}
|
|
}
|
|
|
|
:is(.clr-input) {
|
|
background-color: var(--cl-bg-120);
|
|
.dark & {
|
|
background-color: var(--cd-bg-120);
|
|
}
|
|
}
|
|
|
|
:is(.clr-controls, .clr-tab, .clr-btn-default) {
|
|
background-color: var(--cl-bg-80);
|
|
.dark & {
|
|
background-color: var(--cd-bg-80);
|
|
}
|
|
}
|
|
|
|
:is(.clr-primary, .clr-btn-primary:hover, .clr-btn-primary:focus) {
|
|
@apply transition;
|
|
color: var(--cl-prim-fg-100);
|
|
background-color: var(--cl-prim-bg-100);
|
|
.dark & {
|
|
color: var(--cd-prim-fg-100);
|
|
background-color: var(--cd-prim-bg-100);
|
|
}
|
|
}
|
|
|
|
:is(.clr-selected, .clr-btn-primary) {
|
|
color: var(--cl-fg-100);
|
|
background-color: var(--cl-prim-bg-80);
|
|
.dark & {
|
|
color: var(--cd-fg-100);
|
|
background-color: var(--cd-prim-bg-80);
|
|
}
|
|
}
|
|
|
|
:is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
|
|
@apply transition;
|
|
color: var(--cl-fg-80);
|
|
background-color: var(--cl-bg-60);
|
|
.dark & {
|
|
color: var(--cd-fg-80);
|
|
background-color: var(--cd-bg-60);
|
|
}
|
|
}
|
|
|
|
:is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
|
|
@apply transition;
|
|
color: var(--cl-fg-100);
|
|
background-color: var(--cl-prim-bg-60);
|
|
.dark & {
|
|
color: var(--cd-fg-100);
|
|
background-color: var(--cd-prim-bg-60);
|
|
}
|
|
}
|
|
|
|
:is(.clr-outline, .clr-btn-primary):focus {
|
|
outline-width: 2px;
|
|
outline-style: solid;
|
|
outline-color: var(--cl-prim-bg-100);
|
|
.dark & {
|
|
outline-color: var(--cd-prim-bg-100);
|
|
}
|
|
}
|
|
|
|
:is(.clr-text-primary, .clr-text-url) {
|
|
color: var(--cl-prim-fg-80);
|
|
.dark & {
|
|
color: var(--cd-prim-fg-80);
|
|
}
|
|
}
|
|
|
|
.clr-footer {
|
|
color: var(--cl-fg-60);
|
|
.dark & {
|
|
color: var(--cd-fg-60);
|
|
}
|
|
}
|
|
|
|
:is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) {
|
|
color: var(--cl-fg-80);
|
|
&:disabled {
|
|
color: var(--cl-fg-60);
|
|
}
|
|
.dark & {
|
|
color: var(--cd-fg-80);
|
|
&:disabled {
|
|
color: var(--cd-fg-60);
|
|
}
|
|
}
|
|
}
|
|
|
|
.clr-warning {
|
|
background-color: var(--cl-red-bg-100);
|
|
.dark & {
|
|
background-color: var(--cd-red-bg-100);
|
|
}
|
|
}
|
|
|
|
.clr-text-default {
|
|
color: var(--cl-fg-100);
|
|
.dark & {
|
|
color: var(--cd-fg-100);
|
|
}
|
|
}
|
|
|
|
.clr-text-warning {
|
|
color: var(--cl-red-fg-100);
|
|
.dark & {
|
|
color: var(--cd-red-fg-100);
|
|
}
|
|
}
|
|
|
|
.clr-text-success {
|
|
color: var(--cl-green-fg-100);
|
|
.dark & {
|
|
color: var(--cd-green-fg-100);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cm-editor {
|
|
resize: vertical;
|
|
overflow-y: auto;
|
|
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);
|
|
}
|
|
}
|
|
|
|
.rdt_TableCell {
|
|
font-size: 0.875rem;
|
|
}
|