init

source/css/barrager.css

@@ -0,0 +1,81 @@
+.barrage {
+    position: fixed;
+    bottom: 70px;
+    right: -500px;
+    display: inline-block;
+    width: 500px;
+    z-index: 99999
+}
+
+.barrage_box {
+    background-color: rgba(0, 0, 0, .5);
+    padding-right: 8px;
+    height: 40px;
+    display: inline-block;
+    border-radius: 25px;
+    transition: all .3s;
+}
+
+.barrage_box .portrait {
+    display: inline-block;
+    margin-top: 4px;
+    margin-left: 4px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.barrage_box .portrait img {
+    width: 100%;
+    height: 100%;
+}
+
+.barrage_box div.p a {
+    margin-right: 2px;
+    font-size: 14px;
+    color: #fff;
+    line-height: 40px;
+    margin-left: 18px;
+}
+
+.barrage_box div.p a:hover {
+    text-decoration: underline;
+}
+
+.barrage_box .close {
+    visibility: hidden;
+    opacity: 0;
+    text-align: center;
+    width: 25px;
+    height: 25px;
+    margin-left: 20px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, .1);
+    margin-top: 8px;
+    background-image: url(/medias/barrager/close.png);
+}
+
+.barrage_box:hover .close {
+    visibility: visible;
+    opacity: 1;
+}
+
+.barrage_box .close a {
+    display: block;
+}
+
+.barrage_box .close .icon-close {
+    font-size: 14px;
+    color: rgba(255, 255, 255, .5);
+    display: inline-block;
+    margin-top: 5px;
+}
+
+.barrage .z {
+    float: left !important;
+}
+
+.barrage a {
+    text-decoration: none;
+}

source/css/bb.css

@@ -0,0 +1,125 @@
+div.timenode {
+    position: relative;
+}
+
+div.timenode:before,
+div.timenode:after {
+    content: '';
+    z-index: 1;
+    position: absolute;
+    background: rgba(68, 215, 182, 0.5);
+    width: 2px;
+    left: 7px;
+}
+
+div.timenode:before {
+    top: 0px;
+    height: 6px;
+}
+
+div.timenode:after {
+    top: 26px;
+    height: calc(100% - 26px);
+}
+
+div.timenode:last-child:after {
+    height: calc(100% - 26px - 16px);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+div.timenode .meta,
+div.timenode .body {
+    max-width: calc(100% - 24px);
+}
+
+div.timenode .meta {
+    position: relative;
+    color: var(--color-meta);
+    font-size: 0.875rem;
+    line-height: 32px;
+    height: 32px;
+}
+
+div.timenode .meta:before,
+div.timenode .meta:after {
+    content: '';
+    position: absolute;
+    top: 8px;
+    z-index: 2;
+}
+
+div.timenode .meta:before {
+    background: rgba(68, 215, 182, 0.5);
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+}
+
+div.timenode .meta:after {
+    background: #44d7b6;
+    margin-left: 2px;
+    margin-top: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    transform: scale(0.5);
+    transition: all 0.28s ease;
+    -moz-transition: all 0.28s ease;
+    -webkit-transition: all 0.28s ease;
+    -o-transition: all 0.28s ease;
+}
+
+div.timenode .meta p {
+    font-weight: bold;
+    margin: 0 0 0 24px;
+}
+
+div.timenode .body {
+    margin: 4px 0 16px 24px;
+    padding: 16px;
+    border-radius: 8px;
+    background: var(--color-block);
+    display: inline-block;
+}
+
+div.timenode .body:empty {
+    display: none;
+}
+
+div.timenode .body > *:first-child {
+    margin-top: 0.25em;
+}
+
+div.timenode .body > *:last-child {
+    margin-bottom: 0.25em;
+}
+
+div.timenode .body .highlight {
+    border: 1px solid #e4e4e4;
+}
+
+div.timenode:hover .meta {
+    color: var(--color-text);
+}
+
+div.timenode:hover .meta:before {
+    background: rgba(255, 87, 34, 0.5);
+}
+
+div.timenode:hover .meta:after {
+    background: #ff5722;
+    transform: scale(1);
+}
+
+div.timenode .body {
+    margin: 0 0 0 24px;
+    padding: 16px;
+    border-radius: 8px;
+    background: #f6f6f6;
+    display: inline-block;
+}
+
+div.timenode time {
+    margin-left: 20px;
+}

source/css/gallery.css

@@ -0,0 +1,86 @@
+.gallery-wrapper{
+    padding-top: 30px;
+  }
+  .gallery-wrapper .gallery-box{
+    padding: 5px !important;
+  }
+
+  .gallery-wrapper .gallery-item {
+    display: block;
+    overflow: hidden;
+    background-color: #fff;
+    padding: 5px;
+    padding-bottom: 0;
+    position: relative;
+    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+  }
+
+  .gallery-cover-box{
+    width: 100%;
+    padding-top: 60%;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    background: center center no-repeat;
+    -webkit-background-size: cover;
+    background-size: cover;
+  }
+
+  .gallery-cover-box .gallery-cover-img {
+    display: inline-block;
+    width: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+  .gallery-item .gallery-name{
+    font-size: 14px;
+    line-height: 24px;
+    text-align: center;
+    color: #666;
+    margin: 0;
+  }
+
+  .waterfall {
+    column-count: 3;
+    column-gap: 1em;
+  }
+  .photo-wrapper{
+    padding-top: 20px;
+  }
+  .photo-item {
+    display: block;
+    padding: 10px;
+    padding-bottom: 0;
+    margin-bottom: 14px;
+    font-size: 0;
+    -moz-page-break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    break-inside: avoid;
+    background: white;
+    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
+  }
+  .photo-item img {
+    width: 100%;
+  }
+  .photo-item .photo-name{
+    font-size: 14px;
+    line-height: 30px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-top: 1px solid #dddddd;
+  }
+
+  /*适配移动端布局*/
+  @media only screen and (max-width: 601px) {
+    .waterfall {
+      column-count: 2;
+      column-gap: 1em;
+    }
+  }