File manager

File manager - Edit - /home/u300416816/domains/arib7.net/public_html/wp-content/themes/jannah/assets/css/sass/header/_header.scss

Back
#header-notification-bar{ background: var( --brand-color ); color: #fff; position: relative; z-index: 1; p{ a{ color: #fff; text-decoration: underline; } } .container{ display: flex; justify-content: space-between; font-size: 16px; flex-wrap: wrap; align-items: center; gap: 40px; min-height: 65px; .button{ font-size: 14px; } &:after{ display: none; } @include breakpoint(max_min_md){ justify-content: center; padding-top: 15px; padding-bottom: 15px; gap: 15px; flex-direction: column; } } } .theme-header{ background: $content-bg-color; position: relative; z-index: 999; @include clearfix(); &.has-shadow{ box-shadow: rgba(0, 0, 0, 0.1) 0px 25px 20px -20px; } &.top-nav-below{ .top-nav{ z-index: 8; } } } .is-stretch-header{ .container{ max-width: 100% } } #menu-components-wrap{ display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; // Header Layout 2 .header-layout-2 &{ justify-content: center; } // Header Layout 4 .header-layout-4 &{ justify-content: flex-start; .main-menu-wrap{ flex-grow: 2; } .flex-placeholder{ flex-grow: 1; } } } // Logo .logo-row{ position: relative; } #logo{ margin-top: 40px; margin-bottom: 40px; display: block; float: left; & img{ vertical-align: middle; &[src='.svg']{ width: 100% !important; @-moz-document url-prefix(){ height: 100px; } } } a{ display: inline-block; } .h1-off{ position: absolute; top: -9000px; left:-9000px; } &.text-logo{ a{ color: $brand-color; &:hover{ color: $dark-brand-color; opacity: 0.8; } } } } #tie-logo-inverted, #tie-sticky-logo-inverted{ display: none; } .tie-skin-inverted{ #tie-sticky-logo-inverted, #tie-logo-inverted{ display: block; } #tie-sticky-logo-default, #tie-logo-default{ display: none; } } // Text Logo .logo-text{ @include font-size(50px); line-height: 50px; font-weight: bold; @include breakpoint_max(670px){ @include font-size(30px); } } .has-full-width-logo{ &.is-stretch-header{ .logo-container{ padding: 0; } } #logo{ margin: 0; a, img{ width: 100%; height: auto; display: block; } } } .has-full-width-logo, .header-layout-2 { #logo{ float: none; text-align: center; img{ margin-right: auto; margin-left: auto; } } .logo-container{ width: 100%; float: none; } } @include breakpoint(max_min_md){ #theme-header.has-normal-width-logo{ #logo{ margin: 14px 0 !important; text-align: left; line-height: 1; img{ width: auto; height: auto; max-width: 190px; } } } } @include breakpoint(max_min_xs){ #theme-header.has-normal-width-logo{ #logo img{ max-width: 160px; max-height: 60px !important; } } } @include breakpoint(max_min_md){ #theme-header{ &.mobile-header-default{ &:not(.header-layout-1) #logo, &.header-layout-1 .header-layout-1-logo{ flex-grow: 10; } } &.mobile-header-centered{ &.header-layout-1 .header-layout-1-logo{ width: auto !important; } #logo{ float: none; text-align: center; } } } } // Header Components .components{ display: flex; align-items: center; justify-content: end; // component item > li{ position: relative; &.social-icons-item{ margin: 0; } > a{ display: block; position: relative; width: 30px; text-align: center; font-size: 16px; white-space: nowrap; } > a:hover, &:hover > a{ z-index: 2; } } .avatar{ border-radius: 100%; position: relative; top: 3px; max-width: 20px; } a.follow-btn{ width: auto; padding-left: 15px; padding-right: 15px; overflow: hidden; font-size: 12px; } // Search bar .search-bar{ form{ width: auto; background: rgba( 255,255,255, 0.1); line-height: 36px; border-radius: 50px; position: relative; .main-nav-light .main-nav &, .top-nav-light .top-nav &{ background: rgba( 0,0,0, 0.05); } } } #search-input{ border: 0; width: 100%; background: transparent; padding: 0 35px 0 20px; border-radius: 0; font-size: inherit; } #search-submit{ position: absolute; right: 0; top: 0; width: 40px; line-height: inherit; color: #777777; background: transparent; font-size: 15px; padding: 0; transition: color 0.15s; border: none; &:hover{ color: $brand-color; } } @at-root #search-submit .tie-icon-spinner{ color: #fff; cursor: default; animation: tie-spin 3s infinite linear; } } // Login .popup-login-icon{ &.has-title{ a{ width: auto; padding: 0 8px; } span{ line-height: unset; float: left; } .login-title{ position: relative; font-size: 13px; padding-left: 4px; } } } // Weather in header .weather-menu-item{ display: flex; align-items: center; padding-right: 5px; overflow: hidden; .weather-wrap{ padding: 0; overflow: inherit; line-height: 23px; } .weather-forecast-day{ display: block; float: left; width: auto; padding: 0 5px; line-height: initial; .weather-icon{ font-size: 26px; margin-bottom: 0; } } .city-data{ float: left; display: block; font-size: 12px; } .weather-current-temp{ font-size: 16px; font-weight: 400; sup { font-size: 9px; top: -2px; } } .theme-notice{ padding: 0 10px; } } .tie-weather-widget{ .components &{ color: $base-color; } .main-nav-dark .main-nav &{ color: #ffffff; } .top-nav-dark .top-nav &{ color: $light-dark-base-color; } } .icon-basecloud-bg:after{ .components &{ color: #ffffff; } .main-nav-dark .main-nav &{ color: $light-darker-bg; } .top-nav-dark .top-nav &{ color: $light-darker-bg; } } // Menu Button .custom-menu-button{ padding-right: 5px; .button{ font-size: 13px; display: inline-block; line-height: 21px; width: auto; } } // Header Layout 1 .header-layout-1{ #menu-components-wrap{ display: flex; justify-content: flex-end; } .main-menu-wrapper{ display: table; width: 100%; } #logo{ line-height: 1; float: left; margin-top: 20px; margin-bottom: 20px; } .header-layout-1-logo{ display: table-cell; vertical-align: middle; float: none; } } // Extended Header Bg - .is-header-bg-extended{ #theme-header, #theme-header.header-layout-1 #main-nav:not(.fixed-nav) { background: transparent !important; display: inline-block !important; width: 100% !important; box-shadow: none !important; transition: background 0.3s; &:before { content: ""; position: absolute; width: 100%; left: 0; right: 0; top: 0; height: 150px; background-image: linear-gradient( to top, transparent, rgba(0, 0, 0, 0.5) ); } } @include breakpoint(max_min_md){ #tie-wrapper #theme-header .logo-container:not(.fixed-nav){ background: transparent; box-shadow: none; transition: background 0.3s; } } .has-background { .is-first-section { margin-top: -350px !important; > { padding-top: 350px !important; } } } } // Rainbow Line .rainbow-line{ height: 3px; width: 100%; position: relative; z-index: 2; background-image: -webkit-linear-gradient( left, #f76570 0%, #f76570 8%, #f3a46b 8%, #f3a46b 16%, #f3a46b 16%, #ffd205 16%, #ffd205 24%, #ffd205 24%, #1bbc9b 24%, #1bbc9b 25%, #1bbc9b 32%, #14b9d5 32%, #14b9d5 40%, #c377e4 40%, #c377e4 48%, #f76570 48%, #f76570 56%, #f3a46b 56%, #f3a46b 64%, #ffd205 64%, #ffd205 72%, #1bbc9b 72%, #1bbc9b 80%, #14b9d5 80%, #14b9d5 80%, #14b9d5 89%, #c377e4 89%, #c377e4 100% ); background-image: linear-gradient( to right, #f76570 0%, #f76570 8%, #f3a46b 8%, #f3a46b 16%, #f3a46b 16%, #ffd205 16%, #ffd205 24%, #ffd205 24%, #1bbc9b 24%, #1bbc9b 25%, #1bbc9b 32%, #14b9d5 32%, #14b9d5 40%, #c377e4 40%, #c377e4 48%, #f76570 48%, #f76570 56%, #f3a46b 56%, #f3a46b 64%, #ffd205 64%, #ffd205 72%, #1bbc9b 72%, #1bbc9b 80%, #14b9d5 80%, #14b9d5 80%, #14b9d5 89%, #c377e4 89%, #c377e4 100% ); } @include breakpoint(max_min_md){ .logo-container, .header-layout-1 .main-menu-wrapper{ border-width: 0; //box-shadow: 0 3px 7px 0 rgba(0,0,0,0.1); display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } } // Mobile Components .mobile-header-components{ display: none; z-index: 10; height: 30px; line-height: 30px; flex-wrap: nowrap; flex: 1 1 0%; .components{ float: none; display: flex !important; justify-content: stretch; li.custom-menu-link{ display: inline-block; float: none; > a{ width: 20px; padding-bottom: 15px; .menu-counter-bubble{ right: calc(50% - 10px); bottom: -10px; } .header-layout-1.main-nav-dark &{ color: #fff; } } } .comp-sub-menu{ padding: 10px; .dark-skin &{ background: $darker-bg; } } } [class^="tie-icon-"], [class*=" tie-icon-"] { font-size: 18px; width: 20px; height: 20px; vertical-align: middle; } .tie-mobile-menu-icon{ font-size: 20px; } .tie-icon-grid-9, .tie-icon-grid-4{ transform: scale(1.75); } .nav-icon{ display: inline-block; width: 20px; height: 2px; background-color: $base-color; position: relative; top: -4px; transition: background 0.4s ease; &:before, &:after{ position: absolute; right: 0; background-color: $base-color; content: ''; display: block; width: 100%; height: 100%; transition: transform 0.4s, background 0.4s, right .2s ease; transform: translateZ(0); backface-visibility: hidden; } &:before{ transform: translateY(-7px); } &:after{ transform: translateY(7px); } &.is-layout-2{ &:before, &:after{ width: 70%; right: 15%; } } &.is-layout-3{ &:after{ width: 60%; } } &.is-layout-4{ &:after{ width: 60%; right: auto; left: 0; } } .dark-skin &, .main-nav-dark.header-layout-1 &{ &, &:before, &:after{ background-color: #ffffff; } .menu-text{ color: #ffffff; } } } .menu-text-wrapper{ white-space: nowrap; width: auto !important; } .menu-text{ color: $base-color; line-height: 30px; @include font-size(12px); padding: 0 0 0 5px; display: inline-block; transition: color 0.4s; .dark-skin &, .main-nav-dark.header-layout-1 &{ color: #ffffff; } } // &:hover{ // color: inherit; // opacity: 0.85; // .nav-icon{ // background-color: $brand-color; // &:before, // &:after{ // right: 0; // background-color: $brand-color; // } // } // .menu-text{ // color: $brand-color; // opacity: 0.85; // } // } } #mobile-header-components-area_1{ .components{ li.custom-menu-link > a{ margin-right: 15px; } } .comp-sub-menu{ left: 0; right: auto; } } #mobile-header-components-area_2{ .components{ flex-direction: row-reverse; li.custom-menu-link > a{ margin-left: 15px; } } } #mobile-menu-icon:hover{ .nav-icon{ &, &:before, &:after{ background-color: $brand-color; } } } @include breakpoint(max_min_md){ .logo-container{ &:before, &:after{ height: 1px; } } .mobile-components-row{ .logo-wrapper{ height: auto !important; } .logo-container, &.header-layout-1 .main-menu-wrapper{ flex-wrap: wrap; } &:not(.header-layout-1) #logo, &.header-layout-1 .header-layout-1-logo{ flex: 1 0 100%; order: -1; } .mobile-header-components{ padding: 5px 0; height: 45px; .components li.custom-menu-link > a{ padding-bottom: 0; } } } #tie-body #mobile-container, .mobile-header-components{ display: block; } #slide-sidebar-widgets{ display: none; } }

| ver. 1.4 | Github | . | PHP 8.2.28 | Generation time: 0.02 | proxy | phpinfo | Settings