Changeset 108356 in spip-zone


Ignore:
Timestamp:
Jan 4, 2018, 3:55:59 PM (15 months ago)
Author:
brunobergot@…
Message:

nouveau look pour la topnav

Location:
_galaxie_/boussole.spip.net/squelettes
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • _galaxie_/boussole.spip.net/squelettes/boussole_topnav.css

    r108339 r108356  
    1 .spip_theme { background: #2e2e2e; background-color: #3d3b3c; background-image: -moz-linear-gradient(top,#2e2e2e,#544f52); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2e2e2e), to(#544f52)); background-image: -webkit-linear-gradient(top,#2e2e2e,#544f52); background-image: -o-linear-gradient(top,#2e2e2e,#544f52); background-image: linear-gradient(to bottom,#2e2e2e,#544f52); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='argb(#2e2e2e)', endColorstr='argb(#544f52)', GradientType=0); -webkit-box-shadow: 0 3px 5px #aaaaaa; -moz-box-shadow: 0 3px 5px #aaaaaa; box-shadow: 0 3px 5px #aaaaaa; }
    21.caret { content: ""; display: inline-block; height: 0; vertical-align: middle; width: 0; margin-right: 10px; }
    3 .menu_container.spip-theme { background: #2e2e2e; background-color: #3d3b3c; background-image: -moz-linear-gradient(top,#2e2e2e,#544f52); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2e2e2e), to(#544f52)); background-image: -webkit-linear-gradient(top,#2e2e2e,#544f52); background-image: -o-linear-gradient(top,#2e2e2e,#544f52); background-image: linear-gradient(to bottom,#2e2e2e,#544f52); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='argb(#2e2e2e)', endColorstr='argb(#544f52)', GradientType=0); -webkit-box-shadow: 0 3px 5px #aaaaaa; -moz-box-shadow: 0 3px 5px #aaaaaa; box-shadow: 0 3px 5px #aaaaaa; z-index: 99; }
    4 .menu_container.spip-theme>ul>li a { color: #eeeeee; font-family: Georgia,Cambria,"Times New Roman",Times,serif; font-size: 15px; }
    5 .menu_container.spip-theme>ul>li a:hover,
    6 .menu_container.spip-theme>ul>li a:active,
    7 .menu_container.spip-theme>ul>li a:focus { background: none; }
    8 .menu_container.spip-theme>ul>li .caret { border-bottom-color: #eeeeee; border-top-color: #eeeeee; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #eeeeee; }
    9 .menu_container.spip-theme>ul>li:hover { background-color: #544f52; }
    10 .menu_container.spip-theme>ul>li:hover .caret { border-bottom-color: #eeeeee; border-top-color: #eeeeee; border-top: 4px solid #eeeeee; }
     2.menu_container.spip-theme { background: #333; width: 100%; z-index: 99; }
     3.menu_container.spip-theme a:hover { text-decoration: underline; }
     4.menu_container.spip-theme > ul > li:first-child:hover,
     5.menu_container.spip-theme > ul > li:first-child:focus { background-color: transparent; }
     6.menu_container.spip-theme > ul > li:first-child a { padding: 0; opacity: 0.9; transition-duration: 0.2s; transition-property: opacity; }
     7.menu_container.spip-theme > ul > li:first-child a:hover { opacity: 1; }
     8.menu_container.spip-theme > ul > li a { color: #ffffff; font-family: 'montserrat', Helvetica, Arial, sans-serif; font-size: 0.9em; }
     9.menu_container.spip-theme > ul > li a:after { content: ''; }
     10.menu_container.spip-theme > ul > li > a:hover { text-decoration: none !important; }
     11.menu_container.spip-theme > ul > li a:hover,
     12.menu_container.spip-theme > ul > li a:active,
     13.menu_container.spip-theme > ul > li a:focus { background: none; }
     14.menu_container.spip-theme > ul > li .caret { border-bottom-color: #eeeeee; border-top-color: #eeeeee; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #eeeeee; }
     15.menu_container.spip-theme > ul > li:hover { background-color: #544f52; }
     16.menu_container.spip-theme > ul > li:hover .caret { border-bottom-color: #eeeeee; border-top-color: #eeeeee; border-top: 4px solid #eeeeee; }
    1117.menu_container.spip-theme ul.menu_submenu_block li:hover { background: none repeat scroll 0% 0% #2e2e2e; }
    1218.menu_container { margin-bottom: 0; height: 40px; clear: both; float: left; position: absolute; top: 0; left: 0; }
    1319.menu_container.full_width { width: 100%; }
    14 .menu_container>ul { list-style: noneoutside   none; margin: 0; padding: 0; float: left; position: relative; width: 100%; height: inherit; }
    15 .menu_container>ul>li { float: left; padding: 0; margin: 0; text-align: left; background: none; transition: background-color 200ms linear 0s; }
    16 .menu_container>ul>li>a { padding: 0 7px 0 17px; line-height: 40px; vertical-align: middle; color: #ffffff; text-decoration: none; text-shadow: none; font-size: 15px; font-family: Georgia,Cambria,"Times New Roman",Times,serif; }
    17 .menu_container>ul>li>a>img { margin-right: 10px; vertical-align: middle; }
    18 .menu_container>ul>li.right { float: right; }
    19 .menu_container>ul>li.last>a { box-shadow: none; border-right: 0 none; }
    20 .menu_container>ul>li:hover { cursor: pointer; }
    21 .menu_container>ul>li>.menu_dropdown_block { visibility: hidden; display: none; position: absolute; border-right: 1px solid #dddddd; border-width: 0 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color #dddddd #dddddd; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2); box-shadow: 1px 1px 3px rgba(0,0,0,0.2); background: none repeat scroll 0% 0% #ffffff; top: 100%; color: #575757; opacity: 0; text-align: left; transition: opacity 100ms linear 0s; -moz-box-sizing: border-box; overflow: hidden; z-index: 30; }
    22 .menu_container>ul>li:hover>.menu_dropdown_block,
    23 .menu_container>ul>li:focus>.menu_dropdown_block { visibility: visible; display: block; opacity: 1; margin-left: -1px; }
    24 .menu_container>ul>li>.menu_dropdown_block.full_width { left: 0; margin-left: 0; }
    25 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container { padding: 15px 15px 5px 15px; }
    26 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu { list-style: noneoutside   none; padding: 0; margin: 0 0 10px; }
    27 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li { display: block; background: none; padding: 0; }
    28 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a { background: transparent; display: block; border: 0; padding: 4px 0; padding-left: 24px; background-position: left center; background-repeat: no-repeat; text-decoration: none; color: #666666; font-family: Georgia,Cambria,"Times New Roman",Times,serif; }
    29 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a:hover { color: #111111; background-color: none; }
    30 .menu_container>ul>li>.menu_dropdown_block .ssmenu_container ul.menu_submenu li>a>img { float: left; margin-right: 5px; }
     20.menu_container > ul { list-style: none outside none; margin: 0; padding: 0 1.5em; position: relative; width: 100%; height: inherit; }
     21.menu_container > ul > li { float: left; padding: 0; margin: 0; text-align: left; background: none; transition: background-color 200ms linear 0s; }
     22.menu_container > ul > li > a { padding: 0 7px 0 17px; line-height: 40px; vertical-align: middle; color: #ffffff; text-decoration: none; text-shadow: none; font-size: 15px; font-family: Georgia,Cambria,"Times New Roman",Times,serif; }
     23.menu_container > ul > li > a > img { vertical-align: middle; }
     24.menu_container > ul > li.right { float: right; }
     25.menu_container > ul > li.last > a { box-shadow: none; border-right: 0 none; }
     26.menu_container > ul > li:hover { cursor: pointer; background-color: #595959; }
     27.menu_container > ul > li > .menu_dropdown_block { visibility: hidden; display: none; position: absolute; border-right: 1px solid #dddddd; border-width: 0 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color #dddddd #dddddd; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); background: none repeat scroll 0% 0% #ffffff; top: 100%; color: #575757; opacity: 0; text-align: left; transition: opacity 100ms linear 0s; -moz-box-sizing: border-box; overflow: hidden; z-index: 30; }
     28.menu_container > ul > li:hover > .menu_dropdown_block,
     29.menu_container > ul > li:focus > .menu_dropdown_block { visibility: visible; display: block; opacity: 1; margin-left: 0; border: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
     30.menu_container > ul > li > .menu_dropdown_block.full_width { left: 0; margin-left: 0; }
     31.menu_container > ul > li > .menu_dropdown_block .ssmenu_container { padding: 15px 15px 5px 15px; }
     32.menu_container > ul > li > .menu_dropdown_block .ssmenu_container ul.menu_submenu { list-style: noneoutside   none; padding: 0; margin: 0 0 10px; }
     33.menu_container > ul > li > .menu_dropdown_block .ssmenu_container ul.menu_submenu li { display: block; background: none; padding: 0; }
     34.menu_container > ul > li > .menu_dropdown_block .ssmenu_container ul.menu_submenu li > a { background: transparent; display: block; border: 0; padding: 4px 0; padding-left: 24px; background-position: left center; background-repeat: no-repeat; text-decoration: none; color: #666666; font-family: Georgia,Cambria,"Times New Roman",Times,serif; }
     35.menu_container > ul > li:hover > .menu_dropdown_block .ssmenu_container ul.menu_submenu li > a,
     36.menu_container > ul > li:focus > .menu_dropdown_block .ssmenu_container ul.menu_submenu li > a { color: #444444; font-family: 'montserrat', Helvetica, Arial, sans-serif; }
     37.menu_container > ul > li > .menu_dropdown_block .ssmenu_container ul.menu_submenu li > a:hover { color: #111111; background-color: none; }
     38.menu_container > ul > li > .menu_dropdown_block .ssmenu_container ul.menu_submenu li > a > img { float: left; margin-right: 5px; }
    3139.mobile_collapser { display: none; }
    32 .mobile_collapser>label { display: block; height: 22px; padding: 6px 25px; color: #eeeeee; text-shadow: 0 1px 2px rgba(0,0,0,0.25); font-size: 16px; line-height: 22px; font-family: Georgia,Cambria,"Times New Roman",Times,serif; text-align: left; box-shadow: 0 -1px 1px rgba(0,0,0,0.2) inset; }
    33 .mobile_collapser .mobile_menu_icon { display: block; float: left; width: 22px; height: 22px; background: url('../images/mobile-menu-icon-black.png') no-repeat scroll 50% 50% transparent; margin-right: 10px; }
     40.mobile_collapser > label { display: block; height: 22px; padding: 6px 25px; color: #eeeeee; text-shadow: 0 1px 2px rgba(0,0,0,0.25); font-size: 16px; line-height: 22px; font-family: Georgia,Cambria,"Times New Roman",Times,serif; text-align: left; box-shadow: 0 -1px 1px rgba(0,0,0,0.2) inset; }
     41.mobile_collapser .mobile_menu_icon { display: block; float: left; width: 22px; height: 22px; background: url('images/mobile-menu-icon.png') no-repeat scroll 50% 50% transparent; margin-right: 10px; }
    3442#hidden_menu_collapser { display: none; }
    35 #hidden_menu_collapser:checked+ul { height: auto; min-height: 40px; max-height: 2999px; }
     43#hidden_menu_collapser:checked + ul { height: auto; min-height: 40px; max-height: 2999px; }
    3644@media only screen and (max-width:940px) and (min-width:640px) {
    37         .menu_container>ul>li>a { padding: 12px 15px; font-size: 14px; }
    38         .menu_container>ul>li:hover>a { padding-left: 16px; }
     45        .menu_container > ul > li > a { padding: 12px 15px; font-size: 14px; }
     46        .menu_container > ul > li:hover > a { padding-left: 16px; }
    3947}
    4048@media only screen and (max-width:760px) {
    4149        .mobile_collapser { background: "none no-repeat #353535"; display: block; height: 40px; }
    4250        .menu_container { padding: 0; height: auto; }
    43         .menu_container>ul { position: relative; transition: all 100ms linear 0s; height: 0; background: inherit; overflow: hidden; }
    44         .menu_container>ul>li { position: relative; float: none; background: inherit; }
    45         .menu_container>ul>li:hover { margin-left: 0; }
    46         .menu_container>ul>li>a { box-shadow: none; border-right: 0 none; }
    47         .menu_container>ul>li>.menu_dropdown_block { visibility: visible; position: relative; transition: all 100ms linear 0s; height: 0; width: 100%; }
    48         .menu_container>ul>li:hover>.menu_dropdown_block { height: auto; min-height: 40px; max-height: 3000px; }
    49         .menu_container>ul>li .right { float: none; }
    50         .menu_container>ul>li>.menu_dropdown_block [class^="span"],
    51         .menu_container>ul>li>.menu_dropdown_block [class*=" span"] { float: none; width: auto!important; }
    52  }
    53 html.ie7 .menu_container>ul { zoom: 1; white-space: nowrap; z-index: 1; }
    54 html.ie7 .menu_container>ul>li>.menu_dropdown_block { top: 0; position: relative; }
     51        .menu_container > ul { position: relative; transition: all 100ms linear 0s; height: 0; background: inherit; overflow: hidden; }
     52        .menu_container > ul > li { position: relative; float: none; background: inherit; }
     53        .menu_container > ul > li:hover { margin-left: 0; }
     54        .menu_container > ul > li:first-child:hover,
     55        .menu_container > ul > li:first-child:focus { background-color: #595959; }
     56        .menu_container > ul > li:first-child > a > img { display: block; margin: 0 auto; }
     57        .menu_container > ul > li > a { box-shadow: none; border-right: 0 none; }
     58        .menu_container > ul > li > .menu_dropdown_block { visibility: visible; position: relative; transition: all 100ms linear 0s; height: 0; width: 100%; }
     59        .menu_container > ul > li:hover > .menu_dropdown_block { height: auto; min-height: 40px; max-height: 3000px; }
     60        .menu_container > ul > li .right { float: none; }
     61        .menu_container > ul > li > .menu_dropdown_block [class^="span"],
     62        .menu_container > ul > li > .menu_dropdown_block [class*=" span"] { float: none; width: auto!important; }
     63}
     64html.ie7 .menu_container > ul { zoom: 1; white-space: nowrap; z-index: 1; }
     65html.ie7 .menu_container > ul > li > .menu_dropdown_block { top: 0; position: relative; }
    5566@media print {
    5667        .menu_container { display: none; }
  • _galaxie_/boussole.spip.net/squelettes/inclure/boussole_topnav_spip.html

    r81848 r108356  
    22<INCLURE{fond=modeles/boussole_topnav,
    33        boussole=spip,
    4         titre_boussole=SPIP,
     4        titre_boussole=non,
    55        lien_boussole=#GET{lien_spip},
    66        taille_logo_boussole=36,
  • _galaxie_/boussole.spip.net/squelettes/spipnav.js.html

    r88284 r108356  
    1313                // insertion du html et de la css en inline
    1414                var topnav = [(#INCLURE{fond=inclure/boussole_topnav_spip}|liens_absolus|json_encode)];
    15                 topnav += '<style type="text/css">'+[(#INCLURE{#CHEMIN{css/boussole_topnav.css}|url_absolue_css|direction_css}|json_encode)]+'</style>';
     15                topnav += '<style type="text/css">'+[(#INCLURE{#CHEMIN{boussole_topnav.css}|url_absolue_css|direction_css}|json_encode)]+'</style>';
    1616                var t = document.createElement('div');
    1717                t.className = "spipnav";
Note: See TracChangeset for help on using the changeset viewer.