ninesurvey/src/ninesurvey-1.0/public/styles/css/style.css

465 lines
8.2 KiB
CSS

h1{
padding: 40px 0px 9px 0px;
border-bottom: 1px solid #eee;
}
.nav a{
background: none;
color: #CFD8DC;
font-size: 14px;
padding: 5px 0px 5px 25px;
display: block;
}
.page-maxed {
max-width:1200px;
margin:auto !important;
}
/* Sidebar Styles */
.contentsidebar {
margin-left:250px;
}
#sidebar {
z-index: 1000;
position: fixed;
left: 0px;
width: 250px;
height: 100%;
overflow-y: auto;
background: #37474F;
}
#sidebar header {
background-color: #263238;
font-size: 20px;
line-height: 52px;
text-align: center;
}
#sidebar header a {
color: #fff;
display: block;
text-decoration: none;
}
#sidebar header a:hover {
color: #fff;
}
#sidebar .nav{
display: block;
margin: 0px 10px;
}
#sidebar .nav a {
padding: 0px 10px 5px 10px;
}
#sidebar .nav .last{
border-bottom: 1px solid #455A64;
padding-bottom:5px;
margin-bottom: 10px;
}
#sidebar .title {
color: #CFD8DC;
font-size: 16px;
padding: 0px 10px 0px 10px;
display: block;
text-transform: uppercase;
margin-left: 0px !important;
font-weight: bold;
}
#sidebar .nav a:hover{
background: none;
color: #ECEFF1;
}
#sidebar .nav a .fa{
margin-right: 5px;
width: 20px;
text-align: center;
}
#sidebar .nav .select-control {
padding: 0px 10px 5px 10px;
margin-top: -12px;
}
.avatar {
background-color: #343a40;
width: 35px;
height: 35px;
border-radius: 100%;
margin-top: -5px;
}
.avatar.big{
width: 90px;
height: 90px;
margin-bottom: 10px;
}
@media (max-width: 991px) {
.contentsidebar {
margin-left: auto;
}
#sidebar {
position: static;
margin:0px -15px;
width: auto;
}
}
a.btn {
color:#ffffff;
}
.btn-link {
padding:0px;
}
.media-body p {
font-size :12px;
margin-bottom:0px;
}
@media (min-width: 992px) {
#sidebar {
display: block;
}
}
{% if useheader is defined and useheader %}
#main {
padding-top:55px;
}
{% endif %}
th.dt-center, td.dt-center { text-align: center; }
/* heros */
.heroheader {
width:100%;
height:800px;
position:relative;
}
.heroheader div{
width:100%;
height:100%;
background-size: cover;
background-position: center;
color:#fff;
text-align: center;
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -105px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
.slick-dotted.slick-slider{margin-bottom:0px;}
.slick-dots {
position: absolute;
top: 135px;
left:46px;
text-align:left;
z-index: 9100;
bottom:unset;
width:auto;
}
.heroheader-dot { color:#fff; }
.herobox {
position:absolute;
float: left;
top: 0;
bottom: 0;
left: -200px;
z-index: 8000;
padding: 0;
text-align: center;
text-shadow: none;
background-color: rgba(0,0,0,0.7);
height: auto;
width: 45%;
box-shadow: 0px -1px 2px rgba(0,0,0,0.5);
margin: 0 auto;
//opacity: 0.9;
transform-origin: 50% 50%;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.herotitle {
text-align: left;
position:absolute;
//width:100%;
top: 80px;
left:50px;
z-index: 9000;
}
.herotitle h1 {
padding:0px;
border:none;
}
.heromenu {
padding-top: 30px;
font-size: 20px;
}
.herofloatmenu .avatar {
width: 20px;
height: 20px;
margin: 3px 3px 0px 0px;
}
.herofloatmenu a:hover {
text-decoration: none;
}
.heromenu .linkmenu {
font-size:16px;
padding-left: 5px;
}
.heromenu .linkmenu a {
margin-right:5px;
}
.herologo {
position: absolute;
top: 0px;
text-align: center;
width: 100%;
}
.herologo img {max-height:200px;}
@media (max-width: 980px) {
.herobox { display: none; }
.herotitle { width:100%; top: 70px; left:0px; text-align:center; }
.slick-dots { top: 120px; left: 0px; text-align: center; width: 100%; }
.heromenu .facatmenu {display: none;}
.catmenu { display:none }
.linkmenu { display:none }
.herofloatmenu a {
font-size: 40px;
}
.herofloatmenu .avatar {
height: 40px;
width:40px;
margin-top:15px;
}
}
.grid-sizer { width: 10%; margin-bottom: 0%;float:left;}
.grid-item-size { width: 10%; margin-bottom: 0%;float:left;}
.grid-item-size-2 { width: 20%; margin-bottom: 0%;float:left;}
.grid-item-size-3 { width: 30%; margin-bottom: 0%;float:left;}
.grid-item-size-4 { width: 40%; margin-bottom: 0%;float:left;}
.grid-item-size-5 { width: 40%; margin-bottom: 0%;float:left;}
.grid-item-size-6 { width: 60%; margin-bottom: 0%;float:left;}
.grid-item-size-7 { width: 70%; margin-bottom: 0%;float:left;}
.grid-item-size-8 { width: 80%; margin-bottom: 0%;float:left;}
.grid-item-size-9 { width: 90%; margin-bottom: 0%;float:left;}
.grid-item-full { width: 100%; margin-bottom: 0%; font-size:20px;float:left; }
.grid-item-full h1 {margin: 0; border:none; padding: 20px 0px 0px 10px; }
.gutter-sizer { width: 0%;float:left; }
@media (max-width: 980px) {
.grid-sizer { width: 50%; margin-bottom: 0%;}
.grid-item-size { width: 50%; margin-bottom: 0%;}
}
.foliomenu {
position: fixed;
width:100%;
height:60px;
background-color: var(--colorbgbodydark) ;
z-index: 100000;
display:none;
padding-left:10px;
border-bottom: 1px solid var(--colorftbodydark);
}
.foliomenu .logo { float:left; height:40px; margin-top:7px }
.foliomenu .avatar { height: 20px; margin: 3px 3px 0px 0px; width: 20px; }
.foliomenu div { padding: 10px; line-height:35px; float:left;}
.foliomenu a {
color: var(--colorftbodydark);
font-size: 15px;
}
.foliomenu .float-right a:hover {
text-decoration: none;
}
.foliomenu .fa { font-size: 14px; color: var(--colorftbodydark);}
.foliotop {
float:right;
position:fixed;
bottom: 10px;
right:10px;
z-index: 100000;
background-color: var(--colorbgbodydark) ;
padding:10px;
border-radius: 100%;
width:55px;
height:55px;
text-align: center;
line-height: 28px;
border: 1px solid var(--colorbgbodylight);
display:none;
}
.foliotop a {
color: var(--colorftbodydark);
font-size: 25px;
}
@media (max-width: 980px) {
.herofloatmenu {
display:none;
}
.foliomenu {
display: block!important;
}
.foliomenu a {
font-size:30px;
}
.foliomenu .float-right a {
margin-top: -8px;
}
.foliomenu .float-right img {
height:35px;
width:35px;
margin-top:0px;
}
.foliomenu .float-right .fa {
font-size:30px!important;
}
}
.linkurl a {
background-color: var(--colorbgbodylight) ;
color: var(--colorftbodylight)!important;
font-size: 14px;
padding: 5px;
display: inline-block;
margin: 0px 10px 10px 0px;
}
.contactdescription {
max-width:300px;
text-align:justify;
}