diff --git a/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/small-logo.svg b/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/small-logo.svg new file mode 100644 index 00000000..647050df --- /dev/null +++ b/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/small-logo.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + diff --git a/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/style.css b/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/style.css index 2db17c21..595966aa 100644 --- a/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/style.css +++ b/src/ninegate-1.0/src/Cadoles/CoreBundle/Resources/public/themes/metice/style.css @@ -13,15 +13,29 @@ /* ====== ESSAI D'UN MODE REDUIT ======= */ .header.reduit { - height: 38px !important; + height: 50px !important; overflow-y: hidden; } .header.reduit .nav.navbar-top-links.navbar-right > li a {font-size: 1.5em; } .header .title img {transition:margin-left 0.1s ease; } -.header.reduit .title img { margin-left:-300px !important;} +.header.reduit #logo { + /* remplacer l'image en définissant une image de background */ + /* et en positionnant un padding de la largeur de l'image */ + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: url(/ninegate/bundles/cadolescore/themes/metice2021/small-logo.svg) no-repeat; + width: 62px; /* Width of new image */ + height: 23px; /* Height of new image */ + padding-left: 62px; /* Equal to width of new image */ + margin-top: 21px; + margin-left: 11px; + margin-right: 10px; + } + .header.reduit small { - top: 18px !important; + top: 25px !important; font-size: 0.5em; } @@ -29,6 +43,8 @@ line-height: 25px !important; transition:line-height 0.5s ease; font-size: 0.9em; + margin-top: 4px; + padding-left: 0px !important; } .header.reduit .avatar {height: 25px; } @@ -143,14 +159,94 @@ div.header { } -#logo { - height: 130px !important; - float: left !important; - top: -10px !important; - left: 0px !important; - position: relative !important; +@media all and (min-width: 768px) +{ + #logo { + height: 130px !important; + float: left !important; + top: -10px !important; + left: 0px !important; + position: relative !important; + } } +@media all and (max-width: 600px) +{ + .navbar-brand { + width: 24em; + overflow: hidden; + height: 2.6em; + } +} + +@media all and (min-width: 601px) and (max-width: 767px) +{ + .navbar-brand { + width: 28em; + height: 2.6em; + } +} + + +@media all and (max-width: 767px) +{ + nav.navbarsmall { + background: white !important; + } + + .navbarsmall .navbar-brand { + color: black !important; + font-family: var(--fontfacetitle); + } + + #logo { + float: left !important; + top: 0px !important; + left: 0px !important; + position: relative !important; + } + .navbarsmall { + height: 50px !important; + overflow-y: hidden; + } + .navbarsmall .nav.navbar-top-links.navbar-right > li a {font-size: 1.5em; } + + .navbarsmall .title img { margin-left:-300px !important;} + .navbarsmall small { + top: 18px !important; + font-size: 0.5em; + } + + .nav.navbar-top-links.navbar-left li { + display: block; + } + + .navbarsmall a.navbar-brand { + line-height: 27px !important; + transition:line-height 0.5s ease; + font-size: 1.3em; + margin-left: -90px; + margin-top: -3px; + } + + #logo { + /* remplacer l'image en définissant une image de background */ + /* et en positionnant un padding de la largeur de l'image */ + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: url(/ninegate/bundles/cadolescore/themes/metice2021/small-logo.svg) no-repeat; + width: 62px; /* Width of new image */ + height: 23px; /* Height of new image */ + padding-left: 62px; /* Equal to width of new image */ + margin-top: -1px; + margin-left: 86px; + margin-right: 14px; + } + .navbarsmall .avatar {height: 25px; } +} + + .container-fluid #logo { display: none; } .header .avatar {height: 32px; }