netstix/public/css/style.css
2022-11-27 20:58:22 +08:00

303 lines
4.4 KiB
CSS

/* universal */
@media (min-width: 1200px) {
.container{
max-width: 800px;
}
}
html, body {
background: #fafafa;
color: #4b4f54;
font-family: 'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 14px;
height: 100%;
}
body.container {
padding: 0;
}
a {
color: #125688;
font-weight: 600;
}
a:hover{
text-decoration: none;
color: #4b4f54;
}
.form{
min-height: 500px;
margin-bottom: 50px;
}
.form label{
font-weight: normal;
}
h1{
display: inline-block;
margin: 0;
color: #4b4f54;
font-size: 36px;
}
header{
margin: 0 0 30px 0;
padding: 0 0 10px 0;
border-bottom: 2px solid #4b4f54;
}
header b{
font-size: 16px;
padding: 10px 10px 10px 0;
}
header a i{
font-size: 20px;
padding-right: 10px;
}
header a{
padding: 10px 10px 10px 0;
}
form h2{
margin-bottom: 40px;
}
input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea {
outline: none;
box-shadow:none !important;
border: none;
}
input.form-control, textarea{
background: #fafafa;
margin-bottom: 20px;
border-radius: 0;
border-bottom: 1px solid #ccc;
}
button[type='submit']{
background: #e9e9e9;
margin: 20px 0 30px;
border: none;
border-radius: 0;
color: #4b4f54;
font-weight: 600;
}
button[type='submit']:hover{
background: #ccc;
border-radius: 0;
color: #4b4f54;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 500px #fafafa inset !important;
}
.alert{
font-size: 10px;
background: #125688;
color: white;
text-align: center;
display: block;
text-transform: uppercase;
margin: 0 auto;
}
p.alert{
margin: 0;
}
/* navbar */
nav {
width: 100%;
height: 70px;
background: white;
border-radius: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #edeeee;
}
.navbar{
margin-bottom: 0px;
}
.navbar-toggle:before{
content:"\e055";;
font-family:"Glyphicons Halflings";
line-height:1;
margin:10px;
display:inline-block;
}
.navbar-toggle{
margin-bottom: -16px;
}
.nav > li{
background-color: white;
padding-left: 10px;
}
.nav > li > a{
font-size:14px;
padding: 24px 7px;
}
.nav > li > a:hover, .nav > li > a:focus, .nav > li > a:visited{
background: white;
}
.navbar-brand {
background: url('../images/netstix.png') no-repeat center center;
display:block;
height:29px;
text-indent:-9999px;
width:104px;
margin-top: 21px;
margin-left: 10px;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
background-color: white;
color: #125688;
}
.dropdown-menu > li > a, .dropdown-menu > li > button{
background: white;
color: #125688;
font-weight: 600;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > button:hover{
text-decoration: none;
background: white;
color: #4b4f54;
}
.navbar-right .dropdown-menu{
text-align: center;
left: -50px
}
/* content */
.content{
min-height: 100%;
}
.content > div{
margin-top: 120px;
padding: 30px 50px;
padding-bottom: 80px;
}
.description{
margin-bottom: 120px;
font-size: 20px;
}
.description figure{
padding-top: 25px;
}
.description .criteria h3{
margin: 0 0 15px;
padding: 0 0 5px;
border-bottom: 2px solid #4b4f54;
}
li.list-group-item{
background: transparent;
border:0;
padding:25px;
border-bottom: 1px solid #e0e0e0;
}
li.list-group-item > i{
font-size: 20px;
padding-right: 25px;
}
li.list-group-item > img{
margin-right: 25px;
}
li.list-group-item .pull-right{
padding-top: 10px;
}
/* footer */
footer {
padding: 10px;
height: 80px;
text-align: center;
font-size: 12px;
position: relative;
margin-top: -80px;
clear:both;
}
/* mobile */
@media (max-width: 767px){
body{
text-align: center;
}
h1{
font-size: 24px;
}
h2{
font-size: 20px;
}
h3{
font-size: 18px;
}
header{
margin-bottom: 20px;
}
.achievements li > a, .user li > a {
display: block;
}
.achievements ul > li > img, .user ul > li > img {
margin: 10px auto;
}
figure img.pull-right{
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
float: none !important;
}
.nav{
position: absolute;
width: 100%;
z-index: 9999;
background: white;
padding-bottom: 20px;
}
.nav > li > a {
padding: 7px 10px 7px 0;
}
.nav > li > button{
color: #125688;
font-weight: 600;
}
.content > div{
margin-top: 22px;
}
.description{
margin-bottom: 80px;
font-size: 16px;
}
}