app.css

/*、Scroll-up-button*/
.scrollToTop{
    width:48px;
    height:48px;
    text-decoration: none;
    position:fixed;
    top:500px;
    right:20px;
    display:none;
    background: url('/assets/images/scroll-up.png') no-repeat 0px 0px;
}
.scrollToTop:hover{
    text-decoration:none;
}
/*Default*/
.justified {
    text-align: justify;
}

.publish-tag {
    font-variant: small-caps;
    color: #aaa;
    padding-bottom: 10px;
}

.image-center {
    margin: 0 auto;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  }
}


.container > header {
	color: #2672EC;
}


.tile {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	background: #fff;
	padding: 20px;
	margin-bottom: 30px;
	height: 160px;
}

.tile > .title {
  margin-top: 0px;
}

.purple, .blue, .red, .orange, .green {
    color: #fff;
}

.purple {
    background: #5133AB;
}

.red {
    background: #AC193D;
}

.green {
    background: #00A600;
}

.blue {
    background: #007fff;
}

.orange {
    background: #DC572E;
}

.left-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    margin-left: -30px;
}

.left-nav-item {
    font-size: 18px;
    text-indent: 100px;
    line-height: 50px;
}

.left-nav-item a{
    display: block;
    text-decoration: none;
    color:#fff;
}

/*背景对比色*/
.purple .left-nav-item a:hover{
    text-decoration: none;
    color: #fff;
    background: #4D2488;
}
.red .left-nav-item a:hover{
    text-decoration: none;
    color: #fff;
    background: #8B162B;
}
.green .left-nav-item a:hover{
    text-decoration: none;
    color: #fff;
    background: #007700;
}
.blue .left-nav-item a:hover{
    text-decoration: none;
    color: #fff;
    background: #0062C4;
}
.orange .left-nav-item a:hover{
    text-decoration: none;
    color: #fff;
    background: #C53E10;
}

.purple .left-nav-selected {
  background: #4D2488;
}

.red .left-nav-selected {
  background: #8B162B;
}

.green .left-nav-selected {
    background: #007700;
}
.blue .left-nav-selected {
    background: #0062C4;
}
.orange .left-nav-selected {
    background: #C53E10;
}

.alink {
    font-size: 18px;
}

.tags {
  text-align: justify;
}

li.purple > a,
li.purple > a:hover,
li.purple > a:focus {
    color: #fff;
    background: #5133AB;
    text-decoration: none;
}

li.blue > a,
li.blue > a:hover,
li.blue > a:focus {
    color: #fff;
    background: #007fff;
    text-decoration: none;
}

li.red > a,
li.red > a:hover,
li.red > a:focus {
    color: #fff;
    background: #AC193D;
    text-decoration: none;
}

li.orange > a,
li.orange > a:hover,
li.orange > a:focus {
    color: #fff;
    background: #DC572E;
    text-decoration: none;
}

li.green > a,
li.green > a:hover,
li.green > a:focus {
    color: #fff;
    background: #00A600;
    text-decoration: none;
}

.btn-purple {
    color: #fff;
    background: #5133AB;
}

.btn-blue {
    color: #fff;
    background: #007fff;
}

.btn-red {
    color: #fff;
    background: #AC193D;
}

.btn-orange {
    color: #fff;
    background: #DC572E;
}

.btn-green {
    color: #fff;
    background: #00A600;
}

a.purple-link,
a.purple-link:hover,
a.purple-link:focus{
    color: #5133AB;
}

a.red-link,
a.red-link:hover,
a.red-link:focus {
    color: #AC193D;
}

a.green-link,
a.green-link:hover,
a.green-link:focus {
    color: #00A600;
}

a.blue-link,
a.blue-link:hover,
a.blue-link:focus {
    color: #007fff;
}

a.orange-link,
a.orange-link:hover,
a.orange-link:focus {
    color: #DC572E;
}

.icon {
    background-image: url("../images/icon.png");
    background-repeat: no-repeat;
    list-style: none outside none;
}

.icon-back{background-position:-966px -40px ; width: 48px ; height: 48px;display:inline-block;text-decoration:none}