jiangjiazhi / center

hreader_layout.css 5.6 KB
edit raw blame history 
   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
.search-box { position: relative;}
.search-box input {  background-color: #f2f2f2; border-radius: 15px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}
.search-box .search-btn {
	position: absolute;
	right: 18px;
	top: 12px;
	font-size: 18px;
	color: #999;
	background-color: transparent;
	border: none;
	outline: none;
	}
.search-box .search-btn:hover {color: #5F8FDC; }
.search-box input:hover {background-color: #fff;}

@media (min-width: 1200px) {
	.container {
		width: 1010px;
	}
}

/* header */
.top-header {position: relative;height:52px;}

.logo { float: left; padding: 5px 8px 8px 15px; font-size: 18px; line-height: 20px; height: 50px; }
.logo img { height: 32px; margin-top: 4px;}

.navbar .sign { }
.navbar .nav .signin, .navbar .nav .signup {
	padding: 7px 12px; margin: 8px 6px; border-radius: 2px; color: #fff; text-align: center;
}
.navbar .nav .signin { background-color: #00aed1; }
.navbar .nav .signup { background-color: #1cba11; }

.navbar .nav .signin:hover { background-color: #22BBDA; }
.navbar .nav .signup:hover { background-color: #25D618; }

.navbar .nav .publish {
	padding: 3px 15px; margin: 12px 6px; border-radius: 2px; color: #fff; text-align: center; background-color: #22BBDA;
}

.navbar .nav .publish:hover { background-color: #00aed1; }

.navbar .nav .publishs { min-width: 140px; }
.navbar .nav .publishs>li>a { padding: 5px 20px; font-size: 15px;}
.navbar .nav .publishs .icon { width: 18px; margin-right: 10px;}

.navbar .nav .publishs li:nth-child(n) a {color: #A576F7;}
.navbar .nav .publishs li:nth-child(2n) a {color: #5EBCF2;}

.navbar .nav .ava { padding: 4px 12px; margin: 4px 0 4px 0; transition: .15s all ease; }
.navbar .nav .logout { font-size: 18px; padding: 4px 12px; margin: 12px 15px 5px 0px; transition: .15s all ease; }

.navbar .nav>li .ava img { position: relative; width: 34px; height: 34px; margin: 0 auto; }
.navbar .nav>li .ava:hover { color: #428bca; border-color: #428bca; }

/* main */
.wrap { position: relative; background-color: #f6f6f6; padding-top: 20px; padding-bottom: 30px; min-height: 520px;}
.main { margin: 0;}
.side-left {}
.side-right { padding: 0 0 0 15px; margin-left: -15px;}

/*注册OR登录*/
.or {background:#000000;color: #999;display: inline-block;width:26px;height:26x;line-height:26px;position: absolute;z-index: 2;margin: 12px 0px 0px -12px;border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
text-align:center;
font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; 
font-weight:bold;font-size:12px; 
}

/* footer */

footer { background-color: #3a3e47; }
footer .mode-link { margin: 15px auto 25px; }
footer .mode-link .t-h3 { font-size: 14px; color: #b7bac1; line-height: 24px; border-bottom: 1px solid #484c57; }
footer .mode-link .t-h3 a { color: #b7bac1; }
footer .mode-link ul.list-inline li { line-height: 26px; }
footer .mode-link ul.list-inline li a { color: #9398A2; font-size: 12px; }
footer .mode-link ul.list-inline li a:hover { color: #b3c3d6; }

footer .copy-right { margin-top: 25px; position: relative; }
footer .copy-right { border-bottom: 1px solid #31353c; line-height: 28px; padding-bottom: 20px; display: block; }
footer .copy-right,footer .copy-right span a { color: #9398A2; font-size: 12px;}

footer .footer-nav { background-color: #2d3037; height: 40px; line-height: 40px; border-bottom: 1px solid #26292e; text-align: center; }
footer .footer-nav ul { margin: 0 auto; display: inline-block; }
footer .footer-nav  ul li { border-right: 1px solid #26292e; padding: 0; float: left; line-height: 39px; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
footer .footer-nav  ul li:first-child { border-left: 1px solid #26292e; }
footer .footer-nav  ul li:hover { background-color: #3a3e47; }
footer .footer-nav  ul li a { color: #b7bac1; display: block; padding: 0 8px; }

.player {width:480px; height:400px; margin-left:auto; margin-right:auto;}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.side-right { padding: 0 15px 0 15px; margin-left: 0;}

	/*grids*/
	.masonry-grid .masonry-entry.span_1_of_3,
	.masonry-grid .masonry-entry.span_1_of_4 { width: 47.6% }

	.site-content {width: 100%; max-width: 100%;}
}
/* Mobile (Portrait & Landscape)
================================================== */
@media only screen and (max-width: 767px) {
	.side-right { padding: 0 15px 0 15px; margin-left: 0;}
	.user-nav.first {margin-top: 15px;}

	.col { width: 100%; margin-left: 0; margin-bottom: 25px; }
	.masonry-grid { margin-left: 0; margin-right: 0; }
	.masonry-entry { width: 47.5% !important; margin-bottom: 25px !important; }

	.stream-head .user-post .act-icon { padding: 22px 30px; }
}
/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.masonry-grid { max-width: 480px; width: 80% !important; margin-left: auto; margin-right: auto; }
	.masonry-entry { width:100% !important; }

	.player {width:400px; height:334px;}

	.stream-head .user-post .act-icon { padding: 12px 20px; }
}
/* Mobile (Portrait only)
================================================== */
@media only screen and (max-width: 479px) {

	.masonry-entry {
		width: 100% !important;
		margin-bottom: 25px !important;
	}

	.player {
		width: 320px;
		height: 200px;
	}

	.stream-head .user-post .act-icon { padding: 20px 20px;}
	.stream-head .user-post .act-icon i { font-size: 22px;}
	.stream-head .user-post .act-icon .tip {display: none;}
}