Mercurial > libervia-templates
comparison sat_templates/templates/default/static/styles.css @ 183:240bbac435f4
base: implemented language button:
- `component.menu` can now be used with a `{% call %}`, allowing extra HTML to be added after in the <nav> element
- a language dropdown is shown if more than one translation is available, allowing to change page locale
- if javascript is available, only the dropdown is visible, and changing it reload the page with new locale
- if javascript is not available, a submit button is display to change the locale
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 10 Apr 2019 21:05:58 +0200 |
parents | 29214fa3a53b |
children | e85122a39e8f |
comparison
equal
deleted
inserted
replaced
182:29214fa3a53b | 183:240bbac435f4 |
---|---|
789 font-variant: small-caps; | 789 font-variant: small-caps; |
790 } | 790 } |
791 | 791 |
792 .main_menu { | 792 .main_menu { |
793 min-width: 200px; | 793 min-width: 200px; |
794 /* background-color: #eaeaea; */ | |
795 background-color: #333; | 794 background-color: #333; |
796 color: white; | 795 color: white; |
797 overflow: auto; | 796 overflow: auto; |
797 display: flex; | |
798 flex-direction: column; | |
799 flex-shrink: 0; | |
800 justify-content: space-between; | |
801 padding-bottom: 0.5em; | |
798 } | 802 } |
799 | 803 |
800 .main_menu ul { | 804 .main_menu ul { |
801 flex-direction: row; | 805 flex-direction: row; |
802 flex-wrap: wrap; | 806 flex-wrap: wrap; |
807 margin-bottom: 0.2em; | |
803 } | 808 } |
804 | 809 |
805 .main_menu li { | 810 .main_menu li { |
806 flex: 1; | 811 flex: 1; |
807 padding: 0; | 812 padding: 0; |
815 | 820 |
816 .main_menu a:hover { | 821 .main_menu a:hover { |
817 background-color: initial; | 822 background-color: initial; |
818 text-shadow: 1px 1px 2px; | 823 text-shadow: 1px 1px 2px; |
819 font-weight: bold; | 824 font-weight: bold; |
825 } | |
826 | |
827 .menu__language { | |
828 display: flex; | |
829 flex-direction: row; | |
830 justify-content: center; | |
831 padding: 0 0.3em; | |
832 } | |
833 | |
834 .menu__language select { | |
835 border: none; | |
836 font-size: 0.8em; | |
837 } | |
838 | |
839 .menu__language button { | |
840 display: none; | |
841 border: none; | |
842 background-color: var(--color-prim--light); | |
843 margin-left: 1em; | |
844 font-size: 0.8em; | |
845 } | |
846 | |
847 .menu__language button:hover { | |
848 background-color: var(--color-prim--dark); | |
849 cursor: pointer; | |
820 } | 850 } |
821 | 851 |
822 .category_menu ul { | 852 .category_menu ul { |
823 justify-content: center; | 853 justify-content: center; |
824 } | 854 } |
1308 | 1338 |
1309 .main_menu ul { | 1339 .main_menu ul { |
1310 flex-direction: column; | 1340 flex-direction: column; |
1311 padding-left: 2em; | 1341 padding-left: 2em; |
1312 } | 1342 } |
1313 } | 1343 |
1344 } |