From 05301db52ef1bc995f5f9f898621e563c1149037 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Tue, 19 Jun 2018 19:20:52 +0200 Subject: [PATCH] Hide the social menu in screen widths less than 400 pixels --- themes/zuitedesk/css/navigation.css | 309 ++++++++++++++-------------- 1 file changed, 157 insertions(+), 152 deletions(-) diff --git a/themes/zuitedesk/css/navigation.css b/themes/zuitedesk/css/navigation.css index b50f625..a80b3e3 100644 --- a/themes/zuitedesk/css/navigation.css +++ b/themes/zuitedesk/css/navigation.css @@ -5,12 +5,12 @@ ul.links { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } ul.links li { - display: inline; - list-style: none; + display: inline; + list-style: none; } /** @@ -24,253 +24,258 @@ ul.links li { * Navigation top bar. */ #navigation-top { - background: #556372; - border-bottom: 1px solid #556372; + background: #556372; + border-bottom: 1px solid #556372; } ul.social-menu { - display: block; - float: right; - margin: 0; - padding: 0; + display: block; + float: right; + margin: 0; + padding: 0; } ul.social-menu > li { - display: block; - float: left; + display: block; + float: left; } ul.social-menu > li a { - color: #aaa; - font-size: 20px; - display: block; - margin: 0; - padding: 0; - width: 30px; - min-height: 30px; - line-height: 30px; - height: 100%; - text-align: center; - transition-property: all; - transition-duration: 0.3s; - transition-timing-function: ease-out; - transition-delay: 0s; + color: #aaa; + font-size: 20px; + display: block; + margin: 0; + padding: 0; + width: 30px; + min-height: 30px; + line-height: 30px; + height: 100%; + text-align: center; + transition-property: all; + transition-duration: 0.3s; + transition-timing-function: ease-out; + transition-delay: 0s; } ul.social-menu > li:hover a { - color: #fff !important; + color: #fff !important; } ul.social-menu .lang-item a { - font-size: 15px; + font-size: 15px; } ul.social-menu .social-link-rss:hover a { - background-color: #ffa133; + background-color: #ffa133; } ul.social-menu .social-link-twitter:hover a { - background-color: #46d4fe; + background-color: #46d4fe; } ul.social-menu .social-link-facebook:hover a { - background-color: #37589b; + background-color: #37589b; } ul.social-menu .social-link-linkedin:hover a { - background-color: #419cca; + background-color: #419cca; } ul.social-menu .social-link-github:hover a, ul.social-menu .social-link-gitlab:hover a { - background-color: #bd2c00; + background-color: #bd2c00; } ul.social-menu .social-link-mail:hover a { - background-color: #9fae37; + background-color: #9fae37; } @media (max-width: 767px) { - #navigation-top ul.social-menu { - float: none; - text-align: center; - } - ul.social-menu > li { - float: none; - display: inline-block; - padding: 0; - margin: 2px -3px 0; - } - ul.social-menu > li a { - color: #fff; - } - ul.social-menu > li a:hover { - background: transparent !important; - } + #navigation-top ul.social-menu { + float: none; + text-align: center; + } + ul.social-menu > li { + float: none; + display: inline-block; + padding: 0; + margin: 2px -3px 0; + } + ul.social-menu > li a { + color: #fff; + } + ul.social-menu > li a:hover { + background: transparent !important; + } } /* * Navigation socket bar. */ #socket { - background-color: #182330; - border-bottom: 1px solid #182330; + background-color: #182330; + border-bottom: 1px solid #182330; } #socket .section { - height: 36px; + height: 36px; } #socket .copyright { - float: left; - margin-top: 14px; - font-size: 11px; - color: #fff; + float: left; + margin-top: 14px; + font-size: 11px; + color: #fff; } #socket ul.social-menu { - margin-top: 3px; + margin-top: 3px; } #socket ul.social-menu li a { - color: #8ca7be; - border-radius: 300px; + color: #8ca7be; + border-radius: 300px; +} +@media (max-width: 399px) { + #socket ul.social-menu { + display: none; + } } /* * Navigation main menu. */ #navigation { - margin-bottom: 0; - border: 0; + margin-bottom: 0; + border: 0; } .navbar-default .navbar-nav > li > a { - color: #aaa; - font-size: 18px; - line-height: 62px; - padding-right: 8px; - padding-left: 8px; - -webkit-transition: color .2s; - -moz-transition: color .2s; - -o-transition: color .2s; - -ms-transition: color .2s; - transition: color .2s; + color: #aaa; + font-size: 18px; + line-height: 62px; + padding-right: 8px; + padding-left: 8px; + -webkit-transition: color .2s; + -moz-transition: color .2s; + -o-transition: color .2s; + -ms-transition: color .2s; + transition: color .2s; } .logo img { - position: absolute; + position: absolute; } @media (min-width: 768px) and (max-width: 899px) { - body.logged-in .navbar-default .navbar-nav > li:first-child { - display: none; - } + body.logged-in .navbar-default .navbar-nav > li:first-child { + display: none; + } } @media (max-width: 767px) { - .navbar-default .navbar-nav > li > a { - line-height: 20px; - } - .logo img { - width: auto; - height: auto; - max-width: 100%; - max-height: 80px; - } + .navbar-default .navbar-nav > li > a { + line-height: 20px; + } + .logo img { + width: auto; + height: auto; + max-width: 100%; + max-height: 80px; + } } #picture-menu { - width: 30px; - height: 30px; - overflow: hidden; - display: inline-block; - margin-right: 8px; - margin-bottom: -9px; - position: relative; - border-radius: 50%; + width: 30px; + height: 30px; + overflow: hidden; + display: inline-block; + margin-right: 8px; + margin-bottom: -9px; + position: relative; + border-radius: 50%; } #picture-menu img { - position: absolute; - top: -9999px; - bottom: -9999px; - left: -9999px; - right: -9999px; - min-height: 100%; - min-width: 100%; - display: block; - margin: auto; - object-fit: cover; - width: 30px; - height: 30px; + position: absolute; + top: -9999px; + bottom: -9999px; + left: -9999px; + right: -9999px; + min-height: 100%; + min-width: 100%; + display: block; + margin: auto; + object-fit: cover; + width: 30px; + height: 30px; } @media (max-width: 767px) { - #picture-menu { - display: none; - } + #picture-menu { + display: none; + } } .navbar-default .navbar-toggle { - border-color: #556372; - border-radius: 3px; - margin: 17px 0; - width: 46px; - height: 46px; + border-color: #556372; + border-radius: 3px; + margin: 17px 0; + width: 46px; + height: 46px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - transition-property: all; - transition-duration: 0.3s; - transition-timing-function: ease-out; - transition-delay: 0s; + transition-property: all; + transition-duration: 0.3s; + transition-timing-function: ease-out; + transition-delay: 0s; } .navbar-default a[class^="icon-"]:before { - color: #ff3300; + color: #ff3300; } /* * Book navigation. */ .book-navigation { - margin: .5em 0; + margin: .5em 0; } .book-navigation ul.menu { - margin: 2.5em 0 0; - padding: 0 0 1em 1em; - background: url(../images/bg-book-navigation.png) no-repeat bottom right; + margin: 2.5em 0 0; + padding: 0 0 1em 1em; + background: url(../images/bg-book-navigation.png) no-repeat bottom right; } .book-navigation ul.menu li { - padding-left: 0; - list-style: none; - text-indent: -1.9em; - margin-left: 1.9em; + padding-left: 0; + list-style: none; + text-indent: -1.9em; + margin-left: 1.9em; } .book-navigation ul.menu li:before { - font-family: "fonticons"; - color: #ccc; + font-family: "fonticons"; + color: #ccc; } .book-navigation ul.menu li.leaf:before { - padding: 0 .51em; - content: "\e826"; + padding: 0 .51em; + content: "\e826"; } .book-navigation ul.menu li.collapsed:before { - padding: 0 .4em; - content: "\e827"; + padding: 0 .4em; + content: "\e827"; } .book-navigation .page-links { - background: #efefef; - text-align: center; - padding: .4em; - font-size: .92em; + background: #efefef; + text-align: center; + padding: .4em; + font-size: .92em; } .book-navigation .page-previous { - width: 40%; - display: block; - text-align: left; - float: left; + width: 40%; + display: block; + text-align: left; + float: left; } .book-navigation .page-up { - margin: 0 1%; - width: 18%; - display: block; - float: left; + margin: 0 1%; + width: 18%; + display: block; + float: left; } .book-navigation .page-next { - width: 40%; - display: block; - text-align: right; - float: right; + width: 40%; + display: block; + text-align: right; + float: right; } /* * Custom pagination. */ ul.pagination { - margin-bottom: 0; + margin-bottom: 0; } ul.pagination li { - padding: 0; - background: none; + padding: 0; + background: none; } ul.pagination li a, ul.pagination li span { - margin-bottom: 1em; + margin-bottom: 1em; }