Index: gc_lang/fr/webext/panel/main.css ================================================================== --- gc_lang/fr/webext/panel/main.css +++ gc_lang/fr/webext/panel/main.css @@ -67,51 +67,62 @@ /* Main classes */ html { box-sizing: border-box; width: 530px; - height: 880px; + height: 500px; font-family: "Trebuchet MS", "Liberation Sans", sans-serif; } body { width: 530px; - height: 880px; + height: 500px; } +/* + Maximal height of a panel in WebExtention seems to be 500px. + When going over this limit, a scrollbar appears which destructs the + horizontal balance of elements. + --> vertical scrolling is done with overflow in #page. + #page must have the same height than body. +*/ #main { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: stretch; background-color: hsl(210, 0%, 100%); min-height: 100%; } -#left { - width: 54px; +#menu { + position: fixed; + left: 5px; + width: 50px; + border-left: solid 2px hsl(210, 0%, 70%); + border-bottom: solid 2px hsl(210, 0%, 70%); + border-right: solid 2px hsl(210, 0%, 70%); + border-radius: 0 0 5px 5px; background-color: hsl(210, 10%, 96%); - border-right: solid 1px hsl(210, 0%, 70%); color: hsl(210, 10%, 96%); } #logo { - padding: 10px; -} -#left li { - padding: 10px 5px; - border-bottom: 1px solid hsl(210, 10%, 90%); - text-align: center; - cursor: pointer; - color: hsl(210, 10%, 50%); - list-style-type: none; -} -#left li:hover { - background-color: hsl(210, 10%, 92%); - -} + padding: 10px; +} +#menu li { + padding: 10px 5px; + border-bottom: 1px solid hsl(210, 10%, 90%); + text-align: center; + cursor: pointer; + color: hsl(210, 10%, 50%); + list-style-type: none; +} +#menu li:hover { + background-color: hsl(210, 10%, 92%); +} + #page { + padding-left: 60px; background-color: hsl(210, 0%, 100%); + height: 500px; + overflow: auto; } #page h1 { margin: 0 0 10px 0; color: hsl(210, 70%, 70%); font: bold 30px 'Yanone Kaffeesatz', "Liberation Sans Narrow", sans-serif; @@ -119,33 +130,33 @@ #page p { margin: 10px 0 5px 0; } #home_page { - display: block; - padding: 20px; + display: block; + padding: 20px; } #tf_page { - display: none; - padding: 20px; + display: none; + padding: 20px; } #gc_page { - display: none; - padding: 20px 20px 30px 20px; + display: none; + padding: 20px 20px 30px 20px; } #gc_options_page { - display: none; - padding: 20px; + display: none; + padding: 20px; } #sc_options_page { - display: none; - padding: 20px; + display: none; + padding: 20px; } #lxg_page { - display: none; - padding: 20px; + display: none; + padding: 20px; } /* Conjugueur page @@ -243,12 +254,11 @@ #test_page { display: none; } #test_cmd { padding: 15px; - background-color: hsl(0, 0%, 92%); - border-bottom: 1px solid hsl(0, 0%, 86%); + border-bottom: 1px solid hsl(0, 0%, 90%); } #test_cmd textarea { width: 100%; border: 2px solid hsl(0, 0%, 89%); border-radius: 3px; Index: gc_lang/fr/webext/panel/main.html ================================================================== --- gc_lang/fr/webext/panel/main.html +++ gc_lang/fr/webext/panel/main.html @@ -7,12 +7,12 @@
-
-