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 }