chg: [layout] Support of themes - WiP
mokaddem
parent
8032d0fad8
commit
9e7bf8638a
|
|
@ -129,8 +129,9 @@ class AppController extends Controller
|
|||
$this->set('breadcrumb', $this->Navigation->getBreadcrumb());
|
||||
$this->set('ajax', $this->request->is('ajax'));
|
||||
$this->request->getParam('prefix');
|
||||
$this->set('darkMode', !empty(Configure::read('Cerebrate.dark')));
|
||||
$this->set('baseurl', Configure::read('App.fullBaseUrl'));
|
||||
Configure::write('app.bsTheme', 'default');
|
||||
$this->set('bsTheme',Configure::read('app.bsTheme'));
|
||||
}
|
||||
|
||||
private function authApiUser(): void
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
'<div class="pb-3 font-weight-light">%s</div>',
|
||||
$data['description']
|
||||
),
|
||||
sprintf('<div class="sub-container">%s</div>', $fieldsString),
|
||||
sprintf('<div class="panel">%s</div>', $fieldsString),
|
||||
empty($metaTemplateString) ? '' : $this->element(
|
||||
'genericElements/accordion_scaffold', [
|
||||
'body' => $metaTemplateString,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
empty($data['description']) ? '' : h($data['description'])
|
||||
);
|
||||
}
|
||||
echo '<div class="sub-container">';
|
||||
echo '<div class="panel">';
|
||||
if (!empty($data['html'])) {
|
||||
echo sprintf('<div>%s</div>', $data['html']);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
"<div id=\"single-view-table-container-%s\">
|
||||
<h2 class=\"font-weight-light\">%s</h2>
|
||||
%s%s
|
||||
<div class=\"px-3 col-sm-8 sub-container\">
|
||||
<div class=\"px-3 col-sm-8 panel\">
|
||||
<table id=\"single-view-table-%s\" class=\"table table-striped\">%s</table>
|
||||
</div>
|
||||
<div id=\"metaTemplates\" class=\"col-lg-8 px-0\">%s</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
$controller = $this->request->getParam('controller');
|
||||
$action = $this->request->getParam('action');
|
||||
$curentPath = "{$controller}{$action}";
|
||||
$navbarVariant = Configure::read('navbarVariant');
|
||||
$navbarIsDark = Configure::read('navbarIsDark');
|
||||
|
||||
$breadcrumbLinks = '';
|
||||
$breadcrumbAction = '';
|
||||
|
|
@ -14,10 +12,7 @@
|
|||
'wrapper' => sprintf(
|
||||
'<nav class="header-breadcrumb d-xl-block d-none"{{attrs}}><ol class="">{{content}}</ol></nav>'
|
||||
),
|
||||
'item' => sprintf(
|
||||
'<li class="header-breadcrumb-item"{{attrs}}><i class="{{icon}} mr-1"></i><a class="{{linkClass}}" href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
|
||||
empty($darkMode) ? 'light' : 'dark'
|
||||
),
|
||||
'item' => '<li class="header-breadcrumb-item"{{attrs}}><i class="{{icon}} mr-1"></i><a class="{{linkClass}}" href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
|
||||
'itemWithoutLink' => '<li class="header-breadcrumb-item"{{attrs}}><span{{innerAttrs}}>{{title}}</span></li>{{separator}}',
|
||||
'separator' => '<li class="header-breadcrumb-separator"{{attrs}}><span{{innerAttrs}}><i class="fa fa-sm fa-angle-right"></i></span></li>'
|
||||
]);
|
||||
|
|
@ -51,7 +46,7 @@
|
|||
$linkEntry['url'] = $this->DataFromPath->buildStringFromDataPath($linkEntry['url'], $entity, $linkEntry['url_vars']);
|
||||
}
|
||||
$breadcrumbLinks .= sprintf('<a class="btn btn-%s btn-sm text-nowrap" role="button" href="%s">%s</a>',
|
||||
$active ? 'secondary' : $navbarVariant,
|
||||
$active ? 'secondary' : 'dark',
|
||||
Router::url($linkEntry['url']),
|
||||
h($linkEntry['label'])
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<span class="lock-sidebar align-self-center mt-auto w-100 d-none d-sm-block" onclick="$('.sidebar').toggleClass('expanded')">
|
||||
<a type="button" class="btn btn-<?= empty($darkMode) ? 'light' : 'dark' ?> btn-sm w-100"></a>
|
||||
<a type="button" class="btn btn-sm w-100"></a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
use Cake\Core\Configure;
|
||||
|
||||
$cakeDescription = 'Cerebrate';
|
||||
$navbarVariant = !empty($darkMode) ? 'primary' : 'dark';
|
||||
$navbarIsDark = false;
|
||||
$sidebarVariant = !empty($darkMode) ? 'dark' : 'dark';
|
||||
Configure::write('navbarVariant', $navbarVariant);
|
||||
Configure::write('navbarIsDark', $navbarIsDark);
|
||||
Configure::write('sidebarVariant', $sidebarVariant);
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -34,11 +28,8 @@ Configure::write('sidebarVariant', $sidebarVariant);
|
|||
</title>
|
||||
<?= $this->Html->meta('icon') ?>
|
||||
<?php
|
||||
if (empty($darkMode)) {
|
||||
echo $this->Html->css('bootstrap.css');
|
||||
} else {
|
||||
echo $this->Html->css('darkly-bootstrap.css');
|
||||
}
|
||||
echo $this->Html->css('themes/bootstrap-' . $bsTheme);
|
||||
echo $this->Html->css('themes/theme-' . $bsTheme);
|
||||
?>
|
||||
<?= $this->Html->css('main.css') ?>
|
||||
<?= $this->Html->css('font-awesome') ?>
|
||||
|
|
@ -58,12 +49,12 @@ Configure::write('sidebarVariant', $sidebarVariant);
|
|||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
<header class="navbar top-navbar <?= sprintf('bg-%s navbar-%s', $navbarVariant, $navbarIsDark ? 'light' : 'dark') ?>">
|
||||
<header class="navbar top-navbar">
|
||||
<?= $this->element('layouts/header') ?>
|
||||
</header>
|
||||
<div id="app-sidebar" class="collapse d-sm-block sidebar <?= empty($darkMode) ? 'bg-light' : 'bg-dark' ?>">
|
||||
<nav id="app-sidebar" class="collapse d-sm-block sidebar">
|
||||
<?= $this->element('layouts/sidebar') ?>
|
||||
</div>
|
||||
</nav>
|
||||
<main role="main" class="content">
|
||||
<div class="container-fluid mt-1">
|
||||
<?= $this->Flash->render() ?>
|
||||
|
|
@ -77,6 +68,6 @@ Configure::write('sidebarVariant', $sidebarVariant);
|
|||
</body>
|
||||
|
||||
<script>
|
||||
const darkMode = (<?= empty($darkMode) ? 'false' : 'true' ?>)
|
||||
const bsTheme = '<?= h($bsTheme); ?>'
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -9,16 +9,13 @@
|
|||
body {
|
||||
padding-top: var(--navbar-height);
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
background-color: #f1f2f4;
|
||||
}
|
||||
|
||||
.sub-container {
|
||||
background-color: white;
|
||||
.panel {
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
|
||||
}
|
||||
|
||||
/* navbar-toggler breakpoint */
|
||||
|
|
@ -37,7 +34,6 @@ body {
|
|||
width: 100% !important;
|
||||
position: relative !important;
|
||||
margin-top: 0 !important;
|
||||
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li > a.sidebar-link > span.text {
|
||||
|
|
@ -80,13 +76,11 @@ body {
|
|||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
z-index: 1020;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 6px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
main.content {
|
||||
position: relative;
|
||||
left: 0;
|
||||
/* margin-left: var(--sidebar-width-collapsed); */
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +92,6 @@ main.content {
|
|||
bottom: 0;
|
||||
width: var(--sidebar-width-collapsed);
|
||||
left: 0;
|
||||
transition: width .05s linear;
|
||||
transform:translateZ(0) scale(1,1);
|
||||
z-index:1039;
|
||||
}
|
||||
|
|
@ -118,7 +111,6 @@ main.content {
|
|||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
background:#000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +197,6 @@ main.content {
|
|||
.sidebar-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.sidebar-scroll {
|
||||
|
|
@ -237,10 +228,6 @@ ul.sidebar-elements > li {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
li.parent {
|
||||
|
||||
}
|
||||
|
||||
.sidebar.expanded ul.sidebar-elements li > a.sidebar-link,
|
||||
.sidebar:hover ul.sidebar-elements li > a.sidebar-link {
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -254,11 +241,6 @@ ul.sidebar-elements li > a.sidebar-link {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
|
|
@ -267,26 +249,15 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--cerebrate-color);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.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 {
|
||||
content: ' ';
|
||||
width: 3px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--cerebrate-color);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -295,10 +266,6 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
|
|||
content: unset;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li > a.sidebar-link:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li > a.sidebar-link > * {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
|
@ -330,7 +297,6 @@ ul.sidebar-elements li.parent > a.sidebar-link::before {
|
|||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
font-size: 1rem;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
|
||||
|
|
@ -364,10 +330,6 @@ ul.sidebar-elements > li ul li > a.sidebar-link {
|
|||
padding-right: 17px;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li ul li > a.sidebar-link:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
ul.sidebar-elements > li ul li > ul > li > a.sidebar-link {
|
||||
font-size: 0.85rem;
|
||||
padding-left: 50px;
|
||||
|
|
@ -433,17 +395,7 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
|
|||
/*
|
||||
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;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -480,18 +432,7 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
|
|||
/* text-decoration: none; */
|
||||
}
|
||||
|
||||
.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);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
|
|
@ -507,27 +448,6 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
|
|||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.composed-app-icon-container {
|
||||
height: 50px;
|
||||
width: 51px;
|
||||
|
|
@ -535,13 +455,6 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
|
|||
display: block;
|
||||
}
|
||||
|
||||
.navbar-light .composed-app-icon-container > .app-icon {
|
||||
background-color: black;
|
||||
}
|
||||
.navbar-dark .composed-app-icon-container > .app-icon {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.composed-app-icon-container > .app-icon {
|
||||
display: inline-block;
|
||||
mask-image: url(/img/icon-composition/sheet-all.svg), url(/img/icon-composition/z.svg);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,78 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: #363636;
|
||||
border: 1px solid #454545;
|
||||
box-shadow: none; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #375a7f; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: none;
|
||||
background-color: #444; }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid none; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #fff; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #595f64;
|
||||
color: #fff; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #595f64;
|
||||
color: #fff; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #60676c;
|
||||
color: #fff; }
|
||||
|
||||
.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.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: #60676c; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color); }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: unset; }
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #343a40; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
background-color: #f8f9fa; }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid #ddd; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #000; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
color: #000; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
color: #000; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
color: #000; }
|
||||
|
||||
.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.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; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: var(--cerebrate-color); }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: #f8f9fa; }
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #2c3e50; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: none;
|
||||
background-color: #ecf0f1; }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid none; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #000; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.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.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; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: #18bc9c; }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: unset; }
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #2c3e50; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: none;
|
||||
background-color: #ecf0f1; }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid none; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #343a40; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #dbdbdb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #dbdbdb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #ebebeb;
|
||||
color: #18bc9c; }
|
||||
|
||||
.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.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; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: #18bc9c; }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: unset; }
|
||||
|
|
@ -0,0 +1,522 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #e83283; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid none; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #fff; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #fff;
|
||||
color: #343a40; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #fff;
|
||||
color: #343a40; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #fff;
|
||||
color: #343a40; }
|
||||
|
||||
.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.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; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: #e83283; }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.5rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn {
|
||||
transition: none; } }
|
||||
.btn:hover {
|
||||
color: #fff;
|
||||
text-decoration: none; }
|
||||
.btn:focus, .btn.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(232, 50, 131, 0.25); }
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65; }
|
||||
.btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer; }
|
||||
|
||||
a.btn.disabled,
|
||||
fieldset:disabled a.btn {
|
||||
pointer-events: none; }
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #e83283;
|
||||
border-color: #e83283; }
|
||||
.btn-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #db196f;
|
||||
border-color: #d01769; }
|
||||
.btn-primary:focus, .btn-primary.focus {
|
||||
color: #fff;
|
||||
background-color: #db196f;
|
||||
border-color: #d01769;
|
||||
box-shadow: 0 0 0 0.2rem rgba(235, 81, 150, 0.5); }
|
||||
.btn-primary.disabled, .btn-primary:disabled {
|
||||
color: #fff;
|
||||
background-color: #e83283;
|
||||
border-color: #e83283; }
|
||||
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-primary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #d01769;
|
||||
border-color: #c41664; }
|
||||
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(235, 81, 150, 0.5); }
|
||||
|
||||
.btn-secondary {
|
||||
color: #212529;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4); }
|
||||
.btn-secondary:hover {
|
||||
color: #212529;
|
||||
background-color: rgba(236, 236, 236, 0.4);
|
||||
border-color: rgba(230, 230, 230, 0.4); }
|
||||
.btn-secondary:focus, .btn-secondary.focus {
|
||||
color: #212529;
|
||||
background-color: rgba(236, 236, 236, 0.4);
|
||||
border-color: rgba(230, 230, 230, 0.4);
|
||||
box-shadow: 0 0 0 0.2rem rgba(163, 165, 166, 0.5); }
|
||||
.btn-secondary.disabled, .btn-secondary:disabled {
|
||||
color: #212529;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4); }
|
||||
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: rgba(230, 230, 230, 0.4);
|
||||
border-color: rgba(223, 223, 223, 0.4); }
|
||||
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(163, 165, 166, 0.5); }
|
||||
|
||||
.btn-success {
|
||||
color: #212529;
|
||||
background-color: #41d7a7;
|
||||
border-color: #41d7a7; }
|
||||
.btn-success:hover {
|
||||
color: #fff;
|
||||
background-color: #2ac895;
|
||||
border-color: #28bd8d; }
|
||||
.btn-success:focus, .btn-success.focus {
|
||||
color: #fff;
|
||||
background-color: #2ac895;
|
||||
border-color: #28bd8d;
|
||||
box-shadow: 0 0 0 0.2rem rgba(60, 188, 148, 0.5); }
|
||||
.btn-success.disabled, .btn-success:disabled {
|
||||
color: #212529;
|
||||
background-color: #41d7a7;
|
||||
border-color: #41d7a7; }
|
||||
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-success.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #28bd8d;
|
||||
border-color: #26b386; }
|
||||
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-success.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(60, 188, 148, 0.5); }
|
||||
|
||||
.btn-info {
|
||||
color: #212529;
|
||||
background-color: #39cbfb;
|
||||
border-color: #39cbfb; }
|
||||
.btn-info:hover {
|
||||
color: #fff;
|
||||
background-color: #14c1fa;
|
||||
border-color: #07befa; }
|
||||
.btn-info:focus, .btn-info.focus {
|
||||
color: #fff;
|
||||
background-color: #14c1fa;
|
||||
border-color: #07befa;
|
||||
box-shadow: 0 0 0 0.2rem rgba(53, 178, 220, 0.5); }
|
||||
.btn-info.disabled, .btn-info:disabled {
|
||||
color: #212529;
|
||||
background-color: #39cbfb;
|
||||
border-color: #39cbfb; }
|
||||
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-info.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #07befa;
|
||||
border-color: #05b5ef; }
|
||||
.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-info.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(53, 178, 220, 0.5); }
|
||||
|
||||
.btn-warning {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107; }
|
||||
.btn-warning:hover {
|
||||
color: #212529;
|
||||
background-color: #e0a800;
|
||||
border-color: #d39e00; }
|
||||
.btn-warning:focus, .btn-warning.focus {
|
||||
color: #212529;
|
||||
background-color: #e0a800;
|
||||
border-color: #d39e00;
|
||||
box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); }
|
||||
.btn-warning.disabled, .btn-warning:disabled {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107; }
|
||||
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-warning.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #d39e00;
|
||||
border-color: #c69500; }
|
||||
.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-warning.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); }
|
||||
|
||||
.btn-danger {
|
||||
color: #212529;
|
||||
background-color: #fd7e14;
|
||||
border-color: #fd7e14; }
|
||||
.btn-danger:hover {
|
||||
color: #fff;
|
||||
background-color: #e96b02;
|
||||
border-color: #dc6502; }
|
||||
.btn-danger:focus, .btn-danger.focus {
|
||||
color: #fff;
|
||||
background-color: #e96b02;
|
||||
border-color: #dc6502;
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 113, 23, 0.5); }
|
||||
.btn-danger.disabled, .btn-danger:disabled {
|
||||
color: #212529;
|
||||
background-color: #fd7e14;
|
||||
border-color: #fd7e14; }
|
||||
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-danger.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #dc6502;
|
||||
border-color: #cf5f02; }
|
||||
.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-danger.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 113, 23, 0.5); }
|
||||
|
||||
.btn-light {
|
||||
color: #212529;
|
||||
background-color: #e9e9e8;
|
||||
border-color: #e9e9e8; }
|
||||
.btn-light:hover {
|
||||
color: #212529;
|
||||
background-color: #d6d6d4;
|
||||
border-color: #d0d0ce; }
|
||||
.btn-light:focus, .btn-light.focus {
|
||||
color: #212529;
|
||||
background-color: #d6d6d4;
|
||||
border-color: #d0d0ce;
|
||||
box-shadow: 0 0 0 0.2rem rgba(203, 204, 203, 0.5); }
|
||||
.btn-light.disabled, .btn-light:disabled {
|
||||
color: #212529;
|
||||
background-color: #e9e9e8;
|
||||
border-color: #e9e9e8; }
|
||||
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-light.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #d0d0ce;
|
||||
border-color: #cacac7; }
|
||||
.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-light.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(203, 204, 203, 0.5); }
|
||||
|
||||
.btn-dark {
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-color: #212529; }
|
||||
.btn-dark:hover {
|
||||
color: #fff;
|
||||
background-color: #101214;
|
||||
border-color: #0a0c0d; }
|
||||
.btn-dark:focus, .btn-dark.focus {
|
||||
color: #fff;
|
||||
background-color: #101214;
|
||||
border-color: #0a0c0d;
|
||||
box-shadow: 0 0 0 0.2rem rgba(66, 70, 73, 0.5); }
|
||||
.btn-dark.disabled, .btn-dark:disabled {
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-color: #212529; }
|
||||
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-dark.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #0a0c0d;
|
||||
border-color: #050506; }
|
||||
.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(66, 70, 73, 0.5); }
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #e83283;
|
||||
border-color: #e83283; }
|
||||
.btn-outline-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #e83283;
|
||||
border-color: #e83283; }
|
||||
.btn-outline-primary:focus, .btn-outline-primary.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(232, 50, 131, 0.5); }
|
||||
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
|
||||
color: #e83283;
|
||||
background-color: transparent; }
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-primary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #e83283;
|
||||
border-color: #e83283; }
|
||||
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(232, 50, 131, 0.5); }
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4); }
|
||||
.btn-outline-secondary:hover {
|
||||
color: #212529;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4); }
|
||||
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
|
||||
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
background-color: transparent; }
|
||||
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-secondary.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4); }
|
||||
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
|
||||
|
||||
.btn-outline-success {
|
||||
color: #41d7a7;
|
||||
border-color: #41d7a7; }
|
||||
.btn-outline-success:hover {
|
||||
color: #212529;
|
||||
background-color: #41d7a7;
|
||||
border-color: #41d7a7; }
|
||||
.btn-outline-success:focus, .btn-outline-success.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(65, 215, 167, 0.5); }
|
||||
.btn-outline-success.disabled, .btn-outline-success:disabled {
|
||||
color: #41d7a7;
|
||||
background-color: transparent; }
|
||||
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-success.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #41d7a7;
|
||||
border-color: #41d7a7; }
|
||||
.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-success.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(65, 215, 167, 0.5); }
|
||||
|
||||
.btn-outline-info {
|
||||
color: #39cbfb;
|
||||
border-color: #39cbfb; }
|
||||
.btn-outline-info:hover {
|
||||
color: #212529;
|
||||
background-color: #39cbfb;
|
||||
border-color: #39cbfb; }
|
||||
.btn-outline-info:focus, .btn-outline-info.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(57, 203, 251, 0.5); }
|
||||
.btn-outline-info.disabled, .btn-outline-info:disabled {
|
||||
color: #39cbfb;
|
||||
background-color: transparent; }
|
||||
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-info.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #39cbfb;
|
||||
border-color: #39cbfb; }
|
||||
.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-info.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(57, 203, 251, 0.5); }
|
||||
|
||||
.btn-outline-warning {
|
||||
color: #ffc107;
|
||||
border-color: #ffc107; }
|
||||
.btn-outline-warning:hover {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107; }
|
||||
.btn-outline-warning:focus, .btn-outline-warning.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); }
|
||||
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
|
||||
color: #ffc107;
|
||||
background-color: transparent; }
|
||||
.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-warning.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107; }
|
||||
.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-warning.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); }
|
||||
|
||||
.btn-outline-danger {
|
||||
color: #fd7e14;
|
||||
border-color: #fd7e14; }
|
||||
.btn-outline-danger:hover {
|
||||
color: #212529;
|
||||
background-color: #fd7e14;
|
||||
border-color: #fd7e14; }
|
||||
.btn-outline-danger:focus, .btn-outline-danger.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.5); }
|
||||
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
|
||||
color: #fd7e14;
|
||||
background-color: transparent; }
|
||||
.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-danger.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #fd7e14;
|
||||
border-color: #fd7e14; }
|
||||
.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-danger.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.5); }
|
||||
|
||||
.btn-outline-light {
|
||||
color: #e9e9e8;
|
||||
border-color: #e9e9e8; }
|
||||
.btn-outline-light:hover {
|
||||
color: #212529;
|
||||
background-color: #e9e9e8;
|
||||
border-color: #e9e9e8; }
|
||||
.btn-outline-light:focus, .btn-outline-light.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(233, 233, 232, 0.5); }
|
||||
.btn-outline-light.disabled, .btn-outline-light:disabled {
|
||||
color: #e9e9e8;
|
||||
background-color: transparent; }
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-light.dropdown-toggle {
|
||||
color: #212529;
|
||||
background-color: #e9e9e8;
|
||||
border-color: #e9e9e8; }
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-light.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(233, 233, 232, 0.5); }
|
||||
|
||||
.btn-outline-dark {
|
||||
color: #212529;
|
||||
border-color: #212529; }
|
||||
.btn-outline-dark:hover {
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-color: #212529; }
|
||||
.btn-outline-dark:focus, .btn-outline-dark.focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5); }
|
||||
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
|
||||
color: #212529;
|
||||
background-color: transparent; }
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-dark.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-color: #212529; }
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5); }
|
||||
|
||||
.btn-link {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-decoration: none; }
|
||||
.btn-link:hover {
|
||||
color: #d9d9d9;
|
||||
text-decoration: underline; }
|
||||
.btn-link:focus, .btn-link.focus {
|
||||
text-decoration: underline; }
|
||||
.btn-link:disabled, .btn-link.disabled {
|
||||
color: #6c757d;
|
||||
pointer-events: none; }
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.7rem; }
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.6rem; }
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 0.5rem; }
|
||||
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
width: 100%; }
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,78 @@
|
|||
/* Body */
|
||||
.panel {
|
||||
background-color: #363636;
|
||||
border: 1px solid #454545;
|
||||
box-shadow: none; }
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: #6f42c1; }
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: #fff; }
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: #d6d6d6 !important; }
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: #fff; }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1); }
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px #fff); }
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color: #fff; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: none;
|
||||
background-color: #170229; }
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: #000; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid none; }
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125); }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: #fff; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: #343a40;
|
||||
color: #3cf281; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: #343a40;
|
||||
color: #3cf281; }
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: #495057;
|
||||
color: #3cf281; }
|
||||
|
||||
.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.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: #495057; }
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: #6f42c1; }
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: unset; }
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "theme",
|
||||
"version": "1.0.0",
|
||||
"description": "Create theme for the application",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"autobuild": "node-sass --watch scss -o ../css",
|
||||
"build": "node-sass scss -o ../css"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bootstrap": "4.6",
|
||||
"node-sass": "^6.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
// Darkly 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "darkly" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ebebeb !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #303030 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #375a7f !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #00bc8c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-500 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.9 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: $gray-700 !default;
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-color: $gray-800 !default;
|
||||
$input-border-color: $body-bg !default;
|
||||
$input-group-addon-color: $gray-500 !default;
|
||||
$input-group-addon-bg: $gray-700 !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: none !default;
|
||||
|
||||
$form-file-button-color: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-900 !default;
|
||||
$dropdown-border-color: $gray-700 !default;
|
||||
$dropdown-divider-bg: $gray-700 !default;
|
||||
$dropdown-link-color: $white !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-tabs-border-color: $gray-700 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: rgba($white, .6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($gray-900, .7) !default;
|
||||
$navbar-light-hover-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $gray-900 !default;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: lighten($success, 10%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: darken($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: $gray-700 !default;
|
||||
$card-bg: $gray-800 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-800 !default;
|
||||
$popover-header-bg: $gray-700 !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: $gray-700 !default;
|
||||
$toast-header-background-color: $gray-800 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: $gray-800 !default;
|
||||
$modal-content-border-color: $gray-700 !default;
|
||||
$modal-header-border-color: $gray-700 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-700 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $body-color !default;
|
||||
$list-group-bg: $gray-800 !default;
|
||||
$list-group-border-color: $gray-700 !default;
|
||||
$list-group-hover-bg: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-color !default;
|
||||
$list-group-action-active-bg: $gray-900 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $gray-700 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
// Flatly 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "flatly" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ecf0f1 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #b4bcc2 !default;
|
||||
$gray-600: #95a5a6 !default;
|
||||
$gray-700: #7b8a8b !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #2c3e50 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #e74c3c !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f39c12 !default;
|
||||
$green: #18bc9c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498db !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-700 !default;
|
||||
|
||||
$min-contrast-ratio: 2.05 !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $success !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-color: $gray-700 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default !default;
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default !default;
|
||||
$nav-tabs-border-color: $gray-200 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $primary !default;
|
||||
$navbar-dark-active-color: $primary !default;
|
||||
|
||||
$navbar-dark-brand-color: $white !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-brand-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $success !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: darken($success, 15%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $gray-200 !default;
|
||||
$pagination-disabled-bg: lighten($success, 15%) !default;
|
||||
$pagination-disabled-border-color: transparent !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-hover-bg: $gray-200 !default;
|
||||
$list-group-disabled-bg: $gray-200 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .4 !default;
|
||||
$btn-close-hover-opacity: 1 !default;
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
// Minty 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "minty" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #f7f7f9 !default;
|
||||
$gray-300: #eceeef !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #aaa !default;
|
||||
$gray-600: #888 !default;
|
||||
$gray-700: #5a5a5a !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ff7851 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffce67 !default;
|
||||
$green: #56cc9d !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #6cc3d5 !default;
|
||||
|
||||
$primary: #78c2ad !default;
|
||||
$secondary: #f3969a !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$min-contrast-ratio: 1.45 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-radius: .4rem !default;
|
||||
$border-radius-lg: .6rem !default;
|
||||
$border-radius-sm: .3rem !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$headings-font-family: Montserrat, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$headings-color: $gray-700 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $secondary !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .6) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-color: rgba($black, .3) !default;
|
||||
$navbar-light-hover-color: $gray-700 !default;
|
||||
$navbar-light-active-color: $gray-700 !default;
|
||||
$navbar-light-disabled-color: rgba($black, .1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $primary !default;
|
||||
$pagination-border-color: $primary !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $secondary !default;
|
||||
$pagination-hover-border-color: $pagination-hover-bg !default;
|
||||
$pagination-active-bg: $secondary !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: #cce8e0 !default;
|
||||
$pagination-disabled-border-color: $pagination-disabled-bg !default;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-color-scale: 0% !default;
|
||||
$alert-bg-scale: 0 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: $primary !default;
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $breadcrumb-divider-color !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
// Quartz 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "quartz" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9e9e8 !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #3a8fd9 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #686dc3 !default;
|
||||
$pink: #e83283 !default;
|
||||
$red: #fc346f !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #41d7a7 !default;
|
||||
$teal: #528fb3 !default;
|
||||
$cyan: #39cbfb !default;
|
||||
|
||||
$primary: $pink !default;
|
||||
$secondary: rgba($white, .4) !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $orange !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.5 !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 2rem !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $purple !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $white !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-color: rgba($white, .2) !default;
|
||||
|
||||
$border-radius: .5rem !default;
|
||||
$border-radius-sm: .6rem !default;
|
||||
$border-radius-lg: .7rem !default;
|
||||
$border-radius-pill: 50rem !default;
|
||||
|
||||
$box-shadow: 1px 3px 24px -1px rgba($black, .15) !default;
|
||||
$box-shadow-sm: 0 1px 1px rgba($black, .1) !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$headings-font-weight: 700 !default;
|
||||
|
||||
$text-muted: rgba($white, .7) !default;
|
||||
|
||||
$blockquote-footer-color: $text-muted !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-dark-bg: $dark !default;
|
||||
$table-dark-border-color: darken($dark, 5%) !default;
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1.5rem !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-box-shadow: $box-shadow !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: transparent !default;
|
||||
$input-disabled-bg: rgba($white, .1) !default;
|
||||
|
||||
$input-border-color: rgba($white, .4) !default;
|
||||
$input-border-width: 1px !default;
|
||||
|
||||
$input-focus-border-color: $input-border-color !default;
|
||||
$input-focus-box-shadow: none !default;
|
||||
|
||||
$input-placeholder-color: $text-muted !default;
|
||||
|
||||
$form-switch-color: $white !default;
|
||||
|
||||
$form-switch-focus-color: $form-switch-color !default;
|
||||
|
||||
$input-group-addon-bg: transparent !default;
|
||||
|
||||
$form-check-input-bg: rgba($white, .3) !default;
|
||||
$form-check-input-border: 1px solid $border-color !default;
|
||||
|
||||
$form-select-indicator-color: $white !default;
|
||||
$form-select-focus-box-shadow: none !default;
|
||||
|
||||
$form-range-track-bg: rgba($black, .2) !default;
|
||||
|
||||
$form-range-thumb-disabled-bg: $gray-500 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $text-muted !default;
|
||||
|
||||
$nav-tabs-border-width: 0 !default;
|
||||
$nav-tabs-border-radius: 0 !default;
|
||||
$nav-tabs-link-active-color: $gray-800 !default;
|
||||
$nav-tabs-link-active-bg: $white !default;
|
||||
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius-pill !default;
|
||||
$nav-pills-link-active-color: $white !default;
|
||||
$nav-pills-link-active-bg: $primary !default;
|
||||
|
||||
// Navbars
|
||||
|
||||
$navbar-dark-color: rgba($white, .8) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
$navbar-light-color: rgba($gray-800, .8) !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
$navbar-light-disabled-color: rgba($gray-800, .3) !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-border-color: $border-color !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: rgba($white, .4) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-bg: rgba($white, .3) !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
|
||||
$pagination-focus-color: $white !default;
|
||||
$pagination-focus-bg: $dropdown-link-hover-bg !default;
|
||||
$pagination-focus-box-shadow: none !default;
|
||||
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
$pagination-disabled-color: $text-muted !default;
|
||||
$pagination-disabled-bg: $pagination-bg !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: 1.75rem !default;
|
||||
$card-spacer-x: 2rem !default;
|
||||
$card-border-color: $border-color !default;
|
||||
$card-cap-bg: transparent !default;
|
||||
$card-cap-color: $white !default;
|
||||
$card-color: $white !default;
|
||||
$card-bg: transparent !default;
|
||||
|
||||
// Accordion
|
||||
|
||||
$accordion-button-bg: $secondary !default;
|
||||
$accordion-button-active-bg: $primary !default;
|
||||
$accordion-button-active-color: $white !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-opacity: .7 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-header-bg: $card-cap-bg !default;
|
||||
|
||||
$popover-body-color: $card-color !default;
|
||||
$popover-body-padding-y: $spacer / 2 !default;
|
||||
|
||||
$popover-arrow-color: $border-color !default;
|
||||
|
||||
$popover-arrow-outer-color: transparent !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-header-color: $card-color !default;
|
||||
$toast-header-background-color: $card-cap-bg !default;
|
||||
$toast-header-border-color: $border-color !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: rgba($black, .2) !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: transparent !default;
|
||||
$list-group-border-color: $border-color !default;
|
||||
$list-group-border-width: 0 !default;
|
||||
|
||||
$list-group-hover-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
$list-group-disabled-color: $text-muted !default;
|
||||
|
||||
$list-group-action-color: $white !default;
|
||||
$list-group-action-hover-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $white !default;
|
||||
|
||||
// Close
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
// Slate 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "slate" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #999 !default;
|
||||
$gray-600: #7a8288 !default;
|
||||
$gray-700: #52575c !default;
|
||||
$gray-800: #3a3f44 !default;
|
||||
$gray-900: #272b30 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #ee5f5b !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #f89406 !default;
|
||||
$green: #62c462 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #5bc0de !default;
|
||||
|
||||
$primary: $gray-800 !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.95 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $gray-900 !default;
|
||||
$body-color: #aaa !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $white !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// Tables
|
||||
|
||||
$table-color: $white !default;
|
||||
$table-accent-bg: rgba($white, .05) !default;
|
||||
$table-hover-bg: rgba($white, .075) !default;
|
||||
$table-border-color: rgba($black, .6) !default;
|
||||
$table-dark-border-color: $table-border-color !default;
|
||||
$table-dark-color: $white !default;
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$input-btn-padding-y: .75rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: #ccc !default;
|
||||
|
||||
$input-color: $gray-900 !default;
|
||||
|
||||
$form-check-input-bg: $white !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: $gray-800 !default;
|
||||
$dropdown-border-color: rgba($black, .6) !default;
|
||||
$dropdown-divider-bg: rgba($black, .15) !default;
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $body-bg !default;
|
||||
$dropdown-link-active-color: $dropdown-link-hover-color !default;
|
||||
$dropdown-link-active-bg: $dropdown-link-hover-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-border-color: rgba($black, .6) !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 0 !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
$navbar-light-hover-color: $gray-800 !default;
|
||||
$navbar-light-active-color: $gray-800 !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-border-color: rgba($black, .6) !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: transparent !default;
|
||||
$pagination-hover-border-color: rgba($black, .6) !default;
|
||||
$pagination-active-bg: transparent !default;
|
||||
$pagination-active-border-color: rgba($black, .6) !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-border-color: rgba($black, .6) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: rgba($black, .6) !default;
|
||||
$card-cap-bg: lighten($gray-800, 10%) !default;
|
||||
$card-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: lighten($body-bg, 5%) !default;
|
||||
$toast-border-color: rgba(0, 0, 0, .2) !default;
|
||||
$toast-header-color: $body-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
$toast-header-border-color: $toast-border-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: lighten($body-bg, 5%) !default;
|
||||
$modal-header-border-color: rgba(0, 0, 0, .2) !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: darken($gray-900, 5%) !default;
|
||||
$progress-bar-color: $gray-600 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: lighten($body-bg, 5%) !default;
|
||||
$list-group-border-color: rgba($black, .6) !default;
|
||||
$list-group-hover-bg: lighten($body-bg, 10%) !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $list-group-hover-bg !default;
|
||||
$list-group-active-border-color: $list-group-border-color !default;
|
||||
$list-group-disabled-color: $gray-700 !default;
|
||||
$list-group-action-color: $white !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-active-color: $gray-500 !default;
|
||||
$breadcrumb-border-radius: .25rem !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-darkly";
|
||||
|
||||
@import "darkly/variables";
|
||||
|
||||
$panelBgColor: #363636;
|
||||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $secondary;
|
||||
$sidebarTextColor: $white;
|
||||
$sidebarActiveColor: $nav-tabs-link-active-color;
|
||||
$sidebarActiveBgColor: #595f64;
|
||||
$sidebarHoverColor: #60676c;
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
$activeSidebarLinkColor: var(--cerebrate-color);
|
||||
|
||||
@import "theme-default";
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
$theme: "app-default";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
|
||||
$panelBgColor: $white !default;
|
||||
$panelShadow: 0 0 35px 0 rgba(154, 161, 171, 0.25) !default;
|
||||
$panelBorder: none !default;
|
||||
|
||||
$topNavbarColor: $dark !default;
|
||||
$navbarActiveColor: #d6d6d6 !default;
|
||||
$headerBreadcrumbLinksBoxshadow: 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) !default;
|
||||
|
||||
$sidebarBgColor: $light !default;
|
||||
$sidebarTextColor: $black !default;
|
||||
$sidebarActiveColor: $black !default;
|
||||
$sidebarActiveBgColor: #dbdbdb !default;
|
||||
$sidebarHoverColor: #ebebeb !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;
|
||||
|
||||
/* Body */
|
||||
.panel {
|
||||
background-color: $panelBgColor;
|
||||
border: $panelBorder;
|
||||
box-shadow: $panelShadow;
|
||||
}
|
||||
|
||||
/* Top navbar */
|
||||
.top-navbar {
|
||||
background-color: $topNavbarColor;
|
||||
}
|
||||
|
||||
.center-navbar nav.header-breadcrumb {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
header.top-navbar .header-menu > a:hover,
|
||||
header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
|
||||
color: $navbarActiveColor !important;
|
||||
}
|
||||
|
||||
.top-navbar .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.top-navbar .right-navbar .header-menu a.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.top-navbar .left-navbar .navbar-brand:hover img {
|
||||
filter: invert(1) drop-shadow(0px 0px 3px $white);
|
||||
}
|
||||
|
||||
.top-navbar .composed-app-icon-container > .app-icon {
|
||||
background-color:$white;
|
||||
}
|
||||
|
||||
.header-breadcrumb-children {
|
||||
box-shadow: $headerBreadcrumbLinksBoxshadow;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
transition: width .08s linear;
|
||||
box-shadow: $sidebarShadows;
|
||||
background-color: $sidebarBgColor;
|
||||
}
|
||||
|
||||
.sidebar ~ main.content:after {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid $sidebarBorder;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-wrapper {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link {
|
||||
color: $sidebarTextColor;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.active {
|
||||
background-color: $sidebarActiveBgColor;
|
||||
color: $sidebarActiveColor
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
|
||||
background-color: $sidebarActiveBgColor;
|
||||
color: $sidebarActiveColor;
|
||||
}
|
||||
|
||||
.sidebar ul.sidebar-elements li > a.sidebar-link:hover {
|
||||
background-color: $sidebarHoverColor;
|
||||
color: $sidebarActiveColor;
|
||||
}
|
||||
|
||||
.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.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: $sidebarHoverColor;
|
||||
}
|
||||
|
||||
|
||||
ul.sidebar-elements li > a.sidebar-link.active::after {
|
||||
background-color: $activeSidebarLinkColor;
|
||||
}
|
||||
|
||||
.lock-sidebar > a.btn {
|
||||
background-color: $sidebarLockButton;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-flatly";
|
||||
|
||||
@import "flatly/variables";
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $light;
|
||||
$sidebarBorder: none;
|
||||
$sidebarActiveColor: $success;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
$activeSidebarLinkColor: $success;
|
||||
|
||||
@import "theme-default";
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-flatly";
|
||||
|
||||
@import "flatly/variables";
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $light;
|
||||
$sidebarTextColor: $gray-800;
|
||||
$sidebarActiveColor: $success;
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
$activeSidebarLinkColor: $success;
|
||||
|
||||
@import "theme-default";
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-slate";
|
||||
|
||||
@import "quartz/variables";
|
||||
|
||||
$panelBgColor: $card-bg;
|
||||
$panelBorder: none;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $secondary;
|
||||
$sidebarTextColor: $white;
|
||||
$sidebarActiveColor: $nav-tabs-link-active-color;
|
||||
$sidebarActiveBgColor: $nav-tabs-link-active-bg;
|
||||
$sidebarHoverColor: $nav-tabs-link-active-bg;
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: $secondary;
|
||||
$activeSidebarLinkColor: $primary;
|
||||
|
||||
@import "theme-default";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-slate";
|
||||
|
||||
$input-btn-padding-y: .375rem;
|
||||
$input-btn-padding-x: .75rem;
|
||||
|
||||
@import "slate/variables";
|
||||
|
||||
$panelBgColor: #363636;
|
||||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
$navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $secondary;
|
||||
$sidebarTextColor: $white;
|
||||
$sidebarActiveColor: $nav-tabs-link-active-color;
|
||||
$sidebarActiveBgColor: #595f64;
|
||||
$sidebarHoverColor: #60676c;
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: $secondary;
|
||||
$activeSidebarLinkColor: var(--cerebrate-color);
|
||||
|
||||
@import "theme-default";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
@import "../node_modules/bootstrap/scss/forms";
|
||||
@import "../node_modules/bootstrap/scss/navbar";
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// Your variable overrides can go here, e.g.:
|
||||
// $h1-font-size: 3rem;
|
||||
$theme: "app-vapor";
|
||||
|
||||
@import "vapor/variables";
|
||||
|
||||
$panelBgColor: #363636;
|
||||
$panelShadow: none;
|
||||
$panelBorder: 1px solid #454545;
|
||||
|
||||
$topNavbarColor: $primary;
|
||||
// $navbarActiveColor: #d6d6d6;
|
||||
$headerBreadcrumbLinksBoxshadow: 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);
|
||||
|
||||
$sidebarBgColor: $dark;
|
||||
$sidebarTextColor: $white;
|
||||
$sidebarActiveColor: $success;
|
||||
$sidebarActiveBgColor: $gray-800;
|
||||
$sidebarHoverColor: $gray-700;
|
||||
$sidebarBorder: none;
|
||||
$sidebarShadows: none;
|
||||
$sidebarLockButton: unset;
|
||||
$activeSidebarLinkColor: $primary;
|
||||
|
||||
@import "theme-default";
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
// Vapor 5.1.1
|
||||
// Bootswatch
|
||||
|
||||
$theme: "vapor" !default;
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #170229 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #1ba2f6 !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #ea39b8 !default;
|
||||
$red: #e44c55 !default;
|
||||
$orange: #f1b633 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #3cf281 !default;
|
||||
$teal: #3f81a2 !default;
|
||||
$cyan: #32fbe2 !default;
|
||||
|
||||
$primary: $purple !default;
|
||||
$secondary: $pink !default;
|
||||
$success: $green !default;
|
||||
$info: $blue !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: #44d9e8 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 1.2 !default;
|
||||
|
||||
// Options
|
||||
|
||||
// $enable-rounded: false !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #1a0933 !default;
|
||||
$body-color: $cyan !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $body-color !default;
|
||||
|
||||
// Components
|
||||
|
||||
$border-width: 0 !default;
|
||||
|
||||
$border-radius: .15rem !default;
|
||||
$border-radius-sm: .05rem !default;
|
||||
|
||||
$component-active-bg: $pink !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
// stylelint-disable-next-line value-keyword-case
|
||||
$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
$text-muted: rgba($body-color, .3) !default;
|
||||
|
||||
$blockquote-footer-color: $text-muted !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-color: $white !default;
|
||||
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: lighten($body-bg, 10%) !default;
|
||||
$input-disabled-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
$input-color: $white !default;
|
||||
|
||||
$input-placeholder-color: rgba($white, .4) !default;
|
||||
|
||||
$input-group-addon-bg: $input-disabled-bg !default;
|
||||
|
||||
$form-range-track-bg: $input-bg !default;
|
||||
|
||||
$form-range-thumb-disabled-bg: $purple !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-disabled-color: $text-muted !default;
|
||||
|
||||
$nav-tabs-link-active-color: $component-active-bg !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-bg: transparent !default;
|
||||
|
||||
$pagination-focus-bg: transparent !default;
|
||||
|
||||
$pagination-hover-bg: transparent !default;
|
||||
|
||||
$pagination-disabled-color: $text-muted !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-width: 2px !default;
|
||||
$card-cap-color: $white !default;
|
||||
$card-color: $white !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-bg: $dark !default;
|
||||
$tooltip-opacity: 1 !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $primary !default;
|
||||
|
||||
$popover-header-color: $white !default;
|
||||
|
||||
$popover-body-color: $white !default;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-color: $white !default;
|
||||
$toast-background-color: $primary !default;
|
||||
|
||||
$toast-header-color: $toast-color !default;
|
||||
$toast-header-background-color: $toast-background-color !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-color: $white !default;
|
||||
$modal-content-bg: $primary !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $input-disabled-bg !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $white !default;
|
||||
$list-group-bg: $input-disabled-bg !default;
|
||||
$list-group-hover-bg: $pink !default;
|
||||
$list-group-disabled-color: $text-muted !default;
|
||||
$list-group-action-color: $body-color !default;
|
||||
$list-group-action-hover-color: $white !default;
|
||||
$list-group-action-active-bg: $list-group-hover-bg !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-divider-color: $text-muted !default;
|
||||
$breadcrumb-active-color: $component-active-bg !default;
|
||||
Loading…
Reference in New Issue