mirror of
https://gh.wpcy.net/https://github.com/presscustomizr/hueman.git
synced 2026-04-26 05:23:45 +08:00
273 lines
No EOL
10 KiB
CSS
273 lines
No EOL
10 KiB
CSS
/* ------------------------------------------------------------------------- *
|
|
* Base Structure
|
|
/* ------------------------------------------------------------------------- */
|
|
|
|
/* base : layout
|
|
/* ------------------------------------ */
|
|
#wrapper { min-width: 1024px; height: 100%; }
|
|
.container { padding: 0 20px; }
|
|
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
|
|
.main {
|
|
background-color: #fff!important;
|
|
position: relative;
|
|
width: 100%;/* <= fixes post content problem in https://github.com/presscustomizr/hueman/issues/839 */
|
|
}
|
|
.sidebar-expanding .main, .sidebar-collapsing .main { overflow: hidden;}
|
|
|
|
.main-inner { z-index: 1; position: relative; min-height: 600px; /* instead of sticky footer */ }
|
|
.content {
|
|
width: 100%;
|
|
position: relative;
|
|
-moz-transition: -moz-transform, .35s ease;
|
|
-webkit-transition: -webkit-transform, .35s ease;
|
|
-o-transition: -o-transform, .35s ease;
|
|
transition: transform, .35s ease;
|
|
}
|
|
.hu-pad { padding: 30px 30px 20px; }
|
|
|
|
/* boxed */
|
|
.boxed #wrapper { max-width: 1380px; margin: 0 auto;
|
|
-webkit-box-shadow: 6px 0 0 rgba(0,0,0,0.04), -6px 0 0 rgba(0,0,0,0.04);
|
|
box-shadow: 6px 0 0 rgba(0,0,0,0.04), -6px 0 0 rgba(0,0,0,0.04);
|
|
position: relative;}
|
|
.boxed .container { padding: 0; }
|
|
.boxed #page { background: #eaeaea; padding-bottom: 1px; }
|
|
|
|
/* base : layout columns
|
|
/* ------------------------------------ */
|
|
.container-inner > .main::before,
|
|
.container-inner > .main::after { background-color: #f0f0f0; position: absolute; top: 0; bottom: 0; content: ''; display: block; z-index: 0;}
|
|
|
|
/* 2 column, content left */
|
|
.col-2cl .main-inner { padding-right: 340px; }
|
|
.col-2cl .container-inner > .main::after { right: 0; padding-right: 340px; }
|
|
.col-2cl .sidebar.s1 { float: right; margin-right: -340px; }
|
|
.col-2cl .content { float: left; }
|
|
|
|
/* 2 column, content right */
|
|
.col-2cr .main-inner { padding-left: 340px; }
|
|
.col-2cr .container-inner > .main::before { left: 0; padding-left: 340px; }
|
|
.col-2cr .sidebar.s1 { float: left; margin-left: -340px; }
|
|
.col-2cr .content { float: right; }
|
|
|
|
/* 3 column, content middle */
|
|
.col-3cm .container-inner > .main::before { left: 0; padding-left: 340px; }
|
|
.col-3cm .container-inner > .main::after { right: 0; padding-right: 260px; }
|
|
.col-3cm .main-inner { padding-left: 340px; padding-right: 260px; }
|
|
|
|
.col-3cm .sidebar.s1 { float: left; margin-left: -340px; }
|
|
.col-3cm .sidebar.s2 { float: right; margin-right: -260px; /* ingenuity! */ position: relative; right: -100%; }
|
|
.col-3cm .content { float: right; }
|
|
|
|
/* fix chrome bug in nov 2019 for https://github.com/presscustomizr/hueman/issues/834 */
|
|
.col-3cm { overflow-x: hidden }
|
|
|
|
|
|
/* 3 column, content left */
|
|
.col-3cl .main { background-image: none; }
|
|
.col-3cl .main-inner { padding-right: 600px; }
|
|
.col-3cl .container-inner > .main::after { right: 0px; padding-right: 600px; }
|
|
|
|
.col-3cl .sidebar.s1 { float: right; margin-right: -600px; }
|
|
.col-3cl .sidebar.s2 { float: right; margin-right: -260px; }
|
|
.col-3cl .content { float: left; }
|
|
|
|
/* 3 column, content right */
|
|
.col-3cr .main { background-image: none; }
|
|
.col-3cr .main-inner { padding-left: 600px; }
|
|
.col-3cr .container-inner > .main::before { left: 0px; padding-left: 600px; }
|
|
|
|
|
|
.col-3cr .sidebar.s1 { float: left; margin-left: -600px; }
|
|
.col-3cr .sidebar.s2 { float: left; margin-left: -260px; }
|
|
.col-3cr .content { float: right; }
|
|
|
|
/* base : sidebar
|
|
/* ------------------------------------ */
|
|
.sidebar {
|
|
padding-bottom: 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-o-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
|
|
-moz-transition: height .4s ease-in-out;
|
|
-webkit-transition: height .4s ease-in-out;
|
|
-o-transition: height .4s ease-in-out;
|
|
transition: height .4s ease-in-out;
|
|
}
|
|
.sidebar .sidebar-content, .sidebar .sidebar-toggle {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-o-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
|
|
background: #f0f0f0;
|
|
}
|
|
.sidebar .hu-pad { padding-left: 20px; padding-right: 20px; }
|
|
.sidebar-top { padding: 15px 30px; }
|
|
.sidebar-top p { float: left; color: #fff; color: rgba(255,255,255,0.8); font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1.5rem; padding: 3px 0; }
|
|
.sidebar-toggle { display: none; text-align: center; cursor: pointer; width: 100%; height: 60px;
|
|
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
|
|
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.sidebar-toggle i { font-size: 30px; color: #fff; padding: 15px 0; }
|
|
|
|
.sidebar.expanding, .sidebar.collapsing {
|
|
background: #f0f0f0;
|
|
-moz-transition: width, -moz-transform, .35s ease;
|
|
-webkit-transition: width, -webkit-transform, .35s ease;
|
|
-o-transition: width, -o-transform, .35s ease;
|
|
transition: width, transform, .35s ease;
|
|
z-index: 10;
|
|
}
|
|
.sidebar.expanded .sidebar-content, .sidebar.collapsed .sidebar-content, .sidebar.collapsing .sidebar-content {
|
|
-moz-transition: opacity, -moz-transform, .35s ease;
|
|
-webkit-transition: opacity, -webkit-transform, .35s ease;
|
|
-o-transition: opacity, -o-transform, .35s ease;
|
|
transition: opacity, transform, .35s ease;
|
|
}
|
|
|
|
.sidebar.expanded {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-expanded .sidebar {
|
|
-webkit-box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
|
|
-moz-box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
|
|
box-shadow: 1px 1px 7px 3px rgba(121, 121, 121, 0.33);
|
|
}
|
|
.sidebar-expanded .content {
|
|
background: #fff;
|
|
}
|
|
.sidebar.expanded .sidebar-content {
|
|
overflow: auto;
|
|
}
|
|
|
|
.sidebar.expanding .sidebar-content {
|
|
/*opacity:1!important;*/
|
|
display:block!important;
|
|
}
|
|
.sidebar.collapsing .sidebar-content {
|
|
opacity:0!important;
|
|
}
|
|
/* toggle icon */
|
|
.sidebar-toggle-arrows { opacity: 0;/* <= revealed with js */ }
|
|
.collapsed .sidebar-toggle-arrows { opacity: 1; }
|
|
.sidebar-toggle-arrows {
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
-webkit-transition: -webkit-transform, opacity, .25s ease;
|
|
-moz-transition: -moz-transform, opacity, .25s ease;
|
|
-o-transition: -o-transform, opacity, .25s ease;
|
|
transition: transform, opacity, .25s ease;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* the position is set server side depending on the choosen layout */
|
|
.sidebar[data-position="right"] .sidebar-toggle-arrows:before,
|
|
.sidebar[data-position="middle-right"] .sidebar-toggle-arrows:before {content: "\f100";}
|
|
.sidebar[data-position="left"] .sidebar-toggle-arrows:before,
|
|
.sidebar[data-position="middle-left"] .sidebar-toggle-arrows:before {content: "\f101";}
|
|
|
|
/* June 2020 for https://github.com/presscustomizr/hueman/issues/905 */
|
|
.hu-fa-not-loaded .sidebar[data-position] .sidebar-toggle-arrows:before { content: "\00a0";}
|
|
|
|
.sidebar[data-position="right"].collapsed .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="middle-right"].collapsed .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="left"].expanded .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="middle-left"].expanded .hovering .sidebar-toggle-arrows {
|
|
-webkit-transform: translateX(-3px);
|
|
-moz-transform: translateX(-3px);
|
|
-o-transform: translateX(-3px);
|
|
transform: translateX(-3px);
|
|
}
|
|
.sidebar[data-position="left"].collapsed .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="middle-left"].collapsed .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="right"].expanded .hovering .sidebar-toggle-arrows,
|
|
.sidebar[data-position="middle-right"].expanded .hovering .sidebar-toggle-arrows {
|
|
-webkit-transform: translateX(3px);
|
|
-moz-transform: translateX(3px);
|
|
-o-transform: translateX(3px);
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
|
|
/*stickify */
|
|
.main .sidebar.sticky {
|
|
position: fixed;
|
|
top: 0;
|
|
/* margin-right: 0!important;
|
|
margin-left:0!important;*/
|
|
padding-bottom: 0;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-o-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);/* @see => https://stanko.github.io/ios-safari-scoll-position-fixed/ */
|
|
}
|
|
.sidebar .sidebar-content, .sidebar .sidebar-toggle {
|
|
-webkit-transition: -webkit-transform 0.30s ease-in-out;
|
|
-moz-transition: -moz-transform 0.30s ease-in-out;
|
|
-o-transition: -o-transform 0.30s ease-in-out;
|
|
transition: transform 0.30s ease-in-out;
|
|
}
|
|
|
|
/*.col-2cr .s1.sticky-sidebar,
|
|
.col-3cm .s1.sticky-sidebar,
|
|
.col-3cr .s1.sticky-sidebar,
|
|
.col-3cr .s2.sticky-sidebar {
|
|
position: fixed;
|
|
}
|
|
.col-2cl .s1.sticky-sidebar,
|
|
.col-3cl .s1.sticky-sidebar,
|
|
.col-3cm .s2.sticky-sidebar,
|
|
.col-3cl .s2.sticky-sidebar {
|
|
position: fixed;
|
|
right: 0px;
|
|
margin-right: 0;
|
|
}
|
|
*/
|
|
|
|
/* sidebar primary */
|
|
.sidebar.s1 { width: 340px; z-index: 2; }
|
|
.sidebar.s1:hover { z-index: 98; /* social icons tooltip above header nav */ }
|
|
.sidebar.s1 .sidebar-top,
|
|
.sidebar.s1 .sidebar-toggle { background: #16cfc1; }
|
|
@media only screen and (min-width: 479px) and (max-width: 960px) {
|
|
.sidebar.s1 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
|
|
.sidebar.s1 .sidebar-top p { color: #666; }
|
|
.sidebar.s1 .sidebar-top .social-links .social-tooltip { color: #666!important; }
|
|
}
|
|
|
|
/* sidebar secondary */
|
|
.sidebar.s2 { width: 260px; z-index: 1; }
|
|
.sidebar.s2 .sidebar-top,
|
|
.sidebar.s2 .sidebar-toggle { background: #efb93f; }
|
|
@media only screen and (min-width: 479px) and (max-width: 1200px) {
|
|
.sidebar.s2 .sidebar-top { background: none!important; border-bottom: 1px solid #ddd; }
|
|
.sidebar.s2 .sidebar-top p { color: #666; }
|
|
}
|
|
|
|
/* base : grid
|
|
/* ------------------------------------ */
|
|
.grid { margin-right: 3.2%; float: left; display: inline; position: relative; }
|
|
.last { clear: right; margin-right: 0!important; }
|
|
|
|
.one-full { margin-right: 0; width: 100%; overflow: hidden; }
|
|
.one-half { width: 48.4%; }
|
|
.one-third { width: 31.2%; }
|
|
.two-third { width: 65.6%; }
|
|
.one-fourth { width: 22.6%; }
|
|
.three-fourth { width: 74.2%; }
|
|
.one-fifth { width: 17.4%; }
|
|
.two-fifth { width: 38.1%; }
|
|
.three-fifth { width: 58.7%; }
|
|
.four-fifth { width: 79.4%; } |
