Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: custom theme #469

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 80 additions & 26 deletions atlas/static/css/atlas.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
:root {
--main-color: #c3b528;
--second-color: #5a7526;
--text-color : #272727;
--text-contrast : #fff;
--map-maille-border-color: #ddd;
--map-maille-lastobs-border-color: #c218d0;
--map-territory-border-color: #333;
--map-area-border-width: 3px;
--map-area-border-color: var(--second-color);
--scrollbarBG: #cfd8dc;
--thumbBG: var(--main-color);
--background-color : #fff;
--background-contrast : #333;
--background-body : #e3e7e8;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #e3e7e8;
background-color: var(--background-body);
color: var(--text-color);
}

main {
Expand All @@ -23,6 +29,10 @@ main {
flex: 1;
}

.bg-color {
background-color: var(--background-color);
}

#dropdown09 {
cursor: pointer;
}
Expand All @@ -35,12 +45,16 @@ main {
color: var(--icon-color-title);
}

.card {
background-color: var(--background-color);
}

.panel {
border-radius: 0px !important;
}

.panel-heading {
background-color: white !important;
background-color: var(--background-color) !important;
}

/* PRESENTATION affix navbar */
Expand Down Expand Up @@ -125,14 +139,14 @@ a {
}

.btn.btn-default {
color: white;
color: var(--text-color);
border-color: var(--main-color);
background-color: var(--main-color) !important;
}

.btn.btn-default:hover {
background-color: white !important;
color: black;
background-color: var(--text-color) !important;
color: var(--text-contrast);
border-color: var(--main-color);
}

Expand All @@ -148,14 +162,45 @@ a {
/* Navbar */

.navbar {
background-color: white !important;
background-color: var(--background-color) !important;
margin-bottom: 0px;
border-radius: 0px;
border-bottom: 1px solid var(--main-color);
z-index: 1999;
height: 60px;
}

/* Navbar search fied */

.navbar .navbar-collapse .input-group {
border: solid 1px var(--main-color);
border-radius: 4px;
background-color: var(--background-color);
}

.navbar .navbar-collapse .input-group i {
color : var(--main-color);
}

.navbar .navbar-collapse .input-group input, .navbar .navbar-collapse .input-group button, .navbar .navbar-collapse .input-group input:focus {
border : none;
box-shadow : none !important;
background-color: var(--background-color) !important;
color : var(--text-color) !important;
}

/* Navbar dropdown */

.navbar .input-group .dropdown-menu.show {
right: 0 !important;
left: inherit !important;
float: right !important;
}

.navbar .input-group .dropdown-menu .dropdown-item:active {
background-color: var(--main-color) !important;
}

.logoStructure {
height: 60px;
max-height: 60px;
Expand All @@ -167,11 +212,12 @@ a {
font-size: 18px;
line-height: 30px;
padding-right: 20px;
color: var(--text-color) !important;
}

@media (max-width: 760px) {
.navbar-collapse {
background-color: #333;
background-color: var(--background-contrast);
}

main h1 {
Expand Down Expand Up @@ -213,7 +259,7 @@ sidebar {
position: fixed;
padding-top: 60px;
width: 60px;
background-color: #333333;
background-color: var(--background-contrast);
height: calc(100vh);
z-index: 1998;
flex: 1;
Expand All @@ -231,7 +277,7 @@ sidebar {
height: 60px !important;
min-height: 60px;
line-height: 60px;
color: white;
color: var(--text-contrast);
cursor: pointer;
text-align: center;
border-bottom: 1px solid var(--main-color);
Expand All @@ -242,7 +288,7 @@ sidebar {
}

#sidebar_menu a {
color: white;
color: var(--text-color);
text-decoration: none;
}

Expand All @@ -257,7 +303,7 @@ li.sidebar-brand {

#sidebar-wrapper a:hover {
cursor: pointer;
color: black;
color: var(--text-contrast);
}

/* END sidebar */
Expand All @@ -279,8 +325,8 @@ li.sidebar-brand {
.legend {
line-height: 10px;
font-size: 14px;
color: #555;
background-color: white;
color: var(--text-contrast);
background-color: var(--background-color);
opacity: 0.7;
padding: 5px;
border-radius: 4px;
Expand Down Expand Up @@ -377,7 +423,7 @@ input {
}

.hovereffect h2 {
color: #fff;
color: var(--text-color);
text-align: center;
position: relative;
font-size: 17px;
Expand All @@ -393,8 +439,8 @@ input {
.hovereffect a.info {
text-decoration: none;
display: inline-block;
color: #fff;
border: 1px solid #fff;
color: var(--text-color);
border: 1px solid var(--text-color);
border-radius: 10px;
background-color: transparent;
opacity: 0;
Expand All @@ -406,7 +452,7 @@ input {
}

.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px var(--text-color);
}

.hovereffect:hover .img-responsive-logo {
Expand Down Expand Up @@ -443,10 +489,14 @@ footer {
margin-left: 60px;
padding-top: 10px;
margin-bottom: 0px;
background-color: var(--light);
background-color: var(--background-body);
margin-top: 10px;
}

footer a {
color: var(--second-color)
}

.credits {
text-align: left;
}
Expand Down Expand Up @@ -490,6 +540,10 @@ footer {
left: 0%;
}

.stat-thumbnail {
background-color: var(--background-color) !important;
}

/*.overlay-obs {*/
/* color: #fff;*/
/* text-align: center;*/
Expand Down Expand Up @@ -610,7 +664,7 @@ footer {
}

.btn-success {
color: #fff;
color: var(--text-color);
background-color: var(--main-color);
border-color: var(--main-color);
}
Expand All @@ -634,12 +688,12 @@ footer {
}

.overlay-obs {
color: #fff;
color: var(--text-color);
text-align: center;
position: relative;
top: 100px;
font-size: 13px;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
Expand All @@ -651,20 +705,20 @@ footer {
}

.overlay-intro-image {
color: #fff;
color: var(--text-color);
text-align: center;
position: relative;
top: 100%;
float: left;
font-size: 13px;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.5);
padding: 10px;
text-decoration: none;
}

.modal-header {
background-color: var(--main-color);
color: white;
color: var(--text-color);
padding: 0.5rem 0.5rem;
}

Expand All @@ -680,8 +734,8 @@ footer {

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
background: var(--text-color);
color: var(--text-contrast);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
border-radius: 2px;
border-left: 5px solid var(--main-color);
Expand Down
6 changes: 4 additions & 2 deletions atlas/static/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,13 @@ h3.title-spaced {
background-size: 25px 25px;
background-position-x: calc(100% - 25px);
outline: none;
padding-left: 35px;
text-align: left;
}

.addon {
position: absolute;
margin-left: 5px;
margin-left: 8px;
display: flex;
align-items: center;
z-index: 100;
Expand All @@ -180,7 +182,7 @@ h3.title-spaced {
/*Custom Stat Block*/

.center-input {
width: 80%;
width: 100%;
margin: 0 auto;
}
.stat-custom-panel {
Expand Down
4 changes: 2 additions & 2 deletions atlas/static/mapHome.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ $(function(){

// interaction list - map
$('.lastObslistItem').click(function(){
$(this).siblings().removeClass('bg-light');
$(this).addClass('bg-light');
$(this).siblings().removeClass('bg-color');
$(this).addClass('bg-color');
var id_observation = $(this).attr('idSynthese');
p = (currentLayer._layers);
var selectLayer;
Expand Down
4 changes: 2 additions & 2 deletions atlas/templates/areaSheet/_main.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
{# Ajoutez ici coeur de la page #}
<div class="row h-100 flex-grow-1 p-0 m-0 border-bottom">
<div class="col-12 col-xl-4 col-lg-5 col-md-6 d-flex flex-column m-0 p-0">
<div class="bg-light text-center border-bottom border-right p-2">
<div class="bg-color text-center border-bottom border-right p-2">
{% if configuration.EXTENDED_AREAS %}
{% include 'templates/areaSheet/surrounding_areas.html' %}
{% endif %}
Expand All @@ -65,7 +65,7 @@ <h4><b>{{ areaInfos.typeName }} - {{ areaInfos.areaName }}</b></h4>
{% include 'templates/core/listTaxons.html' %}
</div>
<div class="col-12 col-xl-8 col-lg-7 col-md-6 d-flex flex-column m-0 p-0">
<div class="bg-light p-2">
<div class="bg-color p-2">
{% if sheetType =='commune' %}
<h5 id="titleMap"><i class="fa fa-map"></i> {{ configuration.NB_LAST_OBS }} {{ _('last.obs.municipality') }}
<i>{{ areaInfos.areaName }}</i></h5>
Expand Down
4 changes: 2 additions & 2 deletions atlas/templates/core/advanced_search.html
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ <h5 class="modal-title text-info" id="infoModalLabel"><i class="fas fa-info-circ
</div>
</div>
</div>
<div class="bg-light border-bottom border-right p-2">
<div class="bg-color border-bottom border-right p-2">
<div class="text-center">
<span class="float-right ">
<span data-toggle="modal"
Expand Down Expand Up @@ -410,7 +410,7 @@ <h4><b>{{ _('advanced_search') }}</b></h4>

</div>
</div>
<div id="list" class="bg-white flex-grow-1">
<div id="list" class="bg-color flex-grow-1">
<ul class="list-unstyled">
<li v-for="(item, key) in items" :key="key" class="media border-bottom px-0 py-0">
<img class="mr-3" v-bind:src="item.media" alt="Generic placeholder image">
Expand Down
4 changes: 2 additions & 2 deletions atlas/templates/core/listTaxons.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@

</style>
{% endif %}
<div class="bg-white border-right p-2">
<div class="bg-color border-right p-2">

<div class="col">
<input id="taxonInput" type="text" class="form-control form-control-sm" placeholder="{{ _('filter.species') }}">
</div>

</div>
<div id="taxonList" class="d-flex align-content-stretch bg-white flex-grow-1">
<div id="taxonList" class="d-flex align-content-stretch bg-color flex-grow-1">
<ul class="list-group w-100">
{% for taxon in listTaxons.taxons %}
<li id="taxonListItem" class="media border-bottom p-2" area-code="{{ insee }}"
Expand Down
Loading