188 lines
4.4 KiB
Twig
188 lines
4.4 KiB
Twig
:root{
|
|
--colorbgbodylight: {{ app.session.get('colorbgbodylight')|raw }};
|
|
--colorbgbodydark: {{ app.session.get('colorbgbodydark')|raw }};
|
|
--colorfttitlelight: {{ app.session.get('colorfttitlelight')|raw }};
|
|
--colorfttitledark: {{ app.session.get('colorfttitledark')|raw }};
|
|
--colorftbodylight: {{ app.session.get('colorftbodylight')|raw }};
|
|
--colorftbodydark: {{ app.session.get('colorftbodydark')|raw }};
|
|
--fontbody: "{{ app.session.get('fontbody')|raw }}";
|
|
--fonttitle: "{{ app.session.get('fonttitle')|raw }}";
|
|
--fontsizeh1: {{ app.session.get('fontsizeh1')~"px"|raw }};
|
|
--fontsizeh2: {{ app.session.get('fontsizeh2')~"px"|raw }};
|
|
--fontsizeh3: {{ app.session.get('fontsizeh3')~"px"|raw }};
|
|
--fontsizeh4: {{ app.session.get('fontsizeh4')~"px"|raw }};
|
|
|
|
--colorbgbodylight-darker: {{ app.session.get('colorbgbodylight-darker')|raw }};
|
|
--colorbgbodydark-darker: {{ app.session.get('colorbgbodydark-darker')|raw }};
|
|
--colorfttitlelight-darker: {{ app.session.get('colorfttitlelight-darker')|raw }};
|
|
}
|
|
|
|
/* COLOR BODY */
|
|
|
|
body {
|
|
background-color: var(--colorbgbodylight);
|
|
color: var(--colorftbodylight);
|
|
}
|
|
|
|
body .navbar.bg-dark {
|
|
background-color: var(--colorbgbodydark)!important;
|
|
}
|
|
|
|
body #sidebar {
|
|
background-color: var(--colorbgbodydark);
|
|
}
|
|
|
|
body #sidebar .title {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body #sidebar .nav a {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body #sidebar .nav .last {
|
|
border-color: var(--colorfttitledark);
|
|
}
|
|
|
|
body h1, body h2, body h3, body .modal-header h4 {
|
|
color: var(--colorfttitlelight);
|
|
}
|
|
|
|
body a, body .btn-link {
|
|
color: var(--colorfttitlelight);
|
|
}
|
|
|
|
body a:hover, body .btn-link:hover {
|
|
color: var(--colorfttitlelight-darker);
|
|
}
|
|
|
|
body .nav a{
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body .table {
|
|
color: var(--colorftbodylight);
|
|
}
|
|
|
|
body .card {
|
|
background-color: var(--colorbgbodylight);
|
|
}
|
|
|
|
body .card-header {
|
|
background-color: var(--colorbgbodylight-darker);
|
|
color: var(--colorfttitlelight);
|
|
font-size: 120%;
|
|
}
|
|
|
|
body .card-header .custom-control {
|
|
color: var(--colorftbodylight);
|
|
font-size: 80%;
|
|
}
|
|
|
|
body .page-item.active .page-link,
|
|
body .page-item.active .page-link:hover {
|
|
background-color: var(--colorfttitlelight);
|
|
border-color: var(--colorfttitlelight);
|
|
}
|
|
|
|
body .btn-primary {
|
|
background-color: var(--colorbgbodydark);
|
|
border-color: var(--colorbgbodydark);
|
|
}
|
|
body .btn-primary:hover {
|
|
background-color: var(--colorbgbodydark-darker);
|
|
border-color: var(--colorbgbodydark-darker);
|
|
}
|
|
|
|
body .modal-title {
|
|
|
|
}
|
|
|
|
/* COLOR BODY HOME */
|
|
|
|
body.monocolor {
|
|
background-color: var(--colorbgbodydark);
|
|
color: var(--colorftbodydark);
|
|
}
|
|
|
|
body.monocolor .navbar.bg-dark {
|
|
background-color: var(--colorbgbodydark)!important;
|
|
}
|
|
|
|
body.monocolor #sidebar {
|
|
background-color: var(--colorbgbodydark);
|
|
}
|
|
|
|
body.monocolor #sidebar .title {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body.monocolor #sidebar .nav a {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body.monocolor h1, body.monocolor h2, body.monocolor h3, body.monocolor .modal-header h4 {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body.monocolor a, body.monocolor .btn-link {
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body.monocolor .nav a{
|
|
color: var(--colorfttitledark);
|
|
}
|
|
|
|
body.monocolor .card {
|
|
background-color: var(--colorbgbodydark);
|
|
}
|
|
|
|
body.monocolor .card-header {
|
|
background-color: var(--colorbgbodydark);
|
|
color: var(--colorfttitledark);
|
|
font-size: 120%;
|
|
}
|
|
|
|
body.monocolor .card-header .custom-control {
|
|
color: var(--colorftbodydark);
|
|
font-size: 80%;
|
|
}
|
|
|
|
body.monocolor .btn-primary {
|
|
background-color: var(--colorbgbodylight);
|
|
border-color: var(--colorbgbodylight);
|
|
}
|
|
body.monocolor .btn-primary:hover {
|
|
background-color: var(--colorbgbodylight-darker);
|
|
border-color: var(--colorbgbodylight-darker);
|
|
}
|
|
|
|
/* FONT */
|
|
body {
|
|
font-family: var(--fontbody);
|
|
}
|
|
|
|
h1,h2,h3, .navbar-brand, .card-header, .modal-header h4 {
|
|
font-family: var(--fonttitle);
|
|
}
|
|
|
|
h1 { font-size: var(--fontsizeh1); }
|
|
h2 { font-size: var(--fontsizeh2); }
|
|
h3 { font-size: var(--fontsizeh3); }
|
|
h4 { font-size: var(--fontsizeh4); }
|
|
|
|
.card-header .custom-control {
|
|
font-family: var(--fontbody);
|
|
}
|
|
|
|
{% if not useheader is defined or not useheader %}
|
|
#main {
|
|
padding:0px;
|
|
}
|
|
{% else %}
|
|
#main {
|
|
margin-bottom: 100px;
|
|
}
|
|
{%endif%}
|
|
|
|
.ui-timepicker-standard a, .timepicker_wrap a { color : var(--dark) !important } |