diff --git a/assets/sidebar.css b/assets/sidebar.css index baec1cacb2b19ed7669329e7b2e86fa0aa4ab129..8a95c013357e161b49375aa7dc560717c84a68d9 100644 --- a/assets/sidebar.css +++ b/assets/sidebar.css @@ -6,10 +6,6 @@ } .sidebar { - /* display: flex; */ - /* flex-direction: column; */ - /* flex-basis: 200px; */ - position: absolute; top: 0; left: 0; @@ -222,25 +218,30 @@ /* Info button on the sidebar bottom */ .sidebar-bottom #info-button { - background-image: url("/daily_dashboard/assets/images/Icon_Info.png"); + background-image: url("./images/Icon_Info.png"); + /* background-image: url("/daily_dashboard/assets/images/Icon_Info.png"); */ background-position: center; width: 52px !important; - /* height: 52px !important; */ - /* height: 46.8px; */ height: 5vh; - background-color: var(--blue); + background-color: var(--dark_grey); + border-right: 4px solid #4f4f4f !important; } /* Download button on the sidebar bottom */ .sidebar-bottom #download-button { - background-image: url("/daily_dashboard/assets/images/Icon_Download.png"); - background-position: 1rem; - background-color: #6C7B82; - width: 100%; - height: 5vh; - color: white; - font-weight: 700; - padding-top: 0.6rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-content: space-around; + background-image: url("./images/Icon_Download.png"); + /* background-image: url("/daily_dashboard/assets/images/Icon_Download.png"); */ + background-position: 10% 55%; + background-color: var(--dark_grey); + width: 100%; + height: 5vh; + color: white; + padding-top: 0.6rem; } #models-apply, @@ -290,7 +291,7 @@ span>#was-apply { */ .sidebar-bottom .card-text>.download-section { - background-image: url("/daily_dashboard/assets/images/download.svg"); + background-image: url("./images/download.svg"); background-repeat: no-repeat; background-position: 0.5rem; /* background-color: var(--yellow) !important; */ @@ -306,23 +307,18 @@ span>#was-apply { color: rgb(0 0 0 / 70%); border: 2px solid var(--blue) !important; text-decoration: none; - box-shadow: rgb(0 0 0 / 50%) 3px 3px 3px, rgb(0 0 0 / 50%) 0px 1px 2px !important; - transition: box-shadow .05s ; } .sidebar-bottom .card-text>.download-section:hover { - color: var(--blue); + color: white; + background-color: var(--blue) !important; font-weight: 700; - box-shadow: rgb(0 0 0 / 50%) 6px 6px 3px, rgb(0 0 0 / 50%) 0px 1px 2px !important; - transition: box-shadow .05s ; } .sidebar-bottom .card-text>.download-section:active { color: var(--blue); font-weight: 700; - box-shadow: rgb(0 0 0 / 75%) 0px 0px 2px, rgb(0 0 0 / 75%) 0px 1px 2px !important; border: 1.5px solid var(--blue) !important; - transition: box-shadow .01s; } .sidebar-bottom .card-text>p>a { diff --git a/assets/style.css b/assets/style.css index 6be0e97a0a549687b992e73dc9226fef26427e19..b1656c072bbd81acadc7ba7a2624d5eade9505c9 100644 --- a/assets/style.css +++ b/assets/style.css @@ -175,7 +175,7 @@ button#scores-apply, button#eval-apply { } button#scores-map-apply { - background-image: url('/daily_dashboard/assets/images/map_icon.png'); + background-image: url('./images/map_icon.png'); background-repeat: no-repeat; background-position: .5rem; text-align: right; @@ -186,13 +186,17 @@ button#scores-map-apply { display: table-row; } +#model-date-picker{ + width: 185px; +} + .timesliderline #date { color: var(--yellow) !important; font-family: "Roboto", sans-serif !important; font-size: 1rem; font-weight: bold; text-transform: uppercase; - padding: 0.7rem 0rem 0.6rem 1.1rem; + padding: 0.7rem 0rem 0.5rem 1.1rem; background-color: var(--blue) !important; border: none !important; cursor: pointer; @@ -200,6 +204,8 @@ button#scores-map-apply { .DateInput { vertical-align: baseline; + width: 150px; + margin-right: 0.3rem; } .DateInput_input { @@ -207,6 +213,9 @@ button#scores-map-apply { margin: 0; line-height: initial; } +.DateInput_input__focused { + font-size: 0.98rem; +} input.DateInput_input { margin-right: 0; @@ -242,7 +251,8 @@ div.SingleDatePickerInput { width: 34px; height: 34px; outline: none !important; - margin: 2px 3px 3px 5px; + margin-top: 2px; + margin-right: 5px; } .SingleDatePickerInput_clearDate_svg { @@ -258,19 +268,20 @@ div.SingleDatePickerInput { color: white; visibility: visible; font-family: 'Font Awesome 5 free'; - content: "\f303"; - font-weight: 600; + content: "\f044"; + /* content: "\f303"; */ + font-weight: 400; vertical-align: middle; - font-size: 1em; + font-size: 1.1em; bottom: 4px; position: relative; - right: 1px; + right: 5px; } .SingleDatePickerInput_clearDate:hover { - width: 34px; - height: 34px; - background-color: var(--yellow) !important; + width: 34px; + height: 34px; + background-color: var(--yellow) !important; } #was-slider-graph, #prob-slider-graph, #obs-vis-slider-graph { @@ -279,7 +290,7 @@ div.SingleDatePickerInput { } #slider-graph, #obs-slider-graph, #obs-aod-slider-graph { - padding: 0.2rem 25px 25px !important; + padding: 0.2rem 25px 25px 1rem !important; width: 30rem; } @@ -356,7 +367,8 @@ div.SingleDatePickerInput { } .anim-buttons { - padding: 0.3rem 0 0.4rem 0.4rem; + padding: 0.3rem 0 0.4rem 1rem; + border-right: none !important; } @@ -532,7 +544,15 @@ div.SingleDatePickerInput { } #map-view-dropdown.dropup.dropdown.show { - z-index: 1001 !important; + z-index: 1003 !important; +} + +#map-view-dropdown>.dropdown-toggle:after{ + display: inline-block; + vertical-align: 10%; + margin-left: 0.6rem; + font-size: 1.5rem; + color: var(--yellow); } .layout-dropdown #map-layers-dropdown { @@ -557,13 +577,14 @@ div.SingleDatePickerInput { } .layout-dropdown #map-view-dropdown>button { - background-image: url('/daily_dashboard/assets/images/map_icon.png'); + background-image: url('./images/map_icon.png'); + /* background-image: url('./images/map_icon.png'); */ width: 100%; height: 100%; } .layout-dropdown #map-layers-dropdown>button { - background-image: url('/daily_dashboard/assets/images/layers_icon.png'); + background-image: url('./images/layers_icon.png'); width: 100%; height: 100%; }