ninegitea/templates/Include/style.css.twig

186 lines
4.3 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%}