diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css index 3c14d20..ddca7a4 100644 --- a/src/assets/css/endp_utils.css +++ b/src/assets/css/endp_utils.css @@ -8,7 +8,7 @@ html { --brown: #7B0C12; --dark-grey: #343434; - --light-brown: #D74A52; + --light-brown: #ad464b; --light-brown-alt: #CC3E46; --panel-bg-color: #F7F7F7; --link-over-color: #CC3E46; diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue index 6ce7daa..98ed6be 100644 --- a/src/components/PersonSearchBox.vue +++ b/src/components/PersonSearchBox.vue @@ -237,4 +237,41 @@ input[type="text"]::placeholder { font-style: italic; } +/* augment a little bit the size of the slider */ +.slider { + width: 100px; + height: 2px; +} + +/* Chrome, Safari, et d'autres navigateurs WebKit */ +.slider::-webkit-slider-thumb { + /* remove border color */ + border: none; +} + +.slider::-webkit-slider-thumb:hover { + box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +.slider::-webkit-slider-thumb:active { + box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +/* Firefox */ +.slider::-moz-range-thumb { + border: none; +} + +.slider::-moz-range-thumb:hover { + box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + +.slider::-moz-range-thumb:active { + box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3); + transition: box-shadow 0.3s; +} + \ No newline at end of file diff --git a/src/components/RegisterHistogramChartBox.vue b/src/components/RegisterHistogramChartBox.vue index 939ca17..908bcb2 100644 --- a/src/components/RegisterHistogramChartBox.vue +++ b/src/components/RegisterHistogramChartBox.vue @@ -81,7 +81,7 @@ export default { type: 'bar', text: "", hoverinfo: 'text', - marker: {color: '#D74A52FF'} + marker: {color: '#ad464b'} }; const layout = { @@ -139,11 +139,11 @@ export default { const animationOptions = { transition: { - duration: 2000, + duration: 1000, easing: "cubic-in-out" }, frame: { - duration: 2000 + duration: 1000 } }; @@ -176,7 +176,7 @@ export default { const years = Object.keys(this.pagesByYear); const graph = document.getElementById('histogram'); const colors = years.map(year => { - return (year >= this.startYear && year <= this.endYear) ? '#D74A52FF' : 'lightgrey'; + return (year >= this.startYear && year <= this.endYear) ? '#ad464b' : 'lightgrey'; }); if (graph) { Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "cubic-in-out"});