konova/konova/static/css/konova.css
mpeltriaux ec69556b1c #112 Autocomplete enhancements
* 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
2022-02-15 15:33:25 +01:00

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;
}
*/