mirror of https://github.com/MISP/MISP
chg: [ui:navigation] Improved UI and navigation
parent
5256821719
commit
b1b8024ad0
|
@ -1,13 +0,0 @@
|
|||
<?php
|
||||
namespace BreadcrumbNavigation;
|
||||
|
||||
require_once(APP . 'Controller' . DS . 'Component' . DS . 'Navigation' . DS . 'base.php');
|
||||
|
||||
class BroodsNavigation extends BaseNavigation
|
||||
{
|
||||
public function addLinks()
|
||||
{
|
||||
$this->bcf->addLink('Broods', 'view', 'LocalTools', 'broodTools');
|
||||
$this->bcf->addLink('Broods', 'edit', 'LocalTools', 'broodTools');
|
||||
}
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
<?php
|
||||
namespace BreadcrumbNavigation;
|
||||
|
||||
require_once(APP . 'Controller' . DS . 'Component' . DS . 'Navigation' . DS . 'base.php');
|
||||
|
||||
class EncryptionKeysNavigation extends BaseNavigation
|
||||
{
|
||||
}
|
|
@ -1,49 +0,0 @@
|
|||
<?php
|
||||
namespace BreadcrumbNavigation;
|
||||
|
||||
require_once(APP . 'Controller' . DS . 'Component' . DS . 'Navigation' . DS . 'base.php');
|
||||
|
||||
class LocalToolsNavigation extends BaseNavigation
|
||||
{
|
||||
function addRoutes()
|
||||
{
|
||||
$this->bcf->addRoute('LocalTools', 'viewConnector', [
|
||||
'label' => __('View'),
|
||||
'textGetter' => 'connector',
|
||||
'url' => '/localTools/viewConnector/{{connector}}',
|
||||
'url_vars' => ['connector' => 'connector'],
|
||||
]);
|
||||
$this->bcf->addRoute('LocalTools', 'broodTools', [
|
||||
'label' => __('Brood Tools'),
|
||||
'url' => '/localTools/broodTools/{{id}}',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
]);
|
||||
}
|
||||
|
||||
public function addParents()
|
||||
{
|
||||
$this->bcf->addParent('LocalTools', 'viewConnector', 'LocalTools', 'index');
|
||||
}
|
||||
|
||||
public function addLinks()
|
||||
{
|
||||
$passedData = $this->request->getParam('pass');
|
||||
if (!empty($passedData[0])) {
|
||||
$brood_id = $passedData[0];
|
||||
$this->bcf->addParent('LocalTools', 'broodTools', 'Broods', 'view', [
|
||||
'textGetter' => [
|
||||
'path' => 'name',
|
||||
'varname' => 'broodEntity',
|
||||
],
|
||||
'url' => "/broods/view/{$brood_id}",
|
||||
]);
|
||||
$this->bcf->addLink('LocalTools', 'broodTools', 'Broods', 'view', [
|
||||
'url' => "/broods/view/{$brood_id}",
|
||||
]);
|
||||
$this->bcf->addLink('LocalTools', 'broodTools', 'Broods', 'edit', [
|
||||
'url' => "/broods/view/{$brood_id}",
|
||||
]);
|
||||
}
|
||||
$this->bcf->addSelfLink('LocalTools', 'broodTools');
|
||||
}
|
||||
}
|
|
@ -1,109 +0,0 @@
|
|||
<?php
|
||||
|
||||
namespace BreadcrumbNavigation;
|
||||
|
||||
require_once(APP . 'Controller' . DS . 'Component' . DS . 'Navigation' . DS . 'base.php');
|
||||
|
||||
class MetaTemplatesNavigation extends BaseNavigation
|
||||
{
|
||||
function addRoutes()
|
||||
{
|
||||
$this->bcf->addRoute('MetaTemplates', 'index', $this->bcf->defaultCRUD('MetaTemplates', 'index'));
|
||||
$this->bcf->addRoute('MetaTemplates', 'view', $this->bcf->defaultCRUD('MetaTemplates', 'view'));
|
||||
$this->bcf->addRoute('MetaTemplates', 'enable', [
|
||||
'label' => __('Enable'),
|
||||
'icon' => 'check-square',
|
||||
'url' => '/metaTemplates/enable/{{id}}/enabled',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
]);
|
||||
$this->bcf->addRoute('MetaTemplates', 'set_default', [
|
||||
'label' => __('Set as default'),
|
||||
'icon' => 'check-square',
|
||||
'url' => '/metaTemplates/toggle/{{id}}/default',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
]);
|
||||
|
||||
$totalUpdateCount = 0;
|
||||
if (!empty($this->viewVars['updateableTemplates']['automatically-updateable']) && !empty($this->viewVars['updateableTemplates']['new'])) {
|
||||
$udpateCount = count($this->viewVars['updateableTemplates']['automatically-updateable']) ?? 0;
|
||||
$newCount = count($this->viewVars['updateableTemplates']['new']) ?? 0;
|
||||
$totalUpdateCount = $udpateCount + $newCount;
|
||||
}
|
||||
$updateRouteConfig = [
|
||||
'label' => __('Update all templates'),
|
||||
'icon' => 'download',
|
||||
'url' => '/metaTemplates/updateAllTemplates',
|
||||
];
|
||||
if ($totalUpdateCount > 0) {
|
||||
$updateRouteConfig['badge'] = [
|
||||
'text' => h($totalUpdateCount),
|
||||
'variant' => 'warning',
|
||||
'title' => __('There are {0} new meta-template(s) and {1} update(s) available', h($newCount), h($udpateCount)),
|
||||
];
|
||||
}
|
||||
$this->bcf->addRoute('MetaTemplates', 'update_all_templates', $updateRouteConfig);
|
||||
$this->bcf->addRoute('MetaTemplates', 'update', [
|
||||
'label' => __('Update template'),
|
||||
'icon' => 'download',
|
||||
'url' => '/metaTemplates/update',
|
||||
]);
|
||||
$this->bcf->addRoute('MetaTemplates', 'prune_outdated_template', [
|
||||
'label' => __('Prune outdated template'),
|
||||
'icon' => 'trash',
|
||||
'url' => '/metaTemplates/prune_outdated_template',
|
||||
]);
|
||||
}
|
||||
|
||||
public function addParents()
|
||||
{
|
||||
$this->bcf->addParent('MetaTemplates', 'view', 'MetaTemplates', 'index');
|
||||
$this->bcf->addParent('MetaTemplates', 'update', 'MetaTemplates', 'index');
|
||||
}
|
||||
|
||||
public function addLinks()
|
||||
{
|
||||
$this->bcf->addSelfLink('MetaTemplates', 'view');
|
||||
}
|
||||
|
||||
public function addActions()
|
||||
{
|
||||
$totalUpdateCount = 0;
|
||||
if (!empty($this->viewVars['updateableTemplates']['not-up-to-date']) || !empty($this->viewVars['updateableTemplates']['new'])) {
|
||||
$udpateCount = count($this->viewVars['updateableTemplates']['not-up-to-date']) ?? 0;
|
||||
$newCount = count($this->viewVars['updateableTemplates']['new']) ?? 0;
|
||||
$totalUpdateCount = $udpateCount + $newCount;
|
||||
}
|
||||
$updateAllActionConfig = [
|
||||
'label' => __('Update template'),
|
||||
'url' => '/metaTemplates/updateAllTemplates',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
];
|
||||
if ($totalUpdateCount > 0) {
|
||||
$updateAllActionConfig['badge'] = [
|
||||
'text' => h($totalUpdateCount),
|
||||
'variant' => 'warning',
|
||||
'title' => __('There are {0} new meta-template(s) and {1} update(s) available', h($newCount), h($udpateCount)),
|
||||
];
|
||||
}
|
||||
$this->bcf->addAction('MetaTemplates', 'index', 'MetaTemplates', 'update_all_templates', $updateAllActionConfig);
|
||||
$this->bcf->addAction('MetaTemplates', 'index', 'MetaTemplates', 'prune_outdated_template', [
|
||||
'label' => __('Prune outdated template'),
|
||||
'url' => '/metaTemplates/prune_outdated_template',
|
||||
]);
|
||||
|
||||
if (empty($this->viewVars['updateableTemplates']['up-to-date'])) {
|
||||
$this->bcf->addAction('MetaTemplates', 'view', 'MetaTemplates', 'update', [
|
||||
'label' => __('Update template'),
|
||||
'url' => '/metaTemplates/update/{{id}}',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
'variant' => 'warning',
|
||||
'badge' => [
|
||||
'variant' => 'warning',
|
||||
'title' => __('Update available')
|
||||
]
|
||||
]);
|
||||
}
|
||||
$this->bcf->addAction('MetaTemplates', 'view', 'MetaTemplates', 'enable');
|
||||
$this->bcf->addAction('MetaTemplates', 'view', 'MetaTemplates', 'set_default');
|
||||
}
|
||||
}
|
|
@ -1,43 +0,0 @@
|
|||
<?php
|
||||
namespace BreadcrumbNavigation;
|
||||
|
||||
require_once(APP . 'Controller' . DS . 'Component' . DS . 'Navigation' . DS . 'base.php');
|
||||
|
||||
class OutboxNavigation extends BaseNavigation
|
||||
{
|
||||
function addRoutes()
|
||||
{
|
||||
$this->bcf->addRoute('Outbox', 'index', $this->bcf->defaultCRUD('Outbox', 'index'));
|
||||
$this->bcf->addRoute('Outbox', 'view', $this->bcf->defaultCRUD('Outbox', 'view'));
|
||||
$this->bcf->addRoute('Outbox', 'discard', [
|
||||
'label' => __('Discard request'),
|
||||
'icon' => 'trash',
|
||||
'url' => '/outbox/discard/{{id}}',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
]);
|
||||
$this->bcf->addRoute('Outbox', 'process', [
|
||||
'label' => __('Process request'),
|
||||
'icon' => 'cogs',
|
||||
'url' => '/outbox/process/{{id}}',
|
||||
'url_vars' => ['id' => 'id'],
|
||||
]);
|
||||
}
|
||||
|
||||
public function addParents()
|
||||
{
|
||||
$this->bcf->addParent('Outbox', 'view', 'Outbox', 'index');
|
||||
$this->bcf->addParent('Outbox', 'discard', 'Outbox', 'index');
|
||||
$this->bcf->addParent('Outbox', 'process', 'Outbox', 'index');
|
||||
}
|
||||
|
||||
public function addLinks()
|
||||
{
|
||||
$this->bcf->addSelfLink('Outbox', 'view');
|
||||
}
|
||||
|
||||
public function addActions()
|
||||
{
|
||||
$this->bcf->addAction('Outbox', 'view', 'Outbox', 'process');
|
||||
$this->bcf->addAction('Outbox', 'view', 'Outbox', 'discard');
|
||||
}
|
||||
}
|
|
@ -77,6 +77,8 @@ class NavigationComponent extends Component
|
|||
'Feeds' => 'rss',
|
||||
'Roles' => 'id-badge',
|
||||
'API' => 'code',
|
||||
'UserSettings' => 'user-cog',
|
||||
'Inbox' => 'inbox',
|
||||
];
|
||||
|
||||
public function initialize(array $config): void
|
||||
|
@ -86,8 +88,8 @@ class NavigationComponent extends Component
|
|||
|
||||
public function beforeRender($event)
|
||||
{
|
||||
$this->fullBreadcrumb = null;
|
||||
//$this->fullBreadcrumb = $this->genBreadcrumb();
|
||||
// $this->fullBreadcrumb = null;
|
||||
$this->fullBreadcrumb = $this->genBreadcrumb();
|
||||
}
|
||||
|
||||
public function getSideMenu(): array
|
||||
|
@ -196,7 +198,6 @@ class NavigationComponent extends Component
|
|||
$CRUDControllers = [
|
||||
//'Individuals',
|
||||
'Organisations',
|
||||
'EncryptionKeys',
|
||||
'SharingGroups',
|
||||
'Roles',
|
||||
'Users',
|
||||
|
@ -253,7 +254,7 @@ class BreadcrumbFactory
|
|||
]);
|
||||
} else if ($action === 'add') {
|
||||
$item = $this->genRouteConfig($controller, $action, [
|
||||
'label' => __('[new {0}]', $controller),
|
||||
'label' => __('Create {0}', $controller),
|
||||
'icon' => 'plus',
|
||||
'url' => "/{$controller}/add",
|
||||
]);
|
||||
|
@ -272,6 +273,7 @@ class BreadcrumbFactory
|
|||
'url' => "/{$controller}/delete/{{id}}",
|
||||
'url_vars' => ['id' => 'id'],
|
||||
'textGetter' => !empty($table->getDisplayField()) ? $table->getDisplayField() : 'id',
|
||||
'variant' => 'danger',
|
||||
]);
|
||||
}
|
||||
$item['route_path'] = "{$controller}:{$action}";
|
||||
|
@ -292,6 +294,7 @@ class BreadcrumbFactory
|
|||
$routeConfig = $this->addIfNotEmpty($routeConfig, $config, 'label');
|
||||
$routeConfig = $this->addIfNotEmpty($routeConfig, $config, 'textGetter');
|
||||
$routeConfig = $this->addIfNotEmpty($routeConfig, $config, 'badge');
|
||||
$routeConfig = $this->addIfNotEmpty($routeConfig, $config, 'variant');
|
||||
return $routeConfig;
|
||||
}
|
||||
|
||||
|
@ -329,6 +332,7 @@ class BreadcrumbFactory
|
|||
$this->addLink($controller, 'edit', $controller, 'view');
|
||||
$this->addSelfLink($controller, 'edit');
|
||||
|
||||
$this->addAction($controller, 'index', $controller, 'add');
|
||||
$this->addAction($controller, 'view', $controller, 'add');
|
||||
$this->addAction($controller, 'view', $controller, 'delete');
|
||||
$this->addAction($controller, 'edit', $controller, 'add');
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
<?php
|
||||
|
||||
use Cake\Routing\Router;
|
||||
?>
|
||||
|
||||
<div class="action-bar d-flex flex-nowrap flex-row mt-2 mb-1 rounded">
|
||||
<?php
|
||||
if (!empty($links)) {
|
||||
echo '<div>';
|
||||
foreach ($links as $i => $linkEntry) {
|
||||
if (empty($linkEntry['route_path'])) {
|
||||
$active = false;
|
||||
} else {
|
||||
$active = $linkEntry['route_path'] == $route_path;
|
||||
}
|
||||
if (!empty($linkEntry['url_vars'])) {
|
||||
$linkEntry['url'] = $this->DataFromPath->buildStringFromDataPath($linkEntry['url'], $entity, $linkEntry['url_vars']);
|
||||
}
|
||||
if (!empty($linkEntry['selfLink'])) {
|
||||
$url = Router::url(null);
|
||||
} else {
|
||||
$url = Router::url($linkEntry['url']);
|
||||
}
|
||||
echo $this->Bootstrap->button([
|
||||
'text' => h($linkEntry['label']),
|
||||
'variant' => 'link',
|
||||
'outline' => $active,
|
||||
'size' => 'sm',
|
||||
'class' => ['text-nowrap'],
|
||||
'attrs' => [
|
||||
'href' => $url,
|
||||
],
|
||||
]);
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
if (!empty($actions)) {
|
||||
echo '<div class="ms-auto">';
|
||||
$badgeNumber = 0;
|
||||
foreach ($actions as $i => $actionEntry) {
|
||||
if (!empty($actionEntry['url_vars'])) {
|
||||
$actionEntry['url'] = $this->DataFromPath->buildStringFromDataPath($actionEntry['url'], $entity, $actionEntry['url_vars']);
|
||||
}
|
||||
if (!empty($actionEntry['badge'])) {
|
||||
$badgeNumber += 1;
|
||||
}
|
||||
$buttonBadge = !empty($actionEntry['badge']) ? $this->Bootstrap->badge($actionEntry['badge']) : '';
|
||||
echo $this->Bootstrap->button([
|
||||
'text' => h($actionEntry['label']),
|
||||
'icon' => h($actionEntry['icon']),
|
||||
'variant' => $actionEntry['variant'] ?? 'primary',
|
||||
'size' => 'sm',
|
||||
'class' => ['text-nowrap'],
|
||||
'onclick' => sprintf('UI.overlayUntilResolve(this, UI.submissionModalAutoGuess(\'%s\'))', h(Router::url($actionEntry['url']))),
|
||||
], $buttonBadge);
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="breadcrumb-link-container position-absolute end-0 d-flex">
|
||||
<div class="header-breadcrumb-children d-none d-md-flex btn-group">
|
||||
<?= $breadcrumbLinks ?>
|
||||
<?php if (!empty($breadcrumbAction)) : ?>
|
||||
<a class="btn btn-primary btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuBreadcrumbAction" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<?= __('Actions') ?>
|
||||
<?=
|
||||
$badgeNumber == 0 ? '' : $this->Bootstrap->badge([
|
||||
'text' => h($badgeNumber),
|
||||
'variant' => 'warning',
|
||||
'pill' => false,
|
||||
'title' => __n('There is {0} action available', 'There are {0} actions available', $badgeNumber, h($badgeNumber)),
|
||||
])
|
||||
?>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuBreadcrumbAction">
|
||||
<?= $breadcrumbAction ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div> -->
|
|
@ -43,52 +43,6 @@ if (!empty($breadcrumb)) {
|
|||
]
|
||||
]);
|
||||
}
|
||||
|
||||
$lastCrumb = $breadcrumb[count($breadcrumb) - 1];
|
||||
|
||||
if (!empty($lastCrumb['links'])) {
|
||||
// dd($lastCrumb['links']);
|
||||
foreach ($lastCrumb['links'] as $i => $linkEntry) {
|
||||
if (empty($linkEntry['route_path'])) {
|
||||
$active = false;
|
||||
} else {
|
||||
$active = $linkEntry['route_path'] == $lastCrumb['route_path'];
|
||||
}
|
||||
if (!empty($linkEntry['url_vars'])) {
|
||||
$linkEntry['url'] = $this->DataFromPath->buildStringFromDataPath($linkEntry['url'], $entity, $linkEntry['url_vars']);
|
||||
}
|
||||
if (!empty($linkEntry['selfLink'])) {
|
||||
$url = Router::url(null);
|
||||
} else {
|
||||
$url = Router::url($linkEntry['url']);
|
||||
}
|
||||
$breadcrumbLinks .= sprintf(
|
||||
'<a class="btn btn-%s btn-sm text-nowrap" role="button" href="%s">%s</a>',
|
||||
$active ? 'secondary' : 'outline-secondary',
|
||||
$url,
|
||||
h($linkEntry['label'])
|
||||
);
|
||||
}
|
||||
}
|
||||
$badgeNumber = 0;
|
||||
if (!empty($lastCrumb['actions'])) {
|
||||
foreach ($lastCrumb['actions'] as $i => $actionEntry) {
|
||||
if (!empty($actionEntry['url_vars'])) {
|
||||
$actionEntry['url'] = $this->DataFromPath->buildStringFromDataPath($actionEntry['url'], $entity, $actionEntry['url_vars']);
|
||||
}
|
||||
if (!empty($actionEntry['badge'])) {
|
||||
$badgeNumber += 1;
|
||||
}
|
||||
$breadcrumbAction .= sprintf(
|
||||
'<a class="dropdown-item %s" href="#" onclick="%s"><i class="me-1 %s"></i>%s%s</a>',
|
||||
!empty($actionEntry['variant']) ? sprintf('dropdown-item-%s', $actionEntry['variant']) : '',
|
||||
sprintf('UI.overlayUntilResolve(this, UI.submissionModalAutoGuess(\'%s\'))', h(Router::url($actionEntry['url']))),
|
||||
!empty($actionEntry['icon']) ? $this->FontAwesome->getClass(h($actionEntry['icon'])) : '',
|
||||
h($actionEntry['label']),
|
||||
!empty($actionEntry['badge']) ? $this->Bootstrap->badge($actionEntry['badge']) : ''
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
@ -98,28 +52,20 @@ echo $this->Breadcrumbs->render(
|
|||
[],
|
||||
['separator' => '']
|
||||
);
|
||||
|
||||
// $actionBar = '<div class="alert alert-primary">test</div>';
|
||||
// $this->assign('actionBar', $actionBar);
|
||||
?>
|
||||
|
||||
<?php if (!empty($breadcrumbLinks) || !empty($breadcrumbAction)) : ?>
|
||||
<div class="breadcrumb-link-container position-absolute end-0 d-flex">
|
||||
<div class="header-breadcrumb-children d-none d-md-flex btn-group">
|
||||
<?= $breadcrumbLinks ?>
|
||||
<?php if (!empty($breadcrumbAction)) : ?>
|
||||
<a class="btn btn-primary btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuBreadcrumbAction" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<?= __('Actions') ?>
|
||||
<?=
|
||||
$badgeNumber == 0 ? '' : $this->Bootstrap->badge([
|
||||
'text' => h($badgeNumber),
|
||||
'variant' => 'warning',
|
||||
'pill' => false,
|
||||
'title' => __n('There is {0} action available', 'There are {0} actions available', $badgeNumber, h($badgeNumber)),
|
||||
])
|
||||
?>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuBreadcrumbAction">
|
||||
<?= $breadcrumbAction ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php $this->start('actionBar'); ?>
|
||||
<?php // if (!empty($breadcrumbLinks) || !empty($breadcrumbAction)) : ?>
|
||||
<?php
|
||||
$lastCrumb = $breadcrumb[count($breadcrumb) - 1];
|
||||
echo $this->element('layouts/action-bar', [
|
||||
'links' => $lastCrumb['links'] ?? [],
|
||||
'actions' => $lastCrumb['actions'] ?? [],
|
||||
'route_path' => $lastCrumb['route_path'],
|
||||
]);
|
||||
?>
|
||||
<?php // endif; ?>
|
||||
<?php $this->end(); ?>
|
|
@ -61,7 +61,7 @@
|
|||
<li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
|
||||
<?php if (!empty($children) || !empty($url)): ?>
|
||||
<a
|
||||
class="d-flex align-items-center sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
|
||||
class="d-flex align-items-center sidebar-link <?= (!empty($children) && !$hasActiveChild) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
|
||||
href="<?= h($url) ?>"
|
||||
<?= !empty($children) ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
<?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>
|
||||
|
@ -71,6 +71,7 @@
|
|||
if ($childHasNotification || ($hasNotification && !empty($children))) {
|
||||
echo $this->Bootstrap->notificationBubble([
|
||||
'variant' => $childHasNotification ? $childNotificationVariant : $notificationVariant,
|
||||
'borderVariant' => 'light',
|
||||
]);
|
||||
}
|
||||
?>
|
||||
|
|
|
@ -2,12 +2,14 @@
|
|||
$seed = $seed ?? 'sd-' . mt_rand();
|
||||
?>
|
||||
|
||||
<ul id="<?= $seed ?>" class="sub-menu collapse <?= !empty($open) ? 'show' : '' ?>">
|
||||
<?php foreach ($children as $childName => $child): ?>
|
||||
<?= $this->element('layouts/sidebar/entry', [
|
||||
'parentName' => $childName,
|
||||
'parent' => $child,
|
||||
])
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<div id="<?= $seed ?>" class="collapse <?= !empty($open) ? 'show' : '' ?>">
|
||||
<ul class="sub-menu">
|
||||
<?php foreach ($children as $childName => $child): ?>
|
||||
<?= $this->element('layouts/sidebar/entry', [
|
||||
'parentName' => $childName,
|
||||
'parent' => $child,
|
||||
])
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -83,6 +83,7 @@ $sidebarOpen = $loggedUser->user_settings_by_name_with_fallback['ui.sidebar.expa
|
|||
<main role="main" class="content">
|
||||
<div class="container-fluid mt-1">
|
||||
<?= $this->Flash->render() ?>
|
||||
<?= $this->fetch('actionBar') ?>
|
||||
<?= $this->fetch('content') ?>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -1,139 +0,0 @@
|
|||
/* body.light-mode {
|
||||
background-color: #f1f2f4;
|
||||
}
|
||||
|
||||
|
||||
body.light-mode .sub-container {
|
||||
background-color: white;
|
||||
box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
|
||||
}
|
||||
|
||||
body.dark-mode .sub-container {
|
||||
background-color: #363636;
|
||||
border: 1px solid #454545;
|
||||
} */
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background:#000;
|
||||
}
|
||||
|
||||
.top-navbar {
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 6px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.light-mode .sidebar-wrapper {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.light-mode .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.light-mode ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.dark-mode ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #375a7f;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
}
|
||||
|
||||
.light-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.dark-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #375a7f;
|
||||
}
|
||||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.light-mode ul.sidebar-elements > li > a.sidebar-link:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.dark-mode ul.sidebar-elements > li > a.sidebar-link:hover {
|
||||
background-color: #375a7f;
|
||||
}
|
||||
|
||||
/* sidebar sub-menu */
|
||||
ul.sidebar-elements li.parent > a.sidebar-link::before {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li ul li > a.sidebar-link:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
/*
|
||||
Header
|
||||
*/
|
||||
header.navbar-dark.top-navbar .header-menu > a:hover,
|
||||
header.navbar-dark.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important;
|
||||
}
|
||||
header.navbar-light.top-navbar .header-menu > a:hover,
|
||||
header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a{
|
||||
color: white;
|
||||
}
|
||||
.navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.header-breadcrumb-children {
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.07),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.5),
|
||||
inset 0 3px 5px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.navbar-dark .right-navbar .header-menu a.nav-link {
|
||||
color: white;
|
||||
}
|
||||
.navbar-light .right-navbar .header-menu a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navbar-dark .left-navbar .navbar-brand img {
|
||||
filter: invert(1);
|
||||
}
|
||||
.navbar-light .left-navbar .navbar-brand img {
|
||||
filter: invert(0);
|
||||
}
|
||||
|
||||
.navbar-dark .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff);
|
||||
}
|
||||
.navbar-light .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(0) drop-shadow(0px 0px 3px #000);
|
||||
}
|
||||
|
||||
.navbar-light .composed-app-icon-container > .app-icon {
|
||||
background-color: black;
|
||||
}
|
||||
.navbar-dark .composed-app-icon-container > .app-icon {
|
||||
background-color: white;
|
||||
}
|
|
@ -203,10 +203,20 @@ main.content {
|
|||
margin: auto 0;
|
||||
}
|
||||
|
||||
.right-navbar .header-menu .dropdown-menu a.dropdown-item > i {
|
||||
.right-navbar .header-menu .dropdown-menu a.dropdown-item > i,
|
||||
.right-navbar .header-menu .dropdown-menu a.dropdown-item > img {
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
.main-toast-container {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 1080;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.5em;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar-wrapper {
|
||||
|
@ -342,10 +352,13 @@ ul.sidebar-elements > li > a.sidebar-link > i.sidebar-icon {
|
|||
.sidebar.expanded ul.sidebar-elements > li > a.sidebar-link > span.text,
|
||||
.sidebar:hover ul.sidebar-elements > li > a.sidebar-link > span.text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li > a.sidebar-link > span.text {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@ -353,17 +366,18 @@ ul.sidebar-elements > li > a.sidebar-link > span.text {
|
|||
/* sidebar sub-menu */
|
||||
ul.sidebar-elements li.parent > a.sidebar-link::before {
|
||||
visibility: hidden;
|
||||
content: "\f0d7";
|
||||
content: "\f104";
|
||||
float: right;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
font-size: 1rem;
|
||||
order: 6 !important;
|
||||
margin-left: auto;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
|
||||
content: "\f0d8";
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.sidebar.expanded ul.sidebar-elements li.parent > a.sidebar-link::before,
|
||||
|
@ -371,17 +385,20 @@ ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.sidebar.expanded ul.sidebar-elements li ul.show,
|
||||
.sidebar.expanded ul.sidebar-elements li ul.collapsing,
|
||||
.sidebar.expanded ul.sidebar-elements li ul.in,
|
||||
.sidebar:hover ul.sidebar-elements li ul.show,
|
||||
.sidebar:hover ul.sidebar-elements li ul.collapsing,
|
||||
.sidebar:hover ul.sidebar-elements li ul.in {
|
||||
.sidebar.expanded ul.sidebar-elements li div.show,
|
||||
.sidebar.expanded ul.sidebar-elements li div.collapsing,
|
||||
.sidebar.expanded ul.sidebar-elements li div.in,
|
||||
.sidebar:hover ul.sidebar-elements li div.show,
|
||||
.sidebar:hover ul.sidebar-elements li div.collapsing,
|
||||
.sidebar:hover ul.sidebar-elements li div.in {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li ul {
|
||||
.sidebar ul.sidebar-elements li div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li ul {
|
||||
padding: 10px 0;
|
||||
list-style: none;
|
||||
line-height: 20px;
|
||||
|
@ -537,9 +554,10 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
|
|||
}
|
||||
.navbar .right-navbar .notification-menu a.notification-item .notification-text-container {
|
||||
max-width: calc(100% - 40px - 0.25rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
.navbar .right-navbar .notification-menu a.notification-item .notification-title {
|
||||
max-width: calc(100% - 90px);
|
||||
max-width: 300px;
|
||||
}
|
||||
.navbar .right-navbar .notification-menu a.notification-item .notification-date {
|
||||
max-width: 90px;
|
||||
|
@ -550,6 +568,12 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.action-bar > div {
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.composed-app-icon-container {
|
||||
height: calc(var(--navbar-height) - 10px);
|
||||
width: calc(var(--navbar-height) - 10px);
|
||||
|
|
|
@ -18,7 +18,7 @@ body {
|
|||
}
|
||||
|
||||
.cerebrate-background-logo {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
-webkit-mask: url(/img/icon-composition/z.svg) no-repeat;
|
||||
mask: url(/img/icon-composition/z.svg) no-repeat;
|
||||
-webkit-mask-size: 400px 400px;
|
||||
|
|
|
@ -1,26 +1,8 @@
|
|||
:root {
|
||||
--cerebrate-color: #924da6;
|
||||
}
|
||||
|
||||
.pagination li.page-item > a.page-link > .ellipsis {
|
||||
line-height: 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 60px;
|
||||
line-height: 60px; /* Vertically center the text there */
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.black {
|
||||
color:black;
|
||||
}
|
||||
|
||||
.loading-overlay-container {
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
@ -94,7 +76,7 @@ input[type="checkbox"]:disabled.change-cursor {
|
|||
}
|
||||
|
||||
.select2-container {
|
||||
z-index: 900;
|
||||
z-index: 1060;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap-5 {
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #375a7f;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #e83e8c;
|
||||
--bs-red: #e74c3c;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #f39c12;
|
||||
--bs-green: #00bc8c;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #3498db;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #888;
|
||||
--bs-gray-dark: #303030;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #ebebeb;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #888;
|
||||
--bs-gray-700: #444;
|
||||
--bs-gray-800: #303030;
|
||||
--bs-gray-900: #222;
|
||||
--bs-primary: #375a7f;
|
||||
--bs-secondary: #444;
|
||||
--bs-success: #00bc8c;
|
||||
--bs-info: #3498db;
|
||||
--bs-warning: #f39c12;
|
||||
--bs-danger: #e74c3c;
|
||||
--bs-light: #adb5bd;
|
||||
--bs-dark: #303030;
|
||||
--bs-primary-rgb: 55, 90, 127;
|
||||
--bs-secondary-rgb: 68, 68, 68;
|
||||
--bs-success-rgb: 0, 188, 140;
|
||||
--bs-info-rgb: 52, 152, 219;
|
||||
--bs-warning-rgb: 243, 156, 18;
|
||||
--bs-danger-rgb: 231, 76, 60;
|
||||
--bs-light-rgb: 173, 181, 189;
|
||||
--bs-dark-rgb: 48, 48, 48;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 255, 255, 255;
|
||||
--bs-body-bg-rgb: 34, 34, 34;
|
||||
--bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #fff;
|
||||
--bs-body-bg: #222;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid 1px solid none;
|
||||
|
@ -471,14 +562,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%'%3e%3cdefs%3e%3clinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate%280,960,497%29'%3e%3cstop offset='0.7' stop-color='%23F8F9FA'/%3e%3cstop offset='1' stop-color='%23d6bbdd'/%3e%3c/linearGradient%3e%3cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3e%3cg fill-opacity='0.05'%3e%3cpolygon fill='%23444' points='90 150 0 300 180 300'/%3e%3cpolygon points='90 150 180 0 0 0'/%3e%3cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3e%3cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3e%3cpolygon fill='%23999' points='450 150 540 0 360 0'/%3e%3cpolygon points='630 150 540 300 720 300'/%3e%3cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3e%3cpolygon fill='%23444' points='810 150 720 300 900 300'/%3e%3cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3e%3cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3e%3cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3e%3cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3e%3cpolygon points='90 450 180 300 0 300'/%3e%3cpolygon fill='%23666' points='270 450 180 600 360 600'/%3e%3cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3e%3cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3e%3cpolygon fill='%23999' points='450 450 540 300 360 300'/%3e%3cpolygon fill='%23999' points='630 450 540 600 720 600'/%3e%3cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3e%3cpolygon points='810 450 720 600 900 600'/%3e%3cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3e%3cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3e%3cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3e%3cpolygon fill='%23222' points='90 750 0 900 180 900'/%3e%3cpolygon points='270 750 180 900 360 900'/%3e%3cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3e%3cpolygon points='450 750 540 600 360 600'/%3e%3cpolygon points='630 750 540 900 720 900'/%3e%3cpolygon fill='%23444' points='630 750 720 600 540 600'/%3e%3cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3e%3cpolygon fill='%23666' points='810 750 900 600 720 600'/%3e%3cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3e%3cpolygon fill='%23999' points='180 0 90 150 270 150'/%3e%3cpolygon fill='%23444' points='360 0 270 150 450 150'/%3e%3cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3e%3cpolygon points='900 0 810 150 990 150'/%3e%3cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3e%3cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3e%3cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3e%3cpolygon fill='%23666' points='180 300 270 150 90 150'/%3e%3cpolygon fill='%23222' points='360 300 270 450 450 450'/%3e%3cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3e%3cpolygon fill='%23444' points='540 300 450 450 630 450'/%3e%3cpolygon fill='%23222' points='540 300 630 150 450 150'/%3e%3cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3e%3cpolygon fill='%23666' points='720 300 810 150 630 150'/%3e%3cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3e%3cpolygon fill='%23999' points='900 300 990 150 810 150'/%3e%3cpolygon points='0 600 -90 750 90 750'/%3e%3cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3e%3cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3e%3cpolygon fill='%23444' points='180 600 270 450 90 450'/%3e%3cpolygon fill='%23444' points='360 600 270 750 450 750'/%3e%3cpolygon fill='%23999' points='360 600 450 450 270 450'/%3e%3cpolygon fill='%23666' points='540 600 630 450 450 450'/%3e%3cpolygon fill='%23222' points='720 600 630 750 810 750'/%3e%3cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3e%3cpolygon fill='%23222' points='900 600 990 450 810 450'/%3e%3cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3e%3cpolygon fill='%23444' points='180 900 270 750 90 750'/%3e%3cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3e%3cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3e%3cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3e%3cpolygon fill='%23222' points='900 900 990 750 810 750'/%3e%3cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3e%3cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3e%3cpolygon points='1080 600 990 750 1170 750'/%3e%3cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3e%3cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3e%3c/g%3e%3c/pattern%3e%3c/defs%3e%3crect x='0' y='0' fill='url%28%23a%29' width='100%' height='100%'/%3e%3crect x='0' y='0' fill='url%28%23b%29' width='100%' height='100%'/%3e%3c/svg%3e");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: soft-light;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -538,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #444;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(17, 17, 17, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -565,7 +678,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
|
@ -583,10 +696,26 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #60676c;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #50565a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #3e4346;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #222;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-bg: #fff;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #e9ecef;
|
||||
|
@ -471,14 +562,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%'%3e%3cdefs%3e%3clinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate%280,960,497%29'%3e%3cstop offset='0.7' stop-color='%23F8F9FA'/%3e%3cstop offset='1' stop-color='%23d6bbdd'/%3e%3c/linearGradient%3e%3cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3e%3cg fill-opacity='0.05'%3e%3cpolygon fill='%23444' points='90 150 0 300 180 300'/%3e%3cpolygon points='90 150 180 0 0 0'/%3e%3cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3e%3cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3e%3cpolygon fill='%23999' points='450 150 540 0 360 0'/%3e%3cpolygon points='630 150 540 300 720 300'/%3e%3cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3e%3cpolygon fill='%23444' points='810 150 720 300 900 300'/%3e%3cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3e%3cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3e%3cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3e%3cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3e%3cpolygon points='90 450 180 300 0 300'/%3e%3cpolygon fill='%23666' points='270 450 180 600 360 600'/%3e%3cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3e%3cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3e%3cpolygon fill='%23999' points='450 450 540 300 360 300'/%3e%3cpolygon fill='%23999' points='630 450 540 600 720 600'/%3e%3cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3e%3cpolygon points='810 450 720 600 900 600'/%3e%3cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3e%3cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3e%3cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3e%3cpolygon fill='%23222' points='90 750 0 900 180 900'/%3e%3cpolygon points='270 750 180 900 360 900'/%3e%3cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3e%3cpolygon points='450 750 540 600 360 600'/%3e%3cpolygon points='630 750 540 900 720 900'/%3e%3cpolygon fill='%23444' points='630 750 720 600 540 600'/%3e%3cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3e%3cpolygon fill='%23666' points='810 750 900 600 720 600'/%3e%3cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3e%3cpolygon fill='%23999' points='180 0 90 150 270 150'/%3e%3cpolygon fill='%23444' points='360 0 270 150 450 150'/%3e%3cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3e%3cpolygon points='900 0 810 150 990 150'/%3e%3cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3e%3cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3e%3cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3e%3cpolygon fill='%23666' points='180 300 270 150 90 150'/%3e%3cpolygon fill='%23222' points='360 300 270 450 450 450'/%3e%3cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3e%3cpolygon fill='%23444' points='540 300 450 450 630 450'/%3e%3cpolygon fill='%23222' points='540 300 630 150 450 150'/%3e%3cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3e%3cpolygon fill='%23666' points='720 300 810 150 630 150'/%3e%3cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3e%3cpolygon fill='%23999' points='900 300 990 150 810 150'/%3e%3cpolygon points='0 600 -90 750 90 750'/%3e%3cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3e%3cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3e%3cpolygon fill='%23444' points='180 600 270 450 90 450'/%3e%3cpolygon fill='%23444' points='360 600 270 750 450 750'/%3e%3cpolygon fill='%23999' points='360 600 450 450 270 450'/%3e%3cpolygon fill='%23666' points='540 600 630 450 450 450'/%3e%3cpolygon fill='%23222' points='720 600 630 750 810 750'/%3e%3cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3e%3cpolygon fill='%23222' points='900 600 990 450 810 450'/%3e%3cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3e%3cpolygon fill='%23444' points='180 900 270 750 90 750'/%3e%3cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3e%3cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3e%3cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3e%3cpolygon fill='%23222' points='900 900 990 750 810 750'/%3e%3cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3e%3cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3e%3cpolygon points='1080 600 990 750 1170 750'/%3e%3cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3e%3cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3e%3c/g%3e%3c/pattern%3e%3c/defs%3e%3crect x='0' y='0' fill='url%28%23a%29' width='100%' height='100%'/%3e%3crect x='0' y='0' fill='url%28%23b%29' width='100%' height='100%'/%3e%3c/svg%3e");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -538,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(150, 150, 150, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(125, 125, 125, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -555,21 +668,21 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
@ -580,13 +693,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #c8c8c8;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #efefef;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #2c3e50;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #e83e8c;
|
||||
--bs-red: #e74c3c;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #f39c12;
|
||||
--bs-green: #18bc9c;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #3498db;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #95a5a6;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #ecf0f1;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #b4bcc2;
|
||||
--bs-gray-600: #95a5a6;
|
||||
--bs-gray-700: #7b8a8b;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #2c3e50;
|
||||
--bs-secondary: #95a5a6;
|
||||
--bs-success: #18bc9c;
|
||||
--bs-info: #3498db;
|
||||
--bs-warning: #f39c12;
|
||||
--bs-danger: #e74c3c;
|
||||
--bs-light: #ecf0f1;
|
||||
--bs-dark: #7b8a8b;
|
||||
--bs-primary-rgb: 44, 62, 80;
|
||||
--bs-secondary-rgb: 149, 165, 166;
|
||||
--bs-success-rgb: 24, 188, 156;
|
||||
--bs-info-rgb: 52, 152, 219;
|
||||
--bs-warning-rgb: 243, 156, 18;
|
||||
--bs-danger-rgb: 231, 76, 60;
|
||||
--bs-light-rgb: 236, 240, 241;
|
||||
--bs-dark-rgb: 123, 138, 139;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-bg: #fff;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #ecf0f1;
|
||||
|
@ -471,14 +562,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%'%3e%3cdefs%3e%3clinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate%280,960,497%29'%3e%3cstop offset='0.7' stop-color='%23F8F9FA'/%3e%3cstop offset='1' stop-color='%23afb6bd'/%3e%3c/linearGradient%3e%3cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3e%3cg fill-opacity='0.05'%3e%3cpolygon fill='%23444' points='90 150 0 300 180 300'/%3e%3cpolygon points='90 150 180 0 0 0'/%3e%3cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3e%3cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3e%3cpolygon fill='%23999' points='450 150 540 0 360 0'/%3e%3cpolygon points='630 150 540 300 720 300'/%3e%3cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3e%3cpolygon fill='%23444' points='810 150 720 300 900 300'/%3e%3cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3e%3cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3e%3cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3e%3cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3e%3cpolygon points='90 450 180 300 0 300'/%3e%3cpolygon fill='%23666' points='270 450 180 600 360 600'/%3e%3cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3e%3cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3e%3cpolygon fill='%23999' points='450 450 540 300 360 300'/%3e%3cpolygon fill='%23999' points='630 450 540 600 720 600'/%3e%3cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3e%3cpolygon points='810 450 720 600 900 600'/%3e%3cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3e%3cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3e%3cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3e%3cpolygon fill='%23222' points='90 750 0 900 180 900'/%3e%3cpolygon points='270 750 180 900 360 900'/%3e%3cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3e%3cpolygon points='450 750 540 600 360 600'/%3e%3cpolygon points='630 750 540 900 720 900'/%3e%3cpolygon fill='%23444' points='630 750 720 600 540 600'/%3e%3cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3e%3cpolygon fill='%23666' points='810 750 900 600 720 600'/%3e%3cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3e%3cpolygon fill='%23999' points='180 0 90 150 270 150'/%3e%3cpolygon fill='%23444' points='360 0 270 150 450 150'/%3e%3cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3e%3cpolygon points='900 0 810 150 990 150'/%3e%3cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3e%3cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3e%3cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3e%3cpolygon fill='%23666' points='180 300 270 150 90 150'/%3e%3cpolygon fill='%23222' points='360 300 270 450 450 450'/%3e%3cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3e%3cpolygon fill='%23444' points='540 300 450 450 630 450'/%3e%3cpolygon fill='%23222' points='540 300 630 150 450 150'/%3e%3cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3e%3cpolygon fill='%23666' points='720 300 810 150 630 150'/%3e%3cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3e%3cpolygon fill='%23999' points='900 300 990 150 810 150'/%3e%3cpolygon points='0 600 -90 750 90 750'/%3e%3cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3e%3cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3e%3cpolygon fill='%23444' points='180 600 270 450 90 450'/%3e%3cpolygon fill='%23444' points='360 600 270 750 450 750'/%3e%3cpolygon fill='%23999' points='360 600 450 450 270 450'/%3e%3cpolygon fill='%23666' points='540 600 630 450 450 450'/%3e%3cpolygon fill='%23222' points='720 600 630 750 810 750'/%3e%3cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3e%3cpolygon fill='%23222' points='900 600 990 450 810 450'/%3e%3cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3e%3cpolygon fill='%23444' points='180 900 270 750 90 750'/%3e%3cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3e%3cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3e%3cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3e%3cpolygon fill='%23222' points='900 900 990 750 810 750'/%3e%3cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3e%3cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3e%3cpolygon points='1080 600 990 750 1170 750'/%3e%3cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3e%3cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3e%3c/g%3e%3c/pattern%3e%3c/defs%3e%3crect x='0' y='0' fill='url%28%23a%29' width='100%' height='100%'/%3e%3crect x='0' y='0' fill='url%28%23b%29' width='100%' height='100%'/%3e%3c/svg%3e");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -538,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #ecf0f1;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(150, 150, 150, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(125, 125, 125, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -555,12 +668,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
|
@ -569,7 +682,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
|
@ -580,7 +693,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #c8c8c8;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
|
@ -590,3 +708,14 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
.lock-sidebar > a.btn {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #efefef;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #2c3e50;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #e83e8c;
|
||||
--bs-red: #e74c3c;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #f39c12;
|
||||
--bs-green: #18bc9c;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #3498db;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #95a5a6;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #ecf0f1;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #b4bcc2;
|
||||
--bs-gray-600: #95a5a6;
|
||||
--bs-gray-700: #7b8a8b;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #2c3e50;
|
||||
--bs-secondary: #95a5a6;
|
||||
--bs-success: #18bc9c;
|
||||
--bs-info: #3498db;
|
||||
--bs-warning: #f39c12;
|
||||
--bs-danger: #e74c3c;
|
||||
--bs-light: #ecf0f1;
|
||||
--bs-dark: #7b8a8b;
|
||||
--bs-primary-rgb: 44, 62, 80;
|
||||
--bs-secondary-rgb: 149, 165, 166;
|
||||
--bs-success-rgb: 24, 188, 156;
|
||||
--bs-info-rgb: 52, 152, 219;
|
||||
--bs-warning-rgb: 243, 156, 18;
|
||||
--bs-danger-rgb: 231, 76, 60;
|
||||
--bs-light-rgb: 236, 240, 241;
|
||||
--bs-dark-rgb: 123, 138, 139;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-bg: #fff;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #ecf0f1;
|
||||
|
@ -471,14 +562,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%'%3e%3cdefs%3e%3clinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate%280,960,497%29'%3e%3cstop offset='0.7' stop-color='%23F8F9FA'/%3e%3cstop offset='1' stop-color='%23afb6bd'/%3e%3c/linearGradient%3e%3cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3e%3cg fill-opacity='0.05'%3e%3cpolygon fill='%23444' points='90 150 0 300 180 300'/%3e%3cpolygon points='90 150 180 0 0 0'/%3e%3cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3e%3cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3e%3cpolygon fill='%23999' points='450 150 540 0 360 0'/%3e%3cpolygon points='630 150 540 300 720 300'/%3e%3cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3e%3cpolygon fill='%23444' points='810 150 720 300 900 300'/%3e%3cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3e%3cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3e%3cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3e%3cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3e%3cpolygon points='90 450 180 300 0 300'/%3e%3cpolygon fill='%23666' points='270 450 180 600 360 600'/%3e%3cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3e%3cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3e%3cpolygon fill='%23999' points='450 450 540 300 360 300'/%3e%3cpolygon fill='%23999' points='630 450 540 600 720 600'/%3e%3cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3e%3cpolygon points='810 450 720 600 900 600'/%3e%3cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3e%3cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3e%3cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3e%3cpolygon fill='%23222' points='90 750 0 900 180 900'/%3e%3cpolygon points='270 750 180 900 360 900'/%3e%3cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3e%3cpolygon points='450 750 540 600 360 600'/%3e%3cpolygon points='630 750 540 900 720 900'/%3e%3cpolygon fill='%23444' points='630 750 720 600 540 600'/%3e%3cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3e%3cpolygon fill='%23666' points='810 750 900 600 720 600'/%3e%3cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3e%3cpolygon fill='%23999' points='180 0 90 150 270 150'/%3e%3cpolygon fill='%23444' points='360 0 270 150 450 150'/%3e%3cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3e%3cpolygon points='900 0 810 150 990 150'/%3e%3cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3e%3cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3e%3cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3e%3cpolygon fill='%23666' points='180 300 270 150 90 150'/%3e%3cpolygon fill='%23222' points='360 300 270 450 450 450'/%3e%3cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3e%3cpolygon fill='%23444' points='540 300 450 450 630 450'/%3e%3cpolygon fill='%23222' points='540 300 630 150 450 150'/%3e%3cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3e%3cpolygon fill='%23666' points='720 300 810 150 630 150'/%3e%3cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3e%3cpolygon fill='%23999' points='900 300 990 150 810 150'/%3e%3cpolygon points='0 600 -90 750 90 750'/%3e%3cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3e%3cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3e%3cpolygon fill='%23444' points='180 600 270 450 90 450'/%3e%3cpolygon fill='%23444' points='360 600 270 750 450 750'/%3e%3cpolygon fill='%23999' points='360 600 450 450 270 450'/%3e%3cpolygon fill='%23666' points='540 600 630 450 450 450'/%3e%3cpolygon fill='%23222' points='720 600 630 750 810 750'/%3e%3cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3e%3cpolygon fill='%23222' points='900 600 990 450 810 450'/%3e%3cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3e%3cpolygon fill='%23444' points='180 900 270 750 90 750'/%3e%3cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3e%3cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3e%3cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3e%3cpolygon fill='%23222' points='900 900 990 750 810 750'/%3e%3cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3e%3cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3e%3cpolygon points='1080 600 990 750 1170 750'/%3e%3cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3e%3cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3e%3c/g%3e%3c/pattern%3e%3c/defs%3e%3crect x='0' y='0' fill='url%28%23a%29' width='100%' height='100%'/%3e%3crect x='0' y='0' fill='url%28%23b%29' width='100%' height='100%'/%3e%3c/svg%3e");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -538,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #ecf0f1;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(150, 150, 150, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(125, 125, 125, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -555,12 +668,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #dedede;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
|
@ -569,7 +682,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
|
@ -580,7 +693,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
|
||||
background-color: #ebebeb;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #c8c8c8;
|
||||
color: #18bc9c;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
|
@ -590,3 +708,14 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
.lock-sidebar > a.btn {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #efefef;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #3a8fd9;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #686dc3;
|
||||
--bs-pink: #e83283;
|
||||
--bs-red: #fc346f;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #41d7a7;
|
||||
--bs-teal: #528fb3;
|
||||
--bs-cyan: #39cbfb;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9e9e8;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #e83283;
|
||||
--bs-secondary: rgba(255, 255, 255, 0.4);
|
||||
--bs-success: #41d7a7;
|
||||
--bs-info: #39cbfb;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #fd7e14;
|
||||
--bs-light: #e9e9e8;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 232, 50, 131;
|
||||
--bs-secondary-rgb: 255, 255, 255;
|
||||
--bs-success-rgb: 65, 215, 167;
|
||||
--bs-info-rgb: 57, 203, 251;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 253, 126, 20;
|
||||
--bs-light-rgb: 233, 233, 232;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 255, 255, 255;
|
||||
--bs-body-bg-rgb: 104, 109, 195;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #fff;
|
||||
--bs-body-bg: #686dc3;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #e9e9e8;
|
||||
|
@ -471,7 +562,15 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: #666bbf;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
@ -529,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(61, 64, 115, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(51, 54, 96, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -560,7 +682,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.46);
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
|
@ -571,7 +693,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.46);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: rgba(255, 255, 255, 0.58);
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
|
@ -582,6 +709,17 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: rgba(211, 211, 211, 0.43);
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #686dc3;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #007bff;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #e83e8c;
|
||||
--bs-red: #ee5f5b;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #f89406;
|
||||
--bs-green: #62c462;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #5bc0de;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #7a8288;
|
||||
--bs-gray-dark: #3a3f44;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #999;
|
||||
--bs-gray-600: #7a8288;
|
||||
--bs-gray-700: #52575c;
|
||||
--bs-gray-800: #3a3f44;
|
||||
--bs-gray-900: #272b30;
|
||||
--bs-primary: #3a3f44;
|
||||
--bs-secondary: #7a8288;
|
||||
--bs-success: #62c462;
|
||||
--bs-info: #5bc0de;
|
||||
--bs-warning: #f89406;
|
||||
--bs-danger: #ee5f5b;
|
||||
--bs-light: #e9ecef;
|
||||
--bs-dark: #272b30;
|
||||
--bs-primary-rgb: 58, 63, 68;
|
||||
--bs-secondary-rgb: 122, 130, 136;
|
||||
--bs-success-rgb: 98, 196, 98;
|
||||
--bs-info-rgb: 91, 192, 222;
|
||||
--bs-warning-rgb: 248, 148, 6;
|
||||
--bs-danger-rgb: 238, 95, 91;
|
||||
--bs-light-rgb: 233, 236, 239;
|
||||
--bs-dark-rgb: 39, 43, 48;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 170, 170, 170;
|
||||
--bs-body-bg-rgb: 39, 43, 48;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #aaa;
|
||||
--bs-body-bg: #272b30;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #e9ecef;
|
||||
|
@ -471,14 +562,13 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%'%3e%3cdefs%3e%3clinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate%280,960,497%29'%3e%3cstop offset='0.7' stop-color='%23F8F9FA'/%3e%3cstop offset='1' stop-color='%23d6bbdd'/%3e%3c/linearGradient%3e%3cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3e%3cg fill-opacity='0.05'%3e%3cpolygon fill='%23444' points='90 150 0 300 180 300'/%3e%3cpolygon points='90 150 180 0 0 0'/%3e%3cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3e%3cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3e%3cpolygon fill='%23999' points='450 150 540 0 360 0'/%3e%3cpolygon points='630 150 540 300 720 300'/%3e%3cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3e%3cpolygon fill='%23444' points='810 150 720 300 900 300'/%3e%3cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3e%3cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3e%3cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3e%3cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3e%3cpolygon points='90 450 180 300 0 300'/%3e%3cpolygon fill='%23666' points='270 450 180 600 360 600'/%3e%3cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3e%3cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3e%3cpolygon fill='%23999' points='450 450 540 300 360 300'/%3e%3cpolygon fill='%23999' points='630 450 540 600 720 600'/%3e%3cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3e%3cpolygon points='810 450 720 600 900 600'/%3e%3cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3e%3cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3e%3cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3e%3cpolygon fill='%23222' points='90 750 0 900 180 900'/%3e%3cpolygon points='270 750 180 900 360 900'/%3e%3cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3e%3cpolygon points='450 750 540 600 360 600'/%3e%3cpolygon points='630 750 540 900 720 900'/%3e%3cpolygon fill='%23444' points='630 750 720 600 540 600'/%3e%3cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3e%3cpolygon fill='%23666' points='810 750 900 600 720 600'/%3e%3cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3e%3cpolygon fill='%23999' points='180 0 90 150 270 150'/%3e%3cpolygon fill='%23444' points='360 0 270 150 450 150'/%3e%3cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3e%3cpolygon points='900 0 810 150 990 150'/%3e%3cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3e%3cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3e%3cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3e%3cpolygon fill='%23666' points='180 300 270 150 90 150'/%3e%3cpolygon fill='%23222' points='360 300 270 450 450 450'/%3e%3cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3e%3cpolygon fill='%23444' points='540 300 450 450 630 450'/%3e%3cpolygon fill='%23222' points='540 300 630 150 450 150'/%3e%3cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3e%3cpolygon fill='%23666' points='720 300 810 150 630 150'/%3e%3cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3e%3cpolygon fill='%23999' points='900 300 990 150 810 150'/%3e%3cpolygon points='0 600 -90 750 90 750'/%3e%3cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3e%3cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3e%3cpolygon fill='%23444' points='180 600 270 450 90 450'/%3e%3cpolygon fill='%23444' points='360 600 270 750 450 750'/%3e%3cpolygon fill='%23999' points='360 600 450 450 270 450'/%3e%3cpolygon fill='%23666' points='540 600 630 450 450 450'/%3e%3cpolygon fill='%23222' points='720 600 630 750 810 750'/%3e%3cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3e%3cpolygon fill='%23222' points='900 600 990 450 810 450'/%3e%3cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3e%3cpolygon fill='%23444' points='180 900 270 750 90 750'/%3e%3cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3e%3cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3e%3cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3e%3cpolygon fill='%23222' points='900 900 990 750 810 750'/%3e%3cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3e%3cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3e%3cpolygon points='1080 600 990 750 1170 750'/%3e%3cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3e%3cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3e%3c/g%3e%3c/pattern%3e%3c/defs%3e%3crect x='0' y='0' fill='url%28%23a%29' width='100%' height='100%'/%3e%3crect x='0' y='0' fill='url%28%23b%29' width='100%' height='100%'/%3e%3c/svg%3e");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: normal;
|
||||
background-color: #262a2f;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -538,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #7a8288;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(23, 25, 28, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(19, 21, 24, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -565,7 +678,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
|
@ -583,14 +696,30 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #60676c;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #50565a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color);
|
||||
background-color: var(--application-color);
|
||||
}
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: #7a8288;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #acafb2;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #272b30;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
|
|
|
@ -1,3 +1,94 @@
|
|||
:root {
|
||||
--bs-blue: #1ba2f6;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #ea39b8;
|
||||
--bs-red: #e44c55;
|
||||
--bs-orange: #f1b633;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #3cf281;
|
||||
--bs-teal: #3f81a2;
|
||||
--bs-cyan: #32fbe2;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #170229;
|
||||
--bs-primary: #6f42c1;
|
||||
--bs-secondary: #ea39b8;
|
||||
--bs-success: #3cf281;
|
||||
--bs-info: #1ba2f6;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #e44c55;
|
||||
--bs-light: #44d9e8;
|
||||
--bs-dark: #170229;
|
||||
--bs-primary-rgb: 111, 66, 193;
|
||||
--bs-secondary-rgb: 234, 57, 184;
|
||||
--bs-success-rgb: 60, 242, 129;
|
||||
--bs-info-rgb: 27, 162, 246;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 228, 76, 85;
|
||||
--bs-light-rgb: 68, 217, 232;
|
||||
--bs-dark-rgb: 23, 2, 41;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 50, 251, 226;
|
||||
--bs-body-bg-rgb: 26, 9, 51;
|
||||
--bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #32fbe2;
|
||||
--bs-body-bg: #1a0933;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.collapsing.collapse-horizontal {
|
||||
width: 0;
|
||||
height: auto;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing.collapse-horizontal {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Callout */
|
||||
.callout {
|
||||
border: 1px solid #e9ecef;
|
||||
|
@ -471,7 +562,15 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--application-color: #2fa1db;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
background-color: #190932;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #363636;
|
||||
border: 1px solid #454545;
|
||||
|
@ -529,6 +628,29 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #170229;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
background: #ffffff00;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(15, 5, 30, 0.6);
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(13, 5, 25, 0.6);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000;
|
||||
}
|
||||
|
@ -574,6 +696,11 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: #495057;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: #5d6166;
|
||||
color: #3cf281;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: #6f42c1;
|
||||
}
|
||||
|
@ -581,3 +708,14 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
.lock-sidebar > a.btn {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: #230f34;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: #1a0933;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
// $h1-font-size: 3rem;
|
||||
$theme: "app-darkly";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "darkly/variables";
|
||||
|
||||
$bodyBackgroundBlendmode: soft-light;
|
||||
|
@ -24,10 +25,11 @@ $sidebarTextColor: $white;
|
|||
$sidebarActiveColor: $nav-tabs-link-active-color;
|
||||
$sidebarActiveBgColor: #595f64;
|
||||
$sidebarHoverColor: #60676c;
|
||||
$sidebarSubmenuColor: shade-color($sidebarActiveBgColor, 30%);
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
$activeSidebarLinkColor: var(--cerebrate-color);
|
||||
$activeSidebarLinkColor: var(--application-color);
|
||||
|
||||
$calloutBorderColor: 1px solid none;
|
||||
|
||||
|
|
|
@ -1,14 +1,25 @@
|
|||
$theme: "app-default";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
|
||||
$transition-collapse: height .35s cubic-bezier(0, 0.71, 0.58, 1);
|
||||
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
@import "../node_modules/bootstrap/scss/transitions";
|
||||
|
||||
@import "./mixins/background";
|
||||
|
||||
$cerebrateColor: #924da6;
|
||||
$bodyBackgroundImageStopColor: tint-color($cerebrateColor, 62) !default;
|
||||
$enabledBackgroundSVG: true !default;
|
||||
$applicationColor: #2fa1db;
|
||||
|
||||
$bodyBg: shade-color($body-bg, 2%) !default;
|
||||
$scrollbarWidth: 3px !default;
|
||||
$scrollbarBgContainer: #ffffff00 !default;
|
||||
$scrollbarBg: rgba(shade-color($bodyBg, 40%), 0.6) !default;
|
||||
$scrollbarBgHover: rgba(shade-color($bodyBg, 50%), 0.6) !default;
|
||||
$bodyBackgroundImageStopColor: tint-color($applicationColor, 62) !default;
|
||||
$enabledBackgroundSVG: false !default;
|
||||
$bodyBackgroundBlendmode: normal !default;
|
||||
|
||||
$panelBgColor: $white !default;
|
||||
|
@ -26,12 +37,15 @@ $headerBreadcrumbLinksBGColor: $light !default;
|
|||
$sidebarBgColor: $light !default;
|
||||
$sidebarTextColor: $black !default;
|
||||
$sidebarActiveColor: $black !default;
|
||||
$sidebarActiveBgColor: #dbdbdb !default;
|
||||
$sidebarHoverColor: #ebebeb !default;
|
||||
|
||||
$sidebarActiveBgColor: #dedede !default;
|
||||
$sidebarSubmenuColor: tint-color($sidebarActiveBgColor, 50%) !default;
|
||||
$sidebarHoverColor: shade-color($sidebarActiveBgColor, 5%) !default;
|
||||
$sidebarHoverActiveColor: shade-color($sidebarActiveBgColor, 10%) !default;
|
||||
$sidebarBorder: #ddd !default;
|
||||
$sidebarShadows: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
$sidebarLockButton: $light !default;
|
||||
$activeSidebarLinkColor: var(--cerebrate-color) !default;
|
||||
$activeSidebarLinkColor: var(--application-color) !default;
|
||||
|
||||
// $calloutBorderColor: $gray-200 !default;
|
||||
$calloutBgColor: $panelBgColor !default;
|
||||
|
@ -39,6 +53,10 @@ $calloutShadow: $panelShadow !default;
|
|||
|
||||
@import "additional/bootstrap-additional";
|
||||
|
||||
:root {
|
||||
--application-color: #{$applicationColor};
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
@if $enabledBackgroundSVG {
|
||||
|
@ -47,6 +65,8 @@ body {
|
|||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-blend-mode: $bodyBackgroundBlendmode;
|
||||
} @else {
|
||||
background-color: $bodyBg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -107,6 +127,34 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: $sidebarBgColor;
|
||||
}
|
||||
|
||||
/* Scroolbar */
|
||||
.sidebar-scroll {
|
||||
// scrollbar-gutter: stable;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: $scrollbarWidth;
|
||||
background: $scrollbarBgContainer;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar * {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: $scrollbarBg;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: $scrollbarBgHover;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
// width: calc(100% + $scrollbarWidth);
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: $black;
|
||||
}
|
||||
|
@ -151,6 +199,10 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
|||
background-color: $sidebarHoverColor;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
|
||||
background-color: $sidebarHoverActiveColor;
|
||||
color: $sidebarActiveColor;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: $activeSidebarLinkColor;
|
||||
|
@ -158,4 +210,15 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: $sidebarLockButton;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li ul.sub-menu {
|
||||
background-color: $sidebarSubmenuColor;
|
||||
box-shadow: inset #11111a1a 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.action-bar {
|
||||
box-shadow: 0 0.15rem 0.3rem #00000026;
|
||||
background-color: $body-bg;
|
||||
}
|
|
@ -2,6 +2,7 @@
|
|||
// $h1-font-size: 3rem;
|
||||
$theme: "app-slate";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "quartz/variables";
|
||||
|
||||
$enabledBackgroundSVG: false;
|
||||
|
@ -20,7 +21,11 @@ $sidebarBgColor: $secondary;
|
|||
$sidebarTextColor: $white;
|
||||
$sidebarActiveColor: $nav-tabs-link-active-color;
|
||||
$sidebarActiveBgColor: $nav-tabs-link-active-bg;
|
||||
$sidebarHoverColor: $nav-tabs-link-active-bg;
|
||||
|
||||
$sidebarSubmenuColor: shade-color($secondary, 5%);
|
||||
$sidebarHoverColor: tint-color($secondary, 10%);
|
||||
$sidebarHoverActiveColor: tint-color($secondary, 30%);
|
||||
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: $secondary;
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
// $h1-font-size: 3rem;
|
||||
$theme: "app-slate";
|
||||
|
||||
$input-btn-padding-y: .375rem;
|
||||
$input-btn-padding-x: .75rem;
|
||||
$input-btn-padding-y: .375rem;
|
||||
$input-btn-padding-x: .75rem;
|
||||
|
||||
@import "slate/variables";
|
||||
|
||||
|
@ -28,7 +28,7 @@ $sidebarHoverColor: #60676c;
|
|||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: $secondary;
|
||||
$activeSidebarLinkColor: var(--cerebrate-color);
|
||||
$activeSidebarLinkColor: var(--application-color);
|
||||
|
||||
@import "theme-default";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
// $h1-font-size: 3rem;
|
||||
$theme: "app-vapor";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "vapor/variables";
|
||||
|
||||
$enabledBackgroundSVG: false;
|
||||
|
@ -20,6 +21,10 @@ $sidebarTextColor: $white;
|
|||
$sidebarActiveColor: $success;
|
||||
$sidebarActiveBgColor: $gray-800;
|
||||
$sidebarHoverColor: $gray-700;
|
||||
|
||||
$sidebarSubmenuColor: tint-color($dark, 5%);
|
||||
$sidebarHoverActiveColor: tint-color($sidebarActiveBgColor, 20%);
|
||||
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
|
|
Loading…
Reference in New Issue