* enhances filtering for Autocomplete -> parent_parent will be searched for match as well * adds rendering of parent_parent group for BiotopeAutocomplete * enhances ordering of registration office autocomplete
265 lines
4.7 KiB
CSS
265 lines
4.7 KiB
CSS
/*
|
|
Declare some basic colours
|
|
*/
|
|
:root{
|
|
--rlp-red: #871d33;
|
|
--rlp-gray-dark: #8e8e8e;
|
|
--rlp-gray-light: #c6c6c6;
|
|
}
|
|
|
|
.rlp-gl{
|
|
background-color: var(--rlp-gray-light);
|
|
color:white;
|
|
}
|
|
|
|
.rlp-gl-outline{
|
|
border:1px solid var(--rlp-gray-light);
|
|
color:var(--rlp-gray-light);
|
|
}
|
|
|
|
.rlp-gd{
|
|
background-color: var(--rlp-gray-dark);
|
|
color:white;
|
|
}
|
|
|
|
.rlp-gd-inv{
|
|
color: var(--rlp-gray-dark);
|
|
}
|
|
|
|
.rlp-gd-outline{
|
|
border:1px solid var(--rlp-gray-dark);
|
|
color:var(--rlp-gray-dark);
|
|
}
|
|
|
|
.rlp-r{
|
|
background-color: var(--rlp-red);
|
|
color:white;
|
|
}
|
|
|
|
.rlp-r-outline{
|
|
border:1px solid var(--rlp-red);
|
|
color:var(--rlp-red);
|
|
}
|
|
|
|
.rlp-r-inv{
|
|
color:var(--rlp-red);
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body{
|
|
font-family: Arial;
|
|
letter-spacing: 0.2px;
|
|
margin-bottom: 40px; /* Margin bottom by footer height */
|
|
}
|
|
|
|
a {
|
|
color: var(--rlp-red);
|
|
}
|
|
|
|
.form-control:focus{
|
|
outline: none;
|
|
border-color: var(--rlp-red);
|
|
box-shadow: 0 0 3px var(--rlp-red);
|
|
-moz-box-shadow: 0 0 3px var(--rlp-red);
|
|
-webkit-box-shadow: 0 0 3px var(--rlp-red);
|
|
}
|
|
|
|
.body-content{
|
|
margin: 1rem 0rem 0 0rem;
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 40px; /* Set the fixed height of the footer here */
|
|
line-height: 39px; /* Vertically center the text there */
|
|
background-color: #f5f5f5;
|
|
border-top: 1px solid var(--rlp-gray-light);
|
|
color: var(--rlp-gray-dark);
|
|
}
|
|
|
|
.footer-link a{
|
|
color: var(--rlp-gray-dark);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar{
|
|
background-color: var(--rlp-red);
|
|
}
|
|
|
|
|
|
.nav-icon{
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
letter-spacing: -3px;
|
|
}
|
|
|
|
.menu-elem{
|
|
margin: 0 0 0 0.75rem;
|
|
}
|
|
|
|
.nav-btn{
|
|
color: white;
|
|
padding: 0.5rem;
|
|
}
|
|
.nav-btn:hover{
|
|
color: var(--rlp-gray-light);
|
|
}
|
|
|
|
.navbar-dark .navbar-nav .nav-link{
|
|
/*
|
|
Overwrites bootstrap default nav-link colouring
|
|
*/
|
|
color: white;
|
|
}
|
|
|
|
.card{
|
|
margin: 0 0.5rem 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
.card:hover{
|
|
box-shadow: 1px 1px 3px var(--rlp-gray-light);
|
|
}
|
|
|
|
.qs-box{
|
|
background-color: var(--rlp-red);
|
|
color: white;
|
|
font-size: 3rem;
|
|
width: 8rem;
|
|
height: 8rem;
|
|
}
|
|
|
|
/**
|
|
Overwrites bootstrap .btn:focus box shadow color
|
|
*/
|
|
.btn:focus{
|
|
box-shadow: 0 0 5px .2rem var(--rlp-gray-light);
|
|
}
|
|
|
|
.btn-default{
|
|
color: white;
|
|
background-color: var(--rlp-red);
|
|
border-radius: 0.15rem;
|
|
}
|
|
.btn-default:hover{
|
|
/*
|
|
color: var(--rlp-gray-light);
|
|
color: var(--rlp-red);;
|
|
background-color: unset;
|
|
border: 1px solid var(--rlp-red);
|
|
*/
|
|
box-shadow: 1px 1px 3px var(--rlp-gray-dark);
|
|
}
|
|
.btn-outline-default{
|
|
color: white;
|
|
border: 1px solid white;
|
|
}
|
|
.btn-outline-default:hover{
|
|
/*
|
|
color: var(--rlp-gray-light);
|
|
color: var(--rlp-red);;
|
|
background-color: unset;
|
|
border: 1px solid var(--rlp-red);
|
|
*/
|
|
box-shadow: 1px 1px 3px var(--rlp-gray-light);
|
|
color: var(--rlp-red);
|
|
background-color: white;
|
|
}
|
|
|
|
.cursor-pointer{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-item.selected{
|
|
background-color: var(--rlp-gray-light);
|
|
}
|
|
|
|
.check-star, .c-goldenrod{
|
|
color: goldenrod;
|
|
}
|
|
.registered-bookmark, .c-green{
|
|
color: green;
|
|
}
|
|
.c-red{
|
|
color: red;
|
|
}
|
|
|
|
/* PAGINATION */
|
|
.page-item > .page-link{
|
|
color: var(--rlp-red);
|
|
}
|
|
.page-link:focus{
|
|
border: 1px solid var(--rlp-red) !important;
|
|
box-shadow: 0 0 3px var(--rlp-red) !important;
|
|
-moz-box-shadow: 0 0 3px var(--rlp-red) !important;
|
|
-webkit-box-shadow: 0 0 3px var(--rlp-red) !important;
|
|
}
|
|
.page-item.active > .page-link{
|
|
background-color: var(--rlp-red);
|
|
border-color: var(--rlp-red);
|
|
}
|
|
|
|
.label-required{
|
|
color: var(--rlp-red);
|
|
}
|
|
|
|
.scroll-150{
|
|
max-height: 150px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.scroll-300{
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.w-20{
|
|
width: 20%;
|
|
}
|
|
.w-10{
|
|
width: 20%;
|
|
}
|
|
|
|
/*
|
|
Extends css for django autocomplete light (dal)
|
|
No other approach worked to get the autocomplete fields to full width of parent containers
|
|
*/
|
|
.select2{
|
|
width: 100% !important;
|
|
}
|
|
/*
|
|
Similar to bootstraps 'shadow-lg'
|
|
*/
|
|
.select2-results{
|
|
box-shadow: 0 1rem 3rem rgba(0,0,0,.2) !important;
|
|
}
|
|
.select2-results__option--highlighted{
|
|
background-color: var(--rlp-red) !important;
|
|
}
|
|
/*
|
|
.select2-container--default .select2-results__group{
|
|
background-color: var(--rlp-gray-light);
|
|
}
|
|
.select2-container--default .select2-results__option .select2-results__option{
|
|
padding-left: 1em !important;
|
|
}
|
|
|
|
*/
|
|
.select2-results__options--nested{
|
|
padding-left: 1em !important;
|
|
}
|
|
.select2-container--default .select2-results > .select2-results__options{
|
|
max-height: 500px !important;
|
|
}
|
|
/*
|
|
.select2-container--default .select2-results__option .select2-results__option{
|
|
padding-left: 2em;
|
|
}
|
|
|
|
*/ |