Difference between revisions of "Team:SVCE Chennai/CSS"
Abrahamrkj (Talk | contribs) |
Abrahamrkj (Talk | contribs) |
||
Line 372: | Line 372: | ||
color: #3492BC; | color: #3492BC; | ||
letter-spacing: 2px; | letter-spacing: 2px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navbar-brand { | ||
+ | width: 70px; | ||
+ | height: 50px; | ||
+ | background-size: 50px; | ||
+ | } | ||
+ | |||
+ | .nav-tabs { | ||
+ | display: inline-block; | ||
+ | border-bottom: none; | ||
+ | padding-top: 15px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | .nav-tabs > li > a, | ||
+ | .nav-tabs > li > a:hover, | ||
+ | .nav-tabs > li > a:focus, | ||
+ | .nav-tabs > li.active > a, | ||
+ | .nav-tabs > li.active > a:hover, | ||
+ | .nav-tabs > li.active > a:focus { | ||
+ | border: none; | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | |||
+ | .nav-list { border-bottom: 1px solid #eee; } | ||
+ | .nav-list > li { | ||
+ | padding: 20px 15px 15px; | ||
+ | border-left: 1px solid #eee; | ||
+ | } | ||
+ | .nav-list > li:last-child { border-right: 1px solid #eee; } | ||
+ | .nav-list > li > a:hover { text-decoration: none; } | ||
+ | .nav-list > li > a > span { | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .mega-dropdown { position: static !important; } | ||
+ | .mega-dropdown-menu { | ||
+ | padding: 20px 15px 15px; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
} | } |
Revision as of 11:19, 10 September 2015
- content, html, body, #globalWrapper {
width: 100%; height: 100%;
} body{ background: #fff; } .firstHeading{ display:none; } .hide { display:none; }
.loading {
position: absolute; left: 50%; top: 50%; margin: -60px 0 0 -100px; background: #fff; width: 150px; height: 150px; border-radius: 100%;
} .animateClassIntro{
animation: moveToCorner 2s 1 linear forwards;
} .loading:after {
content: ; background: trasparent; width: 140%; height: 140%; position: absolute; border-radius: 100%; top: -20%; left: -20%; opacity: 0.7; box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
} .talktext p { font-size: 15px; display: inline;
padding-right: 5px;
}
@keyframes rotate {
0% { box-shadow: 0px 0px 129px -18px rgba(0,0,0,1); } 50%{ box-shadow: none; } } 100% { box-shadow: 0px 0px 129px -18px rgba(0,0,0,1); }
}
.minioImg{ width: 150px; }
/* CSS talk bubble */
.talk-bubble {
margin: 40px;
display: inline-block; position: absolute; left: 96px; width: 200px; height: auto; background-color: #5FC2EA;
bottom: 90px; color:#fff; } .border{
border: 8px solid #666;
} .round{
border-radius: 30px;
-webkit-border-radius: 30px; -moz-border-radius: 30px;
}
/* Right triangle placed top left flush. */ .tri-right.border.left-top:before { content: ' '; position: absolute; width: 0; height: 0;
left: -40px;
right: auto;
top: -8px;
bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.left-top:after{ content: ' '; position: absolute; width: 0; height: 0;
left: -20px;
right: auto;
top: 0px;
bottom: auto; border: 22px solid; border-color: #5FC2EA transparent transparent transparent; }
/* Right triangle, left side slightly down */ .tri-right.border.left-in:before { content: ' '; position: absolute; width: 0; height: 0;
left: -40px;
right: auto;
top: 30px;
bottom: auto; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.left-in:after{ content: ' '; position: absolute; width: 0; height: 0;
left: -20px;
right: auto;
top: 38px;
bottom: auto; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }
/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left:before { content: ' '; position: absolute; width: 0; height: 0; left: -8px;
right: auto; top: auto;
bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; } .tri-right.btm-left:after{ content: ' '; position: absolute; width: 0; height: 0; left: 0px;
right: auto; top: auto;
bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA; }
/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px;
right: auto; top: auto;
bottom: -40px; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.btm-left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px;
right: auto; top: auto;
bottom: -20px; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }
/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right-in:before { content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: 30px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right-in:after{ content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: 38px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; } /* left: -8px;
right: auto; top: auto;
bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; left: 0px;
right: auto; top: auto;
bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA;
/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right:before { content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: -8px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right:after{ content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: 0px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }
/* Right triangle, right side slightly down*/ .tri-right.border.right-in:before { content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: -40px;
top: 30px;
bottom: auto; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.right-in:after{ content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: -20px;
top: 38px;
bottom: auto; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }
/* Right triangle placed top right flush. */ .tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: -40px;
top: -8px;
bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0;
left: auto;
right: -20px;
top: 0px;
bottom: auto; border: 20px solid; border-color: #5FC2EA transparent transparent transparent; }
/* talk bubble contents */ .talktext{
padding: 1em;
text-align: left;
line-height: 1.5em;
} .talktext p{
/* remove webkit p margins */ -webkit-margin-before: 0em; -webkit-margin-after: 0em;
} .typed-cursor{
opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite;
} @keyframes blink{
0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }
} @-webkit-keyframes blink{
0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }
} @-moz-keyframes blink{
0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }
}
.footer {
position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5;
} .container{ width: 100% } .navBarIGEM{ margin-top: 15px;}
@keyframes moveToCorner {
0% { opacity: 1;
}
100% { left:80px;
top: 98%; opacity: 0; } }
.footer{ background: #fff; } .speech{
color: #3492BC; letter-spacing: 2px;
}
.navbar-brand {
width: 70px; height: 50px; background-size: 50px;
}
.nav-tabs {
display: inline-block; border-bottom: none; padding-top: 15px; font-weight: bold;
} .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
border: none; border-radius: 0;
}
.nav-list { border-bottom: 1px solid #eee; } .nav-list > li {
padding: 20px 15px 15px; border-left: 1px solid #eee;
} .nav-list > li:last-child { border-right: 1px solid #eee; } .nav-list > li > a:hover { text-decoration: none; } .nav-list > li > a > span {
display: block; font-weight: bold; text-transform: uppercase;
}
.mega-dropdown { position: static !important; } .mega-dropdown-menu {
padding: 20px 15px 15px; text-align: center; width: 100%;
}