hexo-theme-solitude 1.0.0

package/source/css/custom.css

@@ -0,0 +1,901 @@
+@media screen and (min-width: 900px) {
+    #page-header #nav a:hover .heoicon {
+        transition: .3s;
+        opacity: 0;
+    }
+}
+
+#sidebar-menus .menus_item .not-child {
+    padding: 4px 8px !important;
+    width: 100%;
+    background: var(--sco-card-bg);
+    border-radius: 8px;
+    border: var(--style-border-always);
+    align-items: center;
+    font-size: 14px !important;
+    margin: 10px 0;
+    justify-content: center;
+}
+
+#sidebar-menus .menus_item .not-child span {
+    color: var(--sco-fontcolor) !important;
+}
+
+.meta-secondline > span {
+    opacity: .6;
+    transition: .3s;
+    margin-right: 1.1rem;
+}
+
+#category #category-bar {
+    border-radius: 0;
+}
+
+/* 侧公众号卡片 */
+#flip-wrapper .left {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.3;
+    color: white;
+}
+
+#flip-wrapper .left .title {
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+#flip-wrapper .left .desc {
+    font-size: small;
+    font-weight: 600;
+}
+
+#article-container .highlight-tools {
+    position: relative;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    overflow: hidden;
+    min-height: 1.2rem;
+    height: 2.15em;
+    background: var(--sco-secondbg);
+    border-bottom: var(--style-border-always);
+    color: var(--sco-fontcolor);
+    font-size: var(--global-font-size);
+}
+
+#article-container .highlight-tools .copy-button {
+    position: absolute;
+    right: 0.7rem;
+    cursor: pointer;
+    transition: color .2s;
+    font-size: 18px;
+}
+
+#article-container .highlight-tools .code-lang {
+    position: absolute;
+    font-weight: 700;
+    font-size: 1.15em;
+    user-select: none;
+    left: 0.6rem;
+}
+
+#article-container .code-expand-btn.expand-done {
+    display: none !important;
+}
+
+
+#article-container .bilibili_box {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    background: var(--sco-card-bg);
+    border: var(--style-border-always);
+    border-radius: 10px;
+    overflow: hidden;
+    color: var(--sco-fontcolor) !important;
+    text-decoration: none !important;
+    -webkit-transition: .3s;
+    -moz-transition: .3s;
+    -o-transition: .3s;
+    -ms-transition: .3s;
+    transition: .3s
+}
+
+#article-container .bilibili_box:hover {
+    border-color: var(--sco-theme)
+}
+
+@media screen and (max-width: 768px) {
+    #article-container .bilibili_box {
+        -webkit-box-orient: vertical;
+        -moz-box-orient: vertical;
+        -o-box-orient: vertical;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column
+    }
+}
+
+#article-container .bilibili_box .bilibili_cover {
+    width: 200px;
+    position: relative
+}
+
+@media screen and (max-width: 768px) {
+    #article-container .bilibili_box .bilibili_cover {
+        width: 100%
+    }
+}
+
+#article-container .bilibili_box .bilibili_cover img {
+    width: 100%;
+    filter: none;
+    margin: 0 !important;
+    border-radius: 0 !important
+}
+
+#article-container .bilibili_box .bilibili_cover .play_icon {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    opacity: .8;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%)
+}
+
+#article-container .bilibili_box .bilibili_cover span {
+    position: absolute;
+    bottom: 0;
+    right: 5px;
+    color: #fff;
+}
+
+#article-container .bilibili_box .bilibili_info {
+    padding: 10px 10px 10px 18px;
+    width: calc(100% - 200px);
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -o-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: distribute;
+    -moz-box-pack: distribute;
+    -o-box-pack: distribute;
+    -ms-flex-pack: distribute;
+    -webkit-justify-content: space-around;
+    justify-content: space-around
+}
+
+@media screen and (max-width: 768px) {
+    #article-container .bilibili_box .bilibili_info {
+        width: 100%;
+        padding-bottom: 25px
+    }
+}
+
+#article-container .bilibili_box .bilibili_info .title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    line-height: 1.7
+}
+
+#article-container .bilibili_box .bilibili_info .stat {
+    font-size: 15px
+}
+
+#article-container .bilibili_box .bilibili_info .stat svg {
+    margin-right: 3px;
+    font-size: 18px;
+    vertical-align: -0.15em;
+}
+
+#article-container .bilibili_box .bilibili_info .stat svg path {
+    fill: #99a9bf
+}
+
+#article-container .bilibili_box .bilibili_info .stat span {
+    margin-right: 10px
+}
+
+#article-container .bilibili_box .bilibili_info .owner {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    line-height: 1;
+    font-size: 15px;
+    margin-top: 3px
+}
+
+#article-container .bilibili_box .bilibili_info .owner .tip {
+    color: #f69;
+    border: 1px solid;
+    padding: 4px 7px;
+    font-size: 13px;
+    border-radius: 5px;
+    margin-right: 10px
+}
+
+#article-container .bilibili_box .bilibili_info .owner img {
+    width: 25px;
+    height: 25px;
+    border-radius: 50% !important;
+    object-fit: cover;
+    margin: 0 5px 0 0 !important
+}
+
+[data-theme=dark] #article-container .bilibili_box .bilibili_cover,
+[data-theme=light] #article-container .bilibili_box .bilibili_info .stat svg {
+    opacity: .8
+}
+
+/* 配置相册界面album的CSS */
+/* 相册顶部那一坨 */
+.author-content.author-content-item.album {
+    height: 19rem;
+    color: var(--sco-white);
+    overflow: hidden;
+    margin-top: 0;
+}
+
+/* 移动端那一坨 */
+@media screen and (max-width: 768px) {
+    .author-content.author-content-item.album {
+        height: 9rem;
+    }
+}
+
+#album .card-album {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin: var(--album-spacing-xxl) 0 0;
+}
+
+#album .card-album .album-content-nocover {
+    width: calc(100% / 4 - 40px);
+}
+
+#album .card-album .card {
+    list-style: none;
+    position: relative;
+    display: flex;
+    width: calc(100% / 4 - 10px);
+    padding: 10px;
+}
+
+#album .card-album .card:hover {
+    cursor: pointer;
+}
+
+#album .card_cover {
+    border-radius: var(--album-spacing-l);
+    filter: brightness(0.75) saturate(1.2) contrast(0.85);
+    transform-origin: center;
+    transform: scale(1) translateZ(0);
+    transition: filter 200ms linear, transform 200ms linear;
+    max-width: 100%;
+    overflow: hidden;
+    height: 550px;
+    width: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: var(--album-spacing-l);
+}
+
+#album .card:hover .card_cover {
+    transform: scale(1.05) translateZ(0);
+    filter: brightness(0.9) saturate(1.2) contrast(1);
+}
+
+#album .card-album:hover > .card:not(:hover) .card_cover {
+    filter: brightness(0.5) saturate(0.9) contrast(1.2) blur(20px);
+}
+
+#album .card__content {
+    left: 0;
+    padding: var(--album-spacing-l);
+    position: absolute;
+    top: 0;
+}
+
+#album .card__category {
+    color: var(--album-text-light);
+    font-size: 0.9rem;
+    margin-bottom: var(--album-spacing-s);
+    text-transform: uppercase;
+}
+
+#album .card__heading {
+    color: var(--album-text-lighter);
+    font-size: 1.9rem;
+    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
+    line-height: 1.4;
+    word-spacing: 100vw;
+}
+
+@media (min-width: 1300px) {
+    #album img.card_cover {
+        height: 600px;
+    }
+}
+
+@media (max-width: 960px) {
+    #album .card-album .card {
+        width: calc(100% / 2 - 40px);
+    }
+}
+
+@media (max-width: 540px) {
+    #album .card-album .card {
+        width: calc(100%);
+    }
+}
+
+/* 配置相册界面album_detail的CSS */
+/* 处理页面样式 */
+#album_detail .album-container-img {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+    flex-wrap: wrap;
+    margin-bottom: 0.3rem;
+}
+
+#album_detail .album-container-img .album-content-noimg {
+    width: calc(100% / 2 - 5px);
+}
+
+#album_detail .album-container-img img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 150px;
+    border-radius: 12px;
+    margin: 0 10px 0 0;
+}
+
+#album_detail .album-container-img {
+    height: 100%;
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+}
+
+#album_detail .album-content .datacont {
+    order: 0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--sco-fontcolor);
+    width: 100%;
+    line-height: 1.38;
+    border-radius: 12px;
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    text-align: justify;
+}
+
+#album_detail p {
+    margin: 0;
+}
+
+#album_detail div.album-content {
+    display: flex;
+    flex-flow: wrap;
+    border-radius: 12px;
+    width: 100%;
+    height: 100%;
+}
+
+#album_detail .timeline ul li.album-item {
+    position: relative;
+    width: 32%;
+    border: var(--style-border-always);
+    border-radius: 12px;
+    padding: 1rem 1rem 0.5rem;
+    transition: all 0.3s ease 0s;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: start;
+    align-items: flex-start;
+    background: var(--sco-card-bg);
+    box-shadow: var(--sco-shadow-border);
+    margin-right: 2%;
+}
+
+#album_detail .timeline #waterfall.show {
+    opacity: 1;
+}
+
+#album_detail .timeline #waterfall {
+    opacity: 0;
+    transition: all 0.3s ease 0s;
+}
+
+#album_detail ul.list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+
+#album_detail {
+    margin-top: 1rem;
+    width: 100%;
+}
+
+#album_detail > section > ul > li.album-item {
+    margin-bottom: 1rem;
+}
+
+#album-tips {
+    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+#album_detail .timeline ul li.album-item hr {
+    display: flex;
+    position: relative;
+    margin: 8px 0px;
+    border: 1px dashed var(--sco-theme-op);
+    width: 100%;
+}
+
+#album_detail .album-info {
+    display: flex;
+    align-items: center;
+}
+
+#album_detail > section > ul > li > div .album-info-time,
+#album_detail > section > ul > li > div .album-info-address,
+#album_detail > section > ul > li > div .album-info-from {
+    color: var(--sco-fontcolor);
+    font-size: 0.7rem;
+    background-color: var(--sco-gray-op);
+    padding: 0 8px;
+    border-radius: 20px;
+    cursor: default;
+    display: flex;
+    align-items: center;
+}
+
+#album_detail > section > ul > li > div .album-info-address,
+#album_detail > section > ul > li > div .album-info-from {
+    margin-left: 4px;
+}
+
+#album_detail > section > ul > li > div .album-info-address span,
+#album_detail > section > ul > li > div .album-info-from span {
+    margin-left: 4px;
+}
+
+#album_detail .album-info .fa-brands.fa-instagram {
+    margin-right: 8px;
+}
+
+#album_detail .album-bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 10px;
+}
+
+#album_detail .album-bottom .album-reply {
+    cursor: pointer;
+}
+
+#album_detail .timeline ul li.album-item:hover {
+    border: var(--style-border-hover);
+}
+
+#album_detail .album-content-link {
+    display: flex;
+    margin-left: 0.5rem;
+    font-size: 0.7rem;
+    align-items: center;
+    background-color: rgba(245, 108, 108, 0.13);
+    color: rgb(245, 108, 108);
+    padding: 0 8px;
+    border-radius: 20px;
+}
+
+#album_detail .album-content-link i {
+    margin-right: 3px;
+}
+
+#album_detail .album-content-link:hover {
+    background-color: var(--sco-main);
+    color: var(--sco-white);
+}
+
+body[data-type="album_detail"] #page .author-content-item .card-content .banner-button-group .banner-button:hover {
+    color: var(--sco-white);
+    border-radius: 20px !important;
+}
+
+/* 响应式 */
+@media screen and (max-width: 1300px) {
+    #album_detail .timeline ul li.album-item {
+        width: 49%;
+        margin-right: 1%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #album_detail .timeline ul li.album-item {
+        width: 100%;
+        margin-right: 0;
+    }
+}
+
+/* 我的装备 */
+.equipment-item-content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -8px;
+}
+
+.equipment-item-content-item {
+    width: calc(25% - 12px);
+    border-radius: 12px;
+    border: var(--style-border-always);
+    overflow: hidden;
+    margin: 8px 6px;
+    background: var(--sco-card-bg);
+    box-shadow: var(--sco-shadow-border);
+    min-height: 400px;
+    position: relative;
+}
+
+@media screen and (max-width: 1200px) {
+    .equipment-item-content-item {
+        width: calc(50% - 12px);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .equipment-item-content-item {
+        width: 100%;
+    }
+}
+
+.equipment-item-content-item-info {
+    padding: 8px 16px 16px 16px;
+    margin-top: 12px;
+}
+
+.equipment-item-content-item-name {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+}
+
+.equipment-item-content-item-specification {
+    font-size: 12px;
+    color: var(--sco-secondtext);
+    line-height: 1;
+    margin-bottom: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.equipment-item-content-item-description {
+    line-height: 20px;
+    color: var(--sco-secondtext);
+    height: 60px;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    font-size: 14px;
+}
+
+a.equipment-item-content-item-link {
+    font-size: 12px;
+    background: var(--sco-gray-op);
+    padding: 4px 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+a.equipment-item-content-item-link:hover {
+    background: var(--sco-main);
+    color: var(--sco-white);
+}
+
+h2.equipment-item-title {
+    line-height: 1;
+}
+
+.equipment-item-description {
+    line-height: 1;
+    margin: 4px 0 8px 0;
+    color: var(--sco-secondtext);
+}
+
+.equipment-item-content-item-cover {
+    width: 100%;
+    height: 200px;
+    background: var(--sco-secondbg);
+    display: flex;
+    justify-content: center;
+}
+
+img.equipment-item-content-item-image {
+    object-fit: cover;
+    height: 100%;
+}
+
+div#equipment {
+    margin-top: 26px;
+}
+
+.equipment-item-content-item-toolbar {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 12px;
+    left: 0;
+    width: 100%;
+    padding: 0 16px;
+}
+
+a.bber-reply {
+    cursor: pointer;
+}
+
+/*
+* twikoo
+*/
+
+.tk-footer {
+    display: none;
+}
+
+
+/* TAG Link */
+
+#post a.link-card {
+    text-decoration: none;
+    margin: 0.2rem auto;
+    background: var(--tab-botton-bg);
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-align: center;
+    align-items: center;
+    cursor: pointer;
+    text-align: left;
+    font-size: 0.575rem;
+    min-width: 200px;
+    max-width: 361px;
+    color: var(--tab-botton-color);
+    border-radius: 8px;
+}
+
+@media screen and (max-width: 425px) {
+    #post a.link-card {
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 375px) {
+    #post a.link-card {
+        width: 100%;
+    }
+}
+
+#post a.link-card:hover {
+    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+#post a.link-card div.left,
+#post a.link-card div.right {
+    pointer-events: none;
+}
+
+#post a.link-card div.left {
+    width: 48px;
+    height: 48px;
+    margin: 12px;
+    overflow: hidden;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    position: relative;
+}
+
+#post a.link-card div.left i {
+    font-size: 32px;
+    line-height: 48px;
+    margin-left: 4px;
+}
+
+#post a.link-card div.left img {
+    display: block;
+    position: absolute;
+    border-radius: 8px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#post a.link-card div.right {
+    overflow: hidden;
+    margin-right: 12px;
+}
+
+#post a.link-card p {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#post a.link-card p.text {
+    font-weight: bold;
+}
+
+#post a.link-card p.url {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    color: var(--search-input-color);
+    font-size: 0.7125rem;
+}
+
+
+/* TAG 时间线 */
+span.p.h2,
+p.p.h2 {
+    font-size: 1.375rem;
+    color: var(--sco-fontcolor);
+    padding-top: 0.8rem;
+    border-bottom: 1px solid var(--hr-border);
+}
+
+div.timenode {
+    position: relative;
+}
+
+div.timenode:before,
+div.timenode:after {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    background: var(--sco-theme);
+    width: 2px;
+    left: 7px;
+}
+
+div.timenode:before {
+    top: 0px;
+    height: 6px;
+}
+
+div.timenode:after {
+    top: 26px;
+    height: 100%;
+}
+
+div.timenode:last-child:after {
+    height: calc(100% - 26px - 16px);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+div.timenode .meta {
+    position: relative;
+    color: var(--tab-botton-color);
+    font-size: 0.375rem;
+    line-height: 32px;
+    height: 32px;
+    left: 27px;
+}
+
+div.timenode .meta:before,
+div.timenode .meta:after {
+    content: "";
+    position: absolute;
+    top: 8px;
+    z-index: 2;
+    left: -27px;
+}
+
+div.timenode .meta:before {
+    background: var(--sco-theme);
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+}
+
+div.timenode .meta:after {
+    background: var(--sco-theme);
+    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(--blockquote-bg);
+}
+
+div.timenode .body p:first-child {
+    margin-top: 0;
+}
+
+div.timenode .body p:last-child {
+    margin-bottom: 0;
+}
+
+div.timenode:hover .meta {
+    color: var(--sco-theme);
+}
+
+div.timenode:hover .meta:before {
+    background: rgba(255, 87, 34, 0.5);
+}
+
+div.timenode:hover .meta:after {
+    background: #ff5722;
+    transform: scale(1);
+}
+
+/*
+ * home list
+*/
+.recent-post-item .recent-post-info .recent-post-info-top #post-list-tips {
+    font-size: 15px;
+    color: #555535;
+}