acad28b623
- npm build does now also include building css files. - Source javascript and css are now defined in the source directories (eveai_app or eveai_chat_client), and automatically built for use with nginx - eveai.css is now split into several more manageable files (per control type)
108 lines
3.3 KiB
CSS
108 lines
3.3 KiB
CSS
:root {
|
|
/* Hoofdkleuren gebaseerd op EveAI kleurenschema */
|
|
--jse-theme-color: var(--bs-primary); /* Paars als hoofdkleur */
|
|
--jse-theme-color-highlight: var(--bs-secondary); /* Secundair paars voor highlights */
|
|
|
|
/* Achtergrondkleuren */
|
|
--jse-background-color: #fff;
|
|
--jse-panel-background: #f8f9fa;
|
|
--jse-panel-border: 1px solid var(--bs-secondary);
|
|
--jse-panel-border-radius: 0.375rem;
|
|
|
|
/* Tekstkleuren */
|
|
--jse-text-color: var(--bs-body-color);
|
|
--jse-text-color-inverse: #ffffff;
|
|
|
|
/* Navigatie */
|
|
--jse-navigation-bar-background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
|
|
--jse-navigation-bar-background-highlight: var(--bs-secondary);
|
|
--jse-navigation-bar-text-color: #ffffff;
|
|
|
|
/* Status balk */
|
|
--jse-status-bar-background: var(--bs-light);
|
|
--jse-status-bar-color: var(--bs-body-color);
|
|
--jse-status-bar-border: 1px solid var(--bs-secondary);
|
|
--jse-status-bar-border-radius: 0 0 0.375rem 0.375rem;
|
|
|
|
/* Main menu bar */
|
|
--jse-main-menu-background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
|
|
--jse-main-menu-color: #ffffff;
|
|
--jse-main-menu-button-background-highlight: var(--bs-secondary);
|
|
--jse-main-menu-button-color-highlight: #ffffff;
|
|
|
|
/* Contextmenu */
|
|
--jse-context-menu-background: #fff;
|
|
--jse-context-menu-background-highlight: var(--bs-secondary);
|
|
--jse-context-menu-color: var(--bs-body-color);
|
|
--jse-context-menu-color-highlight: #ffffff;
|
|
--jse-context-menu-border: 1px solid var(--bs-secondary);
|
|
--jse-context-menu-box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2);
|
|
--jse-context-menu-border-radius: 0.375rem;
|
|
|
|
/* Knoppen */
|
|
--jse-button-background: var(--bs-primary);
|
|
--jse-button-background-highlight: var(--bs-secondary);
|
|
--jse-button-color: #ffffff;
|
|
--jse-button-color-highlight: #ffffff;
|
|
--jse-button-border-radius: 0.375rem;
|
|
|
|
/* JSON Tree Mode */
|
|
--jse-key-color: var(--bs-info);
|
|
--jse-delimiter-color: #666;
|
|
--jse-string-color: var(--bs-primary);
|
|
--jse-number-color: var(--bs-warning);
|
|
--jse-boolean-color: var(--bs-danger);
|
|
--jse-null-color: #888;
|
|
--jse-invalid-color: #e0b4b4;
|
|
--jse-readonly-color: #888;
|
|
--jse-readonly-background-color: #f0f0f0;
|
|
|
|
/* Selectie */
|
|
--jse-selection-background-color: rgba(118, 89, 154, 0.2);
|
|
--jse-selection-background-inactive-color: rgba(118, 89, 154, 0.1);
|
|
|
|
/* Foutmeldingen */
|
|
--jse-error-color: var(--bs-danger);
|
|
--jse-error-background-color: rgba(156, 45, 102, 0.1);
|
|
|
|
/* Tooltips */
|
|
--jse-tooltip-background: var(--bs-primary);
|
|
--jse-tooltip-color: #ffffff;
|
|
--jse-tooltip-border-radius: 0.375rem;
|
|
--jse-tooltip-box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2);
|
|
}
|
|
|
|
/* Extra stijlen voor de containers */
|
|
.jsoneditor-initialized {
|
|
border: 1px solid var(--bs-secondary);
|
|
border-radius: 0.375rem;
|
|
min-height: 300px;
|
|
box-shadow: 0 4px 8px rgba(118, 89, 154, 0.1);
|
|
}
|
|
|
|
.jsoneditor-readonly-mode {
|
|
background-color: var(--bs-light);
|
|
}
|
|
|
|
/* Stijlen voor de knoppen in de editor */
|
|
.jse-button {
|
|
border: none !important;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Stijlen voor veldlabels in de boom */
|
|
.jse-tree .jse-key {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Stijlen voor waarden in de boom */
|
|
.jse-tree .jse-value {
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Verbeter de leesbaarheid van de tekstmodus */
|
|
.jse-text-mode {
|
|
font-family: monospace;
|
|
line-height: 1.5;
|
|
}
|