Файловый менеджер

Файловый менеджер - Редактировать - /var/www/sturrock/tamer/assets/css/navbar.css

Назад
@import url("variables.css"); /* --- Contact Bar (Above Nav): --- / .contactBar { background: #fff; background: /rgba(35, 40, 45, .8);/ width: 100vw; padding: 10px var(--mainPadding); display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .contactBar p { font-size: 1.5em; font-family: var(--font); color: var(--fontColor); } .contactBar p, .contactBar a { padding: 0 10px; } .contactBar:last-of-type { padding-right: calc(20px + var(--mainPadding)); } .contactBar i { font-size: 1.7em; color: var(--fontColor); } .contactBar i:hover { color: var(--greenColor); transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; } / --- Navbar/ Navigation: --- / #top nav { padding: 0 var(--mainPadding); display: flex; justify-content: space-between; align-items: center; background: var(--greenColor); / background: rgba(25, 198, 125, .8); / font-family: var(--font); text-transform: uppercase; color: var(--whiteColor); -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26); -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26); -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26); } nav ul li { font-size: 1.5em; letter-spacing: 2px; } .navWrapper { display: flex; justify-content: flex-end; width: 100vw; margin-bottom: 15px 0; } .navWrapper ul { list-style-type: none; margin: 0; padding: 0; display: block; } .navWrapper li { list-style-type: none; margin: 0; padding: 0; display: inline-block; position: relative; font-weight: bolder!important; color: #def1f0; } .navWrapper li a { padding: 20px 20px; font-weight: 700!important; color: #def1f0; display: inline-block; outline: 0; font-weight: 400; } .navWrapper li:hover ul.dropdown { display: block; opacity: 1; transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in;} .navWrapper li ul.dropdown { position: absolute; display: none; width: 300px; background: var(--darkColor); transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; } .navWrapper li ul.dropdown li { display: block; list-style-type: none; } .navWrapper li ul.dropdown li a { padding: 15px 20px; font-size: 15px; font-weight: 700; color: #fff; display: block; font-weight: 400; } .navWrapper li ul.dropdown li:last-child a { border-bottom: none; } .navWrapper li:hover a { transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; background: var(--navbarHvrColor); color: var(--whiteColor); } .navWrapper ul.dropdown li:hover a:hover { color: var(--greenColor); } .navWrapper li ul.dropdown li:hover a { background: rgba(0,0,0, .1); } .navWrapper li:hover .arrow-down { border-top: 5px solid #fff; } .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #def1f0; position: relative; top: 15px; right: -5px; content: ''; } / --- Hamburger Styling: --- Use class is-active to make X appear before menu. / .hamburger { padding: 15px 0; / Change with media query: / display: none; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff } .hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: 0; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height: 2.8px; background-color: #fff; border-radius: 1px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -7px; } .hamburger-inner::after { bottom: -7px; } / --- Spin Effect: ---- / .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } / --- Navbar Media Queries: --- / @media only screen and (max-width:1080px) { .contactBar:last-of-type { padding-right: 95px; } .navWrapper { background: var(--whiteColor); width: 40vw; height: 100%; display: block; position: fixed; / Make right 326px when burgerMenu is clicked: Menu Slide / right: 0px; top: 0px; margin: 0; border: 0; border-radius: 0; overflow-y: auto; overflow-x: hidden; height: 100%; transform: translateX(100%); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); transition: left 0.25s ease; -webkit-transition: left 0.25s ease; -moz-transition: left 0.25s ease; -ms-transition: left 0.25s ease; -o-transition: left 0.25s ease; / z-index: -20; / } .navActive { transform: translateX(0%); -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transition: left 0.25s ease; -webkit-transition: left 0.25s ease; -moz-transition: left 0.25s ease; -ms-transition: left 0.25s ease; -o-transition: left 0.25s ease; } .navWrapper.visible { left: 0px; -webkit-transition: left 0.25s ease; -moz-transition: left 0.25s ease; -ms-transition: left 0.25s ease; -o-transition: left 0.25s ease; transition: left 0.25s ease; } .navWrapper li:hover a { transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; background: none; color: var(--whiteColor) !important; } .navWrapper li ul.dropdown { background: var(--darkColor); padding-top: 0; width: 100%; } .navWrapper li:hover { background: var(--greenColor); } / ---Hamburger: / .hamburger { display: inline-block; } / .hamburgerWrapper { display: inline-block; vertical-align: middle; width: 100%; height: 60px; margin: 0; position: absolute; top: 0px; left: 0px; padding: 12px 0 0 10px; } / / .hamburger { display: inline-block; vertical-align: middle; height: 60px; cursor: pointer; margin: 0; position: absolute; top: 0; right: 40px; padding: 12px; } .hamburger span { height: 2px; background: #fff; margin: 5px; display: block; width: 20px; } / .hamburger span:nth-child(2) { width: 20px; } .hamburger span:nth-child(3) { width: 20px; } .navWrapper ul { padding-top: 50px; } .navWrapper li { display: block; } .navWrapper li a { display: block; color: var(--darkColor); font-weight: 600; } / .navWrapper li:first-child:hover a { border-radius: 0; } / .navWrapper li ul.dropdown { position: relative; } .navWrapper li ul.dropdown li a { background: var(--darkColor)!important; border-bottom: none; color: var(--whiteColor) !important; } .navWrapper li:hover a { color: var(--whiteColor) !important; } .navWrapper li ul.dropdown li:hover a { / background: rgba(0,0,0,.1)!important; */ color: var(--greenColor) !important; } .navWrapper li ul.dropdown li a { padding: 10px 10px 10px 30px; } .navWrapper li:hover .arrow-down { border-top: 5px solid var(--whiteColor); } .arrow-down { border-top: 5px solid var(--darkColor); position: absolute; top: 30px; right: 40px; } } @media only screen and (max-width:1199px) { .fixed-top { position: fixed; top: 0; right: 0; left: 0; } } @media only screen and (max-width:700px) { .contactBar a { display: none; } } @media only screen and (max-width:500px) { #top nav { padding: 0 25px; } .contactBar { justify-content: flex-end; padding: 10px 25px; } .contactBar:last-of-type { padding-right: 25px; } }

| ver. 1.4 | Github | . | PHP 7.0.33-0ubuntu0.16.04.16 | Генерация страницы: 0 | proxy | phpinfo | Настройка